/*
COLORS:
Background Blue - #3b7297
Light Blue (behind intro paragraph) - #8dbce2 
Medium Blue (behind teasers) - #5a91bf 
Dark blue (main body text) - #003366 
Yellow - #fec270 

FONTS:
Nav (selected) - Arial, bold, 13px, Yellow - #fec270 
Nav (unselected) - Arial, bold, 13px, White - #ffffff 
Nav (hover) - Arial, bold, 13px, Yellow - #fec270 
Main body text - Verdana, reg, 12px, Dark blue - #003366 
Links - Verdana, bold, 10px, ALL CAPS, White - #ffffff 
Teaser text - Arial, bold, 10px, ALL CAPS, Yellow - #fec270 
Footer - Arial, bold, 11px, extra letter space, White - #ffffff

SPECIAL FEATURES:
I'd like a 1 px stroke around the each teaser box. 
Black on unselected (as per mockup), changing to Yellow - #fec270 on hover
*/


body {
margin:20px 0 0 0;
padding:0px;
background-color:#3b7297;}

p, .accumulation td, .accumulation th {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#003366;}

table {
margin:0 auto;}

a {
font-weight:bold;
font-size:10px;
text-transform:uppercase;
color:#ffffff;
text-decoration:none;}

a img {
border:none;}

/*nav*/
#nav {
list-style:none;
padding:0;
margin:0;}

#nav li {
float:left;
padding:0 10px;}

#nav a {
float:left;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#ffffff;
text-transform:none;}

#nav a:hover, #nav a.navsel {
color:#fec270;}


/*main text*/
.logo_btm {
width:464px;
background:url(images/logo_bottom.gif) top left no-repeat #8dbce2;
border-left:6px solid #ffffff;
border-right:6px solid #ffffff;}

.logo_btm p {
padding:0 20px 0 20px;
line-height:18px;}

.intro {
margin-top:75px;}

.logo_btm .sub_head  {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#FFFFFF;
font-weight:bold;}

.bottom_right .sub_head {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#FFFFFF;
font-weight:bold;
padding:0 20px;}


/*teasers*/
.bottom_right {
background-color:#5a91bf;
border:6px solid #ffffff;
border-bottom:none;
border-left:none;
padding:10px 0;}

a.download {
padding-top:20px;
margin:20px;
color:#003366;}

.teaser {
width:429px;
height:66px;
margin:5px 0 5px 6px;
background-color:#090e14;}

.teaser img {
float:left;
padding-right:10px;}

.teaser a {
width:429px;
height:66px;
display:block;
border:1px solid #000000;
background-color:#090e14;
float:left;}

.teaser a:hover {
border:1px solid #fec270;}

.teaser span {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
font-size:10px;
color:#fec270;
text-align:left;
padding-right:10px;
display:block;
height:40px;
padding-top:15px;}

.teaser_1 span {
height:20px;
padding-top:20px;}

/*product information*/
.spec_heading {
font-weight:bold;
color:#ffffff;}

.spec_list {
margin:0 20px;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#003366;}

.spec_list li {
padding:2px 0;
margin-left:20px;}

/*photo gallery*/
.gallery a {
border:1px solid #000000;
display:block;}

.gallery a:hover {
border:1px solid #fec270;}

.caption {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
vertical-align:top;
padding-bottom:10px;}

/*contact form*/
.contact form {
margin:0;
padding:0;}

.contact_form td {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#003366;}

.textboxreqd {
color:red;
font-style:italic;
width:250px;
border:1px solid #666666;}

.textbox {
width:250px;
border:1px solid #666666;}

.dropdown {
width:250px;
border:1px solid #666666;}

.large_text {
width:250px;
height:100px;
border:1px solid #666666;}

.button {
background-color:#3b7297;
color:#ffffff;
border:1px solid black;
padding:0 10px;}

.title {
font-size:19px;
color:#993300;}


/*video*/
.video {
width:448px;
background:url(images/video_background.gif) top right no-repeat #000000;
border-right:6px solid #ffffff;
padding:190px 0 0 0;
margin:0;}

/*footer*/
.footer {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
letter-spacing:1px;
color:#ffffff;
padding:5px 0;}

.footer a {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
letter-spacing:1px;
color:#ffffff;
text-decoration:none;
text-transform:none;}

