div.staff-grading,
div.peer-grading{
    border: 1px solid lightgray;
    
    textarea.feedback-area {
        margin: 0;
        height: 75px;
    }

    ul.rubric-list{
        margin: 0;
        padding: 0;
        list-style-type: none;

        li {
            &.rubric-list-item{
                margin-bottom: 0;
                padding: 0;
            }
        }
    }

    h1 {
        margin: 0 0 0 $baseline/2;
    }

    h2 {
        a {
            text-size: .5em;
        }
    }

    div {
        margin: 0;

        &.submission-container{
            @include clearfix;
            overflow-y: auto;
            max-height: 300px;
            height: auto;
            border: 1px solid #ddd;
            background: #f6f6f6;
        }
    }

    label {
        margin: 0;
        padding: 2px;
        min-width: 50px;
        text-size: 1.5em;
    }
    
    /* Toggled State */
    input[type=radio]:checked + label {
        background: #666;
        color: white;
    }

    input[name='score-selection'],
    input[name='grade-selection'] {
        display: none;
    }

    .problem-list {
        width: 100%;
        table-layout: auto;
        text-align: center;
        
        th {
            padding: 2px;
        }
        
        td {
            padding: 2px;
        }
        
        td.problem-name {
            text-align: left;
        }

        .ui-progressbar {
            margin: 0;
            padding: 0;
            height: 1em;
        }
    }

    .prompt-information-container,
    .rubric-wrapper,
    .calibration-feedback-wrapper,
    .grading-container {
        padding: $baseline/2 0;
    }

    .error-container {
        margin-left: 0;
        padding: 2px;
        background-color: #ffcccc;
    }
    
    .submission-wrapper {
        padding: 2px;
        padding-bottom: 15px;
        
        h3 {
            margin-bottom: 2px;
        }

        p {
            margin-left: 2px;
        }
    }
    .meta-info-wrapper {
        padding:2px;
        background-color: #eee;
        
        div {
            display: inline;
        }
    }
    .message-container,
    .grading-message {
        margin-left: 0;
        padding: 2px;
        background-color: $yellow;
    }
    
    .breadcrumbs {
        margin: $baseline/2 $baseline/4;
        font-size: .8em;
    }

    .instructions-panel {
        @include clearfix;
        padding: $baseline/2;
        background-color: #eee;
        font-size: .8em;
        
        > div {
            margin-bottom: 5px;
            padding: $baseline/2;
            width: 49%;
            background: #eee;

            h3 {
                color: #777;
                text-align: center;
                text-transform: uppercase;
            }
            
            p{
                color: #777;
            }
        }
        .calibration-panel {
            display: inline-block;
            width: 20%;
            border-radius: 3px;
        }

        .grading-panel {
            display: inline-block;
            width: 20%;
            border-radius: 3px;
        }
        .current-state {
            background: #fff;
            
        }
    }

    .collapsible {
        margin-left: 0;

        header {
            margin-top: 2px;
            margin-bottom: 2px;
            font-size: 1.2em;
        }
    }
    
    .interstitial-page {
        text-align: center;

        input[type=button] {
            margin-top: $baseline;
        }
    }
}

div.peer-grading {
    border-radius: $baseline/2;
    padding: 0;

    .peer-grading-tools {
        padding: $baseline;
    }

    .error-container {
        margin: $baseline;
        border-radius: $baseline/4;
        padding: $baseline/2;
    }

    .interstitial-page, .calibration -feedback, .calibration-interstitial-page {
        padding: $baseline;
    }

    .prompt-wrapper {
        padding: $baseline;
    }

    .grading-wrapper {
        padding: $baseline;
    }
}

div.staff-grading {
    padding: $baseline;
}

