@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'), url(https://themes.googleusercontent.com/static/fonts/roboto/v9/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://themes.googleusercontent.com/static/fonts/roboto/v9/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://themes.googleusercontent.com/static/fonts/roboto/v9/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}




body{
	background: url(/loginpage/img/diagonal-noise.png) left top repeat;
	font-family: 'Roboto', sans-serif;
	font-size: 12pt;
}
html, body{
	margin: 0;
}
#container{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: white;
	box-shadow: 0 0 0 8px rgba(128, 128, 128, 0.28);
}
#a{
	background: rgb(66,66,66);
	background: radial-gradient(ellipse at center, rgb(66,66,66)0%,rgb(33,33,33) 100%);
	padding: 5px 15px;
}

#b{
	background: rgb(0,183,234);
	background: radial-gradient(ellipse at center, rgb(0,183,234) 0%,rgb(0,158,195) 100%);
	cursor: pointer;
	transition: color 1s;
	text-align: center;
}
#b:hover{
	background: rgb(0,183,234);
	background: radial-gradient(ellipse at center, rgb(0,183,226) 0%,rgb(0,158,195) 100%);
	color: rgb(240, 240, 240);
}
@media	only screen and (-webkit-min-device-pixel-ratio: 1.3) and (orientation:landscape),
		only screen and (-o-min-device-pixel-ratio: 13/10) and (orientation:landscape),
		only screen and (min-resolution: 120dpi) and (orientation:landscape){
	#container {
		height: 250px !important;
	}
	#a{
		float: left !important;
		width: calc(100% - 110px) !important;
	}
	#b{
		float: right !important;
		width: 80px !important;
		height: 250px !important;
	}
	#b i{
		line-height: 250px !important;
		font-size: 120px !important;
	}
	#b:hover i{
		font-size: 118px !important;
	}
}
	
@media	only screen and (-webkit-min-device-pixel-ratio: 1.3),
		only screen and (-o-min-device-pixel-ratio: 13/10),
		only screen and (min-resolution: 120dpi){
	
	#b{	
		height: 100px;
	}
	#b i{
		line-height: 100px;
		font-size: 80px;
	}
	#b:hover i{
		font-size: 78px;
	}
	
	
	#container {
		width: 100%;
		height: 350px;
	}
	#a{
		height: 240px;
	}
	#inputdiv div{
		margin-top: 5px;
	}
	#a label{
		margin-top: 15px;
	}
	
}
@media	only screen and (-webkit-max-device-pixel-ratio: 1.3),
		only screen and (-o-max-device-pixel-ratio: 13/10),
		only screen and (max-resolution: 120dpi){
	#container {
		width: 550px;
		height: 220px;
		border-radius: 15px;
	}
	#a{
		float: left;
		width: 420px;
		height: 210px;
		border-radius: 15px 0 0 15px;
	}
	
	#inputdiv div{
		float: left;
		width: 50%;
	}
	#a label{
		margin-top: 24px;
	}
	
	
	#b{
		float: right;
		width: 100px;
		height: 100%;
		border-radius: 0 15px 15px 0;
	}
	#b i{
		line-height: 220px;
		font-size: 120px;
	}
	#b:hover i{
		font-size: 118px;
	}

}

#title{
	font-size: 25px;
	line-height: 40px;
	margin: 10px;
	letter-spacing: 1px;
}
#a hr{
	color: rgb(61, 61, 61);
	border: none;
	height: 2px;
	background-color: rgba(136, 136, 136, 0.06);
	box-shadow: 0 0 20px 0px rgba(48, 48, 48, 0.13);
}
#inputdiv input{
	width: 90%;
	padding: 5px;   
	border: 1px solid #DDDDDD;
	border-radius: 3px;
	box-shadow: 0 0 2px #DDDDDD;
}
#inputdiv input:hover{
	border:1px solid #cccccc;
}
#inputdiv input:focus{
	box-shadow:0 0 2px #FFFE00;
}
#inputdiv{
	font-size: 10pt;
	font-weight: 100;
}

#err{
	color: red;
	margin-left: 10px;
}
	
input[type=checkbox].css-checkbox {
	position: absolute; 
	overflow: hidden; 
	clip: rect(0 0 0 0); 
	height:1px; 
	width:1px; 
	margin:-1px; 
	padding:0;
	border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
	padding-left:20px;
	height:16px; 
	display:inline-block;
	line-height:16px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:15px;
	vertical-align:middle;
	cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -16px;
}

.css-label{ background-image:url(/loginpage/img/depressed.png); }

#getnewpass{
	font-size: smaller;
	color: white;
	text-decoration: none;
	display: none;
}
#getnewpass:hover{
	color: red;
}