/*-----------------------------
RESET STYLES
-----------------------------*/
	
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
	margin:0;
	padding:0;
	-webkit-text-size-adjust:none;
	}
body{
	font-size: 10px;
	}
ul, li, ol, dl, dd, dt{
	list-style:none;
	padding:0;
	margin:0;
	}
a{
	text-decoration:none;
	}

/*-----------------------------
Layout
-----------------------------*/

body {
	padding: 0;
	margin: 0;
	background-color:#334555;
	background-image:url(../images/interface/gr_background.png);
	font-family:sans-serif;
	color: #FFF;
}

.xr_tl {position: absolute; white-space: pre; unicode-bidi:bidi-override;}

.xr_ap {position: absolute; border:none;}

.clear {
	clear: both; display: block; font-size: 1px; height: 0px; margin: 0; overflow: hidden; padding: 0 !important; visibility: hidden; 
}

.index {
	border: solid 1px #334656;
	margin-left: 5px;
	margin-bottom: 5px;
    -webkit-border-radius: 50px;
}

#loading {
	position: absolute;
	z-index: 10;
	width: 200px;
	top: 150px;
	left: 40px;
	background: #334555;
	color: white;
	text-align: center;
	font: bold 20px Helvetica;
	padding: 20px;
	-webkit-border-radius: 8px;
	opacity: 0.7;
}

#warning {
    padding: 1em;
    border: dashed 8px red;
    background: #f88;
    color: black;
    text-align: center;
    font: bold 18px sans-serif;
    position: fixed;
    width: 90%;
    z-index: 20;
}

#debug {
	margin-left: 80px;
	padding: 5px;
    -webkit-border-radius: 8px;
	border: solid 12px black;
	background:white;
    font: bold 12px Helvetica;
    opacity: 0.3;
	
	width:190px;
	height:20px;
}

#close {
	position: absolute;
	top:360px;
	left: 10px;
	z-index:20;
}

#copyright {
	position: absolute;
	top:385px;
	left: 160px;
	z-index:20;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: left;
}
#infotext {
	width:114px;
	text-align:left;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	color: #ffffff;
	position: absolute;
	left: 15px;
	top: 90px;
	line-height: 13px;
}

/*-----------------------------
PANOVIEWER
-----------------------------*/

/* 3D view (crop rectangle) */
#viewport {
	position:absolute;
    width: 100%;
    height: 320px;
    overflow: hidden;
    top: 53;
    left: 0;
    -webkit-perspective: 200;
    -webkit-transform-style: preserve-3d;
}

#cube {
    width: 100%;
    height: 320px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(200px);    
}

/* Each side of the 3D cube */
.panoside {
    display: block;
    position: absolute;
    /* left: 18px; 18px centres a 283-pixel-wide image in a 320-pixel-wide container */
    top: 18px;  /* 18px vertically centres the 283-pixel-tall image in a 320-pixel-tall container */
    -webkit-backface-visibility: hidden;
}

/* initial cube setup */
#side1 { -webkit-transform: translateZ(-141px); }
#side2 { -webkit-transform: rotateY(-90deg) translateZ(-141px); }
#side3 { -webkit-transform: rotateY(180deg) translateZ(-141px); }
#side4 { -webkit-transform: rotateY(90deg) translateZ(-141px);  }
#side5 { -webkit-transform: rotateX(-90deg) translateZ(-141px); }
#side6 { -webkit-transform: rotateX(90deg) translateZ(-141px);  }

/*-----------------------------
	BASIC LAYOUT
-----------------------------*/

#whichwayup{
	overflow:auto;
	position: absolute;
	top: 389px;
	left: 80px;
	z-index: 20;
	height: 25px;
	text-align: left;
	font-family: Helvetica;
	font-size: 12px;
	}

/*-----------------------------
	ORIENTATION CLEVERNESS
-----------------------------*/

#content_left,
#content_right,
#content_normal,
#content_flipped{
	display:none;
	}
.show_normal,
.show_flipped{
	width:240px;
	}
.show_left,
.show_right{
	width:240px;
	}

.show_left #content_left,
.show_right #content_right,
.show_normal #content_normal,
.show_flipped #content_flipped{
	display:block;
	}