/************ common & generic stuff ************/

html {
	font-family: Tahoma, sans-serif;
	font-size: 13px;
	text-align: left;
	}

* {
	padding: 0;
	margin: 0;
	}

a {
	color: #ff7e00;
	text-decoration: underline;
	}

a:hover {
	text-decoration: none;
	}

h1, h2 {
	font-size: 2.2rem;
	line-height: 6rem;
	font-weight: normal;
	}

h1 span, h2 span {
	font-size: 1.1rem;
	line-height: 1.1rem;
	color: #bbbbbb;
	margin-left: 1rem;
	}

h3 {
	font-size: 1.5rem;
	padding: 1rem 0 1rem;
	font-weight: normal;
	}

p {
	margin-bottom: 10px;
	}

img {
	border: none;
	}

.cls {
	clear: both;
	float: none;
	}



/************ layout ************/

#canvas {
	margin: 0 auto;
	position: absolute;
	top: 6rem;
	width: 1024px;
	height: 950px;
	background: green;
	}

#canvas > * {
	position: absolute;
	}

#canvas > a {
	background: #007eff;
	display: block;
	outline: 2px dotted black;
	outline-offset: -2px;
	text-decoration: none;
	}

#canvas > a.ready:hover {
	background: #ff7e00;
	}

#canvas > a.ready:after {
	content: attr(data-text);
	position: absolute;
	top: 50%;
	left: 50%;
	color: #ff7e00;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	}

#canvas > a.ready:hover:after {
	color: #007eff;
	}

#canvas > a.tbd, #canvas > a.na {
	background: gray;
	}

#canvas > a.tbd:after, #canvas > a.na:after {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #222;
	transform: translate(-50%, -50%);
	}

#canvas > a.tbd:after {
	content: "TBD";
	}

#canvas > a.na:after {
	content: "N/A";
	}

#canvas > a.np {
	background: black;
	}



/************ header ************/

#head {
	width: 75rem;
	height: 6rem;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	position: relative;
	}

#head.dark {
	background: #222;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

#head.dark > * {
	color: #ff7e00;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

#head .back, #head .close {
	position: absolute;
	cursor: pointer;
	height: 3rem;
	width: 3rem;
	border-radius: 50%;
	border: 0.1rem solid #222;
	background: #fff;
	margin: 1.3rem 0 0 1%;
	display: none;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

#head .close {
	z-index: 100;
	background: #222;
	border-color: #ff7e00;
	}

#head .back:hover, #head .close:hover {
	border-radius: 25%;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

#head .back .arrow, #head .close .arrow {
	border: solid;
	border-width: 0 0.1rem 0.1rem 0;
	display: inline-block;
	padding: 0.5rem;
	margin: 1rem 0.9rem;
	border-color: #222;
	position: absolute;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease; 
	}

#head .close .arrow {
	border-color: #ff7e00;
	}

#head .back:hover .arrow {
	margin: 1rem 0.6rem;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

#head .close:hover .arrow {
	opacity: 0;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

#head .back .left, #head .close .left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	}

#head .back .dash, #head .close .dash {
	border: solid #222;
	border-width: 0 0.1rem 0 0;
	display: inline-block;
	padding: 0.75rem;
	margin: 0.8rem 0.45rem;
	position: absolute;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

#head .close .dash {
	border-color: #ff7e00;
	}

#head .back:hover .dash {
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	margin: 0.05rem 1.1rem;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

#head .close:hover .dash {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	margin: 1.25rem 0 0.05rem 0;
	padding: 0.9rem;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

#head .close:hover .dash:last-child {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	margin: 0 0.1rem 0 0;
	}

#head .title {
	float: right;
	width: 89%;
	text-align: center;
	}

#head .sec_title {
	display: none;
	right: 0;
	width: 89%;
	text-align: center;
	z-index: 100;
	position: absolute;
	}



/************ sections ************/

.section {
	display: none;
	position: absolute;
	top: 6rem;
	width: 75rem;
	height: 85rem;
	}

#Olay.section {
	background: #222;
	opacity: 0.5;
	z-index: 100;
	}

#Dtail.section {
	z-index: 101;
	background: #fff;
	border: solid 0.5em #222;
	margin: 5rem 10rem;
	width: 54rem;
	height: 64rem;
	}

#Dtail.section .two_col {
	float: right;
	width: 46%;
	margin: 2rem 5% 2rem 2%;
	}

#Dtail.section .two_col:first-child {
	float: left;
	width: 40%;
	margin: 2rem 2% 2rem 5%;
	}

#Dtail.section .two_col .image {
	background: #eee;
	margin-bottom: 0.5rem;
	}

#Dtail.section .two_col .image img {
	height: 100%;
	width: 100%;
	}

#Dtail.section .two_col a {
	margin-left: 1rem;
	font-size: 0.8rem;
	}

#Dtail.section table {
	width: 100%;
	}

#Dtail.section .icons > img {
	width: 3rem;
	height: 3rem;
	}

#Dtail.section table {
	border-collapse: collapse;
	}

#Dtail.section table tr {
	border-top: 0.1rem solid #222;
	}

#Dtail.section table tr:first-child {
	border-top: none;
	}

#Dtail.section table tr td {
	padding: 0.9rem 5%;
	width: 35%;
	}

#Dtail.section table tr:nth-child(2n) td {
	background: #eee;
	}

#Dtail.section table tr td:last-child {
	text-align: right;
	width: 55%;
	}

#Dtail.section .desc {
	width: 90%;
	margin: 2rem 5%;
	}

.section .field {
	width: 60%;
	position: relative;
	height: 50rem;
	float: left;
	background: #393;
	}

.section .field > span {
	position: absolute;
	display: block;
	}

.section .field > span.v {
	border-left: 0.1rem solid #222;
	}

.section .field > span.h {
	border-top: 0.1rem solid #222;
	}

.section .field > div {
	border: 0.1rem solid #222;
	background: #171;
	position: absolute;
	height: 2rem;
	width: 2rem;
	border-radius: 50%;
	cursor: pointer;
	}

.section .field > div.multi:after {
	content: attr(data-multi) 'x';
	position: absolute;
	left: 60%;
	top: -30%;
	color: #ccc;
	padding: 0.1rem 0.2rem;
	font-size: 0.8rem;
	border-radius: 30%;
	opacity: 1;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

.section .field > div.multi.activated:after {
	color: #ff7e00;
	background: #222;
	opacity: 1;
	transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	}

.section .field > div span {
	position: absolute;
	height: 0.4rem;
	width: 0.4rem;
	border-radius: 50%;
	left: 0.8rem;
	top: 0.8rem;
	opacity: 0;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

.section .field > div.activated span {
	left: -0.1rem;
	top: -0.1rem;
	height: 2.2rem;
	width: 2.2rem;
	opacity: 1;
	background: #222;
	}

.section .field > div div {
	width: 100%;
	height: 100%;
	position: absolute;
	color: #ddd;
	text-align: center;
	line-height: 2rem;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

.section .field > div.activated div {
	color: #ff7e00;
	display: inline-block;
	}

.section .list {
	width: 25%;
	float: right;
	}

.section .list ul li {
	cursor: pointer;
	margin-bottom: 0.25rem;
	padding: 0.2rem 0 0.2rem 0.5rem;
	background: #eee;
	border: solid 0.1rem #eee;
	transition: background 0.5s ease;
	-webkit-transition: background 0.5s ease;
	-moz-transition: background 0.5s ease;
	list-style: none;
	}

.section .list ul li.activated {
	color: #ff7e00;
	background: #222;
	border-color: #ff7e00;
	}

.section .list ul li > span {
	display: inline-block;
	}

.section .list ul li span.tt {
	margin-left: 0.5rem;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

.section .list ul li span.tt.multi:after {
	content: '(' attr(data-multi) 'x)';
	padding-left: 0.4rem;
	font-size: 0.8rem;
	}

.section .list ul li.activated span.tt {
	margin-left: 1rem;
	}

.section .list ul li span.ar {
	border: solid #222;
	border-width: 0 0.1rem 0.1rem 0;
	opacity: 0;
	padding: 0.2rem;
	margin: 0 0 0.1rem 0.1rem;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

.section .list ul li.activated span.ar {
	opacity: 1;
	border-color: #ff7e00;
	margin: 0 0 0.1rem 0.5rem;
	}

.section .list ul li span.dt {
	opacity: 0;
	padding: 0.2rem;
	margin: 0 0.5rem;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	}

.section .list ul li.activated span.dt {
	opacity: 1;
	}



/************ tooltip ************/

.tooltip {
	position: relative;
	}

.tooltip:before {
	content: attr(data-text);
	position: absolute;
	width: 200px;
	padding: 10px;
	border-radius: 10px;
	background: #222;
	color: #ff7e00;
	text-align: center;
	opacity: 0;
	transition: 0.5s opacity; 
	transform: translateX(-50%);
	left: 50%;
	}

.tooltip.top:before {
	top: 0;
	}

.tooltip.bot:before {
	top: 70%;
	}

.tooltip:after {
	content: "";
	position: absolute;
	border: 10px solid #222;
	transform: translateX(-50%);
	opacity: 0;
	transition: 0.5s opacity; 
	left: 50%;
	}

.tooltip.top:after {
	top: 12.5%;
	border-color: #222 transparent transparent transparent;
	}

.tooltip.bot:after {
	top: 63%;
	border-color: transparent transparent #222 transparent;
	}

.tooltip:hover:before, .tooltip:hover:after {
	opacity: 1;
	transition: 0.5s opacity; 
	}