/*  JPMD 15 Oct 5: Changes to CSS are reflected immediately when you refresh a page.  If you don't see a change, there's something wrong with the CSS--the browser doesn't need to be restarted.  Have you refreshed the CSS file on the server? */

/* major changes 1 Jan '8 */

/* To check color contrast and brightness to ADA standards, visit: http://www.accesskeys.org/tools/color-contrast.html

Color brightness formula

To conform with Web Content Accessibility Guidelines 1.0, foreground and background color combinations should provide sufficient contrast when viewed by someone with low vision or colour blindness, or when viewed on a black and white screen.

The formula suggested by the World Wide Web Consortium (W3C) http://www.w3.org/TR/2000/WD-AERT-20000426  to determine the brightness of a color is:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

Two colors provide good color visibility if the brightness difference is greater then 125 and the color difference is greater then 500.

   This site also helps identify which elements are defining the colors for particular areas, when getting a full report
*/

/* define everything at body level, then refine as needed in following elements */
body
	{	color: black;
		font-family: "Trebuchet MS", Tahoma, Verdana, "DejaVu Sans", Helvetica, arial, sans-serif;
		font-size: small; /* choices according to blooberry.com: xx-small | x-small | small | medium | large | x-large | xx-large */
		font-weight: normal;
  		background-color: transparent;
		background-image: url("./images/backgrnd/musicbk1.gif");
		background-attachment: fixed;
		vertical-align: top;
		text-align: left;

		/* set margins to non-zero and padding to zero */
		/*	if using reverse colors like with p.header, override to zero and set padding to cover */
		/* sequence is top, right, bottom, left */
		margin: 10px 20px 10px 50px;  /* if you change this, change reverse video elements too! */
		padding: 0px 0px 0px 0px ;

		border-width: 0;
		border-style: none;
		border-color: transparent;
	}

body.alink
	{	/* color: #CC9900; */
		color: inherit;
		background-color: inherit;
	}

body.vlink
	{	/* color: #CC0033; */
		color: inherit;
		background-color: inherit;
	}

body.link
	{	/* color: #3333FF; */
		color: inherit;
		background-color: inherit;
	}

img              
	{	margin: 5px;
		border-width: 0;
	}


p /* ----------------------------------- paragraphs ----------------------- */
	{	/* derive almost all from body's settings */
	}


p.bottomborder
	{	color: white;
      background-color: navy;
      font-weight: bold;
		/* padding: .2em; */
	}

p.center
	{ text-align: center;
	}

p.comments
	{	color: maroon;
      background-color: inherit;
		font-size: small;
	}

p.copyright
	{	color: navy;
      background-color: inherit;
		font-size: small;
		text-align: center;
	}

p.d2
	{ 	/* inherit it all from p, which inherits all from body */
	}

p.details
	{	/* font-weight: normal; */
		color: maroon;
      background-color: inherit;
		/* padding: .2em; */
		/* font-size: .8em; */
		text-align: right;
	}

p.footer
	{	color: silver;
      background-color: navy;
	 	font-size: .8em;
      font-weight: lighter;
		text-align: right;
		vertical-align: middle;
      margin: 0px -20px -5px -50px; /* counteract prev L/R margins with minus */
      padding: 5px 20px 5px 50px;
	}

p.header
	{	color: silver;
      background-color: navy;
      font-weight: bold;
      font-size: 1.7em;
      margin: -10px -20px -10px -50px; /* counteract prev margins with minus */
      padding: 10px 20px 10px 50px;
	}

p.headerdiary
	{	color: inherit;
      background-color: inherit; 
      margin: -10px -20px -10px -50px; /* counteract prev margins with minus */
      padding: 10px 20px 10px 50px;
	}

p.main
	{	/* inherit almost everything from p, e.g., from body */
		/* font-size: 0.9em; */
	}

p.subheader
	{	color: silver;
		background-color: navy;
      font-weight: bold;
		font-size: 0.8em;
		padding: .8em;
		margin-top: 0;
	}

p.reversedetails
	{	color: silver;
		background-color: maroon;
		padding: .2em;
      font-weight: normal;
		font-size: .8em;
		text-align: right;
	}

p.topnav
	{	color: silver;
		background-color: inherit;
      text-align: center;
		font-size: .8em;
	}

table  /* --------------------------------------------------------- tables ---------------- */
	{	table-layout: fixed; /* loads big tables faster, assumes that first row has proper number of columns */
	}

table.center /* center, 100% width */
	{	text-align: center;
		vertical-align: top;
		width: 100%;
	}

table.center600
	{  text-align: center;
		/* align: center; */  /* doesn't work? */
      font-size: small;
		width: 600px;
		vertical-align: top;
		margin-left: auto; /* margin left/right are supposed to center the table */
		margin-right: auto;
		margin-bottom: 20px; /* add extra padding at bottom */
	}

tbody
	{	/* some stuff doesn't seem to flow down from tbody, but I may be missing something; */
		/*	for now, play it safe and only use tbody when it definitely works */

      /* color: gray; */ /* this works, but we don't want it */
		/* background-color: yellow; */ /* this works, but we don't want it yellow! */

		/*	border-style: solid; */  /* doesn't seem to work */
		/* border-color: green; */  /* doesn't seem to work */
		/* border-width: 10px; */  /* doesn't seem to work */

      /* padding: 200px; */ /* padding doesn't seem to apply */
	}

tbody.diary
	{	/* color: purple; */  /* works, but no change needed */
		/* background-color: inherit; */  /* ditto */
		/* border and padding stuff doesn't seem to flow down from tbody;
			border: solid;
			border-color: green;
			border-width: 1px;
         padding: 2px;
		*/
	}

tbody.bottomnav
	{	color: purple;
		background-color: inherit;
	}

tr
	{	/* not doing anything here */
	}

th, td
	{  vertical-align: top;
		padding: 2px; /* specify here because it doesn't seem to inherit from tbody */
		/* border: 2px; */
		/* border-style: none; */
	}

/* dh1 and dh2 are diary header 1 and 2; d1 and d2 are diary columns 1 and 2*/
th.dh1, td.d1
	{	color: navy;
      background-color: inherit;
      font-size: small;
      font-weight: lighter;
		text-align: center;
      width: 65px;
	}

td.centerpic
{	color: navy;
    background-color: inherit;
    font-size: small;
    font-weight: lighter;
	text-align: center;
}

th.dh2, th.d2
	{	/* inherit everything from body */
		/* font-weight: bold;
		color: navy;
      background-color: inherit;
		padding: .2em;
		font-size: .8em;
		text-align: left;
		margin-left: 120px;
		margin-right: 400px;
		vertical-align: top; */
		/* width: auto; */ /*90% */
	}

td.main
	{	/* inherit everything from td, e.g. from body */
	}

td.navtext
	{	font-weight: normal;
		color: navy;
      background-color: inherit;
		padding: .2em;
		font-size: .8em;
		text-align: center;
		width: 12%
	}

col.d1 /* ------------------------------------------------- columns? col.d2 rendered funny in IE
       		                                   collections? (video?  music?) ---------------------- */
	{	font-weight: normal;
		color: navy;
      background-color: inherit;
		padding: .2em;
		font-size: .8em;
		text-align: center;
		margin-left: 10px;
		margin-right: 400px;
		vertical-align: top;
		width: 10%
	}

col.d2
	{ 	color: inherit;
      background-color: inherit;
		/* padding: .2em;
		font-size: 1em;
		text-align: left;
		margin-left: 0px;
		margin-right: 400px; */
		vertical-align: top;
		width: 90%
	}

col.d2x
	{ 	font-weight: normal;
		color: black;
      background-color: inherit;
		padding: .2em;
		font-size: 1em;
		text-align: left;
		margin-left: 0px;
		margin-right: 400px;
		vertical-align: top;
		width: 90%
	}

.collection-image
	{	color: navy;
      background-color: inherit;
      font-size: small;
      font-weight: lighter;
		text-align: center;
      margin-left: 0px;
		margin-right: 0px;
		width: 230px; /* expecting maximum image width to be smaller than this */
	}

.collection-title
	{	font-weight: bold;
		color: black;
		background-color: inherit;
		padding: .2em;
		font-size: 1.3em;
		margin-left: 0px;
		margin-right: 400px;
		vertical-align: top;
		/* width: 80% */
	}

.collection-studio
	{ 	font-weight: normal;
		color: blue;
		background-color: inherit;
		padding: .2em;
		font-size: 1em;
		text-align: left;
		margin-left: 0px;
		margin-right: 400px;
		vertical-align: top
	}

.collection-detail
	{	font-weight: normal;
		color: navy;
		background-color: inherit;
		padding: .2em;
		font-size: 1em;
		text-align: left;
		margin-left: 0px;
		margin-right: 400px;
		vertical-align: top
	}

.collection-comments
	{	font-weight: normal;
		color: black;
		background-color: inherit;
		padding: .2em;
		font-size: 1em;
		text-align: left;
		margin-left: 0px;
		margin-right: 400px;
		vertical-align: top
	}

.collection-detail16
	{	font-weight: normal;
		color: navy;
		background-color: inherit;
		padding: .2em;
		font-size: 1em;
		text-align: left;
		margin-left: 0px;
		margin-right: 400px;
		vertical-align: top;
		width:16%
	}

.collection-comments16
	{	font-weight: normal;
		color: black;
		background-color: inherit;
		padding: .2em;
		font-size: 1em;
		text-align: left;
		margin-left: 0px;
		margin-right: 400px;
		vertical-align: top;
		width:16%
	}

pre  /* -------------------------------------------------- preformatted, e.g., unformatted ----------------------- */
	{ 	font-family: monospace;
		font-weight: normal;
		/* color: black;
		background-color: inherit; */
		/* padding: .2em; */
		/* font-size: .8em; */
		/* text-align: left; */
		/* margin-left: 50px; */
	}

h1 /* --------------------------------------------------- headings h1, h2, h3, etc --------------------------------- */
	{	color : navy;
		background-color: inherit;
		font-size: large;
		text-align: center;
	}

h2
	{	color : navy;
		background-color: inherit;
		font-size: medium;
		text-align: center;
	}

h3
	{	color : navy;
		background-color: inherit;
		font-size: medium;
		text-align: center;
	}

.note
	{	color: inherit;
		background-color: #FFFFCC;
	}

.sup
	{	background-color: green;
		font-weight: bold;
		color: white
	}

.nosup
	{	background-color: white;
		font-weight: normal;
		color: gray;
	}

a:active
	{	color: #000000;
		text-decoration: underline;
		background-color: transparent;
	}

a:hover
	{	color: #000099;
		text-decoration: underline;
		background-color: transparent;
	}

li		/* ----------------------------------------------------lists ---------------------------------*/
	{
	}

li ul, li ol
	{	/* margin-top: 0.3em;
		font-weight: normal;
		color: black;
		background-color: inherit;
		padding: .2em;
		font-size: 1em;
		vertical-align: top;
		text-align: left;
		margin-left: 50px */
	}

li.margintop { margin-top: 0.5em; text-align: left; }

/* added 8 sep 6 for m_all headers */
li.singleletter
	{	font-weight: bold;
		color: silver;
		font-size: 1.2em;
		background-color: navy;
		padding: .2em;
		margin-left: 10px;
		text-indent: 20px;
		vertical-align: middle;
		width:300px;
	}

/* added li.d2 on 23 Sep 7 */
li.d2
	{ 	/* font-weight: normal;
		color: black;
      background-color: inherit;
		padding: .2em;
		font-size: 1em;
		text-align: left;
		margin-left: 0px;
		margin-right: 400px;
		vertical-align: top;
		width: 90%
		*/
	}

/* changed 15 dec 7 to try to get bullets to match p.main
ul li, ol li { margin-bottom: 0.3em; }
li ul, li ol { margin-top: 0.3em; }
*/

ul li, ol li
	{	/* margin-bottom: 0em;
		font-weight: normal;
		color: black;
		background-color: inherit;
		padding: .2em;
		font-size: 1em;
		vertical-align: top;
		text-align: left;
		margin-left: 50px */
	}

hr  /* -------------------------------------------- header rules ---------------------------------------*/
	{
	}

hr.w600
	{	width: 600px
	}

/* added label (copied from body for starters) */
label
	{	color: gray;
		font-family: "Trebuchet MS", "Tahoma", arial, sans-serif;
		font-size: x-small; /* choices according to blooberry.com: xx-small | x-small | small | medium | large | x-large | xx-large */
		font-weight: normal;
  		background-color: transparent;
		vertical-align: middle;
		text-align: left;

		/* set margins to non-zero and padding to zero */
		/*	if using reverse colors like with p.header, override to zero and set padding to cover */
		/* sequence is top, right, bottom, left */
		/* margin: 10px 20px 10px 50px; */  /* if you change this, change reverse video elements too! */
		/* padding: 0px 0px 0px 0px ; */

		border-width: 0;
		border-style: none;
		border-color: transparent;
	}
	
input, textarea
	{	color: navy;
		font-family: "Trebuchet MS", "Tahoma", arial, sans-serif;
		font-size: x-small;
		font-weight: normal;
  		background-color: transparent;
		vertical-align: middle;
		text-align: left;

		/* set margins to non-zero and padding to zero */
		/*	if using reverse colors like with p.header, override to zero and set padding to cover */
		/* sequence is top, right, bottom, left */

		border-width: thin; /* thin medium thick medium; */
		border-style: solid; 
		border-color: black;
	}
	
label.l2, input.i2
	{	color: navy;
		background-color: inherit;
		font-family: "Trebuchet MS", "Tahoma", arial, sans-serif;
		font-size: x-small; /* choices according to blooberry.com: xx-small | x-small | small | medium | large | x-large | xx-large */
	}

input.button1
	{	color: navy;
		font-family: "Trebuchet MS", "Tahoma", arial, sans-serif;
		font-size: small;
		font-weight: bold;
  		background-color: silver;
	}

input.button2
	{	color: gray;
		font-family: "Trebuchet MS", "Tahoma", arial, sans-serif;
		font-size: small;
		background-color: transparent;
	}

.under
{	text-decoration: underline;
}

.strike
{	text-decoration: line-through;
}

*[accesskey]:before
{	/* content:'[' attr(accesskey) '] ' */
}

.extrabig
{	font-size: 3em;
}

a.discrete
{	text-decoration: none;
	color: black;
}