/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Global styles <<<<<<<<<<<< */ body { margin: 0; padding: 0; height: 100%; background-color: #B2B2B2; font-family: "Trebuchet MS", trebuchet, "Myriad Pro", helvetica, arial, sans-serif; } html { height: 100%; margin: 0; padding: 0; } a img {border: none;} /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Structural divs <<<<<<<<<<<< */ #siteWrap { margin: auto; height: 100%; width: 775px; } #menuPush { width: 100%; height: 40px; } #contentWrap { background: #b2b2b2 url(../assets/exclamBkg.jpg) repeat-y top left; } /*Note in the content div that the top border prohibits/invokes margin collapse to prevent gaps between content and menu in FF*/ #content { position: relative; margin-left: 135px; width: 640px; background: #ffffff url(../assets/cornerTL.jpg) no-repeat top left; border-top: 1px solid #b2b2b2; padding-bottom: 90px; } /*temp*/ #content {min-height: 300px;} * html #content { height: 300px; } #clearHalves { height: 40px; clear: both; } #clearHalvesHome { height: 30px; clear: both; } #extrasHolder { height: 160px; background: #b2b2b2 url(../assets/exclamBkg.jpg) repeat-y top left; } #extrasHolderHome { height: 160px; background: #b2b2b2 url(../assets/exclamBkg.jpg) repeat-y left top; } #extrasWrap { height: 160px; width: 640px; margin-left: 135px; background: #ffffff url(../assets/cornerTL.jpg) no-repeat top left; } #extrasWrapHome { height: 160px; width: 640px; margin-left: 135px; background-color: #ffffff; } .clear { clear: both; height: 1px; } #content.noCorner {background: none; background-color: #ffffff;} /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Site Menu <<<<<<<<<<<< */ #menuHolder { margin-left: 135px; width: 640px; height: 45px; } #menuNoFlash { float:right; } #menuListNoFlash {list-style-type: none; margin: 0;} #menuListNoFlash a {display: block; width: 78px; height: 38px; color: #FFFFCC; text-decoration: none; font-family: "Trebuchet MS", trebuchet, "Myriad Pro", Verdana, Helvetica, arial, sans-serif; } #menuListNoFlash li {float: right; text-align: center; line-height: 38px; } #menu1:hover, #menu1.here { background-color: #FFCC33; } #menu2:hover, #menu2.here { background-color: #BF0000; } #menu3:hover, #menu3.here { background-color: #CC6600; } #menu4:hover, #menu4.here { background-color: #99CCCC; } #menu5:hover, #menu5.here { background-color: #336699; } #menu6:hover, #menu6.here { background-color: #999933; } #menu1 {border-bottom: 5px solid #FFCC33;} #menu2 {border-bottom: 5px solid #BF0000;} #menu3 {border-bottom: 5px solid #CC6600;} #menu4 {border-bottom: 5px solid #99CCCC;} #menu5 {border-bottom: 5px solid #336699;} #menu6 {border-bottom: 5px solid #999933;} #quickLinksMenu { float: left; width: 130px; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Text styles <<<<<<<<<<<< */ .pageTitle { text-align: right; font-weight: normal; font-size: 1.8em; letter-spacing: 1px; border-bottom: 1px solid #A1BBBF; padding: 30px 20px 40px 20px; } .pageTitleSubText { font-size: 0.8em; letter-spacing: normal; } .sectionTitle { text-align: right; font-weight: normal; font-size: 1.6em; color: #A1BBBF; padding: 0 20px 0 20px; } #content p { padding: 0 20px 0 105px; line-height: 1.4em; } #content ol {padding: 1.5em 30px 0 75px; margin-left: 75px;} #content ol li {padding-bottom: 1.8em; color: #555; } #content ol li strong { color: #990000; } .smallCaps { text-transform: uppercase; } .designLink { color: #EEEEEE; } .designLink a { color: #FFFFFF; text-decoration: none; font-weight: bold; } #content p.noPadding { padding-left: 350px; line-height: 1.2em;} .rightAlign { text-align: right; } .textLink { color: #336600; } .largeText { font-size: 2em; } .techComment { font-size: 0.8em; color: #003366; padding: 0; margin: 0; } ul.downloads { margin-left: 105px; padding: 0; list-style-type: none; margin-right: 50px;} .downloads li {height: 35px; padding: 6px 0 0 6px; background-color: #CCCCCC; border-bottom: 1px solid #FFFF99; } .downloads li a { height: 35px; background: transparent url(../assets/pdf.gif) no-repeat left 50%; padding-left: 30px; text-decoration: none; } .downloads li a#mediaPlayerLink { height: 35px; background: transparent url(../assets/media.gif) no-repeat left 50%; padding-left: 30px; text-decoration: none; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Image styles <<<<<<<<<<<< */ .floatLeft { float: left; } .padded {padding: 30px 0 0 20px; } .mainPageImageC { text-align: center; } /*Horizontal pictures*/ .picture1div, .picture2div, .picture3div { position: absolute; bottom: -95px; height: 150px; width: 150px; background-color: #CCCCCC; } .picture1div { left: 250px; } .picture2div { left: 410px; } .picture3div { left: 570px; } /*Vertical pictures*/ .picture4div, .picture5div, .picture6div { position: absolute; top: 200px; left: -95px; height: 150px; width: 150px; background-color: #CCCCCC; } .picture4div { top: 200px; left: -95px; height: 150px; width: 150px; } .picture5div { top: 360px; left: -95px; height: 150px; width: 150px; } .picture6div { top: 520px; left: -95px; height: 150px; width: 150px; } /* --- All pictures for the content pages should be 150 x 150px */ /*Recent projects pictures for "Projects/countries" page*/ #recent4 { background: #CCCCCC url(../assets/recent4.jpg) top left no-repeat; } #recent5 { background: #CCCCCC url(../assets/recent5.jpg) top left no-repeat; } #recent6 { background: #CCCCCC url(../assets/recent6.jpg) top left no-repeat; } /*About us pictures*/ #about1 { background: #CCCCCC url(../assets/about1.jpg) top left no-repeat; } #about2 { background: #CCCCCC url(../assets/about2.jpg) top left no-repeat; } #about3 { background: #CCCCCC url(../assets/about3.jpg) top left no-repeat; } #about4 { background: #CCCCCC url(../assets/about4.jpg) top left no-repeat; } #about5 { background: #CCCCCC url(../assets/about5.jpg) top left no-repeat; } #about6 { background: #CCCCCC url(../assets/about6.jpg) top left no-repeat; } /*Latest news pictures*/ #news1 { background: #CCCCCC url(../assets/news1.jpg) top left no-repeat; } #news2 { background: #CCCCCC url(../assets/news2.jpg) top left no-repeat; } #news3 { background: #CCCCCC url(../assets/news3.jpg) top left no-repeat; } /*Resources and media gallery pictures*/ #media1 { background: #CCCCCC url(../assets/media1.jpg) top left no-repeat; } #media2 { background: #CCCCCC url(../assets/media2.jpg) top left no-repeat; } #media3 { background: #CCCCCC url(../assets/media3.jpg) top left no-repeat; } /*Contact us pictures*/ #contact1 { background: #CCCCCC url(../assets/contact1.jpg) top left no-repeat; } #contact2 { background: #CCCCCC url(../assets/contact2.jpg) top left no-repeat; } #contact3 { background: #CCCCCC url(../assets/contact3.jpg) top left no-repeat; } #contact4 { background: #CCCCCC url(../assets/contact4.jpg) top left no-repeat; } #contact5 { background: #CCCCCC url(../assets/contact5.jpg) top left no-repeat; } #contact6 { background: #CCCCCC url(../assets/contact6.jpg) top left no-repeat; } /*Sitemap pictures*/ #sitemap1 { background: #CCCCCC url(../assets/sitemap1.jpg) top left no-repeat; } #sitemap2 { background: #CCCCCC url(../assets/sitemap2.jpg) top left no-repeat; } #sitemap3 { background: #CCCCCC url(../assets/sitemap3.jpg) top left no-repeat; } #sitemap4 { background: #CCCCCC url(../assets/sitemap4.jpg) top left no-repeat; } #sitemap5 { background: #CCCCCC url(../assets/sitemap5.jpg) top left no-repeat; } #sitemap6 { background: #CCCCCC url(../assets/sitemap6.jpg) top left no-repeat; } /*Home page pictures*/ #pictureSpread { position: absolute; bottom: -75px; left: 0; background-color: #ffffff; height: 152px; width: 640px; } #picture1divHome { position: absolute; bottom: 0; left: 0; height: 150px; width: 150px; background: #CCCCCC url(../assets/pic1.jpg) top left no-repeat;} #picture2divHome { position: absolute; bottom: 0; left: 163px; height: 150px; width: 150px; background: #CCCCCC url(../assets/pic2.jpg) top left no-repeat;} #picture3divHome { position: absolute; bottom: 0; left: 327px; height: 150px; width: 150px; background: #CCCCCC url(../assets/pic3.jpg) top left no-repeat;} #picture4divHome { position: absolute; bottom: 0; left: 490px; height: 150px; width: 150px; background: #CCCCCC url(../assets/pic4.jpg) top left no-repeat;} .mediaHolder { width: 100%; text-align: center; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Sitemap styles <<<<<<<<<<<< */ div#sitemapBox {min-height: 350px; width: 480px; margin: 10px auto 6px auto; } ul#sitemap ul { margin-left: 10px; font-size: 1em;} ul#sitemap, ul#sitemap li { padding: 0px; margin: 0px; list-style-type: none; background: none; } ul#sitemap li a { margin-left: 0px; margin-top: 10px; text-decoration: none; padding: 3px 15px 3px 4px; height: 1.4em; line-height: 1.4em; font-size: 1.0em; color: #336699; } ul#sitemap li { display: inline; } /* fix for IE blank line bug */ ul#sitemap li {border-top: 2px solid #99CCCC; background:#CCCCCC url(../assets/folder_closed.gif) no-repeat 420px top;} ul#sitemap li:hover {background: #CCCCCC url(../assets/folder_open.gif) no-repeat 420px top;} ul#sitemap li.noPic {background: none;} ul#sitemap li ul li {border-top: none; border-left: 1px solid #FFCC00; background-color:#E8F9C1; background-image: none;} /*cancel border for sub menus*/ ul#sitemap li ul li:hover {background: none; background-color: #E8F9C1;} ul#sitemap li { display: list-item; } ul#sitemap li a { width: auto; height: auto;} ul#sitemap li li a { text-align: left; padding-left: 15px; color: #000; display: block;} ul#sitemap li li a strong {color: #990000; font-weight: normal;} ul#sitemap li a:hover { color: #8B8D98; } ul#sitemap li li a:hover { color: #8B8D98; } ul#sitemap li a.underConstruction { text-decoration: line-through; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Contact form styles <<<<<<<<<<<< */ #formHolder { width: 450px; margin-left: 105px; background-color: #99CCCC; border-top: 2px solid #99CCCC; border-bottom: 2px solid #99CCCC; height: 250px; color: #003366;} div.row {clear: both; padding-top:10px;} div.row span.formLabel {float: left; width: 150px; text-align: right;} div.row span.formBox {float: right; width: 280px; text-align: left;} #formHolder input, #emailBody {font-family: tahoma, verdana, helvetica, arial, sans-serif; font-size: 0.8em;} #submitButton {width: 10em; height: 2em; background-color: #999933; border: 1px solid #FFFC7D; color: #ffffff; line-height: 2em;} #warning1, #warning2 { display: none; color: #ff0000; font-weight: bold; padding-left: 20px; font-size: 0.8em;} #success1 { display: none; background-color: #006600; color: #CCCCCC; width: 435px; margin-left: 105px; height: 40px; line-height: 40px; padding-left: 15px;} /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> "Extras" styles - non-core content <<<<<<<<<<<< */ #quickLinks {list-style-type: none; margin: 0; margin-top: 15px; padding-left: 22px;} #quickLinks a {display: block; width: 28px; } #quickLinks li {float: left;} .mediaGalleryLink { padding: 30px 0 0 60px; text-align: right; } .mediaGalleryLink a { text-decoration: none; } #newsItem {position: absolute; bottom: 15px; left: 10px; width: 480px; text-align: right; } #newsItem p { font-size: 0.8em; color: #003366; padding: 0; margin: 0; } .newsHeader { font-size: 1.2em; color: #CC0000; } .moreNews { font-style: italic; color: #336600; text-decoration: none; } #newsFrontPage { position: relative; top: 20px; left: 20px; height: 140px; width: 620px; } #spinningNews { position: absolute; bottom: 10px; right: 20px; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Footer - including page links <<<<<<<<<<<< */ #clearFooter { height: 1px; clear: both; } #footer { margin-left: 135px; width: 640px; height: 60px; font-size: 0.7em; padding-top: 10px; } #footerL { float: left; width: 60%; height: 40px; } #footerL a { text-decoration: none; color: #003366;} #footerL a:hover { color: #003366; } #footerL a:visited { text-decoration: none; color: #003366;} #footerR { float: right; width: 40%; height: 40px; text-align: right; } /* Story book descriptions of projects */ p.storyBookDesc { float: right; clear: both; width: 75%; margin-top: 2em; padding-left: 25%; color: #BF0103; font-style: italic;} img.storyBook { float: right; margin-right: 40px; }