/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
.clear {clear:both}

a {color: #2CA6D2;}
.l {float:left;}
.r {float:right;}

img.l, img.r {margin: 0 0.5em 0.5em 0.5em; border: 0.25em solid #000 }

a:hover img.l, a:hover img.r {border-color: #0aF}

body,html {height:100%; text-align:center}
body {
    font-size: 75%; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
    color: #fff; 
    background: url(fondo.jpg) no-repeat center -50px  #000;
}
.wrapper{
    width: 1004px; margin:0 auto; text-align:left
    
}


span {display:block; position:absolute; left: -999em}



#header {position:relative; height:126px; }

#header cite {position:absolute;font-size: 133%; font-style: normal; display:block; width: 50%; height: 100%; right:0; top: 1em}

#header h1 a {width:100%; height:100%; display:block}
#header h1 {background: url(logo.png) no-repeat center bottom; width:322px; height:100px; display:block; text-indent: -999em ; position:absolute; padding-top: 10px;}
#header h1 em {background: url(metrolight.png) no-repeat center center; width:124px; height:47px; display:block; text-indent: -999em; position:absolute; top:0; right:0}


#body {background: url(pixel-000000-80.png); padding-bottom: 0.5em}

#menu {background: url(pixel-000000-80.png);}
#menu li {list-style-type:none; background: #000; display:block; float:left; }
#menu a { font-weight:bold; color: #fff}
#menu li.on a {color: #f90}

#menu .main li {padding: 1em;  margin-right: 1em}
#menu .lang {float:right; }
#menu .lang li {margin: 0.5em; padding: 0.5em; background:none}
#menu .lang li * {vertical-align:middle}
#menu .lang li a {text-decoration:none}
#menu .lang li a:hover {text-decoration:underline}

#body .body-gutter {padding: 1em}

#body .content h3 {color: #FF9900; font-size: 1.5em; margin-bottom: 1em}
#body .content h4 { font-size: 1.3em; margin-bottom: 1em}
#body .content h5 {font-size: 1.2em; font-weight:bold; border-bottom: 1px solid #000; margin-bottom:0.5em}
#body .content p {line-height: 1.5em; margin-bottom: 1.2em; padding-left: 1em}
#body .content ul {padding-left: 2em; margin: 1em}
#body .content em {color: #f0f; font-style:italic}



#body .col-2 .col{ width: 470px; float:left; margin-right: 10px}
#body .col-2 .col-last {margin-left:0}

#footer {padding-top: 1em}
#footer li {list-style-type: none; display:inline }
#footer .menu {float:left; width: 50%; text-align:left}
#footer .menu li {padding-left: 1em; background: url(bullet-dot.png) no-repeat left center}
#footer .menu li.f {background: none; padding:0}
#footer .menu li.on a {color: #f90}
#footer .menu a {text-decoration:none; color: #fff}
#footer .menu a:hover {text-decoration:underline}
#footer .copy {float:right; width: 50%; text-align:right}
#footer #company  {margin-top: 20px;height: 35px; background: url(grupo_castellot.jpg) no-repeat center top; }
#footer #company a {display:block; width:100%; height:100%}

#footer address {clear:both; display:block; text-align:center; padding-top: 10px; color: #f90}

a.btn-descargar {display:block; height: 32px; padding-left: 32px; line-height: 32px; background: url(btn-descargar.png) no-repeat left center; float:right; font-size: 1.2em}


/*SECCIONES*/


.home .content {float:right; width: 40%; padding: 2em 1em 0 0}
.home .showcase {float:left; width: 55%}
.home .showcase h2 {height: 190px; background: url(txt-tecnologia.png) no-repeat center center; text-indent:-999em; }
.home .showcase h2, #body .showcase p {width: 250px; }
.home .showcase h2, #body .showcase p { float:right; margin: 0.5em  ; text-align:right}
.home .showcase p  {background: #000;}
.home .showcase p img {width: 230px; height: 135px; background: #f0f; display:block; margin: 1em}
.home .showcase p a {display:block; width: 100%; height: 100%;padding-bottom: 32px; }
.home .showcase p.system_tread a {background: url(txt-system_tread.png) no-repeat right bottom}
.home .showcase p.system_muro a {background: url(txt-system_muro.png) no-repeat right bottom}
.home .showcase p.pure_colour a {background: url(txt-pure_colour.png) no-repeat right bottom}

.proyectos .showcase {text-align:center}
.proyectos .showcase a img {border: 0.25em solid #000}
.proyectos .showcase a:hover  img {border-color: #0af}

.interiores_exteriores h2{ height:200px; width:200px; background:url('txt-interiores_exteriores.png') no-repeat center  center; float:left; margin: 0 1em 0 0.5em}
.system_tread h2{ height:37px; background:url('txt-system_tread-title.png') no-repeat right  center;  margin: 0 1em 0 0.5em}
.pure_colour h2{ height:37px; background:url('txt-pure_colour-title.png') no-repeat right  center;  margin: 0 1em 0 0.5em}
.system_muro h2{ height:37px; background:url('txt-system_muro-title.png') no-repeat right center}


.contacto fieldset {padding:1.2em;margin:0 0 1.5em 0;border:0.25em solid #000; width:44em}
.contacto form {width:43em; float:left }
.contacto legend {font-weight:bold;font-size:1.2em; margin-left: -1.2em}
.contacto input.text, .contacto  input.title, .contacto  textarea,.contacto  select, .contacto fieldset input {margin:0.5em 0;border:1px solid #bbb; }
.contacto input.text {width:90%}
.contacto input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}
.contacto input.text, input.title {padding:0;}
.contacto input.title {font-size:1.2em;}
.contacto textarea {width:38em;}
.contacto form p {clear:both; }
.contacto label strong, label span, label small {display:block; position:static}
.contacto label {margin-bottom:0em}
.contacto form p.col-2 label {display:block;width:20em; float:left}
.contacto select {}

.contacto label small {color: #FDC600; white-space:pre }
.contacto form .errores {padding: 0.5em 0 0.5em 4em; border: 0.25em solid #000; background: #0aF; color: #FFF; margin-bottom: 1em; }
.contacto button {margin: 1em; border:0.25em solid #000; background: #fff; padding: 0.5em}

p img, li img {vertical-align:middle}
.localizacion .destacado { margin:1em;  font-size: 1.1em}
.localizacion .gmap {float:right; margin: 1em}