<!--

 body   {   font-family: jura-demibold; 
            font-size: 24px; 
            background-color: #fff;
            width: 100%;     } 



/*liens jaunes qui passent à l'orange  */

a {	font-size:26px;
	color: #000;
	text-decoration:none; }


a:hover {	color: #FC9A05;;
		text-decoration:underline; }


/*tableau contenant les petites images des clips*/

.picto {	left: 10px;
		top: 510px;
                padding: 6px;
		width: 90%;
		height: 150px; }


/*logo atohm en haut de page*/


.logo {  	border: 0px #000 solid;
	        position: absolute;
		left:10px;
		top: 20px;
		width: 98%;
		height: 20%;
                border: solid 1px #000;
                box-shadow: 8px 8px 18px #000; }

/*logo atohm en haut de page*/


.v-room {  	border: 1px #000 solid;
                left:10px;
		top: 4px;
		padding: 8px;  
                margin: 8px;   }

.pix  { border: 1px #000 solid; 
        box-shadow: 3px 3px 5px;
	background-color: #fff; 
        padding :12px;
        float: left;
	margin-bottom: 1%;
        margin-right: 3%;  
	padding:3px; 
        position: relative;
        top: 2px;
        left: 3px;
        overflow: hidden;  }


/*liste mp3 à puce*/


.liste-puce {  
               position: relative;
               top: 182px;	
	       left: 45px;
	       padding: 2px;
	       font-size: 26px ; }


.tableau2  {  position: absolute;
              top: 130px;	
	      left: 278px;
	      max-width: 82%;
	      height: 99%;
 	      }


.tableau3  {  position: relative;
              top: 460px;	
	      left: 1px;
	      max-width: 100%;
	      height: 100%;
              color: #000;
	      padding: 2px;
 	      text-align:justify;  }

.pix  { border: 1px #000 solid; 
        box-shadow: 3px 3px 5px;
	background-color: #fff; 
        padding :12px;
        float: left; 
        position: relative;
        top: 2px;
        left: -2px;
        overflow: hidden;  }


.paraf  { font-size; 28px; }

.rspvimage {
   
   position: relative;
   list-style: none;
   overflow: hidden;
   width: 100%; }



td   {  text-align: justify;  }


.v-room {  float: left;
	   margin: 6px; 
	   padding:6px;  }



.droits {	text-align:left;
		font-size: 24px;
		color: #FF6600; }


@font-face {
  font-family: 'jura-demibold';
  src: url('../fonts/jura-demibold-webfont.eot');
  src: url('../fonts/jura-demibold-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/jura-demibold-webfont.woff') format('woff'),
       url('../fonts/jura-demibold-webfont.ttf') format('truetype'),
       url('../fonts/jura-demibold-webfont.svg#jurademibold') format('svg');
  font-weight: normal;
  font-style: normal;    }


@media only screen and (color) 
and (min-width : 1024px) {}



@media only screen and (color) 
and (max-width : 640px) {

body {width:360px; }

.pix  { width: 310px;
        height: 100%; 
        position: relative;
        top: -12px;
        left: 2px;
        overflow: hidden;  }

.tableau2  { 

	width: 320px;
        height: 100%;
	font-size: 28px;    
   	position: relative;
	top: 54px;
        margin-top: 10px;
	left: -2px;   }

.tableau3  {  position: absolute;
              top: 2260px;	
	      left: 3px;
	      width: 100%;
	      height: 100%;
              color: #000;
	      padding: 4px;
 	      text-align:justify;  }

.pretext  { position: absolute; left:-2px; }

.liste-puce {  
               position: relative;
               top: 100px;	
	       left: 22px;
	       padding: 2px;
	       font-size: 28px; }

.logo {  	border: 0px #000 solid;
	        position: absolute;
		left:8px;
		top: 6px;
		width: 84%;
		height: 9%;
                padding: 4px;
                border: solid 1px #000;
                box-shadow: 8px 8px 18px #000; }

}