/* Standard accessibility stuff (from a list apart) */

form#charm fieldset {
    margin-bottom: 10px;
}

form#charm legend {
    padding: 0 2px;
    font-weight: bold;
}

form#charm label {
    display: inline-block;
    line-height: 1.8;
    vertical-align: top;
}

form#charm fieldset ol {
    margin: 0;
    padding: 0;
}

form#charm fieldset li {
    list-style: none;
    padding: 5px;
    margin: 0;
}

/*form#charm fieldset fieldset {
    border: none;
    margin: 3px 0 0;
}

form#charm fieldset fieldset legend {
    padding: 0 0 5px;
    font-weight: normal;
}

form#charm fieldset fieldset label {
    display: block;
    width: auto;
}*/

form#charm em {
    font-weight: bold;
    font-style: normal;
    color: #f00;
}

form#charm label  {
    width: 150px;
    white-space: nowrap;
}

/*form#charm fieldset fieldset label {
    margin-left: 153px;
}*/

/* Normal styling */

body {
    font-family: sans-serif;
    font-size: 8pt;
}

form#charm {
    width: 600px;
    margin: auto;
    font-size: 1.1em;
}

form#charm fieldset {
    border: none;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

ol#costs ol ol {
    padding-left: 5px;
}

ol#costs ol ol li, ol#keywords li, ol#durations li {
    display: inline-block;
    padding: 2px;
}

ol#costs ol ol label {
    width: 180px;
}

ol#keywords label, ol#durations label {
    width: 130px;
}

input[type='checkbox'], input[type='radio'] {
    float: left;
}

.active:before {
    content: "▾ ";
}

.inactive:before {
    content: "▸ ";
}

.active a, .inactive a, #add_cost, .remove_cost, .add a, .remove_prereq, .remove_incompat {
    text-decoration: none;
    color: inherit;
    font-style: italic;
}

#add_cost {
    line-height: 1.8;
}

.remove {
    float: right;
    line-height: 1.8;
}

form#charm fieldset label.active + div + ol > li, form#charm fieldset label.active + ol > li {
    padding-left: 10px;
}

.active + div + ol > li, .active + ol > li {
    padding-left: 10px;
}

form#charm fieldset #prereqs li, form#charm fieldset #incompats li {
    list-style: decimal;
    margin-left: 15px;
}

form#charm fieldset #prereqs li.add, form#charm fieldset #incompats li.add {
    list-style: none;
}

form#charm #submit {
    width: 60px;
    margin: auto;
}

label.error {
    color: #f00;
    font-weight: bold;
    padding-left: 5px;
}

form#charm label label.error {
    display: inline;
}

form#charm fieldset li ol li {
    padding: 5px 0 0 5px;
}

form#charm input[type="text"] {
    width: 150px;
}