
.hvr {
	cursor: pointer;
}

.top-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 6.4vh;
	line-height: 6.4vh;
	background-color: rgba(156, 160, 190, 0.48);
	border-top: 1px solid #5D627E;
	border-bottom: 1px solid #5D627E;
	z-index: 100;
}

.hdr-txt {
	display: inline-block;
	font-size: 5.6vh;
	font-weight: bold;
	margin-left: 4vw;
	color: #59577D;
}

.hdr-txt img {
	height: 6.4vh;
}

.top-menu {
	display: inline-block;
	float: right;
	margin-right: 6vw;
	font-size: 3vh;
	vertical-align: top;
}

.menu-item {
	margin-right: 2vw;
}

.menu-item:hover {
	cursor: pointer;
	color: #807CB0;
}

.clt-login {
	display: inline-block;
	font-size: 1.8vh;
	line-height: 2vh;
	margin-top: 2.2vh;
	vertical-align: top;
}

.clt-login a {
	text-decoration: none;
}

.footer {
	position: fixed;
	top: calc(96vh - 2px);
	left: 0;
	width: 100vw;
	height: 4vh;
	line-height: 4vh;
	text-align: center;
	background-color: rgba(156, 160, 190, 0.48);
	border-top: 1px solid #5D627E;
	border-bottom: 1px solid #5D627E;
	z-index: 100;
}

.footer a {
	text-decoration: none;
}

/* splash box */
.splash-box {
	width: 92vw;
	height: calc(88vh - 6px);
	margin: 7.2vh auto 0 auto;
}

.splash-box-row {
	vertical-align: top;
	text-align: center;
}

.splash-box-cell {
	display: inline-block;
	width: 40vw;
	height: 40vh;
	margin: 1vh 8px 0 8px;
	border: 1px solid #bfc9ca;
	border-radius: 1vh;
	vertical-align: top;
}

.splash-box-cell legend {
	height: 4vh;
	width: 68%;
	line-height: 4vh;
	font-size: 2.4vh;
	text-align: left;
	border: 2px solid #bfc9ca;
	border-radius: 2vh;
	padding: 0 2vh;
	background-color: #ffffff;
	box-shadow: 4px 4px 4px #AAABB6;
}

.play-btn {
	display: inline-block;
	height: 4vh;
	width: 4vh;
	/*border: 1px solid red;*/
	float: right;
	margin: 0 -2vh 0 2vh;
	background-size: 90%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(/icos/play-btn.svg);
}

.play-btn:hover {
	cursor: pointer;
}

#mBoard {
	background-size: 98%;
	background-position: center top 4px;
	background-repeat: no-repeat;
	background-image: url(/imgs/menu-board-960px.jpg);
}

.mboard-txt {
	display: inline-block;
	height: 6vh;
	line-height: 6vh;
	width: auto;
	padding: 0 1vh;
	margin: 1vh;
	float: left;
	font-size: 4vh;
	font-weight: bold;
	text-align: left;
	color: #470F53;
	border: 1px solid #470F53;
	border-radius: 3.2vh;
	background-color: rgba(226, 223, 240, 0.8);
}

/* lightbox */
.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	background-color: rgba(93, 90, 121, 0.42);
	z-index: 120;
}

.lightbox-btn {
	height: 4.8vh;
	width: 4.8vh;
	margin: 2.8vh;
	float: right;
	background-image: url(/icos/close.svg);
	vertical-align: top;
}

.lightbox-btn:hover {
	cursor: pointer;
}

/* overlays */
.dmb-overlay {
	position: fixed;
	width: 86vw;
	height: 86vh;
	left: calc(7vw - 4px);
	top: 6vh;
	border: 4px solid #403C6B;
	border-radius: 1vh;
	background-color: #ffffff;
	background-size: 98%;
	background-position: center top 10px;
	background-repeat: no-repeat;
	background-image: url(/imgs/menuboard.png);
	z-index: 200;
}
