/* Default values of elements */
  body, html { 
    /*font: medium/1.5em Verdana, Arial, sans-serif;*/
    font-size: 10pt; 
    font-family: Arial, Helvetica, sans-serif; 
    margin: 0; padding: 0; 
  }
  table { 
    width: 100%; 
    margin: 0; 
    border: 0; 
    border-spacing: 0;
    padding: 0; 
    text-align: left; 
    vertical-align: top; /* Works for Firefox, Not for IE */
  }
  td {  /* Without this, FireFox ignores the body setting in tables */ 
    font-size: 10pt; 
    font-family: Arial, Helvetica, sans-serif; 
    margin: 0; 
    border: 0; 
    vertical-align: top; 
  }
  img { 
    border: 0; 
  }
  h1 { 
    text-align: center; 
    font-size: 16pt; 
    font-weight: bold; 
    font-family: "Century Gothic", Arial, Helvetica, sans-serif;
    color: rgb(80,0,0);
  }
  h2 { 
    text-align: left; 
    font-size: 16px; 
    font-weight: bold; 
    font-family: "Century Gothic", Arial, Helvetica, sans-serif; 
    color: rgb(80,0,0);
  }
  h3
  { 
    text-align: left; 
    font-size: 14px; 
    font-weight: bold; 
    font-family: "Century Gothic", Arial, Helvetica, sans-serif; 
    color: rgb(80,0,0);
  }
  li {
    margin-bottom: .5em 
  }
  dd {
    margin-bottom: .5em;
  }
  p.sig { 
    margin: 0 0 0 60%; 
  }
  p.rev { 
    font-size: small; 
    font-style: italic; 
  }

  /* Page Header */
    #header { 
      font-family: "Century Gothic", Arial, Helvetica, sans-serif;
      width: 100%;
      margin: 0; 
      padding: 0;
      text-align: left; 
      vertical-align: bottom;
      border-bottom: 2px solid black
    }

  /* Logo */
    #logo {
      font-size: 24px;
      width: 180px;
      line-height: normal;
      padding-top: 0;
      padding-left: 10px;
      padding-bottom: 5px;
      padding-right: 10px;
      border-right: 2px solid black;
      background-color: #E0E0E0;
      color: rgb(0,0,255); 
      text-align: center;
    }
    #logo a:link, #logo a:visited, #logo a:active { 
      text-decoration: none; 
      color: rgb(0,0,255); 
    }

  /* Main Navigation */
  #menu-button {
    position: absolute;
    right: 0px;
    top: 4px;
    cursor: pointer;
    cursor: hand;
  }
  #topnav {
      margin: 0;
      padding: 0;
    }
    #topnav li {
      font-family: "Century Gothic", Arial, Helvetica, sans-serif;
      font-size: 16px; 
      font-weight: bold; 
      color: rgb(80,0,0); 
      background-color: #E0E0E0;
      border-color: black;
      border-style: solid;
      list-style: none;
      text-align: center;
    }
    #topnav a {
      display: block;
      padding: 0 .5em;
      text-decoration: none;
      color: rgb(80,0,0);
    }
    #topnav a:hover { 
      color: rgb(0,0,255); 
    }

    @media screen and (max-width: 600px) {
      #topnav {
        position: absolute;
        right: 0;
        top: 40px;
        display: none;
      }
      #topnav li {
        margin: 0;
        border-width: 1px;
      }
      #topnav a {
        padding-left: 4em;
        padding-right: 4em;
      }
      #menu-button img {
        display: block;
      }
    }

    @media screen and (min-width: 601px) {
      #topnav {
        position: absolute;
        left: 220px;
        top: 18px;
        display: block;
      }
      #topnav li {
        margin: 0;
        float: left;
        border-width: 1px 1px 0 1px;
      }
      #topnav li.active {
        background-color: white;
        padding: 0 .5em;
        border-width: 2px;
        border-bottom-color: white;
        position: relative;
        top: -1px;
      }
      #menu-button img {
        display: none;
      }
    }
    /* Chrome only hack */
    @media screen and (min-width: 601px) and (-webkit-min-device-pixel-ratio: 0) {
      #topnav {
        top: 19px;
      }
    }

/* Page Footer */
  #footer { 
    font-size: 8pt; 
    font-family: Verdana, Arial, Helvetica, Geneva, Sans-serif; 
    font-style: italic; 
    width: 100%;
    margin: 0;
    border-top: 2px solid black;
    text-align: center; 
    color: rgb(153, 0, 0); 
    clear: both;
  }

/* Page Layout */
  /* Single column layout with 2% margins for mobile.
     Adjusted upward for larger screens. */
  #content {
    margin: 0 2%;
    padding: 0;
  }

  /* Two column layout */
  #two-columns {
    margin: 0;
    padding: 0;
  }
  #two-columns .column {
    float: left;
    width: 46%;
    margin: 2%;
  }
  
  /* Three column layout - left fixed, middle and right responsive */
  #three-columns {
    margin: 0;
    padding: 0;
  }
  #three-columns .fixed-left-column {
    float: left;
    /* TODO: Figure out why this is needed and eliminate */
    margin-top: -14px;
    width: 133px;
  }
  #three-columns .middle-and-right {
    margin-left: 133px;
  }
  #three-columns .middle-column {
    padding-left: 2%;
    padding-right: 2%;
  }

  #three-columns .right-column {
    width: 96%;
    margin: 0 2%;
  }
  

  @media screen and (min-width: 601px) {
    #content {
      margin: 0 10%;
    }
    #three-columns .fixed-left-column {
      margin-top: 0; 
      width: 200px;
    }
    #three-columns .middle-and-right {
      margin-left: 200px;
    }
    #three-columns .middle-column {
      float: left;
      width: 66%;
    }
    #three-columns .right-column {
      float: left;
      width: 30%;
      margin: 0;
    }
  }

/* Style-based content layout */
div.title {
  text-align: center;
}

div.contents div div { 
  margin-left: 20px; 
}
div.contents div div div { 
  margin-left: 40px; 
}
div.contents div div div div { 
  margin-left: 60px; 
}

div.floatnone { 
  text-align: center; 
}
div.floatleft { 
  text-align: center; 
  float: left; 
}
div.floatright { 
  text-align: center; 
  float: right; 
}

div.indent { 
  margin-left: 10%; 
  margin-right: 10%; 
}
div.sidebar 
{
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 6px; 
  margin-bottom: 6px; 
  padding: 0 10px 5px 10px; 
  background: #E0E0E0; 
  border: 1px solid black;
}
div.rightbar { 
  width: 250px; 
  margin-top: 20px; 
  margin-bottom: 6px; 
  padding-left: 1em; 
  padding-right: 1em; 
  background: #E0E0E0; 
  border: 1px solid black; 
  float: right; 
}

/* Images */
img.floatleft { 
  float: left;
  margin-right: 1em;
  border:0 
}
img.floatright { 
  float: right; 
  margin-left: 1em;
  border:0 
}

/* Code Layout */
pre.code  { 
  font-size: 9pt; 
  font-family: "Courier New", Courier, Monaco, monospace; 
  margin-left: 5%;
  text-align: left; 
}
span.c, code {
  font-size: 9pt; 
  font-family: "Courier New", Courier, Monaco, monospace;
}
span.strike {
  font-weight: bold;
  text-decoration: line-through;
}
div.figure code {
  border: 2px solid black; 
  padding: .5em, 1em; 
}
div.figure pre.code  
{
  margin-left: 5%;
  margin-right: 5%;
  border: 2px solid black; 
  padding: .5em 1em; 
}

/* Page, article and section titles */
.title { 
  font-size: 16px; 
  font-weight: bold; 
  font-family: Arial, Helvetica, sans-serif; 
}
.author, .date { 
  text-align: center; 
  font-size: 9pt; 
  font-weight: normal; 
  font-family: Arial, Helvetica, sans-serif; 
}

/* Article Lists */
.article-list a:link { 
  font-weight: bold; 
}
.article-list a:visited { 
  font-weight: bold; 
}
.article-list a:active { 
  font-weight: bold; 
}

/* Event Lists */
.event-list a:link { 
  font-weight: bold; 
}
.event-list a:visited { 
  font-weight: bold; 
}
.event-list a:active { 
  font-weight: bold; 
}

p.comment { 
  margin-left: 2em; 
  margin-right: 2em; 
  font-style: italic; 
}
body p.comment { 
  text-align: center; 
}
p.note { 
  margin-left: 2em; 
  margin-right: 2em; 
}
p.haiku { 
  text-align: center; 
  font-style: italic; 
}
.notice { 
  margin-left: 2em;
  margin-right: 2em; 
  text-align: center; 
  font-style: italic; 
  font-weight: bold; 
  font-size: large;
}

div.pic { 
    /*margin: 0 auto 2em auto;*/
    padding: 0;
    float: left;
    width: 100%; 
}
div.pic hr {
  display: none;
}
div.pic img
{
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto 2em;
}

@media screen and (min-width: 601px) {
  div.pic hr {
    display: block;
  }
  div.odd img {
      float: left;
      margin: 0 1em 2em 0;
  }
  div.even img {
      float: right;
      margin: 0 0 2em 1em;
  }
}

/* News Elements */
.news { 
  border: 0; 
  padding: 0 10px; 
  background: #E0E0E0; 
  font-size: 9pt; 
  font-family: Verdana, Arial, Helvetica, Geneva, Sans-serif; 
  font-style: normal; 
  font-weight: normal;
}
.news p { 
  margin: 0; 
  padding: 5px 0; 
}
.news p.newsitem { 
  border-top: 1px solid #999; 
}
.news p.headline {
  font-size: 10pt; 
  font-weight: bold; 
}

/* Lists of Links */
.link-list {
  border: 0; 
  padding: 0 5px; 
  background: #E0E0E0; 
  font-size: 9pt; 
  font-family: Verdana, Arial, Helvetica, Geneva, Sans-serif; 
  font-style: normal; 
  font-weight: bold;
}
.link-list p {
  margin: 0;
  padding: 0;
}
p.link-heading {
  font-size: 10pt;
  border-bottom: 1px solid #999;
}