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

   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 08

   © Elephorm & Alsacreations.com

   Conditions d'utilisation:

   http://creativecommons.org/licenses/by/2.0/fr/

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





/* --- COULEURS --- */



/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant

   uniquement les couleurs de fond (propriétés background) et les couleurs

   du texte (propriété color).

   Pour modifier la disposition des blocs, voir plus bas dans la feuille de

   styles la partie «positionnement». */



/* Général */

body {

	color: #432C19;

	background:url(../images/bg.jpg);

	background-repeat:no-repeat;

	background-position:top center;

	background-attachment:fixed;

	margin-left:-1px;

}

a {

	color: #FFFFFF;

}

a:hover, a:focus {

	color: #FFFFFF;

}

strong {

	color: #A1B55D;

}







/* Navigation */

#navigation {

	background:url(../images/menu.png);

	background-repeat:no-repeat;

	

	width:1023px;

}

#navigation a {

	color: #ffffff;

	font-weight:bold;

}



#navigation a:hover, #navigation a:focus {

	

}



/* Bloc central */

#centre {

	 /* Voir -> Note 1 */

}



/* Contenu principal */

#principal {

	color: #432C19;

	 /* -> 2 */

}

#principal a {

	color: #ffffff;

}

#principal a:hover, #principal a:focus {

	color: #ffffff;

}

#principal strong {

	color: #181A12;

}



/* Contenu secondaire */

#secondaire {

	 /* -> 2 */

}







/* --- POSITIONNEMENT --- */



/* Page */

body {

	padding: 0px 0px;

}

#global {

	width: 1023px;

	margin: 0 auto; /* -> 3 */

}



/* En-tête */

#entete {

	margin-top:2px;

	background:url(../images/header.png);

	background-repeat:no-repeat;

	height:161px;

	width:1023px;

	

}

#entete h1 {

	margin: 0;

}

#entete h1 img {

	float: left;

	margin: 7px 20px 10px 0;

}

#entete .sous-titre {

	margin: 4px 0 15px 0;

}



/* Menu de navigation */

#navigation {

	padding:0;

	

}

#navigation ul {

	width: 1023px;

	overflow: hidden;

	margin: 0;

	padding-left:0px;

	padding-top:8px;

	list-style: none;

}

#navigation li.gauche {

	float: left;

	margin-right: 20px;

	font-size: 17px;

	font-style: normal;

}



#navigation li.rensei {

	float: left;

	margin-top: -8px;

	margin-left:0px;

	padding-top:8px;

	font-size: 17px;

	font-style: normal;

	background:url(../images/rensei.png);

	width:149px;

	height:30px;

	text-align:center;

}



#navigation li.rensei:hover {



	background:url(../images/rensei.png);



}



#navigation li.accueil {

	float: left;

	margin-top: -8px;

	margin-left:0px;

	padding-top:8px;

	font-size: 17px;

	font-style: normal;



	width:147px;

	height:30px;

	text-align:center;

}



#navigation li.accueil:hover {



	background:url(../images/accueil.png);



}





#navigation li.charpente  {

	float: left;

	margin-top: -8px;

	margin-left:0px;

	padding-top:8px;

	font-size: 17px;

	font-style: normal;

	width:142px;

	height:30px;

	text-align:center;

}



#navigation li.charpente:hover {

	float: left;

	background:url(../images/accueil.png);

	margin-top: -8px;

	margin-left:0px;

	padding-top:8px;

	font-size: 17px;

	font-style: normal;

	width:142px;

	height:30px;

	text-align:center;

}





#navigation li.ossature {

	float: left;

	margin-top: -8px;

	margin-left:0px;

	padding-top:8px;

	font-size: 17px;

	font-style: normal;

	width:178px;

	height:30px;

	text-align:center;

}



#navigation li.ossature:hover {

	float: left;

	margin-top: -8px;

	margin-left:0px;

	padding-top:8px;

	font-size: 17px;

	font-style: normal;

	background:url(../images/accueil.png);

	width:178px;

	height:30px;

	text-align:center;

}



#navigation li.photo {

	float: left;

	margin-top: -8px;

	margin-left:0px;

	padding-top:8px;

	font-size: 17px;

	font-style: normal;

	width:207px;

	height:30px;

	text-align:center;

}



#navigation li.photo:hover {

	float: left;

	margin-top: -8px;

	margin-left:0px;

	padding-top:8px;

	font-size: 17px;

	font-style: normal;

	background:url(../images/accueil.png);

	width:207px;

	height:30px;

	text-align:center;

}



#navigation li.pluie {

	float: right;

	margin-top: -8px;

	margin-right:0px;

	padding-top:8px;

	font-size: 17px;

	font-style: normal;

	background:url(../images/accueil.png);

	width:200px;

	height:30px;

	text-align:center;

}



#navigation li.droite {

	float: right;

	margin-right: 0;

	margin-left: 10px;

	padding: 3px 0;

}

#navigation a {

	padding: 0;

	line-height: 1.5;

	font-size: .9em;

	text-decoration: none;

}





/* Bloc central */

#centre {

	width: 100%; /* -> 4 */

	overflow: hidden; /* -> 4 */

}



/* Contenu principal */

#principal {

	float: centre; /* -> 5 */

	width: 1023px;

	padding:0;

}

#principal > :first-child {

	margin-top: 20px;

}

#principal li {

	line-height: 1.5;

}



#house {

padding-top:4px;

margin-left:9px;

}



#rec_left_big {

width:1023px;

float:centre;

margin-top:0px;

margin-left:60px;

}



.mouse_left {

position:relative;

float:left;

left:52px;

bottom:0px;

top:26px

}



.l{

width:600px;

margin-left:267px;

padding-top:22px;

text-align:justify;

}



.l2{

text-align:justify;

width:430px;

margin-left:430px;

padding-top:22px;

}



/* Contenu secondaire */

#secondaire {

	float:right;

	width: 1023px; /* -> 6 */

	margin-right: 0px;

	margin-top:40px;

	

}



#rec {

width:464px;

float:right;

margin:0 12px 25px 0;

}





#heading_leftbig {

position:relative;

background:url(../images/heading_leftbig.png);

background-repeat:no-repeat;

width:348px;

height:40px;

text-align:center;

left:12px;

bottom:22px;



}



#heading_leftbig h1 {

padding:10px 0px 0px 0;

font-size:14px;

font-weight:bold;

color:#ffffff;

font-style:normal;



}







#savplus {

position:relative;

background:url(../images/savplus.png);

background-repeat:no-repeat;

width:96px;

height:22px;

bottom:50px;

right:13px;

float:right;

text-align:center;

padding-top:3px;

font-weight:bold;

cursor:pointer;

}



#top_rec_big{

background:url(../images/top_rec_big.png);

background-repeat:no-repeat;

width:903px;

height:18px;

}



#expand_rec_big {

background:url(../images/expand_rec_big.png);

background-repeat:repeat-y;

width:903px;

}



#bottom_rec_big {

background:url(../images/bottom_rec_big.png);

width:903px;

height:40px;



}



.mouse {

position:relative;

float:left;

left:12px;

bottom:7px;

width:203px;

height:115px;

z-index:5;

}



.p{

width:700px;

margin-left:225px;

padding-top:11px;width:700px;

}



.texte {

font-size:14px;

font-weight:bold;

}





/* Mention de copyright */

#footer {

	background:url(../images/footer.png);

	background-repeat:no-repeat;

	width:1003px;

	height:101px;

	margin-left:10px;

	padding-top:25px;

	padding-left:15px;

	text-align:center;

	font-size:13px;

	font-weight:bold;

}





/* --- NOTES ---



1.	Dans ce gabarit, nous avons un conteneur div#centre, qui regroupe

	div#principal et div#secondaire uniquement. C'est ce conteneur que l'on

	utilise pour placer une image de fond répétée en hauteur, qui dessine

	le fond de la colonne de gauche et de la colonne de droite.

	Ainsi, quelle que soit la colonne la plus longue, on aura bien,

	visuellement, deux colonnes de hauteurs égales.



2.	On utilise ici des couleurs de fond pour div#principal et div#secondaire.

	Et pourtant, nous avons déjà une image de fond, sur div#centre, qui

	«dessine» nos deux colonnes. Pourquoi rajouter des couleurs de fond à

	ces blocs, alors? C'est en fait une sécurité, au cas où:

	- l'image de fond mettrait du temps à se charger (ça arrive);

	- l'image de fond ne peut pas être chargée (rare, mais ça arrive aussi).

	Ainsi, si ces problèmes surviennent, le contenu restera lisible. Notamment

	le contenu de div#principal, qui est sombre, tandis que le fond de la page

	est déjà sombre.

	Notez que dans certains cas ce genre de «sécurité» sera difficile à mettre

	en place, par exemple parce que la couleur de fond des blocs masquerait

	une image de fond comportant des motifs.

	Mais, plus généralement, un bon design de site web devrait rester lisible

	même si les images sont désactivées (ce qui est une option de beaucoup

	de navigateurs).



3.	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;



4.	On utilise ces propriétés pour empêcher le dépassement des flottants (cf.

	http://web.covertprestige.info/test/

	03-elements-flottants-et-element-parent-1.html).

	Le overflow:hidden crée un contexte de formatage qui vient contenir les

	flottants. Le width:100% a le même rôle, mais uniquement pour Internet

	Explorer 6 (utilisation du HasLayout). Dans l'idéal, on le placera avec

	des correctifs destinés à IE6 dans une feuille de styles appelée via un

	commentaire conditionnel.



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 contenu

	principal) 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: 560px;" (mais à cause du padding la largeur réelle sera de 600px).



6.	Les éléments flottants ne repoussent pas les blocs, mais repoussent

	uniquement leur contenu. Pour que notre bloc de contenu secondaire forme

	une colonne distincte du contenu principal, on lui donne donc une marge à

	gauche de 620px (largeur réelle de div#principal + 20px).

	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



*/