html, body, article
{
    height: 100%;
    font-family: 'Montserrat', sans-serif;
}

article
{
}

header
{
    padding: 5% 25%;
}

header h1
{
    font-size: 2em;    
}

form
{
    padding: 5% 25%;
}

input
{
    margin-left: 10px;
    float: right;
    padding: .5em;
    width: 30em;
    font-size: 1em;
    margin-top: -.5em;
}

label
{
    display: block;
    width: 38em;
    margin-bottom: 3em;
    border-bottom: 1px dotted #333;
}

.toptips
{
    width: 45%;
    height: 100%;
    background: #eee;
}

.toptips img
{
    z-index: 9;
    cursor: move;
    border: 1px solid #999;
    background: #ddd;
    width: 100px;
    margin: .5em;
    transition: .3s width;
    position: absolute;
}

.ui-draggable-dragging
{
    box-shadow: .25em .25em 0em rgba(0,0,0,.25);
    width: 200px !important;
}

.trash
{
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 45%;
}

.trash li
{
    border: 3px dotted #ccc;
    background: #eee;
    margin: 2%;
    height: 30%;
}

.trash li:hover
{
}

.trash h2
{
    text-align: center;
    margin: 1em;
}