/*!
 * wBox v.3.2
 * © 2014-2017  {:Krzysiek Maziarz
 * biblioteka wspomaga bieżącą prezentację warunków meteorologicznych
 * odczytywanych ze stacji pogodowej przez program Cumulus MX Sandaysoft
 * prognoza pogody na podstawie: Leuven script for a YR.NO weather-forecast
 */

@import url('http://fonts.googleapis.com/css?family=Signika:regular');

body
{
    padding: 0px;
    margin: 0px;
    background-color: #000000;
    overflow-x: hidden;
    overflow-y: hidden;
}

#wBox
{
    padding: 0px;
    margin: 0px;
    background-color: #000000;
    position: absolute;
    text-align: left;
    font-family: 'Signika';
    font-size: 12pt;
    font-weight: normal;
    color: #8C7853;
    border: none;
}

#box1
{
    background:none;
    border:10px solid #444343;
    border-top-left-radius:40px;
    border-top-right-radius:40px;
    border-bottom-left-radius:40px;
    border-bottom-right-radius:40px;
}

#box2
{
    background:none;
    border:10px solid #444343;
    border-top-left-radius:40px;
    border-top-right-radius:40px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:40px;
}

#box3
{
    background:none;
    border:10px solid #444343;
    border-top-left-radius:0px;
    border-top-right-radius:40px;
    border-bottom-left-radius:40px;
    border-bottom-right-radius:40px;
}

.iBox, .oBox, .raiX, .NoNo, .dirW, .tTrm, .tPrs, .Smil, .tPrr, .Zino
{
    position: absolute;
}

.raiN
{
    position: absolute;
    font-weight: bold;
    text-align: center;
}

.fnNL
{
    position: absolute;
    font-weight: normal;
    text-align: left;
}

.fnNR, .tTrt
{
    position: absolute;
    font-weight: normal;
    text-align: right;
}

.fnBL
{
    position: absolute;
    font-weight: bold;
    text-align: left;
}

.fnBC
{
    position: absolute;
    font-weight: bold;
    text-align: center;
}

.fnBR
{
    position: absolute;
    font-weight: bold;
    text-align: right;
}

.fBNR
{
    position: absolute;
    color: #236B8E;
    text-align: right;
}

.fRNR
{
    position: absolute;
    color: #8F3737;
    text-align: right;
}

.fRNG
{
    position: absolute;
    text-align: right;
    color: #7f7e7e;
}

.fRBG
{
    position: absolute;
    text-align: right;
    font-weight: bold;
    color: #7f7e7e;
}

.oBBR
{
    position: absolute;
    background-color: #000000;
    box-shadow: 0 0 20px 10px #236B8E;
    padding: 4px 8px 4px 8px;
    font-weight: bold;
    text-align: center;
    -webkit-border-radius:20%;
    -moz-border-radius:20%;
    border-radius: 20%;
}

.oRBR
{
    position: absolute;
    background-color: #000000;
    box-shadow: 0 0 20px 10px #8F3737;
    padding: 4px 8px 4px 8px;
    font-weight: bold;
	text-align: center;
    -webkit-border-radius:20%;
    -moz-border-radius:20%;
    border-radius: 20%;
}

.linS
{
    position: absolute;
    border: 2px solid #444343;
}

.linX
{
    position: absolute;
    border:1px solid #990000;
}

.dBg1, .dBg2
{
    position: absolute;
    font-size: 26px;
    text-align: right;
    color: #414141;
}

.Home
{
    position: absolute;
    color: #333333;
    text-align: right;
}

.cOvr
{
    position: absolute;
    border: 1px hidden #000000;
    background-color: #000000;
    box-shadow: 0 0 2em grey;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius: 50%;
}

#RT18
{
    text-align: right;
    color: rgba(045,087,044,0.8);
}

#RT23
{
    font-weight: bold;
}

#vLLL, #vHLH
{
    color: #8F3737;
    text-align: right;
}

#vHHH, #vLHL
{
    color: #236B8E;
    text-align: right;
}

#rosN
{
    -webkit-transform: rotate(-11.25deg);
    -moz-transform: rotate(-11.25deg);
    -o-transform: rotate(-11.25deg);
    -ms-transform: rotate(-11.25deg);
    transform: rotate(-11.25deg);
}

#rosR
{
    -webkit-transform: rotate(168.75deg);
    -moz-transform: rotate(168.75deg);
    -o-transform: rotate(168.75deg);
    -ms-transform: rotate(168.75deg);
    transform: rotate(168.75deg);
}

#Forc
{
    position: absolute;
}

#byKM
{
    position: absolute;
    font-weight: bold;
    text-shadow: -1px -1px 0 #003333, 3px -1px 0 #003333, -1px 2px 0 #003333, 2px 2px 0 #003333;
    color: #000000;
    font-size: 20px;
}

#moon
{
    filter: blur(3px);
}

.moon
{
    fill: #C5D7EB;
    opacity: 0.50;
}

.moonback
{
    fill: #000;
    stroke: #000;
    stroke-width: 0px;
}
.zui-chart-rose .zui-chart-area
{
    animation: animScale 1.2s ease 0s 1;
}

.zui-chart-area .zui-chart-canvas circle
{
    animation: animRadius 0.7s ease 0s 1;
}
@keyframes animFrames
{
    0%{
        opacity: 0;
        transform: translate(0, -100%);
    }
    100%{
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes animScale
{
    0%{
        opacity: 0;
        transform-origin: center;
        transform: scale(0);
    }
    100%{
        opacity: 1;
        transform-origin: center;
        transform: scale(1);
    }
}