/*    ftlpage501
   format de page generique
   html5 avec header, footer, article, section, aside
   header en haut
   nav a gauche, content a droite
   footer en bas

ATTENTION : master des couleurs de secteurs : SECTEURS.css
version : 2019-09-20
version 2019-10-30 : balise alt en :after 
version 2020-02-07 rupture largeur passe de 768 a 769 cause iPad  
*/

body {
	max-width:980px;
}


hgroup {
	min-width:300px;
   width:100%;
	width: 60em;
}

h1 {
   margin-left:2em;
/*   margin-top:1em;*/
   margin-bottom:1em;	
}

@media screen and (max-width: 320px ){
h1 {
  margin-left:0.5em;
  margin-top: 0.5em;
  }
}/*/mediaquery*/
/* fin media 320px */

h2 {
	margin-left: 1em;
	margin-top: 2em;
	margin-bottom: 1em;
}

/* image logo dans une boite pour redim */
#imglogo {
/*   width: 6.625em;
   height:6.625em;*/
/*   width: 5.6em;
   height:5.6em;*/
   padding-bottom: 1em;
 padding-left: 1%;
}

/* Retrecir hauteur titre en smartphone */
@media screen and (max-width: 580px ){
   #imglogo {
     width: 4em;
     height:4em;
   }
}
#imglogo img {
   width:100%;
}

/* ligne soulignant le titre */
#ligne {
      margin-right:10px;
      margin-top: 0.0em;
      margin-bottom: 0.0em;
      min-height: 10px;
}
#ligne img {
   width:100%;
   max-width: 735px;
   max-height: 20px;

}
#ligne +h3 {
   margin-top:0.5em;
}


/* image Retour et return dans une boite pour redim */
#imgretour {
   width: 6.625em;
   height: 2.125em;
/*   margin-bottom:2em;*/
   padding-left: 1%;

}
#imgretour img {
   width:100%;
}

#imgheader img {
   width: 90%;
   height: auto;
}

#imgheader.div_graffiti {
   max-width: 26.25em;
}

/* images bandeau allonge en cours de texte pour image largeur 680px */
.imgbandeau{
   max-width: 680px;
}
.imgbandeau img {
   width: 95%;
   height: auto;
}

/* images bandeau allonge en cours de texte pour image largeur 680px */
.imgheader2 {
   max-width: 680px;
   margin-top: 6px;
}
.imgheader2 img {
   width: 95%;
   height: auto;
}


/* images photo rectangulaire en cours de texte pour image largeur variable */
.imgphoto{
   max-width: 600px;
}
.imgphoto img {
   width: 60%;
   height: auto;
}
/* images haiga photo rectangulaire en cours de texte pour image largeur variable 
   image en portait a remettre en 400px de largeur */
.imghaiga{
   max-width: 600px;
   max-height: 500px; 
   }
.imghaiga img {
/*   height: auto;
	width:auto;*/
//	height: 95%;
	width: 95%;
}


/* Boite des liens de navigation */
nav {
	vertical-align: top;
/*	margin-left: 0.7%;*/
	margin-top: 1.5em;
   margin-bottom:1em;
   padding-left: 1%;
   padding-top: 1%;
	float:left;
}


@media print {
   nav {
      visibility: hidden;   
   }
}
/* fin media print */

/* nav en position fixe pour les tailles > 768px */
@media screen and (min-width: 769px ){
   nav {   
     position: fixed;
     max-width: 8em;       
   }   

#content {
   min-height: 450px;
}    
   
}  
/* fin media minimum 769px */

@media screen and (max-width: 768px ){
nav {
  margin-top: 0.2em;
  margin-bottom:0.1em;  
}
 
  
/* Eviter un mauvais alignement bas des objets  */
#imgheader, #imglogo {
   margin-bottom: 0em;
   margin-top: 0em;
} 

      /* elements nav au milieu */
     #imglogo {
      vertical-align:middle;
   }
      /* elements nav au milieu */
     #imgretour {
      width: 4.5em;
      vertical-align:middle;
   }  
   h2{
      margin-top:1.5em !important;
   }
 
 
} /*/mediaquery*/
/* fin media 768px */

@media screen and (max-width: 475px ){
   #content p {
      padding-right: 0.7em; 
   }
  
}  

@media screen and (max-width: 320px ){
   #imgheader {
      /*   display: none;*/
      margin-left: 10px;
   }
   /* image Retour et return dans une boite pour redim */
   #imgretour {
/*      width: 6.625em;
      height: 2.125em;*/
      width: 4.5em;
/*      margin-bottom: 2em;   */
   /* pour navigation au pouce */
   float:right;
   margin-right: 1%;
   }
   
   nav {
      margin-left:0em;   
/*   position: absolute; bottom: 0; left: 0; right: 0;*/
   }
   
   
   
}


#content {
   margin-bottom: 2.5em;
   max-width:800px;
 /*  min-height: 450px;*/
}

aside {
	margin-left:20%;
	margin-bottom:3em;
	float:left;
}


footer {
   clear:both;  
}

#colophon {
   margin-left: 1em;
}

/* Texte balisé en Markdown et autres 2022-05-16*/
div[id^='txtbalises'] {
	font-size: 0.87em!important;
}
div[id^='txtbalises'] H1,H2,H3,H4,H5 {
	margin-bottom: 1em!important;
	font-size: smaller;
}
div[id^='txtbalises'] H2 {
	margin-left: 1em!important;
}
div[id^='txtbalises'] H3 {
	margin-left: 2em!important;
}
div[id^='txtbalises'] H4 {
	margin-left: 4em!important;
}
div[id^='txtbalises'] H5 {
	margin-left: 5em!important;
}
div[id^='txtbalises'] TD {
	font-size: smaller!important;
}
div[id^='txtbalises'] LI {
	font-size: smallerimportant;
	margin-bottom: 0.6em;
}
// si HTML
div[id^='txtbalises'] P {
	font-size: 0.9em!important;
}



/*********************************************/
/* afficher une icone pour les liens externes */
#content a[href^="http://"]:after {
    content: url(https://www.tempslibres.org/tl/images/external.png); padding-left: 5px;
/***    content: url(http://www.tempslibres.org/tl/images/external.png); padding-left: 5px; attr(alt); ***/    
    }
#content a[href^="https://"]:after {
    content: url(https://www.tempslibres.org/tl/images/external.png);  padding-left: 5px;
}

/* ne pas mettre d'icone pour la page journaux car les liens vers tempslibres sont absolus */ 
#tl_logs  a[href^="http://"]:after {
    content: none;
    }


/* Secteurs du site : pages de TL */
#secteur {
   margin-top:0em;
   margin-bottom: 1em;
   color:#FFFFFF;
   font-weight: bold;
   padding-left: 5px;
   max-width: 7.2em;  
}

@media screen and (max-width: 768px ){
   #secteur {
      margin-bottom:0.1em;
   }
}
/* fin secteur 768px */

#secteur a {
   line-height: 2.3em;
/*   line-height: 1.7em;*/
   color:#FFFFFF;
   text-decoration: none;
   margin-bottom: 4px;   
   padding-left: 5px;   
}
/* secteur limite pour les tailles > 768px */
@media screen and (min-width: 768px ){
   #secteur {   
/*      max-width: 140px;*/
   line-height: 1.7em;
   max-width: 7.2em;  
   }   
}  
/* fin media minimum 768px */

/* RECOPIE du master SECTEURS.css **/
/*Reference : http://www.pourpre.com*/
/* rouge cinabre */
.SECTaction {
   background-color: #DB1702;
}
/* bleu acier*/
.SECTanalyses {
   background-color: #3A8EBA;
}
/* vert celadon */
.SECTapprendre {
   background-color: #83A697;
}

/* Bleu barbeau */
.SECTbase {
   background-color: #5472AE;
}
/* violet */
.SECTsite {
   /*background-color: #FF182A;*/
   background-color: #f80a97;  
}
/* Vert */
.SECTessais {
/*   background-color: #97DFC6;*/
   background-color:#52AC7D;
}
/* Orange fauve */
.SECTdecouvrir {
   background-color: #AD4F09;
}

/* gris grege */
.SECTliens {
   background-color: #BBAE98;
}
/* Orange melon */
.SECTlire {
   background-color: #ED7F10;
}
/* Violet Amethyste */
.SECTrecherches {
   background-color: #884DA7;
}
/* Noir */
.SECTweb {
   background-color: #333333;
}