body {
	background-color:#a79f8f;
	font-size:18px;
	font-family:sans-serif;
	margin:0;
	padding:0;
	color:#000;
	width:100%;
	min-height:99%;
	position:relative;
	
	min-width:580px;
}
textarea{
	font-family:sans-serif;
}
#header {
	font-size:1.2em;
	position:fixed;
	top:0;
	left:0;
	height:1.52em;
	color:#fff;
	width:100%;
	padding:0.1em 0.5em 0em;
	
	-webkit-box-shadow: 0px 2px 5px 2px #444;
	box-shadow: 0px 2px 5px 2px #444;
	
	background-color:#107f20;
}
#header:hover{
	background-color:#077515;
}

#header a {
	font-size:1.1em;
	color:inherit;
	text-decoration:none;
	margin-left:0.5em;
}
#header a img{
	float:left;
	height:1.2em;
}

#header #login-trigger, #header #user-info-trigger {
	float:right;
	margin-right:1em;
	cursor:pointer;
	height:92%;
	padding:0em 0.4em;
	z-index:991;
	padding-top:0.1em;
	border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
}

#header #user-info-trigger{
	text-transform:uppercase;
	font-weight:bold;
}

#login-overlay, #user-info-overlay{
	display:none;
	position:fixed;
	top:1.95em;
	right:0.56em;
	z-index:990;
	background-color:#fff;
	color:#000;
	border:1px solid #000;
	border-top:0;
	font-size:0.8em;
	text-align:right;
	padding:0.7em 0.7em 0.1em;
	
	-webkit-border-radius: 8px 0px 5px 5px;
	border-radius: 8px 0px 5px 5px;	

	/* To remove sliding animation artifacts */
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden; 
	-ms-backface-visibility:hidden;
	/***************/
}

#login-overlay>form>div{
	margin:0 auto;
	margin-top:0.4em;
	margin-bottom:0.7em;
	width:90%;
	height:1.3em;
}

#user-info-overlay {	
	right:0.55em;
	-webkit-border-radius: 9px 0px 5px 5px;
	border-radius: 9px 0px 5px 5px;
	padding:0.7em 0.2em 0.2em;
}

#user-info-overlay a{
	-webkit-border-radius: 3px;
	border-radius: 3px;
	text-align:left;
	border-bottom:1px solid #bdb;
	margin:0;
	padding:0.2em 0.7em;
	display:block;
}
#user-info-overlay a:last-child{
	border-bottom:0;
}
#user-info-overlay a:hover{
	background-color:#bdb;
}
.login-student, .login-teacher{
	cursor:pointer;
	width:43%;
	float:left;
	border:1px solid #999;
	background-color:#e9e9e9;
	color:#999;
	
	text-transform:capitalize;
	text-align:center;
	padding:0.2em;
	-webkit-border-radius:20px;
	border-radius:20px;	
}
.login-teacher{
	float:right;
}

.login-selected{
	background-color:#107f20;
	color:#fff;
	font-weight:bold;
	
	-webkit-box-shadow: 2px 2px 4px 2px #888;
	box-shadow: 2px 2px 4px 2px #888;
}

#login-overlay input{
	width:14em;
	margin:0.3em 0;
}
#login-overlay input[type="submit"] {
	width:99%;
	font-size:1.31em;
	padding:0.1em 0.3em;
	background-color:#108a20;
	color:#fff;
	cursor:pointer;
	border:0;
	margin-bottom:0em;
	-webkit-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow: 1px 2px 2px 2px #666;
	box-shadow: 1px 2px 2px 2px #666;
}
#login-overlay input[type="submit"]:hover{
	-webkit-box-shadow: 1px 2px 3px 2px #444;
	box-shadow: 1px 2px 3px 2px #444;
	background-color:#007a11;
}

#main {
	min-height:80%;
	font-size:0.9em;
	width:92%;
	border:1px solid #000;
	margin:1.7 auto 0;
	padding:3.2em 0.7em 4em;
	
	-webkit-box-shadow: 0px 2px 5px 3px #555;
	box-shadow: 0px 2px 5px 3px #555;
	background-color:#f5f5f5;
}

#teacher-creates-test, #student-takes-test {
	font-size:1.31em;
	margin:1em;
	text-align:center;
	font-weight:bold;
}

#teacher-creates-test {
	float:left;
	margin-left:4em;
}
#student-takes-test {
	float:right;
	margin-right:4em;
}
#teacher-creates-test img, #student-takes-test img {
	height:9em;
	display:block;
	margin-bottom:1em;
}

.clear {
	clear:both;
}

#benefits-for-teachers, #benefits-for-students {
	border: 1px solid #333;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	-webkit-box-shadow: 1px 1px 2px 2px #666;
	box-shadow: 1px 1px 2px 2px #666;
	width:19em;
	padding-bottom:1em;
	margin-bottom:2em;
}

#benefits-for-teachers h3, #benefits-for-students h3 {
	font-size:1.2em;
	margin:0;
	padding:0.1em 0.2em;
	background-color:#aaa;
	text-align:center;
}

#benefits-for-teachers{
	float:left;
	margin-left:4em;
}

#benefits-for-students {
	float:right;
	margin-right:4em;
}

#benefits-for-teachers input, #benefits-for-students input{
	margin:0.5em 3% 0.2em;
	width:94%;
	font-size:1.2em;
	padding:0.1em 0.3em;
	
}
#benefits-for-teachers input[type="submit"], #benefits-for-students input[type="submit"]{
	font-size:1.31em;
	background-color:#108a20;
	color:#fff;
	cursor:pointer;
	border:0;
	-webkit-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow: 1px 2px 2px 2px #666;
	box-shadow: 1px 2px 2px 2px #666;
}
#benefits-for-teachers input[type="submit"]:hover, #benefits-for-students input[type="submit"]:hover{
	background-color:#007a11;
	-webkit-box-shadow: 1px 2px 3px 2px #444;
	box-shadow: 1px 2px 3px 2px #444;
}

#signup-form, #final-test-info{
	display:none;
	position:fixed;
	z-index:1002;
	left:31%;
	top:15%;
	min-width:300px;
	width:38%;
	max-height:80%;
	background-color:#eee;
	text-align:center;
	
	font-size:1em;
	padding:0.1em 0.31em 0.2em;

	overflow:auto;
	border:4px solid #333;
	-webkit-border-radius:16px;
	border-radius:16px;	
}

#signup-form #close-button, #final-test-info #close-button{
	float:right;
	cursor:pointer;
	margin-bottom:0.5em;
}

#signup-form input, #final-test-info input, #final-test-info textarea{
	margin-bottom:1.2em;
	width:90%;
	height:1.9em;
	font-size:1.05em;
}
#final-test-info textarea{
	height:3.2em;
}

.error{
	background-color:#fdd;
}

#signup-form input[type="submit"], #final-test-info input[type="submit"] {
	font-size:1.22em;
	background-color:#108a20;
	color:#fff;
	cursor:pointer;
	border:0;
	-webkit-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow: 1px 2px 2px 2px #666;
	box-shadow: 1px 2px 2px 2px #666;
}
#signup-form input[type="submit"]:hover{
	background-color:#007a11;
	-webkit-box-shadow: 1px 2px 3px 2px #444;
	box-shadow: 1px 2px 3px 2px #444;
}

#overlay {
	display:none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=40);
    -moz-opacity:0.4;
    -khtml-opacity: 0.4;
    opacity: 0.5;
    z-index: 1000;
}


#footer {
	font-size:0.9em;
	position:absolute;
	bottom:0;
	left:0;
	width:98%;
	height:1.7em;
	padding:0.2em 1%;
	text-align:center;
	background-color:#333;
	color:#eee;
}
#footer:hover{
	background-color:#222;
}

.message{
	text-align:center;
	font-size:1.1em;
	margin:1em auto;
	padding:1em;
	background-color:#cdc;
	width:23em;
	-webkit-box-shadow: inset 2px 2px 5px 3px #777;
	box-shadow: inset 2px 2px 5px 3px #777;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.big-button{
	text-transform:capitalize;
	padding:0.32em;
	height:1.4em;
	font-size:1.1em;
	text-align:left;
	margin:0.7em auto 0;
	background-color:#b6cde5;
	width:12em;
	border:1px solid #000;
	border-bottom:3px solid #000;
	border-right:4px solid #000;
	text-align:center;
	cursor:pointer;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-webkit-box-shadow:2px 2px 5px 3px #777;
	box-shadow:2px 2px 5px 3px #777;
}
.big-button img {
	height:1.5em;
	float:left;
	margin-right:0.4em;
}

.big-button:hover{
	-moz-transform: scale(1.15);
	-webkit-transform: scale(1.15);
	-o-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
}

div#contact-form, div#account-user-info{
	font-size:1.1em;
	margin:0 auto;
	width:40%;
	border:3px solid #555;
	border-left:5px solid #555;
	padding:1em;
	background-color:#e9e9e9;
	padding-bottom:0;
	box-shadow:inset 1px 1px 3px 2px #888;
	-webkit-box-shadow:inset 1px 1px 3px 2px #888;
}
div#account-user-info{
	width:50%;
}
div#account-user-info h3, div#contact-form h3{
	margin-top:0;
}
div#account-user-info form input, div#contact-form form input{
	width:14em;
	font-size:1.1em;
	height:1.4em;
	float:right;
	margin:0 0.2em 0.7em 0.2em;
}
div#contact-form form textarea{
	font-size:1.1em;
	height:5em;
	float:right;
	width:14em;
	margin:0 0.2em 0.7em 0.2em;
}