body{
	font-family:arial;
	text-decoration:none;
	margin:0 auto;
	width:100%;
	}

#bandeau{
	text-align:center;
	width:100%;
		margin:0 auto;
	}
	
#page{
	font-family:Arial;
	font-size:16px;
	width:80%;
	margin:30px 9% 0 9%;
	left:2%;
	display:block;
	}
	
h1{font-size:30px}
h2{font-size:27px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}


.exemple{
	width:100%;
	}
/*****SEPARATION DE LA PAGE***********/
.col1{
	display:inline-block;
	width:35%;
	}
	
.col1 img{width:100%}

.col2{
	display:inline-block;
	width:62%;
	padding-top:0px;
	margin-left:2%;
	vertical-align:top;
	}
		
b{color:#7070C3}

/******* LES BOUTON POUR AFFICHER/MASUER LE CODE BLOCK********/	
	
.btns{
	height:30px;
	right:100px;
	float:right;
	margin-right:10%;
	padding-top:5px;
	display:block;
	}
	
.btns p{
	margin:5px
	}	
.btnB, .btnC{
	bottom:0;
	margin:0;
	text-align:center;
	position:absolute;
	display:block;
	width:150px;
	height:30px;
	background-color:#88A;
	border-radius:15px 15px 0 0;
	color:#101060;
	color:white;
	cursor:pointer;
	opacity:1;
	overflow:hidden;
	}

.btnB{
	margin-top:0;
	height:0px;
	}

.circuit{
	display:inline-block;
	width:20%;
	}
	
.progCode{
	display:inline-block;
	width:79%;
	background-color:lightcyan;
	color:black;
}

pre{
	padding-top:10px;
	border:1px solid gray;
	font-size:16px;
	}

pre
Cbleu{color:blue;}
Crouge{color:brown;}
Corange{color:darkorange;}
Cvert{color:green;}
Cgris{color:#AAA;}
Cbrun{color:peru;}
Cteal{color:MediumTurquoise;}
Ckaki{color:oliveDrab;}