1/* 2************************************************************************************************** 3Copyright Holder and License 4************************************************************************************************** 5GRAMPS Cascading Style Sheet 6Style Name: Basic - Lilac 7Style Author: Jason M. Simanek (2008) 8Note: Adapted from GRAMPS original Modern Style stylesheet with colors from the original 'Business' stylesheet 9************************************************************************************************** 10This website was created with GRAMPS <http://www.gramps-project.org/> 11-------------------------------------------------------------------------------------------------- 12GRAMPS is a Free Software Project for Genealogy, offering a professional 13 14genealogy program, and a wiki open to all. It is a community project, created, 15developed and governed by genealogists. 16 17Go to <http://gramps-project.org/> to learn more! 18 19-------------------------------------------------------------------------------------------------- 20Copyright 2008 Jason M. Simanek 21Copyright 2009 Stephane Charette 22Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com> 23Copyright 2011 Michiel D. Nauta 24Copyright 2018 Theo van Rijn 25Copyright (C) 2019 Serge Noiraud 26 27This file is part of the GRAMPS program. 28 29GRAMPS is free software: you can redistribute it and/or modify it under the 30terms of the GNU General Public License as published by the Free Software 31Foundation, version 2 of the License. 32 33GRAMPS is distributed in the hope that it will be useful, but WITHOUT ANY 34WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR 35A PARTICULAR PURPOSE. See the GNU General Public License for more details. 36 37You should have received a copy of the GNU General Public License along with 38GRAMPS. If not, see <http://www.gnu.org/licenses/>. 39-------------------------------------------------------------------------------------------------- 40 41Color Palette 42-------------------------------------------------------------------------------------------------- 43 44black #000 45lilac dark #2E2E61 46lilac #669 47lilac light #B4B4CB 48lilac very light #E0E0E9 49white #FAFAFF 50-------------------------------------------------------------------------------------------------- 51Characteristic of this style is that it uses the full width of the browser 52window and that horizontal highlighting bars extend over the full width of 53the page. 54-------------------------------------------------------------------------------------------------- 55 56 NarrativeWeb Styles 57------------------------------------------------------------------------------------------------ 58 59 General Elements 60----------------------------------------------------- */ 61 62body { 63 font-family: sans-serif; 64 font-size: 90%; 65 color: black; 66 margin: 0px; 67 background-color: #E0E0E9; 68} 69body > div { 70 clear: both; 71} 72#outerwrapper { 73 margin: 5px auto; 74 width: 98%; 75} 76#outerwrapper > div { 77 clear: both; 78} 79.content { 80 background-color: #FAFAFF; 81 border-top: solid 1px #669; 82} 83.content div.snapshot { 84 float: right; 85 margin: 2em; 86} 87#ThumbnailPreview div.snapshot { 88 float: right; 89 margin: 0; 90} 91.fullclear { 92 clear: both; 93} 94/* Less whitespace on smaller real estate. */ 95@media only screen and (max-width: 1080px) { 96 .content { 97 padding: 0em 0.5em; 98 } 99} 100 101/* General Text 102----------------------------------------------------- */ 103h1 { 104 font-size: x-large; 105 font-weight: bold; 106 padding-left: 15px; 107} 108h2 { 109 display:block; 110 margin:0; 111 padding:0; 112 text-align: center; 113} 114h3 { 115 font-size: large; 116 padding-left: 15px; 117} 118h4 { 119 font-size: medium; 120 color: #2E2E61; 121 background-color: #B4B4CB; 122 padding-left: 15px; 123 margin-bottom: 0px; 124 border-bottom: solid 1px #669; 125} 126p#description { 127 padding-left: 15px; 128} 129a { 130 color: black; 131 text-decoration: none; 132 word-wrap: break-word; 133} 134a[href]:hover, a[href]:active { 135 background-color: #E0E0E9 136} 137.grampsid { 138 font-family: monospace; 139 font-size: smaller; 140 color: #669; 141} 142 143/* Header 144----------------------------------------------------- */ 145#SiteTitle { 146 color: #2E2E61; 147} 148#user_header, #user_footer { 149 padding-left: 15px; 150} 151 152/* Navigation 153----------------------------------------------------- */ 154div#nav, #subnavigation { 155 border: solid 1px #E0E0E9; /* needed by IE7 */ 156} 157#subnavigation ul { 158 overflow: hidden; 159} 160div#nav ul, #subnavigation ul { 161 list-style: none; 162 margin: 0px; 163 padding-left: 15px; 164} 165#subnavigation ul { 166 border-bottom: solid 1px #669; 167} 168div#nav ul li, #subnavigation ul li { 169 float: left; 170} 171div#nav ul li a, #subnavigation ul li a { 172 display: block; 173 font-size: smaller; 174 font-weight: bold; 175 padding: 5px; 176 border-bottom: solid 1px #E0E0E9; 177} 178div#nav ul li a:hover, #subnavigation ul li a:hover { 179 text-decoration: none; 180 background-color: #B4B4CB; 181 border-bottom: solid 1px black; 182} 183div#nav ul li.CurrentSection a { 184 position: relative; 185 top: 1px; 186 border: solid 1px #669; 187 border-bottom-style: none; 188 background-color: #FAFAFF; 189} 190#subnavigation ul li.CurrentSection a { 191 background-color: #FAFAFF; 192} 193 194/* Alphabet Navigation 195----------------------------------------------------- */ 196div#alphanav { 197 background-color: #E0E0E9; 198} 199div#alphanav ul { 200 list-style: none; 201 border-width: 2px 0px 4px 0px; 202 border-style: solid; 203 border-color: black; 204 margin: 0px; 205 padding-left: 15px; 206 /* float container stretch, see www.quirksmode.org/css/clearing.html */ 207 overflow: hidden; 208} 209div#alphanav ul li { 210 float: left; 211 font-size: larger; 212 font-weight: bold; 213} 214div#alphanav ul li:after { 215 content: " |"; 216} 217div#alphanav ul li a { 218 display: block; 219 padding: 4px 8px; 220 line-height: 100%; 221 float: left; 222} 223div#alphanav ul li a:hover { 224 text-decoration: none; 225 background-color: black; 226 color: #FAFAFF; 227} 228 229/* Responsive navigation */ 230a.navIcon { 231 display: none; 232} 233 234div#header::after { 235 content: ""; 236 clear: both; 237 display: table; 238} 239 240div#nav::after { 241 content: ""; 242 clear: both; 243 display: table; 244} 245 246@media only screen and (max-width: 1080px) { 247 248 /* Use less & all realestate on mobiles. */ 249 div#outerwrapper { 250 margin: 5px auto; 251 width: 100%; 252 } 253 254 .nav { 255 background: none; /* Works in IE too. */ 256/* 257 width: 200px; 258 position: absolute; 259 z-index: 10; 260*/ 261 } 262 263 /* Undo some of the #nav styles - to enable the class .nav */ 264 .nav ul, #subnavigation ul { 265 list-style: none; 266 min-width: unset; 267 width: 200px; 268 height: 32px; 269 margin: 0; 270 padding: 0; 271 } 272 .nav ul li, #subnavigation ul li { 273 float: unset; 274 display: unset 275 } 276 277 /* Start with hidden menu options */ 278 /* .nav li:not(:first-child) {display: none;} */ 279 .nav li {display: none;} 280 .nav ul {display: none;} 281 282 a.navIcon { 283 font-size:1.3em; 284 display: block; 285 margin: 0.1em 0.4em 0.4em 0.4em; 286 float: left; 287 } 288 289 .nav.responsive {position: absolute; display: block; z-index: 100;} 290 .nav.responsive a.icon { 291 position: absolute; 292 right: 0; 293 top: 0; 294 margin-right: 10px; 295 } 296 .nav.responsive li { 297 /* float: left; */ 298 display: block; 299 text-align: left; 300 background-color: #669; 301 /* required by IE */ 302 float: left; 303 clear: both; 304 width: 200px; 305 } 306 307 div#nav ul, #subnavigation ul { 308 padding-left: 0px; 309 } 310 311 .content { 312 padding: 0em 0.5em; 313 } 314} 315 316/* Main Table 317----------------------------------------------------- */ 318table { 319 border-collapse: collapse; 320 width: 100%; 321} 322div#summaryarea > table.infolist, 323div#parents > table.infolist, 324h3 + table.infolist { 325 width: auto; 326} 327table tr th { 328 text-align: left; 329 background-color: #E0E0E9; 330 border-top: solid 1px #669; 331 border-bottom: solid 1px #669; 332} 333table tr th:first-child { 334 border-left: solid 1px #669; 335} 336table tr th:last-child { 337 border-right: solid 1px #669; 338} 339table.primobjlist tr th { 340 background-color: #B4B4CB; 341} 342table td, table th { 343 vertical-align: top; 344 padding-left: 1ex; 345} 346table.primobjlist td { 347 vertical-align: middle; 348} 349table td:first-child, table th:first-child { 350 padding-left: 15px; 351} 352table.primobjlist tr a { 353 display: block; /* make whole td clickable */ 354} 355table.primobjlist tr.BeginLetter td, table.primobjlist tr.BeginSurname td { 356 border-top: solid 1px #B4B4CB; 357} 358td.ColumnLetter, td.ColumnRowLabel { 359 font-weight: bold; 360} 361td.ColumnBirth, td.ColumnDeath, td.ColumnPartner, td.ColumnParents { 362 font-size: 90%; 363} 364table.infolist tr td ol { 365 margin: 0px; 366} 367#summaryarea table.infolist td.ColumnAttribute, 368#parents table.infolist td.ColumnAttribute, 369#families table.infolist td.ColumnType, 370#families table.infolist td.ColumnAttribute { 371 color: #2E2E61; 372} 373/* div summaryarea is missing for events, sources and repos! */ 374h3 + table.infolist td.ColumnAttribute { 375 color: #2E2E61; 376} 377table.primobjlist td.ColumnParents span.mother:before { 378 content: "+ "; 379} 380 381/* Surnames 382----------------------------------------------------- */ 383table#SortByName td.ColumnSurname, table#SortByName th.ColumnSurname, 384table#SortByCount td.ColumnQuantity, table#SortByCount th.ColumnQuantity { 385 background-color: #E0E0E9; 386} 387table#SortByName td.ColumnSurname a[href]:hover { 388 background-color: #B4B4CB; 389} 390/* make the whole cell light up on hover not just the a. */ 391table#SortByName td.ColumnSurname, 392table#SortByName th.ColumnSurname, 393table#SortByName th.ColumnQuantity { 394 padding-left: 0px; 395} 396table#SortByName td.ColumnSurname > a, 397table#SortByName th.ColumnSurname > a, 398table#SortByName th.ColumnQuantity > a { 399 padding-left: 1ex; 400} 401table#SortByName thead th.ColumnSurname a:after, 402table#SortByCount thead th.ColumnQuantity a:after { 403 content: " \2193"; 404} 405table.surname td.ColumnName { 406 background-color: #E0E0E9; 407} 408table.surname td.ColumnName a[href]:hover { 409 background-color: #B4B4CB; 410} 411/* make the whole cell light up on hover not just the a. */ 412table.surname td.ColumnName { 413 padding-left: 0px; 414} 415table.surname td.ColumnName > a { 416 padding-left: 15px; 417} 418 419/* Individuals 420----------------------------------------------------- */ 421table.IndividualList td.ColumnSurname { 422 background-color: #E0E0E9; 423} 424 425/* Places 426----------------------------------------------------- */ 427#Places table.infolist td.ColumnName { 428 background-color: #E0E0E9; 429} 430#Places table.infolist td.ColumnName a[href]:hover { 431 background-color: #B4B4CB; 432} 433/* make the whole cell light up on hover not just the a. */ 434#Places table.infolist td.ColumnName { 435 padding-left: 0px; 436} 437#Places table.infolist td.ColumnName > a { 438 padding-left: 1ex; 439} 440 441/* Events 442----------------------------------------------------- */ 443#EventList table.infolist tr.BeginType td { 444 border-top:dashed 1px #B4B4CB; 445} 446#EventList table.infolist tr.BeginLetter td { 447 border-top:solid 1px #B4B4CB; 448} 449#EventList table.infolist td.ColumnType { 450 background-color: #E0E0E9; 451} 452#EventList td.ColumnPerson a { 453 display: inline; 454} 455#EventList td.ColumnPerson span.person:after, 456#EventList td.ColumnPerson span.father:after, 457#EventList td.ColumnPerson span.mother:after, 458#EventDetail td.ColumnPerson span.person:after, 459#EventDetail td.ColumnPerson span.father:after, 460#EventDetail td.ColumnPerson span.mother:after { 461 content: ", "; 462} 463#EventList td.ColumnPerson span.fatherNmother:after, 464#EventDetail td.ColumnPerson span.fatherNmother:after { 465 content: " + "; 466} 467#EventList td.ColumnPerson span.person:last-child:after, 468#EventList td.ColumnPerson span.father:last-child:after, 469#EventList td.ColumnPerson span.mother:last-child:after, 470#EventDetail td.ColumnPerson span.person:last-child:after, 471#EventDetail td.ColumnPerson span.father:last-child:after, 472#EventDetail td.ColumnPerson span.mother:last-child:after { 473 content: ""; 474} 475 476table.eventlist tbody tr td.ColumnSources { 477 width: 5%; 478} 479 480/* Gallery 481----------------------------------------------------- */ 482#GalleryNav { 483 text-align: center; 484 margin: 2em 0px; 485} 486#GalleryNav a { 487 font-weight: bold; 488 background-color: #E0E0E9; 489 border: solid 1px #669; 490 margin: 1em; 491} 492#GalleryNav a:hover { 493 background-color: #B4B4CB; 494} 495#GalleryNav a#Previous { 496 padding: .4em .7em .3em .7em; 497} 498#GalleryNav a#Next { 499 padding: .4em 1.9em .3em 1.9em; 500} 501#GalleryCurrent { 502 font-size: larger; 503} 504#GalleryTotal { 505 font-weight: normal; 506} 507#GalleryDisplay { 508 margin: 0px auto; 509 position: relative; 510} 511#GalleryDisplay img { 512 margin: 0px auto; 513 display: block; 514 border: solid 1px #669; 515 height: auto; 516} 517 518@media only screen and (max-width: 1600px) { 519 #GalleryDisplay img { 520 max-width: 100%; 521 } 522} 523 524#GalleryDetail h3 { 525 text-align: center; 526} 527 528/* Sources 529------------------------------------------------------ */ 530div#SourceDetail { 531 margin: 0 auto; 532} 533 534/* Contact 535----------------------------------------------------- */ 536#Contact { 537 overflow: hidden; 538} 539#Contact #summaryarea { 540 background-color: #E0E0E9; 541 border: solid 1px #669; 542} 543#Contact #summaryarea #GalleryDisplay img { 544 float: right; 545 border: solid 1px #669; 546} 547#Contact #researcher, #Contact #researcher h3 { 548 font-size: larger; 549 padding-left: 0px; 550} 551#Contact #streetaddress, #Contact #locality, #Contact #email { 552 display: block; 553} 554#Contact #locality, #Contact #city, #Contact #state, #Contact #postalcode, 555#Contact #country { 556 white-space: nowrap; 557} 558#Contact #city:after { 559 content: ","; 560} 561 562/* Download 563----------------------------------------------------- */ 564#Download table.download a { 565 display: block; 566} 567 568/* Subsection 569----------------------------------------------------- */ 570#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay { 571 float: right; 572 margin: 0; 573 border: 0px; 574} 575#Home #GalleryDisplay img, #Introduction #GalleryDisplay img, 576 #Contact #GalleryDisplay img { 577 display: block; 578 max-width: 950px; 579 height: auto; 580 float: right; 581} 582@media only screen and (max-width: 1080px) { 583 #Home #GalleryDisplay img, #Introduction #GalleryDisplay img, 584 #Contact #GalleryDisplay img { 585 margin: 0 auto; 586 max-width: 100%; 587 } 588} 589#Home p, #Introduction p { 590 padding-left: 15px; 591} 592.subsection { 593 clear: both; 594 overflow: hidden; 595} 596.subsection p { 597 margin: 0px; 598} 599 600/* Subsection : Families 601----------------------------------------------------- */ 602div#families table.fixed_subtables table.eventlist { 603 table-layout: fixed; 604} 605div#families table.fixed_subtables table.eventlist th:first-child { 606 width: 9em; 607} 608div#families table.fixed_subtables table.eventlist th:last-child { 609 width: 5em; 610} 611div#families table.attrlist td.ColumnType { 612 color: black; 613} 614 615/* Subsection : Gallery 616----------------------------------------------------- */ 617#gallery { 618 background-color: green; 619} 620#indivgallery { 621 background-color: white; 622} 623#gallery .gallerycell { 624 float: left; 625 width: 130px; 626 height: 150px; 627 text-align: center; 628 margin: 0; 629 background-color: white; 630 border-top: solid 1px #999; 631 border-right: solid 1px #999; 632} 633#gallery .thumbnail { 634 font-size: smaller; 635 margin: 3em auto; 636} 637#indivgallery .thumbnail { 638 float: left; 639 width: 130px; 640 font-size: smaller; 641 text-align: center; 642 margin: 0.8em 0.5em; 643 background-color: white; 644} 645#indivgallery h4 + .thumbnail { 646 margin-left: 15px; 647 /* Problem: if there are more thumnails then fit on a single row, the 648 * first thumnail on each next row should also have a margin-left 649 * of 15 px. */ 650} 651#gallery div.indexno { 652 float: right; 653 width: 1.8em; 654 font-size: large; 655 text-align: center; 656 background-color: #CCC; 657 color: #555; 658 margin: 0; 659} 660#indivgallery div.date { 661 float: right; 662 width: 1.8em; 663 font-size: large; 664 text-align: center; 665 background-color: #CCC; 666 color: #555; 667} 668#indivgallery .thumbnail ul { 669 font-size: smaller; 670 list-style: none; 671 padding: 0px; 672} 673#indivgallery .thumbnail ul li:first-child { 674 border-style: none; 675} 676#indivgallery .thumbnail ul li { 677 border-top: dashed 1px #CCC; 678 border-top-style: dashed; 679 padding-top: 0.5em; 680 padding-bottom: 0.5em; 681} 682#gallery img { 683 border: solid 1px #999; 684} 685#indivgallery img { 686 border: solid 1px #669; 687} 688#indivgallery span { 689/* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery 690 display: none; */ 691} 692div.snapshot div.thumbnail { 693 text-align: center; 694} 695 696/* Subsection : Narrative 697----------------------------------------------------- */ 698h4 + div.grampsstylednote, a.familymap { 699 margin: 1em 15px; 700} 701i + div.grampsstylednote p { 702 margin: 0 0 0.3em 0; 703} 704div.grampsstylednote p { 705 margin-bottom: 0.5em; 706} 707 708/* Subsection : Family Map 709----------------------------------------------------- */ 710a.familymap { 711 display: block; 712} 713 714/* Subsection : Source References 715----------------------------------------------------- */ 716#sourcerefs ol li ol { 717 list-style-type: lower-alpha; 718} 719 720/* Subsection : Pedigree 721----------------------------------------------------- */ 722.pedigreegen { 723 list-style-type: none; 724 padding-left: 15px; 725} 726.pedigreegen li ol { 727 list-style-type: none; 728} 729.pedigreegen li ol li ol { 730 list-style-type: decimal; 731} 732.pedigreegen ol.spouselist { 733 list-style-type: none; 734} 735.pedigreegen ol.spouselist li.spouse ol { 736 list-style-type: decimal; 737} 738.spouse:before { 739 content: "+ "; 740} 741.thisperson { 742 font-weight: bold; 743} 744.thisperson > ol { 745 font-weight: normal; 746} 747 748/* Footer 749----------------------------------------------------- */ 750#footer { 751 clear: both; 752 padding-top: 1em; 753 background-color: #B4B4CB; 754 border-top: solid 1px #2E2E61; 755} 756#footer > * { 757 background-color: #E0E0E9; 758 font-size: 80%; 759} 760#footer p#createdate { 761 float: left; 762 width: 50%; 763 text-align: left; 764 padding-left: 15px; 765 margin-top: 1em; 766} 767#footer p#copyright { 768 float: right; 769 width: 40%; 770 text-align: right; 771 padding-right: 15px; 772} 773#footer a[href]:hover { 774 background-color: #B4B4CB; 775} 776 777/* Overwritten 778----------------------------------------------------- */ 779body#FamilyMap { 780 background-color: #E0E0E9 ! important; 781} 782 783/* Calendar Styles 784===================================================== */ 785table.calendar { 786 table-layout: fixed; 787 empty-cells: show; 788} 789.calendar thead th { 790 text-align: center; 791 border-top-style: none; 792} 793.calendar thead th.monthName { 794 font-size: xx-large; 795 font-weight: normal; 796 background-color: #FAFAFF; 797 border-bottom-style: none; 798 padding-top: 1em; 799} 800.calendar thead th abbr { 801 border-bottom-style: none; 802} 803#CreatorInfo { 804 float: right; 805 margin: -1em 15px 0px 0px; 806 font-weight: bold; 807 color: #669; 808} 809#CreatorInfo a[href]:hover { 810 background-color: #B4B4CB; 811} 812.calendar tfoot tr td { 813 border-top: solid 4px #669; 814 vertical-align: middle; 815} 816 817/* Calendar : Date Numeral */ 818.calendar div.date { 819 float: right; 820 width: 1.8em; 821 font-size: large; 822 text-align: center; 823 background-color: #B4B4CB; 824 color: #2E2E61; 825} 826 827/* Calendar : Date Container */ 828.calendar td { 829 padding: 0px 0px 0px 1ex; 830 border-width: 1px 0px 0px 1px; 831 border-style: solid; 832 border-color: #B4B4CB; 833 background-color: #FAFAFF; 834} 835.calendar td:first-child { 836 border-left-style: none; 837 padding: 0px 0px 0px 1ex; 838} 839.calendar tbody tr:first-child td { 840 border-top-style: none; 841} 842 843/* Calendar : Date Detail */ 844.calendar td ul { 845 font-size: smaller; 846 list-style: none; 847 padding: 0px; 848} 849.calendar td ul li { 850 border-top: dashed 1px #B4B4CB; 851 padding-top: 0.5em; 852 padding-bottom: 0.5em; 853} 854.calendar td ul li:first-child { 855 border-style: none; 856} 857.calendar td ul a[href]:hover { 858 background-color: #B4B4CB; 859} 860 861/* Calendar : Birthday, Anniversary, Highlight */ 862.calendar td ul li em { 863 font-style: normal; 864 color: #669; 865} 866.calendar td.highlight { 867 background-color: #E0E0E9; 868} 869.calendar td.highlight div.date { 870 color: black; 871 background-color: #B4B4CB; 872} 873 874/* Calendar : Previous-Next Month */ 875.calendar td.previous, 876.calendar td.next, 877.calendar td.previous div.date, 878.calendar td.next div.date { 879 color: #B4B4CB; 880 background-color: #FAFAFF; 881} 882 883/* Calendar : Full Year */ 884body#fullyearlinked div.content { 885 overflow: hidden; 886} 887body#fullyearlinked table.calendar { 888 float: left; 889 width: 33.3%; 890 height: 18em; 891 border: solid 1px black; 892} 893body#fullyearlinked table.calendar thead th { 894 height: 2em; 895} 896body#fullyearlinked table.calendar thead th.monthName { 897 font-size: large; 898 padding: 2px 0px; 899} 900body#fullyearlinked table.calendar tbody td { 901 height: 3em; 902} 903body#OneDay div.content { 904 overflow: hidden; 905} 906