@charset "utf-8";
/* CSS Document */

body {font-family: Helvetica, Arial; padding: 0px 0px 50px 0px}

#page {width: 900px; margin: 44px auto 0px auto}

h1 {font-size: 28px; color: #2d4f9f; font-weight: bold}

/*********************************** LOGO **********************************/
#logo {margin: 0; padding: 0; position: relative; width: 425px; height: 56px; overflow: hidden}
#logo span {display: block; color: #2d4f9f; position: absolute; left: 0; top: 0; z-index: 1; width: 425px; height: 56px; margin: 0; padding: 0; background: url("../img/logo.jpg") top left no-repeat}
#logo a {text-decoration: none; color: #2d4f9f}
#logo a:hover, #logo span a:visited {text-decoration: none; color: #2d4f9f}

/********************************* STYLY PRO LEVY SLOUPEC **********************************/
#left {background: url("../img/ctverce.jpg") no-repeat; width: 225px; height: 225px; margin-top: 20px; float: left}
#leftp {background: url("../img/ctverce1.jpg") no-repeat; width: 225px; height: 225px; margin-top: 20px; float: left}
h2 {margin-top: 245px; font-size: 20px; font-weight: bold; letter-spacing: 1px; color: #2d4f9f}

/************************************* STYLY PRO PRAVY SLOUPEC ***********************************/
#right {margin-top: 20px; width: 675px; float: right}

.text {margin: 37px 0px 0px 14px; min-height: 114px; _height: 114px; font-size: 13px; letter-spacing: 1px; width: 550px; line-height: 18px}
.textp, .textr {font-size: 13px; letter-spacing: 1px}
.textp {margin: 37px 0px 20px 14px; width: 550px; line-height: 18px}

.textr p {margin: 37px 0 0 14px; font-size: 13px; letter-spacing: 1px}
.textr p a {text-decoration: underline; color: #000}
.textr p a:hover {text-decoration: none; color: #000}

/* ne jen table, ale .reference, aby to neovlivnovalo dalsi tabulky na zbytku webu */
table.reference {margin: 27px 0px 0px 14px; width: 661px; border-collapse: collapse}
table.reference th, table.reference td {border-bottom: 1px solid #0d4ea2; line-height: 20px; padding-left: 4px}
table.reference th {text-align: left}
table.reference td {width: 60%}

/* u nazvu sloupcu tabulky se vetsinou pouziva ID, vetsinou byvaji unique */
table.reference col.first td {color: #000}
table.reference td {color: #2d4f9f}
table.reference td:first-child {color: #000;}
table.reference td {_color: expression(this.previousSibling==null?'#000':'#2d4f9f');} /* IE6 neumi :first-child, tohle je JavaScript. "Pokud neexistuje (=null) predchozi sourozenec = je to prvni bunka, zadej barvu #000, jinak #00f" */

table.reference b {font-weight: normal; color: #000}
table.reference i {font-style: normal; color: #b487be}
table.reference u {text-decoration: none; color: #a9a9a9}

/*
table.reference col.second {color: #00f;}  // tohle styluje prvni sloupec tabulky, ale nejde mu dat barva, jak jsem to zamyslel - jen sirka, zarovnani
table.reference td+td {color: #00f;} // totez pro ostatni prohlizece mimo IE, selektor sourozence (vsechny td mimo prvni)
*/

table.reference span {color: #ccc} /* druha nejpouzivanejsi barva bude ve spanu bez tridy */
table.reference span.black {color: #000} /* na ostatni barvy lze pouzit bud span se tridou, nebo jine znacky. Nebal bych se pouzit pro jednotlive barvy tagy <u>, <b>, <i>, ... a ostylovat je tak, aby se lisily jen barvou, tedy <b> sebrat bold, <u> podtrzeni atd. */

.seznamy {margin: 0; padding: 0}
.seznamy li {margin: 0px 0px 0px 14px; list-style-type: none; font-size: 13px; width: 550px; line-height: 18px; letter-spacing: 1px}

.texto {margin: 37px 0px 0px 14px; font-size: 13px; letter-spacing: 1px; width: 550px; line-height: 18px; border-bottom: 1px solid #0d4ea2; padding: 0px 111px 10px 0px}
.textop {margin: 10px 0px 0px 14px; font-size: 13px; letter-spacing: 1px; width: 550px; line-height: 18px}
.odrazky {margin: 10px 0px 50px 14px; color: #fff; background-color: #0d4ea2; font-size: 13px; letter-spacing: 1px; line-height: 18px; width: 600px; padding: 10px 61px 10px 0px}
.odrazky li {margin: 0px 0px 0px 25px; list-style-image: url("../img/dash.gif"); list-style-position: outside}
.odsazeni {margin: 20px 0px 0px 14px; font-size: 13px; letter-spacing: 1px; width: 550px; line-height: 18px}

ul#image {margin: 0; padding: 0}
ul#image li {float: left; width: 225px; list-style: none;}

ul#image p {margin: 0; padding-left: 2px; letter-spacing: 1px}
ul#image p a {padding-top: 10px; display: block; letter-spacing: 1px}

ul#image h3.immage {font-size: 20px; font-weight: bold; margin: 0; padding: 0; color: #fff; text-align: left; letter-spacing: 1px; width: 225px; height: 225px}
/* sirka + levy padding + pravy padding = 225px
   vyska + dolni padding + horni padding = 225px */

ul#image h3.immage a {display: block; color: #fff; text-decoration: none; width: 145px; height: 145px; padding: 80px 40px 0}

ul#image li#image1 h3 {height: 225px}
ul#image li#image1 h3 {background: #0d4ea2 url("../img/ctverec2.gif") left top no-repeat}
ul#image li#image2 h3 {background: #b487be url("../img/ctverec3.gif") left top no-repeat}
ul#image li#image3 h3 {background: #a9a9a9 url("../img/ctverec4.gif") left top no-repeat}

ul#image li#image1 {color: #0d4ea2}
ul#image li#image2 {color: #b487be}
ul#image li#image3 {color: #a9a9a9}

ul#image li#image1 p a {color: #0d4ea2; text-decoration: none}
ul#image li#image1 p a:hover {color: #0d4ea2; text-decoration: none}

ul#image li#image2 p a {color: #b487be; text-decoration: none}
ul#image li#image2 p a:hover {color: #b487be; text-decoration: none}

ul#image li#image3 p a {color: #a9a9a9; text-decoration: none}
ul#image li#image3 p a:hover {color: #a9a9a9; text-decoration: none}

/************************************ STYL PRO SKRYVANI TEXTU *********************************/
h3.barvy {display: inline; cursor: pointer; cursor: hand; font-size: 13px; font-weight: bold; text-decoration: none; margin: 0, padding: 0}
h3#modra {color: #0d4ea2}
h3#fialova {color: #b487be}
h3#seda {color: #a9a9a9}

.podtrzeni1, .podtrzeni2, .podtrzeni3 {padding: 0px 656px 0px 0px; line-height: 0px}
.podtrzeni1 {border-bottom: 3px solid #0d4ea2}
.podtrzeni2 {border-bottom: 3px solid #b487be}
.podtrzeni3 {border-bottom: 3px solid #a9a9a9}

#oddil1, #oddil2, #oddil3 {display: none; margin: 2px 0px 0px 14px; color: #fff; font-size: 13px; line-height: 18px}
#oddil1 {background-color: #0d4ea2; width: 650px; padding: 10px 11px 10px 0px}
#oddil1 li {margin: 0px 0px 0px 25px; list-style-image: url("../img/dash.gif"); list-style-position: outside}
#oddil2 {background-color: #b487be; width: 600px; padding: 10px 46px 10px 15px}
#oddil3 {background-color: #a9a9a9; width: 600px; padding: 10px 46px 10px 15px}

#oddil3 ul {margin: 10px 0 10px 15px}
#oddil3 li {margin: 0px 0px 0px 25px; list-style-image: url("../img/dash.gif"); list-style-position: outside}

.odsazeni_d {margin: 20px 0px 0px 14px; font-size: 13px; letter-spacing: 1px; line-height: 18px}
.popisky {cursor: pointer; cursor: hand; font-size: 13px; letter-spacing: 1px; line-height: 18px}

/*********************************** STYLY PRO ODKAZY **************************************/
.textp a, .odsazeni a, .seznamy a {color: #000; text-decoration: none}
.textp a:hover, .odsazeni a:hover, .seznamy a:hover {color: #000; text-decoration: underline}
.mapa a {color: #0d4ea2; text-decoration: underline}
.mapa a:hover {color: #0d4ea2; text-decoration: none}
.skd a {color: #b487be; text-decoration: underline}
.skd a:hover {color: #b487be; text-decoration: none}