/* emuseum.css - CSS for Baby Boomer eMuseum */

/* Global stuff */
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      {
	width: 50%;
	border: 5px solid #AA0000;
	border-radius: 5px;
}
table       { margin: 0 auto; width: auto; padding: 0; border: 1px solid #111111; 
			  border-collapse: collapse; background-color: white; }
th		  { background-color: #fff99d; }
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; }
figcaption	{ font-size: smaller; text-align: center; }

svg { filter: drop-shadow(3px 5px 2px rgb(0 0 0 0 0 0 / 0.4)); }
.svgbutton      {width:100%;}
.svgbutton > .svgrect   { fill: #D2DDE0; }
.svgbutton > .svgtext   { fill: black; }
.svgrect        {troke: black; stroke-width: 0.4; }
.svgtext        { text-anchor: middle; font-family: "Open+Sans"; }
.svgbutton:hover > .svgrect { fill: #A9060B; }
.svgbutton:hover > .svgtext { fill: white; }

/* Global classses */
.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; }
.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; }
.needsborder       { border: 1px solid #111111; }
.noborder          { border: none; }
.frac			   { font-size: smaller; }
.frac50			   { font-size: 50%; }
.frac75			   { font-size: 75%; }
.flex-center		{ display: flex; justify-content: center; }

/* Two-column layout if navbar is present */
table#layout 		   { margin-left: 0; width: 100%; border: none; background: transparent; }
/* 'maincol' id is layout table's 2nd <td> if full navbar, else it's <main> */
div.navfloat	{ float: left; margin-bottom: 0; margin-right: 1vw; }
#navcol	   { width: 8em; vertical-align: top; }
#maincol   { width: auto; vertical-align: top; display: block; text-align: center; }

/* Header division: */
header				{ display: block; color: white; background-color: #AA0000; }
header a			{ color: white; background-color: #AA0000; font-weight: bold; }
header a:visited	{ color: white; background-color: #AA0000; }
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; }

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

/* Privacy policy */
article#privacy,
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; }

/* Comment division */
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; }

/*select: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; }

/* Footer division: */
footer, #footer {
	display:flex;
	flex-direction:column;
	align-items:center;
	clear: both;
	font-size: medium;
	margin: auto;
}
footer a	   { padding: 0 0.5em; }
#share p	{ font-style: italic; }
#announcement p {
	width: 50%;
	color: white;
	background-color: darkblue;
	border: 5px solid darkblue;
	border-radius: 5px;
}
#copyright p	   { font-size: xx-small; color: gray; }

p#comcount	 	{ font-size: small; font-style: normal; text-align: right; position: relative; right: 60px; }
div.item		   { width: 95%; margin-left: auto; margin-right: auto; }
div.item > p       { margin-bottom: 0; }
div.bigitem > p    { margin-bottom: 0; }
a.watch            { color: red; background-color: yellow; padding: 0 0.2em; }
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 galleries, and 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; }

/* Trivia leader board */
table#trivleader td.col3 { padding-left: 1em; padding-right: 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; }

/* Audio controls */
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; }

/* End of emuseum.css */