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