noteweb: Rendering bird field notes for the Web

The author prefers a pale yellow background and not a stark white.

body
{ background-color: #ffffee; /* Very pale yellow */
}

Here are some rules for styling inline content. The span.loc-label rule is used to italicize inline labels that set off paragraphs.

span.loc-label
{   font-style: italic;
}

The span.bird-name rule styles species names. The text is dark green, and boldfaced.

span.bird-name
{   color: #007722;             /* Dark green */
    font-weight: bold;
}

The label “Notable:” needs to stand out, so we set it in maroon type, surrounded by a thin red box.

span.notable
{   font-weight: bold;
    color: maroon;
    border-style: solid;
    border-width: 1px;
    border-color: red;
    padding: 1px;
}

These two rules are used to mark up genus names and literature citations, both of which are traditionally italicized.

span.genus
{   font-style: italic;
}
span.cite
{   font-style: italic;
}

In order to use borders inside table rows and cells, we must select the “separate borders” table model for the index page.

table.seasons
{ border-collapse: collapse;
}

Columns in the index table are color-coded according to the four reporting seasons for Audubon Field Notes. We provide rules for both heading (th) and normal (td) table cells. The class names are the season names. All cells have borders on the left and right, so that the entire table is ruled.

th.winter, td.winter
{   background-color: #befaff;  /* ice blue */
    border-left: 1px solid black;
    border-right: 1px solid black;
}
th.spring, td.spring
{   background-color: #9affa5;  /* spring green */
    border-left: 1px solid black;
    border-right: 1px solid black;
}
th.summer, td.summer
{   background-color: #fff870;  /* pale yellow */
    border-left: 1px solid black;
    border-right: 1px solid black;
}
th.fall, td.fall
{   background-color: #eeaa3a;  /* dark orange */
    border-left: 1px solid black;
    border-right: 1px solid black;
}

These rules style the rows in the index table. We want rules around the bottom, left, and right sides of the row.

tr.year-row
{   border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right:  1px solid black;
}

To help the reader's eye track across the table, we make every fifth row's bottom border thicker. The year-group class is added for rows whose years are evenly divisible by 5.

tr.year-group
{   border-bottom: 3px solid black;
}

This rule is used to boldface the year that labels each row of the index table.

th.row-label
{   font-weight: bold;
}

This style element is used for children of the daily summary, and in other places where we want to set an indented block off with a little more vertical space, and use a hanging indent so continuation lines are indented further.

div.loc-child
{   margin-top: 0.25em;
    margin-bottom: 0.25em;
    margin-left: 3em;
    text-indent: -1em;
}

The entire daily summary block is set inside a thin solid border, on a light gray background.

div.day-summary
{   margin-left: 1em;           /* Indent on left */
    margin-bottom: 1em;         /* Add space below */
    border-style: solid;        /* Solid border */
    border-width: 1px;          /* One pixel wide */
    padding: 10px;              /* Leave room inside the box */
    background-color: #eee;     /* Light gray background */
}

This rule styles the block containing the definition of a locality code. The block is indented and boldfaced.

div.loc-def
{   margin-left: 2em;
    font-weight: bold;
}

The narrative that describes a locality should be indented further than its parent, but with a “hanging indent” so that continuation lines, if any, will be indented even further.

div.loc-narrative
{  margin-left: 3em;
   margin-top: 3px;
   text-indent: -1em;
   font-weight: normal;
}

This rule styles ordinary paragraphs in any narrative content.

div.para
{   margin-left: 1em;
    margin-top: 0.2em;
}

This rule styles the block for each form of bird. The block is indented, with a bit of space above, and hanging indentation so the first line is not indented.

div.form
{   margin-top: 0.1em;
    margin-left: 1em;
    text-indent: -1em;
}

Because notable records are displayed in a red-bordered box, they need a bit more margin, or adjacent boxes will overlap. Hence this variant of the above rule:

div.notable-form
{   margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 1em;
    text-indent: -1em;
}

This rule applies to the rendering of sighting data when there are multiple sightings for a given kind of bird. We indent these sightings an additional 2 ems.

div.floc
{   margin-left: 2em;
}