/* Page Home*/


body
{
	background-image: url("images/fond.jpg");
	font-family: arial, verdana, sans-serif;
	font-size: big;
	width: 100%;
	margin:auto;
	
}

#logo
{
	margin: auto;
	width: 300px;
	padding-bottom: 5px;
}
section
{
background-color: white;
width: 960px;
margin: 30px auto;
height: auto;
padding: 30px;

}
footer
{ 
	text-align: center;
	font-size: small;
	color: black;
	padding-bottom: 10px;
}
/* Je sélectionne les <li> du menu horizontal */
ul#menu_horizontal li { 
	display : inline-block;
	 /* Pour espacer les boutons entre eux */
	padding-right: 25px;
	padding-left: 0px;
}
ul#menu_horizontal {
	list-style-type : none; /* Car sinon les puces se placent n'importe où */ 
	text-align: center;
}

nav a /* Liens par défaut (non survolés) */
{
   text-decoration: none;
   color: black;
}
nav a:hover /* Apparence au survol des liens */
{
	text-decoration: line-through;
	color: black;
 }
nav a:focus /* Quand le visiteur sélectionne le lien */
{ 
	text-decoration: line-through;
	color: black;}

	#tout
	{padding-bottom: 30px;
	}
	
	
									/* Slider HOME*/
									
#slideshowhome {
	position: relative;    /*le parent positionné*/
	width: 960px;          /*limite en largeur (1 élément du slideshow)*/
	height: 480px;         /*limite en hauteur*/
    overflow: hidden;     /*on cache ce qui déborde*/
	margin: auto;
	display: inline-block;
}
#shomeContent {
	position: absolute;   /*on sort l'élément du flux*/
	top: 0;               /*on le positionne précisément dans ...*/
	left: 0;              /*l'angle haut gauche de son parent positionné*/
	width: 3840px;		  /*ou 300% car 3 éléments*/
	margin: 0;            
	padding: 0;
	/*CSS3 transition*/
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#shomeContent li {
	display: inline;      /*on aligne les éléments du slideshow*/
}
.nexthome
{
background: url('images/nexthome.png');
}
.prevhome
{background: url('images/prevhome.png');
}
#slideshowhome .nexthome, #slideshowhome .prevhome {
	position: absolute;
	top: 200px;
	width:42px;
	height: 40px;
	z-index: 20;
	margin:8px;
}



#slideshowhome .prevhome { left: 0; }
#slideshowhome .nexthome { right: 0; }
/* initialisation */
#slideshowhome .nexthome, #slideshowhome .prevhome { display: none; }
#slideshowhome .nexthome1 { display: block; }

/* Vers 1ère étape */
#shome1:target #shomeContent { left: 0px; }
#shome1:target .nexthome, #shome1:target .prevhome { display: none; }
#shome1:target .nexthome1 { display: block; }

/* Vers 2ème étape */
#shome2:target #shomeContent { left: -960px; } /*ou -100%*/
#shome2:target .nexthome, #shome2:target .prevhome{ display: none; }
#shome2:target .nexthome2, #shome2:target .prevhome2 { display: block; }

/* Vers 3ème étape */
#shome3:target #shomeContent { left: -1920px; } /*ou -200%*/
#shome3:target .nexthome, #shome3:target .prevhome { display: none; }
#shome3:target .nexthome3, #shome3:target .prevhome3 { display: block; }

/* Vers 4ème étape */
#shome4:target #shomeContent { left: -2880px; } /*ou -300%*/
#shome4:target .nexthome, #shome4:target .prevhome{ display: none; }
#shome4:target .prevhome4 { display: block; }
     
	  
	  
	  
							/* PAGE TEXTILE */

					/* slide textile  */
						

#textile
{
   padding-top: 20px;
   padding-left: 30px;   
   display:inline-block;
vertical-align:top;
}
#slidetextile {
	position: relative;    /*le parent positionné*/
	width: 600px;          /*limite en largeur (1 élément du slideshow)*/
	height: 2000px;         /*limite en hauteur*/
    overflow: hidden;     /*on cache ce qui déborde*/
	margin: 20px;
	display: inline-block;
}
#textileContent {
	position: absolute;   /*on sort l'élément du flux*/
	top: 0;               /*on le positionne précisément dans ...*/
	left: 0;              /*l'angle haut gauche de son parent positionné*/
	width: 150px;		  /*ou 300% car 3 éléments*/
	margin: 0;            
	padding: 0;
	/*CSS3 transition*/
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#textileContent li {
	display: inline;      /*on aligne les éléments du slideshow*/
}

.color
{

font-weight: bold;
}
.bulletpoint
{
float: left;
width: 20px;
margin-top: 2px;
}
.mail
{
color: black;
}



                           /* PAGE GRAPHICS */
						   


#graphics
{
   padding-top: 20px;
   padding-left: 30px;   
   display:inline-block;
vertical-align:top;
}
#slidegraphics {
	position: relative;    /*le parent positionné*/
	width: 600px;          /*limite en largeur (1 élément du slideshow)*/
	height: 3200px;         /*limite en hauteur*/
    overflow: hidden;     /*on cache ce qui déborde*/
	margin: 20px;
	display: inline-block;
}
#graphicsContent {
	position: absolute;   /*on sort l'élément du flux*/
	top: 0;               /*on le positionne précisément dans ...*/
	left: 0;              /*l'angle haut gauche de son parent positionné*/
	width: 1350px;		  /*ou 300% car 3 éléments*/
	margin: 0;            
	padding: 0;
	/*CSS3 transition*/
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#graphicsContent li {
	display: inline;      /*on aligne les éléments du slideshow*/
}

.color
{

font-weight: bold;
}
.bulletpoint
{
float: left;
width: 20px;
margin-top: 2px;
}
.mail
{
color: black;
}



			/*PAGE ABOUT*/
#about
{
   padding-top: 20px;
   padding-left: 30px;   
   display:inline-block;
vertical-align:top;
}
#slideshowabout {
	position: relative;    /*le parent positionné*/
	width: 450px;          /*limite en largeur (1 élément du slideshow)*/
	height: 380px;         /*limite en hauteur*/
    overflow: hidden;     /*on cache ce qui déborde*/
	margin: 20px;
	display: inline-block;
}
#saboutContent {
	position: absolute;   /*on sort l'élément du flux*/
	top: 0;               /*on le positionne précisément dans ...*/
	left: 0;              /*l'angle haut gauche de son parent positionné*/
	width: 1350px;		  /*ou 300% car 3 éléments*/
	margin: 0;            
	padding: 0;
	/*CSS3 transition*/
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#saboutContent li {
	display: inline;      /*on aligne les éléments du slideshow*/
}

.color
{

font-weight: bold;
}
.bulletpoint
{
float: left;
width: 20px;
margin-top: 2px;
}
.mail
{
color: black;
}