@import url("reset.css");


body {
  color: #636262;
	background: #FFFFFF;
	font: 62.5%/1.8em Verdana, Arial, Helvetica, sans-serif;
}

#container-bg {
  background: url(images/wrap.gif) no-repeat 50% 0;
}

.container {
  width: 900px;
  margin: 0 auto;
  font-size: 1.1em;
}

#content {
  padding: 20px 20px 20px 0;
  
}

#text { width:620px;
}




/*----------	CoMMoN STYLeS	----------*/
a { color: #78869E; text-decoration: underline; }
a:hover { text-decoration: none; }
h1 {
	font-size:35px;
	font-family: "Britannic Bold";
	color:#FFFFFF;
	padding: 20px 0 0 10px;
	line-height: 30px;
	font-weight:200;
}

h2, h3, h4 {
  color: #3e80ab;
  padding: 10px 0;
  font-weight: normal;
}

h2 { font-size: 2.1em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
strong { font-weight: bold; }
hr { border: none; border-bottom: 1px solid #0068AA; margin: 10px 0; }
p { margin: 15px 0; }
ul { margin: 10px 30px; list-style-type: square; }

.clear { display: block; clear: both; }
.hidden { display: none; }
.left { float: left; }
.right { float: right; }
.big_font { font-size: 1.3em; margin: 0 0 0 20px; }
.top { border-top: 1px solid #CA8D91; text-align: right; font-size: 0.9em; margin: 10px 0; }

#mudmap { margin: 10px; float: right; }



/*----------	HeaDeR STYLeS	----------*/
#header {
  padding: 0 0 20px 0;
  background: url(images/bg.gif) repeat;
}

#header .container {
  height: 256px;
  position: relative;  
}

#header #logo {
  top: 34px;
  left: 0;
  position: absolute;
 
}
.log {
  top: 34px;
  left: 0;
  position: absolute;
  background:url(images/logo.png) no-repeat;
  width: 238px;
  height: 201px
 
}

#header img#freecall{top: 230px; left:0; position:absolute;}


/*----------	BaNNeR STYLeS	----------*/
#header #banner {
  top: 0px;
  left: 270px;
  position: absolute;
  width: 645px;
  height: 224px;
  display: block;
  overflow: hidden;
  background: url(images/banner-bg.gif) no-repeat;
}



#header #banner img {
  top: 0;
  left: 11px;
  position: absolute;
}



/*----------	NaVIGaTIoN STYLeS	----------*/
#nav {
  top: 224px;
  left: 270px;
  position: absolute;
  height: 32px;
}
#nav ul { list-style-type: none; margin: 0; }
#nav ul li { display: inline; float: left; }
#nav ul li a { display: block; height: 32px; text-indent: -9999px; }
#nav ul li a:hover { background-position: 0 -32px !important; }
#nav li#inicio a { background: url(images/inicio.gif) no-repeat; width: 52px; }
#nav li#servicios a { background: url(images/servicios.gif) no-repeat; width: 110px; }
#nav li#galeria a { background: url(images/galeria.gif) no-repeat; width: 150px; }
#nav li#consejos a { background: url(images/consejos.gif) no-repeat; width: 138px; }
#nav li#empresa a { background: url(images/empresa.gif) no-repeat; width: 93px; }
#nav li#contacto a { background: url(images/contacto.gif) no-repeat; width: 79px; }

#p-inicio li#inicio a,
#p-servicios li#servicios a,
#p-galeria li#galeria a,
#p-consejos li#consejos a,
#p-empresa li#empresa a,
#p-contact li#contacto a {
  background-position: 0 -32px !important;
}



/*----------	CTa STYLeS	----------*/
#cta-column {float:left; width:250px; padding:0 20px 0 0;}

#ctas {
  padding: 0 0 20px 0;
  background: url(images/bg.gif) repeat;
}
#ctas a { color: #FFFFFF; }
#ctas p { margin: 10px 0; }

#p-home #cta-address {
  width: 229px;
  height: 153px;
  display: block;
  color: #FFFFFF;
  overflow: hidden;
  margin: 0 20px 0 0;
  padding: 30px 0 0 20px;
  background: url(images/tlf_contacto.jpg) no-repeat;
}

#cta-address {
  width: 229px;
  height: 153px;
  display: block;
  color: #FFFFFF;
  overflow: hidden;
  margin: 0 20px 0 0;
  padding: 30px 0 0 20px;
  background: url(images/tlf_contacto.jpg) no-repeat;
}

#cta-address a {
  color: #a4c9ff;
}

#p-home #garantia {
  width: 229px;
  height: 153px;
  display: block;
  color: #FFFFFF;
  overflow: hidden;
  margin: 0 20px 0 0;
  padding: 30px 0 0 20px;
 
}

#garantia {
	width: 229px;
	height: 153px;
	display: block;
	color: #636262;
	overflow: hidden;
	margin: 0 20px 0 0;
	padding: 30px 0 0 20px;
	background: url(images/bg_garantiaservicios.jpg) no-repeat;
}

#valor a {
  color: #a4c9ff;
}


#valor {
	width: 229px;
	height: 153px;
	display: block;
	color: #636262;
	overflow: hidden;
	margin: 0 20px 0 0;
	padding: 30px 0 0 20px;
	background: url(images/bg_valor.jpg) no-repeat;
}

#valor a {
  color: #a4c9ff;
}

#solucion {
	width: 229px;
	height: 153px;
	display: block;
	color: #636262;
	overflow: hidden;
	margin: 0 20px 0 0;
	padding: 30px 0 0 20px;
	background: url(images/bg_solucion.jpg) no-repeat;
}

#solucion a {
  color: #a4c9ff;
}

#contact {
	width: 229px;
	height: 153px;
	display: block;
	color: #636262;
	overflow: hidden;
	margin: 0 20px 0 0;
	padding: 30px 0 0 20px;
	background: url(images/bg_contacto.jpg) no-repeat;
}

#contact a {
  color: #a4c9ff;
}


#clientes {
	width: 229px;
	height: 153px;
	display: block;
	color: #636262;
	overflow: hidden;
	margin: 0 20px 0 0;
	padding: 30px 0 0 20px;
	background: url(images/bg_clientes.jpg) no-repeat;
}

#clientes a {
  color: #a4c9ff;
}


#cta-mycolour {
  width: 249px;
  height: 183px;
  display: block;
  color: #FFFFFF;
  overflow: hidden;
  margin: 20px 20px 0 0;
}

#cta-commercial {
  width: 290px;
  height: 153px;
  display: block;
  margin: 0 19px 0 0;
  overflow: hidden;
  line-height: normal;
  padding: 30px 0 0 15px;
  background: url(images/bgempresa.jpg) no-repeat;
}

#cta-residential {
  width: 286px;
  height: 153px;
  display: block;
  overflow: hidden;
  line-height: normal;
  padding: 30px 0 0 20px;
  background: url(images/bgcontacto.jpg) no-repeat;
}

#cta-roof {
float:left;
	width: 235px;
	height: auto  ;
	margin: 0 20px 0 0;
	line-height: normal;
	padding: 30px 0 0 15px;
	background: url(images/bgservicios.jpg) no-repeat;
}

#cta-roof_1 {
    float:left;
	width: 235px;
	height: 380px;
	margin: 0 20px 0 0;
	line-height: normal;
	padding: 30px 0 0 15px;
	background: url(images/pintoresmadrid_18.png) no-repeat;
}

#cta-roof_1 p { margin: 10px 0; }
#cta-roof_1  a { color: #FFFFFF; }
#cta-roof_2 {
    float:left;
	width: 235px;
	height: 380px;
	margin: 0 20px 0 0;
	line-height: normal;
	padding: 30px 0 0 15px;
	background: url(images/pintoresmadrid_20.png) no-repeat;
}

#cta-roof_2 p { margin: 10px 0; }
#cta-roof_2  a { color: #FFFFFF; }


#cta-roof_3 {
    float:left;
	width: 235px;
	height: 380px;
	margin: 0 20px 0 0;
	line-height: normal;
	padding: 30px 0 0 15px;
	background: url(images/pintoresmadrid_23.png) no-repeat;
}

#cta-roof_3 p { margin: 10px 0; }
#cta-roof_3  a { color: #FFFFFF; }

#cta-roof_4 {
    float:left;
	width: 235px;
	height: 380px;
	margin: 0 20px 0 0;
	line-height: normal;
	padding: 30px 0 0 15px;
	background: url(images/pintoresmadrid_25.png) no-repeat;
}

#cta-roof_4 p { margin: 10px 0; }
#cta-roof_4  a { color: #FFFFFF; }



#cta-roof p { margin: 10px 0; }
#cta-roof a { color: #FFFFFF; }



/*----------	FooTeR STYLeS	----------*/
#footer {
  font-size: 0.9em;
  color: #78869E;
  background-color: #E0E6F2;
  height: 50px;
  padding: 10px 0;
  margin-top:20px;
}
#footer p { margin: 0; }
#footer a { text-decoration: none; color: #78869E; }
#footer a:hover { text-decoration: underline; }
#footer #affiliates { float: right; }
#footer #affiliates img { margin: 0 10px 0 0; }

div#affiliates ul li {float:left; display:block; margin-right:15px; }
#affiliatescontainer { width:900px; display: block; margin:0 auto;}

/*----------	GaLLeRY STYLeS	----------*/
ul#gallery {
	width: 700px;
	margin: 0 auto;
	list-style-type: none;
}

ul#gallery li {
  float: left;
  display: inline;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border:2px solid #2e475a;
  margin:15px 20px 8px 0;
}


.content_colum {
	width:245px;
	margin: 0 24px 0 0;
	float:left;
	height:auto;
}