@import "reset.css";

body {
	font-family: 'Lucida Sans', 'Trebuchet ms';
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	background: #000;
}

#doc {
	min-height: 600px;
	background: url('../images/bg_doc.png') no-repeat center 0px;
}

	#doc.home {
		background: url('../images/bg_doc_home.jpg') no-repeat center 0px;
	}
	
	#doc.about {
		background: url('../images/bg_doc_about.jpg') no-repeat center 0px;
	}
	
	#doc.portfolio {
		background: url('../images/bg_doc_portfolio.jpg') no-repeat center 0px;
	}
	
	#doc.contact {
		background: url('../images/bg_doc_contact.jpg') no-repeat center 0px;
	}

#container {
	width: 960px;
	margin: 0 auto;
}

	#header {
		height: 105px;
		margin: 0;	
	}
	
		#logo {
			padding: 10px 0 0 20px;
			float: left;
		}
		
		#logo a {
			display: block;
		}
	
		#topnavigation {
			float: left;
			padding: 30px 0 0 20px;
		}
	
			#topnavigation li {
				float: left;
				width: 120px;
				height: 30px;
				margin: 0 10px;
			}
			
			#topnavigation li a {
				color: #fff;
				display: block;
				line-height: 30px;
				height: 30px;
				width: 120px;
				text-align: center;
				background: url('../images/bg_menu_a.png') no-repeat center 0px;

			}
			
			#topnavigation li a:hover,
			#topnavigation li a.active {
				color: #ffbf00;
				background: url('../images/bg_menu_a.png') no-repeat center -30px;
			}
	
	
	#content {
		position: relative;
		border-bottom: 1px solid #2f2e28;
	}
	
		#maincontent {
			padding: 10px 0;
			border-top: 1px solid #150d02;
		}
			#introduction {
				padding: 20px;
				width: 200px;
				float: left;
				font-size: 16px;
				font-style: italic;
				line-height: 25px;
			}
		
			#carrousel {
				margin: 0 0 0 240px; 
				width: 670px;
				height: 195px;
				position: relative;
				overflow: hidden;
				padding: 15px 25px;
				background: url('../images/bg_carrousel.png') no-repeat 10px 0px;
			}
			
				#carrousel .carrousel li {
					display: block;
					position: relative;
					float: left;
					height: 195px;
					width: 670px;
				}

				#carrousel .carrousel .overlay {
					position: absolute;
					top: 0px;
					left: 475px;
					z-index: 39;
					width: 195px;
					height: 195px;
					background: #000;
					filter:alpha(opacity=80);
					-moz-opacity: 0.8;
					opacity: 0.8;
				}
				
				#carrousel .carrousel .message {
					position: absolute;
					top: 0;
					left: 475px;
					width: 175px;
					height: 175px;
					padding: 10px;
					z-index: 40;
					color: #fff;
					font-size: 14px;
					text-transform: uppercase;
				}
				
				#carrousel ul.carrouselnav {
					position: absolute;
					top: 175px;
					left: 20px;
					height: 20px;
					padding: 10px;
					z-index: 50;
					
				}
				
					#carrousel ul.carrouselnav li {
				        float: left;
				    }
				    
				    #carrousel ul.carrouselnav li a {
				    	display: block;
				    	height: 20px;
				    	line-height: 20px;
				    	text-align: center;
				        color: #fff;
				        padding: 0 5px 0 0;
				
				    }
				    
				    #carrousel ul.carrouselnav li.activeSlide a,
				    #carrousel ul.carrouselnav li a:hover {
				    	color: #ffbf00;
				    }
			
			
			#aboutme {
			}
			
				#aboutme h2,
				#aboutme p,
				#aboutme ul,
				#aboutme blockquote {
					margin-left: 20px;
					margin-right: 20px;					
				}
				
				#aboutme .image {
					float: right;
					margin: 0 10px 0 30px;
				}	
				
				#aboutme .hiddennav {
					display: none;
				}
			
			#subnavigation	{
				padding: 20px;
				width: 200px;
				float: left;
			}
			
				#subnavigation li {
					padding: 0 0 20px 0;
				}
				
				#subnavigation ul li {
					padding: 0 0 0 5px;
				}
			
				#subnavigation a {
					color: #fff;
					padding: 0 5px;
					display: block;
					line-height: 25px;
					margin: 0 0 5px 0;
					background: url('../images/bg_subnavigation_active.png') no-repeat 0px -25px;
				}
			
				#subnavigation a.active,
				#subnavigation a:hover {
					color: #eaaf00;
					background: url('../images/bg_subnavigation_active.png') no-repeat 0px 0px;
				}
				
				
		
			#gallery {
				width: 720px;
				margin: 0 0 0 240px;
			}
			
				#gallery h2,
				#gallery h3,
				#gallery p,
				#gallery ul,
				#gallery blockquote {
					margin-left: 20px;
					margin-right: 20px;					
				}
				
				#gallery .image {
					float: left;
					margin: 10px;
				}	
				
				#gallery .totalimage {
					font-size: 12px;
					color: #fff;
				}
			
			#contact {
				float: left;
				width: 720px;
			}
			
				#contact h2,
				#contact p,
				#contact ul,
				#contact blockquote {
					margin-left: 20px;
					margin-right: 20px;					
				}
				
				#contact .image {
					float: right;
					margin: 0 10px 0 30px;
				}
				
				#contact .hiddennav {
					display: none;
				}	
			
			#address {
				margin: 0 20px 0 740px;
				width: 200px;
			}
			
		#subcontent {

		}

			#subcontent #left,
			#subcontent #right {
				width: 440px;
				padding: 20px;
				float: left;
			}
			
		#footer {
			border-top: 1px solid #150d02;
			padding: 20px
		}
		
		#footer p {
			font-size: 10px;
			padding: 0;
		}
			


.item + .item {
	padding: 20px 0 0 0;
}			

h1 {
	font-size: 22px;
	line-height: 25px;
	color: #eaaf00;
	padding: 0 20px 5px;
	border-bottom: 1px solid #2f2e28;
}

/*
h1 + p {
	padding-top: 20px;
	padding-bottom: 10px;
}

*/
h2 {
	font-size: 18px;
	color: #eaaf00;

}

h2 + p,
h2 + ul,
h2 + form,
h2 + blockquote,
h2 + .image + p{
	padding-top: 20px;
	padding-bottom: 10px;
}

h3 {
	font-size: 16px;
}

h3 + p,
h3 + ul,
h3 + form,
h3 + address {
	padding-top: 20px;
	padding-bottom: 10px;
}



#left ul li,
#right ul li,
#gallery ul li,
.item ul li {
	padding-left: 15px;
	background: url('../images/bg_bullet.png') no-repeat left top;
}

p {
	padding-top: 10px;
}

blockquote {
	padding: 10px 30px 0;
	text-align: center;
	font-style: italic;
	background: url('../images/bg_blockquote.gif') no-repeat 50% 15px;
}

blockquote p {
	padding: 0;
}

blockquote span {
	display: block;
	text-align: right;
	color: #ececec;
}

p + p,
p + ul,
p + form,
p + blockquote,
ul + ul,
ul + p,
ul + form,
ul + blockquote,
form + blockquote,
form + p,
form + ul,
blockquote + p,
blockquote + ul,
blockquote + form
blockquote + blockquote {
	padding-top: 10px;
	padding-bottom: 10px;
}


ul + h2,
ul + h3,
p + h2,
p + h3 {
	margin-top: 20px;
}

.image {
	padding: 15px;
	width: 200px;
	height: 160px;
	padding: 10px;
	background: url('../images/bg_image.png') no-repeat center center;

}

.image img {
	border: 1px solid #eaaf00;
	margin: 4px;
}

.image + p {
	padding-bottom: 10px;
}

a {
	color: #eaaf00;
	text-decoration: none;
}

a.readmore {
	display: block;
	width: 130px;
	height: 25px;
	line-height: 22px;
	font-size: 12px;	
	text-align: center;
	font-style: italic;

	margin: 15px 0 15px auto;
	background: url('../images/bg_a_readmore.png') no-repeat left center;
}

a.actionbutton {
	display: block;
	width: 300px;
	height: 35px;
	line-height: 30px;
	margin: 15px 0 15px auto;
	text-align: center;
	font-style: italic;
	background: url('../images/bg_a_actionbutton.png') no-repeat left center;
}


fieldset {
	padding: 0 0 5px 0;
}

input.text {
	height: 25px;
	width: 280px;
	padding: 3px 9px 5px;
	display: block;
	border: 1px solid #009ee0;
	margin: 0 0 10px 0;
	
}

input.submitbutton {
	display: block;
	width: 140px;
	height: 25px;
	line-height: 25px;
	padding: 0 0 0 10px;
	margin: 1px 0 10px auto;
	text-align: left;
	color: #696565;
	background: url('../images/bg_a_readmore.jpg') no-repeat left center;
	border: 0;
}

/* extra */

.clear:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clear { 
    display: block; 
}