/* Formulars and data-lists */

/**
 * This are basic styles for forms and lists, that using ul-lists for their design
 * To create such a formular, use following example-code:
 *
 * <ul class="form">
 *     <li>
 *         <label class="spacing" for="element_1">Label for E1</label>
 *         <input type="text" name="element_1" id="element_1" />
 *     </li>
 *     <li>
 *         <label class="spacing" for="element_2">Label for E2</label>
 *         <select name="element_2" id="element_2">
 *             <option value="1">option 1</option>
 *             <option value="2">option 2</option>
 *         </select>
 *     </li>
 * </ul>
 *
 * And so on
 */
  
ul.form, ul.data-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.form li, ul.data-list li {
    padding: 0.2em;
    margin: 0;
}
ul.form li label.spacing, ul.data-list li .label {
    display: inline-block;
    line-height: 1.0em;
    vertical-align: top;
    float: none;
    
    padding-right: 25px;
    text-align: right;
    width: 110px;
}
ul.data-list li .label {
    float: left;
}
ul.data-list li .data {
    margin-left: 135px;
}
ul.data-list li .data p:first-child {
    display: inline;
}
label em, .necessary_field {
    font-weight: bold;
    color: red;
}
/* End formulars and data-lists */