@media only screen and (min-width: 768px) {
   body {
    width: 800px;
	text-align:center;
  }
}

body {
	margin: auto;
	background-color:#ffffee;
	font-family: "Helvetica","comic sans ms",'Lato', sans-serif;
}

p.a {font-family: "Helvetica","comic sans ms","Times New Roman", Times, serif;
     font-size: 20px;}
	 
pre {
   font-family: "Helvetica","Times New Roman","comic sans ms";
   font-size:1em;
}	 

#conteneur {	
margin:auto;
} 

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}

#stickyPart
{
background-color:#ffffee;
width:95%;
top : 0px;
position: sticky;
text-align:center;
margin:auto;
}

#Part2 {
width:95%;
top : 0px;
text-align:center;
margin:auto;
} 
                                  /* ////////////////////////// ligne0 ///////////////////////////*/
								  
div#ligne0 a:link { color: #288;; }
div#ligne0 a:visited { color: #ff5555; }
div#ligne0 a:hover { color: hotpink; }
div#ligne0 a:active { color: blue; }

img.c {
  vertical-align: sub;
color:#900;  
}

#ligne0
{
font-family: "Helvetica";
color:#000;
text-align:center;
margin-top : 0px;
font-weight: bold;
font-size:1em;
font-style: normal;}								  
								  
#home{
	background-image: url(../img/home.jpg);
}

#suiv{
	background-image: url(../img/suiv.jpg);
}

.suiv{
border: none;	
font-size: 18px;
width: 50px;
height: 50px; 
background-image: url(../img/suiv.jpg);
}

#prec{
	background-image: url(../img/prec.jpg);
}

.prec{
border: none;	
font-size: 18px;
width: 50px;
height: 50px; 
background-image: url(../img/prec.jpg);
}

.root{
border: none;	
font-size: 18px;
width: 50px;
height: 50px; 
background-image: url(../img/root2.png);
}

#jc{
	background-image: url(../img/jc.jpg);
}


.jc{
border: none;	
font-size: 18px;
width: 50px;
height: 50px; 
background-image: url(../img/jc.jpg);
}	

#pays{
	background-image: url(../img/pays.jpg);
}


.pays{
border: none;	
font-size: 18px;
width: 50px;
height: 50px; 
background-image: url(../img/pays.jpg);
}	

#trav{
	background-image: url(../img/trav.jpg);
}

.trav{
border: none;	
font-size: 18px;
width: 50px;
height: 50px; 
background-image: url(../img/trav.jpg);
}	

#pers{
	background-image: url(../img/perso.jpg);
}

.pers{
border: none;	
font-size: 18px;
width: 50px;
height: 50px; 
background-image: url(../img/perso.jpg);
}	

.haut{
border: none;	
font-size: 18px;
width: 50px;
height: 50px; 
background-image: url(../img/bas.jpg);
}

.bas{
border: none;
vertical-align: text-bottom;
font-size: 18px;
width: 50px;
height: 50px; 
background-image: url(../img/bas.jpg);
}

.grind{ /*- class "grind" -*/
border: none;	
font-size: 18px;
width: 50px;
height: 50px; 
background-image: url(../img/grind.jpg);
}

.lire{	
font-family: "Helvetica";	
font-size: 20px;
text-align:center;	
}	

.format {
width:50px;
margin-top:0px;	
margin-left:0px;	
margin-right:0px;	
border-radius:0px;	
display: inline-block;}

 /* ////////////////////////// ligne1   SeaGreen #2E8B57///////////////////////////*/

div#ligne1 a:link {color: white;}
div#ligne1 a:visited {color: white;}
div#ligne1 a:hover {color: hotpink;}
div#ligne1 a:active {color: blue;}

#ligne1
{background-color:#288;
float:left;
width:100%;
line-height:48px;
font-weight: normal;
font-size: 1em;
text-align:center;}



/* ////////////////////////// ligne2 ///////////////////////////*/

div#ligne2 a:link { color: green;}
div#ligne2 a:visited { color: green;}
div#ligne2 a:hover { color: red;}
div#ligne2 a:active { color:yellow;}

div#ligne2 a:link {font-size:1em;}

#ligne2
{
background-color:#ffffee;	
font-family: "Helvetica";
color:#000;
text-align:center;
margin-top : 100px;
font-weight: bold;
font-size:1em;
font-style: normal;
display : flex;
justify-content : center;
align-items : center;
padding : 5px;
}

                                  /* ////////////////////////// ligne3 ///////////////////////////*/

div#ligne3 a:link { color: green; }
div#ligne3 a:visited { color: green; }
/*////div#ligne3 a:hover { color: hotpink; } ///*/
div#ligne3 a:active { color: blue; } 


#ligne3{
background-color:#ffffee;
float:left;
width:100%;
line-height:25px;
font-weight: normal;
font-size: 1em;
text-align:center;
display : flex;
justify-content : center;
align-items : center;
padding : 5px;
}

                                  /* ////////////////////////// ligne4 ///////////////////////////*/
div#ligne4 a:link { color: green; }
div#ligne4 a:visited { color: green; }								  
								  

#ligne4{
background-color:#ffffee;
color:#000;
margin : auto;
vertical-align: text-top;
text-align:center;
padding:10px;	
font-size:1.3em;}

img.a {
  vertical-align: text-top;  
}

.butmenu { 
	background:#288;
	font-family: "Helvetica"; 
	color: #ffff;
	font-size: 15px; 
	padding: 5px 13px; 
	text-decoration: none; 
} 

.button { 
	background:#288;
	font-family: "Helvetica"; 
	border-radius: 7px; 
	color: #ffff; 
	font-size: 17px; 
	padding: 7px 15px; 
	vertical-align : sup;
	text-decoration: none; 
} 


.abutton { 
	font-family: "Helvetica"; 
	border-radius: 7px; 
	color: #ffff; 
	font-size: 17px; 
	padding: 7px 15px;
	vertical-align : sup;
	text-decoration: underline; 
} 

.buttonbig { 
	background:#288;
	font-family: "Helvetica"; 
	border-radius: 14px; 
	color: #ffff; 
	font-size: 25px; 
	padding: 14px 20px; 
	text-decoration: none; 
} 

                                  /* ////////////////////////// primary ///////////////////////////*/

div#primary a:link { color: green;}
div#primary a:visited { color: green;}
div#primary a:hover { color: red;}
div#primary a:active { color:yellow;}

#primary.a {font-family: "Helvetica";}
 
#primary {background-color:#ffffee;
padding : 10px 7px 10px 7px;
vertical-align: text-top;
text-align:center;
font-size:1.2em;}

                                  /* ////////////////////////// secondary ///////////////////////////*/
								  
								  

div#secondary a:link { color: green; text-align:left;}
div#secondary a:visited { color: green; text-align:left;}
/*div#secondary a:hover { color: hotpink; text-align:left;}*/
div#secondary a:active { color: blue; text-align:left; }

div#secondary a:link {font-size:1em;}

#secondary.a {font-family: "Helvetica";}

#secondary.b {text-align: center;}

div.c{text-align: left;}


div#secondary table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}

div#secondary th, td {
padding: 8px;
border-bottom: 1px solid #ddd;
}

#secondary {
background-color:#ffffee;
color:#000;
text-align:justify;
vertical-align: text-top;
padding : 10px 7px 10px 7px;
color:#666666;
line-height: 1.6;
font-size:1.2em;
}

/*div#secondary tr:hover {background-color:#f5f5f5;} */

div#secondary h1,h2,h3 {text-align: left;}

div#secondary p {
text-align:left;}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
}

/* //////////////////////////gauche droite lignebas///////////////////////////*/	
						
div#gauche a:link { color: green; text-align:left;}
div#gauche a:visited { color: green; text-align:left;}
/*/////div#gauche a:hover { color: hotpink; text-align:left;} ///*/
div#gauche a:active { color: blue; text-align:left; }

#gauche {
background-color: #ffffee;	
background-size: cover;
vertical-align: text-top;
text-align:left;
float:left;
width:30%;
margin: auto;
font-size:1.2em;
		}
		
div#droite a:link { color: green; text-align:left;}
div#droite a:visited { color: green; text-align:left;}
div#droite a:hover { color: hotpink; text-align:left;}
div#droite a:active { color: blue; text-align:left; }		

#image {
background-color: #ffffee;	
vertical-align: text-top;
text-align: right;
font-weight: normal;
float:right;
width:70%;
margin:auto;}
		
#droite {
background-color: #ffffee;
vertical-align: text-top;
text-align:justify;
font-size:1.2em;
float:right;
width:70%;
margin :auto;
}

div#droite h1 {color: green; text-align:left;}
div#droite h2 {color: green; text-align:left;}
div#droite h3 {color: green; text-align:left;}


#lignebas {
width:100%;
margin:auto;
text-align:center;
margin-top :0px;		
background-color: #ffffee;	
vertical-align: text-top;
font-size:1.2em;
}

										/* //////////////////////////  lignebas ///////////////////////////*/

div#lignebas h1,h2,h3 {
text-align:center;}

										/* ////////////////////////// article ecoute ///////////////////////////*/

.all-browsers {
  margin: 0;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 1.5em;
}

.browser > h3, p {
  margin: 4px;
  font-size: 1em;
 }

/* Custom checkbox */
.unSuspect {
  height: 40px;
  width: 40px;
  background-color: #008000;
}

/* UnSuspect/indicator */
.unSuspect:after {
  content: "";
  display: none;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: white;
}