/************************************************************************* * This is the stylesheet for all pages of the MUMPS website * These pages are structured as follows: * banner: LOGO MUltifrontal Massively.... * Title of the page | * < content > | Right navbar * ... | * ... | * ------------------------------ * footer: Last update: ... * * In this stylesheet, the properties (dimensions, position, appearance and * behaviour) of the various elements of this layout are defined. To ease * maintaining the look of the page, when a property is common or even related * to the property(ies) of another element (DIV), so that they should be changed * altogether or not, then comments name the related properties explicitly. We * could have "factorized" all these properties, but this mean does not cover * all cases and it is more readble to have everything that deals with a DIV at * the same place. * * Base colors of this layout are the pastel colors of the background parasol: * #FF8080 (red), #FFFFDD (yellow), #DAFFDA (green), #C0C0FF (blue). * We added a slightly darker blue for the header and footer borders : #7070FF. * It is also used for hypertext links and header fonts. */ /*: text is bold and light red. */ b { color : #FF8080; } /* Redefine the style of the tag : text is bold and dark blue. */ a { font-weight : bold; color : #7070FF; text-decoration : none; } /* Redefine the style of the tag when mouse is over: * text is bold and light red. */ a:hover { font-weight : bold; text-decoration : none; color : #FF8080; } /* Define properties common to all images. */ img { display : block; /* Necessary to avoid cross-browser bugs */ margin : 0; padding : 0; background-color: transparent; /* In case images are not displayed */ } /********************************************* * Definition of the header banner */ div#header { position : fixed; z-index : 5; top : 0; left : 0; padding : 5px 0; /* padding-top and -bottom = 5px... */ width : 100%; font-size : 2em; /* header.font-size = 2 * body.font-size */ font-weight : bold; line-height : 1.25em; text-align : left; color : #FFFFDD; background-color: #C0C0FF; border-bottom : 2px solid #7070FF; display : flex; /* For content to be centered vertically */ } div#header #logo { float : left; margin : 0 0 0 auto; /* center v. and from the left */ padding : 0; } div#header #logo img { max-width : 5em; padding : 0; } div#header h1 { float : left; margin : 0 auto 0 0; /* center v. and from the right */ padding : 0 0 0 .5em; font-size : 1em; } div#header b { color: #777; } /************************************************* * Definition of the container of the middle part */ div#contentWrapper { margin : 0; margin-right : 175px; /* parasol is 175px-wide on the right side */ /* padding-top = 2 * header line height, to let the title be on 2 lines * !!! header font size = 200%, this font size = 100% !!! * padding-bottom = footer height (1.5*.8) */ padding : 5em 0 1.2em 0; text-align : center; /* this actually centers the H2 horizontally */ /* background : #FFFFDD url(../img/texture.jpg) repeat top right; */ } /************************************************* * Definition of the content style * and re-styling of some basic HTML tags... */ /* H2 style */ div#contentWrapper h2 { display : inline; margin : 0 auto 2em auto; /* top/bottom and left/right */ padding : .1em 1em; /* idem, proportionnally to h2.font-size */ line-height : 1.5em; /* 1.5 * font-size = 2.25 * basic font-size */ font-size : 1.5em; font-style : italic; font-variant : small-caps; color : #FF8080; background-color: #DAFFDA; } /* A simple vertical spacer */ div#contentWrapper .spacer { display : block; clear : both; height : 1.5em; } /* Trick to avoid hiding the anchor when targeted. * With the fixed page header, if the URL ends up with #target, then the browser * is likely to scroll until the target anchor is at the top of the page, and * then hidden by the fixed header. */ div#contentWrapper .anchor { height : 7em; /* 7em > header height, as long as font size > 6px */ margin-top : -7em; /* so that it takes no space on the page */ visibility : hidden; /* invisible, but still there */ display : block; /* display:none => the browser would not scroll */ } div#contentWrapper #content { margin : 0 auto; /* left/right=auto centers content horizontally */ padding : 0 20px; /* indentation - used by H3 and HR.wide */ /* combined with auto margins, this leaves 2% margins at least on both sides */ width : 96%; max-width : 700px; /* text too wide is hard to read */ text-align : justify; /* Serif font for the text content */ font-family : serif, Georgia, "Times New Roman"; } /* H3 style */ div#contentWrapper #content h3 { display : inline-block; margin : 2em 1em 1em -10px; /* get rid of #content indentation */ padding : 0; font-size : 1.2em; font-variant : small-caps; color : #7070FF; border-bottom : #FF8080 1px solid; } /* P style */ div#contentWrapper #content p { margin : .65em 0 0 0; line-height : 1.3em; } /* HR style */ div#contentWrapper #content hr { /* FIXME * . IE's take 1px height for an ugly grey bar. * . IE's and Gecko based browsers include the borders in height. * . Opera and WebKit engine add the borders to this height. * It is right but the only ones I tested to do so. */ clear : both; margin : 1em 20%; height : 2px; border : 0; border-top : 2px solid #FF8080; background-color: #C0C0FF; border-bottom : 2px solid #DAFFDA; } /* Full-width HR style */ div#contentWrapper #content hr.wide { margin : 1em -10px 1em -10px; /* get rid of #content indentation */ height : 2px; width : 100%; } div#contentWrapper #content ul { margin-bottom : 1.3em; /* line-height */ } div#contentWrapper #content ul li { line-height : 1.3em; margin-bottom : .65em; } /************************************************ * Definition of the right side panel containers */ /* This element will contain the rightCol DIV */ div#contentWrapper #rightColWrapper { position : fixed; /* No scroll down for the right side */ top : 0; right : 0 !important; /* margin-top = header border + header padding-top and -bottom */ margin-top : 12px; /* padding-top = 2 * header line height, to let the title be on 2 lines * !!! header font size = 200%, this font size = 100% !!! */ padding : 5em 0 0 0; width : 175px; /* width of ../img/smallPARASOL.jpg */ height : 0; /* Hide that container and allow scrolling */ text-align : left; background-color: transparent; } /* The right side container for the menu and news */ div#contentWrapper #rightColWrapper #rightCol { float : right; /* push the right side to the right :-) */ margin-top : 0; margin-bottom : 1.2em; /* leave enough space for the fixed footer */ padding : 0; width : 175px; /* width of ../img/smallPARASOL.jpg */ height : 800px; /* if the container is too small for its content, then auto add scrollbar(s) */ overflow : auto; background-color: transparent; /* let the parasols be visible ! */ } div#contentWrapper #rightColWrapper #rightCol .rightBox { margin : 0; padding : 0; text-align : left; background-color: transparent; /*#FFFFDD ;*/ } /******************************************************** * Definition of the menu style so that it can be * defined with basic