*, *:before, *:after{box-sizing:border-box;}
html{padding:0;margin:0;width:100%;height:100%;}
body{
	padding:0;
	margin:0;
	
	background: #ebebeb;
	width:100%;
	height:100%;
	min-width:960px;
	position:relative;
	font-family: 'Roboto Slab', serif;
}
.background-extend{
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:7px;
	z-index:10;
	background: #9f5c48;
}
.game{
	width:960px;
	margin:0 auto;
	background:url('../img/page-header.png') 50% 0 no-repeat;
	padding-top:200px;
	overflow:hidden;
	position:relative;
}

.text-panel{
	position:relative;
	width:595px;
	height:400px;
	float:left;
	z-index:10;
	padding:0 40px 0 5px;
	color:#7c7d80;
	font-size:15px;
	text-align:justify;
}
.text-panel h1{font-size:27px;padding:0;margin:0 0 20px;line-height:1.2;text-align:left;}
.text-panel p{margin:0;padding:0;}
.text-panel a{/*font-size:15px;*/font-size:14px;color:#9f5c48;font-weight:bold;transition:color 0.3s;text-decoration:none;border-bottom:1px dashed;}
.text-panel a:hover,
.text-panel.question-01 a[href="#01"],
.text-panel.question-02 a[href="#02"],
.text-panel.question-03 a[href="#03"],
.text-panel.question-04 a[href="#04"],
.text-panel.question-05 a[href="#05"],
.text-panel.question-06 a[href="#06"],
.text-panel.question-07 a[href="#07"],
.text-panel.question-08 a[href="#08"],
.text-panel.question-09 a[href="#09"],
.text-panel.question-10 a[href="#10"]{color:#51bcdb;}
.text-panel a.answered[href]{color:inherit;cursor:inherit;border-bottom:1px dashed #55a664;}


.stage{
	float:left;
	width:355px;
	height:540px;
	position:relative;
	margin-left:10px;
	margin-top:-138px;
}
.stage .special{cursor:pointer;}
.stage .question {position:absolute;width:93px;height:93px;text-decoration:none;border-radius:50%;margin:-7px 0 0 -7px;transition:opacity 0.2s;}
.stage .question.bigger{width:170px;height:170px;}
.stage .question img{border:0;border-radius:50%;opacity:1;filter: alpha(opacity=100); position:absolute;top:0;left:0;transition:opacity 0.2s;}
.stage .question .over{opacity:0;filter: alpha(opacity=0);z-index:100;}
.stage .question.hover .over{opacity:1;filter: alpha(opacity=100);}
.stage .question.complete{opacity:0.4;cursor:default;filter: alpha(opacity=40);}
.stage .question.complete .normal{opacity:1;filter: alpha(opacity=100);}
.stage .question.complete .over{opacity:0;filter: alpha(opacity=0);}

.stage a img{border:0;}

.footer{clear:both;color:#7c7d80;font-weight:bold;font-size:15px;padding-top:25px;}

#trivia-popup .image{display:block;width:280px;border:5px solid #ececec;float:left;}
#trivia-popup .details{float:left;width:480px;margin-left:27px;}
#trivia-popup h1{color:#9f5c48;font-size:19px;margin:0 0 15px}
#trivia-popup .question{color:#9f5c48;font-size:17px;font-weight:bold;margin-bottom:20px;}
#trivia-popup .answers{color:#555555;font-size:13px;list-style:none;margin:0 0 35px 0;padding:0 0 5px 0; overflow:auto;}
#trivia-popup .answers li{margin-bottom:15px;overflow:hidden;}
#trivia-popup .answers input{margin-left:-9999px;visibility:hidden;float:left;}
#trivia-popup .answers label{cursor:pointer;padding-left:20px;position:relative;display:block;line-height: 1.6em;}
#trivia-popup .answers label:before{content:'';position:absolute;left:0;top:4px;width:7px;height:7px;border:3px solid #9f5c48;border-radius:50%;z-index:1}
#trivia-popup .answers input:checked  + label:after{content:'';position:absolute;left:2px;top:6px;width:9px;height:9px;background:#f8b832;border-radius:50%;z-index:0;}

#trivia-popup .hint{text-align:center;}
#trivia-popup .hint > span{color:#85ced4;font-size:25px;font-weight:bold;}
#trivia-popup .hint > span.congrats{color:#1981B6}
#trivia-popup .hint.wrong > span{box-shadow:0 0 4px -2px #b44;color:#fff;background-color:#85ced4;font-size:22px;font-weight:bold;padding:10px 25px;border-radius:5px;}
#trivia-popup .hint > p{color:white;/*font-size:15px;*/font-size:14px;background-color:#b9642b;padding:15px 20px;}

#trivia-popup .actions{text-align:center;margin:0 auto;}
#trivia-popup .actions a{
	display:inline-block;
	text-decoration:none;
	box-sizing:border-box;
	margin-top:10px;
	position:relative;
	
	color:#fff;
	font-size:20px;
	font-weight:bold;
	padding:10px 25px;
	border-radius:5px;
}
#trivia-popup .actions .hint > span.small{font-size:15px;color:#7C7D80;font-weight:normal;}

#trivia-popup .actions a.next-question{
	background-color:#de9f2b;
	box-shadow:5px 6px 0px #9b5a46;
}
#trivia-popup .actions a.next-question:hover {
	top:1px;
	left:1px;
    box-shadow: 3px 4px 0px #9B5A46;
}
#trivia-popup .actions a.next-area{
	background-color:#915f7a;
	box-shadow:5px 6px 0px #b59d48;
}
#trivia-popup .actions a.next-area:hover {
	top:1px;
	left:1px;
    box-shadow: 3px 4px 0px #b59d48;
}
#trivia-popup .actions a.next-finalle{
	background-color:#9F5C48;
	box-shadow:5px 6px 0px #85CED4;
}
#trivia-popup .actions a.next-finalle:hover {
	top:1px;
	left:1px;
    box-shadow: 3px 4px 0px #85CED4;
}

.download-page {
    background: none repeat scroll 0 0 #6D803C;
    height: 511px;
    margin-top: 10px;
    box-sizing: border-box;
	padding-top:32px;
}
.download-page .circle {
    box-sizing: border-box;
    background: none repeat scroll 0 0 #2D6879;
    border-radius: 50% 50% 50% 50%;
    height: 435px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 65px 0;
    text-align: center;
    width: 435px;
    color: #FFFFFF;
	/*font-size:17px;*/
	font-size:16px;
	box-shadow: 3px 5px 8px -4px #000000;
}
.download-page .circle > h1 {
    color: #DDB726;
    /*font-size: 30px;*/
    font-size: 29px;   
	padding-bottom: 20px;
}
.download-page .circle .download{/*font-size:15px;*/font-size:14px;padding-top: 40px;}
.download-page .circle .download > span ,
.download-page .circle .download > a{
    color: #DDB726;
}
/*Fancybox Overrides*/
#trivia-popup{
	border-top:7px solid #9f5c48;
	background:#ffffff;
	padding:20px 15px 45px 20px;
	min-height:365px;
	width:800px;
	display:none;
	overflow:auto;
}

.trivia-popup .fancybox-skin{
	border-radius:0;
}
.trivia-popup .custom-close-button{
	color: #F1F0EC;
	/*font-size: 40px;*/
	font-size: 39px;
	position: absolute;
	right: -30px;
	top: 0;
	cursor:pointer;
}

/*Sly Scrollbar*/
/* Scrollbar */
.scrollbar {
	position: absolute;
	left: 581px;
	width: 14px;
	height: 400px;
	background: #cdaf70;
	line-height: 0;
	z-index:50;
	
	opacity:1;
	transition:opacity 0.2s;
}
.scrollbar .handle {
	width: 100%;
	height: 62px;
	background: #915f7a;
	cursor: pointer;
	opacity:1;
	transition:opacity 0.2s;
}
.scrollbar.disable{opacity:0.6;}
.scrollbar.disable .handle{
	cursor:auto;
	opacity:0;
}


/*temporary kiosk styling*/
.kiosk-return {
	cursor:pointer;
    display: block;
    height: 53px;
    left: 294px;
    position: absolute;
    top: 0;
    width: 200px;
	background:url('../img/logo.png') 50% 50% no-repeat;
}