/* Style pour KS */
body{
    font-family: "Open sans", Verdana, sans-serif;
	font-size: 1.5vw;
}


h1
{
	text-align: center;
	font-size: 1.1em;
}

h2
{
	/* font-family : 'LearningCurveProRegular ', Arial , serif ; */
	color: black;
	left:100px;
	font-size: 1.2em;
}

h3
	{
		/* font-family : 'LearningCurveProRegular ', Arial , serif ; */
		font-size: 1.3em;
		text-align:center;
		color:#760001;	
	}


#doc
{
	width:100%;
	margin: auto;
	background: linear-gradient(to bottom,#D1D1D1 , white);
	/* min-height: 500px;	 */
}



#imageEntete {
	width :100%;	
}

/* Pour mobile */
nav ul{
		list-style-type: none;
		justify-content: space-between;
		display: flex;	
		/* margin-right:50px; */
		flex-direction: column;
		/* background-color: yellow; */
		margin: auto;
		font-size: medium;
}

#corpsDoc{
	display:flex;
	flex-direction:column;	
	width:100%;
	justify-content:flex-start;
}

#partieGauche {
	flex: auto;
	/* flex:1 1 35%;  */
	border: 2px solid white;
	margin-right: 10px;
	background-color: black;
}

#partieGauche img
{
	flex :auto;
	width: 100%; 
} 
		

#msg{
	/* flex: 1 1 65%; */
	flex: auto;
	text-align:justify; 
	padding: 2%;
	font-family : 'LearningCurveProRegular ', Arial , serif ;
	font-size: medium; 
}


#photoAchat{
	flex:auto;
}

#photoAchat img{
	width:100%;
}




/* Autres taille écran */
 
@media screen and (min-width: 780px) and (max-width: 979px){
	nav ul{
		flex-direction: row;
		/* background-color: green; */
	}

	nav a:hover{
		color: #760001;
		border-bottom: 5px solid #760001;
		} 
	
	#doc { 
		width:80%;
	}

	#corpsDoc{
		display:flex;
		flex-direction:row;	
		width:100%;
		justify-content:flex-start;
	}
	
	#partieGauche {
		flex:1 1 35%; 
		border: 2px solid white;
		margin-right: 10px;
		background-color: black;
	}
	
	#partieGauche img
	{
		width: 100%; 
	} 
			
	
	#msg{
		flex: 1 1 65%;
		text-align:justify; 
		padding: 2%;
		font-family : 'LearningCurveProRegular ', Arial , serif ;
		font-size: medium; 
	}
	
	table{
		margin:auto;
	}

	
}

@media screen and (min-width: 980px){	
	nav ul{
		flex-direction: row;
		/* background-color: blue; */
	}
	
	#doc { 
		width:70%;
	}
	#corpsDoc{
		display:flex;
		flex-direction:row;	
		width:100%;
		justify-content:flex-start;
	}
	
	#partieGauche {
		flex:1 1 35%;
		border: 2px solid white;
		margin-right: 10px;
		background-color: black;
	}
	
	#partieGauche img
	{
		width: 100%; 
	} 
			
	
	#msg{
		flex: 1 1 65%;
		text-align:justify; 
		padding: 2%;
		font-family : 'LearningCurveProRegular ', Arial , serif ;
		font-size: medium; 
	}

	table{
		margin:auto;
	}
	
} 

nav a{
text-decoration: none;	
color: #760001;
}


nav li.selected{
/*color:blue;*/	
background-color: white;
}

#listeLibrairie{
	font-size: medium;
}


	
/* 
@font-face
{
    font-family: 'LearningCurveProRegular';
    src: url('LearningCurve_OT-webfont.eot');
    src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
         url('LearningCurve_OT-webfont.woff') format('woff'),
         url('LearningCurve_OT-webfont.ttf') format('truetype'),
         url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');	
} */

table{
	border: solid 3px;
	border-color:black;
    width:100%;
    text-align:left;
    /* margin-left:20%; */
    margin-bottom: 20px;
	font-size: small;
}

table tr:nth-child(even){
       background-color:#E7E7E7;
}

table tr:nth-child(odd){
       background-color:#ffffff;
}

table th{
       background-color:#E7E7E7;
       color:red;
       text-align: left;
	   font-size: small;
       /*justify-content: space-between;*/
}

table caption {
	background-color:#E7E7E7;
	margin-top: 10px;
	margin-bottom: 10px;
}



/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-weight:Bold;
	font-size: small;
    /*margin-top:10px; */
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 18px;
    background-color: white;
    display: none;
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    display: block;
}

p.titreExo{
	color:red;
	font-weight:Bold;
	font-size: small;	
}

footer{
color:white;
background-color:grey;
/*padding-left: 100px;*/
padding-top: 10px;
padding-left: 5px;
font-size: 0.8em;
vertical-align: center;
/* Height:35%; */
text-align:left;	
}

footer a:link{
  color: white;
  font-style: italic;
}

.right{
 text-align:right;	
}