@import url('reset.css');

/*:::::::::::::::::::::::::::::::::::::::::::: */
body{
	/*background:#555 url(../images/random_grey_variations.png) repeat top left;*/
	background: #fff; color:#000;
	font-family: 'PT Sans Narrow', Arial, sans-serif; font-size:12px;
	/*overflow-y:scroll;*/
}
a{text-decoration:none;}
.clr{clear:both;}
/*- main container: -*/
.container {
	width:100%; margin:0px auto;	/*centered horizontaly*/
}
/*:::::::::::::::::::::::::::::::::::::::::::: */

/*---- '.content' is inside container (along with HEADER and BOTTOM bars): --*/
	.content, .header, .bottom{
		position:relative; /*absolute*/ width:100%; margin:0 auto;
		
		/*border:1px solid red;*/
	}
	.content{
		/*border:5px*/
	}	
	.header{
		
	}
	.bottom{
		
	}
/*-------- layers INSIDE EACH inside container layer: --*/
		.hdr_container, .sbi_container, .bot_container{
			position:relative; overflow:hidden; margin:0 auto; /*all centerd horizontaly!*/
			padding:0px; padding-top: 10px; padding-bottom: 10px;			/*inside 'margin'*/
		}
/*:::::::::::::::::::::::::::::::::::::::::::: */

/*--- Let's do each specifis: ---*/

/*___________________

	HEADER bar content
_____________________
*/
.hdr_container{
	width: 900px;				/*.sbi_container imgs bgd width & height : 900x500*/
	border-bottom: 2px solid rgb(43,42,41);
}
.hdr_container a img{
	position: relative; float: left;
}
.hdr_container h1{
	text-align: right; margin-top: 100px;
	font-size:16px; text-shadow:1px 0px 2px rgba(255,255,255,0.8); color: rgb(43,42,41); text-transform: uppercase;
}
.address{
	position: absolute; bottom: 0px; right:0px;
	background:rgb(43,42,41);
	text-align: left; margin-top: 110px;
	font-size:12px; /*text-shadow:1px 0px 2px rgba(255,255,255,0.8);*/ color: #fff; padding: 0px; padding-right: 2px; padding-left: 20px;
}
/*___________________

	BOTTOM bar content
_____________________
*/
.bot_container{
	width: 900px;				/*.sbi_container imgs bgd width & height : 900x500*/
	/*border:1px solid blue;*/
}
.bot_container img{
	position: relative; float: left;
	border:0; margin: 0; padding:0;
}
/*___________________

	SBI content (main viewport, inside '.content')
_____________________
*/
.sbi_container{
	/*
	box-shadow				:1px 1px 5px #000;/*
	-moz-box-shadow			:1px 1px 5px #000;
	-webkit-box-shadow		:1px 1px 5px #000;*//*
	border-radius			:4px 4px 4px 4px;/*
	-moz-border-radius		:4px;
	-webkit-border-radius	:4px;*/
	/*border:1px solid green;*/
}
/*______________

	Each menu with div's 'sbi_label' (menu text) and 'sbi_content' (the links)
________________
*/
/*------------*/
.sbi_panel{			/*each background part (following main links menu division)*/
	position:relative; float:left;
	height:100%; overflow:hidden;
	/*border:1px solid red;*/
}
.sbi_panel_img{ 	/*dinamyc: simulates the different background fading*/
	position:absolute; top:0px; height:100%;
	background-repeat:no-repeat;
}
/*------------*/
.sbi_label{			/*barra de menus (nas partes)*/
	position:absolute; display:block; bottom:50px; left:0px; width:100%; height:40px; line-height:40px;
	background:rgb(43,42,41); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=95);
	background: rgba(43,42,41,0.95);/*!! previous line for IE !!*/
	font-size:23px; text-align:center; text-shadow:1px 0px 2px rgba(0,0,0,0.8); color:#fff; text-decoration:none; text-transform: uppercase;
	cursor:pointer; 
}
.sbi_label:hover{text-decoration:none; opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}
/*------------*/
.sbi_content{		/*cada sub-menu*/
	position:absolute; width:100%; bottom:90px; left:0px;
	/*background:transparent url(../imgs/pattern.png) repeat top left;*/
	background: rgb(255,255,255); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	background: rgba(255,255,255,0.8);/*!! previous line for IE !!*/
	border-top:1px solid rgba(43,42,41, 0.98);/*#fff;*/
	overflow:hidden; display:none;
}
.sbi_content.light_green{
	background: rgb(161,191,41); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	background: rgba(161,191,41,0.8);/*!! previous line for IE !!*/
}
.sbi_content.dark_green{
	background: rgb(76,112,68); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	background: rgba(76,112,68,0.8);/*!! previous line for IE !!*/
}
/*------------*/
.sbi_content ul{
	margin:20px; list-style-type: none;
}
.sbi_content ul a{
	display:block; outline: none;
	background:transparent url(../imgs/triangle.png) no-repeat 3px 50%;
	padding:4px 6px 4px 14px; opacity:0.9;
	font-size:16px; text-shadow:1px 0px 2px rgba(255,255,255,0.8); color: rgb(43,42,41); text-transform: uppercase; text-decoration: none;
}
.sbi_content ul a:hover{
	text-decoration: underline; text-shadow: none; color: #000; /*font-weight: bold;*/ 
	/*
	background-color:#000; color:#fff;
	box-shadow			:1px 1px 5px #000;/*
	-moz-box-shadow		:1px 1px 5px #000;
	-webkit-box-shadow	:1px 1px 5px #000;*/
}
/*:::::::::::::::::::::::::::::::::::::::::::: */
/*___________________

	MODAL window/page
_____________________
*/
#overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgb(32,48,32); /*#000*/
    opacity: 0.7; filter: alpha(opacity=70);
}

#modal {
    position:absolute;
    background:url(../imgs/tint20.png) 0 0 repeat; /* -> For IE */ background:rgba(0,0,0,0.2);
    padding:8px;
}
#content {
    /*font-family: 'Sintony', serif; color:rgb(99,99,100);*/
    /*background:#fff; opacity: 0.9; THE MODAL TAKES CARE! só um cheirinho, mesmo, do que está por trás*/
    height: 100%; /* background-size: 100%; width: 100%; padding: 1%; (né preciso... usar 'background-clip')*/
    background-clip:content-box; /*não deixa sair fora do modal*/
	/*overflow-y: auto;
    NOTA: há conteudos (link 3, 'Galeria', p.e.) que n podem ter a barra de scroll, sendo eles os responsáveis por gerir o overflow...
    Assim, este css passou a ser declarado via JQuery (classe 'modal', method.prepareLoading) ANTES de abrir a janela modal para cada link/botão.*/
}
#closeModal {
    background:url(../imgs/close_links_menu.png) 0 0 no-repeat;
    position:absolute;
    width: 36px; height: 36px;
    text-indent:-9999px; /*Just in case.... se a img não aparecer, está escrito "close"*/
    top:-10px; right:-10px; /*right: 5px; top: 5px; */
    z-index: 999; /*o mais à frente de todos - óbvio!*/
}
#loadingModal{
    position:absolute; width:31px; height:31px; top:9px; left:9px;    /*1px + #modal.padding | 'loader.gif' tem 31x31px */
	background:transparent url(../imgs/loader.gif) no-repeat center center;
    background-size: 100% 100%; opacity:0.8;
}
/****************************************************************************/