/* ================== CUSTOM CSS =========================================== */

body {
  font-size: 14px;
  color: #444;
  width: 100%;
  font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
}

#container {
  position: relative;
  width: 960px;
  margin: 1em auto;
}

::selection {background: #800;}

span.subhead {font-weight: normal;}

p {
  color: #444;
}

p.epoch span {font-weight: normal;}

h1 {
  float: left;
  font-size: 1.75em;
}



.infobox {
  width: 46%;
  float: right;
  padding: 0.5em 2%;
  margin: 0 0 1em 0;
  background: #e6e6f6;
  border-radius: 4px;
}

.infobox p {
}

blockquote {
  margin: 0 0 0 20px;
}

cite {
  font-family: "Times New Roman", serif;
}

.infobox p.citesource {
  text-align: right; 
  font-size: 12px;
  color: #888;
  margin: 1.25em 0;
}


ul.timeline {
  list-style: none;
  padding: 0;
  width: 100%;
  min-width: 800px;
  max-width: 1280px;
  clear: both;
}

ul.timeline li {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  display: inline;
  float: left;
  width: 25%;
  min-width: 190px;
  vertical-align: top;
  min-height: 6em;
}

ul.timeline li p {
  padding: 1em;
  margin: 0 1em 1em 0;
}

ul.timeline li:last-child p {
  margin-right: 0;
}

.epoch {
  color: #800;
}

.state {
  font: bold 16px sans-serif;
  color: #800;
  min-height: 4em;
  padding: 10px;
}

.below p {
  padding: 10px;
}

.state:hover,
.below p:hover {
  background: #e6e6e6;
  border-radius: 3px;
}

.hl {color: #00c; font-weight: bold;}

.details {
  padding-top: 60em;
}

.detail {
  border: solid 1px #bbb;
  background: #eee;
  margin: 1em;
  padding: 10px;
  display: inline-block;
  clear: both;
}

.detail h3 {
  padding-left: 10px;
}

.detail_number {
  color: #fff;
  background: #bbb;
  padding: 3px 7px 1px 7px;
  margin: 0 5px 0 0;
  border-radius: 2px;
}

.detail_column {
  float: left;
  padding: 0 10px;
}

.detail_column_1  {width: 60px;}
.detail_column_2  {width:140px;}
.detail_column_3  {width:220px;}
.detail_column_4  {width:300px;}
.detail_column_5  {width:380px;}
.detail_column_6  {width:460px;}
.detail_column_7  {width:540px;}
.detail_column_8  {width:620px;} 
.detail_column_9  {width:700px;} 

.span-2 {width: 140px; padding: 0 10px;}
.span-3 {width: 220px; padding: 0 10px;}
.span-4 {width: 300px; padding: 0 10px;}

.col {float: left;}
.col-first {padding-left: 0;}
.col-last  {padding-right: 0;}

.subdiv_container {
  clear: both;
}

.subdiv {
  float: left;
  padding: 0 1%;
}

.div_30 {width: 28%;}
.div_40 {width: 38%;}
.div_50 {width: 48%;}
.div_60 {width: 58%;}
.div_70 {width: 68%;}

.detail p {
  /* padding-right: 2em; */
  font-size: 12px;
  line-height: 1.4em;
}

p.columns {
  column-count: 2;
  column-gap: 20px;
} 

p.detail_image_title {
  font-weight: bold;
}

img.detail_image {
  width: 100%;
  height: auto;
}

.detail_column > .detail_image:first-child {
  padding-top: 12px;
}

.image_size_50 {
  width: 50% !important;
  margin: 0 25%;
}

.image_size_50 + .detail_image_source {
  text-align: center;
}

.detail_image_subtitle {
  font: 10px Helvetica, Arial, sans-serif;
  padding: 0.125em 0 0 0 !important;
}

.detail_image_subtitle a {
  color: #888;
}

.detail_image_source {
  text-align: right;
  font-size: 10px !important;
  padding: 0 0 0 0 !important;
}

.detail_image_source a {
  color: #888;
  text-decoration: none;
}

.detail_image_source a:hover {
  text-decoration: underline;
}

.more_link {
  text-decoration: none;
}

.infobox:hover,
.aboutbox:hover,
.more_link p.epoch:hover,
.more_link p.note:hover {
  box-shadow: 0 0 3px 3px #aaa;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 3px 3px #aaa;
  -moz-box-shadow: 0 0 3px 3px #aaa;
  background: #fff;
  cursor: url(img/info-balloon.gif),url(img/info-balloon.png),url(img/info-balloon.ico),pointer;
  z-index: 999999;
}

.infobox:hover {
  background: #e6e6f6;
}

.resultbox {
  width: 46%;
  padding: 0.5em 2%;
  margin: 0 0 1em 0;
  background: #e6e6f6;
  border-radius: 4px;
}

#link_2,
#link_3,
#link_4,
#link_5,
#link_6,
#link_7,
#link_8,
#link_9,
#link_10,
#link_11,
#link_12,
#link_13,
#link_14,
#link_15,
#link_16,
#link_17,
#link_18 {
  position: absolute;
  max-width: 17em;
}

#link_2  {left: 31em; top: 48em; max-width: 19em; }
#link_3  {left: 0;  top: 13em;}
#link_4  {left: 15em;  top: 15em;}
#link_5  {left: 0;  top: 22em;}
#link_6  {left: 17em; top: 23em;}
#link_7  {left: 19em; top: 28em;} #link_7 p  {width:  9em;}
#link_8  {left: 32em; top: 19em;} #link_8 p  {width: 15em;}
#link_9  {left: 36em; top: 24em;} #link_9 p  {width: 13em;}
#link_10 {left: 20em; top: 33em;} #link_10 p {width: 13em;}
#link_11 {left: 35em; top: 30em;}
#link_12 {left: 31em; top: 38em;}
#link_13 {left: 51em; top: 25em;} #link_13 p {width: 14em;}
#link_14 {left: 50em; top: 32em;} #link_14 p {width: 16em;}
#link_15 {left: 49em; top: 38em;}
#link_16 {left: 52em; top: 49em;}
#link_17 {left: 0;  top: 38em; max-width: 27em;}
#link_18 {left: 57em; top: 44em;} #link_18 p {width: 10em;}
.resultbox {position: absolute; left: 1em; top: 49em; width: 23em;}

.aboutbox {padding: 0.5em 1em;}

.aboutbox ul li {
  color: #444;
}

#arrow {
  position: absolute;
  top: 16em;
  left: 0;
}