div.cleaner { clear: left; height: 1px; visibility: hidden; }
hr.cleaner { clear: both; height: 1px; margin: -1px 0 0 0; padding:0; border:none; visibility: hidden; }

body { background: url(../images/bg.gif) top left repeat-x #fff; font-family: Verdana, Arial, sans-serif; font-size: 0.8em; color: #222; margin: 0; }

a { color: #366481; outline: none; }
a:hover { color: #333; text-decoration: none; }
.hidden { display: none; }
a:active{ outline: none; }

img { border: 0; }

h1 { width: 268px; height: 66px; margin: 0 0 10px 0; overflow: hidden; position: relative; }
h1 a { width: 268px; height: 66px; display: block; }
h1 a span { width: 268px; height: 66px; display: block; position: absolute; top: 0; left: 0; background: url(../images/logo.gif) top left no-repeat; }

h2 { margin: 0; color: #366481; padding: 10px 0 5px 0; }
h3 { margin: 0; color: #333; padding: 30px 0 5px 0; text-transform: uppercase; font-weight: normal; font-size: 1.3em; }
h3 a { color: #333; text-decoration: none; }
h3 a:hover { color: #345972; text-decoration: underline; }

.float { float: left; margin: 0 10px 10px 0; }
.float.right { float: right; margin: 0 0 10px 10px; }

p.right { text-align: right; }

/* ============ */
/*     MAIN     */
/* ============ */

#top { width: 880px; margin: 22px auto 0 auto; position: relative; background: #fff; position: relative; padding: 15px; border: 1px solid #d3d3d3; border-bottom: 0; }

#left { float: left; width: 605px; margin: 0 15px 0 0; }
    #left p { color: #646464; }
    .promo { height: 80px; width: 605px; display: block; margin: 0 0 15px 0; background: url(../images/promo/home.jpg) bottom left no-repeat; }
        .promo.kontakt { background: url(../images/promo/kontakt.jpg) bottom left no-repeat; }
        .promo.sklo { background: url(../images/promo/sklo.jpg) bottom left no-repeat; }
        .promo.drevo { background: url(../images/promo/drevo.jpg) bottom left no-repeat; }
        .promo.keramika { background: url(../images/promo/keramika.jpg) bottom left no-repeat; }
        .promo.plasty { background: url(../images/promo/plasty.jpg) bottom left no-repeat; }
        .promo.kovy { background: url(../images/promo/kovy.jpg) bottom left no-repeat; }
        .promo.mineralni-podklady { background: url(../images/promo/mineralni-podklady.jpg) bottom left no-repeat; }
        .promo.textil { background: url(../images/promo/textil.jpg) bottom left no-repeat; }
        .promo.proti-otiskum-prstu { background: url(../images/promo/proti-otiskum-prstu.jpg) bottom left no-repeat; }
        .promo.proti-zamlzovani { background: url(../images/promo/proti-zamlzovani.jpg) bottom left no-repeat; }
        .promo.samocistici { background: url(../images/promo/samocistici.jpg) bottom left no-repeat; }
        .promo.proti-znecisteni { background: url(../images/promo/proti-znecisteni.jpg) bottom left no-repeat; }
        .promo.proti-smaceni { background: url(../images/promo/proti-smaceni.jpg) bottom left no-repeat; }
        .promo.antikorozni { background: url(../images/promo/antikorozni.jpg) bottom left no-repeat; }
        .promo.uv-ochrana { background: url(../images/promo/uv-ochrana.jpg) bottom left no-repeat; }
        .promo.snizeni-treni { background: url(../images/promo/snizeni-treni.jpg) bottom left no-repeat; }
        .promo.oteruvzdornost { background: url(../images/promo/oteruvzdornost.jpg) bottom left no-repeat; }
        .promo.antimikrobialni-system { background: url(../images/promo/antimikrobialni-system.jpg) bottom left no-repeat; }
        .promo.vodivost-a-izolace { background: url(../images/promo/vodivost-a-izolace.jpg) bottom left no-repeat; }
        .promo.design { background: url(../images/promo/design.jpg) bottom left no-repeat; }
        .promo.katalyticke-procesy { background: url(../images/promo/katalyticke-procesy.jpg) bottom left no-repeat; }
        .promo.auto-prumysl, .promo.auto, .promo.nanoway-auto { background: url(../images/promo/auto-prumysl.jpg) bottom left no-repeat; }
        .promo.tiskarsky-prumysl { background: url(../images/promo/tiskarsky-prumysl.jpg) bottom left no-repeat; }
        .promo.energetika { background: url(../images/promo/energetika.jpg) bottom left no-repeat; }
        .promo.keramicky-a-sklarsky-prumysl { background: url(../images/promo/keramicky-a-sklarsky-prumysl.jpg) bottom left no-repeat; }
        .promo.strojirenstvi, .promo.prumysl { background: url(../images/promo/strojirenstvi.jpg) bottom left no-repeat; }
        .promo.vodohospodarstvi { background: url(../images/promo/vodohospodarstvi.jpg) bottom left no-repeat; }
        .promo.zahrada { background: url(../images/promo/zahrada.jpg) bottom left no-repeat; }
        .promo.domacnost { background: url(../images/promo/domacnost.jpg) bottom left no-repeat; }
        .promo.sport { background: url(../images/promo/sport.jpg) bottom left no-repeat; }
        .promo.profi-servis { background: url(../images/promo/profi-servis.jpg) bottom left no-repeat; }
        .promo.sanita { background: url(../images/promo/sanita.jpg) bottom left no-repeat; }
        .promo.stavebnictvi { background: url(../images/promo/stavebnictvi.jpg) bottom left no-repeat; }

    .content { width: 575px; background: url(../images/content.gif) top left repeat-x; padding: 15px; }

    .productpreview { width: 280px; float: left; margin: 15px 15px 0 0; height: 200px; font-size: 0.85em; position: relative; }
    .productpreview.odd { margin: 15px 0 0 0; }
    .productpreview h3 { padding: 0; }
    .productpreview a { text-decoration: none; color: #555; }
    .productpreview .novinka { width: 70px; height: 40px; position: absolute; top: 100px; left: 0; overflow: hidden; text-indent: -1000px; background: url(../images/ico/novinka.png) top left no-repeat;  }
    .productpreview .novinka a { width: 70px; height: 40px; display: block; }

    .detail { margin: 20px 15px 0 15px; float: left; }
    .detail.left { width: 250px; text-align: center; }
        .detail.left p.pdf { text-align: left; }
        .detail.left p.pdf a { text-decoration: none; line-height: 15px; }
        .detail.left p.pdf img { vertical-align: bottom; }
    .detail.right { width: 280px; margin: 20px 0 0 15px; }

    .catt { font-size: 0.85em; }
    .catt a { padding: 2px 15px 2px 0; }

    /* kontaktni-formular */

    #kontaktni-formular input, #kontaktni-formular textarea { width: 90%; margin: 5px auto; }
    #kontaktni-formular label { display: block; color: #888; font-size: 0.9em; }

#right { float: left; width: 260px; }
    #topmenu { list-style: none; list-style-position: inside; margin: 0 0 15px 0; padding: 0; }

    #menu { list-style: none; list-style-position: inside; margin: 0 0 15px 0; padding: 0; }
    #menu li { display: block; width: 260px; padding: 0; margin: 0; float: left; }
    #menu li a { display: block; width: 220px; height: 39px; line-height: 39px; border-bottom: 1px solid #e8f1ff; background: url(../images/menu_ar.gif) 17px 14px no-repeat #e3e9ee; text-decoration: none; padding: 0 0 0 40px; }
    #menu li a:hover { background: url(../images/menu_arh.gif) 17px 14px no-repeat #ccd8eb; }
    #menu li.selected a { background: url(../images/menu_arh.gif) 17px 14px no-repeat; font-weight: bold; }
    #menu li ul { margin: 0; padding: 0; list-style: none; }
    #menu li ul li a { width: 220px; height: 29px; line-height: 29px; border-bottom: 1px solid #e8f1ff; background: #eee; padding: 0 0 0 40px; }
    #menu li ul li a:hover { background: #e4e4e4; }
    #menu li.selected ul li a { background: none; font-weight: normal; }
    #menu li.selected ul li a:hover { background: #f4f4f4; }
    #menu li.selected ul li.selected a { font-weight: bold; color: #222; }
    #menu li.topmenu { display: block; width: 260px; padding: 0; background: #396481; }
    #menu li.topmenu a { display: block; width: 220px; height: 39px; line-height: 39px; padding: 0; border-bottom: 1px solid #5d8299; background: url(../images/menu_tar.gif) 15px 12px no-repeat; color: #fff; text-decoration: none; font-size: 1.1em; padding: 0 0 0 40px; }
    #menu li.topmenu a:hover { background: url(../images/menu_tarh.gif) 15px 12px no-repeat #345972; }
    #menu li.topmenu.gap { margin: 0 0 15px 0; }
    #menu li.topmenu ul li a { width: 220px; height: 29px; line-height: 29px; border-bottom: 1px solid #e8f1ff; background: #eee; padding: 0 0 0 40px; color: #0C3E66; }
    #menu li.topmenu ul li a:hover { background: #e4e4e4; }
    #menu li.topmenu.selected ul li a { background: #fff; font-weight: normal; border-bottom: 1px solid #f4f4f4; }
    #menu li.topmenu.selected ul li a:hover { background: #f4f4f4; }
    #menu li.topmenu.selected ul li.selected a { font-weight: bold; color: #222; }

    .banner { margin: 15px 0; }
    .banner img { border: 0; }


#home { position: absolute; top: 50px; right: 20px; font-size: 0.8em; color: #999; }
#home a, #language a { color: #999; text-decoration: none; }
#home a:hover, #language a:hover { color: #222; }
#language { position: absolute; top: 25px; right: 20px; font-size: 0.8em; color: #999; }

#bottom { width: 100%; height: 215px; background: url(../images/bot.gif) bottom left repeat-x; margin: 0; }
    #bottom a { text-decoration: none; }
    #bottom small { font-size: 0.9em; }
    #bottom .content { width: 890px; margin: 0 auto; background: #fff; height: 45px; padding: 20px 0 0 20px; font-size: 0.8em; color: #555; position: relative; border: 1px solid #d3d3d3; border-top: 0; }
    #bottom .logo { width: 133px; height: 26px; overflow: hidden; position: absolute; top: 10px; right: 20px; }
    #bottom .logo a { width: 133px; height: 26px; display: block; }
    #bottom .logo a span { width: 133px; height: 26px; display: block; position: absolute; top: 0; left: 0; background: url(../images/logo_small.gif) top left no-repeat; }
    #bottom .submenu { width: 860px; margin: 0 auto; padding: 20px 0 20px 20px; font-size: 0.8em; color: #777; text-align: center; }
        #bottom .submenu a { color: #777; }

/* ADMIN */
.admin, .edit, .insertLine { margin: 5px 0; width: 99%; border: 1px dotted #aaa; font-size: 0.85em; }
.admin th a { color: #fff; font-weight: normal; text-decoration: none; display: block; padding: 2px; background: #152134;  }
.admin th a:hover { background: #000; }
.admin td { text-align: center; background: #eee; padding: 2px; color: #222; }
.admin tr.odd td { background: #f8f8f8; }
.admin form table td, #left form table th { text-align: left; }
.admin form { display: inline; }
.admin td input, .admin td textarea, .insertLine td input, .insertLine td textarea, .edit td input, .edit td select, .edit td textarea { width: 97%; padding: 2px; border: 1px solid #888; }
.admin td textarea { height: 200px; }
.admin td textarea.smalltext { height: 40px; }
.admin input.button { width: 80px; padding: 2px; border: 1px solid #888; }
.admin input.check { width: 20px; margin: 0 2px 2px 10px; vertical-align: middle; border: 0; }
.admin input.image { width: inherit; height: inherit; border: 0; }
.admin input.radio { width: 20px; padding: 2px; border: 0; }
.admin .left { text-align: left; }
.admin .right { text-align: right; }
.admin form input { width: 250px; border: 1px solid #aaa; padding: 2px; }
.admin form input.button { width: 150px; padding: 2px; }
.admin form input.image { width: 15px; }
.admin th, .edit th { text-align: center; color: #fff; padding: 0; background: #152134; }
.admin td select { width: 99%; padding: 2px; border: 1px solid #888; }
.admin img { border: 0; }
.insertLine th { font-weight: normal; text-align: left; }
.edit th { text-align: right; padding-right: 3px; }

/* ALERT */
.alert { width: 580px; margin: 5px auto 10px auto; line-height: 31px; height: 31px; text-align: center; background: #C4E8C4; }
.alert.error { background: url('../images/alert_error.gif') bottom left; }