/*-------------------- Reset ---------------- */

* {
	margin: 0;
	padding: 0;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

*, *:before, *:after { box-sizing: inherit; };

html { 
	box-sizing: border-box;
}


/*-------------------- Cross-Browser ----------------*/

.OpacityZero {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  /* IE 5-7 */
  filter: alpha(opacity=0);

  /* Netscape */
  -moz-opacity: 0;

  /* Safari 1.x */
  -khtml-opacity: 0;

  /* Good browsers */
	opacity: 0;
}


/*-------------------- Default ----------------*/

BODY {
	font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
	/*font-size: calc(16px + 0.2vw);
	line-height: calc(1.1em + 0.2vw);*/
	background-color: #000;
	overflow-y: auto;
	padding: 0;
}

MAIN {
	display: block;
	max-width: 30em;
	min-width: 18em;
	background-color: #fff;
	border-radius: .5em;
	margin: 1em;
	padding: .5em;
	text-align: center;
}


@media screen and (min-width: 30em) {
	
	MAIN {
		margin: 1em auto 1em auto;
	}
}

HR {
	width: 100%;
	margin: .5em 0 .5em 0;
}

P {
	font-weight: normal;
	margin-bottom: .5em;
}


#HeadTitel {
	position: relative;
	border-radius: .5em;
	border: 1px #fff solid;
	box-shadow: #999 5px 5px 5px;
	margin-bottom: 1em;
	background-color: #000;
}

#HeadTitelChange, #HeadTitelExit {
	/*background-color: green;*/
	color: #fff;
	font-weight: bold;
	padding: .75em;
	z-index: 200;
	cursor: pointer;
}

#HeadTitelChange {
	display: none;
	position: absolute; left: 0;
}

#HeadTitelExit {
	position: absolute; right: 0;
}

#HeadTitelText {
	padding: 1em 0 1em 0;
	margin: 0 3em 0 3em;
	color: white;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	/*background-color: red;*/
	z-index: 100;
	cursor: pointer;
}

#HeadTitelServerVote {
	display: none;
	color: #fff;
	z-index: 200;
	cursor: pointer;
}

#HeadTitelServerVote > hr {
	margin: 0 auto .5em auto;
}

#CamPicContain {
	position: relative;
	display: none;
	width: 100%;
	padding: 0;
	
    overflow: hidden;
    box-sizing: border-box;
	
	border-radius: .5em;
	margin-bottom: .5em;
}

#CamPic {
	width: 100%;
	min-width: 100%;
	min-height: 10em;
	border-radius: .5em;
	border: 1px #000 solid;
}

#Logo {
	position: absolute; top: .5em; right: .75em;
	height: 2em;
	box-shadow: #000 3px 3px 3px;
	opacity: .5;
}

#SunInfo {
	display: none;
	position: absolute; bottom: .25em; left: 0;
	width: 100%;
	padding: .25em;
	border-radius: 0 0 .5em .5em;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-weight: bold;
}

#InfoContain, #ServicesContain {
	position: relative;
	width: 100%;
	height: 2.8em;
	margin-bottom: 1em;
	padding: .75em 0 .25em 0;
	
    overflow: hidden;
    box-sizing: border-box;
	
	border-radius: .5em;
	border: 1px #fff solid;
	-webkit-box-shadow: inset 5px 5px 5px 0px rgba(41,41,41,1);
	-moz-box-shadow: inset 5px 5px 5px 0px rgba(41,41,41,1);
	box-shadow: inset 5px 5px 5px 0px rgba(41,41,41,1);
}

#ServicesContain {
	background-color: red;
}

#InfoText, #ServicesText {
	position: relative;
	display: inline-block;
	margin: 0 auot 0 auto;
	overflow: hidden;
	color: #fff;
	font-weight: bold;
	/*text-transform: uppercase;*/
	text-align: center;
	z-index: 200;
}

#ServicesText {
	padding-left: 100%;
    white-space: nowrap;
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

#InfoLoader {
	position: absolute; top: 0; left: 0;
	display: none;
	width: 100%;
	height: 100%;
	border-radius: .5em;
	overflow: hidden;
	z-index: 100;
}

#InfoLoader:before {
	display: inline-block;
	position: absolute;
	content: "";
	left: -200px;
	width: 200px;
	height: 100%;
	border-radius: 10px;
	background-color: #0066FF;
	
	-webkit-animation: loading 2s linear infinite;
	-ms-animation: loading 2s linear infinite;
	animation: loading 2s linear infinite;
}

#Footer {
	margin-top: 1.5em;
	text-align: center;
	font-size: .75em;
	color: #000;
}


/* Screens -----------------------------------------------------------------------------------------------*/

#HeadTitelChange, #CamPicContain, #ServicesContain, #RoomCom, .RoomComList, #RoomSet, .RoomSetList, #HMChannelsList, #HMVariablesList, #CLObjectsList, #SetupList {
	display: none;
}

#HMChannels, #HMVariables, #CLObjects, #Setup {
	display: none;
	width: 100%;
}

.RoomVarList, .VarList {
	position: relative;
	border: 1px #000 solid;
	border-radius: .5em;
	box-shadow: #999 5px 5px 5px;
	padding: .5em;
	margin: 1em 0 0em 0;
	font-weight: bold;
}

.RoomVarList {
	color: #fff;
	background-color: #000;
	background-image: -webkit-linear-gradient(top, #000, lightgray);
	background-image: -moz-linear-gradient(top, #000, lightgray);
	background-image: -ms-linear-gradient(top, #000, lightgray);
	background-image: -o-linear-gradient(top, #000, lightgray);
	background-image: linear-gradient(to bottom, #000, lightgray);
}

.VarList {
	background-color: #eee;
}

.RoomElem, .ServerVarList {
	color: #000;
	background-color: #fff;
	border: 1px #000 solid;
	border-radius: .5em;
	padding: .25em;
	margin: .5em auto 0 auto;
}

.ListHead {
	position: relative;
	padding: .25em;
	cursor: pointer;
	/*background-color: red;*/
}

.ListHead > span {
	position: absolute; top: 0; right: 0;
	margin-right: .25em;
}

.EditScreen {
	display: inline-block;
}

.RoomSetList, .EditScreen {
	width: 100%;
}

.RoomSetList > input, .EditScreen > input {
	height: 2em;
	float: left;
	border-radius: .5em;
	border: 0;
	border-bottom: 1px #000 solid;
	padding: 0 .25em 0 .25em;
}

.RoomSetList > button, .EditScreen > button {
	width: 2em;
	height: 2em;
	float: right;
	color: #000;
	background-color: #fff;
	border: 1px #fff solid;
	border-radius: 50%;
	box-shadow: #000 3px 3px 3px;
	margin-left: .5em;
}


.EditScreen > div {
	clear: both;	
}

.EditScreen > div > input[type=checkbox] {
    display: none;
}

.EditScreen > div > input[type=checkbox] + label {
	display: inline-block;
	float: left;
	
	width: 3em;
	height: 1.5em;
	border-radius: 1.5em;
	background-color: #fff;
	border: 1px solid #000;
	content: "";
	margin: .5em 0 0 0;
	transition: background-color 0.5s linear;
}

.EditScreen > div > input[type=checkbox] + label:hover {
	cursor: pointer;
}

.EditScreen > div > input[type=checkbox] + label::before {
	display: inline-block;
	float: left;

	width: 1.5em;
	height: 1.5em;
	border-radius: 1.5em;
	background-color: #fff;
	box-shadow: 0 0 .5em #000;
	content: "";
	margin-right: .5em;
	transition: margin 0.1s linear;
}

.EditScreen > div > span {
	float: left;
	white-space: nowrap;
	margin: .75em 0 0 .5em;
	font-weight: normal;
}

.EditScreen > div > input[type=checkbox]:checked + label {
	background-color: black;
	border: 1px solid #fff;
}

.EditScreen > div > input[type=checkbox]:checked + label::before {
	margin: 0 0 0 1.5em;
}

#Setup > #BackupId > input, #Setup > #ServerData > input, #Setup > #ServerData > select {
	padding: .5em .25em .5em .25em;
	border-radius: .5em;
	border: 0;
	border-bottom: 1px #000 solid;
	background-color: #fff;
	width: 90%;
	margin: 0 auto .5em auto;
}

input[type=range] { 
    margin: auto;
    -webkit-appearance: none;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    cursor: pointer;
}

::-webkit-slider-runnable-track {
    background: #fff;
}

::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 2em;
    height: 2em;
    background: #fff;
    border: 1px solid #000;
	border-radius: 50%;
    box-shadow: -100vw 0 0 100vw chartreuse;
}

::-moz-range-track {
    height: 2em;
    background: #fff;
}

::-moz-range-thumb {
    background: #fff;
    width: 2em;
    height: 2em;
    border: 1px solid #000;
    border-radius: 50%;
    box-shadow: -100vw 0 0 100vw chartreuse;
    box-sizing: border-box;
}

::-ms-fill-lower { 
    background: chartreuse;
}

::-ms-thumb { 
    width: 2em;
    height: 2em;
    background: #fff;
    border: 1px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
}

::-ms-ticks-after { 
    display: none; 
}

::-ms-ticks-before { 
    display: none; 
}

::-ms-track { 
    background: #fff;
    color: transparent;
    height: 2em;
    border: none;
}

::-ms-tooltip { 
    display: none;
}


/* BUTTONS --------------------------------------------------------------------------------------------------------*/

.SetButton, .ServerButton {
	position: relative;
	width: 90%;
	padding: .5em;
	border-radius: 2em;
	box-shadow: #999 5px 5px 5px;
	font-weight: bold;
	cursor: pointer;
}

.SetButton {
	color: #fff;
	background-color: #000;
	border: 1px #fff solid;
	margin: .25em auto .5em auto;
}

.ServerButton {
	color: #000;
	background-color: #fff;
	border: 1px #000 solid;
	margin: .5em auto 1em auto;
}

.ComSelect::before {
	position: absolute; right: 2em; top: 50%;
	content: "▼";
	color: none;
	font-size: 1em;
	font-weight: bold;
	pointer-events: none;
}

.ComSelect select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	background: none;
	width: 100%;
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	text-align-last: center;
    outline: none;
}

.ComButton, .ComSelect, .ComShow {
	position: relative;
	color: #fff;
	background-color: #000;
	background-image: -webkit-linear-gradient(top, lightgray, #000);
	background-image: -moz-linear-gradient(top, lightgray, #000);
	background-image: -ms-linear-gradient(top, lightgray, #000);
	background-image: -o-linear-gradient(top, lightgray, #000);
	background-image: linear-gradient(to bottom, lightgray, #000);
	
	border:1px #fff solid;
	font-weight: bold;
	font-size: 1em;
	padding: .5em;
	text-align: center;
	margin: .5em auto 0 auto;
	cursor: pointer;
}

.ComButton, .ComSelect {
	-webkit-border-radius: 5em;
}

.ComShow {
	-webkit-border-radius: 1em;
}

.ComButton > input {
	height: 2em;
	width: 80%;
	font-weight: bold;
	color: blue;
	border-radius: 1em;
	border: 0;
	border-bottom: 1px #000 solid;
	padding: 0 .25em 0 .25em;
	margin: .5em 0 .5em 0;
}

.ComButton > button {
	float: right;
	width: 2em;
	height: 2em;
	color: blue;
	background-color: #fff;
	border: 1px #fff solid;
	border-radius: 50%;
	box-shadow: #000 3px 3px 3px;
	margin: .5em .5em .5em 0;
}

.ComButton .Last, .ComShow .Last {
	font-size: .75em;
	font-weight: normal;
}


.ButtonGreen {
	background-color: green;
	background-image: -webkit-linear-gradient(top, green, #000);
	background-image: -moz-linear-gradient(top, green, #000);
	background-image: -ms-linear-gradient(top, green, #000);
	background-image: -o-linear-gradient(top, green, #000);
	background-image: linear-gradient(to bottom, green, #000);
}

.ButtonRed {
	background-color: red;
	background-image: -webkit-linear-gradient(top, red, #000);
	background-image: -moz-linear-gradient(top, red, #000);
	background-image: -ms-linear-gradient(top, red, #000);
	background-image: -o-linear-gradient(top, red, #000);
	background-image: linear-gradient(to bottom, red, #000);
}

.ButtonBlue {
	background-color: blue;
	background-image: -webkit-linear-gradient(top, blue, #000);
	background-image: -moz-linear-gradient(top, blue, #000);
	background-image: -ms-linear-gradient(top, blue, #000);
	background-image: -o-linear-gradient(top, blue, #000);
	background-image: linear-gradient(to bottom, blue, #000);
}

.ButtonGreen:hover {
	background-image: -webkit-linear-gradient(top, green, darkgreen);
	background-image: -moz-linear-gradient(top, green, darkgreen);
	background-image: -ms-linear-gradient(top, green, darkgreen);
	background-image: -o-linear-gradient(top, green, darkgreen);
	background-image: linear-gradient(to bottom, green, darkgreen);	
}

.ButtonRed:hover {
	background-image: -webkit-linear-gradient(top, red, darkred);
	background-image: -moz-linear-gradient(top, red, darkred);
	background-image: -ms-linear-gradient(top, red, darkred);
	background-image: -o-linear-gradient(top, red, darkred);
	background-image: linear-gradient(to bottom, red, darkred);	
}

.ButtonBlue:hover {
	background-image: -webkit-linear-gradient(top, blue, darkblue);
	background-image: -moz-linear-gradient(top, blue, darkblue);
	background-image: -ms-linear-gradient(top, blue, darkblue);
	background-image: -o-linear-gradient(top, blue, darkblue);
	background-image: linear-gradient(to bottom, blue, darkblue);	
}


/* ----------------- Animationen --------------------- */

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}


@-webkit-keyframes fadeinout {
    from { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
}

@-ms-keyframes fadeinout {
    from { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeinout {
    from { opacity: 0; }
    50%   { opacity: 1; }
    100% { opacity: 0; }
}


@-webkit-keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}

@-ms-keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}

@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}


@-webkit-keyframes fromtop{
    from { opacity: 1; height: 3.3em; }
    to { opacity: .9; height: 10em; }
}

@-ms-keyframes fromtop{
    from { opacity: 1; height: 3.3em; }
    to { opacity: .9; height: 10em; }
}

@keyframes fromtop{
    from { opacity: 1; height: 3.3em; }
    to { opacity: .9; height: 10em; }
}


@-webkit-keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .3; } 
	100% { opacity: 1; }
}

@-ms-keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .3; } 
	100% { opacity: 1; }
}

@keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .3; } 
	100% { opacity: 1; }
}