/* this first section sets the background color and fonts - ie. the color & font for the area
   surrounding the OUTSIDE of the main table. This applies only to any text placed outside the
   main content table, Which is currently nothing.
   The max-width is for Firefox, to let it know how wide the page should be - this is the maximum
   width of the main content table.

   If set to 1050px, and viewed on a 1024x768 monitor, it will appear full width. But to someone 
   viewing on a 1200x1024 monitor, it will appear as 1050 wide, with the selected background either
   side, taking up the extra 150px (75px each side) */

body {
   max-width: 1050px;
   background-color:#000; 
   font-family: Arial, Verdana, sans-serif;
   font-size: 90%;
   color: #000;
   margin:auto;
   padding:0;
   text-align:center;
}


/* Define 3 classes of horizontal rule, as well as the default version Change the attributes to 
   get the look you want. The 3 classes are solid, dotted, and dashed. Add class="dashed" to your hr
   tag on an HTML page, to get the dashed version of the hr. Change the colors to suit. */

.solid {	
   border-top: 1px solid #000066;
   border-bottom: hidden;
   border-left: hidden; 
   border-right: hidden;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}

.dashed {
   border-bottom:1px dashed #000066;
   border-top:hidden;
   border-left:hidden;
   width: 100%;
   margin-left: auto;
   margin-right: auto;	
}

.dotted {
   border-bottom:1px dotted #000066;
   border-top:hidden;
   border-left:hidden;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}


/* This is a custom class for the bold tag. This can be altered, or removed
   completely to get the default bold */

b{
   font-family:  Arial, Verdana, sans-serif;
   font-size: 100%;
}


/* this area below is for the Link-text and headings. The font type and size and the colours
   can be changed, as well as the a:hover */

a { font-family: Arial, Verdana, sans-serif; 
   font-size: 100%; color: #000099; text-decoration: underline;
}

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


/* Headings */

h1 { font-family: Arial, Verdana, sans-serif; font-size: 150%;  color: #000000}
h2 { font-family: Arial, Verdana, sans-serif; font-size: 108%;  color: #000}
h3 { font-family: Arial, Verdana, sans-serif; font-size: 100%;  color: #3300ff}
h4 { font-family: Arial, Verdana, sans-serif; font-size: 108%;  color: #000}
h5 { font-family: Arial, Verdana, sans-serif; font-size: 108%;  color: #000}



/* Note that the width:expression part is for internet explorer, which doesnt understand max-width commands.
   So this works WITH the max-width at the top of this page. If you change that to say 1050px,
   both occurrences here should be 1050px as well. Otherwise Those using IE wont get the width constraint
   ...their page would expand indefinitely!
   Firefox will ignore this part, and IE will ignore the max-width part ... you need both of them.
   BUT DONT TOUCH THIS PART BELOW UNLESS YOU HAVE READ THE PDF THAT EXPLAINS HOW, AND YOU ARE SURE YOU UNDERSTAND IT!!*/

.main-table {
   width:expression(document.body.clientWidth > 1050? "1050px": "auto" );
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
}


/* As we are using a table based layout, all the text is within a table.
   So this is the area to change the size, color and font family. */

table {
   font-family: Arial, Verdana, sans-serif;
   font-size: 100%;
   color: #000;
   text-align:justify;
   line-height: 1.3;
   padding-top: 2px;
   padding-right: 2px;
   padding-bottom: 2px;
   padding-left: 2px;
}

/* Below, is the background colors for the table cells.
   Suppose you prefer to have a tiled image rather than a solid color?
   Replace the background-color:#fff;  with this, and upload your image to the graphics library ...
   background-image: 
   url('http://www.your-site.com/images/your-image.gif');
   background-repeat: repeat;
*/


td.headerbg {
   background-color:#fff;
}

td.spacerbg {
	 height: 1px;
   background-color:#000;
}

td.contentbg {
   font-size: 90%;
   background-color:#A6A6A6;
}

td.leftbg {
	 height: 100px;
	 width: 160px;
   font-size: 90%;
   color: #fff;
   background-color:#000;
}

td.leftfooterbg {
   font-size: 90%;
   color: #fff;
   background-color:#000; 
}

td.rightbg {
	 width: 120px;
   font-size: 75%;
   color: #fff;
   background-color:#000; 
}

td.rightbghome {
	 width: 10px;
   font-size: 75%;
   color: #fff;
   background-color:#000; 
}

td.rightfooterbg {
   font-size: 90%;
   color: #fff;
   background-color:#000; 
}

td.footerbg {
   font-size: 86%;
   color: #fff;
   background-color:#000;
}

/* This is for the heading background color for the H1, H2, and H3 tags */

.hbg{
   background-color:#000; 
   color:#fff;
   width: auto;
   z-axis: 1;
}

/* This is for a second heading background color for the H1, H2, and H3 tags */

.hbg2{
   background-color:#000; 
   width: auto;
   z-axis: 1;
}


/* information below is to remove the link styling for anchor links */

a.jumplink{
   text-decoration: none;
   font-size: 100%; 
   background-color: transparent;
   color: #000;
}

a:hover.jumplink  {
   text-decoration: none;
   font-size: 100%; 
   background-color: transparent;
   color: #000;
} 

a.BreadCrumblink{
   text-decoration: underline;
   font-size: 75%; 
   background-color: transparent;
   color: #000;
}

a:hover.BreadCrumblink  {
   text-decoration: underline;
   font-size: 75%; 
   background-color: #000;
   color: #fff;
} 

a.footerlink{
   text-decoration: underline;
   font-size: 100%; 
   background-color: transparent;
   color: #A6A6A6;
}

a:hover.footerlink  {
   text-decoration: underline;
   font-size: 100%; 
   background-color: #ABABAB;
   color: #000;
} 

a.RightCollink{
   text-decoration: none;
   font-size: 100%; 
   background-color: transparent;
   color: #fff;
}

a:hover.RightCollink  {
   text-decoration: none;
   font-size: 100%; 
   background-color: #fff;
   color: #000;
}