body {
	background: black;
	margin: 0;
	padding: 0;
}


/* nav styles */
.basicButton {
	font-family: sans-serif, monospace;
	font-size: 110%;
	width:auto;
	max-width: 100px;
	height:auto;
	padding: 5px 10px 5px 10px;
	color: black;
	text-align: center;
	background: white;
	z-index:10;
}

#nextButton {
	position:absolute;
	right:20px;
	bottom:20px;
	display: none;
}

.restartButton {
	display: none;
}

#nextButton-DISABLED:hover{
	cursor: pointer;
	background: black;
	color: white;
}

/*
.nav-item:hover{
	cursor: pointer;
}
*/

/* start page */

#startpage {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	background:black;
	z-index:10000;
	color:white;
}

#logo-container {
	width: 60%;
	margin: auto;
}

#startbutton {
	display:none;
	font-family: Verdana, monospace;
	font-size:24px;
	margin:auto;
	margin-top: 30px;
	padding: 4px 6px 6px 6px;
	color:white;
	background: #f7bb00;
	width: 35%;
	border-radius: 14px;
	letter-spacing: 0.04em;
}

#optionsBox {
	font-family: Verdana, monospace;
	font-size:16px;
	color:grey;
	letter-spacing: 0.04em;
	margin-top: 20px;
}

#optionsBox > div {
	margin-bottom: 14px;
}

.toggleButton {
	display: inline-block;
	background: grey;
	height: 16px;
	width: 32px;
	border-radius: 8px;
	position: relative;
}

.toggle-indicator {
	height: 14px;
	width: 14px;
	border-radius: 7px;
	background:darkgrey;
	position: absolute;
	right:auto;
	left:1px;
	top:1px;
}

.targetSelector {
	font-family: Verdana, monospace;
	font-size:16px;
	margin: 24px 4px 0 4px;
	color:white;
	background: grey;
	width: 40px;
	height:40px;
	overflow: hidden;
	display: inline-block;
	border-radius: 10px;
	letter-spacing: 0.04em;
}

.targetSelector div {
	background-position: center center;
	background-size: 30px 30px;
	width: 40px;
	height:40px;
	background-repeat: no-repeat;
}
#speedWrapper {
	display: none;
}

.speedSelector {
	font-family: Verdana, monospace;
	font-size:16px;
	margin: 24px 16px 0 4px;
	color:white;
	background: grey;
	width: 20px;
	height:20px;
	overflow: hidden;
	display: inline-block;
	border-radius: 5px;
	letter-spacing: 0.04em;
}

.speedSelector div {
	width: 20px;
	height:20px;
}

.option-selected {
	background-color: orange;
}

.target-option-fixed {
	background-image: url(../images/option-fixed.svg);
}
.target-option-x {
	background-image: url(../images/option-x.svg);
}
.target-option-y {
	background-image: url(../images/option-y.svg);
}
.target-option-xy {
	background-image: url(../images/option-xy.svg);
}

.centerVisible{
  opacity: 1;
  transition: opacity 0.1s;
}

.fadeOut {
  opacity: 0;
  -webkit-transition: opacity 1s 0s; /* value, speed, delay */
  transition: opacity 1s 0s; /* value, speed, delay */
}

/* Test styles */

#testBackground {
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:none;
}

#testCenterPoint, #testCenterPoint svg {
	width:50px;
	height:50px;
}
#testCenterPoint {
	z-index:10;
}
	
#targetPoint {
	width: 100px;
	height: 100px;
	background: #D6373C;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	background: orange;
}

.center{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#testTarget {
	fill:black;
}

/* touch response */
	
		@-moz-keyframes makeWave {
			from { -moz-transform: scale(0.15);opacity: 1;}
			to   { -moz-transform: scale(1);opacity: 0;}
		}
		@-webkit-keyframes makeWave {
			from { -webkit-transform: scale(0.15);opacity: 1;}
			to   { -webkit-transform: scale(1);opacity: 0; }
		}
		@-o-keyframes makeWave {
			from { -o-transform: scale(0.15);opacity: 1;}
			to   { -o-transform: scale(1);opacity: 0;}
		}
		@keyframes makeWave {
			from { transform: scale(0.15);opacity: 1;}
			to   { transform: scale(1);opacity: 0;}
		}
		
		@-moz-keyframes fadeSpot {
			from { opacity: 1;}
			to   { opacity: 0;}
		}
		@-webkit-keyframes fadeSpot {
			from { opacity: 1;}
			to   { opacity: 0;}
		}
		@-o-keyframes fadeSpot {
			from { opacity: 1;}
			to   { opacity: 0;}
		}
		@keyframes fadeSpot {
			from { opacity: 1;}
			to   { opacity: 0;}
		}

		#wave, #spot
		{	
			opacity: 0;
		}
		#wave
		{	
			fill:none;
			stroke:#ddd;
			stroke-width:2px;
		}
		#spot {
			fill:#ddd;
			stroke:none;
			stroke-width:0;
		}
	
		.waveContainer > .waveMe {
			-webkit-animation: makeWave 1.2s ease-out;
			-o-animation: makeWave 1.2s ease-out;
			-ms-animation: makeWave 1.2s ease-out;
			animation: makeWave 1.2s ease-out;
		}
	
		.waveContainer > .fadeMe {
			-webkit-animation: fadeSpot 1.2s ease-out;
			-o-animation: fadeSpot 1.2s ease-out;
			-ms-animation: fadeSpot 1.2s ease-out;
			animation: fadeSpot 1.2s ease-out;
		}
		
		#touch-spot-wrap {
			position:absolute;
			z-index:3;
			top:-6000px;
			left: -6000px;
			width:200px;
			height:200px;
		}
		#spot {
			position: absolute;
			top:42.5%;
			left:42.5%;
		}
		svg .blender {
			mix-blend-mode: difference;
		}


/* result styles */
ul {
	margin: 0;
}

#resultslist {
	padding-top: 20px;
	padding-bottom: 20px;
}

#resultslist li {
	clear: both;
	list-style: none;
	margin: 0 0 20px 0;
	padding: 0;
}

.valueTable {
	float: left;
}

.xVal, .yVal {
	text-align: right;
}

.colorBox {
	width:200px;
	height:120px;
	position:relative;
	margin-left: 90px;
}

.colorBox svg {
	position:absolute;
	top:45%;
	left:45%;
}

.touchPoint {
	color:#cbcbcb;
	position:absolute;
	width:5px;
	height:5px;
}