@import '/css/reset.css';

/* holding page - dev stylesheet */

body {
	background:url(/images/temp-frontpage/sky-bg.jpg) top center no-repeat fixed #d5e0fe;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#fff;
	margin: auto;
	padding: 0px;
}

/* heading */

h1 {
	width:965px;
	height:135px;
	margin:0px auto 25px;
	background:url(/images/temp-frontpage/fp-logo.png) top left no-repeat;
	text-indent:-9999px;line-height:0px;font-size:0px;
	position:relative;
}

h2 {
	width:423px;
	height:120px;
	text-indent:-9999px;line-height:0px;font-size:0px;
	background:url(/images/temp-frontpage/part-of-something.png) center no-repeat;
	position:absolute;
	top:25px;
	left:50%;
	margin-left:-100px;
}

/* basic layout */

#main-content {
	width:798px;
	height:603px;
	margin:0px auto;
	position:relative;
}

.smallbox, .bigbox {
	-moz-border-radius:15px;
	position:absolute;
}

.smallbox {
	width:183px;
	height:183px;
}

.bigbox {
	width:390px;
	height:390px;
}

#follow-methods {
	width:516px;
}

/* grid layout */

.row1 { top:0px; }
.row2 { top:207px; }
.row3 { top:414px; }
.row4 { top:621px; }
.row5 { top:828px; }

.col1 { left:0px; }
.col2 { left:207px; }
.col3 { right:207px; }
.col4 { right:0px; }

/* character graphics */

#guys-left {
	position:absolute;
	z-index:10000;
	left:0px;
	top:-60px;
	background:url(/images/temp-frontpage/guys-left.png) center no-repeat;
	width:271px;
	height:468px;
}

#guys-right {
	position:absolute;
	z-index:100;
	right:-65px;
	top:-88px;
	background:url(/images/temp-frontpage/guys-right.png) center no-repeat;
	width:307px;
	height:313px;
}

/* individual items */

#big-image {
	top:-9px;
	left:-78px;
	width:477px;
	height:407px;
	border:none;
	background:url(/images/temp-frontpage/bigimage.png);
}

#blurb, #call-to-action {
	width:390px;
	color:#fff;
	font-size:15px;
	line-height:21px;
	width:490px;
	height:220px;
	right:30px;
	background:url(/images/temp-frontpage/box.png) center no-repeat;
}

#blurb {
	top:-16px;
}

#blurb p {
	padding:32px 220px 36px 36px;
}

#blurb em {
	font-style:italic;
}

#call-to-action {
	top:190px;
}

#call-to-action h3 {
	margin-bottom:10px;
	color:#D3F88D;
}

#call-to-action form {
	font-size:12px;
	line-height:16px;
	width:190px;
	height:155px;
	position:absolute;
	top:30px;
	left:16px;
	padding:0px 20px;
}

#call-to-action label {
	display:block;
	margin-top:8px;
}

#call-to-action input {
	width:180px;
	display:block;
	margin:4px 0px 0px;
	padding:4px;
	font-size:10px;
	color:#222;
	border:#222 1px solid;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

#call-to-action input.button {
	width:72px;
	color:#fff;
	background:#6DA30E;
	margin-top:10px;
	padding:5px 0px;
	border:1px solid #fff;
}

#call-to-action p {
	clear:both;
}

#call-to-action a {
	text-decoration:none;
	color:#fff;
	border-bottom:dotted 1px #fff;
}

#register-box {
	font-size:12px;
	line-height:16px;
	width:190px;
	height:155px;
	border-left:1px dotted #fff;
	position:absolute;
	top:30px;
	right:16px;
	padding:0px 20px;
}

#register-box a {
	display:block;
	width:190px;
	height:125px;
	background:url(/images/temp-frontpage/register-button.png) center no-repeat;
	border:none;
	margin-top:12px;
	text-indent:-9999px;
}

.FB_login_button {
	position:absolute;
	bottom:-1px;
	right:20px;
}

#call-to-action .FB_login_button a {
	border:none;
}

.screen1, .screen2, .screen3, .screen4 {
	-moz-box-shadow:0px 0px 10px #6a90f3 ;
}

.screen1 {
	background:url(/images/temp-frontpage/test-screen.png) center transparent;
}

.screen2 {
	background:url(/images/temp-frontpage/test-screen2.png) center transparent;
}

.screen3 {
	background:url(/images/temp-frontpage/test-screen3.png) center transparent;
}

.screen4 {
	background:url(/images/temp-frontpage/test-screen4.png) center transparent;
}

#footer {
	margin:15px auto 20px;
	font-size:10px;
	color:#fff;
	text-align:center;
}

#footer a {
	text-decoration:none;
	color:#fff;
	border-bottom:dotted 1px #fff;
}

div#email-message {
	position: absolute; 
	z-index: 50000; 
	background-color: #FFF; 
	width: 100%; 
	border-bottom: 1px solid #000; 
	color: #000; 
	display: none; 
	top: 0px;
	left: 0px;
	
}

div#email-message p.success {
	padding: 20px; 
	text-align: center; 
	font-size: 1.6em;
	color: #7A941E;
}

div#email-message p.error {
	padding: 20px; 
	text-align: center; 
	font-size: 1.6em;
	color: red;
}

p.success {
	padding-bottom: 0px;
	font-size: 1.0em;
	font-weight: bold;
	color: #7A941E;
}

p.error {
	padding-bottom: 0px;
	font-size: 1.0em;
	font-weight: bold;
	color: red;
}