Stylesheet
|
Many aspects of the visual appearance of pages generated by Pedserve is controlled through its CSS Stylesheet - a file that sits in the root of the static part of your website, and is typically called CSS is short for Cascading Style Sheets and is the preferred way to handle stylistic aspects of web pages these days (colours, fonts, etc.). If you click the button below you will see a typical Pedserve stylesheet. As you can see, there is a lot in it. But you don't have to change any of it - unless you want to.
/* Copyright (C) 2007, Tenset Technologies Ltd.
* This file is part of the Pedserve Online Pedigree Database system, Advanced Edition.
* All rights reserved.
*
* You may not copy, publish, license, sell, distribute, transmit, display, perform,
* modify, reproduce, transfer or create derivative works from this file
* except without prior written permission of Tenset Technologies Ltd.
*
* You may not alter or remove any trademark, copyright or other notice from this file
* or from any web page content (HTML) that is generated by program logic in this file.
*/
/* Primary background + font for the whole document */
body {
background-color: #e0e0e0;
color: #000000;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
}
/* Apparently this will fix a bug in Mozilla */
html { min-width: 742px; }
/* Items specific to the side menu on the left */
#Menu {
position: absolute;
top: 0.1em;
left: 0.1em;
width: 8em;
padding: 0.5em;
background-color: #cccccc;
}
/* Items specific to the main 'content area' - to the right of the side menu */
#Content {
margin: 0em 0em 0em 9.5em;
padding: 0.25em;
border-width: 0px;
border-style: solid;
}
body, p, h1, h2, h3, table, tr, td, th, a, img, form, input, select, button {
margin: 0px;
padding: 0px;
}
p, h1, h2, h3, table, tr, td, th, a, img, form, input, select, button {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
}
body, p, h1, h2, h3, table, tr, td, th, a, img {
border-color: #b0b0b0;
text-align: left;
border-width: 0px;
}
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 120%; }
h2, h3 { margin-top: 0.25em; }
p { margin-bottom: 0.25em; }
ol, ul{
margin-top: 0em;
margin-bottom: 0.25em;
}
a:link { color: inherit; }
a:visited { color:inherit; }
a:hover { background-color:inherit; }
/* OVERALL BODY STYLES --------------------------------------------------- */
/* This is a <body> class used when not logged in (closed system) */
.pds-notloggedin-body { }
/* This is a <body> class used when logged in as user (closed system)
* OR system is an open system
*/
.pds-user-body { }
/* This is a <body> class used when logged in as admin (closed system) */
.pds-admin-body { background-color: #FEC8F2; }
/* GENERAL STYLES --------------------------------------------------- */
/* Styles applied using <span> for adding various forms of emphasis: */
.pds-emph-bold-span { font-weight: bold; }
.pds-emph-italic-span { font-style: italic; }
.pds-emph-big-span { font-size: 120%; }
.pds-emph-error-span { color: red; }
.pds-emph-warning-span { color: red; }
.pds-emph-code-span {
font-family: monospace;
font-style: italic;
font-size: inherit;
}
/* Style applied with <span> to a highlight tile with supplied content: */
.pds-highlighttile-span {
border-style: solid;
border-width: 1;
}
/* Style applied with <img> to a highlight tile without supplied content: */
.pds-highlighttile-img {
border-style: solid;
border-width: 1;
border-color: black;
}
/* This is a <p> class used for debug messages output in the HTML stream */
.pds-debug-p {
display: none;
color: red;
}
/* DECORATED ANIMAL NAME STYLES --------------------------------------------------- */
/* These are applied to <span> tags around parts or all of an animal's name */
/* Front title, only: */
.pds-dan-t-span {}
/* Name part, only: */
.pds-dan-n-span {}
/* Additional titles part, only: */
.pds-dan-at-span {}
/* Whole name, when there is no front title: */
.pds-dan-wn-span {}
/* Whole name, when there IS a front title: */
.pds-dan-wtn-span { color: red; }
/* 'SITE' MENU ITEM STYLES --------------------------------------------------- */
/* Styles applied to site menu command items: */
/* use these for item rendered as <a>'s with the style applied
*as an enclosing <span>: */
.pds-sitemenu-cmd-normal {
color: #000000;
font-weight: bold;
}
.pds-sitemenu-cmd-disabled {
color: #a0a0a0;
font-weight: bold;
}
.pds-sitemenu-cmd-selected {
color: blue;
font-weight: bold;
}
/* use these for item rendered as <button>'s: */
/* pds-sitemenu-cmd-normal {} */
/* pds-sitemenu-cmd-disabled {} */
/* pds-sitemenu-cmd-selected {} */
/* The <div> that encloses the whole site menu: */
.pds-sitemenu-div {
/* Have thin horz lines above and below the page menu */
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-style: solid;
padding: 0.25em 0em 0.25em 0em;
}
/* Link properties for the site menu */
.pds-sitemenu-div a:link, .pds-sitemenu-div a:visited,
.pds-sitemenu-div a:hover {
color: inherit;
background-color: inherit;
font-style: inherit;
text-decoration: none;
font-weight: inherit;
}
.pds-sitemenu-div a:hover {
background-color: #a0a0a0;
font-weight: inherit;
}
/* 'PAGE' MENU ITEM STYLES --------------------------------------------------- */
/* Styles applied to page menu command items: */
/* use these for item rendered as <a>'s with the style
* applied as an enclosing <span>:
*/
.pds-pagemenu-cmd-normal {
color: #000000;
font-weight: bold;
}
.pds-pagemenu-cmd-disabled {
color: #a0a0a0;
font-weight: bold;
}
.pds-pagemenu-cmd-selected {
color: blue;
font-weight: bold;
}
/* use these for item rendered as <button>'s: */
/* .pds-pagemenu-cmd-normal {} */
/* .pds-pagemenu-cmd-disabled {} */
/* .pds-pagemenu-cmd-selected {} */
/* The <div> that encloses the whole page menu: */
.pds-pagemenu-div {
/* make it a bit smaller */
font-size: 85%;
/* Have thin horz lines above and below the page menu */
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-style: solid;
padding: 0.25em 0em 0.25em 0em;
margin: 0.25em 0em 0.50em 0em;
/* Give it the same background colour as the side bar */
background-color: #cccccc;
}
/* Link properties for the page menu */
.pds-pagemenu-div a:link, .pds-pagemenu-div a:visited,
.pds-pagemenu-div a:hover {
color: inherit;
background-color: inherit;
font-style: inherit;
text-decoration: none;
font-weight: inherit;
}
.pds-pagemenu-div a:hover {
background-color: #a0a0a0;
font-weight: inherit;
}
/* OPTIONS BAR STYLES --------------------------------------------------- */
/* The <div> which encloses the whole options bar: */
.pds-optionsbar-div {
font-size: 75%;
margin-bottom: 0.50em;
}
/* Style for a command item present in the options bar: */
.pds-optionsbar-cmd-normal { color: #000000; }
.pds-optionsbar-cmd-disabled { color: #a0a0a0; }
.pds-optionsbar-cmd-selected { color: blue; }
/* Link properties for options bar command items */
.pds-optionsbar-div a:link, .pds-optionsbar-div a:visited,
.pds-optionsbar-div a:hover {
color: inherit;
background-color: inherit;
font-style: inherit;
text-decoration: none;
font-weight: bold;
}
.pds-optionsbar-div a:hover {
background-color: #a0a0a0;
font-weight: bold;
}
/* PLATE STYLES --------------------------------------------------- */
/* (A) rows within a plate table: */
/* custom row above the normal content row(s); applied to <tr> tag: */
.pds-plate-customabove-tr {}
/* normal content when joined together into a single row; applied to <tr> tag: */
.pds-plate-contentjoined-tr {}
/* normal content when presented in up to 5 separate rows; applied to <tr> tag: */
.pds-plate-internalcontentabove-tr {}
.pds-plate-contenttop-tr {}
.pds-plate-contentmiddle-tr {}
.pds-plate-contentbottom-tr {}
.pds-plate-internalcontentbelow-tr {}
/* custom row below the normal content row(s); applied to <tr> tag: */
.pds-plate-custombelow-tr {}
/* (B) zone cells within a plate row: */
/* in a plate row with 2/3 non-empty cells, the left cell; applied to <td> tag: */
.pds-plate-leftcell-td {}
/* in a plate row with 2/3 non-empty cells, the right cell; applied to <td> tag: */
.pds-plate-rightcell-td {}
/* in a plate row with 3 non-empty cells, the centre cell; applied to <td> tag: */
.pds-plate-centrecell-td {}
/* in a plate row with 1 non-empty cells, the single cell; applied to <td> tag: */
.pds-plate-singlecell-td {}
/* (C) zone cell content, when rendered as a 2 column table with field labels
* in col 1, field values in col 2: */
/* <table> tag: */
.pds-plate-2colcellcontent-table {}
/* <tr> tag: */
.pds-plate-2colcellcontent-tr {}
/* <td> tags: */
.pds-plate-2colcellcontent-fieldlabel-td {}
.pds-plate-2colcellcontent-fieldvalue-td {}
/* (D) field label style for fields within a plate; applied to encompassing <span> tag: */
.pds-plate-fieldlabel-span { }
/* PEDIGREE STYLES --------------------------------------------------- */
/* Applied to the <div> holding a pedigree table: */
/* Give the table contents a default light background colour; this will
* be overridden by any highlighting colours set in the pedigree
*/
.pds-ped-div { background-color: #f0f0f0; }
/* Applied to the overall pedigree <table>: */
.pds-ped-table {
background-color: #a0a0a0;
border-width: 1px;
border-style: solid;
border-collapse: separate;
}
/* Applied to the <tr> that holds the generation titles in a pedigree: */
/* Give the titles row a darker background, and embolden the text */
.pds-ped-header-tr { background-color: #a0a0a0; }
.pds-ped-header-tr th { padding-left: 0.25em; font-weight: bold; }
/* Applied to the <td> that is the pedigree cell for an ancestor at
* gen N in a pedigree: */
.pds-ped-table td { border-width: 0px; }
/* This is where we adjust the sizes of the text
* in the different ancestor columns
*/
.pds-ped-g0-td { font-size: 120%; background-color: #f0f0f0; }
.pds-ped-g1-td { font-size: 110%; background-color: #f0f0f0; }
.pds-ped-g2-td { font-size: 100%; background-color: #f0f0f0; }
.pds-ped-g3-td { font-size: 90%; background-color: #f0f0f0; }
.pds-ped-g4-td { font-size: 80%; background-color: #f0f0f0; }
.pds-ped-g5-td { font-size: 70%; background-color: #f0f0f0; }
.pds-ped-g6-td { font-size: 60%; background-color: #f0f0f0; }
.pds-ped-g7-td { font-size: 55%; background-color: #f0f0f0; }
.pds-ped-g8-td { font-size: 55%; background-color: #f0f0f0; }
/* As above, but this time without any background coloring given */
.pds-ped-g0-nobg-td { font-size: 120%; }
.pds-ped-g1-nobg-td { font-size: 110%; }
.pds-ped-g2-nobg-td { font-size: 100%; }
.pds-ped-g3-nobg-td { font-size: 90%; }
.pds-ped-g4-nobg-td { font-size: 80%; }
.pds-ped-g5-nobg-td { font-size: 70%; }
.pds-ped-g6-nobg-td { font-size: 60%; }
.pds-ped-g7-nobg-td { font-size: 55%; }
.pds-ped-g8-nobg-td { font-size: 55%; }
/* Applied to the plate <table> that is the 'content' for a non-unknown
* ancestor at gen N in a pedigree (the ancestor 'content')
*/
.pds-ped-g0-present-plate-table {}
.pds-ped-g1-present-plate-table {}
.pds-ped-g2-present-plate-table {}
.pds-ped-g3-present-plate-table {}
.pds-ped-g4-present-plate-table {}
.pds-ped-g5-present-plate-table {}
.pds-ped-g6-present-plate-table {}
.pds-ped-g7-present-plate-table {}
.pds-ped-g8-present-plate-table {}
/* Applied to the <p> that is the 'content' for an unknown ancestor at
* gen N in a pedigree (the ancestor 'content')
*/
.pds-ped-g0-missing-p {}
.pds-ped-g0-missing-p {}
.pds-ped-g1-missing-p {}
.pds-ped-g2-missing-p {}
.pds-ped-g3-missing-p {}
.pds-ped-g4-missing-p {}
.pds-ped-g5-missing-p {}
.pds-ped-g6-missing-p {}
.pds-ped-g7-missing-p {}
.pds-ped-g8-missing-p {}
/* Make the text in the 'top' plate row within each ancestor cell bigger than the rest.
* This is how we get the ancestor names to appear larger than their details text.
*/
.pds-ped-div .pds-plate-contenttop-tr { font-size: 130%; }
/* SEARCH RESULTS STYLES --------------------------------------------------- */
/* Applied to the div containing the results table + navbars: */
.pds-results-div {}
/* Applied to the nav bar <table> that is shown above/below the hit list: */
.pds-results-navbar-table { width: 100%; }
/* Applied to the nav bar rows <tr>: */
.pds-results-navbar-tr { }
/* Applied to the nav bar <td> that is used for the left side
* cells ('N/M results', and 'Showing page X of Y':
*/
.pds-results-navbarleft-td { }
/* Applied to the nav bar <td> that is used for the right side cells
* ('1, 2, 3, 5 ... Next'):
*/
.pds-results-navbarright-td { text-align: right; }
/* NORMAL MODE */
/* Applied to the <table> that IS the hit list in normal mode: */
/* Give the table contents a default light background colour;
* this will be overridden by any highlighting colours set in the pedigree
*/
.pds-results-normal-table {
background-color: #f0f0f0;
width: 100%;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
}
/* Applied to the header row <tr>: */
.pds-results-normal-header-tr { background-color: #a0a0a0; }
.pds-results-normal-header-tr th { font-weight: bold; }
/* Applied to the header cells <th>: */
.pds-results-normal-header-th {
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
font-weight: bold;
}
/* Applied to the header cells <span>: */
.pds-results-normal-header-span { }
/* Applied to the highlight decorations cells <td>: */
.pds-results-normal-decorations-td {
vertical-align: top;
border-left-width: 1px;
border-right-width: 1px;
border-style: solid;
padding-left: 0.1em;
padding-right: 0.1em;
font-size: 90%;
}
/* Applied to the hit# cells <td>: */
.pds-results-normal-hitno-td {
vertical-align: top;
border-left-width: 1px;
border-right-width: 1px;
border-style: solid;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
}
/* Styles for hit# command items: */
.pds-results-normal-hitno-cmd-normal {}
.pds-results-normal-hitno-cmd-disabled { color: #a0a0a0; }
.pds-results-normal-hitno-cmd-selected { color: #000000; }
/* Styles for special command items: */
.pds-results-normal-special-cmd-normal {}
.pds-results-normal-special-cmd-disabled { color: #a0a0a0; }
.pds-results-normal-special-cmd-selected { color: #000000; }
/* Applied to the special columns cells <td>: */
.pds-results-normal-special-td {
vertical-align: top;
border-left-width: 1px;
border-right-width: 1px;
border-style: solid;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
}
/* Applied to the normal column (field value) cells <td>: */
.pds-results-normal-field-td {
vertical-align: top;
border-left-width: 1px;
border-right-width: 1px;
border-style: solid;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
}
/* Applied to the normal column (field value) cells <span>: */
.pds-results-normal-field-span { }
/* Applied to the odd/even data rows <tr>: */
.pds-results-normal-odd-tr { background-color: #E8E8E8; }
.pds-results-normal-even-tr { background-color: #D8D8D8; }
/* GRID MODE */
/* Applied to the plate table used in results grid mode: */
.pds-results-grid-plate-table td { padding-right: 1em; }
.pds-results-grid-plate-table .pds-plate-fieldlabel-span { font-weight: bold; }
/* Applied to the <td> cells used in results grid mode: */
.pds-results-grid-td {
border-width: 1px;
border-style: solid;
padding-left: 0.25em;
padding-right: 0.25em;
}
/* Applied to the <tr> rows used in results grid mode: */
.pds-results-grid-tr {
vertical-align: top;
padding-left: 0.25em;
padding-right: 0.25em;
}
/* Applied to the <table> that IS the results in grid mode: */
.pds-results-grid-table {
width: 100%;
background-color: #f0f0f0;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
}
/* Styles for a hit# command item present in hit list: */
.pds-results-grid-hitno-cmd-normal {}
.pds-results-grid-hitno-cmd-disabled { color: #a0a0a0; }
.pds-results-grid-hitno-cmd-selected { color: #000000; }
/* MERGED MODE */
/* Applied to the <table> that IS the hit list in merged mode: */
/* Give the table contents a default light background colour;
* this will be overridden by any highlighting colours present
*/
.pds-results-merged-table {
background-color: #f0f0f0;
width: 100%;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
}
/* Applied to the header rows <tr>: */
.pds-results-merged-header-tr { background-color: #a0a0a0; }
.pds-results-merged-header-tr th { font-weight: bold; }
/* Applied to the header cells (for the non-derived columns) <th>: */
.pds-results-merged-header-th {
vertical-align: top;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
font-weight: bold;
}
/* Applied to the colspanned header cell used above the derived columns <th>: */
.pds-results-merged-derivedheadertitle-th {
background-color: #bbbbbb;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
font-weight: bold;
}
/* Applied to the header cells (for derived columns) <th>: */
.pds-results-merged-derivedheader-th {
background-color: #bbbbbb;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
font-weight: bold;
}
/* Applied to the header cells (for derived columns) <span>: */
.pds-results-merged-derivedheader-span { }
/* Applied to the plate table used for the 'main' record in merged mode: */
.pds-results-merged-plate-table { }
/* Applied to any hit# cell for the 'main' record <td>: */
.pds-results-merged-hitno-td {
vertical-align: top;
border-right-width: 1px;
border-style: solid;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
}
/* Styles for any hit# command item for the 'main' record: */
.pds-results-merged-hitno-cmd-normal {}
.pds-results-merged-hitno-cmd-disabled { color: #a0a0a0; }
.pds-results-merged-hitno-cmd-selected { color: #000000; }
/* Applied to the normal 'field value' cell for the 'main' record
* (there is only 1 column of this type, it holds a 'plate' that
* renders the main record) <td>:
*/
.pds-results-merged-field-td {
vertical-align: top;
border-right-width: 2px;
border-style: solid;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
}
/* Applied to the odd/even data row <tr>: */
.pds-results-merged-odd-tr {
background-color: #E8E8E8;
border-top-width: 1px;
border-bottom-width: 1px;
border-style: solid;
}
.pds-results-merged-even-tr {
background-color: #D8D8D8;
border-top-width: 1px;
border-bottom-width: 1px;
border-style: solid;
}
/* Applied to the odd/even 'padding' rows used to avoid derived rows
* getting too stretched <tr>. These should be the same as the 'data'
* row styles, but with zero padding / margins and no borders etc
*/
.pds-results-merged-oddpadding-tr {
background-color: #E8E8E8;
padding: 0px;
}
.pds-results-merged-evenpadding-tr {
background-color: #D8D8D8;
padding: 0px;
}
/* Applied to the derived record highlight decorations cell <td>: */
.pds-results-merged-deriveddecorations-td {
padding-left: 0.1em;
padding-right: 0.1em;
font-size: 90%;
}
/* Applied to the derived record hit# cell <td>: */
.pds-results-merged-derivedhitno-td {
vertical-align: top;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
}
/* Styles for the derived record hit# command item: */
.pds-results-merged-derivedhitno-cmd-normal {}
.pds-results-merged-derivedhitno-cmd-disabled { color: #a0a0a0; }
.pds-results-merged-derivedhitno-cmd-selected { color: #000000; }
/* Applied to the derived record special columns cells <td>: */
.pds-results-merged-derivedspecial-td {
vertical-align: top;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
}
/* Applied to the derived record field value cell <td>: */
.pds-results-merged-derivedfield-td {
vertical-align: top;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
}
/* Applied to the derived record field value cell <span>: */
.pds-results-merged-derivedfield-span { }
/* Applied to the derived records 'summary' row cell(s) <td>: */
.pds-results-merged-derivedsummary-td {
vertical-align: top;
padding-top: 0.25em;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
}
/* Applied to the 'padding' row cell(s) <td>: */
.pds-results-merged-paddingcell-td { padding: 0px; }
/* Styles for the derived records 'all records' command item: */
.pds-results-merged-derivedrecords-cmd-normal {}
.pds-results-merged-derivedrecords-cmd-disabled { color: #a0a0a0; }
.pds-results-merged-derivedrecords-cmd-selected { color: #000000; }
/* HIGHLIGHTING LEGEND --------------------------------------------------- */
/* Applied to the <table> that IS the legend table: */
.pds-results-legend-table {
width: 100%;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
}
/* Applied to the <tr> that holds a subtitle row in the legend table: */
.pds-results-legend-subtitle-tr {
border-bottom-width: 1px;
border-style: solid;
}
/* Applied to the <th> for a subtitle: */
.pds-results-legend-subtitle-th {
padding-top: 0.2em;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 90%;
font-weight: bold;
text-align: left;
}
/* Applied to the <tr> that holds a 'data' row in the legend table: */
.pds-results-legend-data-tr { }
/* Applied to the <td> that holds a sample cell in a data row of the legend table: */
.pds-results-legend-sample-td {
text-align: center;
width: 1px;
padding-top: 0.2em;
padding-left: 0.25em;
padding-right: 0.25em;
padding-bottom: 0.2em;
font-size: 90%;
}
/* Applied to the <td> that holds a legend (label) cell in a data row
* of the legend table:
*/
.pds-results-legend-legend-td {
vertical-align: top;
padding-top: 0.2em;
padding-left: 0.25em;
padding-right: 0.25em;
padding-bottom: 0.2em;
font-size: 90%;
}
/* RECORD DETAILS --------------------------------------------------- */
/* Applies to the <div> that contains the record details table: */
.pds-recorddetails-div { }
/* Applies to the plate <table> that IS the record details: */
.pds-recorddetails-plate-table td { padding-right: 1em; }
.pds-recorddetails-plate-table .pds-plate-fieldlabel-span { font-weight: bold; }
/* INPUT TABLES AND ELEMENTS --------------------------------------------------- */
/* Applies to the <table> that contains data entry fields, as used in
* search screens, data entry screens, etc:
*/
.pds-input-table {
background-color: #ADD2E2;
margin-top: 0.5em;
margin-bottom: 0.5em;
padding: 0.25em;
}
/* Applies to the <tr> that contains data entry fields, as used in
* search screens, data entry screens, etc:
*/
.pds-input-tr {}
/* Applies to a <td> containing a data entry field, as used in
* search screens, data entry screens, etc:
*/
.pds-input-td {
vertical-align: top;
padding-bottom: 0.1em;
padding-top: 0.1em;
padding-left: 0.25em;
padding-right: 0.1em;
}
/* Applies to a <td> containing a LABEL for a data entry field, as
* used in search screens, data entry screens, etc. Typically such
* <td> appear in the leftmost column e.g. of the advanced search form screen
*/
.pds-inputlabel-td {
vertical-align: top;
font-weight: bold;
padding-bottom: 0.1em;
padding-top: 0.1em;
padding-left: 0.25em;
padding-right: 1em;
}
/* Applies to a <th> containing a column heading, as used in
* search screens, data entry screens, etc: */
.pds-input-th { font-weight: bold; }
/* These apply to <input>, <select>, <button> etc elements within an
* input form (such as a search form).
* The 'disabled' style is used whenever a control is disabled.
* The 'enabled' style is used whenever a control is enabled, and
* does not contain any kind of invalid input;
* The 'invalid' style is used whenever a control is enabled, but
* we need to highlight to the user that it contains invalid input
*/
.pds-input-disabled-multi { }
.pds-input-enabled-multi { }
.pds-input-invalid-multi { background: #fdd; }
/* Applies to the submit button in an input form: */
.pds-input-submit {}
/* ADMIN --------------------------------------------------- */
/* The <div> that encloses the whole admin summary content: */
.pds-admin-summary-div {}
/* Style for summary table, the table itself <table>: */
.pds-admin-summary-table {
background-color: #f0f0f0;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
}
/* Style for summary table, rows within the table, <tr>: */
.pds-admin-summary-tr { }
/* Style for summary table, column headings <th>: */
.pds-admin-summary-th {
background-color: #a0a0a0;
vertical-align: top;
font-weight: bold;
padding-bottom: 0.1em;
padding-top: 0.1em;
padding-left: 0.25em;
padding-right: 1em;
}
/* Style for summary table, label cells <td>: */
.pds-admin-summary-label-td {
vertical-align: top;
font-weight: bold;
padding-bottom: 0.1em;
padding-top: 0.1em;
padding-left: 0.25em;
padding-right: 1em;
}
/* Style for summary table, value cells <td>: */
.pds-admin-summary-value-td {
vertical-align: top;
padding-bottom: 0.1em;
padding-top: 0.1em;
padding-left: 0.25em;
padding-right: 0.1em;
}
/* Style for a command items with serious consequences: */
.pds-admin-destructiveaction-cmd-normal {
color: #000000;
background-color: red;
}
.pds-admin-destructiveaction-cmd-disabled {
color: #a0a0a0;
background-color: red;
}
.pds-admin-destructiveaction-cmd-selected {
color: #000000;
background-color: red;
}
/* OTHERS --------------------------------------------------- */
/* Advanced search <div>: */
.pds-advsearch-div {}
/* Basic search form <div>: */
.pds-basicsearch-div {}
/* The <div> that encloses the search form shortcut queries : */
.pds-searchprepackaged-div {
margin-top: 1em;
margin-bottom: 1em;
}
/* Applies to the <div> that contains data entry form, as used in
* the various admin-type screens:
*/
.pds-dataentry-div {}
Minor changes to the stylesheet can have a major impact on the appearance of Pedserve-generated pages. E.g. if you click the button below you will see some minor changes to the default stylesheet that result in the alternate appearance shown to the right. The differences are:
.
.
body {
background-color: #e0e0c0;
color: #000000;
font-family: Times, serif;
font-weight: normal;
font-size: 100%;
}
.
.
/* Items specific to the side menu on the left */
#Menu {
position: absolute;
top: 0.1em;
left: 0.1em;
width: 8em;
padding: 0.5em;
background-color: #cccc77;
}
.
.
/* DECORATED ANIMAL NAME STYLES --------------------------------------------------- */
/* These are applied to <span> tags around parts or all of an animal's name */
.
.
/* Whole name, when there IS a front title: */
.pds-dan-wtn-span {
color: red;
font-weight: bold;
font-size: 120%;
}
.
.
/* 'PAGE' MENU ITEM STYLES --------------------------------------------------- */
.
.
/* The <div> that encloses the whole page menu: */
.pds-pagemenu-div {
.
.
background-color: #cccccc;
}
.
.
.
/* PEDIGREE STYLES --------------------------------------------------- */
/* Applied to the overall pedigree <table>: */
.pds-ped-table {
background-color: #cccc77;
border-width: 1px;
border-style: solid;
border-collapse: separate;
}
/* Applied to the <tr> that holds the generation titles in a pedigree: */
/* Give the titles row a darker background, and embolden the text */
.pds-ped-header-tr { background-color: #cccc77; }
/* This is where we adjust the sizes of the text in the different ancestor columns */
.pds-ped-g0-td { font-size: 180%; background-color: #f0f0d0; }
.pds-ped-g1-td { font-size: 150%; background-color: #f0f0d0; }
.pds-ped-g2-td { font-size: 120%; background-color: #f0f0d0; }
.pds-ped-g3-td { font-size: 90%; background-color: #f0f0d0; }
.pds-ped-g4-td { font-size: 80%; background-color: #f0f0d0; }
.pds-ped-g5-td { font-size: 70%; background-color: #f0f0d0; }
.pds-ped-g6-td { font-size: 60%; background-color: #f0f0d0; }
.pds-ped-g7-td { font-size: 55%; background-color: #f0f0d0; }
.pds-ped-g8-td { font-size: 55%; background-color: #f0f0d0; }
/* As above, but this time without any background coloring given */
.pds-ped-g0-nobg-td { font-size: 180%; }
.pds-ped-g1-nobg-td { font-size: 150%; }
.pds-ped-g2-nobg-td { font-size: 120%; }
.pds-ped-g3-nobg-td { font-size: 90%; }
.pds-ped-g4-nobg-td { font-size: 80%; }
.pds-ped-g5-nobg-td { font-size: 70%; }
.pds-ped-g6-nobg-td { font-size: 60%; }
.pds-ped-g7-nobg-td { font-size: 55%; }
.pds-ped-g8-nobg-td { font-size: 55%; }
.
.
.
|
USEFUL LINKS: |
