/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
a {
	text-decoration: none;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color:    rgba(0, 0, 0, 0);
    -ms-tap-highlight-color:     rgba(0, 0, 0, 0);
    -o-tap-highlight-color:      rgba(0, 0, 0, 0);
    tap-highlight-color:         rgba(0, 0, 0, 0);


    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
}

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: "refrigerator-deluxe";
	color: #0ff;
	overflow-x: hidden;
}

body {
	background: url("../images/ui/background.jpg") no-repeat top center;
	background-size: cover;
	background-attachment: fixed;
}

#gadget_header {
	background: url("../images/ui/gadget-header.png") bottom center no-repeat;
	top: 100px;
	left: 50%;
	margin: 0 0 0 -352px;
	width: 704px;
	position: absolute;
	text-align: center;
}

h1 {
	
	font-size: 52px;
	height: 76px;
	line-height: 74px;
	color: #00ffff;
	text-transform: uppercase;
	
}

h3 {
	font-size: 22px;
	color: #00ffff;
}

	h3#header_title {

	}

		h3#header_title span {
			text-transform: uppercase;
		}

.rotateButton {
	width:203px;
	height:187px;
	position:absolute;
	cursor: pointer;
	top: 510px;
	left: -50%;
	-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
  	transition: opacity 1s;
  	opacity: 0.5;
}

	.rotateButton:hover {
		opacity: 1;
		-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
  		transition: opacity 1s;
	}

	#left.rotateButton {
		margin: 0 0 0 -295px;
	}

	#right.rotateButton {
		margin: 0 0 0 93px;
	}

#gadget-wrapper {
	position: absolute;
	top: 200px;
	left: 50%;
	-ms-transform: translate(-50%,0); /* IE 9 */
   	-webkit-transform: translate(-50%,0); /* Chrome, Safari, Opera */
    transform: translate(-50%,0);

}

	#diagram_faded {
		position: absolute;
		top: 14px;
		left: 37px;
		-ms-transform: translate(-210%,0); /* IE 9 */
   		-webkit-transform: translate(-210%,0); /* Chrome, Safari, Opera */
    	transform: translate(-210%,0);
	}

	#information_bottom_left {
		width: 297px;
		height: 111px;
		background:url("../images/ui/information-left-number.png") no-repeat left top;
		position: absolute;
		top: 550px;
		left: -123px;
		font-size: 24px;
		line-height: 40px;
		padding: 10px 0 0 20px;
		-ms-transform: translate(-150%,0); /* IE 9 */
   		-webkit-transform: translate(-150%,0); /* Chrome, Safari, Opera */
   		transform: translate(-150%,0);
	}

	ul#measurements {
		position: absolute;
		top: 453px;
		left: 339px;
		width: 247px;
		height: 149px;
		background: url("../images/ui/measurements-bg.png");
		padding: 37px 0 0 0;
	}

			ul#measurements li {
				margin: 0 0 12px 139px;
				font-size: 14px;
				opacity: 0.75;
			}

			ul#measurements li span {
				float: right;
			}

			

	#gadget-wrapper #perspective_grid {
		width: 869px;
		height: 684px;
		background: url("../images/ui/perspective-grid.png");
		position: absolute;
		-ms-transform: translateX(-50%); /* IE 9 */
   		-webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
    	transform: translateX(-50%);
	}

	#gadget-wrapper #information_grid {
		width: 446px;
		height: 246px;
		background: url("../images/ui/information-grid.png") no-repeat;
		top: -40px;
		left: 175px;
		position: absolute;
		padding: 37px 0 0 128px;
	}

		#gadget-wrapper #information_grid li {
			height: 188px;
			width: 12px;
			
			float: left;
			margin: 0 0 0 27px;
			opacity: 0.1;
			position: relative;
			
		}

			#gadget-wrapper #information_grid li div {
				bottom: 0;
				height: 188px;
				width: 100%;
				background: #0ff;
				position: absolute;
			}

	#gadget-wrapper #most_used_by {
		width: 155px;
		height: 220px;
		background: url("../images/ui/most-used-by.png");
		top: 235px;
		left: 469px;
		position: absolute;
	}

		#gadget-wrapper #most_used_by img {
			margin: 57px 0 0 17px;
		}

	#gadget-wrapper #scroll_text_1 {
		color: #0ff;
		font-size: 6px;
		text-align: right;
		position: absolute;
		left: -426px;
		width: 149px;
		top: 138px;
		height: 57px;
		overflow: hidden;

		-webkit-filter: blur(1px);
		-moz-filter: blur(1px);
		-o-filter: blur(1px);
		-ms-filter: blur(1px);
		filter: blur(1px);
		opacity: 0.25;
	}

	#gadget-wrapper #scroll_text_2 {
		color: #0ff;
		font-size: 8px;
		text-align: right;
		position: absolute;
		left: -508px;
		width: 149px;
		top: 220px;
		height: 90px;
		overflow: hidden;
		opacity: 0.15;
	}

	#gadget-wrapper #scroll_text_3 {
		color: #0ff;
		font-size: 8px;
		text-align: left;
		position: absolute;
		left: 375px;
		width: 149px;
		top: 222px;
		height: 49px;
		overflow: hidden;
		opacity: 0.25;
	}

#chart_node {
	position: relative;
	top: 25px;
	left: 328px;
}

	#chart_node li {
		width: 16px;
		height: 14px;
		position: absolute;
	}

		#chart_node li img {
			position: absolute;
			top: 0;
			left: 0;
		}

	#chart_node li .chart-line {
		height: 3px;
		background: #0ff;
		width: 200px;
		z-index: 9999;
		left: 0;
		-ms-transform-origin: 0 0; /* IE 9 */
    	-webkit-transform-origin: 0 0; /* Chrome, Safari, Opera */
    	transform-origin: 0 0;
    	margin: 6px 0 0 8px;
    	opacity: 0.5;
	}

	#chart_node li.chart-node:nth-child(2) {
		left: 36px;
	}

	#chart_node li.chart-node:nth-child(3) {
		left: 73px;
	}

	#chart_node li.chart-node:nth-child(4) {
		left: 110px;
	}

	#chart_node li.chart-node:nth-child(5) {
		left: 147px;
	}

	#chart_node li.chart-node:nth-child(6) {
		left: 185px;
	}

	#chart_node li.chart-node:nth-child(7) {
		left: 222px;
	}

	#chart_node li.chart-node:nth-child(8) {
		left: 262px;
	}


#gadgetCanvas {
	position: absolute;
	top: -28px;
	-ms-transform: translateX(-50%); /* IE 9 */
   	-webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
    transform: translateX(-50%);

    -webkit-filter: brightness(1);
    filter: brightness(1);

    -webkit-transition: -webkit-filter 0.5s; /* For Safari 3.1 to 6.0 */
    transition: filter 0.5s;
}

#gadgetCanvas.fade-out {
	-webkit-filter: brightness(3) blur(7px);
    filter: brightness(3) blur(7px);

    -webkit-transition: -webkit-filter 0.25s; /* For Safari 3.1 to 6.0 */
    transition: filter 0.25s;
}


ul#tile_grid {
	width: 225px;
	position: absolute;
	left: 50%;
	top: 100px;
	text-align: center;
	margin: 0 0 0 -579px;
}
	
	ul#tile_grid li {
		margin: -18px 0 0 -18px;
		width: 81px;
		height: 82px;
		background: url("../images/ui/gadget-tile.png") no-repeat top center;
		cursor: pointer;
		display: inline-block;
		text-align: left;
	}

		ul#tile_grid li img {
			margin: 12px 0 0 12px;
			
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 1px 1px 2px 1px;
			border: 2px solid rgba(0,255,255,0);
			-webkit-transition: border 1s; /* For Safari 3.1 to 6.0 */
  			transition: border 1s;
		}

		ul#tile_grid li.active img {
			border: 2px solid rgba(0,255,255,1);
			
			-webkit-transition: border 0.5s; /* For Safari 3.1 to 6.0 */
  			transition: border 1s;
		}

#open_grid, #close_grid {
	display: none;
}


#transport_beams {

}

#transport_beams li {
	width: 60px;
	height: 245px;
	/* background: url("../images/ui/trqansporter-beam.png"); */
	position: absolute;
	opacity: 0.75;
}

@font-face {
	
	font-family: 'oddsquad-icons';
		src:url('/oddsquad/fonts/oddsquad-icons.eot');
		src:url('/oddsquad/fonts/oddsquad-icons.eot#iefix') format('embedded-opentype'),
			url('/oddsquad/fonts/oddsquad-icons.woff') format('woff'),
			url('/oddsquad/fonts/oddsquad-icons.ttf') format('truetype'),
			url('/oddsquad/fonts/oddsquad-icons.svg#oddsquad-icons') format('svg');
		font-weight: normal;
		font-style: normal;
}
[data-overlay="door"] .btn-close {
	background-image: url(/oddsquad/img/global/close-bg02.png);
}
a.btn-close i:before {
	content: "\e604";
}
.btn-close-door i,
.btn-close i {
	margin-left: 10px;
	font-size: 24px;
}
i,
i:before,
i:after {
	font-family: 'oddsquad-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.btn-close-door,
.btn-close {
	float: left;
	position: absolute;
	right: 20px;
	top: 40px;
	text-transform: uppercase;
	z-index: 99;
	color: #fff;
	font-size: 28px;
	padding: 5px 30px;
	font-weight: 900;
	background-image: url(/oddsquad/img/global/close-bg02.png);
	background-repeat: no-repeat;
	background-position: center center;
}

#tile_grid_wrapper {
	display: none;
	top: 40px;
}