/* http://10k.aneventapart.com/Uploads/97/#87a7c7 */
@borderColor : #5F8AB4  ;
h1,h2,h3{
    padding: 0px;
    margin:  0px;
}
ul,li{
    list-style: none;
    padding: 0px;
    margin:  0px;
}
.border-box{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.box-shadow( @default: 4px 4px 4px #CCC ){
    -webkit-box-shadow: @default;
    -moz-box-shadow: @default;
    box-shadow: @default;
}
.border-radius( @default: 2px ){
    -webkit-border-radius: @default;
    -moz-border-radius: @default;
    border-radius: @default;
}
.tab{
    padding-left: 16px
}
.desc{
    font-size: 80%;
    font-style: italic;
}


#overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 30px;
    .border-box;
    background: rgba( 0, 0, 0, 0.4 );


    #overlay-content{
        border: 1px solid @borderColor;
        .border-radius(5px);
        padding: 10px;
        background: #EEF2F7;
        .box-shadow( 0px 0px 10px #333,inset 0px 0px 10px  #333 );
    }
    #overlay-close{
        position: absolute;
        right: 50px;
        top: 40px;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
    }
}


body {
    padding: 0px;
    margin: 0px;
    font-size: 16px;
    line-height: 1.7em;
    height: 100%;
    background: #EEF2F7;
    font-family: 'Droid Sans', serif;
    a {
        text-decoration: none;
    }
    .error-message{
        color: red;
        font-weight: bold;
        text-shadow: 0px 2px 2px #555;
        font-size: 120%;
    }


    > header{
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3A5C7D), to(#3A5C7D), color-stop(.6,#3F6388));
        background: -moz-linear-gradient(19% 75% 90deg,#3A5C7D, #3F6388, #3A5C7D 100%);
        .box-shadow(0px 0px 8px #2C455E);
        padding: 1em 1em;
        border-bottom: 1px solid @borderColor;

        color: #EEF2F7;
        text-shadow: 2px 4px 4px #1A2938;


        .logo{
            font-size: 48px;
            font-family: 'Cabin Sketch', serif;

            a{
                color: #EEF2F7;
            }
        }
        ul{
            margin-left: 1em;
            display: inline-block;
            font-size: 24px;
            font-weight: bold;

            a{
                color: #EEF2F7;
            }
            a:hover{
                color: #AFC4DA;
                text-shadow: 2px 4px 4px #0B1218;
            }
        }
    }
    > section {
        section-height: 25px;
        padding:  0.5em;
        display: table;
        width: 1100px;
        margin: auto;
        border: 1px solid @borderColor;
        border-top: none;
        background:#F8FAFC;

        > aside{
            border: 1px solid @borderColor;
            padding:  8px;
            display: table-cell;
            width: 250px;

            h2{
                margin: 4px 0px 6px 0px;
            }
            li {
                padding-left: 15px;
            }
        }
        > article{
            display: table-cell;
            width: 850px;
            vertical-align: top;
            padding: 0px 8px;
            form {
                padding:  8px;
                border: 1px solid @borderColor;
            }
            .box{
                padding:  8px;
                border: 1px solid @borderColor;
                min-width: 200px;
                min-height: 200px;
            }

        }

        .content-provider-block{
            display: table;

            #new-table{
                font-size: 70%;
                font-weight: normal;
            }

            #new-column{
                font-size: 70%;
                font-weight: normal;
                display: none;
            }

            .pillar{
                display: table-cell;
                vertical-align: top;
                border: 1px solid @borderColor;
                border-left:  none;
                min-width: 400px;

                h3{
                    padding: 8px;
                }
            }
            .pillar:first-child{
                border-left: 1px solid @borderColor;
            }

            .tables-row,.column-row{
                border-top: 1px solid @borderColor;
                padding:4px 8px;

                .remove-link{
                    float:right;
                    font-size: 80%;
                }
            }
            .tables-row{
                cursor: pointer;
            }
            .tables-row:last-child,.column-row:last-child{
                border-bottom: 1px solid @borderColor;
                margin-bottom: 5px;
            }
            .tables-row-selected{
                background: #B9CCDF;
            }

            #content-provider-table-name,#content-provider-columns-name{
                padding: 8px;
                border-top: 1px solid @borderColor;
            }
        }
    }
    > footer {
        text-align: center;
        font-size: 80%;
    }
}

body * {
    .border-box;
}



/** Forms **/
    form {
        clear: both;
        padding: 0;
        width: 100%;
    }
    fieldset {
        border: 1px solid #ccc;
        margin-bottom: 1em;
        padding: 16px 20px;
    }
    fieldset legend {
        background:#fff;
        color: #e32;
        font-size: 160%;
        font-weight: bold;
    }
    fieldset fieldset {
        margin-top: 0px;
        margin-bottom: 20px;
        padding: 16px 10px;
    }
    fieldset fieldset legend {
        font-size: 120%;
        font-weight: normal;
    }
    fieldset fieldset div {
        clear: left;
        margin: 0 20px;
    }
    form  {
        > div{
            clear: both;
            margin-bottom: 1em;
            padding: .5em;
            vertical-align: text-top;
        }
    }
    form .input {
        color: #444;
    }
    form .required {
        font-weight: bold;
    }
    form .required label:after {
        color: #e32;
        content: '*';
        display:inline;
    }
    form div.submit {
        border: 0;
        clear: both;
        margin-top: 10px;
        text-align: right;
    }
    label {
        display: block;
        font-size: 110%;
        margin-bottom:3px;
    }
    input, textarea {
        clear: both;
        font-size: 120%;
        font-family: "frutiger linotype", "lucida grande", "verdana", sans-serif;
        padding: 8px;
        width:98%;
    }
    select {
        clear: both;
        font-size: 120%;
        vertical-align: text-bottom;
    }
    select[multiple=multiple] {
        width: 100%;
    }
    option {
        font-size: 120%;
        padding: 0 3px;
    }
    input[type=checkbox] {
        clear: left;
        float: left;
        margin: 0px 6px 7px 2px;
        width: auto;
    }
    div.checkbox label {
        display: inline;
    }
    input[type=radio] {
        float:left;
        width:auto;
        margin: 0 3px 7px 0;
    }
    div.radio label {
        margin: 0 0 6px 20px;
    }
    input[type=submit] {
        display: inline;
        font-size: 110%;
        width: auto;
    }
    form .submit input[type=submit] {
        background:#62af56;
        background: -webkit-gradient(linear, left top, left bottom, from(#a8ea9c), to(#62af56));
        background-image: -moz-linear-gradient(top, #a8ea9c, #62af56);
        border-color: #2d6324;
        color: #000;
        text-shadow: #8cee7c 0px 1px 0px;
    }
    form .submit input[type=submit]:hover {
        background:#4ca83d;
        background: -webkit-gradient(linear, left top, left bottom, from(#85e573), to(#4ca83d));
        background-image: -moz-linear-gradient(top, #85e573, #4ca83d);
    }



/** Android **/
    .Android-AlertDialog{
        background: rgba( 0, 0, 0, 0.7);
        color: #FFF;
        border: 1px white solid;
        .border-radius(3px);
        .title{
            padding:  8px;
            border-bottom: 1px #616161 solid;
        }
        .message{
            padding:  8px
        }
        .actionLayout{
            .border-box;
            width: 100%;
            background: #808080;
            padding: 4px;

            .Android-Button {
                display: inline-block;
                border: 1px solid #444;
                margin-right:  1px;
                text-align: center;
                min-width: 30%;
                background: #cccccc;
                color: black;
            }
            .Android-Button:last-child{
                margin-right: 0px;
            }
        }
    }