/******************************************************************************/ /*** ***/ /*** CSS styly: Čerych David | http://www.cerych.cz ***/ /*** CSS styly pro formátování designu a textů ***/ /*** Autor: David Čerych | http://www.cerych.cz ***/ /*** Copyright: © 2009 ***/ /*** ***/ /******************************************************************************/ /* Úvodní definice ************************************************************/ * { margin: 0px; padding: 0px; border: 0px; } body { font-family: "Trebuchet MS", Corbel, Tahoma, Helvetica, Arial, sans-serif; font-size: 100%; text-align: left; background-color: #0000CC; } #barva1 { background-color: #0000CC; } #barva2 { background-color: #00CCFF; } #barva3 { background-color: #11FF11; } #barva4 { background-color: #CC0077; } #barva5 { background-color: #990099; } #hlavni_obal { width: 980px; margin: 0px auto; } /* ****************************************************************************/ /* Hlavička a logo stránky ****************************************************/ #hlavicka { position: relative; margin: 0px; padding: 0px; z-index: 100; width: 100%; /* Výška je dána výškou loga... */ } #logo { position: relative; left: 10px; top: 0px; overflow: hidden; } #logo img { display: none; } #logo, #logo span { width: 220px; height: 95px; } #logo span { /* Ochrana před vypnutím obrázků... */ position: absolute; left: 0px; top: 0px; display: block; background: transparent url(../obrazky/grafika/logo-cerych-b1.gif) left top no-repeat; } #barva2 #logo span { background-image: url(../obrazky/grafika/logo-cerych-b2.gif); } #barva3 #logo span { background-image: url(../obrazky/grafika/logo-cerych-b3.gif); } #barva4 #logo span { background-image: url(../obrazky/grafika/logo-cerych-b4.gif); } #barva5 #logo span { background-image: url(../obrazky/grafika/logo-cerych-b5.gif); } #logo strong { display: block; font-size: 1.4em; border-bottom: 5px solid #FF6600; } #logo strong a { color: #FFFFFF; text-decoration: none; } /* ****************************************************************************/ /* Formátování menu stránky ***************************************************/ div#menu { position: absolute; right: 15px; bottom: 0px; z-index: 100px; } div#menu ul { margin: 0px; padding: 0px; } div#menu li { position: relative; float: left; margin: 5px 0px 0px 1.5em; list-style: none; font-size: 1.1em; font-weight: bold; } div#menu li a { display: block; padding: 0.25em 0.5em 0 0.5em; color: #FFFFFF; text-decoration: none; white-space: nowrap; } div#menu li a:hover { color: #313131; } div#menu li:hover { background-color: #FF6600; } div#menu li.aktivni { border-top: 5px solid #FFFFFF; margin-top: 0px; } div#menu ul ul { position: absolute; background-color: #FF6600; display: none; z-index: 100; } div#menu ul ul li { margin: 0px; font-size: 0.9em; font-weight: normal; } div#menu ul.uroven1 li.podmenu:hover ul.uroven2 { display: block; z-index: 100; } /* ****************************************************************************/ /* Formátování banneru mezi menu a obsahem stránky ****************************/ #banner { position: relative; margin: 10px 0px 0px 0px; padding: 0px; width: 100%; height: 220px; overflow: hidden; z-index: 5; } #banner span { /* Ochrana před vypnutím obrázků... */ position: absolute; left: 0px; top: 0px; width: 100%; height: 220px; display: block; background: transparent url(../obrazky/grafika/banner-barva1a.jpg) center no-repeat; z-index: 5; } #barva2 #banner span { background-image: url(../obrazky/grafika/banner-barva2a.jpg); } #barva3 #banner span { background-image: url(../obrazky/grafika/banner-barva3a.jpg); } #barva4 #banner span { background-image: url(../obrazky/grafika/banner-barva4a.jpg); } #barva5 #banner span { background-image: url(../obrazky/grafika/banner-barva5a.jpg); } #banner-ramecek { position: absolute; left: 0px; top: 0px; width: 980px; height: 220px; background: transparent url(../obrazky/grafika/banner-barva1b.gif) left top repeat; z-index: 5; } #barva2 #banner-ramecek { background-image: url(../obrazky/grafika/banner-barva2b.gif); } #barva3 #banner-ramecek { background-image: url(../obrazky/grafika/banner-barva3b.gif); } #barva4 #banner-ramecek { background-image: url(../obrazky/grafika/banner-barva4b.gif); } #barva5 #banner-ramecek { background-image: url(../obrazky/grafika/banner-barva5b.gif); } #banner strong { font-size: 1.2em; padding: 15px 0px; font-style: italic; color: #FFFFFF; } /* ****************************************************************************/ /* Stránka s hlavním obsahem **************************************************/ #stranka { margin: 0px; padding: 0px; width: 100%; background-color: #FFFFFF; } #stranka { background: #FFFFFF url(../obrazky/grafika/bg-barva1b.gif) left top repeat-y; } #barva2 #stranka { background-image: url(../obrazky/grafika/bg-barva2b.gif); } #barva3 #stranka { background-image: url(../obrazky/grafika/bg-barva3b.gif); } #barva4 #stranka { background-image: url(../obrazky/grafika/bg-barva4b.gif); } #barva5 #stranka { background-image: url(../obrazky/grafika/bg-barva5b.gif); } #stranka_obsah { background: transparent url(../obrazky/grafika/bg-barva1a.gif) left top no-repeat; } #barva2 #stranka_obsah { background-image: url(../obrazky/grafika/bg-barva2a.gif); } #barva3 #stranka_obsah { background-image: url(../obrazky/grafika/bg-barva3a.gif); } #barva4 #stranka_obsah { background-image: url(../obrazky/grafika/bg-barva4a.gif); } #barva5 #stranka_obsah { background-image: url(../obrazky/grafika/bg-barva5a.gif); } #stranka_obsah_in { padding: 30px; background: transparent url(../obrazky/grafika/bg-barva1c.gif) left bottom no-repeat; } #barva2 #stranka_obsah_in { background-image: url(../obrazky/grafika/bg-barva2c.gif); } #barva3 #stranka_obsah_in { background-image: url(../obrazky/grafika/bg-barva3c.gif); } #barva4 #stranka_obsah_in { background-image: url(../obrazky/grafika/bg-barva4c.gif); } #barva5 #stranka_obsah_in { background-image: url(../obrazky/grafika/bg-barva5c.gif); } .stranka_levy_sloupek { margin-right: 235px; } /* ****************************************************************************/ /* Patička stránky ************************************************************/ #paticka { margin: 0px 0px 5px 0px; padding: 0px; width: 100%; clear: both; font-size: 0.75em; text-align: center; color: #FFFFFF; } /* ****************************************************************************/ /* Obrázky ********************************************************************/ img { display: block; padding: 3px; border: 1px solid #0000CC; } #barva2 img { border-color: #00CCFF; } #barva3 img { border-color: #11FF11; } #barva4 img { border-color: #CC0077; } #barva5 img { border-color: #990099; } img.levy { float: left; margin: 5px 15px 5px 0px; display: inline; } /* inline = ošetření dvojitého marginu v IE */ img.stred { float: none; margin: 5px auto; } img.pravy { float: right; margin: 5px 0px 5px 15px; display: inline; } img.bez_ramecku { border: none; } img.bez_okraju { margin: 0px; } img.mezera_za { margin-bottom: 25px; } img.uvodni { float: left; padding: 0px; border: none; margin: 10px 5px 10px 5px; display: inline; } a:hover img { border-color: #FF0000; } /* ****************************************************************************/ /* Plaváčci *******************************************************************/ .plavacek_levy, .plavacek_pravy { margin: 0px 0px 15px 0px; padding: 0px; display: inline; background-color: #FFFFFF; } .plavacek_levy { float: left; margin-right: 15px; } .plavacek_pravy { float: right; margin-left: 15px; } .plavacek_levy .plavacek_in { padding-right: 15px; } .plavacek_pravy .plavacek_in { padding-left: 15px; } .boxik { width: 235px; } /* Šířka odpovídá okraji sloupku .stranka_levy_sloupek */ .box_uzky { width: 150px; } /* ****************************************************************************/ /* Barevné vnitřní boxy s kulatými rohy ***************************************/ .box_kulaty1, .box_kulaty10 { width: 100%; background: #FF6600 url(../obrazky/grafika/box-barva0b.gif) right top no-repeat; } #barva1 .box_kulaty1 { background-color: #0000CC; background-image: url(../obrazky/grafika/box-barva1b.gif); } #barva2 .box_kulaty1 { background-color: #00CCFF; background-image: url(../obrazky/grafika/box-barva2b.gif); } #barva3 .box_kulaty1 { background-color: #11FF11; background-image: url(../obrazky/grafika/box-barva3b.gif); } #barva4 .box_kulaty1 { background-color: #CC0077; background-image: url(../obrazky/grafika/box-barva4b.gif); } #barva5 .box_kulaty1 { background-color: #990099; background-image: url(../obrazky/grafika/box-barva5b.gif); } .box_kulaty2, .box_kulaty20 { background: transparent url(../obrazky/grafika/box-barva0a.gif) left top no-repeat; padding-top: 11px; } #barva1 .box_kulaty2 { background-image: url(../obrazky/grafika/box-barva1a.gif); } #barva2 .box_kulaty2 { background-image: url(../obrazky/grafika/box-barva2a.gif); } #barva3 .box_kulaty2 { background-image: url(../obrazky/grafika/box-barva3a.gif); } #barva4 .box_kulaty2 { background-image: url(../obrazky/grafika/box-barva4a.gif); } #barva5 .box_kulaty2 { background-image: url(../obrazky/grafika/box-barva5a.gif); } .box_kulaty3, .box_kulaty30 { background: transparent url(../obrazky/grafika/box-barva0a.gif) left bottom no-repeat; padding-left: 11px; } #barva1 .box_kulaty3 { background-image: url(../obrazky/grafika/box-barva1a.gif); } #barva2 .box_kulaty3 { background-image: url(../obrazky/grafika/box-barva2a.gif); } #barva3 .box_kulaty3 { background-image: url(../obrazky/grafika/box-barva3a.gif); } #barva4 .box_kulaty3 { background-image: url(../obrazky/grafika/box-barva4a.gif); } #barva5 .box_kulaty3 { background-image: url(../obrazky/grafika/box-barva5a.gif); } .box_kulaty4, .box_kulaty40 { background: transparent url(../obrazky/grafika/box-barva0b.gif) right bottom no-repeat; padding-right: 11px; padding-bottom: 11px; } #barva1 .box_kulaty4 { background-image: url(../obrazky/grafika/box-barva1b.gif); } #barva2 .box_kulaty4 { background-image: url(../obrazky/grafika/box-barva2b.gif); } #barva3 .box_kulaty4 { background-image: url(../obrazky/grafika/box-barva3b.gif); } #barva4 .box_kulaty4 { background-image: url(../obrazky/grafika/box-barva4b.gif); } #barva5 .box_kulaty4 { background-image: url(../obrazky/grafika/box-barva5b.gif); } /* ****************************************************************************/ /* Přehled výhod a podobných zvýrazněných seznamů *****************************/ .prehled { margin-bottom: 15px; } .prehled .bod { float: left; width: 55px; display: inline; font-size: 2.2em; text-align: right; color: #0000CC; white-space: nowrap; overflow: hidden; } #barva2 .prehled .bod { color: #00CCFF; } #barva3 .prehled .bod { color: #11FF11; } #barva4 .prehled .bod { color: #CC0077; } #barva5 .prehled .bod { color: #990099; width: 155px; font-size: 1.3em; } .prehled .text { margin: 5px 0px 0px 70px; padding-left: 15px; border-left: 3px solid #0000CC; } #barva2 .prehled .text { border-color: #00CCFF; } #barva3 .prehled .text { border-color: #11FF11; } #barva4 .prehled .text { border-color: #CC0077; } #barva5 .prehled .text { border-color: #990099; margin-left: 170px; } .prehled .text p { font-size: 0.75em; line-height: normal; } /* ****************************************************************************/ /* Galerie obrázků ************************************************************/ .galerie { margin: 0px auto; padding: 5px; } .galerie_obrazek { float: left; display: inline; width: 185px; height: 190px; margin: 5px 20px 25px 20px; padding: 0px; } .galerie_obrazek img { margin: 0px; padding: 0px; border: none; } .galerie_obrazek p { margin: 0px; font-size: 0.7em; text-align: center; } .galerie_obrazek p.nazev { font-weight: bold; } .galerie_obrazek p.nazev:first-letter { color: #0000CC; font-size: 2.2em; line-height: 1.0em; } #barva2 .galerie_obrazek p.nazev:first-letter { color: #00CCFF; } #barva3 .galerie_obrazek p.nazev:first-letter { color: #11FF11; } #barva4 .galerie_obrazek p.nazev:first-letter { color: #CC0077; } #barva5 .galerie_obrazek p.nazev:first-letter { color: #990099; } /* ****************************************************************************/ /* Mapa v kontaktech **********************************************************/ #kontakt_mapa { margin-top: 5px; width: 228px; height: 178px; background: transparent url(../obrazky/grafika/kontakt-praha.jpg) center no-repeat; } #kontakt_mapa_in { padding: 3px; border: 1px solid #CC0077; } /* ****************************************************************************/ /* NADPISY ********************************************************************/ h1, h2, h3 { margin: 0px 0px 0.3em 0px; padding: 0px; font-weight: normal; font-style: normal; color: #313131; } #stranka h1 { font-size: 1.7em; letter-spacing: -1px; } #stranka h1:first-letter { color: #0000CC; font-size: 1.9em; line-height: 1.0em; } #barva2 #stranka h1:first-letter { color: #00CCFF; } #barva3 #stranka h1:first-letter { color: #11FF11; } #barva4 #stranka h1:first-letter { color: #CC0077; } #barva5 #stranka h1:first-letter { color: #990099; } #stranka h2 { margin-top: 1.5em; font-size: 1.3em; letter-spacing: -1px; border-bottom: 1px solid #0000CC; } #barva2 #stranka h2 { border-color: #00CCFF; } #barva3 #stranka h2 { border-color: #11FF11; } #barva4 #stranka h2 { border-color: #CC0077; } #barva5 #stranka h2 { border-color: #990099; } #stranka h3 { font-size: 1.3em; letter-spacing: -1px; line-height: 1.1em; } #stranka h3.odkazy { font-size: 1.3em; } /* ****************************************************************************/ /* TEXTY a další formátování **************************************************/ p, ul, ol { margin: 0px 0px 1.5em 0px; font-size: 0.9em; line-height: 1.4em; color: #000000; } strong { font-weight: bold; } em { font-style: italic; } strong.barva, strong.barva a { color: #0000CC; font-weight: normal; } #barva2 strong.barva, #barva2 strong.barva a { color: #00CCFF; } #barva3 strong.barva, #barva3 strong.barva a { color: #11FF11; } #barva4 strong.barva, #barva4 strong.barva a { color: #CC0077; } #barva5 strong.barva, #barva5 strong.barva a { color: #990099; } strong.pod_nadpisem { margin-bottom: 1.0em; font-size: 1.1em; line-height: 1.4em; font-weight: normal; font-style: normal; font-family: Georgia, Times, Palatino, serif; color: #777777; display: block; } .vyrazny { font-weight: bold; color: #FF0000; } .mensi_text { font-size: 0.7em; line-height: normal; } .vetsi_text { font-size: 1.25em; line-height: normal; } .maly_text { font-size: 0.55em; line-height: normal; } /* ****************************************************************************/ /* ODKAZY *********************************************************************/ a { text-decoration: underline; color: #FF6600; } a:hover { text-decoration: none; color: #FF0000; } #paticka a { font-weight: bold; } a.odkaz_poznamka { top: -0.3em; text-decoration: none; } a span { display: none; } a:hover span { position: absolute; top: -15px; left: 15px; width: 15em; padding: 3px; display: block; font-size: 0.9em; line-height: 1.3em; color: #000000; background-color: #DEDEDE; z-index: 10; } /* ****************************************************************************/ /* SEZNAMY ********************************************************************/ ul, ol { margin-left: 35px; padding: 0px; } #stranka ul { list-style-type: disc; list-style-image: url(../obrazky/grafika/bod-barva1.gif); } #barva2 #stranka ul { list-style-image: url(../obrazky/grafika/bod-barva2.gif); } #barva3 #stranka ul { list-style-image: url(../obrazky/grafika/bod-barva3.gif); } #barva4 #stranka ul { list-style-image: url(../obrazky/grafika/bod-barva4.gif); } #barva5 #stranka ul { list-style-image: url(../obrazky/grafika/bod-barva5.gif); } #stranka ol { list-style-type: decimal; color: #0000CC; } #stranka ul a, #obsah ol a { color: #0000CC; } #barva2 #stranka ol, #barva2 #stranka ul a, #barva2 #stranka ol a { color: #00CCFF; } #barva3 #stranka ol, #barva3 #stranka ul a, #barva3 #stranka ol a { color: #11FF11; } #barva4 #stranka ol, #barva4 #stranka ul a, #barva4 #stranka ol a { color: #CC0077; } #barva5 #stranka ol, #barva5 #stranka ul a, #barva5 #stranka ol a { color: #990099; } #stranka ul a:hover, #stranka ol a:hover, #barva2 #stranka ul a:hover, #barva2 #stranka ol a:hover, #barva3 #stranka ul a:hover, #barva3 #stranka ol a:hover, #barva4 #stranka ul a:hover, #barva4 #stranka ol a:hover, #barva5 #stranka ul a:hover, #barva5 #stranka ol a:hover { color: #FF0000; } #stranka ol li span { color: #000000; } /* ****************************************************************************/ /* FORMULÁŘE ******************************************************************/ form { margin: 0px; padding: 0px; border: none; } label { float: left; width: 170px; font-size: 0.9em; color: #FFFFFF; display: block; } input, textarea { margin: 0px 0px 10px 0px; border: 1px solid #313131; } #form_kontakt form { width: 290px; } #form_kontakt input, #form_kontakt textarea { width: 280px; } #form_kontakt input.tlacitko { width: 110px; } /* ****************************************************************************/ /* OSTATNÍ FORMÁTOVÁNÍ ********************************************************/ .bez_dolniho_okraje { margin-bottom: 0px; } .zarovnani_nastred { text-align: center; } .zarovnani_vpravo { text-align: right; } .bily { color: #FFFFFF; } .pod_carou { margin: 0.7em 0px 0px 0px; font-size: 0.75em; line-height: normal; text-align: center; border-top: 1px dotted #000000; } .relativni { position: relative; } #odkazy_postup { font-size: 0.7em; text-align: right; } #odkazy_postup a { font-weight: bold; text-transform: uppercase; } .mezera_nad { margin-top: 2.5em; } .mezera_pod { margin-bottom: 2.5em; } .cistic { clear: both; height: 0px; font-size: 0px; overflow: hidden; content: ' '; } .cistic hr { display: none; } /* ****************************************************************************/