/********  main  ********/

html, body, p, ul, ol, h1, h2, h3, form {
    padding: 0;
    margin: 0;
}

body {
    font-size: 62.5%;
    padding-bottom: 3em;
}

body, input, textarea, select {
    font-family: "Arial CE", "Helvetica CE", Arial, helvetica, sans-serif;
}

hr {
    display: none;
}

a img {
    border: none;
}

a {color: black;}

a:hover {text-decoration: underline !important;}

/********  back  ********/

#top-back, #stripe-back, #content-back, #foot-back {
    width: 100%;
    text-align: center;
}

#top, #head, #content, #foot {
    width: 960px;
    margin: 0 auto;
    position: relative;
    text-align: left;
}

body {
    background: url('back-pattern.gif') top #C9C9C9;
}

#top-back {
    background: url('back-top.gif') top no-repeat;
    padding-top: 20px;
}

#stripe-back {
    background: url('back-stripe.gif') top repeat-y;
}

#content-back {
    background: url('back-middle.gif') top repeat-y;
}

#foot-back {
    background: url('back-bottom.gif') bottom no-repeat;
    padding-bottom: 20px;
}

#top {
    background: url('top.gif') top no-repeat white;
    height: 80px;
}

/********  head  ********/

#head {
    height: 200px;
    background: url('hlavicka-pelety.jpg') left top no-repeat #6B7945;
}

#logo {
    position: absolute;
    left: 23px;
    top: 13px;
}

#slogan {
    position: absolute;
    right: 18px;
    top: 103px;
    text-align: right;
    color: white;
    opacity: .6;
    filter:alpha(opacity=60);
}

form#search {
    position: absolute;
    right: 20px;
    top: 20px;
}

/********  foot  ********/

#foot {
    background: url('paticka-pelety.gif') bottom no-repeat #5b763a;
}

#foot, #foot a {
    color: #DEE4D8;
}

#foot p {
    padding: .6em 1em .7em;
}

p.webdesign {
    position:absolute;
    right: .2em;
    z-index: 2;
}

p.webdesign a {
    text-decoration: none;
}

img#ctyrlistky {
    position: fixed;
    _display: none;
    bottom: -3px;
    right: -3px;
    z-index: 99;
}

/********  barevné varianty  ********/

body.kotel #head {background: url('hlavicka-kotel.jpg') left no-repeat #CF5E18;}
/* body.kotel #foot {background: url('paticka-kotel.gif') bottom no-repeat #da730d;} */

body.domek #head {background: url('hlavicka-domek.jpg') left no-repeat #96BCE3;}
/* body.domek #foot {background: url('paticka-domek.gif') bottom no-repeat #7e9edf;} */

body.drevo #head {background: url('hlavicka-drevo.jpg') left no-repeat #6E5B4D;}
/* body.drevo #foot {background: url('paticka-drevo.gif') bottom no-repeat #89705e;} */

body.uhli #head {background: url('hlavicka-uhli.jpg') left no-repeat #717076;}
/* body.uhli #foot {background: url('paticka-uhli.gif') bottom no-repeat #858388;} */

body.solarni #head {background: url('hlavicka-solarni.jpg') left no-repeat #76AEEB;}
/* body.solarni #foot {background: url('paticka-solarni.gif') bottom no-repeat #6ea1e2;} */

body.ostatni #head {background: url('hlavicka-ostatni.jpg') left no-repeat #8e6a30;}
/* body.ostatni #foot {background: url('paticka-ostatni.gif') bottom no-repeat #977448;} */

body.zasedacka #head {background: url('hlavicka-zasedacka.jpg') left no-repeat #666867;}
/* body.zasedacka #foot {background: url('paticka-zasedacka.gif') bottom no-repeat #868781;} */

body.vykresy #head {background: url('hlavicka-vypocty.jpg') left no-repeat #A5937B;}
/* body.vykresy #foot {background: url('paticka-vypocty.gif') bottom no-repeat #ab9c89;} */

/********  cols  ********/

#content {
    background: white;
}

#top-menu, #column-menu, #column-news {
    position: absolute;
}

#top-menu {
    top: -263px;
    right: 18px;
}

#column-menu, #column-news {
    top: 0;
    width: 185px;
}

#column-menu {
    left: 0;
}

#column-news {
    right: 0;
}

#column-content {
    position: relative;
    left: 205px;
    top: 15px;
    width: 550px;
    min-height: 60em;
    _height: 60em;
    padding-bottom: 5em;
    
}

/********  navi  ********/

#horizontal, .left, .right {
    list-style: none;
}

#horizontal a, .left a, #horizontal span, .left span, .right a, .right span {
    color: #111;
    text-decoration: none;
}

#horizontal a:hover, .left a:hover, .right a:hover {
    text-decoration: underline;
}

#horizontal {
    float: left;
    margin-right: 16px;
    max-width: 700px;
}

#horizontal li {
    display: inline;
}

#horizontal li a, #horizontal li span {
    display: block;
    width: auto;
    float:left;
    padding: 0 1.2em;
    line-height: 30px;
    height: 30px;
    background: url('menu-top.gif') top center #EAEAEA;
    border-right: 1px solid #E1E1E1;
    border-left: 1px solid #EEEEEE;
}

#horizontal li.first a, #horizontal li.first span {
    background-position: left top;
    padding-left: 1.4em;
    border-left: none;
}

#horizontal li.last a, #horizontal li.last span {
    background-position: right top;
    padding-right: 1.4em;
    border-right: none;
}

#horizontal li a:hover {
    background-position: bottom;
    background-color: #DDDDDD;
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #d9d9d9;
}

#horizontal li.first a:hover {
    background-position: left bottom;
    border-left: none;
}

#horizontal li.last a:hover {
    background-position: right bottom;
    border-right: none;
}

#flags {
    display: inline;
    position: relative;
    top: .25em;
}

#flags img {
    padding: 2px;
}


.left, .right, .news {
    margin-bottom: 1em;
}

.left li, .right li {
    line-height: 0;
}

.left li a, .left li span, .right li a, .right li span, .news div {
    display: block;
    padding: 1em .8em;
    background: url('menu.gif') right #F6F6F6;
    border-top: 1px solid #eee;
}

.right li a, .right li span {
    background-position: left;
}

.left li.first a, .left li.first span {
    background-position: right top;
    border-top: none;
}

.left li.last a, .left li.last span {
    background-position: right bottom;

}

.left li a:hover {
    background-image: url('menu-hover.gif');
}

.right li.first a, .right li.first span {
    background-position: left top;
    border-top: none;
}

.right li.last a, .right li.last span {
    background-position: left bottom;
}

.right li a:hover {
    background-image: url('menu-hover.gif');
}

.news div {
    background-position: left;
    border:none;
    padding: 0 .8em;
}

.news div.first {
    background-position: left top;
}

.news div.last {
    background-position: left bottom;
}

.news label {
    display: block;
    float: left;
    width: 3.5em;
    position: relative;
    top: 2px;
    }

.news input {
    width: 90px;
    position: relative;
    }

.news a {
    text-decoration: none;
    }

ul ul {list-style-type: none;}
ul ul li a, ul ul li span {
    padding-left: 2.5em !important;

}

li span {
    font-weight: bold;
    letter-spacing: -.01em;
}

/********  home  ********/

div.button1, div.button2, div.button3 {
    position: relative;
    margin: 16px 2px 16px 28px;
    _margin: 16px 16px 16px 14px;
    float: left;
}

div.button1 a, div.button2 a, div.button3 a {
    font-weight: bold;
}

div.button1 {
    background: url('button-big.gif') #eee center no-repeat;
    width: 494px;
    height: 39px;
}

div.button2 {
    background: url('button-middle.gif') #eee center no-repeat;
    width: 232px;
    height: 107px;
}

div.button3 {
    background: url('button-small.gif') #eee center no-repeat;
    width: 101px;
    height: 102px;
}

div.button1 a, div.button2 a, div.button3 a {
    display: block;
    padding: 9px 12px;
    text-decoration: none;
    position: absolute;
}

div.button1 a {
    width: 470px;
    height: 19px;
    text-align: center;
}

div.button2 a {
    width: 208px;
    height: 89px;
    text-align: right;
}

div.button3 a {
    width: 77px;
    height: 84px;
    text-align: right;
}

div.button1 img, div.button2 img, div.button3 img {
    position: absolute;
    left: -10px;
    bottom: -10px;
}

div.button3 img {
    left: -18px;
    bottom: -18px;
}

/********  typo  ********/

h1, h2, h3, b, strong {
    color: #222;
}

h3 {
    font-size: 100%;
    padding: .5em 0;
}

#column-content p, #column-content ul, #column-content ol, #column-content table, #column-content form {
    line-height: 128.57%;
    color: #111;
    margin: .5em 0 .8em;
}

#column-content label {
    display: block;
    width: 60%;
    padding-top: 1em;
}

#column-content label.req {
    background: url('asterisk.gif') right bottom no-repeat;
    font-weight: bold;
}

#column-content input, #column-content textarea {
    width: 60%;
}

#column-content textarea {
    height: 8em;
}

#column-content img, img#ctyrlistky, div#ctyrlistek {
    behavior: url('/iepngfix.htc');
}

#column-content p#drobecky, p#drobecky a {
    color: silver;
    margin: 0;
}

#column-content p#drobecky a:hover  {
    color: gray;
}

#column-content h1 {
    margin: .7em 0 .7em;
}

#column-content img {
    max-width: 550px;
}

#column-content ul {
    list-style-type: none;
    padding-left: 1em;
}

#column-content ul li {
    background: url('bullet.gif') left top white no-repeat;
    padding-left: 1em;
}

#column-content ol {
    padding-left: 2.5em;
}

#column-content table {
    _font-size: 100%;
    border-collapse: collapse;
}

#column-content td, #column-content th {
    border: 1px solid #e3e3e3;
    padding: .3em .4em;
    font-weight: normal;
}

#column-content th {
    background: #fafafa;
}

h2 {margin-top: 2em;}

/********  size  ********/

#top-menu    {font-size: 160%;}
#column-menu {font-size: 160%;}
#column-news {font-size: 140%;}

.right {font-size: 114.29%;}

div.button1, div.button2, div.button3
             {font-size: 160%;}

h1           {font-size: 220%;}
h2           {font-size: 160%;}

#slogan      {font-size: 220%;}

#column-content p, #column-content ul, #column-content ol, #column-content table, #column-content form
             {font-size: 140%;}
#column-content input, #column-content textarea
             {font-size: 110%;}

p#drobecky   {font-size: 100%;}
#foot        {font-size: 120%;}

/*** pičociny ***/

div#ctyrlistek {
    position: absolute;
    width: 100%;
    background: url('ctyrlistek.png') center no-repeat;
    _background: url('ctyrlistek.gif') center no-repeat;
    height: 150px;
    top: 45em;
    left: 0;
    z-index: 0;
}

div.news {
    overflow: hidden;
}