/*!
 * wBox v.4.1
 * © 2014-2018  {:Krzysiek Maziarz
 * biblioteka wspomaga bieżącą prezentację warunków 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: #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:
}

#title
{	
	padding: 0px;
    margin: 0px;
	position: absolute;
	width: 1600px;
	height: 40px;
	text-align: center;
    font-family: 'Signika';
    font-size: 40px;
    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, .Forc, .wSock, .cBase, .isRain, .rainIcon
{
    position: absolute;
}



.Fspd
{
	position: absolute;
	text-align: center;
	width: 34px;
	color: #8C7853 ;
	font-size: 20px;
	font-weight: bold;
	
}

.FspdNow
{
	position: absolute;
	text-align: center;
	width: 40px;
	color: #8C7853 ;
	font-size: 30px;
	font-weight: bold;
	opacity: 0.7;
	
}


.raiN, .dryDays 
{
    position: absolute;
    font-weight: bold;
    text-align: center;
	width: 60px;
}

.dew 
{
    position: absolute;
    font-weight: bold;
    text-align: center;
	width: 120px;
	color: #5190f6;
}

.rainRate
{
    position: absolute;
    font-weight: bold;
    text-align: center;
	width: 60px;
}

.FriS
{
    position: absolute;
    border:1px solid #000;
}

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

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

.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;
	font-size: 45px;
    text-align: center;
	width: 60px;
}

.wCtext
{
    position: absolute;
    font-weight: bold;
	font-size: 25px;
    text-align: center;
	width: 800px;
	background-color: #000000;
}

.nowMx
{
    position: absolute;
    font-weight: normal;
	font-size: 60px;
    text-align: right;
	width: 60px;
}

.testTemp
{
	position: absolute;
	width: 98px;
	height: 50px;
	
	
	
}

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

.Ftmn
{
    position: absolute;
    font-weight: normal;
	font-size: 28px;
    text-align: left;
	width: 35px;
	top: 11px;
	
	
}

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

.airQualInd
{
	position: absolute;
	width: 200px;
	height: 70px;
	text-align: center;
	font-size: 60px;
	font-weight: bold;
	
	}
	
.aq
{
	position: absolute;
	width: 264px;
	text-align: left;
	font-size: 50px;
	
	
	}
	
.pm25
{
    position: absolute;
    font-weight: bold;
	font-size: 40px;
    text-align: right;
	width: 100px;
	
}

.pm25sym
{
    position: absolute;
    font-weight: bold;
	font-size: 25px;
    text-align: left;
	width: 133px;
	
		
}

	

.nowMn
{
    position: absolute;
    font-weight: normal;
	font-size: 40px;
    text-align: center;
	width: 35px;
	opacity: 0.7;
}
.fnBR
{
    position: absolute;
    font-weight: bold;
    text-align: right;
}

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

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

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

.label
{
    text-align: center;
	width: 290px;
	height: 40px;
	position: absolute;
	margin: auto;
	font-size: 30px;
	
}

#RM33, #RT27, #RM37

{
    position: absolute;
    color: #8F3737;
    text-align: center;
	width: 80px;
	
}

#RT29, #RM34, #RM38

{
	position: absolute;
    color: #236B8E;
    text-align: center;
	width: 80px;
	
}
.fRNG
{
    position: absolute;
    text-align: right;
    color: #7f7e7e;
}

.fRBG
{
    position: absolute;
    text-align: right;
    font-weight: bold;
    color: #7f7e7e;
}
.Ftim_box
{
	width: 112px;
	 position: absolute;
	 
}	 
.Ftim
{
    position: absolute;
    opacity: 0.50;
	margin: 0 auto;
}

.Fico
{
    position: absolute;
	opacity: 0.9;
    
}

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

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

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

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

.linWebcam
{
    position: absolute;
    border: 4px solid #282828;
	opacity: 0.8;
}

.linsr
{
    position: absolute;
    border: 3px solid #FFA007;
	opacity: 0.5 ;
}

.linss
{
    position: absolute;
    border: 3px solid #F77409;
	opacity: 0.5 ;
}
.linX
{
    position: absolute;
    border:1px solid #990000;
}

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

.dBg3
{
    position: absolute;
    font-weight: normal;
    text-align: right;
}

.test
{ position: absolute;
   
}

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


.Hut
{
    position: absolute;
    color: #AF870E;
    text-align: right;
	
}

.HutHumidity
{
    position: absolute;
    color: #AF870E;
    text-align: right;
	
}
.Sun
{
    position: absolute;
    text-align: center;
	color: #8C7853;
	
	
}

.moonTimes
{
    position: absolute;
    text-align: center;
	color: #8C7853;
	
	
	
}

#SunArrow
{
	position: absolute;
	width: 13px;
	height: 112px;
	
}

.arrowUp, .arrowDown

{
	position: absolute;

}


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

.Strikes
{
    position: absolute;
	width: 100px;
    text-align: center;
	font-weight: bold;
}

.lightIcon
{
    position: absolute;
	text-align: center;
	
}

.flash
{
	position: absolute;
	
}
		
.UV
{
    position: absolute;
    text-align: center;
}

.UVid
{
    position: absolute;
    font-size: 5px;
    height: 7px;
    width: 50px;
}

.UVidMain
{
    position: absolute;
    font-size: 5px;
    height: 12px;
    width: 80px;
}

.sunicon
{
    position: absolute;
    text-align: center;
	
}



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

#Re24 {
	width: 40px;
	text-align: left;
	
}

#Re25 {
	width: 100px;
	text-align: left;
	
	
}

#LT01 {
	width: 100px;
	text-align: center;
	
}

#RT18
{
    text-align: center;
    color: #0B8B08;
	width: 150px;
}


#RT10, #RM22, #RT04, #RM24, #RT23, #RT70, #RT71, #RM26, #Re26a, #RT72, #RT56, #RM46 
{
    font-weight: bold;
	text-align: center;
	width:120px;
	
}

#RT24, #RM25 
{
	text-align: center;
	width:120px;
	
}

#RT53
{
    font-weight: bold;
	text-align: center;
	width:140px;
	font-size: 60px;
	
}

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

#vLHL
{
    color: #236B8E;
    text-align: center;
	width: 75px;
}

#vHLH
{
    color: #8F3737;
    text-align: center;
	width: 75px;
}

#vHHH
{
    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: 20px;
}

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

.moon
{
    fill: #F9EDB2;
    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);
    }
}
.blinking
{
	
    animation:blinkingText 1.2s infinite;
	position: absolute;
	width: 80px;
    text-align: right;
	font-weight: bold;
}

@keyframes blinkingText{
    0%{     color: #F62217;    }
    49%{    color: #F62217; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #F62217;    }
}

.lightningFlash
{
	
    animation:lightningFlash 1.0s infinite;
	position: absolute;
	
	
	
}

@keyframes lightningFlash{
    0%{     opacity: 0.7; }
    20%{    opacity: 1.0; }
    30%{    opacity: 0.7; }
    40%{    opacity: 0.9; }
    70%{    opacity: 1.0; }
	80%{    opacity: 0.7; }
	90%{    opacity: 0.7; }
	100%{   opacity: 1.0; }
}

.lightFlash
{
	
    animation:lightFlash 1.0s infinite;
	position: absolute;
	
	
	
}

@keyframes lightFlash{
    0%{     opacity: 0.0; }
    20%{    opacity: 1.0; }
	25%{    opacity: 0.0; }
    70%{    opacity: 1.0; }
	75%{    opacity: 0.0; }
	90%{    opacity: 0.0; }
	100%{   opacity: 1.0; }
}

/*******Forecast Page Styling********/

.forecast_box
{
    text-align: center;
	width: 145px;
	height: 40px;
	position: absolute;
	margin: auto;
	
}

.forecast_icon
{
    text-align: center;
	width: 145px;
	height: 110px;
	position: absolute;
	opacity: 0.9;
	
	
}

.FtmxFc, .FtmpFc, .FhumFc, .FdewFc, .FccoFc
{
    text-align: center;
	width: 145px;
	height: 40px;
	position: absolute;
	margin: auto;
	
}

.FtmnFc
{
    text-align: center;
	width: 145px;
	height: 40px;
	position: absolute;
	margin: auto;
	
}

.UVidFc
{
    position: absolute;
    height: 50px;
    width: 105px;
	
	
}

.UVitFc
{
    position: absolute;
    font-size: 40px;
    width: 145px;
	height: 110px;
	text-align: center;
	color: #000;
	
}

.FprsFc
{
    text-align: center;
	width: 145px;
	height: 40px;
	position: absolute;
	
	
}

.FspdFc
{
    text-align: center;
	width: 145px;
	height: 40px;
	position: absolute;
	
	
}

.FspeFc
{
    text-align: center;
	width: 145px;
	height: 80px;
	position: absolute;
	
	
}
.FcRain 
{
	width: 75px;
	position: absolute;
	opacity: 0.7;
}

.FrcpFc
{
    position: absolute;
    height: 50px;
    width: 145px;
	text-align: center;
		
}

.Fcmm
{
    position: absolute;
    height: 50px;
    width: 145px;
	text-align: center;
		
}

/* styling for different charts */

#chartcontainer

{
	height: 100%;
	width: 100%;
	
	
}

/* styling for earth image */

#earth_image {

	width: 850px;
	height: 850px;
	border: 0;
	z-index: -99;
	position: absolute;
	
}