1/****************************************************************************** 2 ******************************** ATTENTION ********************************* 3 DO NOT MODIFY THIS FILE, IT WILL NOT BE PRESERVED ON UPDATES! 4 ****************************************************************************** 5 If you want to add some own screen CSS, have a look at <http://www.dokuwiki.org/template:scanlines?&#customizing> 6 and "/user/screen.css". You have been warned! 7 *****************************************************************************/ 8 9/** 10 * Layout for Template Scanlines 11 * 12 * @author Johannes Winkler <johannes@rocking-minds.org> 13 */ 14 15/* 16- general elements 17- header 18- logo 19 - logo link 20- top and bottom bar 21 - userbar 22 - userbar buttons 23- navigation 24 - navi links 25- main 26- the document 27 - full page 28 - right page 29 - left page 30 - normal 31- Sidebar 32 - left Sidebar 33 - right Sidebar 34- Footer 35- Media Queries 36 - max-width: 1140px 37 - max-width: 1050px 38 - max-width: 840px 39 - max-width: 600px 40*/ 41 42 /* general elements 43 --------------------------------------------- */ 44 45* { padding: 0; margin: 0; } 46 47html { 48 overflow-y: scroll; 49} 50 51body { 52 background: __background__; 53 color: __text__; 54 font: 82% "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif; 55 line-height: 1.6em !important; 56} 57 58/* header 59--------------------------------------------- */ 60 61div.dokuwiki div.header { 62 min-height: 88px; 63 min-width: 1100px; 64 width: 100%; 65 background: url(images/fallback/header.png); 66 background: -webkit-gradient(linear, left top, left bottom,color-stop(0, #e9e9e9), color-stop(.40, #cacacb), 67 color-stop(.48, #c2c3c2), color-stop(.56, #d0d0d0), color-stop(.70, #e3e3e3), color-stop(1, #eeeeee)); 68 background: -webkit-linear-gradient(top, #e9e9e9, #cacacb 40%, #c2c3c2 48%, #d0d0d0 56%, #e3e3e3 70%, #eeeeee); 69 background: -moz-linear-gradient(top, #e9e9e9, #cacacb 40%, #c2c3c2 48%, #d0d0d0 56%, #e3e3e3 70%, #eeeeee); 70 background: -ms-linear-gradient(top, #e9e9e9, #cacacb 40%, #c2c3c2 48%, #d0d0d0 56%, #e3e3e3 70%, #eeeeee); 71 background: -o-linear-gradient(top, #e9e9e9, #cacacb 40%, #c2c3c2 48%, #d0d0d0 56%, #e3e3e3 70%, #eeeeee); 72 background: linear-gradient(top, #e9e9e9, #cacacb 40%, #c2c3c2 48%, #d0d0d0 56%, #e3e3e3 70%, #eeeeee); 73 -pie-background: linear-gradient(top, #e9e9e9, #cacacb 40%, #c2c3c2 48%, #d0d0d0 56%, #e3e3e3 70%, #eeeeee); 74 behavior: url(htc/PIE-1.0beta5/PIE.htc); 75} 76 77div.dokuwiki div.header_content { 78 margin: 0 auto; 79 min-height: 100%; 80 padding: 2em 0; 81 position: relative; 82 width: 1100px; 83} 84 85/* logo 86--------------------------------------------- */ 87 88div.dokuwiki div.logo { 89 min-height: 130px; 90 width: 1100px; 91} 92 93div.dokuwiki div.logo h1 a, 94div.dokuwiki div.logo h1 { 95 border: none; 96 color: __logo__ !important; 97 font: bold 50px sans-serif, cursive; 98 margin: 0; 99 outline: none; 100 padding: 0; 101 text-decoration: none; 102} 103 104div.dokuwiki div.logo h2 { 105 border: none; 106 color: __logo__; 107 font: bold 25px sans-serif, cursive; 108 letter-spacing: 0.1em; 109 margin: 0 0 0 3em; 110 text-decoration: none; 111 text-indent: -2em; 112 text-shadow: 0 -1px 1px __white__, 0 1px 1px __text_shadow__ ; 113} 114 115/* top and bottom bar 116--------------------------------------------- */ 117 118div.dokuwiki div.bar_top { 119 background: url(images/scanlines.png); 120 height: 80px; 121 min-width: 1100px; 122 width: 100%; 123} 124 125div.dokuwiki div.bar_top_content { 126 height: 47px; 127 margin: 0 auto; 128 position: relative; 129 width: 1047px; 130} 131 132div.dokuwiki div.bar_bottom { 133 border-top: 2px solid__border2__; 134 border-right: 1.5px solid __border__; 135 border-bottom: 2px solid __border2__; 136 border-left: 1.5px solid __border__; 137 float: left; 138 padding: 0; 139 width: 100%; 140} 141 142div.dokuwiki div.bar_bottom_content { 143 width: 97.5%; 144 margin: 0 auto; 145 padding: 0.8em 0; 146 147} 148 149div.dokuwiki div.bar-left { 150 float: left; 151} 152 153div.dokuwiki div.bar-right { 154 text-align: right; 155} 156 157div.dokuwiki #bar__bottom { 158 margin: 1.5em 0 0.188em; 159} 160 161div.dokuwiki #bar__topright { 162 position: absolute; 163 top: .9em; 164 right: .4em; 165} 166 167/* --- userbar --- */ 168div.dokuwiki div.userbar { 169 position: absolute; 170 top: 3.5em; 171 right: 0; 172} 173 174/* userbar buttons */ 175div.dokuwiki div.userbar a { 176 color: __nearly_white__; 177 display: inline-block; 178 font-weight: bold; 179 margin: 0 1em; 180 outline: 0; 181 padding: 5em 1em 0; 182 text-decoration: none; 183 text-shadow: 0 -1px 1px __text_shadow2__; 184} 185 186div.dokuwiki div.userbar .admin, 187div.dokuwiki div.userbar .profile, 188div.dokuwiki div.userbar .logout { 189 background: url(images/sprite1.png) no-repeat 0 0; 190 -pie-png-fix: true; 191 behavior: url(htc/PIE-1.0beta5/PIE.htc); 192} 193 194div.dokuwiki div.userbar .login { 195 background: transparent url(images/sprite2.png) no-repeat 0 0; 196 -pie-png-fix: true; 197 behavior: url(htc/PIE-1.0beta5/PIE.htc); 198} 199 200div.dokuwiki div.userbar a.admin { 201 background-position: -10px -5px; 202} 203 204div.dokuwiki div.userbar a.profile { 205 background-position: -10px -90px; 206} 207 208div.dokuwiki div.userbar a.logout { 209 background-position: -10px -175px; 210} 211 212div.dokuwiki div.userbar a.login { 213 background-position: -10px -5px; 214} 215 216div.dokuwiki div.userbar .admin:hover { 217 background-position: -10px -260px; 218} 219 220div.dokuwiki div.userbar .profile:hover { 221 background-position: -10px -340px; 222} 223 224div.dokuwiki div.userbar .logout:hover { 225 background-position: -10px -420px; 226} 227 228div.dokuwiki div.userbar .login:hover { 229 background-position: -10px -90px; 230} 231 232 233/* navigation 234--------------------------------------------- */ 235 236div.dokuwiki div.navi { 237 height: 47px; 238 margin: 0 auto; 239 width: 100%; 240} 241 242div.dokuwiki div.navi ul { 243 padding: 0 0 0 .5em; 244 margin: 0; 245 list-style: none; 246} 247 248div.dokuwiki div.navi li { 249 display: inline-block; 250 float: left; 251} 252 253/* --- navi links --- */ 254div.dokuwiki div.navi li a { 255 border-right: 1.8px dashed #969696; 256 border-left: 1.8px dashed #969696; 257 color: __nearly_white__; 258 display: block; 259 float: left; 260 font: 17px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 261 height: 35px; 262 margin-right: 1em; 263 padding: 0.6em 1em 0; 264 text-decoration: none; 265 -webkit-border-bottom-right-radius: 1px; 266 -webkit-border-bottom-left-radius: 1px; 267 -khtmlt-border-bottom-right-radius: 1px; 268 -khtml-border-bottom-left-radius: 1px; 269 -moz-border-radius-bottomright: 1px; 270 -moz-border-radius-bottomleft: 1px; 271 -o-border-radius-bottomright: 1px; 272 -o-border-radius-bottomleft: 1px; 273 border-bottom-right-radius: 1px; 274 border-bottom-left-radius: 1px; 275 -webkit-box-shadow: 0 1px 3px __box_shadow__; 276 -khtml-box-shadow: 0 1px 3px __box_shadow__; 277 -moz-box-shadow: 0 1px 3px __box_shadow__; 278 -o-box-shadow: 0 1px 3px __box_shadow__; 279 box-shadow: 0 1px 3px __box_shadow__; 280} 281 282div.dokuwiki div.navi li a:link, 283div.dokuwiki div.navi li a:visited { 284 background: rgba(69, 68, 63, .006); 285 text-shadow: 0 -1px 1px __text_shadow2__; 286} 287 288div.dokuwiki div.navi li a:hover { 289 290 291 background: rgba(69, 68, 63, .1); 292 text-shadow: 0 1.5px 1px __text_shadow2__; 293 -webkit-transition: all 0.25s ease-in-out; 294 -moz-transition: all 0.25s ease-in-out; 295 -o-transition: all 0.25s ease-in-out; 296 transition: all 0.25s ease-in-out; 297} 298 299div.dokuwiki div.navi li a:active { 300 background: rgba(69, 68, 63, .06); 301 outline: 1px dotted #FFF; 302 text-shadow: 0 -1px 1px __text_shadow2__; 303} 304 305/* main 306--------------------------------------------- */ 307 308div.dokuwiki div.main { 309 background: __white__; 310 margin: 1em auto 1.5em; 311 padding: 1em; 312 width: 985px; 313 -webkit-box-shadow: 0 0 15px __box_shadow__; 314 -khtml-box-shadow: 0 0 15px __box_shadow__; 315 -moz-box-shadow: 0 0 15px __box_shadow__; 316 -o-box-shadow: 0 0 15px __box_shadow__; 317 box-shadow: 0 0 15px __box_shadow__; 318 -webkit-border-radius: 3px; 319 -khtml-border-radius: 3px; 320 -moz-border-radius: 3px; 321 -o-border-radius: 3px; 322 border-radius: 3px; 323 behavior: url(htc/PIE-1.0beta5/PIE.htc); 324} 325 326/* the document 327--------------------------------------------- */ 328 329/* --- full page --- */ 330div.dokuwiki div.full_page { 331 width: 985px; 332} 333 334/* --- right page --- */ 335div.dokuwiki div.right_page { 336 float: right; 337 width: 720px; 338} 339 340/* --- left page --- */ 341div.dokuwiki div.left_page { 342 float: left; 343 width: 720px; 344} 345 346/* --- page --- */ 347div.dokuwiki div.page, 348div.dokuwiki div.page_720 { 349 border-top: 1px solid __border3__; 350 border-right: 1px solid __border3__; 351 border-bottom: 2px solid __border2__; 352 border-left: 1px solid __border3__; 353 text-align: justify; 354 width: 100%; 355} 356 357div.dokuwiki div.page { 358 float: left; 359} 360 361div.dokuwiki div.tocheader, 362div.dokuwiki div.tocheader a, 363div.dokuwiki div.page_title, 364div.dokuwiki div.sidebar_title { 365 border-bottom: 1.5px solid __border__; 366 color: __text__; 367 font: 15px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 368 height: 21.8px; 369 padding: 0.2em 0 0; 370 text-align: center; 371 width: 100%; 372 background: url(images/fallback/title.png); 373 background: -webkit-gradient(linear, left top, left bottom,color-stop(0, #e4e4e4), color-stop(.75, #C9C9C9), color-stop(1, #D9D9D8)); 374 background: -webkit-linear-gradient(top, #e4e4e4, #C9C9C9 75%, #D9D9D8); 375 background: -moz-linear-gradient(top, #e4e4e4, #C9C9C9 75%, #D9D9D8); 376 background: -ms-linear-gradient(top, #e4e4e4, #C9C9C9 75%, #D9D9D8); 377 background: -o-linear-gradient(top, #e4e4e4, #C9C9C9 75%, #D9D9D8); 378 background: linear-gradient(top, #e4e4e4, #C9C9C9 75%, #D9D9D8); 379 -pie-background: linear-gradient(top, #e4e4e4, #C9C9C9 75%, #D9D9D8); 380 behavior: url(htc/PIE-1.0beta5/PIE.htc); 381} 382 383div.dokuwiki div.page_content { 384 margin: 0.8em; 385} 386 387div.dokuwiki table { 388 font-size: 100%; 389} 390 391div.dokuwiki tr, 392div.dokuwiki td, 393div.dokuwiki th { 394} 395 396div.dokuwiki img { 397 border: none; 398} 399 400div.dokuwiki p, 401div.dokuwiki blockquote, 402div.dokuwiki table, 403div.dokuwiki pre { 404 margin: 0 0 1em; 405} 406 407div.dokuwiki hr { 408 border: 0; 409 border-top: 1px solid __border__; 410 height: 0; 411 text-align: center; 412} 413 414div.dokuwiki div.nothing { 415 margin: 2em; 416 text-align: center; 417} 418 419/* Sidebar 420--------------------------------------------- */ 421 422div.dokuwiki div.sidebar_single { 423 border-top: 1px solid __border3__; 424 border-right: 2px solid __border2__; 425 border-bottom: 2px solid __border2__; 426 border-left: 1px solid __border3__; 427 margin: 1em 0 0; 428 text-align: justify; 429 width: 100%; 430} 431 432div.dokuwiki div.sidebar_content{ 433 margin: 0.6em; 434 overflow: auto; 435} 436 437div.dokuwiki div.left_sidebar h1, 438div.dokuwiki div.left_sidebar h2, 439div.dokuwiki div.left_sidebar h3, 440div.dokuwiki div.left_sidebar h4, 441div.dokuwiki div.left_sidebar h5, 442div.dokuwiki div.left_sidebar h6, 443div.dokuwiki div.right_sidebar h1, 444div.dokuwiki div.right_sidebar h2, 445div.dokuwiki div.right_sidebar h3, 446div.dokuwiki div.right_sidebar h4, 447div.dokuwiki div.right_sidebar h5, 448div.dokuwiki div.right_sidebar h6 { 449 border: none; 450 font: bold 100% Verdana, "Lucida Grande", Lucida, Helvetica, Arial, sans-serif; 451 margin: 0 0 0.2em; 452 padding: 0.1em; 453} 454 455div.dokuwiki div.left_sidebar h1, 456div.dokuwiki div.right_sidebar h1 { 457 padding: 0 0 0 0.2em; 458} 459 460div.dokuwiki div.left_sidebar div.level2, 461div.dokuwiki div.right_sidebar div.level2, 462div.dokuwiki div.left_sidebar div.level3, 463div.dokuwiki div.right_sidebar div.level3, 464div.dokuwiki div.left_sidebar div.level4, 465div.dokuwiki div.right_sidebar div.level4, 466div.dokuwiki div.left_sidebar div.level5, 467div.dokuwiki div.right_sidebar div.level5 { 468 margin: 0 0 0 0.1875em; 469} 470 471div.dokuwiki div.left_sidebar ul, 472div.dokuwiki div.right_sidebar ul { 473 margin: 0 0 0 1.5em; 474} 475 476div.dokuwiki div.left_sidebar div.secedit, 477div.dokuwiki div.right_sidebar div.secedit { 478 text-align: right; 479} 480 481 482/* --- left Sidebar --- */ 483div.dokuwiki div.left_sidebar { 484 float: left; 485 margin: -1em 0 0; 486 text-align: justify; 487 width: 250px; 488} 489 490/* --- right Sidebar --- */ 491div.dokuwiki div.right_sidebar { 492 float: right; 493 margin: -1em 0 0; 494 text-align: justify; 495 width: 250px; 496} 497 498/* Footer 499--------------------------------------------- */ 500 501div.dokuwiki div.footer { 502 background: url(images/scanlines.png) repeat-x; 503 border: 1px solid #8eb0d9; 504 color: __nearly_white__; 505 font: bold 11.5px/1.5 "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 506 height: 42.6px; 507 margin: 0 auto; 508 margin-bottom: 1em; 509 padding: .4em 1em 0; 510 text-align: center; 511 text-shadow: 0 -1px 1px __text_shadow2__; 512 width: 1015px; 513 -webkit-border-radius: 6px; 514 -khtml-border-radius: 6px; 515 -moz-border-radius: 6px; 516 -o-border-radius: 6px; 517 border-radius: 6px; 518 behavior: url(htc/PIE-1.0beta5/PIE.htc); 519 -webkit-box-shadow: 0 0 10px __box_shadow__, inset 1px 1px 3px #e2e2e2; 520 -khtml-box-shadow: 0 0 10px __box_shadow__, inset 1px 1px 3px #e2e2e2; 521 -moz-box-shadow: 0 0 10px __box_shadow__, inset 1px 1px 3px #e2e2e2; 522 -o-box-shadow: 0 0 10px __box_shadow__, inset 1px 1px 1px #e2e2e2; 523 box-shadow: 0 0 10px __box_shadow__, inset 1px 1px 3px #e2e2e2; 524} 525 526div.dokuwiki div.footer:hover { 527 border: 2px solid #8eb0d9; 528 -webkit-transition: all 0.25s ease-in-out; 529 -moz-transition: all 0.25s ease-in-out; 530 transition: all 0.25s ease-in-out; 531} 532 533div.dokuwiki div.footer a:link, 534div.dokuwiki div.footer a:visited, 535div.dokuwiki div.footer a:active, 536div.dokuwiki div.footer a:hover { 537 border-bottom: none; 538 color: __nearly_white__; 539 font-size: 11.6px; 540 text-decoration: none; 541} 542 543div.dokuwiki div.footer a:hover { 544 text-shadow: 0 1.5px 1px __text_shadow2__; 545} 546 547/* Media Queries 548--------------------------------------------- */ 549 550/* --- max-width: 1140px --- */ 551@media only screen and (max-width: 1140px) { 552 div.dokuwiki div.header, 553 div.dokuwiki div.header_content, 554 div.dokuwiki div.bar_top, 555 div.dokuwiki div.bar_top_content, 556 div.dokuwiki div.navi, 557 div.dokuwiki div.full_page { 558 max-width: 100%; 559 min-width: 100%; 560 width: 100%; 561 } 562 563 div.dokuwiki { 564 min-width: 300px; 565 } 566 567 div.dokuwiki div.main { 568 width: 90%; 569 } 570 571 div.dokuwiki div.page_720, 572 div.dokuwiki div.page { 573 overflow-x: scroll; 574 } 575 576 577 div.dokuwiki div.logo { 578 margin: 0 auto; 579 min-height: auto; 580 overflow: hidden; 581 width: 96%; 582 } 583 584 div.dokuwiki div.right_page, 585 div.dokuwiki div.left_page { 586 width: 73.8%; 587 } 588 589 div.dokuwiki div.left_sidebar, 590 div.dokuwiki div.right_sidebar { 591 width: 24.8%; 592 } 593 594 div.dokuwiki div.footer { 595 font-size: 80%; 596 width: 92%; 597 } 598 599 div.dokuwiki div.footer a:link, 600 div.dokuwiki div.footer a:visited, 601 div.dokuwiki div.footer a:active, 602 div.dokuwiki div.footer a:hover { 603 font-size: 95%; 604 } 605} 606 607/* --- max-width: 1050px --- */ 608@media only screen and (max-width: 1050px) { 609 div.dokuwiki div.userbar, 610 div.dokuwiki div.bar_top_content { 611 position: static; 612 } 613 614 div.dokuwiki div.userbar { 615 margin: .5em 0 0 .5em; 616 } 617 618 619 div.dokuwiki div.stylehead { 620 position: relative; 621 } 622 623 div.dokuwiki #bar__topright { 624 right: .5em; 625 top: 40%; 626 } 627 628 div.dokuwiki div.toc_none_sidebar, 629 div.dokuwiki div.toc { 630 width: 100%; 631 } 632 633 div.dokuwiki div.toc_none_sidebar div.tocheader, 634 div.dokuwiki div.toc_none_sidebar div.tocheader a { 635 background: __background__; 636 border-bottom: 2px solid __border2__; 637 } 638 639 div.dokuwiki #top_link, 640 div.dokuwiki #top_link:hover { 641 height: 30px; 642 right: 0; 643 width: 85px; 644 } 645} 646 647/* --- max-width: 840px --- */ 648@media only screen and (max-width: 840px) { 649 div.dokuwiki div.logo h2 { 650 display: none; 651 } 652 653 div.dokuwiki div.logo { 654 min-height: 48px; 655 } 656 657 div.dokuwiki div.left_sidebar, 658 div.dokuwiki div.right_sidebar, 659 div.dokuwiki div.right_page, 660 div.dokuwiki div.left_page, 661 div.dokuwiki div.full_page, 662 div.dokuwiki div.bar_bottom, 663 div.dokuwiki div.bar_bottom_720 { 664 float: none; 665 margin: 0; 666 width: 100%; 667 } 668 669 div.dokuwiki div.bar_top, 670 div.dokuwiki div.bar_top_content { 671 background: none; 672 height: auto; 673 position: relative; 674 } 675 676 div.dokuwiki #bar__topright { 677 bottom: -2.8em; 678 text-align: center; 679 top: auto; 680 width: 100%; 681 } 682 683 div.dokuwiki input#qsearch__in { 684 width: 40%; 685 } 686 687 div.dokuwiki div.stylehead:after { 688 background: url(images/scanlines.png) repeat-x bottom left; 689 content: " "; 690 display: block; 691 height: 33px; 692 width: 100%; 693 } 694 695 div.dokuwiki div.navi { 696 background: url(images/scanlines_viewport.png); 697 height: auto; 698 margin: 0; 699 padding: 0; 700 } 701 702 div.dokuwiki div.navi li a { 703 height: 35.6px; 704 margin: 0 .5em 0 0; 705 } 706} 707 708/* --- max-width: 600px --- */ 709@media only screen and (max-width: 600px) { 710 div.dokuwiki div.userbar a { 711 margin: 0; 712 } 713 div.dokuwiki div.userbar { 714 margin-left: .5em; 715 } 716 717 div.dokuwiki div.main { 718 border: 0; 719 padding: 0; 720 width: 100%; 721 } 722 723 div.dokuwiki div.navi li a { 724 font-size: 15px; 725 height: 34px; 726 padding: 0.8em .5em 0; 727 } 728 729 div.dokuwiki div.page, 730 div.dokuwiki div.page_720, 731 div.dokuwiki div.bar_bottom, 732 div.dokuwiki div.sidebar_single { 733 border: 0; 734 border-top: 2px solid __border2__; 735 } 736 737 div.dokuwiki div.tocheader, 738 div.dokuwiki div.tocheader a, 739 div.dokuwiki #toc__inside { 740 border: 0; 741 } 742 743 div.dokuwiki div.tocheader, 744 div.dokuwiki div.tocheader a { 745 border-top: 2px solid __border2__; 746 border-bottom: 1.5px solid __border__; 747 } 748 749 div.dokuwiki div.footer { 750 background: none; 751 border: none; 752 color: __text__; 753 font-size: 95%; 754 height: auto; 755 margin: 0; 756 text-shadow: none; 757 -webkit-border-radius: none; 758 -khtml-border-radius: none; 759 -moz-border-radius: none; 760 -o-border-radius: none; 761 border-radius: none; 762 -webkit-box-shadow: none; 763 -khtml-box-shadow: none; 764 -moz-box-shadow: none; 765 -o-box-shadow: none; 766 box-shadow: none; 767 } 768 769 div.dokuwiki div.footer:hover { 770 border: none; 771 -webkit-transition: none; 772 -moz-transition: none; 773 transition: none; 774 } 775 776 777 div.dokuwiki div.footer a:link, 778 div.dokuwiki div.footer a:visited, 779 div.dokuwiki div.footer a:active, 780 div.dokuwiki div.footer a:hover { 781 font-size: 100%; 782 color: #7d7d7d; 783 } 784 785 div.dokuwiki div.footer a:hover { 786 color: #8f8f8f; 787 text-shadow: .1px .1px 12px #414141; 788 } 789 790 791 div.dokuwiki #top_link, 792 div.dokuwiki #top_link:hover { 793 float: right; 794 position: relative; 795 } 796}