/*
 	SEQUENCE:01™ - Stylesheet CSS - ./css/stylesheet.css
 	$ Revision: 6.0 Build 20080527 $
 	Copyright © 2003-2008 SEQUENCE:01. All Rights Reserved.
 	
/////////////////          Import Stylesheets        ///////////////*/

	@import url(reset.css);
	@import url(generic.css);

/*///////////////         Standard Elements        ///////////////*/

	html, body { min-height: 100%; height: 100%; }
	body { font-size: 100.1%; font-family: Arial, Helvetica, sans-serif; background: #0a0a0a url(../img/sequence01/background.jpg) top left fixed no-repeat; color: #a2a39d; }
	a, a:link, a:visited { text-decoration: none; color: #fff; white-space: nowrap; }
	a:hover { text-decoration: none; }

/*///////////////          Wrapper        ///////////////*/

	

/*///////////////          Header Container        ///////////////*/

	#headerContainer h1 a { text-indent: -999em; width: 90px; height: 20px; position: fixed; z-index: 7; left: 100px; top: 50%; margin: -10px 0 0; display: none; background: transparent url(../img/sequence01/logo.png) no-repeat; }

/*///////////////          Content Container        ///////////////*/

	#content { width: 430px; height: 260px; padding: 240px 0 0 200px; top: 50%; left: 100px; background: transparent url(../img/sequence01/contentContainer.png) no-repeat; margin: -250px 0 0; position: absolute; z-index: 5; } 
		.element { background: red; white-space: nowrap; color: white; padding: 5px; display: block; margin: 0 3px 4px 0; float: left; cursor: move; z-index: 10; font-size: 0.69em; font-weight: bold; }
			.element a:hover { text-decoration: underline; }
			.loading { margin: 0 0 0 -200px; font-size: 0.69em; }
	
	.viewer { width: 620px; height: 250px; border-top: 1px dotted #b7b7b7; border-bottom: 1px dotted #b7b7b7; margin: 10px 0 15px; padding: 5px 0; }
	
	#about { width: 575px; height: 154px; padding: 336px 0 0 225px; top: 50%; left: 0; margin: -250px 0 0; z-index: 5; background: transparent url(../img/sequence01/about.png) no-repeat; display: none; position: absolute; font-family: Georgia, "Times New Roman", serif;  }
		#about h2 { font-size: 0.88em; margin: 0 0 7px; color: #fff; letter-spacing: -1px; }
		#about h2 span { font-family: Arial, Helvetica, sans-serif; font-size: 0.85em; }
		#about h3 { font-size: 0.69em; font-style: italic; margin: 0 0 10px; font-weight: normal;   }
		#about p { font-size: 0.69em; font-family: Arial, Helvetica, sans-serif; margin: 0 0 8px; }
		#about a:hover { text-decoration: underline; }
	
	#newsContainer { height: 150px; position: fixed; bottom: 30px; z-index: 8;   }
	#news { position: absolute; top: 0; background: transparent url(../img/sequence01/news.bg.gif) no-repeat top right; overflow: auto; width: 400px; height: 150px; padding: 0 20px 0 30px; display: none; float: left; font-size: 0.75em; color: white; }
	#news h3 { margin: 8px 0 0; }
	#news p { font-size: 0.93em; }
	a#newsToggle { position: absolute; z-index: 10; margin: 0 -100px 0 0; text-indent: -999em; width: 20px; height: 150px; background: transparent url(../img/sequence01/news.toggle.gif) no-repeat top left; display: none;  }
	a#newsToggle:hover { background-position: bottom left; }	
	
		
/*///////////////          Footer Container        ///////////////*/
	
	#footerContainer { width: 100%; height: 30px; position: fixed; background: transparent url(../img/sequence01/bg.footer.png) top center no-repeat; bottom: 0; font-size: 0.56em; z-index: 6; color: #999; }
		#footer { margin: 10px 0 0 100px; }
		#footer span a { border-bottom: 1px dotted #777; padding-bottom: 1px; color: #999; }
		#footer span a:hover { color: #fff; }
		
/*///////////////          Components        ///////////////*/

	.warning { position: fixed; bottom: 55px; right: 205px; z-index: 10; text-align: right; font-size: 2em; color: #fff; display: none; }
	.warning span { color: red; }
	.graphic, .gradient, .heart, .music, .chalk, .selected, .tips, .features { position: fixed; z-index: 1; }
	.features { background: transparent url(../img/sequence01/news.tips.png) no-repeat; width: 300px; height: 200px; bottom: 25px; left: 0;  }
	.graphic { background: transparent url(../img/sequence01/graphic.png) no-repeat; width: 475px; height: 260px; bottom: 0; right: 0; }
	.gradient { background: transparent url(../img/sequence01/gradient.png) no-repeat; width: 300px; height: 300px; top: 0; right: 0; }
	.heart, .music, .chalk, .modalClose { background: transparent url(../img/sequence01/icon.png) no-repeat; }
	.heart { height: 50px; width: 50px; bottom: 100px; right: 285px;  }
	.music { height: 65px; width: 65px; background-position: top right; right: 70px; bottom: 65px; }
	.chalk { height: 20px; width: 70px; background-position: bottom left; right: 65px; bottom: 0; }
	
	.selected { height: 145px; width: 470px; background: transparent url(../img/sequence01/selected.png) no-repeat; left: 255px; top: 50%; margin: -160px 0 0;}
	.tips { left: 455px; bottom: 11px; font-size: 0.56em; }
	.tips span { text-transform: uppercase; color: red; font-weight: bold; }
	
	#modalOverlay { background: #000; }
	#modalContainer { width: 620px; height: 460px; top: 50%; left: 50%; position: absolute; margin: -250px 0 0 -350px; padding: 30px 40px; background: transparent url(../img/sequence01/modal.png) no-repeat; color: black; }
	
	.modalClose { position: absolute; top: 0; right: 0; height: 30px; width: 30px; background-position: bottom right; text-indent: -999em; }
	
	.credit, .overview { float: left; font-family: Georgia, "Times New Roman", serif; font-size: 0.69em; color: #333; }
		.credit { width: 200px; margin: 0 10px 0 0; line-height: 1.06em; }
		.credit p { margin: 0 0 10px; }
		.credit em { font-size: 1.5em; color: #dc0000; }
		.credit span { color: #787878; font-family: Arial, Helvetica, sans-serif; font-size: 0.82em; font-weight: bold; text-transform: uppercase; }
		
		.overview { width: 410px; line-height: 1.19em; }
		.overview p { margin: 0 0 15px; }
		.overview a { background: transparent url(../img/sequence01/link.gif) center left no-repeat; padding: 0 0 0 10px; font-style: italic; color: #3a3b3f; }
		.overview a:hover { color: #dc0000; }
		
/*///////////////          Visibility        ///////////////*/

	.element, .graphic, .heart, .music, .chalk, .selected, .tips, .features { display: none; }