/*
	VBLearn: Game Styles
	Version 1
	June 2010
	Authored by Daryl Claudio + daryl.claudio@mod7.com
	Mod7 Communications, Inc.

	
	Swatch:
	
	"I ordered a rare steak" pink		#f39
	"Drink more water" yellow			#ff0
	"Vegetable oil stain" yellow		#ffc
	
	
	Font stack:

	font-family: Arial, Helvetica, sans-serif
	
*/

/*__________________________________________

	Skeleton

=======================================*/

html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -360px; /* the bottom margin is the negative value of the footer's height */
}
#footer, .push {
height: 360px; /* .push must be the same height as #footer */
}

/*__________________________________________

	Global Styles

=======================================*/

body {
background: #f39 url('/frontend/img/game/body-background.gif') repeat-y scroll center 0;
}

h1.page-title {
background: #000;
color: #f4f4f4;
letter-spacing: -0.5px;
font-size: 32px;
font-weight: 600;
line-height: 36px;
margin: 0 0 16px;
padding: 8px 0 8px 90px;
}

#account-mgmt {
width: 206px;
padding: 8px;
margin: 0 8px 8px 0;
background: #000;
float: right;
text-align: right;
font-size: 11px;
line-height: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #ff0;
}

	#account-mgmt li {
	margin: 0;
	padding: 0 0 12px;
	}
	#account-mgmt a:link, #account-mgmt a:visited {
	background: none;
	text-decoration: none;
	color: #ff0;
	padding: 2px 8px;
	}
	#account-mgmt a:hover { color: #000; background: #ff0; text-decoration: none; }
	#account-mgmt a:active { color: #000; background: #ff6; text-decoration: none; }

/*---------------------------------
	Forms
================================*/

label {
display: block;
font-size: 16px;
line-height: 1.3;
}

input[type="text"], .inputtext {
display: block;
margin: 4px 0;
padding: 4px 4px 6px;
border: 0 none;
background: #f39;

font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1;
color: #fff;
letter-spacing: -0.5px;
}

input[type="submit"], .inputsubmit {
margin: 4px 0;
padding: 6px 4px;
border: 0 none;
background: #ff0;

font-size: 16px;
line-height: 1;
font-weight: 600;
color: #000;
text-transform: uppercase;
}

fieldset {
padding: 14px;
margin: 8px 0;
background: #000;
-moz-box-shadow: 4px 4px 0 #333;
-webkit-box-shadow: 4px 4px 0 #333;
box-shadow: 4px 4px 0 #333;
}

form em { font-size: 12px; line-height: 18px }


/*__________________________________________

	Header

=======================================*/

#wrapper { }


#header {
background: url('/frontend/img/game/header-block.png') no-repeat scroll center 0; 
height: 180px;
}

	

	#vb-bar {
	width: 940px;
	height: 16px;
	margin: 0 auto;
	background: url('/frontend/img/game/header-vb-bar.gif') no-repeat scroll 0 0;
	position: relative;
	}
	
		#vb-bar h3 {
		position: absolute;
		top: 4px;
		left: 80px;
		width: 144px;
		height: 7px;
		background: url('/frontend/img/game/header-vb-bar-text.gif') no-repeat scroll 0 -1px;
		text-indent: -9001px;
		}
		
		#tagline {
		position: absolute;
		top: 4px;
		left: 242px;
		width: 315px;
		height: 8px;
		padding: 0;
		margin: 0;
		line-height: 1;
		
		background: url('/frontend/img/game/header-vb-bar-text.gif') no-repeat scroll -162px 0;
		text-indent: -9001px;
		}

	#header #logo {
	width: 960px;
	height: 164px;
	margin: 0 auto;
	position: relative;
	}
	
		#logo h2 {
		width: 688px;
		height: 100px;
		margin: 0;
		padding: 0;
		position: absolute;
		left: 136px;
		top: 16px;
		}
			#logo h2 a {
			display: block;
			width: 688px;
			height: 100px;
			text-indent: -9001px;
			background: url('/frontend/img/game/header-logo.png') no-repeat scroll 0 0;
			}

/*__________________________________________

	Body Content Variations

=======================================*/

#body-content { /* default */
width: 960px;
margin: 0 auto;
padding: 16px 0 0;
}

	#game-home #body-content,
	.logged-in #body-content { padding: 0; }

.content {
padding: 0 90px;
}


/*__________________________________________

	Footer

=======================================*/

#footer {
background: url('/frontend/img/game/footer-background-pattern.gif') repeat-x scroll center bottom;
text-align: center;
margin: 0;
padding: 0;
}

	#footer-block {
	position: relative;
	margin: 0 auto;
	width: 940px;
	height: 360px;
	background: url('/frontend/img/game/footer-block.gif') no-repeat scroll center bottom;
	
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #000;
	}
	
		.footer-nav {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 254px;
		left: 72px;
		}
		#footer-nav-col2 { left: 312px; }
		
			.footer-nav li {
			padding: 0 0 12px;
			line-height: 11px;
			}
	
	#footer-block a:link, #footer-block a:visited {
	background: none;
	text-decoration: none;
	color: #000;
	padding: 2px 8px;
	}
	#footer-block a:hover { color: #ff0; background: #000; text-decoration: none; }
	#footer-block a:active { color: #ff0; background: #333; text-decoration: none; }
	
	#footer-block h6 { /* copyright */
	font-weight: 400;
	position: absolute;
	bottom: 8px;
	left: 80px;
	}
	
	#footer-block #bymod7 { left: 320px; }
	#footer-block #bymod7 a:link, #footer-block #bymod7 a:visited { padding: 2px; }
	

/*__________________________________________

	Homepage

=======================================*/

#game-introduction {
margin: 0 0 8px;
}
	#game-introduction img { display: block; }
	#game-introduction-body {
	border: 4px solid #000;
	border-left: 0 none;
	border-right: 0 none;
	background: #fff000;
	padding: 8px 90px;
	}
		#game-introduction-body p {
		position: relative;
		z-index: 30;
		font-size: 16px;
		line-height: 24px;
		color: #000;
		text-shadow: #fff 0 1px 0;
		margin: 0;
		padding: 0;
		}
		
		#game-introduction-body strong {
		color: #f39;
		}

.homepage-section { width: 300px; float: left; margin: 24px 20px 24px 0; }
.homepage-section-content {
padding: 8px 14px;
background: #000;
-moz-box-shadow: 4px 4px 0 #333;
-webkit-box-shadow: 4px 4px 0 #333;
box-shadow: 4px 4px 0 #333;
}
	#sign-in-section .homepage-section-content,
	#play-as-guest-section .homepage-section-content { min-height: 220px; height: auto !important; height: 220px; }

#sign-in-section { margin-left: 10px; }

	#sign-in-section h3 {
	width: 300px;
	height: 64px;
	margin: 0 0 8px;
	padding: 0;
	text-indent: -9001px;
	background: #000 url('/frontend/img/game/heading-signin.gif') no-repeat scroll 14px 8px;
	-moz-box-shadow: 4px 4px 0 #333;
	-webkit-box-shadow: 4px 4px 0 #333;
	box-shadow: 4px 4px 0 #333;
	}
	
	#sign-in-section input[type="text"],
	#sign-in-section .inputtext { width: 264px; margin-bottom: 16px; }
	#sign-in-section input[type="submit"],
	#sign-in-section .inputsubmit { margin-top: 0; }
	
	
	#forgotpassword {
	font-size: 12px;
	font-weight: 600;
	}
		#forgotpassword a:link,
		#forgotpassword a:visited { text-decoration: none; color: #999; }
		#forgotpassword a:hover,
		#forgotpassword a:active { text-decoration: underline; color: #ff0; }

#create-account-section {
height: 340px;
margin-top: 8px;
background: transparent url('/frontend/img/game/homepage-create-graphic.png') no-repeat scroll 0 0;
position: relative;
}

	#create-account-section h3 {
	width: 300px;
	height: 82px;
	margin: 0;
	padding: 0;
	}
	
		#create-account-section h3 a {
		display: block;
		width: 300px;
		height: 82px;
		text-indent: -9001px;
		background: url('/frontend/img/game/heading-createaccount.gif') no-repeat scroll 35px 24px;
		}
	
	#create-account-section .homepage-section-content {
	position: absolute;
	bottom: 24px; left: 24px;
	width: 224px;
	background: rgb(0,0,0);
	background: rgba(0,0,0,0.85);
	-moz-box-shadow: 0 0 0;
	-webkit-box-shadow: 0 0 0;
	box-shadow: 0 0 0;
	}

#play-as-guest-section { margin-right: 0; }

	#play-as-guest-section h3 {
	width: 300px;
	height: 64px;
	margin: 0 0 8px;
	padding: 0;
	background: #000;
	-moz-box-shadow: 4px 4px 0 #333;
	-webkit-box-shadow: 4px 4px 0 #333;
	box-shadow: 4px 4px 0 #333;
	}
	
		#play-as-guest-section h3 a {
		display: block;
		width: 300px;
		height: 64px;
		text-indent: -9001px;
		background: url('/frontend/img/game/heading-playasguest.gif') no-repeat scroll 14px 8px;
		}

/*__________________________________________

	Create Account Page

=======================================*/

#reg-form p { margin: 0; }

#reg-form fieldset {
width: 598px;
padding: 8px 8px 8px 14px;
}

#reg-form label {
width: 282px;
padding: 0 14px 0 0;
float: left;
}

#reg-form input[type="text"], #reg-form input.inputtext {
float: left;
width: 292px;
margin: 0;
}
#reg-form #register-password {margin-bottom: 8px}

#register-captcha-box {
width: 300px;
float: left;
} #register-captcha-box input { float: none; }

#register-captcha-box img {
display: block;
margin-bottom: 8px;
}

#register-submit {
margin-left: 310px;
}

.disabled { background: #999; }

/* dependency on rf.custom-form-elements.js */
.checkbox {
width: 47px;
height: 47px;
padding: 0;
background: url('/frontend/img/game/checkbox-sprite.png') no-repeat;
display: block;
float: left;
}

/*__________________________________________

	Profile Page

=======================================*/

#welcome-message { color: #ff0; font-weight: 600; }

#play-game-graphic {
width: 780px;
height: 149px;
margin: 16px 0;
}
#play-game-graphic a {
display: block; text-indent: -9001px; width: 780px; height: 149px;
background: url('/frontend/img/game/profile-playthegame.png') no-repeat scroll 0 0;
}

#awards-title {
font-size: 24px;
line-height: 1.2;
}

	#awards {
	margin: 8px 80px;
	}
	
		#awards li {
		display: block;
		float: left;
		width: 132px;
		height: 132px;
		margin: 0 20px 20px 0;
		background: #f4f4f4;
		border: 4px solid #000;
		-moz-box-shadow: 4px 4px 0 #333;
		-webkit-box-shadow: 4px 4px 0 #333;
		box-shadow: 4px 4px 0 #333;
		} #awards #weAward, #awards #bonusMissionAward { margin-right: 0; }
		
		#awards dt { display: none; }
		#awards dd {
		display: block;
		width: 132px;
		height: 132px;
		position: relative;
		}
		#awards img {
		display: block;
		position: absolute;
		left: 16px;
		top: 17px;
		}
		/*
			#laughingAward img { left: 39px; top: 36px; }
			#ringAward img { left: 36px; top: 46px; }
			#arcAward img { left: 30px; top: 38px; }
			#weAward img { left: 41px; top: 41px; }
			#waterAward img { left: 34px; top: 39px; }
			#mainGameAward img { left: 39px; top: 29px; }
			#allCoinsAward img { left: 35px; top: 35px; }
			#bonusMissionAward img { left: 34px; top: 33px; }
		*/
	#award-title {
	font-weight: 600;
	color: #ffc;
	margin-left: 84px;
	height: 32px;
	}


/*__________________________________________

	Game Container

=======================================*/
#play {
background-image: none;
background: #3d3d3d;
}

#play #header {
background: url('/frontend/img/game/gamecontainer-header-block.png') no-repeat scroll center bottom;
height: 40px;
}

#play #body-content {
width: 100%;
background: url('/frontend/img/game/gamecontainer-box.png') no-repeat scroll center 0;
padding: 0;
}

#play #content {
width: 960px;
margin: 0 auto;
padding: 0 0 128px;
}

	#play #vb-bar {
	background: url('/frontend/img/game/gamecontainer-vb-bar.gif');
	}
	
	#game-box {
	width: 960px;
	height: 640px;
	padding: 8px 0;
	}
	
	#game-logo {
	width: 344px;
	height: 51px;
	margin: 16px auto 0;
	text-indent: -9001px;
	background: url('/frontend/img/game/gamecontainer-logo.png') no-repeat scroll 0 0;
	}
	
	#game-back {
	font-size: 12px;
	font-weight: 600;
	margin: 16px 0 8px;
	text-align: center;
	}
	
		#game-back a:link,
		#game-back a:visited { color: #f39; text-decoration: none; }
		#game-back a:hover, #game-back a:active { color: #ff1c87; text-decoration: none; }

.noflashmessage {
text-align: center;
margin-top: 32px;
} .noflashmessage h1 { margin-bottom: 16px; }

/* DLC - wallpaper */

#wallpaper {
padding: 16px 0;
}

#wallpaper li {
width: 380px;
margin: 0 20px 16px 0;
float: left;
position: relative;
} #wallpaper li.edge { margin-right: 0; }

	#wallpaper .thumbnail { width: 220px; }
	#wallpaper img { border: 4px solid #000; }
	
	#wallpaper ul {
	position: absolute;
	top: 8px;
	left: 240px;
	}
	
		#wallpaper ul li {
		height: auto;
		float: none;
		width: 140px;
		margin: 0;
		padding: 0;
		}


/*__________________________________________

	Type

=======================================*/

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #f4f4f4;
}

a:link		{ color: #f04f97; text-decoration: none; }
a:visited	{ color: #f279af; text-decoration: none; }
a:hover		{ color: #ef2a95; text-decoration: underline; }
a:active	{ color: #ff62b7; text-decoration: underline; }

.homepage-section-content a:link		{ color: #ff0; text-decoration: none; }
.homepage-section-content a:visited	{ color: #fff000; text-decoration: none; }
.homepage-section-content a:hover		{ color: #ff6; text-decoration: underline; }
.homepage-section-content a:active		{ color: #fff000; text-decoration: underline; }

strong { font-weight: 600; }
em { font-style: oblique; }
.error { color: #f30; }

/*__________________________________________
	User content styles
=======================================*/

.ugc h1, .ugc h2, .ugc h3,
.ugc h4, .ugc h5, .ugc h6 { margin: 24px 0 8px; line-height: 1.15; }

.ugc p, .content p { margin: 0 0 16px; }
.ugc ul, .ugc ol { padding: 4px 24px; }
.ugc ul { list-style: disc outside; }
.ugc ol { list-style: decimal outside; }

h1 {
font-size: 24px;
font-weight: 600;
letter-spacing: -0.5px;
color: #ff0;
}

h2 {
font-size: 24px;
font-weight: 400;
color: #ff0;
}

h3 {
font-size: 14px;
font-weight: 600;
color: #f4f4f4;
letter-spacing: 1px;
text-transform: uppercase;
}

h4 {
font-size: 18px;
font-weight: 600;
color: #fff;
}

h5, h6 { font-weight: 600; }




/*

	Credits:

	Sticky Footer by Ryan Fait
	http://ryanfait.com/

*/