/* CSS for Baby Boomer eMuseum */
body        { text-align: center; color: black; font-size: large; font-family: Arial, Helvetica, sans-serif;
			  margin: 0; padding: 0 }
h1          { text-align: center; color: blue;  }
h2          { text-align: center; color: blue;  }
h3          { text-align: center; color: black; font-weight: normal; }
ul          { text-align: left; }
hr          { color: red; }
table       { margin: 0 auto; width: auto; padding: 0; border: 1px solid #111111; 
			  border-collapse: collapse; background-color: white; }
tr.divider	{ border-bottom: thin solid black; }
tbody.alt tr:nth-child(odd)		{ background-color: white; }
tbody.alt tr:nth-child(even) 	{ background-color: #DED; }

/* Header division: */
div#header				{ display: block; color: white; 
						  background-color: #AA0000;
					  /*  background:         linear-gradient(left, #600 0%, #A00 50%, #00B 100%);
						  background: -webkit-linear-gradient(left, #600 0%, #A00 50%, #00B 100%);
						  background:    -moz-linear-gradient(left, #600 0%, #A00 50%, #00B 100%);
						  background:     -ms-linear-gradient(left, #600 0%, #A00 50%, #00B 100%);
						  background:      -o-linear-gradient(left, #600 0%, #A00 50%, #00B 100%);
					  */
						  /* height: 4em; */ }
div#header a			{ color: white; background-color: #AA0000; font-weight: bold; }
div#header a:visited	{ color: white; background-color: #AA0000; }
div#header table		{ color: white; 
						  background-color: #AA0000;
						  width: 100%; border: none; }
td#headhome				{ text-align: left; }
td#headhome a			{ font-size: 30pt; text-decoration: none; padding: 0 0.5em;
						  font-family: Magneto, "Harlow Solid Italic", Arial, Helvetica, sans-serif; }
td#headlinks			{ font-size: medium; text-align: right; padding-right: 1em; }
td#headlinks a			{ font-size: small; }
td#headlinks a + a		{ padding-left: 1em; }
td#headlinks form		{ margin: 0.1em 0 0; padding: 0 0 0.1em; }
form#hdrsearchform *	{ font-size: small; vertical-align: baseline; }

/* Sidebar division (navigation menu): */
div#navbar		     { display: block; /* float: left; */ color: white; background-color: black; font-size: small; 
					   padding: 1px 1px 0; }
div#navbar a	     { color: white; display: block; text-decoration: none; }
div#navbar a:hover   { background-color: black; }
div#navbar a:visited { color: yellow; }
#navtitle		     { font-size: large; font-weight: bold; text-align: center; margin: 0; padding: 0; }
#navbar ul		     { list-style-type: none; background-repeat: no-repeat; padding-left: 0; }
#navbar ul ul		 { list-style-type: none; background-repeat: no-repeat; }
#navbar ul ul ul	 { list-style-type: none; background-repeat: no-repeat; }
#navbar > ul	     { margin-left: 0; margin-top: -3px; }
#navbar > ul ul	     { margin-left: 0.5em; }
#navbar ul ul ul     { margin-left: 1.0em; }
#navbar li		     { font-size: small; }
#navbar > ul > li    { font-size: medium; font-weight: bold; border: thin solid white; margin: 2px 0; padding: 2px; }
/*#navbar > ul > li       > ul > li + li { margin: -1px; padding: -1px; }*/
#navbar > ul > li       > ul li        { visibility: hidden; }
#navbar > ul > li:hover > ul li        { visibility: visible; }
#navbar > ul > li:hover > ul li a      { display: block; text-decoration: none; }
#navbar > ul > li		 { background-color: #A00; }
#navbar > ul li#home 	 { background-color: #00A; }
#navbar > ul li#arts	 { background-color: #060; }
#navbar > ul li#stuff	 { background-color: #00A; }
#navbar > ul li#times	 { background-color: #060; }
#navbar > ul li#other	 { background-color: #00A; }
a.navitem			 { display: block; text-decoration: none; }

/* Contents division: */
div#contents	   { display: block; vertical-align: top; text-align: center; }

/* Comment division */
div#privacy		   { border: thin solid red; text-align: justify; width: 65%;
					 margin-left: auto; margin-right: auto; padding: 0.5em; background-color: white;
					 font-size: small; font-family: "Times New Roman", Times, serif; }
div.comments table { text-align: left; width: 700px; }
div.comments th    { font-size: small; color: white; background-color: green; }
div.comments th.comadmin						   { background-color: maroon; }
div.comments th a  { color: white; }
div.comments img#edit { position: relative; top: 2px; }
div.comments img#del  { position: relative; top: 2px; }
tr.comhdr th        { text-align: left; padding: 0 0.25em 0.25em; }
tr.comment td       { padding: 0.25em 0.25em 1em; }
tr.comment td ul li { padding: 0; margin: -0.5em; }

/* Form fields */
label			{ vertical-align: top; }
input, 
select,
textarea, 
legend			{ vertical-align: bottom; margin-bottom: 0.5em; 
				  font-size: large; font-family: Arial, Helvetica, sans-serif; }
input[type=number]	{ width: 40px; }
input[type=checkbox],
input[type=radio]	{ margin-top: 0; margin-bottom: 0; }
				  
input.text,
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=url],
select, 
option, 
textarea				{ background-color: #fff99d; }

input.text[readonly], 
input[type=text][readonly], 
input[type=email][readonly], 
input[type=number][readonly], 
input[type=password][readonly], 
input[type=search][readonly], 
input[type=url][readonly], 
select[readonly], 
textarea[readonly]		{ background-color: #ddd; }

input.button, 
input[type=button], 
input[type=submit], 
input[type=reset]		{ background-color: #ccc; }

/*seletc:focus,
select:active,*/
textarea:focus, 
textarea:active, 
input[type=text]:focus, 
input[type=text]:active, 
input[type=email]:focus, 
input[type=email]:active, 
input[type=number]:focus, 
input[type=number]:active, 
input[type=password]:focus, 
input[type=password]:active, 
input[type=url]:focus, 
input[type=url]:active	{ border: thin solid blue; }

/* Exceptions to above */
input#hdrsearch			{ font-size: small; background-color: white; }
input#hdrsearchbutton	{ font-size: small; }

/* FootMenu division: */
div#FootMenu	   { clear: left; display: block; font-size: medium; }
div#FootMenu a	   { padding: 0 0.5em; }
p#footer		   { font-size: xx-small; color: gray; }
p#comcount	 	{ font-size: small; font-style: normal; text-align: right; position: relative; right: 60px; }

.item              { font-size: large; }
.item:first-line   { font-size: x-large; }
.tvitem            { font-size: large; }
.tvitem:first-line { font-size: x-large; font-style: italic; }
.movietitle		   { font-size: x-large; font-style: italic; }.bigitem           { font-size: x-large; }
.subitem           { font-size: smaller; }

div.item		   { width: 95%; margin-left: auto; margin-right: auto; }

.subhead           { font-size: smaller; font-weight: normal; }
.title, .em        { font-style: italic; }
.super_em          { font-style: italic; text-decoration: underline; }
.lyrics            { font-size: small; color: blue; }
.error 			   { font-weight: bold; color: red; }
.inact			   { font-size: large; font-weight: bold; text-decoration: blink; 
				     color: white; background-color: red; 
			 	     padding: 0.2em 0.5em; margin: 0 0.5em; }
a.watch            { color: red; background-color: yellow; padding: 0 0.2em; }
div.item > p       { margin-bottom: 0; }
div.bigitem > p    { margin-bottom: 0; }
object.QT          { margin: 0 0.5em; }			/* QuickTime audio "play" buttons */

/* Two-column table, narrow on the left and wider on the right, used for display of items such as movies */
table.col2nw          { width: 600px; }
table.col2nw td       { text-align: left; padding: 0.25em 0.5em; }
table.col2nw .image   { text-align: center; min-width: 175px; }
table.col2nw .details { text-align: left; width: auto; }
table.col2nw .divider { text-align: left; font-size: x-large; font-weight: bold; background-color: silver;
						border-top: 1px solid #111111; padding-top: 0.5em; }
table.col2nw .wide    { text-align: center; padding-top: 0.5em; }
table.col2nw .chain   { text-align: left; font-size: large; font-weight: normal; background-color: yellow ;
						border-top: 1px solid black; padding-top: 0.5em; }

/* Three-column table used for display of members of a group (movies, baseball players) */
table.col3          { width: 600px; }
table.col3 td       { text-align: center; padding: 0.25em 0.5em; }
table.col3 .divider { text-align: left; font-size: x-large; font-weight: bold; background-color: silver;
					  border-top: 1px solid #111111; padding-top: 0.5em; }
table.col3 .wide    { text-align: center; padding-top: 0.5em; }

/* Fashion & Fads: popular names */
table#names td        { border: 1px solid #111111; padding : 8px; }
table#names td#girls  { background-color: #FFBFFF; }
table#names td#boys   { background-color: #AAD5FF; }

/* Fashion & Fads: slang */
table#slang           { background-color: #FFFFC6; }
table#slang td        { padding: 0.5em; }
table#slang tr#terms  { color: red; }

/* Sports/Baseball: Major League Baseball table */
table#mlb thead       { color: white; background-color: green; }
table#mlb td          { font-weight: bold; padding: 8px; border: 1px solid #111111; }
table#mlb img		  { margin-bottom: 0.5em; }
table#mlb td#al       { color: blue; }
table#mlb td#nl       { color: red;  }
table#mlb table td    { border: none; }			/* The nested table has no border */
table#mlb a           { display: block; text-decoration: none; border: medium white dashed; }
table#mlb a:hover	  { border-color: green; }
table#mlb a img       { border: 0; }

/* Life before...: Political Correctness */
table#PC    { background-color: silver; }
table#PC ul { padding: 0.5em 1em 0.5em 0.5em; margin-left: 1em; margin-bottom: 0; }

/* Life before...: Alphabet-soup company names */
table#companies        { background-color: #FFDD6F; }
table#companies td     { text-align: left; padding: 0 0.5em; }
table#companies colgroup#names { text-align: left; }
table#companies colgroup#date  { text-align: center; }
table#companies thead  { color: white; background-color: red; font-weight: bold;
						 font-style: italic; font-size: large; text-align: center; padding: 0.5em; }

/* Fads and Fashions: New words */
table#newwords			{ width: 70%; margin-top: 0.5em; }
table#newwords td		{ text-align: left; padding: 0 0.5em; border: thin solid black; }
table#newwords thead	{ color: white; background-color: red; font-weight: bold;
						  font-style: italic; font-size: large; text-align: center; padding: 1em; }
table#newwords tr:nth-child(even)	{ background-color: #FFDD6F; }
table#newwords td:first-child 		{ font-weight: bold; }

table#trivleader td.col3 { padding-left: 1em; padding-right: 1em; }
						 
table#layout 		   { width: 100%; border: none; background: transparent; }
table#layout td#nav	   { width: 10em; }
table#layout td#body   { width: auto; }

p#announcement		{ width: 50%; margin-left: auto; margin-right: auto; 
					  color: white; background-color: darkblue; padding: 1em; }

/* These came from trivia.php, but may be generally useful (and are needed for the Item List page) */
img.space_after { padding-bottom: 0.5em; }
img.triv        { float: right; margin: 0    0 0 1em; display: inline; }
img.triv2       { float: right; margin: 0 10em 0 1em; display: inline; }
img.trivborder  { float: right; margin: 0    0 0 1em; display: inline; border: 1px solid #111111; }
img.trivleft	{ margin: 1em 0 0.5em 5em; }

/* Place these last so they override previous settings */
.current           { color: red; background-color: yellow; padding: 0 0.2em; }
.verttop,      .verttop *      { vertical-align: top; }
.vertmiddle,   .vertmiddle *   { vertical-align: middle; }
.vertbottom,   .vertbottom *   { vertical-align: bottom; }
.vertbaseline, .vertbaseline * { vertical-align: baseline; }
.show 			   { display: inherit; }
.hide 			   { display: none; }
.hidden			   { display: none; }
.needsborder       { border: 1px solid #111111; }
.noborder          { border: none; }
.frac			   { font-size: smaller; }
.frac50			   { font-size: 50%; }
.frac75			   { font-size: 75%; }

audio.c10	{ width: 10px; }
audio.c30	{ width: 30px; }
audio.c50	{ width: 50px; }
audio.c70	{ width: 70px; }
audio.c90	{ width: 90px; }
audio.c100	{ width: 100px; }
audio.c150	{ width: 150px; }
audio.c200	{ width: 200px; }
audio.c250	{ width: 250px; }
audio.c300	{ width: 300px; }

/* The following are used by link_button() to generate ordinary links that look like BBeM buttons. */

div.link_div			{ display: inline; position: relative; top: -3px;
						  border-top: 1px solid black;
						  border-left: 1px solid black; }
.link_button			{ background-color: #CCC; cursor: default; border: 3px solid red;
				  		  border-top-color:    #EEE;
				 		  border-right-color:  #777;
				 		  border-bottom-color: #777;
				 		  border-left-color:   #EEE;
/*				 		  position: relative; top: 3px; */
				 		}
.link_button a			{ color: black; text-decoration: none; font-size: large; padding: 0.5em; cursor: default; }
.link_button a:hover,
.link_button a:visited	{ color: black; text-decoration: none; font-weight: normal; cursor: default; }