Body { 
   background-color: #FEFEFE;
  background: #dfe3e7;
   color: #181818;
   font-size: 13px;	
   font-family: verdana,arial,helvetica,sans-serif;
   top: 0px;
   left: 0px;
   right: 0px;
   margin: 0px;
}

table td {
   font-size: 13px;	
   font-family: verdana,arial,helvetica,sans-serif;
}

#mainpage {
   margin: 50px 0px 0px 0px;
   padding: 0px 0px 20px 0px;
   border-style: none;
   background-position: top left;
   background-color: #FEFEFE;
}

#mainpage P {
   margin: 15px 10px;
}

#hdr {
   	position: absolute;
	/*position:fixed;*/
   	z-index: 5;
   	top: 0px;
   	left: 0px;
	width: 100%;
   	height: 50px;
   	text-align: right;
	padding: 0px;
   	background-color: #9eacb7;
    background-image: url("/Images/top.jpg");
    background-repeat: no-repeat;
    background-position: left top;
   	font-size: 13px;	
   	font-family: arial,verdana,helvetica,sans-serif;
   	border-bottom: #666 1px solid;
}

#hdr span {
 	position: relative;
	padding-right: 5px;
	vertical-align:middle;
    display:inline-block;
  	top: 50%;
  	transform: translateY(-50%);
   	line-height:normal;
}

#hdr h2 {
	font-size: 13px;
	font-weight: bold;
	color:  #181818;
	border: none;
	padding: 0px;
	margin: 0px;
}

#footer {
	padding: 2px 2px 2px;
	margin: 0px 0px 0px 0px;
	background: #dfe3e7;
	border-top: #333 1px solid;
	text-align:center;
	display: flex;
	justify-content: space-between;
}

#footer div.item {
	display: inline-block;
	vertical-align: top;   
	font-style: normal;
	text-align: left;
}


div.figure {
   margin: 0ex 1ex 0ex 1ex;
   padding: 1ex;
   border-width: 0.1em;
   border-color: #9eacb7;
   border-style: solid;
   background-color: #f7f8f2;
}

div.figure p {
  text-align: justify;
  font-size: smaller;
  text-indent: 0;
  padding: 2px;
}

div.figure img {
    text-align:center;
    display: block;
    border-style: none;
    margin-left: auto;
    margin-right: auto;
}

div.figureplain {
}

div.figureplain p {
  text-align: justify;
  text-indent: 0;
  padding: 2px;
}

div.figureplain img {
    text-align:center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    border-style: solid;
    border-color: #9eacb7;
}


A:link {
   color: #1A2959;
   text-decoration: underline;
   background: transparent;
}
A:visited {
   color: #671C1E;
   text-decoration: underline;
   background: transparent;
}
A:active {
   color: #671C1E;
   text-decoration: underline;
   background: transparent;
}
A:hover {
   color: #671C1E;
   text-decoration: underline;
   background: transparent;
}

H1  {
   font-weight:    bold;
   font-size:      18px;
   text-align:     center;
   background : transparent;
   margin: 30px 5px 20px 5px;
}

h2 {
   font-weight: bold;
   background : transparent;
   font-size:      14px;
   padding: 5px 0px 1px 20px;
   margin-top: 10px;
   border-width: 0px 0px 1px 0px;
   border-style: solid;
   border-color: #72374A;
   color: #72374A;
}

h3 {
   font-weight: bold;
   font-size:      13px;
   padding: 5px 0px 1px 20px;
   border-width: 0px 0px 1px 0px;
   border-style: dashed;
   border-color: #181818;
   margin: 20px 200px 20px 0px;
}

div.group h3 {
   border-width: 0px 0px 1px 0px;
   border-style: dashed;
   border-color: #181818;
   margin: 20px 200px 20px 0px;
}

H4 {
   font-style:     italic;
   font-weight:    normal;
   text-align:     right;
   font-size:      13px;
   background : transparent;
   padding: 0em;
   margin: 0em;
}

blockquote {
   margin: 0.5em 0em 0.5em 3em;
}

code {
	color: #132060;
	/*color: #C7490E;*/
   /*background-color: #EEEEEE;*/
}


span.warning {
   color:red;
}

div.biblio span.auteurs b {
	color: #6B845D;
}

div.biblio  span.auteurs i {
	color: #6B845D;
}

div.biblio span.journal {
	font-style: italic;
	color: #1B569F;
}

div.biblio span.volume {
	font-weight: bold;
}

span.fulltext {
	color: #A01215;
}

div.boite {
   margin: 5px;
   padding: 0px;
   border-width: 0px;
}



div.comment {
   color: #490C0C;
   margin: .5ex .5ex .5ex 75px;
   padding: .5ex;
   border-width: 1px;
   border-style: solid none;
   border-color: #9eacb7;
   background-color: #f3f3f3;
}

table.list { 
  border: 2px solid #9eacb7;
}

td.list { 
  border: 1px solid #330000;
}

div.cv div.boite {
	margin: 0ex 1ex 0ex 1ex;
	padding: 0ex 1ex 0ex 1ex;
	border-width: 0.0em 0.0em 0.0em 1em;
	border-color: #FFFFFF #FFFFFF #FFFFFF #A1A1A1;
	border-style: solid;
	background : transparent;
	float: right;
}

div.cv h1 {
	font-weight: bold;
	margin: 0px auto 0px auto;
	padding: 30px 0px;
	font-size: 150%;
}

div.cv h2 {
	font-weight: bold;
	margin: 3ex .1ex 0ex 0.1ex;
	padding: 0ex 1ex 0ex 1ex;
	border-width: 1px;
	border-color: #A1A1A1;
	border-style: solid;
	background-color: #CCCCCC;
	color: #000000;
}

div.cv h3 {
   font-weight: bold;
   font-size:      13px;
   padding: 5px 0px 1px 20px;
   border-width: 0px 0px 1px 0px;
   border-style: dashed;
   border-color: #181818;
   margin: 10px 200px 10px 10px;
}


div.image {
   margin: 10px;
   padding: 10px;
   border-width: 1px;
   border-color: #9eacb7;
   border-style: solid;
   background-color: #f7f8f2;
}

div.image img {
	border-width: 0px;
}

table.toppage {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

table.toppage td {
  vertical-align: top;
  /* background: #F1F1F1; */
  background: #F9F9F9;
  border-style: solid;
  border-color: #FFFFFF;
  border-width:0px;
  padding: 0px;
  margin: 0px;
}

table.toppage td h2 {
	font-size: 13px;
	font-weight: bold;
	font-variant: small-caps;
	border-width: 0px;
	margin: 0px; 
	padding: 0px;
	color: #801313;
}

table.toppage td h1 {
	font-size: 14px;
	font-weight: bold;
	font-variant: normal;
	border-width: 0px;
	margin: 0px; 
	padding: 0px;
	text-align: left;
}

table.toppage td h3 {
	font-size: 13px;
	font-weight: bold;
	font-variant: normal;
	border-width: 0px;
	margin: 0px; 
	padding: 0px;
	text-align: left;
}

table.toppage td P {
	margin: 2px 0px 5px 5px;
	padding: 0px;
	font-size: 13px;
}

table.toppage td.left {
	border-width: 0px 2px 0px 0px;
	font-size: 13px;
	width: 25%;
}

table.toppage td.left A:link {
   color: #1A2959;
   text-decoration: none;
   background: transparent;
}

table.toppage td.left A:visited {
   /*color: #671C1E;*/
   color: #1A2959;
   text-decoration: none;
   background: transparent;
}

table.toppage td.left A:active {
   color: #671C1E;
   text-decoration: underline;
   background: transparent;
}

table.toppage td.left A:hover {
   color: #671C1E;
   text-decoration: underline;
   background: transparent;
}

table.toppage td.center {
	border-width: 0px 2px 0px 2px;
	width: 50%;
}

table.toppage td.right {
   border-width: 0px 0px 0px 2px;
	width: 25%;
}

img.headmobile {
	display: none;
}

div.logomainpage {
	padding: 2px 2px;
	margin: 0px 0px 0px 0px;
	text-align:center;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

div.logo {
	max-width: 27%;
}


div.error {
   font-weight: bold;
   margin: 30px;
   padding: 20px;
   border-width: 1px;
   border-color: #F00;
   border-style: solid;
   background-color: #CCCCCC;
   text-align: center;
}
/* To put below floats (e.g. images) to force the borders of a div to go around them*/
div.clearer {clear: both; line-height: 0; height: 0;}


/********************************** Left navigation on some pages *******************************/

div.navleft {
  float: left;
  margin-right: 10px;
  margin-top: 5px;
  /* position:fixed;*/
}

div.navleft h4 {
  font-style: normal;
  font-weight: bold;
  text-align: left;
  background: #DDD;
  margin: 2px 0px;
  padding: 2px 2px;
  width: 206px;
}

div.navleft ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  
}
div.navleft li {
    margin: 1px 0px;
    padding: 2px 0px 2px 10px;
    background: #EEE;
    width: 200px;
}
div.navleft li:hover {
    background: #FAFAFA;
}
div.navleft li a {
    display: block;
    width: 200px;
    text-decoration: none;
}
div.navleft div.langbox {
	 width: 206px;
	 padding-top: 10px;
	 text-align: center;
}
div.navleft a {
	display: compact;
}
div.navleft img {
	padding: 0 10px;
}

/* Hide the link that should open and close the navleft on small screens */
div.navleft .icon {
  display: none;
  font-size: 15px;
  text-decoration: none;
}

div.rightfromnav {
    margin-left: 220px;
}

div.rightfromnav img {
	max-width: 90%;
}

/********************************** Other things *******************************/

tt.code {
 color: #1A2959; 
 background: #EEE;
}

pre.code {
  color: #1A2959;
  margin: 0 0 0 15px;
  padding: 1px 2px;
  background: #EEE;
}

/********* Navigation lists *****************/

ul.nav {
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
}

ul.nav ul {
	list-style: none;
	margin-left: 10px;
	padding-left: 0px;
}

/********* Cours en ligne *****************/

ul.cours li {
	font-weight: bold;
	margin-left: 00px;
	margin-top: 10px;
	margin-bottom: 10px;
}

ul.cours li P {
	font-weight: normal;
	margin-left: 20px;
	margin-top: 5px;
}

/********* Banques d'images *****************/

table.imagebank {
	width: 100%;
	padding: 0;
	margin: 5px 0px 5px 0px;
	border-spacing: 0px;
	border-collapse: collapse;
	border: 0px solid #C1C1C1;
	margin-top: 25px;
}

table.imagebank tr td {
	border-top: 2px solid #B1B1B1;
	border-left: 2px solid #B1B1B1;
	border-right: 2px solid #B1B1B1;
	border-bottom: 2px solid #C2C2C2;
	background: #F5F5F5;
}

table.imagebank tr.images td {
	vertical-align: middle;
	text-align: center;
}

table.imagebank tr.legendes td {
	vertical-align: top;
	text-align: left;
}


/********* Top navigation *****************/

 /* Add a black background color to the top navigation */

.topnav {
   	background-color: #e1e6e9;
  	overflow: hidden;
  	border-bottom: 1px solid #888;
  	margin-bottom: 5px;
}

/* Style the links inside the navigation bar */
.topnav a {
  	float: left;
  	display: block;
  	color: #181818;
  	text-align: center;
  	padding: 8px 10px;
  	text-decoration: none;
  	font-size: 14px;
	font-weight: bold;
	font-variant: small-caps;
}



/* Add an active class to highlight the current page */
.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  font-size: 15px;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  	font-size: 14px;
  	border: none;
  	outline: none;
  	color: #181818;
	font-weight: bold;
	font-variant: small-caps;
	/* color: #801313; */
  	padding: 8px 10px;
  	background-color: inherit;
  	font-family: inherit;
  	margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  	display: none;
  	position: absolute;
  	background-color: #f9f9f9;
  	min-width: 160px;
  	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  	border: solid 1px #282828;
	-moz-border-radius: 3px; 
	border-radius: 3px; 
  	z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #181818;
  padding: 5px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-weight: normal;
  font-variant: normal;
}

/* Labels inside the dropdown */
.dropdown-content div.label {
  float: none;
  display: block;
  text-align: right;
  padding: 4px 10px;
  text-decoration: none;
  font-size: 14px;
  font-style: italic;
  background-color: #999;
  color: white;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Language switch */
.topnav a.lang {
    float: right;
    display: block;
}

/* Language switch */
.topnav a.lang:hover {
  	background-color: inherit;
}
.topnav a.lang img {
	vertical-align: middle;
}

/* Make sure the twitter timeline is not too wide */
/*.twitter-timeline {
    width: 100vw !important;
}*/



/* When the screen is less than 1000 pixels wide, remove left column on homepage */
@media screen and (max-width: 1000px) {
	td.left {
		display: none;
	}
}

/* When the screen is less than 700 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 700px) {
	.topnav a:not(:first-child), .dropdown .dropbtn {
    	display: none;
	}
  	.topnav a.icon {
		float: right;
    	display: block;
  	}
	.topnav a.lang {
    	float: right;
    	display: block;
	}
	td.left {
		display: none;
	}
	td.right {
		display: none;
	}
	#footer {
		flex-direction: column;
	}
	#footer div.item {
		margin-bottom: 5px;
		margin-top: 5px;
	}
	img.headmobile {
		display: block;
		float: right;
		max-width: 30%;
		margin: 2px 5px;
	}
	
	div.navleft {
		width: 25px;
	}
	div.navleft h4, div.navleft li {
    	display: none;
	}
  	div.navleft a.icon {
		text-align: center;
    	display: block;
		border: solid 1px #282828;
		-moz-border-radius: 2px; 
		border-radius: 2px;
		padding: 1px;
		margin-left: 4px;
		margin-bottom: 5px;
  	}
  	div.navleft img.logo {
		display: none;
	}
	
	div.rightfromnav {
		margin-left: 30px;
	}
	
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav or navleft look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  
  .navleft.responsive h4 {
    display: block;
    text-align: left;
  }
  .navleft.responsive li {
    display: block;
    text-align: left;
  }
  
  
  .rightfromnav.responsive {
	margin-left: 220px;  
  }
}