﻿/* Thrixty CSS Version 2.2.1 */
div[thrixty=found], div[thrixty=found] div, div[thrixty=found] img, div[thrixty=found] button, div[thrixty=found] canvas {
	box-sizing: border-box;
}
div[thrixty=found] img {
	width: 100%;
}
/***  ***/
div[thrixty=found] {
	min-width: 320px; 
	width: 100%; /*height: 100%;*/;
	background: white;
	outline: medium none;
	position: relative; /* create new coordinate system for positioning the zoom canvas */;
	display: block;
}
div[thrixty=found] .error {
	/*width: 100%;*/
		/*height: 100%;*/
		color: red;
	font-size: 20px;
	font-family: verdana, arial;
	border: 3px double red;
	padding: 15px;
	margin: 0;
}
div[thrixty=found] #showroom {
	/*width: 100%;*/ /* programmatically set */
	/*height: calc(100% - 50px);*/ /* set, when entering fullscreen */
	padding: 0;
	margin: 0;
	overflow: hidden;
	background: transparent;
	position: relative; /* create a new coordinate system for positioning the progress bar */
}
div[thrixty=found] #canvas_container {
	/*width: 100%;*/
			/*height: 100%;*/
			/*max-width: 100%;*/
			/*max-height: 100%;*/

	margin: 0px 0px 0px 0px;
	border: 0;
	padding: 0;
	position: relative; /* create a new coordinate system for positioning the canvas */
}
div[thrixty=found] .canvas {
	width: 100%; /*height: 100%;*/;
	background: transparent;
}
div[thrixty=found] #bg_canvas {
	background-color: #eeeeee; /* z-index positioning under main */;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
div[thrixty=found] #main_canvas {
	cursor: crosshair;
	display: block; /* get rid of trailing whitespace from inline display */ /* z-index positioning on top of bg, but under minimap */;
	position: relative;
	left: 0;
	top: 0;
	z-index: 2;
}
div[thrixty=found] #minimap_canvas {
	opacity: 0.5;
	cursor: crosshair; /*pointer-events: none;*/ /* z-index positioning on top of main */;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
}
div[thrixty=found] #marker {
	width: 100%;
	height: 100%;
	background: transparent;
	border: 2px solid black;
	opacity: 0.5;
	cursor: hand; /* z-index positioning on top of everything */;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
}
div[thrixty=found] #progress_container {
	width: 80%; /*height: 20px;*/;
	background: #aaaaaa;
	border-radius: 5px;
	position: absolute;
	bottom: 15px;
	left: 10%;
	z-index: 5;
}
div[thrixty=found] .progress_bar {
	/*width: X%;     X calculated by the ThrixtyPlayer.*/
				height: 10px;
	background: #00d000;
	border-radius: 5px;
}
div[thrixty=found] #small_progress_bar[thrixty-state=unloaded] {
	display: none;
					/*display: block;*/
}
div[thrixty=found] #small_progress_bar[thrixty-state=loading] {
	display: block;
}
div[thrixty=found] #small_progress_bar[thrixty-state=loaded] {
	display: none;
					/*display: block;*/
}
div[thrixty=found] .controls {
	width: 380px;
	padding: 0px 0px 0px 0px;
	text-align: center;
}
div[thrixty=found] .control_container_one {
	padding: 0;
	margin: 0 auto;
}
div[thrixty=found] .icons {
	width: 100%;
	height: 100%;
}
div[thrixty=found] .icons .icon_backgrounds {
	fill: transparent;
	stroke: transparent;
}
div[thrixty=found] .icons .icon_polygons {
	fill: #3f3f3f;
}
div[thrixty=found] .ctrl_buttons {
	width: 40px;
	height: 40px;
	background: none;
	margin: 0px 5px;
	border: 0;
	padding: 0;
}
div[thrixty=found] .ctrl_buttons:disabled .icon_backgrounds {
	fill: #dddddd;
	stroke: #dddddd;
}
div[thrixty=found] .ctrl_buttons:disabled .icon_polygons {
	fill: #ffffff;
}
div[thrixty=found] .ctrl_buttons:hover .icon_backgrounds {
	fill: #3f3f3f;
	stroke: #3f3f3f;
}
div[thrixty=found] .ctrl_buttons:hover .icon_polygons {
	fill: #ffffff;
}
div[thrixty=found] .ctrl_buttons:focus .icon_polygons, div[thrixty=found] .ctrl_buttons:active .icon_polygons {
	-webkit-transform: translate(5%, 5%) scale(0.9);
	-moz-transform: translate(5%, 5%) scale(0.9);
	-ms-transform: translate(5%, 5%) scale(0.9);
	-o-transform: translate(5%, 5%) scale(0.9);
	transform: translate(5%, 5%) scale(0.9);
}
div[thrixty=found] #prev_btn #prev_icon {
}
div[thrixty=found] #play_btn[thrixty-state=play] #play_icon {
	display: none;
}
div[thrixty=found] #play_btn[thrixty-state=pause] #pause_icon {
	display: none;
}
div[thrixty=found] #next_btn #next_icon {
}
div[thrixty=found] #zoom_btn[thrixty-state=zoomed_out] #zoom_out_icon {
	display: none;
}
div[thrixty=found] #zoom_btn[thrixty-state=zoomed_in] #zoom_in_icon {
	display: none;
}
div[thrixty=found] #size_btn[thrixty-state=normalsized] #normalsize_icon {
	display: none;
}
div[thrixty=found] #size_btn[thrixty-state=fullpaged] #fullsize_icon {
	display: none;
}
div[thrixty=found] #zoom_canvas {
	position: absolute;
	top: 0;
	left: 0;
	height: 0px;
	width: 0px;
	z-index: 999999;
	cursor: crosshair;
	background: white;
}
div[thrixty=found] #load_overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 7;
	background: transparent;
}
div[thrixty=found] #load_btn {
	width: 90px;
	height: 90px;
	max-width: 160px;
	max-height: 160px;
	background: none;
	margin: 0px 5px;
	border: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 8;
}
div[thrixty=found] #load_btn .icon_backgrounds {
	fill: #ffffff;
	stroke: #3f3f3f;
}
div[thrixty=found] #load_btn .icon_polygons {
}
div[thrixty=found] #load_btn:active .icon_backgrounds {
	fill: #3f3f3f;
	stroke: #3f3f3f;
}
div[thrixty=found] #load_btn:active .icon_polygons {
	fill: #ffffff;
}
