
body {
	margin: 0;
	padding: 0;
	background-color: #f9f9f9;
	font-family: arial, 'sans serif';
	font-size: 12px;
	color: #3f3f3f;
}
div {
	border: 0px;
	margin: 0px;
	padding: 0px;
}
div.sign_in {
	margin: 50px auto 0px auto;
	border-radius: 3px;
}
div.sign_in > div.head {
	font-size: 14px;
	padding: 0px 0px 15px 0px;
}
div.sign_in > div.username > input {
	font-size: 14px;
	width: 100%;
	margin: 0px 0px 3px 0px;
	border: 1px solid #aaa;
	border-radius: 3px;
	box-sizing: border-box;
}
div.sign_in > div.username > input:focus {
	border: 1px solid #666;
	box-shadow: 0 0 5px #666;
	outline: 0px;
}
div.sign_in > div.password > input {
	font-size: 14px;
	width: 100%;
	margin: 0px 0px 12px 0px;
	border: 1px solid #aaa;
	border-radius: 3px;
	box-sizing: border-box;
}
div.sign_in > div.password > input:focus {
	border: 1px solid #666;
	box-shadow: 0 0 5px #666;
	outline: 0px;
}
div.sign_in > div.submit > input[type=submit] {
	width: 100%;
	margin: 0px 0px 12px 0px;
	font-size: 14px;
	border: 0px;
	border-radius: 3px;
	background-color: #e6e6e6;
	box-sizing: border-box;
	-webkit-appearance: none; # fuck apple
}
div.sign_in > div.submit > input[type=submit]:focus {
	box-shadow: 0 0 5px #666;
	outline: 0px;
}
div.sign_in > div.row > div.stay_signed_in {
	width: 48%;
	display: inline-block;
}
div.sign_in > div.row > div.stay_signed_in > div.stay_signed_in_checkbox {
	display: inline-block;
	float: left;
}
div.sign_in > div.row > div.stay_signed_in > div.stay_signed_in_checkbox > input[type=checkbox] {
	width: 13px;
	height: 13px;
	margin: 0px 5px 0px 0px;
}
div.sign_in > div.row > div.stay_signed_in > div.stay_signed_in_text {
	display: inline-block;
	float: left;
}
div.sign_in > div.row > div.forgot_password {
	display: inline-block;
	float: right;
	width: 48%;
	text-align: right;
}
div.sign_in > div.row:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}


/* For mobile phones */
@media only screen and (max-width: 768px) {
	
	div.sign_in {
		width: 85%;
		padding: 20px 0px;
		border: 0px;
	}
	div.sign_in > div.username > input {
		padding: 13px;
	}
	div.sign_in > div.password > input {
		padding: 13px;
	}
	div.sign_in > div.submit > input[type=submit] {
		padding: 15px;
	}
	
	div.sign_in > div.row > div.stay_signed_in {
		background-color: #e6e6e6;
		border: 3px solid #0066aa;
		border-radius: 3px;
	}
	div.sign_in > div.row > div.stay_signed_in > div.stay_signed_in_checkbox {
		display: none;
	/*	padding: 15px 0px 15px 15px; */
	}
	div.sign_in > div.row > div.stay_signed_in > div.stay_signed_in_text {
		width: 100%;
		text-align: center;
		padding: 13px 0px;
	}
	
	div.sign_in > div.row > div.forgot_password > a {
		background-color: #e6e6e6;
		display: inline-block;
		width: 100%;
		text-align: center;
		color: #3f3f3f;
		padding: 13px 0px;
		text-decoration: none;
		border: 3px solid #e6e6e6;
		border-radius: 3px;
		box-sizing: border-box;
	}
}

/* For desktops */
@media only screen and (min-width: 768px) {
	
	div.sign_in {
		width: 300px;
		padding: 20px;
		border: 1px solid #aaa;
	}
	div.sign_in > div.username > input {
		padding: 7px;
	}
	div.sign_in > div.password > input {
		padding: 7px;
	}
	div.sign_in > div.submit > input[type=submit] {
		padding: 10px;
	}
	div.sign_in > div.submit > input[type=submit]:hover, div.sign_in > div.submit > input[type=submit]:focus {
		color: #fff;
		background-color: #0066aa;
		cursor: pointer;
		outline: 0px;
		box-shadow: 0 0 5px #666;
	}
}

