body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.95em;
  background: #f7f0ff;
  margin: 10px 0; /* hack for IE */
  padding: 0; /* hack for IE */
  text-align: center; /* hack for IE */
}

#container {
  background: #fff;
  border: 1px solid #b4b;
  width:750px;
  margin: 0px auto;
  text-align: left; /* hack for IE */
  padding: 10px;
}

#leader_ad {
  margin: 0px auto;
  text-align: center;
}

#header {
  background: #f7f0ff;
  padding: 5px 10px;
  margin: 10px;
}

#title img {
  border: 0;
}

#subtitle {
  text-align: right;

}

#main {
  background: #fff;
  margin-top: 45px;
  margin-top: 5px;
}

#summary {
  background: #fff7e7;
  border: 1px solid #fa6;
  margin: 5px;
  padding: 1px 10px;
}

#footer {
  border: 1px solid #884;
  font-size: .8em;
  color: #b4b;
  text-align: center;
  margin: 10px;
  border: 1px solid #b4b;
  background: #f7f0ff;
  padding: 5px 10px;
}

/* column container */
.colmask {
  position:relative;  /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
  clear:both;
  float:left;
  width:100%;  /* width of whole page */
  overflow:hidden;  /* This chops off any overhanging divs */
  }

/* START OF HOLY GRAIL */

.holygrail {
  margin: 0 auto;
}
.holygrail .colmid {
  float:left;
  width:200%;
  margin-left:-120px;    /* width of right column (negative) */
  position:relative;
  right:100%;
}
.holygrail .colleft {
  float:left;
  width:100%;
  margin-left:-50%;
  position:relative;
  left:602px;          /* left column width + right column width */
}
.holygrail .col1wrap {
  float:left;
  width:50%;
  position:relative;
  right:487px;         /* width of left column */
  padding-bottom:10px;  /* centre column bottom padding. leave it out if it's zero */
}
.holygrail .col1 {     /* center */
  margin: 5px 125px 5px 492px;     /* center column side padding: */
                       /* right padding = right column width + centre column right padding width */
                       /* left padding = left column width + centre column left padding width */
  position:relative;
  left:200%;
  overflow:hidden;
  min-height: 350px;
}
.holygrail .col2 {     /* left */
  float:left;
  float:right;         /* this overrides the float:left above */
  width:482px;         /* width of left column content (left column width minus left and right padding) */
  position:relative;
  right:0;           /* width of the left-hand side padding on the left column */
}
.holygrail .col3 {     /* right */
  float:left;
  float:right;         /* this overrides the float:left above */
  width:110px;         /* width of right column content (right column width minus left and right padding) */
  margin-right:10px;   /* width of right column right-hand padding + left column left and right padding */
  position:relative;
  left:50%;
}

/* END OF HOLY GRAIL */

.title{
  text-align: left;
  margin-top: 0;
  padding: 0px 10px;
  background: #e4b4e4;
}

.page {
  text-align: left;
  padding: 2px 5px ;
  background: #e4b4e4;
}

.era {
  font-size: 1.4em;
  font-weight: bold;
  color: #849;
  margin-left: 10px;
  text-align: left;
  padding: 2px 5px ;
  background: #e4b4e4;
}

.era span {
  font-size: 11pt;
  font-weight: bold;
  color: #849;
  margin-top: 0;
  margin-left: 100px;
}

.era a {
  color: #849;
  font-weight: bold;
  text-decoration: none;
}

.era span a {
  font-weight: bold;
  text-decoration:underline;
}

.decade {
  float: left;
  padding: 0;
  margin: 5px 15px;
  clear: both;
}

.decade h3 {
  margin-bottom: 2px;
  clear: both;
}

.year {
  float: left;
  background-color:#fff;
  border: 2px solid #b4b;
  margin-bottom: 4px;
  padding: 0;
  clear: both;
  width: 720px;
}

.year h2 {
  letter-spacing: .2em;
  margin-left: 10px;
  font-size: 1.6em;
}

.thumbblock {
  width: 160px;
  margin: 0 auto;
  padding: 0;
  float: left;
  text-align: center;
  background: #f7f0ff;
  font-size: 80%;
  height: 160px;
  
}

.thumb {
  margin: 0 auto;
  padding: 0;
}

.item {
  margin: 10px;
  padding: 0;
}

.item_ad {
  width: 130px;
}

.item h3 {
  margin-top: 0;
  margin-bottom: 10px;
  padding: 5px 0;
}

.video {
  width: 285px;
  margin: 0;
}

.info {
  width: 18px;
  padding: 0 5px;
  margin: 0;
  border: 1px solid #96c;
}

.info img {
  border: 0;
  margin:0 auto;
  padding: 3px 0;
  height: 16px;
}

.prologue {
  padding: 5px 10px;
  margin: 5px 10px 10px;
  border: 1px dotted #b4b;
  font-size: 0.8em;
  background-color:#f7f0ff;
  color: #909;
  text-align:justify;
}

.prologue p {
  margin: 2px 0;
  padding: 2px 0;
}

.newstuff {
  padding: 0 10px;
  margin: 0 10px 10px;
  border: 1px dotted #b4b;
  font-size: 0.85em;
  color: #000;
}

.newstuff b {
  color: #d3d;
}

.newstuff h3 {
  padding: 0;
  margin: 0;
}

.newstuff a {
  text-decoration: none;
}
.newstuff a:hover {
  color: #c0c;
  text-decoration: none;
}

.menu {
  font-size:16px;
  padding: 5px 10px;
  margin: 0px 10px ;
  color: #fff;
  color: #eee;
  background-image: url(images/grad-1.png);
  clear: both;
}

.menu a {
  font-size:18px;
  color: #fefefe;
  text-decoration:none;
}

.menu a:hover {
  font-size:18px;
  color: #425;
  text-decoration:none;
}

.spacer {
  height: 15px;
}

.recent {
  font-size: .7em;
  vertical-align: super;
  font-weight: bold;
  color: #b4c;
}

.rssfeed {
  float: right;
  padding: 5px;
}

.rssfeed a img {
  border: none;
}

.bannerad {
  padding: 10px 0;
  text-align:center;
  margin: 5px auto;
}

/* STANDARD HTML TAGS */

h1 {
  color: #7d2d7d;
  font-size: 2em;
  margin: 5px 10px;
  padding: 0;
  letter-spacing: 3px;
  font-weight: bold;
  font-family: Courier New, Courier, monospace;
}

h2 {
  font-family: Courier New, Courier, monospace;
  font-size: 200%;
  padding: 0;
  margin: 0;
  color: #777;
  color: #7D2D7D;
}

h3 {
  font-size: 1.2em;
  color: #7d2d7d;
}

p {

}

ul {
  margin: 10px 0;
  padding: 0 0 0px 10px;
}

li {
  list-style-type: none;
}

a {
  color: #647;
}

a:hover {
  color: #7d2d7d;
}


/* ===========================
           THUMBNAILS
   =========================== */

.gallery {
  padding: 0;
  margin: 0;
  background-color: red;
}

.thumbnail {
  float: left;
  border: 2px solid #ccc;
  margin: 0 4px 5px 0;
  padding: 2px;
}

.thumbnail.current {
  border: 2px solid #e8e;
}

.clearboth { clear: both; }