@charset "utf-8";
/* CSS Document */

body {
/* the background of the non-boxed areas of the site */
  background-color: #ffffff;
}

#wrapper {
/* An invisible box, which holds everything together.
   auto left-right margins centre the page, padding 
   brings the page down from the top. Margin creates 
   space at the bottom. */
   
  width: 970px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  margin-bottom: 20px;

}

#header {
/* Draws the header box */
  width: 930px;
  padding-top: 5px;
  padding-right:20px;
  padding-left: 20px;
  height: 30px;
  border: 0px solid #e7e7e7;
  background-color: #e7e7e7;
}

.jchead a {
/* The name at the top only                  E8E8E8 */
  font-family: ITC Avant Garde Gothic Demi, Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 100;  width: 270px;
  float: left;
  display: inline;
  background-color: #e7e7e7;
  text-decoration: none;
  outline-style: none;
  color: #3a3a3a;
  padding-top: 3px;
}

.jcoptions {
/* The four menu options */
  font-family: ITC Avant Garde Gothic Demi, Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 100;
  background-color: #e7e7e7;
  color: #595959;
  float: right;
  text-align: right;
  display: inline;
  text-decoration: none;
  outline-style: none;
}

.content-wrapper {
/* This setting creates another invisible box, 
   to make sure that the left and right hand
   boxes behave. John expanded this by two points 
   to make it line up */
   
  width: 970px;
  margin-top: 19px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

.left-menu {
/* Draw the left box          border: 1px solid #d7d7d7; */
  width: 310px;
  max-width: 310px !important;
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
  height: 580px;
  max-height: 600px !important;
  float: left;
  
  display: inline;
  background-color: #ffffff;
}

.left {
/* A 'span' for the text in the left box */
  font-family: ITC Avant Garde Gothic Demi, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 100;
  color: #595959;
}

.content {
/* Draw the right box      border: 1px solid #d7d7d7;   */
  width: 600px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  float: right;
  margin-bottom: 19px;

  background-color: #ffffff;
}

a.contentlink {
  color: #3a3a3a;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;  
  outline-style: none;
 < border-bottom: 1px dotted #999999;>
}

.footer {
/* Draws the footer box */
  width: 950px;
  margin: auto;
  height: 25px;
  border: 0px solid #d7d7d7;
font-family: ITC Avant Garde Gothic Demi, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 100;
  color: #ffffff;
  padding-top: 10px;
  padding-left: 20px;
  background-color: #e7e7e7;  
}


.clr {
/* used in line breaks - usage:
   <br class="clr" /> */
  clear: both;
  height: 1px;
}

.image-center {
/* if an image needs to be centred this helps - usage:
   <img src="xxx.jpg" class="image-center" />  */
  margin-left: image-center;
  margin-right: image-center;
}

table {
/* the four menu options are spaced out in a table */
 width: 600px;
 table-layout: auto;
}