/* -------------------------------------------------------------- 
  
   Boilerplate Styles
   * Version:   0.5 (2007-11-19)
   
-------------------------------------------------------------- */

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";
@import "lib/nav.css";
@import "lib/tabs.css";








/* Page
-------------------------------------------------------------- */

#page { margin: 0 auto; width: 860px; background-color: #fff; left: 0px; top: 0px; position: relative; z-index:1000}


/* Header
-------------------------------------------------------------- */
#logo { display:block; left: 786px; top: 20px; z-index: 50; position: absolute;}


#home a { display:block; height:150px; width:160px; overflow:hidden; position: relative; left: 12px; top: 111px; z-index: 10;}
#home a:hover {display:block; text-indent:-160px; }



#phone { display:block; left: 500px; top: 20px; z-index: 10; position: absolute;}
#seal{ display:block; left: 790px; top: 110px; z-index: 11; position: absolute;}


#header { margin-top: 20px; line-height: 0px; padding: 0px; margin: 0px; height: 265px; z-index:1000}
#mask { background: url('../img/arch.png') no-repeat;}

#banner { background: url('../img/index-header.jpg') no-repeat; }
#banner2 { background: url('../img/member-header.jpg') no-repeat; }
#banner3 { background: url('../img/car-header.jpg') no-repeat; }
#banner4 { background: url('../img/marine-header.jpg') no-repeat; }
#banner5 { background: url('../img/commercial-header.jpg') no-repeat; }
#banner6 { background: url('../img/compliance-header.jpg') no-repeat; }
#banner7 { background: url('../img/advocacy-header.jpg') no-repeat; }
#banner8 { background: url('../img/resources-header.jpg') no-repeat; }
#banner9 { background: url('../img/proshop-header.jpg') no-repeat; }

/* Body
-------------------------------------------------------------- */

#body { margin-top: 20px; z-index:1000}

 #questions {   width: 770px; margin: 0px 0px 0px 0px; padding: 10px; background-color: #E6EAEE; }
 #questions ul{list-style-type: none; }
 #questions li { list-style-type: none; font-size: 13px; color:#20374A; }
 #questions li a { list-style-type: none;  font-size: 13px; color:#516676; text-decoration:none; font-style: normal; margin-left: 4px;}
 #questions li a:hover { list-style-type: none;  font-size: 13px; color:#516676; text-decoration:underline; font-style: normal; margin-left: 4px;}


#questions #cola { float: left; width: 235px; padding: 10px; }
#questions #colb { float: left ; width: 235px; padding: 10px;  }
#questions #colc { float: right; width: 235px; padding: 10px;  }



 .archive {   width: 460px; margin: 10px 0px 0px 0px; padding: 10px; background-color: #E6EAEE; }
 .archive .title { font-size: 14px; color:#20374A; font-weight: bold; }
 .archive p { font-size: 13px; color:#20374A; }
 .archive a {  font-size: 13px; color:#516676; text-decoration:none; font-style: normal; }
 .archive a:hover {  font-size: 13px; color:#516676; text-decoration:underline; font-style: normal; }


 .callout {   width: 460px; margin: 10px 0px 20px 0px; padding: 20px 10px 10px 20px; background-color: #E6EAEE; }
 .callout .title { font-size: 14px; color:#20374A; font-weight: bold; }
 .callout p { font-size: 13px; color:#20374A;  }
 .callout a {  font-size: 13px; color:#516676; text-decoration:none; font-style: normal; }
 .callout a:hover {  font-size: 13px; color:#516676; text-decoration:underline; font-style: normal; }



.quiz {   width: 450px; margin: 0px 0px 5px 0px; padding: 20px; background-color: #F5F5F5;}

.quiz  p.title { font-size: 14px; color:#20374A; font-weight: bold; margin-bottom: 12px; }
 .quiz  p { font-size: 13px; color:#20374A; padding: 0; margin: 0;  }

.quiz  legend{ font-size: 16px; color:#516676; padding: 0; margin: 0; font-weight: bold;  }

.test { margin: 0;}
.test tr, .test td{ margin: 0;}
.test td { vertical-align: 50%; }
.test input.radio{ height: 20px;}

#quizSubmit {margin: 20px 0px 0px 30px;}
#quizSubmit .submit { background: url(lib/nav/submit.gif) no-repeat; height: 22px; width: 200px; border: none;}

 #quizSubmit .submit:hover { background: url(lib/nav/submit.gif) 0 -22px no-repeat;}



#main img.pic{ margin:0px; padding:0px; }

#main {   float: left; width: 500px; margin-left: 40px; margin-top: 40px; margin-bottom: 70px; padding-right: 30px; z-index:1000}

#main #overview {margin-left: 15px;}



#feat1{   float: left; width: 225px; margin-left: 5px; margin-top: 10px; padding-right: 10px; }

#feat2{   float: right; width: 225px; margin-left: 5px; margin-top: 10px; padding-right: 10px; }


#feat1 p, #feat2 p {  margin-top: 30px;}




#sidebar { float: right; width: 275px; margin-top: 35px; padding-left: 10px; padding-right: 5px; overflow: hidden }



.download { color: #880319; font-size: 10px; }



#main #promos { margin: 30px 0px 0px 0px; padding: 0px; }



#tab2 dl { width: 240px;} 

#tab2 dt a { border-bottom-color: #516676; border-bottom-width: 1px; border-bottom-style: solid; color: #fff; display: block; font: 12px Arial, Helvetica, sans-serif; padding: 9px; text-decoration: none;}

* html #tab2 dt a { width: 240px;} /* make hover effect work in IE */

#tab2 dt a:hover { background: #8497A8;}

#tab2 a span { font-size: 11px; color: #fff; font-style: italic;}






 
 #NewsletterButton a {text-decoration: none; text-align: center; font-size: 12px; background-color: #516676; color: #fff; display:block;  height:20px; width:230px;  margin-top: 6px; margin-right: 30px; padding: 10px 5px 5px 5px;}
 
 #NewsletterButton a:hover { text-decoration: none; font-size: 12px; background-color: #8498A8; color: #fff; display:block;  height:20px; width:230px; margin-top: 6px; margin-right: 30px; padding: 10px 5px 5px 5px;  }







 #Articles a { font-size: 10px; background-color: #516676; color: #fff; display:block;  height:12px; width:100px; overflow:hidden; margin-top: 6px; margin-right: 170px; padding: 5px 5px 5px 8px; position: relative; left: 220px; top: -37px; text-decoration: none; font-style: normal;}
 #Articles a:hover { text-decoration: none; font-size: 10px; background-color: #8498A8; color: #fff;  height:12px; width:100px; overflow:hidden; margin-top: 6px; margin-right: 170px; padding: 5px 5px 5px 8px; font-style: normal; }



#ReadMore a { font-size: 9px; background-color: #516676; color: #fff; display:block;  height:12px; width:60px;  padding: 3px 2px 2px 5px; margin-right: 60px; position: relative; left: 100px; top: -20px; text-decoration: none; font-style: normal;}

#ReadMore a:hover { text-decoration: none; font-size: 9px; background-color: #8498A8; color: #fff;  height:12px; width:60px;  padding: 3px 2px 2px 5px; margin-right: 60px; font-style: normal;  }


#alerts{ width: 260px; font-style: italic; font-weight: bold; color: #880319; font-size: 12px; }
#alerts ul{ line-height:1.2; margin-top: 18px; margin-bottom: 20px; list-style-type:none;}
#alerts li{ padding-left: 35px; background-image: url(../img/alert.gif);background-repeat: no-repeat;}

#feed { background-color: #e6e6e6; color: #000; font-size: 12px; width: 245px; padding: 20px 5px 5px 5px; margin-bottom: 40px; }
#feed a { font-size: 12px; color: #20374A; text-decoration: none; }
#feed a:hover {font-size: 12px; color: #516676; text-decoration: underline; }
#feed li { margin: 7px 0;}
#feed p{padding: 0px 15px; font-size: 10px; color: #516676; text-align: center; }









.callout-col1 {width: 50px; margin-right: 7px; float: left;}

.callout-col2 {width: 250px; float: right;}


#s1 a { display:block; float: left; height:20px; width:98px; overflow:hidden; margin-top: 3px; margin-left: 2px; margin-bottom: 20px; }
#s1 a:hover { display:block; float: left; text-indent:-98px; }

#s2 a { display:block; height:20px; width:160px; overflow:hidden; margin-top: 3px; margin-bottom: 20px;}
#s2 a:hover {display:block; text-indent:-160px; }


#main #dl img { margin: 0px;}
#dl a { display:block; height:37px; width:142px; overflow:hidden; }
#dl a:hover {display:block; text-indent:-142px; }

#main .pricing { font-size: 22px; color: #880319; margin: 0px; font-style: bold; }
#main .small { font-size: 11px; font-style: italic;}
/* Footer
-------------------------------------------------------------- */
#footer { margin-top: 10px; background-color: #25364A; height: 400px; text-align: center; padding-top: 20px;}

div.spacer{clear:both; height:10px; display:block;}


#sitemap {height: 365px; border-right-color: white; border-right-width: 1px; border-right-style: solid; float: left; width: 330px; }

#footer p{font-size: 11px; color: #fff;}
#footer a { font-size: 11px; color: #fff; text-decoration: none; }
#footer a:hover {font-size: 11px; color: #fff; text-decoration: underline; }

#sitemap #col1 { float: left; width: 150px; padding: 10px 0px 0px 20px; }
#sitemap #col2 { float: right;width: 150px; padding: 10px 0px 0px 10px;  }


.vcard { margin-top: -5px; float: right; display: block; width: 180px; text-align: left;}

#address {height: 365px; border-right-color: white; border-right-width: 1px; border-right-style: solid; float: left; width: 245px; }
#address a { font-size: 14px; color: #fff; text-decoration: none; }
#address a:hover {font-size: 14px; color: #fff; text-decoration: underline; }
#address p { font-size: 11px;}
#address p.phone { font-size: 14px; }
#address img{ margin-left: 67px; margin-bottom: 7px; float: left; clear: both;}

#QuickContact { height: 365px; float: left; width: 270px;}
#contact {margin-top:30px; margin-bottom:20px; font-size: 10px; color: #fff; }
#QuickContact img{float: left; margin-left: 40px; }