/*PROINTED- Proyectos integrales de Edificación*/
/*---------------------------------------------*/
/*StyleSheet /css/style.css*/
/*Design by gerGonzalez.com*/
/*09/07/2009*/
/*BASED ON BLUEPRINT CSS FRAMEWORK*/


/*RESET*/


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; }

/* TYPOGRAPHY*/ 
   
/*The font-size percentage is of 16px. (0.75 * 16px = 12px) */

body { 
  font-size: 75%;
  color: #595959;
  font-family: 'Century Gothic', Verdana, sans-serif;
  background-color:#151515;
}


/* Headings
-------------------------------------------------------------- */


h1,h2,h3{font-weight:bold;font-size:12px;padding:0px;margin:0px;float:none;font-style:normal;list-style:none;font-family:"Century Gothic",Verdana;line-height:1.5;color:#fff;
margin-bottom:6px;
}

h4{font-weight:bold;font-size:12px;padding:0px;margin:0px;float:none;font-style:normal;list-style:none;font-family:"Century Gothic",Verdana;line-height:1.5;color:#333;
}


h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
/*h2 { font-size: 2em; margin-bottom: 0.75em; }*/
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin: 0;
}


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.2em; }
p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus, 
a:hover     { color: #fafafa; }
a           { color: #595959; text-decoration: none; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; color:#e5e5e5 ;}
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre 				{ margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists
-------------------------------------------------------------- */

li ul, 
li ol       { margin: 0; }
ul, ol      { margin: 0; }

ul          { list-style-type: none; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables
-------------------------------------------------------------- */

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; }
thead th 		{ background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
tr.even td  { background: #e5ecf9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }

button{
	background:none;
	border:none;
	color:#595959;
	cursor:pointer;
	padding:0;
	margin: 0;
  	font-family: 'Century Gothic', Verdana, sans-serif;
}

button:hover{
	color:#fafafa;
}

/* Misc classes
-------------------------------------------------------------- */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }





/*LAYOUT*/

#wrapper{
	margin:0 auto;
	width:860px;
}

#header{
	height:62px;
}

#header h1{
	float:left;
	width:520px;
	height:22px;
	background: transparent url(../img/logo.jpg) no-repeat;
	text-indent:-9999px;
	margin: 20px 0 0;
}



ul#language{
	float:right;
	width:300px;
	height:22px;
	margin: 22px 0 0;	
	list-style-type: none;
	text-align:right;
}

ul#language li{
	display:inline;
}

#language li:hover img{
	opacity: 0.5;
	}

#language img:hover{
opacity: 0.5}




#detail{
	height:250px;
	float: left;
	margin-top:25px;
	
}

#services{
	float:left;
	width:305px;
	height:250px;
	margin-right:5px;
	}

#services li:hover{
	background:#222222;
	color:#fafafa;
	font-weight:bold;
	text-indent:5px;
	cursor:default;
}

#about{
	float:left;
	width:300px;
	height:128px;	
}

#clients{
	float:left;
	width:300px;
	height:125px;	
}

#contact{
	float:right;
	width:220px;
	height:125px;	
	text-align:right;
}

#contact li strong{
	color: #666;
	display:inline;
}

#social{
	float:right;
	text-align:right;
	width:220px;	
}

#content {
	height: 625px;
}


#footer{
	text-align:right;
	font-size:9px;
	height:15px;
}

#footer a{
	font-size: 1.15em;
	width:425px;
	font-weight:lighter;
	
}



#design{
	float:right;
}







ul.leftImg{
	float:left;
	height:84px;
	width:415px;
	background-color:#dadada;
	border-bottom:2px solid #E7E7E7;
}

li.leftImg{
	float:left;
}
li.leftImg img{
	margin:4px;
}

li.rightImg{
	float: right;

}
li.rightImg img{
	margin:3px;
}
li.leftText{
	float:left;
	width:320px;

}

li.leftText p{
	color:#474e5c;
	font-size: 1em;
	font-weight:lighter;
	line-height:1.4em;
	text-align:right;

}

li.leftText p strong{
color:#333;
}
li.rightText p strong{
color:#333;
}

li.rightText{
	float: right;
	width:320px;
	color:#474e5c;
	font-size: 1em;
	font-weight:lighter;
	line-height:1.4em;
}

li.rightText p{
	color:#474e5c;
	font-size: 1em;
	font-weight:lighter;
	line-height:1.4em;

}


.clientes{
	width:400px;
}
ul.clientes li{
float:left;

}


.name, .name_1, .name_2{
	cursor:pointer;}
	
.name:hover, .name:hover_1, .name:hover_2{
	color:#666;
	font-weight:bold;
}	

.name ul, .name_1 ul, .name_2 ul{
	font-size:9px;
}







 
/* container for external content. uses vertical scrollbar, if needed */ 
div.wrap { 
    height:441px; 
    width:600px; 
}



#comment_uni{
	z-index:1;
	position:absolute;
	text-align:center;
	background:#314112;
	filter:alpha(opacity=95);	
	opacity:0.95;
	padding: 10px 5px;
	width:535px;
	top: 0;
	margin-top:267px;
	
}

#comment_pluri{
	z-index:1;
	position:absolute;
	text-align:center;
	background:#697174;
	filter:alpha(opacity=95);		
	opacity:0.95;	
	padding: 10px 5px;
	width:535px;
	top: 0;
	margin-top:267px;
	
}


#comment_comercial{
	z-index:1;
	position:absolute;
	text-align:center;
	background:#172528;
	filter:alpha(opacity=95);		
	opacity:0.95;
	padding: 10px 5px;
	width:535px;
	top: 0;
	margin-top:267px;
	
}


#comment_golf{
	z-index:1;
	position:absolute;
	text-align:center;
	background:#2892a4;
	filter:alpha(opacity=95);	
	opacity:0.95;
	padding: 10px 5px;
	width:535px;
	top: 0;
	margin-top:267px;
	
}



#main {
	position:relative;
	overflow:hidden;
	height: 305px;
	margin-bottom:5px;
	width:545px;
}

/* root element for pages */
#pages {
	position:absolute;
	height:20000em;
}

/* single page */
.page {
	height: 305px;
	background:#333;
	width:545px;
}

/* root element for horizontal scrollables */
.scrollable {
	position:relative;
	overflow:hidden;
	width: 545px;
	height: 305px;
}

/* root element for scrollable items */
.scrollable .items {
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.item {
	float:left;
	cursor:pointer;
	width:545px;
	height:305px;
}

/* main navigator */
#main_navi {
	float:left;
	padding:0px !important;
	margin:0px !important;
	width:310px;
}

#main_navi li {
	float:left;
	background-color:#333;
	color:#FFFFFF;
	font-size:12px;
	height:150px;
	list-style-type:none;
	width:150px;
	cursor:pointer;
	margin-right:5px;
	margin-bottom:5px;
}

#main_navi li:hover {
}

li > strong{
	display:none;
}

li:hover strong{display:block;}

#main_navi li.active{
	cursor:default;
}

#main_navi li.active strong{
	display:block;

}

#main_navi li.active strong{
	opacity:0.95;
	background: ;
}

#main_navi img {
	margin-right:10px;
}

#main_navi strong {
	position: absolute;width:126px;height:126px; padding:12px; color:#C5CCBD;
}

#main div.navi {
	margin-left:250px;
	cursor:pointer;
}

#th1{
	background:transparent url(../img/nav.jpg) no-repeat 0 0;
}
#th2{
	background:transparent url(../img/nav.jpg) no-repeat -150px 0;
}
#th3{
	background:transparent url(../img/nav.jpg) no-repeat 0 -150px;
}
#th4{
	background:transparent url(../img/nav.jpg) no-repeat -150px -150px;
}


#th1:hover{
	background:transparent url(../img/nav_hover.jpg) no-repeat 0 0;
}
#th2:hover{
	background:transparent url(../img/nav_hover.jpg) no-repeat -150px 0;
}
#th3:hover{
	background:transparent url(../img/nav_hover.jpg) no-repeat 0 -150px;
}
#th4:hover{
	background:transparent url(../img/nav_hover.jpg) no-repeat -150px -150px;
}


#th1.active{
	background:transparent url(../img/nav_hover.jpg) no-repeat 0 0;
}
#th2.active{
	background:transparent url(../img/nav_hover.jpg) no-repeat -150px 0;
}
#th3.active{
	background:transparent url(../img/nav_hover.jpg) no-repeat 0 -150px;
}
#th4.active{
	background:transparent url(../img/nav_hover.jpg) no-repeat -150px -150px;
}


#decoration{
	list-style:none;
	width:860px;
	}

#decoration li{
	width:150px;
	background-color:#222;
	float:left;
	height:15px;
	margin-right:5px;
}
#decoration li.longer{
		width:545px;
}


#gallery{
	display:none;
}
 
#gallery .inactive { 
    visibility:hidden !important; 
}




a.backward, a.forward {
	text-decoration:none;
	color:#fafafa;
	cursor:pointer;
	position:absolute;
	display:block;
	z-index:2;
	width:60px;
	top: 270px;
	margin:5px;

}
a.backward{
	left:0;
	text-align:right;
}

a.forward{
	right:2px;	
}

a.backward:hover, a.forward:hover{
	color:#595959;
}

a.disabled {
	visibility:hidden !important;		
}




/* tabs */
.images_comercial div {
	position:absolute;
	overflow:hidden;
	cursor:pointer;
	height: 305px;
	width:545px;
}

.images_unifamiliar div, .images_plurifamiliar div, .images_golf div  {
	position:absolute;
	overflow:hidden;
	cursor:pointer;
	height: 305px;
	width:545px;
	display:none;
}


.tooltip { 
    display:none;
    font-size:8px;
	background:#222;
	color:#fafafa;
	opacity:0.8;
	padding: 10px 20px;
    width:175px;
    text-align:center;
    z-index:2;
}




/*gallery css*/


.gallery {
	
display:none;

 /* place overlay on top of other elements */
z-index:10000;

 /* styling */
background-color:#333;

width:600px;
min-height:200px;
border:1px solid #595959;

/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}

/* close button positioned on upper right corner */
.gallery .close {
background-image:url(../img/close.png);
position:absolute;
right:-17px;
top:-17px;
cursor:pointer;
height:28px;
width:28px;
}



.go, .goback {
	
	/* absolute positioning relative to the overlay */
	position:absolute;
	top:40%;	
	border:1px solid #595959;	
	cursor:pointer;
	display:block;
	padding:10px 20px;
	color:#fafafa;
	font-weight:bolder;
	font-size:11px;
		
}

.goback {
	left:0;
	border-left:0;

}

.go {
	right:0;
	border-right:0;

}

.go:hover, .goback:hover {
	text-decoration:underline;
	background-color:#000;
}

/* when there is no next or previous link available this class is added */
goback .disabled, go .disabled {
	display:none;		
}

/* the "information box" */
.info {
	position:absolute;
	bottom:0;
	left:0;	
	padding:10px 15px;
	color:#fafafa;
	font-size:11px;
	border-top:1px solid #595959;
	text-align:center;
}

.info strong {
	display:block;
	font-size:12px;	
}

/* progress indicator (animated gif). should be initially hidden */
.progress {
	position:absolute;
	top:45%;
	left:50%;
	display:none;
}

/* everybody should know about RGBA colors. */
.go, .goback, .info {
	background:#222 !important;
}


/*Overlay*/

/* the overlayed element */
.overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(../img/white_close.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:600px;
		
	/* some padding to layout nested elements nicely  */
	padding: 50px;
	
	text-align:left;

	/* a little styling */	
}


.overlay p{
	font-size:11px;
	}
/* default close button positioned on upper right corner */
.overlay div.close {
	position:absolute; left:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}

/*tooltip*/

/* tooltip styling */ 
.tooltip_cv, .tooltip_cv_1, .tooltip_cv_2 { 
    display:none; 
    background:url(../img/black_arrow_down.png); 
    height:70px; 
    width:160px; 
    padding: 35px 25px 25px;
    font-size:11px; 
    color:#fafafa; 
} 

.tooltip_cv a, .tooltip_cv_1 a, .tooltip_cv_2 a { 

    color:white; 
}