/****W3C CSS Validated: "This document validates as CSS level 3 !", 13-10-09 (LH)...****/ /* ........... SETTINGS FOR BOTH SCREEN AND PRINT ........... */ body { /* background: fixed #A1B4AB repeat-x; /**url(../images/bg-top.gif) **/ background: #FFFFCC fixed url(../images/bg-fade.gif) repeat-x; color: #003300; /**#13442c**/ text-align: center; /* DON'T REM THIS AS CENTRES ALL DIVS (WIDTH-WISE) WITHIN **/ font-family: helvetica, sans-serif; font-size: 90%; margin: 0; } /*for FF - sets first para in each divison to no margin*/ p:first-child {margin-top:0;} h1 { font-weight: bold; font-size: 130%; margin-top: 25px; margin-bottom: 6px !important; margin-bottom: -3px; } h2 { font-weight: bold; font-size: 110%; margin-top: 20px !important; margin-top: 23px; margin-bottom: -10px !important; margin-bottom: 5px; } h2#reduceSpace { margin-bottom: -8px !important; margin-bottom: 5px; } h3 { font-style: italic; font-size: 110%; margin-bottom: -2px !important; margin-bottom: 1px; } #centre { width: 805px; w\idth: 805px; margin: auto; position: relative; text-align: left; min-height: 100%; min-height: 555px !important; height: 100%; border: solid #003300 5px; overflow: hidden !important; /**for ff **/ overflow: visible; /**for ie **/ } .letterhead { height: 96px !important; /*for firefox */ height: 79px; /* for ie */ margin-top: 0px !important; /*for firefox */ margin-top: 10px; margin-bottom: 0px; margin-right: 15px; text-align: right; } /** The following is an attempt to solve transparency issue with depolo-name.png in IE. The following assists to achieve different depolo-name file for different browser. .gif is displayed for internet explorer, and for any other browser .png is displayed. Also refer to script just below letterhead divs **/ #letterheadgif { background: url(../images/depolo-name.gif) no-repeat right; height: 0px !important; display: none !important; display: block; /** **/ width: 780px; height: 85px; } #all-letterheads { /** background-color:#E7ECEA; /**#A1B4AB**/ margin: 0 !important; height: 96px !important; /*for firefox */ height: 79px; /* for ie */ width: 805px; padding-top: 5px; } #trail { padding: 10px 5px 30px 0; /* .5* top right bottom left */ margin-right: -10px !important; text-align: right; font-weight: 500; font-size: 80%; /* was 80% *****************/ font-style: italic; } #trail, #info, #all-letterheads { background-color: #FFFFCC; /**E7ECEA**/ } #info { margin-right: 0 !important; margin-right: -20px; margin-top: 0; padding-bottom: 40px !important; padding: 0 35px 35px 35px; min-height: 300px !important; /**680px**/ height: auto !important; /** keep setting as "auto" - for ff **/ min-height: 360px; /**700px; **/ height: 390px; /** 700px;**/ border-bottom: solid #003300 5px; } /** below also used for ", div#address-details " - but not using address-details at this stage **/ div#bottom-menu { float: left; width: 100%; text-align: center; font-size: .75em; padding-top: 1.5em; } /** w3c validation icons **/ div#validate { float: left; width: 200px; margin: 10px 0px 0px 5px; /* .5* top right bottom left **/ padding-left: 2px !important; padding-left: 3px; padding-bottom: 0 !important; } /** date web page modified - at end of page **/ #modified { float: right; width: 250px; /*** the following line is not working in ff ****/ font-style: italic; font-size: 70% !important; font-size: 65%; text-align: right; padding: 12px 10px !important; padding: 20px 4px ; /* top right bottom left */ } .spaceBefore { padding-top: .9em !important; padding-top: 1.1em; } .lessSpaceBefore { margin-top: -.5em; } .lessSpaceAfter { margin-bottom: -1em; } .littleSpaceAfter { margin-bottom: -.1em; } .spaceAfter { padding-bottom: .5em; } .moreSpaceAfter { padding-bottom: 1em !important; padding-bottom: 1.4em; } .italics { font-style: italic; } .valid-image { border-width: 0em; height: 31px; width: 88px; } .highlight { font-weight: bold; } /* ........... SCREEN DOCUMENT SETTINGS ........... */ @media screen { body { /** background-color: #FFFF99; /** light brown/yellow **/ /** color: #336633; /** lighter green **/ } #letterhead-print { display: none; } ul { list-style-image: url(../images/bullet.gif); margin-top: 1em; } ul.space li { padding-bottom: .7em; margin-left: -1.5em; } .letterhd-print { height: 0em; width: 0em; } div#validation { float: left; width: 26.5%; text-align: center; } /** LINKS **/ /** excluding those link formats for the menus - these are in menu.css **/ /** em ml-to **/ .em {color: #990000} /** for links within TRAIL div **/ .traillink a:link { color: #FF3300; /* #orange*/ } .traillink a:visited { color: #FF3300; /* orange*/ } .traillink a:hover { color: #990000; font-weight: bold; font-variant:small-caps; /* dark red*/ } /** for links within INFO div **/ .infolink a:link { color: #FF3300; } /* orange*/ .infolink a:visited { color: #FF3300; /* orange*/ } .infolink a:hover { color: #990000; font-weight: bold; font-variant:small-caps; /* dark red*/ } /** for links within OFFICE TIPS web pages **/ .tiplink a:link { color: #003300; } /* dark green*/ .tiplink a:visited { color: #003300; /* dark green*/ } .tiplink a:hover { color: #990000; font-weight: bold; font-variant:small-caps; /* dark red*/ } /** for links in the BOTTOM-MENU div **/ .footerlink a:link { color: #003300; } /* dark green*/ .footerlink a:visited { color: #003300; /* dark green*/ } .footerlink a:hover { color: #990000; font-weight: bold; font-variant:small-caps; } /* dark red. */ } /* ........... PRINT DOCUMENT SETTINGS ........... */ @media print { body { color: #000000; background-color: #FFFFFF; /**white **/ font-size: .8em; } #letterheadgif, #letterheadpng, #menurow, #validate { display: none; } #centre, #bottom-menu ,#info { width: 800px !important; width: 850px; border: none; } .letterhd-print { font-size: 3.5em; margin-bottom: 30px; padding-bottom: 5px; border-bottom: solid 2px; } #bottom-menu { border-top: solid 1px; } h1 { font-size: 1.5em; } dt { line-height: 15.2px; font-size: .8em; } }