body {
    background-color: #122b3a;
    overflow-x:hidden;
}
#Copyright {
    background-color: #333335;
    color:#FFF;
}
.row_tile {
    border-top: 0.1rem #2c2c2c solid;
    border-bottom: 0.1rem #2c2c2c solid;
    color: #FFF;
}
#wx_Share{
    border-bottom: 0.1rem #2c2c2c solid;
}
.ei_list{
    background-color:#2c2c2c;
}
.ei_list ul li.list_item{
    background:#333335;
}
.ei_list ul li.list_item h4{
    color:#e0e0e0;
}
.divCommRowConnect{
    color:#e5e5e5;
}

.tide_tile {
    color: #d2d2d2;
    text-align: center;
}

    .tide_tile img {
        width: 0.4rem;
    }
#tooltip {
    color: #e0e0e0;
    text-align: center;
    font-size: 0.2rem;
}
#tides {
    width: 100%;
    height: 4.5rem;
    /*margin: 0 -2% 0 -2%;*/
}
.today {
    color: #eee;
}

    .today .title {
        width: 100%;
        line-height: 100%;
    }

        .today .title .column {
            display: inline-block;
            width: 48%;
            font-size: 0.2rem;
        }

    .today .value {
        width: 100%;
        line-height: 100%;
    }

        .today .value .column {
            display: inline-block;
            width: 48%;
            font-size: 0.2rem;
            color: #9b9b9b;
        }
.tide_date {
    text-align: center;
    border-bottom: 0.01rem dotted rgba(255,255,255,0.5);
    padding: 0.25rem 0;
    margin-bottom: 0.1rem;
}

    .tide_date a {
        cursor: pointer;
        background: #009494;
        color: #FFF;
        padding: 0.1rem 0.2rem;
        border-radius: 5px;
        margin: 0 0.1rem;
    }
    .tide_date #select_date {
        cursor: pointer;
        background: #009494;
        color: #FFF;
        padding: 0.1rem 0.2rem;
        border-radius: 5px;
    }
.tide_convert {
    color: #d2d2d2;
    text-align: center;
}

    .tide_convert a {
        color: #ff0000;
    }

    .tide_convert img {
        width: 0.13rem;
    }

    .tide_convert table {
        width: 100%;
    }

    .tide_convert td {
    }

    .tide_convert .tr1 {
        background: #FFF;
        color: #ff6a00;
    }

.tide_sm {
    color: #808080;
    text-align: center;
}

    .tide_sm .detail {
        font-size: 0.2rem;
    }

        .tide_sm a, .tide_sm .detail a {
            color: #fff;
        }


.chart_tb {
    /*width: 100%;*/
    margin: auto;
}

    .chart_tb td {
        text-align: center;
    }

.chart_ball {
    width: 100%;
    height: 2.0rem;
}

.cur_state{
    color:#FFF;
}
.cur_state #tide_state{
    color:#ff0000;
}
.cur_state #cur_time{
    color:#ff0000;
}
.cur_state #cur_tide{
    color:#ff0000;
}
.cur_state #cur_seep{
    color:#ff0000;
}

footer {
    background-color: #122b3a;
    color: #FFF;
}
#CommentHtml ul {
    color: #eee;
}
    #CommentHtml ul li .content ul {
        background-color:initial;
    }

.recommend{
    background-color:initial;
}
    .recommend .title {
        background: initial;
    }
.waplist .item .row1, .waplist .item .row2, .waplist .item .row3 {
    background: initial;
}
    .row1:hover, .row2:hover,.row3:hover {
        background: #555;
    }
.waplist .item h4 {
    color: #eee;
}
.waplist .item h6 {
    color: #999;
}

.position {
    display: none;
    position: absolute;
    width: 6rem;
    padding: 0.2rem 0.2rem 2rem 0.2rem;
    /* height: 100%; */
    background-color: rgba(0,0,0,0.9);
    z-index: 99;
}

.position-btn {
    color: #ff6a00;
    padding: 0.02rem 0.3rem;
    border: solid 0.01rem #ff6a00;
    cursor: pointer;
    float: right;
}

    .position-btn:hover {
        color: #fff;
    }

.position .area {
}

    .position .area .select {
        display: block;
    }
.position .province {
    color: #ff6a00;
    font-size: 0.3rem;
    padding: 0.05rem 0.08rem;
    background-color: #FFF;
    margin-top: 0.15rem;
    position: relative;
    cursor: pointer;
}
    .position .province a {
        position: absolute;
        right: 0.2rem;
        top: 0.04rem;
        font-size: 0.30rem;
    }
.position .city {
    color: #FFF;
    font-size: 0.28rem;
    /*padding: 0.08rem;*/
    border-bottom: 0.01rem dotted rgba(255,255,255,0.5);
    margin-top: 0.05rem;
    display: none;
}

    .position .city a {
        color: #aaa;
        font-size: 0.23rem;
        margin: 0 0.1rem;
    }

        .position .city a:hover {
            color: #ff6a00;
        }

    .position .city tile .column {
        font-weight: bold;
    }

    .position .city .hour .column {
        display: inline-block;
        width: 0.7rem;
        text-align: center;
        color: #aaa;
        font-size: 0.2rem;
    }
#ghdesc {
    text-align: center;
    color: #ff6a00;
    font-size: 0.2rem;
}

.position-btn2 {
    border: 0;
    padding: 0 0rem;
    border-bottom: solid 0.01rem #ff6a00;
}

.position-btn3 {
    border: 0;
    padding: 0 0rem;
    border-bottom: solid 0.01rem #ff6a00;
    float: left;
}

.tides_desc {
    text-align: center;
    font-size: 0.2rem;
    color: #FFF;
}

    .tides_desc a {
        border-radius: 1rem;
        padding: 0.0rem 0.13rem;
        font-size: 0.01rem;
        margin: 0.02rem 0.05rem 0.02rem 0.15rem;
    }




.calendarlist {
    font-size: 0.2rem;
}

    .calendarlist .title {
        padding: 0;
        z-index: 99999;
        left: 0;
        width: 100%;
    }

    .calendarlist .title {
        background-color: #1f5b59;
        color: #FFF;
        box-shadow: 0.02rem 0.03rem 0.42rem 0.05rem #011111;
    }

        .calendarlist .title .temperature {
            float: right;
        }

    .calendarlist .description {
        text-align: center;
        color: #ff6a00;
        font-size: 0.20rem;
        padding: 0.05rem 0;
        padding-bottom: 0.1rem;
        border-top: 0.02rem #0d3534 solid;
    }

    .calendarlist .title .column {
        display: inline-block;
        font-size: 0.22rem;
        text-align: center;
        vertical-align: middle;
        background-color: #1f5b59;
        color: #FFF;
        padding: 0.04rem 0rem;
    }

    .calendarlist .value {
        padding-bottom: 0.020rem;
        border-bottom: 0.05rem #1f5b59 solid;
        padding: 0.05rem 0;
    }

        .calendarlist .value:nth-child(odd) {
            background-color: #152929;
        }

        .calendarlist .value:hover {
            background: #333333;
        }

        .calendarlist .title .column1, .calendarlist .value .column1 {
            width: 0.70rem;
        }

        .calendarlist .title .column2, .calendarlist .value .column2 {
            width: 0.65rem;
        }

        .calendarlist .title .column3, .calendarlist .value .column3 {
            width: 1.00rem;
        }

        .calendarlist .title .column4, .calendarlist .value .column4 {
            width: 0.90rem;
        }

        .calendarlist .title .column5, .calendarlist .value .column5 {
            width: 1.60rem;
        }

        .calendarlist .title .column6, .calendarlist .value .column6 {
            width: 1.05rem;
        }

        .calendarlist .title .column9, .calendarlist .value .column9 {
            width: 1.90rem;
        }

        .calendarlist .value .column7 {
            width: 0.45rem;
            margin-right: 0.0rem;
            vertical-align: top;
        }

        .calendarlist .value .column8 {
            /*width: 1.20rem;*/
        }

        .calendarlist .value .column {
            display: inline-block;
            font-size: 0.22rem;
            color: #8a8a8a;
            text-align: center;
            vertical-align: middle;
            position: relative;
            padding: 0.02rem 0;
        }

        .calendarlist .value .column1 .hour {
            font-size: 0.23rem;
            color: #cecece;
        }

        .calendarlist .value .column1 .day {
            font-size: 0.18rem;
            color: #6b6a6a;
        }

        .calendarlist .value .column2 .temperature {
            font-size: 0.18rem;
        }

        .calendarlist .value .column2 .humidity {
            font-size: 0.25rem;
            color: #cecece;
        }

        .calendarlist .value .column2 .pressure {
            font-size: 0.18rem;
        }

        .calendarlist .value .column3 .visibility {
            font-size: 0.18rem;
        }

        .calendarlist .value .column3 .skycon {
            font-size: 0.23rem;
            color: #cecece;
        }

        .calendarlist .value .column3 .dswrf {
            font-size: 0.15rem;
        }

        .calendarlist .value .column4 .wave1 {
            font-size: 0.24rem;
            color: #cecece;
        }

        .calendarlist .value .column4 .wave2 {
            font-size: 0.18rem;
        }

        .calendarlist .value .column4 .wave3 {
            font-size: 0.16rem;
        }

        .calendarlist .value .column5 .progress {
            height: 90%;
            width: 0.04rem;
            position: absolute;
            left: -0.05rem;
            bottom: 0.04rem;
        }

        .calendarlist .value .column5 .progress2 {
            height: 90%;
            width: 0.05rem;
            position: absolute;
            left: -0.01rem;
            bottom: 0.04rem;
        }

        .calendarlist .value .column5 .tide1 {
            font-size: 0.24rem;
            color: #cecece;
        }

        .calendarlist .value .column5 .tide2 {
            font-size: 0.18rem;
        }

            .calendarlist .value .column5 .tide2 span {
                margin: 0 0.1rem;
            }

        .calendarlist .value .column9 .tide {
            font-size: 0.18rem;
        }


        .calendarlist .value .column5 .tide3 {
            font-size: 0.18rem;
        }


        .calendarlist .value .column8 .progress {
            height: 0.03rem;
            width: 100%;
            position: absolute;
            left: 0.02rem;
            bottom: -0.04rem;
        }

        .calendarlist .value .column8 .wind1 {
            font-size: 0.23rem;
            color: #cecece;
        }

        .calendarlist .value .column8 .wind2 {
            font-size: 0.18rem;
        }

        .calendarlist .value .column8 .wind3 {
            font-size: 0.18rem;
        }