body {
	margin:auto;
	width:640px;
	height:940px;
	background-color:#CCC;
	font-family:Arial, Helvetica, sans-serif;
}

#main {
	width:100%;
	height:100%;
	position:relative;
}

.header {
	width:100%;
	height:15%;
	background-color:#666;
}

.notHeader {
		padding:0 3%;
}

#scene {
	height:45.8%;//440px;
	width:100%;//640px;
	position:relative;
	overflow:hidden;
	background-color:#888;
	border-bottom:#000 thin solid;
}

#controls {
	position:relative;
	width:100%;
	height:39%;
}

h1 {
	text-align:center;
	color:#ccc;
	background-color:#666;
	padding:5% 5% 0 5%;//35px 0 10px 0;
	margin:0;
	height:40%;
}

#header p {
}

.msg {
	text-align:center;
	font-size:1.5em;
	font-weight:bold;
	color:#DBDB39;
	padding:0;//10px 0;
	margin:0;
}

#indiv_controls {
	position:relative;
	width:100%;
	height:75%;
}

#space0controls {
	display:inline-block;
	width:50%;//320px;
	margin-left:25%;//160px;
	height:100%;
}

#space1controls {
	display:none;
	opacity:0;
	position:absolute;
	left:25%;//160px;
	top:0;
	width:50%;//320px;
	height:100%;
	/*	min-height:8%;//50px;*/
}

#control_panels {
	position:relative;
	border-top:#666 solid thin;
}

#options {
	position:absolute;
	display:none;
	left:0px;
	top:0px;
	width:100%;//640px;
	height:98%;
	background-color:#ccc;
}

#intro, #news, #patterns, #timer_panel, #help {
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	margin:0;
	padding:0;
	color:#fff;
	background-color:RGBA(0,0,0,.8);
	z-index:200;
}

.introButton, .desktop {
	display:none;
}
/*#help {
	display:none;
	position:absolute;
	width:100%;//640px;
	height:100%;
	top:0;
	left:0;
	padding:0px;
	background:#FFF;
	line-height:1.4;
	font-size:1.2em;
	z-index:200;
}
*/

#help {
	height:auto;
	word-wrap:break-word;
}

a {
	color:#F60;
}

#intro strong, #news strong, #help_controls strong {
	color:#f60;
}

#scene_img{
	position:absolute;
	display:none;
	top:0;
	left:0px;
	width:100%;//640px;
	height:100%;//440px;
}

#wave {
	position:absolute;
	display:none;
	opacity:0;
	top:0;
	left:100%;
	width:100%;//640px;
	height:100%;//440px;
}

.axes, .map {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;//640px;
	height:100%;//440px;
}

#loc_s {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#space0 {
	position:absolute;
	top:0;
	left:25%;//160px;
	height:100%;
	width:50%;
}
#space1 {
	display:none;
	opacity:0;
	position:absolute;
	top:0;
	left:25%;//160px;
	height:100%;
	width:50%;
}

#space1.space1ShiftRight {
	-webkit-transition: all 2s ease;	
	display:block;
	opacity:1;
	left:50%;//320px;
}

img.person {
	position:absolute;
	height:90.9%;//400px;
	top:6.82%;//30px;
}

img.front {
	width:51.9%;//166px;
	left:23.75%;//76px;
}

img.side {
	width:34.4%;//110px;
}
	
#space0 img.side {
	left:37.5%;//120px;
}
	
#space1 img.side {
	left:28.1%;//90px;
}
	
.grid {
	display:none;
	position:absolute;
	width:100%;//320px;
	height:100%;//440px;
	top:0;
	left:0;
}

.self {
	position:absolute;
	height:18.18%;//80px;
	width:25%;//80;
	top:36.36%;//160px;
	left:37.5%;//120px;
	outline:none;
}

.intent {
	display:none;
	outline:none;
	position:absolute;
	height:36.36%;//160px;
	width:50%;//160px;
	top:27.27%;//120px;
	left:25%;//80px;
}

.coloring {
	position:absolute;
	width:100%;//320px;
	height:100%;//440px;
	top:0;
	left:0;
	background-color:RGBA(0,0,0,0);
}

.big {
	width:200%;// 640px;
	height:100%;
	left:-50%;//-160px;
}

#bubble {
	display:none;
	font-size:1.5em;
	z-index:100;
	width:44%;//280px;
	min-height:8%;//50px;
	background-color:RGBA(255,255,255,0.9);
	border-radius:10%;//25px;
	border:#000 2px solid;
	padding:1.6%;//10px
	margin:0;
	position:absolute;
	top:0;
	left:0;
}

#bub_msg, #bub_controls {
	display:block;
	text-align:center;
}

#bub_ptr {
	z-index:101;
	display:none;
	position:absolute;
	right:4%;//25px;
	top:12%;//76px;
	width:4%;//25px;
	height:4%//25px;
}

#bub_stop, #bub_next, #bub_prev {
	padding:2.2% 7%;//10px 15px 0 15px;
	text-decoration:none;
}

.hide_relative, .placeholder {
	position:relative;
	left:-1000em;
}

.thin_hr {
	background-color:#888;
	padding:0;
	height:2px;
	margin:0 10% 2px 10%;
	border-style:none;
}

#help p, #help h2, #help h3, #help ol, #help ul, #intro p, #news p {
	font-size:1.7em;
	line-height:1.6;
}

input {
	margin-top:2.3%;//15px;
	margin-bottom:2.3%;//15px;
	font-size:1.5em;
}

#controls input {
	width:40%;
	padding-left:0;
	padding-right:0;
	margin-top:3.5%;
	margin-bottom:3.5%;
}

#controls input.wide_btn {
	width:82%;
}

#timer_hr, #timer_min {
	width:3em;
	padding:1%;
}

#patterns input {
	width:45%;
	margin:0 4% 4% 0;
}

input#patterns_close, input#reset_close {
	width:4.5em;
	position:absolute;
	top: 3%;//35px;
	right: 15px;
}

#speed0, #speed1 {
	display:block;
	width:79.7%;/255px;
	height:20%;//40px;
	border:1px #333 solid;
	padding:0;
	text-align:center;
}

#speed0, #speed1 {
	position:relative;
	margin-left:9.38%;//30px;
	margin-bottom:2.3%;//15px;
	margin-top:4%;//15px;
}

#bBeatVol {
	margin:0 0 0 30px;
	position:relative;
	display:block;
	border:1px #888 solid;
	width:255px;
	height:40px;
}

#nonspeed0, #nonspeed1 {
	display:inline-block;
	width:100%;//320px;
	text-align:center;
}

.slow, #quiet {
	font-size:1.5em;
	position:absolute;
	left:0;
	padding:4%;//11px 5px 0 5px;
}

.fast, #loud {
	font-size:1.5em;
	position:absolute;
	right:0;
	padding:4%;//11px 5px 0 5px;
}
	
#speed0guage, #speed1guage, #bBeatVolGuage {
	position:absolute;
	margin:1px;
	top:0;
	width:50%;
	height:95%;//38px;
	z-index:-1;
}

#speed0guage {
	left:0;
	background-color:#DBC639;
}

#speed1guage {
	left:0;
	background-color:#999;
}

#bBeatVolGuage {
	left:0;
	background-color:#999;
	z-index:0;
}

.left-side {
	float:left;
	margin:0;
	width:50%;//320px;
	text-align:center;
}

.right-side {
	float:right;
	margin:0;
	width:50%;//320px;
	text-align:center;
}

.space1color {
	color:#aaa !important;
}

@-webkit-keyframes pulse {
  from {opacity:0.25 }
  50% { opacity:1 }
  to { opacity:0.25 }
}

/*iPad only
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	#bubble {
		font-size:1em;
	}
	
	input {
		margin-top:11px;
		margin-bottom:11px;
		font-size:1em;
	}
	
	#speed0, #speed1 {
		margin-top:5px;
		margin-bottom:11px;
	}


	#amount {
		display:inline-block;
		margin: 0 0 0 50px;
		width:42.2%;//270px;
	}
	#guide {
		display:inline-block;
		margin: 0 0 0 50px;
		width:39.1%;//250px;
	}

}

*/