@charset "UTF-8"; /* Feuille de style CSS3 pour les dossiers pédagogiques du Centre Pompidou Author: Cyril Clément Author URI: http://www.cyrcle.org Version: 1 */ @font-face { font-family: 'DINEngschrift'; src: url('fonts/dinengsc.eot'); src: local('☺'), url('fonts/dinengsc.woff') format('woff'), url('fonts/dinengsc.ttf') format('truetype'), url('fonts/dinengsc.svg#webfont1') format('svg'); /*font-style: normal;*/ /*font-weight: normal;*/ } html { font-size: 100%; /* Évite un bug d'IE 6-7. */ } body { font-family: Verdana, Arial, Helvetica, sans-serif; background: #FFFFFF; margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */ padding: 0; text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */ font-size: .8em; line-height: 1.5; color: #000000; } h1, h2, h3, h4 { font-family: DINEngschrift, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif; font-weight:normal; /*letter-spacing: 0.05em;*/ /*word-spacing: 0.05em;*/ text-transform: uppercase; /*margin: 0 0 1em 0;*/ line-height: 1.2; } h1 { font-size: 7em; background-color: #0CF; margin: 0; padding: .2em .3em; text-align:center; } h2 { font-size: 1.5em; background-color: #0CF; margin: 4em 0 .8em 0; padding: .1em 0 0 .3em; } h3 { font-size: 1.4em; background-color: #B5F3FF; margin: 2.5em 0 .7em 0; padding: .1em 0 0 .3em; } h4 { font-size: 1.3em; color:#00667F; margin: 2em 0 .4em 0; padding: 0; } h5 { font-size: 1.1em; color: #00667F; margin: 0 0 .4em 0; padding:0; } h6 { font-size: 1em; margin: 0; padding: 0; } h2 + h3, h2 + h4, h3 + h4 { margin: 0 0 .7em 0; } h2 a img, h3 a img, h4 a img { margin: 0 0 0 .5em; } .mini-h1 { font-size: .5em; } ul, ol { margin: 0; /* enlève la hiérarchie pour IE6 et IE7 */ padding: 0; /* enlève la hiérarchie pour Firefox, Safari, IE8 */ line-height: 1.2; text-align: left; } ul.sommaire { margin: 5em 0 5em 6em; } ul.sommaire li { font-family: DINEngschrift, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif; font-size: 1.8em; text-transform: uppercase; list-style-type: none; margin-top: .8em; } ul.sommaire li ul li { font-size: .8em; text-transform:none; margin-top: .2em; } ul.sommaire li ul li ul li { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .7em; list-style: disc inside; color: #00667F; margin: 0 0 0 .2em; /*margin-left: 1em;*/ } ul.references { margin: 0 0 1em 1.4em; list-style: disc outside; line-height: 1.4; } ul.references li { margin: 0 0 .4em 0; } p { margin: 0 0 1em 0; text-align: justify; } blockquote { margin: .3em 10% 1.5em 10%; color: #00667F; } blockquote p { margin: .8em 0 0 0; font-size: 1.2em; } blockquote p.legende { font-size: .9em; } sup { font-size: .8em; vertical-align: top; } img.spectre { display:block } /* Résoud le pb de marge autour de l'image avec IE7 */ hr { height: 1px; margin: 0; padding: 0; color: #99b2cc; background-color: #99b2cc; border: 0; } a { text-decoration: underline; } a:link { color: #00667F; text-decoration: none; } a:visited { color: #00667F; text-decoration: none; } #container a:hover, #container a:focus, #container a:active { color: #00667F; text-decoration: none; background-color: #CCFFFF; } /* bien spécifier #container pour le background-color sinon pb dans slimbox au survol des images */ h2 a:hover, h2 a:focus, h2 a:active, h3 a:hover, h3 a:focus, h3 a:active { background:none; } a img { border: none; } #container { /* min max width, IE wont understand these, so we will use javascript magic in the */ max-width: 980px; min-width: 420px; /*width: 780px;*/ background: #FFFFFF; margin: 0 auto; text-align: left; } #header { padding: 2.5em 4em; text-align: right; } #header p { font-family: Arial, sans-serif; margin: 0; padding: 0; text-align: right; } #header .theme { font-family: DINEngschrift, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif; font-size: 1.5em; } #header h1 { margin: 0; padding: 10px 0; } #mainContent { padding: 0 5% 3em 5%; background: #FFFFFF; } #mainContent h1 { /* background-image: url("marble.gif"); */ } #footer { /* padding: 0 10px; */ /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */ /* background:#DDDDDD; */ } #footer p { margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */ padding: 10px 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */ } .couverture { margin: 2em 0; text-align:center; } .legende-couverture { font-size: .8em; text-align:right; color: #00667F; margin: .5em 0; } .legende { font-size: .8em; } .auteur { margin: 4em 0 0 6em; } p.auteur + ul.sommaire { margin: 1em 0 5em 6em; } .renvoi { font-size: .8em; margin: 1.5em 0 1em 0; } .inter { color: #00667F; font-size: 1.1em; margin: 0; padding:0; display:inline-block; } .encadre { font-size: .8em; /* border: 1px solid #000000; */ margin: 3em 0; padding: 1em 2em; background-color: #D3F2FF; } .encadre p { margin: .2em 0; padding:0; } .encadre p img { /*vertical-align:-30%; */ vertical-align:middle; } .adroite { float: right; margin: 4px 0 2px 10px; } .agauche { float: left; margin: 4px 10px 2px 0; } @media print { body { font-size: .75em; } h2 { border: 1px solid black; } h3 { border: 1px solid gray; } h4, h5 { padding-left: 0; } h2 img, h3 img, h4 img { display: none; } .encadre { border: 1px solid black; } .encadre img { /*display: none;*/ } }