BODY {
  font-family: sans-serif ;
  background-color: white;
  margin-top: 0px ;
  text-align: justify;
  --menu-width: 280px ;
  --body-width: 38em ;
}

TT, PRE {
  font-family: courier ;
  font-weight: bold ;
  background: #EEE ;  
}

DIV.top {
  margin-left: var(--menu-width) ;
  max-width: var(--body-width) ;
  margin-top: 0px ;
}

DIV.menu {
  position: fixed ;
  top: 0 ;
  left: 0 ;
  width: var(--menu-width) ;
  bottom: 0 ;
  overflow: auto ;
  font-size: 70% ;
  padding-top: 5em ;
}

#log IMG { width:1px ; height:1px }

DIV.menu P.search {
  background-color: #DDF ;
  text-align:center ;
  padding: 0.5em ;
  margin-top: -5em ;
  position: fixed ;
  width: calc(var(--menu-width) - 1.5em) ;
  background: linear-gradient(#DDFF, #DDFF, #DDF0);
}
DIV.menu P.search INPUT {
  background-color: #FFF;
  width: 100%;
}

DIV.menu A {
  margin: 0em ;
  color: black ;
  display: block;
}

DIV.menu A:hover {
  background-color: black;
  color: white;
}
DIV.menu A.current:hover {
  background-color: black;
}
DIV.menu A.filter:hover {
  background-color: black;
  color: yellow ;
}
DIV.menu A.h1 { font-weight: bold}
DIV.menu A.h2 { font-weight: bold ; padding-left: 1em }
DIV.menu A.h3 { padding-left: 2em }
DIV.menu A.h4 { padding-left: 4em ; font-size: 90% }
.odd { background-color: #DDF }
.even { background-color: #FFF }
.onscreen.odd { background-color: #BED }
.onscreen.even { background-color: #DFD }
.current.odd, .current.even { background-color: #8F8 }

H1, H2, H3 { background-color: #8F8 ; margin: 0px; line-height: 1em }
H1, H2 { text-align: center }
H3 { display: inline }
H4 { display: inline ; border-bottom: 0.2em solid #8F8 }
DIV#menu A.unselected { display:none}
SPAN.filter { background-color: yellow ; }
DIV.menu A.filter { background-color: #FF8 ; }

A { text-decoration: none ; }
DIV.top A[href]:hover {
  text-decoration: underline ;
  text-decoration-thickness: 3px ;
}

TABLE TD, TABLE TH, TABLE { border: 1px solid black; vertical-align: top }
TABLE { border-spacing: 0px; }
TABLE.space TD { padding: 0.5em ; }
TABLE.space TD:first-child { text-align: center; }

@media print {
  DIV.menu { display: none ; }
  DIV.top { margin-left: 0em ; }
  H1, H2 { border-top: 1px solid black ;
    border-bottom: 1px solid black ;
  }
  H3 { border-bottom: 1px solid black ; }
}

@media screen and (min-width: 1600px) {
  BODY { --menu-width: 360px ; }
  DIV.menu { font-size: 90% ; }
 }
 @media screen and (min-width: 1700px) {
  BODY { --menu-width: 400px ; }
  DIV.menu { font-size: 100% ; }
  DIV#menu A.unselected { line-height: 0.9em ; font-size: 70% }
 }

/* TOMUSS styling */

KEY::before { content: '<' }
KEY::after { content: '>' }
KEY { font-family: monospace ; font-size: 140% }

.glyphe {
  font-family: emoji ;
  transform: scale(1.5) ;
  display: inline-block ;
  font-weight: bold ;
 }
.button, .menubutton, .onglet, .input, .empty, .filtre, .columntitle {
  padding-left: 0.2em ;
  padding-right: 0.2em ;
}
.onglet, .lien, .filtre, .columntitle {
  background: #DFD ;
}
.button {
  background: #EEE ;
  border: 2px outset #000 ;
  }
.menubutton {
  background: #EEE ;
  border: 2px outset #000 ;
  border-radius: 0.4em ;
}
.menubutton::after {
  content: '▼' ;
}
.lien_rouge {
  background: #FEE ;
}
.lien, .lien_rouge {
  color: #00F ;
}
.onglet {
  border-top: 1px solid black ;
  border-left: 1px solid black ;
  border-right: 1px solid black ;
  border-top-left-radius: 0.4em ;
  border-top-right-radius: 0.4em ;
}
.input, .empty, .filtre {
  border: 1px solid black ;
}
.input {
  font-family: monospace ;
  font-size: 120% ;
  background: #FFF ;
}
.empty, .filtre {
  opacity: 0.5 ;
}
.empty {
  background: #FFF ;
}
.boxed, .boxed_green, .boxed_light_green, .boxed_red {
  border: 1px solid black ;
  display: inline-block ;
  font-size: 60% ;
  text-align: center;
  line-height: 1.3em ;
  height: 5em ;
  width: 9em ;
  color: #00F ;
  margin-top: 0.2em ;
}
.boxed_green {
  background: #0F0 ;
  font-weight: bold ;
}
.boxed_light_green {
  background: #DFD ;
}
.boxed_red {
  background: #FDD ;
}
.boxed {
  background: #FFF ;
}
.fleche:before {
  content: ' →' ;
}
.left {
  float: left ;
}
LI, P, DIV {
  clear: left
}
.fleche {
  display: inline-block ;
  font-size: 200% ;
  vertical-align: middle;
  transform: scale(2, 1) ;
  color: #AAA ;
  transition: color 1s ;
}
P:hover .fleche, LI:hover .fleche {
  color: #000 ;
}
LI { margin-top: 0.2em }

TABLE.colored {
  border-spacing: 0px ;
}
TABLE.colored, TABLE.colored TD, TABLE.colored TH {
  border: 1px solid #AAA ;
}
TABLE.colored TH {
  background: #EFE ;
  text-align: center ;
}
.bad {
  color: #F00 ;
}

IMG.tip {
  opacity: 0.1 ;
  position: absolute ;
  transition: opacity 1s ;
  left: calc(var(--body-width) + var(--menu-width) + 0.5em) ;
  max-width: calc(100% - var(--body-width) - var(--menu-width) - 2em) ;
  padding-left: 1em ;
}
[tipped]:hover > IMG.tip,
IMG.tip:hover
{ opacity: 1; z-index: 2; filter: drop-shadow(0px 0px 15px #000) }
[tipped]:hover { background: #F8FFF8 }


.ucbl:before {
  content: 'Information spécifique UCBL : ' ;
  background: #4FF ;
}
.ucbl { border-radius: 0.5em; background: #CFF }

.expert:before {
  content: 'Information pour expert : ' ;
  background: #CCC ;
}
.expert { border-radius: 0.5em; background: #EEE ; opacity: 0.3 }
.expert:hover { opacity: 1 }
@media print { .expert { opacity: 1 } }

.bug:before {
  content: 'Attention, fonctionnement inattendu : ' ;
  background: #FDD ;
}
.bug { border-radius: 0.5em; background: #FEE ; }

.vector {
  display: inline-block ;
  border-left: 1px solid black ;
  border-right: 1px solid black ;
  border-radius: 1em ;
  padding: 0.3em ;
  vertical-align: middle;
}

*[current=yes] {
  border: 6px solid #0F0 ;
  padding: 0.5em ;
  border-radius : 0.5em ;
  margin-top: 0.5em ;
  margin-bottom: 0.5em ;
}