/**
 * This file provides styles for the media manager popup
 * (mediamanager.php).
 */

/*____________ structure ____________*/

html.popup {
    overflow: auto;
}

#media__manager {
    height: 100%;
    overflow: hidden;
}

#mediamgr__aside {
    width: 30%;
    height: 100%;
    overflow: auto;
    position: absolute;
    left: 0;
    border-right: 1px solid var(--border, #ccc);
}
[dir=rtl] #mediamgr__aside {
    left: auto;
    right: 0;
    border-right-width: 0;
    border-left: 1px solid var(--border, #ccc);
}
#mediamgr__aside .pad {
    padding: .5em;
}

#mediamgr__content {
    width: 69.7%;
    height: 100%;
    overflow: auto;
    position: absolute;
    right: 0;
}
[dir=rtl] #mediamgr__content {
    right: auto;
    left: 0;
}
#mediamgr__content .pad {
    padding: .5em;
}

#media__manager h1,
#media__manager h2 {
    font-size: 1.5em;
    margin-bottom: .5em;
    padding-bottom: .2em;
    border-bottom: 1px solid var(--border, #ccc);
}

/* left side
********************************************************************/

/*____________ options ____________*/

#media__opts {
    margin-bottom: .5em;
}

#media__opts input {
    margin-right: .3em;
}
[dir=rtl] #media__opts input {
    margin-right: 0;
    margin-left: .3em;
}
#media__opts label {
}

/*____________ tree ____________*/

#media__tree ul {
    padding-left: .2em;
}
[dir=rtl] #media__tree ul {
    padding-left: 0;
    padding-right: .2em;
}
#media__tree ul li {
    clear: left;
    list-style-type: none;
    list-style-image: none;
    margin-left: 0;
}
[dir=rtl] #media__tree ul li {
    clear: right;
    margin-right: 0;
}
#media__tree ul li img {
    float: left;
    padding: .5em .3em 0 0;
}
[dir=rtl] #media__tree ul li img {
    float: right;
    padding: .5em 0 0 .3em;
}
#media__tree ul li div.li {
    display: inline;
}
#media__tree ul li li {
    margin-left: 1.5em;
}
[dir=rtl] #media__tree ul li li {
    margin-left: 0;
    margin-right: 1.5em;
}

/* right side
********************************************************************/

/*____________ upload form ____________*/

/* upload info */
#media__content div.upload {
    font-size: .9em;
    margin-bottom: .5em;
}

#mediamanager__uploader {
    margin-bottom: 1em;
}
#mediamanager__uploader p {
    margin-bottom: .5em;
}

/*____________ file list ____________*/

#media__content img.load {
    margin: 1em auto;
}

#media__content .odd,
#media__content .even {
    padding: .5em;
}
#media__content .odd {
    background-color: var(--background_alt, #eee);
}
#media__content .even {
}
/* highlight newly uploaded or edited file */
#media__content #scroll__here {
    border: 1px dashed var(--border, #ccc);
}

/* link which inserts media file */
#media__content a.mediafile {
    margin-right: 1.5em;
    font-weight: bold;
    cursor: pointer;
}
[dir=rtl] #media__content a.mediafile {
    margin-right: 0;
    margin-left: 1.5em;
}
#media__content span.info {
}
#media__content img.btn {
    vertical-align: text-bottom;
}

/* info how to insert media, if JS disabled */
#media__content div.example {
    color: var(--text_neu, #666);
    margin-left: 1em;
}

#media__content div.detail {
    padding: .2em 0;
}
#media__content div.detail div.thumb {
    float: left;
    margin: 0 .5em 0 18px;
}
[dir=rtl] #media__content div.detail div.thumb {
    float: right;
    margin: 0 18px 0 .5em;
}
#media__content div.detail div.thumb a {
    display: block;
    cursor: pointer;
}
#media__content div.detail p {
    margin-bottom: 0;
}


/*____________ media search ____________*/

#dw__mediasearch {
}
#dw__mediasearch p {
}
#dw__mediasearch label {
}
#dw__mediasearch label span {
}
#dw__mediasearch input.edit {
}
#dw__mediasearch button {
}
