/* 
NAKAMI web version 2.2
Last update: 29/4/2009
----------------------------- */

/* -----------------------------------------------
	General
	Seleccion de Idioma
	Navegacion Principal
	Direccion y submenu lateral
	Inicio
	Proyectos
	Clientes
	Contacto
	- Externo: es.css, en.css, ca.css
	  (para la sustitución de imagen en navegación 
	  y títulos, según idioma)	
--------------------------------------------------- */

/* General 
--------------------------------------------------------------------------- */
* 			{margin:0; padding:0; font:11px/15px arial, sans-serif; color:#C6C7C8; outline:none;}
p 			{margin:0 0 10px 0;}
b, strong 	{font-weight:bold;}
img 		{border:none;}
a 			{text-decoration:none; outline:none;}
a:hover 	{text-decoration:underline;}

body 		{background:#000 url(../images/general/background.gif) top left repeat;}
#center 	{position:relative; top:50px; left:50%; width:740px; height:auto; margin-left:-370px; padding-bottom:15px; z-index:1; margin-bottom:20px;}

#logo 			{position:absolute; left:178px; top:0px; z-index:2;}
#banner 		{position:absolute; top:50px; left:178px; width:562px; height:268px; z-index:2;}
#header p 		{position:absolute; left:178px; top:0px; display:block; width:562px; height:60px; text-indent:-9999px; z-index:1;}
#header p a		{position:absolute; top:0; left:0; display:block; width:250px; height:100%;}
#principal		{position:absolute; top:415px; left:178px; width:562px;}

h1, h2					{padding-bottom:10px; font:bold 15px/17px arial, sans-serif; text-transform:uppercase; color:#FFFF00; text-align:left;}

div#detalles h2		{padding-bottom:10px; text-align:left;}

/* Desactivat idioma anglès: */
li#lang_en	{display:none;}


/* Seleccion de Idioma
--------------------------------------------------------------------------- */
#lang 		{position:absolute; list-style-type:none; top:37px; right:18px; width:240px; height:15px; margin:0px; text-align:right; z-index:2;}
#lang li							{padding-left:20px; position:relative; float:right; text-align:right; font: 11px/10px arial, sans-serif; color:#999;}
#lang a.ws_lang_not_selected 		{font:11px/10px arial, sans-serif; color:#666; text-decoration:none;}
#lang a.ws_lang_not_selected:hover 	{font:11px/10px arial, sans-serif; color:#7F7F7F; text-decoration:none;}
#lang a.ws_lang_selected  			{padding-right:5px; font:11px/10px arial, sans-serif; color:#FFF; text-decoration:none; background:url(../images/lang_asterisc.gif) top right no-repeat;}
#lang a.ws_lang_selected:hover  	{padding-right:5px; font:11px/10px arial, sans-serif; color:#FFF; text-decoration:none; background:url(../images/lang_asterisc.gif) top right no-repeat;}
	
/* Navegacion Principal
--------------------------------------------------------------------------- */
#menu 		{position:absolute; top:66px; left:0px; width:170px; z-index:2; margin:0; padding:0;}
#menu ul#nav	{background-color:#000; list-style:none;}
#menu ul#nav li {list-style-type:none; display:block; width:170px; margin:0; padding:0; overflow:hidden;}
#menu img 	{border:0;}

#menu ul#nav li a 				{margin:0; display:block; width:100%; height:100%; text-indent:-9999px; outline:none; background-repeat:no-repeat;}

#menu ul#nav li#minicio 		{height:37px;}
#menu ul#nav li#mproyectos 		{height:27px;}
#menu ul#nav li#mclientes 		{height:26px;}
#menu ul#nav li#mmultimedia 	{height:25px;}
#menu ul#nav li#mcreatividad,
#menu ul#nav li#mgrafico,
#menu ul#nav li#mtecnologia,
#menu ul#nav li#mfotografia,
#menu ul#nav li#mstands 		{display:none;}
#menu ul#nav li#mcontacto 		{height:45px;}

#menu ul#nav li#mcreatividad.current,
#menu ul#nav li#mgrafico.current,
#menu ul#nav li#mmultimedia.current,
#menu ul#nav li#mtecnologia.current,
#menu ul#nav li#mstands.current			{padding-bottom:40px;}
#menu ul#nav li#mfotografia.current		{padding-bottom:40px;}
#menu ul#nav li.current ul li			{padding-bottom:0;}
#menu ul#nav li ul						{position:relative;}

#menu ul#nav li ul li					{height:40px !important;}
#menu ul#nav li.current ul li a 		{background-position:-170px 0 !important;}
#menu ul#nav li.current ul li a:hover 	{background-position:0 0 !important; cursor:pointer;}
#menu ul#nav li.current ul li.current a,  
#menu ul#nav li.current ul li.current a:hover	{background-position:-340px 0 !important; cursor:default;}

	/* --------------------------------------------------------------
	Mod.:  Espacio extra añadido en el borde superior de "Contacto", 
	       después de haber eliminado el apartado "Stands", para 
	       mantener el espaciado óptimo
	--------------------------------------------------------------- */
	#menu ul#nav li#mcontacto				{margin-top:-2px;}
	
/* Direccion y submenu lateral
--------------------------------------------------------------------------- */
div#direccion	{font:10px/14px arial, sans-serif; text-align:right; padding:8px 0; margin:0 10px; color:#4d4d4d; border-bottom:1px dotted;}

ul#pie			{list-style:none; padding:5px 10px;}
ul#pie li		{text-align:right;}
ul#pie li a			{color:#4d4d4d;}
ul#pie li a:hover	{color:#777; text-decoration:none;}

/* Inicio
--------------------------------------------------------------------------- */
#nakami 		{position:relative; float:left; width:270px; margin:0 5px 0 0; padding:7px 10px 20px 10px; font:11px/15px arial, sans-serif; background:#484549; }
	#nakami a 	{color:#FF0;}
	#nakami ul 	{list-style-position:inside; padding-left:10px; padding-bottom:10px;}

#noticias 				{position:relative; float:left; margin:0; padding:7px 11px 20px 11px; width:245px; font:11px/15px arial, sans-serif; color:#FFF; background:#484549;	}
	#noticias ul 		{padding-top:5px; list-style-type:none;}
	#noticias ul img 	{position:relative; float:left; padding-right:7px;}
	#noticias ul h3 	{position:relative; float:left; width:150px; clear:right; margin-bottom:20px;}
	#noticias ul p 		{display:block; padding-top:10px; position:relative; clear:both;}
	#noticias ul li		{padding-bottom:15px; position:relative; clear:both;}
	#noticias a 		{font-weight:bold; color:#FF0;}
	#noticias a:hover 	{font-weight:bold; color:#FF0; text-decoration:underline;}
	
body#inicio #principal	{padding-bottom:30px;}

/* Proyectos
   (Válido para el apartado Proyectos en sí y para todos los de 
   Creatividad, Gráfico, etc.)
--------------------------------------------------------------------------- */
#slideshow 	{position:absolute; top:66px; left:178px; width:562px; height:342px; z-index:2; background-color:#484549;}

#proyectos, #servicios	{position:relative; float:left; width:187px; background:#484549; margin:0 5px 30px 0; padding:7px 9px 20px 11px; font: 11px/15px arial, sans-serif;color:#999;}
	#proyectos a,
	#servicios a		{color:#CCC; text-decoration:none;}
	#proyectos a:hover,
	#servicios a:hover	{color:#FFF;}
	#menuproyectos 					{padding-top:4px; list-style-type:none; text-transform:uppercase;}
		#menuproyectos li			{display:block;}
		#menuproyectos li.current	{background-color:#000; color:#FF0; margin:0 -11px; padding:2px 11px;}
	#servicios span,
	#proyectos span,
	#detalles.servicios span.pie		{display:block; padding-top:3px; margin-top:15px; border-top:1px dotted;}
	#servicios span a,
	#proyectos span a,
	#detalles.servicios span a		{color:#FF0;}
	#servicios span a:hover,
	#proyectos span a:hover,
	#detalles.servicios span a:hover	{color:#FF0; text-decoration:underline;}

#detalles 			{position:relative; float:left; width:317px; margin-bottom:30px; background:#484549; padding: 7px 20px 20px 13px; font: 11px/15px arial, sans-serif; color:#C6C7C8; text-align:justify;}
	#detalles ul 		{list-style-position:inside; padding-left:10px; padding-bottom:10px;}
	#detalles a 		{color:#FFF;}
	#detalles a:hover 	{color:#FFF; text-decoration:none;}
	#detalles p			{padding-left:2px;}

/* corrección de anchos para el apartado de fotógrafos */
body#fotografos #proyectos 	{width:217px;}
body#fotografos #detalles 	{position:absolute; top:415px; left:393px; width:298px;}

/* corrección de anchos para el apartado de Proyectos */
div#principal.seleccion #proyectos	{width:206px;}
div#principal.seleccion #detalles 	{width:298px;}

	/* Clases especiales para intro de seccion
	-------------------------------------------- */
	div#slideshow.general 	{height:269px;}
	div#principal.general 	{top:342px;}
	
	/* Clase especial para los apartados donde no hay 
	   desglose de servicios, layout de una columna
	-------------------------------------------------- */
	div#principal.unacol #detalles		{width:529px;}	
	
	/* Definir espacios para texto e imagen si necesario
	----------------------------------------------------- */
	div#principal.unacol #detalles img	{text-align:right;}

/* Clientes
--------------------------------------------------------------------------- */
#principal.clientes		{top:342px; padding-bottom:30px;}
.clientes h1			{padding-left:10px;}
#clientes 				{position:relative; float:left; width:541px; margin:0px; padding:7px 10px 20px 10px; font:11px/15px arial, sans-serif; color:#FFF; background:#484549; }
#clientes ul			{list-style-type:none; padding:10px 0 0 10px;}
#clientes ul li 		{position:relative; float:left; padding:0 9px 10px 0;}
#clientes ul li p 		{margin:0; text-transform:uppercase; width:120px;}
#clientes a 			{color:#FF0;}
#clientes a:hover 		{color:#FF0; text-decoration:underline;}

/* Contacto
--------------------------------------------------------------------------- */
div#form,
div#localizacion,
div#como-llegar		{position:relative; float:left; clear:both; width:529px;}

div#form ol			{position:relative; float:left; clear:both; width:529px; height:180px; list-style:none; padding:16px 0 10px 0; margin:6px 0 10px 0; border-top:1px solid #666; border-bottom:1px solid #666;}
div#form li			{position:relative; float:left; clear:both; padding-bottom:12px; width:235px;}

div#form li.item-normal label	{position:relative; float:left; text-transform:uppercase; display:block; width:65px; line-height:13px; height:13px; padding-right:10px; text-align:right;}

div#form input#nombre,
div#form input#apellidos,
div#form input#email		{position:relative; float:left; width:156px; height:13px; overflow:hidden; border:none; outline:none; color:#666;}

div#form li#recibir			{text-align:right;}
div#form li#recibir input	{display:block; position:relative; float:right; margin-right:8px;}
div#form li#recibir label	{display:block; position:relative; float:right; padding-top:1px; padding-right:2px;}

div#form li#mensaje				{position:absolute; top:12px; right:0; width:275px;}
div#form li#mensaje label		{position:relative; float:left; clear:both; width:100%; padding-bottom:2px; text-transform:uppercase;}
div#form li#mensaje textarea	{position:relative; float:left; clear:both; width:100%; border:none; outline:none; height:136px; color:#666;}

div#form li#enviar 			{position:absolute; right:0; top:170px; text-align:right;}
div#form li#enviar input	{background-color:#1a171b; padding:3px 6px; margin-right:-1px; text-transform:uppercase; border:none;}

div#localizacion		{padding-bottom:10px; text-align:right;}
div#localizacion h2		{text-align:left;}
div#localizacion img	{border:none; outline:none;}

div#como-llegar div#instrucciones			{position:relative; float:left; margin-top:6px; width:auto; display:block; background:url(../images/bgcomollegar_izq.gif) top left no-repeat; height:44px;}
div#como-llegar div#instrucciones span		{display:block; text-transform:uppercase; background:url(../images/bgcomollegar_dch.gif) top right no-repeat; height:44px;}
div#como-llegar	div#instrucciones span a	{display:block; width:100%; height:100%; line-height:44px; padding-left:48px; padding-right:13px;}

div#contacto span.error		{width:230px; text-align:right; position:absolute; bottom:48px; right:296px;}
span.volver					{display:block; text-align:right;}
span.top					{position:absolute; top:18px; right:22px; z-index:20;}
div#contacto span.volver a			{color:#FF0;}
div#contacto span.volver a:hover	{text-decoration:underline;}

/* Datos Legales, Mapa web
--------------------------------------------------------------------------- */
div#principal.datoslegales	{top:66px;}

div#principal.mapaweb 		{position:relative; float:left; width:562px; margin-bottom:30px; padding:7px 0 20px 0; font: 11px/15px arial, sans-serif; color:#C6C7C8; text-align:justify;}
div#principal.mapaweb h1	{padding-top:10px; margin-left:13px;}
div#principal.mapaweb div	{margin-bottom:30px; background: #484549; }

ul#sitemap					{list-style-position:inside; padding:20px 13px;}
ul#sitemap li				{padding-bottom:3px;}
ul#sitemap li.sitemap1		{background-color:#000; display:block; width:496px; padding:2px 20px; list-style-type:none; text-transform:uppercase;}
ul#sitemap li.sitemap1#item568, 
ul#sitemap li.sitemap1#item575, 
ul#sitemap li.sitemap1#item622,
ul#sitemap li.sitemap1#item-inicio	{border-bottom:3px solid #484549;}
ul#sitemap li.sitemap1#item428  {display:none;}
ul#sitemap li.sitemap1 a	{color:#FF0;}
ul#sitemap li.sitemap2		{margin-left:20px;}
ul#sitemap li.sitemap3		{margin-left:40px;}
ul#sitemap li.sitemap4		{margin-left:60px;}
ul#sitemap li.sitemap5		{margin-left:80px;}
ul#sitemap li.sitemap2 a:hover,
ul#sitemap li.sitemap3 a:hover,
ul#sitemap li.sitemap4 a:hover,
ul#sitemap li.sitemap5 a:hover	{color:#FFF; text-decoration:none;}

/* Leer mas
   - Añadido el 12/9/2008
--------------------------------------------------------------------------- */
#leermas	{display:none;}
#leermas h3				{padding-bottom:10px;}
#leermas h3 a			{color:#FFF;}
#leermas h3 a:hover		{color:#FFF; text-decoration:underline; cursor:pointer;}


body.exemples-intro div#slideshow	{height:269px;}
body.exemples-intro	div#principal 	{top:342px;}