@import url("base.less");
@gradientStart:rgba(175, 175, 175, 1);
@gradientEnd:rgb(245, 245, 245,1);
html{
    height:100%;
    width:100%;
    background:whitesmoke
}
body {
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
    background: -moz-linear-gradient(top, @gradientStart 0%,  @gradientEnd 100%); /* FF3.6+ */
//    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(125, 126, 125, 1)), color-stop(100%, rgba(14, 14, 14, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, @gradientStart 0%, @gradientEnd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @gradientStart 0%, @gradientEnd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, @gradientStart 0%, @gradientEnd 100%); /* IE10+ */
    background: linear-gradient(top, @gradientStart 0%, @gradientEnd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#aeaeae', endColorstr = '#f5f5f5', GradientType = 0); /* IE6-9 */
    font-size: 100%;
    font-family: @font-family;

    .dijitDialog, .dijitDialog table {
        font-size: 92%;
    }
    .dijitButton{
        font-size: 0.8em;
    }
    .dojoxGrid {
        font-size: 0.85em !important;
        width: 100%;
    }
    .dijitToolbar{
        height: 30px;
        padding: 5px 0 0 3px;
    }
    #header{
        width:100%;
        height:40px;

        .dijitButtonNode {
            background: transparent;
            border: 0;
        }
        #startButton{
            width: 32px;
            height: 32px;
            margin:3px 0 0 10px;
            float: left;
        }
        #user{
            margin: 9px 0 0 5px;
            float: left;
        }
    }

    .form-control {
        margin: .75em 0;
        label {
            width: 75px;
            float: left;
            text-align: right;
            margin-right: 1em;
        }
    }

    .details {
        table {
            font-size: 1em;
        }
        td, th {
            text-align: left;
            padding: 0 10px 0 0;
            margin: 0;
            vertical-align: top;
            font-weight: normal;
        }
        .title th {
            vertical-align: middle;
        }
        .title td {
            font-size: 150%;
        }
        ul {
            list-style: none;
            margin: 0 0 10px 0;
            padding: 0;
        }
        .actions button {
            margin-top: 15px;
        }
    }
    #content{
        min-height: 600px;
    /*background: rgb(125, 126, 125); *//* Old browsers */
        max-width:@block-width * 4 + (@gutter * 8);
        margin-left: auto;
        margin-right: auto;
        min-width: @block-width * 2 + @gutter * 4;

        #splash{//overlay while loading
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:#eeeeee;
            z-index:999;
        }
        #status {
            position: absolute;
            bottom: 10px;
            right: 10px;
            color: #777;
        }


    // an area to embed inline app screens
        #inlineAppArea {
            position: relative;
            overflow: visible;
            margin: 0;
            padding: 0;
            display: none;
            min-height: 400px;
            width: 100%;
            background:#eeeeee;
            border:3px solid @lightGreyBase;
            .border-radius-custom(0px, 20px, 0px, 0px);



            #inlineApp {
                height: @inlineAppHeight;

                .inline-app{
                    opacity: 0;
                    color:@darkGreyBase;
                }

                h1,h2,h3{
                    color:@blueBase;
                }
            }

            #inlineClose {
                position: absolute;
                top: -16px;
                right: -16px;
                cursor: pointer;
                z-index: 100;
            }

            #inlineAppTitle {
                background: #6D6E70;
                color: #efefef;
                padding: 3px 0 5px 3px;
                text-align: center;
            }
        }

    //the list of installed (displayed) apps in the dashboard
        #appList {
            margin: 0 0 100px 0;
            padding:0;
            display:inline-block;

            li {
                list-style-type: none;
                float: left;
                position: relative;
                width: @block-width;
                height: 150px;
                margin: @gutter;
                font-size: 1em;
                border-radius: 5px;
                color: #353535;

                button {
                    margin:0;
                    padding: 0;
                    color: #777777;
                    border:none;
                    width: @block-width;
                    height:@block-height;
                    background:transparent;
                }
                > button:focus{
                    border:solid 3px #4682b4;
                    border-radius: 5px;
                }
                .actions {
                    position: absolute;
                    right: 0;
                    top: 0;
                    display: none;
                    padding: 4px;
                    background: #c0c0c0;
                    opacity: 0.5;
                }
                .actions button {
                    width: inherit;
                    height: inherit;
                    background: transparent;
                }
                a {
                    width: @block-width - 20;
                }
                h3 {
                    width: 100%;
                    font-size: 1.1em;
                    font-weight: normal;
                    color:#777777;
                    display: block;
                    margin-top: 6px;
                }
                button:hover h3{
                    color:black;
                }
                button img {
                    margin: auto 0 auto 0;
                    padding: 0 10px;
                    max-width: @block-width - 20;
                    max-height: @block-width - 50;
                }
                .configure {
                    position: absolute;
                    top: 4px;
                    right: 4px;
                    background:transparent;
                }
            }

            .appGroup{
                width: auto;
                height: auto !important;
            /*border: thin solid #888888;*/
                margin:0;

            //todo: jt: use same colors for different browsers - use less!
            /*background: -moz-linear-gradient(top, #CCCCCC 0%,  rgb(238, 238, 238) 100%); *//* FF3.6+ */
            /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(125, 126, 125, 1)), color-stop(100%, rgba(14, 14, 14, 1))); *//* Chrome,Safari4+ */
            /*background: -webkit-linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 100%); *//* Chrome10+,Safari5.1+ */
            /*background: -o-linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 100%); *//* Opera 11.10+ */
            /*background: -ms-linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 100%); *//* IE10+ */
            /*background: linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 100%); *//* W3C */
            /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#7d7e7d', endColorstr = '#0e0e0e', GradientType = 0); *//* IE6-9 */

            // a subgroup list
                ul{
                    padding: 0;
                }
                ul li{
                    margin: @gutter;
                }
            }
            .appGroupIcon{
                span{
                    color:#4682b4;
                    font-style: italic;
                }
            }
            #exide{
                font-size:5.0em;
                padding-top: 35px;
                text-align: center;
                width: 100%;
                position:relative;
            }
            #existIcon {
                background-color:#cfcfcf;
                #logo {
                    background: url("../images/existdb.png") no-repeat center center;
                    width: @block-width * 2 + @gutter * 2;
                    height: @block-height;
                    opacity: 0.8;
                    box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;


                /* background: #cccccc; */

                }

                #existIconFront{
                    button {
                        cursor: pointer;
                    }
                    button img{
                        margin: 0;
                        opacity: 0.5;
                    }
                    #repoConfigIcon{
                        width: 40px;
                        height: 34px;
                        position: absolute;
                        bottom: 8px;
                        left: 5px;
                        background:transparent;

                        img{
                            width: 36px;
                            height: 36px;
                        }

                    }
                    #addUploadIcons {
                    /*width: 40px;*/
                    /*height: 32px;*/
                        position: absolute;
                        right: 5px;
                        bottom: 8px;
                        display: inline-block;

                        button {
                            cursor: pointer;
                            opacity: 0.5;
                            background:transparent;
                            width: inherit;
                            height: inherit;

                            img {
                                width: 28px;
                                height: 28px;
                            }
                        }
                    }
                }
            }

            #existIconBack {
                display: none;

                .configuration {
                    padding: 10px 15px;

                    input {
                        width: 100%;
                    }
                }
            }
            .backside #logo{
                display: none;
            }
            .backside #existIconBack {
                display: block;
                width: @block-width * 2 + @gutter * 2;
                height: @block-height;
                color:#666666;
                font-size: .8em;
            }
            #existIcon.backside #existIconFront #addUploadIcons{
                display: none;
            }
            .twoColumn{
                width: @block-width * 2 + (@gutter * 2);

                button{
                    width: @block-width * 2 + (@gutter * 2);
                }
            }

        }
    }

    #inlineApp .shutdown {
        padding:20px;

        #shutdown-message {
            color: red;
            font-size: 125%;
        }
    }
}
