/* styles for the meg header

This copy just has one little change from the regular one - #menu ul is set for 7 columns, that's All */

#masthead_container {
	width:auto;
	clear:right;
	display:block;
	height: 110px;
	position:absolute;
	z-index:500;
	left:0;
	top:0;
}
#masthead_logos {
	float: left;
	height: 95px;
	white-space:nowrap;
}
#logo1 {
	background-image: url(/page_art/SHARK.jpg);
	background-repeat: no-repeat;
}

#logo1,
#logo1x {
	float:left;
	width: 142px;
	height: 65px;
	display:inline;
}
#logo1:hover { cursor:pointer; }
#logo2{
	background-image: url(/page_art/logo.gif);
	background-repeat: no-repeat;
}
#logo2,
#logo2x{
	position:absolute;
	left:147px;
	top:5px;
	width:200px;
	height:76px;
	display:inline;
}
#logo2:hover { cursor:pointer; }
#mastheadRightStuff {
	height: 76px;
	display: inline;
	float:left;
	clear:right;
}
#masthead_slogos {
	position: absolute;
	left: 303px;
	top: 8px;
	height: auto;
	width: 800px;
	display: block;
	clear:right;
}
#masthead_slogos h1,
#masthead_slogos h2,
#masthead_slogos h3,
#masthead_slogos h4,
#masthead_slogos h5,
#masthead_slogos h6 {
	font-size:14px;
	line-height:22px;
	color: #ececec;
	font-style: normal;
	white-space: nowrap;
	font-stretch:ultra-expanded;
	overflow: hidden;
	text-align:center;
	text-indent:-15px;
}
#menu {
	width: 1400px;
	float: left;
	clear:both;
	position:relative;
	left:2px;
	top:-15px;
	display:block;
}
#menu ul {
	list-style: none;
	height:14px;
	line-height:14px;
	margin: 0;
	padding: 0;
	width: 125px;/*here's where you set the width of each heading. Should fit within #menu width */
	float: left;
}

/*
#menu ul li {
	width: 130px;
	}
	
#menu ul li h2{
	width: 100px;
	}
*/

#menu ul li ul p,
#menu ul li ul h3,
#menu ul li ul h4,
#menu ul li ul a,
#menu h2{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	display: block;
	font-size:10px;
	border-width: 1px;
	border-style: solid;
	border-color: #ccc #888 #555 #bbb;
	margin: 0;
	padding: 2px 3px;
}

#menu ul h2 {
	color: #fff;
	letter-spacing:0.9;
	word-spacing:normal;
	font-weight:normal;
	text-transform: lowercase;
	text-align:center;
	background:#666699;
	font-size: 13px;
	letter-spacing:normal;
}

#menu a {
	color: #000000;
	background: #efefef;
	text-decoration: none;
}
#menu a:hover {
	color: #a03000;
	background: #ffffff;
}
#menu ul li h2 a{
	background-color:#666699;
	color:#FFFFFF;
	border:none;
	font-size:13px;
	font-weight:normal;

}
#menu ul li h2 a:hover{
	color:#E76239;
	background-color:#666699;
}

/* these three select for the 2nd level menu*/
#menu ul ul ul{
	width:130px;
	border-left-width:3px;
	border-top-width:3px;
}

#menu ul li ul li p,
#menu ul li ul li h3,
#menu ul li ul li h4,
#menu ul li li li a{
	background-color:#DDDDDD;
}
#menu ul li li li  a:hover{
	background-color:#FFFFFF;
}
#menu ul li li li  a:first-child{
border-top:3px;
}


/*  positioning for any children */

#menu li { position: relative; }
#menu ul ul ul {
	position: absolute;
	top: 0px; /*sets a slight "drop down" to the flyout, if desired */
	left: 100%;   /* set this r or l to set the direction of the 2nd level dropdown */
}
/* pops it out over any lower down text */
#menu ul ul {
	position: absolute;
	z-index: 500;
}
/* to hide any 2nd level menus we might make*/
div#menu ul ul { display: none; }
/*Again the convoluted CSS to keep IE happy, this time when we hover over the first <li> which is in fact the heading too we want the child lists to appear*/

div#menu ul li:hover ul { display: block; }
/* counteracts the hover on deeper lists */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul { display: none; }
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul { display: block; }