@font-face
{ font-family: 'DeathFuturist'; 
src: url('DeathFuturist-WebFont.eot'); 
src: url('DeathFuturist-WebFont.eot?iefix') format('eot'), 
url('DeathFuturist-WebFont.woff') format('woff'), 
url('DeathFuturist-WebFont.ttf') format('truetype'), 
url('DeathFuturist-WebFont.svg#webfont') format('svg'); } 

p { font-family: 'DeathFuturist', Arial, sans-serif; } /* tout ce qui est dans p a la typo */

body
{background-image:url(image/fond.jpg);} 

/*---------------------- les fonds ---------------------*/


#fond1 
{
background-color: rgb(44,07,00);
width: 900px;/*largeur*/
margin-left: auto; /*placer au milieu */
margin-right: auto;
margin-top: 30px;
padding: 10px 10px 25px 10px;  /*intérieur*/   
}                      

#fond2
{
background-color: rgb(61,16,11);
width: 850px; /*largeur*/
margin-left: auto;
margin-right: auto;
margin-top: 15px;
padding: 10px 10px 25px 10px;  /*intérieur*/      
}


#fond3
{
background-image: url(image/poil.jpg) ;
width: 800px; /*largeur*/
height: 1300px; /* à rêgler en fonction du contenu: lemenu et presentoire */
margin-top: 15px;
margin-left: auto;
margin-right: auto;
padding: 10px 10px 10px 10px;  /*intérieur*/    

}

/*--------------------- la banière ----------------------*/

#banniere 
{
border: 1px solid;
border-color: transparent;
position: relative;
left: 30px;
height: 242px;
}

.ban
{
	border: 0px solid #F30;
}

/*-------------------------------------------*/
/*Les gros containeurs*/
/*-------------------------------------------*/

/* #lemenu déplacé dans les tableaux */

.conteneurarticle
{
border: 1px solid ;
border-color: transparent;
height: 666px;
margin-left: 280px;

}

#espace
{
width: 480px; /*largeur*/	
height: 44px;	
}



#une
{
width: 480px; /*largeur*/
position: relative;
padding: 10px 10px 10px 00px;  /*intérieur*/ 
overflow: hidden; 
font-family: 'DeathFuturist', Arial, sans-serif;
font-size: 30px;
color: white;
opacity: 0.6;
border: 1px solid;
border-color: transparent;
}

#deux
{
width: 480px; /*largeur*/
position: relative;
left: 10px;
padding: 10px 10px 10px 00px;  /*intérieur*/ 
overflow: hidden; 
font-family: 'DeathFuturist', Arial, sans-serif;
font-size: 30px;
color: white;
opacity: 0.6;
border: 1px solid;
border-color: transparent;
}

#presentoire
{
width: 480px; /*largeur*/
height: 470px;
position: relative;
top: 10px;
padding: 10px 10px 10px 10px;  /*intérieur*/ 
overflow: hidden; 
background-image: url(image/cadres2.png) ; 
background-repeat: no-repeat;
border: 1px solid;
border-color: transparent;
}

#presentoire2
{
width: 500px; /*largeur*/
height: 94px;
position: relative;
top: 10px;
padding: 55px 00px 00px 00px;  /*intérieur*/ 
overflow: hidden; 
background-image: url(image/defile.png) ; 
background-repeat: no-repeat;
font-family: 'DeathFuturist', Arial, sans-serif;
color: black;
opacity: 0.65;
text-align: center;
border: 1px solid;
border-color: transparent;
}

#presentoire2 a
{
font-family: 'DeathFuturist', Arial, sans-serif;
color: white;
opacity: 0.65;
text-align: center;
border: none;
}


#footer
{
width: 470px; /*largeur*/
height: 155px;
position: relative;
left: 10px;
padding-left: 20px;
overflow: hidden; 
background-image: url(image/cadre2.png) ;
font-family: 'DeathFuturist', Arial, sans-serif;
font-size: 20px;
color: white;
opacity: 0.7;
}

#bottom
{
margin-top: 30px;
text-align: center; 
font-family: 'DeathFuturist', Arial, sans-serif;
}


/*-------------------- le panneau menu -----------------------*/


.menuimage /*position du panneau menu */
{
border: none;
position: relative;
margin-left: 30px;
margin-bottom: 26px;
}

/*----------------------dans le tableau ---------------------*/
#lemenu
{
border: 0px solid #00F;
width: 250px;
padding: 10px; 
margin-left: 0px;
float: left;
overflow: hidden; 
font-family: 'DeathFuturist', Arial, sans-serif;
color: white;   
}

#tableau /* Index */
{
border:0px solid #F00;
width: 200px;
padding: 10px;
margin-left: 20px;
margin-bottom: 33px;
background-image: url(image/cadre2.png) ;
}
 
#tableau1 /* en dessous*/
{
border: 0px solid #FF0;
width: 200px;
padding: 10px;
padding-bottom: 15px;
margin-left: 20px; 
margin-bottom: 33px;
background-image: url(image/cadre2.png) ;
}


#tableau2  /* sculpture danse etc*/
{
border: 0px solid #F0F;
width: 200px;
height: auto;
padding: 10px;
padding-bottom: 15px;
margin-left: 20px;
background-image: url(image/cadre2.png) ;
}

/*-------------------- écritures du tableau -----------------------*/

.petiteopacite /* opacité titres tableaux */
{
opacity: 0.5;
font-size: 20px;
padding-left: 10px;
text-decoration: none;
}

a
{
text-decoration: none;
color: white;
}

.grandeopacite /*opacité thème tableau */
{
opacity: 0.35;
font-size: 15px;
padding-left: 10px;
text-decoration: none;
}

.triangle /* les triangles */
{ padding-left: 42px; } 

.patte /* les pattes */
{
padding-left: 10px;
margin-top: 20px;
} 

.book /* book */
{ padding-left: 28px;
padding-bottom: 20px;
float: left; } 

.puis /* book */
{ padding-left: 15px; }


/*-------------------------------------------*/

#caA
{
	margin-left: 1px;
border: 0px solid #0F0;
position: relative;
left: 01px;
}

#caB
{
position: relative;
left: 259px;
top: -197px;
border: 0px solid #0F0;
}


#caC
{
position: relative;
left: 1px;
top: -158px;
border: 0px solid #0F0;
}

#caD
{
position: relative;
left: 259px;
top: -355px;
border: 0px solid #0F0;
}


/*---------------------GD----------------------*/


#presentoiregd
{
width: 495px; /*largeur*/
height: 155px;
padding: none;
margin: none;
background-image: url(image/gayme.png) ; 
background-repeat: no-repeat;
font-family: 'DeathFuturist', Arial, sans-serif;
color: black;
opacity: 0.65;
border: 1px solid;
border-color: transparent;
}


#presentoiregd a
{
font-family: 'DeathFuturist', Arial, sans-serif;
color: black;
opacity: 0.65;
text-align: center;
}


#presentoiregd .titre
{
font-family: 'DeathFuturist', Arial, sans-serif;
font-size: 30px;
color: black;
opacity: 0.7;
}

#presentoiregd img
{
float: left;
opacity: 0.7;
margin: 02px 20px 00px 55px;
}

#autrejeu
{
margin-top: 20px;
font-size: 14px;
text-align: center; 
font-family: 'DeathFuturist', Arial, sans-serif;
margin-bottom: 2px;
padding-top: 650px;
}

#presentoiregd a
{
font-family: 'DeathFuturist', Arial, sans-serif;
color: white;
opacity: 0.65;
text-align: center;
}

#presentoiregd
{
width: 495px; /*largeur*/
margin-top: 20px;
margin-left: 10px;
float: left;
padding: 22px 00px 00px 00px;  /*intérieur*/ 
overflow: hidden; 
background-image: url(image/gayme.png) ; 
background-repeat: no-repeat;
font-family: 'DeathFuturist', Arial, sans-serif;
color: black;
opacity: 0.65;
}


#plugrand
{
width: 480px; /*largeur*/
position: relative;
left: 10px;

overflow: hidden; 
font-family: 'DeathFuturist', Arial, sans-serif;
font-size: 14px;
color: white;
opacity: 0.6;
border: 1px solid;
border-color: transparent;
}



#plugrand a
{
font-family: 'DeathFuturist', Arial, sans-serif;
color: white;
opacity: 0.65;
}

a:hover
{text-decoration: underline; }

a:active
{font-style: italic;}


/*---------------------visuel----------------------*/

#cadredessin

{
border: 0px solid ;
border-color: transparent;
background-image: url(image/presentoire.png) ;
/*width: 500px;*/
/*float: left;*/
height: 600px;
background-repeat: no-repeat;

}

#cadreiconesperso
{

border: 0px solid ;
border-color: transparent;
}

.icone
{
margin-top: 4px;
margin-left: 3px;
margin-right: 9px;
margin-bottom: 8px;
border: none;
}

#cadreexplicationperso
{
position: relative;
border: 1px solid;
border-color: transparent;
height: 380px;
}

.imagegrand
{
border: 1px solid;
border-color: transparent;
position: relative;
top: 15px;
left: 6px;
}

#explique
{
border: 1px solid;
border-color: transparent;
position: relative;
top: 20px;
left: 320px;
width: 160px;
height: 335px;
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color:#E0E0E0;
overflow: auto;
}

#range1
{
	border: 1px solid;
	border-color: transparent;
	width: 520px;
	height: 95px;
	position: relative;
top: 0px;
left: 1px;
}

#range2
{
	border: 1px solid;
	border-color: transparent;
	width: 520px;
	height: 95px;
		position: relative;
top: -2px;
left: 1px;
}



/*--------------------- focus ----------------------*/

#focustrigger_ch
{
border: 0px solid #F0F;
background-color: transparent;
position: absolute;
display: block;
top: 7px;
left: 3px;
width: 300px;
height: 380px;
}

#focustrigger_ch:hover #focusdisplayed_ch
{
display: block; 
}

#focusdisplayed_ch
{
position: absolute;
z-index: 10;
display: none;
border: 5px solid #000000;
background-image: url(image/opacite80.ico);
top: -2px;
left: -290px;
width: 800px;
text-align: center;
}


/*---------------------composition & labeur----------------------*/


#compo
{
border: 0px solid;
border-color: red;
background-image: url(image/textelabeur.png);
width: 480px; /*largeur*/
height: 614px;
float: left;
background-repeat: no-repeat;
padding-top: 14px;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 10px;
overflow: auto;
font-family: Tahoma, Arial, sans-serif;
margin-bottom: 18px;

}

#compoint

{
position: relative;
border: 0px solid;
border-color: purple;
width: 460px; /*largeur*/
height: 595px;
margin: auto;
overflow: auto;
font-family: Tahoma, Arial, sans-serif;
color: #FFBB9D;
opacity: 0.65;
}

#compoint2

{
position: relative;
border: 0px solid;
border-color: purple;
width: 410px; /*largeur*/
height: 595px;
margin: auto;
font-family: Tahoma, Arial, sans-serif;
color: #FFBB9D;

}