/* core canvas styles and resets */
*
{
	margin:0;
	padding:0;
}
html, body
{
	font:normal normal normal 100% trebuchet, "trebuchet ms", sans-serif;
	background:#eee;
	color:#222;
}

body
{
	font-size:0.8em;
	padding:10px;
}



/* meta heading */
h1
{
	position:absolute;
	left:-10000px;
}






/* viewer element dimensions that are closely inter-related */
#frame, #dungeon, .column
{
	width:600px;
	height:400px;
}

#dungeon
{
	top:200px;
	clip:rect(-200px, 600px, 200px, 0);
	margin-top:-20px;/* horizon shift */
}

.column
{
	top:-200px;
	margin:0 0 -200px 0;
}

#frame
{
	border:3px inset black;
}

#status
{
	width:592px;
	padding:5px;
	border:2px groove #999;
}

#controller
{
	width:606px;
}














/* outer frame element */
#frame
{
	float:left;
	position:relative;
	
	overflow:hidden;
	
	background:url(../images/sky.png) skyblue;
}


/* inner dungeon view */
#dungeon
{
	position:relative;
	left:0;
	
	background:url(../images/grass.png) #696; 
}


/* view columns */
.column
{
	position:relative;
}
.column.L
{
	float:left;
}
.column.R
{
	float:right;
}

.column.C
{
	position:absolute;
	left:0;
	
	width:100%;
}


/* vertical bricks within view columns */
.brick
{
	position:relative;
	display:block;
	
	width:100%;
}

.brick span
{
	display:block;
	position:absolute;

	width:0;
	height:0;
	
	border:0 solid transparent;
}



/*** DEBUG 
.column { opacity:0.6; }
.column.C { opacity:0.2; }
.brick span { border-color:blue; }
.middle { opacity:0.6; }
***/








/* local view map */
#map
{
	float:left;
	display:block;
	position:relative;
	
	width:96px;
	min-height:28px;
	margin:0 0 10px 10px;
	
	border:2px groove #000;
	background:#696; 
}

#map div
{
	float:left;
	clear:both;
	
}

#map span
{
	float:left;
	display:block;
	position:relative;
	z-index:1;
	
	width:16px;
	height:14px;
}

#map span.player
{
	position:absolute;
	z-index:2;
	
	width:32px;
	height:28px;
}

#map span#you
{
	left:32px;
	bottom:0;
	z-index:3;
	
	width:20px;
	height:16px;
	
	border:6px double #ff9;
}







/* status information */
#status
{
	float:left;
	clear:both;
	
	margin:10px 0 0 0;
	font-size:1em;
	font-weight:normal;
	line-height:1.1em;
	
	background:#eee;
}

#status span
{
	display:block;
	float:left;
	
	width:16px;
	height:16px;
	text-indent:-100em;
	margin:0 5px 0 0;
	
	background:url(../images/status.gif) no-repeat 0 -32px;
}









/* controller form */
#controller
{
	float:left;

	margin:10px 0 0 0;
	padding:0;
}

#controller fieldset
{
	position:relative;
	
	margin:0;
	padding:0;
	
	border:none;
}
#controller fieldset#group-dungeonview
{
	float:left;
	
	width:49%;
}
#controller fieldset#group-playercontrols
{
	float:right;
	
	width:49%;
	
	text-align:center;
}

#controller > fieldset
{
	border:2px groove #999;
	background:#eee;
}

#controller > fieldset > fieldset > div
{
	padding:2.7em 10px 10px 10px;
}

#controller legend span
{
	display:block;
	position:absolute;
	left:0;
	top:0;
	
	width:100%;
	padding:4px 0;
	
	text-indent:10px;
	text-align:left;
	background:#aaa;
}

#controller button
{
	padding:3px 5px;
	font-size:0.9em;
}