/* ---------->>> top-navigation styles: <<<-----------------------------------------------------------------------*/
/* ------------  the following styles govern the position/style of elements in the top navigation bar, -----------*/
/* ------------  search bar and sub-navigation drop-down menus ---------------------------------------------------*/

/* header contains top-level navigation links (mainNav) and search box */
#header {
	top:0px;
	height:75px;
	width:100%;	
	background-color: #000000;
	border:0px solid #cccccc;
}

/* mainNav contains top-navigation links */
#mainNav {
	position:relative;
	top:0px;
	float:left;
	overflow:visible;
	height:25px;
	width:695px;
	padding:30px 0px 20px 30px;
	border:0px solid #ffffff;
}

/* for main navigation links */
ul#topNavLinks {
	position:relative;	/* position:relative; needed for ie 6 peakaboo bug */
	top:0px;
	overflow:hidden;	
	height:auto; 		/* height:20px */
	margin:0;
	padding:0;
	list-style-type: none;
	text-indent:0px;
	border:0px solid #cccccc;
}

ul#topNavLinks li {	
	position:relative;	/* position:relative; needed for ie 6 peakaboo bug */
	float:left;
	height:auto; 		/* height:20px */
	margin:0;
	padding:0px 2px 10px 0px;
	color:#044c88;
	list-style-type: none;	
}

ul#topNavLinks li a {	
	font-size:12px;
	font-weight: bold;
	text-decoration: none;
	margin: 0px 5px 0px 6px;
}

ul#topNavLinks li a:link, ul#topNavLinks li a:visited {
	color: #FFFFFF;
}

ul#topNavLinks li a:hover, ul#topNavLinks li a:active {
	color: #999999;
}

/* for search box */
#searchBox {
	position:relative;
	top:0px;
	float:right;	
	overflow:hidden;
	height:auto;
	width:auto;
	padding:10px 25px 0px 0px;
	border:0px solid #ffffff;
}

.searchText {
	color: #FFFFFF;
	font-size: 11px;
	margin-right:5px;
	border:0px solid #ffffff;
}

#searchBox option {
	color: #000000;
	font-size: 11px;
	border:0px solid #ffffff;
}

#searchBox input.textField {		
	height:18px;
	width:165px;
	color: #000000;
	font-size: 11px;
	margin:3px 0px 3px 0px;
	border:0px solid #ffffff;
}

.searchText a {
	font-size: 11px;
	text-decoration: none;
	margin-left:6px;
	border:0px solid #ffffff;
}

.searchText a:link, .searchText a:visited {
	color: #FFFFFF;
}

.searchText a:hover, .searchText a:active {
	color: #B2CDE3;
}

/* for sub-navigation drop-down menus and links */
/* SZT 102709: we now have an alert div which appears at the top of the layout if an alert is triggered --
we need to calculate the positioning of subNav from the bottom of #mainNav (instead of top of viewport).
updated top positioning (was top:58px; now -16px) and position (was absolute; now relative to #mainNav) */
#subNav {
                position:relative;
                top:-16px;                                          
                height:auto;
                width:auto;
                z-index: 2;
                left:5px;
                text-align:left;
                border:0px solid #ffffff;
}

ul.subNavLinks {
	position:relative;		/* position:relative; needed for ie 6 peakaboo bug */
	overflow:hidden;	
	width:180px;
	height:auto; 			/* height:20px */
	margin:0;
	padding-right:0px;  	/* each column already has 20px of margin right; space out just a touch more */
	list-style-type: none;
	text-indent:0px;	
	border:0px solid #000000;
}

ul.subNavLinks li {	
	position:relative; 		/* position:relative; needed for ie 6 peakaboo bug */
	margin-left:0px;
	text-indent:0px;	
	padding:2px 0px 0px 8px;
	list-style-type: none;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #8fb0cc;	
}

ul.subNavLinks li.secondLevelNavTop {
	padding:0px 0px 0px 8px;
}

ul.subNavLinks li.secondLevelNav {
	padding:8px 0px 0px 8px;
}

ul.subNavLinks li.fourthLevelNav {
	text-indent:5px;
	padding:2px 0px 0px 8px;
}

ul.subNavLinks li.secondLevelNav a, ul.subNavLinks li.secondLevelNavTop a, ul.subNavLinks li.secondLevelNavTopOn a {
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

ul.subNavLinks li.secondLevelNav a:link, ul.subNavLinks li.secondLevelNav a:visited {
	color: #065190;
}

ul.subNavLinks li.secondLevelNav a:hover, ul.subNavLinks li.secondLevelNav a:active {
	color: #333333;
}

ul.subNavLinks li.secondLevelNavTop a:link, ul.subNavLinks li.secondLevelNavTop a:visited {
	color: #065190;
}

ul.subNavLinks li.secondLevelNavTop a:hover, ul.subNavLinks li.secondLevelNavTop a:active {
	color: #333333;	
}

ul.subNavLinks li.thirdLevelNav a {
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
}

ul.subNavLinks li.thirdLevelNav a:link, ul.subNavLinks li.thirdLevelNav a:visited {
	color: #363636;
}

ul.subNavLinks li.thirdLevelNav a:hover, ul.subNavLinks li.thirdLevelNav a:active {
	color: #003663;
}

ul.subNavLinks li.fourthLevelNav a {
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
}

ul.subNavLinks li.fourthLevelNav a:link, ul.subNavLinks li.fourthLevelNav a:visited {
	color: #363636;
}

ul.subNavLinks li.fourthLevelNav a:hover, ul.subNavLinks li.fourthLevelNav a:active {
	color: #003663;
}

/* fixed width menu style with variable height. (add the code below for fixed minimum height that works in ff and ie) */
/* min-height:350px; 
	height:auto !important;
	height:350px; */
.subNavMenu {
	position:absolute;
	visibility: hidden;
	top:0px;
	left:30px;
	z-index: 4; 
	padding:0px 0px 20px 20px;	
	height:auto;
	width:650px; 
	overflow:visible;
	background-image: url(http://www.jhu.edu/~homepage/main/graphics/nav_screen.gif);
	background-repeat: repeat-x;
	background-position: left bottom;	
	background-color: #FFFFFF;
	border:2px solid #ffffff;
}

.subNavArrow {
	position:relative;
	top:-16px;
	height:24px;
	width:17px;
	border:0px solid #000000;
	background-image: url(http://www.jhu.edu/~homepage/main/graphics/nav_arrow.gif);
	background-repeat:no-repeat;


	
}

#menu1 .subNavArrow {
	left:5px;
}

#menu2 .subNavArrow {
	left:85px;
}

#menu3 .subNavArrow {
	left:203px;
}

#menu4 .subNavArrow {
	left:312px;
}

#menu5 .subNavArrow {
	left:391px;
}

#menu6 .subNavArrow {
	left:470px;
}

#menu7 .subNavArrow {
	left:520px;
}

#menu8 .subNavArrow {
	left:580px;
}

#menu8 .subNavArrow {
	left:635px;
}

/* dictates the width and float for all all teaser and navigation columns (for 3+ horizontal columns) */
/* (this style is also present in bottom-nav_layout.css) */
.column {
	position:relative;
	float:left;
	height:auto; 
	width:auto;
	overflow:visible;
	padding-bottom:5px; /* ie cuts off bottom of text in really short containers - add padding to prevent */
	margin-right:20px; 	/* ie doesn't calculate padding the same as firefox, so use margin here instead */
	border:0px #ffffff dashed;	
	
}

#container { 
	margin: 0 auto; 
	position: relative; 
	
	
}