html,body {
  height: 96%; /* Stay a bit off top and bottom and stop a scrollbar in IE. */
}
body {
  margin-top: 2%; /* get off that top! */
  margin-bottom: 2%; /* And stay off the bottom as well! */
  background-color: #FFFFFF; /* Fresh and white! */
  font-family: Georgia, Geneva, "Trebuchet MS", Monaco, Calibri, sans-serif; /* Monaco = iMac, Calibri = Windows Vista */
  font-size: small/100%; /* This makes sure IE users can increase fontsize with their browser.  */
  color: #6d6d6d; /* A nice grey color. */
} 

/* ************************* END GENERAL STYLING ************************* */


/* *************************  START DIV STYLING  ************************* */

#container {
  width: 100%; /*880px;*/ /*680px Edit this to change the width of your site. Set it to 100% for some fun :-) */
  height: 100%;
  margin-left: auto;  /* This keeps the template centered. */
  margin-right: auto; /* This keeps the template centered. */
  border: 1px solid #F4F4F4; /* Crazy about dotted and dashed borders! */
}
#header {
  /*width: auto; *//* Just as wide as the container, ofcourse. */
  /*height: auto; *//* No need to set height, just some padding around the headers is enough to get height. */
  text-align: right; /* The text in this header should align right in my humble opinion... */
  /*padding: 3% 4%; *//* padding top is 3% and padding right is 4%. This creates the height of the header. */
  padding: 10px 20px 0px 0px;
  background: url(diags.jpg) top left repeat-x; /* Couldn't resist. Used an image */
  /*border-bottom:1px solid #DD8200;*//*#DD8200*/
  padding-bottom: 10px;
}
  #header h1 { /* The first line of text in the header, the big orange one. */
    /*font-size: 150%;*/ /* Big font! 150% of the font-size of the body! */
    color: #DD8200; /* Orange color for textline one. */
    display: inline; /* This trick will display the both lines of text next to eachother instead of under eachother* */
    letter-spacing: 4px; /* A thick amount of spacing between the letters, to create a nice effect on the text. */
  }
  #header h2 {
    position: relative; /* All sizes, paddings and margins are measured relative to #header h1. */
    display: inline; /* The trick will only work if you add display: inline here as well, and add a <br /> between them in the HTML code. */
    vertical-align: center; /* Appear in the center of the #header. */
    font-size: 70%; /* 70% of the size of the font-size from the body. */
    font-weight: 100; /* a very sleek and lightweight font. 600 for big font. */
    text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
    color: #007CB0; /*0066CC;*/ /* #0 0ACF4 Ocean blue color... */
    letter-spacing: 1px; /* spread those letters over your screen a bit more */
    font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
  }
  
#core_container { /* <DIV #3> */
/* This div will hold all textual contents in the core of your page, hence core_container... */
  width: 100%; /* Just as wide as the #container, since it's still in there. */
  height: 500px;
  background-color: #FFFFFF; /* Good ol' white. */
}

#core_left { /* <DIV #4> */
  /*border:1px solid black;*/
  width: 150px;
  /*float: left; *//* Always stay on the left side of the #core_container. */
  /*padding: 12px; *//* 12px space inside this div before anything happens. */
    padding-top: 12px;
    padding-right:12px;
    /*_padding: 6px; *//* IE HACK. 6px space for IE, because of the boxmodel error. Remove this and check the page in IE... :( */
  /*height: auto; *//* Height is automaticlly calculated. No need to set it. */
  background-color: #FFFFFF;
}
  #core_left img { 
    border: 0; /* The images on the left may not have a border. */
  }
  #core_left p {
    font-size: 70%; /* The fontsize is 70% of the fontsize of the body tag. */
  }
  #core_left a, #core_left a:link, #core_left a:visited {
    color: #000000; /* All links, visited or not are black. */
    text-decoration: none; /* with no line under it. */
  }
  #core_left a:hover {
    color: #007CB0; /*0066CC;*/ /* Oceanblue linktext on hover. */
  }
  #core_left h3, #core_left h4 {
    position: relative; /* All sizes, paddings and margins are measured relative to #header h1. */
    display: inline; 
    vertical-align: center; /* Appear in the center of the #header. */
    font-size: 90%; /* 90% of the size of the font-size from the body. */
    font-weight: 500; /* a bolder font. 600 for even bolder, 100 for very sleek. */
    text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
    color: #007CB0; /*0066CC;*/ /* Ocean blue color... */
    letter-spacing: 1px; /* spread those letters over your screen a bit more */
    font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
  }
  #core_left li { /* The contents of core_left is presented in an unordered list. Here it is. */
    font-size: 10px; /* Fontsize and styling. */
    font-family: Verdana, "Trebuchet MS", sans-serif;
  }
  .litxt { /* This is the text in the unordered list within core_left, with 5% space on the left. */
    padding-bottom: 10px;
    width: 95%;
    padding-left: 5%;
  }
  #core_left ul { /* this is the ul styles for core_left. */
    list-style: none; /* No dot in the list please. */
    padding-left: 0px; /* Get yourself to the left of the page. */
    margin-left: 0; /* IE needs this to do the same as stated above... */
  }

/***********************
  Category Menu Styles
************************/

#categoryMenu {
  text-align: right;
  margin-top: 3px;
}
#categoryMenu ul {
  margin-left: 0;
  padding-left: 0;
  / *white-space: nowrap;* /
}

#categoryMenu li {
  display: inline;
  list-style-type: none;
}

#categoryMenu .selected {
  border-top: 1px dashed #DD8200;
}

#categoryMenu a { 
  padding: 3px 5px;
  font-size: 11px;
  font-family: Verdana, "Trebuchet MS", sans-serif;
  text-align: center;
}

#categoryMenu a:link, #categoryMenu a:visited {
  color: #007CB0;background-color: #FFFFFF;text-decoration: none;
}

#categoryMenu a:hover {
  color: #fff;background-color: #DD8200;text-decoration: none;
}

#categoryMenu a:active {
  color: #fff;background-color: #00ACF4;text-decoration: none;
}

/****************************
  Bread Crumbs
*****************************/
#breadCrumb {
  padding: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  
  font-family: Verdana, "Trebuchet MS", sans-serif;;
  font-size: 12px;
  font-weight: normal;
  color: #999999;
}

#breadCrumb ul {
  margin-left: 0;
  padding-left: 0;
  display: inline;
  border: none;
} 

#breadCrumb ul li {
  margin-left: 0;
  padding-left: 5px;
  border: none;
  list-style: none;
  display: inline;
}

#breadCrumb a:link {color: #999; text-decoration: none;}     
#breadCrumb a:visited {color: #999; text-decoration: none;}  
#breadCrumb a:active {color: #999; text-decoration: none;}
#breadCrumb a:hover {color: #DD8200; text-decoration: none;}


/* THIS NAVIGATIONBAR IS COURTESY OF MAXDESIGN > http://css.maxdesign.com.au/listamatic */

#navcontainer {
  /*border: 1px solid black;*/
  text-align: left;
  margin-top: 5px;
  margin-bottom: 0px;
}

#navlist {
  margin: 0;  
}

#navlist ul {
  margin-left: 0;
  padding-left: 0;
  /*white-space: nowrap;*/
}

#navlist li {
  /*border: 1px solid black;*/
  display: inline;
  list-style-type: none;
}
#current {
  border-bottom: 1px dashed #DD8200;
}
#navlist a { 
  /*padding: 3px 10px; */
  padding: 3px 5px;
  font-size: 11px;
  font-family: Verdana, "Trebuchet MS", sans-serif;
  text-align: center;
}

#navlist a:link, #navlist a:visited {
  color: #007CB0;
  background-color: #FFFFFF;
  text-decoration: none;
}

#navlist a:hover {
  color: #fff;
  background-color: #DD8200;
  text-decoration: none;
}

#navlist a:active {
  color: #fff;
  background-color: #007CB0; /*0066CC;*/
  text-decoration: none;
}

#navlistvert {
  margin: 0;
}

#navlistvert ul {
  margin-left: 0;
  padding-left: 0;  
}
  
#navlistvert li {
  padding-top:5px;
  list-style-type: none;
}

#navlistvert a { 
  /*padding: 3px 10px; */
  padding: 3px 5px;
  font-size: 11px;
  font-family: Verdana, "Trebuchet MS", sans-serif;
  text-align: center;
}

#navlistvert a:link, #navlistvert a:visited {
  color: #007CB0;
  background-color: #FFFFFF;
  text-decoration: none;
}

#navlistvert a:hover {
  color: #fff;
  background-color: #DD8200;
  text-decoration: none;
}

#navlistvert a:active {
  color: #fff;
  background-color: #007CB0; /*0066CC;*/
  text-decoration: none;
}

#navlistvert .selected {
  /*border-top: 1px dashed #DD8200;*/
  font-weight: bold;
}


/* sub nav container */
.subnavcontainer {
  /*border: 1px solid black;*/
  text-align: right;
  margin-top: 5px;
  margin-bottom: 5px;
  
  border-bottom: 1px solid black;
}

.subnavlist {
  margin: 0;
  font-size: 11px;
  font-family: Verdana, "Trebuchet MS", sans-serif;  
}

ul.subnavlist {
  margin-left: 0;
  padding-left: 0;
  /*white-space: nowrap;*/
}

.subnavlist li {
  /*border: 1px solid black;*/
  display: inline;
  list-style-type: none;
}

.subnavlist .selectIndiId {
  width: 50px;
  font-size:11px;
  font-family: Verdana, "Trebuchet MS", sans-serif;  
}

.subnavlist input {
  font-size:11px;
  font-family: Verdana, "Trebuchet MS", sans-serif;  
}

.subnavlist a {
  padding: 3px 5px;
  font-size: 11px;
  font-family: Verdana, "Trebuchet MS", sans-serif;
  text-align: center;
}

.subnavlist a:link, .subnavlist a:visited {
  color: #007CB0;
  text-decoration: none;
}

.subnavlist a:hover {
  color: #007CB0;
  text-decoration: none;
}

.subnavlist a:active {
  color: #007CB0;
  text-decoration: none;
}

/* sub nav vertical list */
.subnavverticalcontainer {
  /*border: 1px solid black;*/
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}

.subnavverticallist {
  display:inline;
  margin: 0;
  font-size: 11px;
  font-family: Verdana, "Trebuchet MS", sans-serif;  
}

.subnavverticallist .selectIndiId {
  width: 50px;
  font-size:11px;
  font-family: Verdana, "Trebuchet MS", sans-serif;  
}

.subnavverticallist input {
  font-size:11px;
  font-family: Verdana, "Trebuchet MS", sans-serif;  
}

.subnavverticallist select {
  font-size:11px;
  font-family: Verdana, "Trebuchet MS", sans-serif;  
}


#core_right {
  width:auto;
  margin: 0; /* No margins, no paddings. */
  padding: 0;/*12px;*/
  padding-bottom: 20px;
  background-color: #FFFFFF; /* Fresh white! */
}
  #core_right h5, #core_right h6 { /* The headers in #core_right */
    /*position: relative;*/ /* All sizes, paddings and margins are measured relative to #header h1. */
    vertical-align: center; /* Appear in the center of the #header. */
    /*font-size: 90%;*/ /* 90% of the size of the font-size from the body. */
    font-size: 110%;
    font-weight: 500; /* a bolder font. 600 for even bolder, 100 for very sleek. */
    text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
    color: #007CB0; /*0066CC;*/ /* Ocean blue color... */
    letter-spacing: 1px; /* spread those letters over your screen a bit more */
    font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
    
    /*border:1px solid black;*/
  }
  #core_right p, #core_right h5, #core_right h6  {
    padding-left: 5%; /* The headers and paragraphs in core_right should stay 5% off the edge of div #core_right. */
    
  }
  #core_right p { /* The paragraphs in #core_right should have this styling: */
    font-family: "Trebuchet MS", Verdana, sans-serif; /* Font... */
    font-size: 80%; /* 80% of the font-size from the body tag. */
    line-height: 20px; /* The whitespace between the lines. */
  }
  
.bottom_ul { /* The small list of links on the bottom of the page. */
  list-style: none; /* no dot next to the list. */
  padding-left: 20px; /* 20px of the leftside of #core_right. */
  width: 420px; /* Always be 420px wide, to get that cool hover effect. */
  height: 12px; /* 10px fontsize, 12px height. Seems enough. */
  margin: 0; /* No extra margins anywhere. It's tight enough */
}
  .bottom_ul li { /* The actual list on the bottom. */
    padding: 0px 10px; /* 0px space above, but 10px space on the right of this list. */
    background-color:#FFFFFF; /* Fresh white! */
  }
  .bottom_ul a { /* The links in the list stated above. */
    font-size: 70%; /* small fontsize. */
    display: block; /* Get that hover effect, display your links in a block with fixed height and width... */
    padding: 3px; /* 3px whitespace everywhere. */
    width: 420px; /* Hey, there's that 420px again! */
    color: #AAAAAA; /* Lightgrey fontcolor. */
    font-family: Verdana, "Trebuchet MS", sans-serif; /* Font. */
  }
  .bottom_ul a:hover { /* Mouseover that list and you'll see... */
    color: #007CB0; /*0066CC;*/ /* Oceanblue fontcolors. */
    width: 420px; /* Hey, there it is again! */
    background: #F8F8F8 url(../images/arrow_right.jpg) 98% 50% no-repeat; /* And an even lightergrey background! */
  }

#footer { /* The bottom, with the copyright notice. */
  clear: both; /* Appear UNDER core_right, not next to it. Not even with changed width on #container. */
  width: auto; /* 680px? Yep, the same width as #container. */
  height: 20px; /* Give it some height! */
  text-align: right; /* The text should appear on the rightside of the footer. */
  margin: 0;
}

  #footer p { /* The <p> within the footer is styled here. */
    text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
    background: #FFFFFF url(diags.jpg)  0% 30% repeat-x; /* Those cool diagonal lines in the back. */
    font-size: 60%; /* An even smaller font then the list we just did. */
    color: #000000; /* Ocean blue color... */
    letter-spacing: 1px; /* spread those letters over your screen a bit more */
    font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
  }
  #footer a { /* The <a href="... tags in the footer are styled here. */
    text-decoration: none; /* No lines under the text. */
    color: #000000; /* Black beauty. */
  }
  
.smallText {
  font-size: 9px;
}
.medText {
  font-size: 10px;
}
.largeText {
  font-size: 11px;
}




/* REVIEW CSS */
.separator {
  border-top: 1px solid #CFCFCF;
  margin-top: 2px;  
}

.sections {
  border-top: 1px dashed #CFCFCF;
  text-align: left;
  margin-top: 5px;
  padding-top: 5px;
}

.lightGreyBox {
  border: 1px solid #CFCFCF;
  padding:5px;
}

.viewMapButton {
  border:1px solid #CFCFCF;
  background-color: #FFE257;
  font-size: 10px;
  padding-left: 2px;
  padding-right:2px;
  font-family: monospace;
}

.smallText {
  font-size: 10px;  
}

.mediumText {
  font-size: 11px;  
}

.largeText {
  font-size: 12px;  
}

.darkGreyText {
  color: #555;
}

.redText {
  color: red;  
}


#review a:link {color: #007CB0; text-decoration: none;}     
#review a:visited {color: #007CB0; text-decoration: none;}  
#review a:hover {color: #fff; text-decoration: none; background-color: #DD8200;}   
#review a:active {color: #007CB0; text-decoration: none;}   

.bannerSignInLinks {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 9px;  
}

/** STUFF FROM CHRISTINA'S CSS **/

#review h1 {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  color: #666666;
  font-weight: bold;
}

#review h2 {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 10px;
  color: #003366;
  font-weight: bold;
}
#review h3 {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  color: #000066;
  
}
#review h5 {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 15px;
  color: #333333;
}

/*
#review body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  color: #000000;
  background-color: #eeeeee;
}
*/

#review table {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  color: #000000;
}

#review th {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 11px;
  font-weight: normal;
  color: #000000;
  text-align: center;
}

.reviewTitle {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #007CB0; /*0066CC;*/
}

.reviewSubTitle {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #007CB0; /*0066CC;*/
}

#errors_present {
  border: 1px solid red;
  width: 300px;
  font-size: 10px;
  padding: 5px;
  margin-left: 10px;
  margin-bottom: 5px;
}
#messages_present {
  border: 1px solid black;
  width: 300px;
  font-size: 10px;
  padding: 5px;
  margin-left: 10px;
  margin-bottom: 5px;
}