/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 06
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */
/*  _______________________________________________
    * MODIFICATIONS ET ADAPTATIONS DYNAMIQUES
    * © Rmy & rmy.fr
    * Conditions d'utilisation:
   	* http://creativecommons.org/licenses/by/2.0/fr/
   	------------------------------------------------ */
 

/* --- COULEURS --- */

/* Général */
body {
	color: #EEEEFF ;
	background: #130707 ;
}

a {
	color: #6232c0 ;
}

a:hover, a:focus {
	color: black ;
}

strong {
	color: #505e32 ;
}

form {
border : black 2px solid;
overflow : auto;
}

/* Global */
#global {
	border-right: 20px solid #181A12 ; /* Voir -> Note 1 ci-dessous */
	color: #40933E ;
	background: #f5fcff url(../img/gauche2.png) repeat-y left top ; /* -> 1 */
}

/* En-tête */
#entete h1{
	padding : 0;
	margin : 0;
}

#entete a{
	display:block;
	padding-top:140px ;
	height:0 !important;
	height : 140px ;	
	background-position:left top;
	background-repeat:no-repeat;
	overflow:hidden;	
	background: transparent url(../img/hdp_rc1.png) no-repeat center top ;
	margin-left: auto;
	margin-right: auto;
	
}

#entete strong {
	font-variant : small-caps;
}



/* Navigation */

#navigation ul{

  position:relative;
  list-style:none;
  padding: 15px;
  padding-top : 0px
  padding-right : 5px;
  padding-bottom : 0;
  margin: 0px;
}

#navigation ul a {
  display:block;
  width :200px;
  height:45px;
  text-decoration:none;
  font: bold 1.2em Georgia, "Bitstream Vera Serif", Norasi, serif;
  color:#6232c0 ;
  z-index:2;
}

#navigation ul a:hover{

  color:white;
  width:200px;
  z-index:1;
}

#lien1 {
	padding-left: 5px;
	padding-top: 10px;
	background: url(../img/icones/bouton.png)no-repeat;
	}

#lien1:hover{
	padding-left: 5px;
	background: url(../img/icones/bouton_hover.png)no-repeat;
	}

#lien2 {
	padding-left: 5px;
	padding-top: 10px;
	background: url(../img/icones/bouton.png)no-repeat;
	}

#lien2:hover{
	padding-left: 5px;
	background: url(../img/icones/bouton_hover.png)no-repeat;
	}

#lien3 {
	padding-left: 5px;
	padding-top: 10px;
	background: url(../img/icones/bouton.png)no-repeat;
	}

#lien3:hover{
	padding-left: 5px;
	background: url(../img/icones/bouton_hover.png)no-repeat;
	}

#lien4 {
	padding-left: 5px;
	padding-top: 10px;
	background: url(../img/icones/bouton.png)no-repeat;
	}

#lien4:hover{
	padding-left: 5px;
	background: url(../img/icones/bouton_hover.png)no-repeat;
	}

#lien5 {
	padding-left: 5px;
	padding-top: 10px;
	background: url(../img/icones/bouton.png)no-repeat;
	}

#lien5:hover{
	padding-left: 5px;
	background: url(../img/icones/bouton_hover.png)no-repeat;
	}

#lien6 {
	padding-left: 5px;
	padding-top: 10px;
	background: url(../img/icones/bouton.png)no-repeat;
	}

#lien6:hover{
	padding-left: 5px;
	background: url(../img/icones/bouton_hover.png)no-repeat;
	}

#lien7 {
	padding-left: 5px;
	padding-top: 10px;
	background: url(../img/icones/bouton.png)no-repeat;
	}

#lien7:hover{
	padding-left: 5px;
	background: url(../img/icones/bouton_hover.png)no-repeat;
	}

#lien8 {
	padding-left: 5px;
	padding-top: 10px;
	background: url(../img/icones/bouton.png)no-repeat;
	}

#lien8:hover{
	padding-left: 5px;
	background: url(../img/icones/bouton_hover.png)no-repeat;
	}

#lien9 {
	padding-left: 5px;
	padding-top: 10px;
	background: url(../img/icones/bouton.png)no-repeat;
	}

#lien9:hover{
	padding-left: 5px;
	background: url(../img/icones/bouton_hover.png)no-repeat;
	}

#lien10 {
	padding-left: 5px;
	padding-top: 10px;
	background: url(../img/icones/bouton.png)no-repeat;
	}

#lien10:hover{
	padding-left: 5px;
	background: url(../img/icones/bouton_hover.png)no-repeat;
	}

#lien11 {
	padding-left: 5px;
	padding-top: 10px;
	background: url(../img/icones/bouton.png)no-repeat;
	}

#lien11:hover{
	padding-left: 5px;
	background: url(../img/icones/bouton_hover.png)no-repeat;
	}


/* Contenu principal */
#contenu {
	height : 1%; /*créer un contexte pour résoudre le problème de float imbriqué*/
	overflow : auto;
	color: #363B29;
	background: url(../img/06-coin.png) no-repeat left top;
}
#contenu a {
	color: #6232c0;
	font-weight: bold;
	border-bottom: 1px dotted #6232c0;
}
#contenu a:hover, #contenu a:focus {
	color: black;
	
}
#contenu strong {
	color: #181A12;
}

#contenu a img {
	border : none;
}

#carte_visite {
	width : 270px;
	height : 150px;
	margin : auto;
	margin-top : 20px;
	margin-bottom : 20px;
	padding : 2px;
	background-color : #FFFFFF;
	border-right : 8px solid grey;
	border-bottom : 6px solid grey;
}

#tarifs {
	width : 70%;
	margin : auto;
	border : 1px solid orange;
	margin-top : 30px;
	padding : 15px;
	background-color : #DEDEDE;
}

.supprimer
{
margin-left : 20px;
border:none;
color:#ffffff;
background:url(../img/suppr.png) no-repeat;
width : 20px;
height : 20px;
}

/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 30px 10px 0 10px;
}
#global {
	width: 95%;
	overflow: hidden; /* -> 2 */
	min-width: 741px;
	max-width: 1200px; /* -> 3 */
	margin-left: auto;
	margin-right: auto; /* -> 4 */
}

/* En-tête */
#entete {
	margin-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top : 0;
	
}
#entete h1 {
	text-indent : -10000px;
	margin: 0;
}

#soust .sous-titre {
	margin: 4px 0 15px 0;
	text-align : right;
}

/* Menu de navigation */
#navigation {
	width: 210px;
	float: left; /* -> 5 */
}

/* Contenu */
#contenu {
	margin-left: 230px; /* -> 7 */
	padding: 10px 20px 10px 40px;
}

#contenu > :first-child {
	margin-top: 10px;
}

#contenu p, #contenu li {
	line-height: 1.5;
}

#contenu img {
	margin : none;
	margin-left: 8px;
	margin-right : 8px;
}

/* Mention de copyright */
#copyright {
	width: 90%;
	margin: 0;
	padding: 0 0 10px 20px;
	text-align: left;
}

/*pied de page*/
#pied {
	width: 90%;
	overflow: hidden; /* -> 2 */
	min-width: 700px;
	max-width: 1000px; /* -> 3 */
	margin-left: auto;
	margin-right: auto; /* -> 4 */
	float : none;
}





/* --- NOTES ---

1.	Ce gabarit joue sur les couleurs de fond, images de fond et parfois
	les bordures des principaux blocs. On peut noter que:
	- Le bloc div#global a une couleur de fond claire. C'est cette couleur de
	  fond que l'on retrouve, visuellement, en fond de la colonne de contenu.
	- La colonne de gauche ainsi que la «bordure» qui sépare les deux colonnes
	  sont dessinées par une image de fond sur div#global, image qui se répète
	  en hauteur.
	- Le bloc d'en-tête masque complètement la couleur de fond et l'image de
	  fond de div#global. Supprimez la couleur de fond de div#entete pour le
	  vérifier.
	- Le retrait de 20px à droite de la colonne de droite est créé par... une
	  bordure sur div#global.
	- Une petite image de fond en haut à gauche de div#contenu vient compléter
	  l'effet visuel.

2.	On utilise overflow:hidden empêcher le dépassement des flottants (cf.
	http://web.covertprestige.info/test/
	03-elements-flottants-et-element-parent-1.html).

3.	La largeur du conteneur principal est fluide. div#global a une largeur de
	90%, c'est à dire une largeur qui dépend de l'espace disponible dans son
	conteneur, l'élément BODY. Concrètement, la largeur de div#global dépendra
	de la largeur de la fenêtre du navigateur.
	Ensuite, on «limite» les largeurs que peut prendre div#global à une
	fourchette allant de 700px (min-width) à 1000px (max-width). On évite
	ainsi d'avoir des lignes de texte horriblement longues dans les grandes et
	très grandes résolutions (1280px et plus).
	Notez que l'on peut utiliser cette technique de largeur fluide
	«intelligente» pour n'importe quel design fluide ou presque.

4.	Les marges automatiques à gauche et à droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global à gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global à droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global à droite avec un retrait (à droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

5.	C'est la propriété "float" qui nous permet de placer deux blocs
	côte-à-côte. Notez bien que l'élément flottant (ici, notre menu de
	navigation) doit être placé en premier dans le code HTML. Il est
	préférable de lui donner une largeur, ce que nous faisons ici avec un
	"width: 180px;".

6.	Correction d'un bug d'Internet Explorer 6. Voir la dernière partie de
	http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-
	mise-en-forme-du-code-html
	Dans l'idéal, on placera ce correctif dans une feuille séparée, appelée
	via un commentaire conditionnel visant IE6.

7.	Les éléments flottants ne repoussent pas les blocs, mais repoussent
	uniquement leur contenu. Pour que notre bloc de contenu principal forme
	une colonne distincte du menu, on lui donne donc une marge à gauche de
	220px.
	Il existe une autre technique pour adapter la largeur d'un bloc aux
	flottants qui le précèdent. On pourra lire l'article suivant:
		http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/
		design-trois-colonnes-positionnement-flottant

*/