/* ---------------------------------------------------------------------------- GRAMPS Cascading Style Sheet Style Name: Mainz Style Author: Jason Simanek (2008) ---------------------------------------------------------------------------- This website was created with GRAMPS ---------------------------------------------------------------------------- GRAMPS is a Free Software Project for Genealogy, offering a professional genealogy program, and a wiki open to all. It is a community project, created, developed and governed by genealogists. Go to to learn more! License ---------------------------------------------------------------------------- Copyright 2008 Jason M. Simanek Copyright 2009 Stephane Charette Copyright (C) 2008-2011 Rob G. Healey Copyright 2011 Michiel D. Nauta Copyright 2018 Theo van Rijn Copyright (C) 2019 Serge Noiraud This file is part of the GRAMPS program. GRAMPS is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 2 of the License. GRAMPS is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with GRAMPS. If not, see . ---------------------------------------------------------------------------- Color Palette ---------------------------------------------------------------------------- black #000 brown #7D5925 brown light #D8C19F green #767D25 yellow #FFF2C6 yellow light #FFFFE7 ---------------------------------------------------------------------------- Style Images ---------------------------------------------------------------------------- Body images/Web_Mainz_Bkgd.png Header images/Web_Mainz_Header.png Middle images/Web_Mainz_Mid.png Middle Light images/Web_Mainz_MidLight.png ---------------------------------------------------------------------------- NarrativeWeb Styles ---------------------------------------------------------------------------- General Elements -----------------------------------------------------------------*/ body { font-family: Georgia, serif; font-size: 100%; color: #7D5925; background: url(../images/Web_Mainz_Bkgd.png) black repeat; } body > div { margin: 0px auto; overflow: hidden; } #outerwrapper { margin: 5px auto; width: 98%; } #outerwrapper > div { clear: both; } .content { padding: 1.5em 1.5em; overflow: auto; background: url(../images/Web_Mainz_Mid.png) #FFF2C6 repeat; } #ThumbnailPreview div.snapshot { float: right; margin: 0; } div.snapshot div.thumbnail { text-align: center; } div.snapshot a { display: inline; } /* Less whitespace on smaller real estate. */ @media only screen and (max-width: 1080px) { .content { padding: 0em 0.5em; } body#fullyearlinked table.calendar { float: none; width: 100%; } } @media only screen and (width > 1080px) { body#fullyearlinked table.calendar { float: left; width: 33.3%; } } /* General Text -----------------------------------------------------------------*/ h1 { font-weight: normal; font-style: italic; margin-left: 2em; } h2 { display:block; margin:0; padding:0; text-align: center; } h3 { font-size: xx-large; font-weight: normal; font-style: italic; color: #767D25; text-align: center; border-bottom: double 4px #7D5925; padding-bottom: 1ex; margin: 0.5em 0px 0.5em 0px; } h4 { font-size: x-large; font-weight: normal; font-style: italic; color: black; text-align: center; border-bottom: dashed 1px #7D5925; padding-bottom: 0.5ex; margin: 0.5em 0px 0.5em 0px; } a { color: #7D5925; text-decoration: none; word-wrap: break-word; } a[href]:hover, a[href]:active { background-color: #D8C19F; font-style: italic; } .grampsid { font-family: monospace; font-size: smaller; } /* Header -----------------------------------------------------------------*/ #header { padding-top: 5em; background: url(../images/Web_Mainz_Header.png) repeat-x top left; } /* Navigation -----------------------------------------------------------------*/ div#nav, #subnavigation { background: url(../images/Web_Mainz_Mid.png) repeat-x top left; position: relative; } div#nav ul, #subnavigation ul { list-style-type: none; margin: 0px; padding-left: 0px; } div#nav ul li, #subnavigation ul li { float: left; } div#nav ul li a, #subnavigation ul li a { display: run-in; padding: 0.4em 0.8em 0.3em 0.8em; font-size: smaller; font-family: sans-serif; } div#nav ul li a:hover, #subnavigation ul li a:hover { text-decoration: none; background-color: #FFFFE7; } div#nav ul li.CurrentSection a, #subnavigation ul li.CurrentSection a { font-weight: bold; font-style: italic; background-image: url(../images/Web_Mainz_Mid.png); border-style: dashed; border-width: 1px 1px 0px 1px; border-color: #7D5925; } #subnavigation ul li.CurrentSection a { border-width: 0px 1px 1px 1px; } div#nav li.lang { font-size: smaller; padding-top: 2px; padding-bottom: 1px; } div#nav li.lang:hover > ul { visibility: visible; opacity: 1; } div#nav ul.lang { position: absolute; visibility: hidden; opacity: 0; z-index: 999; background-color: #D8C19F; top: -1em; font-family: sans-serif; } div#nav ul.lang:hover { float: initial; } div#nav ul.lang li { float: none; font-size: larger; } /* Alphabet Navigation -----------------------------------------------------------------*/ div#alphanav ul { list-style: none; border-width: 2px 0px 4px 0px; border-style: solid; border-color: black; padding-left: 2em; /* float container stretch, see www.quirksmode.org/css/clearing.html */ overflow: hidden; } div#alphanav ul li { float: left; font-size: larger; font-family: sans-serif; font-weight: bold; } div#alphanav ul li:after { content: " |"; } div#alphanav ul li a { display: block; padding: 4px 8px; line-height: 100%; float: left; color: black; } div#alphanav ul li a:hover { text-decoration: none; background-color: black; color: white; } /* Responsive navigation */ button.navIcon { display: none; } div#header::after { content: ""; clear: both; display: table; } div#nav::after { content: ""; clear: both; display: table; } @media only screen and (max-width: 1080px) { /* Use less & all realestate on mobiles. */ div#outerwrapper { margin: 5px auto; width: 100%; } .nav { background: none; /* Works in IE too. */ } /* Undo some of the #nav styles - to enable the class .nav */ .nav ul, #subnavigation ul { list-style: none; min-width: unset; width: 200px; height: 32px; margin: 0; padding: 0; } .nav ul li, #subnavigation ul li { float: unset; display: unset } /* Start with hidden menu options */ /* .nav li:not(:first-child) {display: none;} */ .nav li {display: none;} .nav ul {display: none;} button.navIcon { display: block; float: left; font-size:2.9em; line-height: 80px; border: 0px; color: #7D5925; background: url(../images/Web_Mainz_Mid.png) #FFF2C6 repeat; } .nav.responsive {position: relative; display: block; z-index: 100;} .nav.responsive a.icon { position: absolute; right: 0; top: 0; margin-right: 10px; } .nav.responsive li { display: block; height:1.4em; text-align: left; background-color: #D8C19F; /* required by IE */ float: left; clear: both; width: 200px; } div#nav ul, #subnavigation ul { padding-left: 0px; position: absolute; } .content { padding: 0em 0.5em; } .lang { position: relative; } .lang > .lang { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; } .lang:hover > .lang { display: block; } } /* Main Table -----------------------------------------------------------------*/ table { border-collapse: collapse; width: 100%; } div#summaryarea > table.infolist, div#parents > table.infolist, h3 + table.infolist { width: auto; } table th { text-align: left; margin: 0px; border-bottom: double 4px #7D5925; padding: .1em 10px; } table td { vertical-align: top; padding: .1em 10px; } table.primobjlist td { vertical-align: middle; } table.primobjlist tr a { display: block; /* make whole td clickable */ } table.primobjlist tr.BeginLetter td, table.primobjlist tr.BeginSurname td { border-top: dashed 1px #D8C19F; } td.ColumnLetter, td.ColumnRowLabel { font-weight: bold; } td.ColumnBirth, td.ColumnDeath, td.ColumnPartner, td.ColumnParents { font-size: 90%; } table.relationships td.ColumnPartner { font-size: 100%; } table.infolist tr td ol { margin: 0px; } #summaryarea table.infolist td.ColumnAttribute, #parents table.infolist td.ColumnAttribute, #families table.infolist td.ColumnType, #families table.infolist td.ColumnAttribute { color: #767D25; } /* div summaryarea is missing for events, sources and repos! */ h3 + table.infolist td.ColumnAttribute { color: #767D25; } table.primobjlist td.ColumnParents span.father, table.primobjlist td.ColumnParents span.mother { display: block; } table.primobjlist td.ColumnParents span.mother:before, table.primobjlist td.ColumnPerson span.mother:before { content: "+ "; } /* Surnames -----------------------------------------------------------------*/ table#SortByName thead th.ColumnSurname a:after, table#SortByCount thead th.ColumnQuantity a:after { content: " \2193"; } table#SortByName tr:hover td.ColumnSurname, table#SortByCount tr:hover td.ColumnQuantity { background-color: #D8C19F; } table#SortByName tbody tr:hover, table#SortByCount tbody tr:hover, table#SortByName tr:hover td.ColumnQuantity, table#SortByCount tr:hover td.ColumnSurname { background-color: #D8C19F; } table.surname tbody tr:hover, table.surname tr:hover td.ColumnName { background-color: #D8C19F; } #SurnameDetail h3 { border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; } /* Individuals ----------------------------------------------------- */ #parents table.infolist tbody tr:hover, table.IndividualList tbody tr:hover, table.IndividualList tr:hover td.ColumnSurname { background-color: #D8C19F; } /* Places ----------------------------------------------------- */ #Places table.infolist tbody tr:hover, #Places table.infolist tr:hover td.ColumnName { background-color: #D8C19F; } /* Events -----------------------------------------------------------------*/ #EventList tr.BeginType td { border-top: dashed 1px #D8C19F; } #EventList tr.BeginLetter td { border-top: solid 1px #D8C19F; } /* Events with multiple participants should have a comma seperated list of names*/ #EventList td.ColumnPerson a { display: inline; } #EventList table.infolist tbody tr:hover, #EventList table.infolist tr:hover td.ColumnType { background-color: #D8C19F; } /* Family events, put mother on next line */ #EventList td.ColumnPerson span.father, #EventList td.ColumnPerson span.mother, #EventDetail td.ColumnPerson span.father, #EventDetail td.ColumnPerson span.mother { display: block; } #EventList td.ColumnPerson span.person:after, #EventList td.ColumnPerson span.father:after, #EventList td.ColumnPerson span.mother:after, #EventDetail td.ColumnPerson span.person:after, #EventDetail td.ColumnPerson span.father:after, #EventDetail td.ColumnPerson span.mother:after { content: ", "; } #EventList td.ColumnPerson span.person:last-child:after, #EventList td.ColumnPerson span.father:last-child:after, #EventList td.ColumnPerson span.mother:last-child:after, #EventDetail td.ColumnPerson span.person:last-child:after, #EventDetail td.ColumnPerson span.father:last-child:after, #EventDetail td.ColumnPerson span.mother:last-child:after { content: ""; } #attributes table.infolist td.ColumnType { width: 10%; padding-left: 15px; } #attributes table.infolist td.ColumnValue { width: 15%; } #attributes table.infolist td.ColumnSources { width: 5%; padding-left: 5px; } #WebLinks table.infolist td.ColumnType { width: 10%; padding-left: 15px; } #events table.eventlist td.ColumnDate { width: 15%; padding-left: 10px; } #families table.eventlist th.ColumnDate { width: 15%; padding-left: 25px; } #families table.eventlist td.ColumnDate { width: 15%; padding-left: 20px; } #families table.eventlist tbody tr td:first-child, #families table.eventlist thead tr th:first-child { width: 10%; padding-left: 0px; } #families table.eventlist tbody tr td.ColumnDate, #families table.eventlist tbody tr td.ColumnNotes { padding-left: 25px; } #IndividualDetail div table.eventlist td.ColumnEvent { padding-right: 0px; width: 8%; } #IndividualDetail div table.eventlist td.ColumnSources { width: 5%; } #IndividualDetail div table.eventlist td.ColumnDate { padding-right: 0px; width: 15%; } #IndividualDetail div table.eventlist td.ColumnEvent, #IndividualDetail div table.eventlist td.ColumnDate, #IndividualDetail div table.eventlist td.ColumnPlace { font-weight: bold; } /* Gallery -----------------------------------------------------------------*/ #GalleryNav { text-align: center; margin: 1.4em 0px; } #GalleryNav a { font-weight: bold; font-style: italic; color: #FFF2C6; background: url(../images/Web_Mainz_Bkgd.png) #7D5925 repeat; border: outset 3px black; } #GalleryNav a:hover { border-color: #7D5925; } #GalleryNav a:active { border-style: solid; } #GalleryNav a#Previous { padding: .4em .7em .3em .7em; } #GalleryNav a#Next { padding: .4em 1.9em .3em 1.9em; } #GalleryPages { margin: 0 1em; } #GalleryCurrent { font-size: x-large; font-weight: normal; font-style: italic; } #GalleryTotal { font-weight: normal; } #GalleryDisplay { margin: 0px auto; position: relative; } #GalleryDisplay img { margin: 10px auto; display:block; border: solid 1px #7D5925; height: auto; } @media only screen and (max-width: 1600px) { #GalleryDisplay img { max-width: 100%; } } /* Sources ------------------------------------------------------ */ div#SourceDetail { margin: 0 auto; } #Sources table.infolist tbody tr:hover, #Sources table.infolist tr:hover td.ColumnType { background-color: #D8C19F; } /* Contact -----------------------------------------------------------------*/ #Contact h3 { border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; } #Contact #researcher { text-align: center; } #Contact #researcher span { font-size: larger; } #Contact #streetaddress, #Contact #locality, #Contact #email { display: block; } #Contact #city:after { content: ","; } /* Download -----------------------------------------------------------------*/ #Download table.download a { display: block; } /* SubSection -----------------------------------------------------------------*/ #Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay { float: right; margin-left: 10px; margin-right: 10px; margin: 10px auto; } #Home #GalleryDisplay img, #Introduction #GalleryDisplay img, #Contact #GalleryDisplay img { display: block; max-width: 950px; width: 100%; height: auto; float: right; } @media only screen and (max-width: 1080px) { #Home #GalleryDisplay img, #Introduction #GalleryDisplay img, #Contact #GalleryDisplay img { margin: 0 auto; max-width: 100%; } } #Home a, #Introduction a, #Contact a { color: black; } .subsection { clear: both; overflow-x: auto; } .subsection p { margin: 0px; } /* SubSection : Families -----------------------------------------------------------------*/ #families table.infolist td.ColumnValue.Child table.infolist tbody tr:hover, table.relationships tr:hover td { background-color: #D8C19F; } div.content table.tags { text-align: left; width: auto; } div#families table.fixed_subtables table.eventlist { table-layout: fixed; } div#families table.fixed_subtables table.eventlist th:first-child { width: 9em; } div#families table.fixed_subtables table.eventlist th:last-child { width: 5em; } div#families .infolist h4 { text-align: left; } /* SubSection : Gallery -----------------------------------------------------------------*/ #gallery { background-color: green; } #gallery .gallerycell { float: left; width: 130px; height: 150px; text-align: center; margin: 0; border-top: solid 1px #999; border-right: solid 1px #999; } #gallery .thumbnail { font-size: smaller; margin: 3em auto; } #indivgallery { /* float container stretch, see www.quirksmode.org/css/clearing.html */ overflow: hidden; } div#indivgallery div.thumbnail a, div#gallerycell div.thumbnail a { color: #7D5925; text-decoration: none; word-wrap: break-word; width: 160px; display: block; } #indivgallery .thumbnail { float: left; width: 160px; height: 220px; font-size: smaller; text-align: center; margin: 0.5em; } #indivgallery img { border: solid 1px #7D5925; } #indivgallery span { /* ## remove this line and the comment markers from the line below to hide the description in Individual Gallery display: none; */ } #gallery div.indexno { float: right; font-size: large; text-align: center; background-color: #CCC; color: #555; margin: 0; } #indivgallery div.date { float: right; width: 1.8em; font-size: large; text-align: center; background-color: #CCC; color: #555; } #indivgallery .thumbnail ul { font-size: smaller; list-style: none; padding: 0px; } #indivgallery .thumbnail ul li:first-child { border-style: none; } #indivgallery .thumbnail ul li { border-top: dashed 1px #CCC; border-top-style: dashed; padding-top: 0.5em; padding-bottom: 0.5em; } #gallery img { border: solid 1px #999; } div.snapshot div.thumbnail { text-align: center; } /* SubSection : Narrative -----------------------------------------------------------------*/ h4 + div.grampsstylednote, a.familymap { margin-left: 10px; margin-right: 10px; } a.family_map { margin-left: 10px; } i.NoteType { font-weight: bold; font-size: .8em; } i + div.grampsstylednote p { margin: 0 0 0.3em 0; } div.grampsstylednote p { padding-bottom: 0.6em; } div.grampsstylednote a { text-decoration: underline; font-weight: bold; color: #7D5925; } div.grampsstylednote a:visited { color: red; } /* Subsection : References ----------------------------------------------------- */ #references ol { margin-left: 2em; } /* SubSection : Source References -----------------------------------------------------------------*/ #sourcerefs ol#srcr { counter-reset: itema; list-style-type: none; display: block; margin-top: .1em; } #sourcerefs ol#citr { counter-reset: itemb; list-style-type: none; } #sourcerefs ol#srcr > li::before { content: counter(itema); } #sourcerefs ol#citr > li::before { content: counter(itema)counter(itemb, lower-alpha); } #sourcerefs ol#srcr > li { counter-increment: itema; margin-top: .1em; } #sourcerefs ol#citr > li { counter-increment: itemb; margin-top: .1em; } #sourcerefs ol#citr ul { list-style: none; display: inline-block; vertical-align: top; } /* #sourcerefs a { color: #767D25; } #sourcerefs a:visited { color: red; } */ /* SubSection : Pedigree -----------------------------------------------------------------*/ .pedigreegen { list-style-type: none; padding-left: 10px; } .pedigreegen li ol { list-style-type: none; } .pedigreegen li ol li ol { list-style-type: decimal; } .pedigreegen ol.spouselist { list-style-type: none; } .pedigreegen ol.spouselist li.spouse ol { list-style-type: decimal; } .spouse:before { content: "+ "; } .thisperson { font-weight: bold; } .thisperson > ol { font-weight: normal; } /* Footer -----------------------------------------------------------------*/ #footer { clear: both; overflow: hidden; width: 100%; background: url(../images/Web_Mainz_MidLight.png) #FFF2C6; font-family: sans-serif; } #footer p#createdate { float: left; width: 50%; text-align: left; margin-left: 10px; } #footer p#copyright { float: right; width: 40%; text-align: right; } #footer p#copyright img { float: right; margin-right: 10px; margin-bottom: 10px; vertical-align: middle; } #footer > * { font-size: 80%; background: url(../images/Web_Mainz_MidLight.png) #FFF2C6; } /* Updates ----------------------------------------------------- */ #Updates table.list td.date { width: 20%; } /* Overwritten -----------------------------------------------------------------*/ button#drop { font-style: italic; color: #FFF2C6; background: url(../images/Web_Mainz_Bkgd.png) #7D5925 repeat; border: outset 3px black !important; } div#map_canvas { border-color: #7D5925 !important; } /* Calendar Styles =================================================================*/ table.calendar { table-layout: fixed; empty-cells: show; margin: 0px auto; background: url(../images/Web_Mainz_Mid.png) #FFF2C6 repeat; } .calendar thead th { font-size: large; font-weight: normal; font-style: italic; text-align: center; } .calendar thead th.monthName { font-size: xx-large; color: #767D25; vertical-align: top; height: 2em; border-bottom-style: none; } .calendar thead th abbr { border-bottom-style: none; } .calendar tfoot td { border-top: double 4px #7D5925; } /* Calendar : Date Numeral */ .calendar div.date { width: 1.5em; font-size: large; font-style: italic; text-align: center; margin-top: 1px; background: url(../images/Web_Mainz_MidLight.png) #FFF2C6 repeat; } /* Calendar : Date Container */ .calendar td { padding: 0px; border-width: 1px 0px 0px 1px; border-style: dashed; border-color: #7D5925; } .calendar td.weekday { background: url(../images/Web_Mainz_Mid.png) #FFF2C6 repeat; } .calendar td.weekend { background: url(../images/Web_Mainz_MidLight.png) #FFF2C6 repeat; } .calendar td:first-child { border-left-style: none; } .calendar tbody tr:first-child td { border-top-style: none; } /* Calendar : Date Detail */ .calendar td ul { font-size: smaller; list-style: none; padding: 0px; } .calendar td ul li { margin: 0 4%; border-top: dashed 1px #D8C19F; } .calendar td ul li:first-child { border-style: none; } /* Calendar : Birthday, Anniversary, Highlight */ .calendar td ul li em { font-style: normal; color: #767D25; } .calendar td ul li span.yearsmarried em { color: #767D25; } .calendar td.highlight div.date { color: #767D25; margin-top: 1px; background-image: none; background-color: #FFFFE7; } /* Calendar : Previous-Next Month */ .calendar td.previous, .calendar td.next { color: #D8C19F; background: url(../images/Web_Mainz_MidLight.png) #FFF2C6 repeat; } /* Calendar : Full Year */ body#fullyearlinked table.calendar { height: 18em; border: solid 1px #7D5925; } body#fullyearlinked table.calendar thead th { height: 2em; } body#fullyearlinked table.calendar thead th.monthName { font-size: large; } body#fullyearlinked table.calendar tbody td { height: 3em; } body#OneDay h3 { font-size: xx-large; vertical-align: top; height: 2em; text-align: center; } #WebCal table.calendar tfoot { display: none; } #WebCal table.calendar tr td { word-wrap: break-word; padding: 2px; } #WebCal .calendar tr td .empty { border: 5px solid rgba(255,255,255,.0); } #WebCal .calendar tr td .clickable { border: 5px solid rgba(255,255,255,.0); } #WebCal .calendar tr td .clickable:hover { display: block; overflow:auto; word-wrap: break-word; cursor: text; border-radius: 10px 0px 10px 10px; border: 5px solid #7D5925; padding: 0px; } body#fullyearlinked #YearGlance tbody td { vertical-align: middle; text-align: center; padding-left: 8px; } body#fullyearlinked #YearGlance tbody td .date { font-size: 30px; vertical-align: middle; text-align: center; border-radius: 45px; float: none; border: 5px solid rgba(0,0,0,.0); } body#fullyearlinked #YearGlance tbody td.previous .date:hover, body#fullyearlinked #YearGlance tbody td.next .date:hover { border-radius: 10px; border: 5px solid; } body#fullyearlinked #YearGlance tbody td div.empty .date:hover { border-radius: 10px; border: 5px solid; } body#fullyearlinked #YearGlance tbody td.highlight .date:hover { border-radius: 45px; border: 5px solid; background: url(../images/Web_Mainz_Bkgd.png) black repeat; } h4 button.icon { width: 0.9em; border: 0px solid; padding: 0; opacity: 1; transform: rotate(90deg); transition: transform 200ms ease-out 0s; background: transparent; } h4 button.icon-close { transform: rotate(90deg); transition: transform 0.2s linear; } h4 button.icon-open { transform: rotate(180deg); transition: transform 0.2s linear; } svg { fill: #7D5925; } /* Go to the top of the page */ #gototop { display: none; position: fixed; bottom: 10px; right: 20px; z-index: 999; border: none; background-color: transparent; color: black; cursor: pointer; border-radius: 4px; width: 40px; height: 40px; padding: 0px; } #gototop:hover { background-color: #FFF2C6; }