/* Screen Styles for the HomeLink iPad Web App - Coded with love by Eric Murrell */

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 30px 0 0 0;
	font-family: Helvetica, sans-serif;
	background-color: #252525;
	color: #454545;
}

h1, h2, h3, h4, h5, h6, p, form, ul, ol, li, blockquote { /* resets most browser styles to enhance cross-browser compatibility */
	margin: 0;
	padding: 0;
}

#container {
	width: 768px;
	overflow: hidden;
}

/* Header */

#header {
	width: 728px;
	margin: 0 auto 30px auto;
	padding: 0 20px 0 20px;
}

#header h1 {
	display: block;
	text-indent: -9000px;
	width: 398px;
	height: 139px;
	background: url('../images/logo_homelink_backend.jpg') no-repeat;
}

#header a#go-back:link, #header a#go-back:visited {
	float: right;
	display: block;
	width: 200px;
	height: 54px;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, #638495),
	    color-stop(0.63, #739BAE)
	);
	-webkit-border-radius: 10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.6em;
	font-family: 'Muli', serif;
	text-decoration: none;
	text-shadow: 0 -2px -2px #454545;
	-webkit-box-shadow: -1px 1px 5px #141414;
	padding: 21px 0 0 0;
	margin: 46px 0 0 0;
}

#header a#go-back:hover, #header a#go-back:active {
	float: right;
	display: block;
	width: 200px;
	height: 54px;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, #CF7323),
	    color-stop(0.63, #F68625)
	);
	-webkit-border-radius: 10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.6em;
	font-family: 'Muli', serif;
	text-decoration: none;
	text-shadow: 0 -2px -2px #454545;
	-webkit-box-shadow: -1px 1px 5px #141414;
	padding: 21px 0 0 0;
	margin: 46px 0 0 0;
}

#header a#go-back-topic:link, #header a#go-back-topic:visited, #header a#go-back-resource:link, #header a#go-back-resource:visited {
	float: right;
	display: block;
	width: 160px;
	height: 54px;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, #638495),
	    color-stop(0.63, #739BAE)
	);
	-webkit-border-radius: 10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.6em;
	font-family: 'Muli', serif;
	text-decoration: none;
	text-shadow: 0 -2px -2px #454545;
	-webkit-box-shadow: -1px 1px 5px #141414;
	padding: 21px 0 0 0;
	margin: 46px 0 0 0;
}

#header a#go-back-topic:hover, #header a#go-back-topic:active, #header a#go-back-resource:hover, #header a#go-back-resource:active {
	float: right;
	display: block;
	width: 160px;
	height: 54px;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, #CF7323),
	    color-stop(0.63, #F68625)
	);
	-webkit-border-radius: 10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.6em;
	font-family: 'Muli', serif;
	text-decoration: none;
	text-shadow: 0 -2px -2px #454545;
	-webkit-box-shadow: -1px 1px 5px #141414;
	padding: 21px 0 0 0;
	margin: 46px 0 0 0;
}

#header a#emailresource:link, #header a#emailresource:visited {
	float: right;
	display: block;
	width: 89px;
	height: 54px;
	background-image: url('../images/envelope.png'), -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, #638495),
	    color-stop(0.63, #739BAE)
	);
	background-repeat: no-repeat;
	background-position: 17px 17px, 0 0;
	-webkit-border-radius: 10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.6em;
	font-family: 'Muli', serif;
	text-decoration: none;
	text-shadow: 0 -2px -2px #454545;
	-webkit-box-shadow: -1px 1px 5px #141414;
	padding: 21px 0 0 0;
	margin: 46px 0 0 20px;
}

#header a#emailresource:hover, #header a#emailresource:active {
	float: right;
	display: block;
	width: 89px;
	height: 54px;
	background-image: url('../images/envelope.png'), -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, #CF7323),
	    color-stop(0.63, #F68625)
	);
	background-repeat: no-repeat;
	background-position: 17px 17px, 0 0;
	-webkit-border-radius: 10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.6em;
	font-family: 'Muli', serif;
	text-decoration: none;
	text-shadow: 0 -2px -2px #454545;
	-webkit-box-shadow: -1px 1px 5px #141414;
	padding: 21px 0 0 0;
	margin: 46px 0 0 20px;
}

/* Instructions Bar */

#instructions {
	background-color: #575757;
	border-top: 2px solid #454545;
	margin: 0 0 0 0;
	height: 98px;
}

#instructions .inner{
	width: 708px;
	padding: 20px 30px 20px 30px;
	margin: 0 auto;
	height: 58px;
}

#instructions .inner h2{
	font-size: 2em;
	font-family: 'Muli', serif;
	text-shadow: 0 1px 1px #282828;
	float: right;
	line-height: 58px;
}

#instructions .inner h3{
	font-size: 1.3em;
	font-family: 'Muli', serif;
	text-shadow: 0 1px 1px #282828;
	float: left;
	line-height: 58px;
}

/* Content Area */

#contentarea {
	width: 3072px;
	height: 651px;
	background: url('../images/wood4.jpg');
	padding: 30px 0 0 0;
}

#boxone {
	position: relative;
}

#boxtwo {
	position: relative;
}

#boxthree {
	position: relative;
}

#boxfour {
	position: relative;
}

/* Buttons */

.lists {
	width: 768px;
	height: 651px;
	overflow: scroll;
	float: left;
}

ul.buttons {
	padding: 0 0 30px 0;
}

ul.buttons li {
	list-style-type: none;
	margin: 0 auto 30px auto;
	width: 600px;
}

ul.buttons li a:link, ul.buttons li a:visited {
	display: table-cell;
	vertical-align: middle;
	width: 600px;
	height: 150px;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, #638495),
	    color-stop(0.63, #739BAE)
	);
	-webkit-border-radius: 10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 2.7em;
	font-family: 'Muli', serif;
	text-decoration: none;
	text-shadow: 0 -2px -2px #454545;
	-webkit-box-shadow: -1px 1px 5px #141414;
}

ul.buttons li a:hover, ul.buttons li a:active {
	display: table-cell;
	vertical-align: middle;
	width: 600px;
	height: 150px;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, #CF7323),
	    color-stop(0.63, #F68625)
	);
	-webkit-border-radius: 10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 2.7em;
	font-family: 'Muli', serif;
	text-decoration: none;
	text-shadow: 0 -2px -2px #454545;
	-webkit-box-shadow: -1px 1px 5px #141414;
}

ul.resource-buttons {
	padding: 0 0 30px 0;
}

ul.resource-buttons li {
	list-style-type: none;
	margin: 0 auto 30px auto;
	width: 600px;
}

ul.resource-buttons li a:link, ul.resource-buttons li a:visited {
	display: table-cell;
	vertical-align: middle;
	width: 440px;
	height: 150px;
	background-image: url('../images/resource_bg.png'), -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, #638495),
	    color-stop(0.63, #739BAE)
	);
	background-repeat: no-repeat;
	background-position: 30px 32px, 0 0;
	-webkit-border-radius: 10px;
	color: #fff;
	text-align: left;
	text-transform: uppercase;
	font-size: 2em;
	font-family: 'Muli', serif;
	text-decoration: none;
	text-shadow: 0 -2px -2px #454545;
	-webkit-box-shadow: -1px 1px 5px #141414;
	padding: 0 30px 0 130px;
}

ul.resource-buttons li a:hover, ul.resource-buttons li a:active {
	display: table-cell;
	vertical-align: middle;
	width: 440px;
	height: 150px;
	background-image: url('../images/resource_bg.png'), -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, #CF7323),
	    color-stop(0.63, #F68625)
	);
	background-repeat: no-repeat;
	background-position: 30px 32px, 0 0;
	-webkit-border-radius: 10px;
	color: #fff;
	text-align: left;
	text-transform: uppercase;
	font-size: 2em;
	font-family: 'Muli', serif;
	text-decoration: none;
	text-shadow: 0 -2px -2px #454545;
	-webkit-box-shadow: -1px 1px 5px #141414;
	padding: 0 30px 0 130px;
}

#loading {
	position: absolute;
	top: 400px;
	left: 230px;
	z-index: 1;
}

#emailsent {
	position: absolute;
	top: 400px;
	left: 230px;
}

/* Other Pages */

#textpage {
	padding: 0 80px 0 80px;
}

#textpage h3 {
	color: #989898;
	font-size: 2em;
	font-family: 'Muli', serif;
	padding: 0 0 20px 0;
}

#textpage ul {

	margin: 0 0 30px 0;
}

#textpage ul li {
	list-style-type: none;
	margin: 0 0 5px 20px;
	color: #989898;
	font-size: 1.6em;
	font-family: 'Muli', serif;
}

#textpage label.biglabel {
	color: #989898;
	font-size: 1.6em;
	font-family: 'Muli', serif;
	display: block;
	padding: 0 0 5px 0;
}

#textpage input.check {
	width: 30px;
	height: 30px;
}

#textpage input.email {
	color: #454545;
	font-size: 1.2em;
	font-family: 'Muli', serif;
	padding: 5px;
	display: block;
	width: 350px;
	margin: 0 0 15px 0;
	border: 2px solid #454545;
	background-color: #989898;
}

#textpage textarea {
	color: #454545;
	font-size: 1.2em;
	font-family: 'Muli', serif;
	padding: 5px;
	display: block;
	width: 595px;
	height: 100px;
	margin: 0 0 25px 0;
	border: 2px solid #454545;
	background-color: #989898;
}

#textpage input#email-submit {
	float: right;
	display: block;
	width: 200px;
	height: 60px;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.25, #638495),
	    color-stop(0.63, #739BAE)
	);
	-webkit-border-radius: 10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.6em;
	font-family: 'Muli', serif;
	text-decoration: none;
	text-shadow: 0 -2px -2px #454545;
	-webkit-box-shadow: -1px 1px 5px #141414;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	border: none;
}