doc/cups.css

   1 /* Layout CSS */
   2 .header {
   3   background: #333333;
   4   box-shadow: 0px 2px 5px rgba(0,0,0,0.25);
   5   color: white;
   6   left: 0;
   7   margin-bottom: 20px;
   8   padding: 0px;
   9   position: fixed;
  10   right: 0;
  11   top: 0;
  12   width: 100%;
  13 }
  14 .header ul {
  15   list-style: none;
  16   -webkit-margin-before: 0;
  17   -webkit-margin-after: 0;
  18   -webkit-margin-start: 0;
  19   -webkit-margin-end: 5px;
  20   -webkit-padding-start: 0;
  21 }
  22 .header ul li {
  23   float: left;
  24 }
  25 .header a {
  26   display: block;
  27   padding: 5px 10px !important;
  28 }
  29 .header a:link, .header a:visited {
  30   color: white !important;
  31   text-decoration: none !important;
  32 }
  33 .header a:hover {
  34   background: #cccccc !important;
  35   color: #333333 !important;
  36   text-decoration: none !important;
  37 }
  38 .header a.active {
  39   background: white !important;
  40   color: black !important;
  41   text-decoration: none !important;
  42 }
  43
  44 .body {
  45   padding: 40px 20px;
  46 }
  47
  48 .footer {
  49   background: #333333;
  50   bottom: 0;
  51   box-shadow: 0px -2px 5px rgba(0,0,0,0.25);
  52   color: #cccccc;
  53   font-size: 10px;
  54   height: 20px;
  55   left: 0;
  56   padding: 10px 10px 3px;
  57   position: fixed;
  58   width: 100%;
  59 }
  60 .footer a:link, footer a:hover, .footer a:visited {
  61   color: white !important;
  62   text-decoration: none !important;
  63 }
  64
  65 .row {
  66   width: 100%;
  67   *zoom: 1;
  68 }
  69 .row:after {
  70   clear: both;
  71 }
  72
  73 .row .thirds {
  74   float: left;
  75   margin-left: 0.5%;
  76   margin-right: 0;
  77   width: 33%;
  78 }
  79 .row .thirds:first-child {
  80   margin-left: 0;
  81 }
  82
  83 .row .halves {
  84   float: left;
  85   margin-left: 0.5%;
  86   margin-right: 0;
  87   width: 49.75%;
  88 }
  89 .row .halves:first-child {
  90   margin-left: 0;
  91 }
  92 .mobile {
  93   display: none;
  94 }
  95 .no-mobile {
  96   display: inherit;
  97 }
  98
  99 /* Appearance CSS */
 100 BODY {
 101   background: white;
 102   color: black;
 103   font-family: lucida grande, geneva, helvetica, arial, sans-serif;
 104   margin: 0;
 105 }
 106
 107 H1, H2, H3, H4, H5, H6, P, TD, TH {
 108   font-family: lucida grande, geneva, helvetica, arial, sans-serif;
 109 }
 110
 111 KBD {
 112   color: #006600;
 113   font-family: monaco, courier, monospace;
 114   font-weight: bold;
 115 }
 116
 117 PRE {
 118   font-family: monaco, courier, monospace;
 119 }
 120
 121 PRE.command {
 122   background: #f0f0f0;
 123   border: dotted thin #7f7f7f;
 124   color: #7f0000;
 125   margin-left: 36pt;
 126   padding: 10px;
 127 }
 128
 129 P.example {
 130   font-style: italic;
 131   margin-left: 36pt;
 132 }
 133
 134 PRE.example {
 135   background: white;
 136   border: dotted thin #999999;
 137   margin-left: 36pt;
 138   padding: 10px;
 139 }
 140
 141 PRE.command EM, PRE.example EM {
 142   color: #3f0000;
 143   font-family: lucida grande, geneva, helvetica, arial, sans-serif;
 144 }
 145
 146 P.command {
 147   color: #7f0000;
 148   font-family: monaco, courier, monospace;
 149   margin-left: 36pt;
 150 }
 151
 152 P.formula {
 153   font-style: italic;
 154   margin-left: 36pt;
 155 }
 156
 157 BLOCKQUOTE {
 158   background: #f0f0f0;
 159   border: inset 1px #eeeeee;
 160   padding: 10px;
 161   /* These are not implemented by all browsers, but that's OK */
 162   border-radius: 5px;
 163   -moz-border-radius: 5px;
 164 }
 165
 166 A IMG {
 167   border: none;
 168 }
 169
 170 A:link:hover IMG {
 171   background: #f0f0f0;
 172   border-radius: 10px;
 173   -moz-border-radius: 10px;
 174 }
 175
 176 A:link, A:visited {
 177   font-weight: inherit;
 178   text-decoration: none;
 179   color: #000099;
 180 }
 181
 182 A:link:hover, A:visited:hover, A:active {
 183   text-decoration: underline;
 184   color: #990099;
 185 }
 186
 187 TABLE.page {
 188   border: none;
 189   border-collapse: collapse;
 190   height: 100%;
 191   margin: 0;
 192   padding: 0;
 193   width: 100%;
 194 }
 195
 196 TD.body {
 197   height: 100%;
 198   vertical-align: top;
 199 }
 200
 201 TD.sel, TD.unsel {
 202   border-left: thin solid #cccccc;
 203   padding: 0px 5px;
 204   text-align: center;
 205   vertical-align: middle;
 206   width: 14%;
 207 }
 208
 209 TD.sel {
 210   background: url(images/sel.gif);
 211 }
 212
 213 TD.unsel {
 214   background: url(images/unsel.gif);
 215 }
 216
 217 TD.sel A, TD.sel A:hover, TD.unsel A:link:hover, TD.unsel A:visited:hover,
 218 TD.unsel A:active, TD.unsel A, TD.unsel A:visited {
 219   color: #666666;
 220   display: block;
 221   font-weight: normal;
 222   padding: 8px;
 223   text-decoration: none;
 224 }
 225
 226 TD.trailer {
 227   background: #f0f0f0;
 228   border: solid thin #e0e0e0;
 229   color: #666666;
 230   font-size: 80%;
 231   padding: 5px;
 232 }
 233
 234 TD.trailer A {
 235   color: #666699;
 236 }
 237
 238 FORM {
 239   display: inline;
 240 }
 241
 242 INPUT[TYPE="TEXT"], TEXTAREA {
 243   font-family: monaco, courier, monospace;
 244 }
 245
 246 INPUT[TYPE="IMAGE"] {
 247   border: none;
 248   padding: 2pt;
 249   vertical-align: bottom;
 250 }
 251
 252 SUB, SUP {
 253   font-size: 50%;
 254 }
 255
 256 TR.data, TD.data, TR.data TD {
 257   margin-top: 10pt;
 258   padding: 5pt;
 259   border-bottom: solid 1pt #999999;
 260 }
 261
 262 TR.data TH {
 263   border-bottom: solid 1pt #999999;
 264   padding-top: 10pt;
 265   padding-left: 5pt;
 266   text-align: left;
 267 }
 268
 269 DIV.table TABLE {
 270   border: solid thin #999999;
 271   border-collapse: collapse;
 272   border-spacing: 0;
 273   margin-left: auto;
 274   margin-right: auto;
 275 }
 276
 277 DIV.table CAPTION {
 278   caption-side: top;
 279   font-size: 120%;
 280   font-style: italic;
 281   font-weight: bold;
 282   margin-left: auto;
 283   margin-right: auto;
 284 }
 285
 286 DIV.table TABLE TD {
 287   background: white;
 288   border: solid thin #bbbbbb;
 289   padding-top: 5pt;
 290 }
 291
 292 DIV.table TABLE TH {
 293   background: #f0f0f0;
 294   border: none;
 295   border-bottom: solid thin #999999;
 296 }
 297
 298 DIV.figure TABLE {
 299   margin-left: auto;
 300   margin-right: auto;
 301 }
 302
 303 DIV.figure CAPTION {
 304   caption-side: bottom;
 305   font-size: 120%;
 306   font-style: italic;
 307   font-weight: bold;
 308   margin-left: auto;
 309   margin-right: auto;
 310 }
 311
 312 TH.label {
 313   text-align: right;
 314   vertical-align: top;
 315 }
 316
 317 TH.sublabel {
 318   text-align: right;
 319   font-weight: normal;
 320 }
 321
 322 HR {
 323   border: solid thin;
 324 }
 325
 326 SPAN.info {
 327   background: black;
 328   border: thin solid black;
 329   color: white;
 330   font-size: 80%;
 331   font-style: italic;
 332   font-weight: bold;
 333   white-space: nowrap;
 334 }
 335
 336 H2 SPAN.info, H3 SPAN.info, H4 SPAN.info {
 337   float: right;
 338   font-size: 100%;
 339 }
 340
 341 .conflict {
 342   background: red;
 343   color: white;
 344 }
 345
 346 TH.conflict {
 347   text-align: right;
 348 }
 349
 350 H1.title {
 351   display: none;
 352 }
 353
 354 H2.title, H3.title {
 355   border-bottom: solid 1pt #999999;
 356 }
 357
 358 TABLE.indent {
 359   margin-top: 2em;
 360   margin-left: auto;
 361   margin-right: auto;
 362   width: 90%;
 363 }
 364
 365 TABLE.indent {
 366   border-collapse: collapse;
 367 }
 368
 369 TABLE.indent TD, TABLE.indent TH {
 370   padding: 0;
 371 }
 372
 373 TABLE.list {
 374   border-collapse: collapse;
 375   margin-left: auto;
 376   margin-right: auto;
 377   width: 90%;
 378 }
 379
 380 TABLE.list TH {
 381   background: white;
 382   border-bottom: solid thin #cccccc;
 383   color: #444444;
 384   padding-top: 10pt;
 385   padding-left: 5pt;
 386   text-align: left;
 387   vertical-align: bottom;
 388   white-space: nowrap;
 389 }
 390
 391 TABLE.list TH A {
 392   color: #4444cc;
 393 }
 394
 395 TABLE.list TD {
 396   border-bottom: solid thin #eeeeee;
 397   padding-top: 5pt;
 398   padding-left: 5pt;
 399 }
 400
 401 TABLE.list TR:nth-child(even) {
 402   background: #f8f8f8;
 403 }
 404
 405 TABLE.list TR:nth-child(odd) {
 406   background: #f4f4f4;
 407 }
 408
 409 DIV.sidebar {
 410   float: right;
 411   min-width: 25%;
 412   margin-left: 10px;
 413   max-width: 33%;
 414 }
 415
 416 DIV.sidebar P.l0 {
 417   margin-bottom: 0;
 418   margin-left: 0;
 419   margin-right: 0;
 420   margin-top: 12pt;
 421 }
 422
 423 DIV.sidebar P.l1 {
 424   margin-bottom: 0;
 425   margin-left: 36pt;
 426   margin-right: 0;
 427   margin-top: 0;
 428   text-indent: -18pt;
 429 }
 430
 431 DIV.sidebar P.l2 {
 432   font-style: italic;
 433   margin-bottom: 0;
 434   margin-left: 54pt;
 435   margin-right: 0;
 436   margin-top: 0;
 437   text-indent: -18pt;
 438 }
 439
 440 TABLE.inset {
 441   background: #f0f0f0;
 442   border: thin solid #e0e0e0;
 443   margin-top: 1em;
 444   padding: 0;
 445   width: 100%;
 446   /* These are not implemented by all browsers, but that's OK */
 447   border-radius: 5px;
 448   -moz-border-radius: 5px;
 449 }
 450
 451 TABLE.inset CAPTION {
 452   caption-side: top;
 453   color: #666666;
 454   font-size: 80%;
 455   margin-left: 10px;
 456   margin-bottom: 2px;
 457   text-align: left;
 458 }
 459
 460 TABLE.inset TD {
 461   padding: 2px;
 462 }
 463
 464 DT {
 465   margin-left: 36pt;
 466   margin-top: 12pt;
 467 }
 468
 469 DD {
 470   margin-left: 54pt;
 471 }
 472
 473 DL.category DT {
 474   font-weight: bold;
 475 }
 476
 477 P.summary {
 478   margin-left: 36pt;
 479   font-family: monaco, courier, monospace;
 480 }
 481
 482 DIV.summary TABLE {
 483   border: solid thin #999999;
 484   border-collapse: collapse;
 485   border-spacing: 0;
 486   margin: 10px;
 487 }
 488
 489 DIV.summary TABLE TD, DIV.summary TABLE TH {
 490   background: white;
 491   border: solid thin #999999;
 492   border-spacing: 0;
 493   padding: 5px;
 494   text-align: left;
 495   vertical-align: top;
 496 }
 497
 498 DIV.summary TABLE THEAD TH {
 499   background: #f0f0f0;
 500 }
 501
 502 DIV.tabs {
 503   height: 480px;
 504   overflow: hidden;
 505 }
 506
 507 DIV.tab {
 508   float: left;
 509   height: 100%;
 510   overflow-y: auto;
 511   width: 100%;
 512 }
 513
 514 /* API documentation styles... */
 515 div.body h1 {
 516   margin: 0;
 517 }
 518 div.body h2 {
 519   margin-top: 1.5em;
 520 }
 521 div.body h3, div.body h4, div.body h5 {
 522   margin-bottom: 0.5em;
 523   margin-top: 1.5em;
 524 }
 525 .class, .enumeration, .function, .struct, .typedef, .union {
 526   border-bottom: solid thin #999999;
 527   margin-bottom: 0;
 528   margin-top: 2em;
 529 }
 530 .description {
 531   margin-top: 0.5em;
 532 }
 533 code, p.code, pre, ul.code li {
 534   font-family: monaco, courier, monospace;
 535   font-size: 90%;
 536 }
 537 ul.code, ul.contents, ul.subcontents {
 538   list-style-type: none;
 539   margin: 0;
 540   padding-left: 0;
 541 }
 542 ul.code li {
 543   margin: 0;
 544 }
 545 ul.contents > li {
 546   margin-top: 1em;
 547 }
 548 ul.contents li ul.code, ul.contents li ul.subcontents {
 549   padding-left: 2em;
 550 }
 551 div.body dl {
 552   margin-left: 0;
 553   margin-top: 0;
 554 }
 555 div.body dt {
 556   font-style: italic;
 557   margin-left: 0;
 558   margin-top: 0;
 559 }
 560 div.body dd {
 561   margin-bottom: 0.5em;
 562 }
 563 /* iPhone/iPod touch overrides */
 564 @media only screen and (min-device-width: 320px) and (max-device-width: 480px),
 565        only screen and (min-device-width: 320px) and (max-device-width: 568px) {
 566   .mobile {
 567     display: inherit;
 568   }
 569   .no-mobile {
 570     display: none;
 571   }
 572
 573   .header {
 574     margin: 0;
 575     position: relative;
 576   }
 577   .header ul li {
 578     float: none;
 579   }
 580
 581   .body {
 582     paddng: 0px;
 583   }
 584
 585   .footer {
 586     font-size: 10px;
 587     height: auto;
 588     position: relative;
 589   }
 590
 591   .row .thirds, .row .halves {
 592     float: none;
 593     margin: 0;
 594     width: 100%;
 595   }
 596
 597   DIV.sidebar {
 598     float: none;
 599     margin-left: 0;
 600     max-width: 100%;
 601     min-width: 100%;
 602     width: 100%;
 603   }
 604
 605   BLOCKQUOTE {
 606     margin: 0;
 607   }
 608
 609   P.example {
 610     margin-left: 0;
 611   }
 612
 613   PRE.command, PRE.example {
 614     margin-left: 0;
 615     white-space: pre-wrap;
 616   }
 617 }
 618
 619 /* iPad overrides */
 620 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
 621
 622   .mobile {
 623     display: inherit;
 624   }
 625   .no-mobile {
 626     display: none;
 627   }
 628 }