/* -------------------------------------------------------------------------------------------------------
    Projekt: ALAVIS
    URL: http://www.alavis.cz

    Výstupní zařízení: screen, projection

    Autor: Jan Suchánek (jan.suchanek@gmail.com)
    Poslední revize: 2008-03-28, 09:36 GMT+1

    Struktura:
        display | position | float | z-index | overflow | width | height | margin | padding | border | background | align | font
------------------------------------------------------------------------------------------------------- */

* {margin:0; padding:0;}
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object {border:0;}
body {padding: 5px; padding-bottom: 15px; background:#fff url('../images/bg-page.gif') repeat-x; font:0.8em/1.5 "arial",sans-serif; color:#000; }

a {color: #007ec6;}
a:hover {color:#2FA729;}

h1, h2, h3, h4, h5, h6 {margin:15px 0 10px 0;}
h1 {color: #f47920; font-size:190%; font-family: Trebuchet MS; font-weight: normal; font-style: italic;}
h2 {margin: 0; font-weight:normal; font-size:140%;}
h3 {font-size:120%;color: #f47920; }
h4 {font-size:100%;}
h5 {font-size:100%;}

p {margin: .5em 0 1em 0;}
hr {margin: 1em 2em; border: 1px solid #eee}

table {margin: 1em 0; border-collapse:collapse; border: 0; border-spacing:0; font-size:100%;}
table.width100 {width: 100%;}
th {border: 1px solid #555; color: #555; background: #eee; text-align: center; font-weight:bold; }
th, td {border: 1px solid #555; padding:3px 10px;}

ul, ol {display:block; margin:15px 0 15px 40px;}
ul ul, ul ul ul, ol ol, ol ol ol {margin:0; margin-left:20px;}
ul {list-style-type:square; margin: 1em 2em 2em 2em;}
ol {list-style-type:decimal;}
ol ol {list-style-type:upper-alpha;}
ol ol ol {list-style-type:lower-alpha;}

dl {margin:15px 0;}
dt {font-weight:bold;}
dd {margin-left:30px;}

fieldset {margin:15px 0; padding:10px; border: 1px solid #eee}
legend {margin-left:10px; padding:0 5px; font-size:120%; font-weight:bold; color:#2FA729;}
label {}
fieldset select.stat {font-size: 100%;width: 200px}
fieldset select.souhlas {font-size: 100%;width: 100px}

fieldset input.i-text {width: 300px}
fieldset textarea.t-area {width: 300px}


p.submit { margin: .5em 0; padding: .5em; background: #eee; text-align: center; }
p.submit input { padding:.2em .5em; background: #f47920; color: #fff;font-weight: bold }
p.submit:hover { background: #f47920; }


/* -------------------------------------------------------------------------------------------------------
Univerzální formátovací styly
------------------------------------------------------------------------------------------------------- */

.f-left {float:left;}
.f-right {float:right;}

.t-left, tr.t-left td {text-align:left !important;}
.t-center, tr.t-center td {text-align:center !important;}
.t-right, tr.t-right td {text-align:right !important;}
.t-justify {text-align:justify !important;}
.inline { display: inline; }
  
.va-top {vertical-align:top;}
.va-middle {vertical-align:middle;}
.va-bottom {vertical-align:bottom;}

.width100 {width:100%;}

.clear { clear: both; }
.cleaner { visibility: hidden; clear: both; height: 1px; margin: -1em 0 0 0; line-height: 0; font-size: 0; border: 0; }

.box {min-height:1px;}
.box:after {display:block; visibility:hidden; clear:both; line-height:0; font-size:0; content:".";}

.nom {margin:0 !important;}
.nomt {margin-top:0 !important;}
.nomb {margin-bottom:0 !important;}

.noscreen {display:none;}

.bigger {font-size:110%;}
.smaller {font-size:85%;}

.high, .high a {color:#2FA729;}
.high a:hover {color:#000;}
.high-bg {padding:2px 0; background:#FFA;}    
.nonhigh {color:#797979;}
.small {margin: .5em; padding: 0; font-size: 90%;}
/* -------------------------------------------------------------------------------------------------------
LAYOUT
------------------------------------------------------------------------------------------------------- */

#main {width:100%;text-align:left; background: #fff;}
#main-box {border: 1px solid #c8c8c8;background: url('../images/bg-header.gif') 0 20px repeat-x;}

  .c-tl {position: relative; margin: -1px; background: url('../images/bg-c-tl.gif') left top no-repeat;}
  .c-tr {background: url('../images/bg-c-tr.gif') right top no-repeat;}
  .c-bl {background: url('../images/bg-c-bl.gif') left bottom no-repeat;}
  .c-br {padding-top:1px; _padding-top:0; &padding-top:0; background: url('../images/bg-c-br.gif') right bottom no-repeat;}
  
#header {position: relative; width: 100%; height: 172px; }
  .languages {z-index: 4; position: absolute; top: 15px; right: 20px; width: 200px; height:200px; text-align: right; }
  .languages a img { border: 1px solid #ccc}
  .h-pejskove {position: absolute; top: 38px; right: 1px; width: 200px; height:200px; background: url('../images/bg-pejskove.gif') no-repeat;}
  .h-kotatka {position: absolute; top: 5px; left: 140px; width: 141px; height: 117px; background: url('../images/bg-kotatka.gif') no-repeat;}
  .h-konik {position: absolute; top: 5px; right: 180px; width: 200px; height:200px; background: url('../images/bg-konik.gif') no-repeat;}
  .slogan {position: relative;z-index: 1; margin-left: 260px;padding:40px 340px 0 0; text-align: center; color: #000; font-family: Trebuchet MS; font-style: italic; font-size: 160%; color: #007ec6;}
  .breadcrumb {position: absolute; top: 131px; left: 15px; color: #fff;}
  .breadcrumb a {color: #fff;}
  
  .ico-pes {z-index: 1; position: absolute; top: 90px; right: 420px; width: 48px; height:42px; background: url('../images/ico-pes.gif') no-repeat;}
  .ico-kun {z-index: 1; position: absolute; top: 90px; right: 365px; width: 48px; height:42px; background: url('../images/ico-kun.gif') no-repeat;}
  .ico-kocka {z-index: 1; position: absolute; top: 90px; right: 310px; width: 48px; height:42px; background: url('../images/ico-kocka.gif') no-repeat;}
  .logo {z-index: 2; position: absolute; top: 30px;}
  
#content {margin: 1px; }
  #panel-l {float:left; width: 187px; min-height: 700px; &height: 700px; _height: 700px; background: url('../images/bg-l-panel.gif') no-repeat; }
  #panel-l h2 {letter-spacing: .02em; font-size: 100%; font-weight: bold; text-transform: uppercase; color: #4b4b4b; border-bottom: 1px solid #e4e8eb; padding: 5px 15px;}
  #panel-l ul.menu {font-size: 95%;margin: 0; padding: 0; padding-bottom: 1.5em; list-style: none;}
  #panel-l ul.menu {min-height:1px;}
  #panel-l ul.menu:after {display:block; visibility:hidden; clear:both; line-height:0; font-size:0; content:".";}

  #panel-l ul.menu li {float: left;width: 100%;margin: 0; border-bottom: 0; padding: 0;}
  #panel-l ul.menu li a {display:block; font-weight: bold; border-bottom: 1px solid #d9ecf6; padding: 5px 5px 5px 25px; text-decoration: none;}
  #panel-l ul.menu li a {color: #007ec6; background: url('../images/arrow-blue.gif') 15px 10px no-repeat transparent;}
  #panel-l ul.menu li a:hover {color: #007ec6; background: url('../images/arrow-blue.gif') 15px 10px no-repeat #eee;}
  #panel-l ul.menu li.active-trail a {color: #fff; background: url('../images/arrow-white.gif') 15px 10px no-repeat #007ec6;}
  #panel-l ul.menu li.active-trail a:hover {color: #fff; background: url('../images/arrow-white.gif') 15px 10px no-repeat #0176b9;}
  
  #panel-l ul.menu li.active-trail ul.menu {font-size: 95%;margin: 0; border-bottom: 1px solid #eee; padding: 0; padding-bottom: 0; list-style: none;}
  #panel-l ul.menu li.active-trail ul.menu li {float: left;width: 100%;margin: 0; border-bottom: 0; padding: 0;}
  #panel-l ul.menu li.active-trail ul.menu li a {display:block; font-weight: normal; border-bottom: 1px solid #fff; padding: 2px 5px 2px 35px; text-decoration: none;}
  #panel-l ul.menu li.active-trail ul.menu li ul.menu li a {display:block; font-weight: normal; border-bottom: 1px solid #fff; padding: 2px 5px 2px 45px; text-decoration: none;}
  #panel-l ul.menu li.active-trail ul.menu li a {color: #007ec6; background: url('../images/arrow-blue.gif') 25px 6px no-repeat #d9ecf6;}
  #panel-l ul.menu li.active-trail ul.menu li a:hover {color: #007ec6; background: url('../images/arrow-blue.gif') 25px 6px no-repeat #eee;}
  #panel-l ul.menu li.active-trail ul.menu li ul.menu li a {color: #007ec6; background: url('../images/arrow-blue.gif') 35px 6px no-repeat #d9ecf6;}
  #panel-l ul.menu li.active-trail ul.menu li ul.menu li a:hover {color: #007ec6; background: url('../images/arrow-blue.gif') 35px 6px no-repeat #eee;}


  #panel-l ul.menu li.vykricnik { background: url('/images/arrow-white.gif') 15px 10px no-repeat #f47920 }
  #panel-l ul.menu li.vykricnik a { background: url('/images/vykricnik.gif') 100px 5px no-repeat transparent; color: white; }
  #panel-l ul.menu li.vykricnik a:hover { background: url('/images/vykricnik.gif') 100px 5px no-repeat transparent; color: white; }
  


  #panel-r {margin-top:30px;position: relative; z-index: 2;float:right; min-height: 700px; &height: 700px; _height: 700px; width: 200px; background: url('../images/bg-r-panel.gif') no-repeat; }
  #panel-r img { margin: 10px 0; }
  
  #text {margin: 0 200px 0 187px ; padding: 10px 25px;}
  #text-box {float:left;margin: 0; padding: 0;}
  #text h1 {margin-top: 0;}
  #text h2 {color: #4b4b4b; margin: 1em 0 .5em 0; font-family: Trebuchet MS; }
  #text h2.dot {color: #4b4b4b; margin: 1em 0 .5em 0; font-family: Trebuchet MS; background: url('../images/dot.gif') repeat-x left }
  #text h2 span { background: #fff; margin: 0 10px; padding: 0 10px}
  #text h3 {color: #f47920; font-family: Trebuchet MS; }
  

  #text .pager { list-style: none; text-align: center; }
  #text .pager li { font-weight: bold;border: 1px solid #eee; padding: 2px; display: inline; }
  #text .pager li.pager-current { font-weight: normal; color: #000; text-decoration: none; border: 1px solid #eee; padding: 2px; display: inline; }


  #text .pager li.pager-next, #text .pager li.pager-last { border: 1px solid #eee; padding: 2px; display: inline; }
  #text .links { font-size: 80%; margin: 1em 0; border-top: 1px solid #ccc; padding: .5em; list-style: none; display: block; background: #eee }
  #text .links li { padding: 2px; display: inline; margin: 0; }
  
  .links {font-size: 80%;text-align: center}
  
#footer {clear:both;padding: 10px; padding-top: 20px; font-size: 90%;text-align: center;}

  .segmentace {margin:1em auto 0 auto; padding:0; width: 100%; list-style:none; text-align: center; }
  .segmentace li {font-size: 120%; float: left; margin:0; margin-bottom:10px; padding: 0; width: 33%; min-height: 155px; _height: 155px}
  .segmentace li a {font-weight: bold; text-decoration: none; display: block}
  .segmentace div {position: relative; margin: 0 auto; width: 170px; padding:5px 0;}
  
  .segmentace .pro-psy {margin:0; background: url('../images/pro-psy.gif') top no-repeat;}
  .segmentace .pro-psy a {display: block; padding: 15px; color: #007ec6;}
  
  .segmentace .pro-psy2 {font-size: 100%; background: url('../images/pro-psy1.gif') bottom no-repeat;}
  .segmentace .pro-psy2 form {margin:0; padding:0; min-height: 150px; background: url('../images/pro-psy2.gif') top no-repeat;}
 
  .segmentace .detail {position:absolute; display: block; top: 75px; left: 20px;}  
  .segmentace .buy {position:absolute; display: block; top: 75px; right: 20px;}
  .segmentace .pro-psy2 a {color: #007ec6;display: block}
    
  .segmentace .pro-kone {margin:0; min-height: 140px; background: url('../images/pro-kone.gif') top no-repeat;}
  .segmentace .pro-kone a {display: block; padding: 15px; color: #87ba3a;}
  
  .segmentace .pro-kone2 {font-size: 100%; background: url('../images/pro-kone1.gif') bottom no-repeat;}
  .segmentace .pro-kone2 form {margin:0; padding:0; min-height: 150px; background: url('../images/pro-kone2.gif') top no-repeat;}
  .segmentace .pro-kone2 a {color: #007ec6;}
  .segmentace .pro-kone2 a span {display: block;}
    
  .segmentace .pro-kocky {margin:0; min-height: 140px; background: url('../images/pro-kocky.gif') top no-repeat;}
  .segmentace .pro-kocky a {display: block; padding: 15px; color: #f47921;}
  
  .segmentace .pro-kocky2 {font-size: 100%; background: url('../images/pro-kocky1.gif') bottom no-repeat;}
  .segmentace .pro-kocky2 form {min-height: 150px; background: url('../images/pro-kocky2.gif') top no-repeat;}

  .segmentace .pro-kocky2 a {color: #f47921;}
  .segmentace .pro-kocky2 a span {display: block;}


#prod { margin-bottom: 5px; padding: 0;width: 100%; }
#prod h2 { color: #2069bb; margin: 0; border-top: 2px solid #ddd; padding: 5px; font-size: 120%; line-height: 140%; font-weight: normal; text-align: center; background: #eee; }
#prod p { margin: 1em }
#prod .hr { border:0;border-top: 1px solid #eee;  }
#prod .prod_box  { margin-bottom: 1em; }
#prod .prod_box p  { margin: 0; padding: .5em; }
#prod .prod_box .item p  { margin: 0; padding: 0; }
#prod .prod_box { width: 100%; padding: 0; }
#prod .prod_box .item { margin: 0;padding:0;width: 200px; text-align: center; }
#prod .prod_box .item form { margin: 0; border-right: 1px solid #eee; padding: 5px; height: 200px; }
#prod .prod_box .item .item_box { margin: 0; border-right: 1px solid #ccc; padding: 10px 5px }
#prod .prod_box .item.last form { border-top:0; border-right: 0 }
#prod .prod_box .item.last div { border-top:0; border-right: 0 }
#prod .prod_box .item .price { font-size: 140%; line-height: 130% }

#pridkos {display: none; position: fixed; _position: absolute; top: 30%; left:0; width:100%;z-index: 1000;text-align: center; }
#pridkos-box { margin:0 auto; width:400px; background: #cb0a1c; color: #f6f6f6; border: 2px solid #eee;  }
#obsahkos { padding: 0px; padding-bottom: 5px;  }
#obsahkos h2 { margin:0; padding: 5px 10px; color: #f6f6f6; background: #555; font-size: 120%; font-weight: bold; text-align: left;  }
#obsahkos * {margin: 0; padding: 0;}
#obsahkos .cena {display: block; margin: 5px;padding:5px; color: #555; background: #eee; font-size:180%;}
#obsahkos input {vertical-align: middle;}
#obsahkos button {vertical-align: middle;}
#obsahkos p {padding: 2px 5px;}

.important {color: #d21b00;}