@charset "utf-8";
 

body {
max-width: 1050px;
background-color:#cccccc; 
font-family:  Arial, Verdana,  sans-serif;
font-size: 93%; /*leave this...it sets the overall size of your fonts.*/
color: #000;
margin:auto;
padding:0;
text-align:center;
}

/* 
 
.max-width {
width:expression(document.body.clientWidth > 1052? "1050px": "auto" );
}

/*the font size is 100% of the body font setting So while it says 100%, this is actually 100% of 93%. No need to touch this if you dont want to */
table {
	font-size:100%; /*leave this font size, change the individual cells below, if the default size isnt to your liking*/
	color:inherit;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	text-align:left;
}

table.border{ /*this sets the border around your main content table*/
border:1px solid #000;
width:95%; /*this sets how wide your content table will be. Change to 100% for full screen width*/
}

/*class to set thinner horizontal rule. Change color if you like.*/
 
img {border:none;
}

a img {
	border: none;
	padding-right: 10px;
	padding-top: 3px;
}

 
ul {
	list-style-type: none;
	padding-left: 0;
	margin-left: 20px;
}
 
  
  
 ul.checkmarkbullets {
	list-style-image: url(/image-files/checkblue.png);
}

 
/* this area below is for your  Link-text and headings. You can change the font type and size, the color of each of them
as well as the a:hover, which is the text for a link, once the pointer passes over it*/

a { font-family: Arial, Verdana, sans-serif; 
font-size: 93%; color: #00008c; 
text-decoration: none;
}

a:hover { font-family: Arial, Verdana, sans-serif;
 font-size: 93%; 
 color: #820f36;
 text-decoration:underline;
 }

 
h1 { font-family: Arial, Verdana, sans-serif; font-size: 150%;  color: #000; text-align:left;}
h2 {
	font-family: Arial, Verdana, sans-serif;
	font-size: 116%;
	color: #000;
	text-align:left;
}
h3 { font-family: Arial, Verdana, sans-serif; font-size: 108%;  color: #000; text-align:left;}

 

td.headerbg {
	background-color:#fff;
	background-image: url(../image-files/mast-oval-bfo.gif);
	background-repeat: no-repeat;
	height: 120px;
}

td.spacerbg {
background-color:#fff;
width:18%;
}

 
td.contentbg {
	background-color:#fff;
	border-left: none;
border-right: none;
border-top: none;
	border-bottom: 1px solid  #cccccc;
	font-size: 95%;
	color:inherit;
	padding:10px;
	vertical-align:top;
}

td.rightbg {
font-family: Arial, Verdana, sans-serif;
font-size: 86%;
color:inherit;
background-color:#fff; 
padding:5px;
vertical-align:top;
}


td.leftbg {
font-size: 86%;
color:inherit;
margin-left: 5px;
background-color:#fff;
padding:5px;
vertical-align:top;
}



td.footerbg {background-color:#fff}


td.topnav{
background-color:#fff;
margin:0;
padding:0;
}

  

.centerit {margin:auto; text-align:center}
 
 
 
/* TOP LEVEL HOVER FONT COLOR */

 

#menurow #menunav li:hover ul, #menunav li li:hover ul, #menunav li li li:hover ul, #menunav li.IEMhover ul, #menunav li li.IEMhover ul, #menunav li li li.IEMhover ul
{ left: auto; }



  
/* this part below is for the color on the background, surrounding the buttons. Change the color, and the 
border, if you like. For the border, you can use solid, dashed, or dotted, for different border styles*/

#navigator {
	background-color: transparent;
	border:  transparent;
	width: auto;
	margin-top: auto;
	margin-left: 5px;
	margin-right: auto;
	padding: 2px;
	text-align: left;
}

/* want more space between your buttons? just increase the margins
from 1px. Font weight can be bold if you prefer.*/

.housebutton {

font-weight: bold;
text-align: left;
margin-bottom: 0px;
margin-top: 0px;
font-size:95%;
}


/* this part is for the colors of your buttons "at rest" so to speak.*/


.housebutton a {

padding: 5px;

text-decoration: none;

display: block;

color: #00008C; /*this is where you change the button font color*/

background-color: transparent;

border-top: none;

border-left: none;

border-bottom: none;

border-right: none;

}

/*this part is how the buttons look, once the pointer passes over them. */



.housebutton a:hover {

color: #333300; /*-----this is where you change the button font color, when the button is hovered over*/

background-color: #ccc;

border-top:  none;

border-left: none;

border-bottom:  none;

border-right: none;

}

  
/********************************/
 #nav {margin-top:0; padding-top:0; height:32px }

#navcontainer {
	height: 28px;
	background-color: transparent;
	background-image: url(../image-files/bg_nav_dots.gif);
	background-repeat: repeat-x;
	background-position: 0 0;
}


#nav ul { 
float: left; list-style: none; background: transparent;/* this sets the background color of the nav*/ 
width: 100%; padding: 0; margin: 0 0 0 0px; 
height: auto; display: inline; 
} 

#nav ul li { 
display: inline; margin: 0; padding: 0; 
} 

#nav ul li a {
	display: block;
	float: left;
	width: auto;
	margin: 0;
	padding: 0 8px;/*this is the gap between the text, and the border*/
	padding-left:16px;
	border-top: none;
	border-right: none;/*this gives a white border, change as required*/
	border-left: none; /*this gives a white border, change as required*/
	border-bottom: none;
	color: #000;
	font-weight:bold;
	font-size:11px;
	line-height:30px;
	font-family:Arial, Helvetica, sans-serif
	text-decoration: none;}
	
	
	
#nav ul li a:hover, #nav ul li a:active {
	color: #3b73b9;
	background-color: #ccc;
	font: bold;
	text-decoration:underline;
	display:block
} 

  
/* DIVS SECTION BELOW*/

 

div.65percent-left {
   background-color: #ffffff;
	margin: 15px 0px 10px 0px;
	padding: 15px;
   border: none;
   width:65%
}

  

/*** right column 65 percent of width box right ***/
div.box-right-65percent {
	margin: 5px 5px 5px 5px;
	padding: 10px;
	width: 65%;
	float: right;
}


/* the border of the image inside your half width textbox can be changed.
Its set to #5F8B8C at the moment. You can also change the solid
to either dashed or dotted if you want to*/

/*** Picture inside the text ***/
.img-float-left {
	float: left;
	padding: 2px;
	margin-right: 5px;
	border:none;
}
 
 
.backtotop-font-size {
	font-size:14px;
	font-weight:bold
}




 div.c17 {text-align: center}
 
 
 
 h2.c20 {
	margin-left:6px;
}
 
 
 h2.c10 {
	margin-left:10px;
	font-weight:bold
}

h2.c21 {margin-top:0}
 
 p.c7 {font-size:1.1em; line-height: 1.2;}
 h1.c6 {margin-top:10px}
 td.c5 {position: top right;}
 td.iphone { width:50%}
 div.c4 {FLOAT: right; margin-right:10px; margin-top:7px}
 a.c3 {color:#660000; float:left; margin-top:6px}
 input.c2 {height:1px}
 a.c1 {float:left}
 div.p21 {padding-top:0}
 .bottomlink {width:480px; margin:auto; text-align:center}