/* --- DATA PROJECTS STYLES ---
http://0to255.com/1e3549
*/

* {margin: 0; padding: 0;}
body {font-size: 12px; color: #111; font-family: "Lucida Grande", Arial, sans-serif; line-height: 1.5; background-color: #fff;}

#page-top-bar {height: 22px; background-color: #0f1b25;}
#page-top-bar-container {width: 960px; padding: 2px 0; margin: 0 auto;}

#login-links {float: right; font-size: 11px; color: #dbe7f0;}
#login-links a {color: #dbe7f0; font-weight: normal;}
#login-links a:hover {color: #b7cee1;}

#page-top {padding: 7px 0 10px; margin-bottom: 20px; background-color: #1e3549; border-bottom: 1px solid #431b11; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset; -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;}
#page-top .container {padding: 0; position: relative; z-index: 999;}
#page-top #logo {margin-bottom: 0; height: 90px; width: 200px;}
#page-top #logo a img {border: none; float: left; margin: 3px 0 -31px;}
#page-top .ad-slot {width: 728px; height: 90px; float: right;}

#project-title-block {margin: 10px 0 30px; padding: 0 1px;}
#project-title-block h1 {margin: .25em 0 .5em;}
#content {overflow: hidden;}

#page-bottom {clear: both; text-align: center; overflow: hidden; padding: 40px 0;}
#page-bottom ul {list-style: none; margin: 0 auto; padding: 0; text-align: center;}
#page-bottom .credits {color: #999; font-size: 12px;}
#page-bottom .credits img {margin: 0 4px -2px 2px; border: none;}

.container, .gridset {width: 960px; margin: 0 auto; padding-bottom: 3px; clear: both;}
.gridset {overflow: hidden; margin-bottom: 30px;}
.button-block {overflow: hidden; padding: 1px 1px 3px; margin-bottom: 30px;}
.grid-1, .grid-2, .grid-3 {display: inline; float: left; margin-right: 30px;}
.grid-1 {width: 300px;}
.grid-2 {width: 630px;}
.grid-3 {width: 960px; margin-right: 0;}
.grid-first {margin-left: 0;}
.grid-last {margin-right: 0;}
.gridsplit-left {width: 48%; margin-right: 3%; float: left; clear: both;}
.gridsplit-right {width: 48%; margin-right: 0; float: left;}
.column-third {float: left; width: 30%; margin-right: 2%;}
.column-fifth {float: left; width: 18%; margin-right: 2%;}
.column-half {float: left; width: 46%; margin-right: 3%;}
.section-block, .sidebar-block {margin: 0 0 30px; overflow: hidden; clear: both;}


/* --- ELEMENTS --- */
h1 {font-size: 28px;}
article h1 {font-size: 18px;}
h2 {font-size: 24px;}
h3 {font-size: 21px;}
h4 {font-size: 18px;}
h5 {font-size: 14px;}
h6 {font-size: 12px;}
h1, h2, h3, h4, h5, h6 {line-height: 1.2; margin-bottom: .5em; position: relative;}
h1.smaller-header {font-size: 21px;}
li h1, li h2, li h3, li h4, li h5, li h6 {margin-bottom: .33em;}
.list-header {margin-top: 1em;}
.section-header {padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid #ccc; clear: both; overflow: hidden; width: 100%;}
h5.section-header {padding-bottom: 6px;}
.section-explainer {margin-bottom: 15px;}
.page-leader {font-size: 28px; margin-bottom: 1em;}
.page-leader img.state-shape {margin-top: -2px;}
.page-nav-block {margin-bottom: 15px;}
.headline-leader {color: #aaa; text-transform: uppercase; margin-bottom: .75em;}
.section-header .extra {font-size: 12px; font-weight: normal;}
.section-header .detail-link {color: #111;}
.section-header .detail-link .button, .hoverbox .detail-link .button {vertical-align: middle; display: inline-block;}
.hoverbox .detail-link:hover .button {background-color: #4b84b5; color: #fff;}
.with-datestamp {width: 630px;}
.section-header .datestamp {font-size: 10px; float: right; margin: 0 0 0 15px; padding-top: 5px;}
.section-header-hoverbox-separator {margin: 30px 0 12px;}
.with-toggles {padding: 5px 0;}

.right-add, .right-add-button {display: inline-block; font-size: 12px; font-weight: bold; margin-left: 10px; float: right;}
h1 .right-add {margin-top: 16px;}
h3 .right-add {margin-top: 9px;}
h4 .right-add {margin-top: 6px;}
.section-header .right-add {margin-top: 3px;}
h5.section-header .right-add {margin-top: 0;}

hr {height: 1px; border: 0; color: #d3d3d3; background-color: #d3d3d3; margin: 15px 0 ;}
p {margin-bottom: .5em;}
#sidebar p {font-size: 12px; margin: 0 0 12px 0;}


/* --- LINKS & BUTTONS --- */
a {text-decoration: none; color: #2d4f6d;}
a:focus {outline: none;}
a:hover {color: #3c6991;}
a.explainer-link {font-size: 11px; font-weight: bold;}
a.highlight, p a, .header-filter a {border-bottom: 1px dotted;}
a.highlight:hover, p a:hover, .header-filter a:hover {border-bottom: 1px solid;}
a.no-highlight {border-bottom: none;}

.button {display: inline-block; padding: 5px 8px; text-align: center; color: #dbe7f0; background-color: #3c6991; font-weight: bold; font-size: 13px; cursor: pointer;}
.light-button {background-color: #fbfbfb; border: 1px solid #cacaca; color: #2d4f6d;}
.small-button {font-size: 10px; padding: 3px 7px;}
.light-button:hover {background-color: #dbe7f0; color: #2d4f6d;}

.big-button {display: block; padding: 5px 10px 8px; text-align: left; background-color: #e3e3e3; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); font-weight: bold; font-size: 18px; margin: 0 3px 3px;}
.big-button .right {font-size: 40px; line-height: 1;}
.big-button-explainer {font-size: 12px; font-weight: normal; display: block; color: #111; padding-right: 25px;}
.big-button:hover {background-color: #ddd;}
.map-icon-button {background: #e3e3e3 url(../img/icons/marker_32x37.png) no-repeat 8px 10px; padding-left: 50px;}
.chart-icon-button {background: #e3e3e3 url(../img/icons/chart_28x24.png) no-repeat 8px 12px; padding-left: 50px;}

.label {display: inline-block; padding: 3px 8px; margin-bottom: 10px; text-align: center; background-color: #444; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); font-weight: bold; font-size: 11px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.25); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);}


/* BUTTONS */

.button .right {float: none; position: absolute; right: 12px;}

.button {
  cursor: pointer;
  font-weight: bold;
  display: inline-block;
  position: relative;
  background-color: #d5d5d5;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), color-stop(25%, #eee), to(#d5d5d5));
  background-image: -webkit-linear-gradient(#eee, #eee 25%, #d5d5d5);
  background-image: -moz-linear-gradient(top, #eee, #eee 25%, #d5d5d5);
  background-image: -ms-linear-gradient(#eee, #eee 25%, #d5d5d5);
  background-image: -o-linear-gradient(#eee, #eee 25%, #d5d5d5);
  background-image: linear-gradient(#eee, #eee 25%, #d5d5d5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#d5d5d5', GradientType=0);
  padding: 5px 12px 6px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  color: #111;
  font-size: 13px;
  line-height: normal;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.button:hover {
  background-position: 0 -10px;
  color: #333;
  text-decoration: none;
}

.button.dark {
  background-color: #bbb;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd), color-stop(25%, #ddd), to(#bbb));
  background-image: -webkit-linear-gradient(#ddd, #ddd 25%, #bbb);
  background-image: -moz-linear-gradient(top, #ddd, #ddd 25%, #bbb);
  background-image: -ms-linear-gradient(#ddd, #ddd 25%, #bbb);
  background-image: -o-linear-gradient(#ddd, #ddd 25%, #bbb);
  background-image: linear-gradient(#ddd, #ddd 25%, #bbb);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#bbbbbb', GradientType=0);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  color: #111;
  border: 1px solid #bbb;
  border-bottom-color: #aaa;
}

.button.primary {
  text-decoration: none;
  color: #fff;
  background-color: #11114e;
  background-repeat: repeat-x;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1a1a78), color-stop(25%, #1a1a78), to(#11114e));
  background-image: -webkit-linear-gradient(#1a1a78, #1a1a78 25%, #11114e);
  background-image: -moz-linear-gradient(top, #1a1a78, #1a1a78 25%, #11114e);
  background-image: -ms-linear-gradient(#1a1a78, #1a1a78 25%, #11114e);
  background-image: -o-linear-gradient(#1a1a78, #1a1a78 25%, #11114e);
  background-image: linear-gradient(#1a1a78, #1a1a78 25%, #11114e);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a1a78', endColorstr='#11114e', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #11114e #11114e #1a1a78;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button:active {
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.button.disabled {
  cursor: default;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  filter: alpha(opacity=65);
  -khtml-opacity: 0.65;
  -moz-opacity: 0.65;
  opacity: 0.65;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.button[disabled] {
  cursor: default;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  filter: alpha(opacity=65);
  -khtml-opacity: 0.65;
  -moz-opacity: 0.65;
  opacity: 0.65;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.button.large {font-size: 16px; line-height: normal; padding: 9px 14px 9px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
.button.small {padding: 7px 9px 7px; font-size: 11px; font-weight: bold;}
.button.tiny {padding: 2px 7px 3px; font-size: 10px; font-weight: bold;}
.inline-button {vertical-align: 15%; margin-left: 5px;}

.toggle-links {list-style: none; line-height: 1; height: 25px;}
.toggle-links li {float: left; font-size: 12px; font-weight: bold;}
a.toggle-link {padding: 5px 8px; background-color: #fbfbfb; border: 1px solid #cacaca; border-left: none;}
a.toggle-link-active, a.toggle-link:hover {background-color: #d3d3d3; color: #111;}
li.toggle-link-first a.toggle-link {border-left: 1px solid #cacaca; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
li.toggle-link-last a.toggle-link {-webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.with-toggles .toggle-links {margin: 6px 10px 0; display: inline-block; vertical-align: text-top;}


/* --- LISTS --- */
ul, ol {list-style-position: inside; margin: 0; padding: 0;}
ul.no-bullets {list-style: none;}
hr {height: 1px; border: 0; color: #d3d3d3; background-color: #d3d3d3; margin: 15px 0 ;}

ul.button-list, ul.big-item-list, ul.item-list {list-style: none;}
ul.button-list li {display: inline; list-style: none; padding: 0 8px;}
ul.button-list li a {display: inline-block; width: 70px;}

ul.filter-list {font-size: 12px; font-weight: bold;}
ul.filter-list li {margin: 5px 2px; padding: 0;}
.filter-list label {display: inline; padding-left: 6px; font-size: 12px;}
ul.large-type, ul.big-item-list {font-size: 16px;}
ul.big-item-list li {margin-bottom: 8px;}
.inset {float: right; width: 100px; font-size: 11px; list-style: none;}

ul.headline-list {font-size: 12px;}
ul.headline-list a {font-weight: bold;}
ul.headline-list .pubdate {display: block; font-size: 11px; color: #888;}

ul.share-links {float: right; display: inline-block; width: 230px; list-style: none; margin: 0; padding: 0;}
ul.share-links li {float: right; display: inline-block; height: 20px; margin: 0; padding: 0;}

.hoverbox {margin: 10px 0; font-size: 12px; color: #111; position: relative;}
.hoverbox a.hoverbox-wrapper {display: block; padding: 5px 10px 10px; border: 1px solid #fff; border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; color: #111; font-weight: normal;}
.hoverbox a.hoverbox-wrapper:hover, .hoverbox-wrapper-active a {border-color: #ccc; background-color: #e6e6e6; color: inherit;}
.hoverbox .title {font-size: 14px; font-weight: bold; display: block;}
.hoverbox .title-extra {font-size: 11px; color: #777; font-weight: normal; margin-left: 10px;}
.hoverbox .text {display: block; margin-top: 5px;}
.hoverbox .trailer {display: block; margin-top: 5px;}
.hoverbox .trailer-item {display: inline-block; margin-right: 15px; font-weight: bold; color: #1e69ae;}
.hoverbox .trailer-item .button {color: #fff;}
.hoverbox-header {padding-left: 10px;}
.hoverbox .bookmark-button {position: absolute; bottom: 10px; right: 10px; cursor: pointer;}

.error-box {display: block; padding: 5px 10px 10px; border: 1px solid #ccc; border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; color: #111; background-color: #e3e3e3; font-weight: normal; margin: 10px 0;}
.item-list .error-message {padding: 10px 0 0 10px;}

.trailer-links {display: block; font-size: 10px; padding-top: 3px;}
.trailer-links a {border-bottom: none; margin-right: 5px;}

/* --- TABLES --- */
table {border-collapse: collapse; margin: 0; padding: 0;}
thead {background-color: #e3e3e3; border-bottom: 1px solid #cacaca;}
thead .highlight-cell {background-color: #cacaca;}
thead tr {border-top: 0;}
tbody {}
tr {border-top: 1px solid #e3e3e3;}
tr.subhead, tr.subhead td, tr.subhead th {background-color: #f3f3f3;}
tr.odd, tr.odd td {background-color: #fdfdfd;}
table.noborders tr {border: 0;}
th, td {padding: 5px 8px; text-align: left;}
td.strong, th.strong, td.item-name, th.item-name {font-size: 14px; font-weight: bold;}
td.item-name .item-descriptor {font-size: 85%;}
table.numbers-list td {vertical-align: bottom;}
table.numbers-list a {font-weight: bold;}
.final-number {text-align: right;}
td.percentage, td.number, td.small {color: #444; font-size: 90%;}
th.percentage, th.number {padding-left: 0;}
td.percentage {width: 50px;}
td.number {width: 70px;}
td.item-name {padding-right: 0;}
th {font-size: 90%; color: #111;}
tfoot th, .table-trailer {padding: 5px 8px;}

.toggle-val {display: none;}
.toggle-val-active {display: inline;}

img.item-tinypic {display: inline; margin: 0 5px -5px -3px; height: 20px; width: 20px; border: 0;}
img.item-icon {display: inline; margin: 2px 0 -2px 6px; height: 14px; width: 14px; border: 0;}
.list-with-chart {width: 410px; float: left; margin-right: 10px;}
.chart-with-list {width: 200px; float: left;}

table.tablesorter {margin-bottom: 10px;}
table.tablesorter thead {background-color: #fff; border-bottom: none;}
table.tablesorter thead tr th, tfoot tr th {background-color: #e3e3e3;}
table.tablesorter thead tr th {border: 2px solid #fff; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; cursor: pointer;}
tfoot tr {border-top-color: #ccc;}
table.tablesorter thead tr th.header {background: #e3e3e3 url(../img/controls/bg.png) no-repeat center right; cursor: pointer;}
table.tablesorter tbody td {}
table.tablesorter thead tr th.headerSortUp {background-image: url(../img/controls/asc.png);}
table.tablesorter thead tr th.headerSortDown {background-image: url(../img/controls/desc.png);}
table.tablesorter thead tr th.headerSortDown, table.tablesorter thead tr th.headerSortUp {background-color: #d3d3d3;}
table.tablesorter .item-name {font-size: 12px; text-align: left;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.table-filter-label {margin-bottom: 10px;}


/* --- MAPS --- */
.map-container {overflow: hidden;}
#map-canvas {height: 350px; border: 1px solid #ddd;}
#map-canvas {-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}


/* --- FORMS --- */
fieldset {border: 0; margin-bottom: 15px;}
label {font-size: 14px; font-weight: bold; display: block; margin-bottom: 3px;}
form a.explainer-link {margin-right: 10px;}
textarea, input.text {padding: 5px 8px; border: 1px solid #d3d3d3; border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; font-weight: normal; font-size: 12px;}
input.submit {border: 0; cursor: pointer; width: 100px;}
textarea {width: 90%; margin-bottom: 5px;}

.header-filter {float: right; font-size: 12px;}
h2 .header-filter {padding-top: 10px;}
.header-filter input.filter {padding: 2px; width: 150px;}
.header-filter input.search-submit {padding: 3px 5px; margin-left: 5px;}
input.search-submit, input.submit-preview, input.submit-submit, input.submit {color: #2d4f6d; background-color: #dbe7f0; border: 1px solid #dbe7f0; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px 8px; font-weight: bold; cursor: pointer; width: auto;}
.page-filters select, .page-filters input {margin: 0 3px;}
.page-filters .page-filter {margin-right: 10px;}
.input-bigtext {padding: 4px; font-size: 16px;}

form#filter-form select {width: 285px;}
form#filter-form input.text {width: 269px;}
form#filter-form {padding-bottom: 3px;}
form#filter-form input.submit {margin: 0 1px 3px;}

form#census-search, form#census-search select, form#census-search input {font-size: 12px;}
form#census-search #address-input {width: 180px;}




.bubble-box {width: 140px; height: 140px; margin: 0 10px; display: inline-block; overflow: hidden; position: relative; text-align: center; }
.bubble-box .bubble {display: inline-block; position: absolute; top: 50%; left: 50%; border: 1px solid #ccc; background-color: #efefef; margin: 0 auto; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; z-index: 50;}
.bubble-box:hover .bubble {background-color: #ddd;}
.bubble-box .bubble-text {color: #111; display: inline-block; position: relative; margin: 40% auto 0; font-size: 9px; z-index: 99;}
.bubble-box-stacked {height: auto; vertical-align: top;}
.bubble-box-stacked .bubble {position: relative; top: auto; left: auto; margin: 15% auto 0;}
.bubble-box-stacked .bubble-text {display: block; margin-top: 0;}



/* --- UTILITY --- */
.roundbutton {border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
.roundbox {border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
.boxshadow {box-shadow: 0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);}
.boxshadow-light {box-shadow: 0 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);}


/* --- ADS --- */
.ad-block {text-align: center; margin: 0 auto 30px;}
.ad-block-leaderboard {width: 728px; height: 110px;}
.ad-block-bigad {width: 300px;}
.ad-block-leader {font-size: 11px; color: #dbe7f0; display: block; text-align: center; padding-bottom: 3px;}
.ad {margin: 0 auto;}


/* --- MISC --- */
.full-width {width: 100%; clear: both;}
.large-type {font-size: 16px;}
.medium-type {font-size: 14px;}
.centered {text-align: center;}
.datestamp {color: #888; font-weight: normal;}
.top {margin-top: 0;}
.bottom {margin-bottom: 0;}
.big {font-size: 36px;}
.small {font-size: 10px;}
.normal {font-weight: normal;}
.left {float: left;}
.right {float: right;}
.space-above {margin-top: 20px;}
.space-below {margin-bottom: 20px;}


/********** Map-related ***********/
.map-container {
    position: relative;
}
#map-popup {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    
    padding:10px;
    width: 300px;
    height: 150px;
    position: absolute;
    bottom:25px;
    right:10px;
    z-index:1000;
    background:#fff;
    display:none;
}
#legend-box {
    height:45px;
}
#map-toggle-button {float: right; margin: -42px 0 20px 0;}
#map-filter {float: left; width: 210px; padding-top: 8px;}
#map-type-toggle {display: inline; width: 170px;}
#map-legend {
    height: 25px;
    text-align: center;
    padding: 8px 0 0 210px;
    font-size: 11px;
}
#map-legend br.clear {
    height:1px;
    margin:0;
    padding:0;
    clear:both;
}

.legend_item {
    display: inline;
    margin: 0 7px;
}
.legend_bit {
    width:5px;
    height:5px;
    display: inline;
    border: 1px solid #111;
    margin: 0 3px;
    padding:0 6px;
}
.submap {
    position:absolute;
    bottom:5px;
    left:5px;
    z-index:1000;
    width:150px;
    height:150px;
    
    border:2px solid #000;
}