/* **************************************** */
/* PARTICLE 17                              */
/* Artwork © by Mark S. Fisher              */
/* ---------------------------------------- */
/* Site design created 09/17/2010           */
/* Wylie Fisher                             */
/* http://dukeofcheese.com                  */
/* wylie@dukeofcheese.com                   */
/* **************************************** */

@import url(reset.css);

html, body {
	height: 100%;
	width: 100%;
	background: white;
}

#wrap {
	width: 800px;
	height: 600px;
	
	margin: 0 auto;
	
	position: relative;
	top: 10px;
	
	overflow: hidden;
	-webkit-box-shadow: 0 0 20px rgb(0,0,0);
	-moz-box-shadow: 0 0 20px rgb(0,0,0);
	box-shadow: 0 0 20px rgb(0,0,0);

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}


/* **************************************** */
/* FRAME                                    */
/* **************************************** */

#frame {
	width: 800px;
	height: 600px;
	background: url(../../!img/frame.png);
	
	position: absolute;
	z-index: 98;
}

	#frame .error {
		position: absolute;
		top: 190px;
		left: 170px;
	}
		#frame .error span {
			width: 186px;
			height: 151px;
			background: url(../../!img/arrows.png) no-repeat;
			float: right;
			padding: 15px 10px 0 0;
			
			font-family: arial, helvetica, sans-serif;
			text-shadow: 1px 1px 1px #000;
			font-size: 25px;
			line-height: 40px;
			color: #FFF;
			text-align: right;
		}


/* **************************************** */
/* NAVIGATION                               */
/* **************************************** */

#nav {
	height: 297px;
	list-style: none;
	position: absolute;
	top: 93px;
	left: 67px;
	width:97px;
}
	#nav li { cursor: pointer; text-indent: -999px; font-size: 0; }

		#nav li.next, #nav li.back { height: 48px; }
			#nav li.next:hover { background: url(../../!img/nav.gif) 0 0; }
			#nav li.back:hover { background: url(../../!img/nav.gif) 0 -48px; }		

		#nav li.chars, #nav li.comix, #nav li.cons, #nav li.contact { height: 50px; }		
			#nav li.chars:hover { background: url(../../!img/nav.gif) 0 -96px; }		
			#nav li.comix:hover { background: url(../../!img/nav.gif) 0 -146px; }		
			#nav li.cons:hover { background: url(../../!img/nav.gif) 0 -196px; }		
			#nav li.contact:hover { background: url(../../!img/nav.gif) 0 -246px; }
	

/* **************************************** */
/* DISPLAY AREA                             */
/* **************************************** */

#display {
	width: 470px;
	height: 432px;
	position: absolute;
	top: 94px;
	left: 164px;
}
			#display .contactForm {
				width: 470px;
				height: 432px;
				position: absolute;
				z-index: 99;
				top: 0;
				overflow: hidden;
			} 
				.contactForm iFrame {
					width: 470px;
					height: 432px;
					border: none;
					position: absolute;
					z-index: 99;
					top: 150px;
					top: -440px;
					overflow: hidden;
				}
			
			
		.here img {
			border: none;
		    position: absolute;
		    top: 0;
		    left: 0;
		    z-index: 8;
		}