body { color:#333; background:white url(../images/back.png) repeat-y top center; margin:0; text-align:center; font-family: Arial, Helvetica, sans-serif; font-size: 80%; } p{ font-size:1em; /* because of body font-size being 75% acutal font size 0.75em */ line-height:1.4em; margin:0.7em 0 0.7em 0; padding:0; } #preamble p, #supportingText p{ background:transparent url(../images/hr.png) no-repeat bottom center; margin:0; padding:1.4em 0 1.4em 0; } a{ color:#666; text-decoration: none; } /* a:active added for IE a:focus for Mozilla - added to aid accesibility more than visual appearance */ a:hover, a:focus, a:active { background:black; color:white; border:0; text-decoration:none; } div[id="container"] a, div[id="container"] a:visited{ text-decoration:none; border-bottom:0px dotted #900; } /* Becuase IE6 doesn't do it by default - IE5 doens't do it at all */ acronym{ border-bottom:1px dotted #333; cursor:help; } acronym:hover{ border-top:1px dotted #333; border-bottom:0; } #lresources acronym{ border:0; } /* Content =============================================================== */ #container { width:820px; text-align:left; padding:0; margin:0 auto; } /* position content to the right hand side */ #intro, #preamble, #supportingText, #quickSummary{ /* width when added with linkList width is 17px short of total site width creating a natural margin in the center */ width:440px; float:right; clear:right; margin:20px 0 0 0; } /* Replace the whole intro section with a graphic */ #intro #pageHeader { width:440px; height:307px; background:white url(../images/intro.jpg) no-repeat top center; text-indent:-10000px; float:right; margin:10px 0 0 0; padding:0; } /* Replace p1 quickSummary with a graphic */ #quickSummary{ height:180px; background: url(../images/works.jpg) no-repeat bottom center; margin:10px 0 0 0; padding:0; text-indent:-10000px; } /* recover quickSummary p2 from text-indent and move above the graphic */ #quickSummary .p2{ margin:-20px 0 0 0; padding:0; text-indent:0; text-align:center; text-transform:uppercase; font: 0.8em Georgia, "Times New Roman", Times, serif; /* acutal size 0.6em; */ background:white; /* background colour for text size increase, masks background graphic */ } h3{ width:440px; height:35px; margin:5px 0 5px 0; padding:0; text-indent:-10000px; float:right; overflow:hidden; } #preamble h3{ background:url(../images/works.jpg) no-repeat center left; } #explanation h3{ background:url(../images/awards.jpg) no-repeat center left; } #participation h3{ background:url(../images/experiences.jpg) no-repeat center left; } #benefits h3{ background:url(../images/benefits.png) no-repeat center left; } #requirements h3{ background:url(../images/requirements.png) no-repeat center left; } /* Navigation ============================================================= */ #linkList{ font-family:Verdana, Arial, Helvetica, sans-serif; margin:0; padding:10px 0 0 0; width:350px; text-align:right; float:left; /* Only IE5 MAC needs the left float \*/ float:none; /* End IE5 MAC comment hack found at stopdesign.com see also http://www.stopdesign.com/log/2004/07/06/filtering-css.html */ } /* Because the linkList is not floated (except for IE5 MAC), this casued problems with usual image replacement methods, so... */ #linkList h3{ float:none; display:none; } /* linkList h3 may be hidden from screen readers and printers due to display none */ @media aural, braille, print{ #linkList h3{ display:block; } } #lselect, #lfavorites, #larchives, #lresources { /* Something shaky going on in IE6 with the background images, border-left stops it shaking */ border-left:1px solid white; padding:75px 0 0 0; margin:0 0 40px 0; } #lselect{ } #lfavorites{ background:transparent url(../favoritehead.png) no-repeat top left; } #larchives{ background:transparent url(../images/news.jpg) no-repeat top right; } #lresources{ background:transparent url(../images/projects.jpg) no-repeat top right; } #linkList ul{ margin:0; padding:0; list-style:none; } #linkList li{ font-size:0.8em; display:block; margin:0; padding: 0 0 7px 0; border-bottom:1px solid #F9F7F6; } /* Link Styles */ #linkList li a{ display:block; padding:4px 10px 4px 5px; margin:0 0 5px 0; border:0; text-transform:uppercase; font-weight:bold; text-decoration:none; color:#6F0000; } #lselect li a, #lfavorites li a{ background:transparent url(../images/) no-repeat -100px; } #lselect li a:visited, #lfavorites li a:visited{ background-position:0 50% ; } #linkList li a:hover, #linkList li a:focus, #linkList li a:active{ padding-right:6px; border-right:4px solid #595959; color:#B2C38D; text-decoration:none; } #linkList li a.c{ display:inline; padding:0 2px 0 0; text-transform:lowercase; font-style:italic; font-weight:normal; margin:0; border:0; background-position:-100px; } #linkList li a.c:hover, #linkList li a.c:visited, #linkList li a.c:active, #linkList li a.c:focus{ padding:0 2px 0 0; border:0; background-position:-100px; } a.btn { width: auto; overflow: visible; border: 0; background: #3C607B url(../images/image_.jpg) repeat-x 0 -30px; padding: 8px 10px; cursor: pointer; color: #fff; text-decoration: none; font-weight: regular; } a.btn:hover { background-color: #ccc; color: #333; } #larchives li, #lresources li{ border:0; } #lresources li a, #larchives li a{ padding-right:6px; border:1px solid #F9F7F6; border-right:4px solid #D6DECA; text-decoration:none; background:white; } #footer{ height:60px; margin:20px 0 0 0; padding:0px 0 0 30px; } #footer a{ color:#DCE4C2; text-decoration:none; font-weight:bold; border:0; } #footer a:hover, #footer a:focus, #footer a:active{ color:#900; text-decoration:none; font-weight:bold; border-bottom:1px dotted #900; background:transparent; } /* Print, because we're running out of trees faster than we are bandwidth ================================================ */ @media print{ body { text-align:left; color:black; } a{ color:black; text-decoration:none; border:0; } #linkList, #footer, #quickSummary .p2{ display:none; position:absolute; } #container{ width:90%; } #intro, #intro #pageHeader, #preamble, #supportingText, #quickSummary{ float:none; width:90%; display:block; text-indent:0; margin:0; padding:0; width:auto; height:auto; } h1, h2, h3{ display:block; text-indent:0; float:none; color:black; width:auto; height:auto; float:none; } } /*------------------------------------------------------------* ** Lightbox **------------------------------------------------------------*/ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }