@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700&subset=latin,latin-ext);

div#mapContainer { padding-top: 0px; }
div#legendContainer { position: absolute; top: 30px; right: 30px; width: 350px; text-align: left; padding-bottom: 50px; font-size: 14px; }

@media (max-width: 975px) {
	div.siteheader { display: none; }
	div#invelope { margin: 0px; width: 100%; }
	div#titleContainer { position: relative; top: auto; right: auto; text-align: center; }
	div#mapContainer { margin: 10px auto; }
	div#legendContainer { position: relative; top: auto; right: auto; clear: left; padding: 40px 5px 40px 5px ; width: auto; }
}

div#title {  }
div#title img { width: 100%; max-width: 425px; }

div#map { width: 90%; max-width: 420px; margin-top: 20px; }
div#map > span.clear { clear: left; display: block; }
div#map > div { float: left; width: 5.5%; height: auto; text-align: center; overflow: hidden; position: relative; }
div#map > div > div.num { position: absolute; top: 25%; left: 2px; right: 2px; bottom: 25%; padding: 4px 0px; overflow: hidden; font-size: 75%; color: #ffffff; background-color: #000000; }
div#map > div > img { width: 100%; height: auto; }

@media (min-width: 975px) {
	div#map { min-height: 545px; }	
}

@media (max-width: 975px) {
	div#map { margin: auto; margin-top: 0px; max-width: 300px; width: 100%; }
	div#legend { max-width: 400px; margin: auto; }
}

div#explanation { clear: left; padding-top: 40px; color: #111111; max-width: 500px; font-size: 13px; }
div#explanation p { margin: 0.5em 0;  line-height: 1.5em; }
div#explanation p.title { font-weight: bold; margin-top: 2em; font-size: 14px;}
div#explanation div.l1 {  }
div#explanation div.l2 { color: #555555; }
div#explanation div.l2 p.title { font-weight: normal; }

@media (max-width: 975px) {
	div#explanation { display: none; }
}

div#legend {  }
div#legend a { color: #006699; text-decoration: none; }
div#legend a:hover { border-bottom: 1px dotted #006699; }
div#legend div.intro { margin-top: 10px; line-height: 1.5em; }
div#legend div.intro > div { display: inline; }
div#legend div.heading { text-align: center; margin-bottom: 20px; }
div#legend div.heading div.title { font-size: 180%; border-bottom: 1px solid #999999; padding-bottom: 5px; margin-bottom: 5px; }
div#legend div.heading div.subtitle { font-size: 140%; color: #999999; }
div#legend div.table { margin: 20px 0px; }
div#legend div.table div.item { margin: 5px 0px; clear: left; }
div#legend div.table div.item div.text { margin-left: 50px; padding-top: 0.5em; }
div#legend div.table div.item div.num { float: left; width: 40px; font-size: 25px; text-align: right; font-family: sans-serif; font-weight: bold; }
div#legend div.table div.item div.num.o { color: #c6c6c6; }
div#legend div.table div.item div.num.x { color: #4b4b4b; }
div#legend div.table div.item div.num.fg { color: #4450b7; }
div#legend div.table div.item div.num.ff { color: #05cc56; }
div#legend div.table div.item div.num.sf { color: #046059; }
div#legend div.table div.item div.num.lab { color: #ee3a46; }
div#legend div.table div.item div.num.ia { color: #f8b018; }
div#legend div.table div.item div.num.ap { color: #f15a24; }
div#legend div.table div.item div.num.sd { color: #762f8a; }
div#legend div.table div.item div.num.gp { color: #bdd86e; }
div#legend div.table div.item div.num.rn { color: #62cae7; }