#map-box ol, ul {
    list-style: none;
}

#map-box .clear{clear: both;}
#map-box .floatleft{float: left;}
#map-box .floatright{float: right;}

#map-box a:link, a:visited, a:hover{text-decoration: underline;}
#map-box a:hover{text-decoration: none;}

#map-box h2{ margin: 10px;}
#map-box .select{float: right;}

#map-box label{ width: 160px; font-weight: normal}
#map-box #counties input{float: left; padding: 3px 0 0 0; width: 25px;}
#map-box #container-map{ padding:20px; overflow:hidden}
#map-box{background-color: #9EC7F3; margin: 10px 0 10px 0;}

#map-box #areas{background: #879277; padding-right:0px; padding-top: 10px;}
#map-box #regions{color: white; padding-left:0px; }
#map-box #regions{-moz-user-select: none;} /*stops the text from hilighting in Mozilla when the user double clicks an area*/
#map-box #regions li:hover,#map-box #regions li.active{background-color: #a5b194 !important;}
#map-box #regions li{border-bottom: solid 1px #a5b194; line-height: 2em; padding: 0 5px; cursor: pointer;}
#map-box #counties{background: #a5b194; color: white; padding: 5px;}


#map-box .tip, .select{padding: 10px 5px 20px 5px;}

@media ( min-width: 767px)
{
    #map-box fieldset{clear: both; margin: 0 0 10px 0; overflow-y:auto; max-height:321px;}
    #map-box #container-map, #map-box #areas, #map-box #counties
    {
        min-height: 396px;
    }
}

@media ( max-width: 360px )
{
     #map-box #container-map
     {
         overflow:hidden;
         padding:10px 2px;
     }
}

@media (min-width: 767px) and (max-width: 1200px)
{
    #map-box #container-map{padding:10px}
}