@charset "UTF-8";
/* CSS Document */

@import url(reset.css);

.clear { clear: both; }
 
/* Estructura */

#contenedor-principal { background-color: #069 !important; }
#contenido-principal { width: 100%; background-color: #fff; }
h1 { height: 150px; width: 200px; float: left; background: url(../interface/kraft-constructora-logotipo.jpg) no-repeat center center; text-indent: -1000px; }
h2.titulo-seccion { margin-bottom: 10px; color: #069 !important; padding: 20px 20px 20px 10px; font-size: 30px !important; border-bottom: #069 1px solid; }
#columna-izquierda, #columna-derecha { width: 450px; float: left; margin-left: 10px; padding: 10px; color: #fff; }
#columna-izquierda { background-color: #036; }
#columna-derecha {  }

	/* Hoja de Producto */
	#columna-descripcion { background-color: #3F9; }
	div.mas-imagenes { }
	div#listado { background-color: #fff; padding: 10px; }
	a.imagen-adicional { padding: 10px 0 10px 10px; width: 190px; background-color: #fff; display: block; float: left; margin: 5px; }
	
	/* Servicios */
	div.servicios { padding: 10px; }
	ul.lista-servicios { padding: 10px; display: block;  }
	ul.lista-servicios li { display: block; margin: 0 15px 15px 0; width: 450px; float: left; }
	ul.lista-servicios li p { padding: 5px; width: 270px; font-size: 14px; width: 100% !important; color: #333 !important; }
	ul.lista-servicios li h3 { text-transform: uppercase; font-weight: bolder; color: #036 !important; }
	
	/* Propiedades */
	div.propiedades-venta, div.propiedades-renta {  }
	
	div.propiedades-venta { display: block;  width: 440px; float: left; color: #333; }
	div.propiedades-renta { display: block;  width: 440px; float: left; color: #333; margin: 0 10px 0 10px; }
	div.propiedades-portafolio { display: block;  width: 440px; float: left; color: #333; margin: 0 10px 0 10px; }
	
	div.propiedades-renta p { margin-bottom: 10px; padding-bottom: 5px; color: #333 !important; }
	div.propiedades-venta p { margin-bottom: 10px; padding-bottom: 5px; color: #333 !important; }
	div.propiedades-portafolio p { margin-bottom: 10px; padding-bottom: 5px; color: #333 !important; }
	
	div.propiedades-renta h2 { color: #036; }
	div.propiedades-venta h2 { color: #036; }
	div.propiedades-portafolio h2 { color: #036; }
	
	li.propiedades { display: block; margin-bottom: 15px; width: 450px; }
	
	p.propiedades-desc { padding: 5px; width: 270px; float: right; font-size: 14px; }
	p.propiedades-desc a { text-decoration: none; }
	div.imagen-propiedad { background-color: #069; width: 150px; height: 92px; padding: 5px; float: left; }
	h3.titulo-propiedades { color: #036 !important; float: right; width: 275px; text-transform: uppercase; font-weight: bolder; }
	div.imagen-principal { padding: 10px;}
	
	/* Listado Portafolio */
	ul.listado-portafolio { display: block; height: inherit; width: 960px; }
	ul.listado-portafolio li { float: left; margin-right: 10px; }
	
/* Fonts */
div.confirmacion p, div.fullpage, ul.lista-servicios li p, #menu-principal li a, #columna-izquierda, #columna-derecha, h2, div.propiedades-renta p,  div.propiedades-venta p, div.propiedades-portafolio p, h3 { font-family: 'Open Sans', sans-serif; color: #FFF; }

/* Textos */
#columna-izquierda p, #columna-derecha p, #columna-izquierda ul, #columna-derecha ul, h2 { margin-bottom: 10px; font-size: 14px; line-height: 25px;}
	/* Titulos */
	h2, #menu-principal li a { text-transform: uppercase;}
	h2 { font-size: 20px;}

#menu-principal { height: 150px;  background: url(/interface/fondo-encabezado.jpg) repeat-x; }
#menu-principal-ul { height: 50px; display: block; }
#menu-principal li { float: left; }
#menu-principal li a {  text-decoration: none; padding: 20px 10px 0 10px; background-color:#036; display: block; height: 30px; float: left; margin-top: 100px; }
#menu-principal li a:link { color: #fff; }  
#menu-principal li a:visited { color: #fff; background-color:#036; }
#menu-principal li a:hover { background-color: #c33; text-decoration: none; }
#menu-principal li a:active {}
	
	/*  DropDown */
	#menu-principal-ul{
    list-style:none;
    font-weight:bold;
	}
	#menu-principal-ul li {
		position:relative;
	}
	#menu-principal-ul a{
	
	}
	/*--- DROPDOWN ---*/
	#menu-principal-ul ul{
		background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
		background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
		list-style:none;
		position:absolute;
		top: 150px;
		left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	}
	#menu-principal-ul ul li{
		float:none;
		background-color: #9cc;
	}
	#menu-principal-ul ul a { 
		white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
		text-decoration: none;
		margin: 1px 0 1px 0;
		
	}
	#menu-principal-ul li:hover ul{ /* Display the dropdown on hover */
		left:0; /* Bring back on-screen when needed */
	}
	
	#menu-principal-ul > li > ul > li > a { display: block; width: 150px;}
	
	#menu-principal-ul li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
		text-decoration: none;
	}
	#menu-principal-ul li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
		text-decoration:none;
	}
	#menu-principal-ul li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
		background:#333;
		text-decoration: none;
	}
	/*  DropDows */
	
/* Boton Inicio */
#menu-principal-ul li a.inicio { text-transform: uppercase; text-decoration: none; padding: 20px 20px 0 20px; background: #036 url(/interface/inicio-icono.png) no-repeat center center; display: block; height: 30px; float: left; }
#menu-principal-ul li a.inicio:link { color: #fff; text-indent: -10000px; background: #036 url(/interface/inicio-icono.png) no-repeat center center; padding: 20px 20px 0 20px;}  
#menu-principal-ul li a.inicio:visited { text-indent: -10000px; background: #036 url(/interface/inicio-icono.png) no-repeat center center; padding: 20px 20px 0 20px;}
#menu-principal-ul li a.inicio:hover { color: #666; text-indent: -10000px; background: #036 url(/interface/inicio-icono.png) no-repeat center center; padding: 20px 20px 0 20px;}
#menu-principal-ul li a.inicio:active { text-indent: -10000px; background: #036 url(interface/inicio-icono.png) no-repeat center center; padding: 20px 20px 0 20px;}

/* Boton Facebook */
#menu-principal-ul li a.facebook { text-transform: uppercase; text-decoration: none; padding: 20px 20px 0 20px; background: #036 url(/interface/facebook-icono.png) no-repeat center center; display: block; height: 30px; float: left; }
#menu-principal-ul li a.facebook:link { color: #fff; text-indent: -10000px; background: #036 url(/interface/facebook-icono.png) no-repeat center center; padding: 20px 20px 0 20px;}  
#menu-principal-ul li a.facebook:visited { text-indent: -10000px; background: #036 url(/interface/facebook-icono.png) no-repeat center center; padding: 20px 20px 0 20px;}
#menu-principal-ul li a.facebook:hover { color: #666; text-indent: -10000px; background: #036 url(/interface/facebook-icono.png) no-repeat center center; padding: 20px 20px 0 20px;}
#menu-principal-ul li a.facebook:active { text-indent: -10000px; background: #036 url(/interface/facebook-icono.png) no-repeat center center; padding: 20px 20px 0 20px;}

/* Miscelaneos */
div#info-cont ul { }
ul#info-de-contacto {   }
ul#info-de-contacto li { padding-left: 40px; }
ul.datos-contacto { border-bottom: #FFF dotted 1px; margin-bottom: 10px; padding-bottom: 10px; }
div.fullpage { color: #036 !important;  }
div.fullpage > .datos-contacto > li { margin-bottom: 15px;}
div.confirmacion p { background-color: #FFC; text-align: center; width: 920px; border: 1px #0099FF dashed; padding: 20px; margin: 10px 0 20px 0; color: 
#333 !important; }


form {
  max-width: 300px;
  padding: 10px 20px;
}


input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: #e8eeef;
  color: #8a97a0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 30px;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0 4px 8px 0;
}

select {
  padding: 6px;
  height: 32px;
  border-radius: 2px;
}

button {
  padding: 10px;
  color: #FFF;
  background-color: #069;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  border-radius: 5px;
  width: 150px;
  border: 0;
  margin-bottom: 10px;
}

fieldset {
  margin-bottom: 30px;
  border: none;
}

legend {
  font-size: 1.4em;
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-family: 'Open Sans', sans-serif; 
}

label.light {
  font-weight: 300;
  display: inline;
}

.number {
  background-color: #5fcf80;
  color: #fff;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  border-radius: 100%;
}

@media screen and (min-width: 480px) {

  form {
    max-width: 480px;
  }

}