body {
  background-image: url(../images/pagebg.jpg);
  background-position: top left;
  background-repeat: repeat-x;
  text-align: center;
  background-color: #e6e7d1;
  font-family: verdana, sans-serif;
  }

a {
  text-decoration: none;
  color: #12485c;
  }

a:hover {
  color: #12485c;
  }

a img {
  border: none;
  }
  
  div#browsebycity {
  float: right;
  margin: 0 auto 0 auto;
  padding: 10 10 10 10;
  }

div#pagewrap {
  width: 800px;
  margin: 0 auto 0 auto;
  padding: 0 0 0 0;
  }

div#contentbeta a {
  position: absolute;
  font-size: 11px;
  font-weight: normal;
  color: #5d8492;
  margin-top: 82px;
  margin-left: 495px;
}

div#advancedsearch a {
   float: left;
  font-size: 10px;
  font-weight: normal;
  color: #e8e9d7;
}

div#header {
  height: 110px;
  float: left;
  margin-top: -10px;
  text-align: left;
  width: 100%;
  background-image: url(../images/splashcompass.jpg);
  background-position: 460px -75px;
  background-repeat: no-repeat;
}

div#header img {
  float: left;
  margin-top: 28px;
  margin-left: -6px;
  }
  
div#header form {
  float: right;
  margin-top: 60px;
  }

div#header form input {
 font-size: 10px;
 width: 170px;
 border-right: 1px solid #87a4ac;
 border-bottom: 1px solid #87a4ac;
 border-top: 1px solid #021f29;
 border-left: 1px solid #021f29;
 background-color: #E8E9D7;
 padding-left: 2px;
 margin-right: 0px;
 }

div#header form input.button {
 background-color: #698b96;
 border: 1px solid #87a4ac;
 color: #063749;
 width: 58px;
 font-weight: bold;
 font-size: 0.6em;
 padding-right: 0;
 padding-left: 0;
 cursor: pointer;
 }


    form#browse {
    float: left;
    padding: 10px;
    border: 1px solid;
    font-size: 12px;
    font-family: verdana, san-serif;
    background-color: #f4f9fb;
    }
    
    option {
    font-family: verdana, san-serif;
    font-size: 12px;
    background-color: #f4f9fb;
    padding: 2px;
    }
    
    select  {
    font-family: verdana, san-serif;
    font-size: 12px;
    }
    
    
    
div#pagecontent {
  background-color: #ffffff;
  float: left;
  padding: 0 20px 0px 20px;
  width: 760px;
  text-align: left;
  border: 1px solid #dfe8ef;
  }

div#pagecontent div#breadcrumbs {
  font-size: 10px;
  line-height: 16px;
  margin-top: 20px;
}

div#pagecontent div#breadcrumbs a {
  text-decoration: none;
  color: #063749;
  background-color: #f0f6f8;
  border-bottom: 1px solid #dbe7eb;
  }

div#pagecontent div#breadcrumbs a:hover {
  background-color: #f9fbfc;
  }

div#pagecontent h2.pagetitle {
  color: #5d8492;
  font-family: georgia, serif;
  font-weight: normal;
  font-size: 21px;
  float: left;
  margin: 12px 0 15px 0;
}

div#bottom-bar {
height: 80px;
background-color:#E6E7D1;
width: 800px;
margin-left: -20px;
margin-top: 30px;
}

h3 {
color: #5d8492;
font-family: georgia, serif;
  font-weight: normal;
  font-size: 21px;
}

h4 {
color: #063748;
font-family: georgia, serif;
  font-weight: bold;
  font-size: 15px;
  font-variant: small-caps;
  letter-spacing: 1.5px;
  margin: 15px 0px 5px 0px;
}

div#homemenu {
width: 175px;
padding: 0px 5px 10px 0px;
border-bottom: 1px solid #063748;
position: relative;
float: left;
}


ul#home {
list-style-type: none;
margin:0;
padding:0;
border:none;
}

ul#home li {
margin:0;
padding:1px;
border:none;
}

ul#home li#inactive {
margin:0;
padding:1px;
border:none;
color: gray;
}

div#pagecontent p {
 font-size: 12px;
  line-height: 18px;
  margin: 0 0 10px 0;
}

div#pagecontent blockquote {
 font-size: 11px;
  line-height: 16px;
  margin: -5px  5px 10px 20px;
}

div#pagecontent blockquote a {
  text-decoration: none;
  color: #063749;
  background-color: #f0f6f8;
  border-bottom: 1px solid #dbe7eb;
  }

div#pagecontent blockquote a:hover {
  background-color: #f9fbfc;
  }
  

div#pagecontent ul li {
font-family: verdana, sans-serif;
 font-size: 12px;
  line-height: 22px;
  margin: 0 0 0px 0;
}

div#pagecontent ol li {
font-family: verdana, sans-serif;
 font-size: 12px;
  line-height: 22px;
  margin: 0 0 0px 0;
}

div#pagecontent li a {
  text-decoration: none;
  color: #063749;
  background-color: #f0f6f8;
  border-bottom: 1px solid #dbe7eb;
}

div#pagecontent li a:hover {
  background-color: #f9fbfc;
  }
	
	
  
  div#pagecontent div.contents {
position: relative;
  float: right;
  padding: 10px;
  margin: 5px;
  border: 2px solid #dfe8ef;
}

div#pagecontent div.contents ol li {
  font-size: 12px;
  line-height: 12px;
  margin: 0 0 10px 0;
}

div#pagecontent div.contents ol li a {
  font-size: 12px;
  line-height: 12px;
  margin: 0 0 10px 0;
}
  
div#pagecontent div.image {
position: relative;
  float: right;
  background-color: #f4f9fb;
  padding: 8px;
  margin: 15px;
  border: 1px solid #dfe8ef;
}


div#pagecontent div.image_about {
background-color: #f4f9fb; 
width: 700px; 
padding: 10px; 
min-height: 100px;
margin-bottom: 15px;
}

div#pagecontent div.image_about_thumbnail {
width: 125px; float: left;
}

div#pagecontent div.image_about_citation {
width: 520px;
float: left; 
padding: 0px 10px 10px 10px;
}

div#pagecontent div.image_theme {
  background-color: #ffffff;
  min-height: 120px;
  width: 760px;
  margin-bottom: 20px; 
  border: 1px solid #dfe8ef;
  }

div#pagecontent div.image_theme_thumbnail {
width: 125px; float: left;
padding: 14px 14px 14px 8px;
}

div#pagecontent div.theme_definition {
width: 580px;
padding: 10px 10px 10px 10px;
}

div#pagecontent div.imagebox {
float: right;
}

div#pagecontent div.image p {
  font-size: 11px;
  font-style: italic;
  color: #5d8492;
  line-height: 11px;
  margin: 10px 0 0 0;
}

div#pagecontent div.image ol li {
  font-size: 12px;
  line-height: 12px;
  margin: 0 0 10px 0;
}

div#pagecontent div.image ol li a {
  font-size: 12px;
  line-height: 12px;
  margin: 0 0 10px 0;
}

div#pagecontent p a {
  text-decoration: none;
  color: #063749;
  background-color: #f0f6f8;
  border-bottom: 1px solid #dbe7eb;
  }

div#pagecontent p a:hover {
  background-color: #f9fbfc;
  }


div#pagecontent div.date_browse  {
width: 250px;
padding: 5px;
  }
  
  
    div#pagecontent div.century {
    padding: 5px 40px 5px 40px;
font-size: 16px;
font-weight: 600;
  }
  
  
  div#pagecontent div.half-century {
font-size: 14px;
font-weight: normal;
float: left;
width: 100px;
  }
  
  div#pagecontent div.decade {
  width: 100px;
  font-size: 12px;
  float: left;
  }


div#footer {
  width: 760px;
  padding: 20px;
  background-color: #f4f5e9;
  float: left;
  margin-top: 10px;
  text-align: left;
  border: 1px solid #dfe8ef;
  }



div#footer p{
  font-size: 10px;
  font-weight: bold;
  color: #5d8492;
  margin: 0 0 0 0;
}

div#footer div#footer_leftside {
  float: left;
  width: 630px;
  padding-left: 5px;
  padding-right: 30px;
  vertical-align: top;
  }
  
div#footer div#footer_leftside a.image {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 20px;
  float: left;
  height: 50px;
}
  
  
div#footer div#footer_leftside a.text {
  font-size: 11px;
  width: 250px;
  line-height: 16px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  color: #5d8492;
  }

div#footer_rightside {
  border-left: 1px solid #5d8492;
  padding-left: 15px;
  font-size: 10px;
  line-height: 16px;
  margin-top: 10px;
  float: left;
  min-height: 65px;
  color: #5d8492;
}

div#footer_rightside a {
  color: #5d8492;
  }
 
 
/* ------------------------------------------------------------- */

/* Drop Menu Bar */

div#navtabs {
  clear: both;
  margin-top: -40px;
  float: left;
  }

  
ul#navigation {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
  list-style: none;
}

ul#navigation a {
 display: block;
}

ul#navigation li {
position: relative;
 list-style-type: none;
 text-align: center;
 font-size: 11px;
 float: left;
 width: 131px;
 height: 25px;
 background-image: url(../images/unselectedtab130shade.jpg);
 background-position: left top;
 background-repeat: no-repeat;
 margin-right: 1px;
}

ul#navigation li a {
 display: block;
 width: 131px;
 text-decoration: none;
 padding: 7px 0 0 0;
 height: 18px;
}

ul#navigation li a:hover {
 background-image: url(../images/selectedtab130.jpg);
 background-position: left top;
 background-repeat: no-repeat;
}

ul#navigation li a.hasdrop:hover {
color: #3f6f9f;
}

ul#navigation li ul {
  display: none;
  float: left;
  top: 1em;
  }
  
  ul#navigation li ul a {
 display: block;
 width: 131px;
 color: red;
left: auto;
 text-decoration: none;
 padding: 7px 0 0 0;
 height: 18px;
}
  
  
 ul#navigation li > ul {
	top: auto;
	left: auto;
	}

ul#navigation li:hover ul {
	left: auto;
}

ul#navigation li:hover ul, ul#navigation li.sfhover ul { display: block; }

ul#navigation li a img {
 vertical-align: bottom;
}

/* ------------------------------------------------------------- */


/* ------------------------------------------------------------- */

/* Glow Tabs */

.glowingtabs{
float:left;
width:100%;
text-align: center;
font-size: 11px;
font-family: verdana, sans-serif;
line-height:normal;
/* border-bottom: 1px solid #063748; Add border strip to bottom of menu*/
}

.glowingtabs ul{
list-style-type: none;
margin:0;
margin-left: 0px; /*Left offset of entire tab menu relative to page*/
padding:0;
}

.glowingtabs li{
display: block;
float: left;
margin:0 2px 0 0;
padding:0;
}

.glowingtabs a{
float:left;
background:url(../images/tabs/tan_rightside.jpg) no-repeat right top;
margin:0;
text-decoration:none;
width: 130px;
/* remove width declaration above to make tabs grow/shrink with text */
}

.glowingtabs a:hover {
background:url(../images/tabs/rightside.jpg) no-repeat right top;	
}

.glowingtabs a span{
float:left;
display:block;
background:url(../images/tabs/tan_leftcorner.jpg) no-repeat left top;
height: 27px;
}

.glowingtabs a:hover span {
color: black;
background:url(../images/tabs/leftcorner.jpg) no-repeat left top;
}


.glowingtabs a span div.tabtext {
display:block;
padding-top: 7px;
cursor: pointer;
/* padding-left: 20px;
padding-right: 20px;  remove comment tags to make tabs grow/shrink with text */ 
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.glowingtabs a span {float:none;}
/* End IE5-Mac hack */

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}


/* ######### Style for Drop Down Menu ######### */


.dropmenudiv_d{
position:absolute;
margin-top: -1px;
border: 1px solid #063748; /*THEME CHANGE HERE*/
font-size: 11px;
font-family: verdana, sans-serif;
line-height:18px;
background-color: #E6E7D1;
width: 128px;
visibility: hidden;
z-index:100;
}



.dropmenudiv_d a{
width: auto;
display: block;
border: 0 solid #063748; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
background-color: #FFFFFF;
color: black;
}


* html .dropmenudiv_d a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_d a:hover{ /*THEME CHANGE HERE*/
background-color: #e6e7d1;
}




/* Style for Timeline */


table.timeline {
font-size: 12px;
font-family: verdana, sans-serif;
line-height:18px;
}

table.timeline tr.history {
background-color: #ebf3fb;
}

table.timeline td.date {
width: 150px;
text-align: center;
padding: 10px;
font-size: 14px;
font-family: verdana, sans-serif;
}

table.timeline td.event {
text-align: left;
padding: 5px 5px 5px 10px;

}

table.timeline tr.map {
background-color: #e6e7d1;
}



