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

*{
	margin:0;
	padding:0;	
}

a {
	text-decoration:none;
}

img {
	border:0;
}

body{
	background: black;
}

.game-content{
	background:url(../img/contentbg.jpg) #000 no-repeat;
	background-position: 50% 20px;
}

body {
	overflow:hidden;
	background: black;
}

.tooSmall {
	z-index: 500;
	position:absolute;
	color:white;
	text-align: center;
	top:0;
	display:none;
}

/**************
HEADER
***************/
#topbar {
	z-index:500;
	position: absolute;
	top:0;
	width:100%;
}

.topbar-content {
	background:url(../img/top-bg.png) repeat-x;
	height:50px;
	-moz-box-shadow: 0px 1px 5px #120801;
	-webkit-box-shadow: 0px 1px 5px #120801;
	box-shadow: 0px 1px 5px #120801;	
	z-index:75;
	position:absolute;
	width:100%;
}

.topbar-title {
	background: url(../img/title.png) no-repeat;
	width:315px;
	height:50px;	
	margin:auto;
	position: fixed;
	z-index: 100;
	left: 50%;
	margin-left: -157.5px;
}


#scoreContainer  {
	padding-top:11px;
}

#scoreContainer div {
	color:#FFF;
	position:absolute;
	left:25px;
	top:12px;
}

#musicContainer {
	width:100%;
}

#musicContainer div {
	color:#FFF;
	position:absolute;
	right:25px;
	top:12px;
}

.largeBtn, .whiteBtn {
	width: 108px;
	height: 27px;
}

.smallBtn {
	width: 63px;
	height: 27px;
}

.largeBtn a, .smallBtn a {
	font-size:12px;
	color:white;
}

.largeBtn a {
	width: 108px;
	height: 27px;
	background:url(../img/largeBtn.png) no-repeat;
	display:block;
	text-align:center;
	padding-top:8px;
	
}

.whiteBtn a {
	width: 108px;
	height: 27px;
	background:url(../img/whiteBtn.png) no-repeat;
	display:block;
	text-align:center;
	padding-top:9px;
	font-size:12px;
	color:#000;
}


.smallBtn a {
	width: 63px;
	height: 27px;
	background:url(../img/smallBtn.png) no-repeat;
	display:block;
	text-align:center;
	padding-top:8px;
}

/**************
Home Screen
***************/
.home-title{
	text-align: center;
}

.home-block {
	position:absolute;
	width:525px;
	display: none;
}

.home-desc {
	margin: 0px 0 45px 0;
	color:#FFF;
	font-size:16px;
}

.home-desc cufon{
	padding-bottom: 7px;
}

.homeBtn {
	background: url( ../img/replayBtn.png) no-repeat;
	width:206px;
	height:51px;
	font-size: 21px;
	margin: auto;
	text-align: center;
}

.homeBtn div {
	padding-top: 15px;
	color:black;
}

/**************
Footer
***************/
#footer {
	position:absolute;
	bottom:0px;
	width:100%;
	height:89px;
	z-index:500;
}

.footer-logo {
	background:url(../img/footer-logo.png) no-repeat;
	height:39px;
	width:130px;
	position:absolute;
	right:15px;
	bottom:51px;
}

.footer-bar {
	margin-top:39px;
	background:url(../img/footer-repeat.jpg) repeat-x;
	height:50px;
	position:absolute;
	bottom:0px;
	width:100%;
	display:block;
}

.disclaimer {
	color:#666;
	font-size:9px;
	width:900px;
	margin:auto;
	line-height:10px;
	padding-top:5px;
	display: none;
}


/**************
Question
***************/
.question-bar {
	background: url(../img/question-bg.png) repeat-x;
	height:140px;
	position: absolute;
	top:-100px;
	width:100%;
	z-index: 100;
}

.question-container-horizontal {
	position: absolute;
	width:700px;
	left:50%;
	margin-left: -350px;
}

.question-container-vertical {
	position: absolute;
	width:620px;
	left:50%;
	margin-left: -310px;
}

.question-headline {
	color:#ccc;
	text-align: center;
	font-size: 18px;
	margin-bottom: 5px;
	display: none;
}

.question-text {
	color:white;
	text-align: center;
	font-size:22px;
	display: none;
}

.next-question {
	position: absolute;
	right:25px;
	top:45px;
}

.next-question a{
	display: block;
	width:25px;
	height:40px;
	background: url( ../img/nextBtn.png) no-repeat;
}

.prev-question {
	position: absolute;
	top:45px;
	left:25px;
}

.prev-question a{
	display: block;
	width:25px;
	height:40px;
	background: url( ../img/prevBtn.png) no-repeat;
}

/**************
Time
***************/
.time-container{
	position: absolute;
	z-index: 50;
}

.time-block {
	width: 140px;
	height:61px;
	background: url( ../img/time-left.png ) no-repeat;
	position: absolute;
	display: none;
}

.time-header {
	text-align: center;
	font-size: 18px;
	color: black;
	padding-top:10px;
}

.time-text {
	text-align: center;
	font-size: 24px;
	color:black;
}

.time-desc {
	font-size:12px;
	color:#464646;
	margin-top: 10px;
	width:300px;
	margin-left: -20px;
}

/**************
Answers
***************/
.answer-block {
	position: absolute;
	display: none;
	
}

.key-block {
	width: 685px;
	height: 355px;
	background: url( ../img/answer-key-block.png ) no-repeat;
}

.answer-container {
	margin: 20px 22px 20px 20px;
}

.answer-header {
	margin-bottom: 5px;
	background: url( ../img/header-bar.jpg ) no-repeat;
	background-position: center;
	height:28px;
	color:white;
}

.answer-header div{
	padding-top: 9px;
	padding-left:10px;
	font-size: 14px;
}

.answer-header-desc {
	font-size: 14px;
	line-height: 16px;
	margin-bottom: 10px;
}

.answer-list {
	position: absolute;
}

.answer-list li {
	list-style: none;
	position: absolute;
}

.top-text {
	color:white;
	text-align: center;
	font-size:21px;
}

.hint-text{
	color:black;
	text-align: center;
	font-size:14px;
	margin: 0 10px;
}

.hint-headline{
	color:black;
	text-align: center;
	font-size: 12px;
	padding-bottom:10px;
}

.answer-headline {
	font-size: 16px;
}

.answer-desc {
	padding-top:5px;
	font-size:12px;
	color:#333;	
}

/*************THUMBS******************/
.horizontal1 {
	width: 659px;
	height: 188px;
	background: url( ../img/horizontal-2-block.png ) no-repeat;
}
.horizontal2 {
	width: 659px;
	height: 265px;
	background: url( ../img/horizontal-2-block.png ) no-repeat;
}
.horizontal4 {
	width: 659px;
	height: 300px;
	background: url( ../img/horizontal-4-block.png ) no-repeat;
}
.horizontal6 {
	width: 659px;
	height: 339px;
	background: url( ../img/horizontal-6-block.png ) no-repeat;
} 
.horizontal8 {
	width: 659px;
	height: 389px;
	background: url( ../img/horizontal-8-block.png ) no-repeat;
}

.thumb-block .wrong-field{
	background: url(../img/thumb-wrong.png) no-repeat;
	width:294px;
	height:66px;
	position: absolute;
	z-index: 4;
	display:none;
}

.thumb-block .answer-field{
	background: url(../img/answer-thumb-bg.gif) no-repeat;
	width:294px;
	height:66px;
	position: absolute;
	z-index: 3;
}

.thumb-block .hint-field{
	background: url(../img/answer-thumb-hint.gif) no-repeat;
	width:294px;
	height:66px;
	position: absolute;
	z-index: 5;
}

.thumb-block .top-field{
	background: url(../img/answer-thumb-over.gif) no-repeat;
	width:294px;
	height:66px;
	position: absolute;
	z-index: 6;
}

.thumb-block .answer-image {
	float: left;
	width:82px;
	margin:0 5px 0 10px;
}

.thumb-block .answer-desc {
	width:300px;
}

.thumb-block .answercenter{
	text-align: center;
}

.thumb-block .answer-headline, .thumb-block .answer-desc {
	color:black;
}

/*************KEY******************/
.key4 {
	width: 715px;
	height: 366px;
	background: url( ../img/key-4.png ) no-repeat; 
}

.key-block .wrong-field{
	background: url(../img/wrong-key.png) no-repeat;
	width:150px;
	height:225px;
	position: absolute;
	z-index: 4;
	display:none;
}

.key-block .answer-field{
	background: url(../img/answer-key-bg.gif) no-repeat;
	width:150px;
	height:225px;
	position: absolute;
	z-index: 3;
}

.key-block .hint-field{
	background: url(../img/answer-key-hint.gif) no-repeat;
	width:150px;
	height:225px;
	position: absolute;
	z-index: 5;
}

.key-block .top-field{
	background: url(../img/answer-key-over.gif) no-repeat;
	width:150px;
	height:225px;
	position: absolute;
	z-index: 6;
}

.key-block .answer-headline, .key-block .answer-desc {
	color:#333;
}

.key-block .answer-image {

}

.key-block .answer-text{
	text-align: center;
	bottom:0px;
	width:150px;
}


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

.video-block {
	width:652px;
	height:400px;
	background: url(../img/video-back.png) no-repeat;
	position: absolute;
	display: none;
}

.video-headline {
	width:600px;
	margin: 15px auto 5px auto;
	text-align: center;
	color: #ccc;
	font-size: 14px;
}

.video-headline cufon {
	padding-bottom:5px;
}

.video-close{
	text-align: center;
	font-size: 14px;
}

.video-close a {
	color:#fff;
	text-decoration: none;
}

.video-container {
	height:315px;
}

.videoadjust {
	width:420px;
	height:300px;
	margin: auto;
}

/*************Misses******************/
.miss-container {
	position: absolute;
	z-index: 100;
}

.miss-content {
	display: none;
}

.miss-item {
	position:absolute;
}

/*************Answer Slider******************/
.swipe-container{
	position: absolute;
	z-index: 50;
}

.answer-swipe{
	width:346px;
	height:65px;
	position: absolute;
	display:none;
}

.answer-swipe-container{
	background: url(../img/slideBg.png) no-repeat;
	width:346px;
	height:65px;
	margin: auto;
}

.answer-swipe-handle{
	background: url(../img/slideHandle.png) no-repeat;
	width:137px;
	height:65px;
	position: absolute;
}

.slide-details {
	font-size:12px;
	text-align:center;
	margin:auto;
	color:#464646;
	clear: both;
	margin-top: -4px;
}

/**************
END-BLOCK
***************/
.end-container {
	width:560px;
	margin-left: 20px;
	margin-top: 55px;
}

.end-block {
	position:absolute;
	top:0;
	left:0;
	width:600px;
	height:281px;
	background: url( ../img/endBlock.png) no-repeat;
	display:none;
}

.end-title {
	color: white;
	font-size:36px;
	text-align: center;
}

.end-copy{
	margin: 20px 0;
	text-align: center;
	font-size:14px;
}

.end-copy cufon {
	padding-bottom: 7px;
}

.replayBtn {
	background: url( ../img/replayBtn.png) no-repeat;
	width:206px;
	height:51px;
	font-size: 21px;
	margin: auto;
	text-align: center;
}

.replayBtn cufon {
	padding-top: 15px;
}