body {
max-width:1050px;
min-width:700px;
background-color:#000099; 
background-image:;
background-repeat: ;
font-family: 'trebuchet ms', Arial, Verdana,  sans-serif;
font-size: 100%; /*sets the overall base size of your fonts.*/
color: #000099;
margin:auto;
padding:0;
text-align:center;
}


.max-width {
width:expression(document.body.clientWidth < 702? "700px" :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 whatever we set in the body selector. By default, that is 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: 6px solid #990000;
width:98.5%; /*this sets how wide your content table will be. Change to 100% for full screen width*/
}



/* this is a custom class for using graphics as bullets. Replace the image with your own. 
If you prefer to have stock standard bullets instead, simply delete  The 2 classes below,
and your bullets will show as normal. In that case, of course you need to remove the class name from the lists on
your actual html page*/
 
ul {
list-style-type: none;
padding-left: 0;
margin-left: 30px;
}
 
li.custom {
background: url <img src="../image-files/bullet.gif" width="15" height="15" title="bullet" alt="bullet"/>left top no-repeat; 
padding-left: 20px;
margin-bottom: 10px;
}

 
/* 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: 90%; color: #000099; 
text-decoration: underline;
}

a:hover { font-family: Arial, Verdana, sans-serif;
 font-size: 90%; 
 background-color: #000066;
 color: #fff;
 }

/* this is for your transparent clickable header gif,that is around 700 px wide. Set the height as a percentage of the header. 
Then, link the gif to your home page, or wherever else on your site you want to link that header to.  */
#header-link{
text-align: center;
}

#header-link a{
text-decoration: none;
}

#header-link a:hover{
background-color: transparent;
color: transparent;
}


/*these are your headings. Note that if you use the hbg class in your headings, then these styles may not apply
to those H tags */
h1 { font-family: Arial, Verdana, sans-serif; font-size: 150%;  color: #000; text-align:center; margin-top:0;}
h2 { font-family: Arial, Verdana, sans-serif; font-size: 116%;  color: #000; text-align:center; margin-top:0;}
h3 { font-family: Arial, Verdana, sans-serif; font-size: 108%;  color: #000; text-align:center; margin-top:0; margin-bottom: 2px;}

/* This is for the heading background color....your H1, H2, and H3 tags*/
.hbg{
background-color:#ffff33; 
color:#cc0000;
width: auto;
}


/* Below, is the background colors and styling for your table cells.*/

.header {
background-color: transparent;
background-image: url('../image-files/MSLH-Site-Header-logo-V5-1024x260.gif');
background-position: left;
background-repeat: no-repeat;
border-bottom: 8px solid #990000;
height: 260px;
margin: 0;
padding: 0;
text-align: left;
}

td.spacer {
background-color:#000099;
width:5%;
}

td.content {
background-color:#fff;
border-left: 5px solid #990000;
border-right: 5px solid #990000;
border-bottom: 8px solid #990000;
font-size: 93%; 
color:inherit;
padding:10px;
width:60%;
}

td.right {
font-family: Arial, Verdana,  sans-serif;
font-size: 93%;
color:black;
background-color:#000099; 
padding:10px;
width:30%;

}

td.left {
font-size: 86%;
color: yellow;
margin-left: 0px;
background-color:#000099;
padding:10px; 
}

td.footer {
font-size: 86%;
color:inherit;
background-color:#fff;
padding:5px; 
}

td.bottom-strip {
background-color: #ccccff;
font-size: 86%;
color: #000;
text-align: center;
}



/* THIS SECTION IS FOR YOUR LEFT NAVIGATION LINKS*/
.navlink {
font-weight: bold;
font-family:  Verdana, sans-serif;
line-height: 90%;
margin-top:5px; /*sets the gap between your nav panel links. This needs to be the same value as the margin below*/
}

.navlink a {
font-family:  Verdana, sans-serif;
line-height: 90%;
margin-top:5px; /*sets the gap between your nav panel links. This needs to be the same value as the margin above*/
}

.navlink a:hover {
font-family:  Verdana, sans-serif;
line-height: 90%;
}


/* 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*/


.navlink {
font-weight: bold;
text-align: center;
margin-bottom:0px;
margin-top: 0px;

}


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

.navlink a {
padding: 10px;  /* This padding is for the space on top and below the link.*/
text-decoration: none;
display: block;
color: #ffff00; /*this is where you change the button font color*/
border: 1px solid;

}

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

.navlink a:hover {
color: #333300; /*-----this is where you change the button font color, when the button is hovered over*/
background-color: #ccc;
}

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

/********************************
THIS NEXT SECTION IS FOR YOUR TOP HORIZONTAL NAVIGATION LINKS */



.top-nav {
font-family:  Verdana, Arial, sans-serif;
}


.top-nav  ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.top-nav  ul li {
border: transparent;
display: inline;
background-color: white;
text-align: center;
padding: 5px;

}

.top-nav  a:link {
color: blue;
text-decoration: none;
text-align: center;
padding: 2px 4px;
}

.top-nav  a:visited {
color: purple;
text-decoration: none;
}

.top-nav  a:hover {
color: #333;
background-color: transparent;
text-decoration: none;
}

.header .top-nav  {
font-size: 85%;
position: absolute;
top: 130px;
left: 50px;
}

.header .top-nav  ul { 
margin: 0;
}

div.top-nav-position{ 
width: 100%; 
background-color: transparent; 
height: 10%; 
position: relative;
top:0; left:0;
margin:0; 
padding:0; 
text-align: center;
}


/* THIS SECTION IS FOR STYLING ALL THE BOXES. */

div.full-width-box {
   background-color: #ccccff;
	margin: 15px 10px 10px 10px;
	padding: 15px;
   border: 1px solid #000;
	}
	
div.full-width-box2 {
 border: 1px solid #000066;
   background-color: #ffffaa;
	margin: 15px 0px 10px 0px;
	padding: 15px;
  
	}
		
div.center-box {
   width: 60%;
   background-color: #ffffcc;
	margin-left:auto;
	margin-right:auto;
	padding: 15px;
   border: 1px solid #000066;
	}


	
/*** right column Half of width box left ***/
div.half-width-box-left {
   background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px solid #000066;
	padding: 10px;
	width: 50%;
	float: left;
	
}
/*** right column Half of width box right ***/
div.half-width-box-right {
   background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px solid #000066;
	padding: 10px;
	width: 50%;
	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: 2px solid #000066;
}
.img-float-right {
	float: right;
	padding: 2px;
	margin-left: 5px;
	border: 2px solid #000066;
}

/*** Clearing of a float ***/
div.clear {
	clear: both;
	width: 100%;
	height: 1px;
}