local.css

   1 /* vim: set ts=4 sts=4 sw=4 isk+=-,. fen fcl=all fdm=marker fmr={{{,}}} fml=2 : */
   2
   3 @font-face {
   4   font-family: 'Open Sans';
   5   font-style: normal;
   6   font-weight: 400;
   7   src: local('Open Sans'), local('OpenSans'), url(assets/OpenSans/OpenSans.ttf) format('truetype');
   8 }
   9 @font-face {
  10   font-family: 'Open Sans';
  11   font-style: normal;
  12   font-weight: 700;
  13   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(assets/OpenSans/OpenSans-Bold.ttf) format('truetype');
  14 }
  15 @font-face {
  16   font-family: 'Open Sans';
  17   font-style: italic;
  18   font-weight: 400;
  19   src: local('Open Sans Italic'), local('OpenSans-Italic'), url(assets/OpenSans/OpenSans-Italic.ttf) format('truetype');
  20 }
  21 @font-face {
  22   font-family: 'Open Sans';
  23   font-style: italic;
  24   font-weight: 700;
  25   src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(assets/OpenSans/OpenSans-BoldItalic.ttf) format('truetype');
  26 }
  27 @font-face {
  28   font-family: 'Incosolata';
  29   font-style: normal;
  30   font-weight: 400;
  31   src: local('Incosolata'), local('Inconsolata-Regular'), url(assets/Inconsolata/Inconsolata.otf) format('opentype');
  32 }
  33
  34 html {
  35         overflow: auto;
  36 }
  37
  38 body {
  39         margin: 0;
  40         padding: 0;
  41         font-family: "Open Sans", sans-serif;
  42         color: #b3b3b3;
  43         background: url(assets/tile.png) fixed;
  44 }
  45
  46 code,
  47 pre {
  48         font-family: "Incosolata", monospace;
  49 }
  50
  51 .page {
  52         overflow: hidden;
  53         max-width: 54em;
  54         margin: 0 auto 0 auto;
  55         box-shadow: 0 0 0.6em 0 #333366;
  56         background: #f5f5f5;
  57 }
  58
  59 /* {{{ .pageheader */
  60 .pageheader {
  61         position: fixed;
  62         width: 54em; /* same as .page:max-width */
  63         height: 100px;
  64         padding: 0;
  65         background: white url(assets/filet.png) no-repeat 99% 90px;
  66         box-shadow: 0 10px 15px 0px white;
  67         z-index: 120;
  68 }
  69
  70 .pageheader .header {
  71         font-size: 120%;
  72         margin-left: 394px;
  73 }
  74
  75 .pageheader .header > span {
  76         display: block;
  77         height: 100px;
  78         padding-top: 22px;
  79 }
  80
  81 .pageheader .parentlinks {
  82         display: block;
  83 }
  84
  85 .pageheader a,
  86 .pageheader .parentlinks a {
  87         color: #ffa430; /* was: #eeeeaa */
  88         text-decoration: none;
  89 }
  90
  91 .pageheader a:hover {
  92         text-decoration: underline;
  93 }
  94
  95 .pageheader .title {
  96         position: absolute;
  97         bottom: 27px;
  98         left: 392px;
  99         font-size: 160%;
 100         color: black;
 101 }
 102
 103 .pageheader .title .translationstatus {
 104         display: none;
 105 }
 106
 107 .pageheader .actions ul {
 108         border-bottom: none;
 109 }
 110
 111 .parentlinks > a {
 112         width: 394px; /* same as .pageheader .header:margin-left */
 113         height: 100px;
 114         background: url(assets/logo-nos-oignons-blanc.png) no-repeat top left;
 115         position: absolute;
 116         left: 0;
 117         top: 0;
 118 }
 119
 120 .parentlinks > a span {
 121         display: none;
 122 }
 123
 124 .parentlinks .parentlinksep + a {
 125         width: auto;
 126         height: auto;
 127         background: transparent;
 128         display: inline;
 129         position: static;
 130 }
 131
 132 .parentlinks .parentlinksep + a + .parentlinksep + a {
 133         background: url(assets/ariane-sep.png) no-repeat 0% 50%;
 134         padding-left: 20px;
 135 }
 136
 137 .parentlinks .parentlinksep + a span {
 138         display: inline;
 139 }
 140
 141 .parentlinks .parentlinksep {
 142         display: none;
 143 }
 144
 145 /* {{{ .actions */
 146 .actions {
 147         display: block;
 148         position: fixed;
 149         z-index: 300;
 150         top: 35em;
 151         left: 0;
 152         width: 100%;
 153 }
 154 .actions ul {
 155         width: 54em; /* same as .page:width */
 156         margin: auto;
 157 }
 158
 159 .actions ul li {
 160         display: block;
 161         width: 11.44em; /* same as .sidebar:width */
 162         background: transparent;
 163         padding: 0;
 164 }
 165
 166 .actions ul li > a {
 167         font-size: 80%;
 168         padding: 0.2em;
 169 }
 170 /* .actions }}} */
 171 /* {{{ #otherlanguages */
 172 #otherlanguages,
 173 #otherlanguages ul li a {
 174         color: #57075f;
 175         background: white;
 176 }
 177
 178 #otherlanguages ul li {
 179         margin-left: 1em;
 180 }
 181 #otherlanguages .langstatus {
 182         display: none;
 183 }
 184
 185 .pageheader #otherlanguages {
 186         border: none;
 187         position: absolute;
 188         bottom: 1.2em;
 189         right: 0;
 190         z-index: 300;
 191         font-size: 80%;
 192 }
 193 /* #otherlanguages }}} */
 194 /* .pageheader }}} */
 195
 196 #pagebody {
 197         position: relative;
 198         min-height: 756px;
 199         margin: 0 0 0 11.44em; /* same as .sidebar:width */
 200         padding: 100px 2em 1em 2em;
 201         z-index: 110;
 202         background: white url(assets/background.png) no-repeat bottom center;
 203         color: black;
 204         border-left: solid 1px #ccc;
 205 }
 206
 207 /* {{{ .sidebar */
 208 .sidebar {
 209         position: fixed;
 210         overflow: hidden;
 211         top: 100px; /* same as .header:height */
 212         width: 11.44em;
 213         margin: 0;
 214         padding: 0;
 215         border: none;
 216         z-index: 100;
 217         background: #f5f5f5;
 218         border-top: solid 1px #ccc;
 219         padding-top: 88px; /* same as #logo-home:height - .header:height */
 220 }
 221
 222 .sidebar ul {
 223         margin: 0;
 224 }
 225
 226 .sidebar ul, .actions ul {
 227         padding: 0;
 228         list-style: none;
 229         background: transparent;
 230 }
 231
 232 .sidebar li, .actions li {
 233         text-align: left;
 234 }
 235
 236 .sidebar ul li .selflink {
 237         color: #57075f;
 238         font-weight: bold;
 239 }
 240
 241 .sidebar ul li > span,
 242 .sidebar ul li > a,
 243 .actions ul li > a {
 244         display: block;
 245         padding: 0.5em;
 246         text-decoration: none;
 247         border: 1px solid #f5f5f5;
 248         color: #a756af;
 249         background: transparent;
 250         font-weight: normal;
 251 }
 252
 253 .sidebar ul li > span,
 254 .sidebar ul li > a {
 255         font-size: 100%;
 256 }
 257
 258 .sidebar ul li .selflink:hover {
 259         border-top: 1px dotted #57075f;
 260         border-bottom: 1px dotted #57075f;
 261         background: #eeeeee;
 262 }
 263
 264 .sidebar a:hover, .actions a:hover {
 265         border-top: 1px dotted #57075f;
 266         border-bottom: 1px dotted #57075f;
 267         color: #57075f;
 268         background: #eeeeee;
 269         text-decoration: none;
 270 }
 271 /* .sidebar }}} */
 272 /* {{{ #content */
 273 #content {
 274         padding-top: 1em;
 275         overflow: auto;
 276 }
 277
 278 #content a {
 279         color: #57075f;
 280         text-decoration: underline;
 281 }
 282
 283 #content a:hover {
 284         text-decoration: underline;
 285 }
 286
 287 #content p {
 288         text-align: justify;
 289         margin: 1em 0 1em 0;
 290 }
 291
 292 #content hr {
 293         border: none;
 294         border-bottom: dotted 2px #bbbbbb;
 295         margin: 2em auto;
 296 }
 297
 298 #content h1 {
 299         font-size: 180%;
 300         font-weight: bold;
 301         color: #ffa430;
 302         text-shadow: 2px 2px 1px #444;
 303 }
 304
 305 #content h2,
 306 #content .header {
 307         font-size: 140%;
 308         font-weight: bold;
 309 }
 310
 311 #content h2 + p {
 312         margin-top: 0.75em;
 313 }
 314
 315 #content h3 {
 316         font-size: 120%;
 317         font-weight: bold;
 318         margin-bottom: 0;
 319         padding-bottom: 0;
 320 }
 321
 322 #content h3 + p {
 323         margin-top: 0.5em;
 324 }
 325
 326 #content table {
 327         border-top: solid 1px #aaa;
 328         border-bottom: solid 1px #aaa;
 329         border-collapse: collapse;
 330 }
 331
 332 #content table th {
 333         background: #fafafa;
 334         padding: 0.1em 0.5em;
 335         border-bottom: solid 1px #aaaaaa;
 336         color: #555555;
 337 }
 338
 339 #content table td {
 340         padding: 0.1em 0.5em;
 341         border-top: solid 1px #ccc;
 342 }
 343
 344 #content .header a {
 345         text-decoration: none;
 346 }
 347
 348 #content .feedlink a {
 349         text-decoration: none;
 350 }
 351
 352 #content .feedlink {
 353         text-align: right;
 354         margin-top: -2.8em;
 355         min-height: 2.8em;
 356 }
 357 #content .feedlink .feedbutton {
 358         font-size: 80%;
 359         color: #57075f !important;
 360         background: transparent;
 361         border: none;
 362 }
 363 #content .feedlink .feedbutton:hover {
 364         color: #57075f !important;
 365         background: transparent;
 366         text-decoration: underline;
 367 }
 368
 369 #content .footnotes {
 370         font-size: 80%;
 371 }
 372 /* #content }}} */
 373
 374 /* {{{ .inlinepage */
 375
 376 .inlinepage {
 377         padding: 0;
 378         border: none;
 379         margin-bottom: 1em;
 380 }
 381
 382 .inlinepage .header {
 383         border-bottom: solid #ccc 1px;
 384 }
 385
 386 .inlinepage .inlineheader .pagedate {
 387         margin-top: 0;
 388         font-size: 80%;
 389         font-style: normal;
 390         color: #666;
 391 }
 392
 393 /* .inlinepage }}} */
 394
 395 /* {{{ #footer */
 396 #footer {
 397         position: relative;
 398         margin: 0;
 399         padding: 0.5em 0;
 400         text-align: center;
 401         color: white;
 402         background: #57075f;
 403         background: -webkit-linear-gradient(#001030, #57075f);
 404         background:    -moz-linear-gradient(#001030, #57075f);
 405         background:         linear-gradient(#001030, #57075f);
 406 }
 407
 408 #footer #pageinfo {
 409         position: relative;
 410         max-width: 30em;
 411         margin: auto;
 412         padding: 0.1em 2em;
 413         border-top: none;
 414 }
 415
 416 #footer a {
 417         color: white;
 418 }
 419
 420 #footer a:hover {
 421         text-decoration: underline;
 422 }
 423
 424 #backlinks {
 425         font-size: 80%;
 426         margin-top: 0;
 427 }
 428
 429 #footer #pageinfo div {
 430         font-size: 80%;
 431         margin-top: 0.5em;
 432         margin-bottom: 0;
 433 }
 434 /* #footer }}} */
 435
 436 /* {{{ @media print */
 437 @media print {
 438         .sidebar,
 439         .actions,
 440         .feedlink,
 441         #backlinks,
 442         #otherlanguages {
 443                 display: none;
 444         }
 445
 446         #footer,
 447         #footer #pageinfo,
 448         .page,
 449         .pageheader,
 450         #pagebody {
 451             margin: 0;
 452             padding: 0;
 453             border: none;
 454             box-shadow: none;
 455         }
 456
 457         .page,
 458         .pageheader {
 459                 border-radius: 0;
 460         }
 461
 462         .pageheader {
 463                 position: static;
 464                 height: auto;
 465         }
 466
 467         .pageheader .header {
 468                 margin-left: 0;
 469                 padding-top: 2em;
 470                 padding-bottom: 1em;
 471         }
 472
 473         .pageheader .header > span,
 474         .parentlinks .parentlinksep {
 475                 display: inline;
 476                 height: auto;
 477         }
 478
 479         .pageheader a,
 480         .pageheader .parentlinks a {
 481                 color: black;
 482         }
 483
 484         .pageheader,
 485         .parentlinks a,
 486         .parentlinks .parentlinksep + a + .parentlinksep + a {
 487                 background: none;
 488         }
 489
 490         .pageheader .parentlinks {
 491                 display: inline;
 492         }
 493
 494         .pageheader .title,
 495         .parentlinks > a {
 496                 position: static;
 497         }
 498
 499         .parentlinks > a span {
 500                 display: inline;
 501         }
 502
 503         #content h1 {
 504                 color: black;
 505                 text-shadow: none;
 506                 border-bottom: solid #ccc 1px;
 507         }
 508
 509         #footer {
 510                 margin-top: 2em;
 511                 text-align: left;
 512         }
 513 }
 514 /* @media print }}} */
 515