/*!
 * wBox v.6.1
 * © 2014-2020   {:Krzysiek Maziarz
 * biblioteka wspomaga biezaca prezentacje warunkow meteorologicznych
 * odczytywanych ze stacji pogodowej przez program Cumulus MX Sandaysoft
 * prognoza pogody na podstawie YR.NO weather-forecast
 */

@charset "utf-8";

@font-face
{
    font-family: 'Signika';
    src: local('Signika'), url("../font/Signika.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

body
{
    padding: 0px;
    margin: 0px;
    background-color: #000;
}

#wBox
{
    padding: 0px;
    margin: 0px;
    background-color: #000;
    position: absolute;
    text-align: left;
    font-family: 'Signika';
    font-size: 10pt;
    font-weight: normal;
    color: #8C7853;
    border: none;
    width: 1024px;
    overflow: scroll;
}

#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, .Smil, .aPrr, .tTrt, .tTrm, .Zino
{
    position: absolute;
}

.tPrs
{
    position: absolute;
    width: 32px;
}

.tPrr
{
    position: absolute;
    font-size: 32px;
}

.Alrt
{
    position: absolute;
    font-weight: normal;
    text-align: right;
    font-size: 42px;
    color: #8F3737;
    letter-spacing: -1px;
}

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

.Forc
{
    position: absolute;
    opacity: 0.90;
    width: 35px;
}

.FriS
{
    position: absolute;
    height: 3px;
    background: #000;
}

.Frin
{
    position: absolute;
    background-color: #004284;
    width: 32px;
}

.Fprs
{
    position: absolute;
    background-color: #2F5C2F;
    opacity: 0.70;
    height: 3px;
    width: 66px;
}

.Gprs
{
    position: absolute;
    opacity: 0.80;
}

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

.fnNR
{
    position: absolute;
    font-weight: normal;
    text-align: right;
    font-size: 28px;
}

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

.fnBC
{
    position: absolute;
    font-weight: bold;
    font-size: 29px;
    text-align: center;
    width: 48px;
}

.ffNC
{
    position: absolute;
    font-weight: normal;
    font-size: 26px;
    text-align: right;
    width: 40px;
}

.UVid
{
    position: absolute;
    font-size: 4px;
    height: 4px;
    width: 40px;
}

.ftSG
{
    position: absolute;
    font-weight: normal;
    font-size: 26px;
    text-align: center;
    width: 28px;
    color: #6F6F6F;
}

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

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

.fGNR
{
    position: absolute;
    color: #244623;
    text-align: right;
}

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

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

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

.Ftim
{
    position: absolute;
    opacity: 0.50;
    width: 25px;
}

.Fico
{
    position: absolute;
    opacity: 0.60;
    width: 40px;
}

.Fwkd
{
    position: absolute;
    text-align: right;
    font-weight: normal;
    color: #7f7e7e;
    opacity: 0.70;
    font-size: 22px;
}

.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%;
    font-size: 36px;
    width: 55px;
}

.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%;
    font-size: 36px;
    width: 55px;
}

.linD
{
    position: absolute;
    border: 1px solid #353535;
}

.linH
{
    position: absolute;
    height: 3px;
    background: #323232;
}

.linV
{
    position: absolute;
    width: 2px;
    background: #323232;
}

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

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

.dBg4
{
    position: absolute;
    font-weight: normal;
    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-box-shadow: 0 0 2em grey;
    -moz-box-shadow: 0 0 2em grey;
    border-radius: 50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
}

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

#RT23
{
    font-weight: bold;
}

#Wsoc
{
    opacity: 0.60;
    height:100px;
    transform-origin: 50% 0%;
    transform-style: preserve-3D;
    -moz-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
}

#Wsob
{
    opacity: 0.90;
    width: 18px;
}

#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, #gPres
{
    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: 16px;
}

.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);
    }
}