@charset "utf-8";
/* CSS Document */
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFF;
	margin: 0; /* zaleca się wyzerowanie dopełnienia i marginesu elementu body, tak aby mogły być uwzględniane różne domyślne ustawienia przeglądarki */
	padding: 0;
	text-align: center; /* kontener zostaje wyśrodkowany w oknach przeglądarek IE 5*. Następnie tekst określony przez selektor #container jest wyrównywany domyślnie do lewej */
	color: #000000;
}
.okno #kontener {
	position: relative; /* określanie położenia: położenie dwóch pasków bocznych jest określane względem kontenera */
	width: 800px; /* użycie szerokości mniejszej o 20 piks. od pełnej szerokości 800 piks. pozwala uatrakcyjnić okno przeglądarki i uniknąć poziomego paska przewijania */
	background-color: #FEFFE8;
	margin: 0 auto; /* automatyczne marginesy (w połączeniu z szerokością) powodują wyśrodkowanie strony */
	border: 1px solid #CCC;
	text-align: left; /* ustawienie to przesłania domyślne ustawienie wyrównania tekstu: środkowanie w elemencie body. */
} 

/* Wskazówki dotyczące pasków bocznych o położeniu bezwzględnym, z nagłówkiem i stopką:
1. Elementy o położeniu bezwzględnym (elementy AP) muszą być określone pod względem górnej krawędzi (top) i strony (left lub right). Jeśli położenie górnej krawędzi nie zostanie określone, to element AP będzie zaczynał się bezpośrednio za ostatnim elementem strony (zgodnie z pierwotną kolejnością elementów strony). A zatem, jeśli paski boczne stanowią pierwszy element kontenera (zgodnie z kolejnością w dokumencie źródłowym), to będą one wyświetlane u góry kontenera, niezależnie od ustawienia górnej krawędzi (top). Jeśli jednak później, z jakiegokolwiek powodu, zmieni się ich pozycja w dokumencie źródłowym, to dla utrzymania ich dotychczasowego położenia będzie potrzebne ustawienie górnej krawędzi.
2. Elementy o położeniu bezwzględnym (elementy AP) są traktowane jak elementy spoza dokumentu. Znaczy to, że elementy dokumentu są umieszczane na stronie bez uwzględniania położenia elementów AP. Dlatego też znacznik div elementu AP powinien być używany tylko do definiowania kolumny bocznej – o ile wiadomo, że środkowy znacznik div #mainContent będzie zawierał najwięcej elementów strony. Jeśli któryś z pasków bocznych miałby zawierać więcej elementów, to pasek ten wychodziłby poza dolną krawędź macierzystego elementu div, a w konsekwencji ani stopka, ani sam pasek nie byłyby widoczne.
3. O ile powyższe wymagania są spełnione, to paski boczne o położeniu bezwzględnym pozwalają w łatwy sposób kontrolować kolejność elementów dokumentu.
4. Na wypadek zmian pierwotnej kolejności elementów wartość parametru top (górna krawędź) powinna równać się wysokości nagłówka. Dzięki temu kolumny będą wizualnie wyrównane do nagłówka.
*/

.okno #naglowek {
	height: 200px; /* na wypadek zmian pierwotnej kolejności kolumn możesz określić konkretną wysokość nagłówka; dzięki temu będzie                     znane położenie górnej krawędzi kolumn */
    background-position: center;
	background: #00F  url(grafiki/baner.jpg);
	padding: 0 10px 0 20px; /* takie dopełnienie jest zgodne z wielkością wyrównania do lewej tych elementów div, które leżą poniżej. Jeśli w elemencie #header użyto obrazu zamiast tekstu, można usunąć dopełnienie. */
}
	

.okno #naglowek h1 {
	margin: 0; /* wyzerowanie marginesu w ostatnim elemencie nagłówka #header pozwoli uniknąć skrócenia marginesów – tj. dodania niepotrzebnych spacji między elementami div. Jeśli element div ma obramowanie, czynność ta jest niepotrzebna, ponieważ obramowanie również zapobiega skróceniu marginesów */
	padding: 10px 0; /* użycie dopełnienia, a nie marginesu, pozwoli utrzymać odpowiednią odległość między elementem a krawędziami elementu div */
	}

.okno #pasek_lew {
	position: absolute;
	top: 302px;
	left: 0;
	width: 150px; /* rzeczywista szerokość elementu div, w standardowych przeglądarkach lub w zwykłym trybie pracy programu Internet Explorer oprócz szerokości będzie określone dopełnienie i obramowanie */
	background: #333; /* kolor tła będzie widoczny tylko w wypełnionym obszarze kolumny, nie dalej */
	color:#000;
	font-size: 11px;
	background-color: #FEFFE8;
	padding: 0 5px 5px 2px; /* wartości dopełnienia (padding) określają odstępy zawartości znacznika div od krawędzi */
}
.okno #pasek_pr {
	position: absolute;
	top: 302px;
	right: 1px;
	width: 150px; /* rzeczywista szerokość elementu div, w standardowych przeglądarkach lub w zwykłym trybie pracy programu Internet Explorer oprócz szerokości będzie określone dopełnienie i obramowanie */
	font-size: 11px;
	color:#000;
	background-color:#FEFFE8;
	/*kolor tła będzie widoczny tylko w wypełnionym obszarze kolumny, nie dalej */
	padding: 0 5px 5px 5px; /* wartości dopełnienia (padding) określają odstępy zawartości znacznika div od krawędzi */
	} 
.okno #pasek_pr h3 .okno #pasek_pr p {
	margin-left: 10px; /* wielkości lewych i prawych marginesów należy określić w przypadku wszystkich elementów, które będą umieszczane w kolumnach bocznych */
	margin-right: 10px;
} 

/* Wskazówki dotyczące elementu mainContent:
1. Odstęp między elementem mainContent i paskiem bocznym sidebar1 jest określany z uwzględnieniem lewego marginesu elementu mainContent. Niezależnie od liczby elementów na pasku bocznym sidebar1 odstęp kolumnowy pozostanie. Lewy margines można usunąć. Wtedy tekst skojarzony z elementem #mainContent będzie wypełniał element #sidebar1, począwszy od końca zawartości elementu #sidebar1.
2. Należy mieć na uwadze, że jeśli element jest szerszy niż jego pojemność, określona wewnątrz znacznika div mainContent, to może wystąpić efekt opadania elementu pływającego (opadnięcie zwykłego obszaru mainContent poniżej paska bocznego). W przypadku układu hybrydowego (szerokość określona procentowo, a pasek boczny zdefiniowany w jednostkach em)  nie zawsze będzie można obliczyć dokładną, dostępną szerokość. Jeśli rozmiar tekstu użytkownika przewyższy rozmiar średni, to pasek boczny będzie szerszy, a w konsekwencji pozostanie mniej miejsca w elemencie mainContent. Należy pamiętać o tym ograniczeniu – zwłaszcza, jeśli klient dodaje zawartość za pomocą programu Contribute.
3. W poniższym warunkowym komentarzu dla przeglądarki Internet Explorer użyto właściwości zoom (powiększenie) i nadano jej wartość „hasLayout”. Wartość ta pozwala uniknąć szeregu błędów typowych dla przeglądarki IE.
*/


.okno #glowny {
	margin: 0 155px; /* prawy i lewy margines tego elementu div powodują utworzenie dwóch zewnętrznych kolumn, przy obu brzegach strony. Niezależnie od tego, ile elementów będzie zawierał znacznik div paska bocznego, kolumny pozostaną. */
	padding:0;	 /* należy pamiętać, że dopełnienie jest to pusty obszar w polu div, a margines jest to pusty obszar poza polem div */
	background-color:#FEFFE8;
		}

.okno #stopka { 
    padding: 0 10px 0 20px; /* takie dopełnienie jest zgodne z wielkością wyrównania do lewej tych elementów div, które leżą powyżej. */
	background: url(grafiki/stopka.png);
	clear:both;
	height:70px;
	background-color: #36F;
	
} 
.okno #stopka p {
	margin: 0; /* wyzerowanie marginesów pierwszego elementu w stopce pozwoli uniknąć ewentualnego skrócenia marginesów - tj. dodania niepotrzebnych spacji między elementami div */
	
	padding: 10px 0; /* użycie dopełnienia zapewni marginesy, a jednocześnie uniemożliwi ich skrócenie */
}
/* Różne użyteczne klasy */
.fltrt { /* ta klasa może zostać użyta do zdefiniowania płynnego przesunięcia elementu w prawo. Przesuwany element musi poprzedzać element, który ma następować na stronie po nim. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* ta klasa może zostać użyta do zdefiniowania płynnego przesunięcia elementu w lewo. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* tę klasę należy umieścić w elemencie div lub break, powinna ona stanowić ostatni element kontenera zawierającego element pływający */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
/*dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}

dl {
	width: 130px;
	padding: 1px 2px;
	background-color:#003399;
	border: 3px double #28e;
	
}

dt {
	padding: 7px 15px;
	font-weight: bold;
	font-size: larger;
	background-color: #003399;
	color:#003399;
	text-align: right;
	border-right: 20px solid #26d;
	margin-top: 1px;
}

dd {
	border-top: 1px solid #9ce;
}

dl a:link, dl a:visited {
	display: block;
	width: 116px;
	text-decoration: none;
	padding: 7px;
	font-weight: bold;
	background-color:#003399;
	color: #FFF;
	
}

dl a:hover {
	width: 116px;
	background-color: #33C;
	color: #fff;
	
}
*/

.okno #menu_poziom {
	height: 20px; /* na wypadek zmian pierwotnej kolejności kolumn możesz określić konkretną wysokość nagłówka; dzięki temu będzie                     znane położenie górnej krawędzi kolumn */
    background: #FFC; 
	padding: 0 10px 0 20px;  /* takie dopełnienie jest zgodne z wielkością wyrównania do lewej tych elementów div, które leżą poniżej. Jeśli w elemencie #header użyto obrazu zamiast tekstu, można usunąć dopełnienie. */
	 	}