body {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	background: #ffffff;
	margin: 0; /* Je vhodné nastavit nulový okraj a odsazení elementu body a umožnit tak použití rùzných výchozích hodnot prohlížeèe. */
	padding: 0;
	text-align: center; /* Umístí kontejnery na støed v prohlížeèích IE 5*. Text je nastaven na výchozí zarovnání vlevo v selektoru #container. */
	color: #000000;
}
.twoColHybLtHdr #container {
	width: 800px;  /* Dojde k vytvoøení kontejneru s 80 % šíøky prohlížeèe. */
	background: #FFFFFF;
	margin: 0 auto;
	text-align: left; /* Dojde k potlaèení zarovnání textu: zarovnání na støed u elementu body. */
}

.twoColHybLtHdr #header {
	height: 70px;
	background-image: url(logo.png);
}
.twoColHybLtHdr #header h1 {
	margin: 0; /* vynulováním okraje posledního elementu v tagu #header div zabráníte sbalení okraje – nevysvìtlitelné mezeøe mezi tagy div. Pokud má tag div kolem pevný okraj, není tato operace nutná, jelikož rovnìž nedochází ke sbalení okraje. */
	padding: 10px 0; /* Použitím odsazení namísto okraje umožníte ponechání elementu ve vzdálenosti od okrajù tagu div. */
	font-size: 14px;
}
.twoColHybLtHdr #container #mainContent h1 {
	font-size: 18px;
	margin: 5px 0 0 0;
	background-color: #000;
	color: #FFF;
	padding: 5px;
}
.twoColHybLtHdr #container #mainContent h2 {
	font-size: 14px;
	margin: 2px 0 0 0;
	text-align: center;
	background-color: #000;
	color: #FFF000;
	padding-bottom: 5px;
	padding-top: 5px;

}
.twoColHybLtHdr #container #sidebar1 h3 {
	font-size: 12px;
	background-color: #000;
	text-align: center;
	margin-top: 2px;
	margin-bottom: 0px;
	padding-bottom: 5px;
	padding-top: 5px;
	border-top: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-left: 1px #000000 solid;
	color: #FFF;
}
.twoColHybLtHdr #container #mainContent p {
	font-size: 12px;
	margin: 5px 0 5px 0;
}

/* Tipy pro tag sidebar1:
1. Jelikož jsou používány relativní jednotky, je vhodné nepoužívat odsazení pro postranní lištu. U prohlížeèù, které odpovídají standardùm, bude pøidáno k celkové šíøce, èímž dojde k vytvoøení neznámé skuteèné šíøky. 
2. Jelikož jsou pro hodnotu postranní lišty používány jednotky em, bude se její šíøka lišit v závislosti na rùzných výchozích velikostech písma.
3. Mezeru mezi stranou tagu div a obsaženými elementy lze vytvoøit vložením levého a pravého okraje tìchto elementù, jak je uvedeno v pravidle „.twoColHybLtHdr #sidebar1 p“.
*/
.twoColHybLtHdr #sidebar1 {
	float: left;
	width: 190px; /* Barva pozadí se bude zobrazovat v délce obsahu sloupce, nikoli však dále. */
	padding: 4px 0 0 0; /* Horní a dolní odsazení vytváøejí uvnitø tagù div viditelnou mezeru.  */
}

/* Tipy pro tag mainContent:
1. Mezera mezi tagy mainContent a sidebar1 je vytvoøena levou mezerou v tagu mainContent div. Bez ohledu na to, jaké množství obsahu tag sidebar1 div obsahuje, mezera sloupce bude zachována. Levý okraj mùžete odstranit, chcete-li, aby text v tagu #mainContent div vyplnil prostor v tagu #sidebar1, když obsah tagu #sidebar1 skonèí.
2. Je možné, že dojde k posunutí plovoucího objektu (posunutí neplovoucí oblasti v tagu mainContent mimo postranní lištu), pokud je do tagu mainContent div vložen širší element, než je možné použít. Pøi použití hybridního rozvržení (celková šíøka je dána procenty, šíøka postranní lišty je dána jednotkami em) mùže být urèení pøesné celkové šíøky nemožné. Pokud velikost textu daná uživatelem je vìtší než prùmìrná hodnota, bude postranní lišta širší a zmenší se tak místo v tagu mainContent div. Dbejte na toto omezení, zejména v pøípadì pøidání obsahu klientem pomocí aplikace Contribute.
3. V podmínìném komentáøi aplikace Internet Explorer níže je vlastnost zoom použita k získání vlastnosti tagu mainContent „hasLayout“. Lze tak zabránit nìkolika chybám, které se vyskytují výhradnì u prohlížeèe IE.
*/
.twoColHybLtHdr #mainContent {
	margin: 0 10px 0 200px; /* Pravý okraj lze zadat v procentech nebo obrazových bodech. Dojde k vytvoøení mezery podél pravé strany stránky. */
	width: 590px;
}
#img {
	margin-left: 75px;

}

.twoColHybLtHdr #footer {
	padding: 0 10px; /* Toto odsazení odpovídá zarovnání vlevo u elementù v tazích div, které se nacházejí nad ním. */
	background:#DDDDDD;
}

.twoColHybLtHdr #footer p {
	margin: 0; /* Vynulováním okrajù prvního elementu v zápatí zabráníte možnému sbalení okraje – vzniku mezery mezi tagy div. */
	padding: 10px 0; /* Odsazení tohoto elementu vytvoøí mezeru stejnì jako okraj, avšak bez problému se sbalením okraje. */
}
/* Rùzné tøídy pro opakované použití */
.fltrt { /* Tuto tøídu lze použít pro nastavení plovoucího elementu vpravo na stránce. Plovoucí element musí pøedcházet element, vedle kterého se má na stránce zobrazovat. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Tuto tøídu lze použít pro nastavení plovoucího elementu vlevo na stránce. */
	float: left;
	margin-right: 8px;
}
.twoColHybLtHdr #container #sidebar1 p {
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 11px;
	border: 1px #000000 solid;
	margin-bottom: 2px;
	margin-top: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.clearfloat { /* Tato tøída musí být umístìna u elementu div nebo break a musí být posledním elementem pøed uzavøením kontejneru, který musí plovoucí prvek zcela obsahovat. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

#navlist
{
	padding: 0 1px 1px;
	margin-left: 0;
	font: bold 12px Verdana, sans-serif;
	background: gray;
	width: 188px;
	margin-top: 0px;
}

#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}

#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}
#imgs {
	margin-left: 25px;
}
#navlist1 {
	padding: 0 1px 1px;
	margin-left: 0;
	font: bold 12px Verdana, sans-serif;
	background: gray;
	width: 188px;
	margin-top: 0px;
}
#navlist2 {
	padding: 0 1px 1px;
	margin-left: 0;
	font: bold 12px Verdana, sans-serif;
	background: gray;
	width: 188px;
	margin-top: 0px;
}
#navlist1 li {
	list-style: none;
	margin: 0;
	border-top: 1px solid gray;
	text-align: left;
}
#navlist2 li {
	list-style: none;
	margin: 0;
	border-top: 1px solid gray;
	text-align: left;
}
#navlist1 li a {
	display: block;
	padding: 0.25em 0.5em 0.25em 0.75em;
	border-left: 1em solid #AAB;
	background: #CCD;
	text-decoration: none;
}
#navlist2 li a {
	display: block;
	padding: 0.25em 0.5em 0.25em 0.75em;
	border-left: 1em solid #AAB;
	background: #CCD;
	text-decoration: none;
}
#navlist1 li a:link {
	color: #448;
}
#navlist2 li a:link {
	color: #448;
}
#navlist1 li a:visited {
	color: #667;
}
#navlist2 li a:visited {
	color: #667;
}
#navlist1 li a:hover {
	border-color: #FE3;
	color: #FFF;
	background: #332;
}
#navlist2 li a:hover {
	border-color: #FE3;
	color: #FFF;
	background: #332;
}