/* Johnson Bank 2008 Snowball Challenge for Charity */

/* Zero Out The Browsers */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,optgroup,button,p,blockquote,th,td { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }
table { border-collapse: collapse; border-spacing: 0; }
caption,th { text-align: left; }
ol,ul { list-style: none; }
fieldset,img { border: 0; }
input,textarea,select,optgroup,option,button { font-family: inherit; font-size: 100%; }
button,input { width: auto; }

/* --------------------------------------------------------
----------------------------- Common Page Elements ----- */

body {
	background: #f4f2e9;
	text-align: center;
	}
	
#wrapper {
	width: 680px;
	margin: 0 auto;
	text-align: left;
	background: #fdfdfd;
	}

#page_header {
	background-color: #f4f2e9;
	height: 98px;
	position: relative;
	}
	
#page_content { 
	padding-bottom: 1px;
	}
	
#logo {
	position: absolute;
	background: url(../images/johnson_bank_logo.gif) no-repeat;
	width: 124px;
	height: 37px;
	top: 29px;
	left: 60px;
	}
	
#header_text {
	position: absolute;
	background: url(../images/header_text.gif) no-repeat;
	width: 295px;
	height: 9px;
	top: 44px;
	left: 324px;
	}
	
.style2 {
	font-family: Arial, Helvetica, sans-serif;
	color: #756231;
	font-size: 10px;
	}
#footer a:link {
	color: #756231;
	text-decoration: none;
	}
#footer a:visited {
	text-decoration: none;
	color: #756231;
	}
#footer a:hover {
	text-decoration: underline;
	}
#footer a:active {
	text-decoration: none;
	}

#footer {
	margin-top: 10px;
	}
	
/* --------------------------------------------------------
------------------------------------- Landing Page ----- */

#landing_header {
	background: url(../images/landing_header.gif) no-repeat;
	width: 640px;
	height: 82px;
	margin: 20px 0 0 20px;
	}
	
#landing_body {
	position: relative;
	background: url(../images/landing_body.jpg) no-repeat;
	width: 640px;
	height: 267px;
	margin: 0 0 20px 20px;
	}
	
#landing_body a {
	position: absolute;
	top: 84px;
	left: 71px;
	height: 99px;
	width: 199px;
	display: block;
	text-indent: -9999px;
	background-image: url(../images/landing_getstarted_button.jpg);
	background-repeat: no-repeat;
	}
	
#landing_body a:hover {
	background-position: 0 -99px;
	}
	
#landing_body #flash{
	position: absolute;
	top:20px;
	right:20px;
	width:273px;
	height:229px;
}


/* --------------------------------------------------------
-------------------------------- Instructions Page ----- */
	
#instructions_header {
	background: url(../images/instructions_header.gif) no-repeat;
	width: 640px;
	height: 112px;
	margin: 20px 0 0 20px;
	}
	
#instructions_body {
	position: relative;
	background: url(../images/instructions_body.jpg) no-repeat;
	width: 640px;
	height: 377px;
	margin: 0 0 20px 20px;
	}
	
#instructions_body a {
	position: absolute;
	top: 263px;
	left: 380px;
	height: 99px;
	width: 199px;
	display: block;
	text-indent: -9999px;
	background-image: url(../images/instructions_letsplay_button.jpg);
	background-repeat: no-repeat;
	}
	
#instructions_body a:hover {
	background-position: 0 -99px;
	}

/* --------------------------------------------------------
---------------------------------- Thank You Pages ----- */

#thankyou_header {
	background: url(../images/thankyou_header.gif) no-repeat;
	width: 640px;
	height: 82px;
	margin: 20px 0 0 20px;
	}
	
#thankyou_body {
	position: relative;
	background: url(../images/thankyou_body.jpg) no-repeat;
	width: 640px;
	height: 377px;
	margin: 0 0 20px 20px;
	}
	
#thankyou_body_hunger {
	position: relative;
	background: url(../images/thankyou_body_hunger.jpg) no-repeat;
	width: 640px;
	height: 377px;
	margin: 0 0 20px 20px;
	}
	
#thankyou_body_mkerescue {
	position: relative;
	background: url(../images/thankyou_body_mkerescue.jpg) no-repeat;
	width: 640px;
	height: 377px;
	margin: 0 0 20px 20px;
	}
	
#thankyou_body_hebron {
	position: relative;
	background: url(../images/thankyou_body_hebron.jpg) no-repeat;
	width: 640px;
	height: 377px;
	margin: 0 0 20px 20px;
	}
	
#thankyou_body_march {
	position: relative;
	background: url(../images/thankyou_body_marchofdimes.jpg) no-repeat;
	width: 640px;
	height: 377px;
	margin: 0 0 20px 20px;
	}
	
#thankyou_share a {
	position: absolute;
	top: 23px;
	left: 426px;
	height: 99px;
	width: 199px;
	display: block;
	text-indent: -9999px;
	background-image: url(../images/thankyou_share_button.jpg);
	background-repeat: no-repeat;
	}
	
#thankyou_share a:hover {
	background-position: 0 -99px;
	}

#thankyou_visit a {
	position: absolute;
	top: 140px;
	left: 426px;
	height: 99px;
	width: 199px;
	display: block;
	text-indent: -9999px;
	background-image: url(../images/thankyou_visit_button.jpg);
	background-repeat: no-repeat;
	}
	
#thankyou_visit a:hover {
	background-position: 0 -99px;
	}

#thankyou_play a {
	position: absolute;
	top: 257px;
	left: 426px;
	height: 99px;
	width: 199px;
	display: block;
	text-indent: -9999px;
	background-image: url(../images/thankyou_playagain_button.jpg);
	background-repeat: no-repeat;
	}
	
#thankyou_play a:hover {
	background-position: 0 -99px;
	}
	
#thankyou_text {
	position: absolute;
	top: 125px;
	left: 22px;
	width: 375px;
	height: 225px;
	}
	
#thankyou_text p, #thankyou_text_general p {
	font-family: Arial, sans-serif;
	/*font-family: "Myriad Pro", Helvetica, Arial, sans-serif;*/
	font-weight: bold;
	color: #fdfdfd;
	line-height: 1.5em;
	}
	
#thankyou_text_general {
	position: absolute;
	top: 22px;
	left: 22px;
	width: 375px;
	height: 335px;
	}
	
/* --------------------------------------------------------
---------------------------- Send to a Friend Page ----- */
	
#send_header {
	background: url(../images/send_header.gif) no-repeat;
	width: 640px;
	height: 82px;
	margin: 20px 0 0 20px;
	}
	
#send_form {
	margin: 0 0 20px 20px;
	width: 640px;
	height: 377px;
	font-family: Arial, sans-serif;
	/*font-family: "Myriad Pro", Helvetica, Arial, sans-serif;*/
	color: #fdfdfd;
	background: url(../images/send_body.jpg) no-repeat;
	position:relative;
}

#send_form form {
	margin:0 0 0 20px;
	padding:40px 0 0 0;
	width:400px;
}

#send_form form ul {
	list-style:none;
}

#send_form form ul li {
	clear:both;
	margin:8px 0;
	

}

#send_form form ul li span{
	background: url(../images/send_input_field_single.jpg)  no-repeat;
	padding: 10px 10px 12px 10px;
	width:250px;
	height:42px;
	float:left;
	display:block;
	/*border:1px solid #FFFFFF;*/
}

#send_form form ul label {
	line-height: 42px;
	margin:0 8px 0 0;
	padding:0;
	display:block;
	float:left;
	width:110px;
	text-align:right;
}

#send_form form ul input {
	width:230px;
	background:none;
}

#send_successful {
	margin:0 0 0 30px;
	padding:30px 0 0 0;
}
#send_error {
	margin:0 0 0 30px;
	padding:30px 0 0 0;
}
#send_play a {
	position: absolute;
	top: 137px;
	left: 426px;
	height: 99px;
	width: 199px;
	display: block;
	text-indent: -9999px;
	background-image: url(../images/send_play_button.jpg);
	background-repeat: no-repeat;
	}
	
#send_play a:hover {
	background-position: 0 -99px;
}

#send_visit a {
	position: absolute;
	top: 20px;
	left: 426px;
	height: 99px;
	width: 199px;
	display: block;
	text-indent: -9999px;
	background-image: url(../images/send_visit_button.jpg);
	background-repeat: no-repeat;
	}
	
#send_visit a:hover {
	background-position: 0 -99px;
}

#send_resend a {

	margin:20px 0 0 0;
	
	height: 48px;
	width: 139px;
	display: block;
	text-indent: -9999px;
	background-image: url(../images/send_anotherfriend_button.gif);
	background-repeat: no-repeat;

	}
	
#send_resend a:hover {
	background-position: 0 -48px;
}


#flash_game {
	width:640px;
	margin:20px auto 20px 20px;
}

/* --------------------------------------------------------
--------------------- Send to a Friend Form Styles ----- */

#txtName, #txtFriendName, #txtFriendEmail {
	/*background: url(../images/send_input_field.jpg) no-repeat 0 0;*/
	
	height: 22px;
	border: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #6f6f6f;
	font-size: 18px;
	font-weight: bold;
	
	/*padding: 10px 30px 10px 11px;*/
	}
	
#txtName:focus, #txtFriendName:focus, #txtFriendEmail:focus {
	outline: 0;
	background-position: 0 -42px;
	}
	
#send_form form ul input#btnSubmit {
	background: url(../images/send_send_button.jpg) no-repeat 0 0;
	width: 93px;
	height: 48px;
	border: none;
	cursor: pointer;
	}
	
#send_form form ul input#btnSubmit:hover {
	background-position: 0 -48px;
	}
	
#send_form form ul li.btn {
	text-align: right;
	margin-right: 27px;
	}