/**
 *  Dialog System 
 */

#ds-main {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1000;
    display: none;
}
    #ds-main #ds-overlay {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    
    #ds-main #ds-body
    {
        padding: 1.5em 2em;
        background-color: white;
        color: black;
        width: 80%;
        margin: 0 auto;
        overflow: hidden;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        display:none;

        /* multiple tiers */
        position:absolute;

        /* experiment */
        border: 1px solid #5a5a5a;
        -webkit-box-shadow: 0px 0px 2px #5a5a5a;
        -moz-box-shadow: 0px 0px 2px #5a5a5a;
        box-shadow: 0px 0px 2px #5a5a5a;
    }

    #ds-main #ds-header {
        position: relative;
        height: 35px;
    }

        #ds-main #ds-header h2 {
            margin: 0;
            margin-bottom: 10px;
        }

        #ds-main #ds-header .close {
            display: block;
            background-image: url(/Resources/Images/mx.sprite.png);
            background-repeat: no-repeat;
            position: absolute;
            top: 0;
            right: 0;
            width: 18px;
            height: 18px;
            background-position: 0 -327px;
            text-indent: -9999px;
        }

    #ds-main #ds-navigation {
        height: 38px;
        background-color: white;
        display:none;
    }

       #ds-main #ds-navigation .ds-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            #ds-main #ds-navigation .ds-list .first {
                padding-left: 24px !important;
            }

        #ds-main #ds-navigation .ds-list li {
            margin: 0;
            float: left;
            color: #a0a0a0;
            padding-top: 0.75em;
            padding-bottom: 0.75em;
        }

            #ds-main #ds-navigation .ds-list li a {
                color: #808080;
                text-decoration: none;
                cursor:default;/*disabled momentarily*/
            }

            #ds-main #ds-navigation .ds-list li .divider {
                color: #CCC;
                padding: 0 5px;
            }

        #ds-main #ds-navigation .ds-list li.clickable a {
            cursor: pointer;
        }

    #ds-main .loader {
        /*padding: 1.5em 2em;*/
        padding: 1.4em 1em;
        background-color: white;
        color: black;
        width: 200px;
        margin: 0 auto;
        overflow: auto;
        text-align: center;
        display: none;
        /*font-size: 2em;*/
        font-size: 1.4em;
        z-index:20;

        /* center */
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

        /* experiment */
        border: 1px solid #5a5a5a;
        -webkit-box-shadow: 0px 0px 2px #5a5a5a;
        -moz-box-shadow: 0px 0px 2px #5a5a5a;
        box-shadow: 0px 0px 2px #5a5a5a;
    }

        #ds-main .loader img {
            display: block;
            width: 31px;
            margin: 0 auto 1em;
        }