#header
{
    width: 242px;
    height: 56px;
    position: absolute;
    background-image: url('logo.png');
    background-repeat: no-repeat;
    top: 20px;
    left: 20px;
}

#videoList
{
    padding: 1px;
    margin-top: 50px;
    background: none;
}

/* Fix thumbnail schaduw */

.videoItem .thumbnail
{
    border: none;
    box-shadow: 0 0 5px rgba(0,0,0,0.25);
}


/* Rounded corners aanpassen */

    #loginForm, .navigation, #showVideoForm, .genericForm, #videoList .videoItem, #admin
    {
        -moz-border-radius:    0px;
        -webkit-border-radius: 0px;
        -khtml-border-radius:  0px;
        border-radius:         2px;
    }

    #videoList .videoItem, .videoItem .thumbnail, #videoList
    {
        border-radius: 0;
    }



/* Kleuren */

    /*
     * rood: #e42618
     *
     */

    a
    {
        color: black;
    }

    #videoList .videoItem, .genericForm, #admin
    {
        color: black;
        background-color: #f0f0f0;
        box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
    }
    
    #videoList .videoItem p.date
    {
        color: #888;
    }

    /* knop-achtige dingen */
    .navigation, #loginForm, #showVideoForm
    {
        background-color: #e42618;
        color: #ffffff;
        box-shadow: 2px 2px 1px rgba(0,0,0,0.25);
    }

    .navigation a, #loginForm a, #showVideoForm a
    {
        color: white;
    }

    #loginForm p.loginMessage
    {
        background-color: #f00;
        box-shadow: 0 0 5px rgba(0,0,0,0.25);
        background-color: #a41b11;
        font-weight: normal;

    }


.genericForm .buttons input
{
    border: none;
    background-color: #e42618;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
    color: white;
    padding: 5px;
    border-radius: 2px;
}

#videoList .videoItem
{
    position: relative;
}

#videoList .videoItem:hover .admin
{
    opacity: 1;
}
#videoList .videoItem .admin
{
    text-align: center;
    background: purple;
    width: 20.5em;
    padding: 0.4em;
    background-color: #e42618;
    color: #ffffff;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
    border-radius: 2px;
    position: absolute;
    top: -0em;
    right: -0em;
    opacity: 0;
    transition: all 0.25s ease-in-out 0s;
}

#videoList .videoItem .admin a
{
    color: white;
}

.videoPlayer
{
    margin-top: 20px;
    margin-bottom: 20px;
}

.videoPlayer .videoNotes
{
    border-radius: 2px;
    background-color: #ccc;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
}


.stappenPlanDocumentaire
{
    margin-top: 3em;
    margin-bottom: 3em;
    border-radius: 2px;
    padding: 1em;
    color: black;
    background-color: #f0f0f0;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
}

.stappenPlanDocumentaire li
{
    margin: 0.3em;
}