/*
 *  MEDIA QUERY (responsive) ----------------------------
 */

/* EUROSPORT */

@media only screen and (max-width: 670px), only screen and (max-device-width: 670px) {

    html, body {
        overflow-x : hidden;
    }
    #logo-header img#logo-fis {
        max-width: 50%;
    }
    #logo-header img#logo-partner {
        max-width: 39%;
        float : right;
    }
    h1 {
        font-size: 21px;
    }
    #race-onglets {
        top: -39px;
    }
    #race-onglets li a {
        padding: 2px 15px 0px 15px;
    }
    #race-content-wrapper {
        padding: 20px 0 0 0;
    }
    #race-moreinfos {
        padding: 8px 15px 8px 8px;
    }
    #race-label {
        margin: 0 2px 7px 2px;
    }
    #racers-details div.columns {
        margin: 5px 0;
    }
    .racer-running {
        width: 190px;
    }
    #slideracerleft {
        left: 2px;
    }
    #slideracerright {
        right: 2px;
    }

    .ranking-box {
        max-height: 150px;
    }
}

/* MOBILE */

@media only screen and (max-width: 640px), only screen and (max-device-width: 640px) {

    html, body {
        overflow: visible;
    }

    #global-wrapper {
        max-width : 100%;
        margin: 0 auto;
    }

    #race-content-wrapper {
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    #race-label {
        margin: 0;
        background: #FFF;
        border: 0;
        padding: 10px 0;

        filter             : progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#eaeaea', GradientType=0); /* IE6-9 */
        -moz-box-shadow    : 0px 1px 1px 0px #c0c0c0;
        -webkit-box-shadow : 0px 1px 1px 0px #c0c0c0;
        -o-box-shadow      : 0px 1px 1px 0px #c0c0c0;
        box-shadow         : 0px 1px 1px 0px #c0c0c0;
        filter             : progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=180, Strength=1);
        box-shadow: none;
    }

    .hide-mobile {
        display : none;
    }
    
    /* Menu */
    #race-menu-mobile.with-padding a#race-menu-current-page {
        padding-left: 80px;
    }
    #race-menu-back-button {
        position: absolute;
        display: block;
        width: 70px;
        background: rgba(200, 200, 200, 0.5);
        margin-right: 10px;
        padding: 11px 0;
        text-align: center;
        color: #444;
        text-decoration: none;
    }
    #race-menu-current-page, #race-menu-refresh {
        display : block;
        width: 100%;
        height: 36px;
        padding: 10px 20px;
        text-transform: uppercase;
        font-size: 16px;
        font-weight : bold;
        color: #002496;
        border-top: 1px solid #d6d6d6;
        border-bottom: 1px solid #d6d6d6;

        background: #fefefe; /* Old browsers */
        background: -moz-linear-gradient(top,  #fefefe 0%, #e8e8e8 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #fefefe 0%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #fefefe 0%,#e8e8e8 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #fefefe 0%,#e8e8e8 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #fefefe 0%,#e8e8e8 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */

        -moz-box-shadow: 0px 2px 3px 0px #c0c0c0;
        -webkit-box-shadow: 0px 2px 3px 0px #c0c0c0;
        -o-box-shadow: 0px 2px 3px 0px #c0c0c0;
        box-shadow: 0px 2px 3px 0px #c0c0c0;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=180, Strength=3);

        z-index : 100;
    }
    #race-menu-current-page:hover, #race-menu-refresh:hover {
        text-decoration : none;
    }
    #race-menu-mobile {
        margin-bottom : 5px;
        position      : relative;
    }
    #race-menu-mobile ul {
        display : none;
    }
    #race-menu-mobile li a, #race-menu-mobile li label {
        display       : block;
        background    : #edecec;
        border-bottom : 1px solid #d6d6d6;
        padding       : 10px 20px;
        height        : 40px;
        font-weight   : bold;
        color         : #002496;
        margin        : 0;
    }
    #race-menu-mobile li a:hover, #race-menu-mobile li label:hover {
        text-decoration : none;
        background      : #4b64b4;
        color           : #fff;
    }
    #race-menu-mobile-arrow {
        position           : absolute;
        top                : 0;
        right              : 0;
        background         : url(../images/arrow_menu_mobile.png) no-repeat 0 0;
        width              : 39px;
        height             : 35px;
        -webkit-transition : all 0.5s;
        -moz-transition    : all 0.5s;
        -ms-transition     : all 0.5s;
    }
    #race-menu-mobile-arrow.open {
        background : url(../images/arrow_menu_mobile.png) no-repeat 0 -35px;
    }
    #race-menu-mobile-arrow.with-refresh, #race-menu-mobile-arrow.open.with-refresh {
        right : 120px;
    }
    #refresh_option {
        width    : 120px;
        position : absolute;
        right    : 0;
        top      : 0;
        display  : none;
    }
    #refresh_option a {
        text-align : center;
        display    : block;
        padding    : 5px 0 0 0;
    }

    .racer-running {
        width : auto;
    }

    #racers-details div.columns {
        margin: 10px 0;
    }

    #racer-current .racer-running-entete {
        width: 100%;
        margin-left: 0;
    }
    .bibname {
        display: inline;
        margin: 0 8px 5px 0;
        float: left;
    }

    .racer-running {
        float : none;
        clear : both;
        margin: 0 0 15px 0;
    }
    #racers-next {
        padding-top: 20px;
    }
    #detail-next {
        margin-bottom : 5px;
    }
    #leader-wrapper {
        float : none;
        clear : both;
    }
    .racers-list-tab table td {
        padding: 6px;
        color: #272727;
    }
    .racers-list-tab g table td.align-left {
        text-align: left;
    }

    .columns.mobile-eight {
        width: 72% !important;
        float : left;
    }
    .columns.mobile-four {
        width: 28% !important;
        float : right;
    }
    .run-detail-bloc {
        margin-bottom: 15px;
    }

    .ranking-box {
        max-height: none;
        overflow-x: hidden;
        overflow-y : auto;
    }

    #detail-started {
        display: none;
    }
    #racers-next {
        margin-top : 0;
        padding-top: 5px;
    }

    table.tab-heat td {
        font-size: 11px;
    }
    table.tab-heat thead th {
        font-size: 14px;
    }
    table.tab-heat thead th.cell-team {
        padding: 6px;
    }
    .list-phases h2, #startlist_teams h2 {
        font-size: 18px;
        padding: 0 0 4px 10px;
    }
    #onglets_phases li span {
        padding : 12px;
    }

    table.tab-heat th .popin_bib {
        width: 213px;
        font-size : 10px;
        height: 24px;
        padding-top : 6px;
        padding-left : 10px;
        background-position : center left;
        left : 75%;
    }
    table.tab-heat th.align-right .popin_bib {
        background-position : center right;
        padding-right : 10px;
        padding-left : 5px;
        right : 75%;
        left: auto;
    }
    .align-left .color_colbib {
        margin : 0 4px 0 0;
    }
    .align-right .color_colbib {
        margin : 0 0 0 4px;
    }

    #list-favnation .change-fav-nation {
        display : block;
        padding : 10px 5px;
    }
}