.fake-paragraph { clear: both; margin: 1em; }

.huge-unicode-icon { /* e.g. ⟲ */ font-weight: bold; font-size: 1.7em; line-height: 1em; padding: 0; margin: 0; }

#files-going-up button { margin-right: 0.5em; }

.todo   { background: orange; color: black; padding: 0.1em 0.25em; margin: 0.25em; }
.todo a { color: black; font-weight: bold; }

#progress {
    display: none; background: #303; color: white; padding: 0; margin: 50px; border: 0;
    height: 2em; width: 6in;
}

#progress-bar {
    background: white; color: #303; height: 1.5em; width: 0%; padding: 0.25em;
    vertical-align: middle; font-weight: bold; overflow: hidden;
}

div.uploaded-container {
    display: inline;
    margin: 0; padding: 1px; border: none; float: left; margin: 5px;
    position: relative; /* makes the success checkmark "absolute"
        to the right place */

    /*
    ** table-cell gives you vertical-align: middle; but float: left 
    ** cancels it out.  Also, the margin (nor border-spcing) will work
    ** without more table-like formatting; and if we did that we'd lose
    ** the wrapping too.
    **
    ** This container is for the float and the margin.
    */
}

div.uploaded {
    display: table-cell; 
    width: 200px; height: 200px; padding: 0;
    text-align: center; vertical-align: middle;
}

div.uploaded.small-thumbnail {
    height: 130px; width: 130px;
}

div.uploaded img { max-width: 100%; max-height: 100%; }

div.uploaded.success {
    position: absolute; width: 100%; height: 100%;
    top: 0; left: 0; opacity: 0.65;
    font-weight: bold; font-size: 9em; text-align: center;
    color: green; line-height: 200px;
}

div.uploaded { border: 1px solid #111; }

div.uploaded.ui-selected {
    background: rgba(0.4,0.4,0,0.5);
}

div#image-controls {
    background-image: linear-gradient(to left bottom, rgba(10,0,10,0.7) 0, transparent 35%);
    display: none;
}

div#image-controls .control-item {
    position: relative;
    float: right;
    clear: both;
    margin: 17px;
    height: 32px; width: 32px;
    background-position: 0px 0px;
    background-image: url(/webos-icons/menu-icon-stop.png);
}

div#image-controls .control-item:active { background-position: 0px -32px; }
div#image-controls #send.control-item   { background-image: url(/webos-icons/menu-icon-send.png); }
div#image-controls #delete.control-item { background-image: url(/webos-icons/menu-icon-delete.png); }
div#image-controls #info.control-item   { background-image: url(/webos-icons/menu-icon-info.png); }
div#image-controls #zoom.control-item   { background-image: url(/webos-icons/menu-icon-search.png); }