/* Primary Links */


/* A) STRUCTURE ### --------------------------------------  */

#navigation-primary{
	font-family:Arial, Helvetica, sans-serif;
	float:left;
	width:100%;
	height:3em;
	line-height:3em;
	margin:0px;
	}
	
#navigation-primary ul{
	margin:0px 0px 0px 0px;
	padding:0px;
	list-style:none;
	}
	
#navigation-primary ul li{
	margin:0px 3px 0px 0px;
	padding:0px;
	float:left;
	}
	
#navigation-primary h2{
	margin:0px;
	padding:0px;
	}
	
#navigation-primary ul li a{ /* make it block-level to fill the entire space */
	float:left;
	padding:0 10px 0 10px;
	z-index:1000; /* put it over div mega for borders */
	}
	
#navigation-primary ul li a.active,
#navigation-primary ul li a:hover,
#navigation-primary ul li:hover a{ 
	padding:5px 10px 5px 10px;
	margin-top:-10px;
	}
	

/*  Mega Drop Down */

div.megadropdown ul li{
	float:left;
	position:relative;
	z-index:1000; /* for IE grrrr */
	margin-right:0px;
	}
	
div.mega{ /* submenu container */
	position:absolute;
	top:-9999px;
	left:0px; /* hide when not required */
	overflow:hidden;
	margin:0px;
	padding:10px;
	z-index:100;
	}
	
div.megadropdown ul li:hover div.mega,
div.megadropdown ul li div.mega.open{ /* show */
	top:3em; /* menu height */
	left:0px;
	z-index:100;
	}
	
div.megadropdown ul li:hover div.alt{ /* show (alt) */
	right:0em;
	left:auto;
	}
	
div.mega div.megamenuWrapper{
	overflow:auto;
	padding:10px;
	position:relative;
	}
	
div.megamenuWrapper span.close-panel{ /* close panel button */
	position:absolute;
	right:5px;
	top:5px;
	padding:0px;
	margin:0px;
	display:block;
	height:13px;
	width:13px;
	text-align:center;
	line-height:15px;
	}
	
div.megamenuWrapper span.close-panel:hover{
	cursor:pointer;
	background: #C30;
	}
	
div.mega div.menu-section{
	float:left;
	margin:0px;
	padding:5px 0px 5px 0px;
	}
	
/* 1) one column */

div.one-col{ 
	width:13em;
	}
	
div.one-col div.menu-section{ 
	width:100%;
	}
	
/* 2) one columns */

div.two-col{ 
	width:22em;
	}
	
div.two-col div.menu-section{ 
	width:50%;
	}
	
/* 3) three columns */	

div.three-col{ 
	width:34em;
	}
	
div.three-col div.menu-section{ 
	width:33.3%;
	}
	
/* 4) four columns */	

div.four-col{ 
	width:42em;
	}	
	
div.four-col div.menu-section{ 
	width:25%;
	}
	
/* lists inside .mega */

#navigation-primary div.mega ul{
	line-height:1.8em;
	margin-left:5px;
	padding:auto;
	}
	
#navigation-primary div.mega ul li{
	display:block;
	background:none;
	float:none;
	margin:0px 5px 0px 0px;
	}
	
#navigation-primary div.mega a{
	padding:0px;
	margin:0px;
	float:none;
	}
	
#navigation-primary ul li:hover div.mega a{
	padding:0px;
	margin:0px;
	}
	
#navigation-primary div.mega ul li a:hover{
	padding:0px;
	margin:0px;
	}
	
#navigation-primary div.mega h3{ /* section titles */
	padding:0px;
	margin:0px 5px 5px 5px;
	line-height:1.8em;
	}
	
#navigation-primary div.mega h3 a{ /* section titles */
	padding:0px;
	margin:0px;
	}


/* normal primary links */

#navigation-primary ul li{
	display:inline;
	}
	
	
/* B) LOOK & FEEL  ### --------------------------------------  */

body.full-liquid #navigation-primary{ /* in a full liquid layotu we have a 100%-width bar */
	font-family: "Arial Black", Gadget, sans-serif;
	background: #1874ae url(../img/backgrounds/white_gradient_flip.png) repeat-x top left;
	}

body #navigation-primary h2{
	font-family: "Arial Black", Gadget, sans-serif;
	}

#navigation-primary ul li a{ /* primary links first level */
	color:white;
	text-decoration:none;
	background: #1874ae url(../img/backgrounds/white_gradient_flip.png) repeat-x top left;
	}
	
body.full-liquid #navigation-primary ul li a{ /* primary links first level in liquid layout */
	color:white;
	text-decoration:none;
	background:none;
	}
	
#navigation-primary ul li a.active,
body.full-liquid #navigation-primary ul li a.active{ /* active of the first level */
	background:#e54d03;
	color:#fff;
	text-decoration:none;
	}
	
#navigation-primary ul li a:hover,
#navigation-primary ul li:hover a,
body.full-liquid #navigation-primary ul li:hover a{ /* hover state */
	background:#e54d03 url(../img/backgrounds/white_gradient_flip.png) repeat-x top;
	color:#fff;
	}

#navigation-primary div.mega a,
#navigation-primary ul li.opened:hover div.mega a{ /* primary links inside mega menu */
	color:#4e4d4d;
	text-decoration:none;
	background:none;
	padding:0px;
	margin:0px;
	}
	
#navigation-primary div.mega h3 a{ /* section titles */
	color:#565656;
	}
	
#navigation-primary ul li div.mega ul li a:hover{
	text-decoration:underline;
	}
	
#navigation-primary div.mega a:hover,
#navigation-primary ul li:hover div.mega a{ /* primary links inside mega menu */
	color:#333;
	text-decoration:none;
	background:none;
	}
	
div.mega{
	background: #e2e2e2;
	}
	
div.mega div.megamenuWrapper{
	background:#fff;
	}
	
div.megamenuWrapper span.close-panel{ /* close panel button */
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.1em;
	background:#fff;
	border:1px solid #ccc;
	color:#666;
	font-weight:bold;
	}
	
div.megamenuWrapper span.close-panel:hover{
	background: #e54d03;
	color:white;
	border:1px solid #e54d03;
	}
	

#navigation-primary h2,
#navigation-primary a.first-level{ /* primary links first level */
	font-size:0.85em;
	margin:0px;
	text-transform:uppercase;
	}
	
#navigation-primary h3,
#navigation-primary a.section-title{ /* primary links subsection titles */
	font-size:0.85em;
	text-transform:uppercase;
	font-family:"Arial Black", Gadget, sans-serif;
	}
	
#navigation-primary div.mega ul li{ /* primary links subsection titles */
	font-size:0.9em;
	}