@charset "utf-8";

html { 
  background: url(background.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	

}


body {
	color: #ff8b3d;
 	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	min-width:900px;
	min-height:650px;
}

/******************************************************************/
table {
	height: 100%;
	width:100%
}

/*********************TOP*****************************/
#top-row {
	height:220px;
	vertical-align: top;
}

#hh1 {	
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	padding: 10px;
	background-color: #363636;
	opacity: 0.6;
	text-align: center;
 	font-family: 'Roboto Condensed', sans-serif;
	font-size: 50px;
	font-weight: 700;
	text-decoration: none;
}

#hh1 a {
	text-decoration: none;
	color: white;
}

#hh2 {	
	border: none;
	padding: 10px;
	position: relative;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 40px;
	text-align: center;
	color: white;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
 	-webkit-box-shadow:  0px 10px 20px 0px rgba(0, 0, 0, 0.3);
	box-shadow:  0px 10px 20px 0px rgba(0, 0, 0, 0.3); 

	
}
/************************end***********************************/


/*********************Regiser*****************************/
#register-column {
	width:100%;
	text-align: -webkit-center;
	text-align: -moz-center;
}

#sheet {	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
 	-webkit-box-shadow:  0px 10px 20px 0px rgba(0, 0, 0, 0.3);
	box-shadow:  0px 10px 20px 0px rgba(0, 0, 0, 0.3);  

	height: 435px;
	width: 700px; 
	align:left;
	border-radius: 4px; 
	padding: 35px; 
	background: #333;
	opacity:0.8;
	color: white;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 17px;
}

#sheet a { color:#1ff}
/************************end***********************************/


/*********************Left*****************************/
#left-spacer-column {
	width:30%;
}
/************************end***********************************/


/*********************Middle*****************************/
#login-form-column {
	width:40%;
	text-align: -webkit-center;
	text-align: -moz-center;
	text-align: -o-center;
}

#login-form {
	width: 300px;

	background-color: #363636;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
  	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
 	 -webkit-box-shadow:  0px 10px 20px 0px rgba(0, 0, 0, 0.3);
   	box-shadow:  0px 10px 20px 0px rgba(0, 0, 0, 0.3);  
}


#login-form h1 {
	position:relative;
	margin:0;
	background-color: #292829;
	border-radius: 5px 5px 0px 0px;
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	color: #fff;
	padding: 20px;
	text-align: center;
	text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
	font-size: 14px;
}

#login-form fieldset {

	border: none;
	padding: 20px;
	position: relative;
}


#login-form fieldset form {
	overflow: hidden;
}

#login-form fieldset form input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	outline: none;
  -webkit-appearance:none;
  width: 260px;
  align: center;
  position: center;
  

}

#login-form fieldset form input[type="login"] {
	border: 1px solid #292829;
	border-radius: 3px 3px 0px 0px;
	-moz-border-radius: 3px 3px 0px 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
	padding: 12px 10px;
	 -webkit-appearance:none;
}

#login-form fieldset form input[type="password"] {
	border: 1px solid #292829;
	border-top: none;
	border-radius: 0px 0px 3px 3px;
	-moz-border-radius: 0px 0px 3px 3px;
	-webkit-border-radius: 0px 0px 3px 3px;
	padding: 12px 10px;
	 -webkit-appearance:none;
}

#login-form fieldset form input[type="submit"] {
	background-color: #ebebeb;
	border: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	color: #404040;
	cursor: pointer;
	float: none;
	font-weight: bold;
	margin-top: 20px;
	padding: 12px 12px;
  -webkit-appearance: none;
}

#login-form fieldset form input[type="submit"]:hover {
	background-color: #e0e0e0;
}

#login-form fieldset form input[type="button"] {
	background-color: #ebebeb;
	border: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	color: #404040;
	cursor: pointer;
	float: none;
	font-weight: bold;
	margin-top: 1px;
	padding: 12px 12px;
  -webkit-appearance: none;
}

#login-form fieldset form input[type="button"]:hover {
	background-color: #e0e0e0;
}


#login-form fieldset form span:before {
	background-color: #c9c9c9;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	content: "?";
	display: inline-block;
	height: 20px;
	line-height: 20px;
	margin-right: 10px;
	text-align: center;
	width: 20px;
}

#login-form fieldset form span {
	font-size: 12px;
	margin-top: 40px;
}

#login-form fieldset form span a{
	color: #eb6d1a;
	text-decoration: none;	
}

#login-form fieldset form span a:hover {
	color: #eb6d1a;
}
/************************end***********************************/



/*********************Right*****************************/
#labels-column {
	width:30%;
	vertical-align: bottom;
}

#labels-container {	
	position:absolute;
	bottom:10%;
	right: 3%;
	min-width: 200; 
	width: 29%; 
}

#label {	
	margin:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
 	-webkit-box-shadow:  0px 10px 20px 0px rgba(0, 0, 0, 0.3);
	box-shadow:  0px 10px 20px 0px rgba(0, 0, 0, 0.3);  	

	position: relative;
	align:right;
	padding: 10px;
	width: 95%; 

	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 100;
	font-size: 18px;
	text-align: right;
	color: white;
}

#label a {	
	color: white;
}
/*********************end*****************************/


/*********************BOTTOM*****************************/
#bottom-row {
	height:40px;
	vertical-align: bottom;
	text-align:right;
}
/**********************end*************************************/





/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media (orientation: portrait) {
	html { 
		background: url(background-portrait.png) no-repeat left top fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	body{
		min-width:900px;
		min-height:901px;
		width: auto !important;
		height: auto !important;
	}


/*********************Left*****************************/
#left-spacer-column {
	width:0%;
}
/************************end***********************************/


/*********************Middle*****************************/
#login-form-column {
	width:100%;
}

#login-form {
	top: 30%;
	left: 15%;
	width: 70%;
}


#login-form h1 {
	font-size: 36px;
	padding:40px;
}

#login-form fieldset {
	padding: 20px;
}

#login-form fieldset form {
	width: 100%;
}

#login-form fieldset form input {
	font-size: 26px;
  	width: 100%;
}

#login-form fieldset form input[type="login"] {
  	width: 100%;
	font-size: 30px;
	height: 100px;
	margin-bottom: 5px;
}

#login-form fieldset form input[type="password"] {
  	width: 100%;
	font-size: 30px;
	height: 100px;
	margin-bottom: 20px;
}

#login-form fieldset form input[type="submit"] {
	font-size: 26px;
	height: 100px;
	margin-bottom: 2px;
}

#login-form fieldset form input[type="button"] {
	font-size: 26px;
	height: 100px;
	margin-bottom: 2px;
}

/************************end***********************************/



/*********************Right*****************************/
#labels-column {
	width:0%;
	display:none;
}
/*********************end*****************************/

}
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/