/***
On peut utiliser indifféremment id et class (syntaxe #nom_id et .nom_class), mais...
* un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page
* une class peut caractériser plusieurs objets identiques
Utilisez les id en priorité lorsque vous le pouvez et les class lorsque vous ne pouvez pas.
***/

.corner_tl {background: url(images/coin_tl.png) no-repeat top left;}
.corner_tr {background: url(images/coin_tr.png) no-repeat top right;}
.corner_bl {background: url(images/coin_bl.png) no-repeat bottom left;}
.corner_br {background: url(images/coin_br.png) no-repeat bottom right;}

button.print {
    font-size: x-small;
}

#page {
    margin: 20px 80px 20px 80px;
    background-color: white;
    background-repeat: repeat-x;
    border: 0px;
    color: #000000;
    font-family: verdana, sans;
}

#header {
    text-align: center;
    height: 110px;
/* border-bottom: 1px solid #cccccc; */
}

#footer {
    clear: both;
    text-align: center;
    border-top: 1px solid #cccccc;
    color: gray;
    font-size: x-small;
}

#content {
    position: relative;
    margin: 0px 50px 20px 200px;
    padding-right: 10px;
    min-height: 400px;
}

#navigation {
    float: left;
    position: fixed;
    top: 100px;
    left: 120px;
    width: 145px;
    padding-right: 10px;
    background-image: url("images/navstripe.png");
    background-repeat: no-repeat;
    background-position: top right;
}

#navigation a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 4px;
    font-size: small;
    padding-left: 16px;
}

#navigation a:hover {
    color: #ff3366; /* Red1 */
    background-image: url("images/go.png");
    background-repeat: no-repeat;
    background-position: center left;
}

.invisible {
    text-decoration: none;
    color: black;
}

#logo {
    border: none;
    margin-top: 10px;
    margin-left: 50px;
    float: left;
}

#note {
    font-size: small;
}

body {
    background-color: #31506F;
}

h1 {
    /* font-family: "GauntletClassic_TB.ttf", monospace; */
    /* font-size: 40px; */
    font-family: 'rope.ttf';
    font-size: 80px;
    white-space: nowrap;
    text-align: center;
    position: relative;
    padding: 0px;
    margin: 0px;
}

h2 {
    border-bottom: 1px solid #cccccc;
}

hr {
    border: 0 none;
    border-top: 1px solid #cccccc;
    border-bottom: 0px solid #cccccc;
    height: 1px;
}

img {
    border: none;
}

code {
    font-family: courier, courier-new, fixed;
    white-space: pre;
}

tt {
    font-size: 50%;
}

blockquote,fieldset {
    background-color: #f0f0f0;
    padding: 6px;
}

/* Tableau invisible */
table#invisible {
    border-style: none;
    border-collapse: collapse;
    empty-cells: show;
    text-align: left;
    padding: 3px;
}

/* Tableau de style classique */
table.classic {
    border-collapse: collapse; /* separate */
    border-style: solid;
    border-spacing: 2px;
    empty-cells: show;
    width: 90%;
}
table.classic th {
    padding: 9px 9px 9px 9px;
    border-style: solid;
    border-width: 1px;
}
table.classic td {
    padding: 9px 9px 9px 9px;
    border-style: solid;
    border-width: 1px;
}
table.classic caption {
    font-style: italic;
    font-size: 150%;
    padding-bottom: 5px;
}

/* Tableau sans bords formant une croix */
table.croix {
    border-width: 1px 1px 1px 1px;
    border-spacing: 2px;
    border-style: hidden hidden hidden hidden;
    border-collapse: collapse;
    empty-cells: show;
}
table.croix th {
    border-width: 1px 1px 1px 1px;
    padding: 5px 5px 5px 5px;
    border-style: inset inset inset inset;
    border-collapse: collapse;
}
table.croix td {
    border-width: 1px 1px 1px 1px;
    padding: 5px 5px 5px 5px;
    border-style: inset inset inset inset;
    border-collapse: collapse;
}

/* Miniature */
span.miniature img {
    margin: 3px;
    border: 1px solid #ffffff;
}
span.miniature a:hover img {
    border: 1px solid #ff3366; /* Red1 */
}

/* Photo */
div.center {
    text-align: center;
}
img.photo {
    max-width: 90%;
}

/* Topo */
div.topo {
    text-align: center;
/*
  float: left;
  border: thin silver solid;
  margin: auto;
  padding: auto;
  width: 40%;
  */
}
div.topo p {
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
}
div.topo img {
    width: 40%;
}

div.panel2 {
    display:none;
}
/*** CSS Display - Block and Inline Elements ***
     A block element is an element that takes up the full width available, and has a line break before and after it.
     Examples of block elements: <h1> <p> <div>
     An inline element only takes up as much width as necessary, and does not force line breaks.
     Examples of inline elements: <span> <a>
***/