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

	screen.css
	----------
	Devon Mitton
	v 1.0 | 2009.06.29
	
	====================
	
	Colors:						BG:			Border:
	-------
	Light Blue:					#c2d2d6		#beced1 #ecf2f3
	Light Light Grey Green:		#cbccb8
	Light Grey Green:			#d1d3c3
	Grey Green:					#c2c4ac		#9c9e86
	Dark Grey Green:			#989980 	#9c9e86
	
	Light Green:				#c6c982
	Dark Green:					#768956

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

/* ===== Import Components ===== */
@import "lib/reset.css";
@import "lib/typography.css";
/*@import "lib/forms.css";*/

/* ===== HTML Base Styles ===== */
body													{ background: url("img/interface/bg_body.png") left top repeat-x #082f42; }

/* ===== Universal Content Layout Elements ===== */

#main													{ margin: 0 auto; background: url("img/interface/bg_main.jpg") top left no-repeat; width: 960px; height: 600px; padding: 0 20px; }
#primary												{ width: 570px; padding: 0 10px 0 20px; float: left; margin-right: 20px; }
	#header												{ position: relative; width: 570px; height: 200px; }
	#header-logo										{ position: absolute; top: 83px; left: 55px; width: 442px; height: 85px; overflow: hidden; text-indent: -9999px; }
	#content											{ margin-top: 20px; }
	#footer												{ width: 570px; height: 50px; background: url("img/interface/bg_footer.png") left top no-repeat; position: relative; }
	#footer-logo a										{ display:block; position: absolute; left: 0; top: 0; width: 280px; height: 50px; overflow: hidden; text-indent: -9999px; }
	
	#phone												{ position: absolute; right: 0; top: 0; width: 280px; height: 50px; overflow: hidden; text-indent: -9999px; }


#secondary												{ width: 330px; height: 625px; position: relative; float: left; }
	.vb-button											{ background: left top no-repeat; position: absolute; bottom: 0; display: block; width: 148px; height: 37px; overflow: hidden; text-indent: -9999px; }
	#demo-button										{ background-image: url("img/interface/bg_demoButton.png"); left: -5px; }
	#sample-button										{ background-image: url("img/interface/bg_sampleButton.png"); left: 158px; width: 158px; }
	#demo-form-container								{ display: none; border: 5px solid #456371; position: absolute; width: 220px; padding: 40px; background: #082f42; bottom: 50px; left: -5px; z-index: 100; -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, .5); box-shadow: 0px 1px 3px rgba(0, 0, 0, .5); }
	#demo-form-container h2								{ color: #ccc; font-weight: bold; margin: -40px -40px 15px -40px; padding: 10px 15px 15px; color: #fff; background: #456371; border-bottom: 1px solid #111; }
	#demo-form-container p 								{ font-size: 12px; }
	
#copyright												{ width: 960px; float: left; padding: 0 30px; margin: 20px 0; }
#copyright p 											{ font-size: 10px; letter-spacing: 0px; }

/* ===== Classed Elements ===== */
/* Container Classes */


/* Component Classes */

.intro													{ font-size: 18px; margin-bottom: 0; padding-bottom: 150px; background: url("img/interface/bg_content.jpg") left bottom no-repeat; }

/* Component Ammendments */


/* Utility Classes */
.form-text, .form-select								{ width: 195px; padding: 3px 10px; font-size: 14px; color: #888888; font-weight: bold; }
.form-select											{ width: 220px; padding: 3px 5px;}
.form-select option										{ font-size: 10px; color: #222; font-weight: normal; }

.form-element											{ margin-bottom: 20px; }
.form-element label										{ display: block; color: #ccc; margin-bottom: 5px; }

.buttons												{ text-align: right; position: relative; top: 10px; }
.buttons span											{ font-size: 10px; color: #ccc; }
.buttons #submit-button									{ font-weight: bold; color: #444; font-size: 12px; padding: 2px 5px; margin-right: 5px; }

.cancel													{ color: #ffff00; }
.cancel:hover											{ color: #ffff00; }



/* ===== Debugging Information ===== */
.outline, .outline *									{ outline: 1px dotted #ccc; }

/*@import "lib/debug.css";*/