/* my classes go here... */
/* basically, only need 10 and 12 point, normal, bold, italic
if I specify bold and italic using tags, then that should be more compatible. Tracks can't use td height to control spacing (it's deprecated) so we'll need margin. */

/* 
Rebuild site with bbedit includes or in Perl? Mason?

Semantically, what tags for "track listing" cd title, opera, cd timing, blurb?

Better way to find-and-replace track list. Putting it in a database wouldn't help because it's somewhat irregular when headings have to be pulled out.
Use table for tracks, but somehow would like a more-liquid layout so that if font size is changed, table would get wider.
Style sheet should probably be embedded so it will always display properly...
Composer as flush-left heading: Bembo Bold 8pt or 7pt
Artist name on multi-artist sets
Composer
Title Bembo 8pt but aria or song title is also Bold
Timing
Opera, all caps Bembo 8pt
Main heading, either place of recording, "broadcast" radio show name, or artist name if multi-artist set: flush-left RotisSemiSerif Bold 9pt
Second level heading: flush left RotisSemiSerif Bold 8pt
Recording date, matrix info Bembo Italic 7pt
Accompanists, conductor or other artists Bembo 8pt; "tenor" etc is also italic

Notes at the bottom of tracks Bembo 7pt "CD 1" heading, etc is also Bold.
Track numbers, boxed Garamond Book 7.22pt

Looks there are only 3 sizes: 7 8 9 plain, bold and italic, perhaps a contrasting font for headings. If we give each type a class name, there will be more flexbility with changing the style...
composer
artist - don't need, this would be a heading if anything
cast - cast names in opera in italics (sometimes in parentheses...)
title
timing
opera
date
matrix
heading1
heading2
place city type all the same as heading 1 or 2?



Only define the size and weight and keep the family independent, so we can turn groups on and off globally.

Can't get any of my font-family tags to work...

Can't set any "block-level" attributes on text using span inside a table cell. You need to wrap in P.
{font-family: Arial, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
color: rgb(0,0,0);

*/

/* Classes in table cells can't set height, but text-indent and margin-left both work, so we can probably use a three cell table and indent the matrix/date line. If the line wrapped, then text-indent wouldn't work as well as margin-left 
Classes do seem able to set height on a table cell. Height or padding on a cell seems to be the only way I can get inter-row spacing. */



/* default values for table cells here
This works with TABLE TR or TABLE TR TD, but not TABLE alone.
Vertical-align values that don't work: text-bottom and baseline; using bottom.
line-height on a class works, but text is vertically justified (which is
correct behavior); margin-top and margin-bottom don't work at all, so to set inter-row height, we can use height on the cell. Ideally we want a track to be tightly leaded and have some breathing room between tracks. Having the same height on every row won't do that. The spacer class can be used to create a blank row with adjustable "height."
Track number should be right aligned, but I think this has to be done to the TD. Right-aligning the cell <td align="right"> doesn't override the style sheet's TABLE TR TD, so there is a class for this.
Since timing and track number cells will only have one style in them, set the class on the cell rather than using spans.
Problem when text wraps. Title class has margin-left, but when 
Can't text-align: "."; to work at all to make track numbers align on "." and timings align on ":"

To get away from too many classes...
Set a class on the table that contains the cast of the opera and the use conventional tags to do the markup inside the cells.

Don't use child selectors... ">"
 */
 /* this works if P is the first child, not just the first P, so it doesn't work at all. This works if P is the first child of the div Notes, however. */
DIV#Notes P:first-child {text-indent:0px;
margin-top:1em;}

/* plain text, P text, Headings */
.operacast {font-family:Georgia,serif;
font-size:14px;
text-align:left;
text-indent:0em;}

/* Liner P is overriding this definition...
this doesn't select anything...
With #Liner P removed, then this affects the empty paragraphs!
The id #Liner apparently has far higher specificity, so I shouldn't be declaring anything in it. Put it all in operacast.
 */
.operacast P {font-size:11px;
text-indent:0em;}

.operacast H1, H2, H3 {margin-top:0px;
margin-bottom:0px;}

.bio {text-indent:-2em;
margin:0;
margin-left:2em;
margin-right:3em;
margin-top:1em;}

/* this P declaration overrides all others inside #Liner
#Liner P {font-family:Georgia,serif;
font-size:14px;
text-indent: 2em;
text-align: left;
line-height:1.3em;
margin-top: 0px;
margin-bottom: 0px} */
 
 /* TRACKS classes 
 This table definition won't work with other tables on the page? Not sure we even need it... */
/* TABLE TR TD {text-align: left;
vertical-align: baseline; */
/* bottom causes a problem when text wraps--timing is aligned with the last line; "top" has a problem with baseline alignment, even if the font sizes of adjoining cells are the same. Baseline seems to work fine. */
 /* 16px might conflict if text is resized... */

/* can't set padding on a row... we're padding the bottom of "date"
COLS.testrow {padding-top: 30px;} */


/* keep adding classes for the cast list */
/* for the composer's name above the cast */
.operacomposer {font-size: 14px;
font-style: normal;
font-weight: normal;
color: rgb(0, 0, 0);
text-align: center;}

/* H1.operatitle? */
.operatitle {font-size:24px;
font-style:normal;
font-weight:bold;
color: rgb(0, 0, 0);
text-align: center;}

.operasubtitle {font-size:14px;
font-style:normal;
font-weight:bold;
color: rgb(0, 0, 0);
text-align: center;}

.cd {font-size: 16px;
font-style: normal;
font-weight: normal;
color: rgb(0, 0, 0);
text-align: right;}

#Tracks {font-family:Georgia,serif;}

#Tracks TD {font-size: 15px;
font-weight: normal;
text-indent:0em;
text-align:left;
line-height:16px;
padding-top:0;
color: rgb(0, 0, 0);}

#Tracks TD.trkNum {font-size: 14px;
text-align: right;
font-style: normal;
font-weight: normal;
color: rgb(0, 0, 0);
vertical-align:baseline;
padding-right: .5em;
padding-top:.5em;
/* height:40px; */} /* padding-right works better than margin-right */

#Tracks TD.trkNum + TD {vertical-align:baseline;}

#Tracks TD.trkNum + TD + TD {vertical-align:baseline;}

#Tracks TD.timing {font-size: 14px;
text-align: right;
} /* instead of text-align: right, trying text-align: ":" but it doesn't work... even without text-align left removed from TABLE TR TD */

/* indent or left margin? */
.date {font-size: 13px;
font-style: italic;
font-weight: normal;
color: rgb(0, 0, 0);
margin-left: 40px;
} /* padding-bottom: 20px; padding gives us space between tracks. margin-bottom doesn't work. But what is an "em" in this context? */

.matrix  {font-size: 12px;
font-style: italic;
font-weight: normal;
color: rgb(0, 0, 0);}

.title {font-size: 15px;
font-style: normal;
font-weight: bold;
color: rgb(0, 0, 0);
}

.cast {font-size: 14px;
font-style: italic;
font-weight: normal;
color: rgb(0, 0, 0);} /* use margin or padding left to get some space instead of two &nbsp; */

.artist {font: normal normal normal 13px/16px "Times New Roman", Times, serif;
text-align: left;
margin-top: 0%;
margin-bottom: 0%;}



/* for multi-movement works */
#Tracks TD[colspan="3"].composer {font-size:15px;
font-weight:bold;
padding-top:1em;
padding-bottom:.2em;}

/* movement should be slightly indented outline-style, so margin-left does this; indent is 0 in case of multiple lines which will all be flush-left */
#Tracks TD SPAN.movement {font-size: 14px;
font-weight: normal;
text-align:left;
line-height:16px;
color: rgb(0, 0, 0);}

.cdtitle {font-size:13px;
text-align: left;
text-indent:0em;
line-height:1em;
font-weight:bold;
margin-top: 0%;
margin-bottom: .3em;
color: #FFFFEA;}

.blurb {font-size:12px;
line-height:15px;
text-align: left;
margin-top: 0%;
margin-bottom: 0%;
color: #FFFFEA;
background-color:rgb(0,0,0);}

/* liner notes */
BODY P {font-family:Georgia,serif;
font-size:14px;
text-indent: 2em;
text-align: left;
line-height:1.4em;
margin-top: 0px;
margin-bottom: 0px}

DIV.credits P {font-family:Georgia,serif;
font-size:13px;
text-indent: -1.5em;
text-align: left;
line-height:1.2em;
padding-left:1.5em;
margin-top:.2em;
margin-bottom: 0px}


.ctr {text-align: center}

.navc {font: normal normal bold 11px/12px Arial,Helvetica, serif;
text-align: center;
margin-top: 0%;
margin-bottom: 0%}

.navl {font-size:12px;
font-weight:bold;
text-align: left;
text-indent:0em;
margin-top: 0%;
margin-bottom: 0%}

.nav {background-color: rgb(0, 0, 0);} /* navigation cell */

.note {font: normal normal normal 12px/13px "Times New Roman", Times, serif}

/* tracks 10 point */
.s {font: normal normal normal 12px/14px "Times New Roman", Times, serif}

/* .title {font: normal normal bold 11px/12px Arial,Helvetica, serif;
text-align: left;
margin-top: 0%;
margin-bottom: 0%} */

body {background-color:rgb(255,255,255);
}

hr {color: rgb(255, 0, 0);
background-color: rgb(153,153,153);
height: 1px;}

/* body as initial containing block cannot be positioned or floated 
#Body {height:auto;} */

/* Nesting the #Menu inside the #Liner makes the Menu as tall as the content. In that case, the Liner becomes the containing block. */

/* Need absolute positioning because Liner comes before menu */
#Liner, #Tracks {position:absolute;
top:0em;
left:23em;
width:60%;
padding:1em;
font-size: 10px;
font-style: normal;
color: rgb(0, 0, 0);
background-color:rgb(255,255,255);
}

#Menu {position:absolute;
top:0em;
left:-23em; /* 0 is relative to the containing block, which is either body or #Liner */
bottom:0em; /* If menu is not nested inside #Liner, then bottom is set relative to the viewport. If set to 0, then the box is as tall as the browser window, so the containing block is not "body" but the viewport. Setting to auto works if Menu is not nested. */
width:20em;
padding:1em;
height:auto;
background-color:rgb(0,0,0);
font-family:Arial,Helvetica,sanserif;
font-size:10px;}

#Menu P {font-family:Arial,Helvetica,sanserif;}

#Tracks TD[colspan="3"] H1 {margin-top:1em;
margin-bottom:0em;}

#Tracks TD[colspan="3"] H2 {font-size:17px;
font-weight:bold;
text-align:center;
line-height:40px;
margin-top:1em;
margin-bottom:.5em;}

#Tracks TD[colspan="3"] H3 {font-size:16px;
font-weight:bold;
text-align:left;
line-height:20px;
margin-top:.5em;
margin-bottom:0;}

#Tracks TD[colspan="3"] {font-size:15px;
font-weight:bold;
padding-top:.5em;
padding-bottom:0em;}

#Tracks TD[colspan="3"] P {font-size: 14px;
font-weight: normal;
text-indent:0em;
text-align:left;
line-height:16px;
color: rgb(0, 0, 0);}

H1 {font-size: 18px;
text-align:center;
margin-top:2em;}

H2 {font-size: 16px;}

H3 {font-size:16px;
margin-top:.5em;
margin-bottom:0;}