/* --------------------------------------------------------------

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base

-------------------------------------------------------------- */

body { text-align: center; background: #FFF; }
.page { position: relative; width: 1000px; margin: 0 auto; padding: 10px 1.5em; text-align: left;  }

.header {width: 996px;}
.main { margin-top: 20px; }
.footer { clear: both; padding: 1.5em 0 0; border-top: 0px solid; }

.wrapper { clear: both; float: left; width: 70%; overflow: hidden; }
.page_recherche .wrapper { width: auto; }
.wrapper_large { overflow: hidden; }
.content { min-height: 350px; }
.aside { float: right; width: 256px; overflow: hidden; }
.asidelarge { float: right; width: 256px; margin-left: 25px; margin-bottom: 20px; overflow: hidden; }

@media (max-width: 640px) {
    .asidelarge { display: none; }
}

.mono-content {clear: both; padding-left: 1.5em; float: left; width: 100%;}

#impression {margin: 20px 0 0 20px;}

/* Entete et barre de navigation
------------------------------------------ */

.header { padding-bottom: 1em; }





.nav-bar-top {margin: 10px 0 0px 0;}
.nav-bar-top-menu {display: inline;}
.reseaux-sociaux {display: inline; float: right;}
.header-logo {margin-top: 24px;}


.drapeau-bleu-blanc-rouge {width: 100%; border-bottom: 1px solid #efefef; margin:auto; height:9px;}
.drapeau-bleu {float: left; background-color:#1f95d9; width:33%; height: 9px;}
.drapeau-blanc {float: left; background-color:#fff; width:34%; height: 9px;}
.drapeau-rouge {float: left; background-color:#c91f1f; width:33%; height: 9px;}



#menu-onglets {
    float:right;
   
}

.bleu {background-color: #1f95d9;}
.bleu a {color: #fff;}

.blanc {background-color: #f5f5f5;}
.blanc a {color: #444;}

.rouge {background-color: #c91f1f;}
.rouge a {color: #fff;}

#onglets
{
    font-size: 13px;
    margin-right: 21px;
    
}

#onglets li
{
    float : left;
    word-spacing: 2px;
    padding : 4px 11px 6px 11px; 
    margin-left: 5px;
    border-radius: 0px 0px 8px 8px;
    -moz-border-radius: 0px 0px 8px 8px;
    -webkit-border-radius: 0px 0px 8px 8px;



}

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

.nav { margin-bottom: 0px;}
.nav ul {}
.nav ul li {}
.nav ul li:not(:last-child) a {
    
     border-right: 1px solid #c0c0c0;

}

.nav ul li a {

    float: left; display: block; padding: .5em .6em;  text-decoration: none;
    color: #444; font-size: 15px;

}

.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active { color: #1f95d9; }

#formulaire_recherche { float:right; border: 0; margin: 20px 0 20px 0;}

.footer .colophon { float: left; width: 100%; margin: 0; text-align:center;  text-transform: uppercase; font-size: 12px; margin:0; letter-spacing: 1px}
.colophon {padding:20px 0; background-color: #e6e5e5;}
.copyright {text-transform:none;}

/* Gabarit d'impression
------------------------------------------ */
@media print {
.page,
.wrapper,
.content { width: auto; }
.nav,
.arbo,
.aside,
.footer { display: none; }
}


.impression-article {
    
    font-size:12px; 
    float: right;
    margin-top: 10px;
}


.impression-article img {
    
}

.impression-article p {
    
    padding: 12px 10px;
    float: left;
}

/* Affichage sur petits ecrans
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */
@media (max-width: 640px) {

/* passer tous les elements de largeur fixe en largeur automatique */
body,
.page,
.header,
.main,
.footer,
.wrapper,
.content,
.aside { width: auto !important; margin: auto !important; }

.page { margin: 0; padding: 5%; }

/* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
.content,
.aside { clear: both; float: none !important; width: auto !important; }
.nav ul li a { float: none; border: 0; }
#formulaire_recherche { display: none; position: static; text-align: center; }
.arbo { display: none; }
.footer .colophon { width: auto; float: none; }
.footer .generator { display: none; }

/* header du calendrier full-calendar */
table.fc-header td { display: block; text-align: left; }

}

/* end */