html, body {width: 100%; height: 100%;}

body {font-family: Arial, sans-serif;}

#map-action-bar {width: 100%; height: 35px; text-align: center;}

#map-explainer {position: absolute; top:55px; left:18px; width:250px; background-color:#ffffff; padding:10px; font-size:12px; line-height: 16px; border: 2px solid #232020; line-height: 16px;}

#map_canvas {width: 100%; height: 400px;}

#visualization {width: 100%; height: 350px; overflow: scroll;}

#map-explainer h1 {font-size:24px; line-height: 28px; margin:0 0 10px 0;}

/*BUTTONS*/
.mapActionButton {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) ); background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); background-color:#ededed; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; border:1px solid #232020; display:inline-block; color:#000000; font-family:arial; font-size:10px; font-weight:bold; padding:6px 24px; text-decoration:none; margin: 5px 15px 5px 15px;}

.mapActionButton:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); background-color:#dfdfdf;}

.mapActionButton:active {position:relative; top:1px;}