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 .parentlinks > a {
 108         width: 394px; /* same as .pageheader .header:margin-left */
 109         height: 100px;
 110         background: url(assets/logo-nos-oignons-blanc.png) no-repeat top left;
 111         position: absolute;
 112         left: 0;
 113         top: 0;
 114 }
 115
 116 .parentlinks > a span {
 117         display: none;
 118 }
 119
 120 .parentlinks .parentlinksep + a {
 121         width: auto;
 122         height: auto;
 123         background: transparent;
 124         display: inline;
 125         position: static;
 126 }
 127
 128 .parentlinks .parentlinksep + a + .parentlinksep + a {
 129         background: url(assets/ariane-sep.png) no-repeat 0% 50%;
 130         padding-left: 20px;
 131 }
 132
 133 .parentlinks .parentlinksep + a span {
 134         display: inline;
 135 }
 136
 137 .parentlinks .parentlinksep {
 138         display: none;
 139 }
 140
 141 /* {{{ .actions */
 142 .actions {
 143         font-size: 80%;
 144         text-align: right;
 145 }
 146
 147 /* .actions }}} */
 148 /* {{{ #otherlanguages */
 149 #otherlanguages,
 150 #otherlanguages ul li a {
 151         color: #57075f;
 152         background: white;
 153 }
 154
 155 #otherlanguages ul li {
 156         margin-left: 1em;
 157 }
 158 #otherlanguages .langstatus {
 159         display: none;
 160 }
 161
 162 .pageheader #otherlanguages {
 163         border: none;
 164         position: absolute;
 165         bottom: 1.2em;
 166         right: 0;
 167         z-index: 300;
 168         font-size: 80%;
 169 }
 170 /* #otherlanguages }}} */
 171 /* .pageheader }}} */
 172
 173 #pagebody {
 174         position: relative;
 175         min-height: 756px;
 176         margin: 0 0 0 11.44em; /* same as .sidebar:width */
 177         padding: 100px 2em 1em 2em;
 178         z-index: 110;
 179         background: white url(assets/background.png) no-repeat bottom center;
 180         color: black;
 181         border-left: solid 1px #ccc;
 182 }
 183
 184 /* {{{ .sidebar */
 185 .sidebar {
 186         position: fixed;
 187         overflow: hidden;
 188         top: 100px; /* same as .header:height */
 189         width: 11.44em;
 190         margin: 0;
 191         padding: 0;
 192         border: none;
 193         z-index: 200;
 194         background: #f5f5f5;
 195         border-top: solid 1px #ccc;
 196         padding-top: 30px;
 197 }
 198
 199 .sidebar ul {
 200         margin: 0;
 201 }
 202
 203 .sidebar ul {
 204         padding: 0;
 205         list-style: none;
 206         background: transparent;
 207 }
 208
 209 .sidebar li {
 210         text-align: left;
 211 }
 212
 213 .sidebar ul li .selflink {
 214         color: #57075f;
 215         font-weight: bold;
 216 }
 217
 218 .sidebar ul li > span,
 219 .sidebar ul li > a {
 220         display: block;
 221         padding: 0.3em 0.5em;
 222         text-decoration: none;
 223         border: 1px solid #f5f5f5;
 224         color: #a756af;
 225         background: transparent;
 226         font-weight: normal;
 227         font-size: 100%;
 228 }
 229
 230 .sidebar ul li .selflink:hover {
 231         border-top: 1px dotted #57075f;
 232         border-bottom: 1px dotted #57075f;
 233         background: #eeeeee;
 234 }
 235
 236 .sidebar a:hover {
 237         border-top: 1px dotted #57075f;
 238         border-bottom: 1px dotted #57075f;
 239         color: #57075f;
 240         background: #eeeeee;
 241         text-decoration: none;
 242 }
 243 /* .sidebar }}} */
 244 /* {{{ #content */
 245 #content {
 246         padding-top: 1em;
 247         overflow: auto;
 248 }
 249
 250 #content a {
 251         color: #57075f;
 252         text-decoration: underline;
 253 }
 254
 255 #content a:hover {
 256         text-decoration: underline;
 257 }
 258
 259 #content p {
 260         text-align: justify;
 261         margin: 1em 0 1em 0;
 262 }
 263
 264 #content hr {
 265         border: none;
 266         border-bottom: dotted 2px #bbbbbb;
 267         margin: 2em auto;
 268 }
 269
 270 #content h1 {
 271         font-size: 180%;
 272         font-weight: bold;
 273         color: #ffa430;
 274         text-shadow: 2px 2px 1px #444;
 275 }
 276
 277 #content h2,
 278 #content .header {
 279         font-size: 140%;
 280         font-weight: bold;
 281 }
 282
 283 #content h2 + p {
 284         margin-top: 0.75em;
 285 }
 286
 287 #content h3 {
 288         font-size: 120%;
 289         font-weight: bold;
 290         margin-bottom: 0;
 291         padding-bottom: 0;
 292 }
 293
 294 #content h3 + p {
 295         margin-top: 0.5em;
 296 }
 297
 298 #content table {
 299         border-top: solid 1px #aaa;
 300         border-bottom: solid 1px #aaa;
 301         border-collapse: collapse;
 302 }
 303
 304 #content table th {
 305         background: #fafafa;
 306         padding: 0.1em 0.5em;
 307         border-bottom: solid 1px #aaaaaa;
 308         color: #555555;
 309 }
 310
 311 #content table td {
 312         padding: 0.1em 0.5em;
 313         border-top: solid 1px #ccc;
 314 }
 315
 316 #content .header a {
 317         text-decoration: none;
 318 }
 319
 320 #content .feedlink a {
 321         text-decoration: none;
 322 }
 323
 324 #content .feedlink {
 325         text-align: right;
 326         margin-top: -2.8em;
 327         min-height: 2.8em;
 328 }
 329 #content .feedlink .feedbutton {
 330         font-size: 80%;
 331         color: #57075f !important;
 332         background: transparent;
 333         border: none;
 334 }
 335 #content .feedlink .feedbutton:hover {
 336         color: #57075f !important;
 337         background: transparent;
 338         text-decoration: underline;
 339 }
 340
 341 #content .footnotes {
 342         font-size: 80%;
 343 }
 344 /* #content }}} */
 345
 346 /* {{{ .inlinepage */
 347
 348 .inlinepage {
 349         padding: 0;
 350         border: none;
 351         margin-bottom: 1em;
 352 }
 353
 354 .inlinepage .header {
 355         border-bottom: solid #ccc 1px;
 356 }
 357
 358 .inlinepage .inlineheader .pagedate {
 359         margin-top: 0;
 360         font-size: 80%;
 361         font-style: normal;
 362         color: #666;
 363 }
 364
 365 /* .inlinepage }}} */
 366
 367 /* {{{ #footer */
 368 #footer {
 369         position: relative;
 370         margin: 0;
 371         padding: 0.5em 0;
 372         text-align: center;
 373         color: white;
 374         background: #57075f;
 375         z-index: 400;
 376 }
 377
 378 #footer #pageinfo {
 379         position: relative;
 380         max-width: 30em;
 381         margin: auto;
 382         padding: 0.1em 2em;
 383         border-top: none;
 384 }
 385
 386 #footer a {
 387         color: white;
 388 }
 389
 390 #footer a:hover {
 391         text-decoration: underline;
 392 }
 393
 394 #backlinks {
 395         font-size: 80%;
 396         margin-top: 0;
 397 }
 398
 399 #footer #pageinfo div {
 400         font-size: 80%;
 401         margin-top: 0;
 402         margin-bottom: 0;
 403 }
 404 /* #footer }}} */
 405
 406 /* {{{ @media print */
 407 @media print {
 408         .sidebar,
 409         .actions,
 410         .feedlink,
 411         #backlinks,
 412         #otherlanguages {
 413                 display: none;
 414         }
 415
 416         #footer,
 417         #footer #pageinfo,
 418         .page,
 419         .pageheader,
 420         #pagebody {
 421             margin: 0;
 422             padding: 0;
 423             border: none;
 424             box-shadow: none;
 425         }
 426
 427         .page,
 428         .pageheader {
 429                 border-radius: 0;
 430         }
 431
 432         .pageheader {
 433                 position: static;
 434                 height: auto;
 435         }
 436
 437         .pageheader .header {
 438                 margin-left: 0;
 439                 padding-top: 2em;
 440                 padding-bottom: 1em;
 441         }
 442
 443         .pageheader .header > span,
 444         .parentlinks .parentlinksep {
 445                 display: inline;
 446                 height: auto;
 447         }
 448
 449         .pageheader a,
 450         .pageheader .parentlinks a {
 451                 color: black;
 452         }
 453
 454         .pageheader,
 455         .parentlinks a,
 456         .parentlinks .parentlinksep + a + .parentlinksep + a {
 457                 background: none;
 458         }
 459
 460         .pageheader .parentlinks {
 461                 display: inline;
 462         }
 463
 464         .pageheader .title,
 465         .parentlinks > a {
 466                 position: static;
 467         }
 468
 469         .parentlinks > a span {
 470                 display: inline;
 471         }
 472
 473         #content h1 {
 474                 color: black;
 475                 text-shadow: none;
 476                 border-bottom: solid #ccc 1px;
 477         }
 478
 479         #content a:link:after,
 480         #content a:visited:after {
 481                 content:" [" attr(href) "] ";
 482         }
 483
 484         #footer {
 485                 margin-top: 2em;
 486                 text-align: left;
 487         }
 488 }
 489 /* @media print }}} */
 490