body {
	background-color: #f8f8f8;
	cursor: default;
	font-family: sans;
	font-size: 1vw;
	margin: 12px;
}

#connect {
	background-color: #f44;
	border: 1px solid #666;
	border-radius: 50%;
	box-shadow: inset 0 0 0.25em #666;
	height: 1em;
	width: 1em;
	position: absolute;
	top: 0.25em;
	right: 0.25em;
}
#connect.connecting {background-color: #fd9;}
#connect.connected {background-color: #0f0;}


.track {
	position: relative;
	text-align: center;
	width: 100%;
}

.track input[type="checkbox"] {display: none;}
.track > #power + label {
	border-color: #f00;
	color: #f00;
	position: absolute;
	left: 1em;
	top: 10em;
}
.track > #power:checked + label {
	background-color: #fff;
	border-color: #0d0;
	color: #0d0;
}

.track > input[type="checkbox"] + label {
	background-color: #fff;
	border: 1px solid #999;
	border-radius: 0.5em;
	cursor: pointer;
	display: block;
	line-height: 2em;
	margin: 0.25em;
	position: absolute;
	right: 1em;
	width: 6em;
}
.track > input[type="checkbox"]:checked + label {background-color: #fc0;}
.track > #T + label {top: 10em;}
.track > #BL + label {top: 13em;}
.track > #IR + label {top: 16em;}

.track #fold + label {
	background-color: #fdd;
	border: 1px solid #999;
	border-radius: 50%;
	box-shadow: inset 0 0 0.4em #999;
	cursor: pointer;
	position: absolute;
	left: calc(50% - 1.4em);
	top: -0.5em;
	height: 2em;
	width: 2em;
	z-index: 2;
}

label[for="fold"] img {width: 60%;}

.track #fold:checked ~ div {scale: 1.33;}
.track .west {transform-origin: top right;}
.track .east {transform-origin: top left;}
.track #fold:checked ~ .west {transform: rotate(-45deg);}
.track #fold:checked ~ .west .block span {transform: rotate(45deg);}
.track #fold:checked ~ .west .ir label {transform: rotate(45deg);}
.track #fold:checked ~ .east {transform: rotate(45deg);}
.track #fold:checked ~ .east .block span {transform: rotate(-45deg);}
.track #fold:checked ~ .east .ir label {transform: rotate(-45deg);}

.track > div {
	display: inline-block;
	position: relative;
	transition: all 1s;
	width: calc(50% - 1em);
}

.track > div > div * {
	opacity: 0;
	transition: all 1s;
}
#T:checked ~ div .turnout * {opacity: 1 !important;}
#BL:checked ~ div .block * {opacity: 1 !important;}
/*#BL:checked ~ div img.block {opacity: 1 !important;}*/
#IR:checked ~ div .ir * {opacity: 1 !important;}

.track img {
	position: relative;
	width: 100%;
	z-index: -1;
}
.track img.block {
/*	filter: sepia(100%) hue-rotate(180deg) saturate(420%);*/
	filter: sepia(100%) saturate(420%);
	height: 100%;
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	transition: all 1s;
}

.track div label:hover, .track div span:hover {
	opacity: 1;
	z-index: 1;
}
.track .ir label:hover {scale: 1.5;}

.track label, .track span {transition: scale 0.25s;}

.track .block span {
	display: inline-block;
	font-size: 0.6em;
	height: calc(1.6em + 2px);
	line-height: calc(1.6em + 3px);
	margin: 1em;
	position: absolute;
	text-align: center;
	width: calc(1.6em + 2px);
}
.track .block span::before {
	background-color: #ddd;
	border: 1px solid #aaa;
	box-shadow: 0 0 1px 2px #fff;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	transform: rotate(45deg);
	z-index: -1;
}

.track .ir input:checked + label {
	background-color: #fb0;
	opacity: 1;
}

.track .ir label {
	background-color: #fec;
	border: 1px solid #aaa;
	border-radius: 50%;
	box-shadow: 0 0 1px 2px #fff;
	display: inline-block;
	font-size: 0.4em;
	position: absolute;
	height: calc(1.6em + 2px);
	line-height: calc(1.6em + 4px);
	width: calc(1.6em + 2px);
	text-align: center;
}

.track .turnout input {display: none;}
.track .turnout label {
	cursor: pointer;
	font-size: 0.6em;
	line-height: 2.4em;
	position: absolute;
	width: 1.6em;
}
.track .turnout label::before {
	border-top: 1.2em solid transparent;
	border-bottom: 1.2em solid transparent;
	content: '';
	position: absolute;
	top: -0.1em;
	width: 0;
	height: 0;
	z-index: -1;
}
.track .turnout label.lt::before {
	border-right: 2.4em solid #f004;
	right: 0;
}
.track .turnout label.rt::before {
	border-left: 2.4em solid #f004;
	left: 0;
}
.track .turnout label::after {
	background-color: #f00;
	content: '';
	height: 0.2em;
	position: absolute;
	top: 0.95em;
	width: 5em;
}
.track .turnout label.lt::after {
	right: 2em;
	transform-origin: right;
}
.track .turnout input:checked + label.lt.l::after {transform: rotate(-15deg);}
.track .turnout input:checked + label.lt.r::after {transform: rotate(15deg);}
.track .turnout label.rt::after {
	left: 2em;
	transform-origin: left;
}
.track .turnout input:checked + label.rt.l::after {transform: rotate(-15deg);}
.track .turnout input:checked + label.rt.r::after {transform: rotate(15deg);}


/***** WEST *****/
#t01 + label {left:63.25%; top:34%;}
#t02 + label {left:54.75%; top:34%;}
#t03 + label {left:44.5%; top:47.75%; transform:rotate(-15deg);}
#t04 + label {left:41.5%; top:17.5%;}
#t05 + label {left:37%; top:17.5%;}
#t06 + label {left:34.75%; top:63.25%; transform:rotate(-15deg);}
#t07 + label {left:15%; top:34%;}

#bl00 {left:34%; top:28%;}
#bl01 {left:38%; top:-1.5%;}
#bl02 {left:60%; top:0.5%;}
#bl03 {left:20%; top:-1%;}
#bl04 {left:41%; top:60%;}
#bl05 {left:26%; top:44%;}
#bl06 {left:18%; top:60%;}
#bl07 {left:10%; top:76%;}

#ir00 + label {left:83.5%; top:66%;}
#ir01 + label {left:46%; top:36%;}
#ir02 + label {left:23%; top:36%;}
#ir03 + label {left:1%; top:36%;}
#ir04 + label {left:53%; top:22%;}
#ir07 + label {left:25%; top:22%;}
#ir08 + label {left:28%; top:8%;}
#ir11 + label {left:3.75%; top:7%;}
#ir12 + label {left:85%; top:20%;}
#ir15 + label {left:50.5%; top:9%;}

#ir16 + label {left:48%; top:45%;}
#ir17 + label {left:38%; top:61%;}
#ir20 + label {left:35%; top:52%;}
#ir23 + label {left:2.25%; top:52%;}
#ir24 + label {left:25%; top:68%;}
#ir27 + label {left:2.25%; top:68%;}
#ir29 + label {left:19%; top:83%;}
#ir31 + label {left:3.75%; top:83%;}


/***** EAST *****/
#t21 + label {right:64.5%; top:25.8%;}
#t22 + label {right:54.5%; top:40%; transform:rotate(15deg);}
#t23 + label {right:49.5%; top:25.8%;}
#t24 + label {right:41.75%; top:60%; transform:rotate(15deg);}
#t25 + label {right:37%; top:25.8%;}
#t26 + label {right:29%; top:70%;}
#t27 + label {right:22%; top:25.8%;}

#bl08 {right:42%; top:20%;}
#bl09 {right:74%; top:3.5%;}
#bl10 {right:14%; top:3.5%;}
#bl11 {right:36%; top:36.5%;}
#bl12 {right:60%; top:56%;}
#bl13 {right:40%; top:69%;}
#bl14 {right:8%; top:48%;}
#bl15 {right:11%; top:64%;}

#ir32 + label {right:83.75%; top:66%;}
#ir33 + label {right:57%; top:28%;}
#ir34 + label {right:29.4%; top:28%;}
#ir35 + label {right:1%; top:28%;}
#ir36 + label {right:88.75%; top:11.5%;}
#ir39 + label {right:66%; top:11.5%;}
#ir40 + label {right:24%; top:12%;}
#ir43 + label {right:5%; top:11.5%;}
#ir45 + label {right:43%; top:44%;}

#ir48 + label {right:74.75%; top:68%;}
#ir51 + label {right:50%; top:62%;}
#ir52 + label {right:57.7%; top:37.5%;}
#ir53 + label {right:47.75%; top:53%;}
#ir55 + label {right:35.5%; top:70%;}
#ir56 + label {right:20%; top:61%;}
#ir59 + label {right:2.25%; top:56%;}
#ir60 + label {right:21%; top:73%;}
#ir63 + label {right:2.25%; top:73%;}


/***** THROTTLE *****/
#throttle {
	border: none;
	height: 64vh;
	width: 42vh;
	position: absolute;
	top: 12em;
	left: calc(50% - 21vh);
}