/* Eléments de la page index*/
						           /* body*/
body 
{
   background: url('images/fond8080.jpg');
   font-family: 'Trebuchet MS', Arial, sans-serif;
   color: #181818;       
   margin:auto; 
}

                              /* main-wrapper*/

#main-wrapper{  
   width: 980px;
   margin-left:auto;
   margin-right:auto;
   margin-bottom:0px;
   padding-bottom:0px;}
 
                                /* Header */
header {width:975px;}

#titre-page-index{margin-top:5px;margin-bottom:10px;}								
								  
.centrer{text-align:center;}
 
.monogramme {margin-left:15px;margin-top:14px;border-radius: 5px;} 


                                  /* banniere*/
#container-banniere{position: relative;}

#slider { margin-left:8px;
	width: 960px;
	height: 235px;
	overflow: hidden;
	margin-bottom: 40px;
	position: relative;
    border-radius:10px;
    box-shadow: 0px 4px 4px #1C1A19;}

#slider ul {
	margin: 0;
	padding: 0;
	list-style:none;
	position:relative;}
	

#slider ul li {
	width: 960px;
	height: 235px;
	overflow: hidden;
	position:relative;}

#controls{
	position:absolute;	
	left:365px;	
	top:245px;
    margin: 0;
	padding: 0;}

 #controls a.prevBtn, #controls a.nextBtn {display: none;}

 #controls ol{
	margin: 0;
	padding: 0;
	list-style-type: none;}

 #controls ol li {
	float: left;
	width: 15px;
	height: 15px;
	background : url('images/puce_bleu.png') no-repeat top left;
	margin-right: 5px;}

 #controls ol li.current {
	background-position : 0px -15px;
	background : url('images/puce-courant.png') no-repeat top left;}

 #controls ol li a{
	display: block;
	width: 15px;
	height: 15px;
	text-indent: -9999px;}
  
                                     /* Navigation */   
   
nav{display:block; margin: 0; padding: 0; margin-left:72px; height:50px;}

#menu , #menu .famillelist,#menu .photosEtlist,#menu .diverslist,#menu .photosFrlist{
    list-style-type: none;
	margin:0;
    padding:0; z-index:1000;}

#menu li
{    float:left;   
	 margin-left:0px ;
     background:url('images/menu/menu-li.png') no-repeat;
	  border-radius:7px 7px 7px 7px;
	 } 
  
#menu li .famillelist,#menu li .photosEtlist,#menu li .photosFrlist,#menu li .diverslist{
display:none;}

#menu li a
{ display: block;
  width:136px;
  font-size: 1em;
  color:white;
  text-align: center ;
  padding-bottom: 5px;
  padding-left:1px;
  text-decoration: none;}
    
#menu li:hover .famillelist ,#menu li:hover .photosEtlist ,#menu li:hover .photosFrlist ,#menu li:hover .diverslist 
  { display:block;
  position:absolute;
  list-style-type: none;
  padding: 0;  
  border-radius:0 0 8px 8px; 
  background-color:#dfce9c;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}
	
#menu li:hover .famillelist  {  margin-left:-97px; width:740px;}

#menu li:hover .photosEtlist {  margin-left:-180px; width:640px;}

#menu li:hover .photosFrlist {  margin-left:-374px; width:745px;}

#menu li:hover .diverslist {  margin-left:-511px; width:745px;}


#menu li a:hover  .famillelist  li  ,#menu li a:hover  .photosEtlist  li  #menu li a:hover  .photosFrlist  li  #menu li a:hover  .diverslist  li 
{ float:left;}

#menu li  .famillelist  li ,#menu li  .photosEtlist  li ,#menu li  .photosFrlist  li ,#menu li  .diverslist  li 
{  padding-left:0px; padding-top:90px;height:50px;width:120px; float:left;}
  
#menu li:hover a{color:red;}

#menu li  .famillelist li a  ,#menu li  .photosEtlist  li a ,#menu li  .photosFrlist  li  a ,#menu li  .diverslist  li  a
{text-align:center;}

 #menu li li a:hover {color:blue; background-color:#dfce9c;}

 
#menu li .famillelist li.un{background-image: url('images/menu/arbre-gene.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;
}
#menu li .famillelist  li.deux{background-image: url('images/menu/joseph.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;
}
#menu li  .famillelist  li.trois{background-image: url('images/menu/amedee.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;
}
#menu li .famillelist  li.quatre{background-image: url('images/menu/lucien.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;
}
#menu li .famillelist  li.cinq{background-image: url('images/menu/germaine.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;
}
#menu li .famillelist  li.six{background-image: url('images/menu/gerard.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;
 }
 #menu li .famillelist  li.sept{background-image: url('images/menu/guy.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;
}

#menu li .famillelist  li.huit{background-image: url('images/menu/isabelle.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;
}
#menu li .famillelist  li.neuf{background-image: url('images/menu/olivier.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;
}
#menu li .famillelist  li.dix{background-image: url('images/menu/arbre-gene.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;
}
#menu li .famillelist  li.onze{background-image: url('images/menu/bernadette.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;
}

#menu li .photosEtlist li.un{background-image: url('images/menu/drapeau-arizona.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
#menu li .photosEtlist  li.deux{background-image: url('images/menu/drapeau-belgique.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
#menu li .photosEtlist  li.trois{background-image: url('images/menu/drapeau-californie.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
#menu li .photosEtlist  li.quatre{background-image: url('images/menu/drapeau-canada.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}	
#menu li .photosEtlist  li.cinq{background-image: url('images/menu/drapeau-indonesie.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .photosEtlist  li.six{background-image: url('images/menu/drapeau-japon.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .photosEtlist  li.sept{background-image: url('images/menu/drapeau-nevada.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .photosEtlist  li.huit{background-image: url('images/menu/drapeau-newyork.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .photosEtlist  li.neuf{background-image: url('images/menu/polynesie.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .photosEtlist  li.dix{background-image: url('images/menu/drapeau-singapour.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .photosEtlist  li.onze{background-image: url('images/menu/drapeau-utah.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .photosEtlist  li.douze{background-image: url('images/menu/drapeau-virginie.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .photosEtlist  li.treize{background-image: url('images/menu/drapeau-washington.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .photosEtlist  li.quatorze{background-image: url('images/menu/drapeau-wyoming.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .photosEtlist li.quinze{background-image: url('images/menu/drapeau-arizona.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 
 #menu li .photosFrlist li.un{background-image: url('images/menu/chateau-revel.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .photosFrlist li.deux{background-image: url('images/menu/eglise-revel.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
  #menu li .photosFrlist li.trois{background-image: url('images/menu/vase-tourdan.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 
  #menu li .photosFrlist li.quatre{background-image: url('images/menu/curiosites.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
  #menu li .photosFrlist li.cinq{background-image: url('images/menu/coupsdecoeur.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
  #menu li .photosFrlist li.six{background-image: url('images/menu/photosdiverses.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 
 #menu li .diverslist li.un{background-image: url('images/menu/stereogramme.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
 #menu li .diverslist li.deux{background-image: url('images/menu/triangles.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
  #menu li .diverslist li.trois{background-image: url('images/menu/anamorphose.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
  #menu li .diverslist li.quatre{background-image: url('images/menu/courbes.jpg');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
  #menu li .diverslist li.cinq{background-image: url('images/menu/jeux.png');
  background-repeat: no-repeat;
 background-position: 30px  10px;}
  #menu li .diverslist li.six{background-image: url('images/menu/art-ephemere.jpg');  
  background-repeat: no-repeat;
 background-position: 30px  10px;}
                                          /*section*/

section{z-index:10;margin:0px;padding:0px;}

article, aside{ display: inline-block; vertical-align: middle;text-align: justify;}

section article{ width: 700px;margin-right: 1px;margin-left:10px;}

section article p {font-size:1em;}

section article h2{text-align:center;}
section aside

  { text-align: center;
   margin:0;
   margin-left:10px;
   width: 220px;
   background-color: #DFCE9C;
   box-shadow: 0px 2px 5px #1c1a19;
   border-radius: 5px;
   padding: 5px;
   margin-right:0;
   color: red;
   font-size: 0.9em;}
 
#photo-gerard img{border: 0px solid #181818;}

                                       /* Footer */
footer{display:block;margin-left:-40px;text-align:center;margin-bottom:0px;}

#menu-footer{list-style-type: none;margin-left:183px;}

#menu-footer li{float:left;margin-left:0px;margin-right:0px;}

#menu-footer li a:hover{color:white;}

#menu-footer li a	
	{ display: block;      
	  background-color: #336699;	   	   
	   /*background-color: #dfce9c;*/
     /* width:240px;*/
	 width:150px;
      height:30px;
      font-size: 1em;
      color:#96acc7;  
      padding: 0px;
      margin-left:2px;
      margin-bottom :5px;
	  border-radius:7px 7px 7px 7px;
		border:0px  solid black;
      text-decoration: none;}
  
                                  /* elements des autres pages*/
body  a {text-align:center;color:red;display:block;}								  

#titre-page {width:975px;height:78px;background: url('images/fond-titre-page.png');margin-top:5px;margin-bottom:10px;padding:0px;}

#titre-page img {height:50px; width:50 px;}

#titre-page  h1{display:inline;/*color:#336699;*/color:#ff5688;font-style:normal;font-size: 3em;font-weight: normal;} 
   
.monogramme , #titre-page  h1 {vertical-align:middle;}

								  
div#galerie_photos{
  width:960px ;
  margin:0px; padding:0px;
  background: #CCCCFE ;
  border: 3px solid black ;
  border-radius:8px 8px 8px 8px;
  padding-bottom:15px;
  
  text-align: center ;
  font: 0.9em Georgia, serif ;}
 

div#galerie_photos-pascal{
  width:680px ;
  margin:0px; padding:0px;
  background: #ccccfe ;
  border: 3px solid black ;
  border-radius:8px 8px 8px 8px;
  padding-bottom:15px;

  margin-left:140px;
  margin-bottom:20px;  
  text-align: center ;
  font: 0.9em Georgia, serif ;}

ul#menu_miniatures{
  margin: 0 ;
  padding: 0 ;
  margin-top:5px; 
  list-style-type: none ;}

#menu_miniatures li{ float: left ;}

#menu_miniatures a {display:block; padding:4px; outline:none; }

#menu_miniatures a:hover {background:blue;}
#menu_miniatures a:focus {background:red;}

ul#menu_miniatures a img{ border-radius:5px; border: none;}

img {vertical-align:middle; border:none;}

dl#photo{clear: both ;margin: 0 auto ;}


dl#photo dt{font: italic 1.25em/1.5em Georgia, serif ;color: blue ;}

dl#photo dd{margin: 0 ;}

dl#photo img{
border-radius:7px;
border:10px solid #FFF;
  box-shadow: 0 2px 8px 2px #666;}
  
      /*page triangles*/

#diaporama-sierpinski { position:relative; background-color:#dfce9c;}
 
#diaporama-sierpinski div span img + img {display:none;}

#diaporama-sierpinski div span img:hover + img {
    position:absolute;
    display:block;
    z-index:1;
	left:0px;top:0px;
    width:256px;
    height:256px; 
    margin-left:0px;margin-top:51px;}

#diaporama-sierpinski img { float:left;}
   
#diaporama-sierpinski {
    width:256px;      
    margin-left:10px;  
	height:317px;
    margin-top:10px;
	margin-bottom:10px;
	border: 2px solid blue ;
	padding:0px;
	float:right;}

section#sierpinski{margin-bottom:50px;margin-left:0px;margin-right:0px;}

#tripas{float:left;margin-right:15px;}
#tripasmod5{float:right;margin-left:15px;}

#diaporama-sierpinski .haut{margin:0px;padding:0px;width: 256px; height: 51px;}
       
#diaporama-sierpinski .bas,
#diaporama-sierpinski .bas img {width:256px;height:256px;}                  
#sierpinski article p {font-size: 1em; }
section header h2 {text-align:center;}
.infobulle{position: relative;color:red;}
.infobulle .infobulle-hidden {
          display: none;  position: absolute;    visibility: visible;  z-index: 999;          
          color: black;
          padding: 0px;
          border: 1px solid black;}

.infobulle:hover .infobulle-hidden {   display: block; }

.infobulle:hover{cursor: help;}
#pascal article p{font-size: 1em; }		  
#fractal {width:500px;height:600px;text-align:center;
   background-color: #ccccfe ;  padding-left: 10px;  padding-right: 10px; top: 30px; left: 50px;}
#modulaire {width:420px;height:530px;text-align:center;white-space: nowrap;top: 30px;left: 0px;}
section#sierpinski article{width:950px;}
section#pascal article{width:950px;}
      /*page courbes*/
#courbes article p{font-size: 1em; }	  
section#courbes article {width:950px;text-align:center;}
section#tableau article{width:950px;text-align:center;}
 #diaporama-tableau {
    position:relative;
    width:720px; 
	margin-left:auto;margin-right:auto;    
	height:566px;
    margin-top:10px;
	margin-bottom:10px;
	border: 2px solid blue ;
	padding:0px;}
#diaporama-tableau div span img + img {display:none;}
#diaporama-tableau  div span img:hover + img {
    position:absolute;
    display:block;
    z-index:2;
	left:0px;top:0px;
    width:720px;
    height:510px; 
    margin-left:0px;margin-top:56px;}

#diaporama-tableau   img {float:left;}
#diaporama-tableau .haut{margin:0px;padding:0px; width:   720px;height:    56px;}
#diaporama-tableau .bas,#diaporama-tableau .bas img {width:720px; height:510px;}

/*page anamorphoses*/	
#anamorphoses article p {font-size: 1em; }
section#anamorphoses article{width:950px;}

/*page stereogramme*/
#stereogramme article p{font-size: 1em; }
section#stereogramme article{width:950px;}

/*page geocaching*/
#geocaching article p{font-size: 1em; }
section#geocaching article{width:950px;text-align:center;}
#geocaching article p  img{text-align:center;border-radius:5px;}
/*page artephemere*/
section#sculpture article{width:950px;text-align:center;}

#diaporama-sculpture div span img + img {display:none;}

#diaporama-sculpture  div span img:hover + img {
    position:absolute;
    display:block;
    z-index:2;
	left:0px;top:0px;
     width:910px;
     height:610px; 
     margin-left:0px;margin-top:61px;}

#diaporama-sculpture  img {float:left;}

#diaporama-sculpture{
    position:relative;
    width:910px;      
    margin-left:20px;   
	height:671px;
    margin-top:10px;
	margin-bottom:10px;
	border: 4px solid #ff8000 ;
	padding:0px;}

#diaporama-sculpture .haut{margin:0px;padding:0px;width: 910px; height:59px;}

#diaporama-sculpture .bas,#diaporama-sculpture .bas img {width:910px;height:610px;}
/*pages jeux*/
#Damier {border: 4px solid #ff8000 ;width:300px;      
    height:300px;  margin:0 auto; 
}  
/*pages telecharger et aide-infos*/
section#telechargement article {width:950px;text-align:center;}
section#aide-informations article {width:950px;text-align:center;}
.bleu{color:blue;}
#bouton-telecharger {
    padding:15px 0px;
    text-align:center;
    display: inline-block;    
    margin-bottom:25px; margin-top:15px; 	
    border-radius:8px;
    font-size: 1.3em;
    width:250px;
	height:40px;
	color: #3D722E;
    font-family: Arial,sans-serif;
	text-decoration:none;}

#bouton-telecharger, #bouton-telecharger:active {
  background:  #4E9939;
   background: linear-gradient(#91BD09, #4E9939) repeat scroll 0 0 transparent;
  }
   
	

#bouton-telecharger {
box-shadow: 0px 0px 1px rgba( 0, 0, 0, 0.2), 0px -1px 0px rgba( 255, 255, 255, 0.1);
text-shadow: 0 1px 0 rgba(226, 200, 200, 0.4);}

#bouton-telecharger:hover {
      background: #91BD09;
	  background: linear-gradient(#A3C416, #55A53C) repeat scroll 0% 0% transparent;
	
   	  color:#3A6D2C;}
		
#bouton-telecharger:active{box-shadow: 1px 1px 10px rgb(40,84,25) inset,0px 1px 0px rgba( 255, 255, 255, 0.4);color:#3A6D2C;}
 

#bouton-accueil{
    padding:5px 5px;
    text-align:center;
    display: inline-block;    
    margin-bottom:25px; margin-top:15px; 	
    border-radius:7px;
    font-size: 1.1em;
    width:150px;
	height:20px;
	/*color: #3D722E;*/
	color: white;
    font-family: Arial,sans-serif;
	text-decoration:none;}

#bouton-accueil, #bouton-accueil:active {
   background:#C96928; 
   background: linear-gradient(#F79E46, #C96928) repeat scroll 0% 0% transparent;   
  }
  

#bouton-accueil {
box-shadow: 0px 0px 1px rgba( 0, 0, 0, 0.2), 0px -1px 0px rgba( 255, 255, 255, 0.1);
text-shadow: 0 1px 0 rgba(226, 200, 200, 0.4);}

#bouton-accueil:hover {
      background: #91BD09;
	  background: linear-gradient(#A3C416, #55A53C) repeat scroll 0% 0% transparent;
	 
	  color:white;
   	  /*color:894520;*/}
	 
		
#bouton-accueil:active{box-shadow: 1px 1px 10px rgb(211,59,17) inset,0px 1px 0px rgba( 255, 255, 255, 0.4);color:#894520;}