body {
	padding: 0px;
	margin: 0px;
	background-color: #070f18;
	background: rgb(59,65,80);
	background: radial-gradient(circle, rgba(59,65,80,1) 0%, rgba(0,0,0,1) 100%);
	font-family: 'Source Code Pro', monospace;
	font-weight: 400;
	transition: opacity 0.4s;
	overflow: hidden;
}

#container {
	width:830px;
	height:auto;
	left:50%;
	margin-left:-400px;
	top:40px;
	position: relative;
	float: left;
	display: inline-block;
	box-sizing: border-box;
}

#holder {
	width:100%;
	height: auto;
	position: relative;
	float: left;
	display: inline-block;
	box-sizing: border-box;
	z-index: 80;
}
#holders {
	width:830px;
	height:auto;
	left:50%;
	margin-left:-400px;
	top:40px;
	position: relative;
	float: left;
	display: inline-block;
	box-sizing: border-box;
}

.col {
	width:128px;
	background: black;
	position: relative;
	margin: 4px;
	float: left;
	display: inline-block;
	box-sizing: border-box;
	border:1px solid rgba(255,255,255,0.2);
	padding:4px;
	border-radius: 4px;
	margin-right: 5px;
}

.row {
	width:120px;
	height:80px;
	border-radius: 4px;
	margin-bottom: 5px;
	position: relative;
	float: left;
	display: inline-block;
	box-sizing: border-box;
	border-radius: 5px;
	overflow: hidden;
}

.obj {
	width:40px;
	height:40px;
	padding-top: 8px;
	float: left;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	text-align: center;
	border-radius: 0px;
	transition: opacity 0.4s;
}
.obj:hover {	
	box-shadow: 0px 0px 30px #333;
	cursor: pointer;
	transition: opacity 0.4s;
}

/*
.obj[type='1'] {
	background-color: #d8a244;
}
.obj[type='2'] {
	background-color: #e3db88;
}
.obj[type='3'] {
	background-color: #9ce388;
}
.obj[type='4'] {
	background-color: #88d4e3;
}
.obj[type='5'] {
	background-color: #b288e3;
}
.obj[type='6'] {
	background-color: #e3889a;
}
*/

.obj.rightOne {
	font-weight: 400;
	text-decoration: underline;
	text-decoration: none;
}
.obj.exposed {
	width:80px;
	height: 80px;
	margin:0px 20px;
	transition: opacity 0.2s;
}


#timerHolder {
	width:100%;
	height:auto;
	text-align: center;
	font-size: 40px;
	color: #EEEEEE;
	font-weight: bold;
	position: relative;
	float: left;
	display: inline-block;
	box-sizing: border-box;
}

#playTimeHolder {
	width:100%;
	height:auto;
	text-align: center;
	font-size: 10px;
	color: #DDD;
	font-weight: bold;
	position: relative;
	float: left;
	display: inline-block;
	box-sizing: border-box;
}

#scoreHolder {
	width:100%;
	height:auto;
	text-align: center;
	font-size: 10px;
	color: #DDD;
	font-weight: bold;
	position: relative;
	float: left;
	display: inline-block;
	box-sizing: border-box;
}

#hintHolder {
	width:100%;
	height:auto;
	position: relative;
	float: left;
	display: inline-block;
	box-sizing: border-box;
}

#hintBringbackHolder {
	width:100%;
	height:auto;
	position: relative;
	float: left;
	display: inline-block;
	box-sizing: border-box;
	color:#CCC;
	text-align: right;
	cursor: pointer;
	font-size:10px;
	padding:0px 20px 0px 0px;
}

.hint {
	width:830px;
	height:50px;
	margin:5px 0px;
	background-color: #192f48;
	border-radius: 5px;
	color:white;
	float: left;
	display: inline-block;
	position: relative;
	text-align: center;
	box-sizing: border-box;
}

.hint[active='false'] {
	display: none;
}

.hint[active='true'] {
	display: inline-block;
}

.hintType {
	width:40px;
	height:40px;
	float: left;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	padding-top:15px;
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	margin:5px;
	border-color: black;
}

.hintNum {
	width:80px;
	height:50px;
	padding-top:15px;
	float: left;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	text-align: center;
}

.hintText {
	width:500px;
	height:50px;
	padding-top:15px;
	float: left;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	text-align: left;
	padding:15px 20px;
}


.deleteHintButton {
	cursor: pointer;
	float:left;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	height:50px;
	width:50px;
	border-width: 0px 1px 0px 0px;
	border-style: solid;
	border-color: black;
	padding: 15px 0px;
	text-align: center;
}

.nextHintButton {
	cursor: pointer;
	float:left;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	background-color: #192f48;
	height:50px;
	width:150px;
	border-radius: 0px 5px 5px 0px;
	box-shadow: 0px 0px 20px #000000;
	padding: 15px 20px;
}


.icon {
	width:40px;
	height:40px;
	transform: scale(0.7);
	color: black;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	display: inline-block;
	margin: -13px -9px;
}

/*
.iconType_1 {
	background-color: #d8a244;
}
.iconType_2 {
	background-color: #e3db88;
}
.iconType_3 {
	background-color: #9ce388;
}
.iconType_4 {
	background-color: #88d4e3;
}
.iconType_5 {
	background-color: #b288e3;
}
.iconType_6 {
	background-color: #e3889a;
}
*/

/*=== fullframe holder ====*/

.frameHolder {
	width:100%;
	height:100%;
	z-index: 99;
	background: rgb(59,65,80);
	background: radial-gradient(circle, rgba(59,65,80,1) 0%, rgba(0,0,0,1) 100%);
	left:0px;
	top:0px;
	position: absolute;
	box-sizing: border-box;
	opacity: 0;
	display: none;
	transition: all 1s;
}

#startFrameHolder {
	opacity: 1;
	display: inline-block;
}

#lostFrameHolder {
	background: rgb(161,91,91);
	background: radial-gradient(circle, rgba(161,91,91,1) 0%, rgba(0,0,0,1) 100%);
}

#winnerFrameHolder {
	background: rgb(125,161,91);
	background: radial-gradient(circle, rgba(125,161,91,1) 0%, rgba(0,0,0,1) 100%);
}

.frameHolder h1 {
	color:white;
	font-weight: 100;
	font-size:50px;
	width:400px;
	height: 40px;
	left:50%;
	position: absolute;
	display: inline-block;
	box-sizing: border-box;
	margin-left: -200px;
	top:50%;
	margin-top:-100px;
	text-align: center;
}

.frameHolder h2 {
	color:white;
	font-weight: 100;
	font-size:40px;
	width:400px;
	height: 40px;
	left:50%;
	position: absolute;
	display: inline-block;
	box-sizing: border-box;
	margin-left: -200px;
	top:50%;
	margin-top:-30px;
	text-align: center;
}

.frameHolder h3 {
	color:white;
	font-weight: 100;
	font-size:15px;
	width:400px;
	height: 40px;
	left:50%;
	position: absolute;
	display: inline-block;
	box-sizing: border-box;
	margin-left: -200px;
	top:50%;
	margin-top:20px;
	text-align: center;
}

.frameHolder .btn {
	color:black;
	font-weight: 200;
	font-size:20px;
	width:200px;
	height: 42px;
	left:50%;
	padding-top: 10px;
	position: absolute;
	display: inline-block;
	box-sizing: border-box;
	margin-left: -100px;
	top:50%;
	margin-top:50px;
	text-align: center;
	background-color: white;
	cursor: pointer;
	transition: all 0.2s;
}

#startFrameHolder .btn:hover { 
	font-weight: 400;
	border-style:solid;
	border-color:#333;
	border-width: 3px 0px 0px 0px;
}