/* Feuille de style CSS du site de l'ANGER */

/*****Général*****/
* {
	margin: 0;
	padding: 0;
}

body {
	background-image: url("images/fond_ecran.jpg");
	background-attachment: fixed;
	color: rgb(0,0,0);
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.1em;
}

header {
	position : fixed;
	top: 0px;
	height: 82px;
	width:100%;
	background-color : yellow;
	background-image: url("images/entete.png");
	background-position: top center;
	background-repeat : no-repeat;
	z-index: 2;						/* afin d'éviter les recouvrements */
}

footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	text-align: center;
	background-color: rgb(0,0,255); /* bleu */
	color: rgb(255,165,0); 	/* orange */
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-style: italic;
}

nav {
	position: fixed;			/* sous le bandeau */
	top: 83px;
	width: 100%;
	z-index: 2;						/* afin de recouvrir ce qu'il y a en-dessous */
}

section {								/* sous le menu */
	position: absolute;
	top: 115px;
	width: 100%;
}

aside {
	display: inline-block;
	position: fixed;
	right: 2px;
	width: 25%;
	background-image: url("images/fond_aside.jpg");
	border: 2px solid orange;
	border-radius: 12px;
	padding: 3px;
	font-size: 0.75em;
}

article {
	display: inline-block;
	width: 	72%;
	margin-left: 2px;
	margin-bottom: 40px;
	background-image: url("images/fond_article.jpg");
	border: 2px solid darkgreen;
	border-radius: 12px;
	padding: 0.5em;
}

img {
	display: block;
	margin: 6px auto;			/* l'image est centrée */
	max-width: 90%;
	border: 5px outset white;
}

table {
	background-color: rgb(190,226,190);
	border-collapse: collapse;
	border-radius: 6px / 3px;
	margin: 0.5em auto;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.9em;
}

caption {
	background-color:rgb(51,51,102);
	color:rgb(255,255,0);
	font-size:1.1em;
}

th {
	background-color: rgb(153,0,102);
	font-size: 0.9em;
	text-align: center;
	color:rgb(204,255,102);
	border: 1px solid yellow;
	padding: 0.4em;
}

tbody th {
	background-color: rgb(94,206,45);
	color: darkred;
}

td {
	border: 1px solid black;
	padding: 0.5em;
	text-align: center;
}

tfoot {
	font-style: italic;
	background-color: rgb(24,187,74);
	color: white;
}

.image_inline{
	display: inline;		/* l'image n'est plus centrée */
	margin: 4px;
}

.image_g {
	float: left;		/* l'image est à gauche du texte */
	margin-right: 2em;
	margin-bottom: 1em;
}

.image_fr {
	width: 650px;		/* carte de France */
}

.image_reg {
	width: 350px;		/* carte régionale */
	margin: 0 auto;
	margin-top: 25px;
	display: block;
}

.image_rss {
	float: left;
	border: 0;
}

.image2 {
	width: 400px;
}

.conteneur {
	text-align: justify;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	width: 95%;
	margin: 2px auto;
	padding: 0.7em;
	background-color: rgb(255,227,191);
	border-radius: 12px;
}

.c_reg {
	min-height: 470px;
}

.infos {
	text-align: center;
	width: 45%;
	margin: 2px auto;
	background-color: rgb(176,239,255);
	padding: 0.7em;
	border-radius: 7px;
}

.decale {											/* décalage des ancres vers le haut afin de se positionner sous le menu */
	position: relative;
	bottom: 114px;
}

.sommaire {
	position: absolute;
	margin-bottom: 40px;
}

.col_mini {
	min-width: 8em;
}

.dep {
	margin: auto;
	margin-top: 25px;
}

ol, ul {
	padding-left: 3em;
	padding-top: 0.4em;
	text-align:left;
}

ul {
	list-style-type: square;
}

hr {
	margin: 1em;
	clear: both;
}

.hr_30 {
	width: 30%;
	margin: auto;
}

div {
	clear: both;
}

/*****Titres*****/

h1 {								/* gros titre */
	color: rgb(113,56,0);
	font-size: 2em;
	text-align: center;
	border: double rgb(102,51,0);
	margin: 8px auto;
	width: 65%;
	background-color: rgb(212,208,200);
	border-radius: 12px / 6px;
}

h2 {								/* sous-titre */
	color: rgb(113,56,0);
	font-size: 1.2em;
	text-align: left;
	text-decoration: underline;
	margin: 0.5em;
	padding: 0.5em;
	width: auto;
	background-color: rgb(212,208,200);
}

h3 {								/* sous-titre encadré */
	color: rgb(227,30,23);
	font-size: 1.5em;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;
	border: 3px groove rgb(102,51,0);
	margin: 0.5em auto;
	margin-top: 0;
	padding: 0.2em;
	width: 50%;
	background-color: rgb(222,224,165);
	border-radius: 7px;
	box-shadow: 6px 6px 6px rgb(150,104,20);
}

h4 {								/* sous-titre secondaire */
	font-size: 1em;
	color: rgb(77,112,58);
	text-align: left;
	text-decoration: underline;
	margin-top: 1em;
	clear : both;
}

h5 {								/* remarque pour attirer l'attention */
	color: rgb(227,30,23);
	font-size: 1.5em;
	text-align: center;
	border: dashed rgb(102,51,0);
	margin: 0.7em auto;
	width: 50%;
	background-color: rgb(191,224,28);
	border-radius: 7px;
}

figcaption {
	font-style: italic;
	color: darkred;
}

/*****Texte*****/

.centre {
	text-align: center;
}

.droite {
	text-align: right;
}

.justifie {
	text-align: justify;
}

.souligne {
	text-decoration: underline;
}

.clignotant {
	text-decoration: blink;
}

.rouge {
	color: red
}

.blanc {
	color: white;
}

.italique {
	font-style: italic;
}

.gros {
	font-size: larger;
}

.gras {
	font-weight: bold;
}

.dessous {
	clear: both;
}

/*****Liens*****/

a:link {
	color: rgb(0,0,128);
}
a:visited {
	color: rgb(0,87,201);
}
a:hover, a:focus {
	text-decoration: underline overline;
	color: rgb(255,97,9);
}
a:active {
	color: rgb(0,87,201);
	text-decoration: overline;
}

/* ==================================================================================== */

/* MENU déroulant */

#menu, #menu ul {           /* le menu principal */
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	list-style-type: none;
	line-height: 1.5em;
}

#menu	{
	font-family: Geneva, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1em;
}

#menu li {
	border: 2px solid rgb(68,34,51);
	width: 19.5%;					/*------largeur des cellules adaptée à l'écran-------*/
	float: left;
	margin-right: 1px;
	background-color: rgb(221,204,170);
	padding: 0;
}

#menu li a {              		    /*------pour les liens de premier niveau-------*/
	display: block;    		 			 		/*------pour mettre mes liens en block------*/
	text-decoration: none;          /*-----pas de décoration pour les liens-----*/
	color : rgb(31,23,0);
}

#menu li a:hover {				 /*-------une couleur de fond au survol des liens-------*/
	background-color: rgb(119,88,0);
	color: rgb(221,204,170);
}

/*---------------fin du menu de premier niveau-------------*/

#menu ul li ul li {			/*-----les listes de deuxième niveau-------*/
	list-style-type: none;
	border: 1px solid rgb(68,34,51);
	margin: 0;
	margin-top: 1px;
	background-color: rgb(221,204,170);
	width: 19.4%;
}

#menu ul li ul {  			    /*----pour le menu déroulant-------*/
	display: none;          /*------pour le faire disparaitre------*/
	position: absolute;
}

#menu ul li:hover ul {		/*------il réapparaît au survol du titre-----*/
	display:block;
	min-height: 0;
}
#menu ul li:hover ul li {	/*------------sous-menus en colonnes-----------*/
	float: none;
}

#menu li ul li a:visited {	/*------grisé pour les liens visités (Firefox+Opera)-------*/
	color: rgb(255,140,0);
	color: rgba(31,23,0,0.6);
}

/*====================================================================================*/

.bouton_menu {						/* menu interne à la page */
	border: 2px solid rgb(68,34,51);
	background-color: rgb(221,204,170);
	padding: 0;
	font-family: Geneva, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1em;
	border-radius: 12px / 6px;
	margin: auto;
	margin-top: 1px;
	max-width: 600px;
}

.bouton_menu a {
	display: block;
	text-decoration: none;
	color : rgb(31,23,0);
	text-align: center;
	padding: 0.25em;
}

.bouton_menu a:visited {
	color: rgb(255,140,0);
	color: rgba(31,23,0,0.6);
}

.bouton_menu a:hover {
	background-color: rgb(119,88,0);
	color: rgb(221,204,170);
}

.soluce {
	width: 300px;
}

/*==================================== divers ===============================*/

.botablo td {
	background-color: rgb(204,153,52);
	font-weight:700;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

legend {
	background-color:rgb(183,241,80);
	color:#FF0033;
}

mark {
	background-color: lightyellow;
	padding: 3px;
}

#acrostiche p
	{
	padding-left: 30%;
	}
#acrostiche p:first-letter
	{
	font-size:1.5em;
	color: red;
	text-shadow: -0.3em -0.3em orange;
	padding-right: 3px;
	}

/*========================== solutions énigmes ==========================*/

div.alerte {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

div.alerte:target {
  display: table;
}

div.alerte figure {
  display: table-cell;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

div.alerte figure figcaption {
  display: block;
  margin: auto;
  padding: 8px;
  background-color: #ddbbff;
  height: 250px;
  position: relative;
  overflow: auto;
  border: 1px #000000 solid;
  border-radius: 10px;
  text-align: justify;
  font-size: 1.1em;
}

div.alerte figure .fermemsg {
  display: block;
  margin: auto;
  height: 0;
  overflow: visible;
  text-align: right;
  z-index: 2;
  cursor: default;
}

div.alerte figure .fermemsg, div.alerte figure figcaption {
  width: 300px;
}

.fermemsg::after {
  content: "\00D7";
  display: inline-block;
  position: relative;
  right: -20px;
  top: -10px;
  z-index: 3;
  color: #ffffff;
  border: 1px #ffffff solid;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  margin: 0;
  background-color: #000000;
  font-weight: bold;
  cursor: pointer;
}

.fermemsg::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.75;
}