/* Stylopis na formátování stránek Jak psát web */

/* Barvy */
body   { color: black; background-color: white;}
a:link {color: #3333ff}
a:visited {color: #3344bb}
a:hover		{ color: red} 


.lista {  color: #cccccc ;  background-color: #006666;}
.mimochodem	{background-color: white; clear: right}

/* Velikosti písem, řádkování */
p, li, dl, menu, td, th, ul, ol { line-height: 130%;}
/* pro mozillu, pro explorer*/
p, menu, dl	{ font-size: middle} p, menu, dl	{ font-size: "small"} 
td, th, li	{ font-size: middle} td, th, li	{ font-size: "small"}
H1		{ font-size: 32px} 
H2		{ font-size: 130%} 
H3		{ font-size: large }  H3		{ font-size: "120%" } 
H4		{ font-size: middle } H4		{ font-size: "small" } 
.podtitul	{ font-size: 19px} 
.zalozka  	{ font-size: middle} .zalozka  	{ font-size: "small"}



/* Řez písma */
.velke a   	{ font-weight: bold }
code, pre, p code, .code, .wrongcode	{font-family: MS Sans Serif, Geneva, sans-serif ; font-weight: 600; font-size: 70%; color: #494949; letter-spacing: "0.3px"}
.wrongcode {text-decoration: line-through}
.zalozka  	{ font-style: italic ; font-weight: bold }
.zalozka a	{ text-decoration: none}
.zalozka a:hover {text-decoration: underline }
.podtitul	{ font-weight: bold ; text-decoration: overline }
dt		{ font-weight: bold }
.priklad 	{font-style: italic}
.priklad code {font-style: normal}


/* Okraje odstavců */
p		{ margin-top: 2px ; margin-bottom: .5em} 
h2		{ margin-top: "12px" ; margin-bottom: "2px"; padding: 12px, 0px, 4px, 0px }
h3		{ margin-top: 16px ; margin-bottom: 2px}
ul, ol		{ margin-top: 0px ; margin-bottom: .8em}
p.komix	{ margin: 12px;}

/* Zarovnání odstavců */
H1, .podtitul	{ text-align: center}
.komix {text-align: center}

/* Rámečky odstavců */
H2		{   border-top: 1px solid navy }
.podcarou 	{text-align: center; color: #333333;}
.tlacitka 	{text-align: center; font-size: 11px; font-family: MS Sans Serif, Arial, sans-serif}
.tlacitka a 	{border: 5px outset #eeeedd; background-color: #eeeedd; padding: 3px 5px; text-decoration: none; color: black !important}

/* Tabulky */
table {border-collapse: collapse}

.html th	{ background-color: #aaaaaa}
.html caption	{color: #666666 ; font-weight: bold}
.html td, .html table     { border: 1px solid #aaaaaa; }
.html table	{margin-bottom: 1em; }

.js table {border: 1px solid #883366}
.js th 	{background-color: #bb6699}
.js td 	{border-color: #bb6699}

.css td, .css th {padding: 3px; }
.css td, .css table {border: 1px solid #cc9966;}
.css th {background-color: #daa830}/*#aa7700*/
.css caption {color: #996600; font-weight: bold}

/* vybarvení buněk v css tabulkach */
.ok	{background-color: honeydew}
.bacha {background-color: LemonChiffon}
.zle	{background-color: PeachPuff}
.vubec {background-color: MistyRose}

/*dvousloupcová úprava na HP */
.col2 {vertical-align: top; width: 50%; text-align: center}

/* sloupecek vpravo na css */
.rightlist {position: absolute; right: 10px; top: 0px; width: 140px; overflow: hidden}
.rightlist p {margin: 0px}
.rightlist h2 {margin-top: 0px}
.rightlist a:link, .rightlist a:visited {font-weight: normal}
/* obalovaci */
.withrightlist {padding-right: 160px; position: relative}

/* proužek komentářů, nyní nefunkční */
.nazory {} h1 { behavior: url('../priklady/pokus2.htc')}

/* Navigační tabulka a lišta */
table.navigace {border: none}
table.navigace, p#lista, p.navigace {margin-top: 20px; border-top: 1px solid navy}
table.navigace td {vertical-align: top; border: none }

/* Patka */
.patka {background-color: #333366; color: #eeeedd; padding: 1em; border: 5px ridge #eeeedd; text-align: right}/* pismo u vrsku */
.patka a:link, .patka a:visited {color: #eeeedd}

/* ----------------------------------------------- */
/* POZICOVANI */
* {-moz-box-sizing: border-box} /* Mozillicko milovana, prosim, chovej se jako exploder */

/*okraje body */
body {margin-left: 150px; margin-top: 120px; margin-right: 10px;}

/*usporadani stranky*/
#hlavicka, #vpravo {height: 80px; overflow: hidden; }
#hlavicka {position: absolute; left: 0px; top:0px; width: 100%; z-index: 3}
#hlavicka .vnitrek:lang(cs) {margin-right: 176px} /* pro mozillu, ale ne pro Operu 7, časem přestane fungovat */
#vpravo {position: absolute; left: 100%; top: 0px; width: 176px;  margin-left: -176px; z-index: 4} 
#levysloupec {position: absolute; overflow: hidden; top: 80px; left: 0px; width: 125px; z-index: 2} 

/*formatovani vrsku */
.vrsek {background-color: #333366; color: #eeeedd; border-width: 0px 0px 8px 0px; border-style: solid}
.vrsek, .vrsek p, .sloupec, .patka {font-family: MS sans serif, Helvetica, Arial CE, Arial, sans-serif; font-size: 11px}
.vrsek a:link, .vrsek a:visited {color: #eeeedd}

/*usporadani vrsku*/
#logo {position: absolute; left: 0px; top: 0px; z-index: 5; filter: shadow(direction=180)} 
#hlavicka #slogan {position: absolute; left: 126px; top: 8px}
#vpravo #hledani {position: absolute; left: 0px; top: 33px} 
	#hledani input {border:none; background-color: #eeeedd; height: 18px}
	#hledani input.text {width: 130px}
#vpravo #kontakt {position: absolute; left: 0px; top: 8px}
#hlavicka #ouska {position: absolute; left: 144px; top: 49px}

/*ouska barvy jsou u variaci */
.prouzek {font-size: 12px; letter-spacing:1px; line-height: 28px; }
.prouzek a:link, .prouzek a:visited {padding: 3px 5px; border-width: 5px; border-style: outset; border-color: #eeeedd; background-color: #eeeedd; text-decoration: none; color: black;}
.prouzek a:hover {border-style: inset; }

/*sloupec*/

#levysloupec p {width: 107px; margin: 0px 4px 4px 9px }
#levysloupec p.velke {padding-left: 4px; padding-top: 12px}
#levysloupec a {width: 102px; padding: 4px;  display: block}


.sloupec {border-style: inset; border-width: 0px 5px 5px 0px; margin-bottom: 16px}
.sloupec+.sloupec {border-width: 5px 5px 5px 0px;}
.sloupec p {line-height: 1; font-size: 11px}
.sloupec p.velke { font-weight: bold; }
.sloupec a {background-color: #green; color: black; text-decoration: none;}
.sloupec a:link {color: black;}
.sloupec a:visited {color: #444444}
.sloupec a:hover {background-color: #333366; color: #eeeedd}

/* ----------------------------------------------------------------- */
/* BARVY variace podle classu u body + barvy ousek */
.vrsek {border-color: #44AA66;}
.sloupec, body .z .sloupec {background-color: #44AA66; border-color: #44AA66;}
.prouzek a.z:link, .prouzek a.z:visited  {background-color: #44AA66; border-color: #44AA66}
.prouzek a.z:hover  {background-color: #44AA66 !important; border-color: #44AA66 !important}
.html .prouzek a.z:link, .html .prouzek a.z:visited, .css .prouzek a.z:link, .css .prouzek a.z:visited, .js .prouzek a.z:link, .js .prouzek a.z:visited, .fp .prouzek a.z:link, .fp .prouzek a.z:visited {background-color: #eeeedd; border-color: #eeeedd}

.html .vrsek {border-color: #999999;}
.html .sloupec {background-color: #999999; border-color: #999999;}
.html .prouzek a.html, .prouzek a.html:hover {background-color: #999999; border-color: #999999}

.css .vrsek {border-color: #daa520;}/*b8761b*/
.css .sloupec {background-color: #daa520; border-color: #daa520;}
.css .prouzek a.css, .prouzek a.css:hover {background-color: #daa520; border-color: #daa520}

.js .vrsek {border-color: #bb6699;}
.js .sloupec {background-color: #bb6699; border-color: #bb6699;}
.js .prouzek a.js, .prouzek a.js:hover {background-color: #bb6699; border-color: #bb6699}

.fp .vrsek {border-color: #4169e1;}
.fp .sloupec {background-color: #4169e1; border-color: #4169e1;}
.fp .prouzek a.fp, .prouzek a.fp:hover {background-color: #4169e1; border-color: #4169e1; }/*royalblue*/


/*barevne variace NADPISY */
h1	{ color: #009933 }
h2	{ color: #006600 }

body.html h1 {color: black }
body.html h2 {color: black }

body.css h1 {color: #a8761b;);}/*#daa520*/
body.css h2 {color: #98561b }

body.js h1 {color: #bb3399 }
body.js h2 {color: #880066 }

body.fp h1 {color: royalblue }
body.fp h2 {color: darkblue }

/* Tisk */
h2 {page-break-after: avoid}
@media print{
	body {margin-top: 0px; margin-left: 0px;}
	#levysloupec, #hlavicka,  #vpravo {display: none}
	#logo {z-index: -1; filter: alpha(opacity=50); -moz-opacity: 50%;}
	#sponsor {display: none}
}