@charset "utf-8"; /* Exercice 1.3 */
@import url(fonts.css);  /* Exercice 1.3 */


/* Exercice 1.1 */
html,
body{
	width: 100%;
	height: 100%;
	margin: 0px;
	background-color: #000;
	/*
	background-image: url("../image/zen_a.jpg");
	background-size: 90px 600px;
	background-repeat: no-repeat;
	background-position: 10px 185px;
	*/

}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div#wrapper,
div#wrapper > div > header > div{
	width: 100%;
	height: 100%;
	display: table;
	
	/* border supprimer Exercice 1.4 
	border: 1px solid blue;
	border-spacing:5px;
	border-collapse:separate;
	*/
}



div#wrapper > *,
div#wrapper > div > header > div > * { 
    display: table-row;
}

div#wrapper > * > *,
div#wrapper > div > header > div  > * > * { 
    display: table-cell;
	
	/* border supprimer Exercice 1.4
	border: 1px solid black;
	*/
}
	
	/* ex2 chage percurse*/
div#wrapper >div>header,
div#wrapper >div>footer { 
	height: 100px;
	
}
div#wrapper div>footer>p { 
   
margin-left:11%;


}
.container {
    position: relative;
}

.bottomright {
    position: fixed;
    bottom: 8px;
    left: 200px;
    font-size: 18px;
}

/*
img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
*/
/* Exercice 1.2 */

/* Exercice 2
###################################################

nav non plus generic chage:

ex: # nav {} # 

a: # div#wrapper > div > header>div>div>nav #
 
###################################################
*/


div#wrapper > div > header>div>div>nav {
vertical-align: middle;
}

div#wrapper > div > header>div>div>nav li {
	vertical-align: middle;
	text-align: center;
}

div#wrapper > div > header>div>div>nav>div{
	width: 100%;
	height: 50px;
   	display: table;
}	


div#wrapper > div > header>div>div>nav>div>*
{ 
    display: table-row;
}


div#wrapper > div > header>div>div>nav>div>*>*
{ 
    display: table-cell;
	
	/* border supprimer Exercice 1.4 
	border: 1px solid black;
	*/
}

div#wrapper > div > header{
	padding: 0px 20px;
	
}

div#wrapper > div > header p {
	/*  vertical-align: middle; */



	
}


div#wrapper > div > header img  {
	vertical-align: middle;
	margin-right: 20px; /* = padding: 0px 20px 0px 0px; */
	height: 90px;
}

div#wrapper > div > header h1{
	display: inline-block;
}


/* Exercice 1.3 */

/* @import url(fonts.css);  voir ci-dessus import url CCS ajoutée   */ 

/* @charset "utf-8";   voir ci-dessus import  CCS  charset ajoutée   */ 

header,footer {
	vertical-align: middle;

}

div#wrapper > div > footer
{


	
	background-color: #000;
	padding: 0px 20px;
	background-image: url("../image/bottom.jpg");
	background-size: 80% 100%;
	background-repeat: no-repeat;
	background-position: center; 
	
}


/* Exercice 1.4 */



main>div {
	
    display: block;
    margin: auto;
    width: 76%;
}
}
/* 
New menu nav 
*/

main div nav {
vertical-align: middle;
}

main nav li {
	vertical-align: middle;
	text-align: center;
}

main  nav>div{
	width: 100%;
	height: 50px;
   	display: table;
}	


main nav>div>*
{ 
    display: table-row;
}


main nav>div>*>*
{ 
    display: table-cell;
	
	/* border supprimer Exercice 1.4 
	border: 1px solid black;
	*/
}

main nav  li{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feccb1+0,f17432+50,ea5507+51,fb955e+100;Red+Gloss+%232 */
background: #feccb1; /* Old browsers */
background: -moz-linear-gradient(top, #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */
background-image: url("../image/bt_tex.jpg");
}

main nav a{
	
	 
	 display:block; /* Exercice 2 # Modification pour selectioner tuts les button # */
	 padding: 0px 0px; /* Exercice 2 # Modification pour selectioner tuts les button # */

}

main nav  li:first-child{
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	/*-webkit-border-radius: 20px 0px 0px 20px;*/
	
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	/*-moz-border-radius: 20px 0px 0px 20px;*/
	
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	
	/*border-radius: 20px 0px 0px 20px; */
}




main nav  li:last-child{
		-webkit-border-top-right-radius: 10px;
		-webkit-border-bottom-right-radius: 10px;
		/* -webkit-border-radius: 0px 20px 20px 0px; */
		
		-moz-border-radius-topright: 10px;
		-moz-border-radius-bottomright: 10px;
		/* -moz-border-border-radius: 0px 20px 20px 0px; */
		
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		/* border-radius: 0px 20px 20px 0px; */
	 

}

main nav li:hover {


/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff7400+0,ff7400+100;Orange+Flat */
background: #ff7400; /* Old browsers */
background: -moz-linear-gradient(top, #ff7400 0%, #ff7400 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff7400 0%,#ff7400 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff7400 0%,#ff7400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7400', endColorstr='#ff7400',GradientType=0 ); /* IE6-9 */
    	background-image: url("../image/bt_tex_hw.jpg");
}
main nav>div .showMenu {
  padding: 10px 0;
  color: black;
  background: #F90;
  background-image: url("../image/bt_tex.jpg");
  text-align: center;
  display: none;
}

/* nascondiamo il checkbox */

main nav>div input[type=checkbox]{
  display: none;
}

/* mostriamo il menu quando il checkbox viene selezionato */

main nav>div input[type=checkbox]:checked ~ #menu{

  display: block;
}



/* Exercice 2
###################################################

nav non plus generic chage:

ex: # nav {} # 

a: # div#wrapper > div > header>div>div>nav #
 
###################################################
*/
div#wrapper > div > header>div>div>nav  li:first-child{
	-webkit-border-top-left-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	/*-webkit-border-radius: 20px 0px 0px 20px;*/
	
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-bottomleft: 20px;
	/*-moz-border-radius: 20px 0px 0px 20px;*/
	
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	/*border-radius: 20px 0px 0px 20px; */
}




div#wrapper > div > header>div>div>nav  li:last-child{
		-webkit-border-top-right-radius: 20px;
		-webkit-border-bottom-right-radius: 20px;
		/* -webkit-border-radius: 0px 20px 20px 0px; */
		
		-moz-border-radius-topright: 20px;
		-moz-border-radius-bottomright: 20px;
		/* -moz-border-border-radius: 0px 20px 20px 0px; */
		
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
		/* border-radius: 0px 20px 20px 0px; */
	 

}


div#wrapper > div > header>div>div>nav  li {


		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f9f9+0,a3a3a3+100 */

		background: #f9f9f9; /* Old browsers */
		background: -moz-linear-gradient(top, #f9f9f9 0%, #a3a3a3 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #f9f9f9 0%,#a3a3a3 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #f9f9f9 0%,#a3a3a3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#a3a3a3',GradientType=0 ); /* IE6-9 */


    
}


div#wrapper >div >header>div>div>nav li:hover {


		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f9f9+0,a3a3a3+100 */

		background: #a3a3a3; /* Old browsers */
		background: -moz-linear-gradient(top, #a3a3a3 0%, #f9f9f9 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #a3a3a3 0%,#f9f9f9 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #a3a3a3 0%,#f9f9f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3a3a3', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */

    
}


div#wrapper >div>header>div>div>nav a{
	
	 
	 display:block; /* Exercice 2 # Modification pour selectioner tuts les button # */
	 padding: 15px 10px; /* Exercice 2 # Modification pour selectioner tuts les button # */
	
}


div#wrapper > div > header{

	 background-color: #000;
	 	background-image: url("../image/head.jpg");
	background-size: 80% 100%;
	background-repeat: no-repeat;
	background-position: center; 
}

div#wrapper >div>header>div>div>nav>div .showMenu {
  padding: 10px 0;
  color: white;
  background: #0066FF;
  text-align: center;
  display: none;
}

/* nascondiamo il checkbox */

div#wrapper >div>header>div>div>nav>div input[type=checkbox]{
  display: none;
}

/* mostriamo il menu quando il checkbox viene selezionato */

div#wrapper >div>header>div>div>nav>div input[type=checkbox]:checked ~ #menu{

  display: block;
}


/* main {
	background-image: url('../image/bg_main.png');
	background-size: 500px;
	background-repeat: no-repeat;
	background-position: 300px 0px;

	
	}

	*/    
	/* background-color: red; /*
    /* background-attachment: fixed; */
    /* background-position: center; */


div#bgimg > img{
	position: fixed;
	top: 150px;
	right: 100px;
	width: 500px;
	opacity: 0.3;
	z-index: -1;
	
	}
	
	/* div rapport  background
	background-image: url('../image/bg_main.png');
	background-size: 500px;
	background-repeat: no-repeat;
	background-position: 100px 0px;
	
	*/
     /* background-color: red; /*
    /* background-attachment: fixed; */
    /* background-position: center; */


	/* Exercice 2.0 */
main.col1  {
		background: url("../image/center.jpg")  repeat-y center;
background-size: 80% 100%;
}

main.col1>div>div>section {
		padding: 1px 1%;
		margin: 15px;
		
}



main.col1.aside>div>div>section {
		padding: 20px 5%;
}



main.aside>div {
	display: table;
}

main.aside>div>* {
    display: table-row;
}

main.aside>div>*>* {

    display: table-cell;
}


/*
main>div {
	display: table;
}

main>div>* {
    display: table-row;
}

main>div>*>* {
	
    display: table-cell;
}
*/

main.col2>div>div>section {
	
    text-align:center;

	
    /* border: 1px solid #73AD21; /*
    
		/* width:45%; */
		/* padding: 20px; */
	/* display: inline-block;	*/
		


	
	
/* 	-webkit-column-count:4;  */ /* Opera, Safari, Google Chrome */

/*     -moz-column-count: 4;  */ /* Firefox */

/*     column-count: 4;  */ /* Internet Explorer */
	
}



main.col2>div>div>section>article {
	/* border: 1px solid black; */
	vertical-align: top;
	padding:20px;
	width:45%;
	display: inline-block;
	
}

main aside{
		vertical-align: top;
		/* border: 1px solid black; */

		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
	
		display: none;

}		

/*
main nav{
	
	border: 1px solid black;
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	
	margin: 20px;
	padding: 10px;
	
   	display: table;

}
*/

/* ul li { padding: 0; margin: 0; } */
/* ul a { padding: 5px; display: block; } */

/*
main nav a{
vertical-align: middle;
}

main nav li a {
	vertical-align: middle;
	text-align: center;
}
*/


/*
main nav>ul {

	list-style-type: none;
	display: table-row;
	
}


main nav>li {
		
		display: table-cell;
		
}


main nav li a {

		white-space: nowrap; /* text problème avec espace */

		/* http://border-radius.com/ */
		/* border: 1px solid black; */
		
		
		/*
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		
		padding-left: 50px;
		padding-right: 50px;
		
		padding-top: 10px;
		padding-bottom: 10px;
		
		text-align: center;
		
	    border: 1px solid transparent;
		display:block;
}


main nav li a:hover {

border-color: black;	
	
}
*/
main form fieldset
{
	border: none;
}

main form ul
{
	display: table;
	width: 100%;
/*	border: 1px solid #a3a3a3; */
	padding:0px;
	box-sizing: border-box;
	text-align: left;
}


main form li
{
	display: table-row;
}

main form li>*
{
	white-space: nowrap; /* text problème avec espace */
	display: table-cell;
	margin-top: 5px;

}


input[type=text]
{
	width: 100%;
	padding: 5px 10px ;
	border: 1px solid #a3a3a3;
	box-sizing: border-box;
}

main form li textarea
{
	width: 100%;
	padding: 5px 10px ;
	border: 1px solid #a3a3a3;
	box-sizing: border-box;

}

input[type=submit]
{
	width: 100%;
	padding: 5px 10px ;
	box-sizing: border-box;
}


section.center
{
	display: inline-block;
	margin-top: 20px;
	

}


/* border:1px solid transparent; */
/* text-decoration: none */


/* main nav a:hover, main nav a:focus, main nav a:active { background-color:#99cc66; } */





/* main nav a block
main nav>ul>li>a {
	
	display: block;
}
*/





	/* http://border-radius.com/ */

/* Exemple :
main header{
	height: inherit;
}
*/