/* @override http://tempu.info/static/css/marktwain.css
    http://127.0.0.1:8000/static/css/marktwain.css
    http://10.0.1.3:8000/static/css/marktwain.css
    http://www.tempu.tl/static/css/marktwain.css
    http://10.0.1.6:8001/static/css/marktwain.css
	http://tempu.tl/static/css/marktwain.css
	http://172.20.10.12:8001/static/css/marktwain.css
	http://192.168.1.109:8001/static/css/marktwain.css
*/

html{
    color: #5a5a58;
}

body{
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #f7f8f4;
    color: #5a5a58;
}

a {
    color: #666;
    font-weight: bold;
}

.climacon{
    font-size: 48px;
}

.no-show{
    display:none;
}

text.graph-rain {
    font-size: 8px;
    letter-spacing: 0;
    fill: #5a5a58;
}

div {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

text.graph-data,
text.graph-temperatures,
text.graph-x-labels,
text.graph-icons{
    fill: #5a5a58;
}

.graph-temperatures,
.graph-rain{
      font: 10px sans-serif;
      color: #ffffff;
}

.graph-x-labels{
      font: 10px sans-serif;
      color: #ffffff;
}

.graph-icons{
    font-size: 16px;
    font-family: Tempu-Info;
}
.rain-line {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
.rain-area {
    fill: lightsteelblue;
    stroke-width: 0;

}
.guess-area {
    /* fill: url(#temperature-gradient);*/
    fill: #dadada;
    stroke-width: 1px;
}
.guess-line {
    stroke:#000000;
    stroke-width: 1px;
}


div.legend-switch,
div.legend-title {
    font-size: 11px;
    text-align: center;

}

 div.legend-title i.tempu-rainfall {
    margin-right: 0;
 }

div.legend-switch{
    text-decoration: underline;
    display: none;
    
}
div.legend-title i.tempu-rainfall{
    font-size: 14px;
    text-align: center;
    /*  padding-left: 15px;*/
}
div.legend-switch i.tempu-rainfall{
    padding-top: 5px;
    font-size: 14px;
    text-decoration: underline;
    padding-left: 13px;
}


/* for a bug on the details page with long week day names*/
@media (min-width: 768px) and (max-width: 979px) {
    .span4 {
      width: 228px;
    }
    
    .span2 {
      width: 104px;
    }
    
    .row-fluid [class*="span"] {
        margin-left: 1.2624309392265194%; /*I think i see the higgs boson in this string*/
        *margin-left: 1.209239449864817%;
    }

    .row-fluid .span4 {
      width: 31.491712707182323%;
      *width: 31.43852121782062%;
    }
    .row-fluid .span2 {
      width: 15.7646408839779%;
      *width: 15.711449394616199%;
    }
}

@media (width: 768px){
    div.container-fluid.details {
        padding-left: 5px;
        padding-right: 0px;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    body{
        padding-left: 0px;
        padding-right: 0px;
    }

    div.container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

}

@media (max-width: 480px) {
    body{
        padding-left: 0px;
        padding-right: 0px;
    }

    div.container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
    div.legend-title i.tempu-rainfall {
        display: none;
    }
}

/*=========== NAVBAR AND NAV BTNS ==================*/

.navbar{
    color:0 0 0 rgba(0,0,0,0.2);
    overflow:visible;
    position:relative;
    z-index:2;      
    -moz-box-shadow: 0 0 3px #d0d0ce;
    -webkit-box-shadow: 0 0 3px #d0d0ce;
    box-shadow: 0 0 3px #d0d0ce;
    opacity: 1;
    
}

.navbar .container{
    width:auto;
}

.navbar-inner {
    min-height: 80px;
    color: #F3F8FC;
}

.nav-collapse.collapse{
    height:auto;
    overflow:visible;
    -moz-box-shadow: 0 2px 3px #3a3a38;
    -webkit-box-shadow: 0 2px 3px #3a3a38;
    box-shadow: 0 2px 3px #3a3a38;
}

#spacer-img {
    width: 170px;
    padding-right: 0px;
    margin-left: 0px;
    display: none;
}

#tempu-logo {
    color: #666;
    font-size: 33px;
}

ul.dropdown-menu li a {
    text-align: left;
}

ul.dropdown-menu li a:hover {
    background: #2dcc71;
}


ul.dropdown-menu li a:hover {
    background: #2dcc71;
}

ul.dropdown-menu.pull-right li.selected {
    color: #454645;
    padding: 3px 20px;
}

/*ul.dropdown-menu.pull-right li.selected:after {
    font: 9px FontAwesome;
    font-style: normal;
    font-weight: normal;
    content: "\f111";
    padding-left: 5px;
    display: inline;
    position: relative;
    top: 6px;
    color: #2dcc71;
    float: right;
}*/

i.active-dot {
    font: 9px FontAwesome;
    line-height: 20px;
    font-style: normal;
    font-weight: normal;
    color: #2dcc71;
    float: right;
    margin-left:-10px;

}
ul.dropdown-menu.pull-right {
    top: 54px;
    left: -127px;
    text-align: left;
}

/* drop down triangle */
ul.dropdown-menu.pull-right:before {
    content: "";
    border-style: solid;
    border-width: 0 9px 9px 9px;
    border-color: transparent transparent #666 transparent;
    height: 0px;
    position: absolute;
    left: 138px;
    top: -9px;
    width: 0px;
    -webkit-transform: rotate(360deg);
}

button.btn.map-collapse {
    display: none;
}

li.nav-header.mob-map-lang,
li.nav-header.mob-map-label {
    font-size: 13px;
}

.mob-map-label,
.mob-map-opts,
#mob-week,
#mob-today,
#mob-temp,
#mob-rain{
    display: none;
}

a.btn.dropdown-toggle {
    background: none!important;
    border: 1px solid #c9c9c6;
    font-size: 20px;
    padding-top: 12px;
    padding-bottom: 10px;
}

span.btn-group.pull-right a{
    font-weight: 300;
    background: none!important;
    border: 1px solid #c9c9c6;
    padding-top: 12px;
    padding-bottom: 12px;
    
}

div#master_toggle_temp,
div#master_toggle_rain, 
div#master_toggle_stats {
    font-weight: 300;
    background: none!important;
    border: 1px solid #c9c9c6;

}

#master_toggle_stats i.icon-info {
    font-size: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 3px;
    color: #5a5a58;
    
}

#master_toggle_temp i.tempu-clear-day {
    font-size: 25px;
    padding-right: 12px;
    padding-left: 12px;
    display: block;
    margin-bottom: -3px;
    color: #5a5a58;
}

#master_toggle_rain i.tempu-rainfall {
    font-size: 18px;
    padding-right: 12px;
    padding-left: 12px;
    display: block;
    margin-bottom: 4px;
    position: relative;
    top: 2px;
    color: #5a5a58;
}


#mobile_toggle_stats_1,
#mobile_toggle_stats_2,
#mobile_toggle_stats_3,
#mobile_toggle_stats_4,
#mobile_toggle_stats_5,
#mobile_toggle_rain_1,
#mobile_toggle_rain_2,
#mobile_toggle_rain_3,
#mobile_toggle_rain_4,
#mobile_toggle_rain_5,
#mobile_toggle_temp_1,
#mobile_toggle_temp_2,
#mobile_toggle_temp_3,
#mobile_toggle_temp_4,
#mobile_toggle_temp_5 {
    font-weight: 300;
    background: none!important;
    border: 1px solid #c9c9c6;
    padding: 5px 20px;
    position: relative;
    top: -7px;
 }


.btn-group.pull-right.weather-toggle {
    margin-right: 10px;
  
}

img.logo-text {
    width: 110px!important;
    margin-left: -4px;
}

.logo-icon{
    width: 60px!important;
    
}


@media (min-width: 768px) and (max-width: 979px) { 
        .logo-icon{
            width: 48px!important;
            margin-top: 5px;
        }
    
        img.logo-text {
            width: 80px!important;
            margin-top: 5px;
        }
        
        span.btn-group.pull-right a{
            font-weight: 300;
            background: none!important;
            border: 1px solid #c9c9c6;
            font-size: 13px;
            padding-left: 10px;
            padding-right: 10px;
        }

        span.btn-group.pull-right.weather-toggle.rain_temp_toggle {
            margin-right: 10px !important;
            
        }


}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    .btn-group.settings a.btn.dropdown-toggle {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .navbar-inner {
        min-height:65px;
        padding-left: 5px;
    }
    #nav-search {
        padding-left: 20px;
        padding-right: 21px;
    }
    div#nav-search.navbar.navbar-static-top {
        margin-right: 0;
        padding-right: 0;
    }
    span.btn-group.pull-right a{
        font-weight: 300;
        background: none!important;
        border: 1px solid #c9c9c6;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    #spacer-img {
        /*width: 170px;*/
        padding-right: 0px;
        margin-left: -34px;
        width: 100px;
    }
    
    .logo-icon{
            width: 40px!important;
    }
    
    img.logo-text {
            width: 80px!important;
        }
    
}
 
@media (max-width: 480px) {
    .navbar-inner {
        min-height: 10px!important;
        padding-left: 5px;
    }

    .logo-icon{
        width: 32px!important;
        margin-bottom: 4px;
        margin-top: 0px;
    }

    #nav-search div.navbar-inner a.brand {
        padding: 4px 14px !important;
    }

    img.logo-text {
        display: none;  
    }

    #nav-search {
        padding-left: 20px;
        padding-right: 21px;
    }
    div#nav-search.navbar.navbar-static-top {
        margin-right: 0;
        padding-right: 0;
    }
    
    div#master_toggle_temp.btn,
    div#master_toggle_rain.btn, 
    div#master_toggle_stats.btn {
        display: none;
    }
    
    .btn-group.settings {
        margin-left: 0px;
        margin-right: 2px;
    }
    span.btn-group.pull-right {
        display: none;
    }   
    .mob-map-label,
    .mob-map-opts,
    #mob-week,
    #mob-today,
    #mob-temp,
    #mob-rain{
        display: block;
    }   
    button.btn.map-collapse,
    a.btn.dropdown-toggle {
        font-size: 20px;
        padding-top: 3px;
        padding-bottom: 3px;
        color: #767776;
    }   
    .btn-group.settings a.btn.dropdown-toggle,
    a.btn.dropdown-toggle {
        background: none!important;
        border: 1px solid #c9c9c6;
        padding-right: 8px;
        padding-left: 8px;
    }
    .btn-group.settings a.btn.dropdown-toggle {
        padding-top: 3px;
        padding-bottom: 3px;
    }
    
}

/* ======== AUTOCOMPLETE & SEARCH INPUT STLYING==========*/

.autocomplete_item {
    width: 300px;
}

input#id_name.input-xlarge.search-query.autocomplete-light-text-widget {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    color: #5e5e5b!important;
    border-radius: 3px;
    margin-left: auto;
    margin-right: auto;
    padding: 11px;
    margin-top: 5px;
    background-color: #fff;
    -webkit-appearance: none;
    -webkit-box-shadow: none !important;
       -moz-box-shadow: none !important;
            box-shadow: none !important;
    border: 3px solid #e0e0df;
    
}

form.form-search.centered {
    text-align: center;
    margin-bottom: 0px;
    margin-top: 14px;
}

input#search_field.input-xlarge.search-query {
    border-radius: 3px;
    padding: 10px;
}

.empty {
    height:80px;
    width:100%;
}

::-webkit-input-placeholder {
   color: #666 !important;
 
}

::-webkit-input-placeholder:before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    padding-right: 10px;
    content: "\f002";
       
}

:-moz-placeholder { /* Firefox 18- */
   color: #666 !important;
   content: "\f002";  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #666 !important;
   content: "\f002";   
}

:-ms-input-placeholder {  
   color: #666 !important;
   content: "\f002";   
}

.weather-block {
    display: inline-block;
    width: 60px;
    height: 50px;
    float: left;
    padding: 5px 10px 10px;
    
}

.weather-info-search {
    display: inline-block;
    width: 200px;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 6px;
}

div.search-block {
    display: inline-block;
    border-bottom: 1px solid #ababa8;
    padding-top: 7px;
    width: auto;
}

div.text-search {
    border-left: 1px solid #ababa8;
    padding: 5px 10px 4px;
}

p.tmp-summary {
    color: #666;
    font-size: 12px;
    float: left;
    width: 62px;
    margin-top: -3px;
}

.weather-icon-search {
    font-size: 39px;
    color: #666;
    margin-bottom: -1px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    margin-top: -1px;
}

span.yourlabs-autocomplete {
    width: 298px;
    text-align: center;
    border: 1px solid #cccccc;
    border-radius: 3px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    margin-top: 4px;
}

div.autocomplete_item.hilight {
    width: 280px;
    background: rgb(235, 236, 235);
    margin-left: 10px;

}

.place-suffix {
    color: #666;
    font-size: 14px;
    padding-left: 4px;
    font-weight: 120;
}

p.place-parent {
    color: #000000;
    font-size: 12px;
    margin-bottom: 0;
    font-weight: 300;
}

a.location-search {
    text-transform: uppercase;
    color: #27a226;
}

a.location-search:hover {
    text-decoration: none;
}

.autocomplete_item {
    width: 300px;
}

/*.hilight p.place-parent,
.hilight p.tmp-summary,
.hilight .place-suffix,
.hilight div.climacon{
    color: white;
}
.hilight a.location-search {
    color: white;
}*/

.hilight p.place-parent {
    color: #000000;
}

/*.hilight div.text-search {
    border-left: 1px solid #fff;
}*/

.yourlabs-autocomplete .choice, .yourlabs-autocomplete [data-value], .yourlabs-autocomplete em,
.yourlabs-autocomplete .hilight{
    padding: 0px;
    
}

.yourlabs-autocomplete em {
    font-weight: 400px;
    font-style: normal;
}

#spinner{
    font-size: 16px;
    color: white;
    margin-left: -20px;
    margin-right: 10px;
    position: relative;
    top: 5px;
    right: 9px;
}


/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    input#id_name.input-xlarge.search-query.autocomplete-light-text-widget {
        width: 192px;
    
    }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    input#id_name.input-xlarge.search-query.autocomplete-light-text-widget {
        width: 190px;
        float: center;
        box-shadow: none!important;
        margin-top: 4px;
    }
    .weather-block {
        display: inline-block;
        width: 50px;
        height: 50px;
        float: left;
        padding: 5px 15px 10px 5px;
        
    }
    span.yourlabs-autocomplete {
        width: 230px;
    }
    div.autocomplete_item.hilight {
        width: 230px;
        margin-left: 0px;
    }
    div.search-block {
        width: 230px;
    }
    
    .place-suffix {
        font-size: 13px;
    }

    .autocomplete_item {
        width: 230px;
    }
    
    form.form-search.centered {
        margin-top: 2px;
        margin-left: 0px;       
    }
    div.leaflet-control-zoom.leaflet-bar.leaflet-control {
        display: none;  
    }   
}

/* ============== Home Page Map =============== */

.legend {
    padding: 4px 4px;
    font: 10px sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    line-height: 18px;
    color: #555;
}

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

#map{
    margin: 0px 0px 0px 0px;
    padding: 0px;
    width: 100%;
    z-index: 0;
    height: 455px; /*430*/ /* if smaller than 510 atauro and oe-cussi are cut */
    border-bottom: 1px solid #c9c9c6;
}

#choices {
    /*  width: 100%;*/
    height: 46px;
    border: 1px solid #cbcbc8;

}

.toc{
    margin-top: 10px;
    text-align: center;
}

.toc form{
    display: inline;
}

.forecast{
    cursor: pointer;
    border: 10px;
    float: left;
    height: 20px;
    text-align: center;
}

.forecast.daily{
    min-width: 14.1%;
    padding: 13px 0;
    font-weight: 200;
    border-right: 1px solid #cbcbc8;
    color: #666;
    text-transform: uppercase;
}

.forecast.hourly{
    min-width: 8.2%;
    padding: 13px 0;
    font-weight: 300;
    border-right: 1px solid #cbcbc8;
    color: #666;
    text-transform: uppercase;
}

.forecast{
    color: #33cc33;
}

.highlighted{
    background-color: none;
    border-color: #666;
    color: ;
}

/*--- START details TEMP*/


div.ui.button {
    padding: 10px 20px;
}
 
#temp_gap { /*temporary to be fixed.*/
margin-right: -40px;

}
#mobile_toggle_temp_1 i.tempu-clear-day,
#mobile_toggle_temp_2 i.tempu-clear-day,
#mobile_toggle_temp_3 i.tempu-clear-day,
#mobile_toggle_temp_4 i.tempu-clear-day,
#mobile_toggle_temp_5 i.tempu-clear-day {
    font-size: 19px;
    position: relative;
    top: 2px;
}
#mobile_toggle_stats_1,
#mobile_toggle_stats_2,
#mobile_toggle_stats_3,
#mobile_toggle_stats_4,
#mobile_toggle_stats_5 {
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 8px;
}

i.icon-info {
    position: relative;
    top: 2px;
    color: #5a5a58;
}

#mobile_toggle_rain_1,
#mobile_toggle_rain_2,
#mobile_toggle_rain_3,
#mobile_toggle_rain_4,
#mobile_toggle_rain_5 {
    padding-bottom: 8px;
}

#mobile_toggle_rain_1 i.tempu-rainfall,
#mobile_toggle_rain_2 i.tempu-rainfall,
#mobile_toggle_rain_3 i.tempu-rainfall,
#mobile_toggle_rain_4 i.tempu-rainfall,
#mobile_toggle_rain_5 i.tempu-rainfall {
    position: relative;
    top: 2px;
    color: #5a5a58;
}


span.centered {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    display: none;
    
}
div.sides,
div.rain.sides,
div#more-details.details.side {
        min-height: 185px!important;
    
}

div.tipsy-inner {
    background-color: #ebeceb;
    border: 1px solid #e2e1e1;
    color: #5a5a58;
    font-size: 12px;
    text-align: left;

}

div.tipsy.tipsy-s {
    margin-top: -2px;
}

.tipsy-arrow.tipsy-arrow-s {
    border-top-color: #5a5a58;

}

div.rain.side.active {
    height: 185px;
}

/*RAIN OR NO RAIN DETAILS BOX*/

span.percent_box {
    display: inline-block;
    margin: 15px 10px -8px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

span.rain-icon i.tempu-rainfall {
    float: left;
    color: #5a5a58;
}

#brolley_icon i.tempu-rainfall {
    font-size: 49px;
    padding-top: 7px;
    display: inline-block;
    float: right;
    width: 44%;
    color: #acacaa;
}

span.rain-value.rain_chance {
    font-size: 28px;
    padding-top: 10px;
    padding-bottom: 5px;
    color: #6193bc;
    font-weight: 300;
    width: auto;
    letter-spacing: 1px;
    padding-left: 2px;
}

span.rain-value.rain_chance.no_chance {
    font-size: 35px;
    padding-top: 10px;
    padding-bottom: 5px;
    color: #6193bc;
    font-weight: 200;
    width: auto;
    float: left;
    letter-spacing: 0;
    line-height: 23px;
    text-transform: uppercase;
    margin-top: 20px;
    margin-right: -8px;
    padding-right: 1px;
}

#brolley_icon img {
    width: 60px;
    padding-top: 11px;
    margin-top: 15px;
    margin-left: -5px;
}

div.slide.rain.cycle-slide {
    width: 100%;
}

h4#no_chance_rain {
    font-size: 22px;
    margin-top: 6px;
    font-weight: 200;
    color: #868683;
    
}

h4#chance_of_rain {
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    font-weight: 300;
    color: #5a5a58;
    letter-spacing: -1px;
    margin-left: -2px;
    line-height: 12px;
    padding-left: 2px;
}


span.rain-value_1,
span.rain-value_2,
p.rain-fall {
    font-size: 14px;
    font-weight: 300;
    color: #454543;
    display: inline-block;
    width: 100%;
    padding-left: 1px;
    text-align: right;
}

span.rain-value_1 {
    border-top: 1px solid #c5c5c5;
    padding-top: 5px;
}

span.rain-value_2 {
    position: relative;
    top: -3px;
}


div#master_toggle_temp.btn,
div#master_toggle_rain.btn, 
div#master_toggle_stats.btn {
    font-weight: 300;
    background: none!important;
    border: 1px solid #c9c9c6;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 20px;
    padding-right: 20px;
}

i.icon-info {
    color: #777272;
    
    
}

/*--- END details TEMP*/

.forecast.highlighted{
    color: #fff;
    font-weight: 400;
    background-color: #2dcc71;
    border-color: #2dcc71;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    
}

i#disclosure.icon-angle-up {
    position: relative;
    top: -2px;
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
    #map{
        height: 440px!important;
    }
    div#umbrella.ui.button ,
    div#details_stat_temp.ui.button,
    div#details_stat_icon.ui.button {
        padding: 12px 12px 9px;
        font-size: 14px;
        
    }
    
    span.percent_box {
        display: inline-block;
        margin: 15px 10px -8px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    span.rain-value.rain_chance {
        float: left;
        font-size: 26px;
    }
    h4#chance_of_rain {
        font-size: 18px;
    }

    #brolley_icon i.tempu-rainfall {
        font-size: 44px;
        width: auto;
        margin-top: 3px;
    }

    span.rain-value_1,
    span.rain-value_2 {
        font-size: 12px;
        text-align: left;
    }
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    #map{
        height: 440px;
    }
    
}


@media (max-width: 480px){
    #map{
        height: 200px;
    }
    #temp_gap { /*temporary hack to be fixed.*/
        display: none;
    }
    
    span.centered {
        margin-left: auto;
        margin-right: auto;
        display: block;
        text-align: center;
        position: relative;
        
    }
    div.ui.basic.buttons.toggle {
        position: relative;
        top: -8px;
    }

    #choices {
        height: 35px;
    
    }
    .forecast.hourly{ 
        padding: 8px 1px 8px 0px;
        
    }
    .forecast.daily{
        min-width: 14%;
        padding: 8px 0;
        font-size: 10px;
        font-weight: 400;
    }
    .legend {
        width: 35px;
        padding-right: 0;
        padding-left: 4px;
        line-height: 16px;
        
    }
    .legend i {
        width: 7px;
        height: 16px;
        margin-right: 6px;
    }
    
    .leaflet-bottom .leaflet-control {
        margin-bottom: 0px!important;
    }
    
    div.leaflet-control-attribution.leaflet-control {
        display: none;
    }
    
    div.weather-chart-5.ui.shape
    div.weather-chart-4.ui.shape,
    div.weather-chart-3.ui.shape,
    div.weather-chart-2.ui.shape,
    div.weather-chart-1.ui.shape {
        margin-top: 30px;
        height: 185px;
    }  
    span.percent_box {
        display: block;
        margin: 15px 10px -8px;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    span.rain-value_1,
    span.rain-value_2 {
        font-size: 15px;
        text-align: left;
    }

    span.rain-value.rain_chance.no_chance {
        margin-left: 20px;
    }

   
}

@media (max-height: 320px){
    #map{
        height: 200px;
    }
    #choices {
        height: 35px;
    
    }
    .forecast.hourly{ 
        padding: 8px 1px 8px 0px;
        
    }
    .forecast.daily{
        min-width: 14%;
        padding: 8px 0;
        font-size: 10px;
        font-weight: 400;
    }
    .legend {
        width: 35px;
        padding-right: 0;
        padding-left: 4px;
        line-height: 16px;
        
    }
    .legend i {
        width: 7px;
        height: 16px;
        margin-right: 6px;
        
    }
    
    div.leaflet-control-attribution.leaflet-control {
        display: none;
}
}


/*-----------????----------*/
.key path {
  display: none;
}

.content{
    width: 1200px;
    margin: auto;
}

.content_details{
    width: 1000px;
    margin: -11px auto auto;
}

/* ============= Home Page ============*/

h1#main-welcome {
    text-align: center;
    font-weight: 100;
    margin-top: 20px;
    margin-bottom: 5px;
}

p#date_part {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 40px;
    font-weight: 200;
    font-size: 16px;
}

/*district-breakdown*/

div.span7.district_breakdown {
    border-top: 1px solid #c9c9c6;
    margin-left: 0px;

}

div.mainpage-districts {
    padding-top: 10px;
    padding-bottom: 10px;
}

.district-block{
    height: 35px;
    width: 100%;
    padding-top: 10px;
    border-bottom: 1px solid #c9c9c6;
    display: inline-block;
}
.weather-block-district.pull-left {
    display: inline-block;
    padding-right: 20px;
}

div.weather-icon-capitals {
    font-size: 35px;
    margin-top: -5px;
    margin-left: 15px;
}

.weather-icon-capitals{
    float: left;
    height: 25px;
    font-size: 30px;
}

.District-Title {
    font-size: 25px;
    padding-left: 20px;
    font-weight: 100;
    color: #666;
    
}

a.location-home {
    font-weight: 300;
    color: #27a226;
    text-transform: uppercase;
}

.district-parent {
    float: right;
    font-weight: 200;
    font-size: 16px;
    color: #5a5a58;
    overflow: auto;
}

.tmp-summary-district {
    border-left: 1px solid #c9c9c6;
    font-size: 20px;
    font-weight: 200;
    padding-left: 20px;
}

.credits {
    margin-top: 20px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 200;
}

.credits a{
    font-weight: 400;
    
}
.credits a:hover{
    color: #26a226;
    text-decoration: none;
    
}


/*weatherbox*/

#weather-box {  
    border: 1px solid #c9c9c6;
    padding: 30px;
    margin-bottom: 30px;
    height: 548px;
    color: #666;
}

.weather-icon-big {
    font-size: 150px;
    margin-bottom: 7px;
    margin-right: -27px;
    margin-top: -5px;
}

.weather-icon-big {
    text-align: right;
    font-size: 150px;
}

p#today-home {
    font-size: 23px;
    font-weight: 100;
    text-align: right;
    padding-top: 10px;
    line-height: 33px;
}


div.tmp-summary-home {
    text-align: right;
    font-size: 57px;
    font-weight: 200;
    padding-top: 26px;
    padding-bottom: 15px;
    float: right;
}

#weather-box div.details-box {
    width: 80%;
    float: right;
}

span.rain-umbrella i.tempu-rainfall {
    float: left;
    color: #656665;
}


i.tempu-sunup {
    font-size: 18px;
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 480px) and (max-width: 830px) { 
    div.tmp-summary-home {      
        font-size: 52px;
    }
}

#today-location {
    font-size: 61px;
    font-weight: 900;
    padding-left: 10px;
}

p.wbox-description {
    width: 70%;
    font-size: 30px;
    padding-top: 20px;
    float: right;
    font-weight: 200;
    line-height: 33px;
    text-align: right;
    display: inline-block;
}

p.weather-box-link {
    float: none;
    text-align: right;
    clear: right;
    padding-top: 74px;
    
}

p.weather-box-link a{
    color: #26a226;
    font-weight: 400;
}

p.wbox-description {
    width: 80%;
    font-size: 22px;
    padding-top: 10px;
    border-bottom: 1px solid #c9c9c6;
    padding-bottom: 10px;   
}

p.rain-fall.box-main {
    padding-top: 4px;
}

#today-wind-bearing {
    font-weight: 300;
    font-size: 16px
}

p.rain-fall.box-main, 
p.humdity-value.main-box {
    margin-bottom: 0;
    padding-bottom: 4px;
    font-size: 16px;
    clear: both;
    
}

.main-box span.humdity-title {
    font-size: 16px;
    float: right;
}

.box-main span.rain-value {
    font-size: 16px;
    color: #65656d;
}
.span7.sign-up,
.span5.about-us,
.row-fluid.bottom-block {
    min-height: 300px;
}

div.row-fluid.bottom-block {
    margin-top: 15px;
}

p#logo-centered {
    text-align: center;
}

p#attribution {
    font-size: 18px;
    font-weight: 200;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dbdbda;
}

#our-logo img {
    width: 215px;   
}

p.babble {
    padding: 50px;
    
}

.twitter,
.facebook,
.website {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
}
.twitter:hover,
.facebook:hover,
.website:hover {
    cursor: pointer;
    text-decoration: none;
    color: #2dcc71;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.twitter {
    padding: 13px 14px;
    border-radius: 50px;
    font-size: 20px;
}

p#follow_us {
    text-align: center;
    font-weight: 100;
    font-size: 13px;
}

.facebook {
    border-radius: 50px;
    font-size: 20px;
    margin-right: 20px;
    margin-left: 20px;
    padding: 13px 19px;
}

p#social-links {
    text-align: center;
    padding-bottom: 15px;
}

.website {
    padding: 13px 14px;
    border-radius: 50px;
    font-size: 20px;
}


/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
    p#today-home {
        font-size: 17px;
        padding-top: 7px;
        line-height: 28px;
        margin-top: -9px;
    }
    .weather-icon-big {
        font-size: 120px;
        margin-bottom: 7px;
        margin-right: -27px;
        margin-top: -5px;
    }
    .District-Title {
        padding-left: 14px;
    }
    .tmp-summary-district {
        padding-left: 14px;
    }
    
    .weather-block-district.pull-left {
        padding-right: 14px;
    }
    
    a.location-home {
        font-size: 21px;
        letter-spacing: -1px;
    }
    .district-parent {
        letter-spacing: -1px;
    }
    #today-location {
        font-size: 55px;    
    }
    
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    #weather-box {  
        height: 450px;
        padding-top: 0px;
    }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    h1#main-welcome {
        margin-bottom: 10px;
        font-size: 30px;
        margin-top: 10px;
        font-weight: 300;
    }
    
    .weather-icon-big {
        font-size: 120px;
        margin-bottom: 10px;
        margin-right: -19px;
        margin-top: 11px;
    }
    p#date_part {
        text-align: center;
        margin-top: -10px;
        font-weight: 200;
        margin-bottom: 15px;
    }
    #weather-box {  
        height: 405px;
        padding-top: 0px;
        padding-bottom: 5px;
    }
    p#today-home {
        font-size: 17px;
        padding-top: 7px;
        line-height: 28px;
        margin-top: -14px;
    }
    #today-location {
        font-size: 45px;
        position: relative;
        top: 3px;
    }
    p.weather-box-link {
        padding-top: 0;
    }
    div.tmp-summary-home {
        font-size: 47px;
        padding-top: 9px;
        padding-bottom: 9px;
    }
    p.wbox-description {
        width: 100%;
        font-size: 18px;
        padding-top: 15px;
        border-bottom: 1px solid #c9c9c6;
        padding-bottom: 15px;
        line-height: 21px;
    }
    .tmp-summary-district {
        padding-left: 10px;
    }
    .weather-block-district.pull-left {
        padding-right: 10px;
    }
    div.weather-icon-capitals {
        margin-left: 0px;
    }
    .district-parent {
        display: none;
    }
    .District-Title {
        padding-left: 10px;
    }
    a.location-home {
        font-size: 20px;
        letter-spacing: -1px;
    }
    p.rain-fall.box-main {
        padding-top: 3px;
        
    }
    p.rain-fall.box-main, 
    p.humdity-value.main-box {
        margin-bottom: 0;
        padding-bottom: 4px;
        font-size: 15px;
    }
    .main-box span.humdity-title {
        font-size: 15px;
    }
    .box-main span.rain-value {
        font-size: 14px;
    }
    #weather-box div.details-box {
        width: 100%;
        float: right;
    }
    
        
}


div.span12.bottom-block {
    background-color: #dbdbdb;
    height: 200px;
    margin-top: 20px;
}

#dateTitle{
    margin: auto;
    text-align: center;
    padding: 10px;
}

/* ============   DETAILS PAGE  =============*/

#details-location {
    text-align: center;
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 20px;
}

#details-sublocation {
    font-weight: 200;
    font-size: 20px;
    padding-left: 8px;
    clear: both;
    display: inline-block;
}

.day_of_week {
    letter-spacing: -1px;
    font-weight: 400;
    font-size: 17px;
    line-height: 26px;
    border-bottom: 1px solid #7f8c8d;
}

.date {
    float: right;
    font-weight: 200;
    padding-right:2px;
}

.details-temp-high,
.details-temp-low {
    float: right;

}
.details-temp-high{
    font-size: 32px;
    font-weight: 100;
    display: inline-block;
}

.details-temp-low {
    /*font-size: 18px;*/
    font-size: 21px;
    clear: right;
    position: relative;
    top: 8px;
    font-weight: 100;
}

.details-text {
    padding-bottom: 5px;
    padding-top: 15px;
    min-height: 80px;
    font-weight: 300;
    font-size: 15px;
    text-align: right;
    border-bottom: 1px solid #c5c5c5;
    margin-bottom: 10px;
}

.humdity-value {
    padding-bottom: 15px;
    padding-top: 15px;
    font-size: 25px;
    font-weight: 300;
}

.details-humidity {
    border-bottom: 1px solid #c5c5c5;
}


.highlighted div.day_of_week,
.highlighted .day_of_week {
    background: rgb(236, 236, 236);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

p.humidity-value {
    font-size: 18px;
    font-weight: 300;
    padding-top: 8px;
    padding-bottom: 8px;
}

span.humidity-title {
    text-align: right;
    float: right;
    font-size: 18px;
    font-weight: 300;
}

.other-details {
    border-bottom: 1px solid #c5c5c5;
    padding: 14px 3px 30px;
}

div#side-stats-5.stats.cycle-slide,
div#side-stats-4.stats.cycle-slide,
div#side-stats-3.stats.cycle-slide, 
div#side-stats-2.stats.cycle-slide,
div#side-stats-1.stats.cycle-slide {
    width: 100%;
}

p.wind-details {
    text-align: right;
    font-weight: 300;
    margin-bottom: 1px;
    
}

span.text.wind-bearing {
    margin-right: 3px;

}

span.text.wind-bearing:after {
    content: "  -";
    
}

.wind_dir {
    float: left;
    font-size: 20pt;   
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .wind_dir { font-size: 13pt; }

}


.down-time,
.up-time,
.rain-value,
.wind-speed {
    float: right;
    font-weight: 300;
    font-size: 16px;
    color: #5a5a58;
    
}

.down-time {
    clear: right;
 
}

.details-icon {
/*  padding-top: 1px;*/
    padding-top: 18px;
}

div#centered-collapse {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 20px;
}


button.btn.btn-custom {
    border-radius: 40px;
    background: none!important;
    border: 1px solid #c9c9c6;
    font: 40px 'Source Sans Pro', sans-serif;
    padding: 0 13px;
    color: #767776;
}

p.rain-fall,
p.wind-details {
    margin-bottom: 3px;

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
/*      span.climacon.climacon {
            width: 40px;
        }*/
        .details-temp-high {
            font-size: 32px;
        }
        .details-temp-low {
            font-size: 21px;
            clear: right;
            position: relative;
            width: 40px;
            top: -28px;
           
        }
        #data_column_1 div.details-icon span.details-temp-low {
            position: relative;
            top: 1px;
            
        }    
        .weather-text {
              float: right;
              padding-top: 0px;
              margin-top: 0;

        }
        
}


@media (min-width: 903px) and (max-width: 979px) {
    .details-temp-low {
        top: -28px;
        /*width: 40px;*/

    }
}

@media (min-width: 966px) and (max-width: 979px) {
    span.climacon.climacon {
        width: 40px;
        margin-right: -7px;
    }
    .details-temp-low {
        top: 1px;
        /*width: 40px;*/
    }
}


@media (min-width: 980px) and (max-width: 1026px) {
    span.climacon.climacon {
        margin-right: -7px;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
        #details-location {
            margin-top: 10px;
            margin-bottom: 5px;
            font-weight: 300;
        }
        .weather-text {
            font-size: 18px;
            float: right;
            padding-top: 0px;
            margin-top: 0;
        }
        .weather-text {
            text-align: right;  
        }
        .details-humidity,
        .details-text,
        .details-icon {
            border-bottom: none;
        }
        .details-icon {
            padding-top: 10px;
            padding-bottom: 5px;
            
        }   
        .details-humidity {
            padding-top: 6px;
            padding-left: 5px;  
        }
        .details-text {
            padding-top: 3px;
            min-height: 30px;
            padding-bottom: 3px;
            position: relative;
            top: -10px;
        }
        .day_of_week {
            font-size: 20px;
            padding-top: 1px;
            padding-bottom: 3px;
            font-weight: 300;   
        }
        .date {
            font-size: 19px;
            padding-top: 0;
        }
        .details-temp-low,
        .details-temp-high{
            font-size: 32px;
            padding-left: 0px;
            padding-right: 0px;
        }   
        .details-temp-low {
            position: relative;
            top: -20px;
            left: -64px;
        }
        .details-temp-high {
            margin-top: 11px;
        }   
        .details-temp-low:after {
            content: ' -';
        }
        .humdity-title,
        p.humdity-value {
            font-size: 14px;
            padding-top: 0;
            padding-bottom: 0;
            font-weight: 300;
            margin-bottom: 3px;
        }
        .other-details {
            padding-top: 0;
            padding-bottom: 17px;
            border-bottom: none;
            padding-left: 6px;
            margin-bottom: 11px;
        }
        p.rain-fall,
        p.wind-details {
            margin-bottom: 3px;
        }
}


/* Landscape phones and down */
@media (max-width: 480px) {
    #details-location {
        margin-top: 10px;
        margin-bottom: 5px;
        font-weight: 300;
    }
    .weather-text {
        font-size: 18px;
        float: right;
        padding-top: 0px;
        padding-left: 5px;
    }
    .weather-text {
        text-align: right;  
    }

    .details-humidity,
    .details-text,
    .details-icon {
        border-bottom: none;
    }
    .details-icon {
        padding-top: 10px;
        padding-bottom: 5px;
    }   
    .details-humidity {
        padding-top: 6px;
        padding-left: 5px;  
    }
    .details-text {
        padding-top: 3px;
        min-height: 30px;
        padding-bottom: 3px;
        position: relative;
        top: 4px;
        margin-bottom: 20px;
    }
    .day_of_week {
        font-size: 24px;
        padding: 4px 5px 8px;
        font-weight: 300;
        margin-top: 20px;
        margin-bottom: 5px;
    }
    .date {
        font-size: 22px;
        padding-top: 0;
        position: relative;
        top: 1px;
    }
    .details-temp-low,
    .details-temp-high{
        font-size: 40px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .details-temp-low {
        position: relative;
        top: -20px;
        left: -81px;
    }
    .details-temp-high {
        margin-top: 11px;
    }   
    .details-temp-low:after {
        content: ' -';
    }
    .humdity-title,
    p.humdity-value {
        font-size: 14px;
        padding-top: 0;
        padding-bottom: 0;
        font-weight: 300;
        margin-bottom: 3px;
    }
    .other-details {
        padding-top: 0;
        padding-bottom: 17px;
        border-bottom: none;
        padding-left: 6px;
        margin-bottom: 0px;
    }
    p.rain-fall,
    p.wind-details {
        margin-bottom: 3px;
        
    }
    div#umbrella.ui.button ,
    div#details_stat_temp.ui.button,
    div#details_stat_icon.ui.button {
        padding: 12px 25px;
        font-size: 14px;
        
    }
}


/* ========= Details map & popup ========== */

.leaflet-div-icon {
    color: #59c138; 
}
.leaflet-popup-content .climacon{
    float: left;
    margin-right: 10px;
}

.desc{
    font-family: 'Source Sans Pro', sans-serif;
    margin-left: 52px;
    padding-left: 6px;
}

div.desc b {
    text-transform: uppercase;
}

div.desc a {
    color: #26a226; 
    font-weight: 400;
    text-transform: capitalize;
}

div.leaflet-popup-content-wrapper {
    border-radius: 12px;
}

a.leaflet-popup-close-button {
    margin-top: 2px;
}

.icon-for-map{
    margin-left: -5px;
    margin-top: -40px;
    width: 40px;
    height: 40px;
    color: #59c138;
}

#icon-weather {
    font-size: 4.5em;
}

#map div.leaflet-map-pane div.leaflet-objects-pane div.leaflet-marker-pane div.leaflet-marker-icon.icon-for-map.leaflet-clickable.leaflet-zoom-animated a {
    color: #6a6868;
    font-size: 60px;

}

.icon-for-map a{
    color: #666;
    text-decoration: none;
    
}

.icon-for-map div#icon-wind{
    font-size: 30px;
    margin-top: 8px;
    margin-left: 8px;
    float: right;
    width: 20px;
    color: #249500;
    display: none;
}

#map.details_map{
    padding: 0px;
    width: 100%; 
    height: 300px;
}

@media (max-width: 480px) {
    #map.details_map{
        padding: 0px;
        width: 100%; 
        height: 200px;
    }
}
/* Landscape phones and down */
@media (max-height: 320px) {
    #map{
        padding: 0px;
        width: 100%;
        height: 200px;
    }
}