/* ************************************************************************************************** Copyright Holder and License ************************************************************************************************** GRAMPS Cascading Style Sheet Style Name: Basic - Cypress Style Author: Jason Simanek (2008) Note: Adapted from GRAMPS original Modern Style stylesheet with colors from the original 'Tranquil' stylesheet ************************************************************************************************** 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! -------------------------------------------------------------------------------------------------- Copyright 2008 Jason M. Simanek Copyright 2009 Stephane Charette Copyright (C) 2008-2011 Rob G. Healey Copyright 2011 Michiel D. Nauta 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 slate dark #454 slate #7C8F7C slate light #9DBF9D slate very light #E0E6E0 white #FFF -------------------------------------------------------------------------------------------------- Characteristic of this style is that it uses the full width of the browser window and that horizontal highlighting bars extend over the full width of the page. -------------------------------------------------------------------------------------------------- NarrativeWeb Styles ------------------------------------------------------------------------------------------------ General Elements ----------------------------------------------------- */ body { font-family: sans-serif; font-size: 90%; color: black; margin: 0px; background-color: #454; } body > div { clear: both; } .content { background-color: white; border-top: solid 1px #7C8F7C; } .content div.snapshot { float: right; margin: 2em; } .fullclear { clear: both; } /* General Text ----------------------------------------------------- */ h1 { font-size: x-large; font-weight: bold; padding-left: 15px; } h2 { display:block; margin:0; padding:0; text-align: center; } h3 { font-size: large; padding-left: 15px; } h4 { font-size: medium; background-color: #9DBF9D; padding-left: 15px; margin-bottom: 0px; border-bottom: solid 1px #7C8F7C; } p#description { padding-left: 15px; } a { color: black; text-decoration: none; } a[href]:hover, a[href]:active { background-color: #9DBF9D; } .grampsid { font-family: monospace; font-size: smaller; color: #7C8F7C; } /* Header ----------------------------------------------------- */ #header { color: #E0E6E0; } #user_header, #user_footer { padding-left: 15px; } /* Navigation ----------------------------------------------------- */ div#nav, #subnavigation { border: solid 1px #454; /* needed by IE7 */ } #subnavigation ul { overflow: hidden; } div#nav ul, #subnavigation ul { list-style: none; margin: 0px; padding-left: 15px; } #subnavigation ul { border-bottom: solid 1px #7C8F7C; } div#nav ul li, #subnavigation ul li { float: left; } div#nav ul li a, #subnavigation ul li a { display: block; font-size: smaller; font-weight: bold; color: #E0E6E0; padding: 5px; border-bottom: solid 1px #454; } div#nav ul li a:hover, #subnavigation ul li a:hover { text-decoration: none; background-color: #9DBF9D; border-bottom: solid 1px black; } div#nav ul li.CurrentSection a { position: relative; top: 1px; color: #454; border: solid 1px #7C8F7C; border-bottom-style: none; background-color: white; } #subnavigation ul li.CurrentSection a { color: #454; background-color: white; } /* Alphabet Navigation ----------------------------------------------------- */ div#alphanav { background-color: #454 } div#alphanav ul { list-style: none; border-width: 2px 0px 4px 0px; border-style: solid; border-color: black; margin: 0px; padding-left: 15px; /* float container stretch, see www.quirksmode.org/css/clearing.html */ overflow: hidden; } div#alphanav ul li { float: left; font-size: larger; 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: white; } div#alphanav ul li a:hover { text-decoration: none; background-color: black; color: white; } /* Main Table ----------------------------------------------------- */ table { border-collapse: collapse; width: 100%; } div#summaryarea > table.infolist, div#parents > table.infolist, h3 + table.infolist { width: auto; } table tr th { text-align: left; background-color: #E0E6E0; border-top: solid 1px #7C8F7C; border-bottom: solid 1px #7C8F7C; } table tr th:first-child { border-left: solid 1px #7C8F7C; } table tr th:last-child { border-right: solid 1px #7C8F7C; } table.primobjlist tr th { background-color: #9DBF9D; } table td, table th { vertical-align: top; padding-left: 1ex; } table.primobjlist td { vertical-align: middle; } table td:first-child, table th:first-child { padding-left: 15px; } table.primobjlist tr a { display: block; /* make whole td clickable */ } table.primobjlist tr.BeginLetter td, table.primobjlist tr.BeginSurname td { border-top: solid 1px #9DBF9D; } td.ColumnLetter, td.ColumnRowLabel { font-weight: bold; } /* bug #8213 testing by Stephane, 2014-12-6 */ td.ColumnEvent, td.ColumnDate { white-space: nowrap; } td.ColumnPlace, td.ColumnDescription { width: 20% } /* end of customizations by Stephane */ td.ColumnBirth, td.ColumnDeath, td.ColumnPartner, td.ColumnParents { font-size: 90%; } 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: #454; } /* div summaryarea is missing for events, sources and repos! */ h3 + table.infolist td.ColumnAttribute { color: #454; } table.primobjlist td.ColumnParents span.mother:before { content: "+ "; } /* Surnames ----------------------------------------------------- */ table#SortByName td.ColumnSurname, table#SortByName th.ColumnSurname, table#SortByCount td.ColumnQuantity, table#SortByCount th.ColumnQuantity { background-color: #E0E6E0; } /* make the whole cell light up on hover not just the a. */ table#SortByName td.ColumnSurname, table#SortByName th.ColumnSurname, table#SortByName th.ColumnQuantity { padding-left: 0px; } table#SortByName td.ColumnSurname > a, table#SortByName th.ColumnSurname > a, table#SortByName th.ColumnQuantity > a { padding-left: 1ex; } table#SortByName thead th.ColumnSurname a:after, table#SortByCount thead th.ColumnQuantity a:after { content: " \2193"; } table#SortByName th.ColumnSurname a:hover, table#SortByName th.ColumnQuantity a:hover, table#SortByCount th.ColumnSurname a:hover, table#SortByCount th.ColumnQuantity a:hover { background-color: #E0E6E0; } table.surname td.ColumnName { background-color: #E0E6E0; } /* make the whole cell light up on hover not just the a. */ table.surname td.ColumnName { padding-left: 0px; } table.surname td.ColumnName > a { padding-left: 15px; } /* Individuals ----------------------------------------------------- */ table.IndividualList td.ColumnSurname { background-color: #E0E6E0; } /* Places ----------------------------------------------------- */ #Places table.infolist td.ColumnName { background-color: #E0E6E0; } /* make the whole cell light up on hover not just the a. */ #Places table.infolist td.ColumnName { padding-left: 0px; } #Places table.infolist td.ColumnName > a { padding-left: 1ex; } /* Events ----------------------------------------------------- */ #EventList table.infolist tr.BeginType td { border-top:dashed 1px #9DBF9D; } #EventList table.infolist tr.BeginLetter td { border-top:solid 1px #9DBF9D; } #EventList table.infolist td.ColumnType { background-color: #E0E6E0; } #EventList td.ColumnPerson a { display: inline; } #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.fatherNmother:after, #EventDetail td.ColumnPerson span.fatherNmother: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: ""; } /* Gallery ----------------------------------------------------- */ #GalleryNav { text-align: center; margin: 2em 0px; } #GalleryNav a { font-weight: bold; background-color: #E0E6E0; border: solid 1px #7C8F7C; margin: 1em; } #GalleryNav a:hover { background-color: #9DBF9D; } #GalleryNav a#Previous { padding: .4em .7em .3em .7em; } #GalleryNav a#Next { padding: .4em 1.9em .3em 1.9em; } #GalleryCurrent { font-size: larger; } #GalleryTotal { font-weight: normal; } #GalleryDisplay { margin: 0px auto; position: relative; } #GalleryDisplay img { margin: 0px auto; display: block; border: solid 1px #7C8F7C; } #GalleryDetail h3 { text-align: center; } /* Sources ------------------------------------------------------ */ div#SourceDetail { margin: 0 auto; } /* Contact ----------------------------------------------------- */ #Contact { overflow: hidden; } #Contact #summaryarea { width: 40em; margin: 2em auto; padding: 3em; background-color: #E0E6E0; border: solid 1px #7C8F7C; } #Contact img { float: right; border: solid 1px #7C8F7C; } #Contact #researcher, #Contact #researcher h3 { font-size: larger; padding-left: 0px; } #Contact #streetaddress, #Contact #locality, #Contact #email { display: block; } #Contact #locality, #Contact #city, #Contact #state, #Contact #postalcode, #Contact #country { white-space: nowrap; } #Contact #city:after { content: ","; } /* Download ----------------------------------------------------- */ #Download table.download a { display: block; } /* Subsection ----------------------------------------------------- */ #Home, #Introduction { overflow: hidden; } #Home img, #Introduction img { float: right; margin: 1em; max-width: 950px; } #Home p, #Introduction p { padding-left: 15px; } .subsection { clear: both; overflow: visible; } .subsection p { margin: 0px; } /* Subsection : Families ----------------------------------------------------- */ 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 table.attrlist td.ColumnType { color: black; } /* Subsection : Gallery ----------------------------------------------------- */ #indivgallery .thumbnail { float: left; max-width: 130px; max-height: 150px; font-size: smaller; text-align: center; margin: 0.8em 0.5em; } #indivgallery h4 + .thumbnail { margin-left: 15px; /* Problem: if there are more thumnails then fit on a single row, the * first thumnail on each next row should also have a margin-left * of 15 px. */ } #indivgallery img { border: solid 1px #7C8F7C; } #indivgallery span { /* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery display: none; */ } /* Subsection : Narrative ----------------------------------------------------- */ h4 + div.grampsstylednote, a.familymap { margin: 1em 15px; } i + div.grampsstylednote p { margin: 0 0 0.3em 0; } div.grampsstylednote p { margin-bottom: 0.5em; } /* Subsection : Family Map ----------------------------------------------------- */ a.familymap { display: block; } /* Subsection : Source References ----------------------------------------------------- */ #sourcerefs ol li ol { list-style-type: lower-alpha; } /* Subsection : Pedigree ----------------------------------------------------- */ .pedigreegen { list-style-type: none; padding-left: 15px; } .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; color: #E0E6E0; padding-top: 1em; background-color: #9DBF9D; border-top: solid 1px #454; } #footer a { color: #E0E6E0; } #footer > * { background-color: #454; } #footer p#createdate { float: left; width: 50%; text-align: left; padding-left: 15px; margin-top: 1em; } #footer p#copyright { float: right; width: 40%; text-align: right; padding-right: 15px; } /* Overwritten ----------------------------------------------------- */ body#FamilyMap { background-color: #E0E6E0 ! important; } /* Calendar Styles ===================================================== */ table.calendar { table-layout: fixed; empty-cells: show; } .calendar thead th { text-align: center; border-top-style: none; } .calendar thead th.monthName { font-size: xx-large; font-weight: normal; background-color: white; border-bottom-style: none; padding-top: 1em; } .calendar thead th abbr { border-bottom-style: none; } #CreatorInfo { float: right; margin: -1em 15px 0px 0px; font-weight: bold; color: #7C8F7C; } .calendar tfoot tr td { border-top: solid 4px #7C8F7C; vertical-align: middle; } /* Calendar : Date Numeral */ .calendar div.date { float: right; width: 1.8em; font-size: large; text-align: center; background-color: #9DBF9D; color: #454; } /* Calendar : Date Container */ .calendar td { padding: 0px 0px 0px 1ex; border-width: 1px 0px 0px 1px; border-style: solid; border-color: #9DBF9D; background-color: white; } .calendar td:first-child { border-left-style: none; padding: 0px 0px 0px 1ex; } .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 { border-top: dashed 1px #9DBF9D; padding-top: 0.5em; padding-bottom: 0.5em; } .calendar td ul li:first-child { border-style: none; } /* Calendar : Birthday, Anniversary, Highlight */ .calendar td ul li em { font-style: normal; color: #7C8F7C; } .calendar td.highlight { background-color: #E0E6E0; } .calendar td.highlight div.date { color: black; background-color: #9DBF9D; } /* Calendar : Previous-Next Month */ .calendar td.previous, .calendar td.next, .calendar td.previous div.date, .calendar td.next div.date { color: #9DBF9D; background-color: white; } /* Calendar : Full Year */ body#fullyearlinked div.content { overflow: hidden; } body#fullyearlinked table.calendar { float: left; width: 33.3%; height: 18em; border: solid 1px black; } body#fullyearlinked table.calendar thead th { height: 2em; } body#fullyearlinked table.calendar thead th.monthName { font-size: large; padding: 2px 0px; } body#fullyearlinked table.calendar tbody td { height: 3em; } body#OneDay div.content { overflow: hidden; }