/* General notes on margin vs padding: margin separates outer edge from border, and padding separates border from inner content (like text). Background is "underneath" border and padding, but does not extend into margins. */ /* General notes on positioning: position:relative DIVs are relative to parent and each other. position:relative DIVs do not "see" position:absolute DIVs. So for dynamic vertical expansion: make all but bottom DIV relative, and make bottom DIV absolute bottom:0px. Give 2nd-to-bottom DIV a margin equal to the bottom DIV height. Apply same logic to widths for dynamic horizontal expansion. */ /* Avoid quirks mode on IE that does weird stuff to DIV heights by putting the DOCTYPE and meta X-UA-Compatible lines in each web page. */ /* BEWARE using single-quotes or apostrophes in comments - pocket ie * chokes on it and ignores most instructions that follow it. */ /* underscore hack: preceding a css property with a underscore * causes it to be understood by pre-ie7 ie browsers. */ /* Note that each @media type declaration for handheld * can only contain one style apiece. * This is a limitation of IE Mobile! * * Also be sure to use Screen with capital S if you in your @media * tags if you want Mobile IE to ignore it. * * Moreover, IE6.1 seems to pick up the type="screen" stylesheet, * but acknowledges the @media handheld tags inside such file. */ html {height:100%;} /* I need to hide my logo placeholder iframe */ iframe {height:0px;display:none;} body { background-color:#FFFFFF; position:relative; height:100%; /* background-image: url(../images/bkgd.jpg); background-repeat: repeat-x; background-position: left top; */ margin: 10px; } /* the rtth (return to top header) section is always invisible; we * only enable it via Javascript when necessary. */ #rtth {display:none;} @media Screen, print { body {min-width:800px;} } @media handheld { body {min-width:0px;margin:0px;} } .blackberry body {min-width:0px;margin:0px;} .body2 { margin:10px; } @media handheld { .body2 {margin:0px;} } .blackberry .body2 {margin:0px;} #colorbar {height:auto;position:relative;border:0px;padding:5px;} #blackbar {background-color:#000000;position:absolute;left:0px;top:0px;width:30px;height:500px;} #whitebar {background-color:#FFFFFF;position:absolute;left:30px;top:0px;width:25px;height:500px;} #color1 {background-color:#0473c6;position:relative;left:0px;top:0px;height:75px;width:75px;margin:5px;} #color2 {background-color:#20bf55;position:relative;left:0px;top:0px;height:75px;width:75px;margin:5px;} #color3 {background-color:#a3ccea;position:relative;left:0px;top:0px;height:75px;width:75px;margin:5px;} #color4 {background-color:#7a8590;position:relative;left:0px;top:0px;height:75px;width:75px;margin:5px;} #color5 {background-color:#b9e36a;position:relative;left:0px;top:0px;height:75px;width:75px;margin:5px;} #color6 {background-color:#c50000;position:relative;left:0px;top:0px;height:75px;width:75px;margin:5px;} #color7 {background-color:#73A3F8;position:relative;left:0px;top:0px;height:75px;width:75px;margin:5px;} #color8 {background-color:#31466A;position:relative;left:0px;top:0px;height:75px;width:75px;margin:5px;} /* The first line below sets the height to auto so that the DIV * will resize with its contained content. * The second line is a hack for IE, since IE does not like height:auto * here, but instead wants height:100%. * I have no idea why this star-html hack works, * but it does! I found it at * http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/ * and * http://en.wikipedia.org/wiki/CSS_filter#Star_HTML_hack */ /* Use this class to surround any section you want bordered with * a bordered box. Use a secondary class to add any additional * formatting (like positioning) so that this .borderedbox class * remains reusable and generic. */ .borderedbox {height:auto;padding:0px;margin:0px;width:auto;position:relative;} * html .borderedbox {height:100%;} /* For the side bars, we need to use two nested DIVs. * The outer DIV (*_outer) sets the top or left position to 9px * (the width of the corner - effectively becoming a spacer). * The inner DIV needs to use a corresponding bottom or right position * of 18px (double the width of the corner - effectively becoming a * spacer as well as to "reverse" the offset caused by the outer DIV). * Both DIVs use a height or width of 100%, but with the offsets * it yields a too-big graphic which is then nicely cut off * properly by the use of overflow:hidden. * Convoluted, huh? Using CSS is supposed to be better than using * HTML tables, but this CSS seems even more convoluted, but I guess * the upside is that we do not have to nest our content in a big * table every time; we can just copy-paste the necessary DIVs * anywhere within the content-containing DIV (since we are using * absolutely positioning). * * If you want to set a background color for the box, set it in * the big multi-selector entry beneath the * borderedbox_colored_background* declarations. Or set background:none;. * The borderedbox_colored_background* classes are used to * fill in background colors. The *background and *background_outer * classes cover the center section, and the *background_snip* classes * handle tiny chunks of the corners. * * The font-size:1px and line-height:0 override some default heights that * IE imposes. */ .borderedbox_colored_background_outer {position:absolute;height:100%;overflow:hidden;width:100%;height:100%;top:3px;left:3px;} .borderedbox_colored_background {position:absolute;bottom:6px;right:6px;width:100%;height:100%;display:block;font-size:1px;line-height:0;overflow:hidden;} /* The "snip" styles are responsible for filling in the * corner background colors. */ .borderedbox_colored_background_snip_tl_11 {position:absolute;height:2px;width:9px;top:7px;left:0px;} .borderedbox_colored_background_snip_tl_12 {position:absolute;height:5px;width:8px;top:4px;left:1px;} .borderedbox_colored_background_snip_tl_13 {position:absolute;height:6px;width:7px;top:3px;left:2px;} .borderedbox_colored_background_snip_tl_21 {position:absolute;width:2px;height:9px;left:7px;top:0px;} .borderedbox_colored_background_snip_tl_22 {position:absolute;width:5px;height:8px;left:4px;top:1px;} .borderedbox_colored_background_snip_tl_23 {position:absolute;width:6px;height:7px;left:3px;top:2px;} .borderedbox_colored_background_snip_tr_11 {position:absolute;height:2px;width:9px;top:7px;right:0px;} .borderedbox_colored_background_snip_tr_12 {position:absolute;height:5px;width:8px;top:4px;right:1px;} .borderedbox_colored_background_snip_tr_13 {position:absolute;height:6px;width:7px;top:3px;right:2px;} .borderedbox_colored_background_snip_tr_21 {position:absolute;width:2px;height:9px;right:7px;top:0px;} .borderedbox_colored_background_snip_tr_22 {position:absolute;width:5px;height:8px;right:4px;top:1px;} .borderedbox_colored_background_snip_tr_23 {position:absolute;width:6px;height:7px;right:3px;top:2px;} .borderedbox_colored_background_snip_bl_11 {position:absolute;height:2px;width:9px;bottom:7px;left:0px;} .borderedbox_colored_background_snip_bl_12 {position:absolute;height:5px;width:8px;bottom:4px;left:1px;} .borderedbox_colored_background_snip_bl_13 {position:absolute;height:6px;width:7px;bottom:3px;left:2px;} .borderedbox_colored_background_snip_bl_21 {position:absolute;width:2px;height:9px;left:7px;bottom:0px;} .borderedbox_colored_background_snip_bl_22 {position:absolute;width:5px;height:8px;left:4px;bottom:1px;} .borderedbox_colored_background_snip_bl_23 {position:absolute;width:6px;height:7px;left:3px;bottom:2px;} .borderedbox_colored_background_snip_br_11 {position:absolute;height:2px;width:9px;bottom:7px;right:0px;} .borderedbox_colored_background_snip_br_12 {position:absolute;height:5px;width:8px;bottom:4px;right:1px;} .borderedbox_colored_background_snip_br_13 {position:absolute;height:6px;width:7px;bottom:3px;right:2px;} .borderedbox_colored_background_snip_br_21 {position:absolute;width:2px;height:9px;right:7px;bottom:0px;} .borderedbox_colored_background_snip_br_22 {position:absolute;width:5px;height:8px;right:4px;bottom:1px;} .borderedbox_colored_background_snip_br_23 {position:absolute;width:6px;height:7px;right:3px;bottom:2px;} .borderedbox_colored_background, .borderedbox_left, .borderedbox_right, .borderedbox_top, .borderedbox_bottom, .borderedbox_colored_background_snip_tl_11, .borderedbox_colored_background_snip_tl_12, .borderedbox_colored_background_snip_tl_13, .borderedbox_colored_background_snip_tl_21, .borderedbox_colored_background_snip_tl_22, .borderedbox_colored_background_snip_tl_23, .borderedbox_colored_background_snip_tr_11, .borderedbox_colored_background_snip_tr_12, .borderedbox_colored_background_snip_tr_13, .borderedbox_colored_background_snip_tr_21, .borderedbox_colored_background_snip_tr_22, .borderedbox_colored_background_snip_tr_23, .borderedbox_colored_background_snip_bl_11, .borderedbox_colored_background_snip_bl_12, .borderedbox_colored_background_snip_bl_13, .borderedbox_colored_background_snip_bl_21, .borderedbox_colored_background_snip_bl_22, .borderedbox_colored_background_snip_bl_23, .borderedbox_colored_background_snip_br_11, .borderedbox_colored_background_snip_br_12, .borderedbox_colored_background_snip_br_13, .borderedbox_colored_background_snip_br_21, .borderedbox_colored_background_snip_br_22, .borderedbox_colored_background_snip_br_23 {background:none;} .borderedbox_left_outer {position:absolute;height:100%;overflow:hidden;width:9px;top:9px;left:0px;} .borderedbox_left {position:absolute;bottom:18px;left:0px;width:9px;height:100%;display:block;background-image:url(../images/left_border.png);background-repeat:repeat-y;font-size:1px;line-height:0;overflow:hidden;} .borderedbox_right_outer {position:absolute;height:100%;overflow:hidden;width:9px;top:9px;right:0px;} .borderedbox_right {position:absolute;bottom:18px;right:0px;width:9px;height:100%;display:block;background-image:url(../images/right_border.png);background-repeat:repeat-y;font-size:1px;line-height:0;overflow:hidden;} .borderedbox_top_outer {position:absolute;width:100%;overflow:hidden;height:9px;top:0px;left:9px;} .borderedbox_top {position:absolute;right:18px;top:0px;height:9px;width:100%;display:block;background-image:url(../images/top_border.png);background-repeat:repeat-x;font-size:1px;line-height:0;overflow:hidden;} .borderedbox_bottom_outer {position:absolute;width:100%;overflow:hidden;height:9px;bottom:0px;left:9px;} .borderedbox_bottom {position:absolute;right:18px;bottom:0px;height:9px;width:100%;display:block;background-image:url(../images/bottom_border.png);background-repeat:repeat-x;font-size:1px;line-height:0;overflow:hidden;} .borderedbox_topleft {position:absolute;top:0px;left:0px;width:9px;height:9px;background-image:url(../images/top_left_corner.png);background-repeat:no-repeat;font-size:1px;line-height:0;overflow:hidden;} .borderedbox_topright {position:absolute;top:0px;right:0px;width:9px;height:9px;background-image:url(../images/top_right_corner.png);background-repeat:no-repeat;font-size:1px;line-height:0;overflow:hidden;} .borderedbox_bottomleft {position:absolute;bottom:0px;left:0px;width:9px;height:9px;background-image:url(../images/bottom_left_corner.png);background-repeat:no-repeat;font-size:1px;line-height:0;overflow:hidden;} .borderedbox_bottomright {position:absolute;bottom:0px;right:0px;width:9px;height:9px;background-image:url(../images/bottom_right_corner.png);background-repeat:no-repeat;font-size:1px;line-height:0;overflow:hidden;} /* Disables the borders on IE6 and below, * since they do not work properly anyway. */ .borderedbox_left_outer, .borderedbox_left, .borderedbox_right_outer, .borderedbox_right, .borderedbox_top_outer, .borderedbox_top, .borderedbox_bottom_outer, .borderedbox_bottom, .borderedbox_topleft, .borderedbox_topright, .borderedbox_bottomleft, .borderedbox_bottomright {_display:none;} .borderedboxcontent {position:relative;padding:10px;} /* provides a backdrop onto which the rest of the page can be rendered. * This is where we set properties like centering the backdrop, and making * it white for writing upon. * * We use no padding because it does weird stuff to child DIV positioning. * If we want padding, we should do it in the child DIVs and adjust their * widths if necessary. * * To make full-width, replace the left/width/margin-left with width:100%. */ /* If you want a border, add .parentLeftBorder and .parentRightBorder DIVs * right inside parentlayer. * Add padding to parentlayer. */ .parentlayer { position:relative; top:0; height:auto; background-color:#ffffff;padding-bottom:5px;padding-left:5px;padding-right:5px; } @media Screen, print { .parentlayer {left:50%; width:800px; margin-left:-400px; min-height:400px; } } @media handheld { .parentlayer {left:0px; width:auto; margin:0px;min-height:0px;padding:0px;} } .blackberry .parentlayer {left:0px; width:auto; margin:0px;min-height:0px;padding:0px;} .parentRightBorder {position:absolute; top:0;bottom:0;right:0;width:5px;height:auto;padding:0px;} .parentRightBorder_sub {position:absolute; top:0;bottom:0;right:0;width:5px;height:auto;padding:0px;} .parentLeftBorder {position:absolute; top:0;bottom:0;left:0;width:5px;height:auto;padding:0px;} .parentLeftBorder_sub {position:absolute; top:0;bottom:0;left:0;width:5px;height:auto;padding:0px;} @media Screen { .parentRightBorder_sub {background-image:url('../images/shadow_vertical_right.png');background-repeat:repeat-y;} .parentLeftBorder_sub {background-image:url('../images/shadow_vertical_left.png');background-repeat:repeat-y;} } @media handheld { .parentRightBorder {display:none;height:0px;width:0px;} } @media handheld { .parentLeftBorder {display:none;height:0px;width:0px;} } @media handheld { .parentRightBorder_sub {display:none;height:0px;width:0px;} } @media handheld { .parentLeftBorder_sub {display:none;height:0px;width:0px;} } .blackberry .parentRightBorder, .blackberry .parentLeftBorder, .blackberry .parentRightBorder_sub, .blackberry .parentLeftBorder_sub {display:none;height:0px;width:0px;} /* Put a div of one of these class around anything that needs some * padding. */ .padded_area_standard {padding:5px;} .padded_area_extra {padding:10px;} .padded_area_extra_horizontal {padding-left:10px;padding-right:10px;} /* main subsections of a normal page */ /* set their widths to the parentlayer width; if you set width=100%, it will use parentlayer width + padding + margin */ .headerbar {position:relative; top:0; height:150px; width:100%; border:0px;background-color:#FFFFFF;max-width:800px;} /* mainsection bottom margin should match the height of footerbar so it does not overlap */ .mainsection {position:relative; top:0px;height:auto; width:100%; border:0px; margin-bottom:40px;} @media handheld { .mainsection {width:auto;} } .blackberry .mainsection {width:auto;} /* Compact the header on handheld */ @media handheld { .headerbar {height:auto;max-width:inherit;width:auto;} } .blackberry .headerbar {height:auto;max-width:inherit;width:auto;} /* headerbar and mainsection are relative (to top of parent); footerbar is pegged to the bottom via absolute positioning. mainsection and footer do not overlap due to mainsection margin-bottom. */ .footerbar {position:absolute; bottom:0px; height:40px; width:100%; border:0px; max-width:800px;} @media print { .footerbar {position:relative;height:auto;max-width:inherit;width:auto;} } @media handheld { .footerbar {position:relative;height:auto;max-width:inherit;width:auto;} } .blackberry .footerbar {position:relative;height:auto;max-width:inherit;width:auto;} /* Use these styles if you want a subheader, 2-column, subfooter layout. */ /* NOTE: For CradleComforts, if you change the width% for * .mainsection_left or .mainsection_right, you * also need to change .logo and .logoDescription */ .mainsection_top {position:relative;height:auto;min-height:20px;width:100%;} .mainsection_top_picture {background-image:url('../images/graph_background_cropped_800pxw.jpg');background-repeat:no-repeat;height:240px;} @media handheld { .mainsection_top_picture {overflow:hidden;} } .blackberry .mainsection_top_picture {overflow:hidden;} /* Hide the main graphic when on a Handheld */ @media handheld { .mainsection_top {display:none;height:0px;width:0px;} } .blackberry .mainsection_top {display:none;height:0px;width:0px;} @media handheld { .mainsection_top_picture {display:none;height:0px;width:0px;} } .blackberry .mainsection_top_picture {display:none;height:0px;width:0px;} .swapableoverlay {float:left;top:0px;left:0px;max-height:240px;max-width:600px;overflow:hidden;display:inline-block;} #swapableText {float:left;top:0px;left:0px;display:inline-block;} .pictureoverlay {clear:right;float:right; height:55px; width:180px;margin-right:10px;margin-top:10px;padding:5px;background-color:#20bf55;} #imgSwapableImage {max-height:240px;_height:240px;} .mainsection_left {float:left; height:100%;width:15%;} .mainsection_right {float:right;width:84%;height:auto;} .mainsection_bottom {position:relative;clear:both;height:auto;width:100%;} @media handheld { .mainsection_bottom {padding:0 5px 0;width:auto;} } .blackberry .mainsection_bottom {padding:0 5px 0;width:auto;} .mobileWordoverlay {display:none;} .wordoverlay {float:left;top:0px;left:0px;margin:5px;overflow:hidden;display:inline-block;color:#0473c6;font-weight:bold;font-style:italic;font-size:25px;line-height:1;height:100%;width:100%;} #wordoverlay1, #wordoverlay5 {position:absolute;right:370px;top:30px;display:inline-block;} #wordoverlay2, #wordoverlay6 {position:absolute;right:310px;top:102px;display:inline-block;} #wordoverlay3, #wordoverlay7 {position:absolute;left:550px;top:55px;display:inline-block;} /* explicitly set width and height so text does not overflow */ #wordoverlay4, #wordoverlay8 {position:absolute;left:610px;top:165px;display:inline-block;overflow:hidden;width:190px;height:75px;overflow:hidden;} #wordoverlay101 {float:left;position:absolute;left:300px;top:20px;display:inline-block;} #wordoverlay102 {float:left;position:absolute;left:330px;top:80px;display:inline-block;} #wordoverlay103 {float:left;position:absolute;left:620px;top:20px;display:inline-block;} #wordoverlay104 {float:left;position:absolute;right:20px;bottom:50px;display:inline-block;} #wordoverlay105 {float:left;position:absolute;left:550px;bottom:10px;display:inline-block;} #wordoverlay201 {position:absolute;left:275px;top:72px;display:inline-block;} #wordoverlay202 {position:absolute;left:335px;top:32px;display:inline-block;} #wordoverlay203 {position:absolute;left:550px;bottom:5px;display:inline-block;} #wordoverlay204 {position:absolute;left:610px;bottom:45px;display:inline-block;} /* width:230px is good for 3-column; 350px is good for 2-column */ .mainsection_bottom_column {height:auto;margin-left:15px;margin-right:15px;margin-top:20px;} /* On screen or print media, display the columns side-by-side */ @media Screen, print { .mainsection_bottom_column {float:left;width:350px;} } @media handheld { .mainsection_bottom_column {float:none;padding:0px;width:auto;margin:0px;} } .blackberry .mainsection_bottom_column {float:none;padding:0px;width:auto;margin:0px;} .mainsection_bottom_clear {clear:both; position:relative; } /* styles for text pages, with a 3-column or 2-column option */ .main_left_3column {height:auto; padding-right:10px;} .main_middle_3column {height:auto;} .main_right_3column {height:auto;} @media Screen, print { .main_left_3column {float:left; padding-left:15px;width:115px; padding-top:40px;} .main_middle_3column {float:left; width:480px; } .main_right_3column {float:right; width:180px;} } @media handheld { .main_left_3column {float:none; padding:inherit; width:100%;padding:0px;} } .blackberry .main_left_3column {float:none; padding:inherit; width:100%;padding:0px;} @media handheld { .main_middle_3column {float:none; padding:inherit; width:100%;padding:0px;} } .blackberry .main_middle_3column {float:none; padding:inherit; width:100%;padding:0px;} @media handheld { .main_right_3column {float:none; padding:inherit; width:100%;padding:0px;} } .blackberry .main_right_3column {float:none; padding:inherit; width:100%;padding:0px;} .main_left_2column {height:auto; padding-right:10px;} .main_middle_2column {padding-right:10px;height:auto;} @media Screen, print { .main_left_2column {float:left; padding-left:15px;width:115px; padding-top:40px;} .main_middle_2column {float:left; width:650px; } } @media handheld { .main_left_2column {float:none; padding:inherit; width:100%;padding:0px;} } .blackberry .main_left_2column {float:none; padding:inherit; width:100%;padding:0px;} @media handheld { .main_middle_2column {float:none; padding:inherit; width:100%;padding:0px;} } .blackberry .main_middle_2column {float:none; padding:inherit; width:100%;padding:0px;} /* Addresses are sized to assume the 2-column layout */ @media Screen, print { #addressCA1 {float:left;width:195px;margin-left:10px;margin-right:10px;display:inline-block;vertical-align:top;text-align:center;} #addressMap {float:left;width:200px;display:inline-block;vertical-align:top;text-align:center;} #addressNC1 {float:left;width:195px;margin-left:10px;margin-right:10px;display:inline-block;vertical-align:top;text-align:center;} #addressClear {clear:both;} .addressBlock H3 {text-align:center;} } /* Hide the address map on handheld; otherwise it breaks up the * addresses, since we turn off 3-column mode. */ @media handheld { #addressCA1 {float:none;width:inherit;text-align:left;margin:inherit;display:block;} } .blackberry #addressCA1 {float:none;width:inherit;text-align:left;margin:inherit;display:block;} @media handheld { #addressNC1 {float:none;width:inherit;text-align:left;margin:inherit;display:block;} } .blackberry #addressNC1 {float:none;width:inherit;text-align:left;margin:inherit;display:block;} @media handheld { #addressMap {height:0px;display:none;} } .blackberry #addressMap {height:0px;display:none;} @media handheld { .addressBlock H3 {text-align:left;} } .blackberry .addressBlock H3 {text-align:left;} /* NOTE: If you are going to try to center the logo or the logo description * over a two-column body (mainsection_*), then * if you change the width% for .logo or .logoDescription, you * also need to change .mainsection_left and .mainsection_right. */ .decorative_bar1 {position:relative;display:inline-block;height:25px;width:100%;background-color:#0473c6;} .logo {float:left;display:inline-block;height:90px;width:15%;padding-top:20px;padding-bottom:20px;padding-left:5px;padding-right:5px;} /* Must set width to actual logo width + background-position X value */ #imgLogo {position:relative;display:inline-block;height:90px;width:226px; background-image: url('../images/logo_96dpi_60pxh_216pxw.png');background-repeat:no-repeat;background-position:10px 0px;} a img#imgLogo {border-style:none;} .nologomode #imgLogo {background-image: none;} /* Change logo when on a Handheld */ .logoDescription {position:relative;_position:absolute;_right:0px;display:inline-block;margin-left:auto;margin-right:auto;height:90px;width:80%;margin-top:auto;margin-bottom:auto;text-align:right;} #logoDescription {position:absolute;display:inline-block;top:0px;/*bottom:0px;*/left:0px;right:0px;margin:auto;font-size:10px;color: #555555;text-align:right;width:100%;} #logoDescription2 {position:absolute;display:inline-block;/*top:0px;*/bottom:0px;left:0px;right:0px;margin:auto;font-size:24px;font-weight:bold;color:#555555;text-align:right;width:100%;} #logoDescription2_small {position:absolute;display:inline-block;/*top:0px;*/bottom:0px;left:0px;right:0px;margin:auto;font-size:12px;color:#555555;text-align:right;width:100%;} @media handheld { .decorative_bar1 {display:none;height:0px;} } .blackberry .decorative_bar1 {display:none;height:0px;visibility:hidden;} @media handheld { .logo {float:none;display:block;height:49px;width:100%;padding:0px;overflow:hidden;} } .blackberry .logo {float:none;display:block;height:49px;width:100%;padding:0px;overflow:hidden;} @media handheld { #imgLogo {background-image: url('../images/logo_96dpi_49pxh_174pxw.png');height:49px;width:100%;overflow:hidden;padding:0px;} } .blackberry #imgLogo {background-image: url('../images/logo_96dpi_49pxh_174pxw.png');height:49px;width:100%;overflow:hidden;padding:0px;} .blackberry div#imgLogo {background-image: url('../images/logo_96dpi_49pxh_174pxw.png');height:49px;width:100%;overflow:hidden;padding:0px;} @media handheld { .logoDescription {height:auto;width:100%;padding:0px;} } .blackberry .logoDescription {height:auto;width:100%;padding:0px;} /* hide the "Contact Us" link at the top on Handhelds */ @media handheld { #logoDescription {height:0px;width:0px;display:none;padding:0px;} } .blackberry #logoDescription {height:0px;width:0px;display:none;padding:0px;} .blackberry div#logoDescription {height:0px;width:0px;display:none;padding:0px;} @media handheld { #logoDescription2 {display:block;position:relative;font-size:9px;line-height:1em;text-align:left;padding:0px;padding-left:10px;width:auto;} } @media handheld { #logoDescription2_small {display:block;position:relative;font-size:9px;line-height:1em;text-align:left;padding:0px;padding-left:10px;width:auto;} } .blackberry #logoDescription2 {display:block;position:relative;font-size:9px;line-height:1em;text-align:left;padding:2px 10px 5px;width:auto;} .blackberry div#logoDescription2 {display:block;position:relative;font-size:9px;line-height:1em;text-align:left;padding:2px 10px 5px;width:auto;} .blackberry #logoDescription2_small {display:block;position:relative;font-size:9px;line-height:1em;text-align:left;padding:2px 10px 5px;width:auto;} .blackberry div#logoDescription2_small {display:block;position:relative;font-size:9px;line-height:1em;text-align:left;padding:2px 10px 5px;width:auto;} /* overflow:hidden keeps menu item separators from extending below. * DOH - but that prevented drop-down menus. So I tried instead * turning it off, and instead setting .mainmenuitem ul li to * padding-bottom:0 and .main_menubar_holder z-index:999, * and together those seem to contain the separator bars while enabling * proper functioning of drop-down menus. */ .main_menubar_holder {position:absolute;left:0px;bottom:0px;height:25px;width:100%;background-color:#0473c6;/*overflow:hidden;*/} /* If you want to indent the left start point of the menu, set left: here */ .main_menubar {position:absolute;} .main_menubar_2 {position:absolute; right:0;} @media handheld { .main_menubar_holder {position:relative;height:auto;overflow:auto;width:auto;} } .blackberry .main_menubar_holder {position:relative;height:auto;overflow:auto;width:auto;} @media handheld { .main_menubar {position:relative;} } @media handheld { .main_menubar_2 {position:relative;} } .blackberry .main_menubar {position:relative;} .blackberry .main_menubar_2 {position:relative;} .nav { color: #ffffff; font-size: 12px; font-weight: normal; text-decoration: none; font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif; } a.nav { color: #ffffff; font-weight: normal; } a:hover.nav { color: #d4b400; text-decoration: none; } .content { color: #000000; font-size: 12px; font-weight: normal; line-height: 1.5em; text-decoration: none; font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif; } a.content { color: #007145; font-weight: normal; } a:hover.content { color: #4a7c99; text-decoration: none; } /* display:block causes the link area to span the whole width of the menu panel */ .mainmenuitem {font-size: 12px; font-weight: normal; text-decoration:none;line-height:14px;} @media handheld { .mainmenuitem {font-size:inherit;line-height:inherit;} } .blackberry .mainmenuitem {font-size:inherit;line-height:inherit;} .mainmenuitem a, a.mainmenuitem {color: #FFFFFF; font-weight: bold;text-decoration:none;display:block;padding:5px 2em 5px;} .mainmenuitem a:hover, a:hover.mainmenuitem {color:#73A3F8;text-decoration:none;} .mainmenuitem a:active, a:active.mainmenuitem {color:#555555;} /* Make this display:inline-block and float:left if you want a horizontal menu */ /* padding-bottom:0px truncates the bottom of the vertical line * ... except on ie7, so we add a "coverup" border to fix it. */ .mainmenuitem ul li {float:left;list-style:none;background-image:none;border-right:1px solid #444;padding-left:0px;padding-right:0px;display:inline-block;padding-top:.1em;padding-bottom:0px;} /* ie7: all kinds of problems with border, so use pixel-graphic instead */ .ie7 .mainmenuitem ul li {border-right-style: none;background-position: center right;background-image:url('../images/graydot.png');background-repeat:repeat-y;} /* submenus */ /* tried z-index on .main_menubar_holder, but that was position:absolute. * z-index seems to break in ie7 unless it is on a position:relative item. */ .headerbar {z-index:999;} .mainmenuitem li ul {display:none;width:auto;min-width:8em;background-color:#0473c6} .mainmenuitem li:hover ul {left:auto;display:block;position:absolute;padding:0px;margin:0px;} .mainmenuitem li:hover li {float:none;display:block;border-right:none;border-top:1px solid #fff; padding-left:0px;padding-right:0px;} /* border-top width is weird in ie7, so we will just turn it off. * And since we turned on a bottom-border for .ie .mainmenuitem ul li, * we will turn that off, too. * And we will turn off the right-border graphic. */ .ie7 .mainmenuitem li:hover li {border-top-style:none; border-bottom-style:none;background-image: none;} /* Be more space-efficient on a handheld */ @media handheld { .mainmenuitem ul li {padding:2px 0px 2px;display:block;float:none;border-top:1px solid #fff;border-right-style:none;} } .blackberry .mainmenuitem ul li {padding:2px 0px 2px;display:block;float:none;border-top:1px solid #fff;border-right-style:none;} @media handheld { .mainmenuitem a, a.mainmenuitem {padding:0px 5px 0px;} } .blackberry .mainmenuitem a, a.mainmenuitem {padding:0px 5px 0px;} /* Hide the submenus of the main menu on a handheld */ @media handheld { .mainmenuitem li:hover ul {display:none;} } @media handheld { .mainmenuitem li:hover li {display:none;} } .blackberry .mainmenuitem li:hover ul {display:none;} .blackberry .mainmenuitem li:hover li {display:none;} .secondarymenuitem_header {font-size: 12px; font-weight:bold; text-decoration:none;line-height:14px;padding-bottom:5px;background-color:#FFFFFF;} .secondarymenuitem {font-size: 12px; font-weight: normal; text-decoration:none;line-height:14px;background-color:#FFFFFF;} .secondarymenuitem a, a.secondarymenuitem {text-decoration:none;display:block;padding:5px;} .secondarymenuitem a:hover, a:hover.secondarymenuitem {color:#73A3F8;text-decoration:none;} .secondarymenuitem a:active, a:active.secondarymenuitem {color:#555555;} /* Make this display:inline-block and float:left if you want a horizontal menu */ .secondarymenuitem ul li {background-position: 0 .6em;background-image:none;} @media Screen { .secondarymenuitem ul li:hover {background-image:url('../images/bullet_arrow.gif');} } /* For Handheld, make it a horizontal menu */ @media handheld { .secondarymenuitem_header {height:0px;display:none;} } .blackberry .secondarymenuitem_header {height:0px;display:none;} @media handheld { .secondarymenuitem {font-size:inherit;line-height:inherit;} } .blackberry .secondarymenuitem {font-size:inherit;line-height:inherit;} @media handheld { .secondarymenuitem ul {background-color:#DDDDDD;} } .blackberry .secondarymenuitem ul {background-color:#DDDDDD;} @media handheld { .secondarymenuitem ul li {background-position: center right;background-image:none;border-right:1px solid #444;display:inline-block; padding:0px;font-size:inherit;line-height:inherit;} } .blackberry .secondarymenuitem ul li {background-position: center right;background-image:none;border-right:1px solid #444;display:inline-block; padding:0px;font-size:inherit;line-height:inherit;} @media handheld { .secondarymenuitem a, a.secondarymenuitem {text-decoration:none;display:block;padding-top:0px;padding-bottom:0px;} } .blackberry .secondarymenuitem a, a.secondarymenuitem {text-decoration:none;display:block;padding-top:0px;padding-bottom:0px;} /* To make the currently-selected page menu item stand out: * 1. Set the