/*
	CSS styles for header specific elements
*/

html{
height: 100%;
}
body  { background-color: #ffffff; background-image: url("images/background_grad.jpg"); background-repeat: repeat-x; background-position: 100% top; text-align: center; margin: 50px 0; height: 100% }

#container{
	width:800px;
	margin-left:auto;
	margin-right:auto;
height:100%;
}

#containerPopUp{
	width:400px;
	margin-left:auto;
	margin-right:auto;
height:100%;
}

body,p,ul,ol,dl,h1,h2,h3{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}

/* enroll, contact, search bar	*/
.titlebar {/* I added it */
	background-color:#330000;
	width:800px;
	/* height:18px; */
	height: 90px;
	margin:0;
	padding:0;
	border:0;
	/*font-size:20px;*/
	font-size:11px;
	font-weight:bold;
	font-family:Interstate, "Trebuchet MS", Verdana, Arial, sans-serif;
	/*text-align:center;*/
	text-align:left;
	color:#330000;
}
.titlebar a{
	color:#fff;
	text-decoration:none;
	padding: 0 0 0 20px;
	white-space:nowrap;
}
.titlebar a:hover{
	color:#69c;
}

.utilitybar {
	background-color:#990000;
	width:800px;
	/* height:18px; */
	height: 21px;
	/*height: 36px;*/ /* I changed it and should match with meta bank logo size */
	margin:0;
	padding:0;
	border:0;
	font-size:11px;
	/*font-weight:bold;*/
	font-family:Interstate, "Trebuchet MS", Verdana, Arial, sans-serif;
	text-align:left;
	color:#fff;
	vertical-align:middle; /* I added */
}
.utilitybar .enrollcontactlinks {
	float:left;
	padding:5px 0 0 0;
	margin:0;
	vertical-align:middle;
}
.utilitybar .meta {
	text-align:right;
	vertical-align:middle;
}

.utilitybar form{
	padding:0 2px;
	margin:0;
}
.utilitybar a{
	color:#fff;
	text-decoration:none;
	padding: 0 0 0 20px;
	white-space:nowrap;
}
.utilitybar a:hover{
	color:#69c;
}


.utilitybar #searchbox {
	float:right;
}

.utilitybar #searchbox .searchtxtbox {
	border:1px solid #ccc;
	height:12px;
	width:100px;
	font-size:10px;
}
.utilitybar #searchbox .searchbutton {
	border:0;
	height:16px;
	width:20px;
	background-color:#44A51A;
	font-size:10px;
	font-weight:bold;
	color:#fff;
	font-family:Interstate, "Trebuchet MS", Verdana, Arial, sans-serif;
}


#footerbar{
	border:5px solid #000;
	text-align:center;
	bottom:0;
}


/* I added */
#stepnavigation{
	width:800px;
	height:70px; /*smaller*/
	padding:0;
	margin:3px 0 0 0;
	position:relative;
}
.displaystep{
	/*background-color:#ffff99;*/
	background-color:#cccc33;
}
#stepnavigation #stepheader {
	width:650px; /*	sum of each li spedified in .aspx	*/
	text-align:center;
	padding:0px;
	float:right;
}
#stepnavigation #stepheader ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#stepnavigation #stepheader li {
	margin: 0px;
	padding: 0px;
	float:right;
	/*	width:128px;	defined in .aspx since each list item differ	*/
	height:60px; /*same as #stepnavigation*/
	font-size:20px; /*	I added	*/
}


/*	navigation section	*/
#navigation{
	width:800px;
	height:70px;
	padding:0;
	margin:3px 0 0 0;
	position:relative;
}

.hp_navigation  { background-image: url("images/red_grad_bg.jpg") }

.sp_navigation  { background-image: url("images/red_grad_bg.jpg") }


#navigation #logo {
	float:left;
	padding:0;
	margin:0px 40px 0px 20px;
}

#navigation #compasslogo {
	float:right;
	padding:0;
	/*margin:0px 40px 0px 20px;*/
}


/*	4 button menu across top	*/
#navigation #tabbedheader {
	width:800px;
	text-align:center;
	float:left;
}
#navigation #tabbedheader ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	border: 0px solid #330000;
}
#navigation #tabbedheader li {
	margin: 0px;
	padding: 5px;
	float:left;
	width:100px;
	height:30px;
 
}
#navigation #tabbedheader a{
	display:block;
}



/*#secondarynavigation {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#3399FF;
	position:absolute;
	bottom:10px;
	left:175px;
	width:450px;
	margin:0;
	padding:0;
	text-align:center;
}*/

#secondarynavigation a:link, #secondarynavigation a:visited{
	text-decoration:none;
	color:#3399FF;
	white-space:nowrap;
}
#secondarynavigation a:hover{
	text-decoration:underline;
	color:#33000;
	white-space:nowrap;
}