/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.left {
  float:left;text-align:left;
}

.right {
  float:right;text-align:right;
} 

/* general */
/* colors

#3498DB,#f0f4fd,#c1d5f8,#999,#ccc,#d8e4fa
white,CornflowerBlue,MidnightBlue,Gainsboro,WhiteSmoke,grey

*/

 body
 {background-color:#2171AD;font-family: "Merriweather",Georgia,Times,serif;}
 
 div#page, div#footer div
 {width:280px;margin:0 auto;}
 
 div#page
 {min-height:100vh;margin-top:0.7em;border-radius:20px 20px 0 0;background:white;} 

 div#page,div#header,div#pageregion
 {overflow:hidden;}
 
 div#header,div#pageregion
 {padding:0.7em 1em;}  
  
 div#header 
 {background:#f0f4fd;color:CornflowerBlue;line-height:150%;text-align:center}
 
 div#header_user
 {overflow:hidden;padding-top:0.7em;line-height:100%;}

 div#header_user div
 {border:0;font-size:0.8em;color:#c1d5f8;}
 
 div#header_user div#user
 {float:left;text-align:left}
 
 div#header_user div.right
 {float:right;text-align:right} 
     
 div#pageregion  
 {padding-bottom:3.7em;}  
 
 div#footer 
 {position:fixed;bottom:0;width:100%;height:2.7em;padding-top:1em;background:#f0f4fd;border-top:1px solid gainsboro;}
 
 div#footer div 
 {margin-bottom:0.3em;}

 div#footer div div
 {float:left;width:20%;padding-bottom: 0.5em;font-size:0.8em;color:CornflowerBlue;text-align:center;cursor:default;} 

 a
 {text-decoration:none;color:CornflowerBlue}
 
 h1,h2,h3,h4,h5,h6
 {line-height:1.2em;color:#666;margin-bottom:0.3em}

 h2,h3,h4,h5,h6
 {color:#999}

/* animation */

 @keyframes move-it {
	0% {
	background-position: initial;
	}
	100% {
	background-position: 100px 0px;
	}
 }

 
/* start */
 
 div#start_chart,div#start_mid,div#start_streak,div#start_missed,div#start_pmLabel,div#start_playmode,div#start_select,div#start_gamefield,div#start_court,div#start_answerpanel,div#start_answerpanel-2,div#start_gamebutton
 {overflow:hidden;} 
  
 div#start_chart,div#start_mid,#start_gamefield
 {padding-left:3px;} 
 
 div#start_mid
 {margin:0.2em 0 0.5em 0;} 
    
 div#start_chart div,div#start_mid div
 {float:left;width:33%;font-family:sans-serif;color:#ccc;font-size:0.5em;text-align:center;} 
 
 div#start_chart div#chartval2 div	/* inside table delay meter */
 {width:100%;margin-left:2px} 
  
 div#start_chart div#chartval1,div#start_chart div#chartval3
 {padding-top:20px;font-size:170%;color:MidnightBlue;}
 
 div#start_chart div#chartval3 span
 {font-size:0.5em} 
 
 div#start_mid div
 {width:30%;display:flex;justify-content:center;align-items:center;}
 
 div#start_mid div.midlabel
 {padding-bottom:0.5em} 
 
 div#start_mid div.midcol2
 {width:40%}  
 
 div#start_mid div#midval2
 {justify-content:left;height:5px;margin-top:5px;background:linear-gradient(to right,Thistle 50%,LightSteelBlue 50%);} 
 
 div#start_mid div.midval div
 {color:#666;font-weight:bold;width: 14px; /* Breite des Kreises */height: 14px; /* Höhe des Kreises, muss gleich der Breite sein */background-color:#F1F1F1; /* Farbe des Kreises */
  border-radius: 50%; /* Rundet die Ecken auf 50%, um einen Kreis zu erzeugen */border:1px solid #ccc}  
  
 div#start_mid div.midval div#midvalcol2
 {margin-left:43%;}  
    
 div#start_missed
 {width:97%;margin:0.2em 0;} 
 
 div#start_missed
 {display:none;flex-flow:row nowrap;justify-content:space-around;}  
 
 div#start_missed div
 {width:10%;height:5px;border:1px solid Gainsboro;} 
     
 div#pmLabel
 {width:97%;margin:0.2em 0;font-family:sans-serif;font-size:0.5em;color:#ccc;text-align:center} 
        
 div#start_court 			/* for absolute positioning start_message */
 {position:relative;}
  
 div#start_court button		/* for absolute positioning button span */  
 {position:relative;float:left;margin:1%;width:31%;padding-top:20%;border:1px solid;}
 
 div#start_court button#b1,div#start_court button#b4,div#start_court button#b7
 {margin-left:0;}
 
 div#start_court button div
 {position:absolute;opacity:-0.02;}  

 div#start_court button div.circle
 {top:15%;left:0%;transform: translateY(-30%);-ms-transform:translateY(-30%);-webkit-transform:translateY(-30%);border:1px solid #999}  

 .circle
 {width:45%;height:60%;padding-top:6%;margin:15% 25%;border-radius:50%;line-height:250%;}
 
 div#start_court button div.char
 {top:23%;left:41%;font-size:1.5em;font-family: "Merriweather",Georgia,Times,serif;}  
 
 div#start_playmode,div#start_timer,div#start_select
 {width:96%;margin:1% 0 1% 0;background:WhiteSmoke;border:1px solid Gainsboro;border-radius:2px;line-height:180%;font-family:sans-serif;font-size:75%;}
 
 div#start_timer
 {display:none;}
 
 div#start_playmode,div#start_select
 {color:CornflowerBlue;text-align:center;cursor:default;user-select:none;} 
  
 div#start_playmode 
 {display:flex;}

 div#start_playmode div
 {width:50%;font-weight:bold;color:#1f5c7a;background:Whitesmoke} 
  
 div#start_playmode div#pmLE
 {border-right:1px solid Gainsboro} 
 
 div#start_select
 {font-family:Verdana,sans-serif;letter-spacing:0.01em;}
  
 div#start_answerpanel,div#start_answerpanel-2
 {display:block;margin:5px 0;} 
 
 div#start_answerpanel-2
 {display:none;margin:5px 0;}  
   
 div#start_answerpanel div,div#start_answerpanel-2 div
 {width:99%;overflow:hidden} 

 div#start_answerpanel div button,div#start_answerpanel-2 div button
 {float:left;height:3em;border-radius:10%;border-width:1px;border-color:gainsboro;} 
 
 .AP,.FB
 {margin-right:1%;margin-bottom:1%;width:32%;background:CornflowerBlue;color:#fff;} 
 
 .AP
 {background:WhiteSmoke;border-color:Gainsboro;color:Gainsboro}  
 
 .MP
 {width:42%;}
  
 #format,#format-2
 {width:12%;}

 #wrong,#LP3,#LP6,#LP9,#wrong-2,#LP3-2,#LP6-2,#LP9-2
 {margin-right:0;} 
 
 #LP3,#LP6,#LP9,#LP3-2,#LP6-2,#LP9-2
 {width:32.4%}  

 #LP7,#LP8,#LP9,#LP7-2,#LP8-2,#LP9-2
 {margin-bottom:0}  
    
 div#start_gamebutton button
 {float:left;height:4em;width:98%;color:Midnightblue;font-size:0.8em;font-weight:bold;letter-spacing:0.1em;border-radius:10%;border-width:1px;border-color:gainsboro;} 
 
 div#start_gamebutton button#btn_start,div#start_gamebutton button#btn_reload,div#start_gamebutton button#btn_proceed
 {background:CornflowerBlue;color:#fff;} 

 div#start_gamebutton button#btn_reload,div#start_gamebutton button#btn_proceed
 {display:none;} 

 div#start_gamebutton button#btn_stop
 {display:none;background:#99cce6}
  
 div#start_gamebutton button#btn_result
 {display:none;background:#ffea80;color:Midnightblue;} 
  
 div#start_message
 {display:none;position:absolute;top:35%;left:0%;z-index:99;width:94%;padding:7% 1%;text-align:center;font-size: 0.9em;border:2px solid gainsboro;}   
 
 div#start_values  
 {margin-top:1em;line-height:160%;font-size:90%}

 div#start_values div
 {float:left;width:100%}

 div#start_values div div,div#start_values div input
 {float:right;width:60%;border:1px solid;overflow:hidden}
    
 div#start_values div div.strfield, div#start_values div textarea.strfield
 {overflow:auto;width:99%;height:60px;font-family:Verdana,sans-serif;font-size:0.7em;background:MintCream}
 
  
/* scores */
 
 body#two div#page
 {background-color:#002E5D}
 
 body#two div#page h1
 {text-align:center;}

 body#two div#page h2
 {overflow:hidden;font-size:0.7em;}

 body#two div#page h3
 {line-height:0.3em;margin-bottom:0.7em} 
 
 body#two div#page h4
 {float:right;width:20%;text-align:right;font-size:0.7em;} 
 
 body#two div#page h5
 {} 
 
 body#two div#page h6
 {font-size:0.7em} 
 
 body#two div#page p.scoredisplay
 {margin-bottom:1em;text-align:center;color:LightCyan;font-size:1.5em;} 

 div#subresult  
 {margin:0.5em 0 1em 0;color:#708090;font-size:1em;font-family:sans-serif} 

 div#result_gamebutton
 {float:left;width:100%;overflow:hidden;padding-top:1em;}
 
 div#result_gamebutton button
 {float:left;height:4em;width:98%;font-size:0.8em;font-weight:bold;letter-spacing:0.1em;border-radius:5%;border-width:1px;border-color:grey;} 
 
 div#result_gamebutton button#btn_deletegame, div#result_gamebutton button#btn_newgame
 {background:#3498DB;color:#fff;width:48%;height:2em;margin-bottom:1em} 

 div#result_gamebutton button#btn_newgame
 {float:right} 


 
 div#result,div.chart
 {overflow:hidden;margin-bottom:1em}
 
 div#result p 
{}

 div.chart
 {margin-top:1em}
 
 div.chart h1 a
 {float:right;margin-left:0.5em;padding:0 0.5em;font-size:0.5em} 
 
 div.chart h1 a#daily
 {text-decoration:underline;background:#99cce6;font-weight:bold;color:FireBrick}
 
 div#result div
 {overflow:hidden;float:left;width:100%}
 
 div.charts_table
 {margin-top:1em;font-family:sans-serif;color:#999} 

 div.charts_table div 
 {float:left;padding:4% 1%;margin:0;border-bottom:1px solid #CCC;font-size:80%}
 
 div.charts_table div.c1
 {text-align:center;width:10%;}
 
 div.charts_table div.c2
 {text-align:left;width:30%;}

 div.charts_table div.c3
 {text-align:center;width:30%;} 
 
 div.charts_table div.c4
 {text-align:center;width:20%;}  
  
@media screen and (max-width: 960px) {
	
	div#start_display div div
	{margin:0;padding-left:2px;}	
	
	div#start_olevelpannel button
	{height:3.2em;}


	
} 

@media (hover: hover) {

}