@import url("reset.css");


body { background: #000 url(../img/f-header.jpg) no-repeat center top;}

#contacto.english, #portfolio.english, #inicio.english, #promociones.english{ background: #000 url(../img/f-header-english.jpg) no-repeat center top;}


#container { width: 99.5em; margin: 0 auto 10em; clear: both;}

#header h1 { float: left; display: inline;}
#header h1 a { display: block; text-indent: -9999px; overflow: hidden; font-size: 1em; width: 55em; height: 12.6em;}
*:first-child + html #header h1 a { height: 12.7em;}
* html  #header h1 a { height: 12.7em;}

#util { float: right; display: inline; padding: 5em 5em 0 0; position: relative; z-index: 35;}
#util div { text-align: center; float: left; display: inline;}
#util div a { display: inline; margin-left: 1.5em;}
#util div a:first-child { margin: 0;}
#util span { font: 1.1em/1em Arial, Helvetica, sans-serif; color: #aaa; text-align: center; display: block; clear: both; position: relative; top: -1em;}
#util .rss { margin-left: 5em; position: relative;}
#util .rss a { margin: 0;}

#util .rss .capa { position: absolute; left: -22em; top: 0em; z-index: 100; width: 18.3em; border: solid 1px #636363;  background: #050505 url(../img/bg-rss.gif) repeat-x left top; text-align: left; padding: 1em; }
* html #util .rss .capa  { width: 23em; left: -27em;}

#util .rss .capa li { margin-top: 1em; background: url(../img/ico-rss-mini.gif) no-repeat left top;  padding: 0 0 0.2em 3em;}
#util .rss .capa li:first-child { margin: 0;}
#util .rss .capa li a {  font: 1.2em/1em Arial; color: #7d7d7d;}


/*navegacion con hover*/
#nav { clear: both; margin-bottom: 3.5em;}
*:first-child + html #nav { margin-left: -0.4em;}
* html #nav { margin-left: -0.4em;}
#nav li { float: left; display: inline; position: relative; }
#nav li a, #nav li span { display: block; background: url(../img/s-menu.gif) no-repeat left top; text-indent: -9999px; overflow: hidden; height: 6em; cursor: pointer; }
#nav.english li a, #nav.english li span { background: url(../img/s-menu-english.gif) no-repeat left top; }

/*navegacion english*/
#nav.english li.inicio a { width: 7.2em;}
#nav.english #marcado.inicio a, #nav.english .inicio span { background-position: left -6em;}

#nav.english li.quienes a { width: 7.9em; background-position: -7.2em top;}
#nav.english #marcado.quienes a, #nav.english .quienes span  { background-position: -7.2em -6em;}

#nav.english li.regalo a { width: 13.4em; background-position: -15.1em top;}
#nav.english #marcado.regalo a, #nav.english .regalo span  { background-position: -15.1em -6em;}

#nav.english li.textil a { width: 8.6em; background-position: -28.5em top;}
#nav.english #marcado.textil a, #nav.english .textil span  { background-position: -28.5em -6em;}

#nav.english li.imagen a { width: 11.3em; background-position: -37.1em top; *background-position: -37.1em top;}
#nav.english #marcado.imagen a, #nav.english .imagen span  { background-position: -37.1em -6em; *background-position: -37.1em -6em;}

#nav.english li.marketing a { width: 10.9em; background-position: -48.4em top; *background-position: -48.6em top;}
#nav.english #marcado.marketing a, #nav.english .marketing span  { background-position: -48.4em -6em; *background-position: -48.6em -6em;}

#nav.english li.design a { width: 7.9em; background-position: -59.3em top; * background-position: -59.6em top;}
#nav.english #marcado.design a, #nav.english .design span  { background-position: -59.3em -6em; *background-position: -59.6em -6em;}

#nav.english li.merchandisign a { width: 13.9em; background-position: -67.2em top; *background-position: -67.6em top;}
#nav.english #marcado.merchandisign a, #nav.english .merchandisign span { background-position: -67.2em -6em; *background-position: -67.6em -6em;}

#nav.english li.promociones a { width: 8.7em; background-position: -81.1em top; *background-position: -81.4em top;}
#nav.english #marcado.promociones a, #nav.english .promociones span  {background-position: -81.1em -6em; *background-position: -81.4em -6em;}

#nav.english li.contacto a { width: 9.7em; background-position: -89.8em top; *background-position: -90.2em top;}
#nav.english #marcado.contacto a, #nav.english .contacto span  { background-position: -89.8em -6em; *background-position: -90.2em -6em; }

#nav.english li .sub-nav { position: absolute; left: 0; bottom: -2em; width: 99em; padding-left: 1em; }
#nav.english li .sub-nav li a { background: none; border-left: solid 1px #595959; float: left; display: inline; width: auto; height: auto; text-indent: 0; font: 1.1em/1.2em Arial, Helvetica, sans-serif; margin-left: 0.5em; padding-left: 0.5em;}
#nav.english li .sub-nav li:first-child a { border: none; margin: 0; padding: 0;}

/*navegacion spanish*/
#nav li.inicio a { width: 6.7em;}
#nav #marcado.inicio a, #nav .inicio span { background-position: left -6em;}

#nav li.quienes a { width: 8.4em; background-position: -6.7em top;}
#nav #marcado.quienes a, #nav .quienes span  { background-position: -6.7em -6em;}

#nav li.regalo a { width: 10.7em; background-position: -15.1em top;}
#nav #marcado.regalo a, #nav .regalo span  { background-position: -15.1em -6em;}

#nav li.textil a { width: 7.2em; background-position: -25.8em top;}
#nav #marcado.textil a, #nav .textil span  { background-position: -25.8em -6em;}

#nav li.imagen a { width: 10.8em; background-position: -33em top; *background-position: -33.1em top;}
#nav #marcado.imagen a, #nav .imagen span  { background-position: -33em -6em; *background-position: -33.1em -6em;}

#nav li.marketing a { width: 10.7em; background-position: -43.8em top; *background-position: -43.9em top;}
#nav #marcado.marketing a, #nav .marketing span  { background-position: -43.8em -6em; *background-position: -43.9em -6em;}

#nav li.design a { width: 8em; background-position: -54.5em top; * background-position: -54.7em top;}
#nav #marcado.design a, #nav .design span  { background-position: -54.5em -6em; *background-position: -54.7em -6em;}

#nav li.merchandisign a { width: 14.3em; background-position: -62.5em top; *background-position: -62.7em top;}
#nav #marcado.merchandisign a, #nav .merchandisign span { background-position: -62.5em -6em; *background-position: -62.7em -6em;}

#nav li.promociones a { width: 12.7em; background-position: -76.8em top; *background-position: -77.1em top;}
#nav #marcado.promociones a, #nav .promociones span  {background-position: -76.8em -6em; *background-position: -77.1em -6em;}

#nav li.contacto a { width: 10em; background-position: -89.5em top; *background-position: -89.9em top;}
#nav #marcado.contacto a, #nav .contacto span  { background-position: -89.5em -6em; *background-position: -89.9em -6em; }

#nav li .sub-nav { position: absolute; left: 0; bottom: -2em; width: 99em; padding-left: 1em; }
#nav li .sub-nav li a { background: none; border-left: solid 1px #595959; float: left; display: inline; width: auto; height: auto; text-indent: 0; font: 1.1em/1.2em Arial, Helvetica, sans-serif; margin-left: 0.5em; padding-left: 0.5em;}
#nav li .sub-nav li:first-child a { border: none; margin: 0; padding: 0;}


#flash { margin-bottom:  5em;}

/*columnas derecha e izquierda*/
#col-i { width: 64em; float:  left; display: inline;}
#col-d { width: 31em; float:  right; display: inline; }


#col-i .mod-texto { background: url(../img/f-separador.gif) no-repeat center bottom; padding-bottom: 5em; margin-bottom:  4.5em;}
#col-i .mod-texto h2 { font: 4em/1em Impact, Arial; color: #fff; text-transform: uppercase;}
#col-i .mod-texto h2 span { font:  0.42em/1em Trebuchet MS,Arial Narrow, Arial; display: block; clear: both; color:  #7d695a; text-transform: uppercase; padding-bottom: 0.5em; background: url(../img/bg-tit.gif) repeat-x left bottom; margin-bottom:  2.7em;}
#col-i .mod-texto p { font: 1.2em/1.3em Arial; color:  #999999; margin-bottom:  1em;}

/*Listado de items*/
#col-i .items {}
#col-i .items li { float:  left; display: inline; width: 30em; height: 32em; margin-left:  4em;}
* html #col-i .items li { margin-left: 3em;}
#col-i .items li.nomargin { margin: 0;}/*clase que metemos con jquery para que los margenes los cojan solo los imapares en los items*/
#col-i .items li h3 { font: 2.6em/1em Impact, Arial; color: #fff; text-transform: uppercase; margin-bottom:  0.7em; padding-left:  0.3em;}
#col-i .items li h3 strong { color: #575757; font-weight:  normal;}
#col-i .items li img { padding: 1em; background: #1d1d1d; border: solid 1px #3a3a3a; margin-bottom: 2.53em;}
#col-i .items li p { font: 1.2em/1.3em Arial; color: #999999; padding-left:  0.8em; margin-bottom: 1em;}
a.info, a.info-marcado { display: block; text-indent:  -9999px; overflow: hidden; background: url(../img/btn-info.gif) no-repeat right top; padding: 0.5em 0; font-size: 1.1em;}
a.info-marcado { background: url(../img/btn-info-marcado.gif) no-repeat right top;}
a.info:hover {background: url(../img/btn-info-marcado.gif) no-repeat right top;}

/*Jcarousel*/
.carousel {}
.carousel .inner { position: relative; }
.carousel .jcarousel-clip { position: relative; width: 27em; height: 37em; overflow: hidden;}
* html .carousel .jcarousel-clip { height: 31.7em}
.carousel .jcarousel-clip ul.c { position: absolute; left: 0; top: 0;}
.carousel .jcarousel-clip .jcarousel-item { float: left; display: inline; width: 27em; height: 30.5em; }
.carousel .btn { cursor: pointer; background: #fe0000; height: 3em; width: 4em; position: absolute; bottom: 0.5em; z-index: 15; text-indent: -9999px; overflow: hidden; background: url(../img/s-jcontroles.gif) no-repeat left top; }

.carousel .jcarousel-prev { right: 4em; background-position: left top;}
.carousel .jcarousel-next { right: -1em; background-position: right top;}
* html .carousel .jcarousel-prev { right: 5em;}
* html .carousel .jcarousel-next { right: 0;}

.carousel .jcarousel-prev-disabled { background-position: left bottom;}
.carousel .jcarousel-next-disabled { background-position: right bottom;}


/*modulos*/
#col-d .mod { background: url(../img/f-mod.jpg) no-repeat center center; border: solid 1px #222; height: 35em; padding: 1em 2em 2em; margin-bottom: 4em;}
#col-d .mod h3 { font: 2.6em/1em Impact, Arial; color: #fff; text-transform: uppercase; margin-bottom:  0.7em; padding-left:  0.3em; text-align: right;}
#col-d .mod h3 strong { color: #575757; font-weight:  normal;}

/*banner flash*/
#col-d .banner { margin-bottom:4em;}

/*modulo clientes*/
#col-d .clientes { overflow:  visible; margin-bottom: 8em; padding: 1em;}
#col-d .clientes .carousel .jcarousel-clip { width: 29em;}
#col-d .clientes .carousel .jcarousel-clip .jcarousel-item { width: 29em;}
#col-d .clientes ul.item { width: 32em; margin-left: -1em;}
#col-d .clientes .item li { float: left; display: inline; }

/*modulo newsleter*/
#col-d .newsletter { height:auto;}
#col-d .newsletter p { font: 1.2em/1.7em Trebuchet MS; color: #fff; text-align: justify;}
#col-d .newsletter form { padding-top: 1.5em;}
#col-d .newsletter form strong { color: #ff4800;}
#col-d .newsletter form label {font: 1.2em/1.5em Trebuchet MS; color: #fff; display: block;}
#col-d .newsletter form input.texto { margin-bottom: 0.5em; display: block; font: 1em/1em Trebuchet MS; width: 26.5em; border: solid 1px #fff;}
#col-d .newsletter form p { text-align: center; margin-bottom: 1em;}
#col-d .newsletter form .enviar { text-align: center; display: block; width: 7.75em; margin:  0 auto; background: #242424; border: solid 1px #464646; color: #fff; padding: 0.5em 0; }
*:first-child+html #col-d .newsletter form .enviar { padding: 0.2em 0;}
*html #col-d .newsletter form .enviar { padding: 0.2em 0;}

/*modulo noticias*/
#col-d .noticias li li { font: 1.2em/1.5em Trebuchet MS; color: #fff; background: url(../img/bg-doblelinea.gif) repeat-x left bottom; padding-bottom: 0.5em; margin-bottom: 2.5em;}
#col-d .noticias li li.ultimo { background: none; margin: 0;}
#col-d .noticias li li a.info { font-size: 0.9em; padding: 0; margin-top:1em;}

/*modulo presupuesto*/
#col-d .presupuesto { background: url(../img/bg-presupuesto.gif) repeat-x left top; height: 18.8em;}
#col-d .presupuesto p { font: 1.2em/1.7em Trebuchet MS; color: #fff; text-align: justify;}
#col-d .presupuesto a { display: block; text-align: center;}

/*modulo google maps*/
#col-d .google-maps {}
#col-d .google-maps h2 { font: 4em/1em Impact, Arial; color: #fff; text-transform: uppercase;}
#col-d .google-maps h2 span { font: 0.45em/1em Arial Narrow, Arial; display: block; clear: both; color:  #7d695a; text-transform: uppercase; padding-bottom: 0.5em; background: url(../img/bg-tit.gif) repeat-x left bottom; margin-bottom:  2.7em;}
#col-d .google-maps iframe { border: solid 1px #717171; padding: 0.1em;}
#col-d .google-maps a { font: 1em/2em Arial; color: #595959; display: block; text-align: right;}


/*promociones*/
.promo { margin-bottom: 3em;}
.promo h2 { font: 4em/1em Impact, Arial; color: #fff; text-transform: uppercase;}
.promo h2 span { font:  0.42em/1em Trebuchet MS,Arial Narrow, Arial; display: block; clear: both; color:  #7d695a; text-transform: uppercase; padding-bottom: 0.5em; background: url(../img/bg-tit.gif) repeat-x left bottom; margin-bottom:  2.7em;}

.promo li { float:  left; display: inline; width: 18em; margin-right: 4em; position: relative; z-index: 30;}
.promo li.ultimo { margin: 0;}
.promo li h3 { font: 2.3em/1em Impact, Arial; color: #fff; text-transform: uppercase; margin-bottom:  0.7em; padding-left:  0.3em;}
.promo li h3 strong { color: #575757; font-weight:  normal;}
.promo li img { padding: 1em; background: #1d1d1d; border: solid 1px #3a3a3a; margin-bottom: 2.53em;}

.promo li .capa { position: absolute; left: 20em; bottom: 4.9em; z-index: 30; width: 23.5em; background: url(../img/bg-capa-promo.png) repeat left top; padding: 1em; border: solid 1px #333;}
.promo li .capa dt { font: bold 1.2em/1.2em Arial; color: #7d695a; float: left; display: inline; margin-right:  0.3em;}
.promo li .capa dd { font: 1.2em/1.2em Arial; color: #b4b4b4; margin-bottom: 0.4em;}


/*contacto*/
#contacto #col-i .mod-texto { background:  none; padding-bottom:  0;}

#contacto #col-i .inner-container {}
#contacto #col-i .inner-container .col-i { float: left; display: inline; background: #0f0f0f; border: solid 1px #222; width: 20.8em; margin-right: 1em;}
#contacto #col-i .inner-container .col-d { float: right; display: inline; background: #0f0f0f; border: solid 1px #222; width: 41.3em;}

#contacto #col-i .inner-container h3 { font: 1.2em/1em Arial; color: #fff; text-transform: uppercase; padding: 1em; background: #1b1b1b; margin: 1px 1px 2em;}

#contacto #col-i .inner-container p {font: 1.2em/1.4em Arial; color: #616161; padding: 0 1.2em; margin-bottom: 1em;}
#contacto #col-i .inner-container p strong { font-weight: normal; color: #fff; display: block;}
#contacto #col-i .inner-container dl { padding: 0 1.5em 0.5em;}
#contacto #col-i .inner-container dt { font: 1.2em/1.3em Arial; color: #616161; float: left; dislplay: inline; margin-right: 0.4em;}
#contacto #col-i .inner-container dd { font: 1.2em/1.3em Arial; color: #616161; margin-bottom: 0.2em;}
#contacto #col-i .inner-container dd a { color: #7d695a;}

#contacto #col-i .inner-container .col-d h3 { margin-bottom: 0;}
#contacto #col-i .inner-container .col-d .aviso { float: right; display: inline; font: 0.9em/1em Arial; color: #595959; padding: 0; margin: 1.4em;}
#contacto #col-i .inner-container .col-d form { padding: 1.5em;}
#contacto #col-i .inner-container .col-d form .error { margin: 0; padding: 1em; border: solid 1px #3e3e3e; margin-bottom: 1em;}
#contacto #col-i .inner-container .col-d form .error strong { color: #ff0000}

#contacto #col-i .inner-container .col-d form fieldset {margin-bottom: 1em;}
#contacto #col-i .inner-container .col-d form fieldset legend {display: none;}
#contacto #col-i .inner-container .col-d form fieldset p { float: left; display: inline; margin: 0 1em 0 0; padding: 0;}
#contacto #col-i .inner-container .col-d form fieldset p .focus { border: solid 1px #7D695A;}
#contacto #col-i .inner-container .col-d form fieldset .ultimo { margin: 0;}
#contacto #col-i .inner-container .col-d form fieldset label { font: 1em/1em Arial; color: #595959; display: block; margin-bottom: 0.3em;}
#contacto #col-i .inner-container .col-d form fieldset label span { color: #7d695a; font: 0.7em/1em Arial;}
#contacto #col-i .inner-container .col-d form fieldset .texto { display: block; background: #1b1b1b; border: solid 1px #222; width: 16.9em; font: 0.9em/1em Arial; color: #b9b9b9; }
*:first-child + html #contacto #col-i .inner-container .col-d form fieldset .texto { width: 16.8em;}
* html #contacto #col-i .inner-container .col-d form fieldset .texto { width: 16.7em;}
#contacto #col-i .inner-container .col-d form fieldset textarea.texto { width: 35em; height: 12em;}
*:first-child + html #contacto #col-i .inner-container .col-d form fieldset textarea.texto { width: 35em; height: 12em;}

#contacto #col-i .inner-container .col-d form .btn-enviar { float: right; display: inline; font: 1.2em/1em Arial; color: #595959; background: #1b1b1b; border: solid 1px #222; padding: 0.3em 1.4em; margin-right: 0.3em;}


/*portfolio*/
#portfolio {}
#portfolio #col-i .mod-proyectos h2 { font: 4em/1em Impact, Arial; color: #fff; text-transform: uppercase;}
#portfolio #col-i .mod-proyectos h2 span { font:  0.42em/1em Trebuchet MS,Arial Narrow,Arial; display: block; clear: both; color:  #7d695a; text-transform: uppercase; padding-bottom: 0.5em; background: url(../img/bg-tit.gif) repeat-x left bottom; margin-bottom:  2.7em;}

#portfolio #col-i .mod-proyectos li { margin-bottom: 3.5em;}
#portfolio #col-i .mod-proyectos li h3 { font: 1.4em/1em Trebuchet MS; color: #fff; text-transform: uppercase; margin-bottom: 0.7em;}
#portfolio #col-i .mod-proyectos li .mod-img { position: relative; margin-bottom: 2.5em;}
#portfolio #col-i .mod-proyectos li img { padding: 1em; background: #1d1d1d; border: solid 1px #3a3a3a;}
#portfolio #col-i .mod-proyectos li .logo { position: absolute; right: 1.1em; top: 1.1em; z-index: 30; padding: 0; border: none; background: none;}
*:first-child + html #portfolio #col-i .mod-proyectos li .logo { right: 0.7em;}
#portfolio #col-i .mod-proyectos li .logo img { padding: 0; border: none; background: no-repeat;}
#portfolio #col-i .mod-proyectos li .btn-ampliar { position: absolute; left: 1.1em; bottom: 1.1em; z-index: 30;}
* html #portfolio #col-i .mod-proyectos li .btn-ampliar { bottom: 1.3em;}
#portfolio #col-i .mod-proyectos li .btn-ampliar img { padding: 0; border: none; background: none;}

#portfolio #col-i .mod-proyectos li h4 { font: 1.2em/1em Trebuchet MS; color: #7d695a; text-transform: uppercase; background: url(../img/bg-doble-dotted.gif) repeat-x left bottom; padding-bottom: 0.7em; margin: 0 0 1.5em 0.8em;}

#portfolio #col-i .mod-proyectos li dl { padding-left: 1em;}
#portfolio #col-i .mod-proyectos li dt { font: 1.2em/1em Trebuchet MS; color: #7d695a; float: left; display: inline; background: url(../img/s-proyectos-info.gif) no-repeat left top; padding: 0.4em 0 0.5em 0.4em; width: 11em; margin-right: 1em; clear: left;}
#portfolio #col-i .mod-proyectos li .clientes {}
#portfolio #col-i .mod-proyectos li .tecnologia { background-position: left -22px;}
#portfolio #col-i .mod-proyectos li .descripcion { background-position: left -45px;}
#portfolio #col-i .mod-proyectos li .url { background-position: left -67px;}
#portfolio #col-i .mod-proyectos li dd { font: 1.2em/1.3em Arial; color: #999999; margin-bottom: 0.7em; float: left; width: 40em; padding: 0.4em 0 0;}
#portfolio #col-i .mod-proyectos li dd a { color: #fff;}





/*pie*/
#footer { background: url(../img/f-footer.gif) no-repeat center top; padding: 16em 0 5em; width: 100%; clear: both; }
#footer .inner { width: 99.5em; margin: 0 auto; clear: both;}

#footer .inner .site-map { width: 80em; margin: 0 auto 2.5em;}
#footer .inner .site-map li { float: left; display: inline; border-left: solid 1px #6e6e6e; margin-left: 0.5em; padding-left: 0.5em;}
#footer .inner .site-map li:first-child { margin: 0; padding: 0; border: none;}
#footer .inner .site-map li a { font: 1.1em/1em Arial, Helvetica, sans-serif; color: #6e6e6e;}

#footer .inner .validate { width: 90em; margin: 0 auto 2.5em;}
#footer .inner .validate  li { float: left; display: inline; margin-right: 2.5em;}

#footer .inner p { text-align: center; font: 1.2em/1em Arial, Helvetica, sans-serif; color: #545454;}

#footer .inner .logos { margin-bottom: 14.6em; text-indent:-9999px;}
#footer .inner .logos img { margin-right: 1em;}