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 }
 228
 229 .sidebar ul li > span,
 230 .sidebar ul li > a {
 231         font-size: 100%;
 232 }
 233
 234 .sidebar ul li .selflink:hover {
 235         border-top: 1px dotted #57075f;
 236         border-bottom: 1px dotted #57075f;
 237         background: #eeeeee;
 238 }
 239
 240 .sidebar a:hover {
 241         border-top: 1px dotted #57075f;
 242         border-bottom: 1px dotted #57075f;
 243         color: #57075f;
 244         background: #eeeeee;
 245         text-decoration: none;
 246 }
 247 /* .sidebar }}} */
 248 /* {{{ #content */
 249 #content {
 250         padding-top: 1em;
 251         overflow: auto;
 252 }
 253
 254 #content a {
 255         color: #57075f;
 256         text-decoration: underline;
 257 }
 258
 259 #content a:hover {
 260         text-decoration: underline;
 261 }
 262
 263 #content p {
 264         text-align: justify;
 265         margin: 1em 0 1em 0;
 266 }
 267
 268 #content hr {
 269         border: none;
 270         border-bottom: dotted 2px #bbbbbb;
 271         margin: 2em auto;
 272 }
 273
 274 #content h1 {
 275         font-size: 180%;
 276         font-weight: bold;
 277         color: #ffa430;
 278         text-shadow: 2px 2px 1px #444;
 279 }
 280
 281 #content h2,
 282 #content .header {
 283         font-size: 140%;
 284         font-weight: bold;
 285 }
 286
 287 #content h2 + p {
 288         margin-top: 0.75em;
 289 }
 290
 291 #content h3 {
 292         font-size: 120%;
 293         font-weight: bold;
 294         margin-bottom: 0;
 295         padding-bottom: 0;
 296 }
 297
 298 #content h3 + p {
 299         margin-top: 0.5em;
 300 }
 301
 302 #content table {
 303         border-top: solid 1px #aaa;
 304         border-bottom: solid 1px #aaa;
 305         border-collapse: collapse;
 306 }
 307
 308 #content table th {
 309         background: #fafafa;
 310         padding: 0.1em 0.5em;
 311         border-bottom: solid 1px #aaaaaa;
 312         color: #555555;
 313 }
 314
 315 #content table td {
 316         padding: 0.1em 0.5em;
 317         border-top: solid 1px #ccc;
 318 }
 319
 320 #content .header a {
 321         text-decoration: none;
 322 }
 323
 324 #content .feedlink a {
 325         text-decoration: none;
 326 }
 327
 328 #content .feedlink {
 329         text-align: right;
 330         margin-top: -2.8em;
 331         min-height: 2.8em;
 332 }
 333 #content .feedlink .feedbutton {
 334         font-size: 80%;
 335         color: #57075f !important;
 336         background: transparent;
 337         border: none;
 338 }
 339 #content .feedlink .feedbutton:hover {
 340         color: #57075f !important;
 341         background: transparent;
 342         text-decoration: underline;
 343 }
 344
 345 #content .footnotes {
 346         font-size: 80%;
 347 }
 348 /* #content }}} */
 349
 350 /* {{{ .inlinepage */
 351
 352 .inlinepage {
 353         padding: 0;
 354         border: none;
 355         margin-bottom: 1em;
 356 }
 357
 358 .inlinepage .header {
 359         border-bottom: solid #ccc 1px;
 360 }
 361
 362 .inlinepage .inlineheader .pagedate {
 363         margin-top: 0;
 364         font-size: 80%;
 365         font-style: normal;
 366         color: #666;
 367 }
 368
 369 /* .inlinepage }}} */
 370
 371 /* {{{ #footer */
 372 #footer {
 373         position: relative;
 374         margin: 0;
 375         padding: 0.5em 0;
 376         text-align: center;
 377         color: white;
 378         background: #57075f;
 379         z-index: 400;
 380 }
 381
 382 #footer #pageinfo {
 383         position: relative;
 384         max-width: 30em;
 385         margin: auto;
 386         padding: 0.1em 2em;
 387         border-top: none;
 388 }
 389
 390 #footer a {
 391         color: white;
 392 }
 393
 394 #footer a:hover {
 395         text-decoration: underline;
 396 }
 397
 398 #backlinks {
 399         font-size: 80%;
 400         margin-top: 0;
 401 }
 402
 403 #footer #pageinfo div {
 404         font-size: 80%;
 405         margin-top: 0.5em;
 406         margin-bottom: 0;
 407 }
 408 /* #footer }}} */
 409
 410 /* {{{ @media print */
 411 @media print {
 412         .sidebar,
 413         .actions,
 414         .feedlink,
 415         #backlinks,
 416         #otherlanguages {
 417                 display: none;
 418         }
 419
 420         #footer,
 421         #footer #pageinfo,
 422         .page,
 423         .pageheader,
 424         #pagebody {
 425             margin: 0;
 426             padding: 0;
 427             border: none;
 428             box-shadow: none;
 429         }
 430
 431         .page,
 432         .pageheader {
 433                 border-radius: 0;
 434         }
 435
 436         .pageheader {
 437                 position: static;
 438                 height: auto;
 439         }
 440
 441         .pageheader .header {
 442                 margin-left: 0;
 443                 padding-top: 2em;
 444                 padding-bottom: 1em;
 445         }
 446
 447         .pageheader .header > span,
 448         .parentlinks .parentlinksep {
 449                 display: inline;
 450                 height: auto;
 451         }
 452
 453         .pageheader a,
 454         .pageheader .parentlinks a {
 455                 color: black;
 456         }
 457
 458         .pageheader,
 459         .parentlinks a,
 460         .parentlinks .parentlinksep + a + .parentlinksep + a {
 461                 background: none;
 462         }
 463
 464         .pageheader .parentlinks {
 465                 display: inline;
 466         }
 467
 468         .pageheader .title,
 469         .parentlinks > a {
 470                 position: static;
 471         }
 472
 473         .parentlinks > a span {
 474                 display: inline;
 475         }
 476
 477         #content h1 {
 478                 color: black;
 479                 text-shadow: none;
 480                 border-bottom: solid #ccc 1px;
 481         }
 482
 483         #content a:link:after,
 484         #content a:visited:after {
 485                 content:" [" attr(href) "] ";
 486         }
 487
 488         #footer {
 489                 margin-top: 2em;
 490                 text-align: left;
 491         }
 492 }
 493 /* @media print }}} */
 494