styles.css

.que.patternessay .answer {
    padding: 0.3em;
    width: auto;
    display: inline;
}
.que.patternessay .qtext textarea,
.que.patternessay .ablock textarea {
    max-width: 100%;
}

/* Editing form. Style repeated elements*/
#page-question-type-patternessay .mform .textareamonospace {
    white-space: pre;
    font-family: Andale Mono, Monaco, Courier New, DejaVu Sans Mono, monospace;
}

/* Top */
body#page-question-type-patternessay #id_answerhdr div.fitem.femptylabel,
body#page-question-type-patternessay #fitem_id_addanswers + .fitem {
    background: #eee;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 5px;
    padding-top: 5px;
    border: 1px solid #bbb;
    border-bottom: 0;
}

body#page-question-type-patternessay div[id^=fitem_id_][id*=_answer_] .fitemtitle,
body#page-question-type-patternessay div.fitem.fitem_accuracy .fitemtitle,
body#page-question-type-patternessay #fitem_id_addanswers + .fitem .fitemtitle {
    font-weight: bold;
}
body#page-question-type-patternessay #region-main div.fitem.femptylabel {
    padding: 0;
}
body#page-question-type-patternessay #region-main div.fitem.femptylabel .fitemtitle {
    padding: 0;
    margin: 0;
}
body#page-question-type-patternessay #region-main div.fitem.femptylabel .fstatic {
    margin: 0;
}
body#page-question-type-patternessay #region-main #fgroup_id_updatebuttonar {
    background: none;
    border: none;
}

/* Middle */
body#page-question-type-patternessay div[id^=fitem_id_][id*=answer_],
body#page-question-type-patternessay div[id^=fitem_id_][id*=fraction_],
body#page-question-type-patternessay div.fitem.fitem_matchedresponses,
body#page-question-type-patternessay div.fitem.fitem_accuracy,
body#page-question-type-patternessay div.fitem.rcw,
body#page-question-type-patternessay div.fitem.try-rule,
body#page-question-type-patternessay #fitem_id_addanswers + .fitem + .fitem {
    background: #eee;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 5px;
    padding-top: 5px;
    border: 1px solid #bbb;
    border-top: 0;
    border-bottom: 0;
}

/* Bottom */
body#page-question-type-patternessay div[id^=fitem_id_][id*=feedback_],
body#page-question-type-patternessay div[id^=fitem_id_][id*=otherfeedback] {
    background: #eee;
    margin-bottom: 2em;
    margin-top: 0;
    padding-bottom: 5px;
    padding-top: 5px;
    border: 1px solid #bbb;
    border-top: 0;
}
body#page-question-type-patternessay #fitem_id_addanswers {
    margin-bottom: 2em;
}

/* Styles for the question-testing interface. */
.qtype_patternessay-selftest-missed-negative {
    font-weight: bold;
    color: #f00;
}

.qtype_patternessay-selftest-null {
    font-weight: bold;
    color: #b38686;
}

.qtype_patternessay-selftest-missed-positive {
    font-weight: bold;
    color: #00f;
}

body.pagelayout-embedded .que.patternessay .formulation .questiontestslink {
    display: none;
}

.que.patternessay .formulation .questiontestslink {
    float: right;
    font-size: 0.7em;
}
#page-question-type-patternessay .rcw input[type=submit] {
    margin: 0 0 10px 5px;
}
#page-question-type-patternessay .rc-hidden {
    display: none;
}
/* The missing style for the successful progress bar colour.
  This is due to theme/base/style/core.css not having this rule (though it has
  .progress-stripped etc.) Note theme/bootstrapbase/ has the full css, but our
  themes (ou, osep) are not based on it. */
body#page-question-type-patternessay-testquestion .progress-success .bar,
body#page-question-type-patternessay-testquestion .progress .bar-success {
    background-color: #5eb95e;
    background-image: linear-gradient(to bottom, #62c462, #57a957);
    background-repeat: repeat-x;
}

/* Align reset table preferences button */
body#page-question-type-patternessay-testquestion .resettable {
    text-align: left;
}

#page-question-type-patternessay-testquestion #attemptsform .error {
    display: block;
}

#page-question-type-patternessay-testquestion #attemptsform table input,
#page-question-type-patternessay-testquestion #attemptsform #commands input[type=submit] {
    margin-bottom: 3px;
}

#page-question-type-patternessay-testquestion #attemptsform table .section-input {
    margin-top: 7px;
}

#page-question-type-patternessay-testquestion #attemptsform table .section-checkbox {
    margin-top: 13px;
}

#page-question-type-patternessay-testquestion #attemptsform table .section-checkbox input[type=checkbox] {
    margin-top: 1px;
}

#page-question-type-patternessay-testquestion #attemptsform table .section-input .new-response {
    width: 300px;
}

#page-question-type-patternessay-testquestion #attemptsform table .section-input,
#page-question-type-patternessay-testquestion #attemptsform table .section-button {
    display: inline-block;
}

#page-question-type-patternessay-testquestion #attemptsform table .generaterow td {
    vertical-align: top;
}

@media screen and (max-width: 768px) {
    #page-question-type-patternessay-testquestion #attemptsform table .section-input,
    #page-question-type-patternessay-testquestion #attemptsform table .section-button {
        display: block;
    }

    #page-question-type-patternessay-testquestion #attemptsform table input[type=text] {
        width: 100%;
    }
}

#page-question-type-patternessay-testquestion #newresponsebutton {
    margin-top: 20px;
}

/* Fix for The Exemplar table is broken when table is empty because min-height is set to 10em by MDL-62884 */
#page-question-type-patternessay-testquestion .no-overflow > .generaltable {
    min-height: 40px;
}