git.lucas.co / website
source for lucas.co

archive/fonts/alice/web fonts/alice_regular_macroman/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: 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 	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 	padding-left: 20px;
185 	margin-right: -20px;
186 	padding-right: 20px;
187 	padding: 20px;
188 	margin-bottom:0;
189 }
190 
191 
192 .sample_table td {
193 	padding-top: 3px;
194 	padding-bottom:5px;
195 	padding-left: 5px;
196 	vertical-align: middle;
197 	line-height: 1.2em;
198 }
199 
200 .sample_table td:first-child {
201 	background-color: #eee;
202 	text-align: right;
203 	padding-right: 5px;
204 	padding-left: 0;
205 	padding: 5px;
206 	font: 11px/12px "Courier New", Courier, mono;
207 }
208 
209 code {
210 	white-space: pre;
211 	background-color: #eee;
212 	display: block;
213 	padding: 10px;
214 	margin-bottom: 18px;
215 	overflow: auto;
216 }
217 
218 
219 .bottom,.last 	{margin-bottom:0 !important; padding-bottom:0 !important;}
220 
221 .box  { 
222   padding: 18px; 
223   margin-bottom: 18px; 
224   background: #eee; 
225 }
226 
227 .reverse,.reversed { background:  #000 !important;color:  #fff !important; border: none !important;}
228 
229 #bodycomparison {
230 	position: relative;
231 	overflow: hidden;
232 	font-size: 72px;
233 	height: 90px;
234 	white-space: nowrap;
235 }
236 
237 #bodycomparison div{
238 	font-size: 72px;
239 	line-height: 90px;
240 	display: inline;
241 	margin: 0 15px 0 0;
242 	padding: 0;
243 }
244 
245 #bodycomparison div span{
246 	font: 10px Arial;
247 	position: absolute;
248 	left: 0;
249 }
250 #xheight {
251 	float: none;
252 	position: absolute;
253 	color: #d9f3ff;
254 	font-size: 72px;
255 	line-height: 90px;
256 }
257 
258 .fontbody {
259  position: relative;
260 }
261 .arialbody{
262 	font-family: Arial;
263 	position: relative;
264 }
265 .verdanabody{
266 	font-family: Verdana;
267 	position: relative;
268 }
269 .georgiabody{
270 	font-family: Georgia;
271 	position: relative;
272 }
273 
274 /* @group Layout page
275  */
276 
277 #layout h1 {
278 	font-size: 36px;
279 	line-height: 42px;
280 	font-weight: normal;
281 	font-style: normal;
282 }
283 
284 #layout h2 {
285 	font-size: 24px;
286 	line-height: 23px;
287 	font-weight: normal;
288 	font-style: normal;
289 }
290 
291 #layout h3 {
292 	font-size: 22px;
293 	line-height: 1.4em;
294 	margin-top: 1em;
295 	font-weight: normal;
296 	font-style: normal;
297 }
298 
299 
300 #layout p.byline {
301 	font-size: 12px;
302 	margin-top: 18px;
303 	line-height: 12px;
304 	margin-bottom: 0;
305 }
306 #layout p {
307 	font-size: 14px;
308 	line-height: 21px;
309 	margin-bottom: .5em;
310 }
311 
312 #layout p.large{
313 	font-size: 18px;
314 	line-height: 26px;
315 }
316 
317 #layout .sidebar p{
318 	font-size: 12px;
319 	line-height: 1.4em;
320 }
321 
322 #layout p.caption {
323 	font-size: 10px;
324 	margin-top: -16px;
325 	margin-bottom: 18px;
326 }
327 
328 /* @end */
329 
330 /* @group Glyphs */
331 
332 #glyph_chart div{
333 	background-color: #d9f3ff;
334 	color: black;
335 	float: left;
336 	font-size: 36px;
337 	height: 1.2em;
338 	line-height: 1.2em;
339 	margin-bottom: 1px;
340 	margin-right: 1px;
341 	text-align: center;
342 	width: 1.2em;
343 	position: relative;
344 	padding: .6em .2em .2em;
345 }
346 
347 #glyph_chart div p {
348 	position: absolute;
349 	left: 0;
350 	top: 0;
351 	display: block;
352 	text-align: center;
353 	font: bold 9px Arial, sans-serif;
354 	background-color: #3a768f;
355 	width: 100%;
356 	color: #fff;
357 	padding: 2px 0;
358 }
359 
360 
361 #glyphs h1 {
362 	font-family: Arial, sans-serif;
363 }
364 /* @end */
365 
366 /* @group Installing */
367 
368 #installing {
369 	font: 13px Arial, sans-serif;
370 }
371 
372 #installing p,
373 #glyphs p{
374 	line-height: 1.2em;
375 	margin-bottom: 18px;
376 	font: 13px Arial, sans-serif;
377 }
378 
379 
380 
381 #installing h3{
382 	font-size: 15px;
383 	margin-top: 18px;
384 }
385 
386 /* @end */
387 
388 #rendering h1 {
389 	font-family: Arial, sans-serif;
390 }
391 .render_table td {
392 	font: 11px "Courier New", Courier, mono;
393 	vertical-align: middle;
394 }
395 
396