/********************************************************************************************************************
	Autor: 		Martin Felcman - martin@felcman.cz
	Projekt:  	Grower's Cup
	
 *****************************************************************************************************************/
* {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 {background: #1e1e1e; font-family: Verdana, Geneva, sans-serif; color: #fff; text-align: center; height: 100%; padding: 0; margin: 0; position: relative; }

h1 { position: relative;  width:180px; height: 39px; margin: 40px 0 0 0; overflow:hidden; float: left; color: #fff; font-size: 1em;}
h1 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 180px; height: 39px; background:url(../images/logo.png) top left no-repeat; }
h1 a {color: #fff; }

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

#wrapper { width: 900px; margin: 0px auto; padding: 0; height: 100%; text-align: left; }

ul#menu { width: 810px; float: left; display: block; line-height: 14px; height: 30px; margin: 29px 0 7px -20px; list-style: none; clear: both;}
ul#menu li { height: 14px; margin: 0px; float: left; list-style: none; display: block; padding: 8px 16px;}
ul#menu li a {position: relative;  height: 14px; margin: 0px; overflow:hidden; float: left;  display: block; color: #fff; font-size: 0.7em;}
ul#menu li a span { display:block; position:absolute; left:0; top:0; z-index:1; height: 14px; }
ul#menu li.home, ul#menu li.home a { width: 86px;}
ul#menu li.home a span { width: 86px; background:url(../images/menu-titulka.png) top left no-repeat; }
ul#menu li.home a:hover span, ul#menu li.home a.active span { background:url(../images/menu-titulka.png) bottom left no-repeat; }
ul#menu li.coffeebrewer, ul#menu li.coffeebrewer a { width: 89px;}
ul#menu li.coffeebrewer a span { width: 89px; background:url(../images/menu-coffeebrewer.png) top left no-repeat; }
ul#menu li.coffeebrewer a:hover span, ul#menu li.coffeebrewer a.active span { background:url(../images/menu-coffeebrewer.png) bottom left no-repeat; }
ul#menu li.nasekavy, ul#menu li.nasekavy a { width: 64px;}
ul#menu li.nasekavy a span { width: 64px; background:url(../images/menu-nasekavy.png) top left no-repeat; }
ul#menu li.nasekavy a:hover span, ul#menu li.nasekavy a.active span { background:url(../images/menu-nasekavy.png) bottom left no-repeat; }
ul#menu li.predmet, ul#menu li.predmet a { width: 153px;}
ul#menu li.predmet a span { width: 153px; background:url(../images/menu-predmet.png) top left no-repeat; }
ul#menu li.predmet a:hover span, ul#menu li.predmet a.active span { background:url(../images/menu-predmet.png) bottom left no-repeat; }
ul#menu li.coffeeservice, ul#menu li.coffeeservice a { width: 91px;}
ul#menu li.coffeeservice a span { width: 91px; background:url(../images/menu-coffeeservice.png) top left no-repeat; }
ul#menu li.coffeeservice a:hover span, ul#menu li.coffeeservice a.active span { background:url(../images/menu-coffeeservice.png) bottom left no-repeat; }
ul#menu li.kontakt, ul#menu li.kontakt a { width: 51px;}
ul#menu li.kontakt a span { width: 51px; background:url(../images/menu-kontakt.png) top left no-repeat; }
ul#menu li.kontakt a:hover span, ul#menu li.kontakt a.active span { background:url(../images/menu-kontakt.png) bottom left no-repeat; }
ul#menu li.eshop { width: 44px; border-left: 1px solid #3a3a3a;}
ul#menu li.eshop a { width: 44px;}
ul#menu li.eshop a span { width: 44px; background:url(../images/menu-eshop.png) top left no-repeat; }
ul#menu li.eshop a:hover span, ul#menu li.eshop a.active span { background:url(../images/menu-eshop.png) top left no-repeat; }
ul#menu li.princip, ul#menu li.princip a { width: 45px;}
ul#menu li.princip a span { width: 45px; background:url(../images/menu-princip.png) top left no-repeat; }
ul#menu li.princip a:hover span, ul#menu li.princip a.active span { background:url(../images/menu-princip.png) bottom left no-repeat; }

a.youtube { position: relative;  width:41px; height: 17px; margin: 33px 0 0 0; overflow:hidden; float: right; color: #fff; font-size: 0.7em;}
a.youtube span { display:block; position:absolute; left:0; top:0; z-index:1; width: 41px; height: 17px; background:url(../images/youtube.png) top left no-repeat; }
a.facebook { position: relative;  width:49px; height: 16px; margin: 33px 10px 0 0; overflow:hidden; float: right; color: #fff; font-size: 0.7em;}
a.facebook span { display:block; position:absolute; left:0; top:0; z-index:1; width: 49px; height: 16px; background:url(../images/facebook.png) top left no-repeat; }

a.fanpage { position: relative;  width:800px; height: 66px; margin: 0px 0 25px 50px; overflow:hidden; float: left; color: #fff; font-size: 0.9em; text-align:center;}
a.fanpage span { display:block; position:absolute; left:0; top:0; z-index:1; width: 800px; height: 66px; background:url(../images/facebook-fanpage-link.png) top left no-repeat; }


#footer { font-size: 0.9em; background: url(../images/footer-line.png) top center no-repeat; padding: 30px 0; height: 20px; margin: 0; clear: both; }
#footer p.distributor  { float: left; width: 350px; padding: 0;  }
#footer p.distributor a { display:block; float: right;  margin: 0px; width: 117px; height:21px; }
#footer p.bottom-menu  { float: right; width: 550px; text-align: right; clear: none; padding: 0; font-size: 75%; }
#footer p.bottom-menu a { color:#fff; text-decoration: underline; margin: 0 0 0 7px;  }
#footer p.bottom-menu a:hover {  text-decoration: none;  }

p.mutace { float: right; text-align: right; padding: 65px 0 0 0; width: 300px; font-size: 0.8em; clear: none;}
p.mutace a { color: #6b6b6b; text-decoration: none; margin: 0 0 0 10px;}
p.mutace a.active { color: #bbb; text-decoration: none;}
p.mutace a:hover { color: #bbb; text-decoration: none;}

h2{ position: relative;  width:225px; height: 24px; margin: 55px 0 0 0; overflow:hidden; float: left; color: #fff; font-size: 1.2em;}
h2 span { display:block; position:absolute; left:0; top:0; z-index:1; width:225px; height: 24px; background:url(../images/header-h2-2.png) top left no-repeat; }
h3 { font-size: 0.9em;}

a.poptavka2 { position: relative;  width:169px; height: 57px; margin: 40px 0 25px 306px; overflow:hidden; float: left; color: #fff; font-size: 0.8em;}
a.poptavka2 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 179px; height: 57px; background:url(../images/button-poptavka.png) top left no-repeat; }
a.vice2 { position: relative;  width:169px; height: 57px; margin: 40px 0 25px 30px; overflow:hidden; float: left; color: #fff; font-size: 0.8em;}
a.vice2 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 179px; height: 57px; background:url(../images/button-vedet.png) top left no-repeat; }
a:hover.vice2 span{ background:url(../images/button-vedet.png) bottom left no-repeat; }
a:hover.poptavka2 span { background:url(../images/button-poptavka.png) bottom left no-repeat; }

div p { clear: both; font-size: 0.9em; padding: 15px 0; line-height: 195%;}
div p a { text-decoration: underline; color: #e1bc6d;}
div p a:hover { text-decoration: none;}

img.headphoto { display: block; float: left; width: 900px; margin: 25px 0 0 0;}

a.nw { padding-right: 15px; background: url(../images/nw.png) right center no-repeat;}

/* ---------- HOMEPAGE ---------- */
#animation { clear: both; width: 900px; height: 300px; margin: 10px 0 0 0;}
#header { clear: both; margin: 40px 0 0 0; width: 900px; border-bottom: 1px solid #3a3a3a;}

#header h2 { position: relative;  width:225px; height: 24px; margin: 0; overflow:hidden; float: left;}
#header h2 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 225px; height: 24px; background:url(../images/header-h2-2.png) top left no-repeat; }
#header p { position: relative;  width:872px; height: 80px; margin: 22px 0 0 0px; overflow:hidden; float: left; padding: 0;}
#header p span { display:block; position:absolute; left:0; top:0; z-index:1; width: 872px; height: 80px; background:url(../images/header-p.png) top left no-repeat; }
#header a.poptavka { position: relative;  width:169px; height: 57px; margin: 30px 0 25px 0px; overflow:hidden; float: right; color: #fff; font-size: 0.8em;}
#header a.poptavka span { display:block; position:absolute; left:0; top:0; z-index:1; width: 179px; height: 57px; background:url(../images/button-poptavka.png) top left no-repeat; }
#header a.vice { position: relative;  width:169px; height: 57px; margin: 30px 0 25px 30px; overflow:hidden; float: right; color: #fff; font-size: 0.8em;}
#header a.vice span { display:block; position:absolute; left:0; top:0; z-index:1; width: 179px; height: 57px; background:url(../images/button-vedet.png) top left no-repeat; }
#header a:hover.vice span{ background:url(../images/button-vedet.png) bottom left no-repeat; }
#header a:hover.poptavka span { background:url(../images/button-poptavka.png) bottom left no-repeat; }
#header a.share { color: #fff; float: left; clear: both; font-size: 0.8em; display: block; margin:50px 0 0 0; }
#header a.share span.FBConnectButton_Text_Simple { text-decoration: underline !important; }

.threecolumns { clear: both; width: 900px; margin: 0; padding: 30px 0 25px 0; color: #fff; margin: 30px 0 0 0; }
.threecolumns a { color: #fff; }
.threecolumns .fc{ width: 261px; margin: 0; float: left;}
.threecolumns .sc{ width: 261px; margin: 0 0 0 60px; float: left;}
.threecolumns .tc{ width: 261px; margin: 0; float: right;}

.threecolumns .fc h3 { position: relative;  width:60px; height: 19px; margin: 0 0 16px 0; overflow:hidden; float: left;}
.threecolumns .fc h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 60px; height: 19px; background:url(../images/h3-princip.png) top left no-repeat; }
.threecolumns .sc h3 { position: relative;  width:87px; height: 20px; margin: 0 0 15px 0; overflow:hidden; float: left;}
.threecolumns .sc h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 87px; height: 20px; background:url(../images/h3-nasekavy.png) top left no-repeat; }
.threecolumns .tc h3 { position: relative;  width:203px; height: 20px; margin: 0 0 15px 0; overflow:hidden; float: left;}
.threecolumns .tc h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 203px; height: 20px; background:url(../images/h3-predmet.png) top left no-repeat; }

/* ---------- kontakt ---------- */
img.logo-kontakt { float: right; width: 192px; margin: 25px 0px 0 0; }
a.mapa { display: block; float: right; width: 361px; height:323px; margin: 75px -100px 0 0; }

.kontaktni-udaje { width: 620px; float: left; clear: both; margin: 0px 0 50px -20px;}
.kontaktni-udaje .cl { width: 250px; float: left; margin: 25px 0 25px 20px; }
.kontaktni-udaje .cp { width: 320px; float: right; margin: 25px 20px 25px 0px;}
.kontaktni-udaje .floatLeft { float: left;}
.kontaktni-udaje .floatRight { float: right;}
.kontaktni-udaje h3 { font-size: 1.05em; font-weight: normal;}
.kontaktni-udaje h3 span { color: #e1bc6d; }
.kontaktni-udaje h4 { font-weight: bold; font-size: 0.9em; padding: 0 0 10px 0;}
.kontaktni-udaje p { font-size: 0.9em; line-height: 180%;}
.kontaktni-udaje p a { color: #fff; text-decoration: underline;}
.kontaktni-udaje p a:hover { text-decoration: none;}
.kontaktni-udaje p.ic { padding: 20px 0 0 0;}
.kontaktni-udaje p.zapis { padding: 25px 0 0 20px; font-size: 0.75em;}
.kontaktni-udaje div.line {height: 1px; width: 600px; margin: 0; border-bottom: 1px solid #383838; clear: both;}



/* ---------- coffeebrewer ---------- */
body.bg-coffeebrewer { background: #1e1e1e url(../images/bg-coffeebrewer.jpg) center 287px no-repeat; }

div.o-coffeebrewer { float: left; clear: both; margin: 28px 0 0 0; width: 460px;}
div.o-coffeebrewer h3 { position: relative;  width:60px; height: 19px; margin: 0; overflow:hidden; float: left; }
div.o-coffeebrewer h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 60px; height: 19px; background:url(../images/h3-princip.png) top left no-repeat; }

div.coffeebrewer-video { width:330px; height:200px; overflow:hidden; float: left; margin: 30px 0 0 0; clear: both;}
div.coffeebrewer-video div{ height:175px; overflow:hidden;}

div.button-jak-to-funguje { width: 310px; height: 152px; float: left; clear: both; margin: 45px 0 0 0; background: url(../images/icon-jak-to-funguje.jpg) top left no-repeat; }
div.button-jak-to-funguje a { position: relative;  width:182px; height: 51px; margin: 51px 0 0 0; overflow:hidden; float: right; color: #fff; font-size: 0.8em;}
div.button-jak-to-funguje a span { display:block; position:absolute; left:0; top:0; z-index:1; width: 182px; height: 51px; background:url(../images/button-jak-to-funguje.png) top left no-repeat; }
div.button-jak-to-funguje a:hover span {background:url(../images/button-jak-to-funguje.png) bottom left no-repeat; }

div.button-kvalita { width: 506px; height: 152px; float: right; margin: 85px 0 0 0; background: url(../images/icon-kvalita.jpg) top left no-repeat; }
div.button-kvalita a { position: relative;  width:298px; height: 50px; margin: 11px 0 0 0; overflow:hidden; float: right; color: #fff; font-size: 0.8em;}
div.button-kvalita a span { display:block; position:absolute; left:0; top:0; z-index:1; width: 298px; height: 50px; background:url(../images/button-kvalita.png) top left no-repeat; }
div.button-kvalita a:hover span {background:url(../images/button-kvalita.png) bottom left no-repeat; }



/* ---------- princip ---------- */
body.bg-princip { background: #1e1e1e url(../images/bg-jak-to-funguje.jpg) center 282px no-repeat; }

div.jak-to-funguje { float: right; clear:both; margin: 25px 0 0 0; width: 460px; }
div.jak-to-funguje h3 { position: relative;  width:136px; height: 20px; margin: 0; overflow:hidden; float: left; }
div.jak-to-funguje h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 136px; height: 20px; background:url(../images/h3-jak-to-funguje.png) top left no-repeat; }

div.princip-video { width:330px; height:200px; overflow:hidden; float: right; margin: 30px 0 0 0; clear: both;}
div.princip-video div{ height:175px; overflow:hidden;}

div.kvalita { float: left; clear: both; margin: 25px 0 0 0; width: 460px;}
div.kvalita h3 { position: relative;  width:251px; height: 20px; margin: 0; overflow:hidden; float: left; }
div.kvalita h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 251px; height: 20px; background:url(../images/h3-kvalita.png) top left no-repeat; }

div.vyuziti { clear: both; width: 900px; height: 213px; float: left; margin: 30px 0 50px 0;}
div.vyuziti img { display: block; width: 210px; height: 213px; float: left; margin: 0;}
div.vyuziti img.middle { margin: 0 15px;}

div.easyserve { width: 900px; height: 645px; clear: both; float: left; background:url(../images/easyserve-bg.jpg) top left no-repeat; margin: 15px 0 0 0;}
div.easyserve h3 { position: relative;  width: 110px; height: 15px; margin: 25px 0 0 0; overflow:hidden; float: left; }
div.easyserve h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 110px; height: 15px; background:url(../images/h3-easyserve.png) top left no-repeat; }
div.easyserve p { width: 560px; }


/* ---------- nase kavy ---------- */
body.bg-nasekavy { background: #1e1e1e url(../images/bg-nasekavy.jpg) center 287px no-repeat; }

div.vitezne-kavy { float: left; clear: both; margin: 25px 0 0 0; width: 457px;}
div.vitezne-kavy h3 { position: relative;  width:115px; height: 20px; margin: 0; overflow:hidden; float: left; }
div.vitezne-kavy h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 115px; height: 20px; background:url(../images/h3-vitezne-kavy.png) top left no-repeat; }

div.pestitelske-kavy { float: left; clear: both; margin: 30px 0 0 0; width: 640px;}
div.pestitelske-kavy h3 { position: relative;  width:268px; height: 20px; margin: 0; overflow:hidden; float: left; }
div.pestitelske-kavy h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 268px; height: 20px; background:url(../images/h3-pestitelske-kavy.png) top left no-repeat; }

div.kavy-video { width:210px; height:142px; overflow:hidden; float: right; margin: 50px 0 0 0; }
div.kavy-video div{ height:117px; overflow:hidden;}

h3.nasekavy { position: relative;  width:89px; height: 20px; margin: 30px 0 0 0; overflow:hidden; float: left; clear: both; }
h3.nasekavy span { display:block; position:absolute; left:0; top:0; z-index:1; width: 89px; height: 20px; background:url(../images/h3-nasekavy2.png) top left no-repeat; }

h3.ohodnoceni{ position: relative;  width:143px; height: 20px; margin: 30px 0 0 0; overflow:hidden; float: left; clear: both; }
h3.ohodnoceni span { display:block; position:absolute; left:0; top:0; z-index:1; width: 143px; height: 20px; background:url(../images/h3-hodnoceni.png) top left no-repeat; }

div.button-afrika { width: 382px; height: 136px; float: left; clear: both; margin: 0; background: url(../images/icon-afrika.png) top left no-repeat; }
div.button-afrika a { position: relative;  width:307px; height: 50px; margin: 27px 0 0 76px; overflow:hidden; float: left; color: #fff; font-size: 0.8em;}
div.button-afrika a span { display:block; position:absolute; left:0; top:0; z-index:1; width: 307px; height: 50px; background:url(../images/button-afrika.png) top left no-repeat; }
div.button-afrika a:hover span {background:url(../images/button-afrika.png) bottom left no-repeat; }

div.button-amerika { width: 450px; height: 136px; float: right;  margin: 0; background: url(../images/icon-amerika.png) top left no-repeat; }
div.button-amerika a { position: relative;  width:327px; height: 50px; margin: 27px 0 0 0; overflow:hidden; float: right; color: #fff; font-size: 0.8em;}
div.button-amerika a span { display:block; position:absolute; left:0; top:0; z-index:1; width: 327px; height: 50px; background:url(../images/button-amerika.png) top left no-repeat; }
div.button-amerika a:hover span {background:url(../images/button-amerika.png) bottom left no-repeat; }

div.button-eko { width: 382px; height: 65px; float: left; clear: both; margin: 0; background: url(../images/icon-eko.png) top left no-repeat; }
div.button-eko a { position: relative;  width:190px; height: 50px; margin: 5px 0 0 76px; overflow:hidden; float: left; color: #fff; font-size: 0.8em;}
div.button-eko a span { display:block; position:absolute; left:0; top:0; z-index:1; width: 190px; height: 50px; background:url(../images/button-eko.png) top left no-repeat; }
div.button-eko a:hover span {background:url(../images/button-eko.png) bottom left no-repeat; }

div.button-fair { width: 385px; height: 65px; float: right;  margin: 0; background: url(../images/icon-fair.png) top left no-repeat; }
div.button-fair a { position: relative;  width:184px; height: 50px; margin: 5px 0 0 57px; overflow:hidden; float: left; color: #fff; font-size: 0.8em;}
div.button-fair a span { display:block; position:absolute; left:0; top:0; z-index:1; width: 184px; height: 50px; background:url(../images/button-fair.png) top left no-repeat; }
div.button-fair a:hover span {background:url(../images/button-fair.png) bottom left no-repeat; }

div.button-ohodnoceni { width:322px; height: 50px; float: left; clear: both; margin:30px 0 50px 0; background: url(../images/icon-hodnoceni.png) top left no-repeat; }
div.button-ohodnoceni a { position: relative;  width:226px; height: 50px; margin: 0; overflow:hidden; float: right; color: #fff; font-size: 0.8em;}
div.button-ohodnoceni a span { display:block; position:absolute; left:0; top:0; z-index:1; width: 226px; height: 50px; background:url(../images/button-ohodnoceni.png) top left no-repeat; }
div.button-ohodnoceni a:hover span {background:url(../images/button-ohodnoceni.png) bottom left no-repeat; }

/* ---------- Fair Trade ---------- */
div.fair-trade-kavy { float: left; clear: both; margin: 30px 0 0 0; width: 460px;}
div.fair-trade-kavy h3 { position: relative;  width:135px; height: 19px; margin: 0; overflow:hidden; float: left; }
div.fair-trade-kavy h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 135px; height: 19px; background:url(../images/h3-fair-trade-kavy.png) top left no-repeat; }

div.fair-trade-znamka { float: right; margin: 30px 0 0 0; width: 380px;}
div.fair-trade-znamka h3 { position: relative;  width:162px; height: 17px; margin: 0 0 2px 0; overflow:hidden; float: left; }
div.fair-trade-znamka h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 162px; height: 17px; background:url(../images/h3-fair-trade-znamka.png) top left no-repeat; }

/* ---------- Eko kavy ---------- */
div.eko-kavy { float: left; clear: both; margin: 30px 0 0 0; width: 900px;}
div.eko-kavy h3 { position: relative;  width:142px; height: 20px; margin: 0; overflow:hidden; float: left; }
div.eko-kavy h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 142px; height: 20px; background:url(../images/h3-eko.png) top left no-repeat; }

/* ---------- Afrika kavy ---------- */
div.afrika-kavy { float: left; clear: both; margin: 30px 0 0 0; width: 900px;}
div.afrika-kavy h3 { position: relative;  width:260px; height: 21px; margin: 0; overflow:hidden; float: left; }
div.afrika-kavy h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 260px; height: 21px; background:url(../images/h3-afrika.png) top left no-repeat; }

/* ---------- Amerika kavy ---------- */
div.amerika-kavy { float: left; clear: both; margin: 30px 0 0 0; width: 900px;}
div.amerika-kavy h3 { position: relative;  width:280px; height: 20px; margin: 0; overflow:hidden; float: left; }
div.amerika-kavy h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 280px; height: 20px; background:url(../images/h3-amerika.png) top left no-repeat; }

div.galerie-etikety { clear: both; width: 913px; height: 240px; margin: 0px -60px 20px 0; float: right;}
div.galerie-etikety a { float: left; display: block; padding: 45px 0 0 0;}
div.galerie-etikety a:hover { background: url(../images/detail-kavy.png) top center no-repeat;}
div.galerie-etikety img { }

/* ---------- hodnoceni kavy ---------- */
div.hodnoceni-text { float: left; clear: both; margin: 30px 0 0 0; width: 460px;}
div.hodnoceni-text h3.kvalita { position: relative;  width:251px; height: 20px; margin: 0; overflow:hidden; float: left; }
div.hodnoceni-text h3.kvalita span { display:block; position:absolute; left:0; top:0; z-index:1; width: 251px; height: 20px; background:url(../images/h3-kvalita.png) top left no-repeat; }
div.hodnoceni-text h3.cup { position: relative;  width:171px; height: 20px; margin: 30px 0 0 0; overflow:hidden; float: left; }
div.hodnoceni-text h3.cup span { display:block; position:absolute; left:0; top:0; z-index:1; width: 171px; height: 20px; background:url(../images/h3-cup.png) top left no-repeat;}
div.hodnoceni-text h3.etikety { position: relative;  width:62px; height: 19px; margin: 30px 0 0 0; overflow:hidden; float: left; }
div.hodnoceni-text h3.etikety span { display:block; position:absolute; left:0; top:0; z-index:1; width: 62px; height: 19px; background:url(../images/h3-etikety.png) top left no-repeat;}

h3.hvezdicky { position: relative;  width:298px; height: 16px; margin: 30px 83px 0 0; overflow:hidden; float: right; }
h3.hvezdicky span { display:block; position:absolute; left:0; top:0; z-index:1; width: 298px; height: 16px; background:url(../images/h3-hodnoceni2.png) top left no-repeat;}
img.hodnoceni { float: right; width: 387px; height: 847px; margin: 25px 0 0 0;}


/* ---------- Reklamni predmet ---------- */
div.reklama { float: left; clear: both; margin: 30px 0 0 0; width: 900px;}
div.reklama h3 { position: relative;  width:407px; height: 21px; margin: 0; overflow:hidden; float: left; }
div.reklama h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 407px; height: 21px; background:url(../images/h3-reklama.png) top left no-repeat; } 


ul.ul-l { float: left; width: 440px; clear: both; margin: 20px 0 0 0; font-size: 0.75em; list-style: none; line-height: 210%;}
ul.ul-r { float: right; width: 420px;  margin: 20px 0 0 0; font-size: 0.75em; list-style: none; line-height: 210%;}
ul.ul-l li, ul.ul-r li { padding: 0 0 0 15px; background: url(../images/li.png) left 10px no-repeat;}
ul.ul-l li strong, ul.ul-r li strong { font-weight: 700; color: #e1bc6d;}


a.cenik { position: relative;  width:323px; height: 54px; margin: 30px 0; overflow:hidden; float: left; clear: both; color: #fff; font-size: 0.8em; }
a.cenik span { display:block; position:absolute; left:0; top:0; z-index:1; width: 323px; height:54px; background:url(../images/a-download.png) top left no-repeat; }

h3.galerie { position: relative;  width:61px; height: 16px; margin: 0; overflow:hidden; float: left; clear: both; }
h3.galerie2 { position: relative;  width:61px; height: 16px; margin: 20px 0 0 0; overflow:hidden; float: left; clear: both; }
h3.galerie span, h3.galerie2 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 61px; height: 16px; background:url(../images/h3-galerie.png) top left no-repeat; }

#jCarouselLiteDemo .carousel  { clear: both; width: 900px; height: 180px; float: left; margin: 20px 0 40px 0; padding: 0;  }
#jCarouselLiteDemo .carousel a.prev, #jCarouselLiteDemo .carousel a.next {display: block; float: left; width: 34px; height: 100px; text-decoration: none; margin: 40px 0 0 0; position: relative;  overflow:hidden; color: #fff; font-size: 0.6em;}
#jCarouselLiteDemo .carousel a.prev span, #jCarouselLiteDemo .carousel a.next span {display:block; position:absolute; left:0; top:0; z-index:1; width: 34px; height: 100px;  }
#jCarouselLiteDemo .carousel a.prev span {background: url(../images/gallery-arrow-left.png) top center no-repeat; }
#jCarouselLiteDemo .carousel a.next span {background:url(../images/gallery-arrow-right.png) top center no-repeat; } 
#jCarouselLiteDemo .carousel a:hover.prev span {background: url(../images/gallery-arrow-left.png) bottom center no-repeat; }
#jCarouselLiteDemo .carousel a:hover.next span {background:url(../images/gallery-arrow-right.png) bottom center no-repeat; } 
#jCarouselLiteDemo .carousel .jCarouselLite { float: left;  position: relative; visibility: hidden; left: -5000px; margin: 0 12px;}
#jCarouselLiteDemo .carousel ul {margin: 0; text-align:center;}
#jCarouselLiteDemo .carousel li { height: 180px; text-align: center; width: 180px; background: #3a3a3a; margin: 0 11px; }
#jCarouselLiteDemo .carousel li a {height: 180px; text-align: center; width: 180px; background: #3a3a3a; display: block; color: #fff; font-size: 0.8em;}
#jCarouselLiteDemo .carousel li a img {height: 180px; width: 180px; margin: 0;}


/* ---------- coffeeservice ---------- */
div.o-coffeeservice { float: right;  margin: 28px 0 0 0; width: 520px;}
div.o-coffeeservice h3 { position: relative;  width:119px; height: 15px; margin: 0; overflow:hidden; float: left; }
div.o-coffeeservice h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 119px; height: 15px; background:url(../images/h3-coffeeservice.png) top left no-repeat; }

div.coffeeservice-video { width: 330px; float: left; clear: both; padding: 10px 0 80px 0; background: url(../images/bg-coffeeservice.png) bottom right no-repeat;}
div.coffeeservice-video div.video { width:330px; height:200px; overflow:hidden; float: left; margin: 20px 0 0 0; clear: both;}
div.coffeeservice-video div{ height:175px; overflow:hidden;}

h3.vyhody-coffeeservice { position: relative;  width:201px; height: 21px; margin: 50px 0 0 0; overflow:hidden; float: left; clear: both; }
h3.vyhody-coffeeservice span { display:block; position:absolute; left:0; top:0; z-index:1; width: 201px; height: 21px; background:url(../images/h3-vyhody-coffeeservice.png) top left no-repeat; }

a.poptavka-coffeeservice { position: relative;  width:333px; height: 57px; margin: 15px 0 0 0; overflow:hidden; float: left; color: #fff; font-size: 0.8em; clear: both;}
a.poptavka-coffeeservice span { display:block; position:absolute; left:0; top:0; z-index:1; width: 333px; height: 57px; background:url(../images/button-poptavka-coffeeservice.png) top left no-repeat; }
a:hover.poptavka-coffeeservice span { background:url(../images/button-poptavka-coffeeservice.png) bottom left no-repeat; }