/* @import url(http://fonts.googleapis.com/css?family=Dosis:200,400,500,600); */
* {
	margin-top: 1em;
	margin: 0;
	padding: 0;
	outline: 0;
}

body {
	font-family: 'Arial';
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	background: #ffffff;
}
/* unvisited link */
	a.url:link {
		color: black;
		text-decoration:none;
		text-align: center;
		font-size: 12px;
		font-family: 'Arial';
		font-weight: normal;
		letter-spacing: 1px;
}
/* visited link */
	a.url:visited {
		color: black;
		text-decoration: none;
}
/* mouse over link */
	a.url:hover {
		color: gray;
		text-decoration: none;
}
/* selected link */
	a.url:active {
		color: gray;
}

table, th, td {
	width: 960px;
	border: 0px solid black;
	padding: 1px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-size: 12px;
	font-family: 'Arial';
	font-weight: normal;
}

div.last-update {
	/* border: solid 1px red; */
	text-align: center;
	font-size: 14px;
	font-family: 'Arial';
	font-weight: none;
}

div.history {
    position: relative;
	top: 75px;
    left: 60px;
}

.button {
	background-color: #f5f5f5;
	border: 2px solid black;
	outline: none;
	color: black;
	padding: 3px 3px;
	font-size: 10px;
	text-decoration: none;
	margin: 1px 1px;
	width: 100px;
	cursor: pointer;
}

.button:hover {
  background-color: #666;
  color: white;
}

/* Senzor #A, #B, #C */
div.content {
	position: absolute;
	margin: 220px auto;
	text-align: center;
	left: 50%;
	transform: translate(-50%, 0);
	width: auto;
}

div.content .label {
	position: relative;
	margin: 0 auto;
	width: auto;
	text-align: center;
	font-size: 20px;
	font-family: 'Arial';
	font-weight: bold;
}

/* Prostor pro textova pole */
div.thermometers {
	position: absolute;
	margin: 0px auto;
	left: 50%;
	transform: translate(-50%, 0);
	width: 880px;
}

.de .den, .de .dene, .de .denem, .de .deneme { position: absolute; left: 50%; top: 50%;}
.de {
    position: relative;
	float: left;
	margin: 10px;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    background-color: transparent;
}
.den {
    position: relative;
    width: 170px;
    height: 170px;
    margin: -85px 0 0 -85px;
    border-radius: 100%;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);
    background: #df3341;
    background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));
    background: -webkit-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);
    background: linear-gradient(to right, #df3341 0%,#d4f355 50%,#61c0ec 100%);
    position:relative;
}
.dene {
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 100%;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
    background: #f2f6f5;
    background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
    background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
}
.denem {
    width: 130px;
    height: 130px;
    margin: -65px 0 0 -65px;
    border-radius: 100%;
    background: #cbd5d6;
    background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
    background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
}

.deneme {
    padding: 10px 10px 0 10px;
	width: 80px;
    height: 80px;
    display: inline-block;
    margin: -50px 0 0 -55px;
    color: #555;
    text-shadow: 1px 1px 1px white;
    font-family: 'Dosis';
    font-size: 70px; /* Stupne */
    font-weight: 400;
    text-align: center;
}
.deneme span { font-size: 30px; font-weight: 200; }
.deneme strong { position: absolute; right: 10px; top: 15px; font-size: 34px; }

/* Live arrows */
.mouse_scroll {
	display: inline-block;
	position: absolute;
	border: solid 0px red;
	margin: 3px 0 0 0;
	width: auto;
	height: auto;
}

.m_scroll_arrows_up
{
	display: block;
	-ms-transform: rotate(225deg); /* IE 9 */
	-webkit-transform: rotate(225deg); /* Chrome, Safari, Opera */
	transform: rotate(225deg);
	border-right: 2px solid red;
	border-bottom: 2px solid red;
	margin: 0 0 4px 0;
	width: 6px;
	height: 6px;
}

.m_scroll_arrows_down
{
	display: block;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-right: 2px solid blue;
	border-bottom: 2px solid blue;
	margin: 0 0 4px 0;
	width: 6px;
	height: 6px;
}

.m_scroll_arrows_none
{
	display: block;
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	border-right: 2px solid black;
	border-left: 2px solid black;
	margin: 0 0 4px 0;
	width: 6px;
	height: 6px;
}

.unu
{
	margin-top: 0px;
}

.unu, .doi, .trei
{
	-webkit-animation: mouse-scroll 1s infinite;
	-moz-animation: mouse-scroll 1s infinite;
	animation: mouse-scroll 1s infinite;
}

.unu
{
	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	-webkit-animation-direction: alternate;
	animation-delay: .1s;
	animation-direction: alternate;
	margin-top: -6px;
}

.doi
{
	-webkit-animation-delay: .2s;
	-moz-animation-delay: .2s;
	-webkit-animation-direction: alternate;
	animation-delay: .2s;
	animation-direction: alternate;
	margin-top: -6px;
}

.trei
{
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	-webkit-animation-direction: alternate;
	animation-delay: .3s;
	animation-direction: alternate;
	margin-top: -6px;
}

@-webkit-keyframes mouse-scroll {
	0%   {opacity: 0;}
	50%  {opacity: .5;}
	100% {opacity: 1;}
}

@-moz-keyframes mouse-scroll {
	0%   {opacity: 0;}
	50%  {opacity: .5;}
	100% {opacity: 1;}
}

@-o-keyframes mouse-scroll {
	0%   {opacity: 0;}
	50%  {opacity: .5;}
	100% {opacity: 1;}
}

@keyframes mouse-scroll {
	0%   {opacity: 0;}
	50%  {opacity: .5;}
	100% {opacity: 1;}
}