/*
 * Dclarations gnrales
 * Cration : 11/03/2004 - Meher Necib - France Telecom - Atout Boutique
 * Test et valid sous I.E 6.0 SP1 / Mozilla 1.6 /
 * Version 1.0   - 11/03/2004 - Cration
 * Version 1.0.1 - 22/03/2004 - Ajout section MP3
 *
 */

body {
	margin: 0;
	padding: 0;
	background-color: #080854;
    
}

body, h1, h2, h3, h4, div {
	font-size: small;
	font-family: Verdana, Arial, sans-serif;
	color: #ffff80;

	scrollbar-3dlight-color: #fed804;
	scrollbar-arrow-color: #080852;
	scrollbar-base-color: #ff0000;
	scrollbar-darkShadow-color: #000;
	scrollbar-face-color: #ffff80;
	scrollbar-highlight-color: #080852;
	scrollbar-shadow-color: #080852;
	scrollbar-track-color: #000060;

}

a:link,a:active { color: #ffff80;}
a:hover { color: #ffff80;}
a:visited { color: #ffff80;}


/*
 * 0. Description gnrale
 *	0.1 Le look de cette page symbolise un Jukebox.
 *	0.2 La page est compose d'une enveloppe et de 2 blocs :
 *	0.3 L'enveloppe supporte en image de fond les montants du jukebox.
 *		Les tailles de polices sont toujours donnes en relatif.
 *
 * 1. L'entete (header)
 *	1.1 Description
 *		a. Il porte l'image de fond (haut du jukebox)
 *		b. un titre invisible pour le navigateur (tag h1)
 *		c. 2 liens :
 *			i Un lien discret (#passermenu) direct vers le contenu de la page
 *			ii Un lien surmont d'une image permettant le retour  l'accueil (#retour)
 *		d Le menu de navigation (#mainnav)
 *	1.2 Le menu de navigation
 *		a. Il est compos d'une liste non numrot (ul/li).
 *		b. Cette liste est prsente sans retour  la ligne.
 *		c. Le fond des liens des menus change au passage de la souris.
 *		d. Ce fond color est fig quand on arrive dans la rubrique concerne
 *
 * 2. Le contenu
 *	2.1 Description
 *	a. Le contenu est insr dans un div (#contenant)
 *	b. Le fond du contenu est uhne image avec le logo Magic Records
 *	c. Il est padd  droite et  gauche permettant ainsi de ne jamais cacher les colonnes du jukebox.
 *
 */

#enveloppe { /* cf. 0.2 */
	margin-left: 40px;
	margin-right: auto;
	width: 790px;
	background-image: url(../../site/images/divers/bandeau.gif);
	background-repeat: repeat-y;
	background-position: top left;
}

#header { /* cf. 1.x */
	height: 135px;
	width: 100%;

	background-image: url(../../site/images/divers/haut_magic_ani.gif);
	background-repeat: no-repeat;
	background-position: top left;

	position: relative;
}

#header h1 { /* cf. 1.1 b. */
	display:none;
}

#passermenu { /* cf. 1.1 c. i */
	position: absolute;
	display: inline;

	font-size: xx-small;
	left: 0;
	top: 5px;
	width: 98%;
	text-align: right;
}

#passermenu a {
	color: #080852;
	text-decoration: none;
}

#passermenu a:hover {
	color: #fff;
}

#retour { /* cf. 1.1 c. ii */
	position: absolute;
	top: 0;
	left: 348px;
}

#retour, #retour a img {
	margin:0;
	border:0;
	padding:0;
}

#retourText {
	display: none;
}


#mainnav { /* cf. 1.2 */
	text-align: left;
	height: 82px;
	padding-top: 47px;
}

#mainnav ul {
	list-style-type: none;
	display: inline;
}

#mainnav li {
	display: inline;
	float: left;
}

#mainnav img {
	background-color: #fff;
	margin-top: 12px;
	border: 2px solid black;
	text-decoration: none;
	text-align: left;
}

#editoNav {
	margin-left: 37px;
	margin-right: 0px;
}

#newsNav {
}

#themesNav {
}

#artistsNav {
}

#promoNav {
	margin-left: 45px;
}
#mp3Nav {
}

#bdcNav {
}

#contactNav {
}

#edito #editoNav img, #editoNav a:hover img { /* cf. 1.2 c. et d. */
	background-image: url(../../site/images/menus/bt_2_vert.gif);
}
#editoNavin img { /* cf. 1.2 c. et d. */
		margin-left: 37px;
	background-image: url(../../site/images/menus/bt_2_vert.gif);
}

#news #newsNav img, #newsNav a:hover img {
	background-image: url(../../site/images/menus/bt_2_jaune.gif);
}

#themes #themesNav img, #themesNav a:hover img {
	background-image: url(../../site/images/menus/bt_2_orange.gif);
}

#artists #artistsNav img, #artistsNav a:hover img {
	background-image: url(../../site/images/menus/bt_2_rose.gif);
}

#promo #promoNav img, #promoNav a:hover img {
	background-image: url(../../site/images/menus/bt_2_rose.gif);
}

#mp3 #mp3Nav img, #mp3Nav a:hover img {
	background-image: url(../../site/images/menus/bt_2_orange.gif);
}

#bdc #bdcNav img, #bdcNav a:hover img {
	background-image: url(../images/menus/bt_2_jaune.gif);
}

#contact #contactNav img, #contactNav a:hover img {
	background-image: url(../../site/images/menus/bt_2_vert.gif);
}
#contactNavin img {
	background-image: url(../../site/images/menus/bt_2_vert.gif);
}

#contenant { /* cf. 2.1 b. */
	padding: 0px 40px 0px 40px;
}

div.contenu {	/* cf. 2.1 c. */
	background-image: url(../../site/images/fonds/fdp_magic.gif);
	background-repeat: repeat;
	background-position: top left;
	height: 600px;
	overflow: auto;
}

.affichette {
	padding: 0 0 0 0;
	width: 99%;
	margin: 0 0 30px 0;
	clear:both;
}

.affichette a	 { /* Lien tlchargement */
	text-decoration: none;
	color: #ffff80;
}

.affichette h2 { /* Artiste */
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
}

.affichette h3 { /* Titre */
	font-weight: normal;
	margin : 0 0 5px 175px;
}

.affichette h4 { /* Prix */
	text-align: center;
	margin : 0px 10px 0px 0px;
	float: left;
}

.affichette h4 form { /* Formulaire d'ajout dans le panier */
	padding : 0 0 0 0;
	margin : 3px 0 0 0;
}

.affichette h4 input { /* Bouton d'ajout dans le panier */
	/* On commence par faire disparaitre le bouton */
	letter-spacing: -2px; /* fait disparaitre le texte */
	font-size: 1px;
	text-align: bottom;
	color: #fed804;       /* Couleur de fond */
	border: 0px;

	width: 76px;               /* On force la taille pour que l'image ne soit pas tronque */
	height: 23px;

	background-color: #fed804;
	background-image: url(../../site/images/divers/btcommander.gif); /* On peut le remplacer par notre image */
	background-repeat: no-repeat;
	background-position: top right;

	cursor:hand;
}

.affichette p.chapeau { /* Chapeau de la Description */
}

.affichette p { /* Description */
	margin: 0 0 10px 12px;
	text-align: justify;
	padding-right: 10px;
	font-weight: bold;
}

/* Image et lgende dans l'affichette */
.affichette span.image {         /* Imagette du produit */
	float: left;
	margin : 0 10px;

}

.affichette span.image h3 {      /* Rfrence */
	margin: 15px 0px 0px 0px;
	text-align: center;
	width: 120px;           /* taille des imagettes pour que le centrage fonctionne*/
}

.affichette span.image h4 {      /* Rfrence */
	margin: 15px 0px 0px 0px;
	text-align: center;
	width: 120px;           /* taille des imagettes pour que le centrage fonctionne*/
}


/* Section des tlchargements */

#mp3 .affichette span.image {         /* Imagette du produit */
	float: right;
	text-align: center;
	margin: 0px 40px 0px 0px;
}

#mp3 .affichette h2, #mp3 .affichette h3 {         /* Artiste */
	margin: 10px 0px 7px 0px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 60%;
}

#mp3 .affichette h3 {         /* Thme */
	width: 30%;
	font-style: italic;
	text-align: center;
}


#mp3 .affichette p { /* Description */
	margin: 20px 1px 1px 1px;
	text-align: left;
	padding: 0;
	float: none;
}

#mp3 .affichette p a	 { /* Lien tlchargement */
	margin: 0px 0px 0px 0px;
	padding: 5px 5px 5px 45px;

	height: 40px;
	line-height: 40px;

	background-image: url(../../site/images/divers/btson.gif);
	background-repeat: no-repeat;
	background-position: top left;
}


#mp3 .affichette span.image h3 {      /* Nom de l'album */
	margin: 0;
	text-align: center;
	font-size: x-small;
	clear: both;
	width: 120px;           /* taille des imagettes pour que le centrage fonctionne*/
}

#mp3 .affichette span.image h4 {      /* Rfrence */
	margin: 0;
	text-align: center;
	font-size: x-small;
	clear: both;
	text-align: center;
	width: 120px;           /* taille des imagettes pour que le centrage fonctionne*/
}


#themes #theme_liste_themes { /* cf. 1.2 */
	text-align: left;
	padding: 0px;
}

#themes #theme_liste_themes ul {
	list-style: none;
	list-style-type: none;
	margin:0;
	padding:0;
	display: inline;
	clear:both;
}

#themes #theme_liste_themes li {
	display: inline;
	float: left;
}

#themes #theme_liste_themes a img {
	border: 0;
	padding: 0px;
}
#themes #theme_liste_themes a {
	margin: 0px 0px 0px 0px;

	background-repeat: no-repeat;
	background-position: top left;
	display:inline;
}


#themes #theme_liste_themes h2 {
	clear: both;
}

#theme_liste_themes #varietefr a {
	background-image: url(../../site/images/familles/btvafr1-fr.gif);
}

#theme_liste_themes #varieteinter a {
	background-image: url(../../site/images/familles/btvaint1-fr.gif);
}

#theme_liste_themes #groupes60 a {
	background-image: url(../../site/images/familles/bt601-fr.gif);
}

#theme_liste_themes #groupes60instru a {
	background-image: url(../../site/images/familles/bt60ins1-fr.gif);
}

#theme_liste_themes #groupes70 a {
	background-image: url(../../site/images/familles/bt701-fr.gif);
}

#theme_liste_themes #westcoast a {
	background-image: url(../../site/images/familles/btwest1-fr.gif);
}

#theme_liste_themes #ambianceretro a {
	background-image: url(../../site/images/familles/btambia1-fr.gif);
}

#theme_liste_themes #varietefr a:hover, #theme_liste_themes #ul_1000 #varietefr a {
	background-image: url(../../site/images/familles/btvafr2-fr.gif);
}

#theme_liste_themes #varieteinter a:hover, #theme_liste_themes #ul_2000 #varieteinter a {
	background-image: url(../../site/images/familles/btvaint2-fr.gif);
}

#theme_liste_themes #groupes60 a:hover, #theme_liste_themes #ul_3000 #groupes60 a {
	background-image: url(../../site/images/familles/bt602-fr.gif);
}

#theme_liste_themes #groupes60instru a:hover, #theme_liste_themes #ul_4000 #groupes60instru a {
	background-image: url(../../site/images/familles/bt60ins2-fr.gif);
}

#theme_liste_themes #groupes70 a:hover, #theme_liste_themes #ul_5000 #groupes70 a {
	background-image: url(../../site/images/familles/bt702-fr.gif);
}

#theme_liste_themes #westcoast a:hover, #theme_liste_themes #ul_6000 #westcoast a {
	background-image: url(../../site/images/familles/btwest2-fr.gif);
}

#theme_liste_themes #ambianceretro a:hover, #theme_liste_themes #ul_7000 #ambianceretro a {
	background-image: url(../../site/images/familles/btambia2-fr.gif);
}

#theme_artistes {
	width: 65%;
	float: right;
}

#theme_artistes ul {
	list-style: none;
	list-style-type: none;
	margin:0;
	padding:0;
	clear:both;
}

#theme_artistes a {
	color: #ffff80;
	font-weight: bold;
}

#theme_autres_themes ul {
	list-style: none;
	list-style-type: none;
	margin:0;
	padding:0;
}


#theme_autres_themes li {
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
	
	line-height: 250px;
}
#theme_autres_themes a {
	background-repeat: no-repeat;
	background-position: top left;
	
	padding-left: 150px;
	padding-top: 0px;
	
	
	font-size: 150px;
	
	text-decoration: none;
	
}

#theme_autres_themes #varietefr a {
	background-image: url(../../site/images/familles/btvafr-fr.gif);
}

#theme_autres_themes #varieteinter a {
	background-image: url(../../site/images/familles/btvain-fr.gif);
}

#theme_autres_themes #groupes60 a {
	background-image: url(../../site/images/familles/btgr60-fr.gif);
}

#theme_autres_themes #groupes60instru a {
	background-image: url(../../site/images/familles/btgr60in-fr.gif);
}

#theme_autres_themes #groupes70 a {
	background-image: url(../../site/images/familles/btgr70-fr.gif);
}

#theme_autres_themes #westcoast a {
	background-image: url(../../site/images/familles/btwest-fr.gif);
}

#theme_autres_themes #ambianceretro a {
	background-image: url(../../site/images/familles/btretro-fr.gif);
}

/* Formulaire de prise des coordonnes */
#div_form {
	clear: both;
}

#div_form label {
	font-weight: bold;
	cursor: hand;
}

#div_form div {
	clear: both;
	width: 650px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#div_form fieldset#sho div, #div_form fieldset#shi div {
	clear: both;
	width: 430px;
	padding-top: 5px;
	padding-bottom: 5px;
	min-height: 30px;
	height: 30px;
}

#div_form fieldset#shi div {
	clear: both;
	width: 230px;
	padding-top: 5px;
	padding-bottom: 5px;
	min-height: 30px;
	height: 30px;
}

#div_form span.label_span {
  float: left;
  text-align: right;
}

#div_form span.input_span {
  float: right;
  text-align: left;
}
#div_form select, #div_form input {
  width: 200px;
}

fieldset {
	float:none;
	clear: right;
	padding: 5px;
	border : 1px solid #ff8;
	margin-bottom : 15px;
}

fieldset#sho {
	clear: none;
	float: left;
	margin: 0;
}
fieldset#shi {
	float: right;
}
fieldset#shi span.label_span {
	display: none;
}
fieldset#sm span {
	text-align: center;
	padding-left: 50px;
	padding-right: 50px;
}

fieldset#sm select {
	  width: 250px;
}

fieldset#misc div, fieldset#misc span {
	width: 650px;
	text-align: center;
}
#div_form legend {
	color: #FFFF80;	 
	font-weight: bold;
}


a.page:link {
	font-family: Verdana, Arial, sans-serif;
	color: #ffff80;

}
a.page:hover {
	font-family: Verdana, Arial, sans-serif;
	color: #ffff80;
	text-decoration: none;
}
a.page:visited {
	font-family: Verdana, Arial, sans-serif;
	color: #ffff80;
	
}

a.pagebleu:link {
	font-family: "Comic Sans MS";
	color: #33ffff;
	font-size: medium;
}
a.pagebleu:hover {
	font-family: "Comic Sans MS";
	color: #33ffff;
	text-decoration: none;
	font-size: medium;
}
a.pagebleu:visited {
	font-family: "Comic Sans MS";
	color: #33ffff;
	font-size: medium;
}
.txtbleu {
	font-family: "Comic Sans MS";
	color: #33ffff;
	font-size: medium;
}
.txtbig {
font-size: medium;
font-weight: bolder;
}
.bold {
font-weight: bold;
}
.rouge {
font-weight: bolder;
font-size: large;
color: #FF0000;
}
.background {
background-color: #FFFFFF;
}
.rec_val_frf  {
font-size: x-small;

}