/* CSS Document */
/*
-- Subject : CSS WEBSITE - STRUCTURE
-- Historique : Création le 
-- Author : 
-- Évolubiz Inc.
*/

/**********Couleur***********/
/*
	Rouge : #830F0F
	Rouge logo : #B5121B
	Gris foncé : #646464
	Gris moyen : #CACACA
	Gris pâle : #E0E0E0
	Gris brun : #49423C
*/
/********************************************** Container *************************************************/
#container
{
	position: relative;
	width: 100%;
	padding: 0 1px 0 1px;
	margin: 0 auto 0 auto;
	background-color: #FFFFFF;
	border-left: 1px solid #646464;
	border-right: 1px solid #646464;
}
/**********************************************************************************************************/

/************************************************ Header **************************************************/
#header
{
	position: relative;
	background: url(../images/header_photo.jpg) no-repeat 100% 0;
	background-color: #FFFFFF;
}

#header .logo
{
	width: 25%; height: 170px;
	text-align: center;
}

#header .logo IMG
{
	margin: 90px 0 0 20px;
}

#header A.home
{
	position: absolute;
	top: 73px; left: 2%;
	color: #830F0F;
	font-size: 75%;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0 0 0 10px;
	background: url(../images/home_fleche.gif) no-repeat 0 1px;
}

#header A.home:hover
{
	text-decoration: underline;
}

/* MENU */
#header DIV.menu
{
	position: relative; 
	background-color: #646464;
	border-bottom: 1px solid #FFFFFF;
	height: 25px;
}
/* \*/ * html #header DIV.menu { height: 26px; } /* */

#header DIV.menu UL
{
	position: absolute; top: 0; left: 0;
	margin: 0; padding: 0;
	list-style-type: none;
	text-transform: uppercase;
	font-size: 95%;
	font-weight: bold;
}

#header DIV.menu UL.utilz
{
	top: 6px; left: auto; right: 10px;
}

#header DIV.menu UL LI
{
	display: inline;
	margin: 0; padding: 0;
}

#header DIV.menu UL LI.actif
{
	border: none;
}

#header DIV.menu UL LI A { float: left; color: #FFFFFF; background-color: #830F0F;  text-decoration: none; border-right: 1px solid #FFFFFF; padding: 6px 20px 0 20px; height: 19px; }
/* \*/ * html #header DIV.menu UL LI A { height: 25px; } /* */
#header DIV.menu UL LI.first A { padding-left: 30px; }
#header DIV.menu UL LI A:hover { background-color: #B5121B; }
#header DIV.menu UL LI.actif A { background-color: #646464; border-left: none; height: 20px; }
/* \*/ * html #header DIV.menu UL LI.actif A { height: 26px; } /* */

#header DIV.menu UL.utilz
{
	border-bottom: none;
}

#header DIV.menu UL.utilz LI A { float: none; color: #FFFFFF; text-decoration: none; background: transparent; border: none; padding: 0 5px 0 5px; height: auto; }
#header DIV.menu UL.utilz LI A SPAN {  }
#header DIV.menu UL.utilz LI A:hover { color: #B5121B; background-color: #FFFFFF; }

#header DIV.columnright
{

}

/**********************************************************************************************************/

/*********************************************** Middle ***************************************************/
#row_middle
{
	clear: both;
	background-color: #646464;
	padding: 5px 5px 5px 0;
}

/**********************************************************************************************************/

/******************************************** Colonne gauche **********************************************/
#column_left
{
	float: left;
	width: 22%;
}

#column_left DIV.menu
{
	
}

#column_left DIV.menu UL
{
	margin: 25px 0 0 0; padding: 0;
	text-transform: uppercase;
	font-size: 85%;
	font-weight: bold;
	border-bottom: 1px solid #E0E0E0;
	list-style-type: none;
}

#column_left DIV.menu LI
{	
	margin: 0; padding: 0;
	border-top: 1px solid #E0E0E0;
}

#column_left DIV.menu LI A { display: block; width: 100%; color: #E0E0E0; text-decoration: none; background: url(../images/columnleft_menu_ul.gif) no-repeat 18px 6px; }
#column_left DIV.menu LI A SPAN { display: block; padding: 2px 5px 2px 30px; }
#column_left DIV.menu LI A:hover { color: #E0E0E0; background-image: url(../images/columnleft_menu_ul-actif.gif); }
#column_left DIV.menu LI.actif A { color: #FFFFFF; background-image: url(../images/columnleft_menu_ul-actif.gif); }
#column_left DIV.menu LI.actif A.actif { background-color: #830F0F; }

#column_left DIV.menu LI UL
{	
	margin: 0; padding: 0;
	border-bottom: none;
}

#column_left DIV.menu LI LI
{	
	
}

#column_left DIV.menu LI.actif LI A { color: #E0E0E0; background: url(../images/columnleft_menu_ulul.gif) no-repeat 30px 6px; background-color: transparent; }
#column_left DIV.menu LI.actif LI A SPAN { padding: 4px 5px 3px 40px; }
#column_left DIV.menu LI.actif LI A:hover { color: #FFFFFF; background-image: url(../images/columnleft_menu_ulul-over.gif); }
#column_left DIV.menu LI.actif LI.actif A { color: #FFFFFF; background-image: url(../images/columnleft_menu_ulul-over.gif); }
#column_left DIV.menu LI.actif LI.actif A.actif { background-color: #830F0F; background-image: url(../images/columnleft_menu_ulul-actif.gif); }

#column_left DIV.menu LI LI UL
{	
	font-size: 90%;
}

#column_left DIV.menu LI.actif LI.actif LI A { font-size: 110%; color: #E0E0E0; background: url(../images/columnleft_menu_ulul.gif) no-repeat 50px 6px; background-color: transparent; }
#column_left DIV.menu LI.actif LI.actif LI A SPAN { padding: 4px 5px 3px 60px; }
#column_left DIV.menu LI.actif LI.actif LI A:hover { color: #FFFFFF; background-image: url(../images/columnleft_menu_ulul-over.gif); }
#column_left DIV.menu LI.actif LI.actif LI.actif A { color: #FFFFFF; background-image: url(../images/columnleft_menu_ulul-over.gif); }
#column_left DIV.menu LI.actif LI.actif LI.actif A.actif { background-color: #830F0F; background-image: url(../images/columnleft_menu_ulul-actif.gif); }

#column_left DIV.renovateur
{
	margin: 40px 0 0 20px;
}

#column_left DIV.renovateur A
{
	display: block;
	color: #FFFFFF;
	font-size: 95%;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	padding: 85px 0 0 0;
	width: 100%;
	background: url(../images/columnleft_renovateur.gif) no-repeat 100% 10px;
	background-color: #C7C7C7;
}

#column_left DIV.renovateur A SPAN
{
	display: block;
	padding: 2px 2px 2px 7px;
	background-color: #49423C;
}
/**********************************************************************************************************/

/*********************************************** Content **************************************************/
#column_content
{
	float: left;
	width: 78%;
	background-color: #FFFFFF;
}
/* \*/ * html #column_content { float: left; margin-left: 0; width: 77%; } /* */

#column_content.accueil
{
	float: left;
	width: 97%;
	background-color: #FFFFFF;
}
/* \*/ * html #column_content.accueil { float: left; margin-left: 0; width: 97%; } /* */

#content
{
	position: relative;
}

#content .trail
{
	position: absolute; top: 25px; left: 45px;
	font-size: 80%;
}

#content .trail A { color: #646464; }
#content .trail A:hover { color: #B5121B; }

#content .content
{
	position: relative;
	margin: 15px 10px 0 45px; 
	padding: 5px 0 5px 0;
}

#content DIV.box
{
	position: relative;
	margin: 0 0 25px 0;
}

#content DIV.box DIV.box_content
{
	padding: 5px 5px 20px 5px;
}

#content DIV.box H2
{

}



/******************* Rajout page du rénovateur + marques distribuées **********************/
#content .content .flash { margin-top: 20px; position: relative; }

#content .content .boite_customizer { border: none; margin: 0; text-align: center; position: relative; }

#content .content .boite_customizer img { margin-top: 15px;}

#content .content .boite_customizer ul { margin: 0 0 15px 35px; padding:0; list-style-image: url(../images/bullet.gif);}

#content .content .boite_customizer ul li { margin: 2px 0 0 0; padding: 0; font-size: 95%;}
* html #content .content .boite_customizer ul li { margin: 2px 0 0 0; padding: 0; font-size: 90%;}

#content .content .boite_customizer DIV.colonne1 { float: left; width: 32%; text-align:center; position: relative; }

#content .content .boite_customizer DIV.agauche { float: left; width: 40%; text-align:left; position: relative; }

#content .content .boite_customizer DIV.colonne1 IMG.renovateur { margin: 15px; }

#content .content .boite_customizer DIV.colonne2 { float: left; width: 52%; position: relative; }

#content .content .boite_customizer DIV.colonne2 DIV.start_customizer {padding: 10px; margin-top: -20px;}

#content .content .boite_customizer DIV.colonne2 DIV.start_customizer span a 
{ 
	padding: 4px 47px 4px 7px; 
	background-color:#FFF; 
	border: none; 
	border: 1px solid #999; 
	text-decoration: none; 
	font-weight: bold;
	font-size:16px;
	color: #444; height: 16px;
}
#content .content .boite_customizer DIV.colonne2 DIV.start_customizer span a:hover { 
	border-color:#222; text-decoration: none; 
}

#content .content .boite_customizer DIV.colonne2 DIV.start_customizer a img {
	position: relative; left: -44px; top: 13px;
}
/******************* FIN des ajouts **********************/

/******************* Div pour la page des contacts **********************/
.adresses h2 
{ 
	border-bottom: none;
	position: relative;
	background: url(../images/h2_background.gif) repeat-x 0 100%;
}

.magasins {	
	position: relative;
	float: left;
	margin: 5px 20px 10px 0; 
	width: 170px;
	border: none;
}

.magasins h3 {
	
}

.magasins p {
	
}
/************************************************************************/


/**********************************************************************************************************/

/*********************************************** Footer ***************************************************/
#footer
{
	clear: both;
	padding: 1px 0 0 22%;
}

#footer .links
{
	font-size: 85%;
	line-height: 90%;
	text-align: right;
	margin: 5px 0 5px 0;
}

#footer .adresse
{
	display: none;
}

#footer UL
{
	display: inline;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#footer LI
{
	display: inline;
	margin: 0;
	padding: 0 0 0 5px;
	border-left: 1px solid #999999;
}

#footer LI.first
{
	border-left: none;
	padding-left: 0;
}

#footer LI A { white-space: nowrap; color: #E0E0E0; }
#footer LI A:hover { color: #FFFFFF; }

#footer .copyright
{
	clear: both;
	color: #E0E0E0;
	font-size: 75%;
	text-align: right;
	margin-right: 1px;
}

#footer .credits
{
	clear: both;
	font-size: 80%;
	text-align: right;
	margin-right: 1px;
}

#footer .credits A, #footer .credits A:hover { color: #E0E0E0; text-decoration: none; }

/**********************************************************************************************************/