/* -------------------------------------------------------------------------- *
 *                      _________   _____    _______                          *
 *                     /   _____/  /  _  \   \      \                         *
 *                     \_____  \  /  /_\  \  /   |   \                        *
 *                     /        \/    |    \/    |    \                       *
 *                    /_______  /\____|__  /\____|__  /                       *
 *                           \/         \/         \/                         *
 *                                                                            *
 * CSS du site de la Societe d'Astronomie de Nantes                           *
 * -------------------------------------------------------------------------- */

/*           /!\ CE FICHIER EST EN UTF-8 ET DOIT RESTER EN UTF-8 /!\          */


/* ************************************************************************** *
 * css commun a la version mobile et bureau                                   *
 * ************************************************************************** */

@font-face {
	font-family: san;
	src: url(../../css/fonts/san.eot);
	src: url(../../css/fonts/san.ttf);
}

html, body {
	background-color: #2e2e2e;
	height: 100%;
	margin: 0;
	font-family: sans-serif;
}

* {
	        transition: all .5s linear;
	     -o-transition: all .5s linear;
	    -ms-transition: all .5s linear;
	   -moz-transition: all .5s linear;
	 -khtml-transition: all .5s linear;
	-webkit-transition: all .5s linear;
}

#bg_image {
	max-width: 1500px;
	margin: 0px auto; /* auto permet de centrer la boite page horizontalement */
	position: relative;
	background: transparent;
}


.mobile { display: none; }

/* -------------------------------------------------------------------------- *
 * les differents blocs de la page ------------------------------------------ *
 * -------------------------------------------------------------------------- */

/* ensemble contenant toute la page (--en-tete/header-- --ligne de navigation/aside-- --article de la page/article-- --pied de page/footer ) */
#page {
	margin: 0px auto;
	position: relative;
}
#aside, #nav, .article, #footer, .demiarticle {
	border: 1px solid #000;
}
#aside, #nav, #footer, #header {
	background-color: #2e2e2e;
}
#nav, .article, #footer, .demiarticle {
	        border-radius: 3px;
	     -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

/* en-tete ------------------------------------------------------------------ */
#header {
	height: 100px; /* hauteur de la banniere */
	margin-bottom: 0px;
}
#header img#logo { margin: 5px 0px 0px 5px; }
#header #flam {
	position: absolute;
	right: 10px;
	margin-top: 50px;
}

/* ligne de navigation ------------------------------------------------------ */
#aside {
	max-width: 100%;
	height: 20px;
	margin-top: -16px; margin-bottom: 0px;
	padding-bottom: 10px;
	border-top: none;
}
#aside p /* contenu du fil d'ariane */ {
	padding: 7px 0.5em 0 0;
	color: #aaa;
	font-size: 0.8em;
}
#aside img {display: inline;}
#aside a { color: #3aF; text-decoration: none; }
#aside a:before { color: #aaa; content: " > "; }
#aside a:first-child:before { content: " "; }
#aside .ico:before {content: "";}
.ico { display: inline-block; float: right; }
.ico span {display: none; font-size: 0.9em;}
.ico:after {
	display: block;
	margin-top: -0.1em;
	font-size: 1.4em;
	font-family: san;
	font-style: normal
}
.ico:hover:after {color: #f83;}
.adh, .con {
	font-family: san;
}
.adh:after { content: "a"; font-size: 2em; margin-top: -0.2em;}
.con:after { content: "c";}

/* pied de page ------------------------------------------------------------- */
#footer {
	position: relative;
	width: 100%;
	bottom: 0;
	height: 60px;
	font-size: 1em;
}
#footer a {
	color: #3aF;
	display: inline-block;
	font-style: normal;
	text-decoration: none;
	vertical-align: middle;
	padding: 0 0.3em;
}
#footer a:before {
	content: "|";
	color: #aaa;
	margin-right: 1em;
}
#footer a:first-child:before {
	content: "";
}
#footer a:hover, #footer a:hover:after {color: #f83;}
.cdu {
	float: right;
	margin-top: 1.6em;
	font-size: 0.8em;
}
.cdu:before {content: "" !important;}

/* article de la page ------------------------------------------------------- */
.article, .demiarticle {
	font-size: 1em;
	padding: 0px;
    background-color: #f0f0f0;
}

/* -------------------------------------------------------------------------- *
 * style du corps de texte -------------------------------------------------- *
 * -------------------------------------------------------------------------- */

/* il ne faut pas sortir du cadre de des balises decrites ci-dessous, il ne me semble pas utile de redefinir une infinite d'autres themes, ce qui nuirait a l'unite du visuel en revanche si vous remarquer un manque merci de me contacter je ferais en sorte de completer cette absence */

/* -------------------------------------------------------------------------- *
 * les liens                                                                  *
 * -------------------------------------------------------------------------- */
a {
	border: 0;
	font-style: italic;
	color: #185AB4;
	text-decoration: underline;
}
a:hover, a:active { color: #f83; }
/* liens avec une icones automatique pour les pdf et autres ----------------- */
        /* pour les pdf */
a[href$=".pdf"] {
	background: url('../../img/ico/pdf.gif') no-repeat right; padding-right: 18px;
}
        /* pour les liens externes en general */
a[href^="http://"] {
	background: url('../../img/ico/ext.gif') no-repeat right; padding-right: 15px;
}
        /* pour les liens vers wikipedia francais */
a[href^="http://fr.wikipedia.org"] {
	background: url('../../img/ico/wiki.gif') no-repeat right; padding-right: 15px;
}
        /* pour les liens dont on precise la langue, ici l'anglais, on ecrit le nom de langue dans une icone */
a[hreflang="en"] {
	background: url('../../img/ico/ang.gif') no-repeat right; padding-right: 15px;
}
        /* pour les mp3 */
a[href$=".mp3"], a[href|="charg_audio_conf.php?ref_bib"] {
	background: url('../../img/ico/mus.gif') no-repeat right; padding-right: 15px;
}

/* -------------------------------------------------------------------------- *
 * debut code pour infobulle                                                  *
 * permet de mettre un image en plus grand dans l'infobulle ou du texte pour  *
 * preciser un lieu le photographe ce qu'il a bu juste avant de prendre la    *
 * photo...                                                                   *
 *                                                                            *
 * utilisation des infobulles :                                               *
 * <balise class="info" >                                                     *
 *     ce que vous voulez (une image ou autre)                                *
 *         <span>contenu de l'infobulle</span>                                *
 * <balise>                                                                   *
 *                                                                            *
 * remarque :                                                                 *
 * il y a le meme principe pour les balises <q> et <abbr> pour mettre         *
 * reciproquement une citation ou une abreviation                             *
 * -------------------------------------------------------------------------- */
.info {
	position: relative;
	text-decoration: none;
	border: none;
	color: #000;
	font-style: none;
}
.info span { display: none; } /* on masque l'infobulle */
.info:hover {
	background: none; /* correction d'un bug IE6 */
	cursor: help; /* on change le curseur par defaut en curseur d'aide */
}
.info:hover span {
	display: block; /* on affiche l'infobulle */
	position: absolute;
	background: #cacafc;
	color: #000;
	padding: 10px;
	border: 1px solid #333355;
	border-left: 4px solid #333355;
	z-index: 3;
	min-width: 200px;
	max-width: 800px;
	        border-radius: 3px; /* opera firefox4+ chrome */
	     -o-border-radius: 3px; /* opera                  */
	    -ms-border-radius: 3px; /* ie9 et 10              */
	   -moz-border-radius: 3px; /* firefox3.6 et +        */
	-webkit-border-radius: 3px; /* safari chrome          */
}

/* retour en haut ----------------------------------------------------------- */
.toup {
	text-decoration: none;
	font-style: normal;
	margin-right: -2em;
}
.toup span { display: none;}
.toup:before {
	color: #3af !important;
	font-size: 3em;
	content: " ⇧ " !important;
}
/.toup:before:hover {color: #f83;}

/*trait de delimitation ----------------------------------------------------- */
hr { color: #343454; background: #343454; width: 20%; }

/* -------------------------------------------------------------------------- *
 * les titres                                                                 *
 * -------------------------------------------------------------------------- */
h1 {
	position: relative;
	color: #3f3f3f;
	background-color: #e0e0e0;
	text-align: left;
	font-size: 1.4em; font-weight: bold; font-variant: small-caps;
	margin: 0 0 1em 0;
	padding: 0.3em 0.4em 0.2em 1em;
	border-bottom: 2px solid #424242;
	        border-radius: 5px 5px 0px 0px;
	     -o-border-radius: 5px 5px 0px 0px;
	    -ms-border-radius: 5px 5px 0px 0px;
	   -moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
}
h2 {
	color: #2a2a2a;
	font-size: 1.2em; font-weight: bold;
	margin-left: 35px; margin-bottom: 1em;
}
h3 {
	color: #848484;
	font-size: 1em; font-weight: bold;
	margin: 1em 0px 1px 3px;
}
h4 {
	color: #848484;
	font-size: 1em; font-weight: bold; font-style: italic;
	margin-top: 1em; margin-bottom: 0;
}
h5 {
	color: #909090;
	font-size: 1em; font-weight: normal; font-style: italic;
	margin: 10px 0px 2px 35px;
}
h6 {
	color: #333355;
	font-size: 0.9em; font-weight: bold; font-style: normal;
	margin: 10px 0px 2px 40px;
}

/* -------------------------------------------------------------------------- *
 * mise en valeur du texte                                                    *
 *                                                                            *
 * remarque et mise en evidence du texte :                                    *
 * il est preferable d'utiliser l'emphase (balise <em>) que strong car la     *
 * mise en italic rompt moins la lecture que la mise en gras (emphase est ce  *
 * qui est utilise dans tout bon texte pour mettre en valeur un mot ou un     *
 * groupe de mots, et le strong est une maniere plus elegante de mettre une   *
 * balise <b>, cette derniere etant plus ou moins prohibe par w3c )           *
 *                                                                            *
 * a propose des balises <b> et <i> :                                         *
 * les balises <b> et <i> different de <em> et <strong> avec une lecture      *
 * d'ecran, <em> et <strong> appuient sur le groupe de mots mis entre ces     *
 * balises, voila pourquoi il est conseille d'utiliser ces balises.           *
 * la balise <i> a ete redefinie par le w3c comme etant un mot de langue      *
 * etrangere, il est donc possible d'utiliser l'attribut lang avec            *
 * -------------------------------------------------------------------------- */
em, i {
	color: #3f3f3f;
	display: inline;
	font-size: 1em; font-style: italic;
}
strong, b {
	color: #3f3f3f;
	display: inline;
	font-size: 0.9em; font-weight: bold;
}
mark.war, mark.inf, mark.not, .war mark, .inf mark, .not mark {
	color: #0f0f0f !important;
	background: #caa;
}
mark.inf, .inf mark { background: #aac; }
mark.not, .not mark { background: #ffa; }

/* -------------------------------------------------------------------------- *
 * abreviations, citations et sigles                                          *
 * -------------------------------------------------------------------------- */

/* abreviation et citation courte ------------------------------------------- */
/* abreviation s'utilise <abbr>al<span >annee lumiere</span></abbr> */
/* citation courte s'utilise <q>e=mc²<span>Albert Einstein</span></q> */
/* sigle s'utilise <abbr class="sigle" >SAN<span>Societe d'Astronomie de Nantes</span></abbr> */
    /* abreviation */
abbr {
	border-bottom: 1px dotted #343454;
	position: relative;
	color: #8895a6;
	text-decoration: none;
	font-style: none;
}
    /* citation courte, au milieu d'un paragraphe */
q {
	color: #8895a6;
	display: inline;
	position: relative;
	font-size: 1em; font-style: italic;
}
abbr.sigle {
	font-size: 0.9em; font-variant: small-caps; font-weight: bold;
	position: relative;
	display: inline;
	color: #3f3f3f;
}
abbr span, q span {
	display: none;
}
abbr:hover, q:hover {
	background: none;
	cursor: help;
}
abbr:hover span, q:hover span {
	display: block;
	position: absolute;
	min-width: 150px;
	top: 20px; left: 10px;
	background-color: #fff;
	color: #000;
	border: 1px solid #333355; border-left: 5px solid #333355;
	z-index: 3;
	padding: 2px 5px 2px 5px;
	        border-radius: 3px;
	     -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	        box-shadow: 1px 1px 13px #999;
	     -o-box-shadow: 1px 1px 13px #999;
	    -ms-box-shadow: 1px 1px 13px #999;
	   -moz-box-shadow: 1px 1px 13px #999;
	-webkit-box-shadow: 1px 1px 13px #999;
	font-weight: normal; font-style: italic; font-size: 0.9em; font-variant: normal; font-family: sans-serif;
}


/* -------------------------------------------------------------------------- *
 * bloc de citation                                                           *
 * -------------------------------------------------------------------------- */

/* s'utilise <blockquote>e=mc²<span>Albert Einstein</span></blockquote>      *
 * /!\ l'auteur de la citation est a la fin                                   */

blockquote, blockquote.gauche {
	display: block;
	border: 3px solid #333355;
	text-align: left;
	background: #fff;
	margin: auto !important; margin-bottom: 10px !important;
	width: 80%; max-width: 585px;
	padding: 5px 10px;
	        border-radius: 3px;
	     -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	        box-shadow: 1px 1px 13px #999;
	     -o-box-shadow: 1px 1px 13px #999;
	    -ms-box-shadow: 1px 1px 13px #999;
	   -moz-box-shadow: 1px 1px 13px #999;
	-webkit-box-shadow: 1px 1px 13px #999;
}
blockquote.droite { text-align: right !important; }
blockquote.centre { text-align: center !important; }
blockquote>span /* pour donner le nom de l'auteur de la citation /!\ mettre a a fin de la citation */ {
	bottom: 0px;
	color: #343454;
	display: block;
	text-align: right;
	font-size: 1em; font-weight: bold;
	background-color: #333355;
	margin: 5px -10px -8px -10px;
	padding-top: 2px; padding-right: 15px;
	color: #cacafc;
}
blockquote.war, blockquote.inf, blockquote.not {
	border: 1px solid #c00;
	background: #faa;
	color: #c00;
}
blockquote.inf { border-color: #00c; background: #aaf; color: #00c; }
blockquote.not { border-color: #fc0; background: #ffc; color: #fc0; }

/* -------------------------------------------------------------------------- *
 * listes                                                                     *
 * -------------------------------------------------------------------------- */

/* liste de definition ------------------------------------------------------ */
dl { padding: 10px; padding-left: 60px; }
dt { color: #6f85a6; display: list-item; list-style: circle; }
dd { color: #0f0f0f; padding-bottom: 5px; }

/* liste ordonnees et non-ordonnees ----------------------------------------- */
ul, ol { padding: 10px; margin-left: 30px; }
li ol { list-style: lower-alpha; }
li ul { list-style: circle; }

p+dl, p+ul, p+ol { margin-top: -10px; }

/* -------------------------------------------------------------------------- *
 * paragraphe                                                                 *
 * -------------------------------------------------------------------------- */
p {
	padding: 0px 25px 5px 25px;
	margin-bottom: 10px;
	text-align: justify;
	font-size: 1em;
	color: #0f0f0f;
	text-indent:1.2em;
}


/* pour les images, pour qu'elles apparaissent respectivement a gauche du texte ou a droite du texte */
.gauche {
	float: left;
	margin: 3px 5px 5px 3px !important; /* pour que le texte ne soit pas colle ni en haut ni sur le cote ni en bas de l'image */
}
.droite {
	float: right;
	margin: 3px 3px 5px 5px !important;
}
/* pour mettre une image au milieu */
.milieu {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
/* pour centrer un texte dans un paragraphe ou dans une cellule */
.center { text-align: center; }

.copyright {
	font-size: 0.7em;
	font-style: italic;
	color: #242424;
}

/* -------------------------------------------------------------------------- *
 * tableau                                                                    *
 * -------------------------------------------------------------------------- */

/* titre du tableau --------------------------------------------------------- */
caption {
	caption-side: top;
	text-align: left;
	padding-left: 20px; padding-top: 3px;
	margin-bottom: -4px;
	background-color: #333355;
	color: #cacafc;
	font-size: 1em; font-weight: bold;
	        border-radius: 3px;
	     -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
caption.bas { caption-side: bottom; }
table {
	background-color: #f0f0f0;
	border: 3px solid #333355;
	margin: auto; margin-bottom: 10px;
	width: 80%;
	        border-radius: 3px;
	     -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	        box-shadow: 1px 1px 13px #999;
	     -o-box-shadow: 1px 1px 13px #999;
	    -ms-box-shadow: 1px 1px 13px #999;
	   -moz-box-shadow: 1px 1px 13px #999;
	-webkit-box-shadow: 1px 1px 13px #999;
}
th /* cellule d'entete */ {
	color: #333355;
	font-weight: bold;
	background: #cacafc;
}
td {
	vertical-align: middle;
	border: 1px solid #333355; border-collapse: separate; border-spacing: 3px;
	background: #f0f0f0;
	        border-radius: 3px;
	     -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
td:hover { background: #cacafc; }

.ligne tr:hover td /*tableau ou les lignes seront en surbrillances au survol */ {
	background: #cacafc;
}

/* tableau pour faire deux colonnes (ou plus) A EVITER !!! */
/* les class .col et .col1 sont identiques en tous points sauf un, la class .col met un trait de separation entre les colonnes, la class .col1 n'en met pas */
.col, .col1 {
	background: transparent;
	border: none;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	font-size: 1.0em;
	        box-shadow: 0px 0px 0px #cacafc;
	     -o-box-shadow: 0px 0px 0px #cacafc;
	    -ms-box-shadow: 0px 0px 0px #cacafc;
	   -moz-box-shadow: 0px 0px 0px #cacafc;
	-webkit-box-shadow: 0px 0px 0px #cacafc;
}

.col td,.col1 td /* on enleve toutes les proprietes que l'on a rajoute sur les tableaux */ {
	vertical-align: top;
	border: none;
	border-left: 1px solid #333355;	/* on met une bordure a gauche pour separer les colonnes */
	        border-radius: 0px;
	     -o-border-radius: 0px;
	    -ms-border-radius: 0px;
	   -moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	font-size: 1.0em;
	width: 50%;
}
.col2 {
	background: transparent;
	border: none;
	margin-left: 0;
	margin-right: 0;
	font-size: 1.0em;
	        box-shadow: 0px 0px 0px #cacafc;
	     -o-box-shadow: 0px 0px 0px #cacafc;
	    -ms-box-shadow: 0px 0px 0px #cacafc;
	   -moz-box-shadow: 0px 0px 0px #cacafc;
	-webkit-box-shadow: 0px 0px 0px #cacafc;
}
.col2 td /* on enleve toutes les proprietes que l'on a rajoute sur les tableaux */ {
	vertical-align: top;
	border: none;	         
	        border-radius: 0px;
	     -o-border-radius: 0px;
	    -ms-border-radius: 0px;
	   -moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	font-size: 1.0em;
}
.col td:first-child, .col1 td {
	border: none; /* on enleve la bordure a gauche du premier element car il n'y en a pas plus a gauche que lui */
}
.col2 td:first-child,.col2 td  {
	border: none; /* on enleve la bordure a gauche du premier element car il n'y en a pas plus a gauche que lui */
}
.col td:hover, .col1 td:hover { background-color: transparent; }

.colonnes {
	display: table;
	width: 100%;
	margin: 0 auto;
}
.colonne {
	display: table-cell;
}

/* -------------------------------------------------------------------------- *
 * formulaire                                                                 *
 * -------------------------------------------------------------------------- */
/*form {
	width: 70%;
	margin: 0.5em auto;
}*/
input, textarea {
	border: 1px solid #333355; border-left: 3px solid #333355;
	        border-radius: 3px;
	     -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	display: inline-block;;
}
input[type="text"]:focus, textarea:focus {
	border: 2px solid #333355;
	border-left: 5px solid #333355;

}

/* -------------------------------------------------------------------------- *
 * galerie                                                                    *
 * -------------------------------------------------------------------------- */
.galerie {
	width: 90%;
	margin: auto;
	padding: 0;
	text-align: center;
}
.galerie h2 {text-align: left;}
.galerie figure {
	border: 1px red solid;
	display: inline-block;
	max-width: 25%;
	margin: 5px; padding: 0;
	text-align: center; text-decoration: none;
	border: 3px solid #333355;
	background-color: #fff;
	        border-radius: 3px;
	     -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	        box-shadow: 1px 1px 13px #999;
	     -o-box-shadow: 1px 1px 13px #999;
	    -ms-box-shadow: 1px 1px 13px #999;
	   -moz-box-shadow: 1px 1px 13px #999;
	-webkit-box-shadow: 1px 1px 13px #999;
}
.galerie figure:hover {
	        transform: scale(1.4);
	     -o-transform: scale(1.4);
	    -ms-transform: scale(1.4);
	   -moz-transform: scale(1.4);
	-webkit-transform: scale(1.4);
	        transition: all .5s;
	     -o-transition: all .5s;
	    -ms-transition: all .5s;
	   -moz-transition: all .5s;
	-webkit-transition: all .5s;
}
.galerie figure img {max-width: 90%; max-height: 100%; margin: 5px 10px;}
.galerie figure span {
	display: block;
	width: 100%;
	font-size: 0.8em; font-weight: bold;
	background-color: #333355;
	padding: 4px 0;
	color: #cacafc;
}
.disphover figure span {
	display: none;
	position: absolute;
	border: 3px solid #333355;
	margin: -6px 0 0 -3px;
	        border-radius: 3px;
	     -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.disphover figure:hover span {display: block;}

/* -------------------------------------------------------------------------- *
 * mini-menu                                                                  *
 * -------------------------------------------------------------------------- */
.minimenu {
	display: block;
	margin: auto;
	margin-bottom: 10px;
	text-align: center;
}

/* navigation precedent/suivant/accueil ------------------------------------- */
.prec  span, .suiv span, .acc span { display: none; }
.prec, .suiv, .acc  {
	display: inline-block;
	background: url('../../img/prec.png') no-repeat;
	width: 25px;
	height: 25px;
	border: none;
	text-decoration: none;
	text-align: center;
}
.suiv { background: url('../../img/suiv.png');}
.acc { background: url('../../img/acc.png');}

/* -------------------------------------------------------------------------- *
 * les classes de bases                                                       *
 * .war -> attention                                                          *
 * .inf -> information                                                        *
 * .not -> note                                                               *
 * -------------------------------------------------------------------------- */
.war { color: #c00; /* en rouge */ }
.inf { color: #00c; /* en bleu  */ }
.not { color: #fd0; /* en jaune */ }


/* ************************************************************************** *
 * version  bureau                                                            *
 * ************************************************************************** */
@media screen and (min-width:800px) {
html, body {
	background: url("../../img/fond.gif") repeat fixed;  /*petites etoiles de fond */
}
#bg_image {
	background: url("../../img/bg_image.png") no-repeat;
	background-position: top 50%;
}

#page { width: 98%; max-width: 990px; }

#header { background-image: url("../../img/bandeau_01.jpg"); }

#section /* sous-ensemble contenant nav et article */ {
	display: table;
	border-collapse: separate;
	border-spacing: 10px;
	margin: 15px -10px;
}

#cote, #cont {
	display:table-cell;
	border-collapse: separate;
	border-spacing: 10px;
}

#cote /* menu */ {
	width: 25%; max-width: 25%; min-width: 25%;
	padding: 0px 0px 5px 0px;
}
#nav {margin-top: 0;}
#nav a {
	text-decoration: none;
	color: #3aF;
	font-family: sans-serif;
	font-size: 1em;
	font-weight: bold;
	font-style: normal;
}
#nav li li a {min-height: 0; max-height: 0; overflow: hidden; padding: 0; padding-left: 1.5em; margin: 0; font-size: 0em; background: #edf2f2 !important;}
#nav ul {padding: 0; margin: 0; width: 100%; display: block; list-style: none;}

#nav a, /*#nav li:hover li a,*/ .menuhover li a {
	text-decoration: none;
	color: #3aF;
	background-color: #2d2b2b;
	display: list-item;
	list-style: none;
	margin: 5px auto;
	padding: 0.5em 0 0.2em 1em;
	font-family: sans-serif;
	font-size: 1em;
	font-weight: bold;
	min-height: 18px; max-height: 100%;
	width: 88%;
	font-style: normal;
	        border-radius: 3px;
	     -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.menuhover li a {display: list-item !important; margin: 5px auto !important; padding: 0.5em 0 0.2em 1em !important; font-size: 1em !important; min-height: 18px !important; max-height: 100% !important;}
#nav a:hover, #nav li a:hover, #nav li:hover a, #nav li:hover, .menuhover a, .menuhover {
/* permet de bien voir ce que l'on selectionne sans que cela soit lourd et trop gadget */
	background-color: #d4d9d9;
	color: #185AB4;
	font-size: 1em !important;
}
#nav li li {background: #edf2f2;}
#nav li li a:hover {padding-left: 1.5em;}
/*#nav li:hover ul,*/ .menuhover {padding: 0.2em 0 0.2em 0 !important;}


.menuplus, .menuplus:hover, li:hover .menuplus {
	position: absolute;
	width: 1em !important;
	margin: -2.2em 0 0 19% !important;
	background-color: transparent !important;
	cursor: pointer;
}
.menuplus b {
	color: #3af;
	font-size: 1.1em;
}

.article {
	margin-bottom: 5px;
	width: 100%;
}
.transparent {background: transparent; border-color: transparent; width: 103%; margin-left: -10px;}
.demiarticle {
	display: table-cell;
	margin: 0 auto 5px auto;
	width: 50%; max-width: 50%; min-width: 50%;
}
.img {max-width: 99%;}
#footer {max-width: 990px; margin: 0 auto;}
#btn_menu {display: none;}

}/* fin version bureau */

/* ************************************************************************** *
 * version mobile                                                             *
 * ************************************************************************** */
@media screen and (max-width:799px) {
.mobile {
	display: block
}
.bureau {
	display: none;
}

/* fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
	max-width: 95%;
}
/* conserver le ratio des images et empecher les debordements de boites dûs aux border ou padding */
img {
	height: auto;
	        box-sizing: border-box;
	     -o-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
/* gestion des mots longs */
textarea, table, td, th, code, pre, samp {
	word-wrap: break-word; /* cesure forcee */
}
#header, #aside, .article, #nav, #footer, .demiarticle {
	width: 98%;
	float: none;
	margin-left: 1%;
	border: none;
}
#nav li {
	display: inline-block;
	width: 42%;
	max-height: 100%;
	margin-right: 5%;
}
#nav a, #nav li:hover a, .menuhover a {
	text-decoration: none;
	color: #3aF;
	background-color: #2d2b2b;
	margin: 2px auto;
	padding-top: 5px;
	padding-bottom: 2px;
	font-family: sans-serif;
	font-size: 1em;
	font-weight: bold;
	min-height: 20px;
	font-style: normal;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	width: 100%;
	min-height: 30px;
	padding-left: 5%;
	display: inline-block;
}
#nav a:hover, #nav li a:hover, #nav li:hover a, .menuhover a /* permet de bien voir ce que l'on selectionne sans que cela soit lourd et trop gadget */ {
	background-color: #d4d9d9;
	color: #185AB4;
	font-size: 1em;
}
#nav ul {padding: 0; margin: 0; list-style: none;}
#nav li li {width: 100%;}
#nav li ul, #nav li li a {min-height: 0; max-height: 0; overflow: hidden; padding: 0; padding-left: 1.5em; margin: 0; font-size: 0em;}
#nav li:hover ul, .menuhover ul {padding-bottom: 0.2em; max-height: 100%; font-size: 1em;}
#nav li:hover li a, .menuhover li a {width: 90%;}

#header {
	background: url("../../img/bandeau_mini.png") no-repeat top right #2e2e2e !important;
	height: 70px;
}
#header #logo { height: 90px; }
#header #flam { display: none; }

#header:after {
	display: block;
	content: "version mobile";
	color: #ffffaa;
	margin-top: -90px;
	margin-left: 130px;
}

#aside{
	padding-top: 25px;
	margin-bottom: 10px;
}

#section {
	display: table;
	border-collapse: separate;
	border-spacing: 10px;
	margin-bottom: 10px;
}
#cote { display: table-footer-group; }
#cont { display: table-header-group; }

#btn_menu {
	display: inline-block;
	padding: 30px 20px;
/*	background-color: #d4d9d9; /* fond gris clair */
/*	background-color: #0f00ff; /* fond bleu vif */
	background-image:linear-gradient(60deg, #0f00ff, #000070); /* degrade bleu clair => bleu fonce */
/*	color: #2d2b2b; /* texte gris fonce */
/*	color: #000070; /* texte bleu fonce */
/*	color: #a0a0ff; /* texte gris clair bleute */
	color: #70f0ff; /* texte bleu clair */
	text-decoration: none;
	position: absolute;
	right: 1%;
	top: 5px;
	font-weight: bold;
	font-style: normal;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}

#btn_menu:before
{
	position: absolute;
	left: -320%;
	top: 50%;
	color: #ffffaa;
	content: "L'esprit de Flammarion";
	font: 1.3em serif;
	font-style: italic;
}

.colonne {
	display: inline-block;
}

}
/* ************************************************************************** *
 * version mobile paysage                                                     *
 * ************************************************************************** */
@media screen and (max-width:640px) and (orientation: landscape) {
body {
	-webkit-text-size-adjust: 70%;
}
}

/* ************************************************************************** *
 * version impression                                                         *
 * ************************************************************************** */
@media print {
html, body, .article, .demiarticle {
	background: transparent;
}

#nav { display: none; }
}


/* ************************************************************************** *
 * Calendrier                                                                 *
 * ************************************************************************** */

/* *********************** ANNEE ****************************** */
.TableCalendrierAnnuel {
	/*all: initial;*/
	border: 3px solid #333355;
	margin: auto; /*margin-bottom: 10px;*/
	width: 100%; /*80%;*/
	max-width: 840px;
	        border-radius: 3px;
	     -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	        box-shadow: 1px 1px 13px #999;
	     -o-box-shadow: 1px 1px 13px #999;
	    -ms-box-shadow: 1px 1px 13px #999;
	   -moz-box-shadow: 1px 1px 13px #999;
	-webkit-box-shadow: 1px 1px 13px #999;
}

.TableCalendrierAnnuel th {
	font-weight: bold;
	width: 8%;
	max-width: 70px;
	text-align: center;
	font-size: 1em;
}

.TableCalendrierAnnuel td {
	text-align: left;
	vertical-align: top;
	width: 8%;
	max-width: 70px;
}

/* *********************** MOIS / JOUR ****************************** */
.TableCalendrierAnnuelMois {
	/*all: initial;*/
	border: 0px;
	margin: 0px;
	padding: 0px;
	width: 100%;
	border-spacing: 0px 1px;
	border-collapse:collapse;
}

.TableCalendrierAnnuelMois tr {
	padding: 0px;
	margin: 0px;
	border: 0px;
	background: none;
	background-color: none;
}

.TableCalendrierAnnuelMois tr.JourFerie {
	background-color: #ff9999;
	background: #ff9999;
}

.TableCalendrierAnnuelMois tr.WeekEnd {
	background-color: silver;
	background: silver;
}

.TableCalendrierAnnuelMois td {
	font-size: 0.5em;
	text-align: left;
	vertical-align: top;
	width: 25%;
	/*max-width: 14px;*/
	padding: 0px;
	margin: 0px;
	border: 0px;
	background-color: none;
	background: none;
	        border-radius: none;
	     -o-border-radius: none;
	    -ms-border-radius: none;
	   -moz-border-radius: none;
	-webkit-border-radius: none;
}

.TableCalendrierAnnuelMois td.Weekday {
	/*text-align: center;*/
	text-align: left;
}

.TableCalendrierAnnuelMois td.ToDay {
	color: red;
	font-weight: bold;
}

.TableCalendrierAnnuelMois td.MonthDay {
	text-align: center;
}

.TableCalendrierAnnuelMois td.isclicable {
	background: #00ff00;
}

.TableCalendrierAnnuelMois td.isdisplaynewshover {
	background: #00ff00;
}

.TableCalendrierAnnuelMois td.WeekNumber {
	text-align: right;
	color: green;
	font-weight: bold;
}

.CalendrierZoneA {
	border-left: 3px solid blue;
}

.CalendrierZoneB {
	border-left: 3px solid red;
}

.CalendrierZoneC {
	border-left: 3px solid green;
}

.CalendrierZoneAw {
	border-left: 3px solid transparent;
/*    border-style:solid;
    border-width:3px;
    border-color:transparent;*/
}

.CalendrierZoneBw {
	border-left: 3px solid transparent;
}

.CalendrierZoneCw {
	border-left: 3px solid transparent;
}