﻿#VenuePanel {
    width:100%;
    /*-webkit-backface-visibility: visible;
    -webkit-transform: none;*/
}

.ui-panel-dismiss.ui-panel-dismiss-position-right.ui-panel-dismiss-display-overlay.ui-panel-dismiss-open {
    display: none !important;
}

#extruderTop {
    z-index:1000 !important;
}

.ContentPartnerRow {
    margin-top:5px;
    margin-bottom:6px;
}

.AdvertisementRow {
    margin-top:5px;
    margin-bottom:5px;
    overflow:hidden;
    background:#FFF;
}

.contentContainer {
    display: inline-block;
    width: 49.22%;
    overflow: hidden;
    background-color: #FFF;
    vertical-align:top;
}

.right {
    float:right;
}

.contentParterImageDiv {
    float: left;
    width: 100%;
    height: 100%;
}

.ContentPartnerImage {
    height:auto; 
    width:100%;
}

#BusContent {
    margin-bottom:25px;
    background-color:#0099D8;
    padding: 100px 15px 40px 15px;
}

.destinationheader b, .flapLabel{
    color: #FFF;
}

.AdvertAndContentArea {
    margin-top: -20px;
}

#extraStops, #hideExtraStops {
    cursor:pointer;
}

.journeyPlannerHeader, .mallHeader, .busHeader {
    font: 13px/32px Arial, Helvetica, sans-serif;
    text-align: center;
    width: 100%;
    background: #0099d8;
    cursor: pointer;
    padding-top: 12px;
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: right -7px;
    position: fixed;
    top: 40px;
    left: 0px;
    z-index: 1004;
    margin-left: 0px;
    text-shadow:none;
    opacity: 1;
    -webkit-transform: translateZ(0);
}

.journeyPlannerHeader {
    background-image: url('/media/images/LandingPage/Bus-Expand-Right.png');
    padding-bottom:5px;
}

.mallHeader {
    background-image: url('/media/images/LandingPage/Bus-Expand-Left.png');
    padding-bottom:6px;
}

.journeyPlannerHeader .journeyPlannerLabel, .mallHeader .mallLabel, .busHeader .busHeaderLabel {
    white-space: nowrap;
    float: left;
    padding-left: 15px;
    font-weight: bold;
    text-shadow: none !important;
    color:#FFF;
}

.mallImageContainer {
    padding-top:90px;
}

.mallImageContainer .mallImage {
    width: 100%; 
    /*margin-top: 5px;*/ 
    cursor:pointer;
}

.venueHeader {
    width: 100%;
    overflow: hidden;
    background-color: #FFF;
    cursor: pointer;
}

.venueImage {
    width:100%;
}

.legal-info
{
    text-shadow:none;
}

#WeatherBox
{
    width:100%;
    height:100%;
    background-color:#FFF;
}

/********** Weather ************/

#Weather
{
    text-align:center;
    color:#32363f;
    height:100%;
}

#WeatherBox .loading
{
    display:block;
    width:10vw;
    margin:15vw auto;
}

    #WeatherBox.full .todayWrapper, #WeatherBox.full .forecastWrapper
    {
        width:49%;
    }

    #WeatherBox .todayWrapper, #WeatherBox .forecastWrapper
    {
        display: inline-block;
        clear:both;
        
        padding:0 5vw;
        vertical-align:top;
        position:relative;
        top: 47%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);        
    }

    #Weather .today
    {
        text-align:left;
    }

    #WeatherBox.full #Weather .today
    {        
    }

    #Weather .today .iconArea
    {
        padding-bottom:1vw;
    }

    #Weather .today .iconArea .icon
    {
        display:inline-block;
        vertical-align:text-bottom;
        width:15vw;
    }

    #Weather .today .iconArea .detail
    {
        text-align:left;
        display:inline-block;
        font-size:12vw;
    }

    #Weather .today .city
    {
        text-transform:uppercase;
        color:#32363f;
        margin:0;
        padding:0;
        text-align:left;
        font-size:4.5vw;
        max-width:100%;
        max-height:11vw;
        overflow:hidden;
    }

    #Weather .today .description
    {
        text-transform:capitalize;
        margin:0;
        padding:0;
        text-align:left;
        font-size:3.5vw;
    }

    #Weather .forecast
    {
        padding-bottom:0;
        font-size:3vw;
    }

    #Weather .forecast h5
    {
        text-align:left;
        margin:0;
        padding:0; 
        padding-bottom:1vw;
        font-size:3vw;  
        color:#32363f;     
    }

    #Weather .forecast table
    {
        border-collapse: collapse;
    }

    #Weather .forecast table th, #Weather .forecast table td
    {
        padding: 0;
    }

    #Weather .forecast tr td
    {
        border-top:1px solid #aaa;
    }

    #Weather .forecast tr:last-of-type td
    {
        border-bottom:1px solid #aaa;
    }

    #Weather .forecast .timeCell
    {
        width: 50vw;
        text-transform:lowercase;
    }

    #Weather .forecast .iconCell
    {
        width: 20vw;
    }

    #Weather .forecast .iconCell .icon
    {
        width:6vw;
    }

    #Weather .forecast .tempCell
    {
        width:300px;
    }

    #Weather .forecast .tempArea
    {
        padding:0 20px 0 40px;
    }

/*** Font increases for landing page ***/

@media (min-width: 350px)  and (max-width: 500px) {
    .journeyPlannerHeader, .mallHeader, .busHeader {
        font-size: 14px;
    }

    #BusContent #predictiongrid .header {
        font-size: 13px;
    }

    #BusContent #predictiongrid .row {
        font-size:13px;
    }

    #BusContent #extraStops {
        font-size:12px;
    }

    #BusContent #hideExtraStops {
        font-size:12px;
    }
}

@media (min-width: 501px) {
    .journeyPlannerHeader, .mallHeader, .busHeader {
        font-size: 17px;
    }

    #BusContent #predictiongrid .header {
        font-size: 16px;
    }

    #BusContent #predictiongrid .row {
        font-size:16px;
    }

    #BusContent #extraStops {
        font-size:15px;
    }

    #BusContent #hideExtraStops {
        font-size:15px;
    }
}