body{ margin:0 auto; width:900px; padding: 0; color: orange; font-size: x-small; background-color: #003550; height: auto; }
#content { color: white; background-color: #607e97; width:900px; height: auto; overflow: visible; }

#header{ height:80px; width:100%; text-align:left; vertical-align:middle; overflow: auto; }

.middle { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; margin-left: 200px; margin-right: 10px; width: 690px; float: inherit; min-height: 600px; }
.middle a:link { color: #ffd139; text-decoration: none; }
.middle a:visited { color: #ffd139; text-decoration: none; }
.middle a:hover { color: #ffd139; text-decoration: underline; }
.middle h3 { color: white; font-size: large; font-weight: bold; text-decoration: underline; padding-left: 15px; padding-right: 10px; margin: 0 0 1px; }			
.middle p{ color: #fff; text-align: justify; padding: 8px; }

.navbar { color: #255080; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; background-color: #fff; text-align: left; width: 190px; float: left; clear: left; }
.navbar a:link { color: #255080; font-size: small; text-decoration: none; }
.navbar a:visited { color: #255080; font-size: small; text-decoration: none; }
.navbar a:hover { color: #cf6400; font-size: small; text-decoration: underline; }
.navbar li { color: #255080; background-color: white; margin-left: 30px; list-style: none; }
.navbar ul { color: #255080; background-color: white; list-style: none; }
.navbar h3 { color: #255080; font-size: medium; font-weight: bold; background-color: #fff; margin-top: 12px; margin-right: 0; margin-bottom: 1px; padding-right: 10px; padding-left: 10px; }

.upcoming { color: #255080; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; background-color: #e1dd8a; text-align: center; top: 560px; width: 190px; float: left; clear: left; margin-top: 12px; padding-top: 12px; }
.upcoming p { color: #3d676f; font-size: small; text-align: center; }
.upcoming a:link { color: #255080; font-size: small; text-decoration: none; }
.upcoming a:visited { color: #255080; font-size: small; text-decoration: none; }
.upcoming a:hover { color: #cf6400; font-size: small; text-decoration: underline; }
.upcoming h3 { color: #3d676f; font-size: medium; font-weight: bold; background-color: #e1dd8a; padding-left: 15px; padding-right: 10px; margin: 0 0 1px; }

.footer { color: #ffa500; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; background-color: #006699; text-align: center; height: 40px; clear: both; }
.footer a{ color: #fff; text-decoration: underline; text-align: center; }
.footer p{ color: #fff; }

/* here's the box... the image is the upper-left corner */
#csc {
  background : #669900 url(/images/tl.gif) no-repeat;
  width : 20em;
  height : auto;
  position : relative;
  padding : 30px 40px;
}

/* these are the other three spans. classes were used to allow multiuse on a page */
.tr, .bl, .br { width : 25px; height : 26px;  /* corner images are 40x40 */
  float: right; display : block; margin-bottom : -1px;  /* this is for IE */
}

/* change position and image: top-right */
.tr {
  background : transparent url(/images/tr.gif) no-repeat;
  top : 0;
  right : 0;
}

/* change position and image: bottom-left */
.bl {
  background : transparent url(/images/bl.gif) no-repeat;
  bottom : 0;
  left : 0;
}

/* change position and image: bottom-right */
.br {
  background : transparent url(/images/br.gif) no-repeat;
  right : 0;
  bottom : 0;
}