@charset "utf-8";
/* CSS Document */


#wrapper {background-color: #ffffff; 
width: 850px;
margin: 0px auto;
border: 2px #003264 solid;
 }

/* background color of body (below) is the color of the space outside of the webpage */
body {
	background-color:#336699; 
	font-family:Verdana, Geneva, sans-serif; 
	font-size: 12px; 
	color: #000; 
	margin-top: 0px;
	margin-bottom: 0px;}

.horizontalbar {background-color: #254A70; /* #005680 */
height: 10px; width: 850px; }


/* ************************ */
/*    HEADER STYLES         */
/* ************************ */

#masthead   {
	background-color:#fff;
	/*background-image:url('images-used/natfl472dkbl.gif');*/
	width: 100%;
	height: 190px;
}


/*#homeheaderleft {background-color: #ffffff; 
height: 131px; width: 70%; 
float: left; 
text-align: center; }

#homeheaderright  {background-color: #ffffff; 
height: 80px; width: 30%; 
text-align: center; 
padding: 20px 0px 0px 0px; 
float: right; 
text-align: center; } */

#headerleft {background-color: #ffffff; 
height: 180px; width: 50%; 
float: left; 
text-align: center; 
font-family:Verdana, Geneva, sans-serif; 
font-size: 10px; 
color: #000; }

#headerleft img {
	border: 0px;

}

#headerright  {background-color: #ffffff; 
height: 180px; width: 50%; 
text-align: center; 
padding: 10px 0px 0px 0px; 
float: right; 
font-family:Calibri, Arial, sans-serif; 
font-size: 18px; 
font-weight:bold;
font-style:italic;
line-height: 18px;
letter-spacing:2px;
color: #000; }

#clear {clear: both; }

#headernav {background-color:#AEE4FF;  
height: 35px; width: 850px; 
padding: 15px 0px 0px 0px; 
text-align: center; 
font-family: Verdana, Geneva, sans-serif; 
font-size: 12px; 
color: #ffffff; }


/* ************************ */
/*    SIDEBAR STYLES         */
/* ************************ */

#sidebar {background-color: #254A70; 
/* cannot have height: 350px; */ width: 210px; 
float: left; 
/*background-image:url('images/Binky210.jpg'); 
background-repeat: no-repeat; 
background-attachment: scroll; */
padding: 0px 0px 125px 0px; 
font: Verdana, Geneva, sans-serif; 
font-size: 13px; 
font-weight: bold; 
color: #aee4ff; 
}
/* padding is space inside sidebar border; SIDEBAR WIDTH IS EITHER 195PX OR 26% */

#sidebar p {
	padding-left: 10px;
	text-align: left;
}
#sidebar a {line-height: 15px; 
font-size: 11px; 
font: Verdana, Geneva, sans-serif; 
color: #aee4ff; 
text-decoration: none;
 } /* #sidebar a specifies it's coding for anchors in sidebar; text-decoration is to remove underline on links to make it more attractive */

/* REMOVED ALL #sidebar li {list-style-type: none; padding-left: 0; }
Any list in sidebar has no bullet. My mistake with this coding is that it should read 0px, rather than just 0, the px unit needs to be defined. */
/* *********** ADD A STYLE TO MAKE NO INDENTATIONS; removed list-style-position: outside; removed margin: 0 0 0 -200; removed padding-left: -50px; ************ */
#sidebar p.photo{
	font-size: 10px;
	text-align: right;
	font-weight: normal;
	font-style:oblique;
	color: #fff;
	padding-right: 3px;
	margin-top: -2px;
}
#sidebarlinks {padding: 50px 8 px 0px 0px; 
}
/* Purpose of sidebarlinks div is to group all sidebar links & create padding around group, rather than padding around each link which caused problems when clicking on them due to overlapping of link padding. */

.emphasis {color:#FFFF99; 
font-style: italic; 
font-size: 11px;}

/* ************************ */
/*    CONTENT STYLES         */
/* ************************ */

#content {background-color: #ffffff; 
width: 640px; 
/* float: right; */
float: left; 
line-height: 14pt}

h2 {font-family:Verdana, Geneva, sans-serif; 
font-size: 14px; 
margin: 15px 0px 0px 0px;
padding: 0px 15px 0px 10px; }

h4 {font-family:Verdana, Geneva, sans-serif; 
font-size: 12px; 
color: #005680;
padding: 10px 0 0 10px;
}

h6 {padding: 0px 15px 0px 15px; }  

h5 {padding: 0px 15px 0px 15px; }  

 

h3 {padding: 0px 15px 0px 15px; }  

 

h1 {font-family:Verdana, Geneva, sans-serif; 
font-size: 16px; 
margin: 15px 0px 0px 0px;
padding: 0px 15px 0px 10px; }

#content p {padding: 0px 20px 0px 20px; }  /* this padding on allows space on right & left margins around named content; CONTENT WIDTH IS EITHER 642PX OR 75% */

#content p {text-align: justify; }


/* ***** TO GET THE SIDEBAR COLOR TO BE BLUE THE ENTIRE HEIGHT OF THE PAGE WITH VARYING PAGE LENGTHS: MADE SIDEBAR BLUE COLOR WITH NO HEIGHT. PUT A CONTAINER DIV AROUND THE SIDEBAR AND CONTENT WITH A BLUE BACKGROUND. THEN FOR SHORT PAGES (INDEX, NEWSLETTER), A SPACER CLASS DIV IS PUT JUST BEFORE THE </DIV> FOR CONTENT, WITH THE PADDING-BOTTOM IDENTIFIED IN CSS. THE SPACER PUSHES THE WHITE CONTENT PAGE DOWN. AS SHORT PAGE CONTENT CHANGES AND AFFECTS THE LENGTH OF THE PAGE, THE PADDING IN THE SPACER WILL HAVE TO BE ADJUSTED ACCORDINGLY. ***** */

#container {background-color: #254A70; 
overflow: auto; }

.spacernewsletter {padding-bottom: 285px; }

.spacerindex {padding-bottom: 130px; } 

.btt {text-align: right; }
#content p.btt {
	text-align:right
}
#content p.products {
	padding: 0px 10px 0px 10px;
	line-height: 14px;
	text-align: left;
}

/* ************************ */
/*    LINKS STYLES         */
/* ************************ */

a:link {color: #005680} /* unvisited */
a:visited {color: #002F5E} /* visited */
a:hover {color: #FF00FF}  /* mouse over - hot pink */
a:active {color: #0000FF}  /* selected */

.bbt {padding-bottom: 20px;} /* bbt are Back to Top links. Needed padding so wouldn't run into horizontal bar at bottom of page. Also put bbt in p tag so that they had proper right & left margins, as coded in content styles */

/* ************************ */
/*    LISTS STYLES         */
/* ************************ */

ul {list-style-type: square; 
margin-top: -12px; } /* changed from margin-top: -18px; */

ol {margin-top: -18px; }


/* ************************ */
/*    IMAGE STYLES         */
/* ************************ */

.floatright {float: right; padding: 15px 15px 10px 15px;}
.floatleft {float: left; padding: 15px 15px 10px 15px; }
.clear {clear: both; }

.picture { background-color: #fff; 
border: 0px solid #CCCCCC; padding: 3px; 
font: 11px/1.4em Arial, sans-serif;
text-align: right;
font-style:oblique; } 
.picture img { border: 0px solid #CCCCCC; 
vertical-align:middle; margin-bottom: 0px; } 
.right { margin: 15px 15px 0px 15px; float:right; } 
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
.icon { padding: 0px 2px 0px 2px; border: 0;}
.bctrail p{font-size: 90%; color:#005680; text-decoration: none; }	
.bctrail a{font-size: 90%; color:#005680; text-decoration: none; }

/* ************************ */
/*    FOOTER STYLES         */
/* ************************ */

#footer {     
height: 50px; width: 850px; 
background-color: #aee4ff;
padding: 10px 0 10px 0px; 
text-align:center;
font-size: 10px;
}
#footer p {background-color: #aee4ff;  
margin: 0px;   
text-align: center; 
font-family: Verdana, Geneva, sans-serif; 
font-size: 10px; 
color: #005680; 
}

#footer a{
	text-align: center;
	font-size: 10px;
}