/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
ul{
	list-style:none;
}

@font-face {
	font-family: 'BlackoakStdRegular';
	src: url('../fonts/blackoakstd-webfont.eot');
	src: local('☺'), url('../fonts/blackoakstd-webfont.woff') format('woff'), url('../fonts/blackoakstd-webfont.ttf') format('truetype'), url('../fonts/blackoakstd-webfont.svg#webfont6jGeDaLG') format('svg');
}
@font-face {
	font-family: 'DIN1451StdMittelschrift';
	src: url('../fonts/dinmittelschriftstd-webfont.eot');
	src: local('☺'), url('../fonts/dinmittelschriftstd-webfont.woff') format('woff'), url('../fonts/dinmittelschriftstd-webfont.ttf') format('truetype'), url('../fonts/dinmittelschriftstd-webfont.svg#webfont9rXzKbqH') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DIN-Regular';
	src: url('../fonts/dinr-webfont.eot');
	src: local('☺'), url('../fonts/dinr-webfont.woff') format('woff'), url('../fonts/dinr-webfont.ttf') format('truetype'), url('../fonts/dinr-webfont.svg#webfontunZHWWn0') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DIN-Black';
	src: url('../fonts/dinbl-webfont.eot');
	src: local('☺'), url('../fonts/dinbl-webfont.woff') format('woff'), url('../fonts/dinbl-webfont.ttf') format('truetype'), url('../fonts/dinbl-webfont.svg#webfontLuXq028l') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DIN1451StdEngschrift';
	src: url('../fonts/dinengschriftstd-webfont.eot');
	src: local('☺'), url('../fonts/dinengschriftstd-webfont.woff') format('woff'), url('../fonts/dinengschriftstd-webfont.ttf') format('truetype'), url('../fonts/dinengschriftstd-webfont.svg#webfontUCPX3CqB') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DIN-Light';
	src: url('../fonts/dinl-webfont.eot');
	src: local('☺'), url('../fonts/dinl-webfont.woff') format('woff'), url('../fonts/dinl-webfont.ttf') format('truetype'), url('../fonts/dinl-webfont.svg#webfontTv5aZl3b') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DIN30640StdNeuzeitGroteskLigh';
	src: url('../fonts/dinneuzeitgroteskstd-light-webfont.eot');
	src: local('☺'), url('../fonts/dinneuzeitgroteskstd-light-webfont.woff') format('woff'), url('../fonts/dinneuzeitgroteskstd-light-webfont.ttf') format('truetype'), url('../fonts/dinneuzeitgroteskstd-light-webfont.svg#webfonthjA1susR') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DIN30640StdNeuzeitGroteskBold';
	src: url('../fonts/dinneuzeitgroteskstd-bdcond-webfont.eot');
	src: local('☺'), url('../fonts/dinneuzeitgroteskstd-bdcond-webfont.woff') format('woff'), url('../fonts/dinneuzeitgroteskstd-bdcond-webfont.ttf') format('truetype'), url('../fonts/dinneuzeitgroteskstd-bdcond-webfont.svg#webfontO6mlrMRK') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'DINMittelschrift-Alternate';
	src: url('../fonts/dinmittelschrift-alternate-regular-webfont.eot');
	src: local('☺'), url('../fonts/dinmittelschrift-alternate-regular-webfont.woff') format('woff'), url('../fonts/dinmittelschrift-alternate-regular-webfont.ttf') format('truetype'), url('../fonts/dinmittelschrift-alternate-regular-webfont.svg#webfontLyBXHVld') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DIN-Medium';
	src: url('../fonts/dinm-webfont.eot');
	src: local('☺'), url('../fonts/dinm-webfont.woff') format('woff'), url('../fonts/dinm-webfont.ttf') format('truetype'), url('../fonts/dinm-webfont.svg#webfontfrHTl2nx') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DIN-Bold';
	src: url('../fonts/dinbd-webfont.eot');
	src: local('☺'), url('../fonts/dinbd-webfont.woff') format('woff'), url('../fonts/dinbd-webfont.ttf') format('truetype'), url('../fonts/dinbd-webfont.svg#webfontq77FpWy0') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Site-wide properties ======================================================== */
body{
	color:#5b5023;
	font:13px/20px 'DIN-Medium', 'Trebuchet MS', verdana;
	}
h2{
	font:19px 'BlackoakStdRegular', verdana, arial;
	text-transform:uppercase;
	color:#5b5023;
	font-stretch:extra-condensed;}
h2 span{
	font-size:14px;
}
h3{
	font:bold 14px 'DIN-Bold',verdana,arial;
}

p{
	padding:0 0 15px 0
}
a {
	color:#41391e;
}
a:hover{
	text-decoration:none;
}
/* Reusable classes ============================================================ */

/* Left & Right alignment */
.left{ float: left; }
.right{ float: right; }

/* The inside class provides consistent padding. To be used often! */
.inside{ padding: 20px; }

/* The fraction classes are useful for column lists */
.half, .third, .quarter, .fifth, .sixth{ width: 100%; }
.half li, .third li, .quarter li, .fifth li, .sixth li{ float: left; }
.half li{ padding-right: 5%; width: 45% }
.third li{  padding-right: 5%; width: 28.3% }
.quarter li{  padding-right: 5%; width: 20% }
.fifth li{  padding-right: 5%; width: 15% }

/* For when a <br /> just ain't enough */
.separator{
    clear: both;
    float: left;
    height: 1px;
    width: 100%; }
	
/* If you don't want text inside a box, a, title, etc. */
.rpl{
	display:block;
	overflow:hidden;
	text-indent:-999px;
	/*line-height:300px;*/
	text-align:left
}

/* Basic Structure ============================================================= */
body{
	
	background: url("../img/bg.jpg")  no-repeat center 0 #032c16
}
	#containerGeral{
		width:1000px;
		height:686px;
		margin:0 auto;
		position:relative;
		z-index:1;
	}
	.madeira{
		background:url(../img/bg-madeira.jpg) no-repeat;
		width:732px;
		margin:0 auto;
		position:absolute;
		overflow:visible;
		top:0;
		left:134px;
		height:700px;
		z-index:1
		
	}
    /* Header */
    header{
		background:url(../img/bg-topo.png) 0 18px no-repeat;
		width:804px;
		height:180px;
		position:relative;
		top:0px;
		margin:0 auto;
		clear:both;
		z-index:2 }
		
		#etapa{
			/*background:url(../img/fake-etapa.png);*/
			width:258px;
			height:183px;
			position:relative;
			width:258px;
			left:-121px}
		#radio{
			/*background:url(../img/fake-radio.png);*/
			width:256px;
			height:204px;
			position:relative;
			right:-2px;}
		
		h1 a{
			background:url(../img/logo.png);
			width:260px;
			height:156px;
			margin:16px 0 0 17px}
    
    /* Content */
	#content{
		overflow:hidden;
		position:relative;
		height:588px;
		margin:-181px 0 0;
	}
	.pane{
		position:absolute;
	}
			
			
	nav.principal{
		position:relative;
		padding:220px 0 20px 104px;
		background:url(../img/footer-menu.jpg) no-repeat 92px bottom;
		z-index:2;
	}
	nav.secundaria{
		float:right;
		bottom:75px;
		position:relative;
		z-index:2;
		right:375px;
	}
	nav li{
		display:inline;
		list-style:none;
		float:left
	}
	
		/* 	IMAGENS DO MENU - 
			desculpa ter feito isso, mas font-replace ficou bem ruim. A fonte ficou gorda e serrilhada. Não teve jeito :/
			pra editar, selecione a fonte no photoshop, dê ctrl shift c, abra um novo, cole e salve como png. Assim pega os efeitos de mesclagem.
			Marta@28/07/2010
		*/
		nav li .circuito{
			background:url(../img/menu-circuito.png) no-repeat -4px -1px;
			width:82px;
			height:35px;
			margin:-22px 48px 0 0 }
			nav li .circuito:hover, nav li .circuito.ativo{
				background:url(../img/menu-circuito.png) no-repeat -4px bottom;
			}
		nav li .proximas{
			background:url(../img/menu-proximas.png) -4px 0;
			height:31px;
			margin:-21px 44px 0 0;
			width:133px;}
			nav li .proximas:hover, nav li .proximas.ativo{
			background:url(../img/menu-proximas.png) -4px bottom;}
		nav li .anteriores{
			background:url(../img/menu-anteriores.png) -4px 0;
			width:154px;

			height:34px;
			margin:-22px 47px 0 0}
			nav li .anteriores:hover, nav li .anteriores.ativo{
			background:url(../img/menu-anteriores.png) -4px bottom;}
		nav li .fotos{
			background:url(../img/menu-fotos.png) -3px 0;
			width:47px;
			height:33px;
			margin:-22px 0 0 0}
			nav li .fotos:hover, nav li .fotos.ativo{
			background:url(../img/menu-fotos.png) -3px bottom;}
		nav li .campanha{
			/*background:url(../img/menu-campanha.png);  
			A imagem está no bg da folha. Mas calma! Eu posso explicar: Tive problemas de z-index fodas com o rodapé.
			Aí coloquei a div da navegação fora mas os botões não rolavam junto com tudo.
			Então deixei só a imagem lá, e uma div transparente em cima com o hit, como um botão do flash.
			Site planejado flash feito em html: gambiarras são necessárias.
			Marta@30/07/2010
			*/
			width:81px;
			margin:-19px 48px 0 0;
			height:30px;}
			nav li .campanha:hover, nav li .campanha.ativo{
			background:url(../img/hover.png) no-repeat center 0;
			height:30px;
			width:81px;  
			}
		nav li .contato{
			/*background:url(../img/menu-contato.png);
			Leia o comentário enorme acima,
			*/
			width:69px;
			height:30px;
			margin:-19px 0 0 0;}
			nav li .contato:hover, nav li .contato.ativo{
			background:url(../img/hover.png) no-repeat center 0;
			height:30px;
			width:69px;  
			
			}
	
    article{
        clear:both;
		width:570px;
		margin:16px 0 0 100px;
		height:237px;
		z-index:3 }
    aside{
        float: right; }
        
    /* Footer */
	
footer {
		clear:both;
		background:url(../img/footer.png) no-repeat center top;
		width:1000px;
		bottom:333px;
		position:relative;
		overflow:hidden;
		height:100px;
		z-index:1 }
	
	
		#cerveja{
			/*background:url(../img/elementos-esquerdo.png);*/
			width:322px;
			height:364px;
			bottom:375px;
			position:relative;
			float:left;
			z-index:5;
			left:-453px
		}
		#tv{
			/*background:url(../img/tv.png) 0 bottom;*/
			width:232px;
			height:152px;
			bottom:162px;
			position:relative;
			float:right;
			right:-153px;
			z-index:5;
			

		}
		#menina{
			/*background:url(../img/tv.png) right 0;*/
			width:277px;
			height:290px;
			bottom:301px;
			position:relative;
			float:right;
			right:-143px;
			z-index:5
		}
		footer a{
			width:56px;
			height:10px;
			display:block;
			float:right;
			margin:-15px 196px 0 0 
		}
	
    
/* Project specifics =========================================================== */

#home{}
	#home section{
		float:left;
		width:282px;
	}
	#home section h2{
		width:255px;
		height:65px;
		background:url(../img/tit-confira-progr.png);
		margin:3px -3px;
	}
	#home section p{
		padding:0 0 7px  0 }
		
	#home .jScrollPaneContainer {
		margin:9px 30px 0 0;
	}
	#home .scroll-pane{
		text-align:right;
		height:140px;
		overflow:auto;
		width:263px;
		padding:0 15px 0 0
	}
	#home li{
		list-style:none;
		padding:0 0 15px 0;
	}

#circuito{
	margin:589px 0 0
}
	#circuito section{
			float:left;
			width:338px;
			text-align:right;
			margin:13px 0 0 0;
		/*	background:url(../img/linha-fim-circuito.jpg) right bottom no-repeat;*/
			padding:0 0 10px 0;
		}
	#circuito section h2{
		background:url(../img/tit-circuito.png) right 0 no-repeat;
		width:100%;
		height:37px;
		clear:both;
		margin:0 0 10px 0
	}
	#circuito aside a {
		background:url(../img/rodeio-lateral.png);
		width:201px;
		height:174px;
		margin:-10px 0 0;
		text-indent:-999px;
		overflow:hidden;
		display:block;
		line-height:300px;
		
	}
#proximas{
	margin:1178px 0 0
}
	#proximas section{
		float:left;
		width:324px;
		text-align:right;
		margin:0 30px 0 0 
	}

	#proximas h2{
		margin:0 0 30px 0;
		background:url(../img/tit-prox-etapas.png);
		width:333px;
		height:36px;
	}
	#proximas aside {
		width:200px;
		margin:13px 0 0;
	}
	#proximas aside .scroll-pane{
		text-align:right;
		height:110px;
		overflow:auto;
		padding:10px;
	}
	
	
	#proximas #proximasload{
		text-align:right;
		height:150px;
		overflow:auto;
		padding:10px;
		position:relative
	}
	#proximas aside h3, #proximas aside h4{
		font:14px 'DIN-Bold', verdana, arial;
	}
	#proximas aside h3{
		background:url(../img/tit-prox-eventos-sub.png);
		width:179px;
		height:23px;
		margin:0 0 15px 0;
		}
	#proximas aside li{
		list-style:none;
		padding:7px 0
	}
	#proximas aside li p{
		padding:0;
	}

#anteriores{
	margin:1767px 0 0
}
	#anteriores h2{
		background:url(../img/tit-etapas-anteriores.png);
		width:234px;
		height:91px;
		float:left;
		margin:28px 0
	}
	#anteriores .jScrollPaneContainer{
		margin:10px 0 30px 30px;
		float:left}
	#anteriores .scroll-pane{
		width:295px;
		height:130px;
		overflow:auto;
		clear:both;
	}
	#anteriores article a{
		padding:0 30px 
	}
	#anteriores article a  img {
		float:left;
		display:block;
	}

#fotos{
	margin:2356px 0 0
}
	#fotos h2{
		background:url(../img/tit-fotos.png);
		width:346px;
		height:29px;
		margin:0 0 10px 0
	}
	#fotos #galeria li{
		list-style:none;
		float:left;
		border:5px #FFF solid;
		margin: 5px;
		height:38px;
	}
	#fotos #galeria li *{
		padding:0;
	}
	#galeria{
		width:400px;
		height:190px;
	}
	#fotos section{
			width:400px;
		height:40px;
	}
		
		
			#fotos aside {
		width:200px;
		margin:13px 0 0;
	}
	#fotos aside .scroll-pane{
		text-align:right;
		height:110px;
		overflow:auto;
		padding:10px;
		list-style:none;
	}
	
	

#campanha{
	margin:2945px 0 0
}
	#campanha h2{
		background:url(../img/tit-campanha.png);
		width:255px;
		height:120px;
		float:right;
		margin:34px;
	}
	#campanha h3{
		height:1px;
		overflow:hidden;
	}
	.videoPlayer{
		margin:10px auto;
		width:229px;
		text-align:center;
		float:left
	}

#contato{
	margin:3534px 0 0
}	
	#contato h2{
		background:url(../img/tit-contato.png);
		width:132px;
		height:16px;
		margin:0 0 10px 0
	}

	fieldset{
		width:229px;
		float:left;
		margin:0 15px
	}
	label{
		width:100%;
		clear:both;
		margin:0;
		display:block
	}
	input, textarea{
		border:1px solid #928d6c;
		background:transparent;
		width:213px;
		color: #5B5023;
	}
	.ddd{
		width:43px;
		float:left;
		clear:none;
		margin:0 10px 0 0;
	}
		.ddd input{
			width:27px;
		}
	.telefone{
		width:169px;
		float:left;
		clear:none;
	}
		.telefone input{
			width:152px
		}
	.cep1{
		width:120px;
		float:left;
		clear:none;
		margin:0 10px 0 0
	}
	.cep2{
		width:73px;
		float:left;
	}
	.cidade{
		width:132px;
		float:left;
		margin:0 15px 0 0;
		clear:none
	}
		.cidade input{
			width:113px;
		}
	.uf{
		width:62px;
		clear:none;
		float:left
	}
		.uf input{
			width:45px;
		}
	.enviar{
		background:url(../img/bt-enviar.png);
		width:73px;
		height:19px;
		border:none;
		cursor:pointer
	}
	textarea{
		height:124px;
	}
		
	label.error { float: right; color: red; vertical-align: top; font-size: 10px; width:10px }
	em { font-weight: bold; padding-right: 1em; vertical-align: top; }
/* SLIDESHOW */

#slideshow {
    position:relative;
    height:248px;
	margin:-12px 0 0 -282px
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

/*
	Scroller etapas anteriores
*/
#makeMeScrollable{
	width:438px ;
	position:relative;
	clear:both;
	height:72px
	
}
#makeMeScrollable div.scrollableArea *
	{
		position: relative;
		display: block;
		float: left;
		padding: 0 20px;
		margin: 0;
	}