/*
**************  COULEURS   ***********************************************
*/
section:nth-of-type(1),
section:nth-of-type(1) div,
section:nth-of-type(1) div div,
ul li:nth-of-type(1) a,
section:nth-of-type(12),
section:nth-of-type(12) div,
section:nth-of-type(12) div div,
ul li:nth-of-type(12) a  {
	color : #007575 ;
	border-color : #007575 ;
	background-color : #3fc2c3 ;
}
section:nth-of-type(2),
section:nth-of-type(2) div,
section:nth-of-type(2) div div,
ul li:nth-of-type(2) a,
section:nth-of-type(13),
section:nth-of-type(13) div,
section:nth-of-type(13) div div,
ul li:nth-of-type(13) a  {
	color : #0a5cb2 ;
	border-color : #0a5cb2 ;
	background-color : #6baff5 ;
}
section:nth-of-type(3),
section:nth-of-type(3) div,
section:nth-of-type(3) div div,
ul li:nth-of-type(3) a,
section:nth-of-type(14),
section:nth-of-type(14) div,
section:nth-of-type(14) div div,
ul li:nth-of-type(14) a  {
	color : #3a3aaa ;
	border-color : #3a3aaa ;
	background-color : #9c9cf8 ;
}
section:nth-of-type(4),
section:nth-of-type(4) div,
section:nth-of-type(4) div div,
ul li:nth-of-type(4) a,
section:nth-of-type(15),
section:nth-of-type(15) div,
section:nth-of-type(15) div div,
ul li:nth-of-type(15) a  {
	color : #6827ae ;
	border-color : #6827ae ;
	background-color : #be87f6 ;
}
section:nth-of-type(5),
section:nth-of-type(5) div,
section:nth-of-type(5) div div,
ul li:nth-of-type(5) a,
section:nth-of-type(16),
section:nth-of-type(16) div,
section:nth-of-type(16) div div,
ul li:nth-of-type(16) a {
	color : #971295 ;
	border-color : #971295 ;
	background-color : #f468f3 ;
}
section:nth-of-type(6),
section:nth-of-type(6) div,
section:nth-of-type(6) div div,
ul li:nth-of-type(6) a,
section:nth-of-type(17),
section:nth-of-type(17) div,
section:nth-of-type(17) div div,
ul li:nth-of-type(17) a {
	color : #af2020 ;
	border-color : #af2020 ;
	background-color : #f68080 ;
}
section:nth-of-type(7),
section:nth-of-type(7) div,
section:nth-of-type(7) div div,
ul li:nth-of-type(7) a,
section:nth-of-type(18),
section:nth-of-type(18) div,
section:nth-of-type(18) div div,
ul li:nth-of-type(18) a  {
	color : #944900 ;
	border-color : #944900 ;
	background-color : #dc8f41 ;
}
section:nth-of-type(8),
section:nth-of-type(8) div,
section:nth-of-type(8) div div,
ul li:nth-of-type(8) a,
section:nth-of-type(19),
section:nth-of-type(19) div,
section:nth-of-type(19) div div,
ul li:nth-of-type(19) a {
	color : #9d6300 ;
	border-color : #9d6300 ;
	background-color : #c8a24b ;
}
section:nth-of-type(9),
section:nth-of-type(9) div,
section:nth-of-type(9) div div,
ul li:nth-of-type(9) a,
section:nth-of-type(20),
section:nth-of-type(20) div,
section:nth-of-type(20) div div,
ul li:nth-of-type(20) a  {
	color : #917d00 ;
	border-color : #917d00 ;
	background-color : #bebf56 ;
}
section:nth-of-type(10),
section:nth-of-type(10) div,
section:nth-of-type(10) div div,
ul li:nth-of-type(10) a,
section:nth-of-type(21),
section:nth-of-type(21) div,
section:nth-of-type(21) div div,
ul li:nth-of-type(21) a  {
	color : #376f00 ;
	border-color : #376f00 ;
	background-color : #7dbc3f ;
}
section:nth-of-type(11),
section:nth-of-type(11) div,
section:nth-of-type(11) div div,
ul li:nth-of-type(11) a,
section:nth-of-type(22),
section:nth-of-type(22) div,
section:nth-of-type(22) div div,
ul li:nth-of-type(22) a  {
	color : #1c7e00 ;
	border-color : #1c7e00 ;
	background-color : #5fcd40 ;
}




/*
**************  STYLE GLOBAUX   ***********************************************
*/


* {
	padding : 0px ;
	margin : 0px ;
}

body {
	padding : 0  50px 50px;
	
	background-image : url("images/fond.png") ;
	
	font-family : 'Abel', sans-serif ;
	font-size : 20px ;
	line-height : 1.5em ;
}

/* sélection de texte */
::-moz-selection  {
	background-color: black;
	color : white;
}
::-webkit-selection  {
	background-color: black;
	color : white;
}
::selection {
	background-color: black;
	color : white;
}

section {
	border : 3px solid black ;
	padding : 20px ;
	margin : 0 10px 20px ;
	
	background-color : white ;
	border-radius : 5px ;
}

body > section:first-child {
	margin-top : 50px;
}

p {
	padding : 0 20px 20px 0 ;
	max-width : 800px ;
	margin : 10px ;
	
    flex : 2 1 25%;
    box-sizing : border-box ; 
}

/* COLONNES */
body > div > div.cols_2 {
	margin : 0 ;
	padding : 0 ;
	
	background-color : transparent ;
}

footer {
	width : calc(100% + 50px*2);
	box-sizing : border-box ;
	margin : 50px -50px -50px;
	
	padding : 15px;
	background-color : rgb(25,25,25);
	
	font-size : 15px;
	line-height : 20px;
	color : rgb(100,100,100);
	text-align : center;
}
footer a {
	color : rgb(125,125,125);
	transition : all 0.3s ;
}
footer a:hover {
	color : rgb(200,200,200);
}

/*
**************  MENU DE NAVIGATION   ***********************************************
*/

nav {
	padding : 0 30px 0 0 ;
	margin : 0 30px 30px 0 ;
}

ul {
	margin : 0 30px 0 30px ;
	position: relative;
	
	list-style-type : none ;
	float: left;
}

ul p {
	padding: 0;
	color: black;
	
	font-weight: bold;
	text-align : center;
}

ul p:first-child + li a {
	border-top-left-radius : 5px ;
	border-top-right-radius : 5px ;
}

ul li:last-child a {
	border-bottom-left-radius : 5px ;
	border-bottom-right-radius : 5px ;
}

ul li a {
	display : block ;
	box-sizing: border-box;
	position: relative;
	
	width : 250px;
	height: 100% ;
	padding : 5px 15px ;
	
	border-top : 1px solid ;
	border-left : 1px solid ;
	
	transition : all 0.3s ;
	text-decoration : none ;
	box-shadow : 1px 1px 0 black,
				2px 2px 0 black,
				3px 3px 0 black,
				4px 4px 0 black,
				5px 5px 0 black,
				6px 6px 0 black,
				7px 7px 0 black;
}
body nav ul li a:hover {
	color : white ;
	
	background-color : black ;
	border-color: black;
	box-shadow : 1px 1px 0 grey,
				2px 2px 0 grey,
				3px 3px 0 grey,
				4px 4px 0 grey,
				5px 5px 0 grey,
				6px 6px 0 grey,
				7px 7px 0 grey;
}

ul li a img {
	margin-right: 20px;
}



/*
**************  TITRES   ***********************************************
*/


h1 {
	margin : 0 20px 20px 20px;
	
	font-size : 120px ;
	line-height : 1em ;
	font-weight : bold ;
	letter-spacing : -2px ;
	
	color : #595959 ;
}

h2 {
	margin-bottom : 40px ;
	position: relative;
	box-sizing : border-box;
	
	background-color : black ;
	border-radius : 5px ;
	transition : all 0.3s;
	
	font-size : 100px ;
	line-height : 0.85em ;
	font-weight : bold ;
	text-align : center ;
	
	color : white ;
}
h2 a {
	display : block;
	position: relative;
	
	height: 100%;
	width: 100%;
	padding : 20px ;
	box-sizing : border-box;
	
	color : white ;
	text-decoration : none;
	
	transition : all 0.3s;
}
h2 a:before {
	position: absolute;
	top: 0;
	left: 0;
	
	display : block;
	height: 100%;
	width: 100%;
	
	padding : 20px ;
	box-sizing : border-box;
	content: "retour en haut";
	
	opacity : 0 ;
	transition : all 0.3s ;
	
	font-size : 50px ;
	text-align : center ;
	color : white ;
}

#animation h2 a:before,
#bg h2 a:before,
#flex h2 a:before,
#transform h2 a:before {
	content: "retour";
}

h2 a:hover {
	color: rgb(50,50,50);
	cursor : pointer ;
}
h2 a:hover:before {
	opacity : 1;
}

@media screen and (max-width: 800px) {
	h2 {
		font-size : 70px ;
	}
	h2 a:before {
		font-size: 35px;
	}
}

@media screen and (max-width: 650px) {
	h1 {
		font-size : 60px;
	}
	
	h2 {
		font-size : 50px ;
	}
	h2 a:before {
		font-size: 30px;
	}
}

@media screen and (max-width: 500px) {
	h2 {
		font-size : 40px ;
	}
	h2 a:before {
		font-size : 25px;
	}
}

/*
**************  EXEMPLES DE CODE   ***********************************************
*/

/* le bloc contenant les exemples */
section div.ex {
    display : flex ;
    align-items : stretch ; 
    flex-wrap : wrap ;
    
    border : 1px dashed ;
    margin : 0 0 20px 0 ;
	padding : 20px ;
    
    background-color : white ;
}
section#flex div.ex {
    display : block ;
    
    border : 1px dashed ;
    margin : 0 0 20px 0 ;
	padding : 20px ;
	
    background-color : white ;
}
section div.ex:last-child {
	margin-bottom : 0 ;
}

/* les exemples dans le bloc ex */
section div.ex div,
section div:not(.ex) {
	margin : 10px ;
	padding : 20px ;
	
	box-sizing: border-box;
	flex : 1 1;
	align-items : stretch ;
	
	border-radius : 5px ;
}
section#flex div.ex div,
section#flex div:not(.ex) {
	margin : 10px ;
	padding : 20px ;
	flex : 0 ;
	
	border-radius : 5px ;
}

code  {
	padding : 2px 0.3em ;
	
	font-family : 'Abel', sans-serif ;
	background-color : rgba(255,255,255,0.8) ;
}

span.propertyCSS {
	/*padding-right : 20px ;
	display : inline-block ;*/
	
	font-size : 70px ;
	line-height : 0.87em ;
	letter-spacing : -2px ;
	font-weight : bold ;
}

@media screen and (max-width: 500px) {
	span.propertyCSS {
		font-size : 50px ;	
	}
}

span.props {
	/*padding-bottom : 20px ;
	display : inline-block ;*/
	
	font-size : 20px ;
	line-height : 1.5em ;
	font-weight : bold ;
	letter-spacing : 2px ;
	
	color : black ;
	word-wrap : break-word ;
}





/* 2 colonnes pour les sections */
#fontface,
#fontfamily,
#textindent,
#lineheight,
#fontweight,
#letterspacing ,
#fontstyle ,
#texttransform,
#wordwrap,
#textshadow { 
	flex : 1 1 50%;
}

body > div > div.cols_2 {
	display : flex;
	align-items : stretch ;
}

/* 5-6 section par rang pour les exemples */
section div.ex div,
section div:not(.ex) {
	flex : 1 1 15%;
}
p {
	flex : 1 1 15%;
}

@media screen and (max-width: 1800px) {
	/* 5 section par rang pour les exemples */
	section div.ex div,
	section div:not(.ex) {
		flex : 1 1 20%;
	}
	p {
    	flex : 1 1 20%;
	}
}

@media screen and (max-width: 1500px) {
	/* 4 sections par rang pour les exemples */
	section div.ex div,
	section div:not(.ex) {
		flex : 1 1 25%;
	}
	p {
    	flex : 1 1 25%;
	}
}

@media screen and (max-width: 1250px) {	
	/* stopper les colonnes */
	#fontface,
	#fontfamily,
	#textindent,
	#lineheight,
	#fontweight,
	#letterspacing ,
	#fontstyle ,
	#texttransform,
	#wordwrap,
	#textshadow { 
		flex : 1 1 100%;
	}
	body > div > div.cols_2 {
		display : block;
	}
	
	/* 3 sections par rang pour les exemples */
	section div.ex div,
	section div:not(.ex) {
		flex : 1 1 33%;
	}
	p {
    	flex : 1 1 33%;
	}
}

@media screen and (max-width: 800px) {	
	/* 2 sections par rang pour les exemples */
	section div.ex div,
	section div:not(.ex) {
		flex : 1 1 50%;
	}
	p {
    	flex : 1 1 50%;
	}
	
	body {
		padding: 0 20px 20px;
	}
	
	footer {
		width : calc(100% + 20px*2);
		margin : 0 -20px -20px;
	}
}

@media screen and (max-width: 500px) {	
	
	/* 1 section par rang pour div exemples */
	section div.ex div,
	section div:not(.ex) {
		flex : 1 1 100%;
	}
	p {
    	flex : 1 1 100%;
	}
	
	body {
		padding: 0 0 20px;
	}
	
	section {
		margin-left : 0 ;
		margin-right : 0 ;
		
		border-radius : 0 ;
		border-left : 0 ;
		border-right : 0 ;
		
		overflow-x : hidden ;
	}
	
	section div.ex,
	section#flex div.ex  {
		margin-left : -20px ;
		margin-right : -20px ;
		
		border-left : 0 ;
		border-right : 0 ;
	}
	
	
	div#type,
	div#autres,
	div#design_blocs,
	div#blocs {
		margin : 0 ;
		padding : 0 ;
	}
	
	section#whitespace div.ex div {
		white-space : normal !important;
	}
	
	footer {
		width : 100% ;
		margin : 0 0 -20px;
	}
}


/*
**************  FIN   ***********************************************
*/