Mercurial > sat_docs

comparison printable_cards/xhtml/cmc/specimen_files/specimen_stylesheet.css @ 5:dfc5c6be7761

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add xhtml template for printing "business" (visiting) cards: The output is made for being printed on DECAdry SCW-2090. To print it, it's better to export it first to PDF from your browser. Be sure you disabled all the margins, header and footer set by the browser.
author souliane <souliane@mailoo.org>
date Thu, 03 Jul 2014 12:21:45 +0200
parents
children
comparison
equal deleted inserted replaced
4:a6af040be754 5:dfc5c6be7761
1 @import url('grid_12-825-55-15.css');
2
3 /*
4 CSS Reset by Eric Meyer - Released under Public Domain
5 http://meyerweb.com/eric/tools/css/reset/
6 */
7 html, body, div, span, applet, object, iframe,
8 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
9 a, abbr, acronym, address, big, cite, code,
10 del, dfn, em, font, img, ins, kbd, q, s, samp,
11 small, strike, strong, sub, sup, tt, var,
12 b, u, i, center, dl, dt, dd, ol, ul, li,
13 fieldset, form, label, legend, table,
14 caption, tbody, tfoot, thead, tr, th, td
15 {margin: 0;padding: 0;border: 0;outline: 0;
16 font-size: 100%;vertical-align: baseline;
17 background: transparent;}
18 body {line-height: 1;}
19 ol, ul {list-style: none;}
20 blockquote, q {quotes: none;}
21 blockquote:before, blockquote:after,
22 q:before, q:after {content: ''; content: none;}
23 :focus {outline: 0;}
24 ins {text-decoration: none;}
25 del {text-decoration: line-through;}
26 table {border-collapse: collapse;border-spacing: 0;}
27
28
29
30
31 body {
32 color: #000;
33 background-color: #dcdcdc;
34 }
35
36 a {
37 text-decoration: none;
38 color: #1883ba;
39 }
40
41 h1{
42 font-size: 32px;
43 font-weight: normal;
44 font-style: normal;
45 margin-bottom: 18px;
46 }
47
48 h2{
49 font-size: 18px;
50 }
51
52 #container {
53 width: 865px;
54 margin: 0px auto;
55 }
56
57
58 #header {
59 padding: 20px;
60 font-size: 36px;
61 background-color: #000;
62 color: #fff;
63 }
64
65 #header span {
66 color: #666;
67 }
68 #main_content {
69 background-color: #fff;
70 padding: 60px 20px 20px;
71 }
72
73
74 #footer p {
75 margin: 0;
76 padding-top: 10px;
77 padding-bottom: 50px;
78 color: #333;
79 font: 10px Arial, sans-serif;
80 }
81
82 .tabs {
83 width: 100%;
84 height: 31px;
85 background-color: #444;
86 }
87 .tabs li {
88 float: left;
89 margin: 0;
90 overflow: hidden;
91 background-color: #444;
92 }
93 .tabs li a {
94 display: block;
95 color: #fff;
96 text-decoration: none;
97 font: bold 11px/11px 'Arial';
98 text-transform: uppercase;
99 padding: 10px 15px;
100 border-right: 1px solid #fff;
101 }
102
103 .tabs li a:hover {
104 background-color: #00b3ff;
105
106 }
107
108 .tabs li.active a {
109 color: #000;
110 background-color: #fff;
111 }
112
113
114
115 div.huge {
116
117 font-size: 300px;
118 line-height: 1em;
119 padding: 0;
120 letter-spacing: -.02em;
121 overflow: hidden;
122 }
123 div.glyph_range {
124 font-size: 72px;
125 xheight: 3.3em;
126 line-height: 1.1em;
127 xoverflow: hidden;
128 }
129
130 .size10{ font-size: 10px; }
131 .size11{ font-size: 11px; }
132 .size12{ font-size: 12px; }
133 .size13{ font-size: 13px; }
134 .size14{ font-size: 14px; }
135 .size16{ font-size: 16px; }
136 .size18{ font-size: 18px; }
137 .size20{ font-size: 20px; }
138 .size24{ font-size: 24px; }
139 .size30{ font-size: 30px; }
140 .size36{ font-size: 36px; }
141 .size48{ font-size: 48px; }
142 .size60{ font-size: 60px; }
143 .size72{ font-size: 72px; }
144 .size90{ font-size: 90px; }
145
146
147 .psample_row1 { height: 120px;}
148 .psample_row1 { height: 120px;}
149 .psample_row2 { height: 160px;}
150 .psample_row3 { height: 160px;}
151 .psample_row4 { height: 160px;}
152
153 .psample {
154 overflow: hidden;
155 position: relative;
156 }
157 .psample p {
158 line-height: 1.3em;
159 display: block;
160 overflow: hidden;
161 margin: 0;
162 }
163
164 .psample span {
165 margin-right: .5em;
166 }
167
168 .white_blend {
169 width: 100%;
170 height: 61px;
171 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
172 position: absolute;
173 bottom: 0;
174 }
175 .black_blend {
176 width: 100%;
177 height: 61px;
178 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
179 position: absolute;
180 bottom: 0;
181 }
182 .fullreverse {
183 background: #000 !important;
184 color: #fff !important;
185 margin-left: -20px;
186 padding-left: 20px;
187 margin-right: -20px;
188 padding-right: 20px;
189 padding: 20px;
190 margin-bottom:0;
191 }
192
193
194 .sample_table td {
195 padding-top: 3px;
196 padding-bottom:5px;
197 padding-left: 5px;
198 vertical-align: middle;
199 line-height: 1.2em;
200 }
201
202 .sample_table td:first-child {
203 background-color: #eee;
204 text-align: right;
205 padding-right: 5px;
206 padding-left: 0;
207 padding: 5px;
208 font: 11px/12px "Courier New", Courier, mono;
209 }
210
211 code {
212 white-space: pre;
213 background-color: #eee;
214 display: block;
215 padding: 10px;
216 margin-bottom: 18px;
217 overflow: auto;
218 }
219
220
221 .bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
222
223 .box {
224 padding: 18px;
225 margin-bottom: 18px;
226 background: #eee;
227 }
228
229 .reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
230
231 #bodycomparison {
232 position: relative;
233 overflow: hidden;
234 font-size: 72px;
235 height: 90px;
236 white-space: nowrap;
237 }
238
239 #bodycomparison div{
240 font-size: 72px;
241 line-height: 90px;
242 display: inline;
243 margin: 0 15px 0 0;
244 padding: 0;
245 }
246
247 #bodycomparison div span{
248 font: 10px Arial;
249 position: absolute;
250 left: 0;
251 }
252 #xheight {
253 float: none;
254 position: absolute;
255 color: #d9f3ff;
256 font-size: 72px;
257 line-height: 90px;
258 }
259
260 .fontbody {
261 position: relative;
262 }
263 .arialbody{
264 font-family: Arial;
265 position: relative;
266 }
267 .verdanabody{
268 font-family: Verdana;
269 position: relative;
270 }
271 .georgiabody{
272 font-family: Georgia;
273 position: relative;
274 }
275
276 /* @group Layout page
277 */
278
279 #layout h1 {
280 font-size: 36px;
281 line-height: 42px;
282 font-weight: normal;
283 font-style: normal;
284 }
285
286 #layout h2 {
287 font-size: 24px;
288 line-height: 23px;
289 font-weight: normal;
290 font-style: normal;
291 }
292
293 #layout h3 {
294 font-size: 22px;
295 line-height: 1.4em;
296 margin-top: 1em;
297 font-weight: normal;
298 font-style: normal;
299 }
300
301
302 #layout p.byline {
303 font-size: 12px;
304 margin-top: 18px;
305 line-height: 12px;
306 margin-bottom: 0;
307 }
308 #layout p {
309 font-size: 14px;
310 line-height: 21px;
311 margin-bottom: .5em;
312 }
313
314 #layout p.large{
315 font-size: 18px;
316 line-height: 26px;
317 }
318
319 #layout .sidebar p{
320 font-size: 12px;
321 line-height: 1.4em;
322 }
323
324 #layout p.caption {
325 font-size: 10px;
326 margin-top: -16px;
327 margin-bottom: 18px;
328 }
329
330 /* @end */
331
332 /* @group Glyphs */
333
334 #glyph_chart div{
335 background-color: #d9f3ff;
336 color: black;
337 float: left;
338 font-size: 36px;
339 height: 1.2em;
340 line-height: 1.2em;
341 margin-bottom: 1px;
342 margin-right: 1px;
343 text-align: center;
344 width: 1.2em;
345 position: relative;
346 padding: .6em .2em .2em;
347 xborder-right: 10px solid #fff;
348 }
349
350 #glyph_chart div p {
351 position: absolute;
352 left: 0;
353 top: 0;
354 display: block;
355 text-align: center;
356 font: bold 9px Arial, sans-serif;
357 background-color: #3a768f;
358 width: 100%;
359 color: #fff;
360 padding: 2px 0;
361 }
362
363
364 #glyphs h1 {
365 font-family: Arial, sans-serif;
366 }
367 /* @end */
368
369 /* @group Installing */
370
371 #installing {
372 font: 13px Arial, sans-serif;
373 }
374
375 #installing p,
376 #glyphs p{
377 line-height: 1.2em;
378 margin-bottom: 18px;
379 font: 13px Arial, sans-serif;
380 }
381
382
383
384 #installing h3{
385 font-size: 15px;
386 margin-top: 18px;
387 }
388
389 /* @end */
390
391 #rendering h1 {
392 font-family: Arial, sans-serif;
393 }
394 .render_table td {
395 font: 11px "Courier New", Courier, mono;
396 vertical-align: middle;
397 }
398
399