body {
  color:            #ffcc33;
  font-family:      verdana, helvetica, arial, lucida, sans-serif;
  background-color: #000000;
  padding:          0;
  padding-top:      8px;
  margin:           0;
}

h2 {
  color: #006600;
  font-size: 110%;
}

ul {
  font-size: 100%;
  list-style-type: none;
  margin-left: 0;
  padding-left: 2em;
  text-indent:  -1em;
}
li {
  margin-top: .5em;
  line-height: 120%;
}
ul li:before {
  content: '\00bb';
  color:   #ffcc66;
}


a, 
a:link, 
a:visited,
a:hover,
a:active {
  color: #ffcc33;
}

.inheader {
  font-size: 50%;
}

div#main {
  display: table; 
  margin: auto; 
  text-align: center;
  color: #ffcc33;
  font-size: 90%;
  background-color: #000000; 
  padding-bottom: 20px;
}

div#main div#top_banner {
  background-color: #ffcc33;
  display: table;
  width: 100%;
  padding: 4px;
  color: #000000;
  font-weight: bold;
}
div#main div#top_banner a {
  color: #000000;
  text-decoration: none;
}
div#main div#top_banner a:hover {
  background-color: #000000;
  color:   #ffcc33;
}
div#main div#top_banner a[href="/"] {
  font-size: 120%;
}
div#main div#top_banner div#maps_nav, 
div#main div#top_banner div#maps_subnav {
  font-weight: normal;
}
div#main div#top_banner div#maps_nav a,
div#main div#top_banner div#maps_subnav a {
  text-decoration: underline;
}
div#main div#top_banner div#maps_nav a.youarehere, 
div#main div#top_banner div#maps_subnav a.youarehere {
  cursor: text;
  text-decoration: none;
  background-color: #000000;
  color:   #ffcc33;
  font-weight: bold;
  padding: 0 2px;
}
div#main div#top_banner div#maps_subnav {
  margin-top: .3ex;
  font-size: 90%;
}

/*  { ------------------------ */
div#main div#top_banner div#logo {
  display: table; 
  width: 115px; 
  float: left;
}
div#main div#top_banner div#logo img {
  float: left;
  border: 0;
}
div#main div#top_banner div#logo img a {
  text-decoration: none;
}
/*  } ------------------------ */


/*  { ------------------------ */
div#main div#top_banner div#matter {
  display: table; 
  float: left;
  width: 75%; 
  text-align: center;
}
div#main div#top_banner div#matter h1 {
  margin: 4px;
  font-size: 110%;
  color: #000000;
}
/*  } ------------------------ */

div#main div#location-map {
  background-color: #ffffff; 
  width:  800px; 
  height: 600px;
  float: left;
}
div#main div#location-info {
  display: table;
  color:  #000000;
  background-color: #ffffff; 
  width:  300px; 
  float: left;
  text-align: left;
}

div#main div#map_info {
  display: table;
  margin:  auto;
  margin-top:  20px;
  padding:     30px;
  padding-top: 0;
  border:  6px double #ffcc33;
}
div#main div#map_info p {
  margin-top: 0;
  font-size: 90%;
}
div#main div#map_info div#areas_nav {
  display: table;
  margin:  auto;
  padding: 4px;
}

/* The google map area - DON'T make "display: table;", it messes up the positioning.
 *   google maps javascript does the rest of the styling for this div and the things inside.
 */
div#map {
  width: 1000px; 
  height: 600px; 
  margin: auto;
}
/* text display, outside of map: */
div#map_info {
  margin: 0; 
  padding: 8px 20px 50px; 
  width: 100%;
}
div#map_info h2 {
  color: #ffcc33;
  font-size: 130%;
}
/* text display, outside of map: */
div#text {
  display: table; 
  width: 600px; 
  padding: 30px; 
  margin: auto; 
  text-align: left;
  border: 3px solid #ffcc33;
  background-color: #fafafa; 
  color: #333333;
}
div#text h3 {
  color: #006600;
}
div#text a {
  color: #333333;
}
div#text ul#locations li b {
  color: #006600;
}
div#text ul.alt_names li:before {
  content: '';
}
div#text ul.alt_names li span.lang {
  font-size: 80%;
}



/* google javascript info windows */
/* main div for tchrd sources: */
div.info {
  display: table;
  width:     400px;
  color: #000000;
  font-size: 80%;
  background-color: #eeeeee;
  padding: 12px;
  margin: 0;
  text-align: left;
}
div.info img {
  float: left;
  margin-right: 10px;
  border: none;
}
div.info img.land {
  width:  130px;
  height: 100px;
}
div.info img.port {
  width:  100px;
  height: 130px;
}
div.info a {
  color: blue;
}
div.i-wide {
  width:     800px;
}
div.i-small {
  width:     200px;
}
/* addiitonal class for sources other than tchrd: */
div.other-source {
  background-color: #ffffff;
}
div.info h3 {
  color: #006600;
  white-space: nowrap;
  margin:  0; 
  padding:  0; 
}
div.info h3 {
  margin:  0; 
  margin-top: .5ex;
  padding:  0; 
  padding-top: .5ex;
  border-top: 1px dashed #006600;
  clear: both;  /* needs to clear in case photo in previous item is longer than text */
}
div.info h3 a {
  text-decoration: none;
  color: #000000;
}
div.info h3 a:hover {
  text-decoration: underline;
  color: blue;
}
div.info p {
}
div.info p:first-child {
  margin-top: 0;
  padding-top: 0;
}
div.info p.details, 
div.info span.details, 
div.info span.source { 
}
div.info p span.details, 
div.info h3 span.details { 
  font-weight: normal;
  margin-left: 1em;
}
div.info h3 span.details { 
  font-size:   80%;
}
div.info p span.details:before, 
div.info h3 span.details:before { 
  content: '... ';
}

ul#locations {
}
ul#locations span.lat-lng, 
ul#locations span.geo-id {
  font-size: 80%;
}

/* sources page */
body#sources ul {
  margin-top: 0;
}


.tooltip {
    font-size: 90%;
    color: #000000;
    background-color: #ffffff;
    border:      2px solid #cccccc;
    padding:     1px;
}


/* e o f */