body {
	background: url("http://ping.timgoll.de/images/background.jpg") fixed no-repeat center;
	background-size: 110%;
	margin: 0 auto;
	font-family: sans-serif;
}

.mainContent {
	margin: 0 auto;
	width: 1200px;
}

.mainHeading {
	padding: 20px;
	width: calc(100% - 40px);
	font-size: 33px;
	font-weight: bold;
	color: rgb(230,230,230);
	text-align: center;
	text-shadow: rgb(70,70,70) 4px 4px 4px;
}

.contentBox {
	border-top: 3px solid;
	padding: 15px;
	float: left;
	width: calc(50% - 50px);
	height: 500px;
	margin-bottom: 20px;
	background: linear-gradient(150deg, rgba(0,0,0,0.8) -25%, rgba(0,0,0,0.1) 40%); 
}

.contentBoxLivingroom {
	border-top-color: orange;
	margin-right: 20px;
}

.contentBoxHall {
	border-top-color: aqua;
}

.contentBoxOutside {
	border-top-color: lime;
	margin-right: 20px;
}

.contentBoxSettings {
	border-top-color: rgb(134,134,87);
}

.contentBoxHeadingArea {
	float: left;
	width: 100%;
}

.contentBoxHeading {
	font-size: 20px;
	font-weight: bold;
	color: rgb(220,220,220);
	text-shadow: rgb(25,25,25) 2px 2px 4px;
	float: left;
	padding-top: 10px;
	padding-left: 15px; 
}

.contentBoxHeadingSymbol {
	width: 40px;
	height: 40px;
	border-radius: 20px;
	box-shadow: rgb(25,25,25) 1px 1px 4px;
	float: left;
}

.contentBoxHeadingSymbolLivingroom {
	background-color: orange;
}

.contentBoxHeadingSymbolHall {
	background-color: aqua;
}

.contentBoxHeadingSymbolOutside {
	background-color: lime;
}

.contentBoxHeadingSymbolSettings {
	background-color: rgb(134,134,87);
}

.contentBoxMainArea {
	float: left;
	width: 100%;
	margin-top: 15px;
}

.contentBoxMainLeft {
	float: left;
	width: calc(50% - 5px);
	margin-right: 10px;
}

.contentBoxMainRight {
	float: left;
	width: calc(50% - 5px);
}

/*************************************/

.buttonArea {
	float: left;
	width: 100%;
	height: 75px;
	background-color: rgb(230,230,230);
	border-radius: 4px;
	cursor: pointer;
	margin-bottom: 15px;
}

.sensorArea {
	float: left;
	width: 100%;
	height: 75px;
	background-color: rgb(230,230,230);
	border-radius: 4px;
	margin-bottom: 15px;
}

.buttonArea:hover, .sensorArea:hover, .settingsArea:hover {
	background-color: rgb(245,245,245);
}

.buttonStatus {
	float: left;
	height: 100%;
	width: 15px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.buttonStatusInactive {
	background-color: red;
}

.buttonStatusActive {
	background-color: green;
}

.buttonText {
	float: left;
	width: calc(100% - 35px);
	padding: 10px;
}

.buttonDescription {
	font-size: 12px;
	font-style: italic;
}

/****************************************************/
.turnAllOnOf {
	width: 100%;
}

.turnAllOnOfButton {
	float: left;
	width: calc(50% - 20px);
	padding: 10px;
	border-radius: 4px;
	cursor: pointer;
	margin-bottom: 15px;
	font-weight: bold;
	margin-top: 15px;
}

.turnAllOnOfButtonOff {
	background-color: rgb(255,150,150);
}

.turnAllOnOfButtonOff:hover {
	background-color: red;
}

.turnAllOnOfButtonOn {
	background-color: rgb(150,255,150);
}

.turnAllOnOfButtonOn:hover {
	background-color: green;
}

/**********************************/
.settingsArea {
	float: left;
	width: calc(100% - 20px);
	padding: 10px;
	background-color: rgb(230,230,230);
	border-radius: 4px;
	margin-bottom: 15px;
}

/* Placeholder */
input::-webkit-input-placeholder    { opacity: 1.0; }
input::-moz-placeholder             { opacity: 1.0; }
input:-ms-input-placeholder         { opacity: 1.0; }
input:-moz-placeholder              { opacity: 1.0; }

input:focus::-webkit-input-placeholder    { opacity: 0.5; }
input:focus::-moz-placeholder             { opacity: 0.5; }
input:focus:-ms-input-placeholder         { opacity: 0.5; }
input:focus:-moz-placeholder              { opacity: 0.5; }

input[type=text] {
	width: 95%;
	font-family: "OpenSans", sans-serif;
	margin: 0 0;
	background-color: transparent;
	padding: 7px 5px;
	border-radius: 2px;
	border: 1px solid #cfcfcf;
	-webkit-transition: background-color .25s ease;
}

input[type=text]:hover {
	background-color: white;
	-webkit-transition: background-color .25s ease;
}

input[type=text]:focus {
	background-color: white;
	outline: 0;
	border: 1px solid #95D2DF;
	box-shadow: 0 0 5px 4px rgba(36,184,194, 0.1);
}

input[type=text].textError {
	border-color: red;
	background-color: rgba(255,0,0,0.2);
}

.textArea {
	width: 100%;
	float: left;
	margin-bottom: 15px;
}

.textAreaLeft {
	width: calc(100% - 120px);
	float: left;
}

.textAreaRight {
	width: 120px;
	float: left;
}

.textAreaSend {
	width: 100%;
	float: left;
	border-radius: 4px;
	background-color: rgb(134,134,87);
	cursor: pointer;
	font-weight: bold;
	text-align: center;
	padding: 22px 0;
}

.textAreaSend:hover {
	background-color: rgb(124,114,67);
}