@charset "UTF-8";
body {
	background-color: #303030;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
}

body, body *{
margin: 0; /* reset margins and padding */
padding: 0;
}

.oneColFixCtr #container {
	width: 802px; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

a img{
border:none;
}

div#header{
	padding-left: 10px;
	padding-bottom: 80px;
}

div#header h1{
	height:47px;
	font-size:1px;
	width:699px;
	float:left;
	visibility:visible!important;
}

div#header a{
float:right;
height:31px;
font-size:1px;
display:block;
}

div#main{
	background:url(../slices/ProjectFile_06.jpg) no-repeat; /* left hand border */
	height: 534px;
	clear:both;
	position:relative;
}

#content{
width:766px;
position:relative;
left:18px;
}


img#main-background{
width:766px;
}

div#main div#content, div#main div#bg-buttons, div#portfolio, div#blog-flickr, div#flickr div.background, div#blog, div#flickr{
height: 534px; /* change one, change em all */
}

#footer{
margin-bottom:30px;
}

.control{
cursor:pointer;
}


/* background buttons */

div#main div#bg-buttons{
	float:right;
	width:18px;
	background:url(../slices/ProjectFile_08.jpg) repeat-y;
}

div#bg-buttons ul{
	position:relative;
	top:-20px;
	left:20px;
	float: left;
}

div#bg-buttons ul, div#bg-buttons ul li{
	list-style:none;
	line-height:1px;
	margin:0px;
	background-color: #FFFFFF;
	width: 46px;
	border: solid #FFFFFF thin;
}


/* collapsible panels */

.CollapsiblePanel{
border:none!important; /*overwrite default styles */
}

.CollapsiblePanelContent{
position:relative;
}


.CollapsiblePanelTab{
display:none; /* not part of the design, but needs to be included */
}


/* blog & flickr */

div#blog-flickr{
float:right;
position:relative;
width:378px;
}



/* flickr */

div#flickr{
float:right;
width:84px;
overflow:hidden;
}

div#flickr div.background{
background:#fff;
}

div#flickr .control{
position:absolute;
top:1px;
left:0;
}

div#flickr #flickr-images{
	position:absolute;
	top:0;
	left:13px;
}

div#flickr #flickr-images img{
border:1px solid #fff;
margin:1px 1px 0 1px;

}



/* blog */

div#blog{
	overflow:hidden;
	width:auto!important;
}

div#blog .CollapsiblePanelContent .background{
height: 517px;
}

div#blog .overlay{
padding:0 8px;
z-index:500;
overflow:hidden;
height:517px;
}

div#blog h4{
margin-top:15px;
color:#fff;
font-size:18px;
}



div#blog h5{
	padding-top:10px;
	border-top:1px dotted #fff;
	margin:10px 0 0 0;
	font-size:11px;
	font-weight:800;
}

div#blog h6{
	font-size:9px;
	margin:5px 0 10px 0;
}

div#blog h6, div#blog p a{
color:#ff8a00;
}


div#blog p{
	font-size:9px;
	line-height: 1.3;
}



/* portfolio */

div#portfolio{
float:left;
position:relative
}

div#portfolio, #portfolio-inner{
width:388px;
}


#portfolio-inner{
position:absolute;
bottom:0px;
min-height:1%;
}



#portfolio-inner div.background{
width:386px;
left:1px;
background:#fff;
/* for IE */
filter:alpha(opacity=45);
/* CSS3 standard */
opacity:0.45;
height:100%;
}

div.portfolio-section{
padding-left:1px;
position:relative;
}

div.portfolio-section .overlay{
padding-top:1px;
}



#portfolio-inner ul li{
	padding-left: 30px;
	padding-top: 7px;
	list-style-type: none;
	background-image: url(../slices/backViewreel.jpg);
	background-repeat: no-repeat;
	background-position: 10px 10px;
}


.portfolio-section .CollapsiblePanelContent{
height:89px; /* helps with slide animation to have a height specified if it contains floats */
overflow:hidden;
}

/* portfolio ajax */

.ajax_content{
overflow:hidden;
display:none;
}

#ajax-response{
height:406px;
text-align:center;
}


#ajax-response img{
display:block;
margin:0 auto;
padding:30px 0 0 0;
}

#ajax-response p{
margin:5px 30px;
text-align:justify;
font-size:10px;
color:#000000;
}


#ajax-response div.background{
display:none; /* this is just for IE6 which can't handle height:100% with no parent height fixed - and we can't set parent as the expand fails */
}

/* headers */

div.header{
margin-bottom:1px;
padding:4px 0 0 3px;
position:relative;
}

div.header a{
position:absolute;
top:1px;
z-index:20;
}

div.header a.show{
right:15px;
}

div.header a.hide{
right:1px;
}

div.header h3{
font-size:9px;
margin-right:30px;
}



#portfolio div.header{
background:#fff;
margin-right:1px;
}

#blog div.header{
background:#626262;
}

#portfolio div.header h3{
color:#000;
}

#blog div.header h3{
color:#fff;
}

div.background{
width:100%;
background:#000000;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
/* older mozilla */
-moz-opacity:0.6;
}

.background{
position:absolute;
top:0;
left:0;
z-index:0;
}

.overlay{
	z-index:10;
	position:relative;
}

#box {
	margin: 0pt auto;
	width: 97px;
	height: 97px;
	background: #4f8096;
	border: 1px solid #7199ab;
	}
	
.gradualshine{
filter:alpha(opacity=30);
-moz-opacity:0.3;
}
a {
	font-size: 18px;
	color: #000000;
	text-decoration: none;
}
#contacto {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	font-weight: bold;
	padding-left: 10px;
	padding-top: 5px;
}
#contacto a {
	font-size: 10px;
	background-color: #CCCCCC;
	line-height: 15px;
}