/* Feuille de style enacit-all.css élaborée par ENAC-IT / J.-D. Bonjour pour :
     - surécriture de styles EPFL ou ENAC de la charte web 2010 EPFL
     - implémentation de styles spécifiques ENAC-IT
*/


/* ****************** SURECRITURES de styles EPFL ******************
   *****************************************************************  */

/* IMPORTANT:  .xxx s'applique à <div class=xxx>  ;  tandis que  #yyy s'applique à <div id=yyy>  ; 
   et dans le cas <div class=xxx id=yyy> les propriétés de #yyy priment sur celles de .xxx  */


/* Suppression du trait noir au haut division "content" (sous division "tools") en mode multi-colonne */
.content { border-top: 0px solid #000;  }


/* Correction pour que le gras ne soit pas systématiqu. noir dans division "content" */
#content b,strong { color: inherit; }


/* Amélioration styles des liens dans division "content" ; notamment suppression de la technique stupide de la charte epfl 2010
   de sous-lignage des liens via une image (technique empêchant l'implémentation, plus bas, d'icônes associées aux liens) */
#content a        { color: inherit; text-decoration: none; background-image: none; border-bottom: 1px dotted #454545; }
#content a:hover  { background-color: #ddd; }
#content a:active { background-color: #666; color: #fff; }
/* et adaptations de ces règles dans certains cas */
#content h1 a       { border-bottom: none; }
#content a.noborder { border-bottom: none; }  /* pour masquer border dans image-lien, p.ex. dans EasyGallery */

/* Diminution espaces avant/après/droite paragraphes dans division "content" en mode multi-colonne et mono-colonne  */
#content p     { margin: 3px 20px 3px 0;  }


/* Suppression des marges sup. et inf. aux images pour pouvoir insérer images in-line */
.content img  { margin: 0 0 0 0; }
.content p img  { margin: 0 0 0 0; }


/* Implémentation de blocs côte-à-cote en mode mono-colonne */
.monocol .box   { float: left; width: 486px; margin-right: 4px; }


/* Correction bug d'alignement des listes dans division "content" en mode mono-colonne seulement */
.monocol ul,ol      { padding: 0 0 0 25px;   }

/* Améliorations et correction bugs d'alignement pour listes simples et imbriquées dans division "content" en mode multi-colonne  */
.content ol         { margin: 0; padding: 0 0 0 25px; }
.content ul         { margin: 0; padding: 0 0 0 25px; list-style-type: disc; }
.content ol li      { line-height: normal; margin: 0; }
/* puis, suite aux corrections ci-dessus, changements nécessaires pour listes "two-cols" en mode multi-colonne  */
.content .two-cols  { padding: 0 0 0 15px; }
#content .two-cols li { width: 134px; margin: 0 18px 0 0; }
/* ainsi qu'autres changements en mode multi-colonne et mono-colonne  */
#content li         { line-height: normal; list-style-image: none; margin: 0; padding-left: 0; }
.box, .box-col      { margin: 0 0 15px 0; }
ul.news-list        { padding: 0 0 0 0; margin: 0 0 15px 0; }
/* ainsi que changements en mode mono-colonne  */
.monocol .box  ul   { padding: 0 0 0 25px; list-style-type: disc; }


/* Améliorations tables : ajout bordure par défaut ; faire <table width=100%> pour occuper toute la largeur */
#content table     { border-collapse:collapse;  }
#content table th  { padding: 3px; border:solid 1px #999; text-align:  center; font-weight: bold; }
#content table td  { padding: 3px; border:solid 1px #999; line-height: inherit; }
.content table th  { color: inherit; vertical-align: inherit; }

/* et pour table sans bordures : via cette classe "noborder" */
#content table.noborder th  { padding: 3px; border:none; line-height: inherit; }
#content table.noborder td  { padding: 3px; border:none; line-height: inherit; }

/* et pour centrer table : via cette classe "center" */
table.center { margin-left:auto; margin-right:auto; }



/* ****************** NOUVEAUX styles (eit = enac-it) ******************
   *********************************************************************  */

/* Styles pour texte préformaté et code  */
tt,pre,code { font-family: monospace; color: #559; background-color: #f8f8ff; }
pre,code    { font-size: 11px; border: 1px dashed #ccf; margin: 6pt; padding: 2pt; padding-left: 5pt; line-height: 13px; }
tt          { font-size: 12px; font-weight: bold; padding-left: 3pt; padding-right: 3pt; }
tt i        { font-weight: normal; } 


/* Titres dans division  */
.eit_titres1, .eit_titres2 {
    font-family:"Arial Black","DejaVu Sans",Arial,Helvetica,sans-serif;
    color: #454545;
    font-weight: normal;
    line-height: 100%;
    padding: 2px 0 3px 0;
    letter-spacing: normal;
    text-transform: none;
}

h1.eit_titres1, h1.eit_titres2 { font-size: 27px; margin: 0 0 4px 0; font-family:Impact,"Arial Black","DejaVu Sans",Arial,Helvetica,sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }

h2.eit_titres1 { font-size: 19px; margin: 16px 0 8px 0; color: #fff;    background-color: #ea5e00; padding-left: 5px; }
h2.eit_titres2 { font-size: 19px; margin: 16px 0 8px 0; color: #ea5e00; background-color: #fff5d5; padding-left: 5px; box-shadow: 3px 3px 3px #aaa; }

h3.eit_titres1 { font-size: 18px; margin: 12px 0 8px 0; background-color: #ddd;    padding-left: 5px; }
h3.eit_titres2 { font-size: 18px; margin: 12px 0 8px 0; background-color: #f4f4f4; padding-left: 5px; box-shadow: 3px 3px 3px #aaa; }

h4.eit_titres1, h4.eit_titres2 { font-size: 17px; margin: 10px 0 4px 0; }
h5.eit_titres1, h5.eit_titres2 { font-size: 14px; margin: 10px 0 4px 0; }
h6.eit_titres1, h6.eit_titres2 { font-size: 13px; margin:  4px 0 0   0; }



/* Pour signaler liens sur imagettes */
/*    implémenter une telle classe roll sur IMG plutôt que A fonctionnerait sous Ffox et Chrome, mais pas IE 8  */
a.roll:hover  img { opacity: 0.5; filter:alpha(opacity= 50); }
a.roll        img { opacity: 1.0; filter:alpha(opacity=100); }



/* Icônes associées à liens */
#content a.page {
	background-image : url(/img/links/page_o.png);
	background-position : left center;
	background-repeat : no-repeat;
	padding-left : 16px;
	padding-top : 2px;
}
#content a.script {
	background-image : url(/img/links/script.png);
	background-position : left center;
	background-repeat : no-repeat;
	padding-left : 16px;
	padding-top : 2px;
}
#content a.popup {
	background-image : url(/img/links/popup_o.png);
	background-position : right center;
	background-repeat : no-repeat;
	padding-right : 14px;
	padding-top : 2px;
}
#content a.image {
	background-image : url(/img/links/image_o.png);
	background-position : right center;
	background-repeat : no-repeat;
	padding-right : 16px;
	padding-top : 2px;
}
#content a.package {
	background-image : url(/img/links/package.png);
	background-position : left center;
	background-repeat : no-repeat;
	padding-left : 16px;
	padding-top : 2px;
}
#content a.auth {
	background-image : url(/img/links/auth.png);
	background-position : right center;
	background-repeat : no-repeat;
	padding-right : 28px;
	padding-top : 0px;
}
#content a.locked {
	background-image : url(/img/links/locked.png);
	background-position : right center;
	background-repeat : no-repeat;
	padding-right : 16px;
	padding-top : 0px;
}


/* Pour boutons show/hide de la fonction JavaScript "showhide_button" */
/*    ci-dessous:  "border-radius: 5px" est spécification CSS3, "-moz-border-radius: 5px" pour navigateurs Gecko (firefox...), "-webkit-border-radius: 5px" pour navigateurs Webkit (chrome, safari...)   */
.bouton {
	background: #eee url('/img/b-g-show.png') 4px no-repeat; padding-left: 24px;
	border: solid 1px #666; border-top-color: #ccc; border-left-color: #ccc;
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	color: #333; margin-left: 2pt; font-size: 1.0em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.bouton_masquer {
	background: #eee url('/img/b-g-hide.png') 4px no-repeat; padding-left: 24px; 
	border: solid 1px #666; border-top-color: #ccc; border-left-color: #ccc;
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	color: #333; margin-left: 2pt; font-size: 1.0em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.bouton:focus, .bouton_masquer:focus {
        background-color: #eee;
        border: solid 1px #ccc; border-top-color: #666; border-left-color: #666;
}
.bouton:hover, .bouton_masquer:hover { 
	background-color: #ddd;
}



/* Couleurs de texte */
/*   (et voir encore classe epfl/enac "local-color-text") */
.eit_tx_standard { color: #454545; }  /* couleur de texte standard epfl */
.eit_tx_gray1    { color: #474e52; }  /* correspond à classe epfl "short"  (darker gray) */
.eit_tx_gray2    { color: #696f6e; }  /* correspond à classe epfl "school" (dark gray)   */
.eit_tx_gray3    { color: #999c98; }  /* correspond à classe epfl "portal" (light gray)  */
.eit_tx_blanc    { color: #fff;    }
.eit_tx_rouge    { color: #f00;    }
.eit_tx_vert     { color: #080;    }
.eit_tx_bleu     { color: #00f;    }


/* Couleurs de background */
/*   (et voir encore classes epfl/enac "local-color-dark", "local-color-light" et "local-color") */
.eit_bg_gray1  { background-color: #474e52; }  /* correspond à classe epfl "short"  (darker gray) */
.eit_bg_gray2  { background-color: #696f6e; }  /* correspond à classe epfl "school" (dark gray)   */
.eit_bg_gray3  { background-color: #999c98; }  /* correspond à classe epfl "portal" (light gray)  */

.eit_bg_gris1  { background-color: #ccc; }
.eit_bg_gris2  { background-color: #ddd; }
.eit_bg_gris3  { background-color: #eee; }

.eit_bg_jaune1 { background-color: #ff7; }
.eit_bg_jaune2 { background-color: #ffa; }
.eit_bg_jaune3 { background-color: #ffc; }

.eit_bg_rouge1 { background-color: #fbb; }
.eit_bg_rouge2 { background-color: #fdd; }
.eit_bg_rouge3 { background-color: #fee; }

.eit_bg_vert1  { background-color: #bfb; }
.eit_bg_vert2  { background-color: #dfd; }
.eit_bg_vert3  { background-color: #efe; }

.eit_bg_bleu1  { background-color: #ccf; }
.eit_bg_bleu2  { background-color: #ddf; }
.eit_bg_bleu3  { background-color: #eef; }

.eit_bg_brun1  { background-color: #fca; }
.eit_bg_brun2  { background-color: #fdb; }
.eit_bg_brun3  { background-color: #fec; }