html, body {
   width: 100%;
   height: 100%;
   padding: 0px;
   margin: 0px;
}

body {
   font-family: arial, helvetica, sans-serif;
   font-size: 14px;
}

a {
  text-decoration: none;
  color: gray;
}

.purgatory { clear: both; }

#toolbar {
   position: fixed;
   top: 9px;
   left: 2px;
   width: 400px;
   height: 40px;
/*   border: solid 1px gray; */

}

.in_message {
   color: red;
   padding: 15px;
   line-height: 1.5;
   font-size: 12px;
}

.in_message strong {
   background-color: yellow;
}

#galleries {
   position: fixed;
   top: 56px;
   left: 2px;
   bottom: 2px;
   width: 400px;
   border: solid 1px gray;
   overflow: scroll;
}

#images {
   position: fixed;
   top: 2px;
   right: 2px;
   left: 406px;
   bottom: 2px;
   overflow: scroll;
   border: solid 1px gray;
}

.image_frame, #uploadimage {
   width: 200px;
   height: 200px;
   float: left;
   border: solid 1px gray;
   margin: 5px;
   position: relative;
   cursor: pointer;
}

#file_click {
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   background-color: gainsboro;
   border: solid 1px white;
   background-position: center 15px;
   background-repeat: no-repeat;
}

.waiting {
   background-image: url("../img/upload_file.png");
}

.uploading {
   background-image: url("../img/reload.svg");
}

#galleries a.folder {
   display: block;
   padding: 10px 10px 10px 50px;
   background-position: 10px center;
   background-repeat: no-repeat;
   border-bottom: solid 1px gainsboro;
   position: relative;
}

#galleries a.folder:hover {
   background-color: gainsboro;
   color: steelblue;
}

#galleries a.folder.active {
   background-color: steelblue;
   color: white;
}

#galleries a .delete {
   display: block;
   float: right;
   font-size: 30px;
   line-height: 25px;
   margin-top: -4px;
   /* border: solid 1px red; */
   width: 25px;
   height: 25px;
   text-align: center;
   background-color: #ffb3b3; /* rgba(255, 0, 0, 0.3); */
   color: white;
   border-radius: 5px;
}

#galleries a .delete:hover {
   /* background-color: rgba(255, 0, 0, 1); */
   background-color: red;
}

.folder {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEoUlEQVRYR+1WfUxVZRj/nfsBJl1UHNAHE8GoZUsuYmuO8KPSyVobjq012kSGI1qANV2zVWutz62NNcF5R47hHyXQEl3kLD+wUMOQj1upFOHlQ6kDV5IroXDvPaffey7ChXvojrob//hu7+7ueZ/zPL/n9/ye57wS5nhJcxwfdwAIBkzNpesPGSXPM6qi8K+qUxUJksEAL8x1qYUnN9PAE6rSCQCWtrJ0V3JBBd3Sr6pTFQ2mEfa9ubAWnY7kvxuhBBDdujut35q/D2OXPmD+RvqeDsKL8PgtaK7YBYPZDEmanXQkgxFe1fR1alF95nT2hKcYApCt22wY7fiEsc3cfgFERVSSH/MkDAtXBmILRoVEByYz2cuBtbAhgL1JAHllGL1s8wEIYIDaIAioQiPT1r+Roar05EXYgzvQVp6PlOIzMXx7wN+DH4ASjDkqZwAgXrktztu/vsiSgQKdkQXaqh6YEnLQtm8nUooaYmnarwPgCdma+xHGeqvo0aTDgE7iIjA7Y+Saa0rFAi29MEaloeObStT+MLB6Q2qsJ9wshT9WVH9WZDXOgADwHtxXDwq5BwUgsjYYDehq6cBgzx9+7OhVSJSBedEeBCz4EsA9FOUqinISwNZ34P6zjqbsAopQl1haayd01t38K9SxW0jMonAVMRb05odebWjHTrLbtmmiHAeQLltz3oC7/zhjGxmAW4OtVXmKF9GCXT+2s7RuLHn0fiheN7U50wCbDkCBMSIeiMrAmfJXmta93pjhB2AXvM7vSa0ZXecvwum4ytB6WRkQtSQW8ckJUBR1PLi/SGdQpNbOFGT0ajh7Xfhiv+2twj0XyvwA7IRy/RxcfYMY6HQgKfNtUsvWm8KAMGf9+qqhUj7sslksXyuHxW3G78erkZRV/hBf7tEAtOxOl1O2vAoMt8Fx7gIssUux+JEMeORDWsAJEBMl0ZuWwbAokMKjIUWkovnzDwce316fzDfkSQBbiwigHa3V32J55gsImzcfnht2IV+drpjdKPZBYztaHoazy4kjNVUluSWt7/Ph4HgJ1rANX8bNK81wnD6P5Vnb4Rn+DXBfG2cgWHbBzkWtFJg4DzpP1OLZHQdTL3UPtfPhyCSAvAL0nqqDKWwB7l21Ed6hFtZMvPhfsg1Uv2ReAIQvg/1A6ejK4lMP0EIMEK8PQOla2Zr3Ii4eqETi2k2YZ4mE91ZviLIXYNh+8+Mw2C2j4fDhLzPfbSrgQ6c40QC0la2TVzz/HH6uqcGK7HyoIzIFOxyi7H0ADJYkXD55FLaqs9kf13SIiafdKXwA9qyXE9ekYdDRi/j0jVBudutfTIKVWveco9h0Fz+y0bB/9ikvNN8l0uwKt3sCgH3vU3Jk3H1YvDQJlrh7eHQ9hNnTFes/1NOHxq+Ontj0ZmM2n4hPsjZFNAZ+sj0te91uWAteAkZdPNLAhW6ZF6Hn2DFU1zYVv1bxy346ZhDf8pXAtqHTAPVuhXdCRZvroV3i+0EVuHgl45VKo3/UH8BC/kngXhRa3qckIegWdaW48Bf3RJaCAXEHi+AOC23eAd7G+ORv7in1DcWU+V+47wCYcwb+AfeCrm7EArGWAAAAAElFTkSuQmCC");
}

#file {
   position: absolute;
   top: -100px;
}

#uploadimage #message {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
   border-top: solid 1px gray;
   /* height: 40px; */
   padding: 10px;
   line-height: 1.5;
   cursor: pointer;
   color: steelblue;
}

.red { color: red; }

.green { color: green; }

#uploadimage { display: none; }

#uploadimage:hover { outline: red solid 2px; }

.image_frame { text-align: center; }
.image_frame:hover { outline: steelblue solid 2px; }

#curtain {
   position: fixed;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   background-color: rgba(255, 255, 255, 0.5);
   text-align: center;
   display: none;
}

#curtain #imgbar {
   margin-top: 5%;
   height: 80%;
   display: inline-block;
}

#curtain img {
   border: solid 1px gray;
   max-height: 100%;
   max-width: 800px;
   box-shadow: 10px 10px 25px #AAAAAA;
}

#imgcontrol {
   float: right;
   background-color: white;
   padding: 10px;
   margin-left: 10px;
   border: solid 1px gray;
   box-shadow: 10px 10px 25px #AAAAAA;
   width: 195px;
   border-radius: 10px;
   
}

#imgcontrol a {
   height: 30px;
   border: solid 1px gainsboro;
   line-height: 30px;
   font-size: 10px;
   font-weight: bold;
   background-repeat: no-repeat;
   border-radius: 6px;
   background-color: #ececec;
}

#imgcontrol a:hover {
   background-color: gainsboro;
   color: red;
}

#close {
   float: right;
   width: 90px;
}

#close span {
   float: right;
   font-size: 20px;
   margin-right: 10px;
}

#previous {
   text-align: right;
   background-position: 5px center;
   padding-right: 10px;
   width: 80px;
   display: inline-block;
   float: left;
   margin-top: 10px;
}

#next {
   text-align: left;
   background-position: 73px center;
   padding-left: 10px;
   width: 80px;
   display: inline-block;
   float: right;
   margin-top: 10px;
}

#delete {
   display: block;
   margin-top: 10px;
}

#imgcontrol #numerator {
   width: 90px;
   display: block;
   border-radius: 6px;
   border: solid 1px steelblue;
   background-color: steelblue;
   color: white;
   /* padding: 5px; */
   height: 30px;
   line-height: 30px;
   float: left;
   font-size: 12px;
   font-weight: bold;
}

#toolbar a, #galleries a.SC {
   height: 35px;
   border: solid 1px gray;
   line-height: 35px;
   font-size: 12px;
   /* font-weight: bold; */
   background-repeat: no-repeat;
   border-radius: 6px;
   background-color: #ececec;
   float: right;
   width: 120px;
   display: inline-block;
   /* padding-left: 15px; */
   text-align: center;
   margin-right: 15px;
}

#toolbar a:hover, #galleries a.SC:hover {
   background-color: gainsboro;
   color: red;
}

#toolbar span {
   height: 36px;
   line-height: 36px;
   font-size: 14px;
   font-weight: bold;
   float: left;
   color: steelblue;
   margin-left: 15px;
}

#galleries label {
   line-height: 3;
   padding-left: 10px;
}

#galleries input {
   width: 345px;
   margin: 0px 10px 20px 10px;
   padding: 5px;
   color: orangered;
   font-size: 14px;
}

.SC, #galleries a.SC { display: none; }

.arr-rt {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAH/SURBVHgBAO8BEP4BRoK0RAAAAIgAAABnuX1LzQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAADMAAADMR4O1qkeDtREAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAVQAAAO5Hg7V3AAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACIR4O13UeDtWYAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIgAAAJlHg7XMR4O1MwAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzAAAAzEeDtXcEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADNAAAAZ7l9S80EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3gAAAIm5fUuaAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4uX1LiQAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAqwAAAGe5fUvvAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAM0AAABnuX1LzQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAD//2yhKg4Mo6eWAAAAAElFTkSuQmCC');
}

.arr-lt {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAH/SURBVHgBAO8BEP4B////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABHg7UzAAAAmQAAAHgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAR4O1EQAAAJkAAABVAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAABHg7V3AAAA7gAAAFUAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAR4O1ZgAAAHcAAAAiAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAEeDtTMAAACZAAAAMwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADxwM1dwAAAKoAAAAaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKMCuX1LiQAAADQAAADNAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB////AAAAAAAAAAAAR4O1ZgAAAHcAAAAiAAAAAAAAAAAAAAAAAAAAAAAAAEUB////AAAAAAAAAAAAAAAAAAAAAABHg7V3AAAAiAAAAAAAAAAAAAAAAAAAAEUCAAAAAAAAAAAAAAAAAAAAAAAAAAC5fUuJAAAAEgAAAKsAAAAAAAAAAAAAAAAB////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABHg7UzAAAAmQAAAHgBAAD//1vnKny6AzRoAAAAAElFTkSuQmCC');
}

#msg {
   color: red;
   padding-left: 10px;
   padding-bottom: 15px;
}