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

CSS Reset  -------------------------  All pages

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

a img { border:none; }


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

Elements  -------------------------  All pages

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

body /*corps du document*/
{
   height:100%; /* va aussi aider à avoir toujours le footer bien en bas de l'ecran collé au browser et ca quelque soit le configuration - la taille de l'ecran */
   text-align: center;   /* On utilise text-align: center ; pour Internet Explorer, c'est la seule facon de centrer le site avec ce navigateur */
   margin-top: 0; /* colle le haut du site au browser */
   margin-bottom: 0; /* colle le bas du site au browser */
   margin-left: auto; /* positionne le bloc principal div container au centre */
   margin-right: auto; /* positionne le bloc principal div container au centre */
   width: 100%; /* car on utilisera toue la largeur possible du browser pour rempliur avec les fonds dégradés */
   background-color: #8b8589;
   font: 'Myriad Pro', tahoma,  Verdana, Arial ; /* on définit ici la police par défaut - avant modification via "class" - pour le texte présent dur tout le site */
   padding: 0;
   /* overflow: hidden ;  /* pour ne pas que le site soit scrollable en horizontal - de gauche à droite par ex  */
   }


div#general { /* div contenant tout le site ... = trick pour avoir tout le site centré sur Firefox & Safari */
	margin-left: auto; /* Pour centrer avec Firefox & co */
	margin-right: auto;  */
	width: 100%;  /* ce que l'on veut ici... */
	height:100%;
	margin-top: 0;
	margin-bottom: 0;
	background-color: #8b8589;
	overflow: hidden ;  /* pour ne pas que le site soit scrollable en horizontal - de gauche à droite par ex  */
	}


div#generalheader { /* div contenant tout le header ... = trick pour avoir tout le site centré sur Firefox & Safari */
	margin-left: auto; /* Pour centrer avec Firefox & co */
	margin-right: auto;  */
	width: 100%;  /* ce que l'on veut ici... */
	height:100%;
	background-image: url('/Newsletter_pics/bckgrd_header3_4x260.png') ; 
   	background-repeat: repeat-x; /* repète l' image de fond sur la largeur entière qui inclue les 4 bandeaux */				    
	margin-top: 0;
	margin-bottom: 0;
	overflow: hidden ;  /* pour ne pas que le site soit scrollable en horizontal - de gauche à droite par ex  */
	}


div#header { /*le header va contenir les 3 bandeaux du haut de page */
	text-align: center;   /* On utilise text-align: center ; pour Internet Explorer, c'est la seule facon de centrer le site avec ce navigateur */
   	margin-top: 0 ; /* colle le haut du site au browser */
   	margin-bottom: 0 ; /* colle le bas du site au browser */
   	margin-left: auto; /* positionne le bloc principal div container au centre */
   	margin-right: auto; /* positionne le bloc principal div container au centre */
   	width: 960px; /* car on veut remplir tous les cotés avec les fonds dégradés */
   	height: 260px ; /* car le header va contenir les 4 bandeaux de hauteur 40 - 180 - 20 - 20  */
   	padding: 0;
	border :0;
	position:relative; 
	/* overflow: hidden ;  /* pour ne pas que le site soit scrollable en horizontal - de gauche à droite par ex  */
	}
	

div#headergauche { /*le headergauche va contenir les 5 bandeaux empilés du header */
	float: left;
	position:relative; 
	margin: 0 ; 
   	width: 800px; /* car on veut remplir tous les cotés avec les fonds dégradés */
   	height: 260px ; /* car le header va contenir les 4 bandeaux de hauteur 40 - 180 - 20 - 20  */
   	padding: 0;
	border :0;
	}


div#headerdroit { /*le headerdroit va contenir le DIV Silhouette et donc l'image de JustinDJ :-) */
	float: left;
	position:relative; 
	margin: 0 ; 
   	width: 160px; /* car on veut remplir tous les cotés avec les fonds dégradés */
   	height: 260px ; /* car le header va contenir les 4 bandeaux de hauteur 40 - 180 - 40 - 24  */
   	padding: 0;
	border :0;
	}


div#bandeau_bannertop {
	text-align: left;
	width:800px;
	height:56px;
	background-image: url('/Newsletter_pics/bckgrd_header3bannertop_2x56.png') ; 
   	background-repeat: repeat-x; /* repète l' image de fond sur la largeur entière qui inclue les 4 bandeaux */	
	margin: 0;
	padding: 0;
	border :0;
	}


div#bandeau_bannermiddle {
	text-align: left; 
	width:800px;
	height:70px;
	background-image: url('/Newsletter_pics/bckgrd_header3bannermiddle_2x70.png') ; 
   	background-repeat: repeat-x; /* repète l' image de fond sur la largeur entière qui inclue les 4 bandeaux */	
	margin: 0;
	padding: 0;
	border :0;
	}	


div#bandeau_bannerbottom {
	text-align: left;
	width:800px;
	height:54px;
	background-image: url('/Newsletter_pics/bckgrd_header3bannerbottom_2x54.png') ; 
   	background-repeat: repeat-x; /* repète l' image de fond sur la largeur entière qui inclue les 4 bandeaux */	
	margin: 0;
	padding: 0;
	border :0;
	}


div#bandeau_headermenu {
	text-align: left;
	width:800px;
	height:40px;
	background-image: url('/Newsletter_pics/bckgrd_header3menu_2x40.png') ; 
   	background-repeat: repeat-x; /* repète l' image de fond en largeur dans tout le bloc */
	margin: 0;
	padding: 0;
	border :0;
	}

.menu {
	width:800px;
	margin:0;
	height:40px;
	text-align: left;
	}

.menu a{
height:40px;
float:left;
}

.m_logo{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat 0px 0px;
width:58px;
}
.m_home{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -58px 0px;
width:116px;
}
.m_home:hover{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -58px -40px;
}
.m_home:active{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -58px -80px;
}
.m_albums{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -174px 0px;
width:116px;
}
.m_albums:hover{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -174px -40px;
}
.m_albums:active{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -174px -80px;
}
.m_concerts{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -290px 0px;
width:116px;
}
.m_concerts:hover{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -290px -40px;
}
.m_concerts:active{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -290px -80px;
}
.m_playlists{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -406px 0px;
width:116px;
}
.m_playlists:hover{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -406px -40px;
}
.m_playlists:active{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -406px -80px;
}
.m_parties{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -522px 0px;
width:116px;
}
.m_parties:hover{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -522px -40px;
}
.m_parties:active{
background:url('/Newsletter_pics/menumosaic_800x120.png') no-repeat -522px -80px;
}


	
div#bandeau_headersousmenu {
	text-align: left;
	width:800px;
	height:20px;
	background-image: url('/Newsletter_pics/bckgrd_header3sousmenu_2x20.png') ; 
   	background-repeat: repeat-x; /* repète l' image de fond en largeur dans tout le bloc */
	margin: 0;
	padding: 0;
	border :0;
	}

	
div#bandeau_bodytop {
	text-align: left;
	width:800px;
	height:20px;
	background-image: url('/Newsletter_pics/bckgrd_bodytop_2x20.png') ; 
   	background-repeat: repeat-x; /* repète l' image de fond en largeur dans tout le bandeau */
	margin: 0;
	padding: 0;
	border :0;
	}	
	
	
div#silhouette {
	text-align: left;
	width:160px;
	height:260px;
	background-image: url('/Newsletter_pics/bckgrd_header3menu_4x260.png') ; 
   	background-repeat: repeat-x; /* repète l' image de fond en largeur dans tout le bloc */
	margin: 0;
	padding: 0;
	border :0;	
	}


div#container {  /* va accueillir les bandeaux composant le corps du site : titrescolumns + 3columns + etc */
	margin-top: 0; /* colle le bloc container directement sous le header */
   	margin-bottom: 0; /* colle le footer comme ca toujours en bas du site cad colle le footer au bas du browser */
   	margin-left: auto; /* positionne le bloc containerau centre */
   	margin-right: auto; /* positionne le bloc container au centre */
   	width: 960px; /* car pour le container les cotes sont blancs avec pas d'images repetees */
	height: 100%;   /* trick pour footer bien collé au bas de l'écran */
	min-height:100%; /* va aussi aider à avoir toujours le footer bien en bas de l'ecran collé au browser et ca quelque soit le configuration - la taille de l'ecran */
	position:relative; 
	text-align: center; /* on a donc un bord gauche de référence sur lequel batir-appuyer le reste des bandeaux de colonnes */
	border :0;
	padding: 0px 0px 0px 0px;   /* en padding-bottom on met la hauteur du footer ; va aussi aider à avoir toujours le footer bien en bas de l'ecran collé au browser et ca quelque soit le configuration - la taille de l'ecran */
	/* overflow: hidden ;  /* pour ne pas que le site soit scrollable en horizontal - de gauche à droite par ex  */
	}

	
.bandeau_titrescolumns {
	width:960px;
	height:40px;
	text-align: left;
	margin: 0;
	padding: 0;
	border: 0;
	}
	
	
.bandeau_culcolumns {
	width:960px;
	height:34px;
	text-align: left;
	margin: 0;
	padding: 0;
	border: 0;
	}	


.bandeau_columns_320-320-320 { /* 320 - 320 - 320 en couleur silver - silver - silver */
	text-align: left;
	position: relative ; /* ce bloc va donc venir s'appuyer sur le repère gauche du cadre global */
	width:960px;
	height: auto;
	background-image: url('/Newsletter_pics/bckgrd_column300-300-300_b_960x2.png'); /* image des 3 corps de colonnes */ 
    background-repeat: repeat-y; /* l'image se repete sur la verticale */
	overflow:auto;
	margin: 0;
	padding: 0;
	border: 0;
	overflow:hidden; 
	}

	
.bandeau_columns_320-640 {
	text-align: left;
	position: relative ; /* ce bloc va donc venir s'appuyer sur le repère gauche du cadre global */
	width:960px;
	height:auto;
	background-image: url('/Newsletter_pics/bckgrd_column300-620_b_960x2.png'); /* image des 3 corps de colonnes */ 
    background-repeat: repeat-y; /* l'image se repete sur la verticale */
	margin: 0;
	padding: 0;
	border: 0;
	overflow:hidden;
	}		

.bandeau_columns_460-460 {
	text-align: left;
	position: relative ; /* ce bloc va donc venir s'appuyer sur le repère gauche du cadre global */
	width:960px;
	height:auto;
	background-image: url('/Newsletter_pics/bckgrd_column460-460_b_960x2.png'); /* image des 3 corps de colonnes */ 
    background-repeat: repeat-y; /* l'image se repete sur la verticale */
	margin: 0;
	padding: 0;
	border: 0;
	overflow:hidden;
	}		


.bandeau_columns_480-480 {
	text-align: left;
	position: relative ; /* ce bloc va donc venir s'appuyer sur le repère gauche du cadre global */
	width:960px;
	height:auto;
	background-image: url('/Newsletter_pics/bckgrd_column460-460_b_960x2.png'); /* image des 3 corps de colonnes */ 
    background-repeat: repeat-y; /* l'image se repete sur la verticale */
	margin: 0;
	padding: 0;
	border: 0;
	overflow:hidden;
	}		


.bandeau_column_960 {
	text-align: left;
	position: relative ; /* ce bloc va donc venir s'appuyer sur le repère gauche du cadre global */
	width:960px;
	height:auto;
	background-image: url('/Newsletter_pics/bckgrd_column960_b_960x2.png'); /* image des 3 corps de colonnes */ 
    background-repeat: repeat-y; /* l'image se repete sur la verticale */
	margin: 0;
	padding: 0;
	border: 0;
	overflow:hidden;
	}		


.bandeau_bannerpub {
	text-align: left;
	position: relative ; /* ce bloc va donc venir s'appuyer sur le repère gauche du cadre global */
	width:960px;
	height:auto;
	margin: 0;
	padding: 0;
	border: 0;
	}		


.column320 {
	float:left;
	position: relative;
	width:300px;
	margin: 0px 10px 0px 10px;
	height: 100%;
	background-color: transparent;
	border : 0;
	padding: 0;
	}

.column480 {
	float:left;
	position: relative;
	width:460px;
	margin: 0px 10px 0px 10px;
	height: 100%;
	background-color: transparent;
	border : 0;
	padding: 0;
	}


.column640 {
	float:left;
	position: relative;
	width:620px;
	margin: 0px 10px 0px 10px;
	height: 100%;
	background-color: transparent;
	border : 0;
	padding: 0;
	}


.column960 {
	float:left;
	position: relative;
	width:940px;
	margin: 0px 10px 0px 10px;
	height: auto;
	background-color: transparent;
	border : 0;
	padding: 0;
	}



div#generalfooter { /* div contenant tout le header ... = trick pour avoir tout le site centré sur Firefox & Safari */
	margin-left: auto; /* Pour centrer avec Firefox & co */
	margin-right: auto;  */
	width: 100%;  /* ce que l'on veut ici... */
	height:100%;
	background-image: url('/Newsletter_pics/bckgrd_footer3_4x220.png') ; 
   	background-repeat: repeat-x; /* repète l' image de fond sur la largeur entière qui inclue les 4 bandeaux */				    
	margin-top: 0;
	margin-bottom: 0;
	}

	
div#footer {  /* va accueillir 4 bandeaux: ombre bas + footertop + footermiddle + footerbottom */
	position: relative;    /* trick pour garder le footer collé au bas de l'écran  */
	text-align: center;   /* On utilise text-align: center ; pour Internet Explorer, c'est la seule facon de centrer le site avec ce navigateur */
   	margin-top: 0 ; /* colle le bloc footer au bloc container */
   	margin-bottom: 0 ; /* colle le footer comme ca toujours en bas du site cad colle le footer au bas du browser */
   	margin-left: auto; /* positionne le bloc footer au centre */
   	margin-right: auto; /* positionne le bloc footer au centre */
   	width: 960px; /* car on veut remplir tous les cotés avec les fonds dégradés */
	height: 220px;
	background-image: url('/Newsletter_pics/bckgrd_footer3_4x220.png'); /* image de fond du bandeau pied de page */ 
    background-repeat: repeat-x; /* repète cette image de fond sur la largeur entière des 4 bandeaux */
	padding: 0;
	border :0;
	}
	

div#bandeau_footertop {
	text-align: left;
	width:960px;
	height:30px;
	background-image: url('/Newsletter_pics/bckgrd_footer3top_2x30.png') ; 
   	background-repeat: repeat-x; /* repète l' image de fond en largeur dans tout le bandeau */
	margin: 0;
	padding: 0;
	border :0;
	}		


div#bandeau_footermiddle {
	text-align: left;
	width:960px;
	height:130px;
	background-image: url('/Newsletter_pics/bckgrd_footer3middle_960x2.png');
	background-repeat: repeat-y;
	margin: 0;
	padding: 0;
	border :0;
	}	


div#bandeau_footerbottom {
	text-align: left;
	width:960px;
	height:60px;
	background-image: url('/Newsletter_pics/bckgrd_footer3bottom_2x60.png');
	background-repeat: repeat-x;
	margin: 0;
	padding: 0;
	border :0;
	}	


p {
	font: 'Myriad Pro', tahoma,  Verdana, Arial ;
	} 


.titre {  /* titre en fushia gras */
    font-weight: bold;
    color: #333;
    font-size: 14px;
	text-align: left;
	margin: 10px 10px 5px 0px;
	padding: 0;
	}


.soustitre {  /* titre en gris en dessous du titre h2 */
    font-weight: normal;
    color: #90F;
    font-size: 12px;
	text-align: left;
	padding: 0;
	}


.textbox {  /* le texte au sein de la box de 320 */ 
	font-weight: normal;
	color: #999;
	background-color: transparent;
	font-size: 11px;
	line-height: 120%;
	text-align: justify;
	}


.textvignette {  /* le texte au sein de la vignette de 280 */
	font-weight: normal;
	color: #666;
	background-color: transparent;
	font-size: 11px;
	line-height: 100%;
	text-align: left;
	}


.boxfooter {
	position: relative;
	text-align: left;
	width:300px;
	height:130px;
	background-color: transparent; 
    border: 0;
	margin: 0;
	padding: 0;
	}


.boxsousfooter {
	position: relative;
	text-align: center;
	width:300px;
	height:60px;
	background-color: transparent; 
    border: 0;
	margin: 0;
	padding: 0;
	}


.textfooter {
	width: 280px;
	height:25px;
	font-weight: normal;
	color: #8b8589;
	background-color: transparent;
	font-size: 12px;
	text-align: left;
	border-width:0px 0px 1px 0px;
	border-style:dotted;
	margin: 0;
	padding: 6px 10px 0px 10px;
	}


.textsousfooter {
	width: 280px;
	height:20px;
	font-weight: normal;
	color: #333;
	background-color: transparent;
	font-size: 12px;
	text-align: center;
	border: 0;
	margin: 0;
	padding: 20px 10px 0px 10px;
	}

	
.vignette280 {
	position: relative;
	text-align: left;
	width:260px;
	height:110px;
	background-image: url('/Newsletter_pics/bckgrd_vignettegray_4x110.png'); /* image du fond degrade de la vignette gray */ 
    background-repeat: repeat-x; /* repète le fond en x */
	border: 0;
	margin: 0px 10px 0px 10px;
	padding: 0px 10px 0px 10px;
	}


.box320 {
	position: relative;
	text-align: left;
	width:280px;
	height:100%;
	background-color: transparent; 
    border: 0;
	margin: 0px 10px 5px 10px;
	padding: 0;
	}


.boxvignette {
	position: relative;
	text-align: left;
	width:300px;
	height:100%;
	background-color: transparent; 
    border: 0;
	margin: 0px 0px 5px 0px;
	padding: 0;
	}


.boxvideo {
	position: relative;
	text-align: left;
	width:300px;
	height:100%;
	background-color: transparent; 
    border: 0;
	margin: 0px 0px 0px 0px;
	padding: 0;
	}


.boxdeezer280 {
	position: relative;
	text-align: left;
	width:300px;
	height:100%;
	background-color: transparent; 
    border: 0;
	margin: 0px 0px 0px 0px;
	padding: 0;
	}


.deezer280 {  /* box accueillant un lecteur deezer de 280px de large  */
	width: 280px;
	height: 200px;
	text-align: left;
	margin: 0px 10px 0px 10px ;
	border: 0;
	padding: 0;
	}

.embedr920 {  /* box accueillant un lecteur video EmbedR de 920px de large  */
	text-align: left;
	width: 920px;
	height: 723px;
	margin: 10px 10px 6px 10px ;
	border: 0;
	padding: 0;
	}


.boxdeezer440 {
	position: relative;
	text-align: left;
	width:460px;
	height:100%;
	background-color: transparent; 
    border: 0;
	margin: 0px 0px 0px 0px;
	padding: 0;
	}


.deezer440 {  /* box accueillant un lecteur deezer de 440px de large  */
	width: 440px;
	height: 300px;
	text-align: left;
	margin: 0px 10px 0px 10px ;
	border: 0;
	padding: 0;
	}


.video280 {
	position: relative;
	text-align: center;
	width: 300px;
	height: 100%;
	background-color:#000;
	margin: 0px 0px 0px 0px;
	padding: 0;
	bordor: 0;
	}


.pic280 {
	position: relative;
	text-align: left;
	border: 0;
	margin: 0px 0px 5px 0px;
	padding: 0;
	}


.pic260 {
	float: left;
	position: relative;
	width: 260px;
	height: 110px;
	border: 0;
	margin: 10px;
	padding: 0;
	}
	
	
.pic620 {
	float: left;
	position: relative;
	width: 600px;
	height: auto;
	border: 0;
	margin: 10px;
	padding: 0;
	}


.box300with260pic {
	float:left;
	position: relative;
	background-color:#ff0099;
	width: 280px;
	height: 130px;
	border: 0;
	margin: 10px 10px 10px 10px;
	padding: 0;
	}


.pic110 {
	float: left;
	position: relative;
	width: 110px;
	height: 110px;
	border: 0;
	margin: 9px;
	padding: 0;
	}


.box150with110pic {
	float:left;
	position: relative;
	background-color:#FFF;
	width: 128px;
	height: 128px;
	border: 1px solid #ff0099;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	margin: 10px 10px 0px 10px;
	padding: 0;
	}


.vignette300with110pic {
	float:left;
	position: relative;
	background-color: #FFF;
	width: 278px;
	min-height: 128px;
	border: 1px solid #ff0099;
	border-radius:: 5px ;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	margin: 10px 10px 0px 10px;
	padding: 0;
	}
	

.vignette310with110pic {
	float:left;
	position: relative;
	background-color: #FFF;
	width: 288px;
	min-height: 148px;
	border: 1px solid #ff0099;
	border-radius:: 5px ;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	margin: 10px 10px 0px 10px;
	padding: 0;
	}
	


.box170floattext {
	float:right;
	position: relative;
	width: 170px;
	height: 130px;
	border: 0;
	margin: 0px 0px 0px 0px;
	padding: 0;
	}


.vignette300titre {  /* titre en mauve gras */
    font-weight: bold;
    color:#4a444a;
    font-size: 13px;
	text-align: left;
	padding: 0;
	border: 0;
	margin: 10px 10px 5px 0px;
	}


.vignette300soustitre {  /* titre en gris clair */
    font-weight: normal;
    color:#ff0099;
    font-size: 12px;
	text-align: left;
	padding: 0;
	border: 0;
	margin: 5px 10px 5px 0px;
	}


.vignette300text {  /* titre en blanc */
    font-weight: normal;
    color:#000;
    font-size: 11px;
	text-align: left;
	padding: 0;
	border: 0;
	margin: 5px 10px 5px 10px;
	}


.edito {  /* box accueillant mon texte de critique album ou concert  */
	float:left;
	position: relative;
	width: 280px;
	height: auto;
	text-align: left;
	margin: 0px 10px 0px 10px ;
	border: 0;
	padding: 0;
	}

.colonne300text {  /* texte en blanc pour critique album ou concert du mois */
    font-weight: normal;
    color:#FFF;
    font-size: 11px;
	text-align: left;
	padding: 0;
	border: 0;
	margin: 10px 10px 5px 10px;
	}

A:link    { color: #606 ; text-decoration: none ; border: 0 }     /* lien non-visité ; pas de soulignement auto*/
A:visited { color: #606 ; text-decoration: none ; border: 0 }   /* lien visité ; pas de soulignement auto  */
A:hover   { color: #0CF ; text-decoration: underline ; border: 0 } /* lien survolé     */





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

SPRITES

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

	

#menubarresocial {
position:relative;
z-index:700; 
float:right; 
list-style:none;
width:160px;
height: 40px;
margin: 0 5px;
padding: 0;
display:inline;
}


#menubarresocial li {
position:relative;
display:inline; /* important to display all buttons horizonztally next to each other */
list-style:none;
float:left; /* to have all buttons appearing horizonztally next to each other */
width:40px;
height:40px;
}

#menubarresocial li a {
position:absolute;
text-indent:-9999px; 
display:block; /* important to define as block-entitiy in order to size and style them */
background: url(../Newsletter_pics/buttons_social-grey_160x80.png) no-repeat ;
height:40px;
overflow: hidden;
}


#menubarresocial li a.m_facebook{
background-position:   0px 0px;
width:40px;
height:40px;
}

#menubarresocial li a.m_facebook:hover, #menubarresocial li a.m_facebook:active {
background-position:   0px -40px;	
width:40px;
height:40px;
}

#menubarresocial li a.m_twitter{
background-position:   -40px 0px;
width:40px;
height:40px;
}

#menubarresocial li a.m_twitter:hover, #menubarresocial li a.m_twitter:active {
background-position:   -40px -40px;	
width:40px;
height:40px;
}

#menubarresocial li a.m_email {
background-position: -80px 0px;
width:40px;
height:40px;
}

#menubarresocial li a.m_email:hover, #menubarresocial li a.m_email:active {
background-position: -80px -40px;
width:40px;
height:40px;
}

#menubarresocial li a.m_rss {
background-position:  -120px 0px;
width:40px;
height:40px;
}

#menubarresocial li a.m_rss:hover, #menubarresocial li a.m_rss:active {
background-position:  -120px -40px;
width:40px;
height:40px;
}


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