body {
	padding: 0;
	margin: 0;
	overflow: auto;
	font-family: 'Open Sans', sans-serif;
	color: #f7e9d4;
	background-color: #213a5f;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

input, select, button, a {
  color: #CB0039;
	font-weight: bold;
	text-decoration: none;
	background: transparent;
	cursor: pointer;
}
input, select, button {
	border: 2px solid #CB0039;
 	border-radius: 5px;
}

.panel, .modalContent, .signal {
	color: #333 !important;
}

.panel, .modalContent {
	background: #eee;
	background: -moz-linear-gradient(#fff, #ccc);
	background: -webkit-linear-gradient(#fff, #ccc);
	background: linear-gradient(#fff, #ccc);
}

.pressed, .active, .accordion:hover {
	background-color: #aaa;
}
.panel {
	border-top: 2px solid #aaa;
}

#menu-button, #menu-area {
	background-color: rgba(128,128,128,.25);
}

#intro {
	padding: 1rem;
	max-width: 33rem;
	text-align: left;
}
.disclaimer {
	color: grey;
	font-family: 'Arial', sans-serif;
	font-style: italic;
	font-size: 12px;
}

#start-button {
	color: #f7e9d4;
	height: 6rem;
	width: 6rem;
	background-image: url("logo.png");
	background-size: cover;
	background-position: center;
}

#container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modalDialog {
	display: none;
	position: fixed;
	cursor: pointer;
	pointer-events: auto;
}
.modalContent {
	position: relative;
	padding: 1rem;
	border-radius: 8px;
	text-align: center;
	cursor: auto;
}

.accordion .icon {
	float: right;
	margin-right: 1rem;
	stroke: #CB0039;
	fill: transparent;
}
.accordion .icon.on {
	fill: #CB0039;
}

#menu-pin {
	margin-right: 0;
}

#video {
	color: #CB0039 !important;
	cursor: pointer;
}
#video img {
	width: 96%;
}

#playBar {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: .5rem;
	background: #aaa;
	border: none;
	margin: .5rem 0;
}
#playBar.off {
	background: transparent;
}
#playBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%; 
  background: #CB0039;
  cursor: pointer;
}
#playBar::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #CB0039;
  cursor: pointer;
}

span.combo {
	position: relative;
}
#comboName, #combolist {
	position: absolute;
	top: 0;
	left: 0;
	max-Width: 5rem;
	display: inline-block;
}
#comboName {
	width: 4.2rem;
	max-width: 4.2rem;		/* for ios browsers */
	background: #fff;
}
#comboName.off {
	display: none;
}
#saveCombo {
	fill: #CB0039;
}
#saveCombo.off {
	display: none;
}

#status-area {
	background: transparent;
	width: 96%;
	position: fixed;
	left: 2%;
	bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
}
.clipstate {
	display: inline-block;
	box-sizing: border-box;
	padding: 1px;
	width: 1.818%;
}
.clipstate div {
	outline: 1px solid transparent;
	min-height: 5px;
	opacity: .4;
}
.clipstate div:hover {
	cursor: pointer;
	opacity: 1;
}
.clipstate .playing {
	outline-color: white;
	opacity: 1 !important;
}
.clipstate .filtered {
	opacity: .8;
}
.clipstate .muted {
	opacity: .15;
}

#menu-button {
	font-size: 1.5rem;
	margin: 2rem;
	padding: 1rem;
	position: fixed;
	top: 0;
	left: -8rem;
	transition: left .3s ease-out;
}
#menu-area {
	overflow-x: hidden;
	position: fixed;
	left: 0;
	top: 0;
	width: 0;
	max-width: 18rem;
	max-height: 80%;
}
#menu-area>button {
	border-radius: 0;
}
button.close {
	float: right;
	padding: 1rem;
	border: none;
	pointer-events: auto;
	background: transparent;
}
.close svg {
	width: 1rem;
	height: 1rem;
	stroke: #CB0039;
}
.accordion {
	font-size: 1rem;
	padding: .5rem;
	width: 100%;
	border: none;
	text-align: left;
	text-shadow: 0 0 1rem #aaa;
	transition: all .6s;
}
.panel {
	padding: 0 1rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease-out;
}
.panel p {
	margin: .3rem 0;
}
.table>div {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: .1rem 0;
}
.info {
	font-style: italic;
}
.small {
	font-size: 12px;
}

.signal {
	font-style: italic;
	float: right;
	margin-right: 1rem;
}
.refopt {
	font-weight: bold;
}

#refInfo {
	font-style: italic;
	justify-content: center;
}

#logoButton {
	border: none;
	float: left;
	margin: .5rem;
}

.logo {
	width: 3rem;
	height: 3rem;
}

svg.icon {
	width: 1.1rem;
}

.panel .icon {
	padding-right: .1rem;
	margin-bottom: -.1rem;
}

#sessionList {
	min-width: 3rem;
}
#timeLimit {
	margin: 0 .1rem;
}

.hexlayout {
	text-align: center;
	padding: 9px 0;
}
.hexlayout p {
	margin: -3px;
}
.hexButton {
	position: relative;
	display: inline-block;
	width: 2rem;
	height: 2rem;
	font-size: 12px;
	line-height: 2.5;
	color: #aaa;
	background-size: cover;
	background-position: center;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	cursor: pointer;
	pointer-events: auto;	
}
.hexButton .stack {
	position: absolute;
	top: 0;
	left: 0;
	width: 2rem;
	height: 2rem;
	background-color: rgba(203,0,57,1); 
}
.hexButton.on {
	color: turquoise;
	font-weight: bold;
	text-shadow: 0 0 1px black;
}
.hexButton.ref {
	color: yellow;
	font-weight: bold;
	text-shadow: 0 0 1px black;
}
#scr-01 { background-image: url("./art/icon1.png") }
#scr-02 { background-image: url("./art/icon2.png") }
#scr-03 { background-image: url("./art/icon3.png") }
#scr-04 { background-image: url("./art/icon4.png") }
#scr-05 { background-image: url("./art/icon5.png") }
#scr-06 { background-image: url("./art/icon6.png") }
#scr-07 { background-image: url("./art/icon7.png") }
#scr-08 { background-image: url("./art/icon8.png") }
#scr-09 { background-image: url("./art/icon9.png") }
#scr-10 { background-image: url("./art/icon10.png") }
#scr-11 { background-image: url("./art/icon11.png") }
#scr-12 { background-image: url("./art/icon12.png") }
#scr-13 { background-image: url("./art/icon13.png") }
#scr-14 { background-image: url("./art/icon14.png") }
#scr-15 { background-image: url("./art/icon15.png") }
#scr-16 { background-image: url("./art/icon17.png") }
#scr-17 { background-image: url("./art/icon18.png") }
#scr-18 { background-image: url("./art/icon19.png") }
#scr-19 { background-image: url("./art/icon20.png") }
#scr-20 { background-image: url("./art/icon21.png") }
#scr-21 { background-image: url("./art/icon22.png") }
#scr-22 { background-image: url("./art/icon23.png") }
#scr-23 { background-image: url("./art/icon24.png") }
#scr-24 { background-image: url("./art/icon25.png") }
#scr-25 { background-image: url("./art/icon26.png") }
#scr-26 { background-image: url("./art/icon27.png") }
#scr-27 { background-image: url("./art/icon28.png") }
#scr-28 { background-image: url("./art/icon29.png") }
#scr-29 { background-image: url("./art/icon30.png") }
#scr-30 { background-image: url("./art/icon31.png") }
#scr-31 { background-image: url("./art/icon32.png") }
#scr-32 { background-image: url("./art/icon33.png") }
#scr-33 { background-image: url("./art/icon34.png") }
#scr-34 { background-image: url("./art/icon35.png") }
#scr-35 { background-image: url("./art/icon36.png") }
#scr-36 { background-image: url("./art/icon37.png") }
#scr-37 { background-image: url("./art/icon38.png") }
#scr-38 { background-image: url("./art/icon39.png") }
#scr-39 { background-image: url("./art/icon40.png") }
#scr-40 { background-image: url("./art/icon41.png") }
#scr-41 { background-image: url("./art/icon42.png") }
#scr-42 { background-image: url("./art/icon43.png") }
#scr-43 { background-image: url("./art/icon44.png") }

#clear-button {
	float: right;
	margin-left: .3rem;
}
#maturity.off {
	display: none;
}

#youWin {
	margin: 2rem;
}

#fullImage {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(8,8,8,.75);	/* with opacity */
}
#bigImage, #bigCaption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 100%;
	border: none;
}
#bigImage {
	animation: spin 90s linear infinite;
}
#bigCaption {
	text-align: center;
	padding: 1rem 0;
}
@keyframes spin { from {transform:rotate(0)} to {transform:rotate(360deg)} }