html, body { width:100%; height:100%; overflow:hidden; margin:0; padding:0; }
body { font:12px Arial,Verdana,Helvetica; }
#body { position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; overflow-x:hidden; }

#f1 { background:url(../images/fond5.png) repeat-y top left; }
#f2 { background:url(../images/fond6.png) repeat-y top right; }

#f3 { background:url(../images/fond1.png) no-repeat top left; }
#f4 { background:url(../images/fond2.png) no-repeat top right; }
#f5 { background:url(../images/fond3.png) no-repeat bottom left; }
#f6 { background:url(../images/fond4.png) no-repeat bottom right; min-height:940px; }
.inactive { background-image:none !important; }

#top, #menu, #content, #bottom {
  position:relative;
  width:960px;
  margin:0 auto;
  text-align:left;
}


#top { height:203px; }
#logo { 
	position:absolute; 
	top:8px; 
	left:34px; 
}
.css3 #logo {
	-webkit-transition: all 500ms ease-in-out 0s; -moz-transition: all 500ms ease-in-out 0s; -o-transition: all 500ms ease-in-out 0s; -ms-transition: all 500ms ease-in-out 0s; transition: all 500ms ease-in-out 0s;}
.css3 #logo:hover {
	-webkit-transform: translate(0px,-5px) rotate(2deg); -moz-transform: translate(0px,-5px) rotate(2deg); -o-transform: translate(0px,-5px) rotate(2deg); -ms-transform: translate(0px,-5px) rotate(2deg); transform: translate(0px,-5px) rotate(2deg);}
#btnTop { position:absolute; top:0; right:52px; height:33px; width:190px; }
#btnTop2 { position:absolute; top:0; right:0; width:190px; z-index:1000; height:33px; overflow:hidden; }
#btnTop2 .fl { display:block; float:left; }
#btnTop2 a.fl { background:#e3e3e3; }

.css3 #btnTop2 a img { 
	position:relative; 
	-webkit-transition: all 300ms ease-in-out 0s; -moz-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; -ms-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s;}
.css3 #btnTop2 a img:hover {
	-webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}

#clubTop { position:absolute; top:50px; right:30px; width:412px; height:96px; overflow:hidden; background:url(../images/club5.png) no-repeat; }
#clubCache { position:absolute; top:0; left:0;  }

.css3 #clubTop3 img {
	-webkit-transition: all 300ms ease-in-out 0s; -moz-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; -ms-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s;}
.css3 #clubTop3 .rt:hover { 
	-webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg);}
.css3 #clubTop3 a img:hover { 
	-webkit-transform: translate(6px,0px); -moz-transform: translate(6px,0px); -o-transform: translate(6px,0px); -ms-transform: translate(6px,0px); transform: translate(6px,0px);}



#juniorTop { position:absolute; top:152px; right:118px; height:31px; overflow:hidden; }
#juniorTop2, #juniorTop img { float:left; }
#juniorTop2 { overflow:hidden; }
#juniorTop a:hover img { position:relative; top:-32px; }
#juniorTop2 img { position:relative; top:50px; }
#juniorTop2 img.junior { top: 0; }
#juniorTop2 img.adulte { top: -113px; }
#juniorTop2 img.senior { top: -146px; }

.css3 #juniorTop img {
	top:0;
	-webkit-transition: all 300ms ease-in-out 0s; -moz-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; -ms-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s;}
.css3 #juniorTop a:hover img { 
	top:0;
	-webkit-transform: translate(0px,-32px); -moz-transform: translate(0px,-32px); -o-transform: translate(0px,-32px); -ms-transform: translate(0px,-32px); transform: translate(0px,-32px);}
.css3 #juniorTop2 img { 
	top:0; 
	-webkit-transform: translate(-54px,45px) rotate(45deg); -moz-transform: translate(-54px,45px) rotate(45deg); -o-transform: translate(-54px,45px) rotate(45deg); -ms-transform: translate(-54px,45px) rotate(45deg); transform: translate(-54px,45px) rotate(45deg);}
.css3 #juniorTop2 img.junior { 
	top:0;
	-webkit-transform: translate(0px,0px) rotate(0deg); -moz-transform: translate(0px,0px) rotate(0deg); -o-transform: translate(0px,0px) rotate(0deg); -ms-transform: translate(0px,0px) rotate(0deg); transform: translate(0px,0px) rotate(0deg);}
.css3 #juniorTop2 img.adulte { 
	top:0;
	-webkit-transform: translate(50px,-54px) rotate(-45deg); -moz-transform: translate(50px,-54px) rotate(-45deg); -o-transform: translate(50px,-54px) rotate(-45deg); -ms-transform: translate(50px,-54px) rotate(-45deg); transform: translate(50px,-54px) rotate(-45deg);}
.css3 #juniorTop2 img.senior { 
	top:0;
	-webkit-transform: translate(50px,-129px) rotate(-90deg); -moz-transform: translate(50px,-129px) rotate(-90deg); -o-transform: translate(50px,-129px) rotate(-90deg); -ms-transform: translate(50px,-129px) rotate(-90deg); transform: translate(50px,-129px) rotate(-90deg);}



#feuilles { position:absolute; top:184px; left:55px; width:40px; height:28px; overflow:hidden; }
#feuilles img { position:relative; left:0; }

.css3 #feuilles img.active { -webkit-animation: feuilles-anim 0.8s linear infinite; -moz-animation: feuilles-anim 0.8s linear infinite; -ms-animation: feuilles-anim 0.8s linear infinite; -o-animation: feuilles-anim 0.8s linear infinite; animation: feuilles-anim 0.8s linear infinite; }
@-webkit-keyframes feuilles-anim { from { left: 0px; } 14.28% { left: 0px; } 14.29% { left: -40px; } 28.56% { left: -40px; } 28.57% { left: -80px; } 42.85% { left: -80px; } 42.86% { left: -120px; } 57.13% { left: -120px; } 57.14% { left: -160px; } 71.42% { left: -160px; } 71.43% { left: -200px; } 85.7% { left: -200px; } 85.71% { left: -240px; } to { left: -240px; }  } @-moz-keyframes feuilles-anim { from { left: 0px; } 14.28% { left: 0px; } 14.29% { left: -40px; } 28.56% { left: -40px; } 28.57% { left: -80px; } 42.85% { left: -80px; } 42.86% { left: -120px; } 57.13% { left: -120px; } 57.14% { left: -160px; } 71.42% { left: -160px; } 71.43% { left: -200px; } 85.7% { left: -200px; } 85.71% { left: -240px; } to { left: -240px; }  } @-o-keyframes feuilles-anim { from { left: 0px; } 14.28% { left: 0px; } 14.29% { left: -40px; } 28.56% { left: -40px; } 28.57% { left: -80px; } 42.85% { left: -80px; } 42.86% { left: -120px; } 57.13% { left: -120px; } 57.14% { left: -160px; } 71.42% { left: -160px; } 71.43% { left: -200px; } 85.7% { left: -200px; } 85.71% { left: -240px; } to { left: -240px; }  } @keyframes feuilles-anim { from { left: 0px; } 14.28% { left: 0px; } 14.29% { left: -40px; } 28.56% { left: -40px; } 28.57% { left: -80px; } 42.85% { left: -80px; } 42.86% { left: -120px; } 57.13% { left: -120px; } 57.14% { left: -160px; } 71.42% { left: -160px; } 71.43% { left: -200px; } 85.7% { left: -200px; } 85.71% { left: -240px; } to { left: -240px; }  } 

#menu { margin-top:10px; width:886px; background:none; z-index:1000; }
#menu li a { background:none !important; }


#barreTop { position:absolute; top:2px; left:34px; width:886px; }
#infoTop { position:relative; float:left; width:333px; height:36px; background:url(../images/info.png) no-repeat; font:11px Arial,Verdana,Helvetica; }
#infoTop2 { padding:3px 0 0 36px; }
#searchTop { position:relative; float:right; width:217px; height:34px; background:url(../images/search.png) no-repeat; }
#searchTop input { position:relative; left:5px; width:174px; height:32px; line-height:32px; margin:0; padding:0; border:0; background:none; font:12px Arial,Verdana,Helvetica; color:#afafaf; }
#searchTop .submit { width:34px; cursor:pointer; left:10px; }


#content0 { position:relative; background:url(../images/fond7.jpg) no-repeat center 46px; }
#content0 #content { padding-top:46px;  }



#listArts { position:relative;width:958px;height:175px;margin:0 auto;background:url(../images/fond8.png) no-repeat center center;text-align:left; }
#listArts2 { position:relative;left:55px;width:840px;height:160px;overflow:hidden }
#listArts3 { position:relative;top:15px;width:10000px }
#listArts .link { position:relative;display:block;text-decoration:none;background:url(../images/cover2.png) no-repeat top right;width:210px;height:145px;float:left; }
#listArts .photo { position:relative;top:4px;left:10px;display:block;width:194px;height:98px;overflow:hidden; }
#listArts .titre { color:#999999;display:block;margin:10px 15px 0 }
#artLeft { position:absolute; top:72px; left:15px; cursor:pointer; }
#artRight { position:absolute; top:72px; right:15px; cursor:pointer; }

.css3 #listArts .link { -webkit-transition: all 300ms ease-in-out 0s; -moz-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; -ms-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s; }
.css3 #listArts .link:hover { -webkit-animation: rotate-anim 1s ease-in-out 1; -moz-animation: rotate-anim 1s ease-in-out 1; -ms-animation: rotate-anim 1s ease-in-out 1; -o-animation: rotate-anim 1s ease-in-out 1; animation: rotate-anim 1s ease-in-out 1; } 
@-webkit-keyframes rotate-anim { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 20% { transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); } 40% { transform: rotate(4deg); -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); } 60% { transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); } 80% { transform: rotate(4deg); -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); } to { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); }  } @-moz-keyframes rotate-anim { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 20% { transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); } 40% { transform: rotate(4deg); -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); } 60% { transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); } 80% { transform: rotate(4deg); -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); } to { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); }  } @-o-keyframes rotate-anim { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 20% { transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); } 40% { transform: rotate(4deg); -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); } 60% { transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); } 80% { transform: rotate(4deg); -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); } to { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); }  } @keyframes rotate-anim { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 20% { transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); } 40% { transform: rotate(4deg); -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); } 60% { transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); } 80% { transform: rotate(4deg); -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); } to { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); }  } .css3 #listArts .link .titre { -webkit-transition: color 300ms ease-in-out; -moz-transition: color 300ms ease-in-out; -o-transition: color 300ms ease-in-out; -ms-transition: color 300ms ease-in-out; transition: color 300ms ease-in-out; }
.css3 #listArts .link:hover .titre { color:#000000; }
.css3 #artLeft:hover img { -webkit-animation: rotate-anim2 0.25s linear 1; -moz-animation: rotate-anim2 0.25s linear 1; -ms-animation: rotate-anim2 0.25s linear 1; -o-animation: rotate-anim2 0.25s linear 1; animation: rotate-anim2 0.25s linear 1; }
@-webkit-keyframes rotate-anim2 { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 50% { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); } to { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); }  } @-moz-keyframes rotate-anim2 { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 50% { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); } to { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); }  } @-o-keyframes rotate-anim2 { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 50% { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); } to { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); }  } @keyframes rotate-anim2 { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 50% { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); } to { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); }  } .css3 #artRight:hover img { -webkit-animation: rotate-anim3 0.25s linear 1; -moz-animation: rotate-anim3 0.25s linear 1; -ms-animation: rotate-anim3 0.25s linear 1; -o-animation: rotate-anim3 0.25s linear 1; animation: rotate-anim3 0.25s linear 1; }
@-webkit-keyframes rotate-anim3 { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 50% { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); }  } @-moz-keyframes rotate-anim3 { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 50% { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); }  } @-o-keyframes rotate-anim3 { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 50% { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); }  } @keyframes rotate-anim3 { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } 50% { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); }  } 


#LeftCol {
  position:relative;
  float:right;
  width:242px;
	left:0;
	padding:10px 0 50px;
}
#RightCol {
  position:relative;
	float:left;
	left:40px;
  width:643px;
  padding:0 0 10px;
}




#bottom0 { position:relative; background:url(../images/footer.png) repeat-x center top; padding-top:33px; color:#fff; }
#bottom1 { background:url(../images/footer.jpg) repeat-x center top; height:157px; text-align:center; }
#bottom { }
#bottom a { font-size:12px; color:#fff; text-decoration:none; }
#bottom a:hover { text-decoration:underline; }

#bott1, #bott2, #bott3, #bott4 { float:left; position:relative; top:-2px; height:154px; }
#bott1, #bott2, #bott3 { background:url(../images/separe.png) no-repeat top right; }
#bott1 { width:135px; }
#bott1 a { display:block; padding-top:22px; }
#bott2 { width:296px; }
#bott2 .col1, #bott3 .col1 { float:left; position:relative; top:25px; left:13px; height:45px; }
#bott2 .col2, #bott3 .col2 { float:left; position:relative; top:25px; left:20px; height:45px; }
#bottomMS { background:url(../images/btn_ms.png) no-repeat; width:149px; height:37px; }
#bottomMS a { position:relative; left:4px; top:5px; }
#bott3 { width:329px; }
#bott4 { width:198px; }
#bott4 .row1 { margin-top:25px; margin-left:14px; }
#bott4 .row2 { margin-top:12px; margin-left:29px; }


.css3 #bott1 a img {
	-webkit-transition: all 500ms ease-in-out 0s; -moz-transition: all 500ms ease-in-out 0s; -o-transition: all 500ms ease-in-out 0s; -ms-transition: all 500ms ease-in-out 0s; transition: all 500ms ease-in-out 0s;}
.css3 #bott1 a:hover img {
	-webkit-transform: translate(0px,-3px) rotate(3deg); -moz-transform: translate(0px,-3px) rotate(3deg); -o-transform: translate(0px,-3px) rotate(3deg); -ms-transform: translate(0px,-3px) rotate(3deg); transform: translate(0px,-3px) rotate(3deg);}

.css3 #bott2 a img, .css3 #bott3 a img, .css3 #bott4 a img { 
	position:relative; 
	-webkit-transition: all 300ms ease-in-out 0s; -moz-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; -ms-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s;}
.css3 #bott2 a:hover img, .css3 #bott3 a:hover img, .css3 #bott4 a:hover img {
	-webkit-transform: scale(0.95); -moz-transform: scale(0.95); -o-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95);}

.css3 #bottomMS a img { 
	position:relative; 
	-webkit-transition: all 300ms ease-in-out 0s; -moz-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; -ms-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s;}
.css3 #bottomMS a img:hover {
	-webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg);}