@charset "UTF-8";

/*page index avec actualite (news)*/
#index {
margin: auto;
text-align:center;
}
#photoaccueil {
	margin:0 auto;
	width:640px;
	height:300px;
	/*background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;*/
	position:absolute;
    left: 350px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
    top:100px;
	z-index:0;
	/*background-color: #FFF;
 	-moz-opacity:0.8;
    opacity: 0.8;
	filter:alpha(opacity=80);*/
}
#langue {
position:absolute;
    left: 950px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
    top:10px;
}

#langue p{
font:16px  Courrier, arial, monospace;
}
#langue a{
font:12px  Courrier, arial, monospace;
color:#565656;
}

/*#deux img {
  float:right;
}*/

#un {
position:absolute;
padding:5px;
width:240px;
height:450px;
background-color: #ccc;
/*-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80);*/
}

#deux {
position:absolute;
padding:5px;
left:260px;
width:240px;
height:450px;
background-color: #ccc;
/*-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80);*/
}

#trois {
position:absolute;
padding:5px;
left:520px;
width:240px;
height:450px;
background-color: #ccc;
/*-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80);*/
}
#quatre {
position:absolute;
padding:5px;
top: 230px;
width:640px;
height:190px;
background-color: #ccc;
/*-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80);*/
}

#video1 {
position:absolute;
padding:1px;
top: 10px;
width:318px;
height:190px;
background-color: #ccc;
-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80);
}

#video2 {
position:absolute;
padding:1px;
top: 10px;
width:318px;
left:330px;
height:190px;
background-color: #ccc;
-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80);
}

#un p{
font:16px  Courrier, arial, monospace;
}
#un a{
font:12px  Courrier, arial, monospace;
color:#565656;
}

#deux p{
font:16px  Courrier, arial, monospace;
}
#deux a{
font:12px  Courrier, arial, monospace;
color:#565656;
}

#trois p{
 font:16px  Courrier, arial, monospace;
}
#trois a{
font:12px  Courrier, arial, monospace;
color:#565656;
}
#quatre p{
 font:16px  Courrier, arial, monospace;
}
#quatre a{
font:12px  Courrier, arial, monospace;
color:#565656;
}



/* CSS Document */
/*Menu avec effet mootools*/
#menu {
	position:absolute;
	left:45px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
	top:100px;
	width: 260px;
	height: 50px;
	text-align:left;
	overflow: hidden;
	border: 0px;
	display:hidden;
	text-indent: 20px;
	font-family: Courrier, arial, monospace;
	background-color: #565656;	
	-moz-opacity:0.7;
    opacity: 0.7;
	filter:alpha(opacity=70);
}
#logomenu	{
	position:absolute;
	left:5px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
	top:10px;
	}

#menu span {
	display: block;
	padding: 0 0px;
	text-align:left;
	color:#000000;
	/*font-style: bold;*/
}
#menu p {
	display: block;
	padding: 0 0px;
	text-align:left;
	/*font-family: Arial, "Arial Black", "Times New Roman", Times, serif;*/
	color: #FFF;
	font-size:16px;
	

}
#menu a {
	display: block;
	padding: 0 0px;
	 color: #565656;
}

#menu a:hover {
	background: #999;
}



#containmenu
{
	position:absolute;
	left:0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
	top:50px;
	width: 260px;
	height: 250px;
	background-color: #ccc;
	font-size:14px;
	text-indent: 20px;
	}
/*contenu de la page d'accueil*/	
	
#accueilcontainer {
	position: absolute;
	bottom: 0;
	width:900px;

	font:12px  Courrier, arial, monospace;
    color:#CCC;
	}
#accueilcontainer ul{	
	
	display:block;
}	
#accueilcontainer li{	
	list-style : none; /* on supprime le style par défaut de la liste */
    line-height : 16px; /* on définit une hauteur pour chaque élément */
    text-align : left; /* on centre le texte qui se trouve dans la liste */
	margin-right: 5px;
	display:inline;
	border:medium;
	border-color:#000000;
	
	
}
#accueilcontainer a /* Tous les liens se trouvant dans un menu */
{
   color: #FFFFFF;
}	
#accueilcontainer img{	
	margin-right:5px;
	text-align:center;
}	
	
/*info deroulante sur evenement et presse et galerie*/	
	

#accordion {
	margin:20px 0px;
	margin:0 auto;
 	width:600px;
 	position:absolute;
 	left: 340px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
 	top:100px;
 	/*padding-left: 3px;*/
 	background-color: #ccc;
 	-moz-opacity:0.8;
    opacity: 0.8;
	filter:alpha(opacity=80);
	
}

h3.toggler {
	cursor: pointer;
	border: 1px solid #fff;
	border-right-color: #fff;
	border-bottom-color: #fff;
	font:12px  Courrier, arial, monospace;
	margin: 0 0 0px 0;
	padding: 3px 50px 3px;
	background-color: #fff;
}

.element strong {
	
	font-family: Courrier, arial, monospace;
	color: #E22C18;
	font-size:12px;	
}
div.element p {
	margin:10px;
	padding:4px;
	font:12px  Courrier, arial, monospace;
    color:#565656;
    /*letter-spacing:-1px;*/
	text-align:justify;
}
.element {
text-align:center;
}
.element a {
color: #565656;
}
.element img {
margin:10px;

}

/*Menu2 fixe
#menu2 {
	position:absolute;
    left:10px; 
    top:20px;
	width: 300px;
	height: 100px;
	text-align:left;
	border: 0px;
	display:hidden;
    font-family: Courrier, arial, monospace;
	background-color: #333;
	-moz-opacity:0.7;
    opacity: 0.7;
	filter:alpha(opacity=70);
	
}	

#menu2 span {
	display: block;
	padding: 0 0px;
	text-align:center;
	color:#000000;
	font-style: bold;
}
#menu2 p {
	display: block;
	padding: 0 0px;
	text-align:left;
	/*font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
	color: #FFF;
	font-size:14px;
	

}
#menu2 a {
	display: block;
	padding: 0 0px;
}

#menu2 a:hover {
	background: #999;
}
#menu2 a /* Tous les liens se trouvant dans un menu 
{
   color: #FFFFFF;
}


#containmenu
{
	position:absolute;
	/*left:10px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu 
	top:100px;
	width: 300px;
	height:130px;
	background-color: #333;
	font-size:14px;
	text-indent: 20px;
	}
*/

strong {
	
	font-family: Courrier, arial, monospace;
	color: #CCC;
	font-size:16px;	
}




/*formalisme du body sans image de fond*/
body
{
  width: 1200px;
  margin:auto;
  margin-top:20px;
  margin-bottom:20px;
  background-repeat:no-repeat;
  background-color:#666666;
  behavior: url("csshover.htc");
  
}

/*diaporama*/
#slideshow {
	margin:0 auto;
	width:640px;
	height:360px;
	/*background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;*/
	position:absolute;
    left: 180px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
	/*background-color: #565656;*/
 	/*-moz-opacity:0.5;
    opacity: 0.5;
	filter:alpha(opacity=50);*/
}
#slidesContainer {
  margin:0 auto;
  width:560px;
  height:360px;
  top: 0px;
  overflow:auto; /* affiche une scrollbar au cas ou */
  position:relative;
  background-color: #fff;
  
  
}
#slidesContainer strong {
color: #E22C18;
padding: 5px;
}
.slide {
 margin:0 auto;
  width:540px; /* reduit de 20 pixels la div #slidesContainer pour permettre d'afficher la barre de scroll */
  height:260px;
  
}

.control {
  display:block;
  width:39px;
  height:360px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#navDiapo{
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	right:25px;
	bottom:5px;
	cursor:pointer;

}
#leftControl {
  top:0;
  left:0;
  background:transparent url(barregauche.jpg) no-repeat 0 0;
 
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(barredroite.jpg) no-repeat 0 0;
}

#pageContainer a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
#pageContainer a:hover {
  text-decoration:none;
}


#pageContainer {
  margin:0 auto;
  width:700px;
  position:absolute;
  left: 180px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  top:100px;
}
#pageContainer h1 {
  display:block;
  width:200px;
  height:114px;
  margin:auto;
  background:transparent no-repeat top left;
  text-indent: -10000px;
}
#pageContainer p {
  font:12px  Courrier, arial, monospace;
  /*letter-spacing:-2px;*/
  
}

.slide h2 {
  font:14px  Courrier, arial, monospace;
  color:#CCC;
  margin:15px;
  text-align:justify;
  /*letter-spacing:-1px;*/
}
.slide p {
  font:12px  Courrier, arial, monospace;
  color:#565656;
  margin:15px;
  text-align:justify;
  /*letter-spacing:-2px;*/
}
.slide img {
  float:right;
  margin:10px;
  
  
}

#topcontainer {
  margin:0 auto;
  width:640px;
  position:absolute;
  left: 360px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  top:68px;
  background-color: #333;
 	-moz-opacity:0.8;
    opacity: 0.8;
	filter:alpha(opacity=80);
}
#topcontainer p {
  font:12px  Courrier, arial, monospace;
  color:#CCC;
  letter-spacing:1px;
  text-align:justify;
}
#topcontainer a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
/* Effet zoom sur photo */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
	float:left;
}

#lbPrevLink:hover {
	background: transparent url(prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
	float:right;
}

#lbNextLink {
	background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}



#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}
/*liste des artistes */



#artistecontainer	{
	position:absolute;
	left: 330px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
	top:101px;
	width:750px;
	overflow:hidden;
	font:20px  Courrier, arial, monospace;
	color:#868686;
	background-color: #bdbdbe;
	-moz-opacity:0.8;
	opacity: 0.8;
	filter:alpha(opacity=80);
	text-align: left;
	padding:5px;
	}
.listeartiste	{ 
width:240px;
height: 320px;
text-align:left;
padding:10px;
  float:left;

	}

.listeartiste a {
  color: #565656;
  text-decoration:none;
}

.listeartiste a:hover {
  text-decoration:none;

}
.titre	{ 

margin-left:5px;
font:14px  Courrier, arial, monospace;
color:#E22C18;
font-weight: bold;

}
.artiste	{ 

margin-left:20px;

}
.survol {
	position:absolute;
  	left: 430px; 
 	top:70px;
	display:none;
}

#contenu { 
	
	position:absolute;
	left: 10px; 
	top:220px;
	display:block;

  }
  a img
{
border: none;
}
/*pop up pour la bio et le texte sur chaque artiste*/
#link-1-content {
		position:absolute;
 		left: 10px; 
 		top:5px;
		width:600px; 
		display:none;
		font-size:12px;
		text-align:justify;
		font-family: Courrier, arial, monospace;
		}

#link-2-content {
		position:absolute;
 		left: 10px; 
 		top:5px;
		width:550px; 
		display:none;
		font-size:12px;
		text-align:justify;
		font-family: Courrier, arial, monospace;}
#link-3-content {
		position:absolute;
 		left: 10px; 
 		top:5px;
		width:600px; 
		display:none;
		font-size:12px;
		text-align:justify;
		font-family: Courrier, arial, monospace;}	
#link-4-content {
		position:absolute;
 		left: 10px; 
 		top:5px;
		width:600px; 
		display:none;
		font-size:12px;
		text-align:justify;
		font-family: Courrier, arial, monospace;}		

/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}

/* Container */
#simplemodal-container {height:500px; width:650px; color:#bbb; background-color:#333; overflow-y:scroll; overflow-x:hidden;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block;}
#simplemodal-container a {color:#ddd; }
#simplemodal-container a.modalCloseImg {background:url(../img/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-1px; right:-1px; cursor:pointer;}

#basic-modal{
		position:absolute;
 		left: 10px;
 		top:340px;
		font-family: Courrier, arial, monospace;
		font-size:12px;
		
}

#basic-modal a{
		
        color:#E22C18;
		
}


/*menu pour les expos*/


#menuexpo, #menuexpo ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : left; /* on centre le texte qui se trouve dans la liste */
		text-indent:3px;
}

#menuexpo /* Ensemble du menu */
{
        
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
		position:absolute;
  		left: 350px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  		top:20px;
		z-index:1;
}

#menuexpo a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
       /* background : #666; /* couleur de fond */        
        color : #FFFFFF; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 213px; /* largeur */
}

#menuexpo li /* Elements des listes */      
{ 
        float : left; 
		
        /* pour IE qui ne reconnaît pas "transparent" */
        /*border-right : 1px solid #fff;  on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menuexpo li
{
        /*border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menuexpo li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#menuexpo li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
		text-indent: 10px;
		background-color: #BDBDBE;
		
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menuexpo li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menuexpo li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #ccc ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menuexpo li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menuexpo a:hover /* Lorsque la souris passe sur un des liens */   
{
        background: #999; /* ... et au contraire, le fond en blanc */
}

#menuexpo li:hover ul ul, #menuexpo li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menuexpo li:hover ul, #menuexpo li li:hover ul, #menuexpo li.sfhover ul, #menuexpo li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}
#expocontain {
	margin:0 auto;
	width:700px;
	height:430px;
	/*background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;*/
	position:absolute;
    left: 350px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
    top:100px;
	z-index:0;
	background-color: #FFF;
 	/*-moz-opacity:0.8;
    opacity: 0.8;
	filter:alpha(opacity=80);*/
}
#expocontain p {
  font:12px  Courrier, arial, monospace;
  color:#565656;
  margin:15px;
  text-align:justify;
  
}

#expocontain strong {
  font:14px  Courrier, arial, monospace;
  color:#565656;
  margin:15px;
  text-align:justify;
  
}

#expocontain h2 {
  font:14px  Courrier, arial, monospace;
  color:#E22C18;
  margin:5px;
  /*letter-spacing:-1px;*/

}
#expocontain img {
  float:right;
  margin:0 15px;
}

#vueexpo a {
	position:absolute;
    left: 10px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
    top:350px;
  font:12px  Courrier, arial, monospace;
  color:#E22C18;
  margin:15px;
  text-align:justify;
  
}

#boutique {
  margin:15px;
  text-align:justify;
  position:absolute;
  left: 350px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  top:90px;
  width:600px;
  height:900px;
  background-color: #FFF;
  -moz-opacity:0.8;
    opacity: 0.8;
	filter:alpha(opacity=80);
}
#boutique p{
  font:14px  Courrier, arial, monospace;
  color:#E22C18;

}
#boutint1{
  font:14px  Courrier, arial, monospace;
  color:#E22C18;
  position:absolute;
  left:5px;
top:30px;
  display:block;
  width:270px;
}
#boutint2{
  font:14px  Courrier, arial, monospace;
  color:#565656;
  position:absolute;
  left:270px;
  display:block;
  width:300px;
}
#boutint3{
  font:14px  Courrier, arial, monospace;
  color:#E22C18;
  position:absolute;
  left:5px;
  top:250px;
  display:block;
  width:270px;
}
#boutint4{
  font:14px  Courrier, arial, monospace;
  color:#565656;
  position:absolute;
  left:270px;
  top:250px;
  display:block;
  width:300px;
}
#boutint5{
  font:14px  Courrier, arial, monospace;
  color:#E22C18;
  position:absolute;
  left:5px;
  top:600px;
  display:block;
  width:270px;
}
#boutint6{
  font:14px  Courrier, arial, monospace;
  color:#565656;
  position:absolute;
  left:270px;
  top:600px;
  display:block;
  width:300px;
}