/* Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0;	font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
/* :focus { outline: 0; }  remember to define focus styles! */
/* ins { text-decoration: none; } remember to highlight inserts somehow! */
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; } /* tables still need 'cellspacing="0"' in the markup */ 


/* Basics and Structure */

body { font: 12px/22px Verdana, Geneva, sans-serif; color: #000; background: #fff url(images/dream-clarity-white.png) no-repeat fixed 50% 20px; }
	.section-wrap { }
			.black { background: #000 url(images/dream-clarity.png) no-repeat fixed 50% 20px; }
			.white { background-color: transparent;}
		.content-wrap { margin: 0 auto; width: 940px; }
			#header { padding-top: 20px;  z-index: 100; }
			#logo { display: block; width: 480px; height: 100px; margin: 0px; text-indent: -9999px;  float: left; }
				.kanji { display: block; height: 20px; width: 120px; position: relative; top: 18px; left: 120px; }
				.home-button { display: block; height: 100px; width: 500px; position: relative; top: 10px; left: 10px; }
				#logo-big-white { display: block; width: 640px; height: 140px; margin: 0 0 0 272px; text-indent: -9999px; background: url(images/dream-clarity-title-big-white.png) no-repeat; float: left; }
				#nav-main { display: block; width: 460px; height: 25px; margin: 0px; float: left; }
					#nav-main #ul-nav { margin: 45px 0 0 20px; }
					#nav-main li { display: block; float: left; height: 25px; width: 66px; text-align: center; } 
			#feature { height: 430px; width: 940; background: url(images/bg-feature.png) no-repeat; overflow: hidden; clear: left; position: relative; z-index: 10; }
				#feature-container { }
				.panel { position: absolute; top: 0px; left: 0px; width: 820px; color: #fff; display: none; }
					#home-panel { display: block; }
					.panel h2 { margin: 90px 0 22px 400px; } 
					.panel p { margin-left: 422px; }
					.panel img { position: absolute; }
						#joker { left: 100px; top: 50px; }
						#mushrooms { left: 100px; top: 50px; }
						#koi { left: 100px; top: 50px; }
							#home-panel #joker { left: 85px; top: 60px; }
							#home-panel #mushrooms { left: 341px; top: 56px; }
							#home-panel #koi { left: 603px; top: 61px; }
			
			.content-spacer { display: block; height: 100px; width: 940px; }
			.white .content-spacer-bottom { display: block; height: 140px; width: 940px; background: url(images/bg-trans-white-bottom.png) repeat-x; }
			.black .content-spacer-bottom { display: block; height: 140px; width: 940px; background: url(images/bg-trans-black-bottom.png) repeat-x; }
				#dreams-top-spacer { height: 140px; }
			
			.content { padding: 40px 0 0 40px; margin-bottom: 0px; clear: both; }
					.column { float: left; width: 400px; }
					.second { margin-left: 60px; }	
					.black .content  { background: url(images/bg-trans-black.png); }
					.white .content  { background: url(images/bg-trans-white.png); }
					
			.updowns { position: relative; float: right; right: 10px; top: 80px; width: 81px; }

.clearboth { clear: both; }
		

/* Formatting */

p { margin-bottom: 22px; }
	.black p { color: #eee; }
	.white p { color: #111; }

ul { }
ol { list-style-type: decimal; margin-left: 20px; }
li { margin-bottom: 11px; }

input, textarea { margin-bottom: 22px; }

.small { }
.faded { }
.centered { text-align: center; }
.right { text-align: right; }

/* Headings */

h1, h2, h3 { font-family: "Arial Black", Arial, Gadget, sans-serif; font-weight: 900; }

h1 { font-size: 33px; } .black h1 { color: #fff; } .white h1 { }
	#logo h1 { display: block; height: 50px; margin-top: 20px; }
h2 { font-size: 22px; line-height: 22px; margin-bottom: 33px; margin-top: 0px; letter-spacing: -2px; } .black h2 { color: #fff; } .white h2 { }
h3 { font-size: 12px; line-height: 22px; margin-bottom: 11px; margin-top: 0px; letter-spacing: -1px; } .black h3 { color: #eee; } .white h3 { }
	p + h3 { margin-top: 33px; }
h4 { } .black h4 { color: #fff; } .white h4 { } 
h5 { } .black h5 { color: #fff; } .white h5 { }
h6 { } .black h6 { color: #fff; } .white h6 { }


/* Links */

a:link, a:visited { text-decoration: none; }
a:hover, a:active { }

a.email-link:link, a.email-link:visited { text-decoration: none; color: #fff; font-weight: bold; }
a.email-link:hover, a.email-link:active { text-decoration: underline; }

#nav-main li { line-height: 22px; padding: 0; font: 11px "Arial Black", Arial, Gadget, sans-serif; font-weight: 900;  background-color: #fff; margin-right: 5px; }
#nav-main a { display: block; width: 66px; height: 25px; color: #000; line-height: 25px; }
	#nav-main a:hover, #nav-main a:active { color: #051DFF; }

.panel a { height: 30px; text-align: center; color: #000; font: 14px/30px "Arial Black", Arial, Gadget, sans-serif; font-weight: 900; background-color: #fff; position: relative; right: 0px; padding: 4px 20px; margin-top: 22px; }
	.panel a:hover, .panel a:active { col or: #051DFF; color: #fff; background-color: #000; }

.up { display: block; height: 79px; width: 41px; float: left; text-indent: -9999px; background: url(images/up-downs.png) no-repeat -40px 0px; }
	.black .up { background-position: -40px -79px; }
		.up:hover { background-position: -121px 0px; }
		.black .up:hover { background-position: -121px -79px; }
.down { display: block; height: 79px; width: 40px; float: left; text-indent: -9999px; background: url(images/up-downs.png) no-repeat 0px 0px; }
	.black .down { background-position: 0px -79px; }
		.down:hover { background-position: -81px 0px; }
		.black .down:hover { background-position: -81px -79px; }


/* Forms */

textarea, input {  border: 15px solid #eee; font: 12px Verdana, Geneva, sans-serif; width: 430px; overflow: auto; padding: 6px; }
	#dream-textarea { height: 280px; }
	#other-info-textarea { height: 140px; }
	textarea:focus, input:focus { border: 15px solid #000;}
#submitbutton { background: #000; color: #fff; border-color: #000; font-weight: bold; width: 200px; cursor: pointer; }
	#submitbutton:hover { background: #fff; color: #000; border: 1px solid #000; padding: 20px; }


a#sitebymaxshmax { display: block; width: 142px; height: 17px; background: url(images/site-by-maxshmax.png) no-repeat 0 50%; text-indent: -9999px; margin-left: 772px; padding: 4px 0;  }
	a#sitebymaxshmax:hover, a#sitebymaxshmax:active { background-position: -142px 50%; }