@charset "utf-8";
/* CSS Document */

body, li, ul{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	list-style:none;
}

.float-left{float:left;}
.guide-matiere-clear{clear:both;}
.guide-matiere-img{border:none;}

/*********** Permet de mettre un style à l'ensemble ***********/
#guide-matiere{
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.75em;
	line-height: 1;
}

/*************************************************************/
/*********** Guide de matiere statique ou en popin ***********/
/*************************************************************/
/*********** Statique ***********/
#guide-matiere-statique{
	background-color:#616365;
	width:960px;
	margin: 0;
	padding: 0;
	border: 0;
}

#guide-matiere-statique-h1{
	margin: 0;
	padding: 0;
	font-size: 100%;
	font: inherit;
	width:960px;
	height:100px;
	display:block;
}

.guide-matiere-statique-bandeau{
	height:300px;
	width:960px;
	background-color:#FFFFFF;
	margin-bottom:5px;
}

#guide-matiere-statique-menu{
	margin-top:10px;
	display:block;
	width:960px;
	height:100px;
}

.guide-matiere-statique-block-menu{
	background-color:#FFFFFF;
	display:block;
	height:100px;
	width:240px;
}

.guide-matiere-ul-menu{
	list-style:none;
	margin:20px 0 0 20px ;
	padding:0 ;
}

.guide-matiere-ul-menu li{
	margin-bottom:3px;
}

.guide-matiere-ul-menu a{	
	text-decoration:none;
	color:#616365;
}

.guide-matiere-ul-menu a:hover{
}

/*********** Popin ***********/
#guide-matiere-popin{
	width:720px;
	margin: 0;
	padding: 0;
	border: 0;
}

#guide-matiere-popin-bouton-fermer{
	float:right;
	margin-right:20px;
}

.guide-matiere-popin-bandeau{
	height:300px;
	width:720px;
	background-color:#FFFFFF;
}

#guide-matiere-popin-bandeau-h1{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	width:720px;
	height:50px;
	display:block;
}

/* Popin avec slider */
.guide-matiere-popin-block-slider{
	width:480px;
	height:300px;
	display:block;
}

/****************************************************************/
/*********** Choix de la couleur en fonction du guide ***********/
/****************************************************************/
/*********** Or750 ***********/
.couleur-fond-guide-or750{background-color:#fdc927;}
.couleur-texte-guide-or750{color:#fdc927;}
.color-hover-or750:hover{color:#fdc927;}

/*********** Or375 ***********/
.couleur-fond-guide-or375{background-color:#EE8991;}
.couleur-texte-guide-or375{color:#EE8991;}
.color-hover-or375:hover{color:#EE8991;}

/*********** Platine ***********/
.couleur-fond-guide-platine{background-color:#D2D956;}
.couleur-texte-guide-platine{color:#D2D956;}
.color-hover-platine:hover{color:#D2D956;}

/*********** Palladium ***********/
.couleur-fond-guide-palladium{background-color:#9CD7EF;}
.couleur-texte-guide-palladium{color:#9CD7EF;}
.color-hover-palladium:hover{color:#9CD7EF;}

/*********** Argent ***********/
.couleur-fond-guide-argent{background-color:#784D95;}
.couleur-texte-guide-argent{color:#784D95;}
.color-hover-argent:hover{color:#8e68ad;}

/*********** Plaque Or ***********/
.couleur-fond-guide-plaqueOr{background-color:#F39E1B;}
.couleur-texte-guide-plaqueOr{color:#F39E1B;}
.color-hover-plaque-or:hover{color:#F39E1B;}

/*********** Acier ***********/
.couleur-fond-guide-acier{background-color:#04A99D;}
.couleur-texte-guide-acier{color:#04A99D;}
.color-hover-acier:hover{color:#04A99D;}

/*********** Diamant ***********/
.couleur-fond-guide-diamant{background-color:#7BC6CA;}
.couleur-texte-guide-diamant{color:#7BC6CA;}
.color-hover-diamant:hover{color:#7BC6CA;}

/*********** Perle de culture ***********/
.couleur-fond-guide-perleDeCulture{background-color:#82C295;}
.couleur-texte-guide-perleDeCulture{color:#82C295;}
.color-hover-perles-de-culture:hover{color:#82C295;}

/*********** Pierres precieuses ***********/
.couleur-fond-guide-pierresPrecieuses{background-color:#DB0151;}
.couleur-texte-guide-pierresPrecieuses{color:#DB0151;}
.color-hover-pierres-precieuses:hover{color:#DB0151;}

/*********** Pierres fines ***********/
.couleur-fond-guide-pierresFines{background-color:#E53F69;}
.couleur-texte-guide-pierresFines{color:#E53F69;}
.color-hover-pierres-fines:hover{color:#E53F69;}


/***********************************************************/
/*********** Choix des différents block possible ***********/
/***********************************************************/	
.guide-matiere-bandeau-block-titre{height:300px; width:240px;}
.guide-matiere-bandeau-block-haute{height:300px; width:240px;}
.guide-matiere-bandeau-block-large{height:150px; width:480px;}
.guide-matiere-bandeau-block-carre{height:150px; width:240px;}


/****************************************************************************/
/*********** Placement et mise en forme du contenu dans les block ***********/
/****************************************************************************/	
.guide-matiere-bandeau-block-titre-h2{
	margin: 95px 0 0 0;
	padding: 0;
	text-align:center;
}

.guide-matiere-bandeau-contenu-titre-secondaire{padding:40px 45px 20px 45px;}
.guide-matiere-bandeau-contenu{padding:20px 20px 20px 20px;}

.guide-matiere-bandeau-p{
	color:#616365;
	text-align:justify;
	line-height:14px;
}

.guide-matiere-bandeau-h3{
	font-weight:bold;
	font-size:12px;
	text-transform:uppercase;		
	margin: -3px 0 16px 0;
	padding: 0;
	line-height:14px;
}

.guide-matiere-bandeau-a{
	text-decoration:none;
	display:block;
	text-align:center;
}

.guide-matiere-bandeau-a:hover span{text-decoration:underline;}

.guide-matiere-bandeau-a-span{
	font-weight:bold;
	line-height:14px;
	text-transform:uppercase;
	display:block;
	margin-top:27px;
	text-align:center;
}

.guide-matiere-mise-en-indice { 
font-size: .7em; 
line-height: .8em; 
} 

/**********************************************/
/*********** Placement des degrades ***********/
/**********************************************/	
.panel-container-top
{
	background-image: -webkit-linear-gradient(top , #eeeeee 0, #FFFFFF 20px);
	background-image:    -moz-linear-gradient(top , #eeeeee 0, #FFFFFF 20px);
	background-image:     -ms-linear-gradient(top , #eeeeee 0, #FFFFFF 20px);
	background-image:      -o-linear-gradient(top , #eeeeee 0, #FFFFFF 20px);
	background-image:         linear-gradient(top , #eeeeee 0, #FFFFFF 20px);
}

.panel-container-left
{
	background-image: -webkit-linear-gradient(left , #eeeeee 0, #FFFFFF 20px);
	background-image:    -moz-linear-gradient(left , #eeeeee 0, #FFFFFF 20px);
	background-image:     -ms-linear-gradient(left , #eeeeee 0, #FFFFFF 20px);
	background-image:      -o-linear-gradient(left , #eeeeee 0, #FFFFFF 20px);
	background-image:         linear-gradient(left , #eeeeee 0, #FFFFFF 20px);
}

.panel-container-bottom
{
	background-image: -webkit-linear-gradient(bottom , #eeeeee 0, #FFFFFF 20px);
	background-image:    -moz-linear-gradient(bottom , #eeeeee 0, #FFFFFF 20px);
	background-image:     -ms-linear-gradient(bottom , #eeeeee 0, #FFFFFF 20px);
	background-image:      -o-linear-gradient(bottom , #eeeeee 0, #FFFFFF 20px);
	background-image:         linear-gradient(bottom , #eeeeee 0, #FFFFFF 20px);
}

.panel-container-right
{
	background-image: -webkit-linear-gradient(right , #eeeeee 0, #FFFFFF 20px);
	background-image:    -moz-linear-gradient(right , #eeeeee 0, #FFFFFF 20px);
	background-image:     -ms-linear-gradient(right , #eeeeee 0, #FFFFFF 20px);
	background-image:      -o-linear-gradient(right , #eeeeee 0, #FFFFFF 20px);
	background-image:         linear-gradient(right , #eeeeee 0, #FFFFFF 20px);
}
	

/***********************************************************************************/
/*********** Remplacement des degrades par des images de degrade pour IE ***********/
/***********************************************************************************/


#IE .panel-container-top{background:   #fff url("images/degrade-top.png")    top    center repeat-x;}
#IE .panel-container-left{background:  #fff url("images/degrade-left.png")   left   center repeat-y;}
#IE .panel-container-bottom{background:#fff url("images/degrade-bottom.png") bottom center repeat-x;}
#IE .panel-container-right{background: #fff url("images/degrade-right.png")  right  center repeat-y;}