/* ustawienia globalne */
@font-face {
    font-family: reg;
    src: url('Montserrat/Montserrat-Regular.ttf');
}

@font-face {
    font-family: bold;
    src: url('Montserrat/Montserrat-Bold.ttf');
}


@font-face {
    font-family: italic;
    src: url('Montserrat/Montserrat-Italic.ttf');
}

body{
	background-color:white;
	font-family: reg;
	
}
#logo{
	background-color:white;
	width:150px;
	margin: 10px 15px 15px 15px;
	padding-top: 5px;
	border-radius: 22px;
}
#logo img{
	width:150px;
	height:150px;
}
#stopka{
	bottom:0px;
	position:fixed;
	left:0px;
	width:100%;
	text-align:center;
	color:black;
	background-color: #fd7c25;
	font-size:12pt;
}
#info{
	float:left;
	margin: 0 auto;
	padding: 10px 0 10px 0;
	width:100%;
	font-size:10pt;
	background-color: white;
	color:black;
	text-align:  center;
	vertical-align: center;
	text-transform: uppercase;
}

#nrStron{
	margin-top:10px;
	width:100%;
	text-align:center;
}
#nrStron a:hover{
	border-bottom: 3px double #471D47;
}

a:link{
	color: #471D47;
	text-decoration:none;
}
a:hover{
	color: #471D47;
	text-decoration:none;
}
a:active{
	color: #471D47;
	text-decoration:none;
}
a:visited{
	color: #471D47;
	text-decoration:none;
}

/* ustawienia strony logowania */

table#panelLogowania{
	text-align:center;
	margin: auto;
	margin-top: 2%;
	width: 600px;
	border: 1px silver solid;
	width: 20%;
}
td#powitanie{
	width:50%;
}
#info{
	color:silver;
}
td#logowanieTd{
	width:50%;
	background-color: white;
	text-align:center;
	
}
#logowanieNaglowek{
	color:#754f5c;
	font-size: 16pt;
	margin: 10px 0px 5px 0px;
}

table#daneLogowania{
	margin: 0 auto;
}
/*#logowaniePanelWychowawcy{
	float:left;
	width:300px;
	border: 6px inset #fd7c25;

	background-color: #fd7c25;
	background-color:#7A007A;
}*/
#logowaniePanelUzytkownikaNaglowek{
	color:#2690cf;
	font-size: 16pt;
	font-family: bold;
	margin: 10px 0px 5px 0px;
}

/*#logowaniePanelWychowawcyNaglowek{
	margin-bottom:10px;
	border-bottom: 6px inset #bd5d1c;
	background-color:#bd5d1c;
	color:silver;
	font-size: 16pt;
}*/

/*ustawienie wyglądu strony zalogowanego użytkownika */

#stronaUzytkowa{
	margin:auto;
	width:100%;

	border: 6px inset 9A9A9A;
	
	/*background-color:silver;
*/}
#menu{
	z-index:3;
	position: fixed;
	border-top-right-radius: 25px;
	height:100%;
	top: 15px;
	left: 0;
	float:left;
	width:190px;
	background-color:#f89946;
/*	border-right: 6px solid #844584;
	background-color:#763076;
*/
	}


#informacjeOUzytkowniku{
	z-index:2;
	top: 0; 
	left: 0;
	width: 100%;  
	position: fixed;
	color:black;
	background-color:white;
/*	border-bottom: 1px silver solid;
	*/
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
}
.kleft{
	float:left;
	width:40%;
	text-align:left;  
}
.kright{ 
	float:left;
	width:60%;
	text-align:right;  
}
#informacjeOUzytkowniku img#logo{
	height: 40px;
}

#informacjeOUzytkowniku table{
	float:right; 
	color:silver;
}



#tresc{

    width: 100%;
    margin: 0 auto;
    padding-top: 50px; 
}
.podMenu{
	width:185px;
	margin-top:2px;
	margin-bottom:2px;
	border-right: 0px outset #2690cf;
	border-bottom: 1px solid #2690cf;
	padding-top: 4px;
	padding-bottom: 4px;
	background-color:#f89946;
	}

.podMenu:hover{
	width:185px;
	margin-top:2px;
	margin-bottom:2px;
	border-right: 5px outset #2690cf;
	border-bottom: 1px solid #2690cf;
	padding-top: 4px;
	padding-bottom: 4px;
	background-color:#bd5d1c;
	font-weight: bold;
}

.podMenu:hover a.menu{
	color:white;
}

.podMenuSt2{
	width:175px;
	margin-top:2px;
	margin-bottom:2px;
	border-right: 0px outset #bd5d1c;
	border-bottom: 1px solid #bd5d1c;
	padding-top: 4px;
	padding-left: 5px;
	padding-bottom: 4px;
	background-color:#fd7c25;
	font-size:small;
	}

.podMenuSt2:hover{
	width:175px;
	margin-top:2px;
	margin-bottom:2px;
	border-right: 5px outset #bd5d1c;
	border-bottom: 1px solid #bd5d1c;
	padding-top: 4px;
	padding-left: 5px;
	padding-bottom: 4px;
	background-color:#bd5d1c;
	font-weight: bold;
	font-size:small;
}

.podMenuSt2:hover a.menu{
	color:white;
	width:100%;
}

a.menu{
	color:5b101a;
	text-decoration:none; 
	width:100%;
	}

/* Tabele */
table.wychowankowie{
	width:80%;
	margin:auto;
	margin-top: 20px;
}

/* do ćwiczeń */

#wyborTrybu{
	width:100%;
	font-size:12pt;
	background-color: white;
	color:black;
	text-align:center;
	vertical-align: center;
}
#wyborTrybu table{
	margin: 0 auto;
}

#wyborTrybu #nowyUzytkonwik{
	padding-left:20%;
}

#informacja{
	width: 90%;
	margin: 0 auto;
	color: white;
	font-size: 14pt;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 5%;
	padding-left: 5%;
	text-align:right;
	border: 1px #f29a34 inset;
	background-color: #f29a34;
	}
#informacjaGrupa{
	width: 100%;
	margin: 0 auto;
	color: white;
	font-size: 18pt;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align:center; 
	border: 1px #f29a34 inset;
	background-color: #f29a34;
	}
#informacja[wielkosc~=max]{
	margin-top: 30px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 10px 5px 10px 5px;
	border: 5px #f89946 solid;
	border-top: 10px #f89946 solid; 
	border-top-left-radius: 22px;
	width: 100%;
}
#kafelek{
	
	padding: 10px 0 10px 0;
	width: 100%;
	font-size:12pt;
	font-family: bold;
	background-color: white;
	color: #848484;
	text-transform: uppercase;
	text-align:center;
}


.kafelekDuzy{
	float:left;
	padding: 10px 0 10px 0;
	width:80%;
	font-size:12pt;
	border-top: 1px solid #2690cf;
	border-bottom: 1px solid #2690cf;
	background-color: white;
	color:black;
	vertical-align: center;
	text-transform: uppercase;

}

.kafelekDuzy:hover{
	background-color: #a6c0cf;
}




#cwiczenieCzescGlownaObrazy{
	 display: none;
	 margin: 5px 5px 5px 5px;
	 width: 353px;
	 height: 500px ;
	/* background-color: #141414; */
	 padding: 20px 20px 20px 20px;
	 vertical-align: center;
	 text-align: center;
	 border-radius: 22px;
	
}

.liczenieLiczba{
	font-size: 120pt;
	font-family: arial; 
}

.wynikOK{
	color:green;
	font-size: 40pt;
}
.wynikZle{
	color:red;
	font-size: 40pt;
}  

img.cwiczenie{
	margin: 0 auto;
	border: 4px outset silver;
	background-color:white;
	height:80%;
}
img.cwiczenie_koniec{
	margin: 0 auto;
	width:80%;
}


#koniecCwiczenia{
	 display: none;
	float:left;
	padding: 10px 0 10px 0;
	width:100%;
	font-size:12pt;
	background-color: white;
	color:black;
	vertical-align: center; 
	text-transform: uppercase;
	padding-top: 100px;

}

#zegarWyswietlacz{
	position: fixed;
	top:120px;
	left:50px;
	background-color: white;
	padding: 10px 0 10px 0;
	font-size:12pt;
	width: 120px;
	text-align:Center;
	background-color: white;
	color:silver;
	vertical-align: center;
	border: 1px solid silver;
	border-radius: 10px;
}
#zegarWyswietlacz table{
	color: silver;
}

#zegarWyswietlacz img{
	display:none;
}
.zegarNaglowek{
	border-bottom: 2px double #471D47;
}

.ok{
	color:green;
}
.zle{
	color:red;
}
.startBox{
	width:100%;
	text-align:center;
}
img.start{
	display: block;
	margin: 0 auto;
}

#start{
	margin:auto;
	margin-top:10px;
	width:100%;
}

#startKropka{
	margin:auto;
	margin-top:10px; 
	width:100%;
}

#cwiczenieCzescGlowna{
	text-align:center;
	margin-bottom:20px;
	display: none;
	font-size: 20pt;
	
}
#koniecCwiczenia{
	text-align:center;
	margin-bottom:20px;
}

/* wyniki cwiczenia */
#zaliczone{
	border: 2px inset green;
	background-color: #4af44a;
	color: #004200;
	width: 20%;
	margin:auto;
}

#bledy{
	border: 2px inset red;
	background-color: #ff7c7c;
	color: #890000;
	width: 20%;
	margin:auto;
}

#pokazCzas{
	padding: 10px 0 10px 0;
	width: 100%;
	font-size:12pt;
	font-family: bold;
	background-color: white;
	color: #848484;
	text-transform: uppercase;
	text-align:center;
}

#data{
	padding: 10px 0 10px 0;
	width: 100%;
	font-size:12pt;
	font-family: bold;
	background-color: white;
	color: #848484;
	text-transform: uppercase;
	text-align:center;
}

#wynikiCwiczenia{
	margin:auto;
	margin-bottom:10px;
	width:100%;
	padding-top:20px; 
	text-align:center;
}
#wynikiCwiczenia table{
	margin:auto;
	width:100%;
	text-align:left;
	vertical-align:top;
}

#srodek{
	margin:auto;
	width:100%;
	height:auto;
	text-align:center;
}
#stop{
	clear:both;
}

#kropkaBox{
	display: none;
	margin:auto;
	margin-top:30px;
	width:800px;
	height:700px;
	background-color:white;
}
#obrazkiBox{
	margin:auto;
	margin-top:30px;
	width:800px;
	height:700px;
	background-color:white;
}
#obrazkiBoxPo{
	margin:auto;
	margin-top:-3em;
	width:800px;
	height:700px;
	background-color:white;
}
pokazTo textarea{
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
}
.kropka{
	position:absolute;
}

.doKropki{
	position:absolute;
}

.doObrazkow{
	position:relative;
	width:100%;
	margin: 0px 10px 10px 10px;
}
/*tabele*/

td.ciemne{
	border: 3px solid #f29a34;
	background-color: #f29a34;
	color: white;
	vertical-align:top;
}
.odpCyfry{
	font-size:15pt;
}
td.jasne{
	background-color: white;
	color: #848484;
	font-size: 15pt;
	padding: 2% 2% 2% 2%;
	width:46%;
	vertical-align:top;
	border-right:1px silver solid;
	border-left:1px silver solid;
}
td.jasne-biale{
	background-color: white;
	color: #848484;
	font-size: 15pt;
	padding: 2% 2% 2% 2%;
	width:46%;
	vertical-align:top;
	border-right:1px silver solid;
	border-left:1px silver solid;
}


table#cwiczenia{
	width:90%;
	margin: 0 auto;
	margin-top:20px;
	border: 2px double silver;
}
table#cwiczeniaTrener{
	width:100%;
	margin:auto;
	margin-top:20px;
	border: 2px inset #2690cf;
}

table#cwiczenia td{
	min-width: 80px;
}
tr.parzysty{
	background-color: #f2d0a9;
}
tr.nieparzysty{
	background-color: #white;
}
tr.niezrobione{
	background-color: red;
}
tr.naglowek{
	background-color: #f29a34	;
	color: white;
	font-size:16pt;
} 


#absolutny{
	visibility:hidden;
	position:absolute; 
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color: black;
	filter:alpha(opacity=80);
	opacity: 0.8;
	-moz-opacity:0.8;
} 
#obrazkiWyniki{
	font-size:20pt;
}
#obrazyWynik{
	width:100%;
	font-size:20pt;
	line-height: 40pt;
}

.obrazySpan{
	display:none;
	width: 100%;
	margin:auto;
	}
.obrazy{
	width: 354px;
	max-height: 500px;
	margin: 0px auto 0px auto;
}

iframe{
	width:100%;
	height:100%;
	border:0px;
}

table.panelGlownyUzytkownika{
	margin: 20px 20px 20px 20px;
	width: 100%;
}

td.wyswietlLewy{
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 10px 5px 10px 5px;
	border: 5px #f89946 solid;
	border-top: 10px #f89946 solid; 
	border-top-left-radius: 22px;
	vertical-align: top; 
	width: 40%;
}
td.wyswietlPrawy{
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 10px 5px 10px 5px;
	border: 5px #f89946 solid;
	border-top: 10px #f89946 solid; 
	border-top-left-radius: 22px;
	vertical-align: top; 
	width: 50%;
}
td.wyswietlPrawy table.sr{
	margin: 0 auto;
}
td.wyswietlLewy table.sr{
	margin: 0 auto;
}

td.pusty{
	width:10%;
	height: 30px;
}

table img.cwiczenie{
	width: 80%;	
	height: auto;  
}

table#wynikSzczegolowy{
	width:90%;
	margin: 0 auto;
}

table#wynikSzczegolowyObrazy{
	width:90%;
	margin: 0 auto;
}

table#daneLogowania{
	margin: 0 auto;
}

table#cwiczenieKwadraty{
		width:400px;
		height:400px;
		margin: 0 auto;
		text-align: center;
		vertical-align: center;
		border-collapse:collapse;
}
td.zamalowane{
		width: 40px;
		height: 40px;
		background-color:#fd7c25;
		border: 2px solid black;

}
td.zamalowaneOk{
		width: 40px;
		height: 40px;
		background-color:green;
		border: 2px solid black;

}
td.zamalowaneZle{
		width: 40px;
		height: 40px;
		background-color:red;
		border: 2px solid black;

}
td.niezamalowane{
		width: 40px;
		height: 40px;
		background-color:white;
		border: 1px solid black;

	
}
td.zaznaczane{
		width: 50px;
		height: 50px;
		background-color:white;
		border: 1px solid black;
		font-size: 0pt;

	
}
tr.mojwynik{
	background-color: #fd7c25;
	color: white;
	font-weight: bold;
}
table#slowa{
		margin: 0 auto;
		font-size:17pt;
}
table#slowa td{
	padding-bottom: 70px;
	line-height: 150%;
	}

table#slowa tr{
	border-bottom: 1px solid silver; 
}
table#slowka{
		margin: 0 auto;
		font-size:18pt;
}
table#slowka td{
	padding-bottom: 10px;
    padding-right:	50px;
	line-height: 150%;
}
	.slowkaRight input{	
		  width: 50%;
		  border: none; /* <-- This thing here */
		  border:solid 1px #ccc;
		  border-radius: 10px;
		  padding-left:4px;
}
.tableSlowa{
	line-height:200%;
}
.tableSlowa input{
	 width: 80%;
		  border: none; /* <-- This thing here */
		  border-bottom:solid 1px silver;
}

.tableSlowka{
	line-height:200%;
}
table#opcjeLicencji{
	width:50%;
	margin: 0 auto;
	border-top: 10px #754f5c solid; 
	border-top-left-radius: 22px;
	border-right: 5px #8e6070 solid; 
	width: 40%;
}
tr.normal{
	text-align:center;
	font-size:15pt;
	font-weight:bold;
}
td.normal{
	text-align:center;
	font-size:15pt;
	font-weight:bold;
}
td.silver{
	text-align:center;
	font-size:15pt;
	background-color:silver;
	font-weight:bold;
}
td.silver2{
	text-align:center;
	font-size:15pt;
	background-color:#ececec;
	font-weight:bold;
}
td.silver3{
	background-color:#f7f7f7;
	}
td.gold{
	text-align:center;
	font-size:15pt;
	background-color:gold;
	font-weight:bold;
	
}
td.gold2{
	text-align:center;
	font-size:15pt;
	background-color:#ffed8b;
	font-weight:bold;
	
}
td.gold3{
	background-color:#fffadd;
	
}
.wyr{
	font-weight:bold;
	color:#fe7d26;
}
.ziel{
	font-weight:bold;
	color:green;
}

#logoWRejestracji{
	width:10%;
	margin: 0 auto;
    text-align: center;
	
}
#logoWRejestracji img{
	width:100%;
    text-align: center;	
}

form#rejestracja{
	width:50%;
	margin: 0 auto;
}
form#rejestracja h1{
	text-align:center;
}
form#rejestracja input{
	 border: none; /* <-- This thing here */
	 border:solid 1px #ccc;
	 border-radius: 10px;
	 padding-left:4px;
}
form#rejestracja table{
	width: 50%;
	margin: 0 auto;
}
form#rejestracja button{
	width: 100%;
}
#reklamaSDP{
	width:40%;
	margin: 0 auto;
}
#reklamaSDP img{
	width:100%;
}
#linkDoRejestracji{
	text-align:Center;
	width:70%;
	margin: 0 auto;	
	margin-top: 30px;
	margin-bottom: 30px;

}
#linkDoRejestracji a{
	color: #fd7c25;
}

#linkDoRejestracji a:hover{
	color: #fdb584;
}
.pytaniaDoKadru{
	text-transform: none;
	text-align:left;
	width:60%;
	margin: 0 auto;
}

table#sekwencja{
	margin: 10 auto;
}

table#sekwencja td{
	width: 102px;
	height: 102px;
	border: 1px solid black;
	text-align:center;
	
}

img#zielonyS{
	display: none;
	width: 102px;
	height: 100px;
}
img#czerwonyS{
	display: none;
	width: 102px;
	height: 100px;
}
img#niebieskiS{
	display: none;
	width: 102px;
	height: 100px;
}
img#zoltyS{
	display: none;
	width: 102px;
	height: 100px;
	}
#restart{
		display:none;
	}
	
img.twarz{
	height: 400px;
}
img.twarzOdp{
	height: 200px;
}

img.twarzWynik{
	height: 150px;
}
.Tok{
	color:green;
	background: white;
	border: 2px solid green;
	height: 60px;
	width: 200px;
	text-align:center;
	padding: 0;
	margin-top: 0;
}
.Tzle{
	color:red;
	background: white;
	border: 2px solid red;
	height: 60px;
	width: 200px;
	text-align:center;
	padding: 0;
	margin-top: 0;
}
.Tpuste{
	color:blue;
	background: white;
	border: 2px solid blue;
	height: 60px;
	width: 200px;
	text-align:center;
	padding: 0;
	margin-top: 0;
}


table#logowaniem{
	text-align:center;
	margin: auto;
	margin-top: 2%;
	width: 600px;
	border: 1px silver solid;
	width: 40%;
	background-color:  #2791d0;
} 
td#powitanie{
	width:50%;
	background-color:  white;
}
td#logowaniePanelUzytkownika{
	width:50%;
	background-color: white;
	
}
#logowaniePanelUzytkownikaNaglowek{
	color: black;
	font-family: bold;
	font-weight:bold;
	font-size: 16pt;
	margin: 10px 0px 5px 0px;
}

table#daneLogowania{
	margin: 0 auto; 
}

#panelLogowania input{ 
	border: 0px;
	border-bottom: silver 1px solid;
	padding-top:5px;
	text-align: left;
	font-size:14pt;
}
button.zaloguj{
			    background-color: orange;
				text-transform: uppercase;
				padding: 5px 35px;
				margin-top: 5px;
				color: white;
				border: orange solid 2px;
				font-weight: bold;
				font-size: 16px;
				cursor: pointer ;
		}
button.zaloguj:hover{
			    background-color: orange; 
				text-transform: uppercase;
				padding: 5px 35px;
				margin-top: 5px;
				color: white;
				border: orange inset 2px;
				font-weight: bold;
				font-size: 16px;
				cursor: pointer ;
		}
#topper img{
	width:40px;
}
#topper td{
	border-right: silver 1px solid;
	height: 50px;
	vertical-align:middle;
}
#topper td.pierwszy{
	border-left: silver 1px solid;
	border-right: silver 1px solid;

}

textarea{
	border: 1px silver solid;
	font-size:16pt;
	font-family:reg;
	text-align:Center;
}
input{
	border: none;
	border-bottom: 1px silver solid;
	font-size:16pt;
	font-family:reg;
	text-align:Center;
	color: silver;
}
select{
	border: none;
	border-bottom: 1px silver solid;
	font-size:16pt;
	font-family:reg;
	text-align:center;
	color: silver;
}
option{
	text-align:center;
}
.nameForm{
	font-family: italic;
	font-style: italic;
	font-size:8pt;
	color:silver;
}

h1.nazwaGrupy{
	text-align: center;
	color: #848484;
	text-transform: uppercase;
	
}
table#menuGrupa{
	width:80%;
}
table#menuGrupa td{
	width: 25%;
	height: 150px;
}
table#menuGrupaM{
	width:90%;
}
table#menuGrupaM td{
	width: 20%;
	height: 150px;
}
table#rankingiWGrupie{
	width:100%;
}
td.ranking{
	width:20%;
	vertical-align: top;

}
td.nick{
	width:80%;
}
td.nranking{
	width:5%;
}
td.nwynik{
	width:15%;
}
table.tranking{
	font-size:8pt;
	text-align:center;
}
td.rankingnick{
	font-size:10pt;
	text-align:left;
}

#informacja details{
	background-color:white;
	color:black;
}
summary{
	writing-mode: vertical-lr;
	text-orientation: sideways-right;
	font-size:30px;
}
details{
	position: absolute;
	left: 0px;
	top: 50%;
	background-color:white;
	border: solid 1px silver;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	width:35px;

}

details[open]{
	position: relative;
	background-color:white;
	border: solid 1px silver;
	border-radius: 20px;
	width:70%;
	margin: 0 auto;
	
	
}
details[open] summary{
	font-size:18px;
	text-orientation: upright;
	writing-mode: horizontal-tb;
	text-align:center;
}
.option{
	font-family: bold;
	font-size: 20pt;
	text-align: center;
	color: #848484;
	text-transform: uppercase;
}
img.obrazkiWynikiOdp{
	height: 200px;
}
div.wynikObrazki{
	height: 210px;	
	vertical-align:center;
}
textarea#wynikiUzytkownikTekst{
	text-align:left;
}
.tableSlowa td{
	padding-bottom: 40px;
}

table#cyfryZapamietywanie{
	margin: 0 auto;
	font-size: 20pt;
	text-align:center;
}
table#cyfryZapamietywanie td{
	padding: 2px 3px 2px 3px;
}
input.inputs{
	width: 20px;
	margin-right:5px;
}
#odpCyfryBox{
	margin: 0 auto;
	width: 250px;
}
table.obrazkiTabela{
	margin: 0 auto;
	text-align:center;
}
table.obrazkiTabela input{
	border: 1px silver solid;
}

#zmienHaslo{
	border-radius: 20px;
	border: 2px solid silver;
	background-color: white;
	float: left;
	width: 35%;
	margin-top:100px;
	margin-left:5%;
	margin-right:5%;
	padding: 10px 20px 10px 20px;
}

#zmienNick{
	border-radius: 20px;
	border: 2px solid silver;
	background-color: white;
	float: left;
	width: 35%;
	margin-left:5%;
	margin-right:5%;
	margin-top:100px;
	padding: 10px 20px 10px 20px;
}

#zmienNick i{ 
	color: silver;
}

.kolorowe_czerwony{
	color: red;
	font-size:50pt;
}
.kolorowe_zielony{
	color: green;
	font-size:50pt;
}
.kolorowe_pomaranczowy{
	color: orange;
	font-size:50pt;
}
.kolorowe_niebieski{
	color: blue;
	font-size:50pt;
}
.kolorowe_czarny{
	color: black;
	font-size:50pt;
}
.kolorowe_zolty{
	color: yellow;
	font-size:50pt;
}