/* Stylesheet for new Mailman html pages. */ /* colours are approximately PMS 340, 375 and 343 or tints thereof. ** - hue 158 and 82 degrees. Optmised for looks. */ body { color: #02402B; background: #90E300; font-family: "Myriad Pro", "Myriad MM", Myriad, "Frutiger Next", "Frutiger", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Luxi Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; padding: 0; margin: 0; } img { border: none; } /* top anchor - absolute positioning forces the page ** back to the REAL top when the link is clicked. */ #top { position: absolute; top: 0; left: 0; } h5#toplink { text-align: center; margin: 0 0 20px 0; } #toplink img { vertical-align: bottom; } /* BODYWRAP ** This div allows the whole page to appear inside a border. ** Previously these attributes were assigned to and some ** of the current attributes were assigned to , but ** this produced an amusing but very odd result in IE6/Win, whereby ** the scroll bars were displayed inside the element's borders, ** and the element's background was displayed inside them (but ** with the background colour)! ** So, at the risk of divitis... */ #bodywrap { padding: 0 20px; margin: 20px auto 15px auto; min-width: 535px; max-width: 750px; } /* ** The header is formed of three divs wrapped together ** to allow the different background graphics to work together. */ #lefthead { background: url(graphics/hl.jpg) top left no-repeat; } #righthead { background: url(graphics/hr.jpg) top right no-repeat; margin-left: 32px; } #header { background: url(graphics/headback.jpg) top left repeat-x; padding: 21px 0 16px 0; margin: 0 32px 0 0; } #logo { float: right; border: none; margin: 5px 0 0 0; } h1 { text-align: center; font-size: 30px; line-height: 30px; color: #FFF; margin: 8px 189px 2px 5px; } h2 { text-align: center; font-size: 21px; line-height: 21px; color: #FFF; margin: 2px 189px 0 5px; } /* ** The main part of the page uses a "double-wrapping" ** of divs to produce a 3-column layout. ** ** "left" produces the left border of the page ** and "right" gives the right border. ** ** "centre" is everything in between the borders down to the Mailman Footer. ** (It also represents a nice opportunity to spell it the east-atlantic way. :-) */ #left { background: #FFF url(graphics/left.jpg) top left repeat-y; } #right { background: url(graphics/right.jpg) top right repeat-y; margin-left: 32px; } #centre { padding: 10px 40px; margin-right: 32px; } /* classes for two-column layout within the centre area */ .leftcol { float: left; width: 50%; } .rightcol { float: right; width: 50%; } /* the h3 header with light 375 background graphic */ .h3left { background: url(graphics/h3left.jpg) top left no-repeat; margin: 30px 5px 8px 5px; } .h3right { background: url(graphics/h3right.jpg) top right no-repeat; } h3 { font-size: 18px; line-height: 18px; background: #CAF279 url(graphics/h3back.jpg) top left repeat-x; padding: 6px 0 4px 0; margin: 0 11px; } p { font-size: 14px; line-height: 18px; margin: 8px 15px; } blockquote p { font-weight: bold; font-stlye: italic; } tt { font-size: 12px; line-height: 18px; color: #804000; } /* this table setting is an attempt to stop IE from running tables past the containing divs ... it has the side effect of stopping cells running to the proper edge *inside* tables in non-IE browsers... :-( */ table { display: block; margin: 8px; } th { text-align: left; font-size: 14px; line-height: 18px; font-weight: bold; padding: 1px 4px 4px 4px; } td { text-align: left; font-size: 14px; line-height: 18px; padding: 1px 4px 4px 4px; } ul { padding: 0; margin: 0 0 0 38px; } ol { padding: 0; margin: 0 0 0 53px; } li { font-size: 14px; line-height: 18px; padding: 0; margin: 4px 0 0 0; } /* some table cell backgrounds, for the various questions etc. */ .qcell { background: #D0F5E7; padding: 3px 5px; border-top: solid 1px #DFF7EF; border-bottom: solid 1px #BEEDDD; } .acell { padding: 3px 5px; } .userform { background: #FFF; padding: 3px; margin-left: 15%; margin-right: 15%; } h4 { font-size: 14px; line-height: 18px; background: #D0F5E7; border-top: solid 1px #DFF7EF; border-bottom: solid 1px #BEEDDD; padding: 5px 3px 1px 3px; margin: 8px 5px 8px 5px; } /* something a bit more flashy for h4 special headers... */ .h4left { background: url(graphics/h4left.jpg) top left no-repeat; margin: 20px 5px 5px 5px; } .h4right { background: url(graphics/h4right.jpg) top right no-repeat; } h4.h4b { text-align: center; font-size: 15px; line-height: 15px; background: #72ECC3 url(graphics/h4back.jpg) top left repeat-x; padding: 7px 0 5px 0; border: none; margin: 0 11px; } /* new pagefoot div to try to contain the mmfooter table for all browsers */ #pagefoot { text-align: center; padding: 10px; margin: 0; } #toplink { padding: 0 0 0 0; } /* a little improvement to the basic MM footer ... this could probably do with further work */ #mmfooter { background: #43BF96 url(graphics/tfoot_top.jpg) top left repeat-x; margin: 0 0 0 0; } #mmfooter h3 { text-align: center; font-size: 14px; line-height: 16px; background: #72ECC3 url(graphics/h4back.jpg) top left repeat-x; padding: 7px 10px 3px 10px; margin: 0; } #mmfooter p { text-align: center; font-size: 12px; line-height: 14px; background: #EDFAF6 url(graphics/footcellback.jpg) bottom left repeat-x; padding: 4px 5px 3px 5px; border-top: solid 1px #42A685; margin: 0 2px 2px 2px; } #checkbuttons { background: #43BF96 url(graphics/tfoot_bottom.jpg) bottom left repeat-x; padding: 4px 0px 5px 0px; margin: 0; } #checkbuttons p { text-align: center; font-size: 10px; line-height: 12px; background: #A3D9C7 url(graphics/checkback.png) top left repeat-x; padding: 1px; margin: 0; } #checkbuttons .hide { display: none; } #checkbuttons a { border-top: none; border-bottom: none; } #checkbuttons a:link { border-left: solid 2px transparent; border-right: solid 2px transparent; } #checkbuttons a:visited { border-left: solid 2px transparent; border-right: solid 2px transparent; } #checkbuttons a:hover { border-left: solid 2px #DDFF00; border-right: solid 2px #DDFF00; } #checkbuttons a:active { border-left: solid 2px #FFBF00; border-right: solid 2px #FFBF00; } #checkbuttons a img { vertical-align: -4px; border: none; } /* Now our own footer. This repeats the double-wrap ** approach found above to display the page corners. ** We may need to extend the height of this footer ** to accommodate additional lines of information; ** if so, the graphic also needs extending. */ #leftfoot { background: #035738 url(graphics/bl.jpg) top left no-repeat; } #rightfoot { background: url(graphics/br.jpg) top right no-repeat; margin: 0 0 0 32px; } #footer { background: url(graphics/bback.jpg) top left repeat-x; padding: 21px 0 36px 0; margin: 0 32px 0 0; } #footer p { text-align: center; line-height: 14px; color: #FFF; padding: 1px 0 1px 0; margin: 0; } /* and some link treamtents ... first the general ones for the page */ #bodywrap a:link { text-decoration: none; color: #096; } #bodywrap a:visited { text-decoration: none; color: #096; } #bodywrap a:hover { text-decoration: underline; color: #096; } #bodywrap a:active { text-decoration: underline; color: #096; background: #7ACCB1; } /* and a specific one for the page footer. */ #footer a:link { text-decoration: none; color: #80FFD4; } #footer a:visited { text-decoration: none; color: #80FFD4; } #footer a:hover { text-decoration: underline; color: #80FFD4; } #footer a:active { text-decoration: underline; color: #80FFD4; background: #096; } /*mail contact a*/ td.mail { text-align: center; font-size: 12px; font-style: italic; } /*EoF*/