@charset "utf-8";

/**
	Colors
	
	Dark Gray:         #646465 (Text)
	Dark Blue:         #293d8e (Header and Nav background, H2)
*/

/* DO NOT MODIFY: Excerpt from Eric Meyer's CSS Reset Reloaded:
   http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   A complete reset is not necessary, since we are setting most
   defaults below. */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{
margin:0;
padding:0;
font-weight:inherit;
font-style:inherit;
font-family:inherit;
text-align:left;
}

/********************************************************
 Modify the styles below to customize your site's design. 
 ********************************************************/

/* base styles */
body{
font-family:Arial, Helvetica, sans-serif; /* base font */
font-size:12px;                           /* base font-size */
color:#646465;
background:#9e9e9e;
}
#bodyWrap{
float:left;/* required to wrap contents */
width:100%;
background:#a6a6a6 url(../images/brushed-metal-tile.jpg) center top repeat;
text-align:center; /* for centering layouts (remove if not desired) */
}
#wrap{
/* next 3 styles for centering layouts (remove if not desired) */
width:830px;
margin:0 auto;
text-align:left;
}

/* By only applying the margin to the bottom, spacing between
   these common block-level elements remains consistent and
   headings can be flush with the following content if desired. */
p,ul,ol,table,form,blockquote{
margin-bottom:10px;
}

/* heading styles */
h1,h2,h3,h4,h5,h6{
color:#293d8e;
font-weight:bold;
padding-bottom:10px;
}
h1{
color:#75851b;
font-size:20px;
}
h2{
font-size:16px;
}
h3{
font-size:14px;
}
h4,h5,h6{
font-size:12px;
}

/* hyperlink styles */
a{
color:#293d8e;
text-decoration:underline;
}
a:visited{
/*color:#999; Don't forget to add it back in! */
}
a:hover{
color:#75851b;
}

/* list styles */
ul{
list-style:none;
}
li{
padding:6px 3px;
}
ul li{
padding-left:20px; /* custom bullet (because FF has ugly bullets) */
background:url(../images/bullet.png) 8px 7px no-repeat;
}
ul.green li{
background:url(../images/bullet-green.png) 8px 7px no-repeat;
}
li ul li{
background:url(../images/bullet-circle.gif) 0 2px no-repeat;
}
ol{
list-style-position:outside;
padding-left:32px;
}
ol li{
padding-left:0;
}
li ol{
padding-left:20px;
}
/* nested lists */
li ol, li ul{
margin-bottom:0;
}

/* table styles */
td{
vertical-align:top; /* 99% of the time, you really want this */
}

/* other miscallaneous styles */
strong,b{
color:#75851b;
font-weight:bold;
}
img{
/* Most browsers insist on putting margins on images even
   when margins are explicitly set to 0. This can be
   problematic when images are used for layout. */
margin:0 -3px -3px 0;
}

/* Add any other classes here. */
.center{
text-align:center;
}
.center *{
margin-left:auto;
margin-right:auto;
text-align:left;
}

/* Begin your layout styles here. Override default styles where necessary. */
#logo{
font-size:36px;
margin-top:12px;
}
#tollfree{
float:right;
text-align:right;
font-family:"Times New Roman", Times, serif;
font-size:18px;
font-style:italic;
font-weight:bold;
color:#808080;
letter-spacing:1px;
padding:33px 10px 0 0;
}

#topnav{
width:830px;
height:31px;
background:#293d8e url(../images/nav-bg-tile.png) 0 0 repeat-x;
margin:13px 0 12px 0;
}
#topnav a, #topnav a:visited{
color:#fff;
}
#rightCorner{
/*margin-left:373px;*/
float:right;
margin-right:0px;
}
#login {
float:right;
}

#header{
color:#f8f8f8;
width:830px;
height:214px;
background:#293d8e url(../images/header-tile.png) 0 0 repeat-x;
}
#header .leftcorner{
width:830px;
height:214px;
background:url(../images/header-left-corner.png) 0 0 no-repeat;
}
#header .rightcorner{
width:830px;
height:214px;
background:url(../images/header-home-right-corner.png) top right no-repeat;
}
#header h2{
color:#f8f8f8;
font-size:22px;
font-weight:normal;
padding:32px 0 0 0;
}
#header p{
font-size:16px;
margin:0;
padding:6px 0 26px 0;
}
#header h2, #header p{
text-align:center;
}
#header img{
margin:0;
}
#header .separator{
margin:0 36px;
position:relative;
top:13px;
}

#pagebody{
clear:both;
float:right;
background:#fff;
width:830px;
}

#content{
width:830px;
margin-bottom:-10px;
}
.contentlinks{
padding:0 0 0 10px;
}
.contentlinks ul {
width:230px;
float:left;
border-right:1px solid #ebebeb;
margin:0;
padding:25px 40px 20px 40px;
}
.contentlinks li{
background:0;
}
/* widths must match widths of images in header */
.contentlinks ul.first{width:190px;}
.contentlinks ul.second{width:203px;}
.contentlinks ul.last{width:175px;border:0;}
.contentlinks a{
color:#75851b;
}
.contentlinks a:hover{
color:#293d8e;
}
#content .cbottom{
clear:both;
background:#f8f8f8 url(../images/content-tile.png) 0 0 repeat-x;
border:0px solid red; /* forces IE to display background image */
}
.cbottom h3{
font-size:22px;
font-weight:normal;
}
.cbottom h3 strong{
color:#293d8e;
}
.cbottom div.cblock{
float:left;
padding:20px 0 0 20px;
}
#cblock1{ width:334px; }
#cblock2{ width:255px; }
#cblock3{ width:164px; }
#cblock3, #cblock3 div, #cblock3 label { font-size:11px; font-weight:normal;}
#cblock3 label { font-weight:bold; }
#cblock3 input { font-size:11px; }
#cblock3 input[type=text] { width:138px; }
#add { position:relative; top:2px; left:2px; }
#safe {
position:relative;
left:-2px;
margin:0;
padding:0;
}
#safe img{
margin:0;
}
.cbottom div.clear{clear:both;}
.logos{
text-align:center;
}
.logos img{
margin:0 10px;
}

/** Rounded corners and shadow at bottom of pageBody */
#shadow{
clear:both;
width:100%;
text-align:center;
background:#a6a6a6 url(../images/brushed-metal-tile.jpg) center -30px repeat;
padding-bottom:25px;
}
#shadow img{
width:830px;
margin:0 auto;
}

#footerwrap{
background:#9e9e9e url(../images/footer-tile.png) top left repeat-x;
width:100%;
height:60px;
text-align:center;
}
#footer{
color:#eee;
width:800px;
margin:0 auto;
}
#footer p{
float:left;
width:190px;
text-align:right;
padding-top:25px;
}
#footer p.first{
width:610px;
text-align:left;
}
#footer a, #footer a:visited{
color:#eee;
text-decoration:none;
}
#footer a:hover{
text-decoration:underline;
}
/* Content/Header Switch
	Ok, here is where I move the logo and top navigation above the content
	section while keeping it below the content section in the code.
	If anyone can figure out how to do this without so many double <div>
	wraps, please do. */
#topWrap{
position:absolute;
top:0;
width:830px;
}
#pagebody{
margin-top:330px;
}

/* leave at bottom */
.clear{
clear:both;
}