body {
max-width: 1050px;
min-width: 700px;
background-color: #ffc; 
background-image: url('../image-files/body-background.jpg');
background-repeat: repeat-x;
font-family: Arial, Verdana,  sans-serif;
font-size: 85%; /*sets the overall base size of your fonts.*/
color: #000000;
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 85%. 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: 10;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: left;
}

table.border{ /*this sets the border around your main content table*/
border: none;
width:95%; /*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(../image-files/bullet.gif) 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: 100%; color: #ff3333; 
text-decoration: underline;
}

a:visited { font-family: Arial, Verdana, sans-serif;
 font-size: 100%; 
 background-color: transparent;
 color: purple;
 }

a:hover { font-family: Arial, Verdana, sans-serif;
 font-size: 100%; 
 background-color: transparent;
 color: green;
 }

/* this is for your transparent clickable header gif */
#header-link{
text-align: center;
}

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

#header-link a:hover{
background-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:#666; 
color: #fff;
width: auto;
}


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


.header {
background-color: #fff;
background-image: url('../image-files/headernewnew.jpg');
background-position: top left;
background-repeat: no-repeat;
height: 186px;
margin: 0;
padding: 0;
}

.spacer {
background-color: #fff;
width: 20%;
}

.content {
background-color: #fff;
border-left: 1px solid #cccccc;
border-right: 1px solid  #cccccc;
border-top: none;
border-bottom: 1px solid  #cccccc;
font-size: 98%; 
color: inherit;
padding: 20px 10px 20px 10px;
width: 60%;
}

.right {
font-family: Arial, Verdana,  sans-serif;
font-size: 86%;
color: inherit;
background-color: #fff; 
padding: 5px;
width: 20%;
}

.left {
font-size: 86%;
color: inherit;
background-color: #fff;
padding: 15px; 
}

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

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



/* THIS SECTION IS FOR YOUR LEFT NAVIGATION LINKS*/

.navigator {                        /*the navigator is the area surrounding your link buttons. Basically a box that you can style*/
background-color: transparent;
border: transparent;
width: auto;
padding: 2px;
text-align: left;
}



.navlink a {
font-family: Arial, san-serif;
margin-top: 3px; /*sets the gap between your nav panel links. */
margin-right: 3px;
margin-bottom: 3px; /* if both top and bottom margins are set to 3px, then you have a total gap of 6 px between each link*/
margin-left: 3px;
}




/* this sets the font weight, which will be inherited by all of the different links states.
Main choices are bold, normal, and light. We don't
have to add this property/value to each individual link state*/

.navlink {
font-weight: bold;
}


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

.navlink a {
padding: 3px;
text-decoration: none;
display: block;
color: #407495; /*this is where you change the link font color*/
background-color: transparent;
border: transparent;
}

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

.navlink a:hover {
color: black; 
background-color: transparent;
}


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


.top-nav  {
text-align: center; 
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 85%;
position: absolute;
top: 164px;
left: 10px;
}


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

.top-nav  ul li {
border: none;
display: inline;
background-color: transparent;
padding: 4px;
margin: 5px;
}

.top-nav  a {
color: red;
text-decoration: none;
text-align: center;
}

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

.top-nav  a:hover {
color: blue;
background-color: transparent;
}


/*THIS IS THE CSS TO GET YOUR TOP NAVIGATION LINKS DISPLAYING
IN A VERTICAL FORMAT. THE CSS BELOW HAS BEEN COMMENTED OUT, SO
IT IS NOT WORKING. IF YOU WANT TO HAVE VERTICAL LINKS IN THE HEADER AREA,THEN
REMOVE THESE COMMENTS, AND DELETE THE CSS ABOVE. 
IF YOU WANT TO HAVE HORIZONTAL LINKS, THEN YOU CAN DELETE THIS CSS BELOW*/



/*
.top-nav  {
font-family:  Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 85%;
position: absolute;
top: 0px;
right: 0px;
}



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

.top-nav  ul li {
border: 1px solid #000;
background-color: #ccccff;
margin: 5px;
}

.top-nav  a {
color: black;
text-decoration: none;
text-align: right;
padding: 5px 20px;
display: block;
}

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

.top-nav  a:hover {
color: red;
background-color: #ccffcc;
}

*/




/*THIS CLASS IS FOR THE TOP DIV, THAT SERVES AS A REFERENCE POINT
TO POSITION THE TOP NAV LINKS. YOU WON'T NEED TO CHANGE ANYTHING HERE,
EXCEPT POSSIBLY THE HEIGHT */

div.top-nav-position{ 
width: 100%; 
background-color: transparent; 
height: 40px; 
position: relative;
top: 0; 
left: 0;
margin: 0; 
padding: 0; 
}




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

		
div.center-box {
   width: 60%;
   background-color: #ffffcc;
	 margin:5px auto;	
	 padding: 15px;
   border: 1px dotted #000066;
	}


div.full {
   background-color: #ccccff;
	 margin: 15px 10px 10px 10px;
	 padding: 15px;
   border: 1px solid #000;
	}
	
div.full2 {
   background-color: #ffffaa;
	 margin: 15px 0px 10px 0px;
	 padding: 15px;
   border: 1px solid #000066;
	}


 div.half-left {
  background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px solid #000066;
	padding: 10px;
	width: 50%;
	float: left;
	}
	

div.half-right {
  background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px solid #000066;
	padding: 10px;
	width: 50%;
	float: right;
}



/* the border of the image  can be changed.
Its set to #000066 at the moment. You can also change the solid
to either dashed or dotted if you want to*/

/*** 2 classes to float an image to the right or left ***/
.img-left {
	float: left;
	padding: 2px;
	margin-right: 5px;
	border: 2px solid #000066;
}
.img-right {
	float: right;
	padding: 2px;
	margin-left: 5px;
	border: 2px solid #000066;
}

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