@charset "utf-8";

/**
 * Alcaraz208
 * ------------------------------------------
 *
 * autor:						Josep (josepramon@alcaraz.com)
 * fitxa:						
 * data creacio:
 * ultima modificacio:
 * descripcio:
 *
 *
 */



/* Estructura de les pagines
-------------------------------------------------------------------------------------------

	body
	|
	|__div#wrapper
		|
		|__div#branding
		|	|
		|	|__h1
		|	|
		|	|__a#skipToContents
		|
		|__ul#siteNav
		|
		|__div#contents
		|	|
		|	|_div#sectionHeader ---> només en algunes pàgines
		|	|
		|	|_div#contentsMain ----> només en algunes pàgines (les que tenen sectionHeader)
		|
		|__div#footer
			|
			|__ul#meta
			|
			|__div#copy

*/


@import url("/css/reset.css");


/* Genèrics
-------------------------------------------------------------------------------------------*/
body
{
	color: #000;
	background-color: #fff;
	font: 78%/144% Arial, Helvetica, sans-serif;
	padding: 0 1em;
}

a{ color: #000; background-color: inherit; text-decoration: underline; }

a:hover{ color: #ff9c00; background-color: inherit; }

address{ font-style: normal; }

textarea{ overflow: auto; }

.error{ border: solid 1px red !important; }

.h
{
	/*display: none !important;*/
		
	/*
	* els principals screen readers (JAWS, Window Eyes i IBM Home Page Reader)
	* no llegeixen els elements amb un display:none o visibility:hidden, encara
	* que el css estigui destinat a medis visuals (@media: screen), ignorant la
	* especificació oficial...
	*/
	height: 0 !important;
	width: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
}

.r{ text-align: right; }

#loadingAnimation{ display: block; margin: 10em auto 0; }

ul.ejemplos li a
{
	font-family: "Arial Black", Arial;
	font-size: 1.1em;
	text-decoration: none;
}




/* Contenedor i ombres
-------------------------------------------------------------------------------------------*/
#wrapper
{
	min-width: 780px;
	max-width: 1005px;
	margin: 0 auto 2em;
}

#branding, #siteNav, #contents
{
	color: inherit;
	background: #fff url(/img/ui/bgLat.jpg) repeat-y right;
	padding-right: 12px;
}

#footer
{
	color: inherit;
	background: #fff url(/img/ui/bgBottom.jpg) no-repeat right top;
	padding-top: 15px;
}




/* Capçalera
-------------------------------------------------------------------------------------------*/
#branding{ padding: 40px 30px 0 0; height: 40px; }

#branding h1{ float: right; }

#branding h1 a
{
	display: block;
	width: 340px;
	height: 40px;
	text-indent: -500em;
	color: inherit;
	background: #fff url(/img/ui/logo.png) no-repeat;
}

#skipToContents{ height: 0 !important; width: 0 !important; overflow: hidden !important; position: absolute !important; }




/* Menu
-------------------------------------------------------------------------------------------*/
#siteNav
{
	clear: both;
	height: 1em;
	padding: 1em 0 5em;
}

#siteNav li
{
	float: left;
	padding: .2em 1em;
	border-bottom: solid 1px #a1a1a1;
}

#siteNav li:first-child{ padding-left: .4em; }
#siteNav li:last-child{ padding-right: .4em; }

#siteNav a
{
	text-decoration: none;
	color: #0e3c54;
	background-color: inherit;
}




/* Continguts
-------------------------------------------------------------------------------------------*/
#contents
{
	clear: both;
	height: 45em;
	color: #555;
	background-color: inherit;
	
	font-weight: bold;	/* ... */
}

#contents h1
{
	font-weight: bold;
	font-size: 1.3em;
	color: #919191;
	background: inherit;
}

#contents a{ color: #555; background-color: inherit; }

#contents p{ margin-bottom: 1em; }

#contents strong{ text-transform: uppercase; }



#sectionHeader
{
	height: 16em;
	margin: 0 3em;
	color: #919191 !important;
	background-color: inherit;
	font-family: Tahoma, Helvetica, Arial;
	line-height: 1.8em;
	text-transform: uppercase;
}

#sectionHeader h1{ margin-bottom: .5em; font-size: 1.4em; }

#sectionHeader h1:after{ content: ":"; }

#sectionHeader ul{ float: left; clear: right; }

#sectionHeader li
{
	float: left;
	padding-right: .6em;
}

#sectionHeader li:after{ content: ","; }

#sectionHeader li:last-child:after{ content: ""; }



#contentsMain
{
	padding: 5em 4em 0 326px;
	height: 300px;
	overflow: auto;
}



	/* home
	---------------*/
	body.home #contents
	{
		height: 35em;
		padding-top: 10em;
		position: relative;
	}
	
	body.home #contents h1
	{
		height: 146px;
		color: #000;
		background: #efece3 url(/img/pics/home.jpg) no-repeat left; 
	}
	
	body.home #contents h1 strong, body.home #contents h1 em{ display: block; }
	
	body.home #contents h1 strong
	{
		padding: 1em 0 .2em;
		margin-left: 44%;
		color: #ff9c00;
		background-color: inherit;
		font-size: 3.5em;
		line-height: .5em;
		text-transform: none;
	}
	
	body.home #contents h1 strong:last-child,
	body.home #contents h1 em
	{
		padding-top: 0;
		margin-left: 48%;
		font-size: 1em;
		font-style: normal;
		line-height: 1.4em;
	}
	
	body.home #contents h1 em{ color: #000; background-color: inherit; }
	
	body.home #contents p
	{
		margin: 1em 0 0 48%;
		line-height: 1.3em;
		font-size: 1.1em;
		font-weight: normal;
		color: #000;
		background-color: inherit;
	}
	
	
	body.home #promo
	{
		width: 435px;
		height: 152px;
		position: absolute;
		left: 5px;
		bottom: 5px;
	}
	
	body.home #promo p
	{
		margin: 0;
	}
	
	body.home #promo strong
	{
		font-weight: normal;
	}
	
	body.home #promo h2,
	body.home #promo p,
	body.home #promo a
	{
		color: #373737;
		background-color: inherit;
	}
	
	
	body.home #promo h2
	{
		padding-top: 25px;
	}
	
	body.home #promo h2,
	body.home #promo p
	{
		float: right;
		width: 236px;
	}
	
	body.home #promo #minifull
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 187px;
		height: 152px;
		overflow: hidden;
	}
	
	
	body.home #promo a
	{
		text-decoration: none;
	}
	
	body.home #promo a:hover
	{
		text-decoration: none;
		border-bottom: dashed 1px #999;
	}
	
	
	#news
	{
		position: absolute;
		left: 0;
		bottom: 0;
		height: 178px;
		width: 995px;
		padding: 62px 0 0;
		color: inherit;
		background: #fff url(/img/ui/newsHeader.jpg) repeat-x left top;
		
		overflow: hidden;
	}
	
	#news h2{ height: 0 !important; width: 0 !important; overflow: hidden !important; position: absolute !important; }
	
	#news li
	{
		position: relative;
		float: left;
		width: 244px;
		padding-left: 158px;
		padding-right: 10px;
		color: #414141 !important;
		background-color: transparent;
	}
	
	#news p{ margin: 0 !important; color: #414141 !important;
	background-color: transparent;}
	
	.newsPic
	{
		position: absolute;
		top: -30px;
		left: 0;
	}
	
	
	
	/* nosotros
	---------------*/
	body.nosotros #sectionHeader
	{
		color: inherit;
		background: #fff url(/img/ui/n.png) no-repeat left top;
	}
	
	body.nosotros #contentsMain
	{
		color: inherit;
		background: #fff url(/img/pics/nosotros.jpg) no-repeat left top;
	}
	
	
	/* clientes
	---------------*/
	body.clientes #sectionHeader
	{
		color: inherit;
		background: #fff url(/img/ui/c.png) no-repeat left top;
	}
	
	body.clientes #contentsMain
	{
		padding-left: 360px;
		color: inherit;
		background: #fff url(/img/pics/clientes.jpg) no-repeat left top;
	}
	
	
	/* contacto
	---------------*/
	body.contacto #sectionHeader
	{
		color: inherit;
		background: #fff url(/img/ui/c.png) no-repeat left top;
	}
	
	body.contacto #sectionHeader p{ margin-bottom: 0; }
	
	#formContacto{ width: 70%; float: left; }
	
	#formContacto ol{ list-style: none; padding: 1.5em 0; }

		#formContacto ol li{ clear: both; min-height: 3em; }

		#formContacto ol li label,
		#formContacto ol li input,
		#formContacto ol li textarea{ float: left; }

		#formContacto ol li label
		{
			width: 18%;
			padding: .3em 2% 0 0;
			text-align: right;
		}

		#formContacto ol li input,
		#formContacto ol li textarea
		{
			width: 76%;
			padding: 3px;
			border-top: solid 2px #ccc;
			border-right: none;
			border-bottom: none;
			border-left: solid 2px #ccc;
			color: #333;
			background-color: #efece3;
			font: .9em Arial, Helvetica, sans-serif;
		}

		#formContacto ol li.twoCols{ clear: none; float: left; width: 48%; }

		#formContacto ol li.twoCols label{ width: 40%; }

		#formContacto ol li.twoCols input{ width: 55%; }

		#fURL{ width: 26% !important; }

		#formContacto #sbmt label{ height: 0 !important; width: 0 !important; overflow: hidden !important; position: absolute !important; }

		#fSubmit
		{
			float: right;
			margin: 1em;
			padding: .2em 1em;
			border: solid 2px #ccc;
			color: #666;
			background-color: #efece3;
			text-transform: uppercase;
			font-weight: bold;
			font-size: .85em;
		}
	
	
	body.contacto #aside
	{
		float: right;
		width: 25%;
		padding: 3em 1em 0;
	}

	body.contacto #aside strong{ font-weight: bold; }
	
	body.contacto #aside #direccionContacto{ margin-top: 2em; }
	
	body.contacto #aside #direccionContacto h2{ font-weight: normal; }
	
	
	
	
	
	
	/* servicios
	---------------*/
	body.servicios #sectionHeader
	{
		position: relative;
		color: inherit;
		background: #fff url(/img/ui/s.png) no-repeat left top;
	}
	
	body.servicios #sectionHeader h1{ color: #000; background: inherit; }
	
	body.servicios #contentsMain
	{
		padding-left: 360px;
	}
	
	body.servicios #contentsMain h2
	{
		font-family: "Arial Black", Arial;
		text-transform: uppercase;
	}
	
	body.servicios #sectionHeader li a
	{
		color: #000;
		background: inherit;
		text-decoration: none;
	}
	
	body.servicios #sectionHeader li a:hover{ text-decoration: underline; }
	
	body.servicios #sectionHeader li:nth-child(even) a
	{
		color: #ff9c00; background: inherit;
	}
	
	body.servicios #sectionHeader li.even a
	{
		color: #ff9c00; background: inherit;
	}
	
	body.servicios #masInfo
	{
		width: auto;
		height: 3em;
		padding: 1em 0 0 40px;
		position: absolute;
		bottom: -3em;
		right: 2em;
		
		color: #ff9c00;
		background: #fff url(/img/ui/pointer.png) no-repeat left top;
		font-size: .9em;
	}
	
	
	
		
		/* inicio
		---------------*/
		body.servicios div.intro
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_intro.jpg) no-repeat left bottom;
		}
		
		
		/* analisis
		---------------*/
		body.servicios div.analisis
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_analisis.jpg) no-repeat left bottom;
		}
		
		
		/* comercio electronico
		-------------------------*/
		body.servicios div.comercioElectronico
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_comercioElectronico.jpg) no-repeat left bottom;
		}
		
		body.servicios div.comercioElectronico p{ margin-bottom: 0; }
		
		
		/* consultoria
		---------------*/
		body.servicios div.consultoria
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_consultoria.jpg) no-repeat left bottom;
		}
		
		
		/* creatividad
		---------------*/
		body.servicios div.creatividad
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_creatividad.jpg) no-repeat left bottom;
		}
		
		body.servicios div.creatividad em
		{
			color: #ff9c00;
			background-color: inherit;
			font-style: normal;
		}
		
		
		/* emarketing
		---------------*/
		body.servicios div.emarketing
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_emarketing.jpg) no-repeat left bottom;
		}
		
		body.servicios div.emarketing p{ margin-bottom: 0; }
		
		
		/* internet
		---------------*/
		body.servicios div.internet
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_internet.jpg) no-repeat left bottom;
		}
		
		body.servicios div.internet p{ margin-bottom: 0; }
		
		
		/* medios on line
		--------------------*/
		body.servicios div.mediosOnline
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_mediosOnline.jpg) no-repeat left bottom;
		}
		
		
		/* multimedia
		---------------*/
		body.servicios div.multimedia
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_multimedia.jpg) no-repeat left bottom;
		}
		
		body.servicios div.multimedia p{ margin-bottom: 0; }
		
		
		/* eventos
		---------------*/
		body.servicios div.eventos
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_eventos.jpg) no-repeat left bottom;
		}
		
		body.servicios div.eventos p{ margin-bottom: 0; }
		
		
		/* revistas
		---------------*/
		body.servicios div.revistas
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_revistas.jpg) no-repeat left bottom;
		}
		
		body.servicios div.revistas p{ margin-bottom: 0; }
		
		body.servicios div.revistas a
		{
			display: block;
			margin-top: 1em;
			font-family: "Arial Black", Arial;
			font-size: 1.3em;
			text-decoration: none;
		}
		
		body.servicios div.revistas a:hover{ text-decoration: underline; }
		
		
		/* telefonia
		---------------*/
		body.servicios div.telefonia
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_telefonia.jpg) no-repeat left bottom;
		}
		
		body.servicios div.telefonia p{ margin-bottom: 0; }
		
		
		/* television
		---------------*/
		body.servicios div.television
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_television.jpg) no-repeat left bottom;
		}
		
		body.servicios div.television p{ margin-bottom: 0; }
		
		body.servicios div.television a{ text-decoration: none; }
		
		
		/* videojuegos
		-----------------*/
		body.servicios div.videojuegos
		{
			color: inherit;
			background: #fff url(/img/pics/servicios_videojuegos.jpg) no-repeat left bottom;
		}
		
		body.servicios div.videojuegos p{ margin-bottom: 0; }
		




/* Peu
-------------------------------------------------------------------------------------------*/
#footer
{
	clear: both;
	font-size: .9em;
	min-height: 60px;
}

#meta{ float: left; clear: left; }

#meta li{ float: left; padding-right: 1em; }

#copy
{
	float: right;
	clear: right;
	padding-right: 1em;
}

#copy a
{
	color: #898888;
	background-color: inherit;
	font-weight: bold;
	text-decoration: none;
}