/*

Created By:		Matthew Bergstein
Date:			10/18/11
Description:	CSS for the header mega menu drop down 

*/

/************* START DROP DOWN ****************/


* 									
{ margin: 0; padding: 0; }

ul#topnav li.dropdown .sub_menu .arrow
{
	position:absolute;
	top:-7px;
	left:25px;	
}


/* 
	LEVEL ONE
*/

ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1;   }
ul.dropdown a:hover		            { color: #00a3e3; }
ul.dropdown a:active                { color: #00a3e3; }
ul.dropdown li a                    { display: block;
	 								  color: #fff; margin:0px; padding:0px;}
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }

/* additions */
ul#topnav li.dropdown
{
	float:left;	
}

ul#topnav li.dropdown a.support 
{ 
	font-weight:bold;
	line-height:70px; /* previous 59px */
	height:70px; /* previous 59px */
}

ul#topnav li.dropdown ul li
{

}



/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;}
ul.dropdown ul li 					{ font-weight: normal; background: #000; color: #fff; 
									  float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 

/* additions */
ul.dropdown ul.sub_menu			
{
	background-color:#000;
	border:1px solid #adadad;
	text-align:left;
	font-size:11px;
	padding:10px 0;
}

ul.dropdown ul.sub_menu li a
{
	line-height:15px;
	margin:5px 0 5px 15px;

}

ul.dropdown.support ul 
{
	width:90px;
}

ul.dropdown ul.sub_menu li a
{
	width:60px;	
}


/* 
	LEVEL THREE - horizontal/vertical
*/
ul.dropdown ul ul 					{ left: 100%; top: -11px; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

ul.dropdown ul.sub_menu ul
{
	border:1px solid #adadad;
	padding:10px 0;
	background-color:#000;
	z-index:1000;
}

/* custom consumer horizontal */
ul.dropdown ul.sub_menu .consumerDD ul
{
	width:245px;	
}

ul.dropdown ul.sub_menu .consumerDD ul li a
{
	width:215px;	
}

ul.dropdown ul.sub_menu .consumerDD ul li.home
{
	font-size:11px;
	font-weight:bold;
	color:#00a3e3;	
}

ul.dropdown ul.sub_menu .consumerDD ul li.home A:Link     { color:#00a3e3; text-decoration:underline; }
ul.dropdown ul.sub_menu .consumerDD ul li.home A:Active   { color:#00a3e3; text-decoration:underline; }
ul.dropdown ul.sub_menu .consumerDD ul li.home A:Visited  { color:#00a3e3; text-decoration:underline; }
ul.dropdown ul.sub_menu .consumerDD ul li.home A:Hover    { color:#00a3e3; text-decoration:none; }

ul.dropdown ul.sub_menu .consumerDD ul li.quick .copy
{
	font-size:9px;
	width:215px;
	margin:5px 0 5px 15px;
	line-height:15px;
}

ul.dropdown li.quick.hover, ul.dropdown li.quick:hover                
{ color:#fff; position: relative; }

ul.dropdown ul.sub_menu .consumerDD ul li.search
{
	
}

ul.dropdown ul.sub_menu .consumerDD ul li.search .wrapper
{
	width:215px;
	margin:5px 0 5px 15px;
	line-height:15px;
}

ul.dropdown ul.sub_menu .consumerDD ul li.search .wrapper .box
{
	float:left;
	width:190px;
	
}

ul.dropdown ul.sub_menu .consumerDD ul li.search .wrapper .box input
{
	color:#fff;
	font-size:11px;
	font-weight:bold;
	height:21px;
	line-height:21px;
	background:url('/images/header/search-bg.gif') left no-repeat;
	width:190px;
	border:0px;
	padding:0px;
	margin:0px;
}

ul.dropdown ul.sub_menu .consumerDD ul li.search .wrapper .box input.field
{
	padding-left:10px;
}

ul.dropdown ul.sub_menu .consumerDD ul li.search .wrapper .btn
{
	float:left;
	height:21px;
	line-height:21px;
	width:18px;
	border:0px;
	padding:0px;
	margin:0px;
	*margin-top:1px;
}

ul.dropdown ul.sub_menu .consumerDD ul li.help
{
	font-size:9px;	
}

ul.dropdown ul.sub_menu .consumerDD ul li.help A:Link     { color:#00a3e3; text-decoration:underline; }
ul.dropdown ul.sub_menu .consumerDD ul li.help A:Active   { color:#00a3e3; text-decoration:underline; }
ul.dropdown ul.sub_menu .consumerDD ul li.help A:Visited  { color:#00a3e3; text-decoration:underline; }
ul.dropdown ul.sub_menu .consumerDD ul li.help A:Hover    { color:#00a3e3; text-decoration:none; }


/* custom business horizontal */
ul.dropdown ul.sub_menu .businessDD ul
{
	width:163px;	
}

ul.dropdown ul.sub_menu .businessDD ul li a
{
	width:130px;	
}

/* keeps vertical dd active if you are in the associated horizontal menu */
ul.dropdown ul.sub_menu li:hover .button, ul.dropdown ul.sub_menu li.sfhover .button
{
	color:#00a3e3;	
	background:url('/images/header/drop-down-arrow-right.gif') right no-repeat;
}

/* industrial doesn't have a horizontal */
ul.dropdown ul.sub_menu li:hover .industrialDD.button, ul.dropdown ul.sub_menu li.sfhover .industrialDD.button
{
	background:none;
}

/************* END DROP DOWN ****************/

/************* START MEGA MENU ****************/

*{outline: none;}
img {border: 0;}

.megaMenuDiv
{
	/* background-color:red; */
	background: url('/images/header-bg.gif') top repeat-x;
	clear:both; 
	height:70px; /* previous 59px */
	width:100%; 	
	z-index:1000;
}

.megaMenuContainer 
{
	font: normal 12px Arial, Verdana, Helvetica, sans-serif;
	/* width: 1000px; */
	padding: 0;
	/* margin: 0 auto; - caused the menu to float a little from left and increase as window expands*/
	margin:0px;
	background: url('/images/header-bg.gif') top repeat-x;
	height:70px; /* previous 59px */

}

/***** Main navigation *****/
ul#topnav {
	margin: 0; padding: 0;
	float:left;
	width: 400px;
	height:70px; /* previous 59px */
	list-style: none;
	font-size: 12px;
	padding-left:60px;
	/*background-color:#0065a4;*/
	/* 
	Sets all drop downs to begin at far left of nav.
	can be over writter by setting the individual li style
	Exmaple: <li style="position:relative;">	
	            <a href="#" class="products">Products</a>
	*/
	position: relative;
}
ul#topnav li.mega {
	float: left;
	margin: 0; padding: 0;
}
ul#topnav li.mega a {
	float: left; 
	/* if using an image, for button remove this for instance */
	/* text-indent: -9999px; */
	height: 70px; /* previous 59px */
	color:#fff;
	font-weight:bold;
	line-height:70px; /* previous 59px */
}

/* ONLY necessary if using image hovers

 top nav button hover when in drop down menu 
ul#topnav li:hover a, ul#topnav li a:hover 
{ 
	background-position: left bottom; 
}
 IE 6 fix, see js sfhover at bottom 
ul#topnav li:hover .button, ul#topnav li.sfhover .button
{ 
	background-position: left bottom; 
}
 IE 6 fix, uses jquery to interject this into the buttons tag 
ul#topnav li a.buttonHover
{
	background-position: left bottom; 
}

*/

/* hover over button to make drop down - determines drop down initial style */
ul#topnav li.mega:hover a, ul#topnav li.mega a:hover 
{
	color:#fff;	
}

ul#topnav li.mega:hover .button, ul#topnav li.mega.sfhover .button
{
	color:#00a3e3;	
}

ul#topnav li.mega:hover .shop.button, ul#topnav li.mega.sfhover .shop.button
{
	color:#ffbc3a
}

ul#topnav li.mega a.buttonHover
{
	color:#00a3e3;		
}

ul#topnav a.consumer
{
	background:url('/images/header/white-divider-v2.gif') right no-repeat;	
	padding-right:10px;
}

ul#topnav a.business
{
	background:url('/images/header/white-divider-v2.gif') right no-repeat;	
	padding:0 10px;
}

ul#topnav a.industrial
{
	padding-left:10px;	
}

ul#topnav .mega a.shop, ul#topnav li.mega a.shop.buttonHover
{
	color:#ff5500;
	background:url('/images/header/white-divider-v2.gif') right no-repeat;	
	padding:0 10px 0 48px;
}

ul#topnav a.support
{
	color:#00a3e3; 
	padding-left:10px;
}

ul#topnav li.dropdown:hover .support.button, ul#topnav li.dropdown.sfhover .support.button
{
	color:#51dcff; 
}

ul#topnav a.support.button:hover
{
	color:#51dcff; 
}

/***** Drop down bounding box *****/
ul#topnav li.mega .sub 
{
	border: #adadad 1px solid;
	color:#fff;
	position: absolute;	
	top: 70px; /* top: 59px; */
	left: 0;
	background-color: #000;
	/* padding: 20px 20px 20px; */
	
	
	
	/*padding: 10px 10px 20px 20px;*/
	padding:10px 10px 20px 0px;
	
	
	float: left;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	display: none; 
}

ul#topnav li.mega .sub .arrow
{
	position:absolute;
	top:-7px;
	left:30px;	
}

/***** Drop down manual positioning *****/
ul#topnav li.mega .sub.aboutPosition
{
    left:-173px;	
}
ul#topnav li.mega .sub.newsPosition
{
	left:-31px;	
}

ul#topnav li.mega .sub.resourcesPosition
{
    left:-86px;	
}

ul#topnav li.mega .sub.consumerPosition
{
    left:55px;	
    z-index:1000;
}

ul#topnav li.mega .sub.businessPosition
{
    left:128px;	
    z-index:1000;
}

ul#topnav li.mega .sub.industrialPosition
{
    left:201px;	
    z-index:1000;
}

ul#topnav li.mega .sub.supportPosition
{
    left:378px;	
}

/***** Drop down horizontal row bounding box *****/
/*
ul#topnav li .row 
{
	clear: both; 
	float: left; 
	width: 100%; 
	margin-bottom: 10px;
}
*/

/***** Drop down vertical column bounding box *****/
/* Used table to keep divider to extend to bottom */
ul#topnav li.mega .sub .megaMenuDDTable
{
    border:0px;
}
ul#topnav li.mega .sub .megaMenuDDRow
{

}
ul#topnav li.mega .sub .megaMenuDDCol
{	
    /*
    Not supported in IE6 as div. Had to use actual tables - http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14012 
    */
    /*background-position:right top;
	background-repeat:repeat-y;*/
	
	border-right: 1px solid #adadad;
	vertical-align:top;
    
}
/* First column does not have left padding */
ul#topnav li.mega .sub .megaMenuDDCol.first
{
	padding-left:0px;
}
/* Last column does not have bg image */
ul#topnav li.mega .sub .megaMenuDDCol.last
{
	background-image:none;
	border-right:0px;
}

/* consumer has a unique subset of one column sith subHeaders */
ul#topnav li.mega .sub .megaMenuDDCol.consumer
{
	background-image:none;
	border-right:0px;
}

/* used to label global nav and us nav separate features */
ul#topnav li.mega .sub .megaMenuDDCol .subHeader
{
	background-color:#00a3e3;
	font-size:11px;
	line-height:16px;
	color:#fff;
	width:155px;
	font-weight:bold;
	padding-left:20px;
	margin-top:5px;
	clear:both;
	position:relative;
	left:-30px;
}

ul#topnav li.mega .sub ul
{
	list-style: none;
	margin: 0; 
	padding-left: 20px;
	/* width: 150px; */
	width: 160px;
	float: left;
	/* background-color:#000;*/
}

ul#topnav li.mega .sub .consumer ul
{
	padding-left:30px;	
}

ul#topnav li.mega .sub .last ul
{
	width:180px;
}

ul#topnav li.mega .sub.supportPosition ul
{
	width: 70px;

}

/* Used in jquery to determine full width of dd box by only finding the top ul's */
ul#topnav li.mega .sub ul.top
{
	
}

/***** Drop down headers */
ul#topnav .sub ul li h2 
{
	font-family: Helvetica, Verdana, Arial, sans-serif;
	padding: 0;
	line-height:16px;  
	margin: 0;
	font-size: 15px;
	font-weight: bold;
}
ul#topnav .sub ul li h2 a 
{
	padding: 5px 0;
	background-image: none;
	color: #fff;
	font-weight:bold;
}

/* Drop down sub items */
ul#topnav .sub ul li 
{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	/* width: 100%; */
	width:170px;
	color: #fff;
}
ul#topnav .sub ul li a 
{
	float: none; 
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	/*
	padding: 4px 10px 4px 0px;
	*/
	padding: 5px 10px 5px 0px;
	margin-right:15px;
	display: block;
	text-decoration: none;
	color: #fff;
	text-align:left;
	font-weight:normal;
}

ul#topnav .sub .last ul li a 
{
	padding: 5px 0px 5px 0px;
}

ul#topnav .sub.last ul li a 
{
	margin-right:5px;
}

ul#topnav .sub ul li a 
{
	line-height:15px;
}

ul#topnav .sub ul li ul li a 
{
	float: none; 
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	padding: 4px 10px 4px 10px;
	margin-right:25px;
	display: block;
	text-decoration: none;
	color: #4c4c4c;
	font-weight:normal;
}
/* Third Tier */
ul#topnav li.mega .sub ul li ul
{
	padding:0px;
	margin:0px;
}
ul#topnav li.mega .sub ul li ul li
{
	font-weight:normal;
	
}
ul#topnav li.mega .sub ul li ul li a
{
	padding-left:10px;
	
}

/* hover for both drop down items */
/* ul#topnav .sub ul li a:hover {color: #fff; background-position: 5px 12px ;} */
ul#topnav .sub ul li a:hover 
{
	color: #00a3e3; 
	text-decoration:underline;
}

/************* END MEGA MENU ****************/