1 /* --------------------------------------------------------------
5 Cf.: http://contrib.spip.net/3820
7 -------------------------------------------------------------- */
9 html
{ font-size: 100.01%; } /* pour IE < 6 */
10 /* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ et http://forum.alsacreations.com/topic-4-54377-1.html */
11 body
{ background: #FFFFFF; font: 1em/1.5em Georgia
, Cambria
, Times New Roman
, Times
, serif
; color: #222222; }
13 /* Titraille / Intertitres */
19 h6
,.h6
{ display: block
; margin: 0; padding: 0; font-size: 100%; font-weight: normal
; }
20 hr
{ height: 1px; margin: 1.5em 0; border: 0; background: #222222; color: #222222; }
22 h1
,.h1
{ font-size: 2em; line-height: 1.5; margin-bottom: .75em; }
23 h2
,.h2
{ font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
24 h3
,.h3
{ font-size: 1.25em; line-height: 1.2; margin-bottom: 1.2em; }
25 h4
,.h4
{ font-size: 1.1em; line-height: 1.364; margin-bottom: 1.364em; }
26 h5
,.h5
{ font-size: 1em; font-weight: bold
; margin-bottom: 1.5em; }
27 h6
,.h6
{ font-size: 1em; font-weight: bold
; }
29 /* Enrichissements typographiques */
30 strong
, b
{ font-weight: bold
; }
31 em
, i
{ font-style: italic
; }
32 small
, .small
{ font-size: 90%; }
33 big
, .big
{ font-size: 130%; }
34 abbr
[title
], acronym
[title
] { border-bottom: .1em dotted
; cursor: help
; }
35 @media print
{ abbr
[title
]:after
{ content: " (" attr
(title
) ")"; } }
36 dfn
{ font-weight: bold
; font-style: italic
; }
37 del
, .del
{ background-color: #FFDDDD; border-color: #CC0000; color: #CC0000; text-decoration: line-through
; }
38 ins
, .ins
{ background-color: #DDFFDD; border-color: #00AA00; color: #00AA00; text-decoration: none
; }
39 sup
, sub
{ font-size: .8em; font-variant: normal
; line-height: 0; }
40 sup
{ vertical-align: super
; }
41 .ie sup { vertical-align: text-top
; }
42 sub
{ vertical-align: sub
; }
43 .ie sub { vertical-align: text-bottom
; }
44 .caps { font-variant: small-caps
; }
47 ul
, ol
, li
, dl
, dt
, dd
{}
48 ul ul
, ol ol
, ul ol
, ol ul
{ margin-top: 0; margin-bottom: 0; }
50 dl dt
{ font-weight: bold
; }
55 caption
{ background: #EEE; }
56 th
{ font-weight: bold
; }
57 thead th
{ background: #DDD; }
58 th
,td
,caption
{ padding: 0.75em; }
59 tbody
tr:nth-child
(even
) th
,
60 tbody
tr:nth-child
(even
) td
,
62 tbody tr
.even td
{ background: #EEE; }
63 tfoot
{ font-style: italic
; }
65 /* Citations, code et poesie */
66 q
{ font-style: italic
; }
67 blockquote
{ padding: 0 50px; }
68 cite
{ font-style: italic
; }
70 address
{ font-style: italic
; }
72 pre
,code
,kbd
,samp
,var
,tt
{ font-family: 'Courier New', Courier
, monospace
; font-size: 1em; }
73 pre
{ margin: 1.5em 0;
74 /* Cf.: http://perishablepress.com/press/2010/06/01/wrapping-content/ */
75 white-space: pre
; /* CSS 2.0 */
76 white-space: pre-wrap
; /* CSS 2.1 */
77 white-space: pre-line
; /* CSS 3.0 */
78 white-space: -pre-wrap
; /* Opera 4-6 */
79 white-space: -o-pre-wrap
; /* Opera 7 */
80 white-space: -moz-pre-wrap
; /* Mozilla */
81 white-space: -hp-pre-wrap
; /* HP Printers */
82 word-wrap: break-word
; /* IE 5+ */
84 kbd
{ background-color: #222222; color: #FFFFFF; }
85 samp
{ font-weight: bold
; }
86 var
{ font-style: italic
; }
89 p
, .p
, dl
, dd
, blockquote
, address
, pre
, table
, fieldset
{ margin-bottom: 1.5em; }
94 a
[hreflang
]:after
{ content: "\0000a0(" attr
(hreflang
) ")"; }
96 a
, a:visited
{ color: #222222; text-decoration: underline
; }
97 .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
100 .on { font-weight: bold
; }
103 * Print styles from HTML5 Boilerplate
104 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
108 pre
, blockquote
{ page-break-inside: avoid
; }
109 thead
{ display: table-header-group
; } /* css-discuss.incutio.com/wiki/Printing_Tables */
110 tr
, img
{ page-break-inside: avoid
; }
111 @page
{ margin: 0.5cm; }
112 p
, h2
, h3
{ orphans: 3; widows: 3; }
113 h2
, h3
{ page-break-after: avoid
; }
117 * Base typo sur petits ecrans
118 * Cf.: http://www.alsacreations.com/astuce/lire/1177
121 @media (max-width: 640px) {
123 /* fixer une largeur maximale de 100 % aux elements potentiellement problematiques */
124 img
, table
, td
, blockquote
, code
, pre
, textarea
, input
, iframe
, object
, embed
, video
{ max-width: 100% !important
; }
125 /* conserver le ratio des images, necessaire car attribut height existant */
126 img
{ height: auto
; }
128 /* gestion des mots longs */
129 textarea
, table
, td
, th
, code
, pre
, samp
{ word-wrap: break-word
; /* cesure forcee */ }
130 code
, pre
, samp
{ white-space: pre-line
; /* passage a la ligne specifique pour les elements a chasse fixe */ }
134 @media screen and
(max-width:640px) and
(orientation: landscape
) {
135 body
{ -webkit-text-size-adjust: 70%; }
141 L'usage de proprietes -webkit-* sans leurs contreparties
142 (-o-*, -moz-*, etc.) est fortement deconseille !
143 cf. http://www.webstandards.org/2012/02/09/call-for-action-on-vendor-prefixes/
145 Prenez le temps de corriger s'il vous plait : les proprietes CSS prefixees ne sont en theorie
146 destinees qu'a des fins de test.