/* RESET CSS */

html, p, body, div, img, a, a:focus, a:active, a:hover, span, h1, h2, h3, h4, h5, h6, small, ul, ol, li, textarea {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-family: Helvetica, Arial, sans-serif;
	border: none;
	outline: none;
	background: none;
	text-decoration: none;
	
}

/* MASTER CSS RULES */

.clear{
	clear: both;
}

/* ------------------ HEADER --------------- */

#header{
	background: url(../images/header-bg.jpg) repeat-x;
}

	#header-container{
		width: 960px;
		height: 250px;
		margin: auto;
	}
	
	h1{
		cursor: pointer;
		width: 300px;
		height: 75px;
		float: left;
		margin: 20px 0 0 0;
		background: url(../images/logo.png);
		text-indent: -9999px;
	}
	
	ul#nav{
		list-style: none;
		display: block;
		float: right;
		padding: 0;
	}
	
		ul#nav li{
			display: inline;
			float: left;
		}
		
			ul#nav li a{
				float: left;
				text-transform: uppercase;
				font-family: Helvetica, Arial, sans-serif;
				font-size: .9em;
				color: #FFF;
				padding: 70px 20px 0 20px;
			}
			
				ul#nav li a:hover{
					color: #9632a0;
				}
			
				ul#nav li a.active{
					color: #9632a0;
					background: url(../images/nav-active.png);
				}
	
	h2 img{
		float: left;
		width: 960px;
		height: auto;
		margin: 30px 0 0 0;
}

/* ------------------ CONTENT --------------- */
		
#content-container{
	width: 960px;
	height: auto;
	min-height: 100%;
	margin: auto;
}

.small-line{
	color: #939598;
	font-size: .65em;
	font-weight: bold;
	text-transform: uppercase;
}

h3 a{
		font-size: 1.7em;
		font-weight: bold;
		color: #9632a0;
		margin: 0;
		padding: 0;
	}
		h3 a:hover{
			font-size: 1.7em;
			color: #525456;
		}
		
p{
	float: left;
	font-size: 0.83em;
	line-height: 1.5em;
	font-weight: normal;
	text-align: justify;
	color: #525456;
	margin: 0;
	padding: 0;
}
	p strong{
	font-weight: bold;
	color: #333333;
	}
	

	/* ---- recent-work ----- */
	#recent-work{
		float: left;
		width: 300px;
		height: 100%;
		margin: 30px 0 0 0;
	}
	
	a.img-recent-work{
		display: block;
		width: 300px;
		height: 200px;
		margin: 0 0 10px 0;
	}
	
	a.img-recent-work img#work-up{
		position: absolute;
		z-index: 2;
	}
	
	a.img-recent-work img#work-hover{
		position: relative;
		z-index: 3;
		display: none;
	}
	
		
	/* ---- recent-blog ----- */
	#recent-blog{
		float: left;
		width: 300px;
		height: 100%;
		margin: 30px 0 0 30px;
	}
	
	a.img-recent-blog{
		display: block;
		width: 300px;
		height: 200px;
		margin: 0 0 10px 0;
	}
	
	a.img-recent-blog img#blog-up{
		position: absolute;
		z-index: 2;
	}
	
	a.img-recent-blog img#blog-hover{
		position: relative;
		z-index: 3;
		display: none;
	}
	
	
	/* ---- promo-news ----- */
	
	a#promo-news{
		float: right;
		width: 300px;
		height: 380px;
		margin: 30px 0 0 0;
	}
	
	a#promo-news img#promo-up{
		position: absolute;
		z-index: 2;
	}
	
	a#promo-news img#promo-hover{
		position: relative;
		z-index: 3;
		display: none;
	}
	
	
/* ----- sobre-artista ----------- */
/* ARTISTA IMG ------- */

img#artist-img{
	float: left;
	margin: 30px 30px 0 0;
}


/* MAIN CONTENT ---------- */

div#main{
	float: left;
	width: 750px;
	height: auto;
	margin: 30px 0 0 0;
}

	div#artista-title{
		float: left;
		width: 740px;
		margin: 0;
		padding: 5px 0 5px 10px;
		background: #9632a0; 
	}
		h4#artista-title{
		color: #FFF;
		text-transform: uppercase;
		font-size: .85em; 
	}
	
	div.column01{
		float: left;
		margin: 10px 0 0 0;
		width: 350px;
		height: auto;
	}
	
	div.column02{
		float: right;
		margin: 10px 0 0 0;
		width: 350px;
		height: auto;
	}
	
	
	/* -- sobre-processo ---- */
	
	div#processo-title{
		float: left;
		width: 740px;
		margin: 30px 0 0 0;
		padding: 5px 0 5px 10px;
		background: #9632a0; 
	}
		h4#processo-title{
		color: #FFF;
		text-transform: uppercase;
		font-size: .85em;
	}
	
		span#subtitulos{
			font-size: 1.3em;
			color: #9632a0;
		}
		
		
		

/* ----- TRABALHOS -------------- */

/* Main Title --- */

div#projetos-title{
	float: left;
	width: auto;
	height: auto;
	margin: 30px 0 0 0;
	padding: 5px 10px 5px 10px;
	background: #9632a0;
}

h4#projetos-title{
	color: #FFF;
	text-transform: uppercase;
	font-size: .85em;
	padding: 0;
	margin: 0;
}


/* Gallery Section ----- */

div.gallery{
	float: left;
	width: 960px;
	height: auto;
	margin: 30px 0 0 0;

}

	div.work-wrap{
		float: left;
		width: 220px;
		height: auto;
		margin: 0 26px 60px 0;
	}
	
		div.work-wrap_right{
			float: right;
			width: 220px;
			height: auto;
			margin: 0 0 20px 0;
		}
	
	a.work-image{
		display: block;
		width: 220px;
		height: 150px;
		margin: 0 0 10px 0;
	}
		img.w_gallery-up{
			position: absolute;
			z-index: 2;
		}
		
		img.w_gallery-hover{
			position: relative;
			z-index: 3;
			display: none;
		}
		
h5.work-title{
	float: left;
	font-size: 1.2em;
	color: #9632a0;
	margin: 0 0 10px 0;
	padding: 0;
}


/* ----- TRABALHOS-SINGLE -------------- */

div#main_content{
	float: left;
	width: 960px;
	height: auto;
	margin: 30px 0 0 0;
}

/* WORK INFO ------- */

div#info-wrap{
	float: left;
	width: 300px;
	height: 500px;
}

	/* Work-Title */
	
	h5.work-titleSingle{
		float: left;
		font-size: 1.8em;
		color: #9632a0;
		margin: 0 0 10px 0;
		padding: 0;
	}
	
	/* Exp-Title */
	
	h6.exp-projeto{
		float: left;
		font-size: .9em;
		color: #333333;
		margin: 20px 0 0 0;
		padding: 0;
	}
	
		/* Exp-List */
		p#exp-list{
			float: left;
			color: #333333;
			font-weight: bold;
			width: 300px;
			margin: 5px 0 0 0;
		}

/* IMAGE SLIDER ------- */

div#slider-wrap{
	float: left;
	width: 650px;
	height: 600px;
	margin: 0 0 0 10px;
}

div#img-slider{
	float: left;
	display: block;
	width: 600px;
	height: 420px;
	margin: 0 0 0 25px;
	overflow: hidden;
	border: 1px solid #666;
}

	img#01{position: absolute; z-index: 2; }
	
	img#02{position: relative; z-index: 3; display: none; }

	img#01{position: relative; z-index: 4; display: none; }
	
	div#thumbs{
		float: left;
		width: 300px;
		height: 70px;
		margin: 10px auto auto 170px;
	}
	
		div.thumb-l{
			float: left;
			width: 70px;
			height: 70px;
			background: #069;
			margin: 0 41px 0 0;
			border: 1px solid #666;
		}
			div.thumb-r{
			float: right;
			width: 70px;
			height: 70px;
			background: #069;
			margin: 0;
			border: 1px solid #333;
		}
		
		
		
/* ---- BLOG Index ------ */

	/* --- Main Title --- */
	
	/* Main Title --- */

div#blog-title{
	float: left;
	width: auto;
	height: auto;
	margin: 30px 0 0 0;
	padding: 5px 10px 5px 10px;
	background: #9632a0;
}

h4#blog-title{
	color: #FFF;
	text-transform: uppercase;
	font-size: .85em;
}

	/* TEMPORÁRIO */
	
	div#blog-message-temp{
		float: left;
		width: 960px;
		height: 310px;
		margin: 30px 0 0 0;
	/*	background: #333;*/
	}
	
		p#message-blog{
			font-size: 1.2em;
		}


/* ----- CONTATO PAGE ---- */

div#main-contact{
	float: left;
	width: 960px;
	height: auto;
	margin: 30px 0 0 0;
}

	/* Contato-Title --- */
	
	div#contato-title{
		float: left;
		width: auto;
		height: auto;
		margin: 30px 0 0 0;
		padding: 5px 10px 5px 10px;
		background: #9632a0;
	}

	h4#contato-title{
		color: #FFF;
		text-transform: uppercase;
		font-size: .85em;
	}
	
	/* Sub-Title */
	
	h5#contato_subtitle{
		margin: 0;
		font-size: 1.5em;
		color: #9632a0;
		font-weight: normal;
	}
	
	
	/* Contato-Text */
	
	p#contato-text{
		float: left;
		width: 580px;
		height: auto;
		margin: 20px 0 0 0;
	}
	
		p#contato-text a{
			font-weight: bold;
			color: #3b3b3b;
		}



/* ----- FORM - Elements */
	
div#comments{
	float: left;
	width: 560px;
	height: auto;
	margin: 10px 0 0 0;
	padding: 0;
}

	
	div#comments label.person-name, div#comments label.person_email, div#comments label.person_website, div#comments label.person_message, div#comments label.submit {
		float: left;
		width: 540px;
		height: auto;
		margin-top: 10px;
		font-size: 1em;
		color: #5f6062;
		font-weight: bold;
	}
	
	#comments #name, #comments #email, #comments #website{
		float: left;
		width: 350px;
		height: 20px;
		margin-top: 5px;
		padding: 3px 3px 3px 3px;
		font-size: .85em;
		font-weight: lighter;
		color: #5f6062;
		background: #beb2c2;
		border: none;
		text-decoration: none;
	}
	
		#comments #mensagem{
			float: left;
			width: 350px;
			height: 200px;
			margin-top: 5px;
			color: #5f6062;
			padding: 3px 3px 3px 3px;
			font-size: .85em;
			font-weight: lighter;
			background: #beb2c2;
			border: none;
			text-decoration: none;
		}
	
		
		#comments form input#submit{
			float: left;
			width: 50px;
			height: 20px;
			margin: 191px 0 0 10px;
			font-size: .8em;
			font-weight: bold;
			color: #FFF;
			text-decoration: none;
			border: none;
			background: #9632a0;	
		}
		
			#comments form input#submit:hover{
				cursor: pointer;
				background: #c2c2c2;
				border: 1px solid #9632a0;
				color: #9632a0;
			}
	





/* ------------------ FOOTER --------------- */

#footer{
	float: left;
	width: 100%;
	height: 50px;
	margin: 28px 0 0 0;
	padding: 0;
	background: url(../images/footer-bg.jpg) repeat-x;
	
}

	#footer-container{
		width: 960px;
		height: 28px;
		margin: 0 auto 0 auto;
	}

		h1#small{
			float: left;
			cursor: pointer;
			width: 107px;
			height: 28px;
			background: url(../images/footer-logo.png);
			margin: 10px 30px 10px 50px;
		}
		small.copyright{
			float: left;
			font-family: Helvetica, Arial, sans-serif;
			font-size: 0.83em;
			font-weight: normal;
			color: #CCC;
			height: 5px;
			margin: 20px 0 20px 0;
		}
		
		small.copyright a#mail{
			font-family: Helvetica, Arial, sans-serif;
			font-size: 1em;
			font-weight: normal;
			color: #CCC;
		}
			
			small.copyright a#mail:hover{
				text-decoration: underline;
			}