/* CSS Document */
*{
margin: 0em;
padding: 0em;
}
html {
font-size:100%;
height: 100%;
}
body
{
font-size: 1em;
font-family: arial, helvetica, verdana, sans-serif;
color: black;
font-weight: bold;
background: #FFF;
height: 100%;
}
#global {
width:960px;
width:80%;
max-width: 1000px;
min-width: 700px;
margin:0.8em auto;
padding:0em;
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
background-color:white;/* #0CF */
border:1px solid #6d7673;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-ms-border-radius:10px;
box-shadow:0 0 5px 5px #0CF;
-moz-box-shadow:0 0 5px 5px #0CF;
-webkit-box-shadow:0 0 5px 5px #0CF;
-ms-box-shadow:0 0 5px 5px #0CF;
behavior: url("ie/PIE.php");
}
/* Contenu principal */
.accueildescription {
width: 97%; /* On a indiqué une largeur (obligatoire) */
margin: auto;
height:auto;
overflow: hidden; 
margin-top: 1em; /* On peut donc demander à ce que le bloc soit centré avec "auto" */
margin-bottom: 1em;
background-color: #CCCCFF;
border: 1px blue solid;
border-radius: 10px;
-moz-border-radius: 10;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
text-align: left ;behavior: url("ie/PIE.php");
}
/***********************************************/
/*pour les liens externe */
/***********************************************/
a.lien_ext:after { 
content: "\0000a0[\2197]"; 
}
a:focus/*ca retire le cadre autour des liens externes */
{
	outline: 0;
	text-align: center;
} 
/***********************************************/
/* ENTETE */
/***********************************************/
#header {
height: 100px;
text-align: center;
color: #000;
font-weight: bold;
border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
-ms-border-radius:10px 10px 0 0px;
behavior: url("ie/PIE.php");
}
/***********************************************/
/* PARTIE CENTRALE ACCUEIL*/
/***********************************************/
div#blocnews {
float:right;
width:230px;
height:430px;
background-color:#FF3300;
}
/***********************************************/
/* PIED DE PAGE */
/***********************************************/
#pied {
height: 70px;
padding: 5px;
text-align: center;
margin-top: 2px; 
font-weight: bold;
clear:both;
border-radius:0px 0px 10 10px;
-moz-border-radius:0px 0px 10 10px;
-webkit-border-radius:0px 0px 10 10px;
-ms-border-radius:0px 0px 10 10px;
background-color:#0CF;/* #0CF */
behavior: url("ie/PIE.php");
}
/***********************************************/
/* titre du site haut de page */
/***********************************************/
#titre{
font: 25px arial, helvetica, verdana, sans-serif;
color: #000;
font-weight: bold;
text-align: center;
line-height: 2em;
}
/***********************************************/
/* Line séparateur */
/***********************************************/
.spacer {
background-color: #FFCC33;
clear: both;
border: 1px solid #000;
}
/********?????***************************************/
/* actualisation est mise à jour  */
/***********************************************/
.newstitre {
width: 96%; 
margin: auto;
padding: 5px;
color: #000;
text-align: center;
font-weight: bold;
background-color:#0CF;/* #0CF */
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-ms-border-radius:10px;
behavior: url("ie/PIE.php");
}
/********?????***************************************/
/* titre des chapitre  */
/***********************************************/
h1{/* titre dans header  */
font-size: 1.5em;
line-height: 1.1em;
margin-top: 0.3em;
}
h4{
color: #0000CC;
font-weight: bold;
margin-top: 0px;
}
h5{
color: #000066;
font-weight: bold;
}
h2{
color: #009900;
font-weight: bold;
padding: 10px;
}
h3{
color: #900;
font-weight: bold;
padding: 10px;
}
/********?????***************************************/
/*titre des paragraphes */
/***********************************************/
p { 
margin-top: 0px;
padding: 0px 10px 0px 10px;
}
span {
font-size: 0.6em;	  
}
/***********************************************/
/* la ligne de séparation */
.spacer {
background: #FFCC33;
clear: both;
}
/********?????***************************************/
/* GALERIE PHOTO  */
/***********************************************/
dl.gallery{
float:left;
border: 1px solid #000;
background-color: #93f;
width: 114px;
text-align: center;
padding: 10px;/* marge cadre  */
margin: 0.5em;/* marge entre les photos 1em;  */
}
.gallery dt { 
font-weight: bold; 
}
.gallery dt img
{
border: 1px solid #000;
width: 111px;
height: 100px;
}
.gallery dd
{
margin: 0;
padding: 0;
}
/********?????***************************************/
/*titre des paragraphes */
/***********************************************/
p { 
font-weight: bold;
padding: 10px;
}
/***********************************************/
/* les vignettes dans les pages histoire*/
/***********************************************/
p.imaghistg { 
float: left;
}
a img/* supprime la bordures bleu autour des vignettes*/
{
border: none ;
}
.imagtextcentre { /* les vidéos Legion images textes centré*/
text-align: center;
}
/**********************************************/
/* les tableaux*/
/***********************************************/
table {
border: medium solid #6495ed;
border-collapse: collapse;
width: 95%;
margin: auto;
}
th {
font-family: monospace;
border: thin solid #6495ed;
background-color: #D0E3FA;
vertical-align: baseline top;
}
td {
font-family: sans-serif;
border: thin solid #6495ed;
background-color: #ffffff;
padding-left: 15px;
}
caption {
font-family: sans-serif;
font-size: 1em;
color: #60F;
font-weight: bold;
}
.liens1 {
float: center;
margin: 20px 50px;
padding: 5px;
background-color: #FFFF99; /*#FF6666*/
color: #000;
font-weight: bold;
text-align: left ;
}
.liens2 {
float: center;
margin: 20px 50px;
padding: 5px;
background-color: #CCCCFF; /*#FF6666*/
color: #000;
font-weight: bold;
text-align: left ;
}
/***********************************************/
/*  Menu Navigation Mobile invisible*/
/***********************************************/
#nav {display:none;} 
/***********************************************/
/* Menu Navigation */
/***********************************************/
#navigation{height:2em;font-size:0.9em;}/* 250px*/
#navigation .menu_div{position:relative;}
#navigation .menu_ul{
}
#navigation .menu_div ul{
width:98%;
margin: auto;
height:30px;
margin-top:20px;/* 50 Feuille de styles mobile*/
background:#0CF; /* Old browsers #7d7e7d*/}
#navigation .menu_div ul li ul{display:none;
}
#navigation .menu_div ul li{
float:left;/* ajouter*/
position:relative;list-style:none;
height:30px;
}
#navigation .menu_div ul li a{
display:block;
height:23px;
padding:7px 5px 0px 5px;/* marge titre*/
text-decoration:none;
color:#000;
}
#navigation .menu_div ul li:hover a{
background:#F00;/* orange*/
height:23px;padding-top:4px;}
#navigation .menu_div ul li:hover ul{display:block;position:absolute;z-index:100;top:+9px;left:0%;margin-left:+9px;/* top:-22px;left:50%;margin-left:-22px*/
}
#navigation .menu_div ul li ul:before{content:"";position:absolute;top:-5px;left:10px;width:0px;height:0px;}

#navigation .menu_div ul li ul{width:auto;height:auto;padding:5px 0;
border:1px solid #000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-ms-border-radius:10px;}
#navigation .menu_div ul li ul li{float:none;white-space:nowrap;height:18px;}
#navigation .menu_div ul li:hover ul li a{
background:none;font-size:0.9em;height:15px;padding:2px 20px 2px 10px;border:none;}
/***********************************************/
/* media */
/***********************************************/
 /***********************************************/
/* media */
/***********************************************/
 /***********************************************/
/* media */
/***********************************************/
@media screen and ( max-device-width : 640px )
 {
 *{
margin: 0em;
padding: 0em;
}
html {
font-size:100%;
height: 100%;
}
body {
width : auto;
background-color: #FF6;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
}
#global {
width : auto;
max-width: none;
min-width: 0em;
background-color: FFF;
}
header{
width: auto;  
margin: 0.4em 0.2em 0.4em 0.2em;
height:auto;
overflow: hidden; 
}
h1 {
font-size: 1.2em;
font-weight: bolder;
text-align: center; 
line-height: 1.3em;
margin-top: 1em; 
}
a img { /* supprime la bordures bleu autour des vignettes*/
border: none ;
}
img { max-width: 100%;}/* pour images historique */
/***********************************************/
/* PIED DE PAGE */
/***********************************************/
#pied {
width: auto;
height: auto; }
/***********************************************/
/*titre des pages une autre*/
/***********************************************/
br.clr {
clear:both;
visibility: hidden; 
 }
/***********************************************/
/* Multilangue sur toutes les page*/
/***********************************************/
#navigation, span {
display:none;/* invisible */
}
/***********************************************/
/*page d'accueil */
/***********************************************/
.accueildescription {
width: auto;
margin: 1em 0.2em 1em 0.2em; 
}	
p.imaghistg { 
float: left;
background-image:  ("url imaccueil/piet0.jpg");
margin-right:3em;
margin-left:3em; 
}	
/***********************************************/
/* Menu Navigation Mobile*/
/***********************************************/
a:link{ background:#CCC;
}
#nav {display:block;}/* visible Mobile*/
#nav { 
margin: 0em;
margin-top:.9em;
padding: 0em;
overflow: hidden;
list-style: none;
background: #0CF;
color: #000;
font: "Trebuchet MS", sans-serif;
font-size:1.1em;
}
#nav a, #nav span {
float: left;
width: 100%;
height:1.5em;
overflow: hidden;
margin:0em;
padding:0em;
line-height: 1.5em;
color: #000;
text-decoration: none;
border:1px solid #000;
background: #0CF;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-ms-border-radius:10px;
}
#nav a:hover, #nav a:focus, #nav a:active {
text-decoration: underline;
}
#nav .subMenu {
float: left;
overflow: hidden;
width: 100%;
list-style:none;
font-size: 1em;
line-height: 1em;
margin: 0em;
padding:0em;
}
#nav ul.subMenu a {
height:1.5em;
overflow: hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-ms-border-radius:10px;
background: #9F3;
margin:0em;
padding:0em;
}

/***********************************************/
/* les tableaux*/
/***********************************************/
table {
table-layout: fixed;
border: 1px solid #000;
border-collapse: collapse;
font-family: sans-serif;
word-wrap: break-word; /* passage à la ligne forcé */
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
}
th {
table-layout: fixed;
border: thin solid #FF0000;
background-color: #FFCC33;/* maron*/
vertical-align: baseline top;
word-wrap: break-word; /* passage à la ligne forcé */
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
}
td {
table-layout: fixed;
border: 1px solid #000;
background-color: #FFCC99;
padding: 0.2em;
word-wrap: break-word; /* passage à la ligne forcé */
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
}
caption {
table-layout: fixed;
font-size: 1em;
color: #60F;/* couleur du titre*/
word-wrap: break-word; /* passage à la ligne forcé */
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
}
/* Un message personnalisé */
 body:before {
content: "Version mobile du site";
display: block;
color: #black;
text-align: center;
font-style: italic;
 }
.fotorama { max-width: 100% } 
 }
@media  screen and (max-width:680px) and (orientation: landscape) {
  body {
   -webkit-text-size-adjust: 70%;
  }
}