/********************************************************************************************************************
	Autor: 		Martin Felcman - martin@felcman.cz
	Projekt: 	DropStop.cz  
	
 *****************************************************************************************************************/
* {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: #000 url(/images/bg.png) top right repeat; font-family: Verdana, Geneva, sans-serif; color: #fff; text-align: center; height: 100%; padding: 0; margin: 0; position: relative; }
a { color: #fff;}

h1 { position: relative;  width:176px; height: 53px; margin: 45px 0 0 20px; overflow:hidden; float: left; _margin: 45px 0 0 10px; font-size: 1.7em;}
h1 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 176px; height: 53px; background:url(/images/logo.png) top left no-repeat; }

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

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

ul#menu { width: 628px; float: right; display: block; line-height: 53px; height: 53px; margin: 23px 0px 60px 0px; list-style: none; clear: right; font-size: 0.8em;}
ul#menu li { height: 53px; margin: 0px; float: left; list-style: none; display: block; padding: 0 20px;}
ul#menu li a {position: relative;  height: 53px; margin: 0px; overflow:hidden; float: left;  display: block;}
ul#menu li a span { display:block; position:absolute; left:0; top:0; z-index:1; height: 53px; }
ul#menu li.home, ul#menu li.home a { width: 116px;}
ul#menu li.home a span { width: 116px; background:url(/images/menu-home.png) top left no-repeat; }
ul#menu li.home a:hover span, ul#menu li.home a.active span { background:url(/images/menu-home.png) bottom left no-repeat; }
ul#menu li.dropstop, ul#menu li.dropstop a { width: 133px;}
ul#menu li.dropstop a span { width: 133px; background:url(/images/menu-dropstop.png) top left no-repeat; }
ul#menu li.dropstop a:hover span, ul#menu li.dropstop a.active span { background:url(/images/menu-dropstop.png) bottom left no-repeat; }
ul#menu li.galerie, ul#menu li.galerie a { width: 58px;}
ul#menu li.galerie a span { width: 58px; background:url(/images/menu-galerie.png) top left no-repeat; }
ul#menu li.galerie a:hover span, ul#menu li.galerie a.active span { background:url(/images/menu-galerie.png) bottom left no-repeat; }
ul#menu li.kontakt a { width:65px;}
ul#menu li.kontakt { width: 65px;}
ul#menu li.kontakt a span { width: 65px; background:url(/images/menu-kontakt2.png) top left no-repeat; }
ul#menu li.kontakt a:hover span { background:url(/images/menu-kontakt2.png) bottom left no-repeat; }
ul#menu li.eshop a { width:52px;}
ul#menu li.eshop { width: 52px; border-left: 1px solid #383838;}
ul#menu li.eshop a span { width: 52px; background:url(/images/menu-eshop.png) top left no-repeat; }
ul#menu li.eshop a:hover span { background:url(/images/menu-eshop.png) bottom left no-repeat; }
/*ul#menu li.kontakt a { width: 200px;}
ul#menu li.kontakt { width: 200px; border-left: 1px solid #383838;}
ul#menu li.kontakt a span { width: 200px; background:url(/images/menu-kontakt.png) bottom left no-repeat; }
ul#menu li.kontakt a:hover span { background:url(/images/menu-kontakt.png) bottom left no-repeat; }*/


#footer { background: #1c1c1c url(/images/footer-topline.png) top left repeat-x; width: 100%; height: 70px; position: absolute; bottom:0; left: 0; text-align: left; font-size: 0.8em;}
#footer div { width: 960px; margin: 30px auto 0 auto;}
#footer div p.distributor  { float: left; width: 350px;  }
#footer div p.distributor a { display:block; float: right;  margin: 0px 0 0px 0px; width: 117px; height:23px; _margin: -15px 0 0px 0px; }
*+html #footer div p.distributor a { margin: -18px 0 0px 0px; }
#footer div p.bottom-menu  { float: right; width: 450px; text-align: right;  }
#footer div p.bottom-menu a { color:#fff; text-decoration: underline; margin: 0 0 0 15px;  }
#footer div p.bottom-menu a:hover {  text-decoration: none;  }

p.mutace { float: right; text-align: right; padding: 15px 20px 0 0; width: 260px; font-size: 0.8em;}
p.mutace a { color: #fff; text-decoration: underline;}
p.mutace a.active { font-weight: bold; text-decoration: none;}
p.mutace a:hover { text-decoration: none;}
p.mutace a.cs { padding: 0 20px 0 0; margin: 0 5px 0 0; background: url(/images/dot.png) right  bottom no-repeat;}
p.mutace a.facebook  { float: left; display: block; margin:0 0px -5px 0px;}
p.mutace a.youtube {float: left; display: block;  margin:0 0px -5px 5px;}

/* ---------- HOMEPAGE ---------- */

#header { width: 1000px; background:url(/images/bottle2.png) bottom center no-repeat; height:344px; clear: both;}
#header h2 { position: relative;  width:390px; height: 34px; margin: 50px 0 0 360px; overflow:hidden; float: left; _margin: 50px 0 0 180px;}
#header h2 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 390px; height: 34px; background:url(/images/h2-title.png) top left no-repeat; }
#header p { position: relative;  width:482px; height: 90px; margin: 35px 0 0 360px; overflow:hidden; float: left; clear: both; _margin: 35px 0 0 180px;}
#header p span { display:block; position:absolute; left:0; top:0; z-index:1; width: 482px; height: 90px; background:url(/images/p-description.png) top left no-repeat; }
#header a.order { position: relative;  width:222px; height: 45px; margin: 45px 0 0 360px; overflow:hidden; float: left; clear: left;}
#header a.order span { display:block; position:absolute; left:0; top:0; z-index:1; width: 222px; height: 45px; background:url(/images/button-poptavka2.png) top left no-repeat; }
#header a.more-info { position: relative;  width:257px; height: 20px; margin: 58px 130px 0 0; overflow:hidden; float:  right; }
#header a.more-info span { display:block; position:absolute; left:0; top:0; z-index:1; width: 257px; height: 20px; background:url(/images/a-vedetvice.png) top left no-repeat; }
#header a:hover.more-info span { background:url(/images/a-vedetvice.png) bottom left no-repeat; }


.leftbox { float: left; width: 325px; margin: 50px 0 40px 0; }
.rightbox { float: right; width: 640px;  margin: 50px 0 40px 0; }
 
.procdropstop h3 { position: relative;  width:247px; height: 24px; margin: 0 0 0 20px; overflow:hidden; float: left; _margin: 0 0 0 10px;}
.procdropstop h3 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 247px; height: 24px; background:url(/images/h3-procdropstop.png) top left no-repeat; }
.procdropstop ul { list-style: none; margin: 10px 0 0 0; padding: 0; font-size: 0.9em; width: 325px; clear: both;}
.procdropstop ul li { padding: 30px 20px; border-bottom: 1px solid #383838; line-height: 140%;}
.procdropstop ul li.last {border-bottom: none;}

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

#jCarouselLiteDemo .carousel  { clear: both; width: 624px; height: 180px; float: left; margin: 40px 0; padding: 0;   }
#jCarouselLiteDemo .carousel a.prev, #jCarouselLiteDemo .carousel a.next {display: block; float: left; width: 26px; height: 67px; text-decoration: none; margin: 56px 0 0 0; position: relative;  overflow:hidden; font-size: 0.5em;}
#jCarouselLiteDemo .carousel a.prev span, #jCarouselLiteDemo .carousel a.next span {display:block; position:absolute; left:0; top:0; z-index:1; width: 26px; height: 67px;  }
#jCarouselLiteDemo .carousel a.prev span {background: url(/images/gallery-arrow-left.png) center center no-repeat; }
#jCarouselLiteDemo .carousel a.next span {background:url(/images/gallery-arrow-right.png) center center no-repeat; }                
#jCarouselLiteDemo .carousel .jCarouselLite { float: left;  position: relative; visibility: hidden; left: -5000px; margin: 0 10px;}
#jCarouselLiteDemo .carousel ul {margin: 0; text-align:center;}
#jCarouselLiteDemo .carousel li { height: 180px; text-align: center; width: 160px; background: #fff; margin: 0 12px; _margin: 0 16px 0 8px; }
#jCarouselLiteDemo .carousel li a {height: 160px; text-align: center; width: 140px; padding: 10px; background: #fff; display: block; }
#jCarouselLiteDemo .carousel li a img {height: 140px; width: 140px; margin: 0;}

a.seemore { display: block; color: #fff; text-decoration: underline; font-size: 0.9em; float: right; margin: 30px 20px 0 0; clear: both; _margin: 30px 10px 0 0; }
a:hover.seemore { text-decoration: none;}


/*-------- GALERIE -----------*/
h2.galerie2 { position: relative;  width:76px; height: 19px; margin: 0 0 0 20px; overflow:hidden; float: left; clear: both; _margin: 50px 0 0 10px; font-size: 1.2em;}
*+html h2.galerie2 { margin: 50px 0 0 20px;}
h2.galerie2 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 76px; height: 19px; background:url(/images/h3-galerie.png) top left no-repeat; }

a.poptavka { position: relative;  width:172px; height: 34px; margin: 0 20px 0 0; overflow:hidden; float: right; _margin: 125px -400px 0 130px !important; }
*+html a.poptavka { margin: 125px -400px 0 130px !important; }
a.poptavka span { display:block; position:absolute; left:0; top:0; z-index:1; width: 172px; height: 34px; background:url(/images/button-poptavka.png) top left no-repeat; }

#gallery2 { clear: both; width: 1000px; margin: 20px auto 0 auto;}
#gallery2 a { height: 160px; text-align: center; width: 140px; padding: 10px; background: #fff; margin: 30px 20px; _margin: 30px 16px; display: block; float: left;}
#gallery2 a img {height: 140px; width: 140px; margin: 0;}
#gallery2 div.line {height: 1px; width: 1000px; margin: 0; background: #383838; clear: both;}

p.list { clear: both; text-align: center; _padding: 30px 0 0 0 ;}
*+html p.list { padding: 30px 0 0 0 ;}
p.list a { color: #fff; text-decoration: underline; font-size: 1em;}
p.list a:hover, p.list a.active { text-decoration: none; }

/*-------- KONTAKT -----------*/
h2.kontakt-distr { position: relative;  width:258px; height: 19px; margin: 0 0 0 20px; overflow:hidden; float: left; clear: both; _margin: 50px 0 0 10px; font-size: 1.2em;}
*+html h2.kontakt-distr { margin: 50px 0 0 20px;}
h2.kontakt-distr span { display:block; position:absolute; left:0; top:0; z-index:1; width: 258px; height: 19px; background:url(/images/h2-kontakt.png) top left no-repeat; }

img.logo-kontakt { float: right; width: 186px; margin: 50px 20px 0 0; _margin: 200px -300px 0 120px;}
*+html img.logo-kontakt {margin: 200px -300px 0 120px;}

.kontaktni-udaje { width: 600px; float: left; clear: both; margin: 25px 0 0 0;}
.kontaktni-udaje .cl { width: 270px; float: left; margin: 25px 0 25px 20px; _margin: 25px 0 25px 10px;}
.kontaktni-udaje .cp { width: 300px; float: right; margin: 25px 0 25px 0px;}
.kontaktni-udaje h3 { font-size: 1.05em; font-weight: normal;}
.kontaktni-udaje h3 span { color: #fcb033; font-weight: bold;}
.kontaktni-udaje h4, .partneri 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; background: #383838; clear: both;}

.partneri { float: right; clear: right; width: 330px; margin: 30px 0 0 0;}
.partneri a { display: block; margin: 0 20px 0 0; float: left;}

/*-------- O DROPSTOP -----------*/
h2.o-dropstop{ position: relative;  width:194px; height: 23px; margin: 0 0 0 20px; overflow:hidden; float: left; clear: both; _margin: 50px 0 0 10px; font-size: 1.2em;}
*+html h2.o-dropstop{ margin: 50px 0 0 20px; }
h2.o-dropstop span { display:block; position:absolute; left:0; top:0; z-index:1; width: 194px; height: 23px; background:url(/images/h2-dropstop.png) top left no-repeat; }

h3.promotion { position: relative;  width:97px; height: 16px; margin: 50px 0 0 20px; overflow:hidden; float: left; clear: both; _margin: 50px 0 0 10px; font-size: 1em; }
h3.promotion span { display:block; position:absolute; left:0; top:0; z-index:1; width: 97px; height: 16px; background:url(/images/h3-promotion.png) top left no-repeat; }
h3.retail { position: relative;  width:54px; height: 16px; margin: 30px 0 0 20px; overflow:hidden; float: left; clear: both; _margin: 30px 0 0 10px; font-size: 1em; }
h3.retail span { display:block; position:absolute; left:0; top:0; z-index:1; width: 54px; height: 16px; background:url(/images/h3-retail.png) top left no-repeat; }

h4.moznosti-baleni { position: relative;  width:70px; height: 16px; margin: 0px 0 30px 20px; overflow:hidden; float: left; clear: both; _margin: 0px 0 30px 10px;}
h4.moznosti-baleni span { display:block; position:absolute; left:0; top:0; z-index:1; width: 70px; height: 16px; background:url(/images/h4-nabidka.png) top left no-repeat; }
h4.galerie-baleni { position: relative;  width:127px; height: 18px; margin: 30px 0 0px 20px; overflow:hidden; float: left; clear: both; _margin: 30px 0 0px 10px;}
h4.galerie-baleni span { display:block; position:absolute; left:0; top:0; z-index:1; width: 127px; height: 18px; background:url(/images/h4-galerie-baleni.png) top left no-repeat; }
h4.nabidka { position: relative;  width:76px; height: 16px; margin: 30px 0 0px 20px; overflow:hidden; float: left; clear: both; _margin: 30px 0 0px 10px;}
h4.nabidka span { display:block; position:absolute; left:0; top:0; z-index:1; width: 76px; height: 16px; background:url(/images/h4-nabidka2.png) top left no-repeat; }

div.baleni { width:480px; float: left; margin: 0 0 30px 0;}

h5.karta { position: relative;  width:154px; height: 16px; margin: 0 0 0 20px; overflow:hidden; float: left; clear: both; _margin: 0 0 0 10px;}
h5.karta span { display:block; position:absolute; left:0; top:0; z-index:1; width: 154px; height: 16px; background:url(/images/h5-rozkladaci-karta.png) top left no-repeat; }
h5.pergamen { position: relative;  width:194px; height: 20px; margin: 0 0 0 20px; overflow:hidden; float: left; clear: both; _margin: 0 0 0 10px;}
h5.pergamen span { display:block; position:absolute; left:0; top:0; z-index:1; width: 194px; height:20px; background:url(/images/h5-obalka.png) top left no-repeat; }
h5.visacka { position: relative;  width:333px; height: 16px; margin: 0 0 0 20px; overflow:hidden; float: left; clear: both; _margin: 0 0 0 10px;}
h5.visacka span { display:block; position:absolute; left:0; top:0; z-index:1; width: 333px; height:16px; background:url(/images/h5-visacka-hrdlo.png) top left no-repeat; }
h5.minidisc { position: relative;  width:85px; height: 16px; margin: 0 0 0 20px; overflow:hidden; float: left; clear: both; _margin: 0 0 0 10px;}
h5.minidisc span { display:block; position:absolute; left:0; top:0; z-index:1; width: 85px; height:16px; background:url(/images/h5-minidisc.png) top left no-repeat; }
h5.pouzdro { position: relative;  width:236px; height: 20px; margin: 0 0 0 20px; overflow:hidden; float: left; clear: both; _margin: 0 0 0 10px;}
h5.pouzdro span { display:block; position:absolute; left:0; top:0; z-index:1; width: 236px; height:20px; background:url(/images/h5-reklamni-pouzdro.png) top left no-repeat; }

a.download { position: relative;  width:330px; height: 53px; margin: 20px 20px 0px 0; overflow:hidden; float: right;  }
a.download2 { position: relative;  width:330px; height: 53px; margin: -20px 20px 30px 0; overflow:hidden; float: right;  }
a.download span, a.download2 span { display:block; position:absolute; left:0; top:0; z-index:1; width: 330px; height:53px; background:url(/images/button-cenik.png) top left no-repeat; }
a.certifikat { position: relative;  width:330px; height: 53px; margin: 20px 20px 30px 0; overflow:hidden; float: right;  }
a.certifikat span { display:block; position:absolute; left:0; top:0; z-index:1; width: 330px; height:53px; background:url(/images/button-certifikat.png) top left no-repeat; }

p.info { font-size: 0.8em; padding: 30px 20px; line-height: 170%; clear: both;} 

div.baleni ul { clear: both; font-size: 0.8em; margin: 0 0 10px 20px; padding: 10px 0 0 0; list-style: none; line-height: 180%; }
div.baleni ul li { padding: 0 0 0 23px; background: url(/images/li.png) 0 7px no-repeat; }

div.linefull {height: 1px !important; width: 1000px; margin: 0; padding:0; background: #383838; clear: both; display: block;}
.odsazeni { margin-bottom: 30px !important;}

#gallery3, #gallery4 { clear: both; width: 1000px; margin: 20px auto 0 auto;}
#gallery3 .item, #gallery4 .item { height: 200px; width: 160px;  margin: 20px 20px 0 20px; display: block; float: left; font-size: 0.75em; _margin: 10px 17px 0 17px;}
#gallery3 .item a, #gallery4 .item a, #gallery4 .item-middle a { height: 160px; text-align: center; width: 140px; padding: 10px; margin: 0 0 8px 0; background: #fff; display: block; }
#gallery3 .item a img, #gallery4 .item a img, #gallery4 .item-middle a img {height: 140px; width: 140px; margin: 0;}
#gallery4 .item-middle { height: 200px; width: 160px;  margin: 20px 70px 0 70px; _margin: 20px 68px 0 68px; display: block; float: left; font-size: 0.75em;}