/*MEDIA QUERY*/
@media screen and (min-width:320px) {
    .pagewrapper, .homepage, .zonepage, .contentpage, .gallerypage, .docpage,
    .header-inner, .sitepath, .pagenav, .footer-inner, .pagefootnav {
        width: auto;
    }

    .homepage-tl {
        float: none;
        width: auto;
        padding-right: 0;
        border-right: 0;
    }

    .homepage-tr {
        float: none;
        width: auto;
        min-height: 100px;
    }

    .homepage-l {
        width: auto;
        float: none;
    }

    .homepage-r {
        width: auto;
        float: none;
    }

    .zonepage {
        width: auto;
    }

    .zonepage-l {
        float: none;
        width: auto;
    }

    .zonepage-r {
        width: auto;
        float: none;
    }

    .contentpage {
        width: auto;
    }

    .header-inner {
        height: 60px;
        background: url(../images/header-bg-770.png) no-repeat left top;
        -moz-background-size: 100% 100%;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }

    .nav {
        height: 40px;
        padding: 0 0;
    }

    .nav-option {
        display: block;
    }

    .nav-home {
        display: block;
    }

    .navbar {
        display: none;
        clear: both;
        padding: 0 0;
        height: auto;
        color: #FFFFFF;
        position: absolute;
        z-index: 1000;
        top: 40px;
        right: 0;
        width: 100%;
    }

        .navbar .first {
            display: none;
        }

        .navbar ul {
            clear: both;
            width: 100%;
            height: auto;
        }

            .navbar ul li {
                clear: both;
                width: 100%;
                float: left;
            }

                .navbar ul li span {
                    display: block;
                    padding: 10px 10px 10px 36px;
                    background: url(../images/navbar-icon.png) no-repeat 10px center;
                    white-space: nowrap;
                }

        .navbar li ul {
            position: initial;
            width: 100%;
            background-color: #ed1c24;
        }

        .navbar li:hover ul {
            width: 100%;
            background-color: #ed1c24;
        }

        .navbar li:hover li span {
            padding: 10px 10px 10px 36px;
            background: none !important;
            font-weight: normal;
        }

    .hotbar {
        height: 40px;
    }


    .today {
        display: none;
    }

    .hotline {
        display: none;
    }

    .searchbox {
        top: 8px;
        left: 10px;
        right: 10px;
        width: auto;
    }

    .footer-c {
        float: none;
        width: auto;
    }

    .footbar {
        text-align: center;
    }

        .footbar a {
            clear: both;
            display: block;
            margin-left: 0;
            float: none;
            text-align: center;
        }

        .footbar span {
            clear: both;
            display: block;
            margin-left: 0;
            float: none;
            text-align: center;
            white-space: nowrap;
        }

        .footbar a.gotop {
            margin: 0;
            display: inline-block;
            float: none;
        }

    .footnavbar {
        clear: both;
        padding: 10px 15px;
    }

        .footnavbar a {
            clear: none;
            float: left;
            padding: 5px 0 5px 0;
        }

        .footnavbar span {
            clear: none;
            float: left;
            padding: 5px 5px 5px 5px;
        }


    .datapager {
        margin: 5px 0;
    }

    .dialog {
        width: 100%;
        height: 100%;
        border: 0;
    }
}

@media screen and (min-width:481px) {
    .header-inner {
        height: 100px;
    }

    .navbar {
        width: 320px;
    }
}

@media screen and (min-width:641px) {
    .header-inner {
        height: 140px;
    }
}

@media screen and (min-width:981px) {
    .pagewrapper, .homepage, .zonepage, .contentpage, .gallerypage, .docpage,
    .header-inner, .sitepath, .pagenav, .footer-inner, .pagefootnav {
        width: 980px;
    }

    .homepage-tl {
        float: left;
        width: 400px;
        padding-right: 15px;
    }

    .homepage-tr {
        float: right;
        width: 240px;
        min-height: 200px;
    }

    .homepage-l {
        width: 660px;
        float: left;
    }

    .homepage-r {
        width: 300px;
        float: right;
    }

    .zonepage {
        width: 980px;
    }

    .zonepage-l {
        float: left;
        width: 660px;
    }

    .zonepage-r {
        width: 300px;
        float: right;
    }

    .header-inner {
        height: 120px;
        background: url(../images/header-bg.png) no-repeat left top;
        -moz-background-size: auto auto;
        -webkit-background-size: auto auto;
        background-size: auto auto;
    }

    .header-logo {
        left: 15px;
        top: 20px;
        width: 80px;
        height: 80px;
        background: url(../images/logo.png) no-repeat center center;
    }

    .nav {
        clear: both;
        height: auto;
        /*height: 40px;*/
        padding: 0 0;
    }

    .nav-option {
        display: none;
    }

    .nav-home {
        display: none;
    }

    .navbar {
        display: block;
        clear: both;
        width: auto;
        padding: 0;
        padding-left: 35px;
        /*height: 40px;*/
        color: #FFFFFF;
        position: relative;
        z-index: 10;
        top: 0;
        left: 0;
        right: auto;
    }

        .navbar .first {
            display: block;
        }

        .navbar ul {
            clear: both;
            width: 100%;
            /*height: 40px;*/
        }

            .navbar ul li {
                clear: none;
                float: left;
                width: auto;
            }

                .navbar ul li span {
                    display: block;
                    padding: 5px 5px 5px 5px;
                    background: none;
                    white-space: nowrap;
                }

        .navbar li ul {
            position: absolute;
            width: 180px;
            background-color: #ed1c24;
        }

        .navbar li:hover ul {
            width: 180px;
            background-color: #ed1c24;
        }

        .navbar li:hover li span {
            display: block;
            padding: 6px 10px 6px 10px;
            margin: 0;
            background: none;
            font-weight: bold;
        }

    .today {
        width: 195px;
        display: block;
    }

    .hotline {
        display: block;
    }

    .searchbox {
        top: 8px;
        left: auto;
        right: 10px;
        width: 202px;
    }

    .footbar {
        clear: both;
    }

        .footbar a {
            clear: none;
            margin-left: 250px;
            float: left;
            text-align: left;
        }

        .footbar span {
            clear: none;
            margin-left: 50px;
            float: left;
            text-align: left;
        }

        .footbar a.gotop {
            margin: 0 10px 0;
            float: right;
        }

    .footnavbar {
        clear: both;
        padding: 10px 15px;
    }

        .footnavbar a {
            clear: none;
            float: left;
            padding: 5px 0 5px 0;
        }

        .footnavbar span {
            clear: none;
            float: left;
            padding: 5px 5px 5px 5px;
        }

    .footer-c {
        padding: 10px 10px;
    }

    .datapager {
        margin: 10px 0;
    }

    .dialog {
        width: 640px;
        height: 480px;
        border: #D1D1D1 5px solid;
    }
}