body { margin: 0; padding: 0; background: #e7e7e7; font-family: 'Cabin', sans-serif; font-size: 16px; line-height: 23px; }
.radius { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
a { color: #0b84ab; }
a:hover { text-decoration: none; }
.clear { clear: both; }
.radius { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.box-shadow-right { -webkit-box-shadow: 5px 0px 5px 0px rgba(183,183,183,1); -moz-box-shadow: 5px 0px 5px 0px rgba(183,183,183,1); 
                   box-shadow: 5px 0px 5px 0px rgba(183,183,183,1);}
.maxwidth { max-width: 1000px; margin: 0 auto; }
div { box-sizing:border-box; }

/* ==== CORE LAYOUT ITEMS =================================================================================================================================== */
#banner-area-container { width: 100%; background: #636363; border-top: 2px solid #b3b3b3; border-bottom: 1px solid #111; }
    a.logo { width: 350px; font-size: 18px; background: #636363 url(/assets/images/logo2.png) 5px 5px no-repeat; 
       color: #111; text-indent: -20000px; margin: 0; padding: 15px; float: left; }
    .header-links { display: inline-block; float: right; }
    .header-links li { display: inline-block; padding: 0 25px 0 0; }
    .header-links li a { color: #fff; }
#top-area-container { width: 100%; }
#map-area-container { position: relative; }
    #map-area { height: 600px; max-height: 100%; background: #fff; margin: 0; position: relative; }
    #input-area { width: 400px; max-width: 96%; padding: 15px; height: auto; background: #fff; margin: 75px auto 0 auto; position: absolute; left: 0; right: 0; z-index: 10; 
                  border-radius: 15px; -moz-box-shadow: inset 0 0 2px #111; -webkit-box-shadow: inset 0 0 2px #111; box-shadow: inset 0 0 2px #111;}
    #map-directions { width: 400px; position: absolute; left: 0; display: none; 
        -moz-box-shadow: inset 0 0 2px #111; -webkit-box-shadow: inset 0 0 2px #111; box-shadow: inset 0 0 2px #111;}
#map-area-container-result { width: 100%; min-height: 600px; background: #fff; position: absolute; z-index: 1; }    
#lower-area-container { width: 100%; background: #fff url(/assets/images/overlays/dark_line_10.png); border-top: 2px solid #b3b3b3; }
    #feature-links { text-align: center; padding: 0 25px 0 0; }
        #feature-links ul { list-style: none; }
        #feature-links ul li { display: inline-block; padding: 0 0 0 25px; }
    #lower-area { padding: 40px 15px 20px 15px; }
    #lower-area h1 { font-size: 30px; }
    #lower-area img { margin: 0 20px 20px 0; padding: 5px; border: 1px solid #a5a5a5; }
#footer-container { background: #e7e7e7; color: #111; border-top: 1px solid #b3b3b3; padding: 10px; font-size: 11px; line-height: 14px; }  
    #footer-container p { padding: 2px 0; margin: 0; }
    #footer-container a { color: #111; }
.state-list { margin: 40px 0 0 0; }
.state-list li { width: 33%; float: left; padding: 0 0 8px 0; }
   
.fifty { width: 48%; padding: 0 2% 0 0; }
.floatleft { float: left; }
    
/* ==== FORM STYLING ======================================================================================================================================== */

.map-top-form { width: 525px; margin: 0 auto; padding: 15px 0 0 0; }
    .map-top-form label { display: inline-block; width: 90px; padding: 8px 0; }
    .map-top-directions { width: 350px; padding: 8px; border: 1px solid #a5a5a5; }
    .map-top-button { border: 1px solid #2a76f1; background: #488afb; color: #fff; font-weight: bold; padding: 6px 15px; font-size: 16px; text-shadow: 1px 1px #1d4a9d; }
    .map-top-button:hover { cursor: pointer; border-color: #111; }
    
.map-main-form { width: 370px; margin: 10px auto 0 auto; padding: 0; }
    .map-main-form h1 { font-size: 20px; }
    .start { background: url(/assets/mapsdirections/images/a.png) 0 10px no-repeat; 
            padding: 10px 0 10px 40px; width: 325px; position: relative; }
        .rotate { background: #ebebeb url(/assets/mapsdirections/images/rotate.png) center center no-repeat; 
                  width: 25px; height: 25px; padding: 7px; position: absolute; right: -50px; bottom: -12px; border: 1px solid #a5a5a5; }
        .rotate:hover { cursor: pointer; background: #d7d7d7 url(/assets/mapsdirections/images/rotate.png) center center no-repeat; }
    .finish { background: url(/assets/mapsdirections/images/b.png) 0 10px no-repeat; padding: 10px 0 10px 40px; width: 325px; }
    .start input, .finish input { width: 285px; padding: 8px; border: 1px solid #a5a5a5; }
    .map-main-button { border: 1px solid #2a76f1; background: #488afb; color: #fff; font-weight: bold; font-size: 18px; text-shadow: 1px 1px #1d4a9d;
            padding: 18px 0; text-align: center; width: 301px; margin: 10px 0 0 40px;}
    .button span { display: block; font-size: 15px; }
    .map-main-button:hover { cursor: pointer; border-color: #111; background: #2d78f9; }
    .disclaimer { font-size: 11px; padding: 80px 10px 0 20px; line-height: 14px; color: #a5a5a5; }
    .disclaimer a { color: #a5a5a5; }
    .disclaimer a:hover { text-decoration: none; }

@media only screen and (max-width: 600px) {
  .state-list li { width: 50%; font-size: 11px; }
    .fifty { width: 100%; }
}