* {
    font-family: "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑",
    "Helvetica Neue",Helvetica,Arial,sans-serif,serif;
}

html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map_canvas {
    height: 100%
}

#panel {
    position: absolute;
    bottom: 0;
    left: 0%;
    width: 100%;
    z-index: 5;
    background-color: #fff;
    /*padding: 5px;*/
    opacity: 0;
}

@media screen and (max-width: 400px) {
    /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    #panel {
        left: 50%;
        width: 60%;
        margin-left: -30%;
    }
}

#time {
    font-size: 14px;
    display: block;
    text-align: center;
    width: 84px;
    padding: 2px 6px;
    margin: auto;
    margin-top: 8px;
    color: #ffffff;
    background: #5ebb8d;
    border-radius: 10px;
    font-weight: 100;
}

#slider {
    margin-bottom: 2px;
    margin-top: 8px;
}

#switch {
    float: left;
    display: inline;
    width: 60px;
    /*margin-top: 4px;*/
    /*margin-bottom: 4px;*/
    cursor: pointer;
}

#slider_timer {
    margin-left: 70px;
    margin-right: 20px;
    width: auto;
    position: relative;
}

#splash {
    display: table;
    text-align: center;
    border: 1px solid #d3d3d3;
    background: #fff;
}

#splash span {
    display: table-cell;
    vertical-align: middle;
}

#loading {
    display: block;
    margin: auto;
    width: 200px;
}

#tabs {
    position: absolute;
    top: 77px;
    left: 50%;
    /*width: 320px;*/
    /*z-index: 5000;*/
    /*font-size: 16px;*/
    /*font-family: "Pictos";*/
    margin-left: -130px;
}

#tabs li {
    opacity: 0.8;
    float: left;
    width: 130px;
    letter-spacing: 0.5px;
    padding-top: 8px;
    text-align: center;
    height: 36px;
    /*line-height: 20px;*/
    font-size: 14px;
    /*background: transparent;*/
    background: white;
    color: #333333;
    cursor: pointer;
    text-decoration: none;
    -webkit-box-shadow: 1px 0px 10px 1px rgba(0, 0, 0, 0.1), transparent 0 0 0;
    -moz-box-shadow: 1px 0px 10px 1px rgba(0, 0, 0, 0.1), transparent 0 0 0;
    box-shadow: 1px 0px 10px 1px rgba(0, 0, 0, 0.1), transparent 0 0 0;
}

#tabs a {
    font-size: 14px;
    vertical-align: middle;
    text-decoration: none;
}

#a-weather{
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-right:0;
    /*border-left:1px solid #ddd;*/
}

/*#tabs ul>li:first-of-type{*/
    /*border-bottom-left-radius: 5px;*/
    /*-webkit-border-bottom-left-radius: 5px;*/
    /*-moz-border-radius-bottomleft: 5px;*/
    /*border-top-left-radius: 5px;*/
    /*-webkit-border-top-left-radius: 5px;*/
    /*-moz-border-radius-topleft: 5px;*/
    /*border-right:0;*/
    /*!*border-left:1px solid #ddd;*!*/
/*}*/

#tabs ul>li:last-of-type{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-topright: 5px;
    border-left:0;
    /*border-right:1px solid #ddd;*/
}

#tabs li.active {
    background: rgb(82, 178, 131);
    border: 1px solid rgb(82, 178, 131);
    color: white;
}

.overview_container .section.currently .current_container .more .temps {
    position: absolute;
    left: 156px;
    right: 0;
    width: 135px;
    margin-top: 4px;
}
.overview_container .section.currently .current_container .more .temps .high_low {
    margin-top: 12px;
}
.overview_container .section.currently .current_container .more .table {
    position: absolute;
    left: 0;
    right: 0;
    width: 146px;
    border-right: 1px dashed #666;
}
.overview_container .section.currently .current_container .more .label {
    display: inline-block;
    width: 68px;
    font-family: "AvenirNextCondensed-Bold", "AvenirNextLTW01-BoldCn", "Arial Narrow", Verdana, sans-serif;
    text-align: left;
}
.overview_container .section.currently .current_container.show_more .more {
    opacity: 1;
}
.overview_container .section.currently .current_container.show_more .less {
    opacity: 0;
}
.overview_container .section.currently .more_button {
    font-size: 20px;
    position: relative;
    top: -2px;
    left: 6px;
    opacity: 0.15;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
}
.overview_container .section.currently:hover .more_button {
    opacity: 0.9;
}
.overview_container.precip .section.currently {
    margin-top: -10px;
}
.overview_container.precip .section.next_hour {
    margin-bottom: 20px;
}

#address {
    font-size: 14px;
    color: #999;
    position: absolute;
    right: -40px;
    top: 20px;
}

#location-icon {
    position: absolute;
    width: 15px;
    left: 6px;
    top: 21px;
    z-index: 99;
}

#overview_inner {
    background: white;
    display: table;
    opacity: 0.9;
    padding-left: 30px;
    padding-right: 50px;
    padding-bottom: 31px;
    /*border:1px solid #ddd;*/
    -webkit-box-shadow: 2px 0px 10px 2px rgba(0, 0, 0, 0.1), transparent 0 0 0;
    -moz-box-shadow: 2px 0px 10px 2px rgba(0, 0, 0, 0.1), transparent 0 0 0;
    box-shadow: 2px 0px 10px 2px rgba(0, 0, 0, 0.1), transparent 0 0 0;
    border-radius:5px;
}

.overview_container .section h2 {
    width: 100%;
    line-height: 40px;
    font-size: 16px;
    text-align: left;
    color: #999;
    line-height:1.5;
    margin-top: 8px;
    margin-bottom: 8px;
}
.overview_container .section .desc {
    color: #48494A;
    font-weight: 200;
    font-size: 14px;
    text-align: center;
    width: 275px;
}
.overview_container .section.currently .desc {
    line-height: 1.2em;
    margin-top: 10px;
}
.overview_container .section.currently .temp {
    display: inline-block;
    margin-top: 42px;
    font-size: 50px;
    /*font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;*/
    line-height: 0;
    height: 0;
    margin-left: 10px;
}
.overview_container .section.currently .temp .dir {
    position: relative;
    left: -18px;
    top: -7px;
    display: inline-block;
    font-size: 17px;
    line-height: 0;
    font-family: "Pictos";
}

.has_avenir .overview_container .section.currently .temp {
    line-height: 1.25em;
    margin: 7px 0 0 10px;
}

#search_area > .inner {
    margin: 5px 0 10px;
}
#search_area .location_controls {
    display: block;
    position: relative;
}
#search_area .location_field {
    font-size: 15px;
    border: 0;
    height: 30px;
    line-height: 30px;
    color: #494A4B;
    background-color: #ffffff;
    padding: 1px 0 0 3px;
    text-align: center;
    float: left;
    width: 236px;
    border-radius: 5px;
    -webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.25), transparent 0 0 0;
    -moz-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.25), transparent 0 0 0;
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.25), transparent 0 0 0;
}

#search_area .submit_button {
    position: relative;
    z-index: 9999999;
    margin-left: 4px;
    height: 30px;
    width: 40px;
    font-family: "Pictos";
    font-size: 18px;
    color: #FFF;
    text-align: center;
    line-height: 24px;
    font-weight: bold;
}

body.tablet #search_area .buttons .time_machine_modal {
    -webkit-transition: opacity 0s linear;
    -moz-transition: opacity 0s linear;
    -o-transition: opacity 0s linear;
    transition: opacity 0s linear;
}
.location_controls .clear {
    display: none;
    position: absolute;
    top: -1px;
    left: 348px;
    width: 32px;
    height: 32px;
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACJElEQVR42tWZzWrCQBDHe/Ao+BRtT/okpbTnts/g10tVjyoo+PEEWupB7+I1KhpRbIXp/GFhg9bdJLNJbeB3MGZmfsTs7Ga9IaKrJnZgo9HIMyWmznwyC+agWKhzdXVNPg1BSGWZCjNhKCITFZt1LQixDFNkPIaEeCpXRiao5W6ZIUOOGSK3RBByD8yaoYTYoEYcQci9MN8MJQxqvEYRhNwjc2QoJY6oaRbUcvfq1lPKbFDbKIiRJRoQcoZwMAkWbUna7ba5iDy2dCKom7Ctz81mM8KxWq2o2+2GFuv3+7RerxGKHGH6ZPY3wYopEELBY7fbKUm73H6/D4aGiaucCdqmr1arBakzyV6vF0UOMchlnRaDgpArMLHuhpa0X4vPOB+mFpyCgiVbgKUwJF3KgXJQ8J0hB5JyOU0tKDhmyIGkXE4z1oK6vUgl5XIaLyh4YEgg6VoOHFwI4rm7JIjvnAl6DuRcS3qSQYLC6IHmQaIlxYOkJpLTz5ypBYnaTNkaoOfkS3Jh+mTsRl1wJOdSshB5seD7vkXOLrndbiMuFrRg1RQ0GAxMclEkkcsWV428YG02mzSfz81ydknkQC7T9Qu4XFryl5Jc8nc6nVBL/mt+afqAw7W+dvqo/f9f3AOSrwhMSe4t7ubRE+Mn/LM+S7ff7phRAnIj5Ha9gbl0ILYUbGBaRXNqxpnGEJuq2Fyam+jlk030L3CyiV6WbKL/+d8MNn4AZjpvulMRpFcAAAAASUVORK5CYII=) 50% 50% no-repeat;
    background-size: 60%;
}
.location_controls .clear:active {
    opacity: 0.5;
}

.overview_container .section.next_hour,
.overview_container .section.next_24_hours {
    height: 90px;
}
.overview_container .section > .inner {
    display: table-cell;
    vertical-align: middle;
}
.overview_container .section.currently {
    height: 125px;
    margin: 60px 0 10px 0;
    cursor: pointer;
}
.overview_container .section.currently .current_container {
    position: relative;
    margin-top: -10px;
}
.overview_container .section.currently .current_container .less {
    position: relative;
    text-align: center;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
    line-height: 0;
}
.overview_container .section.currently .current_container .more {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
    top: 14px;
    font-size: 16px;
}
/*.overview_container .section.currently .current_container .more .temps .m {*/
/*font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;*/
/*}*/

body.tablet .location_controls .clear {
    display: block;
}
body.tablet #search_area .buttons .button:hover {
    background-color: transparent;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), transparent 0 0 0;
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), transparent 0 0 0;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), transparent 0 0 0;
}
body.tablet #search_area .buttons .button:active {
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25), transparent 0 0 0;
    -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25), transparent 0 0 0;
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25), transparent 0 0 0;
    top: 1px;
}
#wobble_container {
    position: relative;
    height: 80px;
    margin-bottom: 15px;
}
#wobble_canvas {
    z-index: 7;
    position: absolute;
    bottom: 0;
    left: 0;
    border-right: 1px dashed rgba(0, 0, 0, 0.25);
}
#wobble_container .labels {
    z-index: 8;
    position: absolute;
    height: 6px;
    bottom: -4px;
    width: 100%;
    white-space: nowrap;
    line-height: 0;
    border-top: 2px solid #999;
}
#wobble_container .labels .label {
    position: relative;
    display: inline-block;
    width: 16.66%;
    height: 100%;
    padding: 1px;
    font-weight: 300;
    border-right: 1px solid #999;
    border-left: 1px solid #999;
    border-radius: 0px;
}
#wobble_container .labels .label .text {
    position: absolute;
    width: 50px;
    right: -28px;
    top: 12px;
    text-align: center;
    color: #999;
    opacity: 0.9;
    font-size: 14px;
}
#wobble_container .intensity_labels {
    z-index: 8;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    line-height: 0;
}
#wobble_container .intensity_labels > div {
    border-top: 1px solid rgba(3, 3, 3, 0.1);
    height: 33%;
    width: 100%;
}
#wobble_container .intensity_labels > div:first-child {
    border-top: none;
}
#wobble_container .intensity_labels > div span {
    position: relative;
    display: inline-block;
    left: 101%;
    width: 30px;
    margin: 14px 0 0 2px;
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
    text-align: left;
}
#location_stats .plot_container {
    width: 100%;
    height: 200px;
}
#location_stats h2 {
    margin-top: 30px;
    font-size: 24px;
    text-align: center;
}
#location_stats .monthly {
    width: 780px;
    margin: 10px auto;
    text-align: center;
}
#location_stats .monthly .stat {
    float: left;
    margin: 15px;
    width: 165px;
    height: 80px;
}
#location_stats .monthly .label {
    font-size: 24px;
}
#location_stats .monthly .value {
    font-size: 18px;
}

#yubao_text {
    font-size: 14px;
    color: #5EBB8D;
    position: absolute;
    right: 25%;
    top: 0px;
}