body {text-align:center;} /* {body margin-top:0px;} would move everything up to the top edge by overriding the default margin. But then there'd not be a place for a thin goolgl link-unit. */
/* NOTE: The divs align nicley in header because it's set as position relative, because the outer "parant" div must be set to position:relative; if you want the "children" divs to behave. */
#minmax {
       position:relative; /* This makes sure that any 'children' divs calculate their position relative to this div rather then somewhere else. */
       height:140px;
       background-color:white;
       color:#ffffff; /* Giving each div it's own color allows you to see them for diagnostic purposes. */
       border:16px solid #D2E4FC;
       border-top-image: url('coolbluebackground.jpg');
       border-bottom:16px solid #D2E4FC url('coolbluebackground.jpg');
       /* The following kick ass hack allows flexing to a minimum and maximum width. */
       width:expression(document.body.clientWidth < 905? "903px" : document.body.clientWidth > 1202? "1200px" : "auto");
       min-width: 840px;
       max-width: 1321px;
}
#tophdspacer {   /* This is the best and only way to vertically align middle all stuff in header using CSS. Perhaps just using a margin would do the same thing? */
       width:100%;
       height:25%;
       background-color:#ffffff; /* Giving each div it's own color allows you to see them for diagnostic purposes. */
}
#leftcontain {
       position:absolute;
       left:10px;
       top:1135px;
       height:120px;
       width:expression(document.body.clientWidth < 898? "896px" : document.body.clientWidth > 1202? "1200px" : "auto");
       min-width: 842px;
       max-width: 1200px;
       background-color:white; 
       float:left; 
}
#leftblock {
       float:left; 
       left:0px;
       top:0px;
       /* We need the left & right block because the image alone will not provide a place for the mid div and right div to calculate their position from properly. */
       /*   float:left; */
       width:37%;
       height:48px; /* I made this the same height as the logo image. */
       background-color:#ffffff; /* Giving each div it's own color allows you to see them for diagnostic purposes. */
}
img.a_logo_pic {
      margin-left:auto;
      margin-right:auto;
      vertical-align:text-top; /* This allows the caption text to butt up against the image. */
}
#cap {
       /*  float: left; */
       top: 0px;
       background-color:white; /* Giving each div it's own color allows you to see them for diagnostic purposes. */
       font-family:Arial,Helvetica,sans-serif; 
       font-size:93%;
       font-style:italic;
       color:steelblue;
}
#midblock{
       float:left;
       width:1px; /* By having this 1px div between the left & right div, it creats a solid block, so that the right div can be a % width rather then a px width, so it can stretch, plus you can center it by 'using margin-left:auto;' and 'margin-right:auto;'. This wouldn't work if this mid 1px div wasn't there. */
       height:133px;
       background-color:white; /* Giving each div it's own color allows you to see them for diagnostic purposes. */
       height:50%;
}
#rightblock{
       float:right; 
       left:0;
       top:0;
       padding-right:21px; 
       background-color:#ffffff;
       /* width:100%; */ /* Best not to give these divs a width so they will then stretch with any amount of content placed within. */
       width:55%;
}
/* Notice we set the margin-top value to 0px under #header h1. This is because some browsers such as firefox */
/* will push the header away from the top edge so we must add a 0px to override the default margin. */
/* We also added a top padding of 25px to the header div so we could push the title down to to the */
/* middle of the header, instead of having to use <br>'s in the html. */
/* With absolute positioning, terms like "within" don't exist when you don't put divs within divs in the body section. It just paints the div exactly where you tell it to regardless of the other stuff on the page. */
/* In order to get the divs to expand if user enlarges the text, read the following: */
/* Creating vertically-expanding boxes is easy in CSS, just declare a width in your */
/* div CSS but no height. The div will expand to as large as it needs to be for */
/* the content inside. It gets a little more complicated if you want to apply styling */ 
/* to those boxes with images, follow this link; http://css-tricks.com/expandable-css-note-box/ */ 
/* The following two will align the two side columns.*/
#left {
position:absolute;
padding-top:5px;
left:10px; 
top:28px;
margin-top:190px;
width:174px; 
background-color:#ffffff;
}
#leftlinkstitle {
padding-top:7px;
padding-bottom:7px;
left:0px; 
top:0px; 
width:174px; 
background-color:#D2E4FC;
font-family:arial,sans-serif,verdana;
font-weight:700;
color:darkblue;
text-align:center;
}
#leftlinksarea {
padding-top:5px;
padding-bottom:5px;
left:0px; 
top:0px; 
width:174px; 
text-align:left;
background-color:#f5f5f9;
}
#leftwhitespace {
left:0px; 
top:0px;
height:50px;
width:174px; 
background-color:#ffffff;
}
#leftskyadvert {
padding-top:5px;
padding-bottom:5px;
left:0px; 
top:0px; 
width:174px; 
background-color:#ffffff;
}
#right {
position:absolute;
padding-top:5px;
right:10px; 
top:28px;
margin-top:190px;
width:174px; 
background-color:white;
}
#rightlinkstitle {
padding-top:7px;
padding-bottom:7px;
left:0px; 
top:0px; 
width:174px; 
background-color:darkblue;
font-family:arial,sans-serif,verdana;
font-weight:700;
color:silver;
text-align:center;
}
#rightlinksarea {
padding-top:5px;
padding-bottom:5px;
left:0px; 
top:0px; 
width:174px; 
text-align:left;
background-image: url('coolbluebackground.jpg')
}
#rightwhitespace {
left:0px; 
top:0px;
height:50px;
width:174px; 
background-color:#ffffff;
}
#rightskyadvert {
padding-top:5px;
padding-bottom:5px;
left:0px; 
top:0px; 
width:174px; 
background-color:#ffffff;
}
#factbox {
   position:relative;
   float:left;
   width:300px;
   margin-top:7px;
   margin-right:15px;
   padding-top:5px;
   background-color:silver;
   font-family: arial,Lucida Sans Unicode,verdana,sans-serif;
   font-size: 97%;
   font-style:italic;
   text-align: left;
   color:#C13100;
}
#factboxtitle {
padding-top:7px;
padding-bottom:7px;
left:0px; 
top:0px; 
width:300px;
background-color:silver;
font-family:Lucida Sans Unicode,verdana,arial,sans-serif;
font-weight:700;
color:blue;
text-align:center;
}
#factboxarea {
padding-top:5px;
padding-bottom:5px;
left:0px; 
top:0px; 
width:300px;
background-color:#E0ECF8;
text-align:left;
}
#factbox p {
font-family: arial,Lucida Sans Unicode,verdana,sans-serif;
font-size: 97%;
font-style:italic;
text-align: left;
font-weight: 700;
color:#C13100;
}
ul.factsstyle {
list-style-type: none;
list-style-position: outside;
font-family:Arial,Helvetica,sans-serif; 
font-size:86%;
}
/* We set the value of the #links to left: 0px and the #sponsors column to right: 0px. When using absolute positioning  */
/* you must set these values like this so they will always ride up against their edges. */ 
/* Then we can use the left and right margins to push them away from the edge just a little. */ 
/* In this case 15px. Top margins where set to 135px to push them out of the header area and into the body where we want them. */ 


/* Next, we add the margins to the the content div to center it in the middle and style the <h5> heading to our liking: */





#content {
border-style: solid;
border-width: thick;
border-color: #C13100;
margin-top: 25px;
margin-left: 201px;
margin-right: 201px;
padding: 10px;
} 
#content h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 300%;
font-weight: 900;
color:#C13100;
text-align: center;
/*text-decoration: underline;*/
} 







#content h3 {
font-family: Times New Roman,Lucida Sans Unicode,verdana,arial,sans-serif;
font-size: 151%;
font-weight: 700;
color:#CC3366;
text-align: left;
/*text-decoration: underline;*/
} 
/*990000*/



#content h6 {
font-family: Lucida Sans Unicode,verdana,arial,sans-serif;
font-size: 77%;
font-weight: 600;
text-align: left;
color:#777777;
}

#content h5 {
font-family: arial,verdana,Lucida Sans Unicode,sans-serif;
font-size: 75%;
font-weight: 300;
text-align: left;
}


#content p {
font-family: Lucida Sans Unicode,verdana,arial,sans-serif;
font-size: 97%;
text-align: left;
}
#midlist p {
font-family: arial,Lucida Sans Unicode,verdana,sans-serif;
font-size: 97%;
font-style:italic;
text-align: left;
color:#C13100;
} 
img.imgright {
 float: right;
 padding: 15px;
 vertical-align:text-top;
}
/* There are many different ways to style this web page by adding picture(s), colors, custom graphics and by adding your logo to the header. Just experiment and have fun! */












ul.linkstyle {
list-style-type: none;
list-style-position: outside;
font-family:Arial,Helvetica,sans-serif; 
font-size:75%;
color:blue;
}