.projHeader {
  text-align:center;
  background-color:#151550;
  color:white;
  padding:10px 0px 0px 0px;
  margin:0px 0px 0px 0px;
}
.projIntro {
  width:70%;
  font-style:italic;
  padding:60px 20px 20px 30px;
  margin:auto;
}
.modelSelector {
  width:70%;
  background-color:#bbbbff;
  border-color:transparent;
  padding:10px 20px 10px 20px;
  margin:10px auto 10px auto
}
.sectionLegend {
  background-color:#151550;
  color:white;
}

/* Controls the style in Pleinpot web interface          */
/* Customization for LySI:  */
/*    - color of the body background */

/* This file can be customized for specific applications */
/* 2003-02 Vlad/Sofia team                               */
/*
html {
   margin: 0px; padding: 0px; height:100%;
}
*/

/*   margin:0px;padding:0px;height:100%; */

body {
   background-color: white; color: #331A00;
}

hr {
  border: none;
  background-color: #000099;
  color: #000099;
  height: 1px;
}
hr.frsep { height: 3px; }

.warning { 
/* Selects any element with attribute class="warning" */
   background-color:#FFFFFF;
   color: red;
   border:red;
   border:thin dotted;
   text-align:center;
}

.help {cursor:help}

/* class ahelp: used for links do documentation on the c=o&z=e page */
.ahelp::after {content:"?";}
.ahelp {cursor:help; height:16px; width:16px; border:1px solid; border-radius:8px; text-align:center;line-height:16px; vertical-align:middle; text-decoration:none; color:black}
.ahelp:hover {background-color:pink}

div.ahtab {width:100%;}
div.ahexp {width:90%; margin:auto;}

/* class q_header : div containing all the content generated by the q_header 
   routine (see doc). This content consist of:
   table description, request, doc links, homepage link 
*/

/* class q_footer : div containing all the content generated by the q_footer 
   routine (see doc). 
*/

/* class cozd : div containing all the content generated by c=o&z=d request */

/* class datatable : tables in z=d -- class cozd  */
/*     maybe the style can be set in "cozd", so this class may not be needed */
table.datatable {width:100%;border:1px outset grey;padding:1px; margin:0px auto; background-color:pink}
table.datatable td {border:thin inset grey; margin:1px; background:white}
table.datatable th {background-color:#FFFAEE}

/* class coze : c=o&z=e */

/* class table_menu : table in coze and in cozs */
/*     maybe the style shall separately be set in "coze" and "cozs" because 
       it is not sure that the same style is fitted for both tables
   This class may not be needed
*/	
.table_menu {margin-left:auto; margin-right:auto;width:40em;}
table.table_menu {border-collapse:collapse; border-width:1px; border-style: solid;}
tr.table_menu {border-width:1px; border-style: solid;}

/* class cozr : c=o&z=r */

/* class cozq : c=o&z=q */

/* class cozs : c=o&z=s */
.cozs table {border:1px outset grey;padding:1px; margin:0px auto; background-color:pink}
.cozs th {background-color:#FFFAEE}
.cozs td {border:thin inset grey; margin:1px; background:white}


/* class cozh : c=o&z=h */


/* fold-unfold buttons on c=o&z=e */
.fold {
width: 0; height: 0; border-style: solid; margin-top: 5px;
border-width: 0 7.5px 13px 7.5px;
border-color: transparent transparent grey transparent;
}
.fold:hover {border-color: transparent transparent pink transparent;}
.unfold {
width: 0; height: 0; border-style: solid; overflow:visible;
border-width: 13px 7.5px 0 7.5px;
border-color: grey transparent transparent transparent;
position:relative;
top:17.5px;
}
.unfold:hover {border-color: pink transparent transparent transparent;}

/*****************************************************************************/
/* Spinner: used e.g. when a plot is loading */

.spinner {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*****************************************************************************/
/* Style for the Plot program */
/* Used on c=i&z=vs, c=i&z=vp, c=o&z=plot, ... */

.plot[name=hair] {background-color:red}                        /* cross-hair */

/*.plot[name=coords] {}*/                               /* coordinate display*/

/* zoom out button */
/* .plot[name=zoomout] {} */
.plot[name=zoomout]:hover {background-color:pink;}

/* zoom region overlay rectangles 
     rectover1: when the zoom is in the normal direction
     rectover2: when the zoom reverses one or both axes
*/
.plot[name=rectover1] {background-color:lightblue; opacity:0.4}
.plot[name=rectover2] {background-color:pink; opacity:0.4}

/* .plot .spinner {} */

/*****************************************************************************/