@import url('resets.css');
@import url('fonts.css');

@font-face {
    font-family: 'LucidaSansUnicodeRegular';
    src: url('/fonts/lorealparis/lucida-sans-unicode/lucida-sans-unicode-webfont.eot');
    src: url('/fonts/lorealparis/lucida-sans-unicode/lucida-sans-unicode-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lorealparis/lucida-sans-unicode/lucida-sans-unicode-webfont.woff') format('woff'),
         url('/fonts/lorealparis/lucida-sans-unicode/lucida-sans-unicode-webfont.ttf') format('truetype'),
         url('/fonts/lorealparis/lucida-sans-unicode/lucida-sans-unicode-webfont.svg#LucidaSansUnicodeRegular') format('svg');
    font-style: normal;
	font-weight:900;

}

body{
	background: #000000;
	font-family:Helvetica, Arial, sans-serif;
	color:#ffffff;
	font-size:11px;
	line-height:normal;
}

a {text-decoration: none; outline: 0;}


div#container {width:960px; margin:0 auto; position:relative; overflow:hidden; font-family: 'Lucida Sans Unicode', 'LucidaSansUnicodeRegular';}
div#container #necesidades-coloracion {float:left; width:960px; z-index:999; position:relative;}
.clear {width:100%; clear:both;}
div#header-generico {width:960px; height:85px; position:relative; margin:0 auto 30px auto;}
  #header-generico h1{width:192px; height:61px; float:left; background:url(/images/lorealparis/identity.png) no-repeat; margin:29px 0 0 5px;}
  #header-generico h1 a{width:184px; height: 56px; float:left; display:block; text-indent:-9999px;}
  #header-generico div.top-bar{/*width:655px;*/ float:right; margin:0;}
  #header-generico div.top-bar div.busqueda-contenido{width:131px; float:left; padding:0 10px 7px 0;}
  #header-generico div.top-bar div.busqueda-contenido form{margin:14px 0 0 0;}
  #header-generico div.top-bar div.busqueda-contenido input.text{width:100px; height:13px; padding:3px 4px; margin:0 3px 0 0; float:left; font-size:11px; font-weight:bold; border: medium none; color:#666666; background:url(/images/lorealparis/bg/bg-input-header.jpg) no-repeat;}
  #header-generico div.top-bar div.busqueda-contenido input.submit{width:18px; height:20px; float:left; border: medium none; background:url(/images/lorealparis/arrows/lupa-header.jpg) no-repeat;}
  #header-generico div.top-bar div.busqueda-contenido a {color:#ababab; text-decoration:underline;}
  #header-generico div.top-bar div.donde-comprar{width:180px; float:left; padding:0 10px 0 10px; border-right:1px solid #2C2C2C; border-left:1px solid #2C2C2C;}
  #header-generico div.top-bar div.donde-comprar label {width:45px; float:left; margin:14px 0 0 0; color:#ababab; line-height:11px; font-size:10px;}
  #header-generico div.top-bar div.donde-comprar div.pull-down {width:128px; padding:2px 1px 1px 6px; float:left; position:relative; background:url(/images/lorealparis/bg/bg-pulldown-repeat-x.jpg) repeat-x; margin:14px 0 0 0;}
  #header-generico div.top-bar div.donde-comprar div.pull-down p{float:left; color:#000000; margin:2px 0 0 0; cursor:pointer;}
  #header-generico div.top-bar div.donde-comprar div.pull-down span{float:right; display:block; width:20px; height:18px; cursor:pointer; background:url(/images/lorealparis/arrows/pulldown-close.jpg) no-repeat;}
  #header-generico div.top-bar div.social-media span{float:left; margin-top: 2px;}
  #header-generico div.top-bar div.social-media {width:auto; float:left; padding:0 7px; border-right:1px solid #2C2C2C;}
  #header-generico div.top-bar div.none{border:none;}
  #header-generico div.top-bar div.social-media a.tw {width:20px; height:17px; float:right; font-weight:bold; color:#ababab; background:url(/images/lorealparis/social/tw.gif) top no-repeat; margin:18px 0 2px 0;}
  #header-generico div.top-bar div.social-media a.tw:hover {background-position:bottom;}
  /*#header-generico div.top-bar div.social-media a.tw:hover {background-position:top left;}*/
  #header-generico div.top-bar div.social-media a.yu {width:47px; height:19px; float:right; padding:0 3px 0 0; margin: 18px 0 0 3px;  text-indent:-9999px; background:url(/images/lorealparis/social/youtube.gif) top no-repeat;}
  #header-generico div.top-bar div.social-media a.yu:hover {background-position:bottom;}
  /*#header-generico div.top-bar div.social-media a.yu:hover {background-position:bottom left;}*/
  #header-generico div.top-bar div.social-media a.fa {width:18px; height:18px; float:right;  margin:18px 0 2px 3px; text-indent:-9999px; background:url(/images/lorealparis/social/facebook.gif) top no-repeat;}
  #header-generico div.top-bar div.social-media a.fa:hover {background-position:bottom;}
  /*#header-generico div.top-bar div.social-media a.fa:hover {background-position:bottom left;}*/


/*----------- MENU -----------*/
div#header-generico div#menu{float:left; width:770px; margin:30px 0 0 0;}
  #menu ul{float:right; width:auto;}
  #menu ul li{float:left; width:auto; padding:5px 12px; background:url(/images/lorealparis/bg/bg-menu.jpg) repeat-x; margin:0 2px;}
  #menu ul li a{float:left; width:auto; display:block; color:#ababab; font-size:11px; height:19px;}
  #menu ul li a:hover{color:#fff;}
  #menu ul li a#active{color:#fff;}
  
div#options-toogle {width:135px; float:left; background:#ffffff; position:absolute; top:22px; right:0px; z-index:9999999; display:none;}
  #options-toogle div {width:135px; float:left;}
  #options-toogle div a{width:123px;color:#000000;text-transform:uppercase;display:block;float:left;border-bottom:1px solid #aaaaaa; padding:5px; margin:0 0 0 1px;}
  #options-toogle div a:hover{background:#6c6c6c;border-bottom:1px solid #cccccc;color:#ffffff;}
  
/*----------- MENU DESPLEGABLE -----------*/
div#nav {width:960px; height:24px; float:left; margin:5px 0 20px 0; z-index:99; font-family: 'Lucida Sans Unicode', 'LucidaSansUnicodeRegular';}
	#nav ul {width:960px;float:left;}
	#nav ul li.b1,
	#nav ul li.b2,
	#nav ul li.b3,
	#nav ul li.b4,
	#nav ul li.b5{float:left; display:inline; padding: 0 40px 0 0;}
	
	#nav ul li.b6{float:right; padding:0 0 0 40px;}
	#nav ul li.b7{float:right;}
	#nav ul li a{color:#999999; height:35px; font-size:12px; font-family: 'Lucida Sans Unicode', 'LucidaSansUnicodeRegular'; display:block; text-align:center;}
	  
	#nav ul li a:hover {color:#ffffff;}
	/*#nav ul li.b1{width:128px; margin:0 8px 0 0;}
	#nav ul li.b2{width:140px; margin:0 8px 0 0;}
	#nav ul li.b3{width:118px; margin:0 8px 0 0;}
	#nav ul li.b4{width:118px; margin:0 8px 0 0;}
	#nav ul li.b5{width:118px; margin:0 8px 0 0;}
	#nav ul li.b6{width:118px;}
	*/
	#nav{position:relative; font-family: 'Lucida Sans Unicode', 'LucidaSansUnicodeRegular';}
	#nav a.active{color:#FFFFFF; background:url(/images/lorealparis/arrows/arrow.jpg) bottom center no-repeat;}
	#nav a.active-color{color:#FFFFFF;}
	/*
	#nav div#menu-cuidado-piel{position:absolute; width:100%; background:#FFFFFF; top:30px; z-index:9999; color:#000000;}
	#nav div#menu-cuidado-cabello{position:absolute; width:100%; background:#FFFFFF; top:30px; z-index:9999; color:#000000;}
	#nav div#menu-cuidado-coloracion{position:absolute; width:100%; background:#FFFFFF; top:30px; z-index:9999; color:#000000;}
	div#menu-cuidado-maquillaje{position:absolute; width:100%; background:#FFFFFF; top:150px; z-index:9999; color:#000000;}
	*/
	
	/* DESPLEGABLE */
	div#menu-desplegable{position:fixed; width:100%; background:#FFFFFF; top:164px; z-index:9999; color:#000000;}
		#menu-desplegable div.desplegable{position:absolute; width:100%; background:#FFFFFF; top:0; left:0; z-index:9999; color:#000000;}
		#menu-desplegable div.desplegable div#submenu-large{width:100%; float:left; background:#353535;}
			#submenu-large div.submenu{width:990px; margin:0 auto; background:#353535; z-index:9999; font-family: 'Lucida Sans Unicode', 'LucidaSansUnicodeRegular';}
		#menu-desplegable ul.tabs{background:#353535; width:auto;}
		#menu-desplegable ul.tabs li{float:left; width:auto; padding:15px; background:#353535; border-right:1px solid #414141;}
		#menu-desplegable ul.tabs li.active{background:#FFFFFF; border-right:1px solid #FFFFFF;}
		#menu-desplegable ul.tabs li.active a{color:#000000;}
		#menu-desplegable ul.tabs li a{float:left; display:block; height:auto; text-transform:uppercase; color:#999999;}
		#menu-desplegable p.todos-productos{float:right; width:auto; background:#999999;  text-transform: uppercase; color:#FFFFFF; font-family: 'Lucida Sans Unicode', 'LucidaSansUnicodeRegular';}
		#menu-desplegable p.todos-productos a{color:#FFFFFF; display:block; padding:15px 15px 15px 15px; border-right:1px solid #999999;}
		#menu-desplegable p.todos-productos a:hover{color:#000000; background:#FFFFFF; border-right:1px solid #FFFFFF;}
		#menu-desplegable div.tab_container{padding:0; min-height:350px; margin:0 auto; width:990px;}
		#menu-desplegable div.tab_container div#tab{position:relative; top:30px; margin:0 auto; width:990px;}
		#menu-desplegable div.caja{float:left; width:480px; padding:0 0 0 10px; min-height:203px;}
		#menu-desplegable div.consejos{width:970px; min-height:69px; border-top:1px solid #E6E6E6;}
		#menu-desplegable div.caja ul li{padding:0;}
		#menu-desplegable div.caja ul li a{float:left; width:auto; height:auto; display:block; text-decoration:none; text-align:left; font-size:10px; color:#666666;}
		#menu-desplegable div.caja h3{float:left; width:100%; font-size:18px; border-bottom:2px solid #070707; margin-bottom:10px; margin-top:10px; padding-bottom:5px; font-weight:bold; font-family: 'Lucida Sans Unicode', 'LucidaSansUnicodeRegular';}
		#menu-desplegable div.consejos h3{padding:10px 0 5px 0; margin:0;  border-bottom:none;}
		#menu-desplegable div.caja h3 span{float:right; font-size:12px; color:#353535; margin:5px 0 0 0;}
		#menu-desplegable div.caja h3 span a{text-decoration:none; color:#000000; background:url(../../images/lorealparis/arrows/arrow.png) no-repeat; padding:0 0 0 10px;}
		#menu-desplegable div.caja h3 span a:hover{text-decoration:underline;}
		#menu-desplegable div.caja ul li a{background:url(/images/lorealparis/arrows/arrow-lista.jpg) top left no-repeat; padding-left:8px;}
		#menu-desplegable div.caja ul li a:hover{text-decoration:underline;}
		#menu-desplegable div.caja ul.necesidad{float:left; width:215px; padding:3px 5px;}
		#menu-desplegable div.caja ul.necesidad li.title{font-size:11px; color:#000000;}
		#menu-desplegable div.caja ul.necesidad li{color:#666666; font-size:10px; width:100%;}
		#menu-desplegable div.caja ul.necesidad li a{float:left; display:block; color:#000000; font-size:11px; text-transform:uppercase;}
		#menu-desplegable div.caja ul.consejos{float:left; width:445px; padding:5px;text-transform: uppercase;}
		#menu-desplegable div.caja ul.consejos li{float:left; width:100%;}
		#menu-desplegable div.caja ul.consejos li a{float:left; display:block; color:#000000; font-size:11px;}
		#menu-desplegable div.caja ul.marca{float:left; width:200px; padding:3px 5px;}
		#menu-desplegable div.caja ul.marca li{width:210px; padding:2px 10px 3px 0; font-size:10px; color:#666666;}
		#menu-desplegable div.caja ul.marca li a{float:left; display:block; color:#000000; font-size:11px;}


/*----------- FOOTER -----------*/
div#footer-generico {width:960px; float: left; font-family: 'Lucida Sans Unicode', 'LucidaSansUnicodeRegular';}
  #footer-generico ul {float:left;}
  #footer-generico ul li{float:left; margin:0 25px 0 0; display:inline;}
  #footer-generico ul li a{display:block; float:left; color:#999999;}
  #footer-generico ul li a:hover,#footer-generico ul li a.active {color:#FFFFFF;}
  #footer-generico ul li a.map {padding:7px 0 1px 20px; background:url(/images/lorealparis/arrows/mapa-sitio.jpg) left no-repeat;}
  #footer-generico ul li a.news {padding:7px 0 1px 22px; background:url(/images/lorealparis/arrows/newsletter.jpg) left no-repeat;}
  #footer-generico ul li a.contacto {padding:7px 0 1px 28px; background:url(/images/lorealparis/arrows/contacto.jpg) left no-repeat;}
  #footer-generico p{float:right; color:#8f8f8f; font-size:10px;}
  
  #footer-generico div p.tel{width:231px; height:31px; background: url(/images/dermo/titles/centros-atencion.jpg) no-repeat; float: left;} 
  
  #footer-generico div#loginpanel{position:absolute; height:198px; bottom:69px; left:25px; z-index:9999; background:url(../../images/lorealparis/arrows/news-popup.png) no-repeat bottom center;} 
  	#loginpanel #panel {float:left; width:320px; background:#FFFFFF; border-top:1px solid #6c6c6c; border-left:1px solid #6c6c6c; border-right:1px solid #6c6c6c; color:#000; padding:10px;height:165px;}
	#loginpanel form div.campo{float:left; width:100%; margin:5px 0;}
	#loginpanel form input{float:left; margin:1px 3px 0 3px;}
	#loginpanel form input.user{width:318px; height:19px; border:1px solid #d8d8d8; color:#000; margin:0;}
	#loginpanel form input.promociones{float:left; margin:0 5px 0 0;}
	#loginpanel form label{float:left; color:#000; margin:0 0 0 20px;}
	#loginpanel form label.sexo{width:70px; margin:0;}
	#loginpanel form p.acepto{float:none;}
	#loginpanel form input.enviar{float:right; border:none; background:#d8d8d8; color:#000; padding:3px; cursor:pointer;}
        #loginpanel img{float:right; margin-top: 5px;}
        #loginpanel #mensaje p {float:none; text-align: center;}
        #loginpanel #mensaje a {color: #000;}
  
div#site-map {width:960px; float:left; margin:1px 0 0 0; padding:0 0 15px 0; font-family: 'Lucida Sans Unicode', 'LucidaSansUnicodeRegular';}  
  #site-map div.item {width:192px; float:left;}  
  #site-map div.item p{width:182px; float:left; padding:5px; background:#212121; color:#ffffff;}  
  #site-map div.item ul {width:192px; min-height:420px; float:left; background:url(/images/lorealparis/bg/bg-ul-sitemap.jpg) top right no-repeat;}
  #site-map div.item ul.sin-borde{background:none;}
  #site-map div.item ul li{width:182px; float:left; padding:3px 0 3px 5px; color:#ababab; margin:0; background:url(/images/lorealparis/bg/bg-li-sitemap.jpg) no-repeat bottom;} 
  #site-map div.item ul li a{color:#999999;} 
  #site-map div.item ul li a:hover{color:#FFFFFF;}
  #site-map div.item ul li ul.submenu{background:none; width:185px; min-height:20px;}
  #site-map div.item ul li ul.submenu li{background:none; width:176px;}
  
 
 /* NECESIDADES */
#necesidades{width:960px; background: #FFFFFF; color:#000; font-family: 'Lucida Sans Unicode', 'LucidaSansUnicodeRegular'; float:left;}
#necesidades a{text-decoration:none; color:#000;}
#necesidades a:hover {text-decoration:underline;}

#necesidades span.dir{ width:930px; font-size:10px; float:left; margin:25px 0 15px 0;}
#necesidades span.dir span{margin-left: 10px;}
#necesidades .top{ float:left; width:960px; height:330px; border-bottom:1px solid #d1d1d1;}
#necesidades .top a{float:left; padding:0 10px;}
#necesidades .top a.first{padding:0 10px 0 0;}
#necesidades .top img{float:left; margin:0 0 5px;}
#necesidades .left{ width:930px; padding:0 0 0 30px;}

#fichaContent .breadcrum{float:left; width:940px;}
#fichaContent .breadcrum a{float:left; padding:0 10px;}
#fichaContent .breadcrum a.first{padding:0 10px 0 0;}
#fichaContent .breadcrum img{float:left; margin:0 0 5px;}
#fichaContent .breadcrum span{margin-left: 10px;}

#necesidades h2{width:375px; font-size:20px; text-transform:uppercase;}
#necesidades h3{width:375px; font-size:30px; font-weight:bold; text-transform:uppercase;}
#necesidades .left p{width:315px; font-size:11px; margin:10px 0;}
#necesidades .productos{ float:left; width:960px;}
#necesidades .productos p{ width:930px; float:left; border-bottom:1px solid #d1d1d1; padding:12px 0 12px 30px;}
#necesidades .productos p span#select{ font-size:12px; font-weight:bold; text-transform:uppercase;}
#necesidades .productos p span#cant{ font-size:12px; font-weight:bold; margin-left:100px;}
#necesidades select{width:300px; height:37px; position:relative; text-transform:uppercase;}
#necesidades select option{ font-size:9px; text-transform:uppercase;}
#necesidades .productos .producto{ width:311px; height:350px; float:left; border-bottom:1px solid #d1d1d1; border-right:1px solid #d1d1d1; padding:4px;}

#necesidades .producto span{float:left; color:#999999; font-size:12px; font-weight:bold; margin:15px 0 0 30px; display:inline;  width:275px; text-transform:uppercase;}
#necesidades .producto a{float:left; width:310px; height:245px; display:block; /*background:url(/images/coloracion/maish.jpg) no-repeat right;*/}
#necesidades .producto a img{/*width:310px; height:245px; */margin:0;}
#necesidades .producto a img.arrow{float:right; width:11px; height:11px; padding:2px 0 0 5px; position:absolute;}
#necesidades .producto a.desc{width:265px; height:auto; display:block; margin:0 0 0 30px;}
#necesidades form.spanselect{ position:relative; display:block; width:300px; height:37px; float:left;}
#necesidades span.spanStyle{position:absolute; width:292px; height:25px; background:url(/images/coloracion/bg/bg-select.jpg) no-repeat; color:#000000; font-size:12px; padding:11px 0 0 8px; text-transform:uppercase; border-bottom:1px solid #000000;} 
  
  
div#necesidades div#white span.dir, div#white span.dir a {color:#ffffff !important;}  
div#necesidades div#white h2 {width:930px; color:#ffffff; float: left;}  
div#necesidades div#white h3 {width:385px; clear: both; color:#ffffff; float: left;}  
div#necesidades div#white p {width:385px; clear: both; color:#ffffff; float: left;}  
div#necesidades div#white div#filter-by-need {float:left; clear: both; border: 1px solid #D1D1D1;position: relative;text-transform: uppercase;width: 258px;z-index: 1;}  
div#necesidades div#white div#filter-by-need ul.menu-list {width:258px; position: absolute; left: -1px; border: 1px solid #D1D1D1; display:none;}
div#necesidades div#white div#filter-by-need ul.menu-list li {width:258px;float: left;}
div#necesidades div#white div#filter-by-need  .menu-label {background: url(/images/lorealparis/arrows/filter-by-need-select-black.png) right no-repeat;display: block;line-height: 35px;padding: 0 30px 0 10px;white-space: nowrap;color:#ffffff;cursor:pointer;}
div#necesidades div#white div#filter-by-need .menu-list a {color: #070707;display: block;padding: 5px 10px;text-decoration: none;background:#cccccc;float: none;}
div#necesidades div#white div#filter-by-need .menu-list a:hover {background:#ffffff;}

div#necesidades div#black span.dir, div#white span.dir a {color:#ffffff !important;}  
div#necesidades div#black h2 {width:930px; color:#000000; float: left;}  
div#necesidades div#black h3 {width:385px; clear: both; color:#000000; float: left;}  
div#necesidades div#black p {width:385px; clear: both; color:#000000; float: left;}  
div#necesidades div#black div#filter-by-need {float:left; clear: both; border: 1px solid #000000;position: relative;text-transform: uppercase;width: 258px;z-index: 1;}  
div#necesidades div#black div#filter-by-need ul.menu-list {width:258px; position: absolute; left: -1px; border: 1px solid #D1D1D1; display:none;}
div#necesidades div#black div#filter-by-need ul.menu-list li {width:258px;float: left;}
div#necesidades div#black div#filter-by-need  .menu-label {background: url(/images/lorealparis/arrows/filter-by-need-select-black.png) right no-repeat;display: block;line-height: 35px;padding: 0 30px 0 10px;white-space: nowrap;color:#000000;cursor:pointer;}
div#necesidades div#black div#filter-by-need .menu-list a {color: #070707;display: block;padding: 5px 10px;text-decoration: none;background:#000000;float: none; color:#ffffff;}
div#necesidades div#black div#filter-by-need .menu-list a:hover {background:#ffffff; color:#000000;}

/*
   .white #filter-by-need .menu-label {
    background-image: url("/_fr/_fr/needs/img/common/pictos/filter-by-need-select-white.png");
}
.black #filter-by-need .menu-label {
    background-image: url("/_fr/_fr/needs/img/common/pictos/filter-by-need-select-black.png");
}
.white #filter-by-need .menu-label-focused {
    background-color: #070707;
}
.black #filter-by-need .menu-label-focused {
    background-color: #FFFFFF;
}
  
  
  */