@charset "UTF-8";

	@font-face {
      font-family: "Unibody 8 Pro";
      src: url("Unibody8Pro-Regular.otf");
    }
	@font-face {
      font-family: "Inconsolata";
      src: url("Inconsolata-Regular.ttf");
    }
	* { box-sizing:border-box;  -webkit-overflow-scrolling: touch;
	
	 }
	 #canvas_wrapper_wrapper {
		 -webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
	touch-action: none !important;
		 
		 
		 }
	 input, input:before, input:after, #news_content, #highscore, #welcome_content {
      -webkit-user-select: initial!important;;
      -khtml-user-select: initial!important;;
      -moz-user-select: initial!important;;
      -ms-user-select: initial!important;;
      user-select: initial!important;;
     } 
	 
	 
	html { min-height: 100%;  }
	body {padding: 0; margin: 0; background: black;  color: white; font-size: 15px; font-family: 'Inconsolata', monospace;   height: 100%; width: 100%; text-align: center;  }
	.rechts { border: solid 8px green !important} 
	.links { border: solid 8px red !important} 
    canvas { left: 0; right: 0; top: 0; bottom: 0; margin:auto; border: solid 5px white; position:absolute;  border-left: solid 5px red; border-right: solid 5px red; background-color: rgba(0,0,0,0.6);  }
	#canvas_wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin:auto;  }
	#canvas_wrapper:before { content: ""; position:absolute; left: 25%; top: 0; border-right: dashed 2px white; height: 100%; width: 25%; z-index: -2; background-color: #444}
	#canvas_wrapper:after { content: ""; position:absolute; right: 25%; top: 0; border-left: dashed 2px white; height: 100%; width: 25%; z-index: -2; background-color: #444}
	#point_wrapper {  position:absolute; width: 100%; height: 100%; top: 0; left: 0; display:flex; font-family: "Unibody 8 Pro"; font-size: 40px; }
	#point_wrapper p { padding: 20px; width: 50%; margin: 0; text-align:left}
	#point_wrapper p:first-child { text-align:right}
	.points_highlight_left #point_wrapper, .points_highlight_right #point_wrapper { z-index: 2000 !important}
	.points_highlight_right #point_wrapper p:first-child {  color: #20DB20}
	.points_highlight_left #point_wrapper p:last-child {  color: #20DB20}
	
	#canvas_wrapper_wrapper { position:relative; overflow:hidden; transition: opacity  0.3s}
	.canvas_wrapper_wrapper_hidden { opacity: 0!important; transition: opacity 0s!important }
	
	
	.points_highlight_left canvas {
  animation: blink_left-animation 0.2s 2;
  -webkit-animation: blink_left-animation 0.2s 2;
 
}
.black { background-color: white !important; color: black;  }
.black canvas { background: rgba(255,255,255,0.5); border-top: solid 4px black; border-bottom: solid 4px black}
.black #options_wrapper { background: rgba(180,180,180,0.5);}
.black #start { background: white; }
.black #canvas_wrapper:before { border-right: dashed 2px black; background-color: #eee}
.black #canvas_wrapper:after { border-left: dashed 2px black; background-color: #eee}
.black #pause { background: black; border: solid 2.4px black; color: white }
.black #highscore, .black #highscore_wrapp { background: #efefef; color: #222}
.black #highscore div { color: #222}
.black #highscore_wrapp h2 span { color: red}
.black #info_banner { background: red}


.Mint #canvas_wrapper_wrapper { background-color: #008C8C;}
.Mint canvas { border-left: solid 4px #FB9090; border-right: solid 4px #FB9090; background-color: rgba(0,0,0,0.1) }
.Mint #canvas_wrapper:before, .Mint #canvas_wrapper:after { z-index: 1; background: rgba(255,255,255,0.1); }
.Mint #point_wrapper { z-index: 3}
.Mint #options_wrapper { background: white; border: solid 3px #FB706E;}
.Mint #x_options { background: #FB706E}
.Mint #start { background: #FB706E}
.Mint #pause { background: white; color: #FB706E }
.Mint #highscore_wrapp { background: white;  border-color: #FB706E}
.Mint #highscore div { color: #FB706E}
.Mint #highscore_wrapp h2 span { color: #FB706E }
.Mint #highscore_x { background: #FB706E; color: white}
.Mint #high_leiste p { color: #008C8C}
.Mint #info_banner { background: #008C8C}

.Tennis #canvas_wrapper_wrapper { background-color: #666; background-image:url(img/rasen.jpg); background-size:cover;}
.Tennis #canvas_wrapper { background-color: #666; background-image:url(img/rasen.jpg); background-size:cover;}
.Tennis canvas { border-left: solid 4px #0085B2; border-right: solid 4px #0085B2; background:none}
.Tennis #canvas_wrapper:before, .Tennis #canvas_wrapper:after { z-index: 1; background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.5)}
.Tennis #point_wrapper { z-index: 3}
.Tennis #options_wrapper { background: rgba(243,253,253,1); border-color: green}
.Tennis #x_options { background: green; color: white}
.Tennis #start { background: #0085B2}
.Tennis #pause { background: green }
.Tennis #highscore { color: white}
.Tennis #highscore_wrapp { background: darkgreen; color: white; border-color: #0085B2}
.Tennis #highscore div { color: white}
.Tennis #highscore_wrapp h2 span { color: white}
.Tennis #highscore_x { background: #0085B2}
.Tennis #high_leiste p { color: #FFFFDA}
.Tennis #info_banner { background: darkgreen}

.schaluppke #canvas_wrapper_wrapper { background-color: #00698C;}
.schaluppke canvas { border-left: solid 4px darkorange; border-right: solid 4px darkorange; background-color: rgba(0,0,0,0.33)}
.schaluppke #canvas_wrapper:before, .schaluppke #canvas_wrapper:after { z-index: 1; background-color: rgba(255,255,255,0.1); }
.schaluppke #point_wrapper { z-index: 3}
.schaluppke #options_wrapper { background: rgba(0,131,179,1); border: solid 3px #00698C;}
.schaluppke #x_options { background: #00698C}
.schaluppke #start { background: darkorange}
.schaluppke #pause { background: white; color: darkorange }
.schaluppke #info_banner { background: darkorange}

.schaluppke #highscore { color: white}
.schaluppke #highscore_wrapp { background: rgba(0,131,179,1); color: white; border-color: darkorange}
.schaluppke #highscore div { color: white}
.schaluppke #highscore_wrapp h2 span { color: white}
.schaluppke #highscore_x { background: darkorange}
.schaluppke #high_leiste p { color: #FFFFDA}


@keyframes blink_left-animation {
  to {
    border-left: solid 5px white
  }
}
@-webkit-keyframes blink_left-animation {
  to {
    border-left: solid 5px #ddd
  }
}
.points_highlight_right canvas {
  animation: blink_right-animation  0.2s 2;
  -webkit-animation: blink_right-animation  0.2s 2;
}
@keyframes blink_right-animation {
  to {
    border-right: solid 4px #ddd
  }
}
@-webkit-keyframes blink_right-animation {
  to {
    border-right: solid 4px #ddd
  }
}





	
#options_wrapper { position:absolute; font-size: 11px; text-transform:uppercase;   top: 5%; left: 0; bottom: 0; right: 0; margin: auto; border: solid 3px #D90000; background: rgba(100,100,100,1); width: 150px; height: 150px; padding: 8px; border-radius: 2px 0 2px 2px; z-index:  20000; box-shadow: 7px 8px 3px -3px rgba(0,0,0,0.26);}	
.play #options_wrapper { display:none !important}
#start { width: 100%; background: #D90000; height: 26px; line-height: 28px; border-radius: 2px; text-align:center;   margin: 8px auto;  top: 0; left: 0; right: 0; bottom: 0; font-family: "Unibody 8 Pro"; letter-spacing: 4.5px}
#x_options { position:absolute; top: -3px; right: -33px; font-size: 25px; font-family: arial; font-weight: bold; border: none !important; height: 30px; line-height: 31px !important; width: 30px !important; border-radius: 0 2px 2px 0; background: #D90000; color: white;  margin: 0}

#level_switch { margin:auto; background-color: #888; width: 100%; height: 26px; line-height: 28px;  margin-top: 0;  cursor:pointer; border-radius: 2px; font-family: "Unibody 8 Pro"; color: white; margin-top: 8px}
#level_switch span { color: #00FF00}
#color_shemes { margin:auto; background-color: #888; width: 100%; height: 26px; line-height: 28px;   cursor:pointer; border-radius: 2px; font-family: "Unibody 8 Pro"; color: white; margin-top: 8px}
#sound_info { margin:auto; width: 100% }
#sound_info div { font-family: "Unibody 8 Pro"; cursor:pointer; height: 26px; line-height: 28px;  background-color: #888; color: white; float:left; overflow:hidden; border-radius: 2px; width: calc(50% - 4px)  }
#sound_info div:first-child { margin-right: 8px; font-weight:bold; font-size: 8px; letter-spacing: 2px;  }
#sound_info div:last-child {  background-image:url(img/sound_on.png); background-size: auto 50%; background-repeat: no-repeat; background-position:center center}
.sound_off #sound_info div:last-child { background-image:url(img/sound_off.png);}
#sound_info:after { content: ""; clear:both; display: table;}



#info { font-family: "Unibody 8 Pro"; background: #62C500; color: white; display:none; padding: 0 18px; position: absolute; bottom: 10%;  line-height: 30px; text-transform: uppercase; margin:auto;  z-index: 99999999999898989889898989898989898998989898}   
#info h4 { margin: 5px 0 0 0}
#info p { margin: 0 0 7px 0; line-height: 18px; font-family: 'Inconsolata', monospace;}
.winner_left { left: 0; border-radius: 0 3px 3px 0; text-align:right} 
.winner_right { right: 0; border-radius: 3px 0 0 3px; text-align:left} 
#highscore_text_click { cursor:pointer; color: #ffff1b}

#besser_landscape { width: 177px; height: 100px; border-radius: 5px; background-color: white; background-image:url(img/besser_landscape.gif); background-position:center; background-size: 62%; background-repeat:no-repeat; margin:auto; margin-top: 20px 0; display:none; position:fixed; margin:auto; top: 0; left: 0; right: 0; bottom: 0}

#inst_info { text-align:center; width: 80%; font-family: "Unibody 8 Pro"; color: white; margin: 120px auto 1000px auto; font-size: 0.85rem; background-image:url(img/pfeil_runter.gif); background-repeat:no-repeat; background-position: bottom center; background-size: 80px 80px; padding-bottom: 150px; display: none}
.standalone #inst_info { display: none}
#height_portait { height: 1000px; width: 100%; display: none}

#anmeldung_wrapper { position:fixed;  top: 0; right: 0; bottom: 0; left: 0; margin:auto; height: 40px; line-height: 40px; display:none; width: 260px; border-radius: 5px; overflow: hidden; background: white; border: solid 1px red; z-index: 5888888;  }
#anmeldung_wrapper p { padding: 0 5px; width: 23.5%; line-height: 39px; margin: 0; color: #333; font-size: 18px}
#anmeldung_wrapper input {  width: 57.5%; border: none; padding: 0 0px; font-size: 18px; font-family: 'Inconsolata', monospace, arial; height: 40px; line-height: 40px; }
#anmeldung_wrapper div {  width: 22.5%; height: 40px; line-height: 40px; background: red; text-align:center; letter-spacing: 2px; color: white; font-weight: bold; cursor: pointer}

#install_update { position: fixed; bottom: 7px; left: 0; right: 0; width: 210px; border: solid 1px #666; background: #111; color: green; text-transform: uppercase; font-weight: bold; height: 24px; line-height: 21px; font-size: 16px; margin:auto; cursor: pointer; z-index: 9989878787878787878787887878787878989898998989899899898899987; border-radius: 2px; display: none }
.play #install_update { display: none !important}
#show_update_news { position: absolute; z-index: 99999999999999999;  width: 265px; height: 100%; max-height: 400px; background: #dedede; color: black; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.95rem;  display:none; top: 0; text-align:left; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: solid 2px red; border-radius: 2px}
#news_content { position:absolute; height: calc(100% - 70px); padding: 0 20px; top: 50px; overflow-y:scroll; }
#show_update_news h2 { color: black; font-size: 1.12rem;  margin-top: 14px; margin-left: 20px; text-align:left}
#show_update_news h5:nth-of-type(1) { color: red; margin-top: 0 }
#show_update_news h5 { margin: 15px 0 6px 0; font-size: 0.7rem}
#show_update_news p { margin: 2px 0 2px 6px; padding-left: 9px; font-size: 0.65rem !important; position:relative  }
#show_update_news p:before { content:""; position:absolute; left: 0; top: 0.29rem; width: 3px; height: 3px; border-radius: 100px; background: red}
#news_x, #highscore_x, #welcome_x { position:absolute; top: -2px; right: -30px; height: 30px; line-height: 30px; background: red; width: 30px; font-size: 24px; font-weight: bold; cursor: pointer; color: white; border-radius: 0 2px 2px 0; text-align:center; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif}
#highscore_x, #welcome_x { top: -3px}

#highscore_wrapp { position: absolute; z-index: 99999999999999997;  width: 310px; height: 100%; max-height: 380px; border: solid 3px red; border-radius: 2px; background-color: #232323; left: 0; right: 0; top: 0; bottom: 0; margin: auto; display:none;   }
#highscore_wrapp h2 { margin: 10px auto;  padding: 0 30px; text-transform: uppercase; font-size: 1.4rem; letter-spacing: 2px }
#highscore_wrapp h2 span { color: white;  }
#highscore { position:absolute; width: 100%; padding: 0 20px; height: calc(100% - 74px); top: 68px; left: 0; overflow:hidden}
#high_leiste { display:flex; width: 100%; height: 20px; line-height: 20px; padding: 0 20px; margin-top: 10px}
#high_leiste p { width: 12%; text-transform:uppercase; margin: 0; font-weight: bold; color: red; text-align:center; flex-grow: 1}
#high_leiste p:first-child { text-align:left; width: 13%; }
#high_leiste p:last-child { text-align:right; width: 23%}

#highscore div { line-height: 16px; color: white; display: flex; width: 100%}
#highscore div p { width: 12%; margin: 0; font-size: 0.84rem; text-align:center; flex-grow: 1; text-transform:capitalize}
#highscore div p:first-child { text-align:left; width: 13%; }
#highscore div p:last-child { text-align:right; width: 23%}
#verbessern_oder_nicht { position:absolute; width: 100%; height: 20px; line-height: 20px; font-size: 13px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; top: 0; bottom: 0; margin:auto; text-transform:uppercase; background: #aaa; color: #444; display:none}
#welcome_wrapper { position: absolute; z-index: 99999999999999999999999997;  width: 410px; height: 100%; max-height: 380px; border: solid 3px red; border-radius: 2px; background-color: #232323; left: 0; right: 0; top: 0; bottom: 0; margin: auto; color: white; font-size: 0.8rem;  }
#welcome_content { height: calc(100% - 10px); width: 100%; position:absolute; top: 0; left: 0; padding: 0 10px; overflow-y: scroll;  overflow-x: hidden}
#welcome_content h2 { margin: 8px auto;  text-transform: uppercase; font-size: 1.4rem;  line-height: 1.7rem }

#welcome_content > p { margin: 5px 0 ; text-transform: uppercase; text-align:left; line-height: 1rem }
#welcome_content > p:nth-of-type(1) { text-align:center; margin-top: 8px; line-height: 1rem; font-size: 0.97rem; height: 0.97rem }
#welcome_content ul p:nth-of-type(1) { margin-bottom: 4px}
#welcome_content ul li { text-align:left; margin: 2px 0;  }
#welcome_content ul p { text-align:left}
#welcome_content ul li p { margin: 0; text-align:left}
#welcome_content ul { margin-left: 0; padding-left: 20px; line-height: 0.97rem;  }
#dein_name { color: #FFFFBF}

#info_banner { background: #666; z-index: 20; color: white; text-align:center; position: absolute; bottom: calc(15% - 12px); width: calc(100% - 40px); margin:auto; left: 0; right: 0;  height: 24px; line-height: 22px; border-radius: 2px; box-shadow: 7px 8px 3px -3px rgba(0,0,0,0.26);  display:none}
.play #info_banner { display:none !important}
#pause { width: 39px; height: 22px; border-radius: 2px; position:absolute; left: 0; right: 0; margin:auto; text-align:center; line-height: 18px; background: black; border: solid 2.4px white; color: #20DB20; z-index: 40000; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; font-size: 18px; cursor:pointer; display:none}
.play #pause { display:block} 

.highlight_score p {  animation-duration: 400ms;
   animation-name: blink_hig;
   animation-iteration-count: infinite;
   animation-direction: alternate; }
   
@keyframes blink_hig {
   from {
      color: #FFFFBF
   }
   to {
      color: red
   }
 }

#ich_sehe_keinen_button { cursor: pointer; text-decoration: underline; display:none; position:absolute; left: 0; bottom: 30px; width: 100%; text-align:center  }
#so_gehts_content { display:none; font-family: 'Inconsolata', monospace, arial; margin-bottom: 50px; }
#so_gehts_content h4 { margin: 30px 0 0px 0; color: #FFFFBF}
#so_gehts_content p { margin: 5px auto}
#ios_leiste, #android_leiste { width: 90%; height: 100px; background-position: center center; background-repeat:no-repeat; background-size: contain; background-image:url(img/webapp_ios.jpg); margin: 15px auto 15px auto}
#android_leiste { background-image:url(img/webapp_android.jpg)}

.standalone { width: 100%; height: 100%; overflow:hidden; position:fixed; top: 0; left: 0}

@media screen and (orientation: portrait) {
#ich_sehe_keinen_button { display:block}
.standalone #ich_sehe_keinen_button { display: none}
#highscore_wrapp { display:none !important}
#show_update_news { display:none !important} 
#anmeldung_wrapper { display: none !important}
#inst_info  { display:block}
.standalone #height_portait { display: none}
.standalone #besser_landscape { display:block}	
#canvas_wrapper_wrapper { display:none !important}
#pause { display:none !important}
.play #pause { display:none !important}
}
@media screen and (min-aspect-ratio: 4/3) {
#so_gehts_content { display: none !important}
#ich_sehe_keinen_button { display:none !important}

}

@media screen and (min-width: 370px) and (max-width: 570px) {  
#highscore_wrapp { width: 300px}
#show_update_news { width: calc(100% - 100px)}
#welcome_wrapper { width: calc(100% - 100px)}
#welcome_content ul > p:first-child { display:none}

}

@media screen and (min-height: 400px) {  
#highscore_wrapp { max-height: 330px}
#welcome_wrapper { max-height: 330px}

}


@media screen and (min-width: 960px) and (min-height: 600px) {
#options_wrapper { width: 178px; height: 166px; }	

#start, #level_switch, #color_shemes, #sound_info div { height: 30px; line-height: 30px; }
#sound_info div:last-child { background-size:auto 43%}
#info_on_off { line-height: 33px; font-size: 9px}
#info_banner { width: 71%}
#pause { width: 50px; height: 25px; font-size: 20px; line-height: 20px}
#info { bottom: 25%; width: 27%}
#point_wrapper { font-size: 50px}

}