/*first container holds everything*/
div#container{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 760px;
background: #fff;
background-image: url("images/leftside.gif");
background-repeat: repeat-y;
}


/*container2 has everything except container.  This container has the blue stripe that runs the right side.  Both of them where needed*/
 div#container2
{
background-image: url("images/rightside.gif");
background-repeat: repeat-y;
background-position: right;
width: 760px;
}



/*floats the kenosha links to the left*/
div#kenosha{
float: left;
width: 145px;
color: #fff;
text-align: center;
margin-bottom: 5px;
}

div#kenosha a{
font-size: 80%;
text-align: center;
}

/*floats the bodycontent next to the kenosha div and gives it a 12px left and rigth margin*/
div#bodycontent{
width: 400px;
float: left;
margin-left: 10px;
line-height: 110%;
margin-bottom: 25px;

}

div#bodycontent h1{
font-size: 1.2em;
color: #036;
margin: 0;
padding-top: 1em;
font-weight: bold;
text-align: center;
}

div#bodycontent img{
margin: 10px 50px;
}

/*floats the sponsors to the right*/
div#sponsors{
width:180px;
float:right;
text-align: center;
clear: right;
}

div#sponsors img{
margin: 25px 0;
border: dotted 2px
}

/*this will help clear the div containers so they expand the whole page*/
div#footer{
clear: both;
text-align: center;
width: 760px;
color: gray;
font-style: italic;
background: #dddddd;
}

div#footer p{
font-size: 85%;
}