﻿@import url("Reset.css");
@import url("Generico.css");
@import url("Fotos.css");
@import url("Banners.css");
/*--------------------------------------------------------------------------------------------------
                            ESTRUTURA CENTRAL DO SITE (DIAGRAMAÇÃO DE LAYERS)
---------------------------------------------------------------------------------------------------*/

html, body
{ 
	font-size: 12px; 
	line-height:1.5em;
	font-family: Arial, Helvetica, "microsoft sans serif", sans-serif;
	color:#000000;
/*	background:url(Images/bk_colors_1600.gif) repeat-y center top; */
}
 
 * 
{
	margin: 0; 
	padding: 0; 
	text-decoration: none; 
	outline: none; 
}
 
        /*---------------------------------------------------------------------------------
            MARCAÇÕES OS LAYER GLOBAL E FOOTER
        -----------------------------------------------------------------------------------*/
 
#global, 
#global_back,
#footer,
#footer_back 
{
	width:100%;
	height:auto !important;
	margin:0 auto;
	display:table;
	background-color:transparent;
}

/*#global_back { background:url(Images/bk_colors_1600.gif) repeat-y center top; }*/

/*--------------------------------------------------------------------------------------------------
                                    LAYERS _BACK

Os layer com sufixo _back são aqueles que permitem a colocação de imagens de fundo na página
de forma independente e com larguras em 100% da tela. Suas alturas são próprias e independentes,
podendo ou não serem determinadas pelos seus respectivos layers internos e conteúo. 

header_back - malha de fundo do layer header.
nav_back - malha de fundo do layer nav.
content_back - malha de fundo do layer content.
---------------------------------------------------------------------------------------------------*/
#header_back,
#nav_back,
#content_back,
#footer_back
{
    /*width:90%;*/
    width:960px;
	height:auto !important;
    margin:0 auto;
    padding:0;
    border:0;
    display:table;
	background-color:#FFFFFF;
/*	border-left:1px solid red;
	border-right:1px solid red;	*/
}

#header_back,
#content_back
{
    clear:both;
	padding:0 0 0 0;
	position:relative;
}

#footer_back
{
	clear:both;
	padding:0;
}

#nav_back
{
	margin:0 auto;
	padding:0;
}

#nav
{
	margin:auto 0;
	width:100%;
	min-height:29px;
	height: 29px;
	padding:0;
	float:left;
}


/*--------------------------------------------------------------------------------------------------
                                        FIM DOS LAYERS _BACK
---------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------------------------
                                        LAYERS DENTRO DO GLOBAL
---------------------------------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------------------------------
                                      LAYER COM CABEÇALHO DO SITE
    Contém a marca do site e formulário de sistema, como busca, ou um banner publicitário.
---------------------------------------------------------------------------------------------------*/
#header
{
    width:100%;
    margin:0 auto;
}

        /*---------------------------------------------------------------------------------
            LAYER PARA FORMULÁRIO NO HEADER E OUTROS CONTEÚDOS COMO BANNERS
            Inclui qualquer tipo de formulário: busca, cadastro, autenticação.
        -----------------------------------------------------------------------------------*/
#header_content
{
	width: 724px;
	padding:0;
	float:left;
}


/*--------------------------------------------------------------------------------------------------
                            LAYER QUE CONTÉM TODO O CONTEÚDO DO SITE
    Esse layer pode ser considerado um sub do global. Sua finalidade é conter todo o conteúdo
    do site, como textos, títulos e imagens dentro de outros layers-filhos. Pode também conter
    um menu de navegação auxiliar ou parte do menu de navegação central do site.
---------------------------------------------------------------------------------------------------*/

#content
{
    width:100%;
    display:block;
    text-align:left;
    padding: 0;
}

        /*---------------------------------------------------------------------------------
                                 CLASSES QUE SIMULA UMA LINHA DE TABELA
            A classe abaixo na é aplicada para a sustentação dos blocos de layer por linha
            tela.
        -----------------------------------------------------------------------------------*/
.content_linha
{
    width:98%;
    height:auto;
    clear:left; 
    padding:0;
    margin-top:2%;
    display:block;
    float:left; 
}
        /*---------------------------------------------------------------------------------
                                        LAYER MANCHETE PRINCIPAL
            Inclui a navegação índice no modo texto (os breadcrumbs).
        -----------------------------------------------------------------------------------*/
#content_apoio
{
	width:96%;
	height:258px;
    padding:0;
    clear:both;
    margin: 0 auto;
    float:none;
	background: transparent url(Images/bk_HGuia.gif) no-repeat right top;	
}

        /*---------------------------------------------------------------------------------
                                        LAYER BREADCRUMBS
            Inclui a navegação índice no modo texto (os breadcrumbs).
        -----------------------------------------------------------------------------------*/
        
#content_breadcrumb
{
    width:100%;
    height:25px;
    padding:0;
    margin:0;
    display:block;
    float:left;
    text-align:left;
}


/*--------------------------------------------------------------------------------------------------
                                LAYER QUE CONTÉM O FIM DE TELA (RODAPÉ)
    Esse layer pode conter informações como endereço, telefone, e-mail, fax. Contém também o
    copyright do site e links como "política de privacidade" e até mesmo link no formato texto
    da navegação principal do site.
---------------------------------------------------------------------------------------------------*/

/*#content_footer
{
	width:100%;
	height: auto !important;
	margin:0 auto;
	padding:1.3% 0;
	text-align:center;
    background-color: #FFFFFF;
}*/

		/*------------------------------------------------------------------------------------
			LAYER QUE CONTÉM A MARCA DO SITE
		-------------------------------------------------------------------------------------*/
#header_logo
{
    width:175px;
/*    width:20%;*/
	height:150px;
	float:left;
	margin-left:20px;
	_margin-left:10px;
	margin-right:20px;
/*	border: 1px solid blue;*/
}

		/*------------------------------------------------------------------------------------
			MARCA DO SITE
		-------------------------------------------------------------------------------------*/

h1#logo a {
	overflow: hidden;
	width: 100%;
	height: 150px;
	background: url(Images/logo.gif) no-repeat;
	float: left;	
	display: inline;
    color:#FFF;
	text-indent:-5000em;
}


        /*---------------------------------------------------------------------------------
            LAYER PARA MENU DE NAVEGAÇÃO DO SITE
        -----------------------------------------------------------------------------------*/
#nav
{
	margin:25px 0 0 0;
	padding:0;
	position: relative;
	float:left;
	width:100%;
}

#nav01 { left: 0; width: 38px; }
#nav02 { left: 38px; width: 89px; }
#nav03 { left: 127px; width: 77px; }
#nav04 { left: 204px; width: 83px; }
#nav05 { left: 287px; width: 81px; }
#nav06 { left: 368px; width: 60px; }
#nav07 { left: 428px; width: 61px; }
#nav08 { left: 489px; width: 68px; }
#nav09 { left: 557px; width: 92px; }
 
ul.navbar {
	width:720px;
	height: 27px;
    white-space:nowrap;
}
ul.navbar li {
	height: 27px;
	font-size:13px;
	list-style: none;
	float:left;
	margin:0;
	margin-left:5px;
	display:block;
}
ul.navbar li a {
	height: 27px;
}

ul.navbar li.wine {background: transparent url(/Css/Images/bk_menu_wine.gif) no-repeat right top;}
ul.navbar li.green  {
	/*background: transparent url(/Css/Images/bk_menu_green.gif) no-repeat right top;*/
	background: transparent url(/Css/Images/bk_menu_wine.gif) no-repeat right top;	
}


        /*---------------------------------------------------------------------------------
            MARCAÇÕES PARA CONTEÚDO DA MANCHETE - LAYER CONTENT_APOIO
        -----------------------------------------------------------------------------------*/

#content_apoio a
{
	color:#FFF;
}

#content_apoio_texto
{
	width:52%;
    margin:2.6% 0 0 1.3%;
    float:left;
    padding-bottom:2.6%;
}

.content_foto_240 { width:240px; float:left; }

#content_apoio_mapa
{
	width:20%;
    min-height:120px; 
    margin: 2.6% 0;
    display:block;
    float:right;
}

#content_apoio .retranca
{
	width:90%;
	font-size:1.5em;
	font-weight:bolder;
	text-transform:uppercase;
	color: #c7a2b1;
}

#content_apoio .titulo
{
	font-size:1.5em;
	font-weight:bolder;
	margin:0;
}

#content_apoio p
{
	color:#FFFFFF;
	font-size:16px;
	line-height:18px;
	font-weight:bold;	
	text-align:left;
	padding:0.6% 0 1% 3%;
}

.float-right { float:right; }

        /*---------------------------------------------------------------------------------
                                        LAYER MODULOS
            Esses layers são usados dinamicamente pelo sistema que aplica as classes
            abaixo(correspondentes ao mesmo nome, para ajustes e sobreposições de proprieda-
            des, conforme a programação do sistema).
        -----------------------------------------------------------------------------------*/

        /*---------------------------------------------------------------------------------
                                   MÓDULO HOME MARCAÇÕES BÁSICAS
        -----------------------------------------------------------------------------------*/

        /*---------------------------------------------------------------------------------
                                        MÓDULO NOSSA ADEGA HOME
        -----------------------------------------------------------------------------------*/

#content_modulo1
{
    width:28%;
    height:390px;
    margin:0 3% 0 0;
    padding:0;
    background: url(Images/bk_retHAdega0.gif) no-repeat right bottom;
    float:left;
}

#retHAdega
{
    width:81px;
    height:390px;
    padding:0;
    float:left;
	background: url(Images/bk_retHAdega.gif) no-repeat left bottom;
}

#content_modulo1 .content_foto_120
{
	width:120px;
	float:left;
}

#content_modulo1 .titulo
{
	padding:5px 0 0 5px;
	float:left;
}
#content_modulo1 p 
{
	width:60%;
	padding-left:5px;
	font-size:1.0em;
	padding-right:5%;
	float:left;
} 

#content_modulo1 a
{
	color:#cc6600;
}
        /*---------------------------------------------------------------------------------
                                        MÓDULO SOMMELIERS
        -----------------------------------------------------------------------------------*/

#content_modulo2
{
    width: 32%;
    height:380px;
    display:inline;
    padding:0 0 2% 2%;
    margin:0 3% 0 0;
    float:left;
	background: url(Images/bk_retHSommeliers.gif) no-repeat left bottom;   
}


#content_modulo2 img { padding-left:22%;}

#content_modulo2 p {
    margin:0;
    padding:5% 5% 0 22%;
    float:left;
	font-size:1.1em;
	line-height: 1.3em;
    color:#FFFFFF;
}

#content_modulo2 p.Mais {float:right;}

#content_modulo2 .titulo
{
    color:#FFFFFF;
    line-height:1.3em;
    padding-left:22%;
    width:70%;
    text-align:right;
}

#content_modulo2 a { color:#FFF; }

#sommeliers .content_modulo1 ul, #sommeliers .content_modulo1 ul li {
	list-style-type:square;
	font-size:14px;
}

#sommeliers .content_modulo1 ul li {margin-bottom:15px;line-height:18px;}

        /*---------------------------------------------------------------------------------
                                        MÓDULO ACESSÓRIOS
        -----------------------------------------------------------------------------------*/
#content_modulo3
{
    width: 32%;
    height:380px;
    display:inline;
    padding:0;
    float:right;
    background: url(Images/bk_retHAcessorios1.gif) no-repeat right top;
}


#retHAcessorios
{
	height:390px;
    background: url(Images/bk_retHAcessorios.gif) no-repeat left bottom;
}

#content_modulo3 .content_foto_120
{
	width:120px;
	margin-top:10px;
	margin-left:60px;
}

#content_modulo3 p
{
	font-size:1.0em;
	line-height:1.2em;
	color:#000;
	margin-left:60px;
	padding-right:5%;
}
#content_modulo3 .titulo
{
	font-size:1.3em;
}

#content_modulo3 p.float-right { float:right; text-align:right;}

        /*---------------------------------------------------------------------------------
                                        MÓDULO AGENDA
        -----------------------------------------------------------------------------------*/
#content_modulo4
{
    width:26%;
    height:390px;
    margin:0 3% 0 2%;
    padding:0;
    background: url(Images/bk_retHAgenda.gif) no-repeat left bottom;
    float:left;
}

#content_modulo4 p
{
	font-size:1.1em;
	line-height:1.2em;
	padding:2% 3% 0 30%;
	color:#FFF;
}
#content_modulo4 .titulo
{
	padding-top:3%;
	font-size:1.3em;
	width:45%;
	text-align:right;
}

#content_modulo4 a
{
	color:#FFF;
}
#content_modulo4 .leiaMais
{
	padding:0 10% 20% 30%;
	text-align:right;
}

#content_modulo4 .leiaMais a
{
	color:#993399;
	text-align:right;
}
        /*---------------------------------------------------------------------------------
                                        MÓDULO DESTAQUES
        -----------------------------------------------------------------------------------*/

#content_modulo5
{
    width:69%;
    height:381px;
    margin:0;
    padding:0;
    background: url(Images/bk_retHDestaques1.gif) no-repeat left bottom;   
    float:right;  
}

#retDestaques
{
	width:82px;
	height:381px;
    margin:0;
    padding:0;
    float:right;
    background: url(Images/bk_retHDestaques0.gif) no-repeat right top;
}

#content_modulo5 p
{
	padding:0 5%;
	font-size:1.2em;
	line-height:1.3em;
	width:75%;
}

#content_modulo5 .titulo  { font-size:1.4em; color:#999900;margin-bottom:0;}
#content_modulo5 .titulo1  { font-size:1.4em; color:#999900;padding-top:8%;margin-bottom:0;}

#content_modulo5 p.Mais {padding-top:0; padding-bottom:0; }

        /*---------------------------------------------------------------------------------
                                        MÓDULO QUEM SOMOS
        -----------------------------------------------------------------------------------*/
#content_modulo6
{
    width:22%;
	height:250px;
    margin:0 3% 0 2%;
    padding:5% 2% 1% 2%;
    background: url(Images/bk_retHQuemSomos.gif) no-repeat right top;
    float:left;
	border:1px solid #66cc66;
	border-top:none;  
}

#content_modulo6 p {font-size:1.0em; line-height:1.1em; padding:8px 0 0 0;}

        /*---------------------------------------------------------------------------------
                                        MÓDULO CONFRARIAS
        -----------------------------------------------------------------------------------*/
#content_modulo7
{
    width: 32%;
	height:280px;
    display:inline;
    padding:0 0 2% 2%;
    margin:0 3% 0 0;
    float:left;
	background:#d9e5d9 url(Images/bk_retHConfrarias.gif) no-repeat right top; 
}

#content_modulo7 p.titulo { padding-top:55px; font-size:1.2em;}

#content_modulo7 p { font-size:1.0em;}
        /*---------------------------------------------------------------------------------
                                        MÓDULO BANNERS
        -----------------------------------------------------------------------------------*/
#content_banners
{
    width: 285px;
	height:280px;
    display:inline;
    padding:0;
    float:right;
}

.banner_280
{
	width:280px;
	height:120px;
	margin-bottom:20px;
}

        /*---------------------------------------------------------------------------------
                                        CLASSE TÍTULOS HOME
        -----------------------------------------------------------------------------------*/
#home p .Mais { }


.break_line
{
	width:100%;
	height:10px;
	float:none;
	display:block;
	clear:left;
}

/* Guia */
#home form#MapSearch {
	color: #FFF;
}
#home form#MapSearch fieldset {
	padding: 10px;
	/* border: 1px solid #9d7dae; */
	border: none;
}
#home form#MapSearch label span {
	display: block;
	margin-bottom: 5px;
}
#home form#MapSearch input#address {
	width: 445px;
	padding: 5px;
	font-size: 14px;
}
#home form#MapSearch input#searchMapSubmit {
	padding: 3px;
	font-size: 16px;
}
#home form#MapSearch small {
	display: block;
	margin-top: 0px;
}

/*twitter*/
#tweet ul li {
	color:#177D4D;
	font-size:11px;
	font-weight:bold;	
	margin-bottom:5px;
	padding-bottom:5px;
	border-bottom:1px dotted #7EBF5B;
}

#tweet ul li a {color:#993366;}
#tweet ul li a:hover {color:#993366;text-decoration:underline;}

#content_modulo6 .button {
	font-weight:bold;
	text-align:center;
}

#content_modulo6 .button a {padding:3px;color:#993366;}

#content_modulo6 .button a:hover {background:#F4FFBE;color:#993366;}
