body {
	margin: 0;
	border: 0 none;
	padding: 5px;
	font-family: Calibri, Verdana, Arial, sans-serif;
}
.date {
	height: 3208px;
	width: 65px;
	margin-left: 200px;
	border-left: solid 1px black;
	border-right: solid 1px black;
	text-align: center;
}
.dark {
	background-color: black;
	color: white;
}
.light {
	background-color: white;
	color: black;
}
.name {
	transform: rotate(90deg);
	transform-origin: 0 100%;
	-moz-transform: rotate(90deg);
	-moz-transform-origin: 0 100%;
	-webkit-transform: rotate(90deg);
	-webkit-transform-origin: 0 100%;
	-ms-transform: rotate(90deg);
	-ms-transform-origin: 0 100%;
	-o-transform: rotate(90deg);
	-o-transform-origin: 0 100%;
	width: 200px;
}
.superaeon, .aeon, .era, .period, .epoch {
	position: absolute;
	left: 30px;
	border: solid 1px black;
	border-bottom: 0 none;
	padding-left: 5px;
}
.superaeon {
	left: 271px;
	width: 151px;
}
.aeon { width: 120px }
.era { width: 89px }
.period { width: 58px }
.epoch { width: 27px }
.superaeon .name:after { content: " Superaeon" }
.aeon .name:after { content: " Aeon" }
.era .name:after { content: " Era" }
.period .name:after { content: " Period" }
.epoch .name:after { content: " Epoch" }
#primordial {
        top: 5px;
	height: 31px;
	background-color: #ccc;
}
#primordial .name { 
	transform: none;
	-moz-transform: none;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
}
#primordial .name:after { content: "" }
#tenebrous {
        top: 37px;
	height: 34154px;
	background-color: #333;
	color: white;
}
#rekindling {
        top: 34192px;
	height: 51281px;
	background-color: #666;
	color: white;
}
#stelliferous {
        top: 85474px;
	height: 1085449px;
	border-bottom: solid 1px red;
	background-color: #999;
}
#hadean {
	top: 694858px;
	height: 65811px;
	background-color: #809090;
}
#archean {
	top: 760670px;
	height: 111107px;
	background-color: #99ADAC;
}
#eoarchean { /* 3800-3600 Ma */
	top: -1px;
	height: 17092px;
	background-color: #809090;
}
#paleoarchean { /* 3600-3200 Ma */
	top: 17092px;
	height: 34186px;
	background-color: #999791;
}
#mesoarchean { /* 3200-2800 Ma */
	top: 51279px;
	height: 34187px;
	background-color: #B2B5AF;
}
#neoarchean { /* 2800-2500 Ma */
	top: 85467px;
	height: 25640px;
	background-color: #CBCDC8;
}
#proterozoic { /* 2500-542.0 Ma */
	top: 871778px;
	height: 167346px;
	background-color: #CCD891;
}
#paleoproterozoic { /* 2500-1600 Ma */
	top: -1px;
	height: 76921px;
	background-color: #B3B25E;
}
#siderian { /* 2500-2300 Ma */
	top: -1px;
	height: 17093px;
}
#rhyacian { /* 2300-2050 Ma */
	top: 17093px;
	height: 21366px;
}
#orosirian { /* 2050-1800 Ma */
	top: 38460px;
	height: 21366px;
}
#statherian { /* 1800-1600 Ma */
	top: 59827px;
	height: 17093px;
}
#mesoproterozoic { /* 1600-1000 Ma */
	top: 76921px;
	height: 51280px;
	background-color: #DDC288;
}
#calymmian { /* 1600-1400 Ma */
	top: -1px;
	height: 17093px;
}
#ectasian { /* 1400-1200 Ma */
	top: 17093px;
	height: 17094px;
}
#stenian { /* 1200-1000 Ma */
	top: 34187px;
	height: 17093px;
}
#neoproterozoic { /* 1000-542.0 Ma */
	top: 128202px;
	height: 39144px;
	background-color: #CAA595;
}
#tonian { /* 1000-850 Ma */
	top: -1px;
	height: 12820px;
	background-color: #CBA46C;
}
#cryogenian { /* 850-630 Ma */
	top: 12820px;
	height: 18803px;
	background-color: #DCABAA;
}
#ediacaran { /* 630-542.0 Ma */
	top: 31623px;
	height: 7520px;
	background-color: #EAD8BC;
}
#phanerozoic {
	top: 1039126px;
	height: 46322px;
	border-bottom: solid 1px red;
	background-color: #B3E2D1;
}
#paleozoic { /* 542-251 Ma */
	top: -1px;
	height: 24870px;
	background-color: #80B5D5;
}
#cambrian { /* 542-488.3 Ma */
	top: -1px;
	height: 4589px;
	background-color: #FB805F;
}
#early-cambrian { /* 542.0-513.0 Ma */
	top: -1px;
	height: 2478px;
	background-color: #E77C72;
}
#middle-cambrian { /* 513.0-501.0 Ma */
	top: 2478px;
	height: 1025px;
	background-color: #E8AE97;
}
#furongian { /* 501.0-488.3 Ma */
	top: 3503px;
	height: 1085px;
	background-color: #FDCDB8;
}
#ordovician { /* 488.3-443.7 Ma */
	top: 4589px;
	height: 3811px;
	background-color: #F981A6;
}
#early-ordovician { /* 488.3-471.8 Ma */
	top: -1px;
	height: 1409px;
	background-color: #E67DA4;
}
#middle-ordovician { /* 471.8-460.9 Ma */
	top: 1409px;
	height: 931px;
	background-color: #FA9AB1;
}
#late-ordovician { /* 460.9-443.7 Ma */
	top: 2341px;
	height: 1469px;
	background-color: #FBB4BD;
}
#silurian { /* 443.7-416.0 Ma */
	top: 8401px;
	height: 2366px;
	background-color: #B172B6;
}
#llandovery { /* 443.7-428.2 Ma */
	top: -1px;
	height: 1324px;
	background-color: #9858A8;
}
#wenlock { /* 428.2-422.9 Ma */
	top: 1324px;
	height: 452px;
	background-color: #B189B3;
}
#ludlow { /* 422.9-418.7 Ma */
	top: 1777px;
	height: 358px;
	background-color: #CAA7D1;
}
#pridoli { /* 418.7-416.0 Ma */
	top: 2136px;
	height: 230px;
	background-color: #E9C7E2;
}
#devonian { /* 416.0-359.2 Ma */
	top: 10768px;
	height: 4854px;
	background-color: #9999C9;
}
#early-devonian { /* 416.0-397.5 Ma */
	top: -1px;
	height: 1580px;
	background-color: #807DBA;
}
#middle-devonian { /* 397.5-385.3 Ma */
	top: 1580px;
	height: 1042px;
	background-color: #9983BE;
}
#late-devonian { /* 385.3-359.2 Ma */
	top: 2623px;
	height: 2230px;
	background-color: #CBBDDC;
}
#carboniferous { /* 359.2-299.0 Ma */
	top: 15623px;
	height: 5144px;
	background-color: #689FCA;
}
#early-carboniferous { /* 359.2-318.1 Ma */
	top: -1px;
	height: 3512px;
	background-color: #8091AD;
}
#late-carboniferous { /* 318.1-299.0 Ma */
	top: 3512px;
	height: 1631px;
	background-color: #689FCA;
}
#permian { /* 299.0-251.0 Ma */
	top: 20768px;
	height: 4101px;
	background-color: #67C6DE;
}
#cisuralian { /* 299.0-270.6 Ma */
	top: -1px;
	height: 2426px;
	background-color: #80CEC9;
}
#guadalupian { /* 270.6-260.4 Ma */
	top: 2426px;
	height: 871px;
	background-color: #99D8D8;
}
#lopingian { /* 260.4-251.0 Ma */
	top: 3298px;
	height: 802px;
	background-color: #B3E3EE;
}
#mesozoic { /* 251.0-65.5 Ma */
	top: 24870px;
	height: 15854px;
	background-color: #7FAD51;
}
#triassic { /* 251.0-199.6 Ma */
	top: -1px;
	height: 4392px;
	background-color: #67C3B7;
}
#early-triassic { /* 251.0-245.0 Ma */
	top: -1px;
	height: 512px;
	background-color: #67B39F;
}
#middle-triassic { /* 245.0-228.0 Ma */
	top: 512px;
	height: 1452px;
	background-color: #99D7BE;
}
#late-triassic { /* 228.0-199.6 Ma */
	top: 1965px;
	height: 2426px;
	background-color: #CCECE1;
}
#jurassic { /* 199.6-145.5 Ma */
	top: 4392px;
	height: 4623px;
	background-color: #4DB47E;
}
#early-jurassic { /* 199.6-175.6 Ma */
	top: -1px;
	height: 2050px;
	background-color: #66C292;
}
#middle-jurassic { /* 175.6-161.2 Ma */
	top: 2050px;
	height: 1230px;
	background-color: #7FCA93;
}
#late-jurassic { /* 161.2-145.5 Ma */
	top: 3281px;
	height: 1341px;
	background-color: #CCEBC5;
}
#cretaceous { /* 145.5-65.5 Ma */
	top: 9016px;
	height: 6836px;
	background-color: #7FC31C;
}
#early-cretaceous { /* 145.5-99.6 Ma */
	top: -1px;
	height: 3922px;
	background-color: #B3DF7F;
}
#late-cretaceous { /* 99.6-65.5 Ma */
	top: 3922px;
	height: 2914px;
	background-color: #DEF197;
}
#cenozoic { /* 65.5-0 Ma */
	top: 40725px;
	height: 5596px;
	border-bottom: solid 1px red;
	background-color: #FFFF00;
}
#paleogene { /* 65.5-23.03 Ma */
	top: -1px;
	height: 3629px;
	background-color: #FFB300;
}
#paleocene { /* 65.5-55.8 Ma */
	top: -1px;
	height: 828px;
	background-color: #EB9301;
}
#eocene { /* 55.8-33.9 Ma */
	top: 828px;
	height: 1871px;
	background-color: #EAAD43;
}
#oligocene { /* 33.9-23.03 Ma */
	top: 2700px;
	height: 928px;
	background-color: #EAC672;
}
#neogene { /* 23.03-2.588 Ma */
	top: 3629px;
	height: 1746px;
	background-color: #FDCC8A;
}
#miocene { /* 23.03-5.332 Ma */
	top: -1px;
	height: 1512px;
	background-color: #FFDE00;
}
#pliocene { /* 5.332-2.588 Ma */
	top: 1512px;
	height: 234px;
	background-color: #FEEBAC;
}
#quaternary { /* 2.588 Ma to present */
	top: 5376px;
	height: 219px;
	border-bottom: solid 1px red;
	background-color: #FFFF7F;
}
#pleistocene { /* 2.588-0.0117 Ma */
	top: -1px;
	height: 219px;
	border-bottom: solid 1px red;
	background-color: #FFFF62;
}
#holocene { /* 0.0117 Ma to present */
}
#legend {
	position: absolute;
	top: 20ex;
	left: 0px;
	width: 30em;
	margin-left: 450px;
	border: solid thin black;
	padding: 1ex 1em;
	background-color: #ddd;
	line-height: 150%;
}
#events {
	margin-bottom: 1200px;
}
.event {
	position: absolute;
	left: 441px;
	border-top: solid thin black;
	border-left: solid thick white;
	padding-left: 40px;
}
#test {
	display:none;
	left: 175px;
	border-top-color: red;
	color: red;
}
#anatomically-modern-humans { font-size: xx-small }
.ya { color: #666 }
.ya:after { content: " years ago:" }
#license {
	text-align: center;
	color: #666;
}
#dials {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 98%;
	margin-top: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	width: 180px;
	padding: 0.5ex 0.5em;
	border-left: dotted 1px red;
	border-top: solid 5px red;
}
.dial-datetime {
}
.dial-date {
	display: block;
	font-size: 6em;
	font-weight: bold;
	text-align: center;
	line-height: 80%;
}
.dial-month {
	display: block;
	text-transform: uppercase;
	font-size: 4em;
	font-weight: bold;
	text-align: center;
	line-height: 80%;
}
.dial-time {
	display: block;
	font-size: 2.7em;
	font-weight: bold;
	text-align: center;
	line-height: 80%;
}
#earlier-dial {
	top: 5px;
	left: 5px;
}
#earlier-date {
	padding: 10px;
	border: solid 1px black;
	background-color: #ddd;
}
#earlier-ya {
	margin: 2ex 0;
}
#earlier-superaeon:before { content: "Superaeon: " }
#earlier-aeon:before { content: "Aeon: " }
#earlier-era:before { content: "Era: " }
#earlier-period:before { content: "Period: " }
#earlier-epoch:before { content: "Epoch: " }
#earlier-ya:after { content: " years ago" }
#nav-help {
	margin-top: 4ex;
}
#nav-help code { font-weight: bold }