docs/userguide/Haiku-doc.css

   1 /*
   2  * Copyright 2008-2009, Haiku. All rights reserved.
   3  * Distributed under the terms of the MIT License.
   4  *
   5  * Authors:
   6  *              François Revol <revol@free.fr>
   7  *              Stephan Aßmus <superstippi@gmx.de>
   8  *              Braden Ewing <brewin@gmail.com>
   9  *              Humdinger <humdingerb@gmail.com>
  10  *              Vincent Duvert <vincent.duvert@free.fr>
  11  */
  12
  13 html {
  14         margin: 0;
  15         padding: 0;
  16         background: #FFF;
  17 }
  18
  19 body {
  20         color: #333333;
  21         line-height: 1.5;
  22         margin: 0;
  23         padding: 0;
  24         font-family: "DejaVu Sans", Arial, Helvetica, sans-serif;
  25 }
  26
  27 /* link colors and text decoration */
  28
  29 a:link {
  30         font-weight: bold;
  31         text-decoration: none;
  32         color: #dc3c01;
  33 }
  34 a:visited {
  35         font-weight: bold;
  36         text-decoration: none;
  37         color: #892601;
  38 }
  39 a:hover, a:active {
  40         text-decoration: underline;
  41         color: #ff4500;
  42 }
  43
  44 /* Some headers act as anchors, don't give them a hover effect */
  45
  46 h2 a:hover, a:active {
  47         text-decoration: none;
  48         color: #0c3762;
  49 }
  50 h3 a:hover, a:active {
  51         text-decoration: none;
  52         color: #0c3762;
  53 }
  54 h4 a:hover, a:active {
  55         text-decoration: none;
  56         color: #0c3762;
  57 }
  58 h5 a:hover, a:active {
  59         text-decoration: none;
  60         color: #0c3762;
  61 }
  62
  63 /* heading and navigation */
  64
  65 #banner {
  66         position: relative;
  67         left: 0;
  68         top: 0;
  69         height: 84px;
  70         min-width: 59em;
  71         background: #eeeeee;
  72 }
  73
  74 #banner div {
  75         background: transparent url(images/logo.png) no-repeat scroll 10px 0;
  76         min-width: 59em;
  77         max-width: 70em;
  78         height: 100%;
  79         margin: 0 auto;
  80 }
  81
  82 #banner span {
  83         position: relative;
  84         top: 51px;
  85         left: 272px;
  86         color: #333333;
  87         text-transform: uppercase;
  88         letter-spacing: 3px;
  89         font-family: Myriad Pro,Myriad Web Pro Regular,Lucida Grande,Geneva,Trebuchet MS,sans-serif;
  90         font-weight: normal;
  91         font-size: 16px;
  92 }
  93
  94 div.nav {
  95         position: relative;
  96         min-width: 59em;
  97         left: 0;
  98         top: 0;
  99         background: #e0e0e0;
 100         padding: 0;
 101 }
 102
 103 div.nav div.inner {
 104         min-width: 59em;
 105         max-width: 70em;
 106         height: 100%;
 107         margin: 0 auto;
 108         text-align: right;
 109         padding: 0;
 110 }
 111
 112 div.nav div.inner span {
 113         margin-right: 40px;
 114         font-size: 0.8em;
 115 }
 116
 117 div.nav div.inner span a.uplink {
 118         font-weight: normal;
 119 }
 120
 121 /* Language selection menu */
 122
 123 ul.lang-menu {
 124         display: block;
 125         text-align: left;
 126         list-style-type: none;
 127         font-size: 0.8em;
 128         position: absolute;
 129         margin: 0;
 130 }
 131
 132 ul.lang-menu img {
 133         border: 0;
 134         padding-right: 5px;
 135 }
 136
 137 ul.lang-menu li {
 138         margin-left: 10px;
 139         padding: 2px 5px 2px 5px;
 140         background: #e0e0e0;
 141         display: none;
 142 }
 143
 144 ul.lang-menu:hover li {
 145         display: block;
 146 }
 147
 148 ul.lang-menu li:hover {
 149         background-color: #efefef;
 150 }
 151
 152 ul.lang-menu li.now {
 153         padding: 5px 5px 0 5px;
 154         display: block;
 155         background-color: inherit;
 156 }
 157
 158 ul.lang-menu li a {
 159         color: black;
 160         text-decoration: none;
 161         font-weight: normal;
 162 }
 163
 164 /* main content */
 165 #content {
 166         min-width: 59em;
 167         max-width: 70em;
 168         margin: 0 auto;
 169 }
 170
 171 #content div {
 172         margin-top: 30px;
 173         margin-left: 40px;
 174         margin-right: 40px;
 175         margin-bottom: 50px;
 176         font-size: 0.9em;
 177 }
 178
 179 /* contents box */
 180
 181 table.index {
 182         margin: 0px 0px 30px 30px;
 183         padding: 1px;
 184         border-width: 1px;
 185         border-style: dotted;
 186         border-color: #e0e0e0;
 187         float:right;
 188 }
 189 table.index tr.heading {
 190         background-color: #e0e0e0;
 191         text-align: center;
 192         font-weight: bold;
 193         font-size: 1.1em;
 194 }
 195 table.index tr.index {
 196         background-color: #eeeeee;
 197 }
 198 table.index td {
 199         padding: 5px 20px;
 200 }
 201
 202 table.index a:link, table.index a:visited {
 203         font-weight: normal;
 204         text-decoration: none;
 205         color: #dc3c01;
 206 }
 207 table.index a:hover, table.index a:active {
 208         text-decoration: underline;
 209         color: #ff4500;
 210 }
 211
 212
 213 /* Haiku User Guide styles and layout */
 214
 215 /* Rounded corner boxes */
 216 /* Common declarations */
 217 .box-info, .box-stop, .box-warning {
 218         -webkit-border-radius: 10px;
 219         -khtml-border-radius: 10px;
 220         -moz-border-radius: 10px;
 221         border-radius: 10px;
 222         border-style: dotted;
 223         border-width: thin;
 224         border-color: #dcdcdc;
 225         padding: 10px 15px 10px 80px;
 226         margin-bottom: 15px;
 227         margin-top: 15px;
 228         min-height: 42px;
 229 }
 230 .box-info {
 231         background: #e4ffde url(images/alert_info_32.png) 15px 15px no-repeat;
 232 }
 233 .box-warning {
 234         background: #fffbc6 url(images/alert_warning_32.png) 15px 15px no-repeat;
 235 }
 236 .box-stop {
 237         background: #ffeae6 url(images/alert_stop_32.png) 15px 15px no-repeat;
 238 }
 239
 240 /* More layout and styles */
 241 h1 {
 242         font-size: 1.3em;
 243         font-weight: bold;
 244         color: #0c3762;
 245         border-bottom: dotted thin #e0e0e0;
 246         margin-bottom: 25px;
 247 }
 248 h2 {
 249         font-size: 1.3em;
 250         font-weight: normal;
 251         color: #0c3762;
 252         border-bottom: dotted thin #e0e0e0;
 253         margin-top: 35px;
 254 }
 255 h3 {
 256         font-size: 1.2em;
 257         font-weight: normal;
 258         color: #0c3762;
 259         border-bottom: dotted thin #e0e0e0;
 260         margin-top: 30px;
 261 }
 262 h4 {
 263         font-size: 1.1em;
 264         font-weight: normal;
 265         color: #0c3762;
 266         margin-top: 30px;
 267 }
 268 h5 {
 269         font-size: 1.0em;
 270         font-weight: normal;
 271         color: #0c3762;
 272         margin-top: 30px;
 273 }
 274 p {
 275         text-align: justify;
 276 }
 277 ol {
 278         padding-left: 20px;
 279 }
 280 ul {
 281         padding-left: 14px;
 282 }
 283 li {
 284         line-height: 1.3;
 285 }
 286 td {
 287         vertical-align: top;
 288 }
 289 td.onelinetop {
 290         vertical-align: top;
 291         white-space: nowrap;
 292 }
 293 tt {
 294         background-color: #e2e2e2;
 295         font-size: 1.0em;
 296         font-family: monospace;
 297 }
 298 pre {
 299         border-color: #0c3762;
 300         border-style: dotted;
 301         border-width: thin;
 302         margin: 0em;
 303         padding: 1.5em;
 304         background-color: #f0f0f0;
 305 }
 306 pre.terminal {                  /* Terminal output*/
 307         border-color: #ffb11f;
 308         border-style: dotted;
 309         border-width: thin;
 310         margin: 0em;
 311         padding: 1.5em;
 312         background-color: #3a3a3a;
 313         color: #ffb11f;
 314 }
 315 .menu {                         /* Menu */
 316         font-size: 1.0em;
 317         font-family: serif;
 318         font-style: italic;
 319         color: #24225e;
 320 }
 321 .button {                       /* Button */
 322         font-size: 1.0em;
 323         font-family: serif;
 324         font-style: italic;
 325         color: #33583c;
 326 }
 327 .app {                          /* GUI Application name */
 328         font-size: 1.0em;
 329         font-family: serif;
 330         font-style: italic;
 331         color: #5e1c1c;
 332 }
 333 .cli {                          /* Shell command or file */
 334         background-color: #e8e8e8;
 335         font-size: 0.9em;
 336         font-family: monospace;
 337 }
 338 .path {                         /* File path */
 339         background-color: #e8e8e8;
 340         font-size: 0.9em;
 341         font-family: monospace;
 342 }
 343 .key {                          /* Shortcut (separate with   */
 344         -webkit-border-radius: 3px;
 345         -khtml-border-radius: 3px;
 346         -moz-border-radius: 3px;
 347         border-radius: 3px;
 348         border-color: #c7c7c7;
 349         border-style: solid;
 350         border-width: 1px;
 351         padding: 0px 2px 0px 2px;
 352         background-color: #e8e8e8;
 353         font-family: serif;
 354         font-variant: small-caps;
 355         font-size: 0.8em;
 356 }
 357
 358 /* printer only pretty stuff */
 359 @media /*screen,*/print {
 360         /* suggest page orientation */
 361         @page { size: portrait; }
 362         .noprint {
 363                 display: none;
 364         }
 365         /* hide header and nav bar */
 366         #banner {
 367                 display:none;
 368         }
 369
 370         div.nav {
 371                 display:none;
 372         }
 373
 374         /* some links we want to print the url along with (CSS2) */
 375         a.printurl:after {
 376                 content: " <" attr(href) ">";
 377                 font-weight: normal;
 378                 font-size: small;
 379         }
 380         /* override for those we really don't want to print */
 381         a.noprinturl:after {
 382                 content: "";
 383         }
 384         /* for acronyms we want their definitions inlined at print time */
 385         acronym[title]:after {
 386                 font-size: small;
 387                 content: " (" attr(title) ")";
 388                 font-style: italic;
 389         }
 390         /* and not have mozilla dotted underline */
 391         acronym {
 392                 border: none;
 393         }
 394         pre.terminal {                  /* Terminal output black on white*/
 395                 background-color: #ffffff;
 396                 color: #000000;
 397         }
 398         #content {
 399                 margin: 0px;
 400                 padding: 0px;
 401         }
 402         html {
 403                 background: #FFF;
 404         }
 405 }