﻿/* ================================= */
/* General */
/* ================================= */

body {
	margin: 0;
	text-align: center;
	font: 12px Verdana;
}

a {
	color: #5a5655;
	text-decoration: none;
	outline: 0;
}

a:hover {
	color: #7a4076;
}

.italic {
	font-style: italic;
}

.clear {
	clear: both;
}


/* ================================= */
/* Container */
/* ================================= */

#container {
	width: 800px;
	margin: 7px auto 40px auto;
	text-align: left;
}


/* ================================= */
/* Header */
/* ================================= */

#header {
	height: 70px;
}

/* Isologo */

#isologo {
	float: left;
	display: none;
}

#isologo img:hover {
	cursor: pointer;
}

/* Main menu */

#mainMenu  {
	float: right;
	margin: 32px 10px 0 0;
}

#mainMenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#mainMenu ul li {
	display: inline;
}

#mainMenu ul li a {
	font-size: 1.1em;
	padding: 0 0 0 30px
}

/* Flowers */

#flowersTop {
	position: absolute;
	height: 100px;
	width: 930px;
	top: 95px;
	margin: 0 0 0 -70px;
	background: url('../images/flowersTop.gif') no-repeat top center;
}

#flowersBottom {
	position: absolute;
	height: 100px;
	width: 930px;
	top: 485px;
	margin: 0 0 0 -70px;
	background: url('../images/flowersBottom.gif') no-repeat top center;
}


/* ================================= */
/* Section menu */
/* ================================= */

#sectionMenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#sectionMenu ul li {
	display: inline;
}

#sectionMenu ul li a {
	text-align: center;
	font-size: 0.9em;
	letter-spacing: -1px;
	display: block;
	float: left;
	width: 72px;
	height: 25px;
	padding: 5px 4px;
}

#sectionMenu ul li a:hover,
#sectionMenu ul li.active a {
	background: url('../images/sectionMenu_bg.png') no-repeat top center;
}

/* Products colors */

#sectionMenu ul li.rosa a:hover,
#sectionMenu ul li.rosa.active a {
	background-color: #e4cfbe;
}

#sectionMenu ul li.cremita a:hover,
#sectionMenu ul li.cremita.active a {
	background-color: #f2ebc4;
}

#sectionMenu ul li.verde a:hover,
#sectionMenu ul li.verde.active a {
	background-color: #d5dfb0;
}

#sectionMenu ul li.lila a:hover,
#sectionMenu ul li.lila.active a {
	background-color: #e8dada;
}

#sectionMenu ul li.celeste a:hover,
#sectionMenu ul li.celeste.active a {
	background-color: #e6eaed;
}

#sectionMenu ul li.verde_claro a:hover,
#sectionMenu ul li.verde_claro.active a {
	background-color: #ebefd8;
}

/* ================================= */
/* Content */
/* ================================= */

#content {
	min-height: 400px;
}

.content {
	min-height: 450px;
	background: url('../images/content_bg.png') no-repeat top right;
}

.contentText {
	font-size: 0.95em;
	margin: 60px 0 0 0;
	padding: 50px 20px 0 20px;
	height: 375px;
}

.contentText.home {
	background: url('../images/home_bg.jpg') no-repeat top center;
	margin: 0;
	height: 435px;
}

.contentText.about {
	background: #ccc url('../images/about_bg.jpg') no-repeat top center;
}

.contentText .textColumn {
	width: 230px;
	margin: 0 0 0 20px;
	float: left;
}

.content .magenta {
	color: #dd137b;
}

/* Backgrounds */

div.colonias {
	background: url('../images/products_colonias_bg.jpg') no-repeat top center;
}

div.perfumes_lp {
	background: url('../images/products_perfumes_lp_bg.jpg') no-repeat top center;
}

div.perfumes_ch {
	background: url('../images/products_perfumes_ch_bg.jpg') no-repeat top center;
}

div.perfumes_ra {
	background: url('../images/products_perfumes_ra_bg.jpg') no-repeat top center;
}

div.jabones {
	background: url('../images/products_jabones_bg.jpg') no-repeat top center;
}

div.jabones_liquidos {
	background: url('../images/products_jabones_liquidos_bg.jpg') no-repeat top center;
}

div.bano_espuma {
	background: url('../images/products_bano_espuma_bg.jpg') no-repeat top center;
}

div.esponjas {
	background: url('../images/products_esponjas_bg.jpg') no-repeat top center;
}

div.aceites {
	background: url('../images/products_aceites_bg.jpg') no-repeat top center;
}

div.cremas {
	background: url('../images/products_cremas_bg.jpg') no-repeat top center;
}

/* Main scroller */

#contentScrollerCanvas {
	position: relative;
	height: 450px;
	overflow: hidden;
	z-index: -1;
}

#contentScrollerStrip {
	position: absolute;
	width: 20000em;
	height: 450px;
}

#contentScrollerStrip div {
	width: 800px;
	float: left;
}

/* Product info */

#contentScrollerCanvas div.productInfo {
	font-size: 0.95em;
	width: 250px;
	padding: 120px 0 0 20px;
}

.productInfo h1 {
	font-size: 1em;
	margin: 10px 0 0 0;
	padding: 0;
}

.productInfo h2 {
	font-size: 1em;
	margin: 10px 0 0 0;
	padding: 0;
}

.productInfo p {
	margin: 0;
}

.productInfo.narrow p {
	width: 170px;
}

#contentScrollerCanvas div.productFragrances {
	position: relative;
	top: 185px;
	left: 415px;
	width: 95px;
	text-align: center;
}

#contentScrollerCanvas div.productFragrances p {
	font-size: 0.9em;
	margin: 5px 2px;
	letter-spacing: -0.1em;
}

#contentScrollerCanvas div.cremas div.productFragrances {
	left: 320px;
}

#contentScrollerCanvas div.productSign {
	position: relative;
	top: 95px;
	left: 414px;
	width: 87px;
	font-size: 0.8em;
	background-color: #fff;
	border: 1px solid #a0a199;
	padding: 5px;
	text-align: left;
}

#contentScrollerCanvas div.productSign.wide {
	left: 385px;
	width: 110px;
}

#contentScrollerCanvas div.productSign.center {
	text-align: center;
}

#contentScrollerCanvas div.productSign ol,
#contentScrollerCanvas div.productSign ul {
	margin: 0;
	padding: 0 0 0 25px;
}

#contentScrollerCanvas div.productSign p {
	margin: 0;
}


/* ================================= */
/* Footer */
/* ================================= */

#footer {
	margin: 10px 0 40px 0;
	padding: 0 5px;
	border-top: 1px solid;
	font-size: 0.85em;
}

#footer #info {
	float: left;
}

#footer #music {
	float: right;
}


/* ================================= */
/* jPlayer */
/* ================================= */

.jp-controls {
	float: left;
	list-style: none;
	margin: 10px 10px 0 0;
	padding: 0;
}

.jp-controls li {
	display: inline;
	margin: 0 0 0 5px;
}

.jp-controls li a {
	display: block;
	float: right;
	width: 20px;
	text-align: center;
}

.jp-volume-bar {
	float: left;
	overflow: hidden;
	width: 46px;
	height: 4px;
	cursor: pointer;
	border: 1px solid;
	margin: 14px 0 0 0;
	
}

.jp-volume-bar-value {
    background: #5a5655;
    width: 0px;
    height: 5px;
}
