/* Wireframing */
div{
margin:0;
padding:0;
outline:0px dotted red;
}

/* turn blue outlines off */
a img{
border:0;
}

img{
border:0;
}


/* Body */
body{
font:normal 62.5%   'Arial Rounded MT Bold',Lucida Grande,Verdana,sans-serif;
overflow: hidden;
background:#2374A5;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#a96hochWrapper{
height:96px;
background:url('images/top_bg.png');
}

#a96hochWrapper_bottom{
height:96px;
background:url('images/bot_bg.png');
}

#a96hoch{
height:96px;
width:1004px;
margin-left:10px;
text-align:left;
}

/* Type */
h1
{
  margin-top: 0;
}

p{
font-size:3em;
}

/* Elements */
#application
{
  margin-left: auto; margin-right: auto; 
  width: 1004px; height: 556px;
  background:url('images/bgMain.png');
  padding: 10px;
  overflow: hidden;
}

#question
{
  clear: both;
  margin-left: 15px;
  color: white;
  font-size:2em;
}

#quiz
{
  position: relative;
}

#highscoreWrapper{
width:560px;
margin-left: auto; margin-right: auto; 
margin-top:70px;
padding:25px;
text-align:left;
background:rgba(56,158,208,0.6);
}

#score_table
{
  font-size: 16pt;
  font-weight: bold;
  color: white;
}

.score_table_number
{
  vertical-align: top;
  text-align: right;
  width: 4ex;
}

.score_table_score
{
  vertical-align: top;
  text-align: right;
  width: 20ex;
}

.score_table_name
{
  vertical-align: top;
}

#start_quizWrapper{
margin-left:0px; margin-top:0px;
width:200px; height:60px;
float:left;
}

#buttonWrapper{
margin-left: auto; margin-right: auto; 
width:746px;
height:50px;
padding:5px;
}

/*--ImageRollover Elements--*/

.start_quiz{
display:block; width:200px; height:60px; background:url('images/start_quiz.png'); text-indent:-9999px;
}

a.start_quiz:link, a.start_quiz:visited, a.start_quiz:active{
background:url('images/start_quiz.png')no-repeat;
}

a.start_quiz:hover{
background-position:0 -60px;
}


a.weiter:link, a.weiter:visited, a.weiter:active{
font-size: 1.9em;
color:white;
text-decoration:none;
}

a.weiter:hover{
font-size: 1.9em;
color:#F15A24;
text-decoration:underline;
}


.start{
display:block; width:200px; height:95px; background:url('images/restart.png'); text-indent:-9999px;
}

a.start:link, a.start:visited, a.start:active{
background:url('images/restart.png')no-repeat;
}

a.start:hover{
background-position:0 -95px;
}

.highscore{
display:block; width:290px; height:40px; background:url('images/highscore.png'); text-indent:-9999px;
float:left; margin-left:5px;
}

a.highscore:link, a.highscore:visited, a.highscore:active{
background:url('images/highscore.png')no-repeat;
}

a.highscore:hover{
background-position:0 -40px;
}

.start_over{
display:block; width:200px; height:60px; background:url('images/restart.png'); text-indent:-9999px;
}

a.start_over:link, a.start_over:visited, a.start_over:active{
background:url('images/restart.png')no-repeat;
}

a.start_over:hover{
background-position:0 -60px;
}

.Gesamt_liste{
display:block; width:140px; height:55px; background:url('images/allscore.png'); text-indent:-9999px;
}

a.Gesamt_liste:link, a.Gesamt_liste:visited, a.Gesamt_liste:active{
background:url('images/allscore.png')no-repeat;
}

a.Gesamt_liste:hover{
background-position:0 -55px;
}

.Tages_liste{
display:block; width:140px; height:80px; background:url('images/dayscore.png'); text-indent:-9999px;
}

a.Tages_liste:link, a.Tages_liste:visited, a.Tages_liste:active{
background:url('images/dayscore.png')no-repeat;
}

a.Tages_liste:hover{
background-position:0 -80px;
}


/* ------------------------------------------------------------------------- */
/* remaining score                                                           */
/* ------------------------------------------------------------------------- */

#remaining_Wrapper{
float: left;
padding: 15px;
}

#remaining
{
  position: relative; width: 570px; height: 25px; 
  border: 1px solid white;
  background-color: #389ED0;
  padding: 1px;
}

#remaining_bar
{
  float: right; width: 570px; height: 25px; z-index: 1;
  background-color: white;
  opacity: 0.5;
}

#remaining_number
{
  position: absolute; top: 0px; width: 570px; z-index: 2;
  text-align: center;
  font-size: 2em;
  color: white;
}

/* ------------------------------------------------------------------------- */
/* TEXT                                                                      */
/* ------------------------------------------------------------------------- */

#text_quiz
{width:736px;
margin-left: auto; margin-right: auto; 
margin-top:20px;
padding:25px;
text-align:left;
background:rgba(56,158,208,0.6);
}

.text_question
{
  margin-top: 0;
  font-size:3em; font-weight: bold;
  color:white;
}

#text_answers
{

}

.text_answer
{
	font-size:1.8em;
	color:white;
}

.text_answer_right
{
	font-size:1.8em;
	color:#76CE61;
}

.text_answer_wrong
{
	font-size:1.8em;
	color:red;
}

#text_answer_buttons{
margin-left: auto; margin-right: auto; 
width:312px;
height:94px;
padding:15px;
margin-top:50px;
}

#button_0{
display:block; width:94px; height:94px; background:url('images/button_0.png'); text-indent:-9999px;
float:left; margin-left:0px;
}

a#button_0:link, a#button_0:visited, a#button_0:active{
background:url('images/button_0.png')no-repeat;
}

a#button_0:hover{
background-position:0 -94px;
}

#button_1{
display:block; width:94px; height:94px; background:url('images/button_1.png'); text-indent:-9999px;
float:left; margin-left:15px;
}

a#button_1:link, a#button_1:visited, a#button_1:active{
background:url('images/button_1.png')no-repeat;
}

a#button_1:hover{
background-position:0 -94px;
}

#button_2{
display:block; width:94px; height:94px; background:url('images/button_2.png'); text-indent:-9999px;
float:left; margin-left:15px; margin-right:0px;
}

a#button_2:link, a#button_2:visited, a#button_2:active{
background:url('images/button_2.png')no-repeat;
}

a#button_2:hover{
background-position:0 -94px;
}

/* ------------------------------------------------------------------------- */
/* IMAGE                                                                     */
/* ------------------------------------------------------------------------- */

#image_quiz
{width:736px;
margin-left: auto; margin-right: auto; 
margin-top:20px;
padding:25px;
text-align:left;
background:rgba(56,158,208,0.6);
}

.image_question
{
  margin-top: 0;
  font-size:3em; font-weight: bold;
  color:white;
}

#image_answer_buttons
{
  margin-top: 100px;
}

.image_answer
{
  display: inline-block;
  cursor: pointer;
}

/* ------------------------------------------------------------------------- */
/* PUZZLE                                                                    */
/* ------------------------------------------------------------------------- */

#puzzle_area
{
  position: absolute; top: 0px; left: 10px; height: 490px; width: 984px;
}

#target_area
{
  position: absolute; top: 10px; left: 92px; width: 800px; height: 470px;
  border: 1px dotted blue;
}

/* ------------------------------------------------------------------------- */
/* RELATION                                                                  */
/* ------------------------------------------------------------------------- */

.relation_image
{
  border: 1px dotted white;
  margin-bottom: 1em;
}

.relation_text
{
  border: 1px solid white;
  text-align: center; vertical-align: middle;
  font-weight: bold;
  font-size:1.8em;
  color: white;
}

/* ------------------------------------------------------------------------- */
/* MESSAGE BOXES                                                             */
/* ------------------------------------------------------------------------- */

#boxes
{
  position: absolute; width: 1004px; height: 556px; 
  background-color: rgba(0,0,0,0.1);
  display: none;
  z-index: 10; 
}

#box_timeout
{
  position: absolute; width: 960px; height: 180px;
  background: url('images/timeout.png')no-repeat, rgba(247,231,46,0.7);
  display: none;
  cursor: pointer;
 }

#box_wrong
{
  position: absolute; width: 960px; height: 180px;
  background: url('images/wrong.png')no-repeat, rgba(247,231,46,0.7);
  display: none;
  cursor: pointer;
  }

#box_right{
  position: absolute; width: 960px; height: 180px;
  background: url('images/right.png')no-repeat, rgba(247,231,46,0.7);
  display: none;
  cursor: pointer;
  }

#box_finished{
  position: absolute; width: 560px; height: 290px;
  background: url('images/finish.png')no-repeat, rgba(247,231,46,0.7);
  display: none;
  cursor: pointer;
}

.box_content{
margin-right:15px;
width:320px;
padding:18px;
margin-left: auto; margin-right: auto; 
}

.box_content_finished{
margin-right:15px;
width:450px;
padding:18px;
margin-left: auto; margin-right: auto;
}

.box_text{
font-size:2.3em;
color:#2374A5;
text-align:center;
line-height: 170%;
}

.eintragen_text{
font-size:1.5em;
color:black;
text-align:center;
line-height: 170%;
}


a.afsturen:link, a.afsturen:visited, a.afsturen:active{
font-size:1.5em;
color:#E2001A;
text-align:center;
line-height: 170%;
text-decoration: underline;
}

/* ------------------------------------------------------------------------- */