body { 
  background-image: url(images/gradient_background1.jpg);
  background-repeat: repeat-x;
  text-align: center; /* to get centering of page on IE */
}

/* Fonts & Colors */
body {
  background-color: #A0CFEC;
  color: #4C4646;
  font-family: helvetica, sans-serif;
}

/* Because anchors have those built in colors */
a { color: #126b86; }

#header, #mainbody, #thumbs, .thumbs dd.image {
  background-color: #fff;
}
#mainbody {
  background-color: #fff;
}

#main {
  background-color: #6cbfd7;
}

.thumbs dt a {
  color: #4C4646;
}

.thumbpics dt, .thumbs dt {
  background-color: #ededed;
}

.content {
 /* background: #e5f3f7; */
  background-color: #fff;
  background-image: url(images/waterline.jpg);
  background-repeat: no-repeat;
  background-position: top center;
}

.thumbs dd {
  background-color: #fff;
}

/* End Fonts & Colors */

a:link  { text-decoration: none; }
a:visited  { text-decoration: none; }
a:hover  { text-decoration: underline; }
a:active  { text-decoration: underline; }

img { border: 0px; }

#page {
  position: relative;
  width: 1033px; /* For IE, fix later */
  margin: 0 auto;
  text-align: left;     /* Setup for IE centering */
  z-index: 1;
}

body>#page {
  width: 1032px; /* undo IE width */
}

#header {
  height: 158px; /* for IE, make room for the reflection */
  z-index: 2;
}

body>#page #header {
  height: 135px;  /* Back the main page up along side the fish reflection */
}

#hextend {
  height: 193px;
  width: 460px;
}

/* IE stuff */
#hextend {
  position: relative;
  top: -158px;
  float: right;
  z-index: 1;  /* To get it over the main body */
}

body>#page #hextend {
  position: absolute;
  top: 0;
  right: 0;
  width: 460px;
  margin-left: 0; /* undo the messed up IE need */
  z-index: 2;
}

#mainbody {
  position: relative;
  float: left;
  clear: both;
  width: 1033px;
}

body>#page #mainbody {width: 1032px; }

#maincontent {
  position: relative;
  width: 1012px;
  float: left;
  margin: 0 10px 10px 10px;
  z-index: 3;
}

#main {
  border: 1px solid #c3e9f4;
  padding-top: 2em;
}

#content {
  padding: 76.5px 6.5px 15px 6.5px;
  border: 4px double #c3e9f4;
  min-height: 100px;
}

.contentleft {
  float: left;
  width: 634px;
  padding: 0 12px 0 12px;
}

.content p, .contentright p, .contentleft p {
  text-align: justify;
  font-size: 13px;
}

.contentright {
  float: right;
  width: 300px;
  border: 1.5px solid #666;
  text-align: center;
  padding: 10px;
  margin: 30px 0 0 0;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
}

.contentright ul {
  text-align: justify;
}

.contentbottom {
  clear: both;
}

.content p.center {
  text-align: center;
}

.content h1 {
  font-size: 18px;
  font-weight: normal;
}

.content h2 {
  font-size: 15px;
  font-weight: normal;
}
.content h3 {
  font-size: 13px;
  font-weight: normal;
  font-style: italic;
}
.content h4 {
  font-size: 10px;
  font-style: italic;
}
.content ul, .content ol, .content dl {
  font-size: 13px;
}

.content ul {
  list-style-image: url('images/bullet.jpg');
}

.justify, ol.nclist {
  text-align: justify;
}

ol.nclist li {
  padding: 5px 15px 5px 0;
}
ol.nclist strong {
  padding: 0px 15px 5px 0;
}

ul.links {
  line-height: 150%;
  font-weight: bold;
}

.centuries dt {
  font-weight:bold;
}

.timeline dt {
  float: left;
  font-weight:bold;
}

.timeline dd {
  padding-bottom: 8px;
}

#sitenav {
  position: relative;
  background-color: white;
  background-image: url(images/sitenav-grad.jpg);
  background-repeat: repeat-x;
  clear: both;
  text-align: center;
  padding: 15px 20px 15px 20px;
  width: 1033px; /* For IE, fix next */
  z-index: 4;
}
body>#page #sitenav {
  width: 992px;  /* Set the real width */
}

#column1, #column2, #column3 {
  background-color: #fff;
  float: left;
  width: 300px;
  text-align: center;
  border: 1.5px solid #999;
  padding: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  min-height: 145px;
  height: 235px;
}

body>#page #column1, 
body>#page #column2, 
body>#page #column3 {
  height: 150px;
}

#column2 {
  margin: 0px 12px 0px 12px;
}

#sitenavbottom {
  clear: both;
  z-index: 0;
}

.thumbs {
  text-align: center; /* for margins on ie */
}

.thumbpics dl, .thumbs dl {
  width: 300px;
  font-size: 80%;
  margin: 0 auto -15px auto;
  text-align: left;
}
.thumbs dt {
  float: right;
  width: 240px;
  font-weight: bold;
}

.thumbpics dt {
  font-weight: bold;
}

.thumbpics dd.image {
  float: left;
  padding: 10px 0px 0px 0px;
  margin: 20px 0 0 20px;
}
body>#page .thumbpics dd.image {
  margin: 30px 0 0 20px;
}

.thumbs dd {
  margin: 0 0 15px 60px;
  padding: 1px;
}

.thumbs ul {
  margin: 0;
  padding: 0px;
  list-style-type: none;

}

.thumbs dd.image {
  float: left;
  margin: 0;
  padding: 0px;
}

.rightfloat {
  float: right;
}

.leftfloat {
  float: left;
  padding: 0 25px 10px 0;
}

#footer {
  position: relative;
  float: left;
  width: 1032px;
  padding: 2em 0;
  bottom: 0;
  z-index: 2;
}

.footer {
  text-align: center;
  color: #777;
  font: italic 10px helvetica, sans-serif;
  letter-spacing: .15em;
}