* { margin: 0; padding: 0; } body { font-family: Arial, Verdana, Tahoma, "Bitstream Vera Sans", Helvetica, sans-serif; background: #484445 url(/sitefiles/16/design/body-bg.gif) 50% 0 repeat-y; color: #FFF; font-size: 11px; } a img { border: 0; } /* STRUCTURE ____________________________________________ */ #container { width: 900px; margin: 0 auto; } #top { height: 118px; width: 900px; float: left; clear: both; background: #484445 url(/sitefiles/16/design/top-bg.gif) 0 109px no-repeat; } #top h1 { width: 242px; height: 84px; float: right; } #top h1 a { text-indent: -9999px; display: block; width: 224px; height: 49px; background: url(/sitefiles/16/design/logo.gif) 0 0 no-repeat; margin: 35px 18px 0 0; } #article { width: 900px; float: left; clear: both; } #projects { width: 607px; float: left; clear: both; } #main-col { width: 607px; float: left; padding: 12px 10px 0 0; border-right: 1px solid #555152; margin: 0 10px 0 0; } #side-col { width: 272px; float: right; clear: right; } #main-col a, #side-col a { color: #F60; } /* MAIN MENU ____________________________________________ */ #main-menu { height: 148px; width: 402px; float: left; display: block; position: relative; z-index: 1000; } #main-menu, #main-menu ul { padding: 0; margin: 0; list-style: none; line-height: 1; } #main-menu li { position: relative; } #main-menu a { display: block; width: 133px; height: 112px; position: relative; font-size: 15px; font-weight: bold; color: #FFF; text-align: center; text-decoration: none; text-transform: uppercase; border-right: 1px solid #5F943F; border-bottom: 6px solid #46573F; margin: 0; letter-spacing: -0.05em; } #main-menu a span { position: absolute; width: 100%; left: 0; bottom: 10px; cursor: pointer; } #main-menu a:hover, #main-menu a.active { border-bottom: 6px solid #5F943F; } #main-menu li li a:hover, #main-menu li li a.active { border: none; } #main-menu ul li { list-style-type: none; } #main-menu ul li a { line-height: 1.7; height: auto; border: 0; font-size: 12px; text-align: left; text-transform: none; background: #5F943F; width: 113px; _width: 93px; letter-spacing: 0; } #main-menu ul li a:hover { border: 0; } #main-menu li { float: left; width: 134px; /* width needed or else Opera goes nuts */ _width: 114px; } #main-menu li ul { background: #5F943F; border-bottom: 5px solid #5F943F; padding: 5px 10px 15px 10px; position: absolute; margin: 0; width: 113px; _width: 93px; top: 112px; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ z-index: 1000; } #main-menu li:hover ul, #main-menu li.sfhover ul { left: auto; background: #5F943F; } /* GENERAL TYPO ____________________________________________ */ #main-col h2 { font-size: 24px; font-weight: normal; color: #F60; margin: 0 0 30px 0; } #main-col p, #side-col p, #main-col ul, #side-col ul, #main-col ol, #side-col ol { line-height: 1.5; color: #FFF; margin: 0 0 1.5em 0; } /* PROJECT DETAIL ____________________________________________ */ #main-project-pic { margin: 0 0 14px 0; float: left; width: 607px; } #main-project-pic img { float: left; } #extra-pics { float: left; clear: both; width: 607px; } #extra-pics img { float: left; margin: 0 14px 0 0; border: 0; } #article #side-col h2 { font-size: 26px; font-weight: normal; letter-spacing: 0.025em; margin: 20px 0 10px 0; } #article #side-col dl { line-height: 1.85; float: left; width: 100%; clear: both; margin: 0 0 15px 0; } #article #side-col dl dt { float: left; color: #c5c5c5; display: block; padding: 0 10px 0 0; margin: 0 3px 0 0; background: url(/sitefiles/16/design/dash.gif) 100% 50% no-repeat; } #article #side-col #ingress { float: left; width: 100%; clear: both; margin: 0 0 1.5em 0; } /* EMPLOYEES ____________________________________________ */ .employee-details { display: none; margin: 10px 0 0 0; } .employee-details h3 { color: #F60; font-weight: bold; font-size: 1em; } #side-col .employee-details p.meta, #side-col .employee-details p.contact, #side-col .employee-details p.contact a { color: #F60; font-weight: bold; } #employee-links { width: 100%; float: left; clear: both; } #employee-links .employee-link { float: left; width: 80px; height: 80px; margin: 0 10px 15px 0; outline:none; } #employee-links .employee-link a { display: block; width: 77px; height: 83px; background: 50% 50% no-repeat; outline:none; } #employee-link-41 .employee-link a:hover { background: none; } /* ARTICLE DETAIL SCROLL AREA ____________________________________________ */ #extra-info { line-height: 1.85; height: 380px; position: relative; width: 100%; float: left; clear: both; } #extra-info-inner { height: 350px; overflow: hidden; width: 100%; clear: both; float: left; position: absolute; top: 15px; left: 0; } #scrollable { padding-top: 35px; } #extra-info-overlay { background: url(/sitefiles/16/design/overlay.png) 0 0 repeat-x; width: 272px; height: 350px; position: absolute; top: 15px; left: 0; } * html #extra-info-overlay { background-color: #ccc; back\ground-color: transparent; background-image: url(space.gif); overflow: hidden; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/sitefiles/16/design/overlay.png", sizingMethod="scale"); } .scroll-link { display: block; float: left; clear: both; width: 272px; height: 10px; outline: none; text-indent: -9999px; } #scroll-up { background: url(/sitefiles/16/design/up-arrow.gif) 0 0 no-repeat; } #scroll-down { background: url(/sitefiles/16/design/down-arrow.gif) 0 0 no-repeat; position: absolute; left: 0; top: 370px; } #articles-in-cat { width: 607px; float: left; clear: left; margin: 40px 0 0 0; border-top: 1px solid #534F50; padding: 20px 0; } #articles-in-cat h3 { text-transform: uppercase; font-size: 17px; font-weight: normal; margin: 0 0 20px 0; } #articles-in-cat ul { font-size: 14px; list-style-type: none; float: left; width: 100%; clear: both; } #articles-in-cat ul li { float: left; margin: 0 35px 0 0; } #articles-in-cat ul li a { color: #FFF; float: left; text-decoration: none; } #articles-in-cat ul li a:hover { color: #F60; } /* PROJECT LISTING ____________________________________________ */ #projects .project { width: 140px; float: left; margin: 0 10px 10px 0; } .project img { margin: 0 0 10px 0; } .project h3 { font-size: 12px; } .project h3 a { color: #FFF; text-decoration: none; font-weight: normal; } /* LIGHTBOX ____________________________________________ */ #lightbox { position: absolute; left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0; } #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: 1000; } #imageContainer>#hoverNav { left: 0; } #hoverNav a { outline: none; } #prevLink, #nextLink { width: 49%; height: 100%; background: transparent url(/sitefiles/16/js/Lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left; } #nextLink { right: 0; float: right; } #prevLink:hover, #prevLink:visited:hover { background: url(/sitefiles/16/js/Lightbox/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/sitefiles/16/js/Lightbox/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: 1em; } #imageData #bottomNavClose { width: 66px; float: right; padding-bottom: 0; } #overlay { position: absolute; top: 0; left: 0; z-index: 9000; width: 100%; height: 500px; background-color: #000; } #header { float: left; width: 607px; clear: both; margin: 0 0 20px 0; } #ImageSlider { width: 607px; float: left; clear: both; position: relative; height: 200px; z-index: 0; margin: 0 0 20px 0; } #ImageSlider img.sliderimgs { position: absolute; display: none; width: 607px; height: 200px; } table.moduleContainer { width: 100%; }