tr#menu_horizontal { 
width : 100%; 
background-color : #3b72c7;
border : 1px solid #3b72c7;
}
 
tr#menu_horizontal td.bouton_gauche {
float : left;
padding : 8px 10px 8px 10px;
border : 1px solid #3b72c7; 
}
 
tr#menu_horizontal td.bouton_droite {
float : right;
padding : 8px 10px 8px 10px;
border : 1px solid #3b72c7;
}

tr#menu_horizontal a {
color: white;
text-decoration : none;
padding : 0 0.5em; 
font : bold;
}
 
tr#menu_horizontal a:hover {
color: Gold;
}
 
tr#menu_horizontal a img { 
border : none;
padding :  0 0.3em;
}

/*********** The dropdown container button ***********/
.dropbtn {
  background-color: #3b72c7;
  color: white;
  padding: 8px 10px 8px 10px;
  border: none;
  font : inherit;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #3b72c7;
  z-index: 1;
  padding: 8px 10px 8px 10px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #3b72c7;
  padding: 8px 10px 8px 10px;
  text-decoration: none;
  display: block;
  font : inherit;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #3b72c7;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3b72c7; color: Gold;}

/* The container <div> - needed to position the dropdown content */
.dropdown_right{
  float: right;
  position: relative;
  display: inline-block;
}

/* Show the dropdown menu on hover */
.dropdown_right:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown_right:hover .dropbtn {background-color: #3b72c7; color: Gold;}

/*********** try button ***********/

td.try_btn {
float : right;
padding : 8px 10px 8px 10px;
border : 0px;
background-color: green;
text-align: center;
width: 100px;
}

td.try_btn a {
color: white;
text-decoration : none;
padding : 0 0.5em; 
font : bold;
}

td.try_btn a:hover { 
color: Gold;
background-color: green;
}

/*********** colors and borders ***********/

body { /* defaults */
background-color: white;
color: black;
}

#titlebar, h2 { /* structure backgrounds */
background-color: #f0f0f0;
}

h1, h2, h3, h4, a.anchor { /* structure foregrounds */
color: #152063;
}

a { /* navigation / links */
color: #3b72c7; 
}

.emph { /* emphasis */
color: darkGreen;
font-weight: bold;
}

/*********** Fonts and text decorations ***********/

body { /* defaults */
font-family: arial,helvetica,sans-serif;
font-size: 95%;
}

h1 {
text-decoration: none;
font-size: 140%;
}

h2, h3 {
text-decoration: none;
font-size: medium;
}

a, a.anchor {
text-decoration: none;
font-size: 98%;
}

a:hover {
color: white;
background-color: #3b72c7;
border-radius: 2px;
}

/*********** Spacing, margins, padding, alignment ***********/

body {
/*border: 1px solid #6699CC;*/
margin: 7px;
}

#titlebar {
text-align: center;
margin: 0px;
padding: 0px;
}

h2 {
padding: 5px;
border-radius: 3px;
text-align: center;
}

p {
margin: 5px;
padding: 5px;
text-align: justify;
}

/*********** Exceptions and special elements ***********/

#logo {
border: 0px;
margin: 5px;
float: left;
}

li { list-style-image: url(qtiplot_files/icons/list_arrow.png); }

table.soft {
color: #404040;  
border: 1px #6699CC solid;
border-spacing: 5px;
border-collapse: collapse; 
background-color: #f0f0f0;
margin: 20px;
}

table.soft td, table.soft tr { 
border: 1px #6699CC dotted;
padding: 5px;
} 

table.soft img {
border: 0px;
background-color: #f0f0f0;
}

img {
border: 0px;
}

div.intro-block {
margin: 10px;
text-align: center;
border: 1px solid darkGray;
border-radius: 5px;
padding: 10px;
background-color: #f0f0f0;
transition: all 200ms ease-out;
}

div.intro-block a {
text-decoration: none;
color: black;
}

div.intro-block:hover {
border: 1px solid #6699CC;
box-shadow: 0 0 6px rgba(102, 153, 204, 1);
transform: scale(1.1);
}

div.intro-block img {
width: 340px;
height: 240px;
}

div.intro-row {
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

div.intro-row a {
text-decoration: none;
color: black;
}

div.intro-row a:hover {
text-decoration: none;
background-color: white;
}

div.intro-row p {
text-align: center;
}

/*********** Presentation blocks ***********/

div.full-presentation-block {
margin: 10px;
border: 1px solid darkGray;
border-radius: 5px;
padding: 10px;
width: 95%;
overflow: auto;
text-align: justify;
}

div.full-presentation-block img {
width:50%;
max-width:450px
max-height: 350px;
padding: 10px;
cursor: zoom-in;
border-radius: 5px;
}

div.full-presentation-block img:hover{
box-shadow: 0 0 6px rgba(102, 153, 204, 1);
}

div.presentation-block {
margin: 10px;
border: 1px solid darkGray;
border-radius: 5px;
padding: 10px;
width: 46%;
overflow: auto;
text-align: justify;
}

div.presentation-block img {
width:50%;
max-width: 350px
max-height: 250px;
padding: 10px;
cursor: zoom-in;
border-radius: 5px;
}

div.presentation-block img:hover{
box-shadow: 0 0 6px rgba(102, 153, 204, 1);
}

div.presentation-block p{
text-align: justify;
}

div.presentation-row {
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

/*********** Vertical navigation bar ***********/

ul.vert-nav-bar {
  margin: 10px;
  padding: 10px;
  /*top: 20%;*/
  width: 80%;
  position: fixed; /* Make it stick, even on scroll */
  overflow: none; /* Disable scrolling if the sidenav has too much content */
}

ul.vert-nav-bar li {
margin: 5px;
width: 100%;
padding: 5px;
text-decoration: none;
color: #3b72c7;
}

ul.vert-nav-bar a {
padding: 5px;
text-decoration: none;
}

ul.vert-nav-bar a:hover {
color: white;
background-color: #3b72c7;
border-radius: 5px;
}

/*********** Footer ***********/

div.footer {
font-size: 85%;
color: darkGray;
margin-top: 20px;
text-align: center;
border: 0px;
padding: 10px;
background-color: #f0f0f0;
}

div.footer a {
color: darkGray;
text-decoration: none;
}

div.footer a:hover {
color: #3b72c7;
background-color: #f0f0f0;
text-decoration: none;
}

/*********** Input forms ***********/

input[type=text] {
  width: 100%;
  padding: 5px 10px;
  margin: 2px 0;
  border: 1px solid darkGray;
  border-radius: 5px;
  font-size : medium;
}

input[type=password] {
  width: 70%;
  padding: 9px 20px;
  margin: 8px 0;
  border: 1px solid darkGray;
  border-radius: 5px;
  font-size : medium;
}

input[type=submit]{
  color: white;
  padding: 10px 20px;
  margin: 8px 0;
  border: 0px;
  border-radius: 5px;
  background-color: #3b72c7;
  font-size : medium;
}

input[type=submit]:hover {
  background-color: green;
}

/******* Modal images ************/

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 30px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.15); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  background-color: white;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 50%;
  text-align: center;
  padding: 10px;
  height: auto;
  font: bold;
  font-size: medium;
  background-color: white;
  border: 1px solid darkGray;
  border-radius: 5px;
  cursor: default;
}

/* The Close Button */
.close {
  color: white;
  float: left;
  font-size: 30px;
  position:absolute;
  top:15px;
  left:74%;
  border: 2px solid white;
  border-radius: 30px;
  background-color: black;
  padding: 3px 12px;
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

code {
  font-family: monospace;
  font-size: medium;
  padding: 20px;
}