html,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
  margin:0;
  padding:0;
}
pre
{
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,img { 
  border:0;
}

address,caption,cite,code,dfn,th,var {
  font-style:normal;
  font-weight:normal;
}
ol,ul {
  list-style:none;
}
caption,th {
  text-align:left;
}
h1,h2,h3,h4,h5,h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,q:after {
  content:'';
}
abbr,acronym {border:0;}
::selection{background:#333; color:#ddd;}

br.clear{clear:both; zoom:1; height:1px;}

html{
   background:#d2602e;
}

body{
  width:1000px; 
  margin:0 auto;  
  color: #fff;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
}
  header {
    margin:60px 0;
  }

    header h1{
      font:600 3em/1.2 "Open Sans", sans-serif;
      text-align:center;      
      font-weight:normal;
      color:#fff;
      text-transform:uppercase;
    }
    
    header h2{
      margin-top:15px;
      font:400 1.875em/1 "Open Sans", sans-serif;
      padding:17px 50px 20px 50px;
      text-align:center;
      background:url('../images/flag.png') center 0 no-repeat;
    }

  section.content{
    margin:20px auto;
    width: 800px;
  }

    section.content .description{         
      margin:0 auto;
      font:italic 1.125em/1.2 "Open Sans", sans-serif;
      color:#fff;
      text-align:center;      
    }

      section.content > .description{
        width:800px;
      }

    section.content h3 {
      color: #fff;
      font-size: 1.5em;
      text-align: center;
      padding: 25px 0 15px 0;
    }

    section.content > .definition {
      width: 770px;
      margin: 0 auto 30px;
    }

      section.content > .definition p {
        font-style: normal;
        text-align: left;
        color: #000;
        font-size: 1em;
      }

    section.content .bottles {
      margin: 35px auto;
    }

      section.content .bottles > div {
        float: left;
        cursor: pointer;
        margin-left: 24px;
      }

      section.content .bottles > div:first-child {
        margin-left: 0;
      }


      /* bottles */

      section.content .bottles .honey {
        width: 114px;
        height: 340px;
        background: url(../images/drinks_1.png) no-repeat -114px 0;
      }

      section.content .bottles .honey:hover,
      section.content .bottles .honey.active {
        background-position: 0 0; 
      }

      section.content .bottles .salt {
        width: 170px;
        height: 344px;
        background: url(../images/drinks_2.png) no-repeat -170px 0;
      }

      section.content .bottles .salt:hover,
      section.content .bottles .salt.active {
        background-position: 0 0; 
      }

      section.content .bottles .soda {
        width: 124px;
        height: 341px;
        background: url(../images/drinks_3.png) no-repeat -125px 0;
      }

      section.content .bottles .soda:hover,
      section.content .bottles .soda.active {
        background-position: 0 0; 
      }

      section.content .bottles .orange {
        width: 155px;
        height: 340px;
        background: url(../images/drinks_4.png) no-repeat -155px 0;
      }

      section.content .bottles .orange:hover,
      section.content .bottles .orange.active {
        background-position: 0 0; 
      }

      section.content .bottles .citrus {
        width: 141px;
        height: 338px;
        background: url(../images/drinks_5.png) no-repeat -141px 0;
      }

      section.content .bottles .citrus:hover,
      section.content .bottles .citrus.active {
        background-position: 0 0; 
      }

      /* end bottles */

    section.content .products {
      position: relative;
      height: 220px;
      margin: 0 auto 35px;
    }

      section.content .products > div {
        position: absolute;
      }


      /* products */

      section.content .products .water {
        position: absolute;
        left: -20px;
        top: 10px;
        width: 170px;
        height: 205px;
        background: url(../images/water.png) no-repeat -172px 0;
      }

      section.content .products .water.active {
        background-position: -2px 0; 
      }

      section.content .products .lime {
        position: absolute;
        left: 107px;
        top: 115px;
        width: 115px;
        height: 102px;
        background: url(../images/lime.png) no-repeat -116px 0;
      }

      section.content .products .lime.active {
        background-position: -1px 0; 
      }

      section.content .products .orange {
        position: absolute;
        left: 165px;
        top: 0;
        width: 151px;
        height: 196px;
        background: url(../images/orange.png) no-repeat -153px 0;
      }

      section.content .products .orange.active {
        background-position: -2px 0; 
      }

      section.content .products .big_spoon {
        position: absolute;
        left: 330px;
        top: 15px;
        width: 203px;
        height: 55px;
        background: url(../images/big_spoon.png) no-repeat -206px 0;
      }

      section.content .products .big_spoon.active {
        background-position: -3px 0; 
      }

      section.content .products .honey {
        position: absolute;
        left: 310px;
        top: 60px;
        width: 147px;
        height: 149px;
        background: url(../images/honey.png) no-repeat -151px 0;
      }

      section.content .products .honey.active {
        background-position: -2px 0; 
      }

      section.content .products .soda {
        position: absolute;
        left: 470px;
        top: 79px;
        width: 98px;
        height: 140px;
        background: url(../images/soda.png) no-repeat -100px 0;
      }

      section.content .products .soda.active {
        background-position: -2px 0; 
      }

      section.content .products .lemon {
        position: absolute;
        left: 548px;
        top: 0;
        width: 148px;
        height: 101px;
        background: url(../images/lemon.png) no-repeat -149px 0;
      }

      section.content .products .lemon.active {
        background-position: 0 0; 
      }

      section.content .products .sugar {
        position: absolute;
        left: 577px;
        top: 85px;
        width: 180px;
        height: 133px;
        background: url(../images/sugar.png) no-repeat -184px 0;
      }

      section.content .products .sugar.active {
        background-position: -3px 0; 
      }

      section.content .products .salt {
        position: absolute;
        left: 708px;
        top: 0;
        width: 62px;
        height: 116px;
        background: url(../images/salt.png) no-repeat -63px 0;
      }

      section.content .products .salt.active {
        background-position: -2px 0; 
      }

      section.content .products .small_spoon {
        position: absolute;
        left: 759px;
        top: 82px;
        width: 59px;
        height: 125px;
        background: url(../images/small_spoon.png) no-repeat -61px 0;
      }

      section.content .products .small_spoon.active {
        background-position: 0 0; 
      }

      /* end products */

    section.content div.formula {
      width: 664px;
      margin: 0 auto 35px;
      padding: 0 100px 0 30px;
      border: 3px dashed #ba420e;
      font-size: 1em;
      color: #000;
    }

      section.content div.formula table {
        width: 100%;
      }

        section.content div.formula table tr {
          display: none;
        }

        section.content div.formula table tr.active {
          display: table-row;
        }
        
          section.content div.formula table tr td {
            font-size: 1em;
            color: #000;
            padding: 40px 0;
          }

            section.content div.formula table tr.default td:first-child {
              background: url(../images/povar.png) no-repeat 65px center;
            }

              section.content div.formula table tr.default td p {
                font-style: italic;
                color: #fff;
              }

          section.content div.formula table tr td:first-child {
            width: 200px;
            padding-right: 60px;
            color: #fff;
            font-size: 1.5em;
            line-height: 1.2em;
            text-align: right;
          }

    section.content .info {
      margin: 0 auto;
    }

      section.content .info > div {
        width: 380px;
      }
        section.content .info > div h3 {
          text-align: left;
        }

        section.content .info > div p {
          color: #000;
        }

        section.content .info > div li {
          background: url(../images/marker.png) no-repeat 0 9px;
          padding-left: 20px;
          margin-left: -20px;
          color: #000;
          line-height: 1.5em;
          margin-bottom: 25px;
        }

      section.content .info > .info-left {
        float: left;
        padding-right: 20px;
      }

      section.content .info > .info-right {
        float: right;
        margin: 33px 0 0 20px;
      }


footer{
	margin:30px 0;
	text-align:center;
	position:relative;
	height:150px;
}

	footer table.social-buttons{		
		width:550px;
		margin:30px auto;
	}
		table.social-buttons td{
			width:150px;
		}
		table.social-buttons td #vk_like{width:145px !important; padding-bottom:2px;}
		
		table.social-buttons td.embed{text-align:right; padding-bottom;4px;}
		table.social-buttons td.facebook{width:300px; padding-bottom:4px;}
		table.social-buttons td.twitter{padding-top:2px;}
		table.social-buttons td.gplus{padding-top:2px;}
	
	footer #embed {
		margin-bottom:20px;
		display:none;
	}
		footer #embed textarea{
			width:530px;
			height:60px;
			border:solid 1px #fff;
			background:#8e909d;
			color:#fff;
			padding:10px;
			outline:none;
		}    	
 
.embed button {
	text-decoration:none;
	position:relative;
	margin:0;
	padding:4px 10px;
	line-height:1;
	font-size:0.8em;
	font-family:inherit;
	color:#111;
	text-shadow:1px 1px #e5e5e5;
	background:#ddd;
	background:-webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4));
	background:-moz-linear-gradient(top, #ededed, #c4c4c4);
 	background:-ms-linear-gradient(top, #ededed, #c4c4c4); 
	border:1px solid #acacac;
	border-top-color:#bdbdbd;
	border-bottom-color:#949494;

	border-radius:2px;
	cursor:pointer;
	outline:none;
}

	.embed button:hover{
		background:-webkit-gradient(linear, left top, left bottom, from(#c4c4c4), to(#ededed));
		background:-moz-linear-gradient(top, #ededed, #c4c4c4);
		background:-ms-linear-gradient(top, #c4c4c4, #ededed); 
	}

	.embed button:active {
		background:#ccc;
		background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ddd));
		background:-moz-linear-gradient(top, #ccc, #ddd);
		background:-ms-linear-gradient(top, #ccc, #ddd); 
		border-color:#a6a6a6;
		border-top-color:#939393;
		border-bottom-color:#bcbcbc;
	}