@charset "utf-8";
/*   
Theme Name: Huul k'iin
Theme URI: http://www.mayasystems.net
Description: Diseño original para la web de Maya Systems desarrollada por Pixel Binario.
Author: Pixel Binario
Author URI: http://www.pixelbinario.com
Version: 1.0
.
Uso exclusivo para la web de Maya Systems.
.
*/

/* RESET CSS ---------------------------------------------------------------------------------------------------- */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,p { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset,img { border:0 }
address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:normal }
ol,ul {	list-style:none }
caption,th { text-align:left }
h1,h2,h3,h4,h5 { font-weight:normal; padding:0; margin:0 }
/* HTML ---------------------------------------------------------------------------------------------------- */

body { font-family:"Corbel", "Bitstream Vera Sans", "Liberation Sans", sans-serif; font-size:80%; background-color:#e5e5e5 }
html,body { overflow-x:hidden }

input, textarea, select { font-family:"Corbel", "Bitstream Vera Sans", "Liberation Sans", Tahoma, sans-serif; font-size:14px }
a { color:#8c2b15; text-decoration:none }
a:hover { color:#000 }

.typeface-js { font-family:'NeoSans';letter-spacing:-1px }

/* CLEARFIX ----------------------------------------------------------------------------------------------------------------------------------- */
.clearfix:after			{ height:0; line-height:0; display:block; visibility:hidden; clear:both; content:"." }
.clearfix				{ display:inline-block }
html[xmlns] .clearfix	{ display:block }
* html .clearfix 		{ height:1% }

/* CONTENDORES PRINCIPALES */
#web { width:980px; margin:0 auto; position:relative; padding-top:220px; background:url(img/bg_body.png) center 220px  no-repeat }
#cap { background:url(img/bg_menu.png) bottom no-repeat; height:160px; z-index:50; top:0; position:absolute; width:980px }
#cos { background-color:#fff; margin:0 10px; position:relative; z-index:5000; padding:0 20px }
#peu { background:#212121 url(img/bg_peu.gif) top repeat-x; height:80px; padding:10px 20px; color:#7a7a7a }
body.portada #web { padding-top:430px; background-position:center 450px }

/* #CAP ----------------------------------------------------------------------------------------------------------------------------------- */
.sobremenu		{ height:30px; line-height:30px; color:#f0f0f0; padding:0 20px; font-size:.9em; clear:both }
.sobremenu a	{ color:#9a9b9d }
.sobremenu a:hover	{ color:#fff; text-decoration:underline }

.idiomes		{ float:right }
.idiomes li		{ float:left; text-transform:uppercase; font-size:.85em; padding-left:5px; line-height:32px }
.idiomes li a			{ color:#9a9b9d; padding-right:5px }
.idiomes li .actiu		{ color:#fff; font-style:italic }

#logo { float:left; display:block; width:210px; margin:20px 0 0 20px }
.wrap { margin:0 auto; width:960px }
#cap a { outline:none }
#menu				{ clear:both; margin:0 10px }
#menu ul			{ float:right; margin:20px 20px 0 0 }
#menu li			{ float:left; height:76px; border-right:1px solid #3c3c3c }
#menu ul a			{ color:#eee; line-height:76px; text-transform:uppercase; text-shadow:#000 1px 1px 0; display:block; padding:0 20px 0 20px }
#menu li.page-item-36, #menu li.page-item-38		{ border:0 }
#menu li.current_page_item a { color:#FF9900; text-shadow: #000 1px 2px 10px }

#breadcrumb { position:absolute; top:176px; margin:0 30px; z-index:70; color:#fff; text-shadow:#212121 1px 1px 0; font-size:11px; text-transform:uppercase }
#breadcrumb a { color:#eee }
#breadcrumb a:hover { color:#D79E28 }

/* Slider de paso de baners superior */
#imgcap			{ width:1920px; height:240px; position:absolute; top:0; left:-470px; overflow:hidden; z-index:1 } /* el left es 470 para contrarestar el margen del #cos */

.portada #slider_wrap			{ width:1920px; height:450px; position:absolute; top:0; left:-470px; overflow:hidden; z-index:1 } /* el left es 470 para contrarestar el margen del #cos */
.portada #slider a 				{ width:1920px; height:450px; text-align:center }
.portada #cos { padding-top:10px }
.portada #cos { padding-bottom:10px }

#slider_pags 					{ position:absolute; top:390px; right:20px; z-index:60; height:20px; display:block }
#slider_pags a					{ margin-right:5px; display:block; float:left; width:14px; height:20px; text-indent:-9999px; background:url(img/bg_slider_boto.png) no-repeat center center; outline:none  }
#slider_pags a.activeSlide		{ background-position:left center }
#slider_pags a:hover			{ background-position:right center }

/* Especifico portada */

/* #COS ----------------------------------------------------------------------------------------------------------------------------------- */
#cos h1.seccio { font-family:'NeoSans'; letter-spacing:-.05em; font-size:31px; height:34px; color:#630 }
#cos h2 { font-size:20px; margin-bottom:10px; padding:0; letter-spacing:-1px; color:#800 }
#cos h3 { font-size:16px; padding-bottom:4px }
#cos h4 { font-size:13px; padding-bottom:4px }
#cos p { line-height:20px; padding-bottom:20px; font-size:13px; color:#444 }
#cos p.descripcio { font-size:14px; line-height:22px; color:#212121 }
#cos p a:hover { text-decoration:underline }
#cos strong { color:#000 }


#cos .col1home { float:left; width:620px; margin-right:20px }
#cos .col1home h2, #cos .col2home h2 { height:25px; font-size:25px; color:#630; margin:0 }
#cos .col1home h4, #cos .col2home h4 { font-size:12px; color:#999; margin-bottom:10px }
#cos .col2home { float:left; width:280px }
#cos .baners { border-top:1px solid #eee; padding:20px 0 }

	#cos .oferim h3				{ font-weight:bold; line-height:20px; color:#212121; font-size:14px }
	.oferim						{ border-bottom:1px solid #eee }
	.oferim li					{ padding:0 30px 0 40px; float:left; width:250px; background-position:left 20px; background-repeat:no-repeat; border-top:1px solid #eee; padding-top:20px }
	.oferim p					{ line-height:24px; color:#444; font-size:12px }
	.oferim .manteniment		{ background-image:url(img/ico_manteniment.png) }
	.oferim .asistencia			{ background-image:url(img/ico_asistencia.png) }
	.oferim .asesora			{ background-image:url(img/ico_asesora.png) }
	.oferim .integral			{ background-image:url(img/ico_serveintegral.png) }
	.oferim .disseny			{ background-image:url(img/ico_disseny.png) }
	.oferim .lupa				{ background-image:url(img/ico_lupa.png) }
	.oferim .dreta 				{ padding-right:0 }
	
#sidebar { float:left; width:210px; margin-left:20px }

#twitter_news { background:#ebebeb url(img/tit_sup_twitter.png) top no-repeat; padding-top:40px; margin-top:20px; line-height:16px; font-size:14px; clear:both }
#twitter_news li { padding:10px 0; margin:0 20px; clear:both; border-bottom:1px solid #d9d9d9 }
#twitter_news abbr { border:0; display:block; font-size:12px; color:#999; font-weight:bold }
#twitter_news .twitter-link { font-size:11px }
#twitter_news .siguenos { display:block; background:url(img/bg_bottom_twitter.png) bottom no-repeat; padding:7px 20px 9px; text-align:right; font-size:12px; font-weight:bold }

.volver { clear:both; display:block; background:url(img/bg_cos_peu.png) top center no-repeat; padding-top:20px; text-align:center; outline:none; margin:0 auto; width:960px }

/* Doble Columna */
.doblecol ul { width:450px; margin-right:20px; float:left; border-top:1px solid #eee; margin-bottom:20px }
.doblecol ul.col2 { margin-right:0 }
.doblecol li { border-bottom:1px solid #eee; padding:20px 0 0 0 }
.doblecol h3 { font-weight:bold; color:#630 }

/* Partners */
#partners { background-color:#fff; margin-top:20px; padding:25px 0 }
#partners h2 { text-align:center; font-size:10px; text-transform:uppercase; font-weight:bold; color:#aaa }
#partners ul { list-style:none; display:block; height:100px }
#partners li { float:left; text-align:center; width:20% }
#partners a, #partners a .hover { height:100px; position:relative; display:block; background-position:top center; background-repeat:no-repeat; border:0; margin:0 auto }
#partners a * { display:none }

	/* Clases para cada partner */
	#partners a.microsoft, #partners a.microsoft .hover { background:url(img/partners/microsoft.jpg) 0 0 no-repeat; width:124px }
	#partners .fade a.microsoft:hover, #partners a.microsoft .hover { background-position:0 -100px; width:124px }
	#partners a.dell, #partners a.dell .hover { background:url(img/partners/dell.jpg) 0 0 no-repeat; width:164px }
	#partners .fade a.dell:hover, #partners a.dell .hover { background-position:0 -100px; width:164px }
	#partners a.apc, #partners a.apc .hover { background:url(img/partners/eaton.jpg) 0 0 no-repeat; width:184px }
	#partners .fade a.apc:hover, #partners a.apc .hover { background-position:0 -100px; width:184px }
	#partners a.mge, #partners a.mge .hover { background:url(img/partners/mge.jpg) 0 0 no-repeat; width:124px }
	#partners .fade a.mge:hover, #partners a.mge .hover { background-position:0 -100px; width:124px }
	#partners a.seagate, #partners a.seagate .hover { background:url(img/partners/seagate.jpg) 0 0 no-repeat; width:184px }
	#partners .fade a.seagate:hover, #partners a.seagate .hover { background-position:0 -100px; width:184px }
	#partners a.esonde, #partners a.esonde .hover { background:url(img/partners/esonde.jpg) 0 0 no-repeat; width:184px }
	#partners .fade a.esonde:hover, #partners a.esonde .hover { background-position:0 -100px; width:184px }

#portfolio h3 { display:block; padding:8px 12px 8px 12px; margin-bottom:5px; font-weight:bold; font-size:20px; color:#fff; text-shadow:#000 1px 1px 0; border-bottom:1px solid #333 }
#portfolio li { margin:0 0 20px 0 }
#portfolio .enlace { background:url(img/bordes_portfolio_home.png) no-repeat; width:280px; height:180px; position:absolute; top:0; left:0; z-index:5 }
#portfolio .boxgrid{ width:280px; height:120px; float:left; background:#222; overflow:hidden; position:relative }
#portfolio .boxgrid img { position:absolute; top:0; left:0; border:0 }
#portfolio .boxgrid p { padding:0 12px; font-size:10px; text-transform:uppercase; color:#777; font-weight:bold; text-shadow:#000 1px 1px 0 }
#portfolio .boxgrid a { color:#bbb }

#portfolio.seccionweb li { margin-right:20px }

a.baner { display:block; padding:0 0 20px 0; width:280px; height:60px; float:left }

/* #SECCIONS ----------------------------------------------------------------------------------------------------------------------------------- */

/* Empresa */
.fotopersona { float:right }
.persona { border:1px solid #eee; padding:18px 20px 5px 20px; margin-bottom:20px }
.persona h2 { height:20px }
.persona img { margin-left:20px }

/* Formulari de contacte */
.form_lateral			{ padding:0; width:320px; margin-right:20px }
#cos .form_lateral h2		{ border-top:1px solid #ddd; padding-top:16px; margin-bottom:5px }
#cos .form_lateral p		{ padding:0 0 20px 0 }
#cos .form_lateral .horario { background:url(img/ico64_reloj.png) right top no-repeat; padding:0 80px 0 0 }
#cos .form_lateral .direccion { background:url(img/ico64_mapa.png) right top no-repeat; padding:0 80px 0 0 }
#cos .form_lateral .formico { background:url(img/ico_form.png) right top no-repeat; padding:0 80px 20px 0 }

#cos .wpcf7-form					{ background:#f2f2f2 url(img/bg_form.png) left top no-repeat; padding:20px 24px; float:right; width:520px; margin-bottom:10px }
#cos .wpcf7-not-valid-tip-no-ajax	{ margin-left:192px; color:#900 }
#cos .wpcf7-response-output			{ border:2px solid #c00; padding:10px 20px; margin:10px 0 0 0; background-color:#ffd }

#form_contacto .focus		{ border:1px solid #212121; color:#000; background-color:#ffd }
#form_contacto em				{ color:#b00; font-weight:bold }
#form_contacto input		{ height:20px }
#form_contacto li			{ display:block; padding:0 0 8px 0 }
#form_contacto label		{ display:block; color:#333; width:192px; height:26px; line-height:28px; float:left; padding-bottom:1px }
#form_contacto label img	{ vertical-align:middle; border:2px solid #fff; margin-left:10px }
#form_contacto .boto input	{ width:120px; height:31px; font-size:12px; cursor:pointer; margin-left:192px; font-weight:bold; border:1px solid #000; background-color:#555; color:#fff }
#form_contacto textarea		{ height:10em }
#form_contacto input, #form_contacto textarea, #form_contacto select		{ border:1px solid #ccc; background-color:#fff; width:312px; padding:4px; color:#555 }

#cos a.boton_ayuda { height:64px; margin-top:15px; display:block; clear:both; line-height:64px; padding-left:60px; font-size:15px; color:#777; background:url(img/boton_masayuda.png) left top no-repeat }
#cos a.boton_ayuda strong { color:#777 }
#cos a.boton_ayuda:hover { background-position:bottom left; text-decoration:none; line-height:65px }
#cos a.boton_ayuda:hover, #cos a.boton_ayuda:hover strong { color:#600 }


/*Peu */
#peu .wrap { position:relative }
#peu p.datos { width:520px; background:url(img/ico_peu.png) left center no-repeat; padding:0 0 0 78px; height:64px; margin-top:8px; line-height:20px }
#peu strong { color:#ddd }
#peu a { color:#999; text-decoration:underline }
#peu a:hover { color:#f90 }

#peu .sublinks { float:right; font-size:11px; width:250px }
#peu .sublinks li a { float:right; margin-left:7px; padding-right:8px; text-decoration:none; border-right:1px solid #555; line-height:12px }
#peu .sublinks li a.legal { border-right:0; padding-right:0 }
#pb { display:block; height:32px; width:32px; position:absolute; bottom:0; right:0 }