/* MAIN STYLES
-------------------------------------------*/
* { margin: 0; padding: 0; }

body,html {
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#535353;
	margin:0;
	padding:0;
	background:url(../images/bg-body.jpg) top center;
	/*background-color:#3b4b4f;*/
	line-height:110%;
	height:100%;
}

ul { list-style: none;
	margin:20px 0 20px 10px;
	
 }

ul li {
	padding:5px 0;
	background:url(../images/arrows.gif) 0 8px no-repeat;
	padding-left:15px;
	position:relative;
	font-size:14px;
	line-height:16px;
}


a {
	color:#f5dd9d;
}

a:hover {
	text-decoration:none;
}

h1, h2, h3 {
	font-size:24px;
	letter-spacing:-1px;
	color:#455a59;
	font-weight:normal;
	padding:10px 0 5px;
}

h2 {
	font-size:18px;
	padding:5px 0 0;
}

h3 {
	font-size:14px;
	color:#333;
	padding:5px 0 0;
}

/* TEXT STYLES
--------------------------------------------------*/

.t12, a.t12{
font-size:12px;
}
.t14, a.t14{
font-size:14px;
}
.t18, a.t18{
font-size:18px;
}
a.semborda img {
border:none;
}
abbr,acronym,span.abbr{
cursor:help;
border-bottom:1px dashed #545454;
}
#content em {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	float:left;
	line-height:18px;
	margin: 20px 0 10px 10px;
	}

.imagem {
padding: 0px 20px 15px 0px;
float:left;

}


/* LAYOUT STRUCTURE
--------------------------------------------------*/

#wrapper {
	margin:0 auto;
	width:960px;
	height:100%;
	position:relative;
}

#logo {
	margin-left:25px;
	width:207px;
	height:187px;
}
#logo h1 {
	padding:0;
}

#logo h1 a, #logo h1 a:hover{
	background:url(../images/logo.png) 0 0 no-repeat;
	width:207px;
	height:187px;
	text-indent:-9000px;
	display:block;
	text-decoration:none;
	position:abosolute;
	top:0;
	
}
 #logo h1 a:hover{
	background:url(../images/logo-hover.png) 0 0 no-repeat;
	
}
#left {
	width:257px;
	background:url(../images/bg-left.jpg) #506266 0 0 no-repeat;
	float:left;
	}
#content-left {
	margin:30px 20px;
	color:#fff;
	height:400px;
	min-height:400px;
	
	}
#content-left h1 {
	background:url(../images/bg-left-h1.gif) 0 30px repeat-x;
	height:28px;
	font-size:22px;
	letter-spacing:-1px;
	color:#f5dd9d;
	font-weight:lighter;
	padding:10px 0 5px;	
	}
#content-left h2{
	font-size:20px;
	margin:10px 0 5px 0;
	color:#fff;
	padding:10px 0 5px;	
	}
#content-left p {
	margin-bottom:8px;
}

#middle {
	width:69px;
	float:left;
	margin-left:3px;
	background:url(../images/bg-middle.jpg) 0 0 no-repeat;
	
	}
#middle-content {
	margin-top:148px;
	text-align: center;
	margin-right:1px;
	height:585px;
	min-height:585px;
	}
#middle-content img {
	border:4px solid #fff;
	margin-top:10px;
	}	

#right {
	background:url(../images/bg-right.png) top left no-repeat;
	float:left;
	margin-left:3px;
	min-height:300px;
	min-width:400px;
	}
#content {
	width:590px;
	right:0;
	position:absolute;
	margin-bottom:50px;

}
#content img {
	border:none;
	margin-top:3px;
}
a.bg-projects{
	background:url(../images/bg-projects.gif) top left no-repeat;
	width:20px;
	height:20px;
	line-height:20px;
	margin:5px 3px 0 0;
	float:left;
	text-decoration:none;
	text-align:center;
	}
.left {
	float:left;
	margin:10px 5px 0 0;
	
	}
a.bg-projects:hover{
	background:url(../images/bg-projects-hover.gif) top left no-repeat;
	}
#content-text {
	margin:15px 0 20px 0;
	float:left;
	
	}
#content-text p{
	font:14px/16px Arial, Helvetica, sans-serif;
    margin:10px 0 0 0;
	}

#content a {
	color:#405657;
	}
#content h1{
	text-indent:-9000px;
	display:block;
	display:none;
}
#content h2 {
	font:24px/24px Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	color:#485758;
	padding:30px 0 2px 0;
	clear:both;
	}
#screenshot{
	position:absolute;
	border:1px solid #ccc;
	background:#777;
	padding:2px;
	display:none;
	color:#fff;
	}

#topMenu {
	position:relative;
	text-align:right;
	margin: 20px 0 0 0;
	float:right;
	margin-bottom:50px;
}

#topMenu li {
	float:left;
    padding:0;
	background:none;
	
}

#topMenu li a {
	font-size:11px;
	color:#425857;
	text-decoration:none;
	font-weight:bold;
	text-transform:uppercase;
	background:url(../images/bg-menu.png) 0 0 no-repeat;
	padding: 17px 10px 25px 10px;
	margin:10px 1px;
}
#topMenu li a:hover {
	background:url(../images/bg-menu-hover.png) 0 0 no-repeat;
	color:#000;
}

#topMenu li.selected a{
	color:#000;
	background:url(../images/bg-menu-hover.png) 0 0 no-repeat
}



#ribbon {
	width:163px;
	height:163px;
	position:absolute;
	right:0;
	top:0;
}
#ribbon img {
	border:0;
	}

/* CONTACT FORM
---------------------------------------------*/
.contactform fieldset {padding: 1em; border:1px solid #9f9f9f} 
.contactform fieldset legend {font-weight: bold;} 
.contactform div {width: 100%; padding: 0.25em 0 0.25em 0;} 
.contactform div label {display: block; width: 10em; } 
.contactform div.required {color: #545454;} 
.contactform input, .contactform textarea {border:1px solid #9f9f9f; background-color:#eeeeee;padding:3px} 
.contactform input:focus, .contactform textarea:focus{border:1px solid #485758; background-color:#ffffff;padding:3px} 
.error_message {color:#ff3e3b; font-weight:bold}
/* CAROUSEL
---------------------------------------------*/

.stepcarousel{
	position: relative; /*leave this value alone*/
	overflow: scroll; /*leave this value alone*/
	width: 589px; /*Width of Carousel Viewer itself*/
	height: 486px; /*Height should enough to fit largest content's height*/
	margin-top:12px;
	float:right;
}

.stepcarousel .belt{
	position: absolute; /*leave this value alone*/
	left:0;
	top: 0;
}

.stepcarousel .panel{
	background:url(../images/bg-featured.jpg) 0 0 no-repeat;
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	width: 589px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height:476px;
	position:relative;
}

.stepcarousel .panel .projectDetails {
	float:left;
	width:330px;
	margin:330px 0 0 25px;
	color:#333;
}
.stepcarousel .panel .projectDetailsRight {
	float:left;
	width:195px;
	margin:330px 0 0 25px;
	color:#333;
	z-index:0;
	position:relative;
	font-size:11px;
	line-height:12px;
}

.stepcarousel .panel .projectDetailsRight .title {
	font-size:12px;
	font-weight:bold;
	margin:0 0 5px 0;
}
.stepcarousel .panel .projectDetailsRight p {
	margin:0 0 6px 0;
}
.stepcarousel .panel .projectDetails p {
	margin-top:5px;
}
#content .lightbox img{
	border:3px solid #bbbbbb;
	}
#content .lightbox img:hover{
	border:3px solid #415656;
	}

.stepcarousel .panel .projectDetails .title {
	font-size:16px;
	font-weight:bold;
	color:#506264;
}


.stepcarousel .panel .projectImg {
	position:absolute;
	top:0px;
	left:4px;
}



/* CLEARING
---------------------------------------------------*/
.clearfix:after {
    content: "."; 
    display:block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {
	display: block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.clear {
	clear: both;
}

.noclear {
	clear: none;
}