/* Mai 2010   */
/* Encodage UTF-8 */

/*==================================================================*/
/* Barre d'accessibilite */


#accessibilite, #accessibilite a
{
margin-top: 0px;
margin-bottom: 0px;
padding: 2px;
font-size: 80%;
color: #DFDFDF;
}

#accessibilite a:hover
{
color: black;
}

/*==================================================================*/
h1
{
margin: 0px;
padding: 0px;

height: 1px;

text-indent:  -10000px;
}

body
{
background-color: white;
font-family: Tahoma, Arial, Verdana, Georgia, sans-serif;
font-size: 1em;
margin: 0px;
padding: 0px;

}

strong, em
{
/*On empêche le navigateur d'afficher l'interpretation sémantiques des balises (gras, italique...)*/
font-weight: normal;
font-style: normal;
}

/*=================================================================================================*/
#banniere
{
/*L'épaisseur de la bannière est identique à celle du logo. La taille globale s'additionnant au niveau des marges*/
height: 60px;

background-color: #86183f;
/*Les marges internes permettent de décaller le logo en conservant la couleur de fond*/
padding-top: 0.8em;
padding-bottom: 0.8em;
/*
background-image: url("../images/40ans_Logo_Ami8_71x87.jpg"); 
background-repeat: no-repeat;
background-position: top right;
*/
clear: both;
}

#logo_banniere
{
position: absolute;
float: left;

/*Epaisseur du logo identique à celle de la bannière*/
height: 60px;
width: 195px;

background-image: url("../images/Logo_banniere.png");
background-repeat: no-repeat;


/*décallage du logo du bord gauche*/
margin-left: 0.8em;
/*la marge basse empêche le menu horizontale de venir se coller au logo*/
}

#texte_logo
{
font-weight: normal;
font-style: normal;

border-left:1px solid white;

margin-left: 30%;
padding: 0px;
padding-left: 2em;

font-family: Arial, Verdana, Georgia, sans-serif;
font-size: 1em;

color: white;
}

/*=================================================================================================*/
#menu_bannniere
{
/*Le menu se colle à gauche et en dessous de la bannière avec son logo, de lui même*/

border-top-style: solid;
border-top-color: #FF6600;
border-top-width: 4px;

border-bottom-style: solid;
border-bottom-color: #FF6600;
border-bottom-width: 4px;
}

#menu_bannniere ul
{
/*permet de faire coller la mise en page 'ul' avec la mise en page du conteneur div id=menu_banniere*/
margin: 0px;

border-top-style: solid;
border-top-width: 2px;
border-top-color: #edad53;

border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #edad53;

background-color: #eedd81;
/*décallage du menu marge de gauche alignée avec logo*/
padding-left: 0.8em;
}

#menu_bannniere li
{
list-style-type: none;
font-family: Arial, Verdana, Georgia, sans-serif;

text-transform: capitalize;

/*petit trait séparant les mots*/
border-right-style: solid;
border-right-width: 1px;
border-right-color: #FF6600;
/*Je ne sais pas pourquoi, mais sur la gauche du texte il reste l'emplacement de la puce*/
padding-left: 0px;
/*Il faut donc compenser à droite avec la marge interne pour équilibrer le décallage du texte*/
padding-right: 5px;

/*police du menu*/
font-size: 1em;
/*Changer ici si on veut le menu en gras*/
font-weight: normal;

/*affichage horizontale de la "liste"*/
display: inline;
}

#menu_bannniere li >a
{
/*suppression du soulignement des liens*/
text-decoration: none;
color: #86183f;
}

#menu_bannniere li >a:hover
{
/*Au survol le fond des liens devienne orange*/
background-color: #86183f;
color:#FFCC00;
}

/*#menu_bannniere li >a:visited
{
/*une fois visité le texte est noir
color: black;
text-decoration: none;
}*/



/*=================================================================================================*/

#sommaire
{
float: left;
width: 200px;
margin: 0px;
padding-bottom: 80px;
background-image: url("../images/40ans_degrade_sommaire_bas_200x80.jpg");
background-position: bottom;
background-repeat: no-repeat;
background-color: #b02e6e;
}

#sous_sommaire, #evenement, .sous_sommaire, .evenement, .sommaire_info, .sommaire_deroulement, .sommaire_telechargement
{
color: white;
text-decoration: none;
list-style-type: none;
text-align: left;
padding: 0px;
font-size: 0.9em;

background-color: #86183f;

margin-top: 1.2em;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.2em;

width: 80%;



/* Coins arrondis qui ne fonctionnent que sous les navigateur à moteur Gecko (Firefox)*/
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

#sous_sommaire ul, #evenement ul, #sous_sommaire p, #evenement p, .sous_sommaire ul, .sous_sommaire p,  .sommaire_info p, .sommaire_deroulement p, .sommaire_telechargement p
{
margin: 0px;
/*La valeur ci dessous est identique au padding des #sous_sommaire hx */
padding: 0.4em;
padding-top: 0px;
color: white;
text-decoration: none;
text-align: justify;
list-style-type: none;
font-size: 1em;
}

#sous_sommaire li, #evenement li, .sous_sommaire li,  .sommaire_info li, .sommaire_deroulement li, .sommaire_telechargement li
{
padding-left: 0.5em;
padding-right: 0.5em;
text-align: left;
}

#sous_sommaire a, #evenement a, .sous_sommaire a,  .sommaire_info a, .sommaire_deroulement a, .sommaire_telechargement a
{
color: white;
text-decoration: none;
list-style-type: none;
}

#sous_sommaire h5, #evenement h5, #sous_sommaire h6, #evenement h6, .sous_sommaire h5, .sous_sommaire h6,  .sommaire_info h5, .sommaire_deroulement h5, .sommaire_telechargement h5,  .sommaire_info h6, .sommaire_deroulement h6, .sommaire_telechargement h6
{
color: white;
text-decoration: none;
text-align: center;
background-color: #edad53;
margin: 0px;
/*Les valeurs ci dessous sont identiques au padding des #sommaire ul */
margin-bottom: 0.4em;
padding: 0.4em;
padding-bottom: 0px; 
padding-top: 0px;

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
} 
}

/*Image pour déco du titre */
#sous_sommaire h5, #evenement h5, #sous_sommaire h6, #evenement h6, .sous_sommaire h5, .sous_sommaire h6,
{
background-image: url("../images/001_21.png");
background-position: top left;
background-repeat: no-repeat;
padding-left: 26px;
min-height: 26px;
}

/*.sommaire_info h5, .sommaire_deroulement h5, .sommaire_telechargement h5,  .sommaire_info h6, .sommaire_deroulement h6, .sommaire_telechargement h6
{
background-image: url("../images/Boule_de_noel_26x26.png");
background-position: top left;
background-repeat: no-repeat;


/*border-style: solid;
border-width: 2px;
border-bottom-width: 0px;
border-color: navy;*/

/*-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;*/
/*-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}*/

#sous_sommaire a:hover, #evenement a:hover, #pied_de_page a:hover, .sous_sommaire a:hover
{
color: white;
text-decoration: none;
border-bottom-style: solid;
border-bottom-width: 1px;
}

#sous_sommaire a:visited, #evenement a:visited, #pied_de_page a:visited, .sous_sommaire a:visited
{
color: silver;
text-decoration: none;
border-bottom-style: dashed;
border-bottom-width: 1px;
}
/*
NB: les sous-sommaires des pages des sorties sont différents
>> VOIR PLUS BAS DANS LA SECTION PAGE DES SORTIES
*/



/*======================================================================*/
/*CORPS*/
/*======================================================================*/
#corps
{
float: left;

padding-top: 1em;
padding-left: 3em;
padding-right: 3em;
padding-bottom: 1em;

background-color: white;
/*image corps intersection bannière et sommaire*/
background-image: url("../images/40ans_Carre_strier_jaune_or_vers_blanc_180x190.jpg");
background-repeat: no-repeat;
font-size: 0.9em;
text-align: justify;
width: 50%;
max-width: 800px;
margin-bottom: 20px;
}


#corps h2
{
margin-top: 15px;
margin-bottom: 15px;
/*La marge basse correspond à la hauteur de l'image de déco + 10px...*/
padding-bottom: 100px;
background-image: url("../images/Gamme.jpg");
background-repeat: no-repeat;
background-position: bottom;

color: #FF6600;
font-size: 2em;
text-align: center;

-moz-border-radius-bottomright:10px;
}

#corps h3
{
text-align: center;
font-family: Arial, Verdana, Georgia, sans-serif;
font-size: 1.5em;

/*On décore le titre avec la bordure basse (soulignement) et droite*/ 
border-right-style: solid;
border-right-color: #b02e6e;
border-right-width: 3px;

border-bottom-style: solid;
border-bottom-color: #b02e6e;
border-bottom-width: 3px;

color: #FF6600;

margin: 0px;
/*On rajoute une grosse marge au dessus du titre comme ça il se décolle bien du contenu le précédant*/
margin-top: 0.8em;
margin-bottom: 0.3em;
margin-left: 0.3em;
margin-right: 0.3em;
clear: both;

/* Décoration pour les titres (ex:noel) à commenter quand inutile mais laisser le padding à 0px */
background-image: url("../images/40ans_Ami8_61x26.png");
background-repeat: no-repeat;
background-position: top left;
padding-left: 65px;
padding-bottom: 5px;
/*fin décoration*/


-moz-border-radius-bottomright:10px;
}

#corps ul
{
margin: auto;
width: 80%;
padding: 0px;
}

/*===========================================================*/
/*permet de créer un paragraphe de messages avec une icone d'avertissement (important, note, calendrier)...*/
.important, .note
{
background-image: url("../images/icone_panneau_prioritaire_32x32.png");
background-repeat: no-repeat;
background-position: top left;
/*le padding et le height correspondent à l'épaisseur des icones avec amrge éventuelle*/
padding-left: 34px;
display: block;
min-height: 32px;
clear: both;
}

.info h5, .sommaire_info h5, .sommaire_deroulement h5, .sommaire_telechargement h5
{
background-repeat: no-repeat;
background-position: top left;
/*le min-height correspondent à l'épaisseur des icones avec marge éventuelle*/
padding-left: 34px;
display: block;
line-height: 32px;
min-height: 32px;

}
/*ci dessous les imagse qui servent d'icones pour les points info, date...*/
.sommaire_info h5
{
background-image: url("../images/icone_bouton_information_32x32.png");
}

.sommaire_deroulement h5
{
background-image: url("../images/icone_globe_terrestre_32x32.png");
}

.sommaire_telechargement h5
{
background-image: url("../images/icone_dossier_telechargement_32x32.png");
}

.date_sortie
{
background-image: url("../images/icone_calendrier_24x24.png");
background-repeat: no-repeat;
background-position: top left;
/*le padding et le height correspondent à l'épaisseur des icones avec amrge éventuelle*/
padding-left: 26px;
display: block;
min-height: 24px;
clear: both;
}


/*=================================================================================================*/
/* Formulaires */
/*=================================================================================================*/
form
{
margin: auto;
width: 95%;
max-width: 600px;
border-style: solid;
border-width: 2px;
border-color: #EDAD53;
/*propriété uniquement interprétée par les navigateurs à meoteur gecko (type firefox) pour arrondir les coins
Futures propriété CSS3*/
-moz-border-radius:10px;
}

label, form
{
padding: 5px;
}

label
{
display: block;
}

textarea
{
margin-bottom: 5px;
}

input, textarea
{
border-style: solid;
border-width: 1px;
border-color: #EEDD81;
}

input:focus, textarea:focus
{
background-color: #EEDD81;
border-style: solid;
border-width: 1px;
border-color: #EDAD53;
}
/*
background-color: #EEDD81;
margin-top: 2em;

border-top-style: solid;
border-top-width: 2px;
border-top-color: #EDAD53;*/


/*=================================================================================================*/
/* Tableau des pièces détachées */
/*=================================================================================================*/
caption
{
color: #FF6600;
text-align: center;
margin-bottom: 3px;
}

table, td, tr, th
{
margin: auto;

border-style: solid;
border-width: 1px;
border-collapse: collapse;

font-size: 95%;
}
/*sections du tableau*/
.section_tableau
{
border-color: black;

padding-left: 3px;
color: white;
font-weight: bold;

background-color: #003399;

}
/*Prix spécial adhérents pour les piéces */
.special_adherent
{
border-color: black;
color: #FF6600;
text-align: center;
background-color: #D3DCE6;
}

thead, tfoot, .cellule_centrer
{
text-align: center;
}
/*================================================================================*/

/*Dans la page du club (club.html), affichage des antennes locales (sections)*/
.sections_amiclub
{
color: #FF6600;
font-style: bold;
}

/*On cache les coordonnées pour le fun*/
.details_sections
{
display: none;
}

/*Pour les faire afficher au survol du curseur il faut jouer sur les 'heritages' des selecteurs*/
.sections_amiclub:hover + .details_sections
{
display: inline;
}

/*pour éviter que les détails disparaissent on laisse l'affichage tant que la souris les survole*/
.details_sections:hover
{
display: inline;
}

.image_droite
{
float: right;
margin-left: 0.5em;
}

.image_gauche
{
float:left;
margin-right: 0.5em;
}

/*Image nécessaire aux boutons spéciaux pour la page des 40 ans de l'Ami 8 et du M35 se basant sur les classes d'image_droite et images_gauche. Le but est de mettre ces image dans une balise <a> en display: block et de cacher le texte necessaire aux navigateur vocaux et texte.*/

.bouton_40ans_forum, .bouton_40ans_wiki, .bouton_40ans_contact, .bouton_40ans_presse
{
float: right;
margin-left: 0.5em;
display: block;
width: 200px;
height: 50px;
background-repeat: no-repeat;
}

/*On planque le texte pour pas qu'il vienne par dessus l'image, et on le sort de la zone lisible puisque la propriete display:none n'est pas correctement gérer par cette merde d'IE...*/
.cache
{
position: absolute;
left: -5000px;
top: -5000px;
tex-indent: -5000px;
}

.bouton_40ans_forum
{
background-image: url("../images/40ans_Boutons_Forum_200x50.jpg");
}

.bouton_40ans_wiki
{
background-image: url("../images/40ans_Boutons_Wiki_200x50.jpg");
}

.bouton_40ans_contact
{
background-image: url("../images/40ans_Boutons_Contact_200x50.jpg");
}

.bouton_40ans_presse
{
background-image: url("../images/40ans_Boutons_Presse_200x50.jpg");
}
/*fin des boutons spéciaux 40 ans.*/

.back_top
{
font-size: 0.7em;
float: right;
color: navy;
background-color: #EEDD81;
margin-top: 1.5em;
margin-bottom: 1.5em;
}

#pied_de_page
{
clear: both;
text-align: center;
background-color: #EEDD81;
margin-top: 2em;

border-top-style: solid;
border-top-width: 2px;
border-top-color: #EDAD53;
}

#pied_de_page a, #pied_de_page p
{
padding: 0px;
margin: 0px;
text-decoration: none;
}

#pied_de_page img
{
border: none;
}
/*=================================================================================================*/
/*Page Manifestations*/
/*=================================================================================================*/

/*Chaque sortie peut se voir attribuer une liste à puce avec bulletin et programme à télécharger.*/
#telechargement_docs_sorties
{
list-style-type: none;
font-size: 0.75em;
padding-right: 34px !important;
line-height: 32px;

background-color: #D3DCE6;
background-image: url("../images/icone_telechargement_34x34.png");
background-repeat: no-repeat;
background-position: right;

border-color: #FF6600;
border-width: 1px;
border-style: dashed;
}

#telechargement_docs_sorties li
{
padding: 3px;
}


/*Permet de travailler sur les dates des sorties - Ajout d'un fond coloré et position gauche...*/
.journee
{
text-align: left;
color: #003399;
background-color: #D3DCE6;
}


/*pour configurer la liste à puce permettant d'afficher une adresse postale*/
.adresse
{
list-style-type: none;
text-align: center;
background-color:#fff6c6/*#EEDD81*/;
/*propriété uniquement interprétée par les navigateurs à meoteur gecko (type firefox) pour arrondir les coins
Futures propriété CSS3*/
-moz-border-radius:10px;
}

/*=================================================================================================*/
/*Page des SORTIES*/
/*=================================================================================================*/

/*cadre remplaçant les sous-sommaire avec présentation spécifique (date, programmes des sorties, téléchargement des docs...*/

.sommaire_deroulement li
{
/*On ajoute un petit logo calendrier sur les dates de la sortie en chageant le style de puces*/
list-style-image: url("../images/icone_fleche_droite_grise_16x16.png");
}


/*=================================================================================================*/
/*Page Publication*/
/*=================================================================================================*/

/*le corps comporte les 'cartouches' des publications 'LigneZ, Aminews, Podcasts*/
/*generique*/
.cartouche_publication
{
background-color: #EEDD81;
/* si besoin d'ajouter une image de déco*/
/*background-image: url("../images/Double_cloches_128x128.png");
background-repeat: no-repeat;
background-position: top -60px;*/

padding: 1em;
margin: 1em;
clear: both;

border-color: #edad53;
border-width: 2px;
border-style: solid;

-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

/*deux classes permettant d'ajouter des images à gauche ou droite dans les cartouches*/
.image_cartouche_gauche
{
float: left;
margin: 1em;
margin-left: 0px;
border-style: none;
}

.image_cartouche_droite
{
float: right;
margin: 1em;
margin-right: 0px;
border-style: none;
}

/*ligne_z*/
.cartouche_publication_ligne_z
{
background-color: #D3DCE6;
padding: 1em;
margin: 1em;

border-color: #FF6600;
border-width: 2px;
border-style: solid;
}

/*Aminews*/
.cartouche_publication_aminews
{
background-color: #D3DCE6;
padding: 1em;
margin: 1em;

border-color: #FF6600;
border-width: 2px;
border-style: solid;
}

/*podcast*/
.cartouche_publication_podcast
{
background-color: #D3DCE6;
padding: 1em;
margin: 1em;

border-color: #FF6600;
border-width: 2px;
border-style: solid;
}

/*supprime toutes les puces dans les cartouches spécifiques*/
.cartouche_publication, .cartouche_publication_podcast ul, .cartouche_publication_aminews ul, .cartouche_publication_ligne_z ul
{
list-style-type: none;
clear: both;
}


.titre_cartouche_publication
{
/*On annule l'héritage des bordure des titres du corps*/
border-style: none;
border-width: 0px;
}

/*=================================================================================================*/
/*Applications Flash et logo creative common*/
/*=================================================================================================*/

.cartouche_publication object
{
display: block;
margin: auto;
margin-top: 1em;
margin-bottom: 1em;
}

#creative_common
{
text-align: center;
margin: 0.5em;
padding: 0.2em;
}

#creative_common a
{
color: #FF6600;
font-size: 1em;
font-style: italic;
padding-right: 85px;
background-image: url("../images/mini_cc_by_nc_nd.png");
background-repeat: no-repeat;
background-position: right;
}

/* diaporama reprend le même design que le corps mais en taille fixe pour intégrer le dewslider*/
#diaporama
{
padding/*-top*/: 1em;
/*padding-left: 3em;
padding-right: 3em;
padding-bottom: 1em;
*/
background-color: transparent;

font-size: 0.9em;
text-align: justify;
width: 448px;
margin: auto;
margin-bottom: 20px;
clear: both;
}

#diaporama h3
{
text-align: center;
font-family: Arial, Verdana, Georgia, sans-serif;
font-size: 1.5em;

/*On décore le titre avec la bordure basse (soulignement) et droite*/ 
border-right-style: solid;
border-right-color: #D3DCE6;
border-right-width: 3px;

border-bottom-style: solid;
border-bottom-color: #D3DCE6;
border-bottom-width: 3px;

color: #FF6600;

margin: 0px;
/*On rajoute une grosse marge au dessus du titre comme ça il se décolle bien du contenu le précédant*/
margin-top: 0.8em;
margin-bottom: 1em;
margin-left: 0.3em;
margin-right: 0.3em;
padding: 0px;
clear: both;
}

#diaporama object
{
width: 448px;
margin: auto;
clear: both;
}