/* CSS Document */ /**************************** AUTHOR: Heidi Weiland DATE: September 2007 CONTACT: heidi@soundwebsolutions.net NOTES: horizontal navigation ****************************/ /* COLORS #124662; /* DARK BLUE */ /* #9DB7C4; /*LIGHT BLUE*/ /* #B38465; /* COPPER */ .skip { /* accessibility: provides option to skip navigation */ display:none; } .layerAbove { /* so IE renders the dropdown menus correctly */ z-index:10; } #navigation { height:64px; height:63px; width:465px; width:400px; width:36em; width:34em; width:28em; margin-top:8px; margin-right:3px; position:relative; float:right; z-index:2; } #navigation ul { float:left; } #navigation li { list-style:none; float:right; position:relative; /*THIS CREATES A PARENT CONTAINING BLOCK FOR THE DROP-DOWN LIST ITEMS*/ color:#124662; /* DARK BLUE */ background-color:#ffffff; } #navigation a { font-family:Verdana, Arial, Helvetica, sans-serif; display:block; /* required so that rollovers look correct */ padding:3px 16px 3px 8px; padding-top:6px; padding-bottom:6px; text-decoration:none; color:inherit; /*min-width:6em;*/ } #navigation h3 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:.9em; font-weight:normal; margin:0em; margin-bottom:0; } #navigation a:hover, #navigation li:hover, #navigation li a:hover, #navigation a:active, #navigation li:active { background-color:#124662; /* DARK BLUE */ color:#ffffff; } /*******************2nd LEVEL****************/ #navigation ul ul { /*width:17em;*/ width:inherit; position:absolute; /*BUT WITHIN ITS PARENT ELEMENT (the last element w/position, by default*/ left:0px; margin:0; z-index:3; padding-top:4px; background-color:#124662; /* DARK BLUE */ border-top:none; } #navigation ul .corporatePopOut ul { width:13em; } #navigation ul .productsPopOut ul { width:13em; } #navigation ul ul li { padding:0; float:left; clear:both; min-height:1.5em; width:100%; } #navigation ul ul a { color:#ffffff; /*padding:.2em .5em;*/ min-height:inherit; /*width:16em;*/ padding-right:0; background-color:#124662; /* DARK BLUE */ } #navigation ul ul a:hover, #navigation ul ul li:hover, #navigation ul ul li:active { background-color:#B38465; /* COPPER */ } #navigation ul ul, #navigation ul li:hover ul ul { /*SEPARATE FOR VISUAL EASE*/ display:none; } #navigation ul li:hover ul, div#menu ul ul li:hover ul { display:block; } /********************** THIRD LEVEL **************************/ #navigation ul ul ul { padding-top:0; position: absolute; top: 0em; left:-100%; left: -13em; width:12em; background-color:#B38465; /* COPPER */ } #navigation ul ul ul li{ background-color:#B38465; /* COPPER */ } #navigation ul ul .subsidiariesPopOut ul { top:-4em; } #navigation ul ul .constructionPopOut ul { top:-2em; } #navigation ul ul ul a { color:#ffffff; background-color:#B38465; /* COPPER */ } #navigation ul ul ul a:hover, #navigation ul ul li:hover, #navigation ul ul li:active { background-color:#9DB7C4; /*LIGHT BLUE*/ color:#124662; /* DARK BLUE */ } div#navigation ul ul, div#navigation ul li:hover ul ul, div#navigation ul ul li:hover ul ul {display: none;} div#navigation ul li:hover ul, div#navigation ul ul li:hover ul, div#navigation ul ul ul li:hover ul {display: block;} /*********************** FOURTH LEVEL ***********************/ #navigation ul ul ul ul, #navigation .corporatePopOut ul ul ul { position: absolute; top: 0em; left:100%; width:100%; background-color:#9DB7C4; /*LIGHT BLUE*/ } #navigation ul ul ul .ftpsPopOut ul { top:0em; } #navigation ul ul ul ul a { background-color:#9DB7C4; /*LIGHT BLUE*/ } #navigation ul ul ul ul a:hover, #navigation ul ul ul ul li:hover { background-color:#124662; /* DARK BLUE */ color:#ffffff; } /*********************** SECONDARY NAVIGATION, 1ST LEVEL ***************/ #secondaryNav { /*float:left; `top:150px;*/ position:relative; float:left; clear:right; width:204px; width:218px; padding:2px 0px 2px 0px; margin-top:78px; margin-top:82px; } #secondaryNav ul { z-index:10; width:inherit; margin-left:14px; margin-left:0; } #secondaryNav a{ float:right; padding:2px 15px 2px 5px; text-align:right; width:196px; color:#ffffff; text-decoration:none; font-family:Gentium, "Times New Roman", Times, serif; display:block; } #secondaryNav h2 { font-weight:normal; font-size:1em; margin:0; } #secondaryNav .bold a { } #secondaryNav li:hover, #secondaryNav ul li a:hover { background-color:#9DB7C4; /*LIGHT BLUE*/; color:#000000; } #secondaryNav li { list-style:none; clear:right; width:100%; height:100%; } #secondaryNav img { position:relative; margin:0; /* to counteract previous margin settings */ margin-left:2px; top:1px; margin-top:30px; width:216px; border-top:1px solid #ffffff; border-bottom:1px solid #ffffff; } #secondaryNav table { width:100%; margin:10px; } #secondaryNav input, #secondaryNav select { font-size:.9em; margin-bottom:5px; } /*********************** SECONDARY NAVIGATION, 2ND LEVEL ***************/ #secondaryNav ul ul { padding-top:0; position: absolute; left:104%; left:100%; /*margin-left:.4em;*/ width:14em; background-color:#9DB7C4; /*LIGHT BLUE*/; color:#000000; } #secondaryNav ul.subsidiariesPopOut ul { top:-6em; top:-8em; } #secondaryNav ul .constructionPopOut ul { position:absolute; top:4em; } /*#secondaryNav ul ul li { padding:0; float:right; clear:none; min-height:1.5em; width:100%; }*/ #secondaryNav ul ul li { clear:right; } #secondaryNav ul ul li a { font-size:1em; color:#000000; text-align:left; /*padding:.2em .5em;*/ min-height:inherit; /*width:16em;*/ padding-right:0; padding-left:0; padding-top:4px; padding-bottom:4px; background-color:#9DB7C4; /*LIGHT BLUE*/; width:98%; padding-left:2%; } #secondaryNav ul ul li a:hover, #secondaryNav ul ul li:hover, #secondaryNav ul ul a:active { background-color:#B38465; /* COPPER */ color:#000000; } #secondaryNav ul ul, #secondaryNav ul li:hover ul ul { display:none; } #secondaryNav ul li:hover ul { display:block; } #secondaryNav #search { padding:5px; margin-left:10px; } /*********************** SECONDARY NAVIGATION, 3RD LEVEL ***************/ #secondaryNav ul ul ul{ padding-top:0; position: absolute; left:104%; left:100%; /*margin-left:.4em;*/ width:14em; background-color:#B38465; /* COPPER */ color:#000000; } /*#secondaryNav ul ul li { padding:0; float:right; clear:none; min-height:1.5em; width:100%; }*/ #secondaryNav ul ul ul li { clear:right; } #secondaryNav ul ul ul a { color:#ffffff; text-align:left; /*padding:.2em .5em;*/ min-height:inherit; /*width:16em;*/ padding-right:0; padding-left:0; padding-top:4px; padding-bottom:4px; background-color:#B38465; /* COPPER */ width:98%; padding-left:2%; } #secondaryNav ul ul ul a:hover, #secondaryNav ul ul ul li:hover, #secondaryNav ul ul ul a:active { background-color:#124662; /* DARK BLUE */ color:white; } #secondaryNav ul ul ul { display:none; } #secondaryNav ul ul li:hover ul { display:block; }