/* UI tabs */
#timpani p.loggedinas {float: right; font-size: 0.91em; text-align: right;}
#timpani ul.tabsflat {padding: 3px 0 4px 2px; margin-left: 0; margin-bottom: 1.4em; border-bottom: 1px solid #ccc; line-height: 2.1em;}
#timpani ul.tabsflat li {list-style: none; margin: 0; display: inline; white-space: nowrap;}
#timpani ul.tabsflat li a {padding: 8px 14px; margin-right: 4px; background: #f7f7f7; color: #333; text-decoration: none; border-bottom: 3px solid #ddd; transition: all 0.2s linear;}
@media screen and (max-width: 480px) {
	#timpani ul.tabsflat li a {padding: 8px 10px; margin-right: 2px;}
}
#timpani ul.tabsflat.small li a, #timpani ul.tabsflat.subtabs li a {padding-top: 3px; padding-bottom: 3px; border-width: 1px;}
#timpani ul.tabsflat li a:hover {color: #000; background: #eee; border-color: #227;}
#timpani ul.tabsflat li.selected a {background: #f7f7f7; border-bottom-color: #c93;}
#timpani ul.tabsflat img {line-height: 1em; border: 0; padding: 0;}
#timpani ul.tabsflat li select {margin-bottom: 1em;}
#timpani ul.tabsflat li select option {color: #603;}

/* Invoice has pale blue background */
#timpani pre.invoice {padding: 20px; background-color: #eee;}
#timpani table.keyedheadings tr td:first-child {font-weight: bold;}

/* Highlight some table rows with pale yellow background */
#timpani tr.highlighted { background-color: #FFE071; }

#timpani p.lm { margin-top: .5em; margin-bottom: .5em; }
#timpani .small { font-size: 85%; color: #667 }

/* Notices and warnings */
#timpani div.error,   #timpani p.error { margin: 2em; padding: 1em; border: 3px solid red; color: darkred }
#timpani div.notice,  #timpani p.notice { margin: 2em; padding: 1em; border: 2px solid #99ccff; }
#timpani div.confirm, #timpani p.confirm { margin: 2em; padding: 1em; border: 2px solid #66aa66; }
#timpani div.warn,    #timpani p.warn { margin: 2em; padding: 1em; border: 2px solid #ffcc55; }
#timpani div.cite,    #timpani p.cite { margin: 2em; padding: 1em; border: 2px solid #888888;}

/* Misc classes */
#timpani .highlight { color: #CC0000; font-weight: bold } /*highlight error messages etc in red.bold */
#timpani .bad { color: #CC0000; font-weight: bold } /*highlight error messages etc in red.bold */
#timpani .good { color: green; font-weight: bold } /*highlight OK messages etc in green.bold */
#timpani .blue { color: #003366; } /* used for other highlighting */
#timpani .alignright { text-align: right ; }
#timpani .alignleft { text-align: left  }
#timpani .aligncenter { text-align: center;}
#timpani .alignmiddle { vertical-align: middle ;}
#timpani .float-right {float:right}
#timpani .black { color: #000 }

#timpani ul.jumplist {width: 400px; column-count: 2; font-size: 0.9em; column-gap: 20px; margin-bottom: 40px;}
#timpani ul.instrumentform {list-style: none; margin-left: 0; padding: 0;}

/* Forms */
#timpani button.external { background-color:#99ccff; border-color:#003366;}  /* consider:  #cc99ff, #330066 */
#timpani input:user-invalid, #timpani select:user-invalid {outline: 2px solid red !important}  /* pattern-mismatch, or required,empty,and-we-tried to submit */

#timpani a.button {margin-top: 5px;}

/* Login status */
#timpani p#loggedinas {float: right;}

/* Instrument popups */
#timpani dialog#instrumentimage {width: calc(100% - 30px - 40px); height: calc(100% - 30px - 40px); max-width: none; max-height: none; padding: 20px;}
#timpani dialog#instrumentimage[open] {animation: fadein 0.5s ease normal;}
@keyframes fadein { from {opacity: 0;} to {opacity: 1;} }
#timpani dialog#instrumentimage::backdrop {background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px);}
#timpani dialog#instrumentimage button {cursor: pointer; float: right; border: 1px solid gray; background-color: #f7f7f7; font-size: 20px;}
#timpani dialog#instrumentimage button:hover {border-color: black;}
#timpani dialog#instrumentimage h3 {height: 40px; overflow: clip; margin: 0; padding: 0; text-align: center; font-weight: bold;}
#timpani dialog#instrumentimage img {width: 100%; height: calc(100% - 40px); object-fit: contain;}

/* Instrument listing */
#timpani details {cursor: pointer; margin-bottom: 20px;}
#timpani details summary {cursor: pointer;}
#timpani #instrumentlist {margin-top: 40px;}
#timpani #instrumentlist h3 a {color: #ccc; font-size: 0.83em; text-decoration: none;}
#timpani #instrumentlist .instrumentgroup {display: grid; grid-gap: 30px; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); margin-bottom: 40px;}
#timpani #instrumentlist .instrumentgroup .instrument {position: relative; border: 1px solid #e7e7e7; padding: 15px 20px; display: flex; gap: 16px; box-shadow: 8px 8px 10px #e7e7e7; /* #!# If a single column, shows 100% width; max-width tried but creates spaces when two columns */}
#timpani #instrumentlist .instrumentgroup .instrument .instrumentdetails {flex-grow: 1;}
#timpani #instrumentlist .instrumentgroup .instrument .instrumentdetails p.descriptivedata {font-size: 0.83em; line-height: 1.45em;}
#timpani #instrumentlist .instrumentgroup .instrument .instrumentdetails p.metadata {color: #999; font-size: 0.83em; line-height: 1.45em;}
#timpani #instrumentlist .instrumentgroup .instrument .instrumentphoto {height: 150px; flex: 0 0 150px; display: grid; place-items: center;}
#timpani #instrumentlist .instrumentgroup .instrument .editlink {position: absolute; bottom: 10px; right: 20px; opacity: 0.6;}

/* Images */
#timpani span.noimage {border: 1px dashed #ccc; color: #aaa; width: 150px; height: 150px; font-size: 0.83em; text-align: center; display: grid; place-items: center; background-color: #fbfbfb;}
#timpani image.icon {width: 16px; height: 16px;}

/* Home page example sets */
#timpani #instrumentsets table {float: left; margin-right: 20px; margin-bottom: 20px;}
#timpani #instrumentsets::after {content: ''; display: block; clear: both;}

/* Action buttons */
#timpani p.actions a {border-bottom: 0; border: 1px solid #ddd; padding: 10px 8px 2px; border-radius: 4px; text-wrap-mode: nowrap; text-decoration: none; line-height: 16px; background-color: #f7f7f7;}
#timpani p.actions a:hover {border-color: #aaa;}
#timpani p.actions a img {display: inline; width: 16px; height: 16px; border: 0;}
#timpani p.actions.right {float: right;}

#timpani .button.right {float: right; margin-left: 10px;}

/* Editing */
#timpani #editinginternal form tr.photograph.upload td {height: 320px;}

/* Loans page print mode */
#timpani .page-loans .fornoticeboard {display: none;}
@media print {
	#timpani body:has(.page-loans) tr:has(#header),
	#timpani body:has(.page-loans) tr:has(#footer),
	#timpani body:has(.page-loans) nav
		{display: none;}
	#timpani td#main:has(.page-loans) {background-color: white;}
	#timpani body:has(.page-loans) #loggedinas {display: none;}
	#timpani .page-loans .fornoticeboard {display: block;}
	#timpani .page-loans .preamble {display: none;}
	#timpani .page-loans #tableheading {display: none;}
	#timpani .page-loans table .outstatus, .page-loans table .returnstatus {display: none;}
	#timpani .page-loans input {display: none;}
	#timpani .page-loans #footnotes {display: none;}
	#timpani .page-loans span.sort {display: none;}
	#timpani .page-loans .hirerheading {display: none;}
}