.colourful {
    background:
    -webkit-linear-gradient(45deg, hsla(332, 18%, 55%, 1) 0%, hsla(332, 18%, 55%, 0) 70%),
    -webkit-linear-gradient(315deg, hsla(290, 22%, 50%, 1) 10%, hsla(290, 22%, 50%, 0) 80%),
    -webkit-linear-gradient(225deg, hsla(342, 27%, 50%, 1) 10%, hsla(342, 27%, 50%, 0) 80%),
    -webkit-linear-gradient(135deg, hsla(169, 0%, 100%, 1) 100%, hsla(169, 0%, 100%, 0) 70%);
    background:
    linear-gradient(45deg, hsla(332, 18%, 55%, 1) 0%, hsla(332, 18%, 55%, 0) 70%),
    linear-gradient(135deg, hsla(290, 22%, 50%, 1) 10%, hsla(290, 22%, 50%, 0) 80%),
    linear-gradient(225deg, hsla(342, 27%, 50%, 1) 10%, hsla(342, 27%, 50%, 0) 80%),
    linear-gradient(315deg, hsla(169, 0%, 100%, 1) 100%, hsla(169, 0%, 100%, 0) 70%);
}

section.background {
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

section.container {
    width: 100%;
    margin: auto;
    border: 1px solid #eee;

}

section.container section.droplet {
    width: 100%;
    margin: auto;
    text-align: left;
    position: relative;
}

section.container section.droplet h1 a {
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    color: white;
    text-decoration: none;
    font-weight: normal;
    font-size: 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
}

section.container section.droplet ul.statistics {
    list-style-type: none;
    overflow: hidden;
}

section.container section.droplet ul.statistics li {
    float: left;
    overflow: hidden;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
    margin: 10px 5px 10px 0;
    color: white;
    font-family: Times New Roman, Times, serif;
    font-size: 11px;
    font-style: italic;
    padding: 1px;
    display: inline-block;
    border-radius: 2px;
}

section.container section.droplet ul.statistics li label {
    color: rgba(255, 255, 255, .5);
}

section.container section.droplet droplet {
    display: inline-block;
    z-index: 2;
    position: relative;
    border-radius: 2px;
    width: 100%;
    height: 236px;
    background-color: rgba(255, 255, 255, .1);
    margin-top: -5px;
    padding-top: 5px;
    transition: box-shadow 0.35s;
}

section.container section.droplet droplet div.loading {
    display: block;
    height: 395px;
    margin: 1px;
    margin-top: 6px;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all .35s;
}

section.container section.droplet droplet div.loading.visible {
    opacity: 1;
}

section.container section.droplet droplet.event-dragover {
    box-shadow: inset 0 0 100px rgba(255, 255, 255, .25), inset 0 0 5px rgba(255, 255, 255, .25);
}

section.container section.droplet droplet comment:after {
    content: "Drag Image...";
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: inline-block;
    position: absolute;
    z-index: -1;
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    color: black;
    text-decoration: none;
    font-weight: normal;
    font-size: 20px;
    line-height: 400px;
    text-align: center;
}

section.container section.droplet droplet.event-dragover comment:after {
    content: "...And Drop!";
}

section.container section.droplet droplet ul.files {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    padding: 5px;
    list-style-type: none;
    transition: all .5s;
}

section.container section.droplet.uploading droplet ul.files {
    opacity: .25;
    filter: blur(2px);
    -o-filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-filter: blur(2px);
    pointer-events: none;
}

section.container section.droplet droplet ul.files li {
    width: 100px;
    height: 100px;
    padding: 1px;
    float: left;
    position: relative;
    margin: 5px;
}

section.container section.droplet droplet ul.files li img.droplet-preview {
    max-width: 96px;
    background-size: cover;
    background-repeat: no-repeat;
    height: 96px;
    width: 96px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
    border: 1px solid white;
    display: block;
}

section.container section.droplet droplet ul.files li div.delete {
    background-color: rgba(0, 0, 0, .25);
    width: 50px;
    height: 50px;
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    color: white;
    font-size: 25px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
    text-align: center;
    cursor: pointer;
    line-height: 50px;
    position: absolute;
    border-radius: 50%;
    z-index: 101;
    top: 25px;
    left: 25px;
    opacity: 0;
    transition: all .30s;
    transform: scale(0.5);
}

section.container section.droplet droplet ul.files li:hover div.delete {
    opacity: 1;
    transform: scale(1);
}

section.container section.droplet droplet ul.files li div.delete:hover {
    background-color: rgba(0, 0, 0, .45);
}

section.container section.droplet droplet ul.files li div.size {
    background-color: rgba(255, 255, 255, .5);
    position: absolute;
    bottom: 5px;
    right: 5px;
    pointer-events: none;
    font-size: 9px;
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    padding: 1px 4px;
}

section.container section.droplet section.message {
    position: absolute;
    background-color: deepskyblue;
    z-index: 2001;
    width: 100%;
    color: white;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    transition: all .55s;
    padding: 0 12px 0 12px;
    top: -10px;
    cursor: pointer;
}

section.container section.droplet section.message.visible {
    padding: 15px 12px 10px 12px;
    top: 0;
}

section.container section.droplet section.message.success {
    background: linear-gradient(to bottom, rgba(112, 176, 224, 1) 0%, rgba(136, 191, 232, 1) 100%);
}

section.container section.droplet section.message.error {
    background: linear-gradient(to bottom, #ce6784 0%, #cc768d 100%);
}

section.container section.droplet section.toolbar {
    margin-top: 5px;
    overflow: hidden;
    position: relative;
    z-index: 3;
    height: 25px;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    background: linear-gradient(to bottom, #ededed 0%, #dedede 100%);
}

section.container section.droplet section.toolbar .button {
    display: inline-block;
    background-color: transparent;
    float: left;
    overflow: hidden;
    width: 100px;
    height: 100%;
    border: 0;
    cursor: pointer;
    border-right: 1px solid rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .75);
    transition: all 0.25s;
}

section.container section.droplet section.toolbar .button:hover {
    background-color: rgba(0, 0, 0, .1);
}

section.container section.droplet section.toolbar div.add-files {
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
}

section.container section.droplet section.toolbar div.add-files input.droplet-multiple {
    position: absolute;
    top: -10px;
    font-size: 28px;
    left: -90px;
    z-index: 1001;
    opacity: 0.0001;
    cursor: pointer;
}

section.container section.droplet section.toolbar div.add-files:hover input.add-files {
    background-color: rgba(0, 0, 0, .1);
}

section.container section.droplet section.toolbar input.upload-files {
    transition: background-color 0.25s;
    outline: none;
    pointer-events: none;
    color: rgba(0, 0, 0, .15);
}

section.container section.droplet section.toolbar input.upload-files.clickable {
    pointer-events: all;
    color: rgba(0, 0, 0, .75);
}

section.container section.droplet section.toolbar comment.progress {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    float: right;
    overflow: hidden;
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    font-weight: 400;
    color: rgba(0, 0, 0, .35);
    font-size: 11px;
    padding: 0 8px;
    margin-right: -60px;
    opacity: 0;
    transition: all 0.55s;
}

section.container section.droplet section.toolbar comment.progress.visible {
    margin-right: 0;
    opacity: 1;
}

section.container section.droplet input.droplet-multiple {
    color: white;
    margin-top: 5px;
}