@import "../../../../admin/static/less/styles.less";



/*
    ----------------------------
    Infobox styles
    ----------------------------
*/

.infobox {
    font-size: 13px;
    padding: 10px;
    margin-bottom: 10px;
    
    border-left: 5px solid #e9d295; // dark yellow
    background-color: #faf3d7; // pale yellow
    color: #bf9947; // dark yellow

    ul {
        margin-bottom: 0;
    }

    p { 
        margin: 0;
        margin-top: 15px;
        &:first-child { margin-top: 0; }
        color: #585755;
    }
    pre {
        padding: 4px 10px;
        margin-top: 15px;
        margin-bottom: 0;
        code { font-size: 11px; }
    }
    code {
        color: #387494;
        background-color: transparent;
        border: none;
        padding: none;
        font-weight: bold;
    }

    // Different types of infoboxes
    &.infobox-success {
        border-left-color: #99CC99;
        color: #69925c;
        background: #ECF4E6;
    }
    &.infobox-info {
        border-left-color: #9FCADF;
        color: #3A87AD;
        background: #ecf2f7;
        a {
            border-bottom: thin dotted #3A87AD;
            &:hover {
                border-bottom: thin solid #3A87AD;
                text-decoration: none;
            }
        }
    }
    &.infobox-alert {
    }
    &.infobox-error {
        border-left-color: #e59c9c;
        background-color: #f1d5d5;
        color: #d95b5b; // text color + color overlay
    }

    // Positioning for infobox
    &.infobox-right {
        float: right;
        width: 300px;
        margin-left: 30px;
        margin-bottom: 30px;
        margin-top: 9px;
    }
    &.infobox-slim {
        padding-top: 6px;
        padding-bottom: 6px;
        margin: 0;
    }
    &.infobox-padded { margin-top: 20px; }
}

// -------------------------------------------------

#main-container .section h2.title {
    color: #61666e;
    border-bottom: thin solid #ededed;
    padding-bottom: 15px;
}

hr {
    border: none;
    height: 1px;
    background-color: #dedede;
    .box-shadow(~"0 1px 0 rgba(255,255,255,.8)"); // drop shadow
    margin: 15px 0;
}

button.btn { margin-left: 0; }

.step-content {
    margin-right: 275px;
    border-right: thin solid #ececec;
    padding-right: 30px;
    &.step-two form {
         margin-bottom: 35px;
    }
}

.steps {
    float: right;
    width: 250px;
    p {
        font-size: 14px;
        line-height: 16px;
        &:first-child { margin-top: 0; }
        &:before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            position: relative;
            margin-right: 9px;
            top: 3px;
        }
        &.step-one:before { background: url('/assets/step-one.png'); }
        &.step-two:before { background: url('/assets/step-two.png'); }
        &.step-three:before { background: url('/assets/step-three.png'); }
        &.complete:before { background: url('/assets/checkmark.png'); }
    }
}

#waiting { 
    font-size: 20px;
    line-height: 50px;
    &:before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        position: relative;
        margin-right: 11px;
        top: 1px;
        background: url('/assets/ajax-loader.gif');
    }
}

.section { .clearfix() }
