@font-face {
	font-family: sfdr;
	src: url('../FONTS/sfdr.ttf');
}

div {
transition-property: color, opacity, box-shadow, text-shadow, border, background-color, background-image, margin, height;
transition-duration: 0.3s;
transition-timing-function: linear;
}

img {
-webkit-transition-property: width, height;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;

-o-transition-property: width, height;
-o-transition-duration: 0.3s;
-o-transition-timing-function: ease-in-out;

-moz-transition-property: width, height;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-in-out;

transition-property: width, height;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}

body { width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: BLACK; }
table.main { width: 100%; height: 100%; border-spacing: 0px; }
table.main td { text-align: center; padding: 0px; }
table.main td.left { width: 600px; vertical-align: top; text-align: left; }
table.main td.right { overflow: hidden; }
table.main td.right div { height: 100%; width: 100%; overflow: hidden; }
table.main td.right div.map_resizer_button { position: absolute; top: 50%; padding: 5px 5px 5px 2px; width: auto; height: auto; color: rgb(0,50,100); font-weight: bold; background-color: rgba(0,100,200,.5); border-radius: 0px 5px 5px 0px; border: 2px solid rgba(0,50,100,.5); border-width: 2px 2px 2px 0px; opacity: .5;}
table.main td.right div.map_resizer_button:hover { opacity: 1; }
iframe { border: 0px solid BLACK; height: 100%; width: 100%; overflow: hidden; }

table.info { width: 100%; text-align: left; }
table.info div {  }
table.info td.time { text-align: left; }

span#time_sec, span#time_utc { display: inline-block; color: WHITE; font-family: sfdr; margin: 4px 0px; }
span#time_sec { font-size: 2.5em; }
span#time_utc { font-size: 3.3em; }
span.zone { font-family: Verdana; font-size: .7em; display: inline-block; margin-left: 5px; color: GRAY; }

div#radar_frame { margin-bottom: 1px; padding: 0px; background-image: url('../IMG/cz_orto_border_600.png'); }
div#radar_frame img { width: 600px; height: 452px; margin: 0px; }

#meteo { display: inline-block; font-family: Verdana, Geneva, sans-serif; font-size: .7em; color: #DCC7A1; text-align: center; }
#meteo div { display: inline-block; }
#meteo .value { font-size: 1.5em; color: WHITE; font-weight: BOLD; }
#meteo .bigger { font-size: 2.3em; font-family: sfdr; }
#meteo .header div div:first-child { text-align: left; }
#meteo div:last-child div:last-child { text-align: right; padding-right: 2px; }

div#webcam_frame { background-color: rgba(0,0,0, .7); width: 100%; bottom: 0px; text-align: center; }
div#webcam_frame img { box-shadow: 0px 0px 10px BLACK; }

div[role="main"] div:first-child { display: none; }

div#wind_graf { display: inline-block; }
div#flightlog { display: inline-block; float: left; color: WHITE; padding: 5px 10px; border-radius: 5px; margin: 5px; background-color: #222; font-family: Verdana;
	background-image: -webkit-linear-gradient(top, rgba(255,255,255, .2)0%, rgba(255,255,255, .1)40%, rgba(0,0,0, 0)50%, rgba(0,0,0, .1)100%);
	background-image:    -moz-linear-gradient(top, rgba(255,255,255, .2)0%, rgba(255,255,255, .1)40%, rgba(0,0,0, 0)50%, rgba(0,0,0, .1)100%);
	background-image:     -ms-linear-gradient(top, rgba(255,255,255, .2)0%, rgba(255,255,255, .1)40%, rgba(0,0,0, 0)50%, rgba(0,0,0, .1)100%);
	background-image:      -o-linear-gradient(top, rgba(255,255,255, .2)0%, rgba(255,255,255, .1)40%, rgba(0,0,0, 0)50%, rgba(0,0,0, .1)100%);
	background-image:         linear-gradient(top, rgba(255,255,255, .2)0%, rgba(255,255,255, .1)40%, rgba(0,0,0, 0)50%, rgba(0,0,0, .1)100%);
}

#flightlog_iframe_frame { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0; background-color: rgba(0,0,0, .3); }
#flightlog_iframe { position: fixed; width: 80%; height: 80%; top: 10%; left: 10%; box-shadow: 3px 3px 30px BLACK; border-width: 0px; border-radius: 10px; }