source for lucas.co
archive/fonts/belda/specimen_files/specimen_stylesheet.css (7.1K)
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: 0 auto;
55 }
56
57
58 #header {
59 padding: 20px;
60 font-size: 36px;
61 background-color: #002339;
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: #2f7093;
86 }
87 .tabs li {
88 float: left;
89 margin: 0;
90 overflow: hidden;
91 background-color: #2f7093;
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: #2a6484;
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 line-height: 1.1em;
126 }
127
128 .size10{ font-size: 10px; }
129 .size11{ font-size: 11px; }
130 .size12{ font-size: 12px; }
131 .size13{ font-size: 13px; }
132 .size14{ font-size: 14px; }
133 .size16{ font-size: 16px; }
134 .size18{ font-size: 18px; }
135 .size20{ font-size: 20px; }
136 .size24{ font-size: 24px; }
137 .size30{ font-size: 30px; }
138 .size36{ font-size: 36px; }
139 .size48{ font-size: 48px; }
140 .size60{ font-size: 60px; }
141 .size72{ font-size: 72px; }
142 .size90{ font-size: 90px; }
143
144
145 .psample_row1 { height: 120px;}
146 .psample_row1 { height: 120px;}
147 .psample_row2 { height: 160px;}
148 .psample_row3 { height: 160px;}
149 .psample_row4 { height: 160px;}
150
151 .psample {
152 overflow: hidden;
153 position: relative;
154 }
155 .psample p {
156 line-height: 1.3em;
157 display: block;
158 overflow: hidden;
159 margin: 0;
160 }
161
162 .psample span {
163 margin-right: .5em;
164 }
165
166 .white_blend {
167 width: 100%;
168 height: 61px;
169 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
170 position: absolute;
171 bottom: 0;
172 }
173 .black_blend {
174 width: 100%;
175 height: 61px;
176 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
177 position: absolute;
178 bottom: 0;
179 }
180 .fullreverse {
181 background: #000 !important;
182 color: #fff !important;
183 margin-left: -20px;
184 margin-right: -20px;
185 padding: 20px;
186 margin-bottom:0;
187 }
188
189
190 .sample_table td {
191 padding-top: 3px;
192 padding-bottom:5px;
193 padding-left: 5px;
194 vertical-align: middle;
195 line-height: 1.2em;
196 }
197
198 .sample_table td:first-child {
199 background-color: #eee;
200 text-align: right;
201 padding: 5px;
202 font: 11px/12px 'Courier New', Courier, mono;
203 }
204
205 code {
206 white-space: pre;
207 background-color: #eee;
208 display: block;
209 padding: 10px;
210 margin-bottom: 18px;
211 overflow: auto;
212 }
213
214
215 .bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
216
217 .box {
218 padding: 18px;
219 margin-bottom: 18px;
220 background: #eee;
221 }
222
223 .reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
224
225 #bodycomparison {
226 position: relative;
227 overflow: hidden;
228 font-size: 72px;
229 height: 90px;
230 white-space: nowrap;
231 }
232
233 #bodycomparison div{
234 font-size: 72px;
235 line-height: 90px;
236 display: inline;
237 margin: 0 15px 0 0;
238 padding: 0;
239 }
240
241 #bodycomparison div span{
242 font: 10px Arial;
243 position: absolute;
244 left: 0;
245 }
246 #xheight {
247 float: none;
248 position: absolute;
249 color: #d9f3ff;
250 font-size: 72px;
251 line-height: 90px;
252 }
253
254 .fontbody {
255 position: relative;
256 }
257 .arialbody{
258 font-family: Arial;
259 position: relative;
260 }
261 .verdanabody{
262 font-family: Verdana;
263 position: relative;
264 }
265 .georgiabody{
266 font-family: Georgia;
267 position: relative;
268 }
269
270 /* @group Layout page
271 */
272
273 #layout h1 {
274 font-size: 36px;
275 line-height: 42px;
276 font-weight: normal;
277 font-style: normal;
278 }
279
280 #layout h2 {
281 font-size: 24px;
282 line-height: 23px;
283 font-weight: normal;
284 font-style: normal;
285 }
286
287 #layout h3 {
288 font-size: 22px;
289 line-height: 1.4em;
290 margin-top: 1em;
291 font-weight: normal;
292 font-style: normal;
293 }
294
295
296 #layout p.byline {
297 font-size: 12px;
298 margin-top: 18px;
299 line-height: 12px;
300 margin-bottom: 0;
301 }
302 #layout p {
303 font-size: 14px;
304 line-height: 21px;
305 margin-bottom: .5em;
306 }
307
308 #layout p.large{
309 font-size: 18px;
310 line-height: 26px;
311 }
312
313 #layout .sidebar p{
314 font-size: 12px;
315 line-height: 1.4em;
316 }
317
318 #layout p.caption {
319 font-size: 10px;
320 margin-top: -16px;
321 margin-bottom: 18px;
322 }
323
324 /* @end */
325
326 /* @group Glyphs */
327
328 #glyph_chart div{
329 background-color: #d9f3ff;
330 color: black;
331 float: left;
332 font-size: 36px;
333 height: 1.2em;
334 line-height: 1.2em;
335 margin-bottom: 1px;
336 margin-right: 1px;
337 text-align: center;
338 width: 1.2em;
339 position: relative;
340 padding: .6em .2em .2em;
341 }
342
343 #glyph_chart div p {
344 position: absolute;
345 left: 0;
346 top: 0;
347 display: block;
348 text-align: center;
349 font: bold 9px Arial, sans-serif;
350 background-color: #3a768f;
351 width: 100%;
352 color: #fff;
353 padding: 2px 0;
354 }
355
356
357 #glyphs h1 {
358 font-family: Arial, sans-serif;
359 }
360 /* @end */
361
362 /* @group Installing */
363
364 #installing {
365 font: 13px Arial, sans-serif;
366 }
367
368 #installing p,
369 #glyphs p{
370 line-height: 1.2em;
371 margin-bottom: 18px;
372 font: 13px Arial, sans-serif;
373 }
374
375
376
377 #installing h3{
378 font-size: 15px;
379 margin-top: 18px;
380 }
381
382 /* @end */
383
384 #rendering h1 {
385 font-family: Arial, sans-serif;
386 }
387 .render_table td {
388 font: 11px 'Courier New', Courier, mono;
389 vertical-align: middle;
390 }
391
392