article {
    width: 100%;
}

    article .tide_tile {
        text-align: center;
    }

        article .tide_tile h1 {
            font-size: 36px;
            color: #666;
            margin: 10px 0;
        }

            article .tide_tile h1 img {
                height: 40px;
                vertical-align: bottom;
                border: solid 1px #FFF;
            }

            article .tide_tile h1 a {
                padding-left: 3px;
                color: #cc181e;
            }

                article .tide_tile h1 a:hover {
                    text-decoration: underline;
                }

            article .tide_tile h1 span {
                font-size: 22px;
            }

        article .tide_tile h2 span {
            color: #cc181e;
        }

    article #tooltip {
        text-align: center;
    }

    article .tide_date {
        text-align: center;
    }

        article .tide_date a {
            margin: 0 10px;
            font-size: 22px;
            cursor: pointer;
            background: #009494;
            color: #FFF;
            padding: 5px 15px;
            border-radius: 5px;
        }

            article .tide_date a:hover {
                background: #122b3a;
            }

    article .enhance {
        text-align: center;
        margin: 10px 0;
        font-size: 20px;
    }

        article .enhance a {
            font-size: 22px;
            font-weight: bold;
        }

        article .enhance span {
            color: #cc181e;
        }

    article .chart_tb {
        width: 100%;
        max-width: 630px;
        margin: 20px auto;
    }

        article .chart_tb .td1 {
            width: 30%;
            text-align: right;
        }

            article .chart_tb .td1 img {
                width: 140px;
                margin-right: 10px;
            }

        article .chart_tb .today {
            width: 70%;
        }
.position {
    display: none;
    position: absolute;
    width: 100%;
    padding: 10px;
    /* height: 100%; */
    background-color: rgba(0,0,0,0.9);
    z-index: 99;
}


#tides {
    height: 350px;
}

.position .area {
}

    .position .area .select {
        display: block;
    }

.position .province {
    color: #ff6a00;
    font-size: 15px;
    padding: 5px 10px;
    background-color: #FFF;
    margin-top: 5px;
    position: relative;
    cursor: pointer;
}

    .position .province a {
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 15px;
    }

.position .city {
    font-size: 18px;
    border-bottom: 0.01rem dotted rgba(255,255,255,0.5);
    margin-top: 5px;
}

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

    .position .city a {
        color: #aaa;
        font-size: 5px;
        margin: 0 5px;
    }

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

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

    .position .city .hour .column {
        display: inline-block;
        width: 16%;
        text-align: center;
        color: #3e3e3e;
        font-size: 16px;
    }

#ghdesc {
    text-align: center;
    color: #cc181e;
    font-size: 16px;
    margin: 5px 0;
}

.tides_desc {
    text-align: center;
}

    .tides_desc a {
        border-radius: 20px;
        padding: 0px 10px;
        margin: 15px;
    }


.today {
    text-align: center;
}

    .today .title {
        width: 100%;
        line-height: 100%;
        margin: 10px 0;
    }

        .today .title .column {
            display: inline-block;
            width: 48%;
            font-size: 20px;
            font-weight: bold;
        }

    .today .value {
        width: 100%;
        line-height: 100%;
        margin: 5px 0;
    }

        .today .value .column {
            display: inline-block;
            width: 48%;
        }



.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.70rem;
        }

        .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.70rem;
        }

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

        .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;
        }