﻿body
{
    font-family: Arial;
    margin: 0;
}

h1,
h2,
h3,
#HourlyTempDetail
{
    font-family: Helvetica, Calibri, sans-serif;
    text-shadow: 1px 1px 2px #d3d3d3;
}

.weather .current,
.weather .forecast .day,
.weather .forecastPeriod,
.temperatureRange div,
.temperature,
.enlil,
.sdo-hmii,
.lascoc2,
.lascoc3,
.synoptic,
.ovationNorth,
.ovationSouth,
.currentStation,
.moonPhase,
.solarDial,
.expandImage
{
    /* inline-block */
    display: inline-block;
    *display: inline;
    vertical-align: top;
    zoom: 1;
    /* inline-block */
}

.moonPhase
{
    margin-left: 30px;
}

.weather .forecast .day
{
    padding: 10px;
}

.temperatureRange span
{
    padding: 0 5px;
}

.enlil
{
    height: 167px;
    width: 132px;
    overflow: hidden;
    position: relative;
}

.enlil img
{
    width: 300px;
    height: 187px;
    position: absolute;
    top: -15px;
    left: -23px;
}

.sdo-hmii,
.sdo-hmii img,
.lascoc2,
.lascoc2 img,
.synoptic,
.synoptic img,
.lascoc3,
.lascoc3 img,
.ovationNorth,
.ovationSouth,
.expandImage,
.expandImage img
{
    height: 167px;
}

.synoptic.large,
.synoptic.large img,
.weatherRadar .largeRadar,
.weatherRadar .radarLoop,
.expandImage.large,
.expandImage.large img
{
    height: auto;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
}

.ovationNorth,
.ovationSouth
{
    width: 167px;
    position: relative;
    overflow: hidden;
}

.ovationNorth img,
.ovationSouth img
{
    position: absolute;
    top: -95px;
    left: -71px;
    height: 307px;
}

.ovationSouth img
{
    top: -75px;
    left: -62px;
}

.sdo-hmii,
.enlil,
.lascoc2,
.synoptic,
.lascoc3,
.ovationNorth,
.ovationSouth,
.expandImage
{
    margin: 20px;
    cursor: pointer;
}

.drz-imagePlayer.playing .drz-initialImage
{
    visibility: hidden;
}

.drz-imagePlayer.playing .imgContainer
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.drz-imagePlayer .pause,
.drz-imagePlayer.playing .play,
.drz-imagePlayer .playPause
{
    display: none;
}

.drz-imagePlayer.playing .pause,
.drz-imagePlayer.large .playPause
{
    display: block;
}

.drz-imagePlayer .playPause
{
    position: absolute;
    bottom: 60px;
    left: 20px;
    font-size: 40px;
    z-index: 1001;
    color: #fff;
}

.moonRise span,
.moonSet span
{
    vertical-align: 13px;
}

.moonRise span,
.moonSet span
{
    /* inline-block */
    display: inline-block;
    *display: inline;
    vertical-align: top;
    zoom: 1;
    /* inline-block */
    padding: 3px 5px 0 0;
    font-size: 10px;
}

canvas
{
    display: block;
}

.lastUpdated
{
    margin-left: 10px;
    font-size: 10px;
}

.wind .icon
{
    font-size: 10px;
    vertical-align: middle;
}

.wind
{
    display: none;
}

.showWind .wind
{
    display: block;
}

.weatherRadar
{
    position: relative;
}

.radarOnly
{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    opacity: 0.75;
    display: block;
}

.positionMarker
{
    position: absolute;
    margin-top: -4px;
    margin-left: -4px;
    overflow: hidden;
    display: inline-block;
    background-color: #f00;
    height: 6px;
    width: 6px;
    border-radius: 4px;
    border: 1px solid #000;
}

.toggleWind,
.weatherRadar,
.toggleSat
{
    -moz-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
    cursor: pointer;
}

.showWind .toggleWind
{
    color: #ffbf00;
}

.satellite .visible,
.satellite .infrared,
.satellite .color
{
    display: none;
}

.showInfrared .infrared,
.showVisible .visible,
.showColor .color
{
    display: inline-block;
}

.weatherControlPannel,
.toggleSat
{
    margin-left: 10px;
    font-size: 11px;
}

.drz-imagePlayer
{
    position: relative;
}

.drz-imagePlayer .date
{
    position: absolute;
    top: 5px;
    left: 5px;
    color: #fff;
}

#PastTemperatures
{
    height: 400px;
    width: 100%;
}

#TempDetail,
#HourlyTempDetail
{
    font-size: 14px;
    font-weight: normal;
    display: inline-block;
    height: 0;
    vertical-align: top;
    margin-top: 4px;
}

#HourlyTempDetail
{
    height: auto;
    margin-bottom: 6px;
    min-height: 22px;
    font-size: 14px;
}

.hourlyTemperatures
{
    overflow: hidden;
}

.hourlyTemperatures svg
{
    overflow: visible !important;
}

.toggleGetData,
.toggleGetGaps,
.showGettingDates
{
    font-size: 10px;
    cursor: pointer;
    margin-left: 10px;
}

.showPastTemps,
.toggleRadar,
.toggleRadarLoop
{
    margin-top: 10px;
    cursor: pointer;
}

.toggleGetData:hover,
.toggleGetGaps:hover,
.showGettingDates:hover,
.showPastTemps:hover,
.toggleRadar:hover,
.toggleRadarLoop:hover
{
    text-decoration: underline;
}

.globe
{
    margin: 0 auto;
}
