/* For the group page: */
span.piclink { display: inline-block }
div#header { padding: 1px }
body.slide-show div.preamble-text { font-size: x-large}
body.slide-show div#preamble-buttons { display: none }
div#header h2 { position: relative;  left: 7em;  top: 0em; }
body.slider div#header h2 { font-size: large; left: 0px; margin: 0.3ex 0px }
body.slider p#group-buttons { display: none }
p#group-buttons { display: block; margin: 0; text-align: center;
    position: absolute;  top: 0.3em;  left: 0.5em;  width: 6em;
    right: auto;  background: #FFFF99; }
p#group-buttons a { text-decoration: none; display: block; border: thin solid black }
p#group-buttons a:link { text-decoration: none}
p#group-buttons a:hover { background: orange }
span.piclink table, span.piclink { display: inline-block; vertical-align: top }
span.piclink { margin: 0.2ex 3px }
/* OLD index/sindex format */
table.current-image { background: red }
/* NEW index format */
/* Using both border and outline is so we can have a thin black border normally
 but thicker red border+outline when selected, with same size and position. */
span.piclink[id].current-image { border: solid thin red; outline: solid thin red }
span.piclink[id] { display: inline-block; border: thin solid black; outline: solid thin transparent }
span.piclink > div { display: block }

/* For the slider index page (sindex.html): */
table.slider p, body.slider p { font-size: small; margin: 0.5ex 0px }

/* Various colors: */
/* Backgroup is light blue. */
html, body, div.preamble-text > p > span { background-color: #A0F8F8 }
/* For both the group page and the slider index page: */
td.caption, div.caption { background-color: #FFFF99 }
/* Buttons and links (in text) - also yellow */
span.button, p a { background-color: #FFFF99 }
span.button:hover, p a:hover { background-color: orange }
/*div.preamble-text span.preamble-title, div.preamble-text span.preamble-num-date { background-color:  white}*/

p a { padding: 0; margin: 0 }
p span { padding: 0.2ex }
body { margin: 0; padding: 0 }
span#prev-button, span#next-button { width: 10%; text-align: center; display: inline-block; padding: 0; margin: 0; margin-top: 0; border: none; vertical-align: top }
span.button > div { border: thin solid }
span.button > div > a { margin: 0; padding: 0 }
a { text-decoration: none; padding: 0px;}
td { padding-left: 0; border-style: none }
span.button { display: inline-block }
span.button { text-align: center; border: thin solid; margin: 0.4ex; padding: 0 }
table.slider img { border: thin solid black }*/
input#zoom-input-field { padding: 0; margin: 0; border: 0 }
div#preamble { z-index: 1; top: 0px; left: 0em; right: 0em; padding: 0; margin:0; width: 100%}
tbody, tr { margin: 0pt; padding: 0pt; border: 0pt; top: 0pt }
div#preamble form table, tbody, tr { top: 0px; left: 0em; right: 0em; padding: 0; margin: 0; width: 100% }
div#preamble form tr { width: 100% }
div.preamble-text p { padding: 0em; margin: 0.5ex }
div.preamble-text span.preamble-title { margin: 0; padding: 0ex }
div.preamble-text span.preamble-num-date { font-weight: bolder; float: right; padding: 0ex }
img#main-image { touch-action: none }
body { touch-action: auto }

/* Some stuff should only be visible if JavaScript is available. */
span#slider-button, span#zoom-buttons { display: none }