/* CSS Document */
/* site intéressant pour apprendre à jouer avec les div: http://learnlayout.com/no-layout.html */
/* pour les couleurs: http://trinity-advise.com/outils/codes.couleurs.web/codes.couleurs.internet.html */

@import url(https://fonts.googleapis.com/css?family=Cabin);
@import url(https://fonts.googleapis.com/css?family=Rufina);
/* @import url(https://fonts.googleapis.com/css?family=Arimo);
   @import url(https://fonts.googleapis.com/css?family=Old+Standard+TT);
   @import url('https://fonts.googleapis.com/css?family=Cantata+One'); */

body {
  color:#000000;
  font-size:110%;
  font-family:'Cabin',Arimo,Calibri,Tahoma,Verdana,Helvetica,Arial,Technical;
  margin-top:0;
  background:url(../pics/background.png) fixed;
  }
#content {
  max-width:1200px;
  text-align:center;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
  margin:0 auto;
  }
#nav_left, #nav_right {
  width:180px;
  min-width:160px;
  padding-top:1em;
  border:0px solid blue;
  }
#main {
  max-width:840px;
  min-width:240px;
  margin:0 auto;
  padding:1em;
  flex: 1; /* Force l'étirement */
  }

em {
  font-size:80%;
  }
h1 {
  color:#804000;
  }
.sub {
  font-size:smaller;
  }
.subt {
  font-size:smaller;
  font-style:italic;
  }
.auth {
  color:#000;
  font-size:medium;
  font-style:italic;
  }
h2 {
  font-size:120%;
  color:#804000;
  }
h3 {
  text-align:left;
  font-style:italic;
  color:#804000;
  margin-bottom:8px;
  }
p {
  text-indent:0%;
  text-align:justify;
  margin-top:0;
  hyphens:auto;
  }
.stxt p {
  margin-bottom:0;
}
.merci p {
  margin-bottom:0.5em;
  }
sup {
  vertical-align: super;
  font-size: 70%;
  line-height: 0.6em;
  position:relative;
  top:0.2em;
  }
a sup, h1 sup, a span, h1 span {
  color:#804000;
  }
#fancybox-title a, #fancybox-title a:hover { /* liens dans les légendes des FancyBox */
  color:#aaffff;
  }
.grp { /* encadre une légende et une image pour qu'elles restent assemblées */
  display:inline-block;
  margin-top:8px;
  margin-bottom:16px;
  }
.pictxt { /* affichage d'une légende à une image */
  display:inline-block;
  width:80px;
  text-align:right;
  padding:4px;
  vertical-align:top;
  font-size:75%;
  font-weight:bold;
  }
.pic { /* si le nombre d'images dépasse la largeur disponible il y a un retour à la ligne toujours centré */
  display:inline-block;
  position:relative; /* ajouté le 5 janvier 2015 pour permettre de plaquer une icône google sur une miniature */
  border:1px solid #804000;
  padding:4px;
  border-radius:6px;
  background-color:transparent;
  }
.vers {
  display:inline-block;
  text-align:left;
  margin-bottom:8px;
  }
.box {
  display:inline-block;
  margin-top:8px;
  margin-bottom:24px;
  padding:4px;
  box-shadow:3px 3px 6px 6px rgba(0,0,0,0.4);
  background-color:#e6ffff;
  border-radius:12px;
  }
.abstr {
  font-family:'Rufina',"Times New Roman";
  text-align:center;
  padding:16px;
  margin:4px;
  background-color:#ffffff;
  border:1px solid #cccccc;
  border-radius:12px;
 }
.box .abstr {
  padding:0;
  }
.recit {
  height:200px;
  min-height:200px;
  padding:16px;
  resize:vertical;
  overflow:auto;
  }
.merci {
  max-width:520px;
  min-width:200px;
  margin:auto;
  margin-top:16px;
  border:2px solid #804000;
  background-color:#f9f9f9;
  padding:12px;
  border-radius:8px;
  font-style:italic;
 }
.stxt, .stxt180, .stxt480 {
  display:inline-block;
  padding:4px;
  margin-top:8px;
  margin-bottom:16px;
  font-size:90%;
  background-color:#E6FFFF;
  border:1px solid #804000;
  border-radius:6px;
  }
.stxt180 {
  width:180px;
  }
.stxt480 {
  width:480px;
  }

/* ---------- text ---------- */
#footer {
  position:fixed; /* to stick the list at the bottom - does not work with IE6 */
  bottom:0; /* does not work with IE6*/
  left:0;
  width:100%;
  min-height:24px;
  max-height:48px;
  padding-top:3px;
  border-top:1px solid;
  background-color:#E6FFFF;
  text-align:center;
  font-family:'Rufina',"Times New Roman";
  font-size:90%;
  }
#list {
  padding:16px;
  }
#sitemap {
  width:480px;
  text-align:left;
  font-weight:bold;
  border:1px solid #804000;
  background-color:#E6FFFF;
  margin:0 auto;
  border-radius:8px;
  }
#tree {
  position:absolute;
  top:16px;
  left:32px;
  width:100%;
  }
/* ---------- image ---------- */
img, input[type="image"] {
  border:none;
  vertical-align:bottom; /* prevents the 4px space below images when strict <!DOCTYPE - https://developer.mozilla.org/en-US/docs/Images%2C_Tables%2C_and_Mysterious_Gaps */
  }
.timg { /* images des titres des pages principales */
  cursor:default;
  max-width:100%;
  min-width:240px;
}
.tb { /* pour les images créées par le thumbnail_maker */
  border-radius:6px;
  }
.s {
  height:100px;
  border-radius:6px;
  cursor:pointer;
  }
.s60 {
  height:60px;
  border-radius:4px;
  cursor:pointer;
  }
.s80 {
  height:80px;
  border-radius:6px;
  cursor:pointer;
  }
.s100 {
  height:100px;
  border-radius:6px;
  cursor:pointer;
  }
.s120 {
  height:120px;
  border-radius:6px;
  cursor:pointer;
  }
.s140 {
  height:140px;
  border-radius:6px;
  cursor:pointer;
  }
.s150 {
  height:150px;
  border-radius:6px;
  cursor:pointer;
  }
.s160 {
  height:160px;
  border-radius:6px;
  cursor:pointer;
  }
.s180 {
  height:180px;
  border-radius:6px;
  cursor:pointer;
  }
.s200 {
  height:200px;
  border-radius:6px;
  cursor:pointer;
  }
.s240 {
  height:240px;
  border-radius:6px;
  cursor:pointer;
  }
img.clic {
  cursor:pointer;
  }
img.disp {
  border:1px solid #804000;
  margin:4px;
  border-radius:8px;
  }
img[src="pics/back.png"] {
  cursor:pointer;
}
.g {
  position:absolute;
  top:7px;
  left:7px;
  }
area {
  cursor:pointer;
  }

/* ---------- table ---------- */
th {
  color:#804000;
  }
th,td {
  text-align:left;
  vertical-align:top;
  }

/* ---------- menus ---------- */
#menus, #ads {
  width:100%;
  text-align:center;
}
.logo {
  text-align:center;
  }
.button_dom { /* boutons des domaines */
  display:inline-block;
  background-color:#E6FFFF;
  border-radius:6px;
  border:1px solid #804000;
  width:99%;
  padding-top:2px;
  padding-bottom:2px;
  margin-top:13px;
  font-size:120%;
  }
#sq_but_menu div { /* menu de boutons carrés */
  position: relative;
  display: inline-block;
  background:#E7FFFF;
  height: 100px;
  width: 100px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  }
img.sq_button { /* bouton carré avec une image */
  position: absolute;
  left: 0;
  top: 0;
  border: none;
  transition-property: padding-left;
  transition-duration: .5s;
  transition-timing-function: ease-out;
  }
img.sq_button:hover, img.sq_button:focus {
  padding-left:80px;
  }
.sq_button_trans { /* bouton carré avec une image, texte sous-jacent */
  color:#0041FF;
  list-style:none;
  text-align:left;
  font-size: 80%;
  font-weight: bold;
  padding-left: 4px;
  padding-right: 4px;
  margin-right: 20px;
  }
#menu {
  text-align:left;
  background-color:#E6FFFF;
  border:1px solid #804000;
  border-radius:8px;
  margin-top:13px;
  margin-bottom:16px;
  padding-top:16px;
  padding-bottom:16px;
  }
.level0 {
  margin:0;
  background-color:transparent;
  list-style:none;
  padding-left:8px;
  }
.level1,.level2 {
  display:none;
  position:absolute;
  left:96px;
  top:-1px;
  margin:0;
  padding:4px;
  margin-top:-4px; /* pour rattrapper le niveau avec level0 et que les deux textes soient alignés */
  border:1px solid #804000;
  background-color:#E6FFFF;
  border-radius:8px;
  white-space: nowrap;
  z-index:999;
  }
.level2 {
  margin-left:-8px;
  }
.button {
  list-style-type:none;
  position:relative;
  width:96%;
  padding:2px;
  margin:0;
  border-radius:6px;
  }
.button:hover,.button_dom:hover,.sqbutton:hover {
  background-color:#AAFFFF;
  }
.button_in a:hover { /* a dans les boutons */
  text-decoration:none;
  }
.small_button { /* petit bouton carré, utilisé dans l'indexe des photos de classes et la page du théâtre */
  display:inline-block;
  background-color:#FFFFFF;
  border:1px solid #804000;
  border-radius:4px;
  padding:6px;
  }
li:hover ul.level1, li li:hover ul.level2 {
  display:block;
  }
#links, #ad { /* #links est le pendant de #menu */
  background-color:#E6FFFF;
  border:1px solid #804000;
  border-radius:8px;
  padding-top:16px;
  padding-bottom:16px;
  margin-bottom:8px;
  }
#burger {
  position:fixed;
  top:0;
  left:0;
  margin-top:4px;
  margin-left:4px;
  visibility:hidden;
  }

/* ---------- link ---------- */
a, .lnk {
  color:#804000;
  font-weight:bold;
  text-decoration:none;
  cursor:pointer;
  }
a:hover, .lnk:hover, .ttip:hover {
  color:#0040FF;
  text-decoration:underline;
  }
a:hover sup {
  color:#0040FF;
  }
a:focus {
  outline:0;
  }
.plnk { /* pseudo-link */
  list-style-type:none;
  position:relative;
  padding:2px;
  margin:0;
  border-radius:6px;
  color:#804000;
  font-weight:bold;
  cursor:default;
 }
#tooltip {
  position:absolute;
  visibility:hidden;
  max-width:64ch;
  text-align:left;
  background-color:#FFFBE7;
  padding:4px;
  font-weight:bold;
  border:1px solid #804000;
  border-radius:4px;
  z-index:9999;
  }
.ttip {
  color:#804000;
  cursor:pointer;
  }

.lgd {
  font-size:80%;
  font-weight:bold;
  padding-top:8px;
  padding-bottom:8px;
  }
.inv {
  width:100%;
  height:100%;
  background:none;
  border:none;
  text-align:center;
  vertical-align:middle;
  }
.an,.event { /* pour les pages presse et évènements */
  text-align:center;
  font-size:120%;
  font-style:italic;
  padding-bottom:6px;
  }
#card {
  margin:auto;
  margin-top:32px;
  padding:16px;
  background:#ffffff;
  border:1px solid #804000;
  border-radius:32px;
  margin-bottom:32px;
  box-shadow:8px 8px 16px #000000;
  position:relative; /* deux lignes ajoutées pour que la fiche passe au-dessus du menu de droite en agrandissant */
  z-index:1;
  }
#xmas {
  display:inline-block;
  border:0px solid;
  text-align:left;
  margin-bottom:24px;
  padding-left:48px;
  }
:focus {
  /* background:#E6FFFF; */
  }

#draggable {
  cursor: url('../pics/4arrow.png') 24 24, pointer;
  z-index:99;
  }
.private {
  color:#006666;
  }