@import url(reset.css);

html, body
	{
	height: 100%;
	background: #090605 url(../images/back_body.jpg) no-repeat top center;
	color: #fff;
	font-family: Arial, helvetica, sans-serif;
	}
	
textarea
	{
	font-family: Arial, helvetica, sans-serif;
	}
	
.hidden
	{
	position:absolute;
 	left:-5000px;
 	top:-5000px;
 	overflow:hidden;
	}

img
	{
	border: none;
	}


/*********************/
/*     MAIN DIVs     */
/*********************/

#dummy
	{
	display: none;
	}

#wrapper, #dummy
	{
/*
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -346px;
*/
	margin: 0 auto 0 auto;
	width: 692px;

/* 	position: relative; */
	}
	
#wrapper_bottom
	{
	position: absolute;
	top: 0;
	left: 50%;
	width: 692px;
	margin: 0 0 0 -346px;
	position: relative;
	}


h1
	{
	position: absolute;
	top: -5px;
	left: 50%;
	display: block;
	width: 824px;
	height: 164px;
	margin: 0 0 0 -412px;
	background: url(../images/h1.png) no-repeat top left;
	}
	
#lion_container
	{
	display: block;
	position: absolute;
	top: 400px;
	left: 275px;
	width: 81px;
	height: 131px;
	}

#lion
	{
	display: block;
	width: 81px;
	height: 131px;
	background: url(../images/lion.gif) no-repeat top left;
	}

.copyright
	{
	display: block;
	float: left;
	color: #fff;
	position: absolute;
	left: -20px;
	top: 0;
	}















/*********************/
/*       VIDEO       */
/*********************/


#video
	{
	float: left;
	width: 461px;
	height: 260px;
	padding: 132px 0 0 0;
	margin: 0 9px 0 0;
	}
	
#thumbs
	{
/* 	background: red; */
/*
	position: absolute;
	top: 0;
	right: 0;
*/
	
	float: left;
	padding: 132px 0 0 0;
	margin: 0;

/*
	position: relative;
	top: 0;
	left: 0;
*/
	}

#thumbs li
	{
/*
	display: block;
	float: right;
*/
	}

#thumbs li a:link, #thumbs li a:visited, #thumbs li a:hover, #thumbs li a:active, #thumbs span
	{
	display: block;
	width: 222px;
	height: 126px;
	margin: 0 0 0 0;
	}

#thumb1
	{
/*
	display: block;
	width: 222px;
	height: 126px;
	position: relative;
	top: -260px;
	right: -460px;
*/
	margin: 0 0 9px 0;
	}


#thumb1 a:link, #thumb1 a:visited, #thumb1 a:hover, #thumb1 a:active,
#thumb2 a:link, #thumb2 a:visited, #thumb2 a:hover, #thumb2 a:active
	{
	margin: 0;
	padding: 0;
	outline: none;
	cursor: pointer;
	}

/*
#thumb2
	{
	position: absolute;
	top: 267px;
	right: 0;
	}
*/









/*********************/
/*      BURGER       */
/*********************/

#burger_top
	{
	position: absolute;
	top: 258px;
	left: 616px;
	width: 180px;
	height: 132px;
	background: url(../images/burger_top.png) no-repeat top left;
	}

#burger
	{
	position: absolute;
	top: 390px;
	left: 219px;
	width: 577px;
	height: 314px;
	background: url(../images/burger.png) no-repeat top left;
	}

#date
	{
	position: absolute;
	top: 390px;
	left: 445px;
	width: 201px;
	height: 113px;
	background: url(../images/date.png) no-repeat top left;
	}









/*********************/
/*        MAIN       */
/*********************/

#main
	{
	position: absolute;
	top: 393px;
	left: 0;
	width: 231px;
	}

#main h2
	{
	display: block;
	width: 231px;
	height: 52px;
	background: url(../images/mystery_solved.gif) no-repeat top left;
	margin: 0 0 5px 0;
	}

#main p
	{
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
	line-height: 18px;
	}

#guess
	{
	margin: 15px 0 0 0;
	position: relative;
	width: 240px;
	}

#guess_input
	{
	position: absolute;
	top: 3px;
	left: 0;
	background: url(../images/guess_input.gif) no-repeat top left;
	width: 148px;
	height: 73px;
	padding: 0 0 0 5px;
	vertical-align: middle;
	border: none;
	float: left;
	color: #B7B3B2;
	outline: none; 
	
	line-height: 73px;
	}

@-moz-document url-prefix()
{
#guess_input { padding: 26px 0 0 10px; }
}

#guess_submit
	{
	position: absolute;
	top: 3px;
	left: 148px;
	float: left;
	}


#main #note
	{
	font-family: "arial narrow", arial, sans-serif;
	position: absolute;
	top: 65px;
	left: 0;
	font-style: italic;
	width: 300px;
	}

#main #note
	{
	line-height: 14px;
	}















/*********************/
/*      FEEDBACK     */
/*********************/


#feedback
	{
	display: none;
	width: 591px;
	height: 384px;
	background: url(../images/back_feedback.png) no-repeat top left;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -192px 0 0 -295px;
	}


#overlay
	{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/back_overlay.png);
	}



.feedback_heading
	{
	display: block;
	width: 356px;
	height: 143px;
	position: absolute;
	top: 0;
	left: 0;
	}

.correct, .thanks
	{
	width: 399px;
	height: 143px;
	}

#solved
	{
	display: block;
	width: 105px;
	height: 52px;
	background: url(../images/feedback/solved.png) no-repeat top left;
	}

.message
	{
	display: block;
	position: absolute;
	top: 170px;
	left: 110px;
	width: 341px;
	margin: -35px 0 0 0;
	padding: 0;
	color: #aaa8a6;
	}

.end_message
	{
	top: 157px;
	}

.correct_message
	{
	top: 145px;
	}
	
.guess_label
	{
	top: 155px;
/*	letter-spacing: -1px; */
	}

#feedback .guess_note
	{
	top: 220px;
	font-size: 11px;
/*	letter-spacing: -1px; */
	}

#guess_again
	{
	display: none;
	}

#inputs_guess
	{
	position: absolute;
	top: 150px;
	left: 110px;
	width: 343px;
	}


.button_container
	{
	display: block;
	position: absolute;
	bottom: 105px;
	left: 50%;
	width: 322px;
	text-align: center;
	height: 50px;
	line-height: 50px;
	margin: 0 0 0 -167px;
	padding: 0;
	}

.send
	{
	width: 161px;
	left: auto;
	bottom: 100px;
	right: 120px;
	}
	
.guess_again
	{
	width: 161px;
	left: auto;
	bottom: 105px;
	right: 120px;
	}
	

a.button:link, a.button:visited, a.button:hover, a.button:active
	{
	display: block;
	float: left;
	background-image: url(../images/feedback/back_button.png);
	background-repeat: no-repeat;
	width: 161px;
	height: 62px;
	text-align: center;
	line-height: 62px;
	background-position-x: 0;
	background-position-y: 0;
	text-decoration: none;
	color: #fff;
	}


a.button:hover, a.button:active
	{
	background-position-y: -62px;
	}



#inputs, #friend_inputs
	{
	position: absolute;
	top: 170px;
	left: 110px;
	width: 343px;
	}

#friend_inputs
	{
	top: 103px;
	}

#inputs label, #friend_inputs label
	{
	display: block;
	float: left;
	width: 100px;
	color: #828080;
	clear: left;
	line-height: 25px;
	}

#inputs p, #friend_inputs p
	{
	display: block;
	float: left;
	margin: 0 0 10px 0;
	}

#inputs p.checkbox
	{
	line-height: 25px;
	}

#name, #email, #guess_input_feedback, #from, #to, #message
	{
	height: 25px;
	border: solid 1px #fff644;
	background: transparent;
	width: 230px;
	color: #fff644;
	padding: 0px 5px 0px 5px;
	line-height: 25px;
/* 	outline: none; */
	}


#message
	{
	height: 42px;
	padding: 5px;
	line-height: 14px;
	}

#guess_input_feedback
	{
	width: 333px;
	}

a.close:link, a.close:visited, a.close:hover, a.close:active
	{
	position: absolute;
	top: 63px;
	left: 455px;
	display: block;
	width: 23px;
	height: 22px;
	background: url(../images/feedback/close.gif) no-repeat top left;
	background-position-y: 0px;
	}


a.close:hover, a.close:active
	{
	background-position-y: -22px;
	}


#loading
	{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 -100px;
	width: 200px;
	height: 50px;
	}



#checking
	{
	display: block;
	text-align: center;
	line-height: 50px;
	padding: 10px 0 10px 0;
	color: #aaa8a6;
	}

#checking img
	{
	vertical-align: middle;
	margin: -5px 5px 0 0;
	}











/*********************/
/*       FOOTER      */
/*********************/


#footer
	{
	display: block;
	position: absolute;
	bottom: -140px;
	left: 20px;
	width: 692px;
	margin: 0 0 0 0;
	height: 35px;
	}




#footer li
	{
	display: block;
	float: right;
	}

#footer li a:link, #footer li a:visited, #footer li a:hover, #footer li a:active
	{
	display: block;
	float: left;
	height: 14px;
	line-height: 14px;
	color: #D5D5D5;
	text-decoration: none;
	padding: 0 10px 0 22px;
	margin: 0 0 0 10px;
	}

#footer li a:hover, #footer li a:active
	{
	color: #fff;
	}

.facebook
	{
	background: url(../images/facebook.gif) no-repeat left;
	}
	
.friend
	{
	background: url(../images/envelope.gif) no-repeat left;
	}

#copyright
	{
	display: block;
	position: absolute;
	top: 0;
	left: -20px;
	}

#footer li a.copy_link:link, #footer li a.copy_link:visited, #footer li a.copy_link:hover, #footer li a.copy_link:active
	{
	display: inline;
	float: none;
	padding: 0;
	margin: 0;
	height: auto;
	
	}














/*********************/
/*    FONT-SIZE      */
/*********************/

#main p
	{
	font-size: 13px;
	}
	
.message
	{
	font-size: 18px;
	}
	
#guess_input, #inputs label, #name, #email, #inputs_guess input, #to, #from
	{
	font-size: 17px;
	}
	
#main #note
	{
	font-size: 11px;
	}
	
.correct_message
	{
	font-size: 14px;
	}


.end_message
	{
	font-size: 15px;
	}

#footer li a:link, #footer li a:visited, #footer li a:hover, #footer li a:active, #copyright
	{
	font-size: 11px;
	}




/*
#wrapper
	{
	display: none;
	}
	
#dummy
	{
	display: block;
	}
*/