/*************************************************** CSS Documentation: ================== Layout Details ================== Homepage - fixed height as all lines/content containers are in the background - site admins need to keep content within charactor count to keep the layout intact. 3 col layout for the 2nd row. THe first row will contain video that will run in a layer above a background image. ALERT - This site uses seperate header footer files for the homepage and the inside pages Styles are laid out on one line where possible to keep optimized and beholden to bandwidth. For futher optimization, remove these comments for the web stylesheet. ================== About CSS ================== To assist with viewing styles for this page: 1. Get a copy of Mozilla Firefox at http://mozilla.org/products/firefox/ if you don't have one already. 2. Install Chris Pedericks Web Developer's Toolbar if you haven't already at http://www.chrispederick.com/work/firefox/webdeveloper/ 3. You have other software that enables you to dissect a Web page layout. ===================== Browser Compatibility ===================== Viewable in all standard compliant browsers, degrades gracefully in older, non compliant software pre 2000. Note: Even current browsers handle CSS differently. To accomodate these differences with one style sheet, the child selector hack is used. The child selector: html>body #yourstylehere {margin:10px} IE ignores the child selector enabling page authors to assign different attributes for the same content block. When the child selector is used it hides a set of attributes from IE but is read by Mozilla, etal. The style compatible with IE uses the same id or class but without the child selector. You can set major differences such as margins, padding, fonts, colors, etc. second hack - uses the !important attribute so that standard compliant browser read that and ignore the second. IE ignores the !important attribute altogether and so applies the second style. This enables you to make slight various that often overcomes most annoyances like font size differences, margins, etc. ========================= Ugly Safari Hack Used - in menu styles ========================= Which mitigated a need to feed 3 different values for the menu top positioning. oy. my apologies. ========================= In Progress Documentation ========================= This style sheet is in progress and may contain extraneous/unused styles while in production and until release of the final site. Created 01/24/2006 :: Diane Dougherty for Metaphor Studio :: http://www.metaphorstudio.com :: webmaster@metaphorstudio.com ***************************************************/ body {margin: 0px; color: #000; background: #71607D url(../art/pageBG5.gif) repeat; font: normal 12px arial, helvetica, sans-serif;} /*body {margin: 0px; color: #000; background: #71607D; font: normal 12px arial, helvetica, sans-serif;}*/ hr {color: #807C59;background: #807C59;border: 0;height: 1px;text-align: center;} h1 {font: bold 14px arial, helvetica, sans-serif;margin: 0px;} h2 {font: normal 16px arial, helvetica, sans-serif;margin: 0px;color:#411644;} a:link, a:visited, a:active {font: normal 12px arial, helvetica, sans-serif;color: #C5003C;text-decoration: underline;} a:hover { text-decoration: underline; } /************************* Home page styles for 2 columns **************************/ #wrap {width: 762px;margin:0px auto;background: url("../art/homeBG.gif") no-repeat;height:600px;} #header {width: 762px;margin:0px auto;height:135px;background: url("../art/headerBG3.gif") no-repeat;} #header_home {width: 785px;margin:0px auto;height:135px;} #header_in {background: url("../art/headerBG3.gif") no-repeat;width:762px; height:1px;} /* positions hotlinked trans image over the logo which is in the background.*/ .homelink {position:relative;float:left;margin-top:20px;margin-left:20px;z-index:1000;} #hpwrap {background: url("../art/homeBG.gif") no-repeat;width:762px; height:600px;} #feature_img {margin:3px 4px!important;margin:3px 4px;padding-top:0px;} #rows {font-size:12px; color:#000;margin-left:1px;} #row1 {height:216px;} #row1 p {margin:0 0 0 18px; width:98%;padding: 0 0 0 18px;line-height: 130%;} #spotlight {padding: 4px 8px!important;padding: 0px 8px;position:relative;top:10px!important;top:5px;} #spotlight h1 {font-size:13px;color:#fff;margin-top:2px!important;margin-top:0px;} #spotlight h2 {font: italic 11px arial,sans-serif;color:#385126; font-weight:bold;} #spotlight p {color: #fff; font-size:10px;margin-left:0px;padding-left:0px;} #banners {height:14px;} #news {background-color: #E0E0E0;padding-left:10px;padding-top:10px;height:133px;width:220px;} #news h1 {color:#000; font-size:13px;} #news p {font-size:10px; width:90%;} #case_studies {background-color: #E0E0E0;} /************************* Search and form styles **************************/ #searchform {position:relative; top:50px; left:330px;} label.search { font-size:11px;font-weight:bold;color:#7C7C7C;} #searchform input.image {padding:0px; margin:0px;height: 18px;width: 33px;border:0px;} #searchform input {border: solid 1px #7C7C7C;height: 17px;padding-left: 5px;margin-right: 5px;margin-top: 0px;width: 125px;} /*styles for search.jsp page search widget*/ #searchform2 input {border: solid 1px #7C7C7C;height: 17px;width: 125px;} #searchform2 input.image {padding:0px; margin-top:5px;height: 18px;width: 33px;border:0px;} /*styles for login*/ #login {padding-top:4px;} #login p { font-size:10px;color:#fff;margin-left:0px;padding-left:8px;padding-top:4px;} #login input {border: solid 1px #7C7C7C;height: 16px;width: 85px; padding:0px;margin:0px;vertical-align:right;} #login label.un {padding-right:4px;} #login label.pw {padding-right:9px!important;padding-right:12px;padding-bottom:0px;} #login input.image {padding-right:18px;padding-top:0px; height: 23px;width: 54px;border:0px;} /************************* Menu/Submenu and other navigation styles **************************/ /*ugly hack to position in Safari, but then IE reads it too. rutroh. then you have to apply this - !important to Safari's rule then use IE's values - Mozilla as is and comes 1st. oy. Many days of seraching and seeking and trying out to find a solution - a nod to those who shared their special methods. top positioning was the issue and everyone needed a different value - heavy sigh...*/ /* 20081209: hack moved to conditional css (globalIE.css). */ html>body #menu {position:relative;top:81px;left:-165px;}/* good for Mozilla etal*/ /*\*//*/ /* */ /* end the ugly hack - i will try to never do that again - sorry w3c */ #menu ul {padding-top: 2px;list-style-type: none;} #menu ul li {font: normal 14px arial;display: inline;text-align:left;text-transform:uppercase;} #menu a { color:#7C7C7C;text-decoration: none;font: normal 10px arial;padding: 4px 9px!important;padding: 3px 9px;border-left:1px solid #C6003C;background-color:#fff;} #menu li.end_border a {border-right:1px solid #C6003C;} #menu a:hover { color: #ffffff;background-color:#C6003C; text-decoration:none;} /*default submenu styling*/ #submenu {margin-left:0px;} #submenu ul {margin: 0px;padding: 0px;list-style-type: none;} #submenu li {background-color: #C4C4C4;margin:0px;padding:0px;border-bottom: solid 1px #000;text-align: left;} #submenu li a:link, #submenu li a:visited {font: normal 11px helvetica, arial sans-serif;padding: 8px 8px;color: #000;text-decoration: none;display: block;letter-spacing:1px;background-color: #C4C4C4;} #submenu li a:hover {color: #000;text-decoration: none;background-color: #C6003C;} #submenu li.current_page a {background-color: #C6003C;text-decoration: none;} /************************* Inner page styles **************************/ #innerwrap {background-repeat: repeat-y; background-position: center; background-image: url("../art/pageBG-new.gif");margin:auto;} #articles {width:90%;margin-left:12px!important;margin-left:30px;} #articles h1.header {font: bold 18px arial, helvetica, sans-serif;margin: 0px;color:#4C405B;margin-top:8px;} #articles h2.header {font: bold 14px arial, helvetica, sans-serif;margin: 0px;color:#000;} #content h1 {color:#103178;font-size: 20px;font-weight:normal;margin-bottom:2px;margin-top:0px;} #content h2 {font-style: italic; font-size: 11px; color:#D41F2A;font-weight:normal;margin-top:2px;margin-bottom:8px;} #content p {color:#000;width:98%;} #content p.caption {text-align:right;font-style:italic;color:#A9A8A9;} p.caption {text-align:right;font-style:italic;color:#A9A8A9;} /************************* Home page footer styles **************************/ #footer {clear: both;margin-top:130px!important;margin-top:0px;} #footer p {width:800px;margin:auto;color:#ffffff;font-size:9px;width:60%;text-align:center;padding-top:18px!important;padding-top:0px;} #footer a {font-size:10px;color:#ffffff;text-decoration:underline;} #footer ul {position: relative;top: 6px;text-align:center;padding: 0;list-style-type: none;font-weight: bold;margin: 0px;} #footer ul li {color:#BDBDBD;display: inline;text-align: center;margin: 0;text-transform:uppercase;} #footer ul li a {color:#BDBDBD;text-decoration:none;padding:0 6px;} #footer ul li a:hover {text-decoration:underline;} /************************* Inside page footer_IN styles **************************/ #footer_IN {clear: both; background: url("../art/footerBG2.gif") no-repeat top center; margin:auto;} #footer_IN p {width:800px;margin:auto;color:#ffffff;font-size:9px;width:60%;text-align:center;padding-top:18px!important;padding-top:0px;} #footer_IN a {font-size:10px;color:#ffffff;text-decoration:underline;} #footer_IN ul {position: relative;top: 5px;text-align:center;padding: 0;list-style-type: none;font-weight: bold;margin: 0px;} #footer_IN ul li {color:#BDBDBD;display: inline;text-align: center;margin: 0; text-transform:uppercase;} #footer_IN ul li a {color:#BDBDBD;text-decoration:none;padding:0 6px;} #footer_IN ul li a:hover {text-decoration:underline;} /************************* Misc styles **************************/ /* styles the image list and feature image captions */ .videoCaption {font-family: arial, helvetica, sans-serif;font-size: 10px;color: #000000;text-decoration: none;padding-top:4px;text-align:center;} .photoCaption {font-family: arial, helvetica, sans-serif;font-size: 10px;font-style: italic;color: #000000;text-decoration: none;padding-right:38px;padding-top:4px;} /* styles the imageViewer.jsp Close Window link */ .photoClose {font-family: arial, helvetica, sans-serif;font-size: 12px;color: #FFFFFF;} /*styles the download links if there are any*/ a.download:link, a.download:visited, a.download:active {font: bold 14px courier, times, serif;color: #FF7F00;text-decoration: none;} a.download:hover {color: #CA4A0A;text-decoration: none;} #closeWin {background-color:#990000;font: bold 12px arial, helvetica, sans-serif;color: #FFFFFF;width:100%;height:20px;}