From 2d8dd3d3a50219a3581c2e20fedb32db7695db38 Mon Sep 17 00:00:00 2001 From: Michiel Nauta Date: Sat, 24 Sep 2011 07:51:40 +0000 Subject: [PATCH] 4927: Narrated Web test - layout svn: r18198 --- src/plugins/webstuff/css/Web_Basic-Ash.css | 1332 +++++----------- .../webstuff/css/Web_Basic-Cypress.css | 1359 +++++----------- src/plugins/webstuff/css/Web_Basic-Lilac.css | 1353 +++++----------- src/plugins/webstuff/css/Web_Basic-Peach.css | 1362 +++++------------ src/plugins/webstuff/css/Web_Basic-Spruce.css | 1352 +++++----------- 5 files changed, 1991 insertions(+), 4767 deletions(-) diff --git a/src/plugins/webstuff/css/Web_Basic-Ash.css b/src/plugins/webstuff/css/Web_Basic-Ash.css index 27657942a..0297df7ce 100644 --- a/src/plugins/webstuff/css/Web_Basic-Ash.css +++ b/src/plugins/webstuff/css/Web_Basic-Ash.css @@ -20,6 +20,7 @@ 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. @@ -39,13 +40,16 @@ Color Palette -------------------------------------------------------------------------------------------------- black #000 -gray dark #333 +gray dark #555 gray #999 gray light #CCC gray very light #EEE 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. +-------------------------------------------------------------------------------------------------- # $Id$ NarrativeWeb Styles @@ -55,1212 +59,592 @@ white #FFF ----------------------------------------------------- */ body { - font-family:sans-serif; - color:#000; - margin:0; - padding:0; - background-color:#FFF; + font-family: sans-serif; + font-size: 90%; + color: black; + margin: 0px; + background-color: #EEE; } -div { - margin:0; - padding:0; -} -img { - border:none; - margin:0; -} -.thumbnail a:hover { - background:none; +body > div { + clear: both; } .content { - padding-top: 1cm; - background-color:#FFF; + background-color: white; + border-top: solid 1px #999; } .content div.snapshot { - float:right; - margin:20px; - padding:0; - background:none; -} -.content div.snapshot div.thumbnail { - margin:0; - padding:0; - background:none; + float: right; + margin: 2em; } .fullclear { - width:100%; - height:1px; - margin:0; - padding:0; - clear:both; + clear: both; } /* General Text ----------------------------------------------------- */ h1 { - font-size:1.4em; - font-weight:bold; - margin:0; -} -h2 { - display:none; + font-size: x-large; + font-weight: bold; + padding-left: 15px; } h3 { - font-size:1.2em; - font-weight:bold; - margin-left:12px; - text-align:left; - margin:0; - padding:.5em 20px .2em 20px; + font-size: large; + padding-left: 15px; } h4 { - font-size:.8em; - color:#333; - margin:0; - padding:.2em 0 .2em 20px; - background-color:#EEE; - border-bottom:solid 1px #999; -} -h5, h6 { - font-style:italic; - margin:1.3em 0 .5em 1em; -} -p { - font-size:14px; - line-height:17px; - margin:0; + font-size: medium; + background-color: #CCC; + padding-left: 15px; + margin-bottom: 0px; + border-bottom: solid 1px #999; } p#description { - padding:0 15px 1em 15px; + padding-left: 15px; } -p a:link { - text-decoration:underline; +a { + color: black; + text-decoration: none; } -sup { - line-height:0; -} -ol { -} -ol li a { - text-decoration:none; -} -a:link { - color:#000; - text-decoration:underline; -} -a:hover, a:active { - background-color:#EEE; - color:#000; - text-decoration:underline; -} -a:visited { - color:#000; - text-decoration:underline; +a[href]:hover, a[href]:active { + text-decoration: underline; } .grampsid { - font:normal .8em/1.2em monospace; - color:#999; + font-family: monospace; + font-size: smaller; + color: #999; } /* Header ----------------------------------------------------- */ -#header { - padding:15px 15px 2px 15px; - margin:0; - background-color:#EEE; -} #SiteTitle { - color:#333; - margin:0 0 3px 0; + color: #555; } -#header p { - font-size:1em; - font-weight:bold; - color:#999; - margin:0; +#user_header, #user_footer { + padding-left: 15px; } /* Navigation ----------------------------------------------------- */ #navigation, #subnavigation { - margin:0; - padding:4px 0 0 0; - background-color:#EEE; + border: solid 1px #EEE; /* needed by IE7 */ +} +#subnavigation ul { + overflow: hidden; } #navigation ul, #subnavigation ul { - list-style:none; - min-width:770px; - height:22px; - margin:0; - padding:0 0 0 12px; - border-bottom:1px solid #999; + list-style: none; + margin: 0px; + padding-left: 15px; +} +#subnavigation ul { + border-bottom: solid 1px #999; } #navigation ul li, #subnavigation ul li { - margin:0; - padding:0; - float:left; + float: left; } #navigation ul li a, #subnavigation ul li a { - display:block; - font-size:12px; - line-height:100%; - font-weight:bold; - text-decoration:none; - margin:0; - padding:5px 5px; - background-color:#EEE; + display: block; + font-size: smaller; + font-weight: bold; + padding: 5px; + border-bottom: solid 1px #EEE; } #navigation ul li a:hover, #subnavigation ul li a:hover { - background-color:#CCC; - border-bottom:solid 1px #000; + text-decoration: none; + background-color: #CCC; + border-bottom: solid 1px black; } -#navigation ul li.CurrentSection a, #subnavigation ul li.CurrentSection a { - padding-bottom:4px; - border-top:solid 1px #999; - border-right:solid 1px #999; - border-left:solid 1px #999; - border-bottom:solid 1px #FFF; - background-color:#FFF; -} -#navigation ul li.CurrentSection a:hover { - background-color:#FFF; +#navigation ul li.CurrentSection a { + position: relative; + top: 1px; + border: solid 1px #999; + border-bottom-style: none; + background-color: white; } #subnavigation ul li.CurrentSection a { - border-width:0 0 1px 0; + background-color: white; } - /* Alphabet Navigation ----------------------------------------------------- */ -div#alphabet { - width: 100%; - margin: 0; +#alphabet { background-color: #EEE; } -div#alphabet ul { - list-style:none; - min-width:770px; - height:24px; - margin:0; - padding: 0px 0px 0px 16px; +#alphabet ul { + list-style: none; border-width: 2px 0px 4px 0px; border-style: solid; - border-color: #000; + border-color: black; + margin: 0px; + padding-left: 15px; + /* float container stretch, see www.quirksmode.org/css/clearing.html */ + overflow: hidden; } -div#alphabet ul li:after { - content:" |"; +#alphabet ul li { + float: left; + font-size: larger; + font-weight: bold; } -div#alphabet ul li { - margin:0; - float:left; +#alphabet ul li:after { + content: " |"; } -div#alphabet ul li a { +#alphabet ul li a { display: block; - padding: 4px 8px 4px 8px; - float:left; - font:bold 16px/100% sans; - margin:0; - text-decoration:none; - color: #000; + padding: 4px 8px; + line-height: 100%; + float: left; } -div#alphabet ul li a:hover { - background-color: #000; - color: #FFF; +#alphabet ul li a:hover { + text-decoration: none; + background-color: black; + color: white; } /* Main Table ----------------------------------------------------- */ table { - font-size:14px; - margin:0 15px; - padding:0; - border:none; - border-collapse:collapse; + border-collapse: collapse; + width: 100%; +} +div#summaryarea > table.infolist, +div#parents > table.infolist, +h3 + table.infolist { + width: auto; } table tr th { - font-weight: bold; text-align: left; - margin:0; - padding:.1em 10px; - background-color:#CCC; - border-top:solid 1px #999; - border-bottom:solid 1px #999; + background-color: #EEE; + border-top: solid 1px #999; + border-bottom: solid 1px #999; } -table.infolist tr th:first-child { - border-left:solid 1px #999; +table tr th:first-child { + border-left: solid 1px #999; } -table.infolist tr th:last-child { - border-right:solid 1px #999; +table tr th:last-child { + border-right: solid 1px #999; } -table.infolist tr th a { - text-decoration:none; +table.primobjlist tr th { + background-color: #CCC; } -table tr td { - vertical-align:middle; - padding:.1em 10px; +table td, table th { + vertical-align: top; + padding-left: 1ex; } -table.infolist tr td a { - display:block; - text-decoration:none; +table.primobjlist td { + vertical-align: middle; } -table.infolist tr.BeginLetter td, table.infolist tr.BeginSurname td { - border-top:solid 1px #CCC; +table td:first-child, table th:first-child { + padding-left: 15px; } -table.infolist tr th.ColumnQuantity { - width:30%; +table.primobjlist tr a { + display: block; /* make whole td clickable */ } -table.infolist tr td.ColumnLetter { - font-weight:bold; +table.primobjlist tr.BeginLetter td, table.primobjlist tr.BeginSurname td { + border-top: solid 1px #CCC; } -table.infolist tbody tr td.ColumnBirth { - font-size:.9em; - width:10%; +td.ColumnLetter, td.ColumnRowLabel { + font-weight: bold; } -table.infolist tbody tr td.ColumnDeath { - font-size:.9em; - width:10%; +td.ColumnBirth, td.ColumnDeath, td.ColumnPartner, td.ColumnParents { + font-size: 90%; } -table.infolist tbody tr td.ColumnRowLabel { - font-weight:bold; - width:2%; +table.infolist tr td ol { + margin: 0px; } -table.infolist tbody tr td.ColumnType { - width:6%; - padding-left:20px; +#summaryarea table.infolist td.ColumnAttribute, +#parents table.infolist td.ColumnAttribute, +#families table.infolist td.ColumnType, +#families table.infolist td.ColumnAttribute { + color: #555; } -table.infolist tbody tr td.ColumnPartner { - font-size:.9em; +/* div summaryarea is missing for events, sources and repos! */ +h3 + table.infolist td.ColumnAttribute { + color: #555; } -table.infolist tbody tr td.ColumnParents { - font-size:.9em; -} -table.infolist tbody tr td.ColumnParents span.father, table.infolist tbody tr td.ColumnParents span.mother { - display:block; -} -table.infolist tbody tr td.ColumnParents span.mother:before { - content:"+ "; -} -table.infolist tbody p.EventNote { - border-top:dashed 1px #CCC; - padding-top:1em; - padding-bottom:1em; +table.primobjlist td.ColumnParents span.mother:before { + content: "+ "; } /* Surnames ----------------------------------------------------- */ -#Surnames { } -#SurnameDetail p#description { padding-top:0; } -table.surnamelist tbody tr td.ColumnSurname { - width:50%; +table#SortByName td.ColumnSurname, table#SortByName th.ColumnSurname, +table#SortByCount td.ColumnQuantity, table#SortByCount th.ColumnQuantity { + background-color: #EEE; } -table.surnamelist thead tr th.ColumnSurname { - padding:0; +table#SortByName thead th.ColumnSurname a:after, +table#SortByCount thead th.ColumnQuantity a:after { + content: " \2193"; } -table.surnamelist thead tr th.ColumnQuantity { - width:40%; - padding:0; -} -table.infolist thead tr th.ColumnSurname a, table.infolist thead tr th.ColumnQuantity a { - display:block; - padding:.1em 10px; -} -table#SortByName thead tr th.ColumnSurname a, table#SortByCount thead tr th.ColumnQuantity a { - background-color:#EEE; -} -table#SortByName thead tr th.ColumnSurname a:after, table#SortByCount thead tr th.ColumnQuantity a:after { - content:" ↓"; -} -table.infolist tbody tr td.ColumnSurname { - padding:0; - background-color:#EEE; -} -table.infolist tbody tr td.ColumnSurname a { - padding:.1em 10px; -} -table.infolist tbody tr td.ColumnSurname a:hover { - padding:.1em 10px; - background-color:#CCC; -} -table.surname { - border-bottom:solid 1px #EEE; -} -table.surname tbody tr td { - border-bottom:dashed 1px #CCC; -} -table.surname tbody tr td.ColumnName { - width:20%; - padding:0; - background-color:#EEE; -} -table.surname tbody tr td.ColumnName a { - display:block; - padding:.6em 10px .6em 20px; -} -table.surname tbody tr td.ColumnName a:hover { - background-color:#CCC; -} -table.surname tbody tr td.ColumnName a span.grampsid { - display:none; -} -table.surname thead tr th.ColumnParents, table.surname tbody tr td.ColumnParents { - width:25%; +table.surname td.ColumnName { + background-color: #EEE; } /* Individuals ----------------------------------------------------- */ -#Individuals { } -#Individuals table.individuallist { - border-bottom:solid 1px #EEE; -} -#Individuals table.individuallist tbody tr td { - border-bottom:dashed 1px #CCC; -} -#Individuals table.individuallist tbody tr td a:hover { - text-decoration:none; -} -table.individuallist tbody tr td.ColumnSurname { - background:none; -} -table.individuallist tbody tr td.ColumnSurname a:hover, table.individuallist tbody tr td.ColumnSurname a:active { - cursor:default; - color:black; - background:none; -} -table.individuallist tbody tr td.ColumnName { - padding:0; - background-color:#EEE; -} -table.individuallist tbody tr td.ColumnName a { - display:block; - padding:.6em 10px; - vertical-align:middle; -} -table.individuallist tbody tr td.ColumnName a:hover { - background-color:#CCC; -} -#Individuals div table.infolist tr td p { - vertical-align:top; -} -#Individuals div table.infolist tr td p a { - display:inline; -} - -/* IndividualDetail ------------------------------------------------------- */ -#IndividualDetail { - background-color:#EEE; -} -#IndividualDetail div table.infolist tr td { - font:normal .9em/1.2em sans-serif; - vertical-align:top; -} -#IndividualDetail div table.infolist tr td a { - display:inline; -} -#IndividualDetail table.infolist tr td a:hover { - text-decoration:underline; -} -#IndividualDetail table.infolist tbody tr td.ColumnAttribute { - width:10%; - color:#696969; -} -#IndividualDetail div.subsection table tr td:first-child { - padding-left:20px; -} -#familymap a.familymap { - margin-left:20px; -} - -/* Subsections : Attributes ------------------------------------------------------ */ -div#attributes { - margin: 0; - padding: 0; -} -table.attrlist { - width: 100%; -} -table.attrlist thead tr th { - background-color: #70B1ED; - color: #000; -} -table.attrlist tbody tr td { - border-bottom: dashed 1px #000; -} -table.attrlist tbody tr td.ColumnType { - width: 15%; -} -table.attrlist tbody tr td.ColumnValue { - width: 15%; -} -table.attrlist tbody tr td.ColumnNotes { - width: 40%; -} -table.attrlist tbody tr td.ColumnSources { - width: 10%; -} - -/* Sources ------------------------------------------------------ */ -#Sources table.infolist tbody tr td.ColumnRowLabel { - padding-bottom:0; -} -#Sources table.infolist tbody tr td.ColumnName { - padding:0; -} -#Sources table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; -} -#SourceDetail div#references ol li { - padding-bottom:.5em; -} - -/* Relationships -================================================= */ -div#Relationships { - font: normal 1em sans-serif; - margin: 0 auto; - padding: 0; -} -table.relationships { - width: 100%; - margin: 0; - padding: 0; -} -table.relationships thead tr th.ColumnMarriage, -table.relationships thead tr th.ColumnDivorce { - width: 10%; -} -table.relationships thead tr th.ColumnHyper { - width: 15%; -} -table.relationships thead tr th.ColumnMedia { - width: 15%; -} -table.relationships tbody tr#FirstLetter { - border-bottom: solid 1px #000; -} -table.relationships tbody tr td { - border-bottom: dashed 1px #000; -} -table.relationships tbody tr td.ColumnRowLabel a { - background: none; +table.IndividualList td.ColumnSurname { + background-color: #EEE; } /* Places ----------------------------------------------------- */ -#Places table.infolist tbody tr td.ColumnName { - padding:0; -} -#Places table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; +#Places table.infolist td.ColumnName { + background-color: #EEE; } /* Events ----------------------------------------------------- */ #EventList table.infolist tr.BeginType td { - border-top:dashed 1px rgb(204, 204, 204); + border-top:dashed 1px #CCC; } #EventList table.infolist tr.BeginLetter td { - border-top:solid 1px rgb(204, 204, 204); + border-top:solid 1px #CCC; } -#EventList table.infolist tr td a, -#EventDetail table.infolist tr td a { +#EventList table.infolist td.ColumnType { + background-color: #EEE; +} +#EventList td.ColumnPerson a { display: inline; } -#EventList table.infolist tr td span.father, -#EventList table.infolist tr td span.mother, -#EventDetail table.infolist tr td span.father, -#EventDetail table.infolist tr td span.mother { - display: block; -} -#EventList table.infolist tr td span.person:after, -#EventList table.infolist tr td span.father:after, -#EventList table.infolist tr td span.mother:after, -#EventDetail table.infolist tr td span.person:after, -#EventDetail table.infolist tr td span.father:after, -#EventDetail table.infolist tr td span.mother:after { +#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 table.infolist tr td span.person:last-child:after, -#EventList table.infolist tr td span.father:last-child:after, -#EventList table.infolist tr td span.mother:last-child:after, -#EventDetail table.infolist tr td span.person:last-child:after, -#EventDetail table.infolist tr td span.father:last-child:after, -#EventDetail table.infolist tr td span.mother:last-child:after { +#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 ----------------------------------------------------- */ -#Gallery table.infolist tbody tr td.ColumnRowLabel, #Gallery table.infolist tbody tr td.ColumnDate { - padding-bottom:0; -} -#Gallery table.infolist tbody tr td.ColumnName { - padding:0; -} -#Gallery table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; -} -#Gallery table.infolist tbody tr td.ColumnName a:hover { - background-color:#EEE; -} #GalleryNav { - font-size:.8em; - margin:1em 0 0 0; - padding:1.2em 0 0 0; - text-align:center; + text-align: center; + margin: 2em 0px; } #GalleryNav a { - font-weight:bold; - text-decoration:none; - background-color:#EEE; - border:solid 1px #999; -} -#GalleryNav a:hover { - background-color:#CCC; + font-weight: bold; + background-color: #EEE; + border: solid 1px #999; + margin: 1em; } #GalleryNav a#Previous { - padding:.4em .7em .3em .7em; + padding: .4em .7em .3em .7em; } #GalleryNav a#Next { - padding:.4em 1.9em .3em 1.9em; -} -#GalleryPages { - margin:0 1em; + padding: .4em 1.9em .3em 1.9em; } #GalleryCurrent { - font-size:1.2em; - font-weight:bold; + font-size: larger; } #GalleryTotal { - font-weight:normal; + font-weight: normal; } #GalleryDisplay { - margin:0 auto; - padding:0; - position:relative; - overflow:hidden; - text-align:center; - border:solid 1px #999; + margin: 0px auto; + position: relative; } #GalleryDisplay img { - margin:0 auto; + margin: 0px auto; + display: block; + border: solid 1px #999; } -#GalleryDetail div#summaryarea{ - margin:0; - padding:1.4em 0 0 0; -} -#GalleryDetail div#summaryarea h3 { - text-align:center; -} -#GalleryDetail div h4 { - margin-top:0; -} -#GalleryDetail div#summaryarea table.gallery { - width:100%; - margin-top:1.5em; - margin-bottom:0; - padding-bottom:0; - background-color:#EEE; - border-style:solid; - border-width:8px 0 0 0; - border-color:#CCC; -} - -/* Thumbnail Preview Reference Section -------------------------------------------------- */ -body#ThumbnailPreview div#references { - background-color: #FFF; - color: #00029D; - margin: 0 auto; - padding: 0; - width: 100%; -} -body#ThumbnailPreview div#references table.infolist tbody tr { - border-bottom: dashed 1px #000; -} -body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnRowLabel a { - background: none; - width: 2%; -} -body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnName { - width: 90%; +#GalleryDetail h3 { + text-align: center; } /* Contact ----------------------------------------------------- */ +#Contact { + overflow: hidden; +} #Contact #summaryarea { - width:600px; - margin:2em auto; - padding:3em; - background-color:#EEE; - border:solid 1px #999; + width: 50em; + margin: 2em auto; + padding: 3em; + background-color: #EEE; + border: solid 1px #999; } -#Contact #summaryarea img { - float:right; - margin:0; - padding:0; - border:solid 1px #999; +#Contact img { + float: right; + border: solid 1px #999; } -#researcher { - margin-top:.3em; +#Contact #researcher, #Contact #researcher h3 { + font-size: larger; + padding-left: 0px; } -#researcher h3 { - padding:0; -} -#researcher span { - display:block; - float:left; - margin-right:.4em; -} -#streetaddress { - width: 100%; -} -#locality, .locality { +#Contact #streetaddress, #Contact #locality, #Contact #email { display: block; - width: 100%; } -#city:after { - content:","; -} -#country { - clear:left; -} -#email { - clear:left; -} -#email a { - text-decoration:none; -} -#email a:hover { - text-decoration:underline; +#Contact #city:after { + content: ","; } -/* Download +/* Download ----------------------------------------------------- */ -#Download { - padding:1cm; - height:396px; -} -table.download { - border:solid 2px #000; - width:100%; -} -table.download img { - float:center; -} -table.download thead tr th { - text-align:center; - border:solid 2px #000; - color: #000; - text-transform:uppercase; -} -table.download tbody tr#Row02 { - border-bottom:solid 2px #000; -} -table.download thead tr th, table.download tbody tr td { - padding-left:10px; - padding-top:20px; - border-style:solid; - border-color:#000; - border-width:0 2px 2px 2px; - text-align:left; -} -table.download td.Description { - width: 50%; -} -table.download td.License { - width:8%; -} -table.download td.Filename { - width:30%; -} -table.download td.Filename a { - font-weight:bold; - font-style: italic; - text-decoration:none; -} -table.download td.Filename a:hover { - text-decoration:underline; -} -table.download td.Modified { - width:12%; - font-weight:bold; +#Download table.download a { + display: block; } -/* Subsections +/* Subsection ----------------------------------------------------- */ -#Home, #Introduction, #Contact { - padding:1.5em 0 3em 0; +#Home, #Introduction { + overflow: hidden; } -#Home p, #Introduction p, #Contact p { - margin:0 20px 1em 20px; +#Home img, #Introduction img { + float: right; + margin: 1em; + max-width: 950px; } -#Home img, #Introduction img, #Contact img { - float:right; - margin:0; - padding:0 20px 3em 20px; +#Home p, #Introduction p { + padding-left: 15px; } -#Home a, #Introduction a, #Contact a { - color: #000; - text-decoration: none; +.subsection { + clear: both; + overflow: hidden; } -div.subsection{ - padding-bottom:.5em; - background-color:#FFF; -} -div.subsection h4 { - margin-bottom:.5em; -} -div.subsection table, div.subsection ol, div.subsection p, div.subsection > a { - font-size:.9em; -} -div.subsection a { - text-decoration:none; -} -div.subsection a:hover { - text-decoration:underline; - background:none; -} -div.subsection table.infolist { - width:100%; - margin:0; -} -#IndividualDetail div.subsection table tr td:first-child { - padding-left:20px; +.subsection p { + margin: 0px; } -/* Subsections : Summary Area +/* Subsection : Families ----------------------------------------------------- */ -div#summaryarea { - min-height:100px; - background:none; -} -div#summaryarea table.infolist { - margin:0; - padding:0; - background:#FFF; - border-bottom:solid .7em #FFF; -} -div#summaryarea table.infolist tr td, div#summaryarea table.infolist tr td p { - vertical-align:top; -} -div#summaryarea table.infolist tr td a, div#summaryarea table.infolist tr td p a { - display:inline; -} -div#summaryarea table.infolist tbody tr td.ColumnAttribute { - width:14%; - padding-left:20px; -} - -/* Subsections : Events ------------------------------------------------------ */ -div#events { - padding-bottom:0; -} -div#events h4 { - margin-bottom:0; -} -div#events table.infolist { - border-bottom:solid 1px #FFF; -} -div#events table.infolist tbody tr td { - padding-top:.2em; - padding-bottom:.2em; -} -#IndividualDetail div#events table.infolist thead tr th:first-child { - padding-left:20px; -} -div#events table.infolist tbody tr td.ColumnAttribute { - border-bottom:dashed 1px #CCC; -} -div#events table.infolist tbody tr td.ColumnValue { - border-bottom:dashed 1px #CCC; -} -div#events table.infolist tbody tr td.ColumnValue p { - margin:.1em 2em; -} - -/* Subsections : Parents ------------------------------------------------------ */ -div#parents table.infolist tbody tr td.ColumnValue ol { - margin:0; - padding-top:0; -} -div#parents table.infolist tbody tr td.ColumnValue ol li { - padding-bottom:.2em; -} - -/* Subsections : Families ------------------------------------------------------ */ -div#families table.infolist tbody tr td.ColumnValue p { - margin-top:0; -} -div#families table.infolist tbody tr td.ColumnValue ol { - margin:0; - padding-top:0; -} -div#families table.infolist tbody tr td.ColumnValue ol li { - padding-bottom:.2em; -} div#families table.fixed_subtables table.eventlist { - table-layout:fixed; + table-layout: fixed; } div#families table.fixed_subtables table.eventlist th:first-child { - width:9em; + width: 9em; } div#families table.fixed_subtables table.eventlist th:last-child { - width:5em; + width: 5em; +} +div#families table.attrlist td.ColumnType { + color: black; } -/* Subsections : Addresses +/* Subsection : Gallery ----------------------------------------------------- */ -div#addresses { - padding-bottom:0; -} -div#addresses h4 { - margin-bottom:0; -} -div#addresses table.infolist { - border-bottom:solid 1px #FFF; -} -div#addresses table.infolist tbody tr td { - padding-top:.2em; - padding-bottom:.2em; -} -div#addresses table.infolist tbody tr td.ColumnAttribute { - width:30%; - border-bottom:dashed 1px #CCC; -} -div#addresses table.infolist tbody tr td.ColumnValue { - border-bottom:dashed 1px #CCC; -} -div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a { - display: inline; -} - -/* Subsections : Attributes ------------------------------------------------------ */ - -/* Subsections : Gallery ------------------------------------------------------ */ -#indivgallery h4 { - margin-bottom:1em; -} #indivgallery .thumbnail { - margin:0; - float:left; - width:130px; - height:150px; - text-align:center; + float: left; + max-width: 130px; + max-height: 150px; + font-size: smaller; + text-align: center; + margin: 0.8em 0.5em; } -#indivgallery .thumbnail a { - display:block; - margin:0; - padding:0; - background:none; +#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 .thumbnail a img { - margin:0; - padding:0; - border:solid 1px #999; +#indivgallery img { + border: solid 1px #999; } -#indivgallery div.thumbnail span { -/* ## remove this line and the comment markers from the line below to hide the description in Individual Gallery +#indivgallery span { +/* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery display: none; */ - - font-size:.6em; - text-align:center; - width:80%; - margin:0 auto; - padding:0; } -/* Subsections : Narrative +/* Subsection : Narrative ----------------------------------------------------- */ -div.narrative { - padding-bottom:0; +h4 + div.grampsstylednote, a.familymap { + margin: 1em 15px; } -.narrative p { - margin-top:.5em; - margin-bottom:0; - padding:0 20px 1em 20px; +i + div.grampsstylednote p { + margin: 0px; } -/* Subsections : References +/* Subsection : Family Map ----------------------------------------------------- */ -#references ol { - margin-top:0; - margin-bottom:0; +a.familymap { + display: block; } -/* Subsections : Source References +/* Subsection : Source References ----------------------------------------------------- */ -div#sourcerefs ol { - list-style-type:decimal; -} -div#sourcerefs ol li ol { - list-style-type:lower-alpha; +#sourcerefs ol li ol { + list-style-type: lower-alpha; } -/* Subsections : Weblinks ------------------------------------------------------ */ - -/* Subsections : Pedigree +/* Subsection : Pedigree ----------------------------------------------------- */ .pedigreegen { - font-size:.9em; - list-style:none; - margin:.5em 0 0 0; - padding:0 0 .7em 20px; + list-style-type: none; + padding-left: 15px; } .pedigreegen li ol { - list-style:none; - margin-left:.5em; -} -.pedigreegen li ol li { - padding-bottom:.2em; + list-style-type: none; } .pedigreegen li ol li ol { - list-style:decimal; - margin-left:1.6em; + list-style-type: decimal; } -.pedigreegen li ol li ol li ol.spouselist { - font-size:1em; - list-style:none; - margin-left:0; +.pedigreegen ol.spouselist { + list-style-type: none; } -.spouselist li.spouse ol { - font-size:1em; - list-style:decimal; - margin-left:1.6em; -} -.spouse a { - font-weight:normal; +.pedigreegen ol.spouselist li.spouse ol { + list-style-type: decimal; } .spouse:before { content: "+ "; } .thisperson { - font-weight:bold; + font-weight: bold; +} +.thisperson > ol { + font-weight: normal; } /* Footer ----------------------------------------------------- */ #footer { - clear:both; - width:100%; - font-size:12px; - line-height:130%; - color:#333; - margin:0; - padding:15px 0 0 0; - background-color:#CCC; - border-top:solid 1px #333; + clear: both; + padding-top: 1em; + background-color: #CCC; + border-top: solid 1px #555; } -#footer a, #footer a:visited { - text-decoration:none; - color:#333; -} -#footer a:hover { - text-decoration:underline; -} -#footer img { - border:0; - margin:0 auto; - vertical-align:middle; +#footer > * { + background-color: #EEE; } #footer p#createdate { - float:left; - width:40%; - text-align:left; - margin-left:10px; + float: left; + width: 50%; + text-align: left; + padding-left: 15px; + margin-top: 1em; } #footer p#copyright { - float:right; - width:40%; - text-align:right; - margin-right:10px; + float: right; + width: 40%; + text-align: right; + padding-right: 15px; } -#footer p#copyright img { - margin-right:10px; -} -#user_footer { - width:70%; - float:left; - margin:1em; -} -#user_footer p { - font:normal 1em/1.2em serif; - margin:0; - padding:0; + +/* Overwritten +----------------------------------------------------- */ +body#FamilyMap { + background-color: #EEE ! important; } /* Calendar Styles --------------------------------------------------------------------------------------------- */ -/* Calendar : General */ -body#WebCal { - padding:0 14px; - background-color:#333; +===================================================== */ +table.calendar { + table-layout: fixed; + empty-cells: show; } -.calendar { - empty-cells:show; - width:100%; - font-size:1em; - font-weight:normal; - margin:0; - padding:0; - border:none; - border-collapse:collapse; +.calendar thead th { + text-align: center; + border-top-style: none; } -.calendar thead tr th { - width:14%; - font-weight:bold; - font-size:14px; - line-height:14px; - text-align:center; - text-transform:uppercase; - padding:2px 0; +.calendar thead th.monthName { + font-size: xx-large; + font-weight: normal; + background-color: white; + border-bottom-style: none; + padding-top: 1em; } -.calendar thead tr th.monthName { - width:100%; - font-weight:normal; - font-size:2em; - line-height:100%; - text-transform:none; - color:#333; - padding:.3em 0 .2em 0; - background-color:#FFF; - border-bottom-width:0; +.calendar thead th abbr { + border-bottom-style: none; } -body#WebCal #CreatorInfo { - float:right; - font-size:12px; - margin:-24px 10px 0 0; -} -.calendar thead tr th.weekend, -.calendar thead tr th.weekday { - color:#333; - background-color:#EEE; - border-style:solid; - border-width:0 0 1px 0; - border-color:#999; -} -.calendar thead tr th.saturday, -.calendar thead tr th.sunday { } -.calendar tfoot tr td { - padding:.7em 5% 1em 5%; - border-top:solid 4px #999; +#CreatorInfo { + float: right; + margin: -1em 15px 0px 0px; + font-weight: bold; + color: #999; } .calendar tfoot tr td { - vertical-align:middle; - color:#333; - background-color:#EEE; + border-top: solid 4px #999; + vertical-align: middle; } /* Calendar : Date Numeral */ -.calendar tbody tr td div.date { - float:right; - display:block; - width:1.8em; - font-weight:bold; - font-size:1em; - line-height:100%; - text-align:center; - color:#333; - margin:0 0 0 .5em; - padding:.2em 0; - background-color:#CCC; +.calendar div.date { + float: right; + width: 1.8em; + font-size: large; + text-align: center; + background-color: #CCC; + color: #555; } /* Calendar : Date Container */ -.calendar tbody tr td { - vertical-align:top; - height:10em; - padding:0; - border-width:1px 0 0 1px; - border-style:solid; - border-color:#CCC; +.calendar td { + padding: 0px 0px 0px 1ex; + border-width: 1px 0px 0px 1px; + border-style: solid; + border-color: #CCC; + background-color: #EEE; } -.calendar tbody tr td.weekday { - background-color:#FFF; -} -.calendar tbody tr td.weekend { - background-color:#EEE; -} -.calendar tbody tr td.saturday { - - } -.calendar tbody tr td:first-child { - border-left:none; +.calendar td:first-child { + border-left-style: none; + padding: 0px 0px 0px 1ex; } .calendar tbody tr:first-child td { - border-top:none; + border-top-style: none; } /* Calendar : Date Detail */ -.calendar tbody tr td ul { - list-style:none; - font-family:sans-serif; - font-size:.8em; - margin:2.3em 0 .3em 0; - padding:0; +.calendar td ul { + font-size: smaller; + list-style: none; + padding: 0px; } -.calendar tbody tr td ul li { - display:block; - width:92%; - margin:0 4%; - padding:.2em 0 .3em 0; - border-top:dashed 1px #C1B398; +.calendar td ul li { + border-top: dashed 1px #CCC; + padding-top: 0.5em; + padding-bottom: 0.5em; } -.calendar tbody tr td ul li:first-child { - border:none; +.calendar td ul li:first-child { + border-style: none; } /* Calendar : Birthday, Anniversary, Highlight */ -.calendar tbody tr td ul li em { - font-style:normal; - color:#0A65B5; +.calendar td.highlight { + background-color: white; } -.calendar tbody tr td ul li span.yearsmarried em { - color:#453619; -} -.calendar tbody tr td.highlight { - background-color:#E5F2FE; -} -.calendar tbody tr td.highlight div.date { - color:#0A65B5; - background-color:#C2E1FE; +.calendar td.highlight div.date { + color: black; + background-color: #CCC; } /* Calendar : Previous-Next Month */ -.calendar tbody tr td.previous, -.calendar tbody tr td.next, -.calendar tbody tr td.previous div.date, -.calendar tbody tr td.next div.date { - color:#CCC; - background-color:#EEE; +.calendar td.previous, +.calendar td.next, +.calendar td.previous div.date, +.calendar td.next div.date { + color: #CCC; + background-color: #EEE; } /* Calendar : Full Year */ body#fullyearlinked div.content { - width:963px; - margin:0 auto; - padding:15px 0 2px 2px; + overflow: hidden; } body#fullyearlinked table.calendar { - float:left; - width:320px; - height:18em; - border:solid 1px #7D5925; + float: left; + width: 33.3%; + height: 18em; + border: solid 1px black; } -body#fullyearlinked table.calendar thead tr th { - height:2em; +body#fullyearlinked table.calendar thead th { + height: 2em; } -body#fullyearlinked table.calendar thead tr th.monthName { - font-size:1.2em; - padding:2px 0; +body#fullyearlinked table.calendar thead th.monthName { + font-size: large; + padding: 2px 0px; } -body#fullyearlinked table.calendar tbody tr td { - height:3em; +body#fullyearlinked table.calendar tbody td { + height: 3em; +} +body#OneDay div.content { + overflow: hidden; } diff --git a/src/plugins/webstuff/css/Web_Basic-Cypress.css b/src/plugins/webstuff/css/Web_Basic-Cypress.css index cb30d13a8..bf3ac02ad 100644 --- a/src/plugins/webstuff/css/Web_Basic-Cypress.css +++ b/src/plugins/webstuff/css/Web_Basic-Cypress.css @@ -10,6 +10,7 @@ Note: Adapted from GRAMPS original Modern Style stylesheet with colors from the 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. @@ -19,6 +20,7 @@ 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. @@ -36,6 +38,7 @@ GRAMPS. If not, see . Color Palette -------------------------------------------------------------------------------------------------- + black #000 slate dark #454 slate #7C8F7C @@ -43,1191 +46,655 @@ 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. +-------------------------------------------------------------------------------------------------- # $Id$ + NarrativeWeb Styles +------------------------------------------------------------------------------------------------ + General Elements ----------------------------------------------------- */ body { - font-family:sans-serif; - color:#000; - margin:0; - padding:0; - background-color:#FFF; + font-family: sans-serif; + font-size: 90%; + color: black; + margin: 0px; + background-color: #454; } -div { - margin:0; - padding:0; -} -img { - border:none; - margin:0; -} -.thumbnail a:hover { - background:none; +body > div { + clear: both; } .content { - padding-top: 1cm; - background-color:#FFF; + background-color: white; + border-top: solid 1px #7C8F7C; } .content div.snapshot { - float:right; - margin:20px; - padding:0; - background:none; -} -.content div.snapshot div.thumbnail { - margin:0; - padding:0; - background:none; + float: right; + margin: 2em; } .fullclear { - width:100%; - height:1px; - margin:0; - padding:0; - clear:both; + clear: both; } /* General Text ----------------------------------------------------- */ h1 { - font-size:1.4em; - font-weight:bold; -} -h2 { - display:none; + font-size: x-large; + font-weight: bold; + padding-left: 15px; } h3 { - font-size:1.2em; - font-weight:bold; - margin-left:12px; - text-align:left; - margin:0; - padding:.5em 20px .2em 20px; + font-size: large; + padding-left: 15px; } h4 { - font-size:.8em; - color:#454; - margin:0; - padding:.2em 0 .2em 20px; - background-color:#E0E6E0; - border-bottom:solid 1px #7C8F7C; -} -h5, h6 { - font-style:italic; - margin:1.3em 0 .5em 1em; -} -p { - font-size:14px; - line-height:17px; + font-size: medium; + background-color: #9DBF9D; + padding-left: 15px; + margin-bottom: 0px; + border-bottom: solid 1px #7C8F7C; } p#description { - padding:0 15px 1em 15px; + padding-left: 15px; } -p a:link { - text-decoration:underline; +a { + color: black; + text-decoration: none; } -sup { - line-height:0; -} -ol { -} -ol li a { - text-decoration:none; -} -a:link { - color:#000; - text-decoration:underline; -} -a:hover, a:active { - color:#000; - text-decoration:underline; - background-color:#E0E6E0; -} -a:visited { - color:#000; - text-decoration:underline; +a[href]:hover, a[href]:active { + background-color: #9DBF9D; } .grampsid { - font:normal .8em/1.2em monospace; - color:#7C8F7C; + font-family: monospace; + font-size: smaller; + color: #7C8F7C; } /* Header ----------------------------------------------------- */ #header { - padding:15px 15px 15px 15px; - margin:0; - background-color:#454; - height: 1cm; + color: #E0E6E0; } -#SiteTitle { - color:#E0E6E0; - margin:0 0 3px 0; -} -#header p { - font-size:1em; - font-weight:bold; - color:#E0E6E0; - margin:0; +#user_header, #user_footer { + padding-left: 15px; } /* Navigation ----------------------------------------------------- */ #navigation, #subnavigation { - margin:0; - padding:4px 0 0 0; - background-color:#454; + border: solid 1px #454; /* needed by IE7 */ +} +#subnavigation ul { + overflow: hidden; } #navigation ul, #subnavigation ul { - list-style:none; - min-width:770px; - height:22px; - margin:0; - padding:0 0 0 12px; - border-bottom:1px solid #7C8F7C; + list-style: none; + margin: 0px; + padding-left: 15px; +} +#subnavigation ul { + border-bottom: solid 1px #7C8F7C; } #navigation ul li, #subnavigation ul li { - margin:0; - padding:0; - float:left; + float: left; } #navigation ul li a, #subnavigation ul li a { - display:block; - font-size:12px; - line-height:100%; - font-weight:bold; - text-decoration:none; - color:#E0E6E0; - margin:0; - padding:5px 5px; - background-color:#454; + display: block; + font-size: smaller; + font-weight: bold; + color: #E0E6E0; + padding: 5px; + border-bottom: solid 1px #454; } #navigation ul li a:hover, #subnavigation ul li a:hover { - color:#FFF; - padding-top:4px; - background-color:#9DBF9D; - border-top:solid 1px #454; - border-bottom:solid 1px #000; + text-decoration: none; + background-color: #9DBF9D; + border-bottom: solid 1px black; } -#navigation ul li.CurrentSection a, #subnavigation ul li.CurrentSection a { - color:#454; - padding-bottom:4px; - border-top:solid 1px #7C8F7C; - border-right:solid 1px #7C8F7C; - border-left:solid 1px #7C8F7C; - border-bottom:solid 1px #FFF; - background-color:#FFF; +#navigation ul li.CurrentSection a { + position: relative; + top: 1px; + color: #454; + border: solid 1px #7C8F7C; + border-bottom-style: none; + background-color: white; } -#navigation ul li.CurrentSection a:hover, #subnavigation ul li.CurrentSection a:hover { - padding-top:5px; - background-color:#FFF; +#subnavigation ul li.CurrentSection a { + color: #454; + background-color: white; } - /* Alphabet Navigation ----------------------------------------------------- */ -div#alphabet { - width: 100%; - margin: 0; - background-color: #454; +#alphabet { + background-color: #454 } -div#alphabet ul { - list-style:none; - min-width:770px; - height:24px; - margin:0; - padding: 0px 0px 0px 16px; +#alphabet ul { + list-style: none; border-width: 2px 0px 4px 0px; border-style: solid; - border-color: #FFF; + border-color: black; + margin: 0px; + padding-left: 15px; + /* float container stretch, see www.quirksmode.org/css/clearing.html */ + overflow: hidden; } -div#alphabet ul li:after { - content:" |"; +#alphabet ul li { + float: left; + font-size: larger; + font-weight: bold; } -div#alphabet ul li { - margin:0; - float:left; +#alphabet ul li:after { + content: " |"; } -div#alphabet ul li a { - display:block; - padding: 4px 8px 4px 8px; - float:left; - font:bold 16px/100% sans; - margin:0; - text-decoration:none; - color: #FFF; +#alphabet ul li a { + display: block; + padding: 4px 8px; + line-height: 100%; + float: left; + color: white; } -div#alphabet ul li a:hover { - background-color: #000; - color: #FFF; +#alphabet ul li a:hover { + text-decoration: none; + background-color: black; + color: white; } /* Main Table ----------------------------------------------------- */ table { - font-size:14px; - margin:0 15px; - padding:0; - border:none; - border-collapse:collapse; + border-collapse: collapse; + width: 100%; +} +div#summaryarea > table.infolist, +div#parents > table.infolist, +h3 + table.infolist { + width: auto; } table tr th { - font-weight: bold; text-align: left; - margin:0; - padding:.1em 10px; - background-color:#9DBF9D; - border-top:solid 1px #7C8F7C; - border-bottom:solid 1px #7C8F7C; + background-color: #E0E6E0; + border-top: solid 1px #7C8F7C; + border-bottom: solid 1px #7C8F7C; } -table.infolist tr th:first-child { - border-left:solid 1px #7C8F7C; +table tr th:first-child { + border-left: solid 1px #7C8F7C; } -table.infolist tr th:last-child { - border-right:solid 1px #7C8F7C; +table tr th:last-child { + border-right: solid 1px #7C8F7C; } -table.infolist tr th a { - text-decoration:none; +table.primobjlist tr th { + background-color: #9DBF9D; } -table tr td { - vertical-align:middle; - padding:.1em 10px; +table td, table th { + vertical-align: top; + padding-left: 1ex; } -table.infolist tr td a { - display:block; - text-decoration:none; +table.primobjlist td { + vertical-align: middle; } -table.infolist tr.BeginLetter td, table.infolist tr.BeginSurname td { - border-top:solid 1px #9DBF9D; +table td:first-child, table th:first-child { + padding-left: 15px; } -table.infolist tr th.ColumnQuantity { - width:30%; +table.primobjlist tr a { + display: block; /* make whole td clickable */ } -table.infolist tr td.ColumnLetter { - font-weight:bold; +table.primobjlist tr.BeginLetter td, table.primobjlist tr.BeginSurname td { + border-top: solid 1px #9DBF9D; } -table.infolist tbody tr td.ColumnBirth { - font-size:.9em; - width:10%; +td.ColumnLetter, td.ColumnRowLabel { + font-weight: bold; } -table.infolist tbody tr td.ColumnDeath { - font-size:.9em; - width:10%; +td.ColumnBirth, td.ColumnDeath, td.ColumnPartner, td.ColumnParents { + font-size: 90%; } -table.infolist tbody tr td.ColumnRowLabel { - font-weight:bold; - width:2%; +table.infolist tr td ol { + margin: 0px; } -table.infolist tbody tr td.ColumnType { - width:6%; - padding-left:20px; +#summaryarea table.infolist td.ColumnAttribute, +#parents table.infolist td.ColumnAttribute, +#families table.infolist td.ColumnType, +#families table.infolist td.ColumnAttribute { + color: #454; } -table.infolist tbody tr td.ColumnPartner { - font-size:.9em; +/* div summaryarea is missing for events, sources and repos! */ +h3 + table.infolist td.ColumnAttribute { + color: #454; } -table.infolist tbody tr td.ColumnParents { - font-size:.9em; -} -table.infolist tbody tr td.ColumnParents span.father, table.infolist tbody tr td.ColumnParents span.mother { - display:block; -} -table.infolist tbody tr td.ColumnParents span.mother:before { - content:"+ "; -} -table.infolist tbody p.EventNote { - border-top:dashed 1px #9DBF9D; - padding-top:1em; - padding-bottom:1em; +table.primobjlist td.ColumnParents span.mother:before { + content: "+ "; } /* Surnames ----------------------------------------------------- */ -#Surnames { } -#SurnameDetail p#description { padding-top:0; } -table.surnamelist tbody tr td.ColumnSurname { - width:50%; +table#SortByName td.ColumnSurname, table#SortByName th.ColumnSurname, +table#SortByCount td.ColumnQuantity, table#SortByCount th.ColumnQuantity { + background-color: #E0E6E0; } -table.surnamelist thead tr th.ColumnSurname { - padding:0; +/* 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.surnamelist thead tr th.ColumnQuantity { - width:40%; - padding:0; +table#SortByName td.ColumnSurname > a, +table#SortByName th.ColumnSurname > a, +table#SortByName th.ColumnQuantity > a { + padding-left: 1ex; } -table.infolist thead tr th.ColumnSurname a, table.infolist thead tr th.ColumnQuantity a { - display:block; - padding:.1em 10px; +table#SortByName thead th.ColumnSurname a:after, +table#SortByCount thead th.ColumnQuantity a:after { + content: " \2193"; } -table#SortByName thead tr th.ColumnSurname a, table#SortByCount thead tr th.ColumnQuantity a { - background-color:#E0E6E0; +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#SortByName thead tr th.ColumnSurname a:after, table#SortByCount thead tr th.ColumnQuantity a:after { - content:" ↓"; +table.surname td.ColumnName { + background-color: #E0E6E0; } -table.infolist tbody tr td.ColumnSurname { - padding:0; - background-color:#E0E6E0; +/* make the whole cell light up on hover not just the a. */ +table.surname td.ColumnName { + padding-left: 0px; } -table.infolist tbody tr td.ColumnSurname a { - padding:.1em 10px; -} -table.infolist tbody tr td.ColumnSurname a:hover { - padding:.1em 10px; - background-color:#9DBF9D; -} -table.surname { - border-bottom:solid 1px #E0E6E0; -} -table.surname tbody tr td { - border-bottom:dashed 1px #9DBF9D; -} -table.surname tbody tr td.ColumnName { - width:20%; - padding:0; - background-color:#E0E6E0; -} -table.surname tbody tr td.ColumnName a { - display:block; - padding:.6em 10px .6em 20px; -} -table.surname tbody tr td.ColumnName a:hover { - background-color:#9DBF9D; -} -table.surname tbody tr td.ColumnName a span.grampsid { - display:none; -} -table.surname thead tr th.ColumnParents, table.surname tbody tr td.ColumnParents { - width:25%; +table.surname td.ColumnName > a { + padding-left: 15px; } /* Individuals ----------------------------------------------------- */ -#Individuals { } -#Individuals table.individuallist { - border-bottom:solid 1px #E0E6E0; -} -#Individuals table.individuallist tbody tr td { - border-bottom:dashed 1px #9DBF9D; -} -#Individuals table.individuallist tbody tr td a:hover { - text-decoration:none; -} -table.individuallist tbody tr td.ColumnSurname { - background:none; -} -table.individuallist tbody tr td.ColumnSurname a:hover, table.individuallist tbody tr td.ColumnSurname a:active { - cursor:default; - color:black; - background:none; -} -table.individuallist tbody tr td.ColumnName { - padding:0; - background-color:#E0E6E0; -} -table.individuallist tbody tr td.ColumnName a { - display:block; - padding:.6em 10px; - vertical-align:middle; -} -table.individuallist tbody tr td.ColumnName a:hover { - background-color:#9DBF9D; -} -#Individuals div table.infolist tr td p { - vertical-align:top; -} -#Individuals div table.infolist tr td p a { - display:inline; -} - -/* IndividualDetail ------------------------------------------------------- */ -#IndividualDetail { - background-color:#454; -} -#IndividualDetail div table.infolist tr td { - font:normal .9em/1.2em sans-serif; - vertical-align:top; -} -#IndividualDetail div table.infolist tr td a { - display:inline; -} -#IndividualDetail table.infolist tr td a:hover { - text-decoration:underline; -} -#IndividualDetail table.infolist tbody tr td.ColumnAttribute { - width:10%; - color:#696969; -} -#IndividualDetail div.subsection table tr td:first-child { - padding-left:20px; -} -#familymap a.familymap { - margin-left:20px; -} - -/* Subsections : Attributes ------------------------------------------------------ */ -div#attributes { - margin: 0; - padding: 0; -} -table.attrlist { - width: 100%; -} -table.attrlist thead tr th { - background-color: #70B1ED; - color: #000; -} -table.attrlist tbody tr td { - border-bottom: dashed 1px #000; -} -table.attrlist tbody tr td.ColumnType { - width: 15%; -} -table.attrlist tbody tr td.ColumnValue { - width: 15%; -} -table.attrlist tbody tr td.ColumnNotes { - width: 40%; -} -table.attrlist tbody tr td.ColumnSources { - width: 10%; -} - -/* Sources ------------------------------------------------------ */ -#Sources table.infolist tbody tr td.ColumnRowLabel { - padding-bottom:0; -} -#Sources table.infolist tbody tr td.ColumnName { - padding:0; -} -#Sources table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; -} -#SourceDetail div#references ol li { - padding-bottom:.5em; -} - -/* Relationships -================================================= */ -table.relationships thead tr th.ColumnMarriage, -table.relationships thead tr th.ColumnDivorce { - width: 13%; -} -table.relationships thead tr th.ColumnHyper { - width: 15%; -} -table.relationships thead tr th.ColumnMedia { - width: 15%; -} -table.relationships tbody tr td.ColumnRowLabel a { - background: none; -} -table.relationships tbody tr td.columnPartner { - font-size: 100%; +table.IndividualList td.ColumnSurname { + background-color: #E0E6E0; } /* Places ----------------------------------------------------- */ -#Places table.infolist tbody tr td.ColumnName { - padding:0; +#Places table.infolist td.ColumnName { + background-color: #E0E6E0; } -#Places table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; +/* 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; + border-top:dashed 1px #9DBF9D; } #EventList table.infolist tr.BeginLetter td { - border-top: solid 1px #9DBF9D; + border-top:solid 1px #9DBF9D; } -#EventList table.infolist tr td a, -#EventDetail table.infolist tr td a { +#EventList table.infolist td.ColumnType { + background-color: #E0E6E0; +} +#EventList td.ColumnPerson a { display: inline; } -#EventList table.infolist tr td span.father, -#EventList table.infolist tr td span.mother, -#EventDetail table.infolist tr td span.father, -#EventDetail table.infolist tr td span.mother { - display: block; -} -#EventList table.infolist tr td span.person:after, -#EventList table.infolist tr td span.father:after, -#EventList table.infolist tr td span.mother:after, -#EventDetail table.infolist tr td span.person:after, -#EventDetail table.infolist tr td span.father:after, -#EventDetail table.infolist tr td span.mother:after { +#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 table.infolist tr td span.person:last-child:after, -#EventList table.infolist tr td span.father:last-child:after, -#EventList table.infolist tr td span.mother:last-child:after, -#EventDetail table.infolist tr td span.person:last-child:after, -#EventDetail table.infolist tr td span.father:last-child:after, -#EventDetail table.infolist tr td span.mother:last-child:after { +#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 ----------------------------------------------------- */ -#Gallery table.infolist tbody tr td.ColumnRowLabel, #Gallery table.infolist tbody tr td.ColumnDate { - padding-bottom:0; -} -#Gallery table.infolist tbody tr td.ColumnName { - padding:0; -} -#Gallery table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; -} -#Gallery table.infolist tbody tr td.ColumnName a:hover { - background-color:#E0E6E0; -} #GalleryNav { - font-size:.8em; - margin:1em 0 0 0; - padding:1.2em 0 0 0; - text-align:center; + text-align: center; + margin: 2em 0px; } #GalleryNav a { - font-weight:bold; - text-decoration:none; - background-color:#E0E6E0; - border:solid 1px #7C8F7C; + font-weight: bold; + background-color: #E0E6E0; + border: solid 1px #7C8F7C; + margin: 1em; } #GalleryNav a:hover { - background-color:#9DBF9D; + background-color: #9DBF9D; } #GalleryNav a#Previous { - padding:.4em .7em .3em .7em; + padding: .4em .7em .3em .7em; } #GalleryNav a#Next { - padding:.4em 1.9em .3em 1.9em; -} -#GalleryPages { - margin:0 1em; + padding: .4em 1.9em .3em 1.9em; } #GalleryCurrent { - font-size:1.2em; - font-weight:bold; + font-size: larger; } #GalleryTotal { - font-weight:normal; + font-weight: normal; } #GalleryDisplay { - margin:0 auto; - padding:0; - position:relative; - overflow:hidden; - text-align:center; - border:solid 1px #7C8F7C; + margin: 0px auto; + position: relative; } #GalleryDisplay img { - margin:0 auto; + margin: 0px auto; + display: block; + border: solid 1px #7C8F7C; } -#GalleryDetail div#summaryarea{ - margin:0; - padding:1.4em 0 0 0; -} -#GalleryDetail div#summaryarea h3 { - text-align:center; -} -#GalleryDetail div h4 { - margin-top:0; -} -#GalleryDetail div#summaryarea table.gallery { - width:100%; - margin-top:1.5em; - margin-bottom:0; - padding-bottom:0; - background-color:#E0E6E0; - border-style:solid; - border-width:8px 0 0 0; - border-color:#9DBF9D; -} - -/* Thumbnail Preview Reference Section -------------------------------------------------- */ -body#ThumbnailPreview div#references { - background-color: #FFF; - color: #00029D; - margin: 0 auto; - padding: 0; - width: 100%; -} -body#ThumbnailPreview div#references table.infolist tbody tr { - border-bottom: dashed 1px #000; -} -body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnRowLabel a { - background: none; - width: 2%; -} -body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnName { - width: 90%; +#GalleryDetail h3 { + text-align: center; } /* Contact ----------------------------------------------------- */ +#Contact { + overflow: hidden; +} #Contact #summaryarea { - width:500px; - margin:2em auto; - padding:3em; - background-color:#E0E6E0; - border:solid 1px #7C8F7C; + width: 40em; + margin: 2em auto; + padding: 3em; + background-color: #E0E6E0; + border: solid 1px #7C8F7C; } -#Contact #summaryarea img { - float:right; - margin:0; - padding:0; - border:solid 1px #7C8F7C; +#Contact img { + float: right; + border: solid 1px #7C8F7C; } -#researcher { - margin-top:.3em; +#Contact #researcher, #Contact #researcher h3 { + font-size: larger; + padding-left: 0px; } -#researcher h3 { - padding:0; -} -#researcher span { - display:block; - float:left; - margin-right:.4em; -} -#streetaddress { - width:85%; -} -#locality, .locality { +#Contact #streetaddress, #Contact #locality, #Contact #email { display: block; - width: 100%; } -#city:after { - content:","; +#Contact #locality, #Contact #city, #Contact #state, #Contact #postalcode, +#Contact #country { + white-space: nowrap; } -#country { - clear:left; -} -#email { - clear:left; -} -#email a { - text-decoration:none; -} -#email a:hover { - text-decoration:underline; +#Contact #city:after { + content: ","; } -/* Download +/* Download ----------------------------------------------------- */ -#Download { - padding:1cm; - height:396px; -} -table.download { - border:solid 2px #000; - width:100%; -} -table.download img { - float:center; -} -table.download thead tr th { - text-align:center; - border:solid 2px #000; - color: #000; - text-transform:uppercase; -} -table.download tbody tr#Row02 { - border-bottom:solid 2px #000; -} -table.download thead tr th, table.download tbody tr td { - padding-left:10px; - padding-top:20px; - border-style:solid; - border-color:#000; - border-width:0 2px 2px 2px; - text-align:left; -} -table.download td.Description { - width: 50%; -} -table.download td.License { - width:8%; -} -table.download td.Filename { - width:30%; -} -table.download td.Filename a { - font-weight:bold; - font-style: italic; - text-decoration:none; -} -table.download td.Filename a:hover { - text-decoration:underline; -} -table.download td.Modified { - width:12%; - font-weight:bold; +#Download table.download a { + display: block; } -/* Subsections +/* Subsection ----------------------------------------------------- */ -#Home, #Introduction, { - padding:1.5em 0 3em 0; +#Home, #Introduction { + overflow: hidden; } -#Home p, #Introduction p, #Contact p { - margin:0 20px 1em 20px; +#Home img, #Introduction img { + float: right; + margin: 1em; + max-width: 950px; } -#Home img, #Introduction img, #Contact img { - float:right; - margin:0; - padding:0 20px 3em 20px; +#Home p, #Introduction p { + padding-left: 15px; } -#Home a, #Introduction a, #Contact a { - color: #000; - text-decoration: none; +.subsection { + clear: both; + overflow: hidden; } -div.subsection{ - padding-bottom:.5em; - background-color:#FFF; -} -div.subsection h4 { - margin-bottom:.5em; -} -div.subsection table, div.subsection ol, div.subsection p, div.subsection > a { - font-size:.9em; -} -div.subsection a { - text-decoration:none; -} -div.subsection a:hover { - text-decoration:underline; - background:none; -} -div.subsection table.infolist { - width:100%; - margin:0; -} -#IndividualDetail div.subsection table tr td:first-child { - padding-left:20px; +.subsection p { + margin: 0px; } -/* Subsections : Summary Area +/* Subsection : Families ----------------------------------------------------- */ -div#summaryarea { - min-height:100px; - background:none; -} -div#summaryarea table.infolist { - margin:0; - padding:0; - background:#FFF; - border-bottom:solid .7em #FFF; -} -div#summaryarea table.infolist tr td, div#summaryarea table.infolist tr td p { - vertical-align:top; -} -div#summaryarea table.infolist tr td a, div#summaryarea table.infolist tr td p a { - display:inline; -} -div#summaryarea table.infolist tbody tr td.ColumnAttribute { - width:14%; - padding-left:20px; -} - -/* Subsections : Events ------------------------------------------------------ */ -div#events { - padding-bottom:0; -} -div#events h4 { - margin-bottom:0; -} -div#events table.infolist { - border-bottom:solid 1px #FFF; -} -div#events table.infolist tbody tr td { - padding-top:.2em; - padding-bottom:.2em; -} -#IndividualDetail div#events table.infolist thead tr th:first-child { - padding-left:20px; -} -div#events table.infolist tbody tr td.ColumnAttribute { - border-bottom:dashed 1px #9DBF9D; -} -div#events table.infolist tbody tr td.ColumnValue { - border-bottom:dashed 1px #9DBF9D; -} -div#events table.infolist tbody tr td.ColumnValue p { - margin:.1em 2em; -} - -/* Subsections : Parents ------------------------------------------------------ */ -div#parents table.infolist tbody tr td.ColumnValue ol { - margin:0; - padding-top:0; -} -div#parents table.infolist tbody tr td.ColumnValue ol li { - padding-bottom:.2em; -} - -/* Subsections : Families ------------------------------------------------------ */ -div#families table.infolist tbody tr td.ColumnValue p { - margin-top:0; -} -div#families table.infolist tbody tr td.ColumnValue ol { - margin:0; - padding-top:0; -} -div#families table.infolist tbody tr td.ColumnValue ol li { - padding-bottom:.2em; -} div#families table.fixed_subtables table.eventlist { - table-layout:fixed; + table-layout: fixed; } div#families table.fixed_subtables table.eventlist th:first-child { - width:9em; + width: 9em; } div#families table.fixed_subtables table.eventlist th:last-child { - width:5em; + width: 5em; +} +div#families table.attrlist td.ColumnType { + color: black; } -/* Subsections : Addresses +/* Subsection : Gallery ----------------------------------------------------- */ -div#addresses { - padding-bottom:0; -} -div#addresses h4 { - margin-bottom:0; -} -div#addresses table.infolist { - border-bottom:solid 1px #FFF; -} -div#addresses table.infolist tbody tr td { - padding-top:.2em; - padding-bottom:.2em; -} -div#addresses table.infolist tbody tr td.ColumnAttribute { - width:30%; - border-bottom:dashed 1px #9DBF9D; -} -div#addresses table.infolist tbody tr td.ColumnValue { - border-bottom:dashed 1px #9DBF9D; -} -div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a { - display: inline; -} - -/* Subsections : Attributes ------------------------------------------------------ */ - -/* Subsections : Gallery ------------------------------------------------------ */ -#indivgallery h4 { - margin-bottom:1em; -} #indivgallery .thumbnail { - margin:0; - float:left; - width:130px; - height:150px; - text-align:center; + float: left; + max-width: 130px; + max-height: 150px; + font-size: smaller; + text-align: center; + margin: 0.8em 0.5em; } -#indivgallery .thumbnail a { - display:block; - margin:0; - padding:0; - background:none; +#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 .thumbnail a img { - margin:0; - padding:0; - border:solid 1px #7C8F7C; +#indivgallery img { + border: solid 1px #7C8F7C; } -#indivgallery div.thumbnail span { -/* ## remove this line and the comment markers from the line below to hide the description in Individual Gallery +#indivgallery span { +/* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery display: none; */ - - font-size:.6em; - text-align:center; - width:80%; - margin:0 auto; - padding:0; } -/* Subsections : Narrative +/* Subsection : Narrative ----------------------------------------------------- */ -div.narrative { - padding-bottom:0; +h4 + div.grampsstylednote, a.familymap { + margin: 1em 15px; } -.narrative p { - margin-top:.5em; - margin-bottom:0; - padding:0 20px 1em 20px; +i + div.grampsstylednote p { + margin: 0px; } -/* Subsections : References +/* Subsection : Family Map ----------------------------------------------------- */ -#references ol { - margin-top:0; - margin-bottom:0; +a.familymap { + display: block; } -/* Subsections : Source References +/* Subsection : Source References ----------------------------------------------------- */ -div#sourcerefs ol { - list-style-type:decimal; -} -div#sourcerefs ol li ol { - list-style-type:lower-alpha; +#sourcerefs ol li ol { + list-style-type: lower-alpha; } -/* Subsections : Weblinks ------------------------------------------------------ */ - -/* Subsections : Pedigree +/* Subsection : Pedigree ----------------------------------------------------- */ .pedigreegen { - font-size:.9em; - list-style:none; - margin:.5em 0 0 0; - padding:0 0 .7em 20px; + list-style-type: none; + padding-left: 15px; } .pedigreegen li ol { - list-style:none; - margin-left:.5em; -} -.pedigreegen li ol li { - padding-bottom:.2em; + list-style-type: none; } .pedigreegen li ol li ol { - list-style:decimal; - margin-left:1.6em; + list-style-type: decimal; } -.pedigreegen li ol li ol li ol.spouselist { - font-size:1em; - list-style:none; - margin-left:0; +.pedigreegen ol.spouselist { + list-style-type: none; } -.spouselist li.spouse ol { - font-size:1em; - list-style:decimal; - margin-left:1.6em; -} -.spouse a { - font-weight:normal; +.pedigreegen ol.spouselist li.spouse ol { + list-style-type: decimal; } .spouse:before { content: "+ "; } .thisperson { - font-weight:bold; + font-weight: bold; +} +.thisperson > ol { + font-weight: normal; } /* Footer ----------------------------------------------------- */ #footer { - clear:both; - width:100%; - font-size:12px; - line-height:130%; - color:#E0E6E0; - margin:0; - padding:0; - background-color:#454; - border-top:solid 1px #454; + clear: both; + color: #E0E6E0; + padding-top: 1em; + background-color: #9DBF9D; + border-top: solid 1px #454; } -#footer a, #footer a:visited { - text-decoration:none; - color:#E0E6E0; +#footer a { + color: #E0E6E0; } -#footer a:hover { - text-decoration:underline; - background:none; -} -#footer img { - border:0; - margin:0 auto; - vertical-align:middle; +#footer > * { + background-color: #454; } #footer p#createdate { - float:left; - width:40%; - text-align:left; - margin-left:10px; + float: left; + width: 50%; + text-align: left; + padding-left: 15px; + margin-top: 1em; } #footer p#copyright { - float:right; - width:40%; - text-align:right; - margin-right:10px; + float: right; + width: 40%; + text-align: right; + padding-right: 15px; } -#footer p#copyright img { - margin-right:10px; -} -#user_footer { - width:70%; - float:left; - margin:1em; -} -#user_footer p { - font:normal 1em/1.2em serif; - margin:0; - padding:0; + +/* Overwritten +----------------------------------------------------- */ +body#FamilyMap { + background-color: #E0E6E0 ! important; } /* Calendar Styles --------------------------------------------------------------------------------------------- */ -/* Calendar : General */ -body#WebCal { - padding:0 14px; - background-color:#454; +===================================================== */ +table.calendar { + table-layout: fixed; + empty-cells: show; } -.calendar { - empty-cells:show; - width:100%; - font-size:1em; - font-weight:normal; - margin:0; - padding:0; - border:none; - border-collapse:collapse; +.calendar thead th { + text-align: center; + border-top-style: none; } -.calendar thead tr th { - width:14%; - font-weight:bold; - font-size:14px; - line-height:14px; - text-align:center; - text-transform:uppercase; - padding:2px 0; +.calendar thead th.monthName { + font-size: xx-large; + font-weight: normal; + background-color: white; + border-bottom-style: none; + padding-top: 1em; } -.calendar thead tr th.monthName { - width:100%; - font-weight:normal; - font-size:2em; - line-height:100%; - text-transform:none; - color:#454; - padding:.3em 0 .2em 0; - background-color:#FFF; - border-bottom-width:0; +.calendar thead th abbr { + border-bottom-style: none; } -body#WebCal #CreatorInfo { - float:right; - font-size:12px; - margin:-24px 10px 0 0; +#CreatorInfo { + float: right; + margin: -1em 15px 0px 0px; + font-weight: bold; + color: #7C8F7C; } -body#WebCal #CreatorInfo a, body#WebCal #CreatorInfo a:hover { - color:#E0E6E0; - background:none; -} -.calendar thead tr th.weekend, -.calendar thead tr th.weekday { - color:#FFF; - background-color:#7C8F7C; - border-style:solid; - border-width:0 0 1px 0; - border-color:#9DBF9D; -} -.calendar thead tr th.saturday, -.calendar thead tr th.sunday { } .calendar tfoot tr td { - padding:.7em 5% 1em 5%; - border-top:solid 4px #9DBF9D; -} -.calendar tfoot tr td.note { - height:1cm; - vertical-align:middle; - color:#454; - background-color:#E0E6E0; + border-top: solid 4px #7C8F7C; + vertical-align: middle; } /* Calendar : Date Numeral */ -.calendar tbody tr td div.date { - float:right; - display:block; - width:1.8em; - font-weight:bold; - font-size:1em; - line-height:100%; - text-align:center; - color:#454; - margin:0 0 0 .5em; - padding:.2em 0; - background-color:#9DBF9D; +.calendar div.date { + float: right; + width: 1.8em; + font-size: large; + text-align: center; + background-color: #9DBF9D; + color: #454; } /* Calendar : Date Container */ -.calendar tbody tr td { - vertical-align:top; - height:10em; - padding:0; - border-width:1px 0 0 1px; - border-style:solid; - border-color:#9DBF9D; +.calendar td { + padding: 0px 0px 0px 1ex; + border-width: 1px 0px 0px 1px; + border-style: solid; + border-color: #9DBF9D; + background-color: white; } -.calendar tbody tr td.weekday { - background-color:#FFF; -} -.calendar tbody tr td.weekend { - background-color:#E0E6E0; -} -.calendar tbody tr td.saturday { - - } -.calendar tbody tr td.sunday { - border-left:none; +.calendar td:first-child { + border-left-style: none; + padding: 0px 0px 0px 1ex; } .calendar tbody tr:first-child td { - border-top:none; + border-top-style: none; } /* Calendar : Date Detail */ -.calendar tbody tr td ul { - list-style:none; - font-family:sans-serif; - font-size:.8em; - margin:2.3em 0 .3em 0; - padding:0; +.calendar td ul { + font-size: smaller; + list-style: none; + padding: 0px; } -.calendar tbody tr td ul li { - display:block; - width:92%; - margin:0 4%; - padding:.2em 0 .3em 0; - border-top:dashed 1px #C1B398; +.calendar td ul li { + border-top: dashed 1px #9DBF9D; + padding-top: 0.5em; + padding-bottom: 0.5em; } -.calendar tbody tr td ul li:first-child { - border:none; +.calendar td ul li:first-child { + border-style: none; } /* Calendar : Birthday, Anniversary, Highlight */ -.calendar tbody tr td ul li em { - font-style:normal; - color:#0A65B5; +.calendar td ul li em { + font-style: normal; + color: #7C8F7C; } -.calendar tbody tr td ul li span.yearsmarried em { - color:#453619; +.calendar td.highlight { + background-color: #E0E6E0; } -.calendar tbody tr td.highlight { - background-color:#E5F2FE; -} -.calendar tbody tr td.highlight div.date { - color:#0A65B5; - background-color:#C2E1FE; +.calendar td.highlight div.date { + color: black; + background-color: #9DBF9D; } /* Calendar : Previous-Next Month */ -.calendar tbody tr td.previous, -.calendar tbody tr td.next, -.calendar tbody tr td.previous div.date, -.calendar tbody tr td.next div.date { - color:#9DBF9D; - background-color:#E0E6E0; +.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; } diff --git a/src/plugins/webstuff/css/Web_Basic-Lilac.css b/src/plugins/webstuff/css/Web_Basic-Lilac.css index 16cded625..88b12303f 100644 --- a/src/plugins/webstuff/css/Web_Basic-Lilac.css +++ b/src/plugins/webstuff/css/Web_Basic-Lilac.css @@ -10,6 +10,7 @@ Note: Adapted from GRAMPS original Modern Style stylesheet with colors from the 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. @@ -19,6 +20,7 @@ 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. @@ -36,1216 +38,669 @@ GRAMPS. If not, see . Color Palette -------------------------------------------------------------------------------------------------- + black #000 lilac dark #2E2E61 lilac #669 lilac light #B4B4CB lilac very light #E0E0E9 white #FAFAFF -------------------------------------------------------------------------------------------- - +-------------------------------------------------------------------------------------------------- +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. +-------------------------------------------------------------------------------------------------- # $Id$ NarrativeWeb Styles --------------------------------------------------------------------------------------------- +------------------------------------------------------------------------------------------------ General Elements ----------------------------------------------------- */ body { - font-family:sans-serif; - color:#000; - margin:0; - padding:0; - background-color:#FAFAFF; + font-family: sans-serif; + font-size: 90%; + color: black; + margin: 0px; + background-color: #E0E0E9; } -div { - margin:0; - padding:0; -} -img { - border:none; - margin:0; -} -.thumbnail a:hover { - background:none; +body > div { + clear: both; } .content { - padding-top: 1cm; - background-color:#FAFAFF; + background-color: #FAFAFF; + border-top: solid 1px #669; } .content div.snapshot { - float:right; - margin:20px; - padding:0; - background:none; -} -.content div.snapshot div.thumbnail { - margin:0; - padding:0; - background:none; + float: right; + margin: 2em; } .fullclear { - width:100%; - height:1px; - margin:0; - padding:0; - clear:both; + clear: both; } /* General Text ----------------------------------------------------- */ h1 { - font-size:1.4em; - font-weight:bold; - margin:0; -} -h2 { - display:none; + font-size: x-large; + font-weight: bold; + padding-left: 15px; } h3 { - font-size:1.2em; - font-weight:bold; - margin-left:12px; - text-align:left; - margin:0; - padding:.5em 20px .2em 20px; + font-size: large; + padding-left: 15px; } h4 { - font-size:.8em; - color:#2E2E61; - margin:0; - padding:.2em 0 .2em 20px; - background-color:#E0E0E9; - border-bottom:solid 1px #669; -} -h5, h6 { - font-style:italic; - margin:1.3em 0 .5em 1em; -} -p { - font-size:14px; - line-height:17px; - margin:0; + font-size: medium; + color: #2E2E61; + background-color: #B4B4CB; + padding-left: 15px; + margin-bottom: 0px; + border-bottom: solid 1px #669; } p#description { - padding:0 15px 1em 15px; + padding-left: 15px; } -p a:link { - text-decoration:underline; +a { + color: black; + text-decoration: none; } -sup { - line-height:0; -} -ol { -} -ol li a { - text-decoration:none; -} -a:link { - color:#000; - text-decoration:underline; -} -a:hover, a:active { - background-color:#E0E0E9; - color:#000; - text-decoration:underline; -} -a:visited { - color:#000; - text-decoration:underline; +a[href]:hover, a[href]:active { + background-color: #E0E0E9 } .grampsid { - font:normal .8em/1.2em monospace; - color:#669; + font-family: monospace; + font-size: smaller; + color: #669; } /* Header ----------------------------------------------------- */ -#header { - padding:15px 15px 2px 15px; - margin:0; - background-color:#E0E0E9; -} #SiteTitle { - color:#2E2E61; - margin:0 0 3px 0; + color: #2E2E61; } -#header p { - font-size:1em; - font-weight:bold; - color:#669; - margin:0; +#user_header, #user_footer { + padding-left: 15px; } /* Navigation ----------------------------------------------------- */ #navigation, #subnavigation { - margin:0; - padding:4px 0 0 0; - background-color:#E0E0E9; + border: solid 1px #E0E0E9; /* needed by IE7 */ +} +#subnavigation ul { + overflow: hidden; } #navigation ul, #subnavigation ul { - list-style:none; - min-width:770px; - height:22px; - margin:0; - padding:0 0 0 12px; - border-bottom:1px solid #669; + list-style: none; + margin: 0px; + padding-left: 15px; +} +#subnavigation ul { + border-bottom: solid 1px #669; } #navigation ul li, #subnavigation ul li { - margin:0; - padding:0; - float:left; + float: left; } #navigation ul li a, #subnavigation ul li a { - display:block; - font-size:12px; - line-height:100%; - font-weight:bold; - text-decoration:none; - margin:0; - padding:5px 5px; - background-color:#E0E0E9; + display: block; + font-size: smaller; + font-weight: bold; + padding: 5px; + border-bottom: solid 1px #E0E0E9; } #navigation ul li a:hover, #subnavigation ul li a:hover { - background-color:#B4B4CB; - border-bottom:solid 1px #000; + text-decoration: none; + background-color: #B4B4CB; + border-bottom: solid 1px black; } -#navigation ul li.CurrentSection a, #subnavigation ul li.CurrentSection a { - padding-bottom:4px; - border-top:solid 1px #669; - border-right:solid 1px #669; - border-left:solid 1px #669; - border-bottom:solid 1px #FAFAFF; - background-color:#FAFAFF; -} -#navigation ul li.CurrentSection a:hover { - background-color:#FAFAFF; +#navigation ul li.CurrentSection a { + position: relative; + top: 1px; + border: solid 1px #669; + border-bottom-style: none; + background-color: #FAFAFF; } #subnavigation ul li.CurrentSection a { - border-width:0 0 1px 0; + background-color: #FAFAFF; } /* Alphabet Navigation ----------------------------------------------------- */ -div#alphabet { - width: 100%; - margin: 0; +#alphabet { background-color: #E0E0E9; } -div#alphabet ul { - list-style:none; - min-width:770px; - height:24px; - margin:0; - padding: 0px 0px 0px 16px; +#alphabet ul { + list-style: none; border-width: 2px 0px 4px 0px; border-style: solid; - border-color: #000; + border-color: black; + margin: 0px; + padding-left: 15px; + /* float container stretch, see www.quirksmode.org/css/clearing.html */ + overflow: hidden; } -div#alphabet ul li:after { - content:" |"; +#alphabet ul li { + float: left; + font-size: larger; + font-weight: bold; } -div#alphabet ul li { - margin:0; - float:left; +#alphabet ul li:after { + content: " |"; } -div#alphabet ul li a { - display:block; - padding: 4px 8px 4px 8px; - float:left; - font:bold 16px/100% sans; - margin:0; - text-decoration:none; - color: #000; +#alphabet ul li a { + display: block; + padding: 4px 8px; + line-height: 100%; + float: left; } -div#alphabet ul li a:hover { - background-color: #000; - color: #FFF; +#alphabet ul li a:hover { + text-decoration: none; + background-color: black; + color: #FAFAFF; } /* Main Table ----------------------------------------------------- */ table { - font-size:14px; - margin:0 15px; - padding:0; - border:none; - border-collapse:collapse; + border-collapse: collapse; + width: 100%; +} +div#summaryarea > table.infolist, +div#parents > table.infolist, +h3 + table.infolist { + width: auto; } table tr th { - font-weight: bold; text-align: left; - margin:0; - padding:.1em 10px; - background-color:#B4B4CB; - border-top:solid 1px #669; - border-bottom:solid 1px #669; + background-color: #E0E0E9; + border-top: solid 1px #669; + border-bottom: solid 1px #669; } -table.infolist tr th:first-child { - border-left:solid 1px #669; +table tr th:first-child { + border-left: solid 1px #669; } -table.infolist tr th:last-child { - border-right:solid 1px #669; +table tr th:last-child { + border-right: solid 1px #669; } -table.infolist tr th a { - text-decoration:none; +table.primobjlist tr th { + background-color: #B4B4CB; } -table tr td { - vertical-align:middle; - padding:.1em 10px; +table td, table th { + vertical-align: top; + padding-left: 1ex; } -table.infolist tr td a { - display:block; - text-decoration:none; +table.primobjlist td { + vertical-align: middle; } -table.infolist tr.BeginLetter td, table.infolist tr.BeginSurname td { - border-top:solid 1px #B4B4CB; +table td:first-child, table th:first-child { + padding-left: 15px; } -table.infolist tr th.ColumnQuantity { - width:30%; +table.primobjlist tr a { + display: block; /* make whole td clickable */ } -table.infolist tr td.ColumnLetter { - font-weight:bold; +table.primobjlist tr.BeginLetter td, table.primobjlist tr.BeginSurname td { + border-top: solid 1px #B4B4CB; } -table.infolist tbody tr td.ColumnBirth { - font-size:.9em; - width:10%; +td.ColumnLetter, td.ColumnRowLabel { + font-weight: bold; } -table.infolist tbody tr td.ColumnDeath { - font-size:.9em; - width:10%; +td.ColumnBirth, td.ColumnDeath, td.ColumnPartner, td.ColumnParents { + font-size: 90%; } -table.infolist tbody tr td.ColumnRowLabel { - font-weight:bold; - width:2%; +table.infolist tr td ol { + margin: 0px; } -table.infolist tbody tr td.ColumnType { - width:6%; - padding-left:20px; +#summaryarea table.infolist td.ColumnAttribute, +#parents table.infolist td.ColumnAttribute, +#families table.infolist td.ColumnType, +#families table.infolist td.ColumnAttribute { + color: #2E2E61; } -table.infolist tbody tr td.ColumnPartner { - font-size:.9em; +/* div summaryarea is missing for events, sources and repos! */ +h3 + table.infolist td.ColumnAttribute { + color: #2E2E61; } -table.infolist tbody tr td.ColumnParents { - font-size:.9em; -} -table.infolist tbody tr td.ColumnParents span.father, table.infolist tbody tr td.ColumnParents span.mother { - display:block; -} -table.infolist tbody tr td.ColumnParents span.mother:before { - content:"+ "; -} -table.infolist tbody p.EventNote { - border-top:dashed 1px #B4B4CB; - padding-top:1em; - padding-bottom:1em; +table.primobjlist td.ColumnParents span.mother:before { + content: "+ "; } /* Surnames ----------------------------------------------------- */ -#Surnames { } -#SurnameDetail p#description { padding-top:0; } -table.surnamelist tbody tr td.ColumnSurname { - width:50%; +table#SortByName td.ColumnSurname, table#SortByName th.ColumnSurname, +table#SortByCount td.ColumnQuantity, table#SortByCount th.ColumnQuantity { + background-color: #E0E0E9; } -table.surnamelist thead tr th.ColumnSurname { - padding:0; +table#SortByName td.ColumnSurname a[href]:hover { + background-color: #B4B4CB; } -table.surnamelist thead tr th.ColumnQuantity { - width:40%; - padding:0; +/* 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.infolist thead tr th.ColumnSurname a, table.infolist thead tr th.ColumnQuantity a { - display:block; - padding:.1em 10px; +table#SortByName td.ColumnSurname > a, +table#SortByName th.ColumnSurname > a, +table#SortByName th.ColumnQuantity > a { + padding-left: 1ex; } -table#SortByName thead tr th.ColumnSurname a, table#SortByCount thead tr th.ColumnQuantity a { - background-color:#E0E0E9; +table#SortByName thead th.ColumnSurname a:after, +table#SortByCount thead th.ColumnQuantity a:after { + content: " \2193"; } -table#SortByName thead tr th.ColumnSurname a:after, table#SortByCount thead tr th.ColumnQuantity a:after { - content:" ↓"; +table.surname td.ColumnName { + background-color: #E0E0E9; } -table.infolist tbody tr td.ColumnSurname { - padding:0; - background-color:#E0E0E9; +table.surname td.ColumnName a[href]:hover { + background-color: #B4B4CB; } -table.infolist tbody tr td.ColumnSurname a { - padding:.1em 10px; +/* make the whole cell light up on hover not just the a. */ +table.surname td.ColumnName { + padding-left: 0px; } -table.infolist tbody tr td.ColumnSurname a:hover { - padding:.1em 10px; - background-color:#B4B4CB; -} -table.surname { - border-bottom:solid 1px #E0E0E9; -} -table.surname tbody tr td { - border-bottom:dashed 1px #B4B4CB; -} -table.surname tbody tr td.ColumnName { - width:20%; - padding:0; - background-color:#E0E0E9; -} -table.surname tbody tr td.ColumnName a { - display:block; - padding:.6em 10px .6em 20px; -} -table.surname tbody tr td.ColumnName a:hover { - background-color:#B4B4CB; -} -table.surname tbody tr td.ColumnName a span.grampsid { - display:none; -} -table.surname thead tr th.ColumnParents, table.surname tbody tr td.ColumnParents { - width:25%; +table.surname td.ColumnName > a { + padding-left: 15px; } /* Individuals ----------------------------------------------------- */ -#Individuals { } -#Individuals table.individuallist { - border-bottom:solid 1px #E0E0E9; -} -#Individuals table.individuallist tbody tr td { - border-bottom:dashed 1px #B4B4CB; -} -#Individuals table.individuallist tbody tr td a:hover { - text-decoration:none; -} -table.individuallist tbody tr td.ColumnSurname { - background:none; -} -table.individuallist tbody tr td.ColumnSurname a:hover, table.individuallist tbody tr td.ColumnSurname a:active { - cursor:default; - color:black; - background:none; -} -table.individuallist tbody tr td.ColumnName { - padding:0; - background-color:#E0E0E9; -} -table.individuallist tbody tr td.ColumnName a { - display:block; - padding:.6em 10px; - vertical-align:middle; -} -table.individuallist tbody tr td.ColumnName a:hover { - background-color:#B4B4CB; -} -#Individuals div table.infolist tr td p { - vertical-align:top; -} -#Individuals div table.infolist tr td p a { - display:inline; -} - -/* IndividualDetail ------------------------------------------------------- */ -#IndividualDetail { - background-color:#E0E0E9; -} -#IndividualDetail div table.infolist tr td { - font:normal .9em/1.2em sans-serif; - vertical-align:top; -} -#IndividualDetail div table.infolist tr td a { - display:inline; -} -#IndividualDetail table.infolist tr td a:hover { - text-decoration:underline; -} -#IndividualDetail table.infolist tbody tr td.ColumnAttribute { - width:10%; - color:#696969; -} -#IndividualDetail div.subsection table tr td:first-child { - padding-left:20px; -} -#familymap a.familymap { - margin-left:20px; -} - -/* Subsections : Attributes ------------------------------------------------------ */ -div#attributes { - margin: 0; - padding: 0; -} -table.attrlist { - width: 100%; -} -table.attrlist thead tr th { - background-color: #70B1ED; - color: #000; -} -table.attrlist tbody tr td { - border-bottom: dashed 1px #000; -} -table.attrlist tbody tr td.ColumnType { - width: 15%; -} -table.attrlist tbody tr td.ColumnValue { - width: 15%; -} -table.attrlist tbody tr td.ColumnNotes { - width: 40%; -} -table.attrlist tbody tr td.ColumnSources { - width: 10%; -} - -/* Sources ------------------------------------------------------ */ -#Sources table.infolist tbody tr td.ColumnRowLabel { - padding-bottom:0; -} -#Sources table.infolist tbody tr td.ColumnName { - padding:0; -} -#Sources table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; -} -#SourceDetail div#references ol li { - padding-bottom:.5em; -} - -/* Relationships -================================================= */ -table.relationships thead tr th.ColumnMarriage, -table.relationships thead tr th.ColumnDivorce { - width: 13%; -} -table.relationships thead tr th.ColumnHyper { - width: 15%; -} -table.relationships thead tr th.ColumnMedia { - width: 15%; -} -table.relationships tbody tr td.ColumnRowLabel a { - background: none; -} -table.relationships tbody tr td.ColumnPartner { - font-size: 100%; +table.IndividualList td.ColumnSurname { + background-color: #E0E0E9; } /* Places ----------------------------------------------------- */ -#Places table.infolist tbody tr td.ColumnName { - padding:0; +#Places table.infolist td.ColumnName { + background-color: #E0E0E9; } -#Places table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; +#Places table.infolist td.ColumnName a[href]:hover { + background-color: #B4B4CB; +} +/* 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 #B4B4CB; + border-top:dashed 1px #B4B4CB; } #EventList table.infolist tr.BeginLetter td { - border-top: solid 1px #B4B4CB; + border-top:solid 1px #B4B4CB; } -#EventList table.infolist tr td a, -#EventDetail table.infolist tr td a { +#EventList table.infolist td.ColumnType { + background-color: #E0E0E9; +} +#EventList td.ColumnPerson a { display: inline; } -#EventList table.infolist tr td span.father, -#EventList table.infolist tr td span.mother, -#EventDetail table.infolist tr td span.father, -#EventDetail table.infolist tr td span.mother { - display: block; -} -#EventList table.infolist tr td span.person:after, -#EventList table.infolist tr td span.father:after, -#EventList table.infolist tr td span.mother:after, -#EventDetail table.infolist tr td span.person:after, -#EventDetail table.infolist tr td span.father:after, -#EventDetail table.infolist tr td span.mother:after { +#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 table.infolist tr td span.person:last-child:after, -#EventList table.infolist tr td span.father:last-child:after, -#EventList table.infolist tr td span.mother:last-child:after, -#EventDetail table.infolist tr td span.person:last-child:after, -#EventDetail table.infolist tr td span.father:last-child:after, -#EventDetail table.infolist tr td span.mother:last-child:after { +#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 ----------------------------------------------------- */ -#Gallery table.infolist tbody tr td.ColumnRowLabel, #Gallery table.infolist tbody tr td.ColumnDate { - padding-bottom:0; -} -#Gallery table.infolist tbody tr td.ColumnName { - padding:0; -} -#Gallery table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; -} -#Gallery table.infolist tbody tr td.ColumnName a:hover { - background-color:#E0E0E9; -} #GalleryNav { - font-size:.8em; - margin:1em 0 0 0; - padding:1.2em 0 0 0; - text-align:center; + text-align: center; + margin: 2em 0px; } #GalleryNav a { - font-weight:bold; - text-decoration:none; - background-color:#E0E0E9; - border:solid 1px #669; + font-weight: bold; + background-color: #E0E0E9; + border: solid 1px #669; + margin: 1em; } #GalleryNav a:hover { - background-color:#B4B4CB; + background-color: #B4B4CB; } #GalleryNav a#Previous { - padding:.4em .7em .3em .7em; + padding: .4em .7em .3em .7em; } #GalleryNav a#Next { - padding:.4em 1.9em .3em 1.9em; -} -#GalleryPages { - margin:0 1em; + padding: .4em 1.9em .3em 1.9em; } #GalleryCurrent { - font-size:1.2em; - font-weight:bold; + font-size: larger; } #GalleryTotal { - font-weight:normal; + font-weight: normal; } #GalleryDisplay { - margin:0 auto; - padding:0; - position:relative; - overflow:hidden; - text-align:center; - border:solid 1px #669; + margin: 0px auto; + position: relative; } #GalleryDisplay img { - margin:0 auto; + margin: 0px auto; + display: block; + border: solid 1px #669; } -#GalleryDetail div#summaryarea{ - margin:0; - padding:1.4em 0 0 0; -} -#GalleryDetail div#summaryarea h3 { - text-align:center; -} -#GalleryDetail div h4 { - margin-top:0; -} -#GalleryDetail div#summaryarea table.gallery { - width:100%; - margin-top:1.5em; - margin-bottom:0; - padding-bottom:0; - background-color:#E0E0E9; - border-style:solid; - border-width:8px 0 0 0; - border-color:#B4B4CB; -} - -/* Thumbnail Preview Reference Section -------------------------------------------------- */ -body#ThumbnailPreview div#references { - background-color: #FFF; - color: #00029D; - margin: 0 auto; - padding: 0; - width: 100%; -} -body#ThumbnailPreview div#references table.infolist tbody tr { - border-bottom: dashed 1px #000; -} -body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnRowLabel a { - background: none; - width: 2%; -} -body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnName { - width: 90%; +#GalleryDetail h3 { + text-align: center; } /* Contact ----------------------------------------------------- */ +#Contact { + overflow: hidden; +} #Contact #summaryarea { - width:500px; - margin:2em auto; - padding:3em; - background-color:#E0E0E9; - border:solid 1px #669; + width: 40em; + margin: 2em auto; + padding: 3em; + background-color: #E0E0E9; + border: solid 1px #669; } -#Contact #summaryarea img { - float:right; - margin:0; - padding:0; - border:solid 1px #669; +#Contact img { + float: right; + border: solid 1px #669; } -#researcher { - margin-top:.3em; +#Contact #researcher, #Contact #researcher h3 { + font-size: larger; + padding-left: 0px; } -#researcher h3 { - padding:0; -} -#researcher span { - display:block; - float:left; - margin-right:.4em; -} -#streetaddress { - width:85%; -} -#locality, .locality { +#Contact #streetaddress, #Contact #locality, #Contact #email { display: block; - width: 100%; } -#city:after { - content:","; +#Contact #locality, #Contact #city, #Contact #state, #Contact #postalcode, +#Contact #country { + white-space: nowrap; } -#country { - clear:left; -} -#email { - clear:left; -} -#email a { - text-decoration:none; -} -#email a:hover { - text-decoration:underline; +#Contact #city:after { + content: ","; } -/* Download +/* Download ----------------------------------------------------- */ -#Download { - padding:1cm; - height:396px; -} -table.download { - border:solid 2px #000; - width:100%; -} -table.download img { - float:center; -} -table.download thead tr th { - text-align:center; - border:solid 2px #000; - color: #000; - text-transform:uppercase; -} -table.download tbody tr#Row02 { - border-bottom:solid 2px #000; -} -table.download thead tr th, table.download tbody tr td { - padding-left:10px; - padding-top:20px; - border-style:solid; - border-color:#000; - border-width:0 2px 2px 2px; - text-align:left; -} -table.download td.Description { - width: 50%; -} -table.download td.License { - width:8%; -} -table.download td.Filename { - width:30%; -} -table.download td.Filename a { - font-weight:bold; - font-style: italic; - text-decoration:none; -} -table.download td.Filename a:hover { - text-decoration:underline; -} -table.download td.Modified { - width:12%; - font-weight:bold; +#Download table.download a { + display: block; } -/* Subsections +/* Subsection ----------------------------------------------------- */ -#Home, #Introduction, #Contact { - padding:1.5em 0 3em 0; +#Home, #Introduction { + overflow: hidden; } -#Home p, #Introduction p, #Contact p { - margin:0 20px 1em 20px; +#Home img, #Introduction img { + float: right; + margin: 1em; + max-width: 950px; } -#Home img, #Introduction img, #Contact img { - float:right; - margin:0; - padding:0 20px 3em 20px; +#Home p, #Introduction p { + padding-left: 15px; } -#Home a, #Introduction a, #Contact a { - color: #000; - text-decoration: none; +.subsection { + clear: both; + overflow: hidden; } -div.subsection{ - padding-bottom:.5em; - background-color:#FAFAFF; -} -div.subsection h4 { - margin-bottom:.5em; -} -div.subsection table, div.subsection ol, div.subsection p, div.subsection > a { - font-size:.9em; -} -div.subsection a { - text-decoration:none; -} -div.subsection a:hover { - text-decoration:underline; - background:none; -} -div.subsection table.infolist { - width:100%; - margin:0; -} -#IndividualDetail div.subsection table tr td:first-child { - padding-left:20px; +.subsection p { + margin: 0px; } -/* Subsections : Summary Area +/* Subsection : Families ----------------------------------------------------- */ -div#summaryarea { - min-height:100px; - background:none; -} -div#summaryarea table.infolist { - margin:0; - padding:0; - background:#FAFAFF; - border-bottom:solid .7em #FAFAFF; -} -div#summaryarea table.infolist tr td, div#summaryarea table.infolist tr td p { - vertical-align:top; -} -div#summaryarea table.infolist tr td a, div#summaryarea table.infolist tr td p a { - display:inline; -} -div#summaryarea table.infolist tbody tr td.ColumnAttribute { - width:14%; - padding-left:20px; -} - -/* Subsections : Events ------------------------------------------------------ */ -div#events { - padding-bottom:0; -} -div#events h4 { - margin-bottom:0; -} -div#events table.infolist { - border-bottom:solid 1px #FAFAFF; -} -div#events table.infolist tbody tr td { - padding-top:.2em; - padding-bottom:.2em; -} -#IndividualDetail div#events table.infolist thead tr th:first-child { - padding-left:20px; -} -div#events table.infolist tbody tr td.ColumnAttribute { - border-bottom:dashed 1px #B4B4CB; -} -div#events table.infolist tbody tr td.ColumnValue { - border-bottom:dashed 1px #B4B4CB; -} -div#events table.infolist tbody tr td.ColumnValue p { - margin:.1em 2em; -} - -/* Subsections : Parents ------------------------------------------------------ */ -div#parents table.infolist tbody tr td.ColumnValue ol { - margin:0; - padding-top:0; -} -div#parents table.infolist tbody tr td.ColumnValue ol li { - padding-bottom:.2em; -} - -/* Subsections : Families ------------------------------------------------------ */ -div#families table.infolist tbody tr td.ColumnValue p { - margin-top:0; -} -div#families table.infolist tbody tr td.ColumnValue ol { - margin:0; - padding-top:0; -} -div#families table.infolist tbody tr td.ColumnValue ol li { - padding-bottom:.2em; -} div#families table.fixed_subtables table.eventlist { - table-layout:fixed; + table-layout: fixed; } div#families table.fixed_subtables table.eventlist th:first-child { - width:9em; + width: 9em; } div#families table.fixed_subtables table.eventlist th:last-child { - width:5em; + width: 5em; +} +div#families table.attrlist td.ColumnType { + color: black; } -/* Subsections : Addresses +/* Subsection : Gallery ----------------------------------------------------- */ -div#addresses { - padding-bottom:0; -} -div#addresses h4 { - margin-bottom:0; -} -div#addresses table.infolist { - border-bottom:solid 1px #FAFAFF; -} -div#addresses table.infolist tbody tr td { - padding-top:.2em; - padding-bottom:.2em; -} -div#addresses table.infolist tbody tr td.ColumnAttribute { - width:30%; - border-bottom:dashed 1px #B4B4CB; -} -div#addresses table.infolist tbody tr td.ColumnValue { - border-bottom:dashed 1px #B4B4CB; -} -div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a{ - display: inline; -} - -/* Subsections : Attributes ------------------------------------------------------ */ - -/* Subsections : Gallery ------------------------------------------------------ */ -#indivgallery h4 { - margin-bottom:1em; -} #indivgallery .thumbnail { - margin:0; - float:left; - width:130px; - height:150px; - text-align:center; + float: left; + max-width: 130px; + max-height: 150px; + font-size: smaller; + text-align: center; + margin: 0.8em 0.5em; } -#indivgallery .thumbnail a { - display:block; - margin:0; - padding:0; - background:none; +#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 .thumbnail a img { - margin:0; - padding:0; - border:solid 1px #669; +#indivgallery img { + border: solid 1px #669; } -#indivgallery div.thumbnail span { -/* ## remove this line and the comment markers from the line below to hide the description in Individual Gallery +#indivgallery span { +/* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery display: none; */ - - font-size:.6em; - text-align:center; - width:80%; - margin:0 auto; - padding:0; } -/* Subsections : Narrative +/* Subsection : Narrative ----------------------------------------------------- */ -div.narrative { - padding-bottom:0; +h4 + div.grampsstylednote, a.familymap { + margin: 1em 15px; } -.narrative p { - margin-top:.5em; - margin-bottom:0; - padding:0 20px 1em 20px; +i + div.grampsstylednote p { + margin: 0px; } -/* Subsections : References +/* Subsection : Family Map ----------------------------------------------------- */ -#references ol { - margin-top:0; - margin-bottom:0; +a.familymap { + display: block; } -/* Subsections : Source References +/* Subsection : Source References ----------------------------------------------------- */ -div#sourcerefs ol { - list-style-type:decimal; -} -div#sourcerefs ol li ol { - list-style-type:lower-alpha; +#sourcerefs ol li ol { + list-style-type: lower-alpha; } -/* Subsections : Weblinks ------------------------------------------------------ */ - -/* Subsections : Pedigree +/* Subsection : Pedigree ----------------------------------------------------- */ .pedigreegen { - font-size:.9em; - list-style:none; - margin:.5em 0 0 0; - padding:0 0 .7em 20px; + list-style-type: none; + padding-left: 15px; } .pedigreegen li ol { - list-style:none; - margin-left:.5em; -} -.pedigreegen li ol li { - padding-bottom:.2em; + list-style-type: none; } .pedigreegen li ol li ol { - list-style:decimal; - margin-left:1.6em; + list-style-type: decimal; } -.pedigreegen li ol li ol li ol.spouselist { - font-size:1em; - list-style:none; - margin-left:0; +.pedigreegen ol.spouselist { + list-style-type: none; } -.spouselist li.spouse ol { - font-size:1em; - list-style:decimal; - margin-left:1.6em; -} -.spouse a { - font-weight:normal; +.pedigreegen ol.spouselist li.spouse ol { + list-style-type: decimal; } .spouse:before { content: "+ "; } .thisperson { - font-weight:bold; + font-weight: bold; +} +.thisperson > ol { + font-weight: normal; } /* Footer ----------------------------------------------------- */ #footer { - clear:both; - width:100%; - font-size:12px; - line-height:130%; - color:#2E2E61; - margin:0; - padding:15px 0 0 0; - background-color:#B4B4CB; - border-top:solid 1px #2E2E61; + clear: both; + padding-top: 1em; + background-color: #B4B4CB; + border-top: solid 1px #2E2E61; } -#footer a, #footer a:visited { - text-decoration:none; - color:#2E2E61; -} -#footer a:hover { - text-decoration:underline; -} -#footer img { - border:0; - margin:0; - vertical-align:middle; +#footer > * { + background-color: #E0E0E9; } #footer p#createdate { - float:left; - width:40%; - text-align:left; - margin-left:10px; + float: left; + width: 50%; + text-align: left; + padding-left: 15px; + margin-top: 1em; } #footer p#copyright { - float:right; - width:40%; - text-align:right; - margin-right:10px; + float: right; + width: 40%; + text-align: right; + padding-right: 15px; } -#footer p#copyright img { - margin-right:10px; +#footer a[href]:hover { + background-color: #B4B4CB; } -#user_footer { - width:70%; - float:left; - margin:1em; -} -#user_footer p { - font:normal 1em/1.2em serif; - margin:0; - padding:0; + +/* Overwritten +----------------------------------------------------- */ +body#FamilyMap { + background-color: #E0E0E9 ! important; } /* Calendar Styles --------------------------------------------------------------------------------------------- */ -/* Calendar : General */ -body#WebCal { - padding:0 14px; - background-color:#2E2E61; +===================================================== */ +table.calendar { + table-layout: fixed; + empty-cells: show; } -.calendar { - empty-cells:show; - width:100%; - font-size:1em; - font-weight:normal; - margin:0; - padding:0; - border:none; - border-collapse:collapse; +.calendar thead th { + text-align: center; + border-top-style: none; } -.calendar thead tr th { - width:14%; - font-weight:bold; - font-size:14px; - line-height:14px; - text-align:center; - text-transform:uppercase; - padding:2px 0; +.calendar thead th.monthName { + font-size: xx-large; + font-weight: normal; + background-color: #FAFAFF; + border-bottom-style: none; + padding-top: 1em; } -.calendar thead tr th.monthName { - width:100%; - font-weight:normal; - font-size:2em; - line-height:100%; - text-transform:none; - color:#2E2E61; - padding:.3em 0 .2em 0; - background-color:#FFF; - border-bottom-width:0; +.calendar thead th abbr { + border-bottom-style: none; } -body#WebCal #CreatorInfo { - float:right; - font-size:12px; - margin:-24px 10px 0 0; +#CreatorInfo { + float: right; + margin: -1em 15px 0px 0px; + font-weight: bold; + color: #669; } -.calendar thead tr th.weekend, -.calendar thead tr th.weekday { - color:#2E2E61; - background-color:#EEE; - border-style:solid; - border-width:0 0 1px 0; - border-color:#B4B4CB; -} -.calendar thead tr th.saturday, -.calendar thead tr th.sunday { } -.calendar tfoot tr td { - padding:.7em 5% 1em 5%; - border-top:solid 4px #B4B4CB; +#CreatorInfo a[href]:hover { + background-color: #B4B4CB; } .calendar tfoot tr td { - vertical-align:middle; - color:#2E2E61; - background-color:#EEE; + border-top: solid 4px #669; + vertical-align: middle; } /* Calendar : Date Numeral */ -.calendar tbody tr td div.date { - float:right; - display:block; - width:1.8em; - font-weight:bold; - font-size:1em; - line-height:100%; - text-align:center; - color:#2E2E61; - margin:0 0 0 .5em; - padding:.2em 0; - background-color:#B4B4CB; +.calendar div.date { + float: right; + width: 1.8em; + font-size: large; + text-align: center; + background-color: #B4B4CB; + color: #2E2E61; } /* Calendar : Date Container */ -.calendar tbody tr td { - vertical-align:top; - height:10em; - padding:0; - border-width:1px 0 0 1px; - border-style:solid; - border-color:#B4B4CB; +.calendar td { + padding: 0px 0px 0px 1ex; + border-width: 1px 0px 0px 1px; + border-style: solid; + border-color: #B4B4CB; + background-color: #FAFAFF; } -.calendar tbody tr td.weekday { - background-color:#FFF; -} -.calendar tbody tr td.weekend { - background-color:#E0E0E9; -} -.calendar tbody tr td.saturday { - - } -.calendar tbody tr td:first-child { - border-left:none; +.calendar td:first-child { + border-left-style: none; + padding: 0px 0px 0px 1ex; } .calendar tbody tr:first-child td { - border-top:none; + border-top-style: none; } /* Calendar : Date Detail */ -.calendar tbody tr td ul { - list-style:none; - font-family:sans-serif; - font-size:.8em; - margin:2.3em 0 .3em 0; - padding:0; +.calendar td ul { + font-size: smaller; + list-style: none; + padding: 0px; } -.calendar tbody tr td ul li { - display:block; - width:92%; - margin:0 4%; - padding:.2em 0 .3em 0; - border-top:dashed 1px #C1B398; +.calendar td ul li { + border-top: dashed 1px #B4B4CB; + padding-top: 0.5em; + padding-bottom: 0.5em; } -.calendar tbody tr td ul li:first-child { - border:none; +.calendar td ul li:first-child { + border-style: none; +} +.calendar td ul a[href]:hover { + background-color: #B4B4CB; } /* Calendar : Birthday, Anniversary, Highlight */ -.calendar tbody tr td ul li em { - font-style:normal; - color:#2E2E61; +.calendar td ul li em { + font-style: normal; + color: #669; } -.calendar tbody tr td ul li span.yearsmarried em { - color:#2E2E61; +.calendar td.highlight { + background-color: #E0E0E9; } -.calendar tbody tr td.highlight { - background-color:#FFEBC2; -} -.calendar tbody tr td.highlight div.date { - color:#FF7C27; - background-color:#FFCF6C; +.calendar td.highlight div.date { + color: black; + background-color: #B4B4CB; } /* Calendar : Previous-Next Month */ -.calendar tbody tr td.previous, -.calendar tbody tr td.next, -.calendar tbody tr td.previous div.date, -.calendar tbody tr td.next div.date { - color:#B4B4CB; - background-color:#E0E0E9; +.calendar td.previous, +.calendar td.next, +.calendar td.previous div.date, +.calendar td.next div.date { + color: #B4B4CB; + background-color: #FAFAFF; } /* Calendar : Full Year */ body#fullyearlinked div.content { - width:963px; - margin:0 auto; - padding:15px 0 2px 2px; + overflow: hidden; } body#fullyearlinked table.calendar { - float:left; - width:320px; - height:18em; - border:solid 1px #7D5925; + float: left; + width: 33.3%; + height: 18em; + border: solid 1px black; } -body#fullyearlinked table.calendar thead tr th { - height:2em; +body#fullyearlinked table.calendar thead th { + height: 2em; } -body#fullyearlinked table.calendar thead tr th.monthName { - font-size:1.2em; - padding:2px 0; +body#fullyearlinked table.calendar thead th.monthName { + font-size: large; + padding: 2px 0px; } -body#fullyearlinked table.calendar tbody tr td { - height:3em; +body#fullyearlinked table.calendar tbody td { + height: 3em; +} +body#OneDay div.content { + overflow: hidden; } diff --git a/src/plugins/webstuff/css/Web_Basic-Peach.css b/src/plugins/webstuff/css/Web_Basic-Peach.css index 4022afb26..e584084fd 100644 --- a/src/plugins/webstuff/css/Web_Basic-Peach.css +++ b/src/plugins/webstuff/css/Web_Basic-Peach.css @@ -6,11 +6,11 @@ GRAMPS Cascading Style Sheet Style Name: Basic-Peach Stylesheet Style Author: Jason M. Simanek (2008) Note: Adapted from GRAMPS original Modern Style stylesheet with a new orange color scheme. - ************************************************************************************************** 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. @@ -20,6 +20,7 @@ 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. @@ -37,1216 +38,679 @@ GRAMPS. If not, see . Color Palette -------------------------------------------------------------------------------------------------- + black #36220B brown #8C581C orange dark #EA8414 orange #FFC35E orange light #FFE09F yellow light #FFFBE7 ---------------------------------------------------------------------------------------------------- - +-------------------------------------------------------------------------------------------------- +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. +-------------------------------------------------------------------------------------------------- # $Id$ NarrativeWeb Styles --------------------------------------------------------------------------------------------- +------------------------------------------------------------------------------------------------ General Elements ----------------------------------------------------- */ body { - font-family:sans-serif; - color:#36220B; - margin:0; - padding:0; - background-color:#FFFBE7; + font-family: sans-serif; + font-size: 90%; + color: #36220B; + margin: 0px; + background-color: #FFE09F; } -div { - margin:0; - padding:0; -} -img { - border:none; - margin:0; -} -.thumbnail a:hover { - background:none; +body > div { + clear: both; } .content { - padding-top: 1cm; - background-color:#FFFBE7; + background-color: #FFFBE7; + border-top: solid 1px #8C581C; } .content div.snapshot { - float:right; - margin:20px; - padding:0; - background:none; -} -.content div.snapshot div.thumbnail { - margin:0; - padding:0; - background:none; + float: right; + margin: 2em; } .fullclear { - width:100%; - height:1px; - margin:0; - padding:0; - clear:both; + clear: both; } /* General Text ----------------------------------------------------- */ h1 { - font-size:1.4em; - font-weight:bold; - margin:0; -} -h2 { - display:none; + font-size: x-large; + font-weight: bold; + padding-left: 15px; } h3 { - font-size:1.2em; - font-weight:bold; - margin-left:12px; - text-align:left; - margin:0; - padding:.5em 20px .2em 20px; + font-size: large; + padding-left: 15px; } h4 { - font-size:.8em; - color:#EA8414; - margin:0; - padding:.2em 0 .2em 20px; - background-color:#FFE09F; - border-bottom:solid 1px #8C581C; -} -h5, h6 { - font-style:italic; - margin:1.3em 0 .5em 1em; -} -p { - font-size:14px; - line-height:17px; - margin:0; + font-size: medium; + color: #EA8414; + background-color: #FFC35E; + padding-left: 15px; + margin-bottom: 0px; + border-bottom: solid 1px #8C581C; } p#description { - padding:0 15px 1em 15px; + padding-left: 15px; } -p a:link { - text-decoration:underline; +a { + color: #36220B; + text-decoration: none; } -sup { - line-height:0; -} -ol { -} -ol li a { - text-decoration:none; -} -a:link { - color:#36220B; - text-decoration:underline; -} -a:hover, a:active { - background-color:#FFE09F; - color:#36220B; - text-decoration:underline; -} -a:visited { - color:#36220B; - text-decoration:underline; +a[href]:hover, a[href]:active { + background-color: #FFE09F } .grampsid { - font:normal .8em/1.2em monospace; - color:#8C581C; + font-family: monospace; + font-size: smaller; + color: #8C581C; } /* Header ----------------------------------------------------- */ -#header { - padding:15px 15px 2px 15px; - margin:0; - background-color:#FFE09F; -} #SiteTitle { - color:#EA8414; - margin:0 0 3px 0; + color: #EA8414; } -#header p { - font-size:1em; - font-weight:bold; - color:#8C581C; - margin:0; +#user_header, #user_footer { + padding-left: 15px; } /* Navigation ----------------------------------------------------- */ #navigation, #subnavigation { - margin:0; - padding:4px 0 0 0; - background-color:#FFE09F; + border: solid 1px #FFE09F; /* needed by IE7 */ +} +#subnavigation ul { + overflow: hidden; } #navigation ul, #subnavigation ul { - list-style:none; - min-width:770px; - height:22px; - margin:0; - padding:0 0 0 12px; - border-bottom:1px solid #8C581C; + list-style: none; + margin: 0px; + padding-left: 15px; +} +#subnavigation ul { + border-bottom: solid 1px #8C581C; } #navigation ul li, #subnavigation ul li { - margin:0; - padding:0; - float:left; + float: left; } #navigation ul li a, #subnavigation ul li a { - display:block; - font-size:12px; - line-height:100%; - font-weight:bold; - text-decoration:none; - margin:0; - padding:5px 5px; - background-color:#FFE09F; + display: block; + font-size: smaller; + font-weight: bold; + padding: 5px; + border-bottom: solid 1px #FFE09F; } #navigation ul li a:hover, #subnavigation ul li a:hover { - background-color:#FFC35E; - border-bottom:solid 1px #36220B; + text-decoration: none; + background-color: #FFC35E; + border-bottom: solid 1px #36220B; } -#navigation ul li.CurrentSection a, #subnavigation ul li.CurrentSection a { - padding-bottom:4px; - border-top:solid 1px #8C581C; - border-right:solid 1px #8C581C; - border-left:solid 1px #8C581C; - border-bottom:solid 1px #FFFBE7; - background-color:#FFFBE7; -} -#navigation ul li.CurrentSection a:hover { - background-color:#FFFBE7; +#navigation ul li.CurrentSection a { + position: relative; + top: 1px; + border: solid 1px #8C581C; + border-bottom-style: none; + background-color: #FFFBE7; } #subnavigation ul li.CurrentSection a { - border-width:0 0 1px 0; + background-color: #FFFBE7; } /* Alphabet Navigation ----------------------------------------------------- */ -div#alphabet { - width: 100%; - margin: 0; +#alphabet { background-color: #FFE09F; } -div#alphabet ul { - list-style:none; - min-width:770px; - height:24px; - margin:0; - padding: 0px 0px 0px 16px; +#alphabet ul { + list-style: none; border-width: 2px 0px 4px 0px; border-style: solid; - border-color: #000; + border-color: #36220B; + margin: 0px; + padding-left: 15px; + /* float container stretch, see www.quirksmode.org/css/clearing.html */ + overflow: hidden; } -div#alphabet ul li:after { - content:" |"; +#alphabet ul li { + float: left; + font-size: larger; + font-weight: bold; } -div#alphabet ul li { - margin:0; - float:left; +#alphabet ul li:after { + content: " |"; } -div#alphabet ul li a { - display:block; - padding: 4px 8px 4px 8px; - float:left; - font:bold 16px/100% sans; - margin:0; - text-decoration:none; - color: #000; +#alphabet ul li a { + display: block; + padding: 4px 8px; + line-height: 100%; + float: left; } -div#alphabet ul li a:hover { - background-color: #000; - color: #FFF; +#alphabet ul li a:hover { + text-decoration: none; + background-color: #36220B; + color: #FFFBE7; } /* Main Table ----------------------------------------------------- */ table { - font-size:14px; - margin:0 15px; - padding:0; - border:none; - border-collapse:collapse; + border-collapse: collapse; + width: 100%; +} +div#summaryarea > table.infolist, +div#parents > table.infolist, +h3 + table.infolist { + width: auto; } table tr th { - font-weight: bold; text-align: left; - margin:0; - padding:.1em 10px; - background-color:#FFC35E; - border-top:solid 1px #8C581C; - border-bottom:solid 1px #8C581C; + background-color: #FFE09F; + border-top: solid 1px #8C581C; + border-bottom: solid 1px #8C581C; } -table.infolist tr th:first-child { - border-left:solid 1px #8C581C; +table tr th:first-child { + border-left: solid 1px #EA8414; } -table.infolist tr th:last-child { - border-right:solid 1px #8C581C; +table tr th:last-child { + border-right: solid 1px #EA8414; } -table.infolist tr th a { - text-decoration:none; +table.primobjlist tr th { + background-color: #FFC35E; } -table tr td { - vertical-align:middle; - padding:.1em 10px; +table td, table th { + vertical-align: top; + padding-left: 1ex; } -table.infolist tr td a { - display:block; - text-decoration:none; +table.primobjlist td { + vertical-align: middle; } -table.infolist tr.BeginLetter td, table.infolist tr.BeginSurname td { - border-top:solid 1px #FFC35E; +table td:first-child, table th:first-child { + padding-left: 15px; } -table.infolist tr th.ColumnQuantity { - width:30%; +table.primobjlist tr a { + display: block; /* make whole td clickable */ } -table.infolist tr td.ColumnLetter { - font-weight:bold; +table.primobjlist tr.BeginLetter td, table.primobjlist tr.BeginSurname td { + border-top: solid 1px #FFC35E; } -table.infolist tbody tr td.ColumnBirth { - font-size:.9em; - width:10%; +td.ColumnLetter, td.ColumnRowLabel { + font-weight: bold; } -table.infolist tbody tr td.ColumnDeath { - font-size:.9em; - width:10%; +td.ColumnBirth, td.ColumnDeath, td.ColumnPartner, td.ColumnParents { + font-size: 90%; } -table.infolist tbody tr td.ColumnRowLabel { - font-weight:bold; - width:2%; +table.infolist tr td ol { + margin: 0px; } -table.infolist tbody tr td.ColumnType { - width:6%; - padding-left:20px; +#summaryarea table.infolist td.ColumnAttribute, +#parents table.infolist td.ColumnAttribute, +#families table.infolist td.ColumnType, +#families table.infolist td.ColumnAttribute { + color: #8C581C; } -table.infolist tbody tr td.ColumnPartner { - font-size:.9em; +/* div summaryarea is missing for events, sources and repos! */ +h3 + table.infolist td.ColumnAttribute { + color: #8C581C; } -table.infolist tbody tr td.ColumnParents { - font-size:.9em; -} -table.infolist tbody tr td.ColumnParents span.father, table.infolist tbody tr td.ColumnParents span.mother { - display:block; -} -table.infolist tbody tr td.ColumnParents span.mother:before { - content:"+ "; -} -table.infolist tbody p.EventNote { - border-top:dashed 1px #FFC35E; - padding-top:1em; - padding-bottom:1em; +table.primobjlist td.ColumnParents span.mother:before { + content: "+ "; } /* Surnames ----------------------------------------------------- */ -#Surnames { } -#SurnameDetail p#description { padding-top:0; } -table.surnamelist tbody tr td.ColumnSurname { - width:50%; +table#SortByName td.ColumnSurname, table#SortByName th.ColumnSurname, +table#SortByCount td.ColumnQuantity, table#SortByCount th.ColumnQuantity { + background-color: #FFE09F; } -table.surnamelist thead tr th.ColumnSurname { - padding:0; +table#SortByName td.ColumnSurname a[href]:hover { + background-color: #FFC35E; } -table.surnamelist thead tr th.ColumnQuantity { - width:40%; - padding:0; +/* 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.infolist thead tr th.ColumnSurname a, table.infolist thead tr th.ColumnQuantity a { - display:block; - padding:.1em 10px; +table#SortByName td.ColumnSurname > a, +table#SortByName th.ColumnSurname > a, +table#SortByName th.ColumnQuantity > a { + padding-left: 1ex; } -table#SortByName thead tr th.ColumnSurname a, table#SortByCount thead tr th.ColumnQuantity a { - background-color:#FFE09F; +table#SortByName thead th.ColumnSurname a:after, +table#SortByCount thead th.ColumnQuantity a:after { + content: " \2193"; } -table#SortByName thead tr th.ColumnSurname a:after, table#SortByCount thead tr th.ColumnQuantity a:after { - content:" ↓"; +table.surname td.ColumnName { + background-color: #FFE09F; } -table.infolist tbody tr td.ColumnSurname { - padding:0; - background-color:#FFE09F; +table.surname td.ColumnName a[href]:hover { + background-color: #FFC35E; } -table.infolist tbody tr td.ColumnSurname a { - padding:.1em 10px; +/* make the whole cell light up on hover not just the a. */ +table.surname td.ColumnName { + padding-left: 0px; } -table.infolist tbody tr td.ColumnSurname a:hover { - padding:.1em 10px; - background-color:#FFC35E; -} -table.surname { - border-bottom:solid 1px #FFE09F; -} -table.surname tbody tr td { - border-bottom:dashed 1px #FFC35E; -} -table.surname tbody tr td.ColumnName { - width:20%; - padding:0; - background-color:#FFE09F; -} -table.surname tbody tr td.ColumnName a { - display:block; - padding:.6em 10px .6em 20px; -} -table.surname tbody tr td.ColumnName a:hover { - background-color:#FFC35E; -} -table.surname tbody tr td.ColumnName a span.grampsid { - display:none; -} -table.surname thead tr th.ColumnParents, table.surname tbody tr td.ColumnParents { - width:25%; +table.surname td.ColumnName > a { + padding-left: 15px; } /* Individuals ----------------------------------------------------- */ -#Individuals { } -#Individuals table.individuallist { - border-bottom:solid 1px #FFE09F; -} -#Individuals table.individuallist tbody tr td { - border-bottom:dashed 1px #FFC35E; -} -#Individuals table.individuallist tbody tr td a:hover { - text-decoration:none; -} -table.individuallist tbody tr td.ColumnSurname { - background:none; -} -table.individuallist tbody tr td.ColumnSurname a:hover, table.individuallist tbody tr td.ColumnSurname a:active { - cursor:default; - color:black; - background:none; -} -table.individuallist tbody tr td.ColumnName { - padding:0; - background-color:#FFE09F; -} -table.individuallist tbody tr td.ColumnName a { - display:block; - padding:.6em 10px; - vertical-align:middle; -} -table.individuallist tbody tr td.ColumnName a:hover { - background-color:#FFC35E; -} -#Individuals div table.infolist tr td p { - vertical-align:top; -} -#Individuals div table.infolist tr td p a { - display:inline; -} - -/* IndividualDetail ------------------------------------------------------- */ -#IndividualDetail { - background-color:#FFE09F; -} -#IndividualDetail div table.infolist tr td { - font:normal .9em/1.2em sans-serif; - vertical-align:top; -} -#IndividualDetail div table.infolist tr td a { - display:inline; -} -#IndividualDetail table.infolist tr td a:hover { - text-decoration:underline; -} -#IndividualDetail table.infolist tbody tr td.ColumnAttribute { - width:10%; - color:#696969; -} -#IndividualDetail div.subsection table tr td:first-child { - padding-left:20px; -} -#familymap a.familymap { - margin-left:20px; -} - -/* Subsections : Attributes ------------------------------------------------------ */ -div#attributes { - margin: 0; - padding: 0; -} -table.attrlist { - width: 100%; -} -table.attrlist thead tr th { - background-color: #70B1ED; - color: #000; -} -table.attrlist tbody tr td { - border-bottom: dashed 1px #000; -} -table.attrlist tbody tr td.ColumnType { - width: 15%; -} -table.attrlist tbody tr td.ColumnValue { - width: 15%; -} -table.attrlist tbody tr td.ColumnNotes { - width: 40%; -} -table.attrlist tbody tr td.ColumnSources { - width: 10%; -} - -/* Sources ------------------------------------------------------ */ -#Sources table.infolist tbody tr td.ColumnRowLabel { - padding-bottom:0; -} -#Sources table.infolist tbody tr td.ColumnName { - padding:0; -} -#Sources table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; -} -#SourceDetail div#references ol li { - padding-bottom:.5em; -} - -/* Relationships -================================================= */ -table.relationships thead tr th.ColumnMarriage, -table.relationships thead tr th.ColumnDivorce { - width: 13%; -} -table.relationships thead tr th.ColumnHyper { - width: 15%; -} -table.relationships thead tr th.ColumnMedia { - width: 15%; -} -table.relationships tbody tr td.ColumnRowLabel a { - background: none; -} -table.relationships tbody tr td.ColumnPartner { - font-size: 100%; +table.IndividualList td.ColumnSurname { + background-color: #FFE09F; } /* Places ----------------------------------------------------- */ -#Places table.infolist tbody tr td.ColumnName { - padding:0; +#Places table.infolist td.ColumnName { + background-color: #FFE09F; } -#Places table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; +#Places table.infolist td.ColumnName a[href]:hover { + background-color: #FFC35E; +} +/* 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 #FFC35E; + border-top:dashed 1px #FFC35E; } #EventList table.infolist tr.BeginLetter td { - border-top: solid 1px #FFC35E; + border-top:solid 1px #FFC35E; } -#EventList table.infolist tr td a, -#EventDetail table.infolist tr td a { +#EventList table.infolist td.ColumnType { + background-color: #FFE09F; +} +#EventList td.ColumnPerson a { display: inline; } -#EventList table.infolist tr td span.father, -#EventList table.infolist tr td span.mother, -#EventDetail table.infolist tr td span.father, -#EventDetail table.infolist tr td span.mother { - display: block; -} -#EventList table.infolist tr td span.person:after, -#EventList table.infolist tr td span.father:after, -#EventList table.infolist tr td span.mother:after, -#EventDetail table.infolist tr td span.person:after, -#EventDetail table.infolist tr td span.father:after, -#EventDetail table.infolist tr td span.mother:after { +#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 table.infolist tr td span.person:last-child:after, -#EventList table.infolist tr td span.father:last-child:after, -#EventList table.infolist tr td span.mother:last-child:after, -#EventDetail table.infolist tr td span.person:last-child:after, -#EventDetail table.infolist tr td span.father:last-child:after, -#EventDetail table.infolist tr td span.mother:last-child:after { +#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 ----------------------------------------------------- */ -#Gallery table.infolist tbody tr td.ColumnRowLabel, #Gallery table.infolist tbody tr td.ColumnDate { - padding-bottom:0; -} -#Gallery table.infolist tbody tr td.ColumnName { - padding:0; -} -#Gallery table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; -} -#Gallery table.infolist tbody tr td.ColumnName a:hover { - background-color:#FFE09F; -} #GalleryNav { - font-size:.8em; - margin:1em 0 0 0; - padding:1.2em 0 0 0; - text-align:center; + text-align: center; + margin: 2em 0px; } #GalleryNav a { - font-weight:bold; - text-decoration:none; - background-color:#FFE09F; - border:solid 1px #8C581C; + font-weight: bold; + background-color: #FFE09F; + border: solid 1px #EA8414; + margin: 1em; } #GalleryNav a:hover { - background-color:#FFC35E; + background-color: #FFC35E; } #GalleryNav a#Previous { - padding:.4em .7em .3em .7em; + padding: .4em .7em .3em .7em; } #GalleryNav a#Next { - padding:.4em 1.9em .3em 1.9em; -} -#GalleryPages { - margin:0 1em; + padding: .4em 1.9em .3em 1.9em; } #GalleryCurrent { - font-size:1.2em; - font-weight:bold; + font-size: larger; } #GalleryTotal { - font-weight:normal; + font-weight: normal; } #GalleryDisplay { - margin:0 auto; - padding:0; - position:relative; - overflow:hidden; - text-align:center; - border:solid 1px #8C581C; + margin: 0px auto; + position: relative; } #GalleryDisplay img { - margin:0 auto; + margin: 0px auto; + display: block; + border: solid 1px #EA8414; } -#GalleryDetail div#summaryarea{ - margin:0; - padding:1.4em 0 0 0; -} -#GalleryDetail div#summaryarea h3 { - text-align:center; -} -#GalleryDetail div h4 { - margin-top:0; -} -#GalleryDetail div#summaryarea table.gallery { - width:100%; - margin-top:1.5em; - margin-bottom:0; - padding-bottom:0; - background-color:#FFE09F; - border-style:solid; - border-width:8px 0 0 0; - border-color:#FFC35E; -} - -/* Thumbnail Preview Reference Section -------------------------------------------------- */ -body#ThumbnailPreview div#references { - background-color: #FFF; - color: #00029D; - margin: 0 auto; - padding: 0; - width: 100%; -} -body#ThumbnailPreview div#references table.infolist tbody tr { - border-bottom: dashed 1px #000; -} -body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnRowLabel a { - background: none; - width: 2%; -} -body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnName { - width: 90%; +#GalleryDetail h3 { + text-align: center; } /* Contact ----------------------------------------------------- */ +#Contact { + overflow: hidden; +} #Contact #summaryarea { - width:500px; - margin:2em auto; - padding:3em; - background-color:#FFE09F; - border:solid 1px #8C581C; + width: 40em; + margin: 2em auto; + padding: 3em; + background-color: #FFE09F; + border: solid 1px #EA8414; } -#Contact #summaryarea img { - float:right; - margin:0; - padding:0; - border:solid 1px #8C581C; +#Contact img { + float: right; + border: solid 1px #EA8414; } -#researcher { - margin-top:.3em; +#Contact #researcher, #Contact #researcher h3 { + font-size: larger; + padding-left: 0px; } -#researcher h3 { - padding:0; -} -#researcher span { - display:block; - float:left; - margin-right:.4em; -} -#streetaddress { - width:85%; -} -#locality, .locality { +#Contact #streetaddress, #Contact #locality, #Contact #email { display: block; - width: 100%; } -#city:after { - content:","; +#Contact #locality, #Contact #city, #Contact #state, #Contact #postalcode, +#Contact #country { + white-space: nowrap; } -#country { - clear:left; -} -#email { - clear:left; -} -#email a { - text-decoration:none; -} -#email a:hover { - text-decoration:underline; +#Contact #city:after { + content: ","; } -/* Download +/* Download ----------------------------------------------------- */ -#Download { - padding:1cm; - height:396px; -} -table.download { - border:solid 2px #000; - width:100%; -} -table.download img { - float:center; -} -table.download thead tr th { - text-align:center; - border:solid 2px #000; - color: #000; - text-transform:uppercase; -} -table.download tbody tr#Row02 { - border-bottom:solid 2px #000; -} -table.download thead tr th, table.download tbody tr td { - padding-left:10px; - padding-top:20px; - border-style:solid; - border-color:#000; - border-width:0 2px 2px 2px; - text-align:left; -} -table.download td.Description { - width: 50%; -} -table.download td.License { - width:8%; -} -table.download td.Filename { - width:30%; -} -table.download td.Filename a { - font-weight:bold; - font-style: italic; - text-decoration:none; -} -table.download td.Filename a:hover { - text-decoration:underline; -} -table.download td.Modified { - width:12%; - font-weight:bold; +#Download table.download a { + display: block; } -/* Subsections +/* Subsection ----------------------------------------------------- */ -#Home, #Introduction, #Contact { - padding:1.5em 0 3em 0; +#Home, #Introduction { + overflow: hidden; } -#Home p, #Introduction p, #Contact p { - margin:0 20px 1em 20px; +#Home img, #Introduction img { + float: right; + margin: 1em; + max-width: 950px; } -#Home img, #Introduction img, #Contact img { - float:right; - margin:0; - padding:0 20px 3em 20px; +#Home p, #Introduction p { + padding-left: 15px; } -#Home a, #Introduction a, #Contact a { - color: #000; - text-decoration: none; +.subsection { + clear: both; + overflow: hidden; } -div.subsection{ - padding-bottom:.5em; - background-color:#FFFBE7; -} -div.subsection h4 { - margin-bottom:.5em; -} -div.subsection table, div.subsection ol, div.subsection p, div.subsection > a { - font-size:.9em; -} -div.subsection a { - text-decoration:none; -} -div.subsection a:hover { - text-decoration:underline; - background:none; -} -div.subsection table.infolist { - width:100%; - margin:0; -} -#IndividualDetail div.subsection table tr td:first-child { - padding-left:20px; +.subsection p { + margin: 0px; } -/* Subsections : Summary Area +/* Subsection : Families ----------------------------------------------------- */ -div#summaryarea { - min-height:100px; - background:none; -} -div#summaryarea table.infolist { - margin:0; - padding:0; - background:#FFFBE7; - border-bottom:solid .7em #FFFBE7; -} -div#summaryarea table.infolist tr td, div#summaryarea table.infolist tr td p { - vertical-align:top; -} -div#summaryarea table.infolist tr td a, div#summaryarea table.infolist tr td p a { - display:inline; -} -div#summaryarea table.infolist tbody tr td.ColumnAttribute { - width:14%; - padding-left:20px; -} - -/* Subsections : Events ------------------------------------------------------ */ -div#events { - padding-bottom:0; -} -div#events h4 { - margin-bottom:0; -} -div#events table.infolist { - border-bottom:solid 1px #FFFBE7; -} -div#events table.infolist tbody tr td { - padding-top:.2em; - padding-bottom:.2em; -} -#IndividualDetail div#events table.infolist thead tr th:first-child { - padding-left:20px; -} -div#events table.infolist tbody tr td.ColumnAttribute { - border-bottom:dashed 1px #FFC35E; -} -div#events table.infolist tbody tr td.ColumnValue { - border-bottom:dashed 1px #FFC35E; -} -div#events table.infolist tbody tr td.ColumnValue p { - margin:.1em 2em; -} - -/* Subsections : Parents ------------------------------------------------------ */ -div#parents table.infolist tbody tr td.ColumnValue ol { - margin:0; - padding-top:0; -} -div#parents table.infolist tbody tr td.ColumnValue ol li { - padding-bottom:.2em; -} - -/* Subsections : Families ------------------------------------------------------ */ -div#families table.infolist tbody tr td.ColumnValue p { - margin-top:0; -} -div#families table.infolist tbody tr td.ColumnValue ol { - margin:0; - padding-top:0; -} -div#families table.infolist tbody tr td.ColumnValue ol li { - padding-bottom:.2em; -} div#families table.fixed_subtables table.eventlist { - table-layout:fixed; + table-layout: fixed; } div#families table.fixed_subtables table.eventlist th:first-child { - width:9em; + width: 9em; } div#families table.fixed_subtables table.eventlist th:last-child { - width:5em; + width: 5em; +} +div#families table.attrlist td.ColumnType { + color: #36220B; } -/* Subsections : Addresses +/* Subsection : Gallery ----------------------------------------------------- */ -div#addresses { - padding-bottom:0; -} -div#addresses h4 { - margin-bottom:0; -} -div#addresses table.infolist { - border-bottom:solid 1px #FFFBE7; -} -div#addresses table.infolist tbody tr td { - padding-top:.2em; - padding-bottom:.2em; -} -div#addresses table.infolist tbody tr td.ColumnAttribute { - width:30%; - border-bottom:dashed 1px #FFC35E; -} -div#addresses table.infolist tbody tr td.ColumnValue { - border-bottom:dashed 1px #FFC35E; -} -div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a { - display: inline; -} - -/* Subsections : Attributes ------------------------------------------------------ */ - -/* Subsections : Gallery ------------------------------------------------------ */ -#indivgallery h4 { - margin-bottom:1em; -} #indivgallery .thumbnail { - margin:0; - float:left; - width:130px; - height:150px; - text-align:center; + float: left; + max-width: 130px; + max-height: 150px; + font-size: smaller; + text-align: center; + margin: 0.8em 0.5em; } -#indivgallery .thumbnail a { - display:block; - margin:0; - padding:0; - background:none; +#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 .thumbnail a img { - margin:0; - padding:0; - border:solid 1px #8C581C; +#indivgallery img { + border: solid 1px #8C581C; } -#indivgallery div.thumbnail span { -/* ## remove this line and the comment markers from the line below to hide the description in Individual Gallery +#indivgallery span { +/* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery display: none; */ - - font-size:.6em; - text-align:center; - width:80%; - margin:0 auto; - padding:0; } -/* Subsections : Narrative +/* Subsection : Narrative ----------------------------------------------------- */ -div.narrative { - padding-bottom:0; +h4 + div.grampsstylednote, a.familymap { + margin: 1em 15px; } -.narrative p { - margin-top:.5em; - margin-bottom:0; - padding:0 20px 1em 20px; +i + div.grampsstylednote p { + margin: 0px; } -/* Subsections : References +/* Subsection : Family Map ----------------------------------------------------- */ -#references ol { - margin-top:0; - margin-bottom:0; +a.familymap { + display: block; } -/* Subsections : Source References +/* Subsection : Source References ----------------------------------------------------- */ -div#sourcerefs ol { - list-style-type:decimal; -} -div#sourcerefs ol li ol { - list-style-type:lower-alpha; +#sourcerefs ol li ol { + list-style-type: lower-alpha; } -/* Subsections : Weblinks ------------------------------------------------------ */ - -/* Subsections : Pedigree +/* Subsection : Pedigree ----------------------------------------------------- */ .pedigreegen { - font-size:.9em; - list-style:none; - margin:.5em 0 0 0; - padding:0 0 .7em 20px; + list-style-type: none; + padding-left: 15px; } .pedigreegen li ol { - list-style:none; - margin-left:.5em; -} -.pedigreegen li ol li { - padding-bottom:.2em; + list-style-type: none; } .pedigreegen li ol li ol { - list-style:decimal; - margin-left:1.6em; + list-style-type: decimal; } -.pedigreegen li ol li ol li ol.spouselist { - font-size:1em; - list-style:none; - margin-left:0; +.pedigreegen ol.spouselist { + list-style-type: none; } -.spouselist li.spouse ol { - font-size:1em; - list-style:decimal; - margin-left:1.6em; -} -.spouse a { - font-weight:normal; +.pedigreegen ol.spouselist li.spouse ol { + list-style-type: decimal; } .spouse:before { content: "+ "; } .thisperson { - font-weight:bold; + font-weight: bold; +} +.thisperson > ol { + font-weight: normal; } /* Footer ----------------------------------------------------- */ #footer { - clear:both; - width:100%; - font-size:12px; - line-height:130%; - color:#8C581C; - margin:0; - padding:15px 0 0 0; - background-color:#FFC35E; - border-top:solid 1px #EA8414; + clear: both; + padding-top: 1em; + background-color: #FFC35E; + border-top: solid 1px #EA8414; } -#footer a, #footer a:visited { - text-decoration:none; - color:#8C581C; -} -#footer a:hover { - text-decoration:underline; -} -#footer img { - border:0; - margin:0 auto; - vertical-align:middle; +#footer > * { + background-color: #FFE09F; } #footer p#createdate { - float:left; - width:40%; - text-align:left; - margin-left:10px; + float: left; + width: 50%; + text-align: left; + padding-left: 15px; + margin-top: 1em; } #footer p#copyright { - float:right; - width:40%; - text-align:right; - margin-right:10px; + float: right; + width: 40%; + text-align: right; + padding-right: 15px; } -#footer p#copyright img { - margin-right:10px; +#footer a[href]:hover { + background-color: #FFC35E; } -#user_footer { - width:70%; - float:left; - margin:1em; + +/* Overwritten +----------------------------------------------------- */ +button#drop { + background-color: #FFE09F; + border: solid 1px #EA8414 ! important; } -#user_footer p { - font:normal 1em/1.2em serif; - margin:0; - padding:0; +button#drop:hover { + background-color: #FFC35E; +} +div#map_canvas { + border-color: #EA8414 ! important; +} +body#FamilyMap { + background-color: #FFE09F ! important; } /* Calendar Styles --------------------------------------------------------------------------------------------- */ -/* Calendar : General */ -body#WebCal { - padding:0 14px; - background-color:#8C581C; +===================================================== */ +table.calendar { + table-layout: fixed; + empty-cells: show; } -.calendar { - empty-cells:show; - width:100%; - font-size:1em; - font-weight:normal; - margin:0; - padding:0; - border:none; - border-collapse:collapse; +.calendar thead th { + text-align: center; + border-top-style: none; } -.calendar thead tr th { - width:14%; - font-weight:bold; - font-size:14px; - line-height:14px; - text-align:center; - text-transform:uppercase; - padding:2px 0; +.calendar thead th.monthName { + font-size: xx-large; + font-weight: normal; + background-color: #FFFBE7; + border-bottom-style: none; + padding-top: 1em; } -.calendar thead tr th.monthName { - width:100%; - font-weight:normal; - font-size:2em; - line-height:100%; - text-transform:none; - color:#36220B; - padding:.3em 0 .2em 0; - background-color:#FFF; - border-bottom-width:0; +.calendar thead th abbr { + border-bottom-style: none; } -body#WebCal #CreatorInfo { - float:right; - font-size:12px; - margin:-24px 10px 0 0; +#CreatorInfo { + float: right; + margin: -1em 15px 0px 0px; + font-weight: bold; + color: #8C581C; } -.calendar thead tr th.weekend, -.calendar thead tr th.weekday { - color:#EA8414; - background-color:#FFE09F; - border-style:solid; - border-width:0 0 1px 0; - border-color:#8C581C; -} -.calendar thead tr th.saturday, -.calendar thead tr th.sunday { } -.calendar tfoot tr td { - padding:.7em 5% 1em 5%; - border-top:solid 4px #8C581C; +#CreatorInfo a[href]:hover { + background-color: #FFC35E; } .calendar tfoot tr td { - vertical-align:middle; - color:#8C581C; - background-color:#FFFBE7; + border-top: solid 4px #8C581C; + vertical-align: middle; } /* Calendar : Date Numeral */ -.calendar tbody tr td div.date { - float:right; - display:block; - width:1.8em; - font-weight:bold; - font-size:1em; - line-height:100%; - text-align:center; - color:#8C581C; - margin:0 0 0 .5em; - padding:.2em 0; - background-color:#FFE09F; +.calendar div.date { + float: right; + width: 1.8em; + font-size: large; + text-align: center; + background-color: #FFC35E; + color: #8C581C; } /* Calendar : Date Container */ -.calendar tbody tr td { - vertical-align:top; - height:10em; - padding:0; - border-width:1px 0 0 1px; - border-style:solid; - border-color:#FFE09F; +.calendar td { + padding: 0px 0px 0px 1ex; + border-width: 1px 0px 0px 1px; + border-style: solid; + border-color: #FFC35E; + background-color: #FFFBE7; } -.calendar tbody tr td.weekday { - background-color:#FFF; -} -.calendar tbody tr td.weekend { - background-color:#FFFBE7; -} -.calendar tbody tr td.saturday { - - } -.calendar tbody tr td:first-child { - border-left:none; +.calendar td:first-child { + border-left-style: none; + padding: 0px 0px 0px 1ex; } .calendar tbody tr:first-child td { - border-top:none; + border-top-style: none; } /* Calendar : Date Detail */ -.calendar tbody tr td ul { - list-style:none; - font-family:sans-serif; - font-size:.8em; - margin:2.3em 0 .3em 0; - padding:0; +.calendar td ul { + font-size: smaller; + list-style: none; + padding: 0px; } -.calendar tbody tr td ul li { - display:block; - width:92%; - margin:0 4%; - padding:.2em 0 .3em 0; - border-top:dashed 1px #C1B398; +.calendar td ul li { + border-top: dashed 1px #8C581C; + padding-top: 0.5em; + padding-bottom: 0.5em; } -.calendar tbody tr td ul li:first-child { - border:none; +.calendar td ul li:first-child { + border-style: none; +} +.calendar td ul a[href]:hover { + background-color: #FFC35E; } /* Calendar : Birthday, Anniversary, Highlight */ -.calendar tbody tr td ul li em { - font-style:normal; - color:#0A65B5; +.calendar td ul li em { + font-style: normal; + color: #EA8414; } -.calendar tbody tr td ul li span.yearsmarried em { - color:#453619; +.calendar td.highlight { + background-color: #FFE09F; } -.calendar tbody tr td.highlight { - background-color:#E5F2FE; -} -.calendar tbody tr td.highlight div.date { - color:#0A65B5; - background-color:#C2E1FE; +.calendar td.highlight div.date { + color: #36220B; + background-color: #FFC35E; } /* Calendar : Previous-Next Month */ -.calendar tbody tr td.previous, -.calendar tbody tr td.next, -.calendar tbody tr td.previous div.date, -.calendar tbody tr td.next div.date { - color:#FFE09F; - background-color:#FFFBE7; +.calendar td.previous, +.calendar td.next, +.calendar td.previous div.date, +.calendar td.next div.date { + color: #FFC35E; + background-color: #FFFBE7; } /* Calendar : Full Year */ body#fullyearlinked div.content { - width:963px; - margin:0 auto; - padding:15px 0 2px 2px; + overflow: hidden; } body#fullyearlinked table.calendar { - float:left; - width:320px; - height:18em; - border:solid 1px #7D5925; + float: left; + width: 33.3%; + height: 18em; + border: solid 1px #36220B; } -body#fullyearlinked table.calendar thead tr th { - height:2em; +body#fullyearlinked table.calendar thead th { + height: 2em; } -body#fullyearlinked table.calendar thead tr th.monthName { - font-size:1.2em; - padding:2px 0; +body#fullyearlinked table.calendar thead th.monthName { + font-size: large; + padding: 2px 0px; } -body#fullyearlinked table.calendar tbody tr td { - height:3em; +body#fullyearlinked table.calendar tbody td { + height: 3em; +} +body#OneDay div.content { + overflow: hidden; } diff --git a/src/plugins/webstuff/css/Web_Basic-Spruce.css b/src/plugins/webstuff/css/Web_Basic-Spruce.css index e24998a50..f3b73ecb7 100644 --- a/src/plugins/webstuff/css/Web_Basic-Spruce.css +++ b/src/plugins/webstuff/css/Web_Basic-Spruce.css @@ -6,11 +6,11 @@ GRAMPS Cascading Style Sheet Style Name: Basic-Spruce Stylesheet Style Author: Jason M. Simanek (2008) Note: Adapted from GRAMPS original Modern Style stylesheet with a new blue color scheme. - ************************************************************************************************** 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. @@ -20,6 +20,7 @@ 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. @@ -37,6 +38,7 @@ GRAMPS. If not, see . Color Palette -------------------------------------------------------------------------------------------------- + black #000 blue dark #204D91 blue #7CA3DD @@ -44,1209 +46,661 @@ blue light #BFD0EA blue very light #EAEEF4 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. +-------------------------------------------------------------------------------------------------- # $Id$ NarrativeWeb Styles --------------------------------------------------------------------------------------------- +------------------------------------------------------------------------------------------------ General Elements ----------------------------------------------------- */ body { - font-family:sans-serif; - color:#000; - margin:0; - padding:0; - background-color:#FFF; + font-family: sans-serif; + font-size: 90%; + color: black; + margin: 0px; + background-color: #EAEEF4; } -div { - margin:0; - padding:0; -} -img { - border:none; - margin:0; -} -.thumbnail a:hover { - background:none; +body > div { + clear: both; } .content { - padding-top: 1cm; - background-color:#FFF; + background-color: #FFF; + border-top: solid 1px #7CA3DD; } .content div.snapshot { - float:right; - margin:20px; - padding:0; - background:none; -} -.content div.snapshot div.thumbnail { - margin:0; - padding:0; - background:none; + float: right; + margin: 2em; } .fullclear { - width:100%; - height:1px; - margin:0; - padding:0; - clear:both; + clear: both; } /* General Text ----------------------------------------------------- */ h1 { - font-size:1.4em; - font-weight:bold; - margin:0; -} -h2 { - display:none; + font-size: x-large; + font-weight: bold; + padding-left: 15px; } h3 { - font-size:1.2em; - font-weight:bold; - margin-left:12px; - text-align:left; - margin:0; - padding:.5em 20px .2em 20px; + font-size: large; + padding-left: 15px; } h4 { - font-size:.8em; - color:#204D91; - margin:0; - padding:.2em 0 .2em 20px; - background-color:#EAEEF4; - border-bottom:solid 1px #7CA3DD; -} -h5, h6 { - font-style:italic; - margin:1.3em 0 .5em 1em; -} -p { - font-size:14px; - line-height:17px; - margin:0; + font-size: medium; + color: #204D91; + background-color: #BFD0EA; + padding-left: 15px; + margin-bottom: 0px; + border-bottom: solid 1px #7CA3DD; } p#description { - padding:0 15px 1em 15px; + padding-left: 15px; } -p a:link { - text-decoration:underline; +a { + color: black; + text-decoration: none; } -sup { - line-height:0; -} -ol { -} -ol li a { - text-decoration:none; -} -a:link { - color:#000; - text-decoration:underline; -} -a:hover, a:active { - background-color:#EAEEF4; - color:#000; - text-decoration:underline; -} -a:visited { - color:#000; - text-decoration:underline; +a[href]:hover, a[href]:active { + background-color: #EAEEF4 } .grampsid { - font:normal .8em/1.2em monospace; - color:#7CA3DD; + font-family: monospace; + font-size: smaller; + color: #7CA3DD; } /* Header ----------------------------------------------------- */ -#header { - padding:15px 15px 2px 15px; - margin:0; - background-color:#EAEEF4; -} #SiteTitle { - color:#204D91; - margin:0 0 3px 0; + color: #204D91; } -#header p { - font-size:1em; - font-weight:bold; - color:#7CA3DD; - margin:0; +#user_header, #user_footer { + padding-left: 15px; } /* Navigation ----------------------------------------------------- */ #navigation, #subnavigation { - margin:0; - padding:4px 0 0 0; - background-color:#EAEEF4; + border: solid 1px #EAEEF4; /* needed by IE7 */ +} +#subnavigation ul { + overflow: hidden; } #navigation ul, #subnavigation ul { - list-style:none; - min-width:770px; - height:22px; - margin:0; - padding:0 0 0 12px; - border-bottom:1px solid #7CA3DD; + list-style: none; + margin: 0px; + padding-left: 15px; +} +#subnavigation ul { + border-bottom: solid 1px #7CA3DD; } #navigation ul li, #subnavigation ul li { - margin:0; - padding:0; - float:left; + float: left; } #navigation ul li a, #subnavigation ul li a { - display:block; - font-size:12px; - line-height:100%; - font-weight:bold; - text-decoration:none; - margin:0; - padding:5px 5px; - background-color:#EAEEF4; + display: block; + font-size: smaller; + font-weight: bold; + padding: 5px; + border-bottom: solid 1px #EAEEF4; } #navigation ul li a:hover, #subnavigation ul li a:hover { - background-color:#BFD0EA; - border-bottom:solid 1px #000; + text-decoration: none; + background-color: #BFD0EA; + border-bottom: solid 1px black; } -#navigation ul li.CurrentSection a, #subnavigation ul li.CurrentSection a { - padding-bottom:4px; - border-top:solid 1px #7CA3DD; - border-right:solid 1px #7CA3DD; - border-left:solid 1px #7CA3DD; - border-bottom:solid 1px #FFF; - background-color:#FFF; -} -#navigation ul li.CurrentSection a:hover { - background-color:#FFF; +#navigation ul li.CurrentSection a { + position: relative; + top: 1px; + border: solid 1px #7CA3DD; + border-bottom-style: none; + background-color: #FFF; } #subnavigation ul li.CurrentSection a { - border-width:0 0 1px 0; + background-color: #FFF; } /* Alphabet Navigation ----------------------------------------------------- */ -div#alphabet { - width: 100%; - margin: 0; - background-color: #EAFFF4; +#alphabet { + background-color: #EAEEF4; } -div#alphabet ul { - list-style:none; - min-width:770px; - height:24px; - margin:0; - padding: 0px 0px 0px 16px; +#alphabet ul { + list-style: none; border-width: 2px 0px 4px 0px; border-style: solid; - border-color: #000; + border-color: black; + margin: 0px; + padding-left: 15px; + /* float container stretch, see www.quirksmode.org/css/clearing.html */ + overflow: hidden; } -div#alphabet ul li:after { - content:" |"; +#alphabet ul li { + float: left; + font-size: larger; + font-weight: bold; } -div#alphabet ul li { - margin:0; - float:left; +#alphabet ul li:after { + content: " |"; } -div#alphabet ul li a { - display:block; - padding: 4px 8px 4px 8px; - float:left; - font:bold 16px/100% sans; - margin:0; - text-decoration:none; - color: #000; +#alphabet ul li a { + display: block; + padding: 4px 8px; + line-height: 100%; + float: left; } -div#alphabet ul li a:hover { - background-color: #000; +#alphabet ul li a:hover { + text-decoration: none; + background-color: black; color: #FFF; } /* Main Table ----------------------------------------------------- */ table { - font-size:14px; - margin:0 15px; - padding:0; - border:none; - border-collapse:collapse; + border-collapse: collapse; + width: 100%; +} +div#summaryarea > table.infolist, +div#parents > table.infolist, +h3 + table.infolist { + width: auto; } table tr th { - font-weight: bold; text-align: left; - margin:0; - padding:.1em 10px; - background-color:#BFD0EA; - border-top:solid 1px #7CA3DD; - border-bottom:solid 1px #7CA3DD; + background-color: #EAEEF4; + border-top: solid 1px #7CA3DD; + border-bottom: solid 1px #7CA3DD; } -table.infolist tr th:first-child { - border-left:solid 1px #7CA3DD; +table tr th:first-child { + border-left: solid 1px #7CA3DD; } -table.infolist tr th:last-child { - border-right:solid 1px #7CA3DD; +table tr th:last-child { + border-right: solid 1px #7CA3DD; } -table.infolist tr th a { - text-decoration:none; +table.primobjlist tr th { + background-color: #BFD0EA; } -table tr td { - vertical-align:middle; - padding:.1em 10px; +table td, table th { + vertical-align: top; + padding-left: 1ex; } -table.infolist tr td a { - display:block; - text-decoration:none; +table.primobjlist td { + vertical-align: middle; } -table.infolist tr.BeginLetter td, table.infolist tr.BeginSurname td { - border-top:solid 1px #BFD0EA; +table td:first-child, table th:first-child { + padding-left: 15px; } -table.infolist tr th.ColumnQuantity { - width:30%; +table.primobjlist tr a { + display: block; /* make whole td clickable */ } -table.infolist tr td.ColumnLetter { - font-weight:bold; +table.primobjlist tr.BeginLetter td, table.primobjlist tr.BeginSurname td { + border-top: solid 1px #BFD0EA; } -table.infolist tbody tr td.ColumnBirth { - font-size:.9em; - width:10%; +td.ColumnLetter, td.ColumnRowLabel { + font-weight: bold; } -table.infolist tbody tr td.ColumnDeath { - font-size:.9em; - width:10%; +td.ColumnBirth, td.ColumnDeath, td.ColumnPartner, td.ColumnParents { + font-size: 90%; } -table.infolist tbody tr td.ColumnRowLabel { - font-weight:bold; - width:2%; +table.infolist tr td ol { + margin: 0px; } -table.infolist tbody tr td.ColumnType { - width:6%; - padding-left:20px; +#summaryarea table.infolist td.ColumnAttribute, +#parents table.infolist td.ColumnAttribute, +#families table.infolist td.ColumnType, +#families table.infolist td.ColumnAttribute { + color: #204D91; } -table.infolist tbody tr td.ColumnPartner { - font-size:.9em; +/* div summaryarea is missing for events, sources and repos! */ +h3 + table.infolist td.ColumnAttribute { + color: #204D91; } -table.infolist tbody tr td.ColumnParents { - font-size:.9em; -} -table.infolist tbody tr td.ColumnParents span.father, table.infolist tbody tr td.ColumnParents span.mother { - display:block; -} -table.infolist tbody tr td.ColumnParents span.mother:before { - content:"+ "; -} -table.infolist tbody p.EventNote { - border-top:dashed 1px #BFD0EA; - padding-top:1em; - padding-bottom:1em; +table.primobjlist td.ColumnParents span.mother:before { + content: "+ "; } /* Surnames ----------------------------------------------------- */ -#Surnames { } -#SurnameDetail p#description { padding-top:0; } -table.surnamelist tbody tr td.ColumnSurname { - width:50%; +table#SortByName td.ColumnSurname, table#SortByName th.ColumnSurname, +table#SortByCount td.ColumnQuantity, table#SortByCount th.ColumnQuantity { + background-color: #EAEEF4; } -table.surnamelist thead tr th.ColumnSurname { - padding:0; +table#SortByName td.ColumnSurname a[href]:hover { + background-color: #BFD0EA; } -table.surnamelist thead tr th.ColumnQuantity { - width:40%; - padding:0; +/* 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.infolist thead tr th.ColumnSurname a, table.infolist thead tr th.ColumnQuantity a { - display:block; - padding:.1em 10px; +table#SortByName td.ColumnSurname > a, +table#SortByName th.ColumnSurname > a, +table#SortByName th.ColumnQuantity > a { + padding-left: 1ex; } -table#SortByName thead tr th.ColumnSurname a, table#SortByCount thead tr th.ColumnQuantity a { - background-color:#EAEEF4; +table#SortByName thead th.ColumnSurname a:after, +table#SortByCount thead th.ColumnQuantity a:after { + content: " \2193"; } -table#SortByName thead tr th.ColumnSurname a:after, table#SortByCount thead tr th.ColumnQuantity a:after { - content:" ↓"; +table.surname td.ColumnName { + background-color: #EAEEF4; } -table.infolist tbody tr td.ColumnSurname { - padding:0; - background-color:#EAEEF4; +table.surname td.ColumnName a[href]:hover { + background-color: #BFD0EA; } -table.infolist tbody tr td.ColumnSurname a { - padding:.1em 10px; +/* make the whole cell light up on hover not just the a. */ +table.surname td.ColumnName { + padding-left: 0px; } -table.infolist tbody tr td.ColumnSurname a:hover { - padding:.1em 10px; - background-color:#BFD0EA; -} -table.surname { - border-bottom:solid 1px #EAEEF4; -} -table.surname tbody tr td { - border-bottom:dashed 1px #BFD0EA; -} -table.surname tbody tr td.ColumnName { - width:20%; - padding:0; - background-color:#EAEEF4; -} -table.surname tbody tr td.ColumnName a { - display:block; - padding:.6em 10px .6em 20px; -} -table.surname tbody tr td.ColumnName a:hover { - background-color:#BFD0EA; -} -table.surname tbody tr td.ColumnName a span.grampsid { - display:none; -} -table.surname thead tr th.ColumnParents, table.surname tbody tr td.ColumnParents { - width:25%; +table.surname td.ColumnName > a { + padding-left: 15px; } /* Individuals ----------------------------------------------------- */ -#Individuals { } -#Individuals table.individuallist { - border-bottom:solid 1px #EAEEF4; -} -#Individuals table.individuallist tbody tr td { - border-bottom:dashed 1px #BFD0EA; -} -#Individuals table.individuallist tbody tr td a:hover { - text-decoration:none; -} -table.individuallist tbody tr td.ColumnSurname { - background:none; -} -table.individuallist tbody tr td.ColumnSurname a:hover, table.individuallist tbody tr td.ColumnSurname a:active { - cursor:default; - color:black; - background:none; -} -table.individuallist tbody tr td.ColumnName { - padding:0; - background-color:#EAEEF4; -} -table.individuallist tbody tr td.ColumnName a { - display:block; - padding:.6em 10px; - vertical-align:middle; -} -table.individuallist tbody tr td.ColumnName a:hover { - background-color:#BFD0EA; -} -#Individuals div table.infolist tr td p { - vertical-align:top; -} -#Individuals div table.infolist tr td p a { - display:inline; -} - -/* IndividualDetail ------------------------------------------------------- */ -#IndividualDetail { - background-color:#EAEEF4; -} -#IndividualDetail div table.infolist tr td { - font:normal .9em/1.2em sans-serif; - vertical-align:top; -} -#IndividualDetail div table.infolist tr td a { - display:inline; -} -#IndividualDetail table.infolist tr td a:hover { - text-decoration:underline; -} -#IndividualDetail table.infolist tbody tr td.ColumnAttribute { - width:10%; - color:#696969; -} -#IndividualDetail div.subsection table tr td:first-child { - padding-left:20px; -} -#familymap a.familymap { - margin-left:20px; -} - -/* Subsections : Attributes ------------------------------------------------------ */ -div#attributes { - margin: 0; - padding: 0; -} -table.attrlist { - width: 100%; -} -table.attrlist thead tr th { - background-color: #70B1ED; - color: #000; -} -table.attrlist tbody tr td { - border-bottom: dashed 1px #000; -} -table.attrlist tbody tr td.ColumnType { - width: 15%; -} -table.attrlist tbody tr td.ColumnValue { - width: 15%; -} -table.attrlist tbody tr td.ColumnNotes { - width: 40%; -} -table.attrlist tbody tr td.ColumnSources { - width: 10%; -} - -/* Sources ------------------------------------------------------ */ -#Sources table.infolist tbody tr td.ColumnRowLabel { - padding-bottom:0; -} -#Sources table.infolist tbody tr td.ColumnName { - padding:0; -} -#Sources table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; -} -#SourceDetail div#references ol li { - padding-bottom:.5em; -} - -/* Relationships -================================================= */ -table.relationships thead tr th.ColumnMarriage, -table.relationships thead tr th.ColumnDivorce { - width: 13%; -} -table.relationships thead tr th.ColumnHyper { - width: 15%; -} -table.relationships thead tr th.ColumnMedia { - width: 15%; -} -table.relationships tbody tr td.ColumnRowLabel a { - background: none; -} -table.relationships tbody tr td.ColumnPartner { - font-size:100%; +table.IndividualList td.ColumnSurname { + background-color: #EAEEF4; } /* Places ----------------------------------------------------- */ -#Places table.infolist tbody tr td.ColumnName { - padding:0; +#Places table.infolist td.ColumnName { + background-color: #EAEEF4; } -#Places table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; +#Places table.infolist td.ColumnName a[href]:hover { + background-color: #BFD0EA; +} +/* 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 #BFD0EA; + border-top:dashed 1px #BFD0EA; } #EventList table.infolist tr.BeginLetter td { - border-top: solid 1px #BFD0EA; + border-top:solid 1px #BFD0EA; } -#EventList table.infolist tr td a, -#EventDetail table.infolist tr td a { +#EventList table.infolist td.ColumnType { + background-color: #EAEEF4; +} +#EventList td.ColumnPerson a { display: inline; } -#EventList table.infolist tr td span.father, -#EventList table.infolist tr td span.mother, -#EventDetail table.infolist tr td span.father, -#EventDetail table.infolist tr td span.mother { - display: block; -} -#EventList table.infolist tr td span.person:after, -#EventList table.infolist tr td span.father:after, -#EventList table.infolist tr td span.mother:after, -#EventDetail table.infolist tr td span.person:after, -#EventDetail table.infolist tr td span.father:after, -#EventDetail table.infolist tr td span.mother:after { +#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 table.infolist tr td span.person:last-child:after, -#EventList table.infolist tr td span.father:last-child:after, -#EventList table.infolist tr td span.mother:last-child:after, -#EventDetail table.infolist tr td span.person:last-child:after, -#EventDetail table.infolist tr td span.father:last-child:after, -#EventDetail table.infolist tr td span.mother:last-child:after { +#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 ----------------------------------------------------- */ -#Gallery table.infolist tbody tr td.ColumnRowLabel, #Gallery table.infolist tbody tr td.ColumnDate { - padding-bottom:0; -} -#Gallery table.infolist tbody tr td.ColumnName { - padding:0; -} -#Gallery table.infolist tbody tr td.ColumnName a { - padding:.1em 10px .3em 10px; -} -#Gallery table.infolist tbody tr td.ColumnName a:hover { - background-color:#EAEEF4; -} #GalleryNav { - font-size:.8em; - margin:1em 0 0 0; - padding:1.2em 0 0 0; - text-align:center; + text-align: center; + margin: 2em 0px; } #GalleryNav a { - font-weight:bold; - text-decoration:none; - background-color:#EAEEF4; - border:solid 1px #7CA3DD; + font-weight: bold; + background-color: #EAEEF4; + border: solid 1px #7CA3DD; + margin: 1em; } #GalleryNav a:hover { - background-color:#BFD0EA; + background-color: #BFD0EA; } #GalleryNav a#Previous { - padding:.4em .7em .3em .7em; + padding: .4em .7em .3em .7em; } #GalleryNav a#Next { - padding:.4em 1.9em .3em 1.9em; -} -#GalleryPages { - margin:0 1em; + padding: .4em 1.9em .3em 1.9em; } #GalleryCurrent { - font-size:1.2em; - font-weight:bold; + font-size: larger; } #GalleryTotal { - font-weight:normal; + font-weight: normal; } #GalleryDisplay { - margin:0 auto; - padding:0; - position:relative; - overflow:hidden; - text-align:center; - border:solid 1px #7CA3DD; + margin: 0px auto; + position: relative; } #GalleryDisplay img { - margin:0 auto; + margin: 0px auto; + display: block; + border: solid 1px #7CA3DD; } -#GalleryDetail div#summaryarea{ - margin:0; - padding:1.4em 0 0 0; -} -#GalleryDetail div#summaryarea h3 { - text-align:center; -} -#GalleryDetail div h4 { - margin-top:0; -} -#GalleryDetail div#summaryarea table.gallery { - width:100%; - margin-top:1.5em; - margin-bottom:0; - padding-bottom:0; - background-color:#EAEEF4; - border-style:solid; - border-width:8px 0 0 0; - border-color:#BFD0EA; -} - -/* Thumbnail Preview Reference Section -------------------------------------------------- */ -body#ThumbnailPreview div#references { - background-color: #FFF; - color: #00029D; - margin: 0 auto; - padding: 0; - width: 100%; -} -body#ThumbnailPreview div#references table.infolist tbody tr { - border-bottom: dashed 1px #000; -} -body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnRowLabel a { - background: none; - width: 2%; -} -body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnName { - width: 90%; +#GalleryDetail h3 { + text-align: center; } /* Contact ----------------------------------------------------- */ +#Contact { + overflow: hidden; +} #Contact #summaryarea { - width:500px; - margin:2em auto; - padding:3em; - background-color:#EAEEF4; - border:solid 1px #7CA3DD; + width: 40em; + margin: 2em auto; + padding: 3em; + background-color: #EAEEF4; + border: solid 1px #7CA3DD; } -#Contact #summaryarea img { - float:right; - margin:0; - padding:0; - border:solid 1px #7CA3DD; +#Contact img { + float: right; + border: solid 1px #7CA3DD; } -#researcher { - margin-top:.3em; +#Contact #researcher, #Contact #researcher h3 { + font-size: larger; + padding-left: 0px; } -#researcher h3 { - padding:0; -} -#researcher span { - display:block; - float:left; - margin-right:.4em; -} -#streetaddress { - width:85%; -} -#locality, .locality { +#Contact #streetaddress, #Contact #locality, #Contact #email { display: block; - width: 100%; } -#city:after { - content:","; +#Contact #locality, #Contact #city, #Contact #state, #Contact #postalcode, +#Contact #country { + white-space: nowrap; } -#country { - clear:left; -} -#email { - clear:left; -} -#email a { - text-decoration:none; -} -#email a:hover { - text-decoration:underline; +#Contact #city:after { + content: ","; } -/* Download +/* Download ----------------------------------------------------- */ -#Download { - padding:1cm; - height:396px; -} -table.download { - border:solid 2px #000; - width:100%; -} -table.download img { - float:center; -} -table.download thead tr th { - text-align:center; - border:solid 2px #000; - color: #000; - text-transform:uppercase; -} -table.download tbody tr#Row02 { - border-bottom:solid 2px #000; -} -table.download thead tr th, table.download tbody tr td { - padding-left:10px; - padding-top:20px; - border-style:solid; - border-color:#000; - border-width:0 2px 2px 2px; - text-align:left; -} -table.download td.Description { - width: 50%; -} -table.download td.License { - width:8%; -} -table.download td.Filename { - width:30%; -} -table.download td.Filename a { - font-weight:bold; - font-style: italic; - text-decoration:none; -} -table.download td.Filename a:hover { - text-decoration:underline; -} -table.download td.Modified { - width:12%; - font-weight:bold; +#Download table.download a { + display: block; } -/* Subsections +/* Subsection ----------------------------------------------------- */ -#Home, #Introduction, #Contact { - padding:1.5em 0 3em 0; +#Home, #Introduction { + overflow: hidden; } -#Home p, #Introduction p, #Contact p { - margin:0 20px 1em 20px; +#Home img, #Introduction img { + float: right; + margin: 1em; + max-width: 950px; } -#Home img, #Introduction img, #Contact img { - float:right; - margin:0; - padding:0 20px 3em 20px; +#Home p, #Introduction p { + padding-left: 15px; } -#Home a, #Introduction a, #Contact a { - color: #000; - text-decoration: none; +.subsection { + clear: both; + overflow: hidden; } -div.subsection{ - padding-bottom:.5em; - background-color:#FFF; -} -div.subsection h4 { - margin-bottom:.5em; -} -div.subsection table, div.subsection ol, div.subsection p, div.subsection > a { - font-size:.9em; -} -div.subsection a { - text-decoration:none; -} -div.subsection a:hover { - text-decoration:underline; - background:none; -} -div.subsection table.infolist { - width:100%; - margin:0; -} -#IndividualDetail div.subsection table tr td:first-child { - padding-left:20px; +.subsection p { + margin: 0px; } -/* Subsections : Summary Area +/* Subsection : Families ----------------------------------------------------- */ -div#summaryarea { - min-height:100px; - background:none; -} -div#summaryarea table.infolist { - margin:0; - padding:0; - background:#FFF; - border-bottom:solid .7em #FFF; -} -div#summaryarea table.infolist tr td, div#summaryarea table.infolist tr td p { - vertical-align:top; -} -div#summaryarea table.infolist tr td a, div#summaryarea table.infolist tr td p a { - display:inline; -} -div#summaryarea table.infolist tbody tr td.ColumnAttribute { - width:14%; - padding-left:20px; -} - -/* Subsections : Events ------------------------------------------------------ */ -div#events { - padding-bottom:0; -} -div#events h4 { - margin-bottom:0; -} -div#events table.infolist { - border-bottom:solid 1px #FFF; -} -div#events table.infolist tbody tr td { - padding-top:.2em; - padding-bottom:.2em; -} -#IndividualDetail div#events table.infolist thead tr th:first-child { - padding-left:20px; -} -div#events table.infolist tbody tr td.ColumnAttribute { - border-bottom:dashed 1px #BFD0EA; -} -div#events table.infolist tbody tr td.ColumnValue { - border-bottom:dashed 1px #BFD0EA; -} -div#events table.infolist tbody tr td.ColumnValue p { - margin:.1em 2em; -} - -/* Subsections : Parents ------------------------------------------------------ */ -div#parents table.infolist tbody tr td.ColumnValue ol { - margin:0; - padding-top:0; -} -div#parents table.infolist tbody tr td.ColumnValue ol li { - padding-bottom:.2em; -} - -/* Subsections : Families ------------------------------------------------------ */ -div#families table.infolist tbody tr td.ColumnValue p { - margin-top:0; -} -div#families table.infolist tbody tr td.ColumnValue ol { - margin:0; - padding-top:0; -} -div#families table.infolist tbody tr td.ColumnValue ol li { - padding-bottom:.2em; -} div#families table.fixed_subtables table.eventlist { - table-layout:fixed; + table-layout: fixed; } div#families table.fixed_subtables table.eventlist th:first-child { - width:9em; + width: 9em; } div#families table.fixed_subtables table.eventlist th:last-child { - width:5em; + width: 5em; +} +div#families table.attrlist td.ColumnType { + color: black; } -/* Subsections : Addresses +/* Subsection : Gallery ----------------------------------------------------- */ -div#addresses { - padding-bottom:0; -} -div#addresses h4 { - margin-bottom:0; -} -div#addresses table.infolist { - border-bottom:solid 1px #FFF; -} -div#addresses table.infolist tbody tr td { - padding-top:.2em; - padding-bottom:.2em; -} -div#addresses table.infolist tbody tr td.ColumnAttribute { - width:30%; - border-bottom:dashed 1px #BFD0EA; -} -div#addresses table.infolist tbody tr td.ColumnValue { - border-bottom:dashed 1px #BFD0EA; -} -div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a { - display: inline; -} - -/* Subsections : Attributes ------------------------------------------------------ */ - -/* Subsections : Gallery ------------------------------------------------------ */ -#indivgallery h4 { - margin-bottom:1em; -} #indivgallery .thumbnail { - margin:0; - float:left; - width:130px; - height:150px; - text-align:center; + float: left; + max-width: 130px; + max-height: 150px; + font-size: smaller; + text-align: center; + margin: 0.8em 0.5em; } -#indivgallery .thumbnail a { - display:block; - margin:0; - padding:0; - background:none; +#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 .thumbnail a img { - margin:0; - padding:0; - border:solid 1px #7CA3DD; +#indivgallery img { + border: solid 1px #7CA3DD; } -#indivgallery div.thumbnail span { -/* ## remove this line and the comment markers from the line below to hide the description in Individual Gallery +#indivgallery span { +/* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery display: none; */ - - font-size:.6em; - text-align:center; - width:80%; - margin:0 auto; - padding:0; } -/* Subsections : Narrative +/* Subsection : Narrative ----------------------------------------------------- */ -div.narrative { - padding-bottom:0; +h4 + div.grampsstylednote, a.familymap { + margin: 1em 15px; } -.narrative p { - margin-top:.5em; - margin-bottom:0; - padding:0 20px 1em 20px; +i + div.grampsstylednote p { + margin: 0px; } -/* Subsections : References +/* Subsection : Family Map ----------------------------------------------------- */ -#references ol { - margin-top:0; - margin-bottom:0; +a.familymap { + display: block; } -/* Subsections : Source References +/* Subsection : Source References ----------------------------------------------------- */ -div#sourcerefs ol { - list-style-type:decimal; -} -div#sourcerefs ol li ol { - list-style-type:lower-alpha; +#sourcerefs ol li ol { + list-style-type: lower-alpha; } -/* Subsections : Weblinks ------------------------------------------------------ */ - -/* Subsections : Pedigree +/* Subsection : Pedigree ----------------------------------------------------- */ .pedigreegen { - font-size:.9em; - list-style:none; - margin:.5em 0 0 0; - padding:0 0 .7em 20px; + list-style-type: none; + padding-left: 15px; } .pedigreegen li ol { - list-style:none; - margin-left:.5em; -} -.pedigreegen li ol li { - padding-bottom:.2em; + list-style-type: none; } .pedigreegen li ol li ol { - list-style:decimal; - margin-left:1.6em; + list-style-type: decimal; } -.pedigreegen li ol li ol li ol.spouselist { - font-size:1em; - list-style:none; - margin-left:0; +.pedigreegen ol.spouselist { + list-style-type: none; } -.spouselist li.spouse ol { - font-size:1em; - list-style:decimal; - margin-left:1.6em; -} -.spouse a { - font-weight:normal; +.pedigreegen ol.spouselist li.spouse ol { + list-style-type: decimal; } .spouse:before { content: "+ "; } .thisperson { - font-weight:bold; + font-weight: bold; +} +.thisperson > ol { + font-weight: normal; } /* Footer ----------------------------------------------------- */ #footer { - clear:both; - width:100%; - font-size:12px; - line-height:130%; - color:#204D91; - margin:0; - padding:15px 0 0 0; - background-color:#BFD0EA; - border-top:solid 1px #204D91; + clear: both; + padding-top: 1em; + background-color: #BFD0EA; + border-top: solid 1px #204D91; } -#footer a, #footer a:visited { - text-decoration:none; - color:#204D91; -} -#footer a:hover { - text-decoration:underline; -} -#footer img { - border:0; - margin:0 auto; - vertical-align:middle; +#footer > * { + background-color: #EAEEF4; } #footer p#createdate { - float:left; - width:40%; - text-align:left; - margin-left:10px; + float: left; + width: 50%; + text-align: left; + padding-left: 15px; + margin-top: 1em; } #footer p#copyright { - float:right; - width:40%; - text-align:right; - margin-right:10px; + float: right; + width: 40%; + text-align: right; + padding-right: 15px; } -#footer p#copyright img { - margin-right:10px; +#footer a[href]:hover { + background-color: #BFD0EA; } -#user_footer { - width:70%; - float:left; - margin:1em; -} -#user_footer p { - font:normal 1em/1.2em serif; - margin:0; - padding:0; + +/* Overwritten +----------------------------------------------------- */ +body#FamilyMap { + background-color: #EAEEF4 ! important; } /* Calendar Styles --------------------------------------------------------------------------------------------- */ -/* Calendar : General */ -body#WebCal { - padding:0 14px; - background-color:#204D91; +===================================================== */ +table.calendar { + table-layout: fixed; + empty-cells: show; } -.calendar { - empty-cells:show; - width:100%; - font-size:1em; - font-weight:normal; - margin:0; - padding:0; - border:none; - border-collapse:collapse; +.calendar thead th { + text-align: center; + border-top-style: none; } -.calendar thead tr th { - width:14%; - font-weight:bold; - font-size:14px; - line-height:14px; - text-align:center; - text-transform:uppercase; - padding:2px 0; +.calendar thead th.monthName { + font-size: xx-large; + font-weight: normal; + background-color: #FFF; + border-bottom-style: none; + padding-top: 1em; } -.calendar thead tr th.monthName { - width:100%; - font-weight:normal; - font-size:2em; - line-height:100%; - text-transform:none; - color:#204D91; - padding:.3em 0 .2em 0; - background-color:#FFF; - border-bottom-width:0; +.calendar thead th abbr { + border-bottom-style: none; } -body#WebCal #CreatorInfo { - float:right; - font-size:12px; - margin:-24px 10px 0 0; +#CreatorInfo { + float: right; + margin: -1em 15px 0px 0px; + font-weight: bold; + color: #7CA3DD; } -.calendar thead tr th.weekend, -.calendar thead tr th.weekday { - color:#204D91; - background-color:#EEE; - border-style:solid; - border-width:0 0 1px 0; - border-color:#7CA3DD; -} -.calendar thead tr th.saturday, -.calendar thead tr th.sunday { } -.calendar tfoot tr td { - padding:.7em 5% 1em 5%; - border-top:solid 4px #7CA3DD; +#CreatorInfo a[href]:hover { + background-color: #BFD0EA; } .calendar tfoot tr td { - vertical-align:middle; - color:#204D91; - background-color:#EEE; + border-top: solid 4px #7CA3DD; + vertical-align: middle; } /* Calendar : Date Numeral */ -.calendar tbody tr td div.date { - float:right; - display:block; - width:1.8em; - font-weight:bold; - font-size:1em; - line-height:100%; - text-align:center; - color:#204D91; - margin:0 0 0 .5em; - padding:.2em 0; - background-color:#BFD0EA; +.calendar div.date { + float: right; + width: 1.8em; + font-size: large; + text-align: center; + background-color: #BFD0EA; + color: #204D91; } /* Calendar : Date Container */ -.calendar tbody tr td { - vertical-align:top; - height:10em; - padding:0; - border-width:1px 0 0 1px; - border-style:solid; - border-color:#BFD0EA; +.calendar td { + padding: 0px 0px 0px 1ex; + border-width: 1px 0px 0px 1px; + border-style: solid; + border-color: #BFD0EA; + background-color: #FFF; } -.calendar tbody tr td.weekday { - background-color:#FFF; -} -.calendar tbody tr td.weekend { - background-color:#EAEEF4; -} -.calendar tbody tr td.saturday { - - } -.calendar tbody tr td:first-child { - border-left:none; +.calendar td:first-child { + border-left-style: none; + padding: 0px 0px 0px 1ex; } .calendar tbody tr:first-child td { - border-top:none; + border-top-style: none; } /* Calendar : Date Detail */ -.calendar tbody tr td ul { - list-style:none; - font-family:sans-serif; - font-size:.8em; - margin:2.3em 0 .3em 0; - padding:0; +.calendar td ul { + font-size: smaller; + list-style: none; + padding: 0px; } -.calendar tbody tr td ul li { - display:block; - width:92%; - margin:0 4%; - padding:.2em 0 .3em 0; - border-top:dashed 1px #C1B398; +.calendar td ul li { + border-top: dashed 1px #BFD0EA; + padding-top: 0.5em; + padding-bottom: 0.5em; } -.calendar tbody tr td ul li:first-child { - border:none; +.calendar td ul li:first-child { + border-style: none; +} +.calendar td ul a[href]:hover { + background-color: #BFD0EA; } /* Calendar : Birthday, Anniversary, Highlight */ -.calendar tbody tr td ul li em { - font-style:normal; - color:#0A65B5; +.calendar td ul li em { + font-style: normal; + color: #7CA3DD; } -.calendar tbody tr td ul li span.yearsmarried em { - color:#453619; +.calendar td.highlight { + background-color: #EAEEF4; } -.calendar tbody tr td.highlight { - background-color:#FFEBC2; -} -.calendar tbody tr td.highlight div.date { - color:#FF7C27; - background-color:#FFCF6C; +.calendar td.highlight div.date { + color: black; + background-color: #BFD0EA; } /* Calendar : Previous-Next Month */ -.calendar tbody tr td.previous, -.calendar tbody tr td.next, -.calendar tbody tr td.previous div.date, -.calendar tbody tr td.next div.date { - color:#BFD0EA; - background-color:#EAEEF4; +.calendar td.previous, +.calendar td.next, +.calendar td.previous div.date, +.calendar td.next div.date { + color: #BFD0EA; + background-color: #FFF; } /* Calendar : Full Year */ body#fullyearlinked div.content { - width:963px; - margin:0 auto; - padding:15px 0 2px 2px; + overflow: hidden; } body#fullyearlinked table.calendar { - float:left; - width:320px; - height:18em; - border:solid 1px #7D5925; + float: left; + width: 33.3%; + height: 18em; + border: solid 1px black; } -body#fullyearlinked table.calendar thead tr th { - height:2em; +body#fullyearlinked table.calendar thead th { + height: 2em; } -body#fullyearlinked table.calendar thead tr th.monthName { - font-size:1.2em; - padding:2px 0; +body#fullyearlinked table.calendar thead th.monthName { + font-size: large; + padding: 2px 0px; } - body#fullyearlinked table.calendar tbody tr td { - height:3em; +body#fullyearlinked table.calendar tbody td { + height: 3em; +} +body#OneDay div.content { + overflow: hidden; }