/*
    Vernel10
    by Raul Illana @ Art Digital
*/

/* css reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td /* ,sub, sup */
{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
body { line-height:1; color:black; background:white; }
ol, ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; } /* tables still need 'cellspacing="0"' in the markup */
caption, th, td { text-align:left; font-weight:normal; }
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }

/* css base */
body { font-size:62.5%; font-family:'Trebuchet MS', Sans-Serif; color:white; background-image:url(../img/backs/back_blau.jpg); }

a { color:white; text-decoration:none; }
p { text-align:left; line-height:1.1em; }
strong { font-weight:bold; }

/* css generico */
div#home, div#productos, div#consejos, div#historia, div#multimedia, div#beneficios, div#pieles, div#clasico, div#aromaterapia, div#bolsasagua, div#contacto, div#historia_tv, div#concentrados, div#crystals, div#crystals_interior, div#perfuma
{ position:relative; width:1000px; height:600px; margin:5px auto 0; font-size:1.6em; }

#logo { position:absolute; top:5px; left:140px; }
#logo a { display:block; width:150px; height:150px; text-indent:-9999em; }

#foot { position:absolute; bottom:1px; left:170px; overflow:hidden; clear:both; font-size:0.7em; color:#666; }
#foot span { float:left; }
#foot a { color:#666; }

#foot ul { float:left; margin-left:50px; }
#foot ul li { float:left; padding:0px 15px; background:url(../img/barra.jpg) right -2px no-repeat; }
#foot ul li:first-child { padding-left:0px; }
#foot ul li:last-child { padding-right:0px; background:none; }

#map { position:relative; }
#map a { position:absolute; font-style:italic; }
#map a span strong { display:block; font-weight:normal; font-size:1.3em; }

#nav { position:absolute; top:0px; right:50px; overflow:hidden; clear:both; }
#nav li { float:left; }
#nav li a { display:block; width:140px; height:85px; text-indent:-9999em; }

#nav a#nav_productos { background:url(../img/toolbar/mt-1-trans.png) no-repeat; margin-top:-63px; width:145px; }
#nav a#nav_consejos { background:url(../img/toolbar/mt-2-trans.png) no-repeat; margin-top:-63px; }
#nav a#nav_multimedia { background:url(../img/toolbar/mt-3-trans.png) no-repeat; margin-top:-63px; }
#nav a#nav_historia { background:url(../img/toolbar/mt-4-trans.png) no-repeat; margin-top:-63px; }

#nav #nav_productos.selected, #nav #nav_consejos.selected, #nav #nav_multimedia.selected, #nav #nav_historia.selected
{ margin-top:-5px; }

/* css home */
div#home { position:relative; background-image: url(../img/backs/Back_home_fla.jpg); }

#home a#cleanright { position:absolute; top:525px; left:8px; text-indent:-9999em; width:134px; height:48px; background:url(../img/home/cleanright.gif) no-repeat; z-index:9; }

/*
#home #map a { text-indent:-9999em; }

#home a#productos { top:35px; left:800px; height:120px; width:140px; }
#home a#diviertete { top:165px; left:805px; height:120px; width:135px; }
#home a#consejos { top:300px; left:805px; height:120px; width:135px; }
#home a#historia { top:435px; left:805px; height:115px; width:135px; }

#home #logo { display:none; position:absolute; top:0px; left:125px; }
*/

/* css productos */
div#productos { background:url(../img/backs/Back_Productes.jpg) no-repeat; }

#productos #map a { text-indent:-9999em; }

#productos a#clasico { top:135px; left:320px; height:230px; width:160px; }
#productos a#aromaterapia { top:130px; left:495px; height:240px; width:190px; }
#productos a#crystals { top:95px; left:715px; height:275px; width:155px; }
#productos a#bolsitasagua { top:405px; left:625px; height:140px; width:255px; }
#productos a#concentrados { top:390px; left:400px; height:169px; width:171px; background:url(../img/productos/Concentrados_btn.gif) no-repeat; }

	/* css clasico */
	div#clasico { background:url(../img/backs/Back_Productes_clasico.jpg) no-repeat; }
	
	#clasico #map p, #clasico #map a { position:absolute; color:#06468b; }
	#clasico #map p { font-size:.8em;  }
	#clasico #map a { text-indent:-9999em; }
	
	#clasico p#cieloazul { top:255px; left:165px; width:200px; }
	#clasico p#delicado { top:260px; left:680px; width:230px; }
	#clasico p#delicado { top:260px; left:680px; width:230px; }
	
	#clasico a#pieles { top:410px; left:680px; height:50px; width:170px; }
	#clasico a#concentrados { top:390px; left:60px; height:85px; width:220px; }
	
	/* css aromaterapia */
	div#aromaterapia { background:url(../img/backs/Back_Productes_aromaterapia.jpg) no-repeat; }
	
	#aromaterapia #map p, #aromaterapia #map a { position:absolute; color:#06468b; }
	#aromaterapia #map p { font-size:.8em; width:125px; }
	
	#aromaterapia p#frescor { top:270px; left:215px; }
	#aromaterapia p#latoja { top:270px; left:512px; }
	#aromaterapia p#sensual { top:270px; left:801px; width:135px; }
	
	#aromaterapia a#concentrados { top:375px; left:805px; height:125px; width:120px; text-indent:-9999em; }
	
	/* css bolsitas perfumadas y agua de plancha */
	div#bolsasagua { background:url(../img/backs/Back_Productes_bolsasagua.jpg) no-repeat; }
	
	#bolsasagua #map p, #bolsasagua #map a, #bolsasagua h3 { position:absolute; color:#06468b; }
	#bolsasagua p {	font-size:.8em; }
	#bolsasagua h3 { font-size:1.5em; font-style:italic; font-weight:normal; }
	
	#bolsasagua h3#agua { top:200px; left:250px; }
	#bolsasagua h3#bolsas { top:165px; left:650px; }
	
	#bolsasagua p#aguaplancha { top:240px; left:245px; width:196px; }
	#bolsasagua p#bolsitas { top:350px; left:650px; width:215px; }
	
	/* css crystals */
	div#crystals { background:url(../img/backs/Back_Productes_Crystals.jpg) no-repeat; }
	
	#crystals #map a, #crystals #map p { position:absolute; display:block; font-size:.7em; line-height:1.2em; }
	
	#crystals p#floral { top:120px; left:350px; }
	#crystals p#azul { top:120px; left:510px; }
	#crystals p#oriente { top:120px; left:630px; }
	
	#crystals p#intro { top:215px; left:125px; width:225px; }
	#crystals p#intro strong { font-size:1.1em; }
	
	#crystals p#recomendaciones { top:235px; right:100px; }
	
	#crystals a#como_crystals { top:300px; right:100px; width:85px; color:blue; }
	#crystals a#perfuma_hogar { top:345px; right:95px; color:blue; font-size:.65em; }
	#crystals a#spotv { top:385px; right:145px; color:blue; font-size:.65em; }
	
	/* css crystals_interior */
	div#crystals_interior { background:url(../img/backs/Back_Productes_Crystals_como_utilizar.jpg) no-repeat; }
	
	#crystals_interior #map a { position:absolute; }
	
	#crystals_interior #intro { position:absolute; top:125px; left:425px; width:325px; font-size:.7em; }
	#crystals_interior #intro h3 { font-size:1.4em; }
	#crystals_interior #intro h3 span { margin-left:50px; }
	#crystals_interior #intro p { margin-left:50px; }
	
	#crystals_interior p#recomendaciones { position:absolute;  top:235px; right:100px; }

	#crystals_interior a#como_crystals { top:308px; right:100px; width:85px; color:blue; font-size:.7em; }
	#crystals_interior a#perfuma_hogar { top:353px; right:95px; color:blue; font-size:.65em; }
	#crystals_interior a#spotv { top:393px; right:145px; color:blue; font-size:.65em; }
		
	/* css toolbar productos */
	#tbp a { position:absolute; text-indent:-9999em; }
	#tbp_clasico { top:490px; left:120px; background:url(../img/toolbar/tbp-1-trans.png) no-repeat; width:142px; height:93px; }
	#tbp_aromaterapia { top:490px; left:265px; background:url(../img/toolbar/tbp-2-trans.png) no-repeat; width:209px; height:98px; }
	#tbp_crystals { top:490px; left:475px; background:url(../img/toolbar/tbp-3-trans.png) no-repeat; width:150px; height:99px; }
	#tbp_bolsasagua { top:495px; left:625px; background:url(../img/toolbar/tbp-4-trans.png) no-repeat; width:308px; height:103px; }
    
/* css multimedia */
div#multimedia { background:url(../img/backs/Back_Multimedia.jpg) no-repeat; }

#multimedia #map a, #multimedia #map p { position:absolute; color:#06468b; }
#multimedia #map p { font-size:.8em; }

#multimedia p#juegatxt { top:230px; left:425px; line-height:1.2em; }
#multimedia a#juegabtn { top:335px; left:560px; background:url(../img/multimedia/btn_play.png) right no-repeat; height:30px; padding:13px 35px 0px 0px; }

#multimedia a img { width:100px; height:75px; }

#multimedia a#desktop1 { top:230px; left:685px; }
#multimedia a#desktop2 { top:230px; left:800px; }
#multimedia a#desktop3 { top:315px; left:685px; }
#multimedia a#desktop4 { top:315px; left:800px; }

#puzzle { text-align:center; }

/* css consejos */
div#consejos { background:url(../img/backs/Back_Consejos_new.jpg) no-repeat; }

#consejos #map a { text-indent:-9999em; }

#consejos a#beneficios { top:105px; left:470px; height:150px; width:145px; }
#consejos a#pieles { top:200px; left:295px; height:125px; width:145px; }
#consejos a#perfuma { top:350px; left:190px; height:125px; width:175px; }

	/* css beneficios */
	div#beneficios { background:url(../img/backs/Back_Consejos_2.jpg) no-repeat; }
	
	#beneficios #map a, #beneficios #map p { position:absolute; color:#06468b; font-size:.75em; }
	#beneficios #map p { width:125px; }
	
	#beneficios a#btn_beneficios { top:185px; left:165px; padding:20px 10px 10px 75px; }
	#beneficios a#btn_pieles { top:240px; left:165px; padding:15px 40px 20px 75px; }
	#beneficios a#btn_perfuma { top:300px; left:165px; padding:15px 42px 15px 75px; }
	
	#beneficios p#ptl { top:200px; left:452px; }
	#beneficios p#ptr { top:200px; left:725px; }
	#beneficios p#pbl { top:335px; left:452px; }
	#beneficios p#pbr { top:335px; left:725px; }
	
	/* css pieles */
	div#pieles { background:url(../img/backs/Back_Consejos_3.jpg) no-repeat; }
	
	#pieles #map a, #pieles #map p { position:absolute; color:#06468b; font-size:.75em; }
	#pieles #map p { width:150px; }
	
	#pieles a#btn_beneficios { top:185px; left:165px; padding:20px 10px 10px 75px; }
	#pieles a#btn_pieles { top:240px; left:165px; padding:15px 40px 20px 75px; }
	#pieles a#btn_perfuma { top:300px; left:165px; padding:15px 42px 15px 75px; }
	
	#pieles p#pc { top:137px; left:343px; width:570px; }
	
	#pieles p#ptl { top:190px; left:415px; }
	#pieles p#ptr { top:200px; left:670px; width:225px; }
	#pieles p#pbl { top:265px; left:415px; }
	#pieles p#pbr { top:345px; left:670px; width:225px; }
	#pieles p#pmr { top:260px; left:670px; width:225px; }
	
	#pieles p#pbul { top:425px; left:452px; width:161px; text-align:left; }
	#pieles p#pbur { top:425px; left:635px;	width:266px; text-align:justify; }
	
	/* css perfuma */
	div#perfuma { background:url(../img/backs/Back_Consejos_Perfuma.jpg) no-repeat; }
	
	#perfuma #map a { color:#06468b; font-size:.75em; }
	
	#perfuma a#btn_beneficios { top:185px; left:165px; padding:20px 10px 10px 75px; }
	#perfuma a#btn_pieles { top:240px; left:165px; padding:15px 40px 20px 75px; }
	#perfuma a#btn_perfuma { top:299px; left:169px; padding:15px 42px 15px 75px; }
	
	#perfuma #overview { position:absolute; top:225px; left:365px; width:290px; height:175px; color:#06468b; font-size:1em; }
	
/* css historia tvs */
/*
div#historia_tv { background:url(../img/backs/Back_Historia_tv.jpg) no-repeat; position:relative; }

#historia_tv #mdtb { position:absolute; bottom:24px; left:8px; }
#historia_tv #mdtb a { position:absolute; display:block; color:#476D9D; font-size:.7em; padding-top:90px; padding-left:3px; }

#historia_tv #mdtb #mdtb1 { width:94px; height:36px; bottom:0px; left:0px; }
#historia_tv #mdtb #mdtb2 { width:116px; height:36px; bottom:0px; left:103px; }
#historia_tv #mdtb #mdtb3 { width:109px; height:36px; bottom:0px; left:227px; }
#historia_tv #mdtb #mdtb4 { width:107px; height:36px; bottom:0px; left:344px; }
#historia_tv #mdtb #mdtb5 { width:115px; height:36px; bottom:0px; left:459px; }
#historia_tv #mdtb #mdtb6 { width:113px; height:36px; bottom:0px; left:584px; }
#historia_tv #mdtb #mdtb7 { width:121px; height:36px; bottom:0px; left:707px; }
#historia_tv #mdtb #mdtb8 { width:137px; height:36px; bottom:0px; left:835px; }

#historia_tv #player { position:absolute; top:130px; left:320px; }
*/

/* css historia */
div#historia { background:url(../img/backs/Back_Historia.jpg) no-repeat; position:relative; }

#historia #mdtb { position:absolute; bottom:36px; left:15px; }
#historia #mdtb a { position:absolute; display:block; color:#476D9D; font-size:.7em; padding-top:105px; padding-left:3px; }

#historia #mdtb #mdtb1 { width:100px; height:36px; bottom:0px; left:0px; }
#historia #mdtb #mdtb2 { width:100px; height:36px; bottom:0px; left:122px; }
#historia #mdtb #mdtb3 { width:100px; height:36px; bottom:0px; left:247px; }
#historia #mdtb #mdtb4 { width:100px; height:36px; bottom:0px; left:372px; }
#historia #mdtb #mdtb5 { width:115px; height:36px; bottom:0px; left:487px; }
#historia #mdtb #mdtb6 { width:100px; height:36px; bottom:0px; left:612px; }
#historia #mdtb #mdtb7 { width:110px; height:36px; bottom:0px; left:734px; }
#historia #mdtb #mdtb8 { width:105px; height:36px; bottom:0px; left:862px; }

#historia #player { position:absolute; top:171px; left:320px; }

/* css contacto */
div#contacto { background:url(../img/backs/Back_Formulario.jpg) no-repeat; position:relative; }

#contacto #contact_data { background:#fff; color:#666; padding:25px; width:500px; position:absolute; top:250px; left:225px; }

/* css concentrados */
div#concentrados { background:url(../img/backs/Back_Concentrados.jpg) no-repeat; position:relative; }

#concentrados #concentrados_data { color:#006; padding:25px; width:353px; position:absolute; top:233px; left:563px; height:208px; }





/* css plugins */

/**
 * SqueezeBox - Expandable Lightbox
 *
 * Allows to open various content as modal,
 * centered and animated box.
 *
 * @version        1.1 rc4
 *
 * @license        MIT-style license
 * @author        Harald Kirschner <mail [at] digitarald.de>
 * @copyright    Author
 */

#sbox-overlay { position:absolute; background-color:#000; left:0px; top:0px; zoom:1; }
#sbox-window { position:absolute; background-color:#fff; text-align:left; overflow:visible; padding:10px; -moz-border-radius:3px; -webkit-border-radius:3px; }

#sbox-btn-close { position:absolute; width:30px; height:30px; right:-15px; top:-15px; background:url(../img/modalbox/closebox.png) no-repeat center; border:none; }
.sbox-window-ie6 #sbox-btn-close { background-image:url(../img/modalbox/closebox.gif); }

.sbox-loading #sbox-content { background-image:url(../img/modalbox/spinner.gif); background-repeat:no-repeat; background-position:center; }
#sbox-content { clear:both; overflow:auto; background-color:#fff; height:100%; width:100%; }
.sbox-content-image#sbox-content { overflow:visible; }

#sbox-image { display:block; }
.sbox-content-image img { display:block; width:100%; height:100%; }

.sbox-content-iframe#sbox-content { overflow:visible; }

/* Hides scrollbars */
.body-overlayed { overflow:hidden; }
/* Hides flash (Firefox problem) and selects (IE) */
.body-overlayed embed, .body-overlayed object, .body-overlayed select { visibility:hidden; }
#sbox-window embed, #sbox-window object, #sbox-window select { visibility:visible; }

/* Shadows */
.sbox-bg { position:absolute; width:33px; height:40px; }

.sbox-bg-n { left:0; top:-40px; width:100%; background:url(../img/modalbox/bg_n.png) repeat-x; }
.sbox-bg-ne { right:-33px; top:-40px; background:url(../img/modalbox/bg_ne.png) no-repeat; }
.sbox-bg-e { right:-33px; top:0; height:100%; background:url(../img/modalbox/bg_e.png) repeat-y; }
.sbox-bg-se { right:-33px; bottom:-40px; background:url(../img/modalbox/bg_se.png) no-repeat; }
.sbox-bg-s { left:0; bottom:-40px; width:100%; background:url(../img/modalbox/bg_s.png) repeat-x; }
.sbox-bg-sw { left:-33px; bottom:-40px; background:url(../img/modalbox/bg_sw.png) no-repeat; }
.sbox-bg-w { left:-33px; top:0; height:100%; background:url(../img/modalbox/bg_w.png) repeat-y; }
.sbox-bg-nw { left:-33px; top:-40px; background:url(../img/modalbox/bg_nw.png) no-repeat; }

/* css plugin mods */
#sbox-dlfooter { display:block; font-size:1.4em; color:#666; margin:10px 0px 0px; }
#sbox-dlfooter a { color:blue; margin:0px 15px; }


/*
	BROWSER HACKS
*/
.ie #foot { font-size:11px; bottom:2px; }
.ie div#home, .ie div#productos, .ie div#consejos, .ie div#historia, .ie div#multimedia, .ie div#beneficios, .ie div#pieles, .ie div#clasico, .ie div#aromaterapia, .ie div#bolsasagua, .ie div#contacto, .ie div#historia_tv, .ie div#concentrados, .ie div#crystals, .ie div#crystals_interior, .ie div#perfuma { font-size:15px; }

.ie #beneficios #map a, #beneficios #map p { font-size:12px; }
.ie #pieles #map a, #pieles #map p { font-size:12px; }

.webkit body { font-size:58%; }
.webkit #foot { padding-bottom:1px; font-size:11px; }
.webkit #foot ul li { float:left; padding:0px 15px; background:url(../img/barra.jpg) right 2px no-repeat; }
.webkit #clasico p#delicado { top:256px; left:675px; width:240px; }

.ie #clasico p#delicado { font-size:11px; }
.mac.ff3 #clasico p#delicado { top:252px; left:670px; width:250px; }
.win.ff3 #clasico p#delicado { top:251px; left:670px; width:250px; }
.win.ff3 #clasico p#cieloazul { top:252px; left:162px; width:210px; }