body {  font-family: verdana, geneva, sans-serif; font-size: 11pt; }
  #toptitle { text-align:center; padding-top:20px;
             }	 
  #toptitle a {text-decoration: none;
      color: blue; 
              }
  #toptitle p { padding:10px; font-size:1.2em;  text-align:center;
/*---------------------------------------------------------------- */              }
.sortable th {
   cursor: pointer;
}
.sortable th.no-sort {
   pointer-events: none;
}
.sortable th::after, 
.sortable th::before {
 transition: color 0.2s ease-in-out;
 font-size: 1.2em;
 color: transparent;
}
.sortable th::after {
   margin-left: 3px;
   content: '\025B8';
}
.sortable th:hover::after {
   color: inherit;
}
.sortable th.dir-d::after {
   color: inherit;
   content: '\025BE';
}
.sortable th.dir-u::after {
   color: inherit;
   content: '\025B4';
}

 /* --------------------------------------------------------------- */
#topcadre { display:table;  }
 #notes { float:left; width:60%; margin-top:20px;   }
.addnote {  font-size: 10pt; color: #ff0000; font-weight:normal; padding:20px; }
.p1titre { font-size:1.3em; padding: 10px 0px 10px 20px; }
.avantinput {font-size:larger; padding: 7px 0px 10px 30px; }
#vidcadre {float:left;width:25%; margin-top:20px;}
#vidcadre img { display:block; margin-left:auto; margin-right:auto; width:70%;}
#rtxt {float:left;width:13%; margin-top:20px; padding:5px;}
#rtxtresp { display: none;}
@media (max-width: 1150px) {
  #topcadre { display:inline-block;  }
 #notes { position:relative; width:100%; margin-top:20px; }
#vidcadre { display:none; }
#rtxt { display:none; }
#rtxtresp { display:inline-block; position:relative; width:100%; padding: 0px 10px 0px 10px; text-align: center;font-size:1.1em;font-style:italic;}
}

#dbcontent { margin-top:10px; }

#searches { position:relative; padding-left:50px; }
hr { margin: 20px 0px 20px 0px; height:5px;border-width:0;color:#BF3F08;background-color:#BF3F08; }
.row { float: left; }
.row1 { float: left; width:24%;font-size:1.1em; }
.row2 { float: left; width:50%;}
.row3 { float: left; width:56%;}

#spsearcharea { width:100%; font-size:16px; }
#spsearcharea h4 { padding: 10px 0px 10px 10px; }
#spsftitle { float:left;width:25%; padding: 0px 0px 10px 40px; }
#spsf { float:left;width:40%; }
#spretour { float:right;width:30%; }
#spretour button { float:right;}

/*--------------------------------------------------------------------------*/
#booklist {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
#booklist th {
  cursor: pointer;
}
#booklist td, #booklist th {
  border: 1px solid #ddd;
  padding: 8px;
}

#booklist tr:nth-child(even){background-color: #f2f2f2;}

#booklist tr:hover {background-color: #ddd;}
#booklist th:hover {background-color: #ddd; color:black;}

#booklist th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #BF3F08;
  color: white;
}
#booklist a { color:white; text-decoration:none; display:block; }
#booklist a:hover { color:#000; }

/* form formatting for search box */
form { margin-top:0px; }
input[type=text] {   width: 50%;   padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
select {   width: 60%;   padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #BF3F08;
  color: white; 
  padding: 12px 20px; 
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
}
input[type=reset] {
  background-color: #BF3F08; margin-left:20px;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  }
input[type=submit]:hover {
  background-color: blueviolet;
}
input[type=reset]:hover {
  background-color: black;
}
button {
  background-color: #BF3F08;
  color: white; 
  padding: 12px 20px; 
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display:inline-block;
}
button:hover {  background-color: blueviolet; }
button a { color:white; text-decoration:none; display:block; }
button a:hover { color:#000; }

.container { margin:20px;
  border-radius: 5px;
  /* background-color: #f2f2f2; */
  padding: 20px; padding-left:20px;border:5px solid #BF3F08;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;   width: 25%;  margin-top: 6px; 
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;  width: 75%;   margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.pagehaut { float:right; }