kpsul/static/grappelli/css/components.css

/*  Paragraphs & Other Typo Formats
------------------------------------------------------------------------------------------------------ */

.module p {
    margin: 0;
    padding: 5px 0;
}
fieldset.module label + p {
    font-size: 11px;
    line-height: 15px;
}



/*  Modules
------------------------------------------------------------------------------------------------------ */

.module {
    margin: 0 0 7px;
}

.form-container .module {
    min-width: 938px;
}
#changelist .span-flexible .module + ul.submit-row {
    margin-top: 10px;
}
/* Empty breaks in Chrome 11+: Elements are not displayed initially even if they are not empty */
/*.module:empty {
    padding: 0;
    height: 0;
    border: 0;
    visibility: hidden;
}*/

/*  Nested Modules Basics ......................................... */

.module .module, 
.module fielset.module {
    margin: 0;
}



/*  Groups
------------------------------------------------------------------------------------------------------ */

.group {
    margin: 0 -4px 7px;
    padding: 2px;
}
.form-container .group {
    min-width: 940px;
}



/*  Elements in Modules & Groups
------------------------------------------------------------------------------------------------------ */


/*  1st Level Elements ......................................... */

.group h2, 
.module h2 {
    padding: 6px 10px;
}
.group h2+.tools+* {
    margin-top: 2px;
}


/*  2nd Level Elements (Dark/Bright) ......................................... */

.group h3, 
.module h3 {
    margin: 0;
    padding: 5px 10px;
}


/*  3rd Level Elements ......................................... */

.group h4, 
.module h4 {
    margin: 0;
    padding: 4px 10px 4px 10px;
}

.module .description {
    padding: 8px 10px;
    font-size: 11px;
}



/*  Modules & Groups Overrides
------------------------------------------------------------------------------------------------------ */

.module:first-child {
    margin-top: 0 !important;
}
.group .module:first-child {
    margin-top: 2px !important;
}
.group:first-child {
    margin-top: -4px;
}
.group .module {
    margin-top: 2px;
    margin-bottom: 0;
}
.group .module .module {
    margin-top: 0;
}
.group:last-child, 
.module:last-child {
    margin-bottom: 0;
}



/*  Collapsible Structures
------------------------------------------------------------------------------------------------------ */

.collapse.closed *, 
.collapse.closed .module.table, 
.collapse.closed .module.table * {
    display: none;
}

.collapse-handler {
    cursor: pointer;
}

.collapse.closed .collapse-handler, 
.collapse.closed .tools,
.collapse.closed .tools * {
    display: block !important;
}
.collapse.closed h3+.tools, 
.collapse.closed h4+.tools {
    margin-top: 1px !important;
}



/*  Row
------------------------------------------------------------------------------------------------------ */

.row {
    padding: 5px 10px;
    font-weight: bold;
}

fieldset.module .row + .module {
    margin-top: -1px !important;
}



/*  Cell
------------------------------------------------------------------------------------------------------ */

.row .cell {
    display: inline-block;
    margin-top: -5px;
    margin-bottom: -5px;
    padding: 5px 10px;
    width: auto;
}
.row .cell + .cell {
    padding-left: 18px;
}



/*  Fieldset Row
------------------------------------------------------------------------------------------------------ */

fieldset.module .row {
    padding: 8px 10px;
    line-height: 18px;
    font-weight: normal;
}
fieldset.module .row.cells {
    white-space: nowrap;
    overflow: hidden;
}



/*  Fieldset Cell
------------------------------------------------------------------------------------------------------ */

fieldset.module .cell {
    margin: -8px 0 -1000px 0;
    padding: 8px 18px 1000px 0;
    vertical-align: top;
    white-space: nowrap;
    height: 100%;
}
fieldset.module .cell:last-child, fieldset.module .cell.last {
    margin-right: -20px;
}


/*  Tabular Modules
------------------------------------------------------------------------------------------------------ */

.module.table {
    display: table;
    margin: 0 0 -2px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 2px;
}
h2 + .module.table, 
h2 + * + .module.table, 
h2 + * + * + .module.table {
    margin-top: 0 !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .module.table {
        margin-bottom: -1px;
        border-spacing: 0 1px !important;
    }
}

.module.thead {
    display: table-header-group;
}
.module.tfoot {
    display: table-footer-group;
}
.module.thead, 
.module.tfoot {
    font-size: 11px;
    font-weight: bold;
}
.module.table .tr {
    display: table-row;
}

.module.tbody {
    display: table-row-group;
}

.module.table .th, 
.module.table .td {
    display: table-cell; 
    float: none;
    overflow: hidden;
    margin-right: 0;
    padding: 1px 20px;
    height: 100%;
    vertical-align: top;
    white-space: nowrap;
}

.module.tbody .th, 
.module.tbody .td {
    padding-top: 5px;
    padding-bottom: 5px;
}
.module.table .th:first-of-type, 
.module.table .td:first-of-type {
    padding-left: 10px;
}
.module.tbody .th.tools, 
.module.tbody .td.tools {
    padding-left: 0;
    width: 100%;
}

.empty-form {
    display: none !important;
}



/*  Add Items
------------------------------------------------------------------------------------------------------ */

.module.add-item {
    height: 28px;
}
.module.add-item>a {
    position: relative;
    top: 6px;
    padding: 5px 10px;
    font-weight: bold;
}



/*  Selectors
------------------------------------------------------------------------------------------------------ */

.selector {
    position: relative;
    float: left;
    overflow: hidden;
    width: 758px;
}
.selector-available, .selector-chosen {
    float: left;
    width: 366px;
}
.selector.stacked .selector-available, .selector.stacked .selector-chosen {
    width: 756px;
}
.selector h2, .inline-group .selector h2, 
.inline-related fieldset .selector-available h2, .inline-related fieldset .selector-chosen h2 {
    padding: 7px 5px 6px 7px;
    font-size: 12px;
    line-height: 13px;
    font-weight: bold;
}
.selector .selector-filter {
    padding: 3px 5px 2px 2px;
    min-height: 25px;
    font-weight: bold;
    /*line-height: 25px;*/
    /*text-indent: 25px;*/
    /*background: url('../img/icons/icon-searchbox.png') 6px 50% no-repeat;*/
}
.selector .selector-available .selector-filter {
    line-height: 25px;
    text-indent: 25px;
    background: url('../img/icons/icon-searchbox.png') 6px 50% no-repeat;
}
.selector .selector-chosen .selector-filter {
    margin: 0 0 -3px;
    padding: 6px 5px 2px 26px;
    /*line-height: 25px;*/
    /*text-indent: 25px;*/
    background: url('../img/icons/icon-searchbox.png') 6px 8px no-repeat;
}
.selector .selector-filter input[type=text] {
    position: relative;
    margin: 0;
    width: 326px !important;
    max-width: 326px !important;
}
.selector.stacked .selector-filter input[type=text] {
    width: 716px !important;
    max-width: 716px !important;
}
.selector .selector-filter img {
    display: none;
}
.selector .selector-chosen .selector-filter:after {
    content: " " url('../img/icons/icon-selector_filter.png');
    opacity: .75;
}
.selector.stacked .selector-chosen .selector-filter:after {
    content: " " url('../img/icons/icon-selector_add-m2m_vertical-hover.png');
}
.selector select[multiple=multiple] {
    margin: 0;
    padding-left: 3px;
    max-width: 367px !important;
    width: 367px !important;
    height: 200px;
}
.selector.stacked select[multiple=multiple] {
    width: 757px !important;
    max-width: 757px !important;
}
.selector h2 + select {
    /*display: none;*/
    position: relative;
    top: -1px;
}
.selector ul.selector-chooser {
    float: left;
    margin: 110px 2px 0;
    padding: 0;
    width: 18px;
}
.selector.stacked ul.selector-chooser {
    margin: 4px 0 0 356px;
    width: 36px;
}
.selector.stacked ul.selector-chooser li {
    float: left;
}
a.selector-add, a.selector-remove {
    display: block;
    width: 18px;
    height: 18px;
    color: transparent !important;
    background-position: 50% 0;
    background-repeat: no-repeat;
}
a.selector-add:link, a.selector-add:visited {
    background-image: url('../img/icons/icon-selector_add-m2m_horizontal.png');
}
a.selector-add:hover, a.selector-add:active {
    background-image: url('../img/icons/icon-selector_add-m2m_horizontal-hover.png');
}
a.selector-remove:link, a.selector-remove:visited {
    background-image: url('../img/icons/icon-selector_remove-m2m_horizontal.png');
}
a.selector-remove:hover, a.selector-remove:active {
    background-image: url('../img/icons/icon-selector_remove-m2m_horizontal-hover.png');
}
.selector.stacked a.selector-add:link, .selector.stacked a.selector-add:visited {
    background-image: url('../img/icons/icon-selector_add-m2m_vertical.png');
}
.selector.stacked a.selector-add:hover, .selector.stacked a.selector-add:active {
    background-image: url('../img/icons/icon-selector_add-m2m_vertical-hover.png');
}
.selector.stacked a.selector-remove:link, .selector.stacked a.selector-remove:visited {
    background-image: url('../img/icons/icon-selector_remove-m2m_vertical.png');
}
.selector.stacked a.selector-remove:hover, .selector.stacked a.selector-remove:active {
    background-image: url('../img/icons/icon-selector_remove-m2m_vertical-hover.png');
}
a.selector-chooseall, a.selector-clearall {
    display: block;
    margin: 0;
    padding: 2px 7px;
    font-size: 11px;
    line-height: 13px;
    font-weight: bold;
}



/*  Link-List, Actions, Feed, Table of Contents
------------------------------------------------------------------------------------------------------ */

.link-list ul li, 
.feed ul li, 
.table-of-contents ul li {
    padding: 0;
    font-size: 11px;
    line-height: 15px;
    font-weight: bold;
}
.link-list ul li a, 
.feed ul li a, .feed ul li span, 
.table-of-contents ul li a {
    display: block;
    padding: 5px 10px;
    font-weight: bold;
    line-height: 13px;
    background-color: transparent;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.actions p, 
.link-list p, 
.feed p {
    color: #999;
    font-size: 11px;
    padding: 3px 10px;
}
.link-list ul li a, 
.feed ul li a {
    padding-left: 25px;
}
a.internal, 
a.external {
    background-repeat: no-repeat;
}
.dashboard a.internal {
    background-position: 12px 7px;
}
.dashboard a.external {
    background-position: 10px 8px;
}
.documentation a.external {
    padding-left: 12px;
    background-position: 1px 3px;
}
a.internal:link, a.internal:visited {
    background-image: url('../img/icons/icon-navigation-internal.png');
}
a.internal:hover, a.internal:active {
    background-image: url('../img/icons/icon-navigation-internal-hover.png');
}
a.external:link, a.external:visited {
    background-image: url('../img/icons/icon-navigation-external.png');
}
a.external:hover, a.external:active {
    background-image: url('../img/icons/icon-navigation-external-hover.png');
}

.feed ul li a, .feed ul li span {
    line-height: 13px;
}
.feed ul li span.date {
    float: right;
    padding: 5px 5px 0 5px;
}



/*  Basic Actions & Module Actions
------------------------------------------------------------------------------------------------------ */

ul.actions {
    position: relative;
    float: right;
    clear: both;
}
ul.actions li {
    position: relative;
    float: left;
}
ul.actions li + li {
    margin-left: 20px;
}
ul.actions li a {
    padding-left: 15px;
    font-size: 11px;
    background-position: 0 50%;
    background-repeat: no-repeat;
}

.actions ul li {
    padding: 4px 5px 4px 25px;
    font-size: 11px;
    line-height: 12px;
}

.actions ul li a {
    margin-left: -15px;
    padding-left: 15px;
    font-weight: bold;
    background-position: 0 50%;
    background-repeat: no-repeat;
}

.actions li.add-link a:link, .actions li.add-link a:visited {
    background-image: url('../img/icons/icon-actions-add-link.png');
}
.actions li.add-link a:hover, .actions li.add-link a:active {
    background-image: url('../img/icons/icon-actions-add-link-hover.png');
}
.actions li.change-link a:link, .actions li.change-link a:visited {
    background-image: url('../img/icons/icon-actions-change-link.png');
}
.actions li.change-link a:hover, .actions li.change-link a:active {
    background-image: url('../img/icons/icon-actions-change-link-hover.png');
}

.actions li.delete-link {
    text-decoration: line-through;
    background: url('../img/icons/icon-actions-delete-link.png') 10px 7px no-repeat;
}



/*  Module Search & Module Filter
------------------------------------------------------------------------------------------------------ */

.module.search, 
.module.filter {
    position: relative;
    float: right;
    z-index: 1001;
    padding: 8px 10px;
}
.module.filter + .module.search {
    padding-right: 0;
}

.module.filter .pulldown-container {
    position: absolute;
    width: inherit;
}

.module.search .tooltip {
    position: absolute;
}
.module.search .tooltip.search-fields {
    top: 25px;
}
.module.search .tooltip .tooltip-pointer {
    position: relative;
    z-index: 1000;
    display: block;
    width: 30px;
    height: 8px;
    background: transparent url('../img/backgrounds/tooltip-pointer.png') 10px 100% no-repeat scroll;
}
.module.search .tooltip .tooltip-content {
    position: relative;
    z-index: 990;
    top: -1px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 15px;
}

a.button.toggle-filters {
    display: block;
    margin: 0;
    padding: 4px 20px 4px 8px;
}
a.button.toggle-filters:link, a.button.toggle-filters:visited {
    background: transparent url('../img/icons/icon-dropdown.png') 100% 3px no-repeat;
}
.selected a.button.toggle-filters:link, .selected a.button.toggle-filters:visited {
    background: url('../img/icons/icon-dropdown-hover.png') 100% 3px no-repeat;
}
.open a.button.toggle-filters, .selected a.button.toggle-filters, 
.selected a.button.toggle-filters:hover, .selected a.button.toggle-filters:active, 
a.button.toggle-filters:hover, a.button.toggle-filters:active {
    background: url('../img/icons/icon-dropdown-hover.png') 100% 3px no-repeat;
}
.selected a.button.toggle-filters:link, .selected a.button.toggle-filters:visited {
    background: url('../img/icons/icon-dropdown-hover.png') 100% 3px no-repeat;
}
.open a.button.toggle-filters, 
.open.selected a.button.toggle-filters, 
.selected a.button.toggle-filters:hover, .selected a.button.toggle-filters:active, 
a.button.toggle-filters:hover, a.button.toggle-filters:active {
    background: url('../img/icons/icon-dropdown-hover.png') 100% 3px no-repeat;
}

.filter-pulldown {
    display: none;
    position: relative;
    z-index: 1000;
    margin: -1px 0;
    padding: 0 10px 10px;
}
.filter-pulldown .filter {
    position: relative;
    padding: 7px 0 0;
    width: 100%;
}
.filter-pulldown select {
    width: 100% !important;
}
.filter-pulldown label {
    margin: 0 0 -2px;
    padding: 0;
    width: 100% !important;
    line-height: 12px;
    font-weight: bold;
}



/*  Module Date Hierarchy
------------------------------------------------------------------------------------------------------ */

.module + .module.date-hierarchy {
    margin-top: -8px;
}

.date-hierarchy ul {
    position: relative;
    float: left;
    clear: both;
    font-size: 11px;
    line-height: 16px;
    font-weight: bold;
}
.date-hierarchy ul li {
    position: relative;
    float: left;
    margin-right: 10px;
}
.module.date-hierarchy ul a, 
.module.date-hierarchy ul span {
    padding: 2px 5px 1px;
    font-weight: normal;
}
.date-hierarchy ul li a.date-hierarchy-back {
    padding-left: 10px;
    background: 0 50% no-repeat scroll;
}

.date-hierarchy a.date-hierarchy-back:link, .date-hierarchy a.date-hierarchy-back:visited {
    background-image: url('../img/icons/icon-date-hierarchy-back.png');
}
.date-hierarchy a.date-hierarchy-back:hover, .date-hierarchy a.date-hierarchy-back:active {
    background-image: url('../img/icons/icon-date-hierarchy-back-hover.png');
}



/*  Pagination
------------------------------------------------------------------------------------------------------ */

.module.pagination {
    padding: 8px 10px;
}
.module .module.pagination {
    position: relative;
    float: left;
}
ul.pagination {
    position: relative;
    clear: both;
    margin: 0;
    padding: 0;
    width: auto;
    font-weight: bold;
}
ul.pagination li {
    position: relative;
    float: left;
    display: block;
    margin-right: 3px;
}
ul.pagination li.results {
    margin-right: 10px;
}
ul.pagination li.separator {
    border-color: transparent;
}
ul.pagination li:last-child {
    clear: right;
}

ul.pagination span, 
ul.pagination a {
    display: inline-block;
    padding: 4px 8px 4px;
    min-width: 25px;
    font-size: 11px;
    font-weight: bold;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
ul.pagination li.separator span {
    padding: 4px 0;
    min-width: 10px;
    font-size: 14px;
}
ul.pagination li.showall {
    margin-left: 7px;
}
.submit-row ul.pagination li, 
.submit-row ul.pagination li.results {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}



/*  Module Changelist-Results
------------------------------------------------------------------------------------------------------ */

.module.changelist-results {
    background: url('../img/backgrounds/changelist-results.png') repeat scroll !important;
}
.changelist-actions + .changelist-results, 
.changelist-results + .changelist-actions {
    margin-top: -1px;
}



/*  Module Changelist Actions
------------------------------------------------------------------------------------------------------ */

.changelist-actions {
    position: relative;
    margin-bottom: 0;
}

.changelist-actions ul {
    position: relative;
    float: left;
    display: inline;
    font-size: 11px;
    line-height: 16px;
    font-weight: bold;
    margin: -1px 10px -1px 0;
}
.changelist-actions ul li {
    position: relative;
    float: left;
    display: block;
    margin-right: 3px;
}

.changelist-actions ul a, 
.changelist-actions ul span {
    display: inline-block;
    padding: 4px 8px 3px;
    font-size: 11px;
    font-weight: bold;
}
.changelist-actions ul span span {
    padding: 0;
}

.changelist-actions #action-toggle {
    display: none;
}
.changelist-actions select {
    float: left;
    margin: 0 10px 0 0;
    width: 278px;
}

.changelist-actions li.all,
.changelist-actions li.clear-selection,
.changelist-actions li.question {
   display: none;
}



/*  Submit Row
------------------------------------------------------------------------------------------------------ */

.module.submit-row {
    width: 100%;
}
ul.submit-row {
    position: relative;
    float: left;
    clear: both;
    width: 100%;
}
.pagination + ul.submit-row {
    float: right;
    clear: none;
    width: 25%;
}
ul.submit-row li {
    float: right;
    margin-left: 10px;
}

ul.submit-row li.left {
    float: left;
}
ul.submit-row li.left:first-child {
    margin-left: 0;
}



/*  Module Footer
------------------------------------------------------------------------------------------------------ */

.module.footer {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    margin: 0 -20px;
    padding: 12px 20px;
    min-width: 100px;
    width: 100%;
    opacity: 1;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.module.footer .changelist-actions {
    position: relative;
    float: left;
    clear: none;
    width: 75%;
    padding: 2px 0 0;
}
.change-list .module.footer ul.submit-row {
    position: relative;
    float: right;
    clear: none;
    width: 25%;
}



/*  Sortable
------------------------------------------------------------------------------------------------------ */

.sortablehelper, sortablehelper * {
    display: none;
}