body {
  margin:     0px;
  padding:    0px;
  background: #dc9;
}

h1 {
  border-bottom: solid 4px #ccc;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
h2 {
  margin:0;
  padding: 5px;
  background-color: #eee;
  border-bottom: solid 2px #ccc;
}
h3 {
  margin:0;
  padding: 70px;
  background-color: yellow;
  border-bottom: solid 2px #ccc;
}

/* Paragraphs are separated by 10px, and have no margin at the top. */
p, ul, ol { 
  margin-top:    0px;
  margin-bottom: 10px;
}

ul {
  padding: 0;
  margin: 0;
  list-style: bullet;
}

li {
  position: relative;  
}

img { 
  margin:       0px;
  padding:      0px;
  border-style: none;
}

/* Most of the text is in Georgia font. The exception are the titles,
   which are in Helvetica font. */
body, p, ul, ol, li    { font-family: georgia, times, sans-serif;   }
h1, h2, h3, h4, h5, h6 { font-family: helvetica, arial, sans-serif; }  

/* Here is where we set the font sizes of the text and headers. */
h1                                  { font-size: 16px; }
body, p, ul, ol, h2, h3, h4, h5, h6 { font-size: 14px; }

/* The headers are all bold, and we need to add some extra vertical 
   spacing as well. */
h1, h2, h3, h4, h5, h6 { 
  font-weight:   bold;
  margin-top:    16px;  
  margin-bottom: 2px;
}

/* Here is where we specify what the links look like. The links are
   not underlined. */
a {  
  font-weight:     bold;
  text-decoration: none;
}

a:visited { color:           #4488CC;   }
a:link    { color:           #0066FF;   }
a:active  { color:           #FF6633;   }
a:hover   { text-decoration: underline; }

/* This is a special style for info that goes right under the title. */
h1.subtitle { 
  margin-top:     0px;
  font-size:      24px;
  font-weight:    bold;
  text-transform: uppercase;
}

p.subtitle { 
  font-weight:    bold;
  font-family:    helvetica, arial, sans-serif;
  text-transform: uppercase;
}

/* this is used for emails */
span.email {
  font-family: courier;
  font-size: 95%;
}

/* This specifies position of the entire page */
#page {
  background: url('images/shade.gif') repeat-y center;
  background-color: #fff;
  width: 742px;
  padding: 0px;
  margin: 0px auto;
  margin-top: 11px;
}

/* This specifies the dimensions of the webpage title (header). */
#header { 
  width:       720px;
/*  margin-top:  10px;*/
  margin-right: 11px;
  margin-left: 11px;
  margin-bottom: 0px;
}

/* This specifies the dimensions of the middle part of the webpage. */
#middle {
  background: #fff;
  width:          720px;
  margin-top:     4px;
  margin-left:    11px;
  margin-right:   11px;
  vertical-align: top;
  text-align:     left;
}

/* This specifies the dimensions of the main webpage content area. */
#content { 
  padding-right:  16px;
  padding-left:   16px;
  vertical-align: top;
  width:          auto;
}

/* This is a special style for the event dates. */
#content p.date { 
  color:         #993333;
  font-family:   Arial, Helvetica, sans-serif;
  margin-bottom: 2px;
  font-size:     12px;
  font-weight:   bold;
}

/* Display of lists in the content section. */
#content ul { padding-left: 20px; }
#content ol { padding-left: 20px; }
#content li { margin-top: 6px; }

/* Here we specify what the menu on the left-hand side of the webpage 
  looks like. */
#leftsidebar {
  width:          122px;
  vertical-align: top;
  padding-top:    8px;
  padding-right:  12px;
  padding-left:   4px;
}

/* The links in the left-hand menu are black and uppercase. */
#leftsidebar a { 
  display:         block;
  font-family:     helvetica, arial, sans-serif;
  color:           #000000;
  text-transform:  uppercase;
  margin-bottom:   10px;
  font-size:       12px;
  line-height:     12px;
}

#leftsidebar a:hover { 
  text-decoration: underline;
  color:           #0066FF;
}

#leftsidebar a:active { 
  text-decoration: underline;
  color:           #FF6633; 
}

/* This is the dotted, vertical line. */
#leftrule { 
  background-image:    url(images/dotted-line.gif);
  background-repeat:   repeat-y;
  background-position: top right;
  width:               9px;
  padding:             0px;
  margin:              0px;
}

/* This is where we specify the dimensions of the info on the 
   right-hand side of the webpage. */
#rightsidebar { 
  vertical-align: top;
  width:          200px;
}

/* The text on the right-hand side is smaller. */
#rightsidebar p  { font-size:   12px;   }
#rightsidebar ul { font-size:   12px;   }
#rightsidebar a  { font-weight: normal; }
/* The newsletter signup form doesn't know about this. Specify it here. */
#rightsidebar form { font-size: 12px;   }
#rightsidebar input{ font-size: 10px;   }

#rightsidebar h1 { 
  margin-top:  12px;  
  font-size:   14px;
  font-weight: normal;
}

/* Display of lists on right-hand side. */
#rightsidebar ul { padding-left: 12px; }
#rightsidebar li { margin-top:   4px;  }

/* Here we specify what the footer at the bottom of the webpage looks 
   like. */
#footer { 
  width:         720px;
  margin-top:    12px;
  margin-right:  11px;
  margin-bottom: 0px;
  margin-left:   11px;
  text-align:    center;
}
#footer p { 
  font-size:     12px;
  font-weight:   normal;
}

#footer img {
  border-bottom: 2px solid #000000;
  margin-bottom: 2px;
}

/* these two divs give the bottom and top rounded corners */
#pagecapheader {
  width: 742px;
  height: 11px;
  background: url('images/shadetop.gif') no-repeat bottom center;
  margin: 0px auto;
  margin-top: 10px;
  margin-bottom: -11px;
}
#pagecapfooter {
  width: 742px;
  height: 11px;
  background: url('images/shadebottom.gif') no-repeat bottom center;
  margin: 0px auto;
  margin-top: -10px;
  margin-bottom: 10px;
}