:root {--text-color:white; --border-color:#fff;}

body { font-family:sans-serif; background-color: #191970; margin-top:1em;}
a {text-decoration:none; }

header {display:flex;  Xflex-flow: row wrap; Xalign-content: center; justify-content: center;}
header a {margin:10px; padding:0;}
header div div {display:block;}
header div button {margin-right:.5rem;}
header div.selected {margin-top:-0.9rem;}
header div.selected a {font-size:200%; margin-top:-4px;}

div.sets {display:flex;  flex-flow: row wrap; xflex-wrap:wrap; width:100%; align-content: center; justify-content: center;}

div.sets a {display:block; padding:.5rem; margin:0.25rem; border:1px solid #aaa; xbackground-color:#05054F;text-decoration:none; text-align:center;}


h1 a {text-decoration:none;}

div.thumbs-container {Xmax-height:50rem; Xmin-width:175px;}
		
div.thumbs {max-height:130px; width:100%; overflow-x:scroll; overflow-y:hidden; white-space:nowrap;}
div.thumbs a {display:inline-block; margin-bottom:.25rem 0; white-space:normal; vertical-align: top;}
div a img {border:.25rem solid white; }
div a.selected img{border-color:yellow;}

div.thumbs a.checked img {border-color:cyan}
div.thumbs a.selected.checked img{border-right-color:yellow;border-bottom-color:yellow;}

div.set {Xdisplay:flex; }
div.picture {padding-left: 1rem;}
div.picture img {border:1em solid white; Xbox-shadow: 10px 10px 10px #aaa;}
div.set div.picture div {text-align:center}
div.aset {max-width:17rem;}

.exposed a {color:yellow}
footer {text-align:center; padding-top:1rem; margin-top:1rem; border-top:1px solid white;}

pre {Xdisplay:none;}
#stop {display:none;}
#start, #stop, #back {padding:0 1rem; margin:0 1rem; pointer:arrow; color:yellow;}
#back {margin:0 1rem 0 0;}

.edit-buttons {padding:0 0 1rem 0; margin-top:1.25rem;}
.edit-buttons button{margin:0 1rem 0 0;}
.edit-buttons span{padding:1rem; border:1px solid white; background-color:firebrick;}
.edit-add {width:2rem; height:2rem;margin-left:1rem;}
div.sets .edit-add {margin-top:1rem;}
.edit-title {text-align:center; margin:0 .25rem;}
.new {margin:1.5rem 0 0 .5rem; width:15rem;}

body, h1, h1 a, header a, div.sets a, footer a {color:var(--text-color, white)}
div.thumbs a, div.picture img, footer {border-color:var(--border-color, white)}
.deleted {opacity:.3;}

.all-pictures { margin:0 0 0 1rem; border:1px solid yellow;}

.working  .splash {
        background-color: silver;
        border: 1px solid black;
        box-shadow: 6px 6px 2px 1px #ccc;
        color: #000;
        display: block;
        height: 7em;
        left: 50%;
        padding: 1em;
        position: fixed;
        text-align: center;
        top: 30%;
        transform: translate(-50%,-50%);
        width: 10em;
        line-height:7em;
        z-index: 102;
}
.splash {display:none;}

#selected-pictures img {display:block; margin:.25em; Xborder:.25rem solid cyan;}

.picture-ctrl {
	display:flex;
	align-content: center;
	justify-content: center;
        width:1600px;
}
.picture-ctrl label {
	margin:0 1rem;
}
.picture-ctrl span {
	color:orange;
	font-size:1.5rem;
	cursor:pointer;
 }
 .picture-ctrl input {
 vertical-align: bottom;
 width:15rem;
 }
 
.picture_exposed {margin-right: 1rem; font-size: 1.5rem;}
.picture_exposed input{zoom:2;}
 
 .ph-input{margin:1rem 0}