/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */


/*  SECTIONS  */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}


/*  COLUMN SETUP  */

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child {
    margin-left: 0;
}


/*  GROUPING  */

.group:before, .group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1;
    /* For IE 6/7 */
}


/*  GRID OF FIVE  */

.span_5_of_5 {
    width: 100%;
}

.span_4_of_5 {
    width: 79.68%;
}

.span_3_of_5 {
    width: 59.36%;
}

.span_2_of_5 {
    width: 39.04%;
}

.span_1_of_5 {
    width: 18.72%;
}


/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-device-width: 768px) {
/*@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {*/
    .col {
        margin: 1% 0 1% 0%;
    }
    .span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5 {
        width: 100%;
    }
}

.webCamRow {}

.webCamDiv {}

.webCamImage {
    max-width: 100%;
    height: auto;
}

.firefox .webCamImage {
    max-width: 99%;
    height: auto;
}

.ie .webCamImage {
    max-width: 99%;
    height: auto;
}

.webCamImageTitle {
    color: DodgerBlue;
}

#webCamPreview {
    position: absolute;
    border: 1px solid #ccc;
    background: #333;
    padding: 5px;
    display: none;
    color: #fff;
    width: 430px;
}

#weather {
    display: none;
    /* Hide the DIV */
    position: absolute;
    _position: absolute;
    /* hack for internet explorer 6 */
    overflow: auto;
    background: #FFFFFF;
    left: 300px;
    top: 300px;
    z-index: 1000;
    /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 15px;
    border: 1px solid #C8C9CA;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #333;
    margin-bottom: 15px;
    padding: 10px;
}

#innerWeather {
    background: #FFFFFF;
    border: 1px solid #C8C9CA;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #333;
    margin-bottom: 2px;
    padding: 2px;
}

.webCamImagePreview {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.ui-dialog {
    position: fixed;
}

.fixed-weather-dialog {
    position: fixed;
}

#webCamDiv h5 {
    font-size: 1vmin;
}
/*
figure {
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

figure img {
    vertical-align: top;
    text-align: center;
}

figure figcaption {
    text-align: center;
    font-size: 1vmin;
    color: DodgerBlue;
}
*/
.myButton {
    -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe;
    -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe;
    box-shadow: inset 0px 1px 0px 0px #97c4fe;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
    background: -moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background: -webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background: -o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background: -ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0', GradientType=0);
    background-color: #3d94f6;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #337fed;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #1570cd;
}

.myButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6));
    background: -moz-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
    background: -webkit-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
    background: -o-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
    background: -ms-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
    background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6', GradientType=0);
    background-color: #1e62d0;
}

.myButton:active {
    position: relative;
    top: 1px;
}