﻿/*sharing*/




@media only screen and (min-width:767px) and (max-width: 1018px) {
    .info .shares .showhide {
    }

    .info .shares {
        width: 250px;
    }

    #facebooklike {
        display: none;
    }

      .forecast-hour .row .pressure {
        /*width: 70px;*/
    }
    .forecast-hour .row .precipitation {
        /*width: 75px;*/
    }
      .forecast-hour .row .timecell .hour { font-size: 14px;}
      .forecast-hour .row .timecell .date { font-size: 10px; }
      .forecast-hour .row .temperature { font-size: 14px; line-height: 16px; padding: 0px 0px 0px 15px;}
      .forecast-hour .row .temp-label { font-size: 14px;}
      .forecast-hour .row .icon {width: 20px;}
      .sunrise, .sunset {width: 80px; background-size:20px 40px;   }
     .forecast-hour .row .iconbig img {width:50px; height:auto;}
     .forecast-hour .row.forecast-today-container .forecast-today-col h4 {font-size:14px; font-weight:bold;}
    }
}

@media only screen and (min-width:501px) and (max-width: 678px) {

    .info .shares .showhide {
    }

    .info .shares {
        width: 250px;
    }

    #facebooklike {
        display: none;
    }
}

@media only screen and (min-width:767px) and (max-width: 1050px) {
    .nav .wide {
        display: none;
    }

    .nav .widemenu {
        display: block;
        border: none;
        padding: 15px 15px 15px 15px;
        background-color: transparent;
    }

    #menusmall {
        position: fixed;
        top: 152px;
        left: 0px;
        background-color: white;
        width: 100%;
        display: none;
        z-index: 500;
    }
}

@media only screen and (min-width:1050px), (max-width:767px) {
    .nav .widemenu {
        display: none !important;
    }

    #menusmall {
        display: none !important;
    }
}
/*Mobiele button kleiner dan 1024px*/

@media (max-width:676px) {

    .table_right > table > thead > tr > th.cityname.hidden-lg.hidden-md.hidden-xs.colMedium,
    .table_right > table > tbody > tr > td.cityname.hidden-lg.hidden-md.hidden-xs.colMedium {
        display: table-cell !important;
        margin-right: -20px;
        height: 57px;
    }

    .table_right > table > thead > tr > th.cityname.hidden-lg.hidden-md.hidden-xs.colMedium {
        vertical-align: bottom;
        /*border-bottom: 2px;*/
    }

    .table_left > table > thead > tr > th.timeleft,
    .table_left > table > tbody > tr > td.timeleft {
        display: table-cell !important;
        /*margin-right: -20px;*/
        /*height: 57px;*/
    }

    .table_left > table > thead > tr > th.timeleft {
        vertical-align: bottom;
        border-bottom: 2px;
    }
}

@media (max-width:767px) {
    .img {
        float: none;
        margin: 0 auto;
        height: 280px;
    }

    .info {
        margin-left: 0px;
    }

    .navbar-collapse .nav > .divider-vertical {
        display: none;
    }

    .navbar-collapse {
        max-height: 540px;
    }

    .navbar .pull-right {
        float: left !important;
        width: 105%;
    }

    .iabuttons {
        margin-top: 10px;
    }

    .adv {
        text-align: center;
    }

    #aside {
        display: none;
    }



    .nextRefspotContainer {
        left: 90%; /*293px;*/
        top: -78px;
        width: 50px;
    }

    .nextRefspot {
        padding: 45px 5px 45px 5px;
    }

    .buttonNextLocation {
        height: 50px;
    }

    h2 {
        background: #e8e8e8;
        border: 1px solid #ddd;
        box-shadow: 0 6px 7px -4px;
        padding-left: 5px;
    }

    .forecastChartContainer {
        height: auto;
    }

    .forecastChartYlabel {
        position: relative;
        font-size: 10px;
        top: -64px;
        left: -49px;
        width: 100px;
        /*top: -125px;
        left: -54px;*/
    }
      .wideonly {
        display: none!important;
    }

    #resultset {
        margin-left: -50px;
        width:380px;
    }
     #resultset #map img{
        width:0px;height:0px;
    }

      .zoekplaats {
        width: 9em;
    }
    .zoekplaats .name { 
        width: 105px;
    }
    .zoekplaats .country {
        width: 30px;
        display: inline-block;
    }
    .zoekplaats #locationlist .record, .zoekplaats #locationlist .record span {
        height: 24px;
    }

}

@media (max-width:1300px) {


    .navbar-fixed-top, .navbar-fixed-top > * {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .info .shares .showhide {
        display: none;
    }

    .info .shares {
        display: none;
    }



    .info .time .logo {
        position: relative;
        width: 100%;
        text-align: left;
        height: 30px;
        padding-left: 0;
        left: -0px;
        top: -4px;
    }

    .info .time {
        padding-right: 25px;
        top: -10px;
        right: 0px;
        color: #fff;
        font-size: 26px;
        width: auto;
    }

    .iabuttons a {
        width: 38px;
        height: 35px;
    }

    .iabuttons .pan {
        display: inline-block;
        width: 35px;
        height: 35px;
        background-image: url(/content/images/small/mylocationbutton.png);
        opacity: 0.7;
        float: left;
    }

        .iabuttons .pan a {
            width: 0px !important;
            height: 0px !important;
            left: -1px !important;
            top: -1px !important;
        }

        .iabuttons .pan .panlocate {
            left: 0px !important;
            top: 0px !important;
            height: 35px !important;
            width: 35px !important;
        }

    .iabuttons #zoom {
        background: url(/content/images/zoombuttonsUK_small.png) no-repeat;
        background-position-x: 1px;
        background-position: 1px 0;

    }

        .iabuttons #zoom.level1 {
            background-position-x: 1px;
            background-position: 1px 0;

        }

        .iabuttons #zoom.level2 {
            background-position-x: -52px;
            background-position: -52px 0;

        }

        .iabuttons #zoom.level3 {
            background-position-x: -104px;
            background-position: -104px 0;

        }

        .iabuttons #zoom.level4 {
            background-position-x: -152px;
            background-position: -152px 0;

        }

    .iabuttons #playpause {
        background: url(/content/images/small/playpausebutton.png) no-repeat;
        background-position-x: 1px;
        background-position: 1px 0;

    }

        .iabuttons #playpause.playing {
            background-position-x: -53px;
            background-position: -53px 0;

        }

        .iabuttons #playpause.pausing {
            background-position-x: 1px;
            background-position: 1px 0;

        }

    .iabuttons #speedindicator {
        background: url(/content/images/small/speedbutton.png) no-repeat;
        background-position-x: 0px;
        background-position: 0px 0;

    }

        .iabuttons #speedindicator.speed1 {
            background-position-x: 0px;
            background-position: 0px 0;
        }

        .iabuttons #speedindicator.speed2 {
            background-position-x: -45px;
            background-position: -45px 0;
        }

        .iabuttons #speedindicator.speed3 {
            background-position-x: -91px;
            background-position: -91px 0;


        }

        .iabuttons #speedindicator.speed4 {
            background-position-x: -136px;
            background-position: -136px 0;
        }


    .info .time .control {
        display: inline-block;
        width: 5px;
        height: 35px;
        visibility: hidden;
        border: none;
        cursor: pointer;
        text-decoration: none;
        margin: 0 -10px 0px -2px;
        background: url(/content/images/small/backforwardbutton.png) no-repeat;
        opacity: 0.8;
        position: relative;
        top: 10px;
    }

    .info .time .previous {
        background-position: 0px bottom;
    }

    .info .time .next {
        background-position: -45px bottom;
    }

    .info .time .logo {
        position: relative;
        width: 100%;
        text-align: left;
        height: 30px;
        padding-left: 0;
        left: -0px;
    }

        .info .time .logo img {
            top: -10px;
        }

    .box-center {
        padding: 15px;
        top: -30px;
    }

    #imagelabel {
        font-size: 18px;
        top: -25px;
        z-index: 5;
    }

    #imagedescription {
        /*padding: 6px;
        margin-top: -38px;
        margin-left: 0px;*/
        display: none;
    }

    /* socialmedia*/
    #socialmedia {
        /*top:-24px;*/
    }

    /*mobile pan buttons */
    .panMobile a {
        display: block;
        /*background-color: transparent;*/
        position: absolute;
        z-index: 1;
        background-size: 30px 30px;
        background-repeat: no-repeat;
        opacity: 0.5;
        filter: alpha(opacity=20);
    }

    #panUpMob {
        background-image: url("/Content/images/panUp.png");
        background-position: center bottom;
    }

    #panDownMob {
        background-image: url("/Content/images/panDown.png");
        background-position: center center;
    }

    #panLeftMob {
        background-image: url("/Content/images/panRight.png");
        background-position: left center;
    }

    #panRightMob {
        background-image: url("/Content/images/panLeft.png");
        background-position: right center;
    }

    .panMobile a:hover, panhoverActive {
        cursor: pointer;
        border: none;
        border-color: #e8e8e8;
        opacity: 0.6;
        filter: alpha(opacity=20);
        background-repeat: no-repeat;
        background-position: center center;
    }


    #panUpMob:hover, panUphoverActive {
        background-image: url("/Content/images/panUp.png");
        background-size: 70px 70px;
    }

    #panDownMob:hover, panDownhoverActive {
        background-image: url("/Content/images/panDown.png");
        background-size: 70px 70px;
    }

    #panLeftMob:hover, panLefthoverActive {
        background-image: url("/Content/images/panRight.png");
        background-size: 70px 70px;
    }

    #panRightMob:hover, panRighthoverActive {
        background-image: url("/Content/images/panLeft.png");
        background-size: 70px 70px;
    }

    #imgreload {
        width: 1365px;
        height: 991px;
    }

    #controlpanel {
        width: 192px;
        margin-top: 40px;
    }

        #controlpanel.cp-collapse {
            width: 38px;
            margin-top: 40px;
        }

    #cp-label {
        display: none;
    }

    .cp-collapse {
        font-size: 8px;
    }

    .timelabel-small {
        font-size: 15px;
        line-height: 32px;
        display: inline-block;
        width: 166px;
        margin: 10px 10px 10px -10px;
        padding: 0px;
    }

    .zoekplaats {
        width: 10em;
    }
}

@media (max-width:1160px) {
    .tableSixdays img {
        width: 35px;
        height: 35px;
    }
}

@media (max-width:1040px) {
    .tableSixdays img {
        width: 30px;
        height: 30px;
    }
}

@media(max-width:1200px) {
    #map_gfsforecastnavigation {
        display: none !important;
    }
}

@media (min-width:1200px) and (max-width: 1400px) {
    .tabletimg {
        height: 100px !important;
    }
}

@media (min-width:990px) and (max-width: 1199px) {
    .tabletimg {
        height: 80px !important;
    }

    .mobielimg {
        height: 200px !important;
    }
}

@media (min-width:767px) and (max-width: 886px) {
    .tabletimg {
        height: 100px !important;
    }
}


@media (max-width:1440px) {
    .adGfs {
        display: none;
    }
}
