.patate_button { width: 300px;height: 70px; margin:0 auto; }
.share_button { width: 300px;height: 70px; margin:0 auto; }
.share_button section { width: 50%; height: inherit; float: left; }
.share_button section h1 { margin-top: 13%; overflow: hidden; width: 100%;color: #fff;}
.share_button section article { position: absolute; height: inherit; width: 150px; background: #d4d5d9;
	-webkit-transition: all 600ms;
	-moz-transition: all 600ms;
	-o-transition: all 600ms;
	-ms-transition: all 600ms;
	transition: all 600ms;
	text-align: center;
}

.share_button section article h2 { display: inline-block; width: 40%;	height: 40px; overflow: hidden;	margin-top: 10%; cursor: pointer; }
.share_button section article h2:hover { text-shadow:2px 2px 2px #555; }
.share_button section article h2 a { color:#FFF; text-decoration: none; }
.share_button section:first-child article:first-child{ text-align: right; }
.share_button section:last-child article:first-child{ text-align: left; }


.share_button section:first-child article:last-child,
.share_button:hover section:first-child article:first-child {
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-o-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	transform: rotateY(90deg);
}

.share_button section:last-child article:last-child,
.share_button:hover section:last-child article:first-child {
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	-o-transform: rotateY(-90deg);
	-ms-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
}

.share_button:hover section:first-child article:last-child,
.share_button:hover section:last-child article:last-child {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.menu li {
    display:inline-block;
    margin: 3px;
    width: 12em;
    color: #000;
    background:#fff;
    background: rgba(255,255,255, 0.5);
    -webkit-border-radius: 10px; 
            border-radius: 10px; 
}
.menu li.active{
    background:#666;
    background: rgba(0,0,0, 0.5);
    color: #fff;
}
.menu li a{
    text-decoration:none;
    color: #000;
}
.menu li.active a:hover{
    color: #000;
}
.menu li:hover{
    background: rgba(255,255,255, 0.8);
}
.menu li a,
.menu li.active a{
    padding: 9px 18px;
    display:block;
}
.menu li.active a{
    color: #fff;
}
.menuknop{
position: fixed;
top: 1%;
left:1%;
left: 50px;
height: auto;
}
.menuknop2{
position: fixed;
left: 0px;
height: auto;
}


pied_de_page{
  padding: 5px;
  position: absolute;
  height:22px;
  bottom: 0;
  left: 0;
  width:100%;
  text-align: center;
  background-color: #ffffff;
  clear: both;
}



.menu2{
 position:fixed;
  left: 0;
  top: 6%;
  width: 23em;
height: 17em;
  margin-top: -2.5em;
font-size: 1em;
overflow:hidden;
}
.rlrhtml{
style='height:65px; width:100%; position:fixed;
-webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 200;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 200;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 200;
  border: 0px none rgb(255, 255, 255);'>
}
.menu{
 position:fixed;
  left: 0;
  top: 40%;
  width: 23em;
  margin-top: -2.5em;
font-size: 1em;
overflow:hidden;
}

#outvid{
height: 0px;
overflow: hidden;
position: relative;
width: 0px;
}
.bouton {
    width:auto;
    padding:8px 0;
    text-align:center;
    display: inline-block;
    float:left;
    margin:0 8px 0 0;
    border-radius:7px;
    font-size: 0.85em;
    width:120px;
    color:#000;
    font-family: Arial,sans-serif;
}
.bouton, .bouton:active {
    background: #444;
    background: linear-gradient( #555, #2C2C2C);
    background: -webkit-linear-gradient( #555, #2C2C2C);
    background: -moz-linear-gradient( #555, #2C2C2C);
    background: -ms-linear-gradient( #555, #2C2C2C);
    background: -o-linear-gradient( #555, #2C2C2C);
    background: linear-gradient( #555, #2C2C2C);
}
.bouton {
box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}
.bouton:hover {
    background: #555;
    background: -webkit-linear-gradient( #777, #333);
    background: -moz-linear-gradient( #777, #333);
    background: -ms-linear-gradient( #777, #333);
    background: -o-linear-gradient( #777, #333);
    background: linear-gradient( #777, #333);
}
.bouton:active{box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

#module{
height: 0px;
overflow: hidden;
width: 0px;
position : fixed;
bottom : 0px;
right : 0px;
}
#module2{
height: 0px;
overflow: hidden;
width: 0px;
position : fixed;
bottom : 0px;
right : 0px;
}

#l{
height: 0px;
overflow: hidden;
width: 0px;
position : fixed;
bottom : 0px;
right : 0px;
}



#dl{
height: 0px;
overflow: hidden;
position: relative;
width: 0px;
}
#module2{
height: 0px;
overflow: hidden;
position: relative;
width: 0px;
}

#chat{
height: 0px;
overflow: hidden;
position: relative;
width: 0px;
}
#vc{
height: 0px;
overflow: hidden;
position: relative;
width: 0px;
}

#marci{
-moz-box-shadow: inset 10px 10px 5px 0px #656565;
-webkit-box-shadow: inset 10px 10px 5px 0px #656565;
-o-box-shadow: inset 10px 10px 5px 0px #656565;
box-shadow: inset 10px 10px 5px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=5);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

#OFFombremilieu{ 
   width: 150px; 
   height: 150px; 
   background: url('/images/FLogo.png') repeat; 
   overflow: visible; 
}

html, body {
height: 100%
}

body {
margin: 0;
padding: 0;
text-align : center;
font-family : arial;
font-size : 0.7em;
background-color : #efe3af;
background : #000000 url(images/bg_all.jpg) top center no-repeat ;
}

#conteneur {
background : url(images/centre.jpg) ;
text-align : left;
width : 746px ; 
margin : 0 auto 0 auto; 
min-height:100%;}

#left {

margin: 0;
padding: 0;
min-height:100%;}

 
#hautp2 {
width : 946px ;
height : 425px ;
background : url(/images/LogoLive.jpg) no-repeat;
 border-top :1px solid #000}

#nolive {
width : 946px ;
height : 425px ;
background : url(/images/logo.jpg) no-repeat;
 border-top :1px solid #000}

 
#centre {
width : 746px ;
background: transparent ;
text-align : left; }

#centrage {
padding-left : 28px ; background : transparent ; width : 690px ;}

#bas {
width : 746px ;
height : 230px ;
background: url(/images/bas.jpg) no-repeat;
text-align : left;
bottom: 0; }



 /*  DIV GAUCHE  */
 
 
#gauche {
border-top : 1px solid #fff;  
float : left ;  
background-color : transparent;
width : 138px;
text-align : left;  }

 









 /* liste des liens gauche */


#gauche ul {
margin : 0 ; 
padding : 5px ; 
background : #F9E8A1;
 padding-bottom : 5px ;  
} 

#gauche li {
padding : 0 0 5px 0 ;

} 


#gauche li a {

color : #313131

} 


li.name {
text-transform : uppercase ; 
display : block ; 
 margin : 10px 0 5px 0 ;
 border-bottom : 1px dotted #313131 ; 
 font-weight : bold ; 
 }
 
 li.name a { color : #313131;
 text-decoration : none ; 
 }
 
 
 



li.blabla {
display : block ; 
text-decoration : none ; }



li.link {
display : block ;
text-decoration : underline ; 
}



 /* DIV DROITE */

#droite {
float : left ;  
background-color : transparent;
width : 482px;
margin-left : 10px}


 /* Intro DIV droite - PETIT LOGO - H1 et petite intro texte */


#haut_droite {
padding : 10px 10px 0 0;
min-height : 80px ;  
}

#haut_droite img {
float : left ;
}

#haut_droite p {
margin : 5px 0 0 0; 
padding : 0 ;
color : #000; 
}



#haut_droite  h1 {
font-size : 1.5em; 
color : #000 ; 
margin : 0 0 0 0 ;
padding : 20px 0 10px 0 ; 
text-transform : uppercase ;
background : url(images/hr.gif) right bottom repeat-x}
 

 /* H2 et H3 - TITRE : liens - kits graphique - etc ... */

 h3 {

clear : left ; 
margin : 0 ; 
padding : 2px 0 2px 0;
font-size : 1.2em;
background-color : #efe3af;
color :#fff; 
text-indent : 10px;
text-transform : uppercase ;
}

.englobe_h3 {
padding : 1px ;
 background : #fff;
  margin : 30px 0 10px 0 ;
  border : 1px solid #000; }
 
 
 
 
 h2 {

clear : left ; 
margin : 0 ; 
padding : 2px 0 2px 0;
font-size : 1.2em;
background-color : #665D3E;
color :#fff; 
text-indent : 10px;
text-transform : uppercase ;
}

.englobe_h2 {
padding : 1px ;
background : #ffff;
  margin : 30px 0 10px 0 ;
  border : 1px solid #000; 
-moz-box-shadow: 9px 9px 5px 1px #656565;
-webkit-box-shadow: 9px 9px 5px 1px #656565;
-o-box-shadow: 9px 9px 5px 1px #656565;
box-shadow: 9px 9px 5px 1px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=135, Strength=5);
}


 
 
  /* LISTES GENERAL */
 
 
 ul, li {
 margin :0;
padding : 0 ; 
list-style : none ;}



 /* MENU HAUT */



#menu {
padding : 1px; 
text-align: centre;
 background-color :#fff; 
border : 1px solid #000;
margin :0 5px 0 0 ; 
-moz-box-shadow: 9px 9px 5px 1px #656565;
-webkit-box-shadow: 9px 9px 5px 1px #656565;
-o-box-shadow: 9px 9px 5px 1px #656565;
box-shadow: 9px 9px 5px 1px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=135, Strength=5);
}


#menu ul{
background-color :#665D3E; 
height : 45px;
}

#menu li{
 float : left ;
   padding : 15px 15px 0 15px;
  background : url(images/boot.jpg) right bottom no-repeat}
  
   #menu li a{
 color : #fff}
 
    #menu li a:hover{
text-decoration : underline ; }




 /* Paragraphes  */




p {margin : 10px 35px 0 5px ;}


.notop {margin : 0 10px 0 5px ;}


.pboot {
margin : 10px 15px 0 5px ; 
padding : 0 ; 
text-indent : 15px ;   
background :  url(images/pboot.gif) left top no-repeat;}





/* SIGNATURE*/





 /* LIENS*/


a {
color : #000; 
text-decoration : none ;  
font-weight : bold}

a:hover {
color : #000; 
text-decoration : underline   ;}


#krek {color : #D10000; }
#kulko {color : #4EA229}








nav ul li a{
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        color:#fff;
        text-transform:capitalize;
        font-weight:normal;
        display:block;  /* IE6, IE7 line height fix */
        background-color:transparent;
        text-decoration:none;
        margin-top:3px;
        padding:5px;
        -moz-opacity: 0.66;
   -khtml-opacity: 0.66;
   opacity: 0.66;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=66)";
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=66);
   filter:alpha(opacity=66);
}

nav ul li a.grn:hover{
        color:#9acd32;
        -moz-opacity: 1;
   -khtml-opacity: 1;
   opacity: 1;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
   filter:alpha(opacity=100);
}

nav ul li a.orng:hover{
        color:#ff6600;
        -moz-opacity: 1;
   -khtml-opacity: 1;
   opacity: 1;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
   filter:alpha(opacity=100);
}
nav ul li a.pnk:hover{
        color:#FF3399;
        -moz-opacity: 1;
   -khtml-opacity: 1;
   opacity: 1;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
   filter:alpha(opacity=100);
}

nav ul li a.blu:hover{
        color:#00d0ff;
        -moz-opacity: 1;
   -khtml-opacity: 1;
   opacity: 1;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
   filter:alpha(opacity=100);
}

nav ul li a.prpl:hover{
        color:#CC00FF;
        -moz-opacity: 1;
   -khtml-opacity: 1;
   opacity: 1;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
   filter:alpha(opacity=100);
}

.green {        color: #9acd32; }

.pink { color: #FF3399; }

.orange { color: #ff731e; }
.yellow { color: #FEED01; }
.red { color: #ED0101; }
.blue { color: #00d0ff; }
.with { color: #ffffff; }
.purple {color: #cc00ff; }

.large {font-size: 72px; }

.medium {font-size: 50px; }

.small {font-size: 25px; }

.rotate {
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg); display: block;
}

.clearing {
        clear: both;
        display: inline;
        width: 100%;
        height: 0;
        overflow: hidden;
}

@font-face {
   font-family: 'BoycottRegular';
   src: url('BOYCOTT_-webfont.eot');
   src: url('BOYCOTT_-webfont.eot?#iefix') format('embedded-opentype'),
        url('BOYCOTT_-webfont.ttf') format('truetype'),
        url('BOYCOTT_-webfont.svg#BoycottRegular') format('svg');
   font-weight: normal;
   font-style: normal;
}

h1.fontface {
   font: 60px/68px 'BoycottRegular', Arial, sans-serif;
   letter-spacing: 0;
}

h2.fontface {
   font: 48px/52px 'BoycottRegular', Arial, sans-serif;
   letter-spacing: 0;
}

p.style1 {
   font: 18px/27px 'BoycottRegular', Arial, sans-serif;
}