html {
    position: relative;
    min-height: 100%;
}

body {
	font-family: "Raleway", sans-serif;
/*	padding-top: 70px;*/
    font-size: 16px;
}

body:not(.no-bg) {
/*    background-color: #337ab7;*/
    background-color: #54b734;
}

@media screen and (min-width: 992px) {
    body {
        /* Margin bottom by footer height */
        margin-bottom: 80px;
    }
}

a:link { text-decoration:none; font-weight:bold; }
a:visited { text-decoration:none; font-weight:bold; }
a:hover { text-decoration:none; font-weight:bold; }
a:active { text-decoration:none; font-weight:bold; }
a:focus { text-decoration:none; font-weight:bold; }

#header {
	background-color: #ccc;
	height: 30px;
	line-height: 30px;
	text-align: center;
}

#main-content {
    background-color: #fff;
    padding-bottom: 10px;
    min-height: 300px;
}

.weather-chart {
    height: 300px;
    margin-bottom: 15px;
}

#weather-main-page .weather-chart {
    height: 275px;
}

@media screen and (min-width: 992px) {
    #weather-main-page .weather-chart {
        height: 300px;
    }
}

.footer.bg-dark, .footer.bg-dark a:link, .footer.bg-dark a:visited {
    color: #fff;
}
.footer.bg-dark a:hover, .footer.bg-dark a:active, .footer.bg-dark a:focus {
    color: #bbb;
}

.footer {
    width: 100%;
    padding: 5px;
}

@media screen and (min-width: 992px) {
    .footer {
        position: absolute;
        bottom: 0;
        height: 60px;
    }
}

.footer .col-md-2 {
    line-height: 50px;
}

img#webcam {
    margin: 0 auto;
}

img#webcam-jumbo {
    max-height: 300px;
    float: right;
}

.word-break {
      -ms-word-break: break-all;
      word-break: break-all;
      

      /* Non standard for webkit*/
      word-break: break-word;
 
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
}

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .3;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .3;
    }
}

.loading span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
    font-size: 0.8em;

}

.loading span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.loading span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}

.glyphicon.glyphicon-one-fine-dot:before {
    content: "\25cf";
    font-size: 1.5em;
}

.loading {
    display: none;
}

.is-live .loading {
    /*display: block;*/
}

@media screen and (min-width: 768px) {

    .winter-theme {
        /* font-family: Androgyne;*/
        /* background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');*/
        background-image: url('../img/s1.png'), url('../img/s2.png'), url('../img/s3.png');
        /* height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index:1;
        -webkit-animation: snow 15s linear infinite;
        -moz-animation: snow 15s linear infinite;
        -ms-animation: snow 15s linear infinite;
        animation: snow 15s linear infinite;*/
    }
    @keyframes snow {
        0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
        50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
        100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }
    @-moz-keyframes snow {
        0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
        50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
        100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
    }
    @-webkit-keyframes snow {
        0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
        50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
        100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }
    @-ms-keyframes snow {
        0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
        50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
        100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }
}

.cistern {
    max-width: 154px;
    height: 135px;
    background-color: #fff;
    border: 2px solid grey;
    border-top: none;
    border-radius: 0 0 5px 5px;
    position: relative;
}
.cistern-fill {
    width: 100%;
    max-height: 188px;
    display: block;
    font-size: 14px;
    background-color: blue;
    color: #fff;
    position: absolute;
    bottom: 0;
    text-align: center;
    border-radius: 0 0 4px 4px;
}

.cistern-trapezoid {
    max-width: 154px;
    z-index: 10;
    position: relative;
}

#rawdata-heading {
    padding: 0.4rem 1rem;
}

.sensor-status-wrap {
    padding: .375rem .75rem;
}

.dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
}