/*
*/
@import url('reset.css');
/*
*/

/* * * * * * * * * * * * * * * * * * * * * * * */
.bgd_fundo{
    position: absolute;
	min-width: 20%; /*largura mínima: menu*/
    width: 100%; height: 100%;
    /*background: #000 url(../imgs/bgLogo.png) no-repeat 20% 40%; /*center center*/
    background		: url(../imgs/bgLogo.jpg) no-repeat center center;
    background-size	: 100%;
    z-index: -999;
    /*
    background				: url(../imgs/bgLogo.jpg) no-repeat center center fixed;
    -webkit-background-size	: cover;
    -moz-background-size	: cover;
    -o-background-size		: cover;
    -background-size		: cover;
    filter		: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imgs/bgLogo.jpg', sizingMethod='scale');
    -ms-filter	: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imgs/bgLogo.jpg', sizingMethod='scale');
    */
}

/* * * * * * * * * * * * * * * * * * * * * * * */
.bgd1_3, .bgd2_3, .bgd3_3{
    position: relative; /*fixed absolute*/
    float: left;
    top:0px;
    left:0px;
    height:100%;
    overflow: hidden;
}
.bgd1_3{
    /*border-right-color: black; border-right-style: solid; border-right-width: 1px;*/
    width:20%; /*largura mínima?: menu...?...*/
}
.bgd2_3{
    /*border-right-color: black; border-right-style: solid; border-right-width: 1px;*/
    width:45%;
}
.bgd3_3{
    width:35%;
    /*border: 1px solid yellow;*/
}

img.div_bgimage{
	position: relative; float: right;
	right:0px; top:0px;
	width:100%;
	/*opacity:0.0;*/
	display:none; /*fade in!*/
}

.bgd_overlay{
	background:transparent url(../imgs/Fundo_Rede.png) repeat top left;
    position:fixed; top:0px; left:0px;
    width:100%; height:100%;
	display:none; /*a redinha só aparece no fim, depois de todo o fundo carregado.*/
    opacity:0.7;
}

.letrasAoAlto{
	background:transparent url(../imgs/bg_letrasAlto.png) no-repeat top right;
    position:fixed; top:0px; right:0px;
    width:102px; height:800px; /*dynamic; bgd img dims*/
    cursor:pointer;
	display:none; /*fade in!*/
}

.loading{
	width:50px; height:50px;
    position:fixed;
	top:1px; left:1px;
	background:#000 url(../imgs/loader.gif) no-repeat center center;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px 10px 10px 10px;
	opacity:0.7;
	display:none;
}

/* * * * * * * * * * * * * * * * * * * * * * * */
.mainPage{
    clear: both;
    position: absolute;
    top: 0px; left: 0px;
}
img.logo{ /*150x148*/
    position: fixed;
    left: 10px; top: 10px;
    /*opacity: 0.8;*/
    outline: none;      /* IE... :-( */
    display:none;
    cursor: pointer;
    /*border: 2px solid black*/
}
/*_______________________________________________________

    'style-my-tootltips' plugin, tooltip styling
    http://manos.malihu.gr/style-my-tooltips-jquery-plugin 
__________________________________________________________*/

#s-m-t-tooltip{
	background:#222; background:rgba(0,0,0,0.8);								/* fallback if rgba not supported */
	display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;	/*important*  Supported display: inline-block for IE 6-7 and  FF < 3, too */
    box-shadow: 2px 2px 0 rgba(0,0,0,0.15),
                -1px -1px 0 rgba(255,255,255,0.3);
    /* z-index:900; (ver ficheiro .js, para opções, em: [init:function(options){var defaults={...]*/
	max-width:300px; margin:24px 14px 7px 12px; padding:8px; border-radius:3px; 
	font-family:Verdana,Geneva,sans-serif; color:#fff; font-size:11px; line-height:16px;
}
/********************************************************/

.layerMenu{
	background: url(../imgs/Menu.png) top left;
	position:fixed;
    /*top: 50%; JQuery coloca a 1/2, conforme width janela*/
    width:54px; height:227px; /*dim Menu.png*/
    display: none; overflow: hidden;
    cursor: pointer;
    border: 0px solid black;
	-webkit-box-shadow	:5px 5px 4px rgba(0,0,0,0.6);
	-moz-box-shadow		:5px 5px 4px rgba(0,0,0,0.6);
	-ms-box-shadow		:5px 5px 4px rgba(0,0,0,0.6);
	-o-box-shadow		:5px 5px 4px rgba(0,0,0,0.6);
	box-shadow			:5px 5px 4px rgba(0,0,0,0.6);
	/*As a command/control item, user should not be able to select the content (allthough many say it's a bit tricky... ;-))*/
	-webkit-touch-callout	: none;
	-webkit-user-select		: none;
	-khtml-user-select		: none;
	-moz-user-select		: none;
	-ms-user-select			: none;
	user-select				: none;
}
.layerMenu > ul{
    /**/
}
.layerMenu > ul > li{
    margin-left: -60px; /*distancia 'animate' no easeOut/In */
}
.layerMenu > ul > li a{
    opacity: 0;         /*apagados, de início; 'easeOut' coloca opacity 1*/
    outline: none;      /* IE... :-( */
    visibility: hidden; /*só no "slideMenuButtons" são clicaveis...*/
}
.layerMenu > ul > li img{
    outline: none;      /* IE... :-( */
	-webkit-box-shadow	:5px 5px 4px rgba(0,0,0,0.6);
	-moz-box-shadow		:5px 5px 4px rgba(0,0,0,0.6);
	-ms-box-shadow		:5px 5px 4px rgba(0,0,0,0.6);
	-o-box-shadow		:5px 5px 4px rgba(0,0,0,0.6);
	box-shadow			:5px 5px 4px rgba(0,0,0,0.6);
	/*As a command/control item, user should not be able to select the content (allthough many say it's a bit tricky... ;-))*/
	-webkit-touch-callout	: none;
	-webkit-user-select		: none;
	-khtml-user-select		: none;
	-moz-user-select		: none;
	-ms-user-select			: none;
	user-select				: none;
}
.layerMenu > ul > li img:hover{
    border: 1px solid black;
}
/********************************************************/
/**
 This modal will have two root elements: #overlay and #modal.
 The overlay is going to be a semi-transparent layer that fills the visitor's viewport.
 This turns the modal into a focal point, and reduces focus for the rest of the page.
*/
#overlay {
    background: #000;
    position: fixed; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

#modal {
    position:absolute;
    background:url(../imgs/tint20.png) 0 0 repeat;
    background:rgba(0,0,0,0.2);
    border-radius:14px;
    padding:8px;
}
#loadingModal{
    background:#000 url(../imgs/loader.gif) no-repeat center center;
    background-size: 100% 100%;
    width:50px; height:50px;                /* 'loader.gif' tem 50x50px */
    position:absolute;top:9px; left:9px;    /*1px + #modal.padding      */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px 10px 10px 10px;
	opacity:1.0;
}

#content {
    /*font-family: 'Sintony', serif; color:rgb(99,99,100);*/
    background:#000; opacity: 0.8; /* 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 2, 'Les Produits', 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.*/
    border-radius:8px;
}

#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:-7px; right:-7px; /*right: 5px; top: 5px; */
    z-index: 999; /*o mais à frente de todos - óbvio!*/
}
/****************************************************************************/