@charset "utf-8";
/* CSS Document */
/*CLEARFIX*/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
html,body{
padding:0;
margin:0;
line-height: 1;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
/*FIN CLEARFIX*/

*{
padding:0;
margin:0;
}
body{
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
}
a{
display:block;
}
a img{
border:none;
}
#contenedor{
width:100%;
margin:0 auto 0 auto;
position: absolute;
top:50%;
margin-top:-270px;
height:540px;
overflow:hidden;
}
/*
div{
border:#FF0000 1px solid;
}
*/

#header{
padding-top:30px;
padding-bottom:30px;
background-image:url(../img/fondo-photographer.jpg);
background-repeat:no-repeat;
background-position: 23% 20px;
}
#gustavo-saiegh{
width:18%;
float:left;
text-align:center;
}
#photographer{
float: right;
width:80%;
height:37px;
margin-top:10px;
background-color:#000000;
text-align:left;
padding-left:3px;
}

/*  
    root element for the scrollable.  
    when scrolling occurs this element stays still.  
*/ 
div.scrollable { 
    position:relative;	
    overflow: auto;          
    height:357px;
	width:100%;	
	left:0px;
} 
div.contacto { 
    position:relative;	
    overflow: hidden;          
    height:337px;
	width:100%;	
	left:0px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:16px;
	padding-top:20px;
}
div#campos{
margin-bottom:13px;
}
div#campos label{
display: inline-block;
width: 101px;
}
div#campos div{
padding-bottom:7px;
}
div.columna-izq{
height:340px;
width:320px;
float:left;
text-align:right;
padding-right:15px;
}
input.boton{
margin-top:10px;
}
input.texto{
border:#999999 1px solid;
padding:2px;
width:300px;
} 
textarea{
border:#999999 1px solid;
padding:2px;
width:300px;
}

div.columna-der{
height:340px;
float:left;
width:370px;
text-align:left;
} 

div.centrador{
width:750px;
margin:0 auto 0 auto;
}
input.texto, textarea{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#999999;
font-size:10px;
font-style:italic;
}
/*  
    root element for scrollable items. Must be absolutely positioned 
    and it should have a super large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items {     
    /* this cannot be too large */ 
    width: 37360px;     
    position:absolute;
	left:0;
} 
 
/*  
    a single item. must be floated on horizontal scrolling 
    typically this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left;
	display:inline;
	width:auto;
	height:340px;
	overflow:hidden;
	
} 
 
/* you may want to setup some decorations to active item */ 
div.items div.active { 

    background-color:#fff; 
}
ul.tabs{
}
ul.tabs li{
float:left;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
padding:5px;
border:#CCCCCC 1px solid;
font-size:12px;
}
ul.tabs li:hover{
background-color:#CCCCCC;
}
h1{
font-size:62px;
color:#666666;
margin:0;
padding:0;
margin-top:-2px;
margin-bottom:30px;
}
h2{
font-size:46.1px;
color:#666666;
margin:0;
padding:0;
margin-top:20px;
}
#thumbs{
margin-top:5px;
margin-left:5px;

}
#thumbs ul{
padding:0;
margin:0;
width:400px;
float:left;
}
#thumbs li{
float:left;
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
padding-left:10px;
padding-top:10px;
}
#footer{
width:550px;
color: #666666;
float:right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
padding-top:12px;
padding-right:15px;
text-align:right;
background-color:#FFFFFF;
}
a{
height:20px;
}
#bt-porfolio a{
display:block;
background-image:url(../img/portfolio.jpg);
background-repeat:no-repeat;
width:80px;
}
#bt-porfolio a:hover{
background-image:url(../img/portfolio-on.jpg);
}
#bt-porfolio.activo a{
background-image:url(../img/portfolio-on.jpg);
background-repeat:no-repeat;
}
#bt-biografia a{
display:block;
background-image:url(../img/biografia.jpg);
background-repeat:no-repeat;
width:80px;
}
#bt-biografia a:hover{
background-image:url(../img/biografia-on.jpg);
}
#bt-biografia.activo a{
background-image:url(../img/biografia-on.jpg);
background-repeat:no-repeat;
}
#bt-contacto a{
display:block;
background-image:url(../img/contacto.jpg);
background-repeat:no-repeat;
width:80px;
}
#bt-contacto a:hover{
background-image:url(../img/contacto-on.jpg);
}
#bt-contacto.activo a{
background-image:url(../img/contacto-on.jpg);
background-repeat:no-repeat;
}

.cont-contacto{
background-image: url(../img/fondo-contacto.jpg);
background-repeat:no-repeat;
background-position: right 50%;
}
.cont-biografia{
background-image: url(../img/fondo-contacto.jpg);
background-repeat:no-repeat;
background-position: right 50%;
}
.mailto{
color:#666666;
}
.biografia{
margin-top:17px;
position:relative;
}
.biografia h2{
font-size:14px;
padding:0;
margin:0;
margin-top:10px;
margin-bottom:5px;
}
.biografia ul li{
font-size:11px;
list-style:none;
padding:5px;
line-height:14px;
}
.biografia .columna-der{
height:320px;
}
.ano{
color:#999999;
font-weight:bold;
}
.error{
color:#FF0000;
border: #FF0000 1px solid;
}