html { margin: 0; padding: 0; background: #444444; color: white; font-size: 100%; }
body { margin: 0; padding: 0; text-align: center; }
a { text-decoration: none; color: #4b8ba2; }
a:hover { text-decoration: underline; }
/* Note, I don't take responsibility for all the absolute and px values. */
/* I had to do it to match the flash portion of the site. */
/* if we didn't have to conform to the flash portion: width: 70%; margin: 2em auto 0 auto; */
/* exact-flash-match: div#content-holder { position: absolute; width: 1000px; height: 600px; top: 50%; margin-top: -300px; left: 50%; margin-left: -500px; } */
div#content-holder { width: 1050px; height: 600px; margin: 2em auto 0 auto; }
/* margin-bottom was a little strange. Firefox expects -12px and IE expects -20px to look right. I would think it should be -8px. Anyway, set it to -20px to look right on IE and set the height to 16px (instead of 8px) so it still looks good on Firefox as well */
div#black-bar { background: black; height: 16px; margin: 0 8px -20px -8px; padding: 0; }
div#content-holder-shadow-right { background: transparent url(images/layout/shadow-right.png) repeat-y scroll bottom right; margin-left: 8px; }
div#content-holder-shadow-bottom { background: transparent url(images/layout/shadow-bottom.png) repeat-x scroll bottom right; position: relative; right: 8px; bottom: -8px; }
/* position and bottom are defined so we can see the shadow background underneath */
/* margin-left: -8px is set to hang off the left side a little bit for visual effect */
/* padding-bottom is apparently needed here for IE to see the bottom shadow */
div#engineer-content { background: black; padding: 0; position: relative; bottom: 8px; margin-left: -8px; }
img#content-corner-shadow { position: absolute; bottom: 0; right: -8px; border: 0; margin: 0; padding: 0; }
div.cleaner { clear: both; height: 1px; font-size: 1px; border: none; margin: -1px 0 0 0; padding: 0; background: transparent; }
/* height: 112px is defined just to match the flash */
p#companyinfo { font-family: 'Arial Black', Gadget, sans-serif; font-variant: small-caps; padding: 0.25em 0 1em 0; margin: 0; }
p#companyinfo a { text-decoration: none; color: white; }
img#logo { border: 0; margin-top: .5em; }
span#disciplines { font-size: 90%; }
/* NAVIGATION */
div#active-tab { width: 28px; background: black; color: white; height: 486px; }
div#active-tab a { display: block; width: 28px; height: 486px; background: transparent no-repeat scroll center; }
/* home-tab is special because it has no shadow */
div#home-tab { width: 28px; background: #8eb4c6; height: 486px; }
div#home-tab:hover { background-color: white; }
div#home-tab a { display: block; width: 28px; height: 486px; background: transparent url(images/layout/home.png) no-repeat scroll center; }
div#home-tab a:hover { background-image: url(images/layout/home-invert.png); }
div#projects-tab { width: 28px; background: #6d9fb4 url(images/layout/shadow-right.png) repeat-y scroll top left; height: 486px; }
div#projects-tab:hover { background-color: white; }
div#projects-tab a { display: block; width: 28px; height: 486px; background: transparent url(images/layout/projects.png) no-repeat scroll center; }
div#projects-tab a:hover { background-image: url(images/layout/projects-invert.png); }
div#services-tab { width: 28px; background: #4b8ba1 url(images/layout/shadow-right.png) repeat-y scroll top left; height: 486px; }
div#services-tab:hover { background-color: white; }
div#services-tab a { display: block; width: 28px; height: 486px; background: transparent url(images/layout/services.png) no-repeat scroll center; }
div#services-tab a:hover { background-image: url(images/layout/services-invert.png); }
div#information-tab { width: 28px; background: #42788b url(images/layout/shadow-right.png) repeat-y scroll top left; height: 486px; }
div#information-tab:hover { background-color: white; }
div#information-tab a { display: block; width: 28px; height: 486px; background: transparent url(images/layout/information.png) no-repeat scroll center; }
div#information-tab a:hover { background-image: url(images/layout/information-invert.png); }
div#contact-tab { width: 28px; background: #38626f url(images/layout/shadow-right.png) repeat-y scroll top left; height: 486px; }
div#contact-tab:hover { background-color: white; }
div#contact-tab a { display: block; width: 28px; height: 486px; background: transparent url(images/layout/contact.png) no-repeat scroll center; }
div#contact-tab a:hover { background-image: url(images/layout/contact-invert.png); }
/* END NAVIGATION */
div#projects-background { background: transparent url(images/sun-valley-pavilion-scaled.jpg) no-repeat scroll top center; }
div#services-background { background: transparent url(images/daybreak-scaled.jpg) no-repeat scroll top center; }
div#information-background { background: transparent url(images/vegasgrand-scaled.jpg) no-repeat scroll top center; }
div#contact-background { background: transparent url(images/stcroix-scaled.jpg) no-repeat scroll top center; }
/* margin-bottom should remain 0 so IE looks right */
/* position: relative and padding-right should remain 0 for the nested submenus to be properly positioned */
div#engineer-menu ul { font-family: Arial, Helvetica, sans-serif; font-size: .75em; float: left; margin: 5em 1em; padding: 0; list-style: none; text-align: left; position: relative; }
div#engineer-menu ul li { margin: 1em 0 0 0; }
div#engineer-menu ul li h3 { border-bottom: 1px dashed #4b8ba2; }
div#engineer-menu ul li a { display: block; text-decoration: none; padding: 0.25em .5em; color: white; }
div#engineer-menu ul li a:hover { background: #cb8b12; }
ul li a.activelink { background: #4b8ba2; }
/* the following is for the nested menus (careers) */
div#engineer-menu ul li ul { font-size: 100%; margin: -2.75em 0 0 0; padding: 0; display: none; position: absolute; left: 98%; background: transparent url(images/layout/half-trans.png) repeat scroll; }
div#engineer-menu ul li:hover ul { display: block; }
div#engineer-info { font-family: Arial, Helvetica, sans-serif; font-size: 75%; text-align: left; height: 487px; margin: 0; padding: 0; }
div#project-info { font-family: Arial, Helvetica, sans-serif; font-size: 75%; text-align: left; height: 462px; margin: 0; padding: 0; }
/* margin should remain 0 */
div#home { padding: 0; margin: 0; overflow: hidden; height: 487px; text-align: left; }
ul#project-menu { font-size: 75%; margin: 0; padding: 5px 0 0 0; height: 20px; text-align: center; background: transparent url(images/layout/half-trans.png) repeat scroll; }
ul#project-menu li { margin: 0; padding: 0; display: inline; }
ul#project-menu li a { color: gray; margin: 0 3em; text-decoration: none; font-weight: bold; }
ul#project-menu li a:hover { color: #4b8ba2; }
/* margin should remain 0 */
div#projects { padding: 0 3.5em; margin: 0; overflow: auto; height: 446px; }
div#projects a.project-type { float: left; text-align: center; width: 20%; margin: 5% 5% 0 0; font-weight: bold; font-size: 125%; }
div#projects a.project-type:hover { text-decoration: none; color: white; }
div#projects a.project-type:hover img { border: 1px solid white; }
div#projects img { border: 1px solid #4b8ba2; margin: 0; width: 150px; }
div#projects h1 { color: white; border-bottom: 1px dashed #4b8ba2; margin-bottom: 0; }
h1#no-project { text-align: center; }
div#projects h2 { margin-top: 0; }
div#projects div#photo_holder { float: right; width: 400px; margin: 0 0 1em 1em; }
div#projects img#project_photo { border: 3px double white; width: 100%; margin: 0; }
div#projects p.credit { font-style: italic; margin-top: 1em; }
div#projects a.load-photo { display: block; float: left; width: 1.5em; padding: .5em; margin: .5em; background-color: #4b8ba2; color: white; text-align: center; font-weight: bold; }
/* margin should remain 0. */
div#services { padding: 0 3em; margin: 0; overflow: auto; height: 446px; }
div#services h1 { border-bottom: 1px dashed #4b8ba2; }
/* margin should remain 0. */
div#information { padding: 1em 3em; margin: 0; overflow: auto; height: 446px; }
div#information h1 { color: white; border-bottom: 1px dashed #4b8ba2; }
div#information h2 a { color: #4b8ba2; text-decoration: none; }
div#information h4 { margin-bottom: 0; }
div#information ul { margin: 0; }
div#information a.pdf-file { background: transparent url(images/layout/page_white_acrobat.png) no-repeat scroll top left; padding-left: 1.75em; }
div#information img#license-map { margin-top: 2em; border: 1px dashed #4b8ba2; text-align: center; }
div#information p.testimonial { margin-bottom: 0; }
div#information p.quote { font-weight: bold; margin-top: 0; }
/* margin should remain 0 */
div#contact { padding: 0 3em; margin: 0; overflow: auto; height: 446px; }
div#contact h1 { font-variant: small-caps; margin-bottom: 0; }
div#contact table.contactinfo { border: 0; }
div#contact table.contactinfo td { vertical-align: top; }
/* margin-bottom should remain 0 so IE looks right */
div#terms { font-family: Arial, Helvetica, sans-serif; font-size: .75em; text-align: left; width: 70%; margin: 0 auto; padding-bottom: 3em; }
div#terms h1 { color: #4b8ba2; font-weight: normal; font-size: 1.5em; }
div#terms h2 { margin-bottom: 0; color: #4b8ba2; font-weight: normal; font-size: 1.25em; }
div#footer { text-align: left; }
div#footer p#copyright { font-family: 'Arial Black', Gadget, sans-serif; font-size: 0.55em; font-variant: small-caps; margin: 0.5em; }
div#footer a { color: #777777; text-decoration: none; }
div#footer a:hover { color: #cccccc; }