body {
	font-family: Arial, Helvetica, sans-serif;
}

#skiplinks {display:none;}

#skiplinks li { 
display: inline; 
margin: 0;
padding: 0;
list-style-type: none; 
} 

#skiplinks a { 
position: absolute;
top: 0;
left: 20px;
width: 0px;
height: 0;
z-index: 1000;
background-color: #fff;
color: #dc2a1a;
font-weight: bold;
font-size: 1em! important;
overflow: hidden;
} 

#skiplinks a:active { 
position: absolute;
margin: 0;
padding:6px;
width: auto;
height: auto;
border-top-width: 0px;
border-left-width: 0;
border-bottom-width: 0;
overflow: visible; 
border-right-width: 0; 
font-size: 0.6em;
} 

#container{
margin-left:auto;
margin-right: auto;
width: 800px;
height: 100%;
}

#box{
width: 793px;
float:left;
}



#box .topframe{
	height: 26px;
	width: 793px;
	float: left;
	background-color: #b2bb1c;
}

/*some expected classes have been made into divs, so that class="column" can be added to the div. This is necessary to invoke the javascript which makes the div heights equal to the tallest div - basically the inside content*/

#box #leftframe{
min-height:510px;
width: 29px;
float: left;
background-color: #b2bb1c;

}

/*start of inside*/

#box #inside{
min-height:510px;
width: 735px;
float: left;
display: inline;
}

#box #inside #leftshadow{
min-height:510px;
width: 7px;
	background-image: url(../images/vertical_shad_repeat.png);
	background-repeat: repeat-y;
	float: left;
}

#box #inside .topshadow{
height: 6px;
width: 728px;
	background-image: url(../images/horiz_shad_repeat.png);
	background-repeat: repeat-x;	
	margin-bottom: 10px;
	float:right;
}

#box #inside .splash{

height: 504px;
width: 728px;
}


#box #inside .splash a img{
margin-top: 130px;
margin-left: 20px;
border: none;
}


#box #inside .splash .text a{
margin-top: 8px;
margin-right:27px;
float: right;
	color: #666;
	font-size: 1.0em;
	font-family: arial;
	font-weight: bold;
	text-transform:uppercase;
	text-decoration: none;
}

#box #inside .splash a:hover{
	text-decoration: underline;
}


#box #inside .top{
height: 88px;
width: 708px;
margin-left: 20px;
float: left;
}

#box #inside .top img{
float: left;
margin-right: 20px;
}

/*probably a better way of doing this*/
#box #inside .top .gap{
height: 55px;
	width: 541px;
	margin: 0;
	padding:0;
}

#box #inside .top ul{
	width: 541px;
	margin: 0;
	padding:0;

}

	#box #inside .top li{
		color: #d1d2d7;
		list-style: none;
		float: left;
		margin: 0;
		padding: 0;
	}

#box #inside .top a {
	color: #d1d2d7;
	font-size: 0.7em;
	font-family: arial;
	font-weight: bold;
	padding-right: 4px;
	padding-left: 4px;
	text-decoration: none;
}

#box #inside .top a:hover {
		text-decoration: underline;
	}

#box #inside .top .line{
	padding: 0px;
	margin-top: 7px;
	height: 2px;
	width: 688px;
	margin-right:20px;
	float: left;
	background-color: #d1d2d7;
}

/*start of navigation*/

#box #inside .nav{
margin-top: 4px;
height: 37px;
width: 688px;
margin-left: 20px;
margin-right: 20px;
margin-bottom:18px;
float: left;
}


#box #inside .nav .none{
		height: 31px;
	width: 680px;
	float: left;
	background-image: url(../images/nav.png);
	background-repeat: no-repeat;
}

#box #inside .nav .one{
	height: 31px;
	width: 680px;
	float: left;
	background-image: url(../images/services.png);
	background-repeat: no-repeat;
}

#box #inside .nav .two{
	height: 31px;
	width: 680px;
	float: left;
	background-image: url(../images/group.png);
	background-repeat: no-repeat;
}

#box #inside .nav .three{
	height: 31px;
	width: 680px;
	float: left;
	background-image: url(../images/benefits.png);
	background-repeat: no-repeat;
}

#box #inside .nav .four{
	height: 31px;
	width: 680px;
	float: left;
	background-image: url(../images/roles.png);
	background-repeat: no-repeat;
}

#box #inside .nav .five{
	height: 31px;
	width: 680px;
	float: left;
	background-image: url(../images/apply.png);
	background-repeat: no-repeat;
}


#box #inside .nav ul{
	height: 31px;
	width: 680px;
		font-family: Arial;
	list-style: none;
margin: 0;
padding:0;
}

#box #inside .nav ul li{
	float: left;
	height: 31px;
	width: 118px;
	margin-left: 19px;
}

#box #inside .nav ul li.first{
	float: left;
	height: 31px;
	width: 117px;
	margin-left: 13px;
}

#box #inside .nav ul li.services{
	float: left;
	height: 31px;
	width: 117px;
	margin-left: 13px;
}

#box #inside .nav ul li a {
	text-decoration: none;
	font-size: 0.6em;
	font-weight: bold;
	color: #FFF;
	display: block;
	padding-top: 9px;
	padding-bottom: 9px;
	text-align: center;
	text-transform: uppercase; 
}

#box #inside .nav ul li.services a{
	color: #b2bb1c;
}

#box #inside .nav ul li.group a {
	color: #d11241;
}

#box #inside .nav ul li.benefits a{
	color: #0079c2;
}

#box #inside .nav ul li.roles a{
	color: #ffc423;
}

#box #inside .nav ul li.apply a{
	color: #9b1485;
}

#box #inside .nav ul li:hover a {
	text-decoration: underline;
}

#box #inside .nav ul li a:focus {
	text-decoration: underline;
}

#box #inside .nav .rightshad {
	height: 31px;
	width: 7px;
	float: right;
}


#box #inside .nav .rightshad .topr{
	height: 26px;
	width: 7px;
	background-image:url(../images/trs.png);
}

#box #inside .nav .rightshad .botr{
height: 5px;
	width: 7px;
	background-image:url(../images/vertical_shad_repeat.png);
	background-repeat: repeat-y;
}

#box #inside .nav .bottomshad{
height: 6px;
	width: 688px;
	float: left;
}

#box #inside .nav .bottomshad .leftc{
height: 6px;
	width: 29px;
	float:left;
	background-image: url(../images/bls.png);
	background-repeat:no-repeat;
}

#box #inside .nav .bottomshad .leftmid{
height: 6px;
	width: 659px;
	float: right;
	background-image: url(../images/horiz_shad_repeat.png);
	background-repeat: repeat-x;
}


/*start of main*/

#box #inside .main {
height:auto;
min-height: 331px;
width: 688px;
margin-left: 20px;
margin-right: 20px;
float: left;
padding-bottom: 25px;
}

#box #inside .main .mainleft{
width: 435px;
float: left;
margin-right:16px;
}

#box #inside .main .mainleft h1 {
font-family: arial;
font-size: 1.1em;
color: #000;
}

#box #inside .main .mainleft h2 {
font-family: arial;
font-size: 1.0em;
color: #000;
}

#box #inside .main .mainleft p {
width: 390px;
font-family: arial;
font-size: 0.7em;
color: #000;
padding: 0;
margin-left: 0;
margin-right: 0;
margin-top: 9px;
margin-bottom: 9px;
}

#box #inside .main .mainleft p.jobDesc {
	margin-bottom:40px;
}


#box #inside .main .mainleft a {
color: #b2bb1c;
text-decoration: none;
}

#box #inside .main .mainleft a:hover {
text-decoration: underline;
}

/*this exists so that ul does not have width in main copy - bad for bullets*/
#box #inside .main .mainleft .list{
width: 340px;
}

#box #inside .main .mainleft ul {
font-size: 0.7em;
color: #000;
margin: 0;
padding:0;
}

#box #inside .main .mainleft li{
margin-left:40px;
list-style-type:disc;
}

#box #inside .main .mainleft li.no_bullet{
margin-top:2px;
margin-bottom: 0px;
margin-left:40px;
list-style-type:none;
}

#box #inside .main .mainleft li.no_bullet2{
margin-top:2px;
margin-bottom:4px;
margin-left:40px;
list-style-type:none;
}

#box #inside .main .mainleft img{
margin-top: 14px;
}

#box #inside .main .mainright{
float: right;
width: 230px;
display: inline;
padding-right:7px;
}

#box #inside .main .mainright img{
margin-bottom: 14px;
}

#box #inside .main .mainright img.second{
margin: 0;
}

#box #inside .main .mainright .square{
width: 160px;
height: 115px;
background-color: #b2bb1c;
padding-top: 25px;
padding-left: 30px;
padding-right: 40px;
}

#box #inside .main .mainright .square p{
width: 160px;
color: #FFF;
font-size: 0.6em;
font-weight: bold;
margin:0;
padding: 0;
}

#box #inside .main .group_page {
width: 688px;
float: left;
}

#box #inside .main .group_page .reception {
width: 425px;
height: 140px;
float: left;
margin-right:26px;
}

#box #inside .main .group_page .square2{
width: 160px;
height: 120px;
padding-top: 20px;
background-color: #d11241;
padding-left: 30px;
padding-right: 40px;
float: left;
}

#box #inside .main .group_page .square2 p{
width: 160px;
color: #FFF;
font-size: 0.6em;
font-weight: bold;
margin:0;
padding: 0;
}

/*end of inside*/
#box #rightframe{
min-height:510px;
width: 29px;
float: right;
background-color: #b2bb1c;

}

#box .bottomframe{
height: 26px;
width: 793px;
float: left;
background-color: #b2bb1c;
}



#box .bottomframe ul {
margin-left: 45px;
	margin-right: 0;
		margin-top: 6px;
			margin-bottom: 0;
	padding:0;

}

	#box .bottomframe ul li{
		color: #FFF;
			font-size: 0.6em;
		list-style: none;
		float: left;
		margin: 0;
		padding: 0;
	}

#box .bottomframe ul li a {
	color: #FFF;
	font-family: arial;
	font-weight: bold;
	padding-right: 4px;
	padding-left: 4px;
	text-decoration: none;
}

#box .bottomframe ul li a:hover {
		text-decoration: underline;
	}

/*end of box*/
#right{
width: 7px;
float: right;
}

#right .tr{
	height: 26px;
	width: 7px;
	background-image:url(../images/trs.png);
}

/*This has been added so that #right #r is 510 and can be included in the column script*/
#right .makeweight{
height:26px;
	width: 7px;
	background-image:url(../images/vertical_shad_repeat.png);
	background-repeat: repeat-y;
}

#right #r{
min-height:510px;
	width: 7px;
	background-image:url(../images/vertical_shad_repeat.png);
	background-repeat: repeat-y;
}

/*start of box*/
#base{
width: 800px;
height: 6px;
float:left;

}

#base .bl{
height: 6px;
	width: 29px;
	float:left;
	background-image: url(../images/bls.png);
	background-repeat:no-repeat;
}

#base .b{
height: 6px;
	width: 771px;
	float: right;
	background-image: url(../images/horiz_shad_repeat.png);
	background-repeat: repeat-x;
}
