Fix clear behavior.
[htmlpurifier-web.git] / common.css
blobfaa2040f3ef233f00a4153d37f2ed3146759f007
2 /* Global Attributes */
4 html, body { /* background goes here because of XHTML semantics */
5 background-color: #F9F9FF;
6 color: #000;
7 font-family: Georgia, serif;
8 font-size: 10.5pt;
9 margin: 0;
10 padding: 0;
13 body {padding: 0 0 3em 0;}
15 /* needs some tuning */
16 a {color: #00E;}
17 a:visited {color:#551A8B}
18 a:hover {color: #FF6600;}
19 a:active {color: #E00;}
21 /* Header <common-header.xml> */
23 #header {
24 margin: 0;
25 background: #4A6282;
26 background-position: right 0.2em;
27 color: #FFF;
28 width: 100%;
30 #header a {
31 margin: 0.5em 5%;
32 color: #FFF;
33 text-decoration: none;
34 font-family: Georgia, serif;
35 font-weight: normal;
36 font-variant: small-caps;
37 letter-spacing: 0.2em;
38 font-size: 2em;
39 line-height: 2em;
41 #header a:hover {color: #E0E2E6;}
43 /* navigation */
45 #navigation {
46 margin: 0;
47 padding: 0;
48 border: solid #8AA0BC;
49 border-width: 1px 0;
50 background: #6480A6;
51 width: 100%;
54 #navigation h2 {display:none;}
56 #navigation ol {
57 margin: 0 5%;
58 padding: 0;
59 display: block;
62 #navigation li {
63 display: inline;
64 line-height: 1.7em;
65 margin: 0 0.6em 0 0; /* is readjusted by index.css */
68 #navigation li a {
69 color: #FFF;
70 text-decoration:none;
71 padding: 0.3em;
74 #navigation li a:hover {
75 background: #BCC8D8;
78 /* Logo */
79 #logo {
80 position: absolute;
81 right: 0;
82 top: 0;
83 width: 80px;
84 height: 80px;
85 margin: 0.5em 5%;
86 /* transparency fix */
87 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png', sizingMethod='scale');
90 body>#logo { /* hidden from IE6 */
91 background: url('logo.png') no-repeat;
94 /* Main (spans everything that shouldn't go to the margins */
95 #main {
96 clear: left;
97 margin: 2em auto;
98 padding: 0 5%;
99 max-width: 52em;
100 width: expression(document.body.clientWidth >
101 85 * parseInt(document.body.currentStyle.fontSize) ?
102 "48em": "auto");
105 /* Title (usually h1, is inside #main for subpages) */
106 #title {
107 font-weight: normal;
108 font-size: 2em;
109 border-bottom: 1px solid #BCC8D8;
110 margin-top: 2em;
113 /* Content (text of a document, not the main header or sub-navigation) */
114 #content {
117 #content h2 {
118 font-weight: normal;
119 font-size: 1.5em;
120 border-bottom: 1px solid #AAA;
121 margin-top: 2em;
124 #content h3 {
128 #content li {
129 margin: 0.8em 0;
132 #toc li {
133 margin: 0;
137 line-height: 1.4em;
140 #content p {
141 margin: 0;
142 text-indent: 2em;
144 #content p.lead {
145 text-indent: 0;
148 blockquote.digression {
149 font: 11pt Helvetica, sans-serif;
150 margin-left: 4em;
151 margin-right: 4em;
154 blockquote.fancy {
155 background: transparent url(quote-left.png) left top no-repeat;
156 margin: 1em 3%;
158 blockquote.fancy div.quote {
159 background: transparent url(quote-right.png) right bottom no-repeat;
160 padding: .5em 48px .5em;
162 blockquote.fancy div.origin {
163 text-align: right;
166 #content pre {
167 margin-left:4em;
170 #content pre.long {
171 margin-left:2%;
172 width: 100%;
173 overflow: auto;
176 /* acronym/abbr stuff */
178 /* acc:abbr is a hack to get styling to work in IE, see pngFix.js for details */
180 acronym, abbr, acc\:abbr { /* basic styling */
181 border-bottom: none;
182 font-size: 80%;
184 h2 acronym, h2 abbr, h2 acc\:abbr{ /* use normal size in headings */
185 font-size: 100%;
187 abbr.elaborates, acc\:abbr.elaborates {
188 font-size: 100%;
189 border-bottom:dotted 1px #000;
190 cursor: help;
193 /* aural declarations, pretty much sums up our semantics */
194 acronym {
195 speak: normal;
197 abbr, acc\:abbr {
198 speak: spell-out;
202 #content form {
203 margin: 1em;
206 #content table {
207 margin: 1em;
209 #content table thead th {border-bottom:1px solid #3C578C;}
210 #content table td, table th {
211 padding: 0 .4em;
214 #content .wide-table {
215 width: 100%;
217 #content .wide-table td, .wide-table th {
218 white-space: nowrap;
221 .disclaimer, .warning {
222 background:#FBB;
223 border:1px solid #F00;
224 margin:1em 3em;
225 padding:1em;
228 .notice {
229 background:#7084AA;
230 border:1px solid #4D5E80;
231 color:#FFF;
232 margin:1em 0;
233 padding:0.6em;
236 .notice a {
237 color: #FFF;
238 font-weight:bold;
241 .notice p {
242 margin-bottom:0;
245 .notice p.lead {
246 margin-top:0;
249 .warning h2 {
250 color: #911;
251 font-weight: bold;
252 margin: 0 0 .5em 0;
254 .warning p {
255 text-indent: 0;
258 li {
259 line-height: 1.4em;
262 ol.notes {
263 font-size:8pt;
266 ul.long li {
267 margin-top:1em;
270 ol.long li {
271 margin-top:1em;
274 .clear {clear:both;}
276 /* News widgets, for RSSGenerator */
278 .news .item {
279 border-bottom: 1px solid #BCC8D8;
280 padding-bottom: 1em;
282 .news .title {
283 margin-bottom: 0;
285 .news .date {
286 font-style: italic;
287 font-size: 10pt;
288 margin-bottom: 1em;
289 margin-left: 2em;
291 .news .body {}
292 .news .permalink {
293 text-align: right;
296 /* Table of contents, for GenerateTableofContents */
298 #toc ul {
299 list-style-type: none;
301 #toc .toc-label {
302 float: left;
303 padding-right: .5em;
304 text-align: right;
305 width: 2em;
308 .floated#toc {float: right; width: 28%; background:#F9F9FF;
309 padding:1em; margin: 1em 0 1em 1em; border: 1px solid #AAA;
310 position:relative;z-index:1;}
311 .floated#toc h2 {margin:0; font-size: 1.3em;}
312 .floated#toc .toc-base {margin:0.9em 0 0; padding:0;} /* Both set to zero for IE and Firefox */
313 .floated#toc li {
314 margin-top: .5em;
316 .floated#toc .toc-label {
317 width: 1.5em;
322 /* download */
324 #download-box {
325 background: #437048;
326 position: relative;
327 padding: 0;
328 margin: 2em 0 1em 0;
329 min-width: 380px;
332 #download-box h2 {
333 font-size: 2em;
334 font-weight: normal;
335 color: #FFF;
336 line-height: 1.5em;
337 margin: 0;
338 padding: 0 0 0 0.5em;
339 border: 0;
342 #download-files {
343 background: #70A978 url('art/dl-arrow.png') no-repeat;
344 background-position: 10px 100%;
347 #download-box .dl-box {
348 margin: 0;
349 position: relative;
350 padding: 0.5em;
351 padding-left: 110px;
354 #download-box .dl-box a {
355 color: #000;
356 font-size: 1.4em;
357 position: relative;
358 z-index: 1;
359 text-decoration: none;
360 border-bottom: 1px solid #437048;
363 #download-box .dl-box a:hover {
364 color: #FFF;
367 #download-box .dl-box .file-type {
368 color: #437048;
369 margin-left: 1em;
370 font-size: 1.2em;
373 #download-others {
374 text-align: right;
375 padding: 0 1.5em 0 0;
376 background: #56905c;
379 #download-others a {
380 color: #FFF;
381 text-decoration: none;
382 font-size: 1.2em;
385 #download-others a:hover {
386 color: #000;
389 /* news pages */
391 #news-navigation {
392 margin: 1em 0;
393 border-top: 1px solid #BCC8D8;
394 padding-top: 3px;
397 #news-navigation .prev {
398 float: left;
399 width: 32%;
402 #news-navigation .index {
403 float: left;
404 width: 33%;
405 text-align: center;
408 #news-navigation .next {
409 margin-left: 67%;
410 text-align: right;
413 #news-date {
414 margin-bottom: 1em;