/*
 * Primarycolor:	#ff6c2b bzw. rgb(255,108,43) (Orange - EPflow logo color)
 * Secondarycolor:	#a9a9a9
 * Backgroundcolor: rgb(255,214,186)
 */
html {
	font-size: 62.5%;
}

body {
	margin: 				0 auto;
	
	font-family: 			Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 				1.4em;
	color: 					#000;
	
	/* background-color:		rgb(255,214,186);*/ 	
}

h1 {
	/*position: absolute;
	top:0;
	padding: 0;
	margin-top:	0.5em;*/
}

p {
 	margin: 0.8em 0 0.2em 0;
}

p.message {
	/*position: absolute;
	top:0;
	padding: 0;
	margin-top:	5em;*/
 	margin: 0.8em 0 0.2em 0;
	font-weight: bold;
	color: red;	
}

div {
	border: 0;
}

/* grauer Balken in der Mitte des Bildschirms */
div#mainbackgroundbar { 
	/* background-color:		#a9a9a9; */
	
    position: 				absolute;
    top:					0;
    bottom:					0;
    margin-top:				auto;
    margin-bottom:			auto;
    height: 				25em;
    width: 					100%;
    padding:				0;	
}

div#main {
	position: 				relative;
    right: 					0;
    left: 					0;
    margin-right: 			auto;
    margin-left: 			auto; 
    /* width: 					33%;*/
    height:					100%;
    top: 					0;
    bottom: 				0;
    padding:				0;		
    text-align: center;
}

div#logo {
	font-size: 1.8em;
	display: inline-block;
	width: 128px;
	padding: 200px 0px 0px 0px;
	margin-right: 30px;
	background-image:		url(../images/EPflow_128.png);
	background-repeat:		no-repeat;
	background-position:	center;
}


/* Block in der Mitte des grauen Balkens, der die Loginform enthält */
div#loginform {
	/* float: right; 
	padding-top: 6em; */
	display: inline-block;
	text-align: left;
}

div#clear {
	clear: both;	
}

div#submit {
    /* position: absolute;
    right: 0; */
    float: right;
    margin-top: 1em;
    bottom: 3.5em;
}

div#footer {
	position: absolute;
	bottom: 0.5em;
	width: 100%;
	text-align: center;	
	color: #93c8ed;
	font-size: 0.8em;
}

form {
	background-color:		transparent;
	margin:					0;
	padding:				0;
}

input#metroedit {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #fff;
    padding: 0.5em;
    background: #dcdcdc;
    width: 30em;
}

input#metroedit:hover {
    background: #e6e6e6;	
}

input#metroedit:focus {
	background: #fff;
	border: 2px solid #000;
}

input#metrosubmit {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    padding: 0.5em;
    background: #93c8ed;    
    color: #fff;
    width: 8em;
    cursor: pointer;
}

input#metrosubmit:focus {
	background: #000;	
}

select#metroselect {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #fff;
    padding: 0.5em;
    background: #dcdcdc;
    width: 30em;
    height: 2.4em !important;
	cursor: pointer;
}

select#metroselect option {
	padding: 0.5em;
}

label#radio {
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px; 
}

label#radio:before {
	content: "";  
	display: inline-block;
	
	width: 15px;
	height: 15px;
	
	margin-right: 3px;
	position: absolute;
	left: 0;
	bottombottom: 1px;
	background: #dcdcdc;
	border: 2px solid #fff;
	border-radius: 10px;	
}

label#radio:hover:before {
    background: #e6e6e6;
	border: 2px solid #696969;	
}

label#radio:checked:before {
	background: #fff;
	border: 2px solid #000;
}

input.metroradio {
	display: none;
}

input.metroradio:checked+label#radio:before {
	content: "\2022";
	color: #000;
	font-size: 2.1em;
/*     line-height: 0.5em; */
/* 	line-height: 0.426em; */
	line-height: 0.48em;
}