kpsul/static/grappelli/css/forms.css

/*  Basic Settings, Fieldsets, Form-Rows
------------------------------------------------------------------------------------------------------ */

form {
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

.row p.help {
    margin: 3px 0 2px 0;
    padding: 0;
}
.row.cells p.help {
    max-width: 278px;
    white-space: normal !important;
}

.row ul.radio-list + p.help, 
.row ul.checkbox-list + p.help {
    margin-top: -3px;
}



/*  Errors
------------------------------------------------------------------------------------------------------ */

.errornote {
    margin-bottom: 7px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: bold;
}
/* little fix to accomodate the top aligned login form .. */
.errornote.login-errors {
    margin-bottom: 0 !important;
    padding: 8px 12px;
}
ul.errorlist {
    margin: 6px 0 -3px;
    font-size: 11px;
    line-height: 13px;
    font-weight: bold;
}
ul.errorlist li {
    padding: 0 5px 0 0;
}
p.errornote + ul.errorlist {
    margin-bottom: 8px;
}
ul.errorlist:empty {
    display: none;
    margin: 0;
}
.group.tabular ul.errorlist {
    margin-left: 11px;
}
.group.stacked ul.errorlist {
    margin-left: 11px;
    margin-bottom: 5px;
}
.group.stacked h3 + * + ul.errorlist {
    margin: 0 !important;
    padding: 5px 11px;
}
.cell ul.errorlist {
    padding-left: 0;
}
.cell ul.errorlist li {
    padding-left: 0;
}
.cell label + * + ul.errorlist, 
.cell label + * + * + ul.errorlist {
    padding-left: 160px !important;
}
table ul.errorlist {
    margin: -9px 0 6px;
}
.group.stacked .row ul.errorlist, 
.module.table ul.errorlist {
    margin-top: 5px;
    margin-left: 0;
    margin-bottom: -3px;
}
ul.radiolist.inline + ul.errorlist, 
ul.radiolist.inline + * + ul.errorlist {
    position: relative; clear: both;
}
ul.radiolist + ul.errorlist, 
ul.radiolist + * + ul.errorlist {
    margin-top: 0 !important;
}

.module.table .tbody>ul.errorlist {
    margin-top: 2px;
    margin-left: 11px;
    margin-bottom: 2px;
}
.module.table .tr ul.errorlist {
    margin-left: 0;
}
.module.table ul.radiolist + ul.errorlist, 
.module.table ul.radiolist + * + ul.errorlist {
    margin: -2px 0 0;
}
table ul.errorlist li, 
.module.table ul.errorlist li {
    padding-left: 0;
}
p.errornote + ul.errorlist li {
    padding-left: 10px;
}



/*  Labels & Other Typographic Elements in Forms
------------------------------------------------------------------------------------------------------ */

label {
    margin: 5px 0 -5px;
    font-size: 11px;
    line-height: 15px;
    cursor: pointer;
}
.required label, label.required, 
.row .required label, .row label.required {
    font-weight: bold;
}

.module label {
    display: block;
    padding: 0 0 6px;
    white-space: normal;
}
.module .vCheckboxLabel {
    display: inline;
    float: none;
    clear: both;
    margin: 0 0 0 10px;
    padding: 0;
}



/*  Form Elements
------------------------------------------------------------------------------------------------------ */

input, textarea, select, button {
    margin: 0;
    vertical-align: top;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}


/*  Text, Password ................................................... */

input[type=text], input[type=password] {
    padding: 5px 5px 4px;
    height: 25px;
}
/*  Webkit browser hack: apply same horizontal padding as in moz browsers
    Moz Browsers have a default horizontal padding of 3px in input[type=submit] */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type=text], input[type=password] {
        line-height: 13px !important;
    }
}


/*  Searchbar ................................................... */

form#changelist-search {
    position: relative;
    float: left;
    clear: both;
}
input#searchbar {
    position: relative;
    float: left;
    padding-left: 8px;
    padding-right: 30px;
    width: 218px;
    height: 26px;
    font-size: 11px;
}


/*  FileBrowseField ................................................... */

input.vFileBrowseField {
    padding-right: 25px;
}


/*  File ................................................... */

input[type=file] {
    position: relative;
    top: 1px;
    height: auto;
    border: 0;
}
.th input[type=file], 
.td input[type=file] {
    top: 3px;
    margin-bottom: -2px;
}

.module p.file-upload {
    margin-bottom: 5px !important;
    padding: 3px 0 0 !important;
    font-size: 11px;
    line-height: 20px;
/*    font-size: 0;*/
/*    color: transparent;*/
}
.file-upload a {
    font-size: 12px;
    font-weight: bold;
}
.file-upload br {
    display: none;
}
.file-upload .clearable-file-input {
    display: block;
    margin: 0 0 5px;
    padding: 0;
    min-width: 320px;
}
.file-upload .clearable-file-input label {
    display: inline-block;
    float: none;
    margin-bottom: -2px;
    position: relative;
    top: 0;
}
.file-upload .clearable-file-input input {
    top: 5px !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .file-upload .clearable-file-input input {
        top: 7px !important;
    }
}
.file-upload input[type=file] {
    position: relative;
    top: 1px;
    height: auto;
    border: 0;
}


/*  Date & Time ................................................... */

.vDateField, .vTimeField {
    margin-left: 0;
}
p.datetime {
    margin-bottom: 0 !important;
    padding: 0;
}
p.datetime input.vTimeField {
    margin-left: 13px;
}


/*  Textarea ................................................... */

textarea {
    vertical-align: top;
    padding: 3px 5px;
}
fieldset.monospace textarea {
    font-family: "Bitstream Vera Sans Mono",Monaco,"Courier New",Courier,monospace;
}


/*  Select ................................................... */

select {
    padding: 4px 3px 4px 3px;
    height: 25px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {
        padding: 4px 28px 4px 8px;
        -webkit-appearance: textfield;
        background: #fff url('../img/icons/icon-form-select.png') 100% 50% no-repeat;
    }
}
select[multiple=multiple] {
    padding-right: 5px;
    height: 160px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select[multiple=multiple] {
        background-image: none;
    }
}


/*  Checkbox, Radio ................................................... */

input[type=checkbox], input[type=radio] {
    position: relative;
    margin: 0;
}
.row input[type=checkbox], .row input[type=radio] {
    margin-left: 0;
    margin-right: 5px;
}
.th>input[type=radio], 
.th>input[type=checkbox], 
.td>input[type=radio], 
.td>input[type=checkbox] {
    top: 5px;
    margin-bottom: -3px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .th>input[type=radio], 
    .td>input[type=radio] {
        top: 6px;
        margin-bottom: -2px;
    }
    .th>input[type=checkbox], 
    .td>input[type=checkbox] {
        top: 7px;
        margin-bottom: -2px;
    }
}
.row input[type=radio], 
.th ul.radiolist input[type=radio], 
.td ul.radiolist input[type=radio] {
    top: 0;
}
.row input[type=checkbox], 
.th ul.checkboxlist input[type=checkbox], 
.td ul.checkboxlist input[type=checkbox] {
    top: 2px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .row input[type=radio], 
    .th ul.radiolist input[type=radio], 
    .td ul.radiolist input[type=radio] {
        top: 1px;
    }
    .row input[type=checkbox], 
    .th ul.checkboxlist input[type=checkbox], 
    .td ul.checkboxlist input[type=checkbox] {
        top: 3px;
    }
}
.th input[type=radio], 
.th input[type=checkbox], 
.td input[type=radio], 
.td input[type=checkbox],
ul.radiolist input[type=radio], 
ul.checkboxlist input[type=checkbox] {
    margin-left: 0;
    margin-right: 5px;
}

.row input[type=checkbox] + label {
    position: relative;
    float: none;
    top: 0;
    display: inline-block;
    margin-bottom: -2px;
}

.row ul.checkboxlist input[type=checkbox] {
    top: 0;
    margin: 0 5px 0 0;
}
.row ul.checkboxlist label input[type=checkbox] {
    top: -2px;
    vertical-align: middle;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .row ul.checkboxlist label input[type=checkbox] {
        top: -1px;
        vertical-align: middle;
    }
}

.row label + input + p.help input[type=checkbox] {
    position: relative;
    top: -2px;
    margin: 0 3px 0 0;
}

ul.tools .delete-handler-container input[type=checkbox], 
ul.tools .remove-handler-container input[type=checkbox] {
    display: none !important;
}


/*  Radiolists & Checkboxlists ................................................... */

ul.radiolist, ul.checkboxlist {
    position: relative;
    float: none;
    display: inline-block;
    margin: 5px 0;
    padding: 0;
    font-size: 11px;
    line-height: 15px;
    font-weight: normal;
}

.row>ul.radiolist, .row>ul.checkboxlist {
    margin: 0;
}

ul.radiolist li + li, ul.checkboxlist li + li {
    margin-top: 2px;
}

ul.radiolist.inline, ul.checkboxlist.inline {
    float: left;
    display: inline;
    margin-top: 5px;
    margin-bottom: 3px;
    padding-right: 20px;
}
th ul.radiolist.inline, th ul.checkboxlist.inline, 
td ul.radiolist.inline, td ul.checkboxlist.inline {
    margin-top: 0;
}
ul.radiolist.inline li, ul.checkboxlist.inline li {
    float: left;
    display: inline;
    margin-top: 0 !important;
    margin-bottom: 2px;
    padding-right: 20px;
}
.module.tbody ul.radiolist.inline, .module.tbody ul.checkboxlist.inline {
    display: inline;
    white-space: normal;
}
.module.tbody ul.radiolist.inline li, .module.tbody ul.checkboxlist.inline li {
    position: relative;
    float: left;
    display: inline;
}
.row.cells ul.radiolist.inline li, .row.cells ul.checkboxlist.inline li {
    float: none;
}

ul.radiolist label, ul.checkboxlist label {
    float: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: auto !important;
    white-space: nowrap;
}


/*  Changelist Form Fields ................................................... */

#changelist table input[type=text], 
#changelist table input[type=password], 
#changelist table input[type=file], 
#changelist table select, 
#changelist table textarea {
    position: relative;
    top: -5px;
    margin-bottom: -9px;
    vertical-align: top;
}
#changelist table input[type=file] {
    top: -3px;
    margin-bottom: -7px;
}
#changelist table input[type=radio], 
#changelist table input[type=checkbox] {
    position: relative;
    top: 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #changelist table input[type=radio], 
    #changelist table input[type=checkbox] {
        top: 1px;
    }
}
#changelist table thead input[type=radio], 
#changelist table thead input[type=checkbox] {
    top: 0;
}



/*  Form Fields in Grid
------------------------------------------------------------------------------------------------------ */

input[class*="span"], select[class*="span"], textarea[class*="span"] {
    margin-right: 0;
}

.span-24 input[type=text], .span-24 input[type=password], 
.span-24 select, .span-24 textarea, 
input[type=text].span-24, input[type=password].span-24, 
select.span-24, textarea.span-24, 
.span-24 .ui-gFacelist-message, 
.span-24 .ui-gFacelist-facelist, 
.span-24 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-24  {
    width: 918px;
}
.span-24 div.autocomplete-wrapper-m2m ul.repr, 
.span-24 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-24 ul.repr, 
div.autocomplete-wrapper-m2m.span-24 ul.repr li {
    max-width: 860px;
}
.span-23 input[type=text], .span-23 input[type=password], 
.span-23 select, .span-23 textarea, 
input[type=text].span-23, input[type=password].span-23, 
select.span-23, textarea.span-23, 
.span-23 .ui-gFacelist-message, 
.span-23 .ui-gFacelist-facelist, 
.span-23 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-23 {
    width: 878px;
}
.span-23 div.autocomplete-wrapper-m2m ul.repr, 
.span-23 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-23 ul.repr, 
div.autocomplete-wrapper-m2m.span-23 ul.repr li {
    max-width: 820px;
}
.span-22 input[type=text], .span-22 input[type=password], 
.span-22 select, .span-22 textarea, 
input[type=text].span-22, input[type=password].span-22, 
select.span-22, textarea.span-22, 
.span-22 .ui-gFacelist-message, 
.span-22 .ui-gFacelist-facelist, 
.span-22 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-22 {
    width: 838px;
}
.span-22 div.autocomplete-wrapper-m2m ul.repr, 
.span-22 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-22 ul.repr, 
div.autocomplete-wrapper-m2m.span-22 ul.repr li {
    max-width: 780px;
}
.span-21 input[type=text], .span-21 input[type=password], 
.span-21 select, .span-21 textarea, 
input[type=text].span-21, input[type=password].span-21, 
select.span-21, textarea.span-21, 
.span-21 .ui-gFacelist-message, 
.span-21 .ui-gFacelist-facelist, 
.span-21 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-21 {
    width: 798px;
}
.span-21 div.autocomplete-wrapper-m2m ul.repr, 
.span-21 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-21 ul.repr, 
div.autocomplete-wrapper-m2m.span-21 ul.repr li {
    max-width: 740px;
}
.span-20 input[type=text], .span-20 input[type=password], 
.span-20 select, .span-20 textarea, 
input[type=text].span-20, input[type=password].span-20, 
select.span-20, textarea.span-20, 
.span-20 .ui-gFacelist-message, 
.span-20 .ui-gFacelist-facelist, 
.span-20 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-20, 
.span-24 label + input[type=text], .span-24 label + input[type=password], 
.span-24 label + select, .span-24 label + textarea {
    width: 758px;
}
.span-20 div.autocomplete-wrapper-m2m ul.repr, 
.span-20 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-20 ul.repr, 
div.autocomplete-wrapper-m2m.span-20 ul.repr li {
    max-width: 700px;
}
.span-19 input[type=text], .span-19 input[type=password], 
.span-19 select, .span-19 textarea, 
input[type=text].span-19, input[type=password].span-19, 
select.span-19, textarea.span-19, 
.span-19 .ui-gFacelist-message, 
.span-19 .ui-gFacelist-facelist, 
.span-19 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-19, 
.span-23 label + input[type=text], .span-23 label + input[type=password], 
.span-23 label + select, .span-23 label + textarea {
    width: 718px;
}
.span-19 div.autocomplete-wrapper-m2m ul.repr, 
.span-19 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-19 ul.repr, 
div.autocomplete-wrapper-m2m.span-19 ul.repr li {
    max-width: 660px;
}
.span-18 input[type=text], .span-18 input[type=password], 
.span-18 select, .span-18 textarea, 
input[type=text].span-18, input[type=password].span-18, 
select.span-18, textarea.span-18, 
.span-18 .ui-gFacelist-message, 
.span-18 .ui-gFacelist-facelist, 
.span-18 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-18, 
.span-22 label + input[type=text], .span-22 label + input[type=password], 
.span-22 label + select, .span-22 label + textarea {
    width: 678px;
}
.span-18 div.autocomplete-wrapper-m2m ul.repr, 
.span-18 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-18 ul.repr, 
div.autocomplete-wrapper-m2m.span-18 ul.repr li {
    max-width: 620px;
}
.span-17 input[type=text], .span-17 input[type=password], 
.span-17 select, .span-17 textarea, 
input[type=text].span-17, input[type=password].span-17, 
select.span-17, textarea.span-17, 
.span-17 .ui-gFacelist-message, 
.span-17 .ui-gFacelist-facelist, 
.span-17 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-17, 
.span-21 label + input[type=text], .span-21 label + input[type=password], 
.span-1 label + select, .span-21 label + textarea {
    width: 638px;
}
.span-17 div.autocomplete-wrapper-m2m ul.repr, 
.span-17 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-17 ul.repr, 
div.autocomplete-wrapper-m2m.span-17 ul.repr li {
    max-width: 580px;
}
.span-16 input[type=text], .span-16 input[type=password], 
.span-16 select, .span-16 textarea, 
input[type=text].span-16, input[type=password].span-16, 
select.span-16, textarea.span-16, 
.span-16 .ui-gFacelist-message, 
.span-16 .ui-gFacelist-facelist, 
.span-24 input.vForeignKeyRawIdAdminField, 
.span-24 input.vManyToManyRawIdAdminField, 
.span-16 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-16, 
.span-20 label + input[type=text], .span-20 label + input[type=password], 
.span-20 label + select, .span-20 label + textarea {
    width: 598px;
}
.span-16 div.autocomplete-wrapper-m2m ul.repr, 
.span-16 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-16 ul.repr, 
div.autocomplete-wrapper-m2m.span-16 ul.repr li {
    max-width: 540px;
}
.span-15 input[type=text], .span-15 input[type=password], 
.span-15 select, .span-15 textarea, 
input[type=text].span-15, input[type=password].span-15, 
select.span-15, textarea.span-15, 
.span-15 .ui-gFacelist-message, 
.span-15 .ui-gFacelist-facelist, 
.span-23 input.vForeignKeyRawIdAdminField, 
.span-23 input.vManyToManyRawIdAdminField, 
.span-15 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-15, 
.span-19 label + input[type=text], .span-19 label + input[type=password], 
.span-19 label + select, .span-19 label + textarea {
    width: 558px;
}
.span-15 div.autocomplete-wrapper-m2m ul.repr, 
.span-15 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-15 ul.repr, 
div.autocomplete-wrapper-m2m.span-15 ul.repr li {
    max-width: 500px;
}
.span-14 input[type=text], .span-14 input[type=password], 
.span-14 select, .span-14 textarea, 
input[type=text].span-14, input[type=password].span-14, 
select.span-14, textarea.span-14, 
.span-14 .ui-gFacelist-message, 
.span-14 .ui-gFacelist-facelist, 
.span-22 input.vForeignKeyRawIdAdminField, 
.span-22 input.vManyToManyRawIdAdminField, 
.span-14 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-14, 
.span-18 label + input[type=text], .span-18 label + input[type=password], 
.span-18 label + select, .span-18 label + textarea {
    width: 518px;
}
.span-14 div.autocomplete-wrapper-m2m ul.repr, 
.span-14 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-14 ul.repr, 
div.autocomplete-wrapper-m2m.span-14 ul.repr li {
    max-width: 460px;
}
.span-13 input[type=text], .span-13 input[type=password], 
.span-13 select, .span-13 textarea, 
input[type=text].span-13, input[type=password].span-13, 
select.span-13, textarea.span-13, 
.span-13 .ui-gFacelist-message, 
.span-13 .ui-gFacelist-facelist, 
.span-21 input.vForeignKeyRawIdAdminField, 
.span-21 input.vManyToManyRawIdAdminField, 
.span-13 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-13, 
.span-17 label + input[type=text], .span-17 label + input[type=password], 
.span-17 label + select, .span-17 label + textarea {
    width: 478px;
}
.span-13 div.autocomplete-wrapper-m2m ul.repr, 
.span-13 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-13 ul.repr, 
div.autocomplete-wrapper-m2m.span-13 ul.repr li {
    max-width: 420px;
}
.span-12 input[type=text], .span-12 input[type=password], 
.span-12 select, .span-12 textarea, 
input[type=text].span-12, input[type=password].span-12, 
select.span-12, textarea.span-12, 
.span-12 .ui-gFacelist-message, 
.span-12 .ui-gFacelist-facelist, 
.span-20 input.vForeignKeyRawIdAdminField, 
.span-20 input.vManyToManyRawIdAdminField, 
.span-12 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-12, 
.span-16 label + input[type=text], .span-16 label + input[type=password], 
.span-16 label + select, .span-16 label + textarea {
    width: 438px;
}
.span-12 div.autocomplete-wrapper-m2m ul.repr, 
.span-12 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-12 ul.repr, 
div.autocomplete-wrapper-m2m.span-12 ul.repr li {
    max-width: 380px;
}
.span-11 input[type=text], .span-11 input[type=password], 
.span-11 select, .span-11 textarea, 
input[type=text].span-11, input[type=password].span-11, 
select.span-11, textarea.span-11, 
.span-11 .ui-gFacelist-message, 
.span-11 .ui-gFacelist-facelist, 
.span-19 input.vForeignKeyRawIdAdminField, 
.span-19 input.vManyToManyRawIdAdminField, 
.span-11 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-11, 
.span-15 label + input[type=text], .span-15 label + input[type=password], 
.span-15 label + select, .span-15 label + textarea {
    width: 398px;
}
.span-11 div.autocomplete-wrapper-m2m ul.repr, 
.span-11 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-11 ul.repr, 
div.autocomplete-wrapper-m2m.span-11 ul.repr li {
    max-width: 340px;
}
.span-10 input[type=text], .span-10 input[type=password], 
.span-10 select, .span-10 textarea, 
input[type=text].span-10, input[type=password].span-10, 
select.span-10, textarea.span-10, 
.span-10 .ui-gFacelist-message, 
.span-10 .ui-gFacelist-facelist, 
.span-18 input.vForeignKeyRawIdAdminField, 
.span-18 input.vManyToManyRawIdAdminField, 
.span-10 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-10, 
.span-14 label + input[type=text], .span-4 label + input[type=password], 
.span-14 label + select, .span-14 label + textarea {
    width: 358px;
}
.span-10 div.autocomplete-wrapper-m2m ul.repr, 
.span-10 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-10 ul.repr, 
div.autocomplete-wrapper-m2m.span-10 ul.repr li {
    max-width: 300px;
}
.span-9 input[type=text], .span-9 input[type=password], 
.span-9 select, .span-9 textarea, 
input[type=text].span-9, input[type=password].span-9, 
select.span-9, textarea.span-9, 
.span-9 .ui-gFacelist-message, 
.span-9 .ui-gFacelist-facelist, 
.span-17 input.vForeignKeyRawIdAdminField, 
.span-17 input.vManyToManyRawIdAdminField, 
.span-9 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-9, 
.span-13 label + input[type=text], .span-13 label + input[type=password], 
.span-13 label + select, .span-13 label + textarea {
    width: 318px;
}
.span-9 div.autocomplete-wrapper-m2m ul.repr, 
.span-9 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-9 ul.repr, 
div.autocomplete-wrapper-m2m.span-9 ul.repr li {
    max-width: 260px;
}
.span-8 input[type=text], .span-8 input[type=password], 
.span-8 select, .span-8 textarea, 
input[type=text].span-8, input[type=password].span-8, 
select.span-8, textarea.span-8, 
.span-8 .ui-gFacelist-message, 
.span-8 .ui-gFacelist-facelist, 
.span-16 input.vForeignKeyRawIdAdminField, 
.span-16 input.vManyToManyRawIdAdminField, 
.span-8 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-8, 
.span-12 label + input[type=text], .span-12 label + input[type=password], 
.span-12 label + select, .span-12 label + textarea {
    width: 278px;
}
.span-8 div.autocomplete-wrapper-m2m ul.repr, 
.span-8 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-8 ul.repr, 
div.autocomplete-wrapper-m2m.span-8 ul.repr li {
    max-width: 220px;
}
.span-7 input[type=text], .span-7 input[type=password], 
.span-7 select, .span-7 textarea, 
input[type=text].span-7, input[type=password].span-7, 
select.span-7, textarea.span-7, 
.span-15 input.vForeignKeyRawIdAdminField, 
.span-15 input.vManyToManyRawIdAdminField, 
.span-7 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-7, 
.span-11 label + input[type=text], .span-11 label + input[type=password], 
.span-11 label + select, .span-11 label + textarea {
    width: 238px;
}
.span-7 div.autocomplete-wrapper-m2m ul.repr, 
.span-7 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-7 ul.repr, 
div.autocomplete-wrapper-m2m.span-7 ul.repr li {
    max-width: 180px;
}
.span-6 input[type=text], .span-6 input[type=password], 
.span-6 select, .span-6 textarea, 
input[type=text].span-6, input[type=password].span-6, 
select.span-6, textarea.span-6, 
.span-14 input.vForeignKeyRawIdAdminField, 
.span-14 input.vManyToManyRawIdAdminField, 
.span-6 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-6, 
.span-10 label + input[type=text], .span-10 label + input[type=password], 
.span-10 label + select, .span-10 label + textarea {
    width: 198px;
}
.span-6 div.autocomplete-wrapper-m2m ul.repr, 
.span-6 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-6 ul.repr, 
div.autocomplete-wrapper-m2m.span-6 ul.repr li {
    max-width: 140px;
}
.span-5 input[type=text], .span-5 input[type=password], 
.span-5 select, .span-5 textarea, 
input[type=text].span-5, input[type=password].span-5, 
select.span-5, textarea.span-5, 
.span-13 input.vForeignKeyRawIdAdminField, 
.span-13 input.vManyToManyRawIdAdminField, 
.span-5 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-5, 
.span-9 label + input[type=text], .span-9 label + input[type=password], 
.span-9 label + select, .span-9 label + textarea {
    width: 158px;
}
.span-5 div.autocomplete-wrapper-m2m ul.repr, 
.span-5 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-5 ul.repr, 
div.autocomplete-wrapper-m2m.span-5 ul.repr li {
    max-width: 100px;
}
.span-4 input[type=text], .span-4 input[type=password], 
.span-4 select, .span-4 textarea, 
input[type=text].span-4, input[type=password].span-4, 
select.span-4, textarea.span-4, 
.span-12 input.vForeignKeyRawIdAdminField, 
.span-12 input.vManyToManyRawIdAdminField, 
.span-4 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-4, 
.span-8 label + input[type=text], .span-8 label + input[type=password], 
.span-8 label + select, .span-8 label + textarea  {
    width: 118px;
}
.span-4 div.autocomplete-wrapper-m2m ul.repr, 
.span-4 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-4 ul.repr, 
div.autocomplete-wrapper-m2m.span-4 ul.repr li {
    max-width: 60px;
}
.span-3 input[type=text], .span-3 input[type=password], 
.span-3 select, .span-3 textarea, 
input[type=text].span-3, input[type=password].span-3, 
select.span-3, textarea.span-3, 
.span-11 input.vForeignKeyRawIdAdminField, 
.span-11 input.vManyToManyRawIdAdminField, 
.span-3 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-3, 
.span-7 label + input[type=text], .span-7 label + input[type=password], 
.span-7 label + select, .span-7 label + textarea {
    width: 78px;
}
.span-3 div.autocomplete-wrapper-m2m ul.repr, 
.span-3 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-3 ul.repr, 
div.autocomplete-wrapper-m2m.span-3 ul.repr li {
    max-width: 20px;
}
.span-2 input[type=text], .span-2 input[type=password], 
.span-2 select, .span-2 textarea, 
input[type=text].span-2, input[type=password].span-2, 
select.span-2, textarea.span-2, 
.span-10 input.vForeignKeyRawIdAdminField, 
.span-10 input.vManyToManyRawIdAdminField, 
.span-2 div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-m2m.span-2, 
.span-6 label + input[type=text], .span-6 label + input[type=password], 
.span-6 label + select, .span-6 label + textarea {
    width: 38px;
}
.span-2 div.autocomplete-wrapper-m2m ul.repr, 
.span-2 div.autocomplete-wrapper-m2m ul.repr li, 
div.autocomplete-wrapper-m2m.span-2 ul.repr, 
div.autocomplete-wrapper-m2m.span-2 ul.repr li {
    max-width: 30px;
}


.container-grid .span-flexible input[type=text], .container-grid .span-flexible input[type=password], 
.container-grid .span-flexible textarea, .container-grid .span-flexible select {
    width: 100% !important;
}



/*  Form Elements: Basic Widths & Heights
------------------------------------------------------------------------------------------------------ */

input[type=text], 
input[type=password], 
.vDateField, 
.vTimeField, 
.vIntegerField, 
.vPositiveSmallIntegerField, 
.vManyToManyRawIdAdminField, 
.vForeignKeyRawIdAdminField {
    width: 118px;
}

input.vTextField, 
input.vURLField, 
input.vFileBrowseField, 
textarea, 
.vLargeTextField, 
.vXMLLargeTextField {
    width: 278px;
}

.row select {
    min-width: 118px;
}

.vLargeTextField {
    height: 118px;
}



/*  Large Form Elements in Change-Form: Widths & Heights
------------------------------------------------------------------------------------------------------ */

.row .vTextField, 
.row .vURLField, 
.row .vFileBrowseField, 
.row textarea, 
.row .vLargeTextField, 
.row .vXMLLargeTextField, 
div.autocomplete-wrapper-m2m {
    width: 758px;
}
.row select {
    max-width: 758px;
}
div.autocomplete-wrapper-m2m ul.repr, 
div.autocomplete-wrapper-m2m ul.repr li {
    max-width: 700px;
}



/*  Form Elements in Changelist-Results Table & Tabular Modules: Widths & Heights
------------------------------------------------------------------------------------------------------ */

.changelist-results table select, 
.module.table select, 
.module.table div.autocomplete-wrapper-m2m {
    max-width: 278px;
}
.module.table div.autocomplete-wrapper-m2m {
    width: 278px;
}
.module.table div.autocomplete-wrapper-m2m ul.repr, 
.module.table div.autocomplete-wrapper-m2m ul.repr li {
    max-width: 222px;
}


/*  Form Elements Cells
------------------------------------------------------------------------------------------------------ */

.cell input[type=text], 
.cell input[type=password], 
.cell select, 
.cell div.autocomplete-wrapper-m2m {
    max-width: 280px;
}
.cell div.autocomplete-wrapper-m2m {
    width: 280px;
}
.cell div.autocomplete-wrapper-m2m ul.repr, 
.cell div.autocomplete-wrapper-m2m ul.repr li {
    max-width: 222px;
}


/*  Autocomplete Elements
------------------------------------------------------------------------------------------------------ */


/*  Autocomplete Wrappers (Input and Input-Lookalike) ......................................... */

div.autocomplete-wrapper-m2m, 
div.autocomplete-wrapper-fk input.ui-autocomplete-input {
    padding-right: 55px;
    color: #666;
    border: 1px solid #ccc;
/*    border-color: #ccc #ddd #ddd #ccc;*/
    border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
    box-shadow: 0 1px 3px #eaeaea inset; -moz-box-shadow: 0 1px 3px #eaeaea inset; -webkit-box-shadow: 0 1px 3px #eaeaea inset;
/*    background: #fff url('../img/backgrounds/autocomplete.png') repeat-x scroll;*/
    background: #fff;
/*    background: #f2f8fa;*/
/*    background: #e1f0f5;*/
}
div.autocomplete-wrapper-m2m.state-focus, 
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus {
    border-color: #999;
    background: #e1f0f5;
/*    border: 1px solid #309bbf;*/
/*    background: #fff url('../img/backgrounds/autocomplete.png');*/
}

div.autocomplete-wrapper-m2m {
    display: inline-block;
    position: relative;
    padding: 0 0 0 1px;
/*    width: 758px;*/
    height: auto !important;
    vertical-align: top;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
div.autocomplete-wrapper-fk {
    display: inline-block;
    position: relative;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top;
    font-size: 0 !important; /* Set font-size and line-height to 0 to let the   at the end of the autocomplete-wrapper disappear */
    line-height: 0 !important;
    background: transparent !important;
}


/*  M2M Listing ......................................... */

div.autocomplete-wrapper-m2m ul.repr {
/*    position: relative;*/
    float: left;
/*    clear: both;*/
/*    padding-right: 25px;*/
    width: 100%;
    overflow: hidden;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
div.autocomplete-wrapper-m2m li {
/*    position: relative;*/
    float: left;
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.autocomplete-wrapper-m2m li.search {
    margin-top: 1px;
    margin-bottom: 1px;
    background: transparent;
}
div.autocomplete-wrapper-m2m li.search input[type=text] {
    margin: 0 0 -1px !important;
    padding: 0 4px !important;
    width: 100px;
    height: 22px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    outline: 0 !important;
    border: 0 !important;
    box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important;
    background: transparent !important;
    cursor: text;
}
div.autocomplete-wrapper-m2m li.repr {
    margin-top: 3px;
    margin-bottom: 0;
    margin-right: 5px;
    font-weight: bold;
    line-height: 18px;
}


/*  Autocomplete Icons ......................................... */

div.autocomplete-wrapper-m2m li.repr a.m2m-remove {
    color: #666;
    padding-left: 5px;
}

div.autocomplete-wrapper-fk.autocomplete-preremove input.ui-autocomplete-input, 
div.autocomplete-wrapper-m2m.autocomplete-preremove li.repr a {
    color: #bf3030 !important;
}

div.autocomplete-wrapper-m2m li.repr.autocomplete-preremove a {
    color: #bf3030 !important;
}

div.autocomplete-wrapper-m2m a.related-lookup, 
div.autocomplete-wrapper-fk a.related-lookup {
    position: absolute;
    border: 1px solid #ccc;
}
div.autocomplete-wrapper-m2m a.related-lookup {
    top: -1px;
    right: -1px;
/*    border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px;*/
}

div.autocomplete-wrapper-fk a.related-lookup {
    top: 0;
    right: 0;
}
div.autocomplete-wrapper-fk a.related-remove, 
div.autocomplete-wrapper-m2m a.related-remove, 
div.autocomplete-wrapper-fk div.loader, 
div.autocomplete-wrapper-m2m div.loader {
    display: inline-block;
    position: absolute;
    right: 24px;
    top: 0;
    font-size: 0;
    line-height: 0;
    width: 23px;
    height: 23px;
    border: 1px solid #ccc;
/*    border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;*/
}
div.autocomplete-wrapper-m2m a.related-remove + a.related-lookup {
    border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0;
}
div.autocomplete-wrapper-fk a.related-remove:link, 
div.autocomplete-wrapper-fk a.related-remove:visited,
div.autocomplete-wrapper-m2m a.related-remove:link, 
div.autocomplete-wrapper-m2m a.related-remove:visited {
    background: #fff url('../img/icons/icon-autocomplete-fk-remove.png') 50% 50% no-repeat scroll;
}
div.autocomplete-wrapper-fk a.related-remove:hover, 
div.autocomplete-wrapper-fk a.related-remove:active,
div.autocomplete-wrapper-m2m a.related-remove:hover, 
div.autocomplete-wrapper-m2m a.related-remove:active {
    background: #fff url('../img/icons/icon-autocomplete-fk-remove-hover.png') 50% 50% no-repeat scroll;
}

div.autocomplete-wrapper-m2m.state-focus a.related-lookup, 
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus + * + a.related-lookup, 
div.autocomplete-wrapper-m2m.state-focus a.related-remove, 
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus + * + * + a.related-remove, 
div.autocomplete-wrapper-m2m.state-focus .loader, 
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus + * + * + * + .loader {
    border-color: #999;
}

div.autocomplete-wrapper-fk div.loader, 
div.autocomplete-wrapper-m2m div.loader {
    /*display: inline-block !important;*/
    width: 23px;
    height: 23px;
    background: #fff url('../img/backgrounds/loading-small.gif') 50% 50% no-repeat scroll;
}
/*div.autocomplete-wrapper-m2m.state-focus a.related-remove, 
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus + * + * +  a.related-remove, 
div.autocomplete-wrapper-m2m.state-focus .loader, 
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus + * + * + * +  .loader {
    background-color: #e1f0f5;
}
*/
div.autocomplete-wrapper-m2m a.related-remove, 
div.autocomplete-wrapper-m2m a.related-remove + div.loader {
    top: -1px;
    right: 23px;
/*    border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px;*/
}



/*  Autocompletes in Changelists ......................................... */

#changelist table div.autocomplete-wrapper-fk a.related-remove, #changelist table div.autocomplete-wrapper-m2m a.related-remove, 
#changelist table div.autocomplete-wrapper-fk div.loader, #changelist table div.autocomplete-wrapper-m2m div.loader {
    top: -5px;
}

/* we need to "hide" the input-field without display:none, because with display:none we can´t focus the field anymore */
div.autocomplete-wrapper-m2m input.vManyToManyRawIdAdminField, div.autocomplete-wrapper-fk input.vForeignKeyRawIdAdminField, div.autocomplete-wrapper-fk input.vIntegerField  {
    position: absolute;
    left: 0;
    top: -40px;
    width: 10px;
    height: 10px;
    color: transparent !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important;
    cursor: default !important;
}