/* @import url(http://fonts.googleapis.com/css?family=Nunito); */


@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito-Regular'), url('/fonts/nunito.woff') format('woff');
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: url('gradient.php?width=1&height=1650&orientation=vertical&color1=000044&color2=000011') repeat-x #000;
    color: #FFFFFF;
    font-family: "Nunito", "Trebuchet MS", sans-serif;
    /*font-family: "Trebuchet MS", sans-serif;*/
    font-size: 20px;
    padding: 0;
    margin: 0;
}

body.wifi[data-quality="0"]
{
	  background: #AAAAAA;
}
body.wifi[data-quality="1"]
{
	  background: #FD0D1B;
}
body.wifi[data-quality="2"]
{
	  background: #FDD715;
}
body.wifi[data-quality="3"]
{
	  background: #00B22D;
}

div.responseTime
{
	text-align: center;
	font-size: 80px;
	position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 110px;
}


#log {
    font-size: 0.7em;
    color: #AAAAAA;
    word-wrap: break-word;
}
#log div {
    margin-bottom: 1em;
}

#cache {
    opacity: 0;
    position: absolute;
    left: -5000px;
    top: -5000px;
}

#gameSum {
//   font-size: 40px;
   font-weight: bold;
   margin-top: 50px;
}

#game_container {

}

/*
.game_answer {
    cursor: pointer;
}
*/

.answerSelected {
   background: #2e81b4;
   color: white;
}

.answer_correct .box {
    /*
    background: url('gradient.php?width=1&height=100&orientation=vertical&color1=00A000&color2=006000') repeat-x !important;
    */
    background: #00A000 !important;
    border: 4px solid white !important;

}


.answer_selected div.box, .requested, .clicked_button {
    box-shadow: 0px 0px 20px white;
    border: 4px solid white !important;
    -webkit-box-shadow: 0px 0px 20px white;
    -moz-box-shadow: 0px 0px 20px white;
    background-color: #2e81b4 !important;
}

.highlighted {
    box-shadow: 0px 0px 20px white;
    -webkit-box-shadow: 0px 0px 20px white;
    -moz-box-shadow: 0px 0px 20px white;
    border: 4px solid green !important;
    background: green;
}

#joker_request {
    color: white;
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
    text-shadow: 0px 0px 3px white;
    -webkit-text-shadow: 0px 0px 3px white;
    -moz-text-shadow: 0px 0px 3px white;
    border: 4px solid #white;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    text-transform: uppercase;
}

.choose_player_name, #wait_for_players_container  {
    position: absolute;
    top: 35%;
    left: 50px;
    right: 50px;
    text-align: center;
}

.choose_game {
    margin: 1em;
    text-align: center;
}

.player_answer_logged_in {
    padding: 3px;
    padding-left: 126px;
    font-size: 14px;
}

label {
    display: block;
}

input[type="text"], input[type="password"], input[type="number"], select {
    font-size: 25px;
    margin: 20px;
    padding: 10px;
}

.choose_game h1 {
    display: none;
}

.game_answer .box {
    padding: 15px !important;
}

.game_answer .answerliststyle {
    float: left;
    margin-left: 0;
    text-align: center;
    width: 40px;
    font-weight: bold;
}

.game_answer .answertext {
    margin-left: 126px;
}

.player_joker_button {
    padding: 15px !important;
    display: block;
    margin: 0 auto;
    width: 75px;
    height: 75px;
    text-align: center;
    background: url('../icon/joker_background.png') center no-repeat;
}

.choose_game a:link, .choose_game a:visited, .choose_player_name a:link, .choose_player_name a:visited, .game_answer div.box, .home_link a,
.submit a, .active_button, .inactive_button, .select_button,  .clicked_button, .player_joker_button, .autogrey_button, .requested
{
    color: white;
    padding: 5px 15px;
    border: 4px solid #2e81b4;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    text-decoration: none;
}

.requested
{
	transition: all ease 0.5s;
}

.armed
{
/*    box-shadow: 0px 0px 20px red;
    border: 4px solid red !important;
    -moz-box-shadow: 0px 0px 20px red;*/
    background: red !important;
    transition: none;
}


.inactive_button {
    opacity: 0.25;
}

.nobg {
    background: none;
}

.button {
    text-align: center;
    margin: 1em 0;
}

#open_games {
    margin: 1em;
    text-align: center;
}
#open_games:before {
    display: block;
    text-align: center;
    content: url('../images/quizine-logo-white.png');
}

#wait_for_players_container {
    top: 10%;
}

#wait_for_players_container:before {
    content: url('../icon/waiting_for_players.png');
}

#wait_for_players_container h1 {
    font-size: 1.6em;
    margin-bottom: 1em;
}

#wait_for_players_container h2 {
    font-size: 1.2em;
}

#wait_for_players_container ul {
    list-style: none;
}

.active_button, input[type="button"] {
    /*
    background: url('gradient.php?width=1&height=100&orientation=vertical&color1=FFAA00&color2=CC6600');
    */
}

.inactive_button, input[disabled] {
    /*
    background: url('gradient.php?width=1&height=100&orientation=vertical&color1=CCCCCC&color2=666666');
    */
}

.choose_game:before {
    content: url('../images/quizine-logo-white.png');
    display: block;
    margin-bottom: 1em;
}

/*
 Spiel
*/
#game_info {
    padding: 20px 20px 0 20px;
    font-size: 16px;
}

#game_info ul {
    list-style: none;
}

#game_info li {
    display: block;
    float: left;
    padding: 0 2em 0 0;
}

#game_question_title {
    margin: 0 -20px;
    background: url('../icon/question_title.png') no-repeat 40px center;
    /*background-size: 116px 150px;*/
    background-color: #000042;
    border-top: 1px solid #002c6d;
    border-bottom: 1px solid #002c6d;
}

#game_question_title span {
    font-size: 40px;
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    padding-left: 166px;
}

/*
#game_question_title:before {
    content: url('../icon/question.png');
    display: table-cell;
    vertical-align: middle;
    float: left;
    margin: 0.4em;
    margin-left: 0;
}
*/

#game_question_comment, #game_question_additional_question {
    margin-top: 20px;
    font-size: 14px;
    opacity: 0.7;
    clear: both;
} 

#game_answers {
    margin-top: 40px;
    clear: both;
}

#game_answers ol {
    margin: 0 20px;
    list-style-type: none;
}

.game_answer {
    margin-bottom: 20px;
    font-size: 25px;
    position: relative;
}

.game_answer .answerOrder {
    position: absolute;
    right: 20px;
    top: 20px;
}

#game_imagequestion {
    margin: 1em 0;
}
/*
#game_imagequestion #circle_guess, #game_imagequestion .image_answer {
    display: none;
    position: absolute;
}


#game_imagequestion #imagequestion {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
*/


/*
#score:before {
    content: url('../images/quizine.png');
    display: block;
    text-align: center;
}
*/

.score-logo:before {
    content: url('../images/quizine.png');
    display: block;
    text-align: center;
}

.score-logo.questionnaire-15:before {
    content: url('../uploads/firmenlogos/avnet.jpg');
    display: block;
    text-align: center;
}

.home_link {
    position: absolute;
    bottom: 2em;
    left: 0;
    right: 0;
    text-align: center;
}

.home_link a {
    content: url('../icon/power_off.png');
    height: 45px;
    width: 45px;
    padding: 15px;
}

#login_form label[for="signin_remember"], #login_form #signin_remember {
    display: none;
}

.wrong {
    opacity: 0.25;
}

.not_available {
    opacity: 0.25;
}

#login_form {
    margin: 1em;
}

#login_form input {
    margin-top: 0.3em;
}

#login_form, #login_form_h1 {
    text-align: center;
}


#login_form_h1 {
    display: none;
}

/*label[for="signin_username"]:before*/
.login_error:before {
    margin-bottom: 0.5em;
    content: url('../icon/stop.png');
    display: block;
    text-align: center;
}

.login_error, .login_logo {
    font-size: 1.2em;
    margin-bottom: 0.5em;
}

.login_logo:before {
    margin-bottom: 0.5em;
    content: url('../icon/restricted.png');
    display: block;
    text-align: center;
}
#login_form .submit {
    margin-top: 1em;
    text-align: center;
}

#signin_forgot_password {
    position: absolute;
    bottom: 1em;
    left: 1em;
}

#signin_forgot_password a{
    color: #666666;
    text-decoration: none;
}

#form_new_game {
    text-align: center;
}

.list_of_games {
    list-style: none;
    text-align: center;
    padding: 1em 0;
}

.list_of_games li {
    margin-bottom: 2em;
}

#form_new_game h1:before {
    margin-bottom: 0.5em;
    content: url('../icon/waiting_for_games.png');
    display: block;
    text-align: center;
}

#game_moderate_score {
    clear: both;
    margin-top: 40px;
    padding: 0 20px 20px 20px;
}

#game_moderate_score td {
    border-bottom: 1px solid #666666;
    text-align: right;
}

#game_moderate_score th {
    border-bottom: 1px solid #666666;
    text-align: left;
    font-weight: normal;
}

.moderate_player {
    clear: both;
    border-bottom: 1px solid #666666;
}

.player_name {
  padding-left: 10px;
}

.me_name {
	font-size: 0.7em;
}

.player_score {
    float: right;
}

.player_score_score {
    float: right;
    padding-right: 0.75em;
}

.player_score_buttons {
    float: right;
    padding-right: 0.75em;
}

.player_joker_buttons {
}

.joker5050_button {
    font-size: 0.8em;
    padding: 0 0.3em !important;
}

#game_question {
    clear: both;
    padding: 20px;
    margin-top: 0;
}

.malus_button, .bonus_button {
    padding: 0 0 0 0.5em;
    color: white;
    text-decoration: none;
}

.malus_score, .bonus_score, .player_extra_score {
    opacity: 0.5;
    font-size: 0.5em;
}


#game_moderate_buttons {
    padding: 0 20px;
}

#game_moderate_buttons button {
    margin-right: 10px;
}

#game_moderate_buttons #endButton {
    margin-right: 0;
}

#logout {
    font-size: 16px;
}

.answer_selected.answer_correct .answertext:before {
    content: url('../icon/answer_correct.png');
    float: right;
}

#score {
    margin: 1em;
    font-size: 1.2em;
}

#score table {
    width: 50%;
    margin: auto;
    border-collapse: collapse;
}

#score tr {

    display: block;

    margin-bottom: 10px;

    box-shadow: 0px 0px 5px white;
    -webkit-box-shadow: 0px 0px 5px white;
    -moz-box-shadow: 0px 0px 5px white;

    border-radius: 5px;

}

#score td {
    width: 100%;
    /*
    border-bottom: 1px solid white;
    */
}

#score td {
    padding: 5px;
}

#score tr:first-child td:first-child:before {

    /*
    content: url('../icon/winner.png');
    padding-right: 0.5em;
    */

}

#login_form input[type="submit"] {
    display: none;
}


#player_joker_bar {
    margin-bottom: 1em;
    padding: 0.5em 1em;
    background-color: #00001e;
    border-top: 1px solid #002c6d;
    border-bottom: 1px solid #002c6d;
}

#player_status_bar {
    padding: 1em 1em 0 1em;
    float: right;
    text-align: right;
}

#player_score {
    font-size: 40px;
}

#player_progress {
    font-size: 30px;
    color: #2e81b4;
}

#url {
    font-size: 20px;
    color: #0057a3;
}

#player_score span, #player_progress span {
}

#logo {
    float: left; 
}

#logo img {
    margin: 1em;
    width: 250px;
}

.error h1 {
    border-bottom: 1px solid white;
    padding-bottom: 0.5em;
}

.error h2 {
    margin: 0.5em 0;
}

.error .button {
    margin-top: 2em;
}

.error:before {
    content: url('../icon/error.png');
    float: left;
    margin-right: 1em;
}

#logout_button a {
    opacity: 0.3;
    color: white;
    text-decoration: none;
    font-size: 0.5em;
    padding: 0.3em;
    float: right;
    position: absolute;
    top: 0.3em;
    right: 0.5em;
}

.image_answer {
    z-index: 1;
}

.image_answer_guess {
    z-index: 2;
    position: absolute;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    background: url('../images/circle_orange.png') no-repeat center;
    -webkit-background-size: 35%;
}

.image_answer_guess span {
    position: relative;
    text-shadow: 0px 0px 5px black;
    font-size: 14px;
    font-weight: bold;
}

.image_answer_by_player_0 {
}
.image_answer_by_player_0 span {
    top: 0.5em;
}

.image_answer_by_player_1 {
}
.image_answer_by_player_1 span {
    top: 1.5em;
}

.image_answer_by_player_2 {
}
.image_answer_by_player_2 span {
    top: 2.5em;
}

.image_answer_by_player_3 {
}
.image_answer_by_player_3 span {
    top: 3.5em;
}

.image_answer_by_player_4 {
}
.image_answer_by_player_4 span {
}

.image_answer_by_player_5 {
}
.image_answer_by_player_5 span {
}

.image_answer_by_player_6 {
}
.image_answer_by_player_6 span {
}

.image_answer_by_player_7 {
}
.image_answer_by_player_7 span {
}


#pause_screen:before {
    content: url('../images/quizine.png');
    display: block;
    margin: 1em 0;
}
#pause_screen {
    text-align: center;
}

#pause_screen p.button {
    margin: 2em 0;
}

#pause_button {
    content: url('../icon/pause.png');
    height: 45px;
    width: 45px;
    padding: 15px;
}

#pause_screen #pause_button {
    float: none;
    margin: 0;
    content: url('../icon/play.png');
}

#game_pin_continue_button {
    position: absolute;
    bottom: 2em;
    right: 1em;
    font-size: 0.5em;
}

#gamePIN {
    font-size: 330px;
    text-align: center;
    word-wrap: break-word;
}

#gamePINPres {
    font-size: 200px;
    text-align: center;
    position: absolute;
    top: 30%;
    width: 100%;
}

#timer {
    position: absolute;
    top: 20px;
    left: 420px;
    font-size: 5em;
    text-align: center;
}

#temp_image_answer {
    opacity: 0;
}

button {
    background: none;
    font-size: 40px;
    color: white;
    padding: 10px;
    border: 4px solid #2e81b4;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    cursor: pointer;
    text-align: center;
}

.clicked {
    box-shadow: 0px 0px 20px white;
    border: 4px solid white !important;
    -webkit-box-shadow: 0px 0px 20px white;
    -moz-box-shadow: 0px 0px 20px white;
    background-color: #2e81b4 !important;
}

#game_moderate_score .clicked {
    border: none !important;
}

.unclickable {
    opacity: 0.3;
}

button img {
    display: block;
    max-height: 46px;
}

#endButton, #pauseButton {
    float: right;
}

#showAnswerButton {
    width: 74px;
}

#logout {
    display: none;
}

.malusButton, .bonusButton, .playerJoker5050Button {
    border: 4px hidden white;
    padding: 0;
}

#player_joker_bar div.joker {
    padding: 15px;
    display: block;
    margin: 0 auto;
    width: 75px;
    height: 75px;
    text-align: center;
    background: url('../icon/joker_background.png') center no-repeat;
    color: white;
    border: 4px solid #2e81b4;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    text-decoration: none;    
}

#player_joker5050 span {
    height: 75px;
    width: 75px;
    font-size: 25px;
    display: table-cell;
    vertical-align: middle;
    text-shadow: 0px 0px 2px black;
}

#player_joker_bar div.used {
    background: url('../icon/x.png') no-repeat;
    background-size: 100% 100%;
}

#game_moderate_score .used {
    text-decoration: line-through;
}

#joinGameForm, #createGameForm {
    text-align: center;
    margin-top: 100px;
}

#joinGameForm h1, #createGameForm h1 {
    margin-bottom: 50px;
}

#joinGameForm h1:before {
    content: url('../images/quizine.png');
    display: block;
    margin: auto;
}

#joinGameForm button, #createGameForm button {
    font-size: 25px;
    margin-top: 50px;
}

#joinGameForm label, #createGameForm label {
    margin-top: 50px;
}

#joinGameForm input, #createGameForm input {
    display: inline-block;
}

#leaveGame, #resumeGame {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
}

#game_imagequestion {
    position: relative;
}

canvas { 

}

.subcanvas {
    position: absolute;
    display: inline;
}