/*** MAIN: ***/
*{margin:0;padding:0;text-align:center}
body{font-size:5vw;font-family:trebuchet ms, arial;background:#999}

aside{display:none}

svg{fill:currentColor}
h1{font-size:1.3em}
h1{color:#FFF}
h1.banner{display:inline-block;font-family:tahoma,trebuchet ms;text-shadow: 0px 0px 10px #000;line-height:2}
h2{color:#FFFA}
h1, h2{max-width:10em;text-align:center;margin:auto;line-height:1.5}
h3{font-size:1em;color:#FFF;margin:1em 0;text-transform: uppercase}
p{line-height:1.7;max-width:500px;margin:1em auto;text-align:left}
ul,ol{display:inline-block;margin:auto;line-height:2}
li{text-align:left}
q{font-style:italic}
a{text-decoration:none;color:#FFF}
a:hover{text-decoration:underline;color:#0F0}
strong{color:#EEF;font-weight:normal}
fieldset{border:0;padding:1em;border-style:dotted;border-radius:1em}
fieldset>fieldset legend{text-transform:none;color:#79B}
legend{padding:0 0.5em;text-transform: uppercase;font-weight:bold;text-shadow: 0px 0px 7px #000;color:orange;}
fieldset>fieldset legend{text-transform:none;color:#79B}
textarea{width:18em;text-align:left;padding:1em;margin:1em 0;border:solid 0.1em #0003}
textarea{background:#0002}
textarea{font-size:0.8em;font-family:courier new;font-weight:bold;color:#FFF8}
table.log td{margin:0.5em;padding:1em 2em;text-align:left}		
table.info-table{display:inline-block;margin:auto}
table.info-table td{text-align:left;padding:0.5em}
i.large{font-size:3em}

footer .banner{font-size:1em;}
footer{padding:1em 0}
footer a{display:block;margin:1.5em}
footer a i{opacity:0.5}
footer nav{background:#3693;margin:1em;border-radius:0.5em;border:solid 0.2em #FFF1}

section{padding:1em}

.left{float:left}
.right{float:right}
.align-right{text-align:right}
.icons-large i{font-size:2em;margin:0 0.5em}
header{margin:auto;height:3em}
header nav a{font-size:1.5em;margin:0.5em;color:#FFFB}
header nav a:hover{color:#0F0}
.info{background:#080;color:#ACA;padding:0.5em;}
.list a{display:block;padding:1em 2em;margin:0.5em;border-radius:0.3em;text-align:left;line-height:1.5;}
.list a:hover, .buttons a:hover{background:#080;color:#FFF;text-decoration:none}
.list a.selected{color:#FFF;box-shadow: 0px 0px 20px #000;border:dotted 1px #FFF}
.buttons{margin:1em 0;min-height:3.5em;}
.buttons a{margin:1em;display:block;padding:1em 1.5em;border-radius:2em;text-decoration:none;font-size:0.8em;font-family:verdana}
.buttons a{color:#FFF;box-shadow: 2px 2px 5px #000}
.buttons a i{opacity:0.3}
.buttons a.oef1{background:#080;font-size:1em}
.buttons a.oef1:hover{background:#070}
.buttons a.oef1 i{opacity:1;color:#0F0}
.buttons a h2{font-size:1em;font-family:verdana;font-weight:normal}
.clear{clear:both}
.compact a{margin:0.5em;margin:0.2em 0;width:2em;padding:1em}
.companyinfo{font-size:0.8em;font-family:verdana}
.half a{width:10em}
.buttons a:hover i{color:#0F0;opacity:1}
.buttons a:focus{outline:none;background:#070;color:#FFF}
.buttons a.repeat:focus{background:orangered}
.buttons .green{background:#363;color:#AFA}
.buttons .blue{background:#246;color:#AAF}
.buttons .purple{background:#582A72;color:#9775AA}
.buttons .gray{background:#222;color:#AAA}
.buttons .white{background:#FFF;color:#333}
.buttons-block a{display:block}
.buttons a:selected{background:#080;color:#FFF}
.buttons a.selected{background:#080;color:#FFF}
a i{margin:0 0.3em}
.websites-list{background:#FFF3;border:solid 0.2em #FFF1;margin:1em;border-radius:0.5em}
.websites-list ul{list-style:none;line-height:1.5}
.websites-list a{display:block}
.email span{color:#FFF9;font-family:arial}

/*** EXERCISE: ***/
input.sampletext{width:11em;font-size:1.5em;font-family:courier new;font-weight:bold;text-align:left;padding:0.1em 0;margin:0.5em 0}
input.sampletext{border-style:solid;border-width:2px;border-radius:0.2em}
input.error{border-color:red}

/*** RESULTS: ***/
.results{margin:auto}
.results td{text-align:right;padding:0.3em}
.results td span{opacity:0.5}
.results i{opacity:0.5}

/*** KEYBOARD: ***/
.keyboard {display: inline-block;font-size:0.6em;margin:1em 0}
.keyboard span {float: left;width: 1.8em;height: 1.8em;font-family:tahoma;border-style:dotted;border-width:1px;}
.keyboard span:nth-of-type(14){clear: both;margin-left: 2.5em}
.keyboard span:nth-of-type(27) {clear: both;margin-left: 3em}
.keyboard span:nth-of-type(38) {clear:both;width: 3.5em}
.keyboard span:nth-of-type(49) {width: 3.5em}
.keyboard span:nth-of-type(50) {clear: both;margin-left: 8em;width: 12em}
.keyboard span.highlight{background:#070;color:#FFF;border-color:#0F0;border-style:solid}
.upper .shift{background:#070;color:#FFF;border-color:#0F0;border-style:solid}
.groups .keyboard span.highlight{border:transparent}

/*** POSITIONS: ***/
.positions .f0, .positions .f6 {background-color: #EA4335!important;}
.positions .f1, .positions .f7 {background-color: #4285F4!important;}
.positions .f2, .positions .f8 {background-color: #FBBC05!important;}
.positions .f3, .positions .f9 {background-color: #34A853!important;}
.positions .f4, .positions .f5 {background-color: chocolate!important;}
.hands>div{opacity:1;border:transparent;}
.key{color:#024}

/*** HANDS: ***/
.hands{font-size:0.8em}
.hands>div{width:1em;height:3.5em;display:inline-block;background:burlywood;border-radius:2em;border:solid 2px chocolate;opacity:0.8}
.hands>div:nth-of-type(1){height:3em}
.hands>div:nth-of-type(10){height:3em}
.hands>div:nth-of-type(5){height:2em;margin-right:3em}
.hands>div:nth-of-type(6){height:2em}
.hands>div.highlight{background:chocolate}

@media only screen and (min-width: 750px) 
{
	body{font-size:18pt}
	aside{display:block}
	.page-grid{display:grid;gap:1em;grid-template-columns:1fr 650px 1fr;margin-top:1em}
	main{box-shadow: 0px 0px 20px #000;border-radius:0.5em}
	section{margin:0 1em 1em 1em;border-radius:0.5em}
	fieldset{border-width:3px}
	fieldset>fieldset{border-color:#579;border-style:solid}
	h1.banner span{display:inline}
	footer a{display:inline-block;margin:1em}
	.buttons a:not(.buttons-block a){display:inline-block;margin:0.5em 0}
	textarea{width:25em}
	.keyboard {display: inline-block;font-size:0.8em;}			
}

/*** ADS: ***/

.ads.content{display:none}

@media only screen and (min-width: 650px)
{
	.results-columns{display:grid;grid-template-columns:1fr 1fr}
	.ads.content{display:block}
}

.ads.sidebar{display:none}

@media only screen and (min-width: 1250px)
{
	.ads.sidebar{display:block}
}