/*********************************
*     **   ** ***  * *** **      *
*    *  * *    *  *  *   * *     *
*    *  * *    *     **  * *     *
*    *  * *    *     *   * *     *
*     **   **  *     *** *       *
**********************************
* Copyright (c) Eddy MARIANNE    *
* Oct'Ed Ingénierie - 2015       *
* http://www.octed-ingenierie.fr *
*********************************/
/* commun */
body{ margin:0; text-align:center; background-color:white; background-image:url("../imgs/motif-fond-min.png"); background-position:left top; background-repeat:repeat-x; font-family:Arial; font-size:12px; }
a img{border:none;}
.nopadding{padding:0;}
.nomargin{margin:0 !important;}
.overflow{overflow:auto;}
#page{ position:relative; top:10px; width:900px; margin:auto; text-align:center; }
#test-page{margin:auto;text-align:center;width:690px;background:white;}
/* entête */
#header{text-align:left; overflow:auto;}
#entete{overflow:auto;}
#logo{float:left; width:250px;}
#publicite{ float:left; margin:3px 0 0 15px; width:600px; height:75px; }
#rechercher{ margin-top:4px; height:32px; background:url("../imgs/fond-recherche-min.png") no-repeat center center; text-align:center; vertical-align:middle; }
#formRecherche{margin:0;padding:0;}
#formRecherche input{ border:none; padding:0; margin: 4px 0 0 0; vertical-align:middle; }
#formRecherche input[type="text"]{ background:url("../imgs/fond-formulaire-input-min.png") no-repeat center center; width:557px;height:25px; text-align:center; font-size:12px; line-height:25px; color:#3b3b3b; position:relative; top:0; }
#formRecherche input[type="submit"]{ background:url("../imgs/fond-formulaire-bouton-min.png") no-repeat left top; width:25px;height:25px; position:relative; top:0;left:-4px; }
/* contenu */
#content{ clear:both; overflow:auto; padding-bottom:20px; }
/* index */
#index{ margin-top:6px; color:white; text-align:left; padding-left:10px; font-size:11px; line-height:28px; }
#index a{ color:white; font-weight:bold; text-decoration:none; }
#index a:hover{text-decoration:underline;}
/* cadres latéraux */
#cadres{ margin-top:10px; padding-top:10px; width:170px; float:left; }
.cadre{ border:none; margin-bottom:20px; text-align:left; padding:0 10px 0 10px; }
.cadre a{ color:black; font-weight:bold; text-decoration:none; }
.cadre a:hover{color:#00804b;}
.cadre_titre{ background-color:#f2eff0; border: solid 1px #00804b; font-weight:bold; text-align:center; height:27px; line-height:27px; font-size:11px; }
.cadre_contenu{ font-size:11px; border: solid 1px #00804b; }
.cadreAleatoire:hover, .cadreVoisin:hover{background-color:#cfefe2;}
.cadreTexte{padding: 5px 0 5px 10px;}
.catgram{ font-style:italic; color:#aa0000; }
.cadreDef{ background-color:#40a078; color:white; font-weight:bold; font-size:13px; background-image:url("../imgs/definition-courante-min.png"); background-position: 5% 50%; background-repeat: no-repeat; }
.cadreDef div.currentDef{ padding: 10px 0 10px 30px; }
#c_encyclopedie .cadre_titre, #c_encyclopedie .cadre_contenu{ border-color:#0044aa !important; }
#c_encyclopedie a:hover{color:#0044aa !important;}
.cadreArticle:hover{background-color:#EEF8F8;}
/* texte - commun */
#text{text-align:left;}
#text .text{ margin-bottom:0; padding:10px; font-size:13px; }
.fullwidth{ margin-left:180px; margin-right:10px; width:690px; }
#text a{color:#00804b;}
h1, h2, h3, h4{color:#00804b;}
h1{ text-align:center; font-size:16px; font-weight:bold; margin:0; padding-top:20px; }
h2{ font-size:14px; font-weight:bold; padding-left:0; margin:0; padding-top:10px; }
h3{ font-size:12px; font-weight:bold; }
h4{ font-size:12px; font-weight:normal; font-style:italic; overflow:auto; }
.bold{font-weight:bold;}
.italic{font-style:italic;}
.center{text-align:center;}
.right{text-align:right;}
.left{text-align:left;}
.clear{clear:both;}
.clearright{clear:right;}
.clearleft{clear:left;}
.relative{position:relative;}
.sub{vertical-align:sub;}
.sup{vertical-align:super; font-size:7px;}
input[type="text"]{border: #4d4d4d solid 1px;}
textarea{border: #4d4d4d solid 1px;}
.hidden{display:none;}
.disabled{color:lightgrey;}
.red{color:red;}
.barre{text-decoration:line-through;}
.souligne{text-decoration:underline;}
.noBorder{border: none;}
.floatright{float:right;}
.floatleft{float:left;}
img.gauche{ vertical-align:top; float:left; margin-right:10px; padding-top:5px; }
img.droite{ vertical-align:top; float:right; margin-right:10px; padding-top:5px; }
.note{ font-style:italic; font-size:11px; }
.left-padded{padding-left:10px;}
.right-padded{padding-right:10px;}
.bottom-padded{padding-bottom:10px;}
.top-padded{padding-top:10px;}
/* tips */
.tip{width:300px; font-family:arial; font-size:10px; background-color:#fffcc7; border:dotted 1px #ad361e;}
.tip-title{color:#4d4d4d; font-weight:bold; padding-top:5px;}
.overTxtLabel{color:black;}
/* accueil.php */
#accueilIntro{ width:542px;height:230px; margin:0; padding:0; display: inline-block; background:url('../imgs/fond-accueil-min.png') no-repeat; text-align:left; font-size:12px; overflow:hidden; }
#accueilIntro .presentation{ width:320px; float:left; padding-left:10px; }
#accueilIntro ul{margin-left:0;padding-left:20px;}
#accueilIntro li{ background: url('../imgs/li-min.png') no-repeat left center; list-style-type:none; padding-left:20px; margin-left:-10px; margin-bottom:10px; }
#accueilIntro .resume{ width:200px; float:right; padding-right:10px; text-align:right; }
#accueilIntro a{ color:black; font-weight:bold; text-decoration:none; }
#accueilIntro a.dictionnaire:hover{ color:#00804b; }
#accueilIntro a.encyclopedie:hover{ color:#003380; }
.indexAlpha{text-align:center;}
.indexAlpha a{ color:black !important; font-weight:bold; text-decoration:none; }
.indexAlpha a:hover{color:#00804b !important;}
/* présentation */
#divConsultation{float:right;width:400px;margin-left:10px;padding-top:0;border:dashed 1px darkgrey;}
#divConsultation h3{margin:0;text-align:center}
#divConsultation ul{margin-left:0;padding-left:15px;}
#divConsultation ul li{margin-bottom:10px;}
/* encyclopédie */
.indexColonne3{width:225px;float:left;}
.indexColonne3.gauche{margin-right:5px;}
.indexColonne3.droite{margin-left:5px;}
.indexColonne3 .motcle{margin:5px 0 5px 0; width:225px;float:left;}
.indexColonne3 .motcle a{font-weight:bold;text-decoration:none;}
.indexColonne3 .motcle a:hover{text-decoration:underline;}
.indexHeader h3{ float:left; margin:0;padding:0;display:inline;color:black;text-decoration:none;font-size:18px; }
/* Index par lettre */
#indexLettre{margin:0;padding:0;}
#indexLettre li{padding:2px 10px;list-style-type:none;float:left;width:300px;margin-right:10px;}
#indexLettre li a{text-decoration:none;}
#indexLettre li a:hover{text-decoration:underline;}
#indexLettre li.gris{background-color:#f2eff0;}
/* mot clé */
#articlesSelonMC{padding:0;margin:10px;}
#articlesSelonMC li{list-style-type:none;margin:0 0 10px 0;padding:10px;background-color:#eeeeff;}
#articlesSelonMC li:hover{border:solid 1px #003390;}
ul.menuPagination{margin:0;padding:0;}
.menuPagination li{list-style-type:none;display:inline;padding:0 5px 0 5px;}
.menuPagination li.focus{font-weight:bold;font-size:16px;}
.menuPagination a{text-decoration:none;}
.menuPagination a:hover{text-decoration:underline;}
.horizontalBorder{border-top:solid 1px black;border-bottom:solid 1px black;}
#articlesSelonDate{padding:0;margin:10px;}
#articlesSelonDate li{list-style-type:none;margin:0 0 10px 0;padding:10px;background-color:#eeeeff;}
#articlesSelonDate li:hover{border:solid 1px #003390;}
.dateArticle{padding:0 4px 0 4px;background-color:#003390;color:white;}
.titreArticle{padding:0 4px 0 4px;}
.nowrap{white-space:nowrap;}
.cent{width:100%;}
/* suggestions */
.indexColonne2article{width:340px;float:left;}
.indexColonne2article .suggestion{margin:5px 0 5px 0; width:340px;float:left;}
.indexColonne2article .suggestion a{font-weight:bold;text-decoration:none;}
.indexColonne2article .suggestion a:hover{text-decoration:underline;}
/*divers*/
.aide{color:grey;}
.actionBtn{cursor:hand;cursor:pointer;}
.hoverColor:hover{color:#ad361e !important;}
/* Moteur de recherche */
.listeResultats{padding:0;/*margin:10px;*/}
.listeResultats li{list-style-type:none;margin:0 0 5px 0;padding:0;}
.listeResultats li.motcle{float:left;width:220px;margin:5px;padding:0;}
.sstitreResultat{background-color:#00804b;}
.sstitreResultat.encyclopedie{background-color:#003390;}
a.encyclopedie{color:#003390 !important;}
.sstitreResultat h3{color:white; text-align:center;}
/*Sites recommandés*/
.lienExterne{ color:#003380; text-decoration:underline; }
/* pied de page */
#footer{ clear:both; position:relative; margin: auto; height:75px; border-top:1px solid #AFD7C7; }
#avertissement{line-height:35px; height:auto;background-color:#F2EFF0;border-top:1px solid #4CA47F;border-bottom:1px solid #289367;}
#avertissement img{vertical-align:middle;margin-right:5px;}
#indexPied{ padding:0 10px; background-color:#00804B; line-height:20px; color:white; font-size:11px; }
#indexPied a{color:white;}
#copyright{ background-color:#00804B; line-height:17px; text-align:center; font-size:10px; color:white; }
#copyright a{color:white;}
/* Responsive Design */
@media screen and (max-width:900px) {
  #content{overflow:hidden;}
  #page,.page{width:100% !important;}
  #header{width:100% !important;}
  #publicite{width:300px; overflow:hidden;}
  #pub-e1d{display:none !important;}
  /*TODO : Gestion E2*/
  #rechercher{width:100%;}
  #formRecherche input[type="text"]{width:60%;background-size:100% 100%;}
  #text div.fullwidth{width:74%;}
  #indexLettre li{width:250px;}    
}
@media screen and (max-width:768px) {
  #content{padding-right:20px;}
  #pageWrapper{display:flex;flex-direction:column;}
  .text{padding-bottom:0px;}
  #cadres{width:100%;order:2;float:none;display:block;margin-top:0px;padding-top:0px;}
  div.cadre_contenu{height:auto;overflow:auto;}
  div.cadreAleatoire{float:left;width:49%;}
  #text div.fullwidth{order:1;width:100%;margin-left:0px;}
  .indexAlpha{padding:10px 10px 0px 10px;}
  .indexAlpha p{padding-bottom:0px;}
  #indexLettre li{width:43%;}
  .cadreDef{background-position:10px 50%;}
  #avertissement{line-height:15px;} 
}
@media screen and (max-width:640px) {
  #formRecherche input[type="text"]{width:80%;}
  #entete div{padding-left:0;margin-left:0;}
}
@media screen and (max-width:568px) {
  #publicite{display:none;} /*#pud-e1g{display:none;}*/
  #logo{float:none;text-align:center;width:100%;}
  #accueilIntro { width: 85%; height:auto; background-size: 100% 100%; padding: 10px;}
  #accueilIntro .presentation { width:100%; float:none; }
  #accueilIntro .resume { width:100%; float:none; text-align:justify;
  }
}
@media screen and (max-width:460px) {
  div.cadreAleatoire{float:initial;width:100%;}
  #indexLettre li{width:100%;line-height:25px;text-align:center;padding-left:0;}
  #indexLettre li:nth-child(even){background-color:white !important;}
  #indexLettre li:nth-child(odd){background-color:#f2eff0 !important;} 
}