@charset "UTF-8";
/* CSS Document */

body
{
	margin:0;
	padding:0;
	color:#FFFFFF;
	font-family:Arial, Verdana, sans-serif;
	text-align:center;
	
	background-color:#EEEEEE;
}

img
{  
	border:none;
	margin:0;
	padding:0;
}

a
{
	color:#FFFFFF;
	font-weight:bold;
	font-style:italic;
	text-decoration:none;
	
}

a:link,
a:visited,
a:hover,
a:active
{
	color:#FFFFFF;
	text-decoration:underline;
}


/* ------------------------------------------ */
/* ------------------ PAGE ------------------ */
/* ------------------------------------------ */

#content_quiz
{
	width:798px;
	height:548px;
	margin:100px auto;
	position:relative;
	
	background-image:url(../img/content_quiz.png);
	background-repeat:no-repeat;
	background-position:top center;
}

#content_network
{
	position:absolute;
	right:12px;
	top:-38px;
}
#facebook_box
{
	
}

#theme_quiz
{
	width:127px;
	height:36px;
	position:absolute;
	top:-12px;
	left:-5px;
	padding:4px 0 0 16px;
	text-align:left;
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:-1px;
	
	background-image:url(../img/theme_quiz.png);
	background-repeat:no-repeat;
	background-position:top center;
}
#title_quiz
{
	width:483px;
	height:36px;
	position:absolute;
	top:45px;
	left:-5px;
	padding:4px 0 0 16px;
	text-align:left;
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:-1px;
	
	background-image:url(../img/title_quiz.png);
	background-repeat:no-repeat;
	background-position:top center;
}
#score_quiz
{
	width:129px;
	height:36px;
	position:absolute;
	top:45px;
	right:1px;
	padding:4px 16px 0 0;
	text-align:right;
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:-1px;
	display:none;
	
	background-image:url(../img/score_quiz.png);
	background-repeat:no-repeat;
	background-position:top center;
}
#loading_quiz
{
	width:32px;
	height:32px;
	position:absolute;
	top:45px;
	right:205px;
	z-index:10;
	display:none;
}

/* ------------------ NUMERO ------------------ */

#state_quiz
{
	position:absolute;
	top:102px;
	left:21px;
	display:none;
}
#numero_list li
{
	display:block;
    float:left;
    margin-right:10px;
    padding:0;
	width:18px;
	padding:4px;
	font-size:15px;
	font-weight:bold;
	
	-webkit-transition:background-color 0.5s ease-in-out;
	-moz-transition:background-color 0.5s ease;
	-o-transition:background-color 0.5s ease-in-out;
	transition:background-color 0.5s ease-in-out;
}
#numero_list .none
{
	background-color:#F1F3F2;
	color:#919191;
}
#numero_list .current
{
	background-color:#000000;
	color:#FFFFFF;
}
#numero_list .right
{
	background-color:#84BD32;
	color:#FFFFFF;
}
#numero_list .wrong
{
	background-color:#FE783B;
	color:#FFFFFF;
}

/* ------------------ TIMER ------------------ */

#timer_quiz
{
	height:20px;
	position:absolute;
	top:102px;
	right:26px;
	padding:3px;
	display:none;
	
	background-color:#50A3D6;
}
#hourglass
{
	height:20px;
	overflow:hidden;
}
#sand
{
	height:20px;
	position:relative;
	left:0px;
	
	background-image:url(../img/timer.jpg);
	background-repeat:repeat-x;
}

/* ------------------ CONTENT ------------------ */

#content_box
{
	margin:auto;
	position:relative;
	top:156px;
	left:-3px;
	overflow:hidden;
	
	background-color:#50A3D6;
}
#question_box
{
	margin:auto;
	position:relative;
	overflow:hidden;
	z-index:1;
	
	background-repeat:no-repeat;
	background-position:center;
}

#question_score
{
	width:102px;
	height:31px;
	margin:auto;
	position:absolute;
	top:312px;
	right:24px;
	z-index:10;
	opacity:0.5;
	display:none;
}
#question_next
{
	width:186px;
	height:31px;
	margin:auto;
	position:absolute;
	top:312px;
	right:24px;
	text-align:right;
	z-index:10;
	cursor:pointer;
	display:none;
}

/* ------------------ CREDITS ------------------ */

#credits_box
{
	margin:auto;
	position:relative;
	top:-208px;
	left:-3px;
	overflow:scroll;
	z-index:50;
	display:none;
	
	background-color:#50A3D6;
}
#credits_box .title
{
	margin:30px;
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
}
#credits_box .prod
{
	margin:0;
	font-size:16px;
	font-weight:bold;
}
#credits_box .logo
{
	margin:6px auto 26px;
}
#credits_box p
{
	margin:10px auto;
}

#question_credits
{
	width:51px;
	height:15px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:10;
	cursor:pointer;
	
	background-image:url(../img/credits_button_off.png);
	background-repeat:no-repeat;
}
#question_credits:hover
{
	background-image:url(../img/credits_button_on.png);
	background-repeat:no-repeat;
}

#credits_close
{
	width:19px;
	height:19px;
	position:absolute;
	top:0px;
	right:0px;
	z-index:10;
	cursor:pointer;
	
	background-image:url(../img/close_button_off.png);
	background-repeat:no-repeat;
}
#credits_close:hover
{
	width:20px;
	height:20px;
	position:absolute;
	top:0px;
	right:0px;
	z-index:10;
	cursor:pointer;
	
	background-image:url(../img/close_button_on.png);
	background-repeat:no-repeat;
}

/* ------------------------------------------ */
/* ------------------ QUIZ ------------------ */
/* ------------------------------------------ */

#numero_list,
#question_list,
#question_result,
#question_intro
{
	list-style:none;
	margin:0;
	padding:0;
	
	margin-left:0px;
}

#question_list,
#question_result,
#question_intro
{
	position:absolute;
	top:0px;
}

#question_box li
{
	margin:0;
	padding:0;
	float:left;
	display:block;
	
	background-repeat:no-repeat;
	background-position:center;
}

#question_box table
{
	border-collapse:collapse;
	border-spacing:0;
	border:0;
}

/* ------------------ COMMUN ------------------ */

.display_question
{
	display:inline-block;
	line-height:1.2;
	margin:20px auto;
	padding:0 20px;
	vertical-align:middle;
}
.display_question td
{
	padding:0;
}
.display_question .media
{
	padding:0 30px 0 0;
	vertical-align:top;
}
.display_question .media img
{
	max-width:304px;
	max-height:304px;
	border:10px solid #FFFFFF;
}
.display_question .media .player
{
	width:300px;
	height:300px;
	border:10px solid #FFFFFF;
}
.display_question .media video
{
	max-width:304px;
	max-height:304px;
	border:10px solid #FFFFFF;
}
.display_question .media iframe
{
	border:10px solid #FFFFFF;
}

/* ------------------ QUESTION ------------------ */

.display_question .question
{
	padding:0px;
	text-align:left;
	font-size:18px;
	font-weight:bold;
}

.display_question .statement
{
	vertical-align:top;
}
.display_question .statement table
{
	margin:10px 0 0 30px;
}
.display_question .statement .tick
{
	height:60px;
	padding:0 10px 0 0;
	cursor:pointer;
}
.display_question .statement .answer
{
	text-align:left;
	font-size:16px;
	cursor:pointer;
}
.display_question .statement .answer img
{
	max-width:80px;
	max-height:80px;
	margin:0 8px 3px 0;
	border:5px solid #FFFFFF;
}

/* ------------------ SCORE ------------------ */

.display_question .verdict
{
	padding:0px;
	text-align:left;
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
}
.display_question .score
{
	height:100%;
	padding:30px 0 30px 30px;
	text-align:left;
	font-size:16px;
	vertical-align:top;
}
.display_question .total
{
	padding:10px 0 0 30px;
	text-align:left;
	font-size:18px;
	font-weight:bold;
	vertical-align:top;
	text-transform:uppercase;
}
.display_question .price
{
	width:120px;
	border:1px solid #FFFFFF;
	text-align:center;
	padding:10px;
}

.display_question .final
{
	padding:0px;
	font-size:18px;
	font-weight:bold;
}
.display_question .scoring
{
	height:100%;
	padding:30px 0 30px 0;
	font-size:16px;
	vertical-align:top;
}
.display_question .button
{
	padding:0px;
}
.display_question .button img
{
	cursor:pointer;
}

/* ------------------ RESULT ------------------ */

.display_question .result_title
{
	padding:0px;
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
}
.display_question .result_score
{
	height:100%;
	padding:10px 0px 0px;
	font-size:16px;
	vertical-align:top;
}
.display_question .result_text
{
	height:100%;
	padding:20px 0px;
	font-size:16px;
	vertical-align:top;
}
.display_question .result_button
{
	padding:0px;
}
.display_question .result_button img
{
	cursor:pointer;
}

/* ------------------ INTRO ------------------ */

.display_question .intro_title
{
	padding:0px;
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
}
.display_question .intro_text
{
	height:100%;
	padding:20px 0px;
	font-size:16px;
}
.display_question .intro_button
{
	padding:0px 30px;
}
.display_question .logo
{
	margin-bottom:10px;
}
.display_question #easy_button,
.display_question #hard_button
{
	cursor:pointer;
}