.clear {
	clear: both;
}

/*clearing all margin and padding values for all elements inside globalMainNav*/
#globalMainNav * {
	margin: 0;
	padding: 0;
}

#globalMainNav {
	width: 100%;
	height: 155px;
	background: url( /images/header/navbackground.gif ) no-repeat 0 0 #000000;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	z-index: 2000000;
	position: relative; /*needed for the z-index to function properly - otherwise dropdown appears below other absolute elements*/
}

#titleSection {
	height: 90px;
	float: left;
	margin: 15px 0 10px 0;
	width: 550px;
}

#titleSection #globalLogo {
	display: block;
	float: left;
	background: url( /images/logo.png ) no-repeat 0 0 transparent;
	width: 108px;
	height: 100px;
	margin-right: 5px;
}

#titleSection h1 {
	line-height: 90px !important;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Lucida, sans-serif !important;
	font-size: 26px !important;
	font-weight: normal !important;
	text-transform: uppercase !important;
	color: #FFF !important;
}

#utilSection {
	height: 90px;
	float: right;
	padding-left: 15px;
	margin: 15px 0 10px 15px;
	border-left: 1px solid #4f4f4f;
	position: relative;
}

#utilSection #utilMenu {
	margin: 10px 0;
	float: none;
	list-style-type: none;
	overflow: hidden;
}

#utilSection #utilMenu li {
	float: left;
	margin: 0 3px;
	color: #666;
	font-size: 11px;
}

#utilSection #utilMenu li a, #utilSection #utilMenu li a:visited, #utilSection #utilMenu li a:hover {
	color: #BBB;
	font-size: 11px;
	text-decoration: none;
}

#utilSection #utilMenu li a:hover {
	color: #FFF;
}


/*******************Main menu section**************/
#globalMainNav #mainMenu {
	list-style-type: none;
	clear: both;
	height: 40px;
	margin: 0;
	padding: 0 25px 0 25px;
	background-color: #000;
	position: relative;
}

#mainMenu li {
	float: left;
	height: 37px; /*by default every menu item has "active" background assigned to it, and shifted out of view*/
	background: url( /images/header/mainMenu_active_left.gif ) no-repeat 0 -37px;

	margin: 0 15px;
	margin-right: 25px;
	margin-top: 3px;
}

/************************************************/
#mainMenu li a {
	display: block;
	height: 100%; /*second part of "active" menu item background - this image is 300px long to accomodate the longest possible menu title*/
	background: url( /images/header/mainMenu_active_right.gif ) no-repeat 100% -37px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 33px;
	outline: none;
}

/*below two declarations shift "active" background into view on the appropriate menu item depending on the current page.
				Current page is defined by assigning specific class to the globalMainNav container on the jsp level*/
#mainMenu li:hover, #mainMenu li.sfhover,
    #mainMenu.homePage li.navHome, #mainMenu.schedulePage li.navShows,
    #mainMenu.videosSpeechesPage li.navVideo, #mainMenu.topicsPage li.navTopic,
    #mainMenu.tdihPage li.navTdih, #mainMenu.gamesPage li.navGame,
    #mainMenu.storePage li.navStore {
	padding-left: 15px;
	background-position: 0 0;
	margin: 0;
	margin-top: 3px;
	margin-right: 10px;
}

#mainMenu li:hover a, #mainMenu li.sfhover a,
    #mainMenu.homePage li.navHome a, #mainMenu.schedulePage li.navShows a,
    #mainMenu.videosSpeechesPage li.navVideo a, #mainMenu.topicsPage li.navTopic a,
    #mainMenu.tdihPage li.navTdih a, #mainMenu.gamesPage li.navGame a,
    #mainMenu.storePage li.navStore a {
	background-position: 100% 0px;
	padding: 0 15px 0 0;
	color: #CB621E;
}

/*#########################################################*/
/*###################extended dropdown#####################*/
/*#########################################################*/
#mainMenu div {
	display: none;
	position: absolute;
	top: 40px;
	right: 0;
	left: 0;
	border: 10px solid #FFF;
	background-color: #000000;
	z-index: 200;
	padding: 10px;
	color: #FFF;
}

#mainMenu div h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #f28214;
	text-transform: uppercase;
	padding: 5px 10px;
}

#mainMenu div p, #mainMenu div a {
	font-size: 12px;
	text-transform: none;
	padding: 0;
	margin: 0;
}

#mainMenu div p a, #mainMenu li:hover div p a, #mainMenu li.sfhover div p a {
	background: none;
	color: #ff9900;
	text-decoration: underline;
	font-weight: normal;
	padding: 0;
	margin: 0;
}

#mainMenu div a, #mainMenu li:hover div a, #mainMenu li.sfhover div a {
	display: inline;
	line-height: 1.5;
	padding: 0;
}

#mainMenu div ul.dropColumn {
	display: block;
	list-style-type: none;
	position: static;
	float: left;
	width: 180px;
	padding: 0;
	margin: 0 0 10px 0;
	border: none;
	z-index: 110;
}

#mainMenu div.columns4 ul.dropColumn {
	width: 230px;
}

#mainMenu div ul.dropColumn.bordered {
	border-left: 1px solid #474747;
}

#mainMenu div ul li, #mainMenu li:hover div ul li, #mainMenu li.sfhover div ul li, #mainMenu li.sfhover div ul.dropColumn li,
	#mainMenu.topicsPage li.navTopic.sfhover div ul li,
	#mainMenu.videosSpeechesPage li.navVideo.sfhover div ul li,
	#mainMenu.schedulePage li.navShows.sfhover div ul li{
	float: none;
	border: none;
	background: none;
	height: auto;
	width: 100%;
	margin: 0;
	padding: 0;
}

#mainMenu div ul li a, #mainMenu li:hover div ul li a, #mainMenu li.sfhover div ul li a,
    #mainMenu.topicsPage li.navTopic:hover div ul li a,
    #mainMenu.videosSpeechesPage li.navVideo:hover div ul li a,
    #mainMenu.schedulePage li.navShows:hover div ul li a,
    #mainMenu.gamesPage li.navGame:hover div ul li a,
	#mainMenu.topicsPage li.navTopic.sfhover div ul li a,
	#mainMenu.videosSpeechesPage li.navVideo.sfhover div ul li a,
	#mainMenu.schedulePage li.navShows.sfhover div ul li a{
	padding: 5px;
	background: none;
	display: block;
	color: #FFF;
	width: auto;
	margin: 0;
	padding: 5px 10px;
}

#globalMainNav #mainMenu div ul li a:hover {
	color: #E9810F;
	margin: 0;
	background-color: #3f3f3f;
}

#mainMenu div ul li a.separated {
	border-top: 1px solid #474747;
	border-bottom: 1px solid #474747;
}

#mainMenu div hr {
	clear: both;
	height: 1px;
	border: 0;
	background-color: #3f3f3f;
	color: #3f3f3f;
	margin-bottom: 10px;
}

/*#####################################################################*/
/*dropdown(both styles) display on menu item mouseover*/
#mainMenu li:hover div, #mainMenu li.sfhover div {
	display: block;
}
	
