body {
	background-color: #1f1f1f;
	background-image: url('images/bg.png');
	margin: 0;
	padding: 0px;
	color: #cccccc;
	font-family: Arial, 'Monaco', Courier;
	font-size: 12px;
	min-height: 682px;
}

h2 {font-size: 16px; font-style:italic;}

a, a:visited {
	color: #cccccc;
	text-decoration: none;
}

#fullscreenCurtain {
	background-color: #111;
	position: fixed;
	top:0;
	left:0;
	display: none;
	width: 100%;
	height: 100%;
	opacity: 0.85;
	z-index: 0;
}

#stage canvas:hover, #stage:active, #stage:focus { cursor: crosshair; }
	
/************************************************************** Nav bar	*******/
	
#navbar {
	min-height: 40px;
	min-width: 800px;
	margin-left: 10px;
	margin-right: 10px;
	background-color: #222;
	border-width: 0px 0px 1px 0px;
	border-radius: 0 0 5px 5px;
	border-style: solid;
	border-color: #333;
	box-shadow: 0px 5px 25px #353535;
}

#study-browser {
	display:none;
	width:100%;
	top:0px;
	margin-top:0px;
	height:220px;
	background: rgba(70, 70, 70, 0.2);
}

#study-browser-content {
	padding:15px;
}

.thumb-figure {
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
}

.thumb-td {
	white-space: nowrap;
	overflow: hidden;
	width: 150px;
	height: 150px;
}

.stack-thumb {
	width: 150px;
	height: 150px;
	opacity: .6;
	border-radius:10px 10px 0px 0px;
	-moz-border-radius:10px 10px 0px 0px;
	-webkit-box-shadow:0 1px 0 #333;
	-moz-box-shadow:0 1px 0 #333;
	box-shadow:0 1px 0 #333;
}

.stack-thumb:hover {
	opacity: 1;
}

.thumb-text {
	text-align: right;
	font-family: Arial;
	font-size: 14px;
	position: relative;
	margin-top: -5px;
	height: 27px;
	padding-right: 10px;
	padding-top: 8px;
	margin-bottom: 40px;
	background-color: rgba(20, 20, 20, .7);
	border-radius:0px 0px 10px 10px;
	-moz-border-radius:0px 0px 10px 10px;
}

.navbar-content {
	position:relative;
	height: 68px;
	min-width: 800px;

	border-radius: 0 0 5px 5px;
	border-width: 0 0 1px 0;
	border-color: #777;

	background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(41,43,46,0.58) 40%, rgba(0,0,0,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(40%,rgba(41,43,46,0.58)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(41,43,46,0.58) 40%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(41,43,46,0.58) 40%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(41,43,46,0.58) 40%,rgba(0,0,0,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(41,43,46,0.58) 40%,rgba(0,0,0,1) 100%); /* W3C */
}

.navbar-label {
	position:absolute;
	margin-top:3px;
}

.navbar-label .ui-button {
	font-size: 12px;
	text-shadow:#333 2px 2px 4px;
	height:28px;

	border-style: solid;
	border-width: 1px;
	border-color: #333;

	background-image:none;
	background-color: #222529;
	background: rgb(12,12,12); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(12,12,12,1) 60%, rgba(39,40,43,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(12,12,12,1)), color-stop(100%,rgba(39,40,43,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(12,12,12,1) 60%,rgba(39,40,43,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(12,12,12,1) 60%,rgba(39,40,43,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(12,12,12,1) 60%,rgba(39,40,43,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(12,12,12,1) 60%,rgba(39,40,43,1) 100%); /* W3C */
}

.navbar-label .ui-button.ui-state-active {
	box-shadow: inset 0px 0 35px #26B3F7; }
.navbar-label .ui-button.ui-state-hover {
	box-shadow: inset 0px 0 35px rgba(38, 179, 247, 0.6); }
.navbar-label .ui-button.ui-state-active.ui-state-hover {
	box-shadow: inset 0px 0 35px #26B3F7; }

#quiz-div .ui-button.ui-state-active {
	box-shadow: inset 0px 0 35px #dd4b39 !important; }
#quiz-div label.ui-button.ui-state-hover {
	box-shadow: inset 0px 0 35px #e36e60 !important; }
#quiz-div label.ui-button.ui-state-active.ui-state-hover {
	box-shadow: inset 0px 0 35px #dd4b39 !important; }

#logo-div {
	font-size: 18px;
	font-weight: 100;
	left:10px;
}
#logo-div a, #logo-div a:visited {
	color: #ccc;
	font-family: 'HelveticaNeue-CondensedBold', Arial;
	font-weight: 100;
}

#logo-button span {
	font-variant: small-caps;
}

#logo-div .ui-button-text,
#quiz-div .ui-button-text,
#options-div .ui-button-text,
#orientation-div .ui-button-text {
	font-family: 'HelveticaNeue-CondensedBold', Monaco, Consolas, Courier;
	font-size: 11px !important;
	line-height: 1.9 !important;
	color: #ccc !important;
}

#series-div .ui-button-text {
	font-family:  'HelveticaNeue-CondensedBold', Monaco, Consolas, Courier;
	font-size: 11px !important;
	line-height: 1.9 !important;
	color: #ccc !important;
	padding-right: 0.5em;
	padding-left: 0.5em;
}


#logo-button {
	background-image:none !important;
	font-weight:100 !important;
	height:28px;
}

#region-div {
	left: 50%;
	margin-top: 0;
	margin-left: -150px;
	width: 300px;
	display: none;

	position: absolute;
	line-height: 3.6em;
	text-align: center;
	font-weight: bold;
	
	height: 41px;
	font-size: 12px;
}

#loader-div .ui-button,
#fullscreen-div .ui-button {
	width: 28px;
}

#loader-div { left: 100px; }
#series-div { left: 10px; top: 32px}
#quiz-div { right: 400px;}
#orientation-div { right: 200px;}
#options-div { width: 180px; right: 10px; }
#fullscreen-div { right: 14px; }

	
/*********************************************************** Main stage *******/

canvas {
	width:100%;
	height:100%;
}

.box {
	border-width:1px;
	border-style:solid;
	border-color:#777;
}

.imgSeq {
	width:100%;
	height:100%;
}

.visibleImg {
	display:block;
	width:100%;
	height:100%;
}

.invisibleImg {
	display:none;
}

#big-container {
	position:relative;
	width:1150px;
	margin-left:auto;
	margin-right:auto;
	min-height:682px;
	padding:0px;
}

#dummy-container {
	width:960px;
	position:absolute;
	z-index:3;
	top:50%;
	left:50%;
	margin-left:-480px;
	margin-top:-300px;
}

#navigator {
	position:absolute;
	padding: 0px 10px 0px 10px;
	border-width:1px;
	left:0px;
	z-index:-4;
	width:210px;
	height:100%;
	display: none;
	overflow: auto;
	border-radius: 5px;
}

div.navigator-content {
	margin-left: 0px;
	background-color: rgba(22,22,22,0.68);
	padding: 10px 10px 10px 10px;
	overflow: auto;
}

div.navigator-content ol {
	margin-left: -25px;
}

div.secondary-container h3.head {
	cursor: pointer;
	background-image: none;
	margin-top: 0;
	margin-bottom: 0;
	background-color: rgba(100, 100, 100, 0.2);
	border-width: 0px;
	border-radius: 0px;
	padding: 5px 10px 5px 10px;
	font-family: 'Open sans', 'Helvetica Neue', Helvetica, Arial;
	font-weight: bold;
	color: #ccc;
	font-style: italic;
	box-shadow: -10px 0px 0px rgba(22, 22, 22, 0.6)
}
div.secondary-container h3.head.ui-state-active {
	background-color: rgba(100, 100, 100, 0.2);
	box-shadow: -10px 0px 0px rgba(100, 100, 100, 0.6);
}

a.structure-found { color: #0C9558;}
a.structure-found:hover { color: #fdd017;}
a.structure-missing { color: #0C9558; font-style: italic;}

a.subtext, span.subtext {
	font-size: 8px;
	display: block;
	position: relative;
	text-align: right;
	margin-top: -7px;
	margin-bottom: -10px;
}

a.nav-structures { color: #ccc; font-weight: bold; }
a.nav-structures:hover { color: #fdd017; }
div.structures-on-display span {
	display: inline-block;
	color: #999;
	padding-left: 10px;
	text-indent: -10px;
}

.progressbar-track {
	position:absolute;
	width:100px;
	background-image:none !important;
	height:8px !important;
	z-index:6;
	top:-16px;
	right:-4px;
}

div#stage {
	position: relative;
	background: none;
	top: 0px;
	width: 600px;
	height: 600px;
	z-index: 6;
	box-shadow: 0px 0px 25px #353535;
	border-width: 1px;
	border-style: solid;
	border-color: #777;
}

div#stage2, #stage3 {
	position:absolute;
	float:right;
	width:250px;
	height:250px;
	z-index:4;
	right:45px;
	box-shadow: 0px 0px 25px #353535;
	border-width:1px;
	border-style:solid;
	border-color:#777;
}

div#stage2 { top: 0px; }
div#stage3 { bottom: 0px; }

img.stackImg {
	position:absolute;
	z-index:5;
	width:100%;
	height:100%;
}


/********************************************************** Stack sliders *******/

div.track {
	position:absolute;
	height:100%;
	top:0px;
	right:-30px;
}

div.track {
	width:10px;
	margin:0px;
	background-image:none;
	background-color:transparent;
	border-style:solid;
	border-width:1px;
	border-color:#333;
	border-radius:5px;
	height:100%;
	box-shadow: 0px 0px 10px #353535;
}

.track .ui-slider-handle {
	outline:0px !important;
}

/********************************************************** Stack markers *******/

div.markerTrack {
	position:absolute;
	z-index:7;
	background:none !important;
	border-width: 0px;
	width:100%;
	height:100%;
}

.markerTrack.ui-slider-vertical {
	margin-top:2px !important;
	margin-left:0px !important;
}

.markerTrack.ui-slider-horizontal {
	margin-top:3px !important;
	margin-left:-2px !important;
}

.markerTrack.ui-slider-vertical a.ui-slider-handle,
.markerTrack.ui-slider-horizontal a.ui-slider-handle {
	margin-left:0px !important;
	margin-top:0px !important;
	opacity:0.5;
	z-index:6 !important;
	border-width:0px !important;
	border-radius:0px !important;
	background-image:none !important;
	background-color:#fdd017 !important;
	outline:0px;
}

.markerTrack.ui-slider-vertical a.ui-slider-handle {
	margin-bottom:0px !important;
	left:0px !important;
	width:100% !important;
	height:3px !important;
}

.markerTrack.ui-slider-horizontal a.ui-slider-handle {
	width:3px !important;
	height:100% !important;
}

/* ______________________________________ Miscellaneous _______________ */
#text-width-div {
	font-family: Arial;
	font-size: 10px;
	position: absolute;
	visibility: hidden;
	height: auto;
	width: auto;
}