/* ======================================================================================== */ /* Reglages generiques */ /* ======================================================================================== */ * { margin:0; padding:0; } /* Override default browser margins and paddings */ .clear { clear:both; } /* Generique: Pour chasser les blocs a la ligne */ a img { border:0; } /* Generqiue: Nous ne voulons pas du border par defaut des images entourrees de liens */ a { color:#3d6f92; font-size:12px; } /* Generique: Forme par defaut d'un lien... */ a:hover { text-decoration:none; } /* ...et comportement par defaut du lien */ ul { list-style:none; } /* Generique: Nous ne voulons pas des puces car nous utilisons les listes pour des raisons tres variees */ .blue_text { color:#3d6f92; font-size:12px; } /* Generique: Lorsqu'on veut mettre en valeur un texte en le mettant en bleu */ .date { background:url(images/date_bg.gif) no-repeat 0 0; padding:2px 0 2px 22px; color:#7b7b7b; font: bold 11px tahoma; } /* Generique: Style de date pour les actualites et similaires */ .current_selection { background: url(images/bullet1.gif) no-repeat left; padding-left: 16px; font-size:12px; } /* Dans les menus des statisques: indique les stats en cours */ /* Retablissement de l'enumeration explicite avec le style imbrique .enumeration */ ul.enum0 { list-style: disc; margin-left: 16px; } /* Petites puces */ ul.enum1 { list-style: url(images/bullet3.gif); margin-left: 16px; } /* Petites puces */ ul.enum1 li { margin-bottom: 8px; } ul.enum2 { list-style: url(images/bullet2.gif); margin-left: 20px; } /* Puces plus grosses */ ul.enum2 li { margin-top: 20px; margin-bottom: 8px; } /* Police de caracteres et interlignage */ html, input, textarea, table { font-family: Georgia, tahoma; font-size:12px; line-height:17px; color:#868686; } h1 { font-family: "Trebuchet MS", tahoma, verdana, arial, sans-serif; font-weight: lighter; font-size: 24px; line-height: 100%; margin-top: 20px; margin-bottom: 20px; } h2 { font-family: "Trebuchet MS", tahoma, verdana, arial, sans-serif; font-weight: lighter; color: #3D6F92; /* #60AFD7 */ letter-spacing: -1px; font-size: 18px; margin-top: 20px; margin-bottom: 20px; } h2.bullet { background:url(images/date_bg.gif) no-repeat 0 0; padding: 0 0 0 22px; } h2.link { margin-bottom: 0px; text-decoration: underline; } h2.link:hover { text-decoration: none; } h3 { font-size: 12px; color: #3d6f92; padding: 0px 0px 0px 0px; margin-top: 0px } h3.bullet { background:url(images/date_bg.gif) no-repeat 0 0; padding: 0 0 0 22px; } .more { text-align:right;} .more a { background:url(images/more_bg.gif) top right no-repeat; padding-right:13px; padding-top:1px; color:#676767; font:bold 11px arial; margin-top:7px; } .return { text-align:left;} .return a { background:url(images/return.gif) top left no-repeat; padding-left:13px; padding-top:1px; color:#676767; font:bold 11px arial; margin-top:7px; } .back_to_top { text-align:right;} .back_to_top a { background:url(images/up.gif) top right no-repeat; padding-right:18px; color:#676767; font: normal 11px arial; margin-top:7px; } /* ======================================================================================== */ /* Canevas delimitant la page */ /* Nous donnons une bordure haute et basse a la page, comme body ne peut pas les implementer tout les deux nous devons inclure un div - background_top - qui implemente la deuxieme. Noter que dans IE6 et IE7, la bordure basse sera calee au bas du navigateur si la page est courte, alors que dans FireFox, elle sera calee a la fin du contenu. */ /* ======================================================================================== */ body { background:#FFFFFF url(images/footer_bg.gif) bottom repeat-x; } #background_top { background:url(images/header_tall.gif) top repeat-x; } #main { width:738px; margin:0 auto; } /* ======================================================================================== */ /* En-tete */ /* ======================================================================================== */ /* Conteneur de l'en-tete qui fixe surtout sa hauteur */ #header { height: 157px; } /* Premier element de l'en-tete: la zone du logo et des elements utilitaires tels que liens utiles, rss, login, et. */ #header_logo { height:92px; width:100%; } #header_logo .left { float:left; padding:26px 0 0 0; } /* On repousse les elements de 26px vers le bas pour ne pas occulter la lisiere haute de la page */ #header_logo .right { float:right; padding:15px 11px 0 0; /* Meme principe, les 46px sont arbitraires en fonction de l'element a positionner */} /* Deuxieme element de l'en-tete: le menu principal */ #header_menu { background:url(images/menu_tall.gif) top repeat-x; height:65px; } #header_menu .rightbg { background:url(images/menu_right.gif) top right no-repeat; } #header_menu .leftbg { background:url(images/menu_left.gif) top left no-repeat; width:100%; height:65px; } /* Hack IE6: width:100%; height:65px; */ #header_menu .padding { padding: 9px 0; } /* Comportement visuel des elements de menu */ #header_menu li { float:left; width:123px; background:url(images/menu_libg.gif) top right repeat-y; padding: 9px 0; /* Se combine avec le header_menu .padding ci-dessus pour donner des separateurs de menu plus grands */ text-align:center; font-size:12px; /* display:block; */ } #header_menu li a { color: #919191; text-decoration: none; } /* display:block; padding:8px 0 5px 0; */ #header_menu li a:hover { color:#000000; text-decoration: underline; } /* */ #header_menu li span { color:#000000; text-decoration: underline; } /* Utiliser pour indiquer visuellement la page courante */ #header_menu .last { background:none; } /* Utiliser pour indiquer le dernier element de menu et desactiver l'affichage de la bordure droite */ /* ======================================================================================== */ /* Banner de titre / de photos / de marketing */ /* ======================================================================================== */ #banner { height: 100px; } /* DEBUG: border: #000000 thin solid; */ /* #banner { background:url(images/banner_innerpage.jpg) top left no-repeat; } */ /* padding:45px 60px 28px 414px; color:#ffffff; */ #banner_home { height: 311px; } /* DEBUG: border: #000000 thin solid; */ #banner_home { background:url(images/banner_homepage.jpg) top left no-repeat; } /* padding:45px 60px 28px 414px; color:#ffffff; */ /* Le designer a le choix parmi les bannieres generales suivantes. Pour cela, dans la "banniere de titre / marketing" du fichier d'en-ete, il peut donner l'un des identifiants ci-apres a son DIV. */ /* #banner_gefp { background:url(images/banner_innerpage.jpg) top left no-repeat; } */ /* ======================================================================================== */ /* Corps de page / contents */ /* ======================================================================================== */ /* Conteneur du corps de la page. Nous pourrions eventuellement fusionner les deux pour economiser l'imbrication de deux divs, mais ce serait moins souple plus tard pour des compositions specifiques. */ #middle { width:100%; } /* La zone de contenu se coule dans la largeur et la hautuer qui lui sont offertes */ #middle .indent_top_and_bottom { padding: 20px 0 20px 0;} /* Le premier px est l'espace blanc qui separe le corps de page de la banniere */ /* Differentes colonnes pour composer les pages: pleine largeur, large et etroite. La gouttiere etant necessaire, le decoupage de la largeur de la page demande les differentes composisions pour arriver a la largeur exacte de 738px: - Pleine largeur: .column_full - Large + Etroite : .column_wide + .gutter + .column_thin1 - Etoite + Etroite + Etoite : .column_thin1 + .gutter + .column_thin2 + .gutter + .column_thin1 */ .column_full, .column_wide, .column_thin1, .column_thin2, .gutter { float:left; overflow: hidden; /* Pis aller par rapport a "visible" ou "auto"/"scroll" */ } .column_full { width:738px; } /* Idem a la largeur de la page: voir #main */ .column_wide { width:490px; } /* Au lieu de 496px */ .column_thin1 { width:241px; } /* A utiliser avec column_wide */ .column_thin2 { width:242px; } /* A utiliser avec deux (02) column_thin1 pour faire trois colonnes quasi egales */ .gutter { width:7px; } /* Gouttiere standard. Usage:
 
avec le   requis par IE7 (mais pas IE6...) */ .vertical_line1 { background:url(images/vertical_line.gif) repeat-y 244px 0; width:100%;} /* At 244 from left i.e. thin column + 3px */ .vertical_line2 { background:url(images/vertical_line.gif) repeat-y 493px 0; width:100%;} /* At 493 from left i.e. large column + 3px */ .padding { padding: 10px 13px 0px 14px; } /* Attention: Le total des marges gauche + droite ne doit pas depasser 27px si une photo interieure a un box standaed fait 208px */ .padding_4 { padding: 4px 6px 0px 6px; } /* Attention: Le total des marges gauche + droite ne doit pas depasser 27px si une photo interieure a un box standaed fait 208px */ .padding_left_10 { padding: 0px 0px 0px 10px; } /* Pour ajouter une marge a gauche au contenu d'un bloc */ .padding_left_20 { padding: 0px 0px 0px 20px; } /* Pour ajouter une marge a gauche au contenu d'un bloc */ .padding_right_10 { padding: 0px 10px 0px 0px; } /* Pour ajouter une marge a droite au contenu d'un bloc */ .padding_right_20 { padding: 0px 20px 0px 0px; } /* Pour ajouter une marge a droite au contenu d'un bloc */ .padding_left_right_10 { padding: 0px 10px 0px 10px; } /* Pour ajouter une marge a droite au contenu d'un bloc */ .padding_left_right_20 { padding: 0px 20px 0px 20px; } /* Pour ajouter une marge a droite au contenu d'un bloc */ .bottom_line { background:url(images/underline_dotted.gif) bottom repeat-x; } /* Utiliser comme separateur de blocs superposes */ .underline { padding-bottom:2px; background:url(images/underline_dotted.gif) bottom repeat-x; } /* Utiliser comme simple soulignement. Colle au bas du contenu*/ .underline h2 { margin-top: -10px; margin-bottom: 8px } /* ... */ .underline_20 { padding-bottom:20px; background:url(images/underline_dotted.gif) bottom repeat-x;} /* Utiliser comme simple soulignement. S'eloigne du bas du contenu de 20px */ .arial_12 { font: normal 12px arial; } .verdana_12 { font: normal 12px verdana; } /* ======================================================================================== */ /* Pied de page */ /* ======================================================================================== */ #footer { width:100%; } #footer .indent { padding:20px 0 20px 0; font: bold 12px arial; color:#bebebe; } #footer .indent a { font-weight: normal; color:#80acca; font: bold 11px arial; } /* ======================================================================================== */ /* Composants */ /* ======================================================================================== */ /* Le jeu suivant permet de construire une cartouche a coins arrondis qui s'adapte a la largeur de son conteneur. */ .border { background:url(images/box1_border.gif) top repeat-x; } .border .btall { background:url(images/box1_border.gif) bottom repeat-x; } .border .ltall { background:url(images/box1_border.gif) left repeat-y; } .border .rtall { background:url(images/box1_border.gif) right repeat-y; } .border .tleft { background:url(images/box1_top_left.gif) top left no-repeat; } .border .tright { background:url(images/box1_top_right.gif) top right no-repeat; } .border .bleft { background:url(images/box1_bottom_left.gif) bottom left no-repeat; } .border .bright { background:url(images/box1_bottom_right.gif) bottom right no-repeat; width:100%; } .border .ind { padding:4px 4px 15px 2px; } /* Utiliser pour donner une marge interieur dans un box1 */ .border a img { float:right; } /* ======================================================================================== */ /* Goodies divers */ /* ======================================================================================== */ /* Differencier les liens sortants et les mailtos (ne marche pas pour IE6 et avant). */ /* Set the style firts for all full links. Note Ihari: nous pourrions aussi detecter target="_blank" */ a[href^="http:"] { background: url(images/external-link.gif) no-repeat right; padding-right: 10px; } /* Then filter back to exclude any internal links */ a[href^="http://localhost"] { background: none; padding-right: 0px; } /* Highlight mailto: */ a[href^="mailto:"] { background: url(images/e-mail.gif) no-repeat right; padding-right: 18px; } /* Vignettes indiquant le type d'un document */ /* ATTENTION: Necessite un HTML strict pour fonctionner sous IE7. Exemple: */ a[href$=".doc"] { background: url(images/docicons/word.gif) no-repeat right; padding-right: 24px; } a[href$=".rtf"] { background: url(images/docicons/rtf.gif) no-repeat right; padding-right: 24px; } a[href$=".xls"] { background: url(images/docicons/xls.gif) no-repeat right; padding-right: 24px; } a[href$=".ppt"] { background: url(images/docicons/ppt.gif) no-repeat right; padding-right: 24px; } a[href$=".pdf"] { background: url(images/docicons/pdf.gif) no-repeat right; padding-right: 24px; } a[href$=".txt"] { background: url(images/docicons/txt.gif) no-repeat right; padding-right: 24px; } a[href$=".jpg"] { background: url(images/docicons/jpg.gif) no-repeat right; padding-right: 24px; } a[href$=".gif"] { background: url(images/docicons/gif.gif) no-repeat right; padding-right: 24px; } a[href$=".png"] { background: url(images/docicons/png.gif) no-repeat right; padding-right: 24px; } a[href$=".zip"] { background: url(images/docicons/zip.gif) no-repeat right; padding-right: 24px; } /* Habillage des tableaux de donnees du site avec la classe "styled" qu'il suffira de donner au tableau. */ .styled { background-color:#d3e1f4 ; } .styled td, .styled th { background-color:#fff ; padding: 2px 6px; } .styled .head { background:#f2f8ff ; color:#3d6f92; } /* Habillage des tableaux de liste et pagination */ .listingtable td { padding: 3px 6px 5px; } .listingtable .head { padding: 3px 6px; background:#ebf3fd url(images/headtable.gif) left top ; color:#779ac9; border: 1px solid #aaccf6; } .tahoma_11 { font: normal 11px tahoma; } /* Style des elements du login. Les labels et les inputs d'une maniere generale sont definis, submits compris puis que nous utilisons des input type="submit", puis nous stylons separement les boutons de login et de logout. */ .loginform label { display: block; font: normal 11px tahoma; margin-bottom: 3px; } .loginform input { width: 80px; font: bold 11px tahoma; } .loginform input.login_button { width: 80px; } .loginform input.logout_button { width: 100px; } /* Boutons */ .CommandButton { background-color:#ebf3fd ; border: 1px solid #9cc1ee; border-top: 1px solid #cbe2fd; border-left: 1px solid #cbe2fd; padding: 2px 6px 3px; font: bold 12px arial; cursor: pointer; color:#3d6f92; height: 22px; } .connexion { height: 19px; width: 78px; padding-top:0px; } .deconnexion { height: 19px; padding-top:0px; margin-top:5px; } /* Camembert small */ .camembert { float: left; margin-right:10px; } /**/ .sidemenu { } /* font: bold 12px arial ; */ .sidemenu a { color:#4680a8; } .sidemenu a:hover { font: bold 11px; font-weight: bold; } /* text-transform: uppercase; */ /* tahoma */ .current_selection { color:#c1c0c0; } /* Ando - 2008-11-19 Pour nos messages d'erreur eventuels qui s'affichent generalement au dessous des champs inputs d'un formulaire. */ .ErrorMessage1 { font: normal 11px arial;color: #393939; background-color:#fffbbd ; padding: 2px 5px 3px; margin:2px 0; } .highlight { background-color: yellow; } /* Petites annonces : onglets */ .tabmenu { height:27px; border-bottom:solid 1px #ebebeb; position : relative; } .menu { height:26px; position : absolute; top:1px;} .tabmenu a { cursor:pointer; background: url(images/simpletab-right.gif) no-repeat top right; float: left; height: 27px; padding-right: 12px; margin-left: 4px; text-decoration: none;} .tabmenu a span { background: url(images/simpletab-left.gif) no-repeat top left; display: block; padding: 6px 0 7px 12px; font: bold 12px verdana ; text-decoration: none ;} .tabmenu a:hover { color:#393939; } .tabmenu a:hover span { } .tabmenu a.current { background: url(images/simpletab-right.gif) no-repeat right -53px; color:#393939; } .tabmenu a.current span { background: url(images/simpletab-left.gif) no-repeat left -53px; } .tabsection { border:solid 1px #ebebeb; margin-top:-1px; } .doclist ul{ margin-bottom:10px;} .doclist ul li {list-style:circle; margin-left:25px;} .pptDown { background: url(images/docicons/ppt.gif) no-repeat left; padding: 20px; }