body { /* ustawienia dla celej strony */
font: 14px Arial, Helvetica, Verdana, sans-serif; /* czcionka: rozmiar + lista fontow zapasowych */
text-align: center; /* WYSRODKOWANIE = wyrownanie zawartosci w elemencie blokowym (np. div, p, td) */
margin: 0; /* marginesy zewn.(gora, prawy, doł, lewy) - body = cala strona = opcja auto nie dziala dla body */
padding: 0 0 0 0; /* odstepy wewnetrzne (gora/top, prawy/right, doł/bottom, lewy/left) np. odleglosc tekstu od ramki */
background: url('grafika/tapeta.png') repeat-x fixed; /* TLO: obrazek powtarzany w poziomie, wzgledem-x = repeat-x */
/* Inne wartosci tla: background-attachment: fixed; // grafika w tle przesuwana razem z trescia strony ]
background-repeat: no-repeat; // powtarzanie tla: repeat-x, repeat-y, no-repeat (poziomo, pionowo, nie powtarzaj.
background-position: X Y; // pozycja tła: X =poziomo od lewej, Y =pionowo od góry. Jednostki: px, em, cm, in, %. */
}
#kontener { /* głowny zewnetrzny kontener (element BLOKOWY) - w nim znajduja się wszystkie elementy strony */
/* z-index: 0; position: absolute; - lepiej tu nie stosowac; powoduje z ten glowny =zewnetrzny div nie jest centrowany wg okna przegladarki = lepiej to zrobic dla jakiegos div-a wewnatrz glownego */
position: relative; /* wysokosc witryny ?ek albo pozycjonowanie bazowe - pozwala pozycjonowac elementy wewnatrz */
width: 980px; /* szerokosc calej witryny */
margin: 0 auto; /* marginesy zewn. - auto = wysrodkowanie kontenera wzgl. okna przegladarki, = wysrodkowac strone */
padding: 230px 0 10px 0; /* odstepy wewnerzne: gora 230px, doł 10px, boki 0 */
background: url('grafika/kontener_zie.png'); /* tło kontenera; obrazek */
border: 0px ridge #FF0033; /* obramowanie = brak (gdy 0px) */
box-sizing: border-box; /* szerokosc zawiera padding i border = stabilizuje szerokosc, zapobiega rozszerzaniu elementu przy dodaniu paddingu i obramowania - dzieki temu, nic nie powiększa width */
/* UWAGA: bez border-box, to padding i border powiększają element = może się rozjechac; ale z z border-box, to padding i border nie powiekszają elementu = width jest stabilny. Dlatego najlepiej i wskazane jest uzywac: box-sizing: border-box, najczesciej dodaje sie go globalnie = box-sizing: border-box */
}
#srodek { /* podstawowy element BLOKOWY - tekst strony ma odległosc od kontenera */
width: 84%; /* szerokosc bloku - procentowa, dopasowuje się do kontenera */
height: auto; /* WYSOKOSC - auto = dopasowuje się do treści */
margin: 0 auto 0 auto; /* marginesy zewnetrzne - auto = wysrodkowanie bloku wzgledem okna przegladarki - ek?: zeby nie się powiekszalo okno ponad 100%, to = szerkosc auto (zamiast 0) ustawiona dla paddingow wiekszych od 0 */
padding: 0 0 0 0; /* odstepy wewnętrzne (gora/top, prawy/right, doł/bottom, lewy/left) */
background: transparent; /* TLO = przezroczyste */
border: 0px solid #FFFF00; /* obramowanie, teraz brak = 0, ale kolor na zapas gdy zmienie plan */
box-sizing: border-box; /* szerokosc zawiera padding i border = element nie rozjezdza gdy padding dla inne niż 0 = stabilizuje szerokosc */
}
#srodek2 { /* podstawowy element BLOKOWY, dla obrazków jpg z ek ksiązki matematyki */
width: 84%; /* szerokosc bloku - procentowa, dopasowuje się do kontenera */
height: auto; /* WYSOKOSC - auto = dopasowuje się do tresci */
margin: 0 auto; /* marginesy zewnetrzne - auto = wysrodkowanie bloku wzgledem okna przegladarki */
padding: 0; /* odstepy wewnętrzne (gora/top, prawy/right, doł/bottom, lewy/left) */
background: transparent; /* TLO = przezroczyste */
border: 0px solid #FFFF00; /* obramowanie, teraz brak = 0, ale kolor na zapas gdy zmienie plan */
box-sizing: border-box; /* szerokosc zawiera padding i border = stabilizuje szerokosc */
}
#labirynt { /* podstawowy element BLOKOWY - z grafika labiryntu dla mapa serwisu */
width: 90%; /* szerokosc bloku, procentowa */
height: auto; /* wysokosc - automatyczne dopasowana do tresci */
margin: 0 auto; /* marginesy zewnętrzne, wyśrodkowanie bloku */
padding: 0; /* odstępy wewnętrzne */
background: url('grafika/labirynt.png') repeat-y right; /* tło, powtarzanie pionowe, pozycja prawa */
border: 0px solid #FFFF00; /* obramowanie, grubosc zero, kolor zapisany jako szablon */
background-attachment: scroll; /* TLO przewijane razem ze strona */
box-sizing: border-box; /* szerokosc zawiera padding i border = stabilizuje szerokosc */
}
#neon { /* podstawowy element BLOKOWY - dla jpg z matematyki ksiazki, grafika neonowa */
width: 30%; /* szerokosc bloku */
height: auto; /* wysokosc - automatyczne dopasowana do tresci */
float: left; /* ustawienie obok innych elementów - oplywowo obok div-y */
margin: 0 auto; /* marginesy zewnetrzne, wysrodkowanie bloku */
padding: 0; /* odstepy wewnetrzne */
background: transparent; /* tło przezroczyste */
border: 0px solid #FFFF00; /* obramowanie, grubość zero, kolor zapisany jako szablon */
text-align: left; /* wyrownanie tekstu do lewej */
text-indent: 0px; /* brak wciecia pierwszej linii tekstu - ek?: = powieksza okienko tekstu za margines */
box-sizing: border-box; /* szerokosc zawiera padding i border = padding inny od 0 nie zmienia rozmiaru szer. elementu */
}
.neon1 { /* styl dla tekstu neonowego */
text-decoration: blink; /* efekt migania tekstu, przegladarki często ignoruja */
text-align: left; /* wyrownanie tekstu do lewej */
}
#naglowek { /* tlo naglowka strony, grafika naglowka - ek?: z-index: 0; np.=-1 w niektorych przegladarkach znika pod tapeta */
background: url('grafika/naglowek.jpg'); /* tlo, obrazek naglowka */
width: 100%; /* szerokosc naglowka, pelna szerokosc strony */
height: 140px; /* wysokosc naglowka */
position: absolute; /* pozycjonowanie absolutne - wzgledem zewnetrznego bloku = kontenera */
top: 0; /* polozenie od gory kontenera */
left: 0; /* polozenie od lewej kontenera */
border: 0; /* brak obramowania, czysty zapis */
box-sizing: border-box; /* = szerokosc zawiera padding i border = stabilizuje szerokosc */
}
#n_tytull { /* CIEN tytulu naglowka - zobacze czy wykorzystac */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #FFFF00; /* obramowanie, grubosc zero, kolor jako szablon */
width: 72%; /* szerokosc elementu */
height: 100%; /* wysokosc dopasowana do naglowka */
position: absolute; /* pozycjonowanie absolutne - wzgledem zewnetrznego bloku = kontenera */
top: 0px; /* polozenie od gory */
left: 2px; /* polozenie od lewej */
font-variant: small-caps; /* male kapitaliki */
box-sizing: border-box; /* = szerokosc zawiera padding i border = stabilizuje szerokosc */
}
#n_tytul { /* tytul naglowka - może zmienie na pozycjonowanie bezwzgledne potem zamiast oblewanie */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #FFFF00; /* obramowanie, grubosc zero, kolor jako szablon */
width: 72%; /* szerokosc elementu */
height: 100%; /* wysokosc dopasowana do naglowka */
position: absolute; /* pozycjonowanie absolutne */
top: -2px; /* polozenie od gory, lekko przesuniete */
left: 0px; /* polozenie od lewej */
font-variant: small-caps; /* male kapitaliki */
box-sizing: border-box; /* szerokosc zawiera padding i border = stabilizuje szerokosc */
}
#uwaga { /* div absolutny na menu, informacja o odświeżaniu strony */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #FFFF00; /* obramowanie, grubosc zero, kolor jako szablon */
width: 28%; /* szerokosc elementu */
height: auto; /* wysokosc dopasowana do tresci */
position: absolute; /* pozycjonowanie absolutne */
top: 100px; /* polozenie od gory */
left: 100px; /* polozenie od lewej */
color: #900; /* kolor tekstu */
text-align: center; /* wysrodkowanie tekstu */
font: 500 italic 14px/normal "Times New Roman"; /* styl czcionki */
box-sizing: border-box; /* szerokosc zawiera padding i border */
}
#uwaga1 { /* DIV absolutny nad menu - do migotającego tekstu */
background: transparent; /* tlo przezroczyste */
border: 0px solid #FF0; /* obramowanie, grubosc zero, kolor jako szablon */
width: 50%; /* szerokosc elementu */
height: 15px; /* wysokosc elementu */
position: absolute; /* pozycjonowanie absolutne */
top: 99px; /* polozenie od gory */
left: 380px; /* polozenie od lewej */
color: #060; /* kolor tekstu */
text-align: center; /* wysrodkowanie tekstu */
font: 500 italic 13px/normal "Times New Roman"; /* styl czcionki */
line-height: 1px; /* wysokosc linii */
margin: 0 auto; /* marginesy zewnętrzne */
overflow: hidden; /* ukrycie nadmiaru tekstu */
box-sizing: border-box; /* szerokosc zawiera padding i border */
}
.blink_me { /* migający tekst */
animation-name: blinker; /* nazwa animacji */
animation-duration: 13s; /* czas trwania animacji - ek: predkość migania + #przeglad. */
animation-timing-function: linear; /* liniowy przebieg animacji */
animation-iteration-count: infinite; /* powtarzanie bez końca */
-webkit-animation-name: blinker; /* wersja dla WebKit (= silnik - Safari, stare Chrome, stare Opera) - inne to: Blink (Chrome, Opera (nowsze), Edge (nowsze)) oraz Gecko (Firefox)) */
-webkit-animation-duration: 13s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker; /* wersja dla Mozilla */
-moz-animation-duration: 13s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
@keyframes blinker { /* animacja migania */
0% { opacity: 1.0; } /* widoczne */
50% { opacity: 0.0; } /* niewidoczne */
100% { opacity: 1.0; } /* widoczne */
}
@-webkit-keyframes blinker { /* animacja dla WebKit */
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-moz-keyframes blinker { /* animacja dla Mozilla */
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#uwaga2 { /* DIV absolutny pod menu, na tekst plywajacy */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #FFFF00; /* obramowanie, grubosc zero, kolor jako szablon */
width: 50%; /* szerokosc elementu */
height: 17px; /* wysokosc elementu */
position: absolute; /* pozycjonowanie absolutne */
top: 213px; /* polozenie od gory */
left: 20px; /* polozenie od lewej */
color: #060; /* kolor tekstu */
text-align: center; /* wysrodkowanie tekstu */
font: 500 italic 14px/normal "Times New Roman"; /* styl czcionki */
line-height: 1px; /* wysokosc linii */
margin: 0 auto; /* marginesy zewnetrzne */
overflow: hidden; /* ukrycie nadmiaru tekstu */
box-sizing: border-box; /* szerokosc zawiera padding i border */
}
#uwaga2 > p { /* TEKST plywajacy wewnatrz kontenera */
position: absolute; /* pozycjonowanie absolutne */
margin: 0; /* brak marginesow */
white-space: nowrap; /* tekst w jednej linii */
animation: przesun 30s linear infinite; /* animacja przesuwania - ek: predkocs plyniecia tekstu, dla: IE itp. */
-webkit-animation: przesun 30s linear infinite; /* wersja dla WebKit (silnik - Safari, stare Chrome, stare Opera) - inne oznaczenia to: Blink (Chrome, Opera (nowsze), Edge (nowsze)) oraz Gecko (Firefox)) */
}
#uwaga2 > p:hover { /* zatrzymanie animacji po najechaniu */
animation-play-state: paused; /* zatrzymanie animacji */
-webkit-animation-play-state: paused; /* zatrzymanie animacji dla WebKit */
}
.tabb_ { /* tabela pomocnicza, element blokowy */
background: transparent; /* tlo przezroczyste */
border: 1px ridge #CDCDCD; /* obramowanie, cienka ramka ridge */
margin: 0; /* marginesy zewnetrzne */
text-align: left; /* wyrównanie tekstu do lewej */
padding: 0; /* marginesy wewnetrzne - padding: 0 0 0 0 = od gory; prawej, dolu, lewej */
width: 100%; /* szerokosc elementu */
box-sizing: border-box; /* szerokosc zawiera padding i border */
}
.tabb_0 { /* tabela pomocnicza o szerokosci 50% */
background: transparent; /* tlo przezroczyste */
border: 1px ridge #CDCDCD; /* obramowanie ridge */
margin: 0; /* marginesy zewnetrzne */
text-align: left; /* wyrównanie tekstu */
padding: 0; /* marginesy wewnetrzne */
width: 50%; /* szerokosc elementu */
box-sizing: border-box; /* szerokosc zawiera padding i border */
}
#autor { /* prawa autorskie */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #FFFF00; /* obramowanie, grubość zero, kolor jako szablon */
width: 100%; /* szerokosc elementu */
height: auto; /* wysokosc dopasowana do tresci */
position: absolute; /* pozycjonowanie absolutne */
top: 120px; /* polozenie od gory */
left: 25px; /* polozenie od lewej */
color: #FF0000; /* kolor tekstu */
text-align: center; /* wyśrodkowanie tekstu */
font: 500 italic normal 14px/normal "Times New Roman"; /* styl czcionki */
box-sizing: border-box; /* szerokosc zawiera padding i border */
}
#licznik { /* licznik odwiedzin - przyda sie jak znowu zrobie robic licznik */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #FFFFFF; /* obramowanie, grubość zero */
width: 170px; /* szerokosc elementu */
height: 250px; /* wysokosc elementu */
position: absolute; /* pozycjonowanie absolutne */
top: 10px; /* polozenie od gory */
right: 1px; /* polozenie od prawej */
color: #006600; /* kolor tekstu */
box-sizing: border-box; /* szerokosc zawiera padding i border */
}
#okno { /* miejsce na dodatki np. linki */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #FFFFFF; /* obramowanie, grubosc zero */
width: 170px; /* szerokosc elementu */
height: 100px; /* wysokosc elementu */
position: absolute; /* pozycjonowanie absolutne */
top: 240px; /* polozenie od gory */
right: 10px; /* polozenie od prawej */
color: #339900; /* kolor tekstu */
box-sizing: border-box; /* szerokosc zawiera padding i border */
}
#klik { /* rysunek klik - odswiez stronę */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #FFFFFF; /* obramowanie, grubosc zero */
width: 100px; /* szerokosc elementu */
height: 37px; /* wysokosc elementu */
position: absolute; /* pozycjonowanie absolutne */
top: 90px; /* polozenie od gory */
left: 0px; /* polozenie od lewej */
color: #FF0000; /* kolor tekstu */
box-sizing: border-box; /* szerokosc zawiera padding i border */
}
a.klikk, a.klikk:link, a.klikk:visited { /* linki ogolne strony: nieodwiedzone i kiedys tam odwiedzone */
background: url('grafika/klik6.png'); /* obrazek linku w stanie normalnym = grafika */
border: 0px ridge #FFFFFF; /* obramowanie, grubość zero */
width: 100px; /* szerokosc linku */
height: 37px; /* wysokosc linku */
top: 0; /* polozenie od gory */
left: 0; /* polozenie od lewej */
position: absolute; /* pozycjonowanie absolutne */
}
a.klikk:focus, a.klikk:hover { /* link najechany myszka lub klawiszem (np. tab) */
background: url('grafika/klik7.png'); /* obrazek linku po najechaniu = inna grafika */
border: 0px ridge #FFFFFF; /* obramowanie */
width: 100px; /* szerokosc */
height: 37px; /* wysokosc */
top: 0; /* polozenie od gory */
left: 0; /* polozenie od lewej */
position: absolute; /* pozycjonowanie absolutne */
}
a.klikk_, a.klikk:active { /* link aktualnej strony oraz link kliknięty */
background: url('grafika/klik5.png'); /* obrazek linku aktywnego = inna grafika */
border: 0px ridge #FFFFFF; /* obramowanie */
width: 100px; /* szerokosc */
height: 37px; /* wysokosc */
top: 0; /* polozenie od gory */
left: 0; /* polozenie od lewej */
position: absolute; /* pozycjonowanie absolutne */
}
#rysunek { /* div - na rysunek bezwzglednie umieszczony */
background: url('grafika/wspinaczka.png') no-repeat; /* tlo = grafika */
border: 0px ridge #FFFFFF; /* obramowanie, grubosc zero */
width: 150px; /* szerokosc rysunku */
height: 200px; /* wysokosc rysunku */
position: absolute; /* pozycjonowanie absolutne */
top: 100px; /* polozenie od gory */
left: -121px; /* polozenie od lewej */
color: #FFFF00; /* kolor tekstu (jesli jakis jest) */
}
#n_grafika { /* grafika naglowka */
background: url('grafika/uczniowie.png') no-repeat; /* tlo = grafika */
position: absolute; /* pozycjonowanie absolutne */
top: 0; /* polozenie od gory */
right: 0; /* polozenie od prawej */
width: 28%; /* szerokosc grafiki */
height: 100%; /* wysokosc dopasowana do naglowka */
/*ek: lub position: static; szer. i wysokosc auto" - nie dopasowuje do ilosci tekstu na IE
display: inline; float: left; = p3y� prawo wewnatrz elementu */
}
#n_grafika1 { /* grafika naglowka */
background: url('grafika/uczniowie1.png') no-repeat; /* tlo = grafika */
position: absolute; /* pozycjonowanie absolutne */
top: 0; /* polozenie od gory */
right: 0; /* polozenie od prawej */
width: 30%; /* szerokosc grafiki */
height: 100%; /* wysokosc dopasowana do naglowka */
}
/* linki wystepujace na stronie = w tresci = odnosniki */
a:link { /* link nieodwiedzony */
color:#006600; text-decoration:none; }
a:visited { /* link odwiedzony */
color:#336600; text-decoration:none; }
a:focus, a:hover { /* link najechany klawiszem lub myszka */
color:#666600; font-weight:700; text-decoration:none; }
a:active { /* link klikniety myszka, myszka bez puszczenia */
color:#996600; text-decoration:none; }
/* poziome MENU glowne strony */
.tlomenu { /* tło menu poziomego - ek?: 100% i auto nie dziala w Chrome */
clear: both; /* nowa linia pod elementami float */
width: 100%; /* szerokosc menu */
height: 40px; /* wysokosc menu */
background: url('grafika/menu.jpg') repeat-x; /* tlo powtarzane poziomo */
position: absolute; /* pozycjonowanie absolutne - ek: wzglendem zewnetrz.bloku = kontenera */
top: 140px; /* polozenie od gory */
left: 0; /* polozenie od lewej */
}
a.men, a.men:link, a.men:visited { /* linki menu: nieodwiedzone i kiedys odwiedzone */
background-color:transparent; /* tlo przezroczyste */
color:#006600; /* kolor tekstu */
display:inline; /* element liniowy */
float:left; /* ustawienie w poziomie */
width:192px; /* szerokosc linku */
height:40px; /* wysokosc linku */
padding:10px 0px 0px 0px; /* margines wewnetrzny od gory */
border-right: 2px solid #006600; /* prawa ramka */
border-left: 2px solid #006600; /* lewa ramka */
font-size:17px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:center; /* wyśrodkowanie tekstu */
font-weight:700; /* pogrubienie */
letter-spacing:4px; /* odstepy miedzy literami */
font-variant:small-caps; /* male kapitaliki */
}
a.men:focus, a.men:hover { /* link menu po najechani myszka lub klawiszem, np. tab */
background: url('grafika/menu1.png') repeat-x; /* tlo po najechaniu */
color:#006600; /* kolor tekstu */
letter-spacing:4px; /* odstepy miedzy literami */
}
a.men_, a.men:active { /* link aktualnej strony oraz kliknięty */
background: url('grafika/menu_.jpg') repeat-x; /* tlo aktywnego linku */
color:#FFFFFF; /* kolor tekstu */
display:inline; /* element liniowy */
float:left; /* ustawienie w poziomie */
width:192px; /* szerokosc */
height:40px; /* wysokosc */
padding:10px 0px 0px 0px; /* margines wewnetrzny */
border-right: 2px solid #006600; /* prawa ramka */
border-left: 2px solid #006600; /* lewa ramka */
font-size:17px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:center; /* wyśrodkowanie */
font-weight:700; /* pogrubienie */
letter-spacing:4px; /* odstepy miedzy literami */
font-variant:small-caps; /* male kapitaliki */
}
/* poziome podMENU strony N A J N O W S Z E - tam gdzie 2xn w nazwie to wezsze przyciskina 153 zamiat 170 */
.tlopmen { /* tło podmenu */
clear: both; /* nowa linia pod elementami float - ek: both = nastepna linia znajdzie sie pod obiektem .luz */
width: 100%; /* szerokosc */
height: 30px; /* wysokosc */
background: url('grafika/pmenu.jpg') repeat-x; /* tlo powtarzane poziomo */
position: absolute; /* pozycjonowanie absolutne */
top: 180px; /* polozenie od gory */
left: 0; /* polozenie od lewej */
}
a.pmen, a.pmen:link, a.pmen:visited { /* linki podmenu szerokie 170px - nioedwiedzone */
background-color:transparent; /* tlo przezroczyste */
color:#FFFFFF; /* kolor tekstu */
display:inline; /* element liniowy */
float:left; /* ustawienie w poziomie */
width:170px; /* szerokosc */
height:26px; /* wysokosc */
padding:4px 0px 0px 0px; /* margines wewnetrzny */
margin:0 5px 0 5px; /* marginesy zewnetrzne */
border-right:0px solid #000000; /* ramka prawa */
font-size:15px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:center; /* wysrodkowanie */
font-weight:500; /* pogrubienie */
}
a.pmenn, a.pmenn:link, a.pmenn:visited { /* linki podmenu wezsze 153px - nieodwiedzone -
ek: - tam gdzie 2xn w nazwie to wezsze przyciskina 153 zamiat 170 */
background-color:transparent; /* tlo przezroczyste */
color:#FFFFFF; /* kolor tekstu */
display:inline; /* element liniowy */
float:left; /* ustawienie w poziomie */
width:153px; /* szerokosc */
height:26px; /* wysokosc */
padding:4px 0px 0px 0px; /* margines wewnetrzny */
margin:0 5px 0 5px; /* marginesy zewnetrzne */
border-right:0px solid #000000; /* ramka prawa */
font-size:15px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:center; /* wysrodkowanie */
font-weight:500; /* pogrubienie */
}
a.pmen:focus, a.pmen:hover { /* link szeroki po najechaniu - po najechaniu myszka lub klawiszem np. tab */
background: url('grafika/pmenu1.png') repeat-x; /* tlo po najechaniu */
color:#006600; /* kolor tekstu */
}
a.pmenn:focus, a.pmenn:hover { /* link wąski po najechaniu - tam gdzie 2xn w nazwie to wezsze */
background: url('grafika/pmenu1.png') repeat-x; /* tlo po najechaniu */
color:#006600; /* kolor tekstu */
}
a.pmen_, a.pmen:active { /* link szeroki aktywny = klikniety */
color:#006600; /* kolor tekstu aktywnego */
display:inline; /* element liniowy */
width:170px; /* szerokosc */
height:26px; /* wysokosc */
float:left; /* ustawienie w poziomie */
padding:4px 0px 0px 0px; /* margines wewnetrzny */
margin:0 5px 0 5px; /* marginesy zewnetrzne */
border-right:0px solid #009900; /* ramka prawa aktywna */
background: url('grafika/pmenu_.png') repeat-x; /* tlo aktywnego linku */
font-size:15px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:center; /* wyśrodkowanie */
font-weight:500; /* pogrubienie */
}
a.pmenn_, a.pmenn:active { /* link waski aktywny = klikniety */
color:#006600; /* kolor tekstu aktywnego */
display:inline; /* element liniowy */
width:153px; /* szerokosc */
height:26px; /* wysokosc */
float:left; /* ustawienie w poziomie */
padding:4px 0px 0px 0px; /* margines wewnetrzny */
margin:0 5px 0 5px; /* marginesy zewnetrzne */
border-right:0px solid #009900; /* ramka prawa aktywna */
background: url('grafika/pmenu_.png') repeat-x; /* tlo aktywnego linku */
font-size:15px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:center; /* wyśrodkowanie */
font-weight:500; /* pogrubienie */
}
/* STOPKA menu N A J N O W S Z E */
.tlostopka { /* tło stopki dolnej */
clear: both; /* both = nowa linia pod elementami float = pod obiektem .luz */
width: 100%; /* szerokosc stopki */
height: 17px; /* wysokosc stopki */
background: #CCFFCC; /* tlo stopki */
position: fixed; /* przyklejona do ekranu */
bottom: 0; /* polozenie na dole */
left: 0; /* polozenie od lewej */
border: 2px ridge #FFFFFF; /* obramowanie */
}
a.stop, a.stop:link, a.stop:visited { /* linki stopki: nieodwiedzone */
background-color:transparent; /* tlo przezroczyste */
color:#006600; /* kolor tekstu */
display:inline; /* element liniowy */
float:left; /* ustawienie w poziomie */
letter-spacing:0px; /* odstepy miedzy literami */
width:120px; /* szerokosc linku */
height:15px; /* wysokosc linku */
padding:0 0 0 0; /* marginesy wewnetrzne */
margin:0 0 0 0; /* marginesy zewnetrzne */
border-right:0px solid #000000; /* ramka prawa */
font-size:13px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:center; /* wysrodkowanie tekstu */
font-weight:500; /* pogrubienie */
}
a.stop:focus, a.stop:hover { /* link stopki po najechaniu */
background:#00FF00; /* tlo po najechaniu */
color:#006600; /* kolor tekstu */
}
a.stop_, a.stop:active { /* link aktywny w stopce */
color:#006600; /* kolor aktywny */
display:inline; /* element liniowy */
width:120px; /* szerokosc */
height:15px; /* wysokosc */
float:left; /* ustawienie w poziomie */
letter-spacing:0px; /* odstepy miedzy literami */
padding:0 0 0 0; /* marginesy wewnetrzne */
margin:0 0 0 0; /* marginesy zewnetrzne */
border-right:0px solid #009900; /* ramka prawa aktywna */
background:#66FF00; /* tlo aktywnego linku */
font-size:13px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:center; /* wysrodkowanie */
font-weight:500; /* pogrubienie */
}
.copyright { /* tekst praw autorskich */
color:#000000; /* kolor tekstu */
display:inline; /* element liniowy */
width:250px; /* szerokosc */
height:15px; /* wysokosc */
float:right; /* ustawienie po prawej */
padding:0 0 0 0; /* marginesy wewnetrzne */
margin:0 0 0 0; /* marginesy zewnetrzne */
border-right:0px solid #009900; /* ramka prawa */
font:500 italic 13px; /* styl czcionki */
background:transparent; /* tlo przezroczyste */
text-align:right; /* wysrodkowanie do prawej */
}
/* stopka górna; menu N A J N O W S Z E - jesli sie przyda */
.tlostopka_g { /* tło stopki górnej */
clear: both; /* nowa linia */
width: 100%; /* szerokosc */
height: 17px; /* wysokosc */
background: #CCFFCC; /* tlo */
position: fixed; /* przyklejona do ekranu */
top: 0; /* polozenie na górze */
left: 0; /* polozenie od lewej */
border: 0px solid #3300FF; /* obramowanie */
display:inline; /* element liniowy */
float:left; /* ustawienie w poziomie */
}
/* pionowe podMENU strony N A J N O W S Z E */
.tlopion { /* tło pionowego podmenu */
clear: both; /* nowa linia pod elementami float , ek: = pod obiektem .luz */
width:150px; /* szerokosc kontenera */
height:auto; /* wysokosc automatyczna */
background: url('grafika/kontener_zie.png') repeat-y; /* tlo powtarzane pionowo */
border:0px solid #FFFF00; /* obramowanie */
position:absolute; /* pozycjonowanie absolutne - polozenie absolutne wzgledem zewnetrz.bloku = kontenera*/
top:230px; /* polozenie od gory */
left:770px; /* polozenie od lewej */
}
a.pion, a.pion:link, a.pion:visited { /* linki pionowego menu: nieodwiedzone i odwiedzone kiedys */
background-color:transparent; /* tlo przezroczyste */
color:#006600; /* kolor tekstu */
display:block; /* element blokowy */
width:90%; /* szerokosc linku */
height:30px; /* wysokosc linku */
padding:5px 0px 0px 10px; /* margines wewnetrzny */
margin:0 0 0 0; /* marginesy zewnetrzne */
border-right:0px solid #000000; /* ramka prawa */
font-size:15px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:left; /* wyrównanie tekstu */
font-weight:500; /* pogrubienie */
}
a.pion:focus, a.pion:hover { /* link po najechaniu */
background: url('grafika/pmenu1.png') repeat-x; /* tlo po najechaniu */
color:#006600; /* kolor tekstu */
}
a.pion_, a.pion:active { /* link pionowy aktywny */
color:#006600; /* kolor aktywny */
display:block; /* element blokowy */
width:90%; /* szerokosc */
height:30px; /* wysokosc */
padding:5px 0px 0px 10px; /* margines wewnetrzny */
margin:0 0 0 0; /* marginesy zewnetrzne */
border-right:0px solid #009900; /* ramka prawa aktywna */
background: url('grafika/pmenu_.png') repeat-x; /* tlo aktywnego linku */
font-size:15px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:left; /* wyrównanie tekstu */
font-weight:500; /* pogrubienie */
}
/* poziome menu do przykladow */
.tlonap { /* tło poziomego menu */
clear: both; /* nowa linia pod elementami float = nastepna linia znajdzie sie pod obiektem .luz */
width: 100%; /* szerokosc */
height: 0px; /* wysokosc (0 = brak tla) */
background: transparent; /* tlo przezroczyste */
position: static; /* pozycjonowanie standardowe */
top: 10px; /* polozenie (nie dziala przy static, ale nie szkodzi) */
left: 0; /* polozenie */
}
a.nap, a.nap:link, a.nap:visited { /* linki poziomego menu */
background-color:transparent; /* tlo przezroczyste */
color:#006600; /* kolor tekstu */
display:inline-table; /* element tabelowy inline */
float:left; /* ustawienie w poziomie */
width:70px; /* szerokosc linku */
height:27px; /* wysokosc linku */
padding:4px 0px 0px 0px; /* margines wewnetrzny */
margin:0 5px 0 5px; /* marginesy zewnetrzne */
border-right:0px solid #000000; /* ramka prawa */
font-size:17px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:center; /* wysrodkowanie tekstu */
font-weight:700; /* pogrubienie */
}
a.nap:focus, a.nap:hover { /* link po najechaniu */
background: url('grafika/menu1.png') repeat-x; /* tlo po najechaniu */
color:#006600; /* kolor tekstu */
}
a.nap_, a.nap:active { /* link aktywny = klikniety */
color:#006600; /* kolor aktywny */
display:inline; /* element liniowy */
width:70px; /* szerokosc */
height:27px; /* wysokosc */
float:left; /* ustawienie w poziomie */
padding:4px 0px 0px 0px; /* margines wewnetrzny */
margin:0 5px 0 5px; /* marginesy zewnetrzne */
border-right:0px solid #009900; /* ramka prawa aktywna */
background: url('grafika/menu_.png') repeat-x; /* tlo aktywnego linku */
font-size:17px; /* wielkosc czcionki */
text-decoration:none; /* bez podkreslenia */
text-align:center; /* wyśrodkowanie */
font-weight:700; /* pogrubienie */
}
div { /*podstawowy element BLOKOWY - ustawienia standardowe */
/* z-index: 0; position: absolute; - pozycjonowanie wzgledem zewnetrznego elementu o position-relative */
width: 100%; height: auto; /* szerokosc i wysokosc bloku */
margin: 0 auto 0 auto; /*marginesy zewnetrzne */
padding: 0 0 0 0; /* marginesy wewnetrzne */
background: transparent; border: 0 ridge #FF0033; /*TLO i obramowanie*/
}
.luz { /* transparentna przerwa miedzy div - zwlaszcza plywajace */
clear: both; /* both = nastepna linia znajdzie sie pod obiektem .luz*/
width: 100%; height: 10px; background: transparent; }
.luz1 { /* transparentna przerwa miedzy div - zwlaszcza plywajace */
clear: both; /* both = nastepna linia znajdzie sie pod obiektem .luz*/
width: 100%; height: 60px; background: transparent; border: 0px ridge #FF0033; }
/* CZCIONKI i tekst */
p { /* Akapit - oraz w razie potrzeby sposob traktowania wielokrotnych spacji: white-space: nowrap */
margin: 0; /* margines zewnętrzny - to chyba nie dziala na tekst ?? */
padding: 7px 0px 7px 0px; /* marginesy wewnetrzne = odstepy od tekstu */
background-color: transparent; /* tlo przezroczyste */
text-align: justify; /* wyjustowanie tekstu */
text-indent: 30px; /* wciecie pierwszej linii */
}
.napis { /* duzy napis naglowkowy */
font-size: 30px; /* wielkosc czcionki */
color: #660000; /* kolor tekstu */
text-align: center; /* wysrodkowanie */
letter-spacing: 0px; /* odstepy miedzy literami */
margin-top: 12px; /* margines gorny */
margin-bottom: 5px; /* margines dolny */
background: transparent; /* tlo */
font-weight: 700; /* pogrubienie */
font-variant: small-caps; /* male kapitaliki */
}
.napis1 { /* duzy napis w innym kolorze */
font-size: 30px; /* wielkosc czcionki */
color: #CCFFCC; /* kolor tekstu */
text-align: center; /* wysrodkowanie */
letter-spacing: 0px; /* odstepy miedzy literami */
margin-top: 12px; /* margines gorny */
margin-bottom: 5px; /* margines dolny */
background: transparent; /* tlo */
font-weight: 700; /* pogrubienie */
font-variant: small-caps; /* male kapitaliki */
}
.napis11 { /* sredni napis jasny */
font-size: 17px; /* wielkosc czcionki */
color: #CCFFCC; /* kolor tekstu */
text-align: center; /* wysrodkowanie */
margin-top: 5px; /* margines gorny */
margin-bottom: 5px; /* margines dolny */
font-weight: 500; /* pogrubienie */
font-variant: small-caps; /* male kapitaliki */
}
.napis2 /* sredni napis zielony */
{ font-size: 17px; /* wielkosc czcionki */
color: #006600; /* kolor tekstu */
text-align: center; /* wysrodkowanie */
margin-top: 5px; /* margines gorny */
margin-bottom: 5px; /* margines dolny */
font-weight: 500; /* pogrubienie */
font-variant: small-caps; /* male kapitaliki */
}
.napis3 { /* sredni napis rozowy */
font-size: 17px; /* wielkosc czcionki */
color: #FF0066; /* kolor tekstu */
text-align: center; /* wysrodkowanie */
margin-top: 7px; /* margines gorny */
margin-bottom: 7px; /* margines dolny */
font-weight: 500; /* pogrubienie */
font-variant: small-caps; /* male kapitaliki */
}
.napis4 { /* maly napis niebieski */
font-size: 15px; /* wielkosc czcionki */
color: #3300FF; /* kolor tekstu */
text-align: left; /* wyrownanie do lewej */
margin-top: 7px; /* margines gorny */
margin-bottom: 7px; /* margines dolny */
font-weight: 500; /* pogrubienie */
font-variant: small-caps; /* male kapitaliki */
}
.napis5 { /* maly napis rozowy pogrubiony */
font-size: 15px; /* wielkosc czcionki */
color: #FF0066; /* kolor tekstu */
margin-top: 7px; /* margines gorny */
margin-bottom: 7px; /* margines dolny */
font-weight: 700; /* pogrubienie */
font-variant: small-caps; /* male kapitaliki */
}
.tlo1 { /* biale tlo */
background-color: #FFF; /* kolor tla */
}
.kontakt { /* napis kontaktowy */
font-size: 15px; /* wielkosc czcionki */
color: #006600; /* kolor tekstu */
text-align: center; /* wysrodkowanie */
margin-top: 7px; /* margines gorny */
margin-bottom: 7px; /* margines dolny */
}
.lewy { /* wiekszy tekst wyrównany do lewej */
font-size: 19px; /* wielkosc czcionki */
color: #006600; /* kolor tekstu */
text-align: left; /* wyrownanie do lewej */
}
.lewy1 { /* mniejszy tekst wyrównany do lewej */
font-size: 15px; /* wielkosc czcionki */
color: #006600; /* kolor tekstu */
text-align: left; /* wyrownanie do lewej */
font-weight: 500; /* pogrubienie srednie */
margin-top: 3px; /* margines gorny */
margin-bottom: 3px; /* margines dolny */
}
.prawy { /* wiekszy tekst wyrównany do prawej */
font-size: 19px; /* wielkosc czcionki */
color: #006600; /* kolor tekstu */
text-align: right; /* wyrownanie do prawej */
}
/* N A G L O W K I */
h1 { /* naglowek poziomu 1 */
font-size: 24px; /* wielkosc czcionki */
color: #990033; /* kolor tekstu */
text-align: center; /* wysrodkowanie */
letter-spacing: 1px; /* odstepy miedzy literami */
margin-top: 7px; /* margines gorny */
margin-bottom: 7px; /* margines dolny */
background: transparent; /* tlo */
font-weight: 700; /* pogrubienie */
}
.cien1 { /* duzy niebieski napis */
font-size: 26px; /* wielkosc czcionki */
color: #0066FF; /* kolor tekstu */
text-align: center; /* wysrodkowanie */
margin-top: 0px; /* margines gorny */
margin-bottom: 9px; /* margines dolny */
background: transparent; /* tlo */
font-weight: 700; /* pogrubienie */
}
h2 { /* naglowek poziomu 2 */
font-size: 19px; /* wielkosc czcionki */
color: #006600; /* kolor tekstu */
text-align: center; /* wysrodkowanie */
margin-top: 7px; /* margines gorny */
margin-bottom: 7px; /* margines dolny */
}
h3 { /* naglowek poziomu 3 */
font-size: 17px; /* wielkosc czcionki */
color: #009900; /* kolor tekstu */
text-align: center; /* wysrodkowanie */
margin-top: 7px; /* margines gorny */
margin-bottom: 7px; /* margines dolny */
}
h4 { /* naglowek poziomu 4 */
font-size: 15px; /* wielkosc czcionki */
color: #339900; /* kolor tekstu */
text-align: center; /* wysrodkowanie */
margin-top: 7px; /* margines gorny */
margin-bottom: 7px; /* margines dolny */
}
h5 { /* naglowek poziomu 5 */
font-size: 15px; /* wielkosc czcionki */
color: #000000; /* kolor tekstu */
text-align: left; /* wyrownanie do lewej */
margin-top: 7px; /* margines gorny */
margin-bottom: 7px; /* margines dolny */
}
h6 { /* naglowek poziomu 6 */
font-size: 14px; /* wielkosc czcionki */
color: #000000; /* kolor tekstu */
text-align: left; /* wyrownanie do lewej */
margin-top: 7px; /* margines gorny */
margin-bottom: 7px; /* margines dolny */
}
/* WYROZNIENIA czcionki wyroznione - kolory */
strong { /* mocne wyroznienie pogrubiajac - strong = wyrozniony, wazny */
font-weight: bolder; /* mocniejsze pogrubienie */
}
em { /* emfaza - zwykle kursywa */
font-style: italic; /* kursywa */
}
q { /* cytat - sam dodaje cudzyslowy */
font-style: italic; /* kursywa */
color: #660000; /* kolor cytatu */
}
cite { /* odniesienie do zrodla */
font-style: italic; /* kursywa */
color: #660000; /* kolor cytatu */
}
blockquote { /* dlugi cytat wyswietlany w bloku np. div, np. wiersze - dodaje marginesy po obu stronach tekstu*/
font-style: italic; /* kursywa */
}
.ewa { /* zwykly tekst wyrownany do lewej */
font-size: medium; /* wielkosc czcionki */
font-style: normal; /* styl normalny */
color: #000000; /* kolor tekstu */
text-align: left; /* wyrownanie do lewej */
}
.prawa_wyr { /* tekst wyrownany do prawej */
text-align: right; /* wyrownanie do prawej */
font-style: italic; /* kursywa */
color: #990000; /* kolor tekstu */
}
.lewa_wyr { /* tekst wyrownany do lewej */
text-align: left; /* wyrownanie do lewej */
color: #006600; /* kolor tekstu */
text-indent: 0px; /* brak wciecia */
}
.lewy_ { /* tekst wyrownany do lewej z marginesem */
text-align: left; /* wyrownanie do lewej */
text-indent: 0px; /* brak wciecia */
margin-top: 3px; /* margines gorny */
}
.cz1 { /* kolor 1 */
color: #660000; /* kolor tekstu */
font-weight: 700; /* pogrubienie */
}
.cz2 { /* kolor 2 */
color: #996600; /* kolor tekstu */
font-weight: 700; /* pogrubienie */
}
.cyt { /* cytat */
font-style: italic; /* kursywa */
font-weight: 700; /* pogrubienie */
}
.druk { /* wyroznik drukowany */
font-weight: 700; /* pogrubienie */
font-variant: small-caps; /* male kapitaliki */
}
/* zaczynam i koncze, spis definicji jako dl */
dfn { /* definicja - zwykle kursywa, wyróżnia termin, np.: Definicja: jaskolka; to jest ptak.
*/
color: #660000; /* kolor definicji */
}
dl { /* lista definicji - ek: do utworzenia listy definicji, robi wiekszy odstep w pionie od tresci, */
text-align: left; /* wyrównanie do lewej */
}
dt { /* termin definicji - samo zaczyna sie od nowej linijki */
text-align: left; /* wyrównanie do lewej */
font-weight: 700; /* pogrubienie */
color: #009900; /* kolor terminu */
}
dd { /* opis definicji - samo ustawia sie pod spodem dd z wcieciami */
text-align: justify; /* wyjustowanie */
}
ol, ul, li { /* listy i ich elementy: ul - tekst punktowany, ol - numerowany, li - element listy */
text-align: justify; /* wyjustowanie */
margin: 4px 10px 4px 0px; /* marginesy */
}
td, th { /* komórki tabeli */
font-size: 14px; /* wielkość czcionki */
text-align: justify; /* wyjustowanie */
}
/* TABELA glowna w niej tabelki i tekst */
table { /* tabela ogólna */
background: transparent; /* tlo przezroczyste */
border: 0px groove #FFFFFF; /* obramowanie (groove, ale 0px = brak ramki) */
text-align: center; /* wyśrodkowanie tekstu */
padding: 0 0 0 0; /* marginesy wewnetrzne: gorny, prawy, dolny, lewy */
margin: auto auto auto auto; /* wyśrodkowanie tabeli */
width: 94%; /* szerokosc tabeli */
}
table.matma { /* tabela matematyczna szeroka */
background: transparent; /* tlo przezroczyste */
border: 0px hidden #CF9; /* brak ramki */
text-align: center; /* wyśrodkowanie tekstu */
padding: 0 0 0 0; /* marginesy wewnetrzne */
margin: auto auto auto auto; /* wyśrodkowanie */
width: 97%; /* szerokosc tabeli */
}
table.matma1 { /* tabela matematyczna z jasnym tlem */
background: #FFFFF1; /* jasne tlo */
border: 1px groove #FFFFFF; /* ramka groove 1px */
text-align: center; /* wyśrodkowanie tekstu */
padding: 0 0 0 0; /* marginesy wewnetrzne */
margin: auto auto auto auto; /* wyśrodkowanie */
width: 97%; /* szerokosc tabeli */
}
table.matma7 { /* tabela matematyczna wyrównana do prawej */
background: transparent; /* tlo przezroczyste */
border: 0px hidden #CF9; /* brak ramki */
text-align: right; /* wyrównanie tekstu do prawej */
padding: 0 0 0 0; /* marginesy wewnetrzne */
margin: auto auto auto auto; /* wyśrodkowanie */
width: 70%; /* szerokosc tabeli */
}
.tab_tyt { /* tytul tabeli */
background: #99FF66; /* jasnozielone tlo - jasny szary #DCDCDC; */
border: 3px ridge #CDCDCD; /* ramka ridge 3px */
text-align: center; /* wysrodkowanie tekstu */
padding: 7px 7px 7px 7px; /* marginesy wewnetrzne */
font-weight: 800; /* mocne pogrubienie */
color: #000000; /* kolor tekstu */
word-wrap: break-word; /* zawijanie dlugich wyrazow */
}
.tab_pom { /* pomocnicza tabela szeroka */
width:100%; /* szerokosc 100% */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #CDCDCD; /* ramka ridge, ale 0px = brak */
text-align: left; /* wyrownanie do lewej */
padding: 0 0 0 0; /* marginesy wewnetrzne */
}
.tab_pomoc { /* pomocnicza tabela waska */
width:40%; /* szerokosc 40% */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #CDCDCD; /* brak ramki */
text-align: left; /* wyrownanie do lewej */
padding: 0 0 0 0; /* marginesy wewnetrzne */
}
.tab_napn { /* pasek naglowka z tlem graficznym */
width:100%; /* szerokosc 100% */
background: url('grafika/menu.jpg') repeat-x; /* tlo powtarzane poziomo */
border: 0px ridge #CDCDCD; /* brak ramki */
text-align: left; /* wyrownanie do lewej */
padding: 0 0 0 0; /* marginesy wewnetrzne */
clear: both; /* nowa linia pod elementami float */
}
.tab_nap { /* mala tabela naglowkowa */
width:30%; /* szerokosc 30% */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #CDCDCD; /* brak ramki */
text-align: center; /* wysrodkowanie */
padding: 0 0 0 0; /* marginesy wewnetrzne */
}
.tab_ { /* komorka tabeli – zielony tekst */
background: transparent; /* tlo przezroczyste */
border: 0px ridge #CDCDCD; /* brak ramki */
text-align: center; /* wysrodkowanie */
padding: 2px 1px 1px 1px; /* marginesy wewnetrzne */
color: #090; /* ciemna zielen */
}
.tab_0 { /* komorka tabeli z ramka 2px */
background: transparent; /* tlo przezroczyste */
border: 2px ridge #CDCDCD; /* ramka ridge 2px */
text-align: left; /* wyrownanie do lewej */
padding: 4px 1px 4px 7px; /* marginesy wewnetrzne */
}
.tab_1 { /* komorka tabeli z zielonym tlem */
background: #CCFFCC; /* jasnozielone tlo */
border: 2px ridge #CDCDCD; /* ramka ridge 2px */
text-align: left; /* wyrownanie do lewej */
padding: 4px 1px 4px 7px; /* marginesy wewnetrzne */
}
.tab_2 { /* komorka tabeli z ramka solid */
background: transparent; /* tlo przezroczyste */
border: 2px solid #CDCDCD; /* ramka solid 2px */
text-align: right; /* wyrownanie do prawej */
padding: 4px 7px 4px 7px; /* marginesy wewnetrzne */
}
/* kolory w tabeli matematyka */
.tab_3 { /* komorka tabeli - jasnozielone tlo */
background: #CCFFCC; /* jasnozielone tlo */
border: 2px ridge #CDCDCD; /* ramka ridge 2px */
text-align: left; /* wyrownanie do lewej */
padding: 4px 7px 4px 7px; /* marginesy wewnetrzne */
}
.tab_4 { /* komorka tabeli - szerokosc 25% */
background: #FFFFF3; /* jasne kremowe tlo */
border: 2px ridge #CDCDCD; /* ramka ridge 2px */
text-align: left; /* wyrownanie do lewej */
padding: 4px 7px 4px 7px; /* marginesy wewnetrzne */
width: 25%; /* szerokosc komorki */
}
.tab_5 { /* komorka tabeli - szerokosc 12% */
background: #FFFFF3; /* jasne kremowe tlo */
border: 2px ridge #CDCDCD; /* ramka ridge 2px */
text-align: left; /* wyrownanie do lewej */
padding: 4px 7px 4px 10px; /* marginesy wewnetrzne */
width: 12%; /* szerokosc komorki */
}
.tab_7 { /* komorka tabeli - szerokosc 70% */
background: #FFFFF3; /* jasne kremowe tlo */
border: 2px ridge #CDCDCD; /* ramka ridge 2px */
text-align: left; /* wyrownanie do lewej */
padding: 4px 7px 4px 10px; /* marginesy wewnetrzne */
width: 70%; /* szerokosc komorki */
}
/* dodatkowe kolory w tabeli terminarza */
.tab_22 { /* komorka - rozowe tlo */
background: #FFCCFF; /* jasnorozowe tlo */
border: 1px solid #9999CC; /* ramka solid 1px */
text-align: right; /* wyrownanie do prawej */
padding: 4px 7px 4px 7px; /* marginesy wewnetrzne */
}
.tab_222 { /* komorka - jasnoniebieskie tlo */
background: #CCFFFF; /* jasnoniebieskie tlo */
border: 1px solid #9999CC; /* ramka solid 1px */
text-align: right; /* wyrownanie do prawej */
padding: 4px 7px 4px 7px; /* marginesy wewnetrzne */
}
/* komorki testowe */
.tab_test0 /* komorka testowa - brak tła */
{ background: transparent; /* tlo przezroczyste */
border: 0px ridge #CDCDCD; /* brak ramki */
text-align: left; /* wyrownanie do lewej */
padding: 4px 1px 4px 7px; /* marginesy wewnetrzne */
}
.tab_test1 { /* komorka testowa - jasnozielone tlo */
background: #CCFF99; /* jasnozielone tlo */
border: 0px ridge #CDCDCD; /* brak ramki */
text-align: left; /* wyrownanie do lewej */
padding: 4px 1px 4px 7px; /* marginesy wewnetrzne */
}
.tab_test2 { /* komorka testowa - jasnozielone tlo */
background: #CCFFCC; /* jasnozielone tlo */
border: 0px solid #CDCDCD; /* brak ramki */
text-align: left; /* wyrownanie do lewej */
padding: 4px 7px 4px 7px; /* marginesy wewnetrzne */
}
.tab_test3 { /* komorka testowa - jasnozielone tlo, tekst po prawej */
background: #CCFF99; /* jasnozielone tlo */
border: 0px solid #CDCDCD; /* brak ramki */
text-align: right; /* wyrownanie do prawej */
padding: 4px 7px 4px 7px; /* marginesy wewnetrzne */
}
/* linie poziome */
hr.linia_300 { /* pozioma linia o szerokosci 300px */
width: 300px; /* szerokosc linii */
height: 1px; /* grubosc linii */
background-color: #006600; /* kolor linii - ciemna zielen - nowoczesny sposob */
border: none; /* usuniecie domyslnej ramki hr */
margin-left: auto; /* wysrodkowanie linii w poziomie - ale samo bez ponizej = linia przesunie się do prawej */
margin-right: auto; /* wysrodkowanie linii w poziomie - ale samo bez powyzej = linia przesunie się do lewej */
}
/* dawniej mialam to ponizej - teraz trzeba poprawic:
{text-align: center; /* wyrownanie (ale hr nie reaguje na text-align) - hr to linia pozioma, która przegladarka rysuje jako blok o pelnej szerokości, a nie jako tekst = text-align dziala tylko na zawartosc tekstowa elementu)
height: 1px;
width: 300px;
color: #006600; /* kolor linii (dla starszych przegladarek, bo nowoczesne przegladarki NIE uzywaja wlasciwosci color do rysowania linii
= blok z własnym stylem, który: ma domyślną ramkę (border), ma domyślną wysokość, ma domyślny wygląd, który ignoruje color = nie zmienia koloru lini) - dlatego poprawny sposob to użycie border */
hr.linia_400 { /* pozioma linia o szerokosci 400px */
width: 400px; /* szerokosc linii */
height: 1px; /* grubosc linii */
background-color: #006600; /* kolor linii - ciemna zielen */
border: none; /* usuniecie domyslnej ramki hr */
margin-left: auto; /* wysrodkowanie linii */
margin-right: auto; /* wysrodkowanie linii */
}
hr.linia_474 { /* pozioma linia o szerokosci 474px */
width: 474px; /* szerokosc linii */
height: 1px; /* grubosc linii */
background-color: #006600; /* kolor linii - ciemna zielen */
border: none; /* usuniecie domyslnej ramki hr */
margin-left: auto; /* wysrodkowanie linii */
margin-right: auto; /* wysrodkowanie linii */
}
hr.linia_700 /* pozioma linia o szerokosci 700px */
{width: 700px; /* szerokosc linii */
height: 1px; /* grubosc linii */
background-color: #CCCCCC; /* kolor linii - jasny szary */
border: none; /* usuniecie domyslnej ramki hr */
margin-left: auto; /* wysrodkowanie linii */
margin-right: auto; /* wysrodkowanie linii */
}
/* FORMULARZE */
input.przycisk { /* przycisk formularza */
border-right: 1px solid #9B0000; /* ramka prawa - ciemna czerwien */
border-top: 1px solid #9B0000; /* ramka gorna */
border-bottom: 1px solid #9B0000; /* ramka dolna */
border-left: 1px solid #9B0000; /* ramka lewa */
font-size: 11px; /* wielkosc czcionki */
background-color: #FFFFCC; /* jasne kremowe tlo */
cursor: pointer; /* nowoczesny kursor - wskaznik - dawniej: cursor: hand;*/
color: #FF0033; /* kolor tekstu - intensywna czerwien */
font-family: tahoma, sans-serif; /* czcionka */
height: 20px; /* wysokosc przycisku */
}
textarea.pole { /* pole tekstowe */
border: 0; /* brak ramki */
font-size: 11px; /* wielkosc czcionki */
color: white; /* kolor tekstu */
background-color: black; /* czarne tlo pola = paska */
/* nowoczesne style paska przewijania (Chrome, Edge, Safari) */
scrollbar-width: thin; /* cienki pasek przewijania (Firefox) */
scrollbar-color: #9B0000 black; /* kolor suwaka i tlo (Firefox) */
}
/* stylowanie paska przewijania dla WebKit (Chrome, Edge, Safari) */
textarea.pole::-webkit-scrollbar {
width: 8px; /* szerokosc paska przewijania */
}
textarea.pole::-webkit-scrollbar-track {
background: black; /* tlo toru przewijania */
}
textarea.pole::-webkit-scrollbar-thumb {
background-color: #9B0000; /* kolor suwaka */
border-radius: 4px; /* zaokraglenie suwaka */
}
/* uwaga - dawniej mialam ponizsze:
textarea.pole
{border: 0; font-size: 11px; color: white;
/* stare style przewijania - dzialaja tylko w IE 5-6
scrollbar-arrow-color: #9B0000; /* kolor strzalek
scrollbar-base-color: white; /* kolor tla paska
scrollbar-darkshadow-color: white; /* cien paska
scrollbar-face-color: black; /* kolor powierzchni paska
scrollbar-shadow-color: silver; /* cien boczny
background-color: black; /* czarne tlo pola } */
/* ------------ANIMACJA-PRZESUN------------ */
@keyframes przesun { /* animacja przesuwania tekstu w poziomie */
0% { transform: translateX(0); } /* start - tekst na pozycji poczatkowej */
100% { transform: translateX(-100%); } /* koniec- przesuniecie o szerokosc elementu */
}
/* ------------------------- STYLE DO TESTOW TYMCZASOWO ---------------------------------------*/
/* -------------------------nowe STYLE DO TESTOW TYMCZASOWO ---------------------------------------*/
/* --- unikalny układ tylko dla tabeli testy_pf --- */
.test_pf { /* dotyczy wszystkich elementów posiadających klasę "test_pf" */
display: flex; /* włącza układ Flexbox, dzięki któremu elementy ustawiają się elastycznie */
flex-direction: row; /* układa elementy obok siebie w jednym wierszu (poziomo) */
align-items: center; /* wyrównuje elementy pionowo do środka w obrębie wiersza */
gap: 12px; /* dodaje odstęp 12 px pomiędzy elementami wewnątrz kontenera */
padding: 6px 10px; /* wewnętrzny margines: 6 px góra/dół, 10 px lewo/prawo */
}
/* --- okienko P/F: połowa szerokości = ma szer = 35px --- */
.test_pf select[name$="_tf"] { /* wybiera element