@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	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;
}
.twoColHybRtHdr #container {
	width: 1000px;  /* szerokość kontenera będzie stanowić 80% szerokości okna przeglądarki */
	background: #FFFFFF;
	margin: 4% auto 2%; /* automatyczne marginesy (w połączeniu z szerokością) powodują wyśrodkowanie strony */
	border: 0px solid #000000;
	text-align: left;
} 
.twoColHybRtHdr  #header {
	margin: 0; /* użycie dopełnienia, a nie marginesu, pozwoli utrzymać odpowiednią odległość między elementem a krawędziami elementu div */
	background-color: #F3F5F4;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 20px;
	text-align: left;
}
.twoColHybRtHdr  #header h1 {
	margin: 0; /* użycie dopełnienia, a nie marginesu, pozwoli utrzymać odpowiednią odległość między elementem a krawędziami elementu div */
	background-color: #F3EEF7;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
}

.twoColHybRtHdr #header2 {
	background:#DDDDDD;
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
}
.twoColHybRtHdr #header2 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: 0px 0; /* użycie dopełnienia zapewni marginesy, a jednocześnie uniemożliwi ich skrócenie */
	text-align: right;
	background-color: #F3F5F4;
}
.twoColHybRtHdr #sidebar1 {
	float: left;
	width: 18em; /* ponieważ jest to element pływający, należy określić szerokość */
	background: #FFF; /* dopełnienie górne i dolne pozwalają uzyskać odpowiednie odstępy wewnątrz elementu div  */
	margin-top: 2em;
	margin-left: 2em;
	color: #999;
}
.twoColHybRtHdr #sidebar1 h3, .twoColHybRtHdr #sidebar1 p {
	margin-left: 20px; /* 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: 0px;
	background-color: #FFF;
	font-size: x-small;
	text-align: right;
	padding-left: 6em;
	margin-top: 15px;
	padding-right: 1em;
}

/* Wskazówki dotyczące elementu mainContent:
1. Odstęp między elementem mainContent i paskiem bocznym sidebar1 jest określany z uwzględnieniem prawego marginesu elementu mainContent. Niezależnie od liczby elementów na pasku bocznym sidebar1 odstęp kolumnowy pozostanie. Prawy 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.
*/
.twoColHybRtHdr #mainContent {
	text-align: right;
	padding-top: 3em;
	padding-right: 0em;
	padding-bottom: 0em;
	padding-left: 23em;
	margin: 0em;
	background-image: url(img/lewy.png);
	background-repeat: no-repeat;
} 

.twoColHybRtHdr #mainContent img {
	top: 10px;
	padding: 0px;
	text-align: right;
} 


.twoColHybRtHdr #footer {
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	height: 45px;
	background-color: #FFF;
	background-image: url(img/prawy.png);
	background-position: right bottom;
	background-repeat: no-repeat;
}
.twoColHybRtHdr #footer p {
	margin: 0; /* użycie dopełnienia zapewni marginesy, a jednocześnie uniemożliwi ich skrócenie */
	text-align: left;
	border-top-color: #CCC;
	padding: 0px;
	
}
.twoColHybRtHdr #footer2 {
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	background-color: #F3F5F4;
}
.twoColHybRtHdr #footer2 p {
	margin: 0; /* użycie dopełnienia zapewni marginesy, a jednocześnie uniemożliwi ich skrócenie */
	text-align: left;
	border-top-color: #CCC;
	padding: 0px;
	font-size: xx-small;
	color: #CCC;
	font-family: Arial, Helvetica, sans-serif;
}

.twoColHybRtHdr #footer2 a {
	font-size: xx-small;
	color: #999;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	
}
/* 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;
}