/* CSS Document */
body{
	margin-top: 5px;
	text-align:center;
	background: #00BCD4;
}

div.load{
	position: absolute;
    width: 100%;
    height: 100%;
	margin-top: -5px;
    background-color: #795548;
		background-image:url('bg.png');
		background-size:cover;
	box-shadow: 0px 5px 4px rgba(0,0,0,0.8);
	z-index: 2;
}

div.load img{
	width: 150px;
    margin-top: calc(50vh - 75px);
}

div.load .site{
	color:#CCC;
	font-size:8px;
}

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

div.telaMenus{
	position: absolute;
    width: 100%;
    height: 100%;
	margin-top: -5px;
    background: #795548;
	color:#FFF;
	z-index: 1;
	transition: 5s;
}
div.telaMenus h1{
	text-shadow: 0px 0px 10px #000;
}

div.botao{
    display: table;
    margin: 10px auto;
    padding: 10px 0px;
	font-size: 16px;
    text-align: center;
    color: #666;
    width: 250px;
    line-height: 30px;
	border-radius: 5px;
	background: #FFF;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.8);
}

div.nivel1,div.nivel2,div.nivel3{
	display: inline-table;
	background: #999;
    margin: 10px;
	width: 140px;
}
div.btVoltar{
	margin: 40px auto 10px auto;
	padding: 0px;
	background: rgba(255, 255, 255, 0.8);
}
/*-------------------*/

div.escolha{
	position: absolute;
    width: 100%;
    height: 100%;
	margin-top: -5px;
	color:#FFF;
	z-index: 1;
	display: none;
}

div.eDitado{
	background: #8BC34A;
}
div.eEscalas{
	background: #FF9800;
}
div.eCampo{
	background: #00BCD4;
}

div.escolha .btsobre{
	position: absolute;
    background: rgba(255, 255, 255, 0.7);
    width: 20px;
    line-height: 20px;
    border-radius: 10px;
    color: #000;
    top: 15px;
    right: 20px;
}

div.escolha span{
	margin: 30px 0px;
    display: block;
    font-size: 14px;
}

div.escolha h2{
	margin:25px auto 0px auto;
}

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

div.sobre{
	display:none;
	position: absolute;
    width: 90%;
    height: 90%;
    margin-top: 2%;
    background: #ccd9e5;
    color: #666;
    z-index: 3;
    margin-left: 5%;
    border-radius: 10px;
    box-shadow: 0px 0px 8px 1px #000;
}
div.sobre div{
    width: 500px;
    font-size: 16px;
    margin: 70px auto -50px auto;
}
div.sobre div img{
	width: 150px;
    margin: 30px;
}

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

div.acordeMaior{
	position: absolute;
    width: 100%;
    height: 100%;
	margin-top: -5px;
    background: #FF9800;
	color:#FFF;
	z-index: 1;
	display:none;
}
div.acordeMaior ul.amaiorNotas{
	margin-left: calc(50% - 232px);
    border-bottom: 1px solid #CCC;
    display: table;
}

div.acordeMaior ul.amaiorNotas li{
	float: left;
    font-size: 30px;
    margin: 10px -1px;
    border: 1px solid #ccc;
    border-top: 0px;
    border-bottom: 0px;
    padding: 0px 6px;
}

div.acordeMaior ul.amaiorNotas li.notaDivT{
	font-size: 16px;
    height: 21px;
    margin-top: 13px;
	border: 0px;
}

div.acordeMaior ul.amaiorNotas li.notaDivB{
    font-size: 16px;
    height: 21px;
    margin: 30px 0px 0px -15px;
	border: 0px;
}
div.acordeMaior ul.amaiorTeste{
	clear: both;
	width: 490px;
    margin: 10px auto 0px auto;
}

div.acordeMaior ul.amaiorTeste li{
	display: inline-block;
    font-size: 36px;
    margin: 10px 1px;
    border: 1px solid #FFF;
    border-radius: 5px;
    width: 55px;
    line-height: 40px;
	text-shadow: 0px 0px 3px #333;
}

div.acordeMaior ul.amaiorTeste li.n1{
	background: #00BCD4;
	color: #FFF;
}

div.acordeMaior img{
	width: 440px;
    margin: -14px 0px 10px 0px;
    height: 25px;
}

div.acordeMaior ul.amaiorTesteGrau{
	font-weight: 100;
    color: #ccc;
	margin-top: -18px;
}

div.acordeMaior ul.amaiorTesteGrau li.npos{
	display: inline-block;
    font-size: 16px;
    margin: 0px 1px;
    border: 0px;
    width: 55px;
    line-height: 25px;
}

div.acordeMaior div.btValidar, div.acordeMaior div.btVoltar{
	margin: 8px 0px 0px 5px;
    padding: 0px;
    width: 120px;
    line-height: 24px;
}

div.acordeMaior .aviso{
	display: none;
	position: fixed;
    background: #FFF;
    color: #000;
    padding: 30px 20px;
    width: 420px;
    font-size: 18px;
    margin-left: -210px;
    left: 50%;
    top: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 1px;
}

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

img.teclas{
	width: 99%;
    margin-top: -35px;
    margin-bottom: 5px;
}

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

div.menu{
	display: inline-block;
    width: 160px;
	height: 226px;
}

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

div.escolha div.placar{
	position: absolute;
    width: 100%;
    bottom: 0px;
    background: rgba(255, 255, 255, 0.8);
    line-height: 25px;
    color: #003e7c;
	text-align: left;
    padding-left: 10px;
}
div.placar b{
	margin: 0px 5px;
}

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

div.sensorial{
	display:none;
	background: #8BC34A;
    margin-top: -5px;
	height: 100vh;
}

div.sensorial div.btRefere, div.sensorial div.btDitado, div.sensorial div.btVerifi, div.sensorial div.btVoltar{
	margin: 8px 0px 0px 5px;
    padding: 0px;
    width: 120px;
    line-height: 24px;
}

div.sensorial div.pontos {
    display: table;
    margin: 40px 0 0 5px;
    padding: 6px 0px;
    font-size: 16px;
    text-align: center;
    color: #666;
    width: 120px;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.8);
}

.textNota{
	display: none;
    position: fixed;
    background: #FFF;
    color: #000;
    padding: 30px 20px;
    width: 420px;
    font-size: 18px;
    margin-left: -210px;
    left: 50%;
    top: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 1px;
}

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

div.pauta{
	display: inline-block;
	width: 350px;
    height: 220px;
	background:url("pauta.png");
	background-size: 390px 231px;
	border-radius: 5px;
}

h1{
	font-size: 30px;
    margin-top: 25px;
    margin-bottom: 25px;
    text-align: center;
}

p{
	display:block;
	visibility:hidden;
	width: 20px;
    height: 20px;
    border: 1px solid #999;
	background: rgba(204, 204, 204, 0.30);
    border-radius: 10px;
    position: relative;
}

p.si1{ top:  74px; left: 30%; }
p.si2{ top:  54px; left: 40%; }
p.si3{ top:  34px; left: 50%; }
p.si4{ top:  14px; left: 60%; }
p.si5{ top:  -4px; left: 70%; }
p.si6{ top: -24px; left: 80%; }

p.sol1{ top:  -45px; left: 30%; }
p.sol2{ top:  -65px; left: 40%; }
p.sol3{ top:  -85px; left: 50%; }
p.sol4{ top: -105px; left: 60%; }
p.sol5{ top: -125px; left: 70%; }
p.sol6{ top: -145px; left: 80%; }

p.mi1{ top: -114px; left: 30%; }
p.mi2{ top: -134px; left: 40%; }
p.mi3{ top: -154px; left: 50%; }
p.mi4{ top: -174px; left: 60%; }
p.mi5{ top: -194px; left: 70%; }
p.mi6{ top: -214px; left: 80%; }

p.do1{ top: -244px; left: 30%; }
p.do2{ top: -264px; left: 40%; }
p.do3{ top: -284px; left: 50%; }
p.do4{ top: -304px; left: 60%; }
p.do5{ top: -324px; left: 70%; }
p.do6{ top: -344px; left: 80%; }

p.la1{ top: -301px; left: 30%; }
p.la2{ top: -321px; left: 40%; }
p.la3{ top: -341px; left: 50%; }
p.la4{ top: -361px; left: 60%; }
p.la5{ top: -381px; left: 70%; }
p.la6{ top: -401px; left: 80%; }

p.fa1{ top: -444px; left: 30%; }
p.fa2{ top: -464px; left: 40%; }
p.fa3{ top: -484px; left: 50%; }
p.fa4{ top: -504px; left: 60%; }
p.fa5{ top: -524px; left: 70%; }
p.fa6{ top: -544px; left: 80%; }

p.re1{ top: -489px; left: 30%; }
p.re2{ top: -509px; left: 40%; }
p.re3{ top: -529px; left: 50%; }
p.re4{ top: -549px; left: 60%; }
p.re5{ top: -569px; left: 70%; }
p.re6{ top: -589px; left: 80%; }

audio{
	display:none;
}