@charset "utf-8";

/*******************************
*
*    NORMALIZE 
*
********************************/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    font-size: 1em;
    font-family: sans-serif;
}
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}
body.waiting,
body.waiting > *,
body.waiting > *:hover {
    cursor: wait !important;
}
/*******************************
*
*    BASIC STYLES 
*
********************************/
.messageNoJS, .messageError, .messageOk, .messageNotice {
    background-color: #fff;
    padding: 2em 2em 2em 5em;
    margin-bottom: 2em;
    border: 1px solid #ddd;
    background-position: 1em 50%;
    background-repeat: no-repeat;
    position: relative;
}
.messageNoJS p:last-of-type,
.messageError p:last-of-type, 
.messageOk p:last-of-type, 
.messageNotice p:last-of-type {
    margin-bottom: 0;
}

.messageError   { background-image: url(../img/app-admin/messageError.png) }
.messageOk      { background-image: url(../img/app-admin/messageOk.png) }
.messageNotice  { background-image: url(../img/app-admin/messageNotice.png); }
    .messageNoJS strong,
    .messageError strong {
        color: #f00;
        font-size: 1.1em;
    }
    .messageOk strong {
        color: #48C32D;
        font-size: 1.1em;
    }
    .messageNotice strong {
        color: #9f9a13;
        font-size: 1.1em;
    }
.messageError .close, .messageOk .close, .messageNotice .close {
    background: #ccc;
    position: absolute;
    top: 1em;
    right: 1em;
    height: 1.4em;
    width: 1.4em;
    text-align: center;
    color: #fff
}
.messageError .close:hover, .messageOk .close:hover, .messageNotice .close:hover {
    color: #f00;
    cursor: pointer;
}
.small {
    font-size: .8em;
}
.animate,.animate:hover {
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}
a img { vertical-align: bottom; }

.new_item a {
    height: 3em;
    line-height: 3em;
    vertical-align: middle;
    background: #46b692;
    display: inline-block;
    padding: 0 1em 0 1em;
    margin-bottom: 2em;
    border-radius: 1.5em;
    color: #fff;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: .9em;
    text-transform: uppercase;
    transition: .5s;
}
    .new_item a:before {
        content: '+';
        font-size: 3em;
        float: left;
        margin-right: .3em;
    }
    .new_item a:hover {
        background: #424952
    }


/*******************************
*
*    BASE LAYOUT
*
********************************/
html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
body {
    min-height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch; /*vertical stretch*/
    align-content: stretch; /*horizontal stretch */
}

.rc {
    flex: 1 0 40em;
    background: #f6fafb;
    padding: 4em;
}
.rc .box {
    background-color: #fff;
    padding: 2em;
    margin-bottom: 2em;
    border: 1px solid #eaeeef;
    -webkit-box-shadow: 3px 3px 5px -5px #aaa;
    -moz-box-shadow: 3px 3px 5px -5px #aaa;
    box-shadow: 3px 3px 5px -5px #aaa;
}
    .rc .box p {
        margin-bottom: 1em;
    }
    .rc .box p:last-child {
        margin-bottom: 0;
    }
    .rc .box h2 {
        margin-bottom: 1em;
    }
/*******************************
*
*    HEADER
*
********************************/
h1 {
    font-size: 1em;
    padding: .5em;
    margin: 0;
    background-color: #f75b54;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
}
h1 .h1-img {
    height: 3em;
    flex-basis: 0 0 3em;
}
h1 .h1-img img {
    display: block;
    width: 100%;
    height: 100%;
}
h1 .h1-text {
    flex: 1 1 100%;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-weight: 100;
    text-transform: uppercase;
    padding: 0 .5em;
    font-size: 2em;
    position: absolute;
    left: 1.5em;
    right: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
}
    .lc-small h1 .h1-text {
        left: 100%;
        right: 0;
        padding: 0;
    }
/*******************************
*
*    NAVIGATION
*
********************************/
.lc {
    flex: 0 0 15em;
    background: #29313c;
    transition: 1s;
    position: relative;
}
nav ul {
    list-style: none;
    padding: 3.5em 0 0 0;
}
    nav li { margin: 0; }
    nav li.nav-only-text {
        color: #9db1c9; 
        padding: 1em .5em;
    }

    nav a {
        display: flex;
        align-items: center;
        color: #9db1c9;
        text-decoration: none;
        position: relative;
        width: 100%;
        height: 4em;
    }
    nav a .nav-image {
        flex: 0 0 2em;
        height: 2em;
        background: #50647b;
        margin: 0 1em;
    }
        nav a .nav-image img {
            display: block;
            width: 100%;
            height: 100%;
        }
        nav a:hover { color: #fff; }
        nav a:hover .nav-image { background: #fff; }
        nav a.is-active { color: #46b692; }
        nav a.is-active .nav-image { background: #46b692; }

    nav a .nav-text {
        flex: 1 1 0;
        height: 4em;
        line-height: 4em;
        vertical-align: middle;
        font-family: 'Roboto', sans-serif;
        font-size: .8em;
        text-transform: uppercase;
        position: absolute;
        left: 5em;
        right: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        z-index: 999;
    }

.lc.lc-small { flex-basis: 4em; }
    .lc-small .nav-text {
        background: #29313c;
        padding: 0;
        left: 100%;
        transition: .5s;
        border-radius: 0 2em 2em 0;
    }
    .lc-small a:hover .nav-text {
        right: -12em;
        padding: 0 2em 0 .5em;
    }

.lc-small nav a.menu-state,
.menu-state {
    display: block;
    position: absolute;
    left: 100%;
    top: 4.5em;
    height: 3em;
    background: #29313c;
    padding: .5em .30em .5em .15em;
    border-radius: 0 .5em .5em 0;
    width: auto;
    outline: none;
}
    nav a.menu-state .nav-image {
        display: block;
        margin: 0;
        width: 1em;
        height: 2em;
    }
nav .nav1,
nav .nav3 {
    display: none;
}
nav .nav3 {
    font-size: .9em;
    background: #fff;
    text-align: center;

}
nav .nav3 li {
    background: #33475d;
    display: inline-block;
    border-radius: 0 0 .5em .5em;
}
nav .nav3 a {
    height: 3em;
}
nav .nav3 li .nav-text {
    padding-right: 2em;
    height: 2em;
    line-height: 2em;
}

/*******************************
*
*    PAGINATION
*
********************************/
.pagination {
    margin: 0;
    font-size: .7em;
}
.pagination a,
.pagination span {
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    border-radius: 3px;
    display: inline-block;
    line-height: 2.8em;
    vertical-align: middle;
    text-align: center;
    width: 3em;
    height: 3em;
    margin: .25em;
    text-decoration: none;
}
.pagination a:hover {
    border: 1px solid #404d5e;  
}
.pagination a.active {
    border: 1px solid #404d5e;
    color: #404d5e;
    font-weight: 900;
}

.sort {
    margin: 2em 0;
    font-size: .7em;
}
.sort a,
.sort span {
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    display: inline-block;
    line-height: 2.8em;
    vertical-align: middle;
    text-align: center;
    height: 3em;
    text-decoration: none;
}
.sort span {
    min-width: 6em;
    padding: 0 .5em;
    border-radius: 3px 0 0 3px;
}
.sort span:not(:first-of-type) {
    margin-left: 1em;
}
.sort a {
    width: 2em;
    border-radius: 0 3px 3px 0;
    color:  #aaa;
}
.sort span + a {
    border-radius: 0;
    border-color: #ccc #fff;
}
.sort a:last-child {
    border-right-color: #ccc;
    border-radius: 0 3px 3px 0;
}
.sort a:hover {
    border: 1px solid #404d5e;  
}
.sort a.active {
    border-color: #ccc; 
    background: #ccc;
    color: #fff;
}


/*******************************
*
*    GENERAL FORM STYLING
*
********************************/
form > div,
form .box > div:not(:last-of-type) {
    margin-bottom: 2.5em;
}

div.input label,
label.label {
    font-size: .9em;
    font-weight: 600;
    color: #50647b;
    display: block;
}
.radio label {
    display: block;
    margin-top: .5em;
}
.radio input,
[type=checkbox] {
    margin-right: .5em;
}

input[type=text],
input[type=email],
input[type=password],
input[type=file],
textarea {
    display: block;
    width: 30em;
    padding: .2em;
    border: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    background: #fff;
    margin: .25em 0 1.5em 0;
}
td input[type=text] { width: 7.5em; }
/*input[type=text][name*=date],
input[type=text][name*=time] { width: 7.5em; }*/
form p { margin-bottom: 1.5em; }

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus {
    border-width: 1px;
    border-bottom-color: #50647b;
}




[type=submit] {
    height: 3em;
    line-height: 3em;
    vertical-align: middle;
    background: #46b692;
    display: inline-block;
    padding: 0 1em 0 1em;
    border-radius: 1.5em;
    border: 0;
    color: #fff;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: .9em;
    text-transform: uppercase;
    transition: .5s;
}
    [type=submit]:before {
        content: "\2713";
        font-size: 2em;
        float: left;
        margin-right: .3em;
    }
    [type=submit]:hover {
        background: #424952
    }
/*
input[type=submit],
button[type=submit] {
    padding: .5em;
    margin-right: .5em;
    font-weight: 900;
}
input[type=submit][name=delete] {
    font-weight: 100;
}*/
input[readonly],
input[readonly=readonly],
input[disabled],
input[disabled=disabled],
input[readonly]:focus,
input[readonly=readonly]:focus,
input[disabled]:focus,
input[disabled=disabled]:focus {
    border-color: #ccc;
    background: #eee;
}


select {
    border: 1px solid #bbb;
    background: #fff;
    border-radius: .35em;
    padding: .2em;
}
form small { font-size: .8em; }

form .error-message {
    background: #D33C44;
    display: inline-block;
    padding: .5em;
    margin: 1em;
    color: white;
    border-radius: .5em;
    font-size: .9em;
    font-weight: bold;
    position: relative;
}
form .error-message:after {
    bottom: 100%;
    left: 1em;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #D33C44;
    border-width: 0 .5em 1em .5em;
}

/*******************************
*
*    GENERAL TABLE STYLES
*
********************************/
table {
    font-size: .9em;
    border: 1px solid #eee;
    border-collapse: collapse;
    width: 100%;
}
table thead td,
table thead th {
    color: #fff;
    background-color: #50647B;
    text-align: left;
}
table tbody tr:nth-child(even) td {
    background: #f6fafb;
}
table th, table td {
    border: 0;
    margin: 0;
    padding: .75em .45em;
    vertical-align: middle;
    border: 0;
    vertical-align: top;
}
table thead tr:last-child th {
    border-bottom: 1px solid #999;
}

table button {
    display: inline-block;
    font-size: .7em;
    line-height: 1em;
    margin: 0 .5em
}
table td input[type=text],
table td select {
    margin: 0 0 .25em 0;
}

/*******************************
*
*    LOGIN PAGE
*
********************************/


/*******************************
*
*    HOME PAGE
*
********************************/
.home_box {
    display: flex;
    flex-wrap: wrap;
}
.home_box .box {
    width: 15em;
    margin: 0 1em 1em 0;
    text-align: center;
}
.home_box .box>a {
    display: block;
    margin: 0 auto 1em auto;
    width: 50%;
    padding-top: 50%;
    max-width: 150px;
    max-height: 150px;
    background: #50647b url(../img/app-admin/home_pages.png) no-repeat;
    background-size: cover;
}

.home_box .box>a.home_box_pages {
    background-image: url(../img/app-admin/home_pages.png);
}
.home_box .box>a.home_box_images {
    background-image: url(../img/app-admin/home_images.png);
}
.home_box .box>a.home_box_files {
    background-image: url(../img/app-admin/home_files.png);
}
.home_box .box>a.home_box_photoalbums {
    background-image: url(../img/app-admin/home_photoalbums.png);
}
.home_box .box>a.home_box_projects {
    background-image: url(../img/app-admin/home_projects.png);
}



/*******************************
*
*    PAGES
*
********************************/
.page_list,
.pa_list {
    margin: 0;
    padding: 0;
}
.page_list li,
.pa_list li {
    list-style: none;
    border: 0px solid #ccc;
    margin-bottom: .5em;
    padding-bottom: 1px;
    border-radius: .25em;
}
.page_list li div {
    border-radius: .25em;
}

.page_list li:nth-child(odd),
.pa_list li:nth-child(odd) {
    background: #fff;
}
.page_list.page_list_index li,
.page_list li:nth-child(even),
.pa_list li:nth-child(even) {
    background: #f6fafb;
}

.page_list li:nth-child(odd) li:nth-child(odd) {
    background: #f6fafb;
}
.page_list li:nth-child(odd) li:nth-child(even) {
    background: #fff;
}


.page_list_index li:hover,
.page_list li div:hover,
.pa_list li:hover {
    background: #d5e2e5
}
.page_list li div,
.pa_list li {
    padding: 1em;
}
.page_list li a img,
.pa_list li a img {
    max-height: 1.2em;
    margin-right: .9em;
}
/* specific for  page list */
.page_list li div {
    cursor: ns-resize;
}
.page_list.page_list_index li div,
.page_list.page_list_out li div {
    cursor: default;
}
.page_list li div.page_offline {
    opacity: .4;
}

.page_list li small,
.pa_list li small:last-of-type {
    float: right;
    color: #bbb;
}
.pa_list li small {
    color: #bbb;
}
.page_list_index li a {
    display: inline-block;
    margin: 0 2em 0 1.9em;
}
.page_list li div.is_static a {
    margin-right: 4.2em;
}

.page_list > li li {
    margin-left: 2em;
    margin-right: 1em;
}

.page_list li.ui-sortable-placeholder {
    height: 3.5em;
    border: 1px solid #eee;
    background: #eee;
}
.page_list a,
.pa_list a {
    position: relative;
}
.page_list a img,
.pa_list a img {
    position: relative;
    z-index: 10;
}
.page_list a:hover:before,
.pa_list a:hover:before {
    content: ' ';
    z-index: 5;
    background: #fff; /*#bdcee1;*/
    border-radius: 1em;
    position: absolute;
    width: 2em;
    height: 2em;
    left: -.45em;
    top: -.45em;
    animation: pulsate .5s ease-out forwards;
    opacity: 0;
}
.page_list a[title="Verwijderen"]:hover:before,
.pa_list a[title="Verwijderen"]:hover:before {
    background: #e1bdc1;
}
@keyframes pulsate {
    0% {transform: scale(0.1); opacity: 0;}
    50% {opacity: 1.0;}
    90% { transform: scale(1.2); opacity: 1;}
    100% { transform: scale(1); opacity: 1; }
}

/* pages outside menu */
.page_list_out li div a:last-of-type {
    margin-right: 2.1em;
}
.page_list_out li div.is_static {
    padding-left: 7.3em;
}


/*******************************
*
*    IMAGES
*
********************************/
.image_iframe {
    width: 100%;
    height: 35em;
    border: 1px solid #eaeeef;
}
.image_upload_header {
    display: flex;
    font-size: .9em;
    font-weight: 600;
    color: #50647b;
    margin-bottom: 1.5em;
}
.image_upload_row {
    display: flex;
}
.image_upload_header span,
.image_upload_row input {
    display: block;
    width: 30%;
    margin-right: 5%;
}
.image_upload_header span:last-child,
.image_upload_row input:last-child {
    margin-right: 0;
}

.image_switch {
    display:  inline-block;
    margin-bottom: 2em;
}
.image_switch a {
    display: inline-block;
    background: #fff;
    padding: .5em 1em;
    font-size: .7em;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
}
.image_switch a:not(:first-child) { margin-left: -5px; }
    .image_switch a.image_switch_active {
        color: #fff;
        background-color: #50647b;
    }
    .image_switch a:not(.image_switch_active):hover {
        background-color: #adbbcc;
    }

.image-thumb-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.image-thumb-box > div {
    width: 225px;
    margin: 0 1em 1.5em 2em;
    text-align: center;
    position: relative;
    padding-bottom: 1.5em;
}
.image-thumb-box > div span {
    font-size: .7em;
    display: block;
}
.image-thumb-box > div > div {
    position: absolute;
    text-align: center;
    bottom: .25em;
    width: 100%;
}
.image-thumb-box > div a img {
    max-height: 1.2em;
    margin-right: .5em;
}

.image-to-album-list a {
    display: inline-block;
    position: relative;
    opacity:  .5;
    margin: 0 2em 2em 0;
    border-bottom: 5px solid #fff;
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}
.image-to-album-list a:hover {
    opacity:  1;
    cursor: pointer;
}
.image-to-album-list a.img-in-album,
.image-to-album-list a.img-as-cover {
    border-bottom: 5px solid green;
    opacity: .8;
}
.image-to-album-list a.img-as-cover {
    border: 5px solid #F44336;
}
.image-to-album-list a.img-in-album:after,
.image-to-album-list a.img-as-cover:before {
    content: " ";
    position: absolute;
    width: 3em;
    height: 3em;
    left: 50%;
    top: 50%;
    margin: -1.5em 0 0 -1.5em;
    background: url(../img/app-admin/ok.png) center center no-repeat;
    background-size: 3em 3em;
}
.image-to-album-list a.img-as-cover:before {
    background-image: url(../img/app-admin/star.png);
    margin-left: .25em;
}
.image-to-album-list a.img-as-cover.img-in-album:after {
    margin-left: -3.25em;
}

/*******************************
*
*    SPECIAL FORMATS
*
********************************/
.m_top_1em { margin-top: 1em; }
.m_top_2em { margin-top: 2em; }
.top-margin-0 { margin-top: 0; }
.v-align-middle td { vertical-align: middle; }
.left-margin-2em { margin-left: 2em; }
.width-7-5em { width: 7.5em; }
.width_5em { width: 4em !important; }
.small { font-size: .8em; }
.red { color: red; }
.bold { font-weight: 600; }
.strong { font-weight: 900; }
.pre { white-space: pre; }

.mobileOnly { display: none; }
.desktopOnly { display: block; }



/*****************************
 *
 *  RESPRONSIVE VIEW
 *  
 ****************************/

@media all and (max-width: 50em) {
    .mobileOnly { display: block; }
    .desktopOnly { display: none; }
    /*******************************
    *    BASE LAYOUT
    ********************************/
    body {
        width: 100%;
        padding: .5em;
        min-height: 100%;
        display: block;
        padding-bottom: 2em;
    }
    .lc { width: 100%; }
    .rc {
        width: 100%;
        padding: 2em .5em;
    }
    .rc .box {
        padding: 1em;
    }

    /*******************************
    *    HEADER
    ********************************/
    h1 {
        border-bottom: 2em solid white;
    }
    h1 .h1-text { position: static; }
    /*******************************
    *    NAVIGATION
    ********************************/
    nav .nav1,
    nav .nav3 {
        display: block;
    }
    nav .nav2 {
        display: none;
    }
    nav ul { padding: 0; }
    nav .nav2 li { width: 100%; }
    nav .nav2 a,
    .lc-small nav .nav2 a { width: 100%; }

    nav a .nav-text { position: static; }

    .lc-small nav a.menu-state,
    .menu-state { display: none; }

    nav a.is-active { color: #9db1c9; }
    nav a.is-active .nav-image { background: #9db1c9; }

    .mobile-menu-state { display: block; }
    /*******************************
    *    GENERAL FORM STYLING
    ********************************/
    input[type=text],
    input[type=password],
    input[type=email],
    textarea {
        width: 100%;
    }

    /*******************************
    *    HOME PAGE
    ********************************/
    .home_box .box {
        width: 15em;
        margin: 0 auto 1em auto;
    }
    #stat_img { max-width: 100%; }
    /*******************************
    *    PAGES
    ********************************/
    .page_list.page_list_index li a { margin: 0; }
    .page_list li div.is_static a { margin-right: 0; }
    .page_list li a:last-of-type:after,
    .pa_list li a:last-of-type:after {
        content: ' ';
        display: block;
        width: 100%;
        margin-bottom: 1em;
    }
    .page_list li small,
    .pa_list li small, 
    .page_list li small:last-of-type,
    .pa_list li small:last-of-type {
        display: block;
        float: none;
        text-align: left;
        margin-top: 1em;
    }
    .page_list_index li a {
        display: block;
        margin: 0 0 0 3.3em;
    }
    .page_list .page_is_static a {
        margin-right: 0;
    }
    .page_list li a img,
    .pa_list li a img {
        max-height: 1.5em;
        margin-right: 1em;
    }
    .page_list > li li {
        margin-left: .25em;
        margin-right: .25em;
    }
    .page_list a:hover:before,
    .pa_list a:hover:before {
        left: -.3em;
        top: -.5em;
    }
    /*******************************
    *    IMAGES
    ********************************/
    .image-thumb-box > div {
        margin: 0 auto 2.5em auto;
    }
    .image-thumb-box > div a img {
        max-height: 2em;
        margin-right: 1em;
    }
    .image-thumb-box > div > img {
        margin-bottom: 1em;
    }   
    /*******************************
    *    SPECIAL FORMATS
    ********************************/   
    .mobileScroll {
        width: 100%;
        overflow: auto;
    }
    .image_switch {
        display:  block;
    }
    .image_switch a {
        display: block;
        margin-bottom: 1em;
    }
    .image_switch a:not(:first-child) { margin-left: 0; }

}