html, body { 
background-color: black; 
cursor:url(/img/CUrseurZgueg.png), auto;
margin-top: -20px;
} 
a img {
border: none;
}
#fond {  
background-image:url(/img/fond/fondboutique.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
margin: auto;
width: 1520px;
height: 950px;
}
.accueil {
position: absolute;
float: left;
margin-top: 870px;
margin-left: 130px;
background-image:url(/img/liens/Home_OFF.png);
background-repeat:no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
width: 82px;
height: 30px;
z-index: 3;
}
.accueil:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/liens/Home_ON.png);
background-repeat:no-repeat;
z-index: 3;
}

.news {
position: absolute;
float: left;
margin-top: 870px;
margin-left: 360px;
background-image:url(/img/liens/News_OFF.png);
background-repeat:no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
width: 80px;
height: 30px;
z-index: 3;
}
.news:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/liens/News_ON.png);
background-repeat:no-repeat;
z-index: 3;
}

.episodes {
position: absolute;
float: left;
margin-top: 870px;
margin-left: 470px;
background-image:url(/img/liens/Episodes_OFF.png);
background-repeat:no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
width: 121px;
height: 30px;
z-index: 3;
}
.episodes:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/liens/Episodes_ON.png);
background-repeat:no-repeat;
z-index: 3;
}
.boutique {
position: absolute;
float: left;
margin-top: 870px;
margin-left: 626px;
background-image:url(/img/liens/shop_ON.png);
background-repeat:no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
width: 125px;
height: 30px;
z-index: 3;
}

.bonus {
position: absolute;
float: left;
margin-top: 870px;
margin-left: 786px;
background-image:url(/img/liens/Bonus_OFF.png);
background-repeat:no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
width: 89px;
height: 30px;
z-index: 3;
}
.bonus:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/liens/Bonus_ON.png);
background-repeat:no-repeat;
z-index: 3;
}
.contact {
position: absolute;
float: left;
margin-top: 870px;
margin-left: 909px;
background-image:url(/img/liens/Contact_OFF.png);
background-repeat:no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
width: 125px;
height: 30px;
z-index: 3;
}
.contact:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/liens/Contact_ON.png);
background-repeat:no-repeat;
z-index: 3;
}
.mmc {
position: absolute;
float: left;
margin-top: 857px;
margin-left: 1064px;
background-image:url(/img/liens/MMC_OFF.png);
background-repeat:no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
width: 65px;
height: 49px;
z-index: 3;
}
.mmc:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/liens/MMC_ON.png);
background-repeat:no-repeat;
z-index: 3;
}
.dmr {
position: absolute;
float: left;
margin-top: 857px;
margin-left: 1159px;
background-image:url(/img/liens/Ride_OFF.png);
background-repeat:no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
width: 90px;
height: 56px;
z-index: 3;
}
.dmr:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/liens/Ride_ON.png);
background-repeat:no-repeat;
width: 90px;
height: 54px;
z-index: 3;
}
.social {
position: absolute;
float: left;
margin-top: 864px;
margin-left: 1279px;
background-image:url(/img/liens/Reseaux_OFF.png);
background-repeat:no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
width: 122px;
height: 39px;
z-index: 3;
}
.social:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/liens/Reseaux_ON.png);
background-repeat:no-repeat;
z-index: 3;
}
.copyright {
position: absolute;
float: left;
margin-top: 704px;
margin-left: 959px;
background-image:url(/img/liens/mentions_OFF.png);
background-repeat:no-repeat;
width: 123px;
height: 11px;
z-index: 3;
}
.copyright:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/liens/mentions_ON.png);
background-repeat:no-repeat;
z-index: 3;
}
#menu
{      
	height: auto;      
	list-style-type: none;  
	margin: 0 auto;    
	padding: 0;      
	border: 0;    
    /* pour placer mon menu dans son élément prenant en compte la hauteur du sous menu */ 
	position:relative;	/* important pour bien placer le menu par rapport aux 250px indiqué avant */
	}
#menu > li
{
	float: left;
	margin: 0 5px;  /* une marge de 0 pour le haut est importante pour ne pas avoir d'espace entre le menu et le sous menu sinon vous rencontreriez des soucis */
	padding: 0;
	border: 0;
}
#menu li a{
	cursor:url(/img/CUrseurZgueg.png), auto;	
	display: block;         
	color: #FFFFFF;         
	margin: 0;
	padding: 4px 8px;
	border:none;
	width: 97px;
	height: 25px;
	margin-left: -4px;
	text-decoration: none;
}
#menu .menuderoulant
{
	display: none;
	list-style-type: none;
	margin: 0;   
	padding: 0;
	border: 0;
	bottom:0;
	position:absolute; /* c'est ici que j'inverse mon menu pour le faire partir vers le haut */

}
#menu .menuderoulant li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 140px;
    border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menu .menuderoulant li a
{
	display: block;
	margin: 0;
	border: 0;       
    margin-bottom: 10px;	
	background: white;
	border-radius: 4px;
}
#menu .menuderoulant li a:hover
{
cursor:url(/img/CUrseurZgueg.png), auto;	
color: #777777;
background: none;
text-decoration: none;
}
#menu li:hover > .menuderoulant { display: block;}

#facebook {
background-image:url(/img/liens/Facebook_OFF.png);
background-repeat:no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
width: 100px;
height: 22px;
}
#twitter {
background-image:url(/img/liens/twitter_OFF.png);
background-repeat:no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
width: 95px;
height: 21px;
}
#youtube {
background-image:url(/img/liens/YouTube_OFF.png);
background-repeat:no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
width: 70px;
height: 28px;
}
.copyright {
position: absolute;
float: left;
margin-top: 920px;
margin-left: 1233px;
background-image:url(/img/liens/mentions_OFF.png);
background-repeat:no-repeat;
 background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
width: 170px;
height: 15px;
}
.copyright:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/liens/mentions_ON.png);
background-repeat:no-repeat;
}
.guetto {
position: absolute;
float: left;
margin-top: 342px;
margin-left: 1089px;
border: none;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
width: 295px;
height: 195px;
z-index: 3;
}
.guetto:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/img_shop/Ghetto_ON.png);
background-repeat:no-repeat;
z-index: 3;
}
.accessoires {
position: absolute;
float: left;
margin-top: 676px;
margin-left: 612px;
border: none;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
width: 267px;
height: 195px;
z-index: 3;
}
.accessoires:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/img_shop/Accessoires_ON.png);
background-repeat:no-repeat;
z-index: 3;
}
.tshirts {
position: absolute;
float: left;
margin-top: 664px;
margin-left: 305px;
border: none;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
width: 330px;
height: 203px;
z-index: 3;
}
.tshirts:hover {
cursor:url(/img/CUrseurZgueg.png), auto;
background-image:url(/img/img_shop/TShirts_ON.png);
background-repeat:no-repeat;
z-index: 3;
}
#pause {
background: none;
border: none;
cursor:url(/img/CUrseurZgueg.png), auto;
position: absolute;
margin-left: 54px;
margin-top: 122px;
outline:0; 
z-index: 3;
}
#play {
background: none;
border: none;
cursor:url(/img/CUrseurZgueg.png), auto;
position: absolute;
margin-left: 197px;
margin-top: 119px;
outline:0; 
z-index: 3;
}

ol,ul {
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
.slideboxacces {
width: 0;
height: 0;
position: absolute;
overflow: hidden;
padding: 0;
z-index: 2;
}
.slideboxacces a.slidecloseacces {
cursor:url(/img/CUrseurZgueg.png), auto;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
z-index: 0;
}
.slideboxacces img {
height: auto;
opacity: 0;
position: absolute;
transition: opacity 0.3s linear 0.3s;
width: 400px;
margin-left: 480px;
margin-top: 300px;
z-index: 1;
}
.slideprevacces {
background:url(/img/img_shop/fleche_p.png) no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
position: absolute;
top: 375px;
width: 40px;
height: 63px;
left: 410px;
opacity: 1;
z-index: 1;
}
.slidenextacces {
background:url(/img/img_shop/fleche_s.png) no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
position: absolute;
top: 375px;
left: 907px;
width: 40px;
height: 63px;
opacity: 1;
z-index: 1;
}
.slideprevacces:hover, .slidenextacces:hover {
opacity: 0.65;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.slideboxacces:target {
width: 1520px;
height: 950px;
}
.slideboxacces:target img,
.slideboxacces:target a.slidecloseacces {
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
#coquesposition {
margin-top: 25px;
}

.slideboxtshirt {
width: 0;
height: 0;
position: absolute;
overflow: hidden;
padding: 0;
z-index: 2;
}
.slideboxtshirt a.slideclosetshirt {
cursor:url(/img/CUrseurZgueg.png), auto;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
z-index: 0;
}
.slideboxtshirt img {
height: auto;
opacity: 0;
position: absolute;
transition: opacity 0.3s linear 0.3s;
width: 360px;
z-index: 1;
top: 245px;
}
.slideprevtshirt {
background:url(/img/img_shop/fleche_p.png) no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
position: absolute;
top: 352px;
width: 40px;
height: 63px;
left: 268px;
opacity: 1;
z-index: 1;
}
.slidenexttshirt {
background:url(/img/img_shop/fleche_s.png) no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
position: absolute;
top: 352px;
left: 1060px;
width: 40px;
height: 63px;
opacity: 1;
z-index: 1;
}
.slideprevtshirt:hover, .slidenexttshirt:hover {
opacity: 0.65;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.slideboxtshirt:target {
width: 1520px;
height: 950px;
}
.slideboxtshirt:target img,
.slideboxtshirt:target a.slideclosetshirt {
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
#tshirtdbz, #sweatdbz, #sweatblack {
margin-left: 320px;
}

#tshirtepp, #sweatepp, #tshirtblack {
margin-left: 690px;
}