/*
    Feuille de Syle globale pour le Barberousse
    Mars 2006
*/


/* ==========================================================================
    Structure de la page */
body{
    font: 12px Verdana;
    padding:0;
    margin:0;
    background:#F7EEDD;
}

#site{
    position: absolute;
    background:url(images/tonneau_bg.jpg) repeat;
    /*width: 960px;*/
	width:1024px;
	/*height:768px;*/
    left: 50%;
    margin-left: -512px;
}

#menu{
    float:left;
    margin:0;
    padding:15px 5px 5px 30px;
    width:170px;
}

#content{
    border-left:1px solid #c12302;
    padding:5px 0 0 30px;
    margin-left:201px;
}


/* ==========================================================================
    Composition du menu */

.logo_barberousse{
    display:block;
    background:url(images/logo.jpg);
    width:136px;
    height:201px;
}

#menu ul{
    padding:0;
    margin:0 0 30px 0;
}

#menu ul li{
    margin:0;
    padding:0;
    list-style-type:none;
}

#menu ul li a{
    display:block;
    width:136px;
    height:45px;
}

/* Les villes */
#menu ul li a.accueil_grenoble{background:url(menu/menu_grenoble_off.gif) no-repeat bottom left;}
#menu ul li a.accueil_grenoble:hover{background:url(menu/menu_grenoble_on.gif) no-repeat bottom left;}

#menu ul li a.accueil_lyon{background:url(menu/menu_lyon_off.gif) no-repeat bottom left;}
#menu ul li a.accueil_lyon:hover{background:url(menu/menu_lyon_on.gif) no-repeat bottom left;}

#menu ul li a.accueil_montpellier{background:url(menu/menu_montpellier_off.gif) no-repeat bottom left;}
#menu ul li a.accueil_montpellier:hover{background:url(menu/menu_montpellier_on.gif) no-repeat bottom left;}

/* Les autres boutons */
#menu ul li a.soirees{background:url(menu/menu_soirees_off.gif) no-repeat bottom left;}
#menu ul li a.soirees:hover{background:url(menu/menu_soirees_on.gif) no-repeat bottom left;}

#menu ul li a.contact{background:url(menu/menu_contact_off.gif) no-repeat bottom left;}
#menu ul li a.contact:hover{background:url(menu/menu_contact_on.gif) no-repeat bottom left;}
    
#menu ul li a.photos{background:url(menu/menu_photos_off.gif) no-repeat bottom left;}
#menu ul li a.photos:hover{background:url(menu/menu_photos_on.gif) no-repeat bottom left;}

#menu ul li a.produits{background:url(menu/menu_produits_off.gif) no-repeat bottom left;}
#menu ul li a.produits:hover{background:url(menu/menu_produits_on.gif) no-repeat bottom left;}

#menu ul li a.carte{background:url(menu/menu_carte_off.gif) no-repeat bottom left;}
#menu ul li a.carte:hover{background:url(menu/menu_carte_on.gif) no-repeat bottom left;}

#menu a.autre_barberousse{
    display:block;
    width:136px;
    height:78px;
    background:url(menu/menu_autre_barberousse_off.gif) no-repeat bottom left;
}
#menu a.autre_barberousse:hover{background:url(menu/menu_autre_barberousse_on.gif) no-repeat bottom left;}

/* ==========================================================================
    bloc du dessous */
.footer{
    margin:30px 0 10px 0;
    color:#666666;
    font-size:0.8em;
    text-align:center;
}



/* ==========================================================================
    gestion des liens */
    
a, a:link, a:hover, a:visited{
    color: #c12302;
}

.footer a{
    color:#BF5353;
}

a:hover{
    text-decoration:none;
}

a img{
    border:none;
}

/* ==========================================================================
    Divers éléments génériques */

.button{
    cursor:pointer;
    }

.clr{
    clear:both;
}

.large_photo{
    display:block;
}

/* ==========================================================================
    Elements de mise en forme des pages du site */
    
#content h1{
    width:720px;
    height:45px;
}

#content p{
    text-align:justify;
}


/* -----------------------------------------------------------------------------
 --- Accueil d'un barberousse --- */
#content.accueil h1{
    background:url(images/titre_votre_barberousse.gif) no-repeat bottom left;
}

#soirees{
    margin:10px 5px 5px 5px;
}

#soirees_content{
    display:block;
    width:272px;
    height:239px;
    background:transparent url(images/accueil_soirees_cadre.gif) no-repeat bottom left; /* transparent background      */
    position: absolute;              /* positionnement absolu (par rapport au bg_translucide)       */
    z-index: 2;                      /* Pour placer par dessus le bloc transparent */
}

#soirees_bg{
    display:block;
    width:272px;
    height:239px;
    background:transparent url(images/accueil_soirees_bg.gif) no-repeat bottom left;       /* the background              */
    filter:alpha(opacity=40);
    -moz-opacity:0.4;
    opacity: 0.4;
}

#content.accueil h2{
    margin:40px 10px 10px 10px;
    width:141px;
    height:31px;
    background:url(images/vb_nos_soirees.gif) no-repeat bottom left;
}

#soirees_content dl{
    margin:15px 0 0 0;
}

#soirees_content dl dt{
    padding:0;
    margin:17px 20px 0 20px;
    font-weight:bold;
}

#soirees_content dl dd{
    padding:0 0 7px 0;
    margin:0 20px 5px 20px;
    border-bottom:1px dashed #c12302;
}

#content.accueil .left{
    float   :left;
    width   : 400px
}

#content.accueil .right{
    margin-left:410px;
}
#content.accueil .right #adresse{
    background:url(images/vb_adresse_deco.gif) no-repeat bottom center;
    padding:5px;
    height:220px;
    width : 270px;
    color : #72290b;
    font-size   : 1.3em;
    font-weight : bold;
    border-top    :1px dashed #72290b;
}

#texte_accueil {
    font-size:1.2em;
    font-weight:bold;
}

/* -----------------------------------------------------------------------------
 --- Photos --- */
#content.photos h1{
    background:url(images/titre_photos.gif) no-repeat bottom left;
}

#content.photos #deco{
    padding-right:220px;
    background:url(images/photos_palmiers.gif) no-repeat bottom right;
}

/* la liste des vigettes */
#galerie{
    border-top:1px dashed #c12302;
    border-bottom:1px dashed #c12302;
    padding:10px 2px;
    margin:10px 0px;
    width:480px;
}

#galerie li{
    margin:0;
    padding:0;
    list-style-type:none;
    display:inline;
}

#galerie li a img{
    border:1px solid #FFFADE;
    margin:10px 5px;
}

#galerie li a:hover img{
    border:1px solid #c12302;
}

/* -----------------------------------------------------------------------------
 --- Soirees --- */

 
#content.soirees h1{
    background:url(images/titre_soirees.gif) no-repeat bottom left;
}

#content.soirees h2{
    font-size:1.4em;
    background:url(images/soirees_h2_bg.gif) no-repeat top left;
    width:214px; height:28px;
    padding:2px 0 0 3px;
    color:#ffffff;
}

.date{
    font-weight:bold;
    color:#c12302;
}

#a_venir, #passees{
    margin:0 20px 20px 0;
    padding:0
    }
#a_venir dt, #passees dt{
    margin:0 0 5px 0;
    padding:0
    }

#a_venir dd, #passees dd{
    margin:0 0 5px 0;
    padding:0;
    }

#passees dt{
    width:330px;
    float:left;
    }

#passees dd{
    border-top:1px dashed #c12302;
    margin-left:340px;
    padding-top:10px;
}


/* -----------------------------------------------------------------------------
 --- Produits --- */
#content.produits h1{
    background:url(images/titre_produits.gif) no-repeat bottom left;
}

#bg{
    background:url(images/produits_bg.jpg) no-repeat top center;
    width:704px;
    height:520px;
    padding:1px; /* Hack pour IE, afin de faire reconnaitre les margin de #contenu*/
}

#contenu{
    display:block;
    padding:3px;
    margin:20px 20px 20px 270px;
    font-weight:bold;
}

#contenu h2{
    margin:5px; padding:0;
    font-size:1.2em;
}

#content.produits ul{
    margin:5px;
    padding:0;
}

ul.produits{
    padding:3px;
    float:left;
}

#content.produits li{
    list-style-type:none;
    margin:0;
    padding:0;
}


#contenu p{
    margin:0 0 10px 0; padding:0;
    color:#c12302;
}

/* -----------------------------------------------------------------------------
 --- Plan d'accès --- */
#content.carte h1{
    background:url(images/titre_carte.gif) no-repeat bottom left;
}

#content.carte img{
    margin-left:70px;
}

#content.carte #adresse{
    background:url(images/carte_bouee.gif) no-repeat center left;
    padding:5px 5px 5px 70px;
    margin:0 0 30px 200px;
    width:240px;
    color : #72290b;
    font-size   : 1.3em;
    font-weight : bold;
}

/* ==========================================================================
    Spans inutiles */
.blocklink span, .logo_barberousse span, #menu ul li a span, #content h1 span,
#content.accueil h2 span, #menu a.autre_barberousse span{
    display:none;
}


/*
    Cette classe est destinée à faire calculer certains points au navigateur
    plus d'info :
    http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage
*/
.format_context{
    overflow:hidden;        /* Pour FF   */
    display:inline-block;   /* Pour IE   */
}