portal/static/fonts/opensans_semibolditalic_macroman/specimen_files/specimen_stylesheet.css

   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