@font-face
{
font-family:Roboto-Light;
src:url(roboto-light.ttf);
}

html, body
{
background-color:white;
margin:0px; 
padding:0px;
padding-top:0px;
padding-bottom:0px;
text-align:center;
font-family:Roboto;
font-size:15px;
}

div
{
font-family:Roboto-Light,Lato,Verdana;
font-size:15px;
text-align:left;	
}

table
{
border-collapse:collapse;
border:0px;
padding:0px;
font-family:Roboto-Light,Lato,Verdana;
font-size:15px;
}

td
{
padding-left:0px;
padding-right:0px;
}

input, select, textarea
{
font-family:Roboto-Light,Lato,Verdana;
font-size:14px;
}

a:link, a:visited, a:active
{
color:darkblue;
text-decoration:none;
}

a:hover
{
color:#490000;
cursor:hand;
}

a.czarny:link, a.czarny:visited, a.czarny:active
{
color:black;
text-decoration:none;
}

a.czarny:hover
{
color:black;
cursor:hand;
text-decoration:underline;
}

a.bialy:link, a.bialy:visited, a.bialy:active
{
color:white;
text-decoration:none;
}

a.bialy:hover
{
color:white;
cursor:hand;
}

a.zielony:link, a.zielony:visited, a.zielony:active
{
color:#147a00;
text-decoration:none;
}

a.zielony:hover
{
color:#0b6000;
cursor:hand;
text-decoration:underline;
}

a.czerwony:link, a.czerwony:visited, a.czerwony:active
{
color:#8a0000;
text-decoration:none;
}

a.czerwony:hover
{
color:#600000;
cursor:hand;
text-decoration:underline;
}

div
{
position:relative;
float:left;
}

#tabela_glowna
{
width:100%;
height:100%;
text-align:center;
border-collapse:collapse;
}

#kom_m2
{
background-image:url(kom_m2.png);
background-position:bottom;
background-repeat:repeat-x;
}

#kom_m4a
{
padding:0px;
border-collapse:collapse;
}

#kom_m4b
{
padding:0px;
border-collapse:collapse;
}


#kom_1a
{
height:50px;
text-align:right;
border-collapse:collapse;
padding:0px;
background-image:url(kom_1a.gif);
background-position:bottom;
background-repeat:repeat-x;
}

#kom_2a
{
width:1024px;
height:300px;	
background-image:url(logo.jpg);
background-position:top;
background-repeat:no-repeat;
background-size:1024px 300px;
padding:0px;
}

#kom_3a
{
height:30px;
text-align:center;
vertical-align:top;
padding:0px;
border-collapse:collapse;
}

#kom_4a
{
width:250px;
text-align:right;
border-collapse:collapse;
padding:0px;
padding-top:10px;
vertical-align:top;
}

#kom_4b
{
width:774px;
text-align:right;
border-collapse:collapse;
padding-top:0px;
vertical-align:top;
}

#kom_5a
{
height:40px;
text-align:right;
border-collapse:collapse;
padding-top:0px;
}

span.zielony
{
color: #17a500;
}

span.czerwony
{
color: #de0000;
}

span.niebieski
{
color: #008be4;
}

div.tabela_glowna
{
position:relative;
float:right;
width:750px;
height:auto;
margin-bottom:10px;
}

div.baner
{
position:relative;
float:left;
width:750px;
height:30px;
margin-top:20px;
margin-bottom:20px;
border-radius:5px;
}

div.wstep_tytul
{
position:relative;
float:right;
width:750px;
height:auto;
left:50%;
transform:translate(-50%,0%);
text-align:justify;
margin-bottom:20px;
font-size:18px;
}

div.wstep_tresc
{
position:relative;
float:right;
width:750px;
height:auto;
text-align:justify;
margin-bottom:20px;
}

div.wstep_warning
{
font-size:18px;
color:#bd0000;
position:relative;
float:right;
width:750px;
height:auto;
left:50%;
transform:translate(-50%,0%);
text-align:justify;
margin-bottom:20px;
}	

span.kafelek_bialy
{
font-size:14px;	
position:relative;
float:left;
left:50%;
top:50%;
transform:translate(-50%,-50%);	
}

span.kafelek_czerwony
{
font-size:14px;	
position:relative;
float:left;
left:50%;
top:50%;
transform:translate(-50%,-50%);	
}

span.kafelek_kropki
{
font-size:14px;	
position:relative;
float:left;
left:50%;
top:50%;
transform:translate(-50%,-50%);	
}

span.wyrownanie_pion_poziom
{
position:relative;
float:left;
left:50%;
top:50%;
transform:translate(-50%,-50%);	
}

span.wyrownanie_pion
{
position:relative;
float:left;
top:50%;
transform:translate(0%,-50%);	
}

span.wyrownanie_poziom
{
position:relative;
float:left;
left:50%;
transform:translate(-50%,0%);	
}

div.kafelek_czerwony
{
position:relative;
float:left;
width:18px;
height:18px;
margin-top:0px;
margin-bottom:0px;
margin-left:5px;
border-style:solid;
border-width:1px;
border-color:#dedede;
border-radius:2px;
background-color:#bf1313;
color:white;
font-weight: bold;
}

div.kafelek_bialy
{
position:relative;
float:left;
width:18px;
height:18px;
margin-top:0px;
margin-bottom:0px;
margin-left:5px;
border-style:solid;
border-width:1px;
border-color:#dedede;
border-radius:2px;
background-color:white;
color:black;
font-weight: bold;	
}

div.kafelek_kropki
{
position:relative;
float:left;
width:20px;
height:20px;
margin-top:0px;
margin-bottom:0px;
margin-left:5px;
border-style:none;
border-width:0px;
color:black;
font-weight:bold;	
}

div.wyrownanie_pion_poziom
{
position:relative;
float:left;
left:50%;
top:50%;
transform:translate(-50%,-50%);	
}

div.wyrownanie_poziom
{
position:relative;
float:left;
left:50%;
transform:translate(-50%,0%);	
}

div.wyrownanie_pion
{
position:relative;
float:left;
top:50%;
transform:translate(0%,-50%);	
}

div.guzik_zielony
{
width:120px;
height:20px;
background-color:#3dba00;
color:white;
border-radius:5px;
font-size:13px;
}

div.guzik_czerwony
{
width:120px;
height:20px;
background-color:#af0000;
color:white;
border-radius:5px;
font-size:13px;
}

div.guzik_niebieski
{
width:120px;
height:20px;
background-color:#0046af;
color:white;
border-radius:5px;
font-size:13px;
}

div.guzik_pomaranczowy
{
width:120px;
height:20px;
background-color:#e06a01;
color:white;
border-radius:5px;
font-size:13px;
}

div.guzik_fioletowy
{
width:120px;
height:20px;
background-color:#6d07a7;
color:white;
border-radius:5px;
font-size:13px;
}

a.bialy 
{
color:white;
}

a.bialy:hover 
{
color:white;
}