views-admin.theme.css

/**
 * The .theme.css file is intended to contain presentation declarations including
 * images, borders, colors, and fonts.
 */

/* @group Reset */

.views-admin .links {
  list-style: none outside none;
  margin: 0;
}

.views-admin a:hover {
  text-decoration: none;
}

/* @end */

/* @group Layout */

.box-padding {
  padding-left: 12px;
  padding-right: 12px;
}

.box-margin {
  margin: 12px 12px 0 12px;
}

/* @end */

/* @group Icons */

.views-admin .icon {
  height: 16px;
  width: 16px;
}

.views-admin .icon,
.views-admin .icon-text {
  background-attachment: scroll;
  background-image: url('../images/sprites.png');
  background-position: left top; /* LTR */
  background-repeat: no-repeat;
}

.views-admin a.icon {
  background-image: url('../images/sprites.png'),
  -moz-linear-gradient(
  -90deg,
  #fff 0px,
  #e8e8e8 100%
  );
  background-image: url('../images/sprites.png'),
  -webkit-gradient(
  linear,
  left top,
  left bottom,
  color-stop(0.0, rgba(255, 255, 255, 1.0)),
  color-stop(1.0, rgba(232, 232, 232, 1.0))
  );
  background-image: url('../images/sprites.png'),
  -webkit-linear-gradient(
  -90deg,
  #fff 0px,
  #e8e8e8 100%
  );
  background-repeat: no-repeat, repeat-y;
  border: 1px solid #ddd;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
  box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
}

.views-admin a.icon:hover {
  border-color: #d0d0d0;
  -moz-box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
  -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
  box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
}

.views-admin a.icon:active {
  border-color: #c0c0c0;
}

/**
 * Targets a <span> element inside an <a> element.
 * This assumes no visible text from the span.
 */
.views-admin span.icon {
  display: inline-block;
  float: left;
  position: relative;
}

.views-admin .icon.compact {
  display: block;
  overflow: hidden;
  text-indent: -9999px;
}

/* Targets any element with an icon -> text combo */
.views-admin .icon-text {
  padding-left: 19px; /* LTR */
}

.views-admin .icon.linked {
  background-position: center -153px;
}

.views-admin .icon.unlinked {
  background-position: center -195px;
}

.views-admin .icon.add {
  background-position: center 3px;
}

.views-admin a.icon.add {
  background-position: center 3px, left top;
}

.views-admin .icon.delete {
  background-position: center -52px;
}

.views-admin a.icon.delete {
  background-position: center -52px, left top;
}

.views-admin .icon.rearrange {
  background-position: center -111px;
}

.views-admin a.icon.rearrange {
  background-position: center -111px, left top;
}

.views-displays .secondary a:hover > .icon.add {
  background-position: center -25px;
}

.views-displays .secondary .open a:hover > .icon.add {
  background-position: center 3px;
}

/* @end */

/* @group Forms */

fieldset.box-padding {
  border: none;
}

.views-admin fieldset fieldset {
  margin-bottom: 0;
}

.form-item {
  margin-top: 9px;
  padding-bottom: 0;
  padding-top: 0;
}

.form-type-checkbox {
  margin-top: 6px;
}

input.form-checkbox,
input.form-radio {
  vertical-align: baseline;
}

.form-submit:not(.js-hide) + .form-submit,
.views-admin a.button:not(.js-hide) + a.button {
  margin-left: 1em; /* LTR */
}

.container-inline {
  padding-top: 15px;
}

.container-inline > * + *,
.container-inline .fieldset-wrapper > * + * {
  padding-left: 4pt; /* LTR */
}

.views-admin fieldset fieldset.container-inline {
  margin-bottom: 1em;
  margin-top: 1em;
  padding-top: 0;
}

.views-admin fieldset fieldset.container-inline > .fieldset-wrapper {
  padding-bottom: 0;
}

/* Indent form elements so they're directly underneath the label of the checkbox that reveals them */
.views-admin .form-type-checkbox + .form-wrapper {
  margin-left: 16px; /* LTR */
}

/* Hide 'remove' checkboxes. */
.views-remove-checkbox {
  display: none;
}

/* sizes the labels of checkboxes and radio button to the height of the text */
.views-admin .form-type-checkbox label,
.views-admin .form-type-radio label {
  line-height: 2;
}

/* @group Dependent options */

.views-admin-dependent .form-item {
  margin-bottom: 6px;
  margin-top: 6px;
}

/* @end */

/* @end */

/* @group Lists */

.horizontal > * + * {
  margin-left: 9px; /* LTR */
  padding-left: 9px; /* LTR */
}

.views-ui-view-title {
  font-weight: bold;
}

/* @end */

/* @group Messages */

.view-changed {
  margin-bottom: 21px;
}

/* @end */

/* @group Headings */

/* Intentionally targeting h1 */
.views-admin h1.unit-title {
  font-size: 15px;
  line-height: 1.6154;
  margin-bottom: 0;
  margin-top: 18px;
}

/* @end */

/* @group Tables */

table td,
table th {
  vertical-align: top;
}

/* @end */

/* @group List views */

/* These header classes are ambiguous and should be scoped to th elements */

th.views-ui-name {
  width: 18%;
}

th.views-ui-description {
  width: 26%;
}

th.views-ui-tag {
  width: 8%;
}

th.views-ui-path {
  width: auto;
}

th.views-ui-operations {
  width: 24%;
}

/* @end */

/* @group Add view */

/**
 * Drupal core forces AJAX triggering elements to float left when they are
 * disabled due to AJAX processing. On the add view page, we have inline
 * containers where we don't want that behavior; it causes the select dropdown
 * which is triggered to jump to the left while the AJAX throbber is active.
 *
 * See also http://drupal.org/node/769936 (Drupal core issue); when that is
 * fixed it may no longer be necessary to do this.
 */
.views-admin .container-inline .progress-disabled {
  float: none;
}

/**
 * I wish this didn't have to be so specific
 */
.form-item-description-enable + .form-item-description {
  margin-top: 0;
}

.form-item-description-enable label {
  font-weight: bold;
}

.form-item-page-create,
.form-item-block-create {
  margin-top: 13px;
}

.form-item-page-create label,
.form-item-block-create label {
  font-weight: bold;
}

/* This makes the form elements after the "Display Format" label flow underneath the label */
.form-item-page-style-style-plugin > label,
.form-item-block-style-style-plugin > label {
  display: block;
}

.views-attachment .options-set label {
  font-weight: normal;
}

/* @end */

/* @group Rearrange filters
 *
 * Styling for the form that allows views filters to be rearranged.
 */

.group-populated {
  display: none;
}

td.group-title {
  font-weight: bold;
}

.views-ui-dialog td.group-title {
  margin: 0;
  padding: 0;
}

.views-ui-dialog td.group-title span {
  display: block;
  height: 1px;
  overflow: hidden;
}

.group-message .form-submit,
.views-remove-group-link,
#views-add-group {
  float: right;
  clear: both;
}

.views-operator-label {
  font-style: italic;
  font-weight: bold;
  padding-left: 0.5em; /* LTR */
  text-transform: uppercase;
}

.grouped-description,
.exposed-description {
  float: left;
  padding-top: 3px;
  padding-right: 10px;
}

/* This keeps the collapsible fieldsets of options from crashing into the bottom
 * of the edit option columns. Because the edit option columns are floated, the collapsible
 * fieldsets need to be floated as well so that the margin above the fieldset interacts with
 * the float edit option columns.
 */
#edit-options .collapsible {
  float: left;
  width: 100%;
}

#edit-options-more {
  clear: both;
}

/* @end */

/* @group Attachments */

.views-displays {
  border: 1px solid #ccc;
  padding-bottom: 36px;
}

.views-display-top {
  background-color: #f9f9f9;
  border-bottom: 1px solid #ccc;
  padding: 8px 8px 8px; /* LTR */
  position: relative;
}

.views-display-top .secondary {
  margin-right: 18em;
}

.views-display-top .secondary > li {
  margin-right: 6px;
  padding-left: 0;
}

.views-display-top .secondary > li:last-child {
  margin-right: 0;
}

#views-display-extra-actions li {
  padding: 3px 9px;
}

.views-display-top #views-display-top {
  max-width: 180px;
}

/* @end */

/* @group Attachment details tabs
 *
 * The tabs that switch between sections
 */

ul#views-display-menu-tabs {
  margin-right: 200px;
}

ul#views-display-menu-tabs li {
  margin-bottom: 5px;
}

ul#views-display-menu-tabs li.add ul.action-list li {
  margin: 0;
}

.views-displays .secondary a {
  border: 1px solid #cbcbcb;
  display: inline-block;
  font-size: small;
  line-height: 1.3333;
  padding: 3px 7px;
}

/**
 * Display a red border if the display doesn't validate.
 */
.views-displays ul.secondary li.active a.active.error,
.views-displays .secondary a.error {
  border: 2px solid #ed541d;
  padding: 1px 6px;
}

.views-displays .secondary a:focus {
  outline: none;
}

.views-displays .secondary a:hover,
.views-displays .secondary .active a {
  background-color: #666;
  color: #fff;
  border-bottom-width: 1px;
}

.views-displays .secondary .open > a {
  background-color: #f1f1f1;
  border-bottom: 1px solid transparent;
  position: relative;
}

.views-displays .secondary .open > a:hover {
  background-color: #f1f1f1;
}

.views-displays .secondary .action-list  li {
  background-color: #f1f1f1;
  border-color: #cbcbcb;
  border-style: solid;
  border-width: 0 1px;
  padding: 2px 9px;
}

.views-displays .secondary .action-list  li:first-child {
  border-width: 1px 1px 0;
}

.views-displays .secondary .action-list  li.last {
  border-width: 0 1px 1px;
}

.views-displays .secondary .action-list  li:last-child {
  border-width: 0 1px 1px;
}

.views-displays .secondary .action-list input.form-submit {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
  margin: 0;
  padding: 0;
}

.views-displays .secondary .action-list li:hover {
  background-color: #ddd;
}

/* @end */

/* @group Attachment details */

#edit-display-settings-title {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

#edit-display-settings-top {
  padding-bottom: 4px;
}

#edit-display-settings-content {
  margin-top: 12px;
}

#edit-display-settings-main {
  margin-top: 15px;
}

/* @end */

/* @group Attachment columns
 *
 * The columns that contain the option buckets e.g. Format and Basic Settings
 */

.views-display-column + .views-display-column {
  margin-top: 0;
}

/* @end */

/* @group Auto preview
 *
 * The auto-preview checkbox line.
 */

#views-ui-preview-form > div > div,
#views-ui-preview-form > div > input {
  float: left;
}

#views-ui-preview-form .form-type-checkbox {
  margin-top: 2px;
  margin-left: 2px;
}

#views-ui-preview-form .form-type-textfield {
  margin-top: 5px;
}

#views-ui-preview-form .arguments-preview {
  font-size: 1em;
}

#views-ui-preview-form .arguments-preview,
#views-ui-preview-form .form-type-textfield {
  margin-left: 14px;
}

#views-ui-preview-form .form-type-textfield label {
  display: inline-block;
  float: left;
  font-weight: normal;
  height: 6ex;
  margin-right: 0.75em;
}

#views-ui-preview-form .form-type-textfield .description {
  white-space: nowrap;
}

/* @end */

/* @group Attachment buckets
 *
 * These are the individual "buckets," or boxes, inside the display settings area
 */

.views-ui-display-tab-bucket {
  border: 1px solid #f3f3f3;
  line-height: 20px;
  margin: 0;
  padding-top: 4px;
}

.views-ui-display-tab-bucket + .views-ui-display-tab-bucket {
  border-top: medium none;
}

.views-ui-display-tab-bucket > h3,
.views-ui-display-tab-bucket > .views-display-setting {
  padding: 2px 6px 4px;
}

.views-ui-display-tab-bucket h3 {
  font-size: small;
  margin: 0;
}

.views-ui-display-tab-bucket .horizontal.actions {
  margin-right: 6px;
}

.views-ui-display-tab-bucket .actions.horizontal li + li {
  margin-left: 3px;
  padding-left: 3px;
}

.views-ui-display-tab-bucket.access {
  padding-top: 0;
}

.views-ui-display-tab-bucket.page-settings {
  border-bottom: medium none;
}

.views-display-setting .views-ajax-link {
  margin-left: 0.2083em;
  margin-right: 0.2083em;
}

/* @end */

/* @group Attachment bucket overridden
 *
 * Applies a overriden(italics) font style to overridden buckets.
 * The better way to implement this would be to add the overridden class
 * to the bucket header when the bucket is overridden and style it as a
 * generic icon classed element. For the moment, we'll style the bucket
 * header specifically with the overriden font style.
 */

.views-ui-display-tab-setting.overridden,
.views-ui-display-tab-bucket.overridden > h3 {
  font-style: italic;
}

/* @end */

/* @group Attachment bucket drop button */

.views-ui-display-tab-bucket {
  position: relative;
}

/* @end */

/* @group Attachment bucket rows
 *
 * This is each row within one of the "boxes."
 */

.views-ui-display-tab-bucket .views-display-setting {
  color: #666;
  font-size: 12px;
  padding-bottom: 2px;
}

.views-ui-display-tab-bucket .even {
  background-color: #f9f9f9;
}

.views-ui-display-tab-bucket .views-group-text {
  margin-top: 6px;
  margin-bottom: 6px;
}

.views-display-setting .label {
  margin-right: 3pt; /* LTR */
}

/* @end */

/* @group Preview
 *
 * The preview controls and the preview pane
 */

#edit-displays-preview-controls .fieldset-wrapper > * {
  float: left;
}

#edit-displays-preview-controls .fieldset-wrapper > .form-item {
  margin-top: 0.3333em;
}

#edit-displays-preview-controls .form-submit {
  display: inline-block;
  margin-right: 1em;
}

#edit-displays-preview-controls .form-type-textfield {
  margin-left: 1em;
  position: relative;
}

#edit-displays-preview-controls .form-type-textfield label {
  border-left: 1px solid #999;
  padding-left: 1em;
  position: absolute;
}

#edit-displays-preview-controls .form-type-textfield label:after {
  content: ":";
}

#edit-displays-preview-controls .form-type-textfield label ~ * {
  margin-left: 105px;
}

/* @end */

/* @group Modal dialog box
 *
 * The contents of the popup dialog on the views edit form.
 */

.views-ui-dialog {
  font-size: small;
  padding: 0;
}

.views-ui-dialog .ui-dialog-titlebar-close {
  background: url('../images/close.png') no-repeat scroll 6px 3px #f3f4ee;
  border-color: #aaa;
  -moz-border-radius: 0 10px 12px 0;
  -webkit-border-radius: 0 10px 12px 0;
  border-radius: 0 10px 12px 0;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  -moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);
  height: 22px;
  right: -28px;
  top: 0;
  width: 26px;
}

.views-ui-dialog .ui-dialog-titlebar-close span {
  display: none;
}

.views-filterable-options .form-type-checkbox {
  border: 1px solid #ccc;
  padding: 5px 8px;
  border-top: none;
}

.views-filterable-options {
  border-top: 1px solid #ccc;
}

.views-filterable-options .even .form-type-checkbox {
  background-color: #f3f4ee;
}

.filterable-option .form-item {
  margin-bottom: 0;
  margin-top: 0;
}

.views-filterable-options .form-type-checkbox .description {
  margin-top: 0;
  margin-bottom: 0;
}

#views-filterable-options-controls {
  margin: 1em 0;
}

#views-filterable-options-controls .form-item {
  width: 45%;
  margin-right: 2%; /* LTR */
}

#views-filterable-options-controls input,
#views-filterable-options-controls select {
  width: 200px;
}

.views-ui-dialog .views-filterable-options {
  margin-bottom: 10px;
}

.views-ui-dialog .views-add-form-selected.container-inline {
  padding-top: 0;
}

.views-ui-dialog .views-add-form-selected.container-inline > div {
  display: block;
}

.views-ui-dialog #edit-selected {
  margin: 0;
  padding: 6px 16px;
}

.views-ui-dialog #views-ajax-title,
.views-ui-dialog .views-override {
  background-color: #f3f4ee;
}

.views-ui-dialog .views-override {
  padding: 0 13px 8px;
}

.views-ui-dialog .views-override > * {
  margin: 0;
}

.views-ui-dialog #views-ajax-title {
  font-size: 15px;
  padding: 8px 13px;
}

.views-ui-dialog #views-progress-indicator {
  font-size: 11px;
  position: absolute;
  right: 10px; /* LTR */
  top: 8px;
}

.views-ui-dialog #views-progress-indicator:before {
  content: "\003C\00A0";
}

.views-ui-dialog #views-progress-indicator:after {
  content: "\00A0\003E";
}

.views-ui-dialog .scroll {
  border: 1px solid #ccc;
  border-width: 1px 0;
  padding: 8px 13px;
}

.views-ui-dialog fieldset .item-list {
  padding-left: 2em;
}

.views-ui-dialog .form-buttons {
  background-color: #f3f4ee;
  padding: 8px 13px;
}
.views-ui-dialog .form-buttons input {
  margin-bottom: 0;
  margin-right: 0;
}

/* @end */

/* @group Configure filter criteria */

/* @todo The width and border info could be moved into a more generic class. */
/* @todo Make this a class to be used anywhere there's node types? */
.form-type-checkboxes #edit-options-value,
.form-type-checkboxes #edit-options-validate-options-node-types {
  border-color: #ccc;
  border-style: solid;
  border-width: 1px;
  max-height: 210px;
  overflow: auto;
  margin-top: 5px;
  padding: 0 5px;
  width: 190px;
}

/* @end */

/* @group Rearrange filter criteria */

#views-ui-rearrange-filter-form table {
  border-collapse: collapse;
}

#views-ui-rearrange-filter-form tr td[rowspan] {
  border-color: #cdcdcd;
  border-style: solid;
  border-width: 0 1px 1px 1px;
}

#views-ui-rearrange-filter-form tr[id^="views-row"] {
  border-right: 1px solid #cdcdcd;
}

#views-ui-rearrange-filter-form tr[id^="views-row"].even td {
  background-color: #f3f4ed;
}

#views-ui-rearrange-filter-form .views-group-title {
  border-top: 1px solid #cdcdcd;
}

#views-ui-rearrange-filter-form .group-empty {
  border-bottom: 1px solid #cdcdcd;
}

/* @end */

/* @group Expose filter form items */

.form-item-options-expose-required,
.form-item-options-expose-label,
.form-item-options-expose-description {
  margin-bottom: 6px;
  margin-left: 18px;
  margin-top: 6px;
}

/* @end */

/* @group Live preview elements */

#views-preview-wrapper {
  border: 1px solid #ccc;
  border-top: 2px solid #ccc;
  padding-bottom: 12px;
  padding-top: 12px;
}

#views-ui-preview-form {
  margin: 12px;
}

#views-live-preview {
  margin: 0 12px;
}

#views-live-preview .views-query-info {
  overflow: auto;
}

/* Intentionally targeting h1 */
#views-live-preview h1.section-title {
  color: #818181;
  display: inline-block;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.6154;
  margin-bottom: 0;
  margin-top: 0;
}

#views-live-preview .view > * {
  margin-top: 18px;
}

#views-live-preview .preview-section {
  border: 1px dashed #dedede;
  margin: 0 -5px;
  padding: 3px 5px;
}

#views-live-preview li.views-row + li.views-row {
  margin-top: 18px;
}

/* The div.views-row is intentional and excludes li.views-row, for example */
#views-live-preview div.views-row + div.views-row {
  margin-top: 36px;
}

/* @group Query info table */

.views-query-info table {
  border-collapse: separate;
  border-color: #ddd;
  border-spacing: 0;
  margin: 10px 0;
}

.views-query-info table tr {
  background-color: #f9f9f9;
}

.views-query-info table th,
.views-query-info table td {
  color: #666;
  padding: 4px 10px;
}

/* @end */

/* @group Grid */

#views-live-preview .views-view-grid th,
#views-live-preview .views-view-grid td {
  vertical-align: top;
}

/* @end */

/* @group HTML list */

#views-live-preview .view-content > .item-list > ul {
  list-style-position: outside;
  padding-left: 21px; /* LTR */
}

/* @end */

/* @end */

/* @group Add/edit argument form */

#edit-options-default-action {
  width: 300px;
  float: left;
}

#edit-options-exception.collapsible {
  float: right;
  width: 250px;
  margin-top: -2px;
}

/* @end */

/* @group AJAX */

/* Hide the drupal system throbber image */
.ajax-progress .throbber {
  display: none;
}

.ajax-progress-throbber {
  background-color: #232323;
  background-image: url('../images/loading-small.gif');
  background-position: center center;
  background-repeat: no-repeat;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  height: 24px;
  opacity: .9;
  padding: 4px;
  width: 24px;
}

/* @end */

/* @group Drupal
 *
 * Overrides to Drupal system CSS
 */
div.messages {
  margin-bottom: 18px;
}

/* @end */

File

css/views-admin.theme.css

View source 
  1. /**

  2.  * The .theme.css file is intended to contain presentation declarations including

  3.  * images, borders, colors, and fonts.

  4.  */

  5. 

  6. /* @group Reset */

  7. 

  8. .views-admin .links {

  9.   list-style: none outside none;

  10.   margin: 0;

  11. }

  12. 

  13. .views-admin a:hover {

  14.   text-decoration: none;

  15. }

  16. 

  17. /* @end */

  18. 

  19. /* @group Layout */

  20. 

  21. .box-padding {

  22.   padding-left: 12px;

  23.   padding-right: 12px;

  24. }

  25. 

  26. .box-margin {

  27.   margin: 12px 12px 0 12px;

  28. }

  29. 

  30. /* @end */

  31. 

  32. /* @group Icons */

  33. 

  34. .views-admin .icon {

  35.   height: 16px;

  36.   width: 16px;

  37. }

  38. 

  39. .views-admin .icon,

  40. .views-admin .icon-text {

  41.   background-attachment: scroll;

  42.   background-image: url('../images/sprites.png');

  43.   background-position: left top; /* LTR */

  44.   background-repeat: no-repeat;

  45. }

  46. 

  47. .views-admin a.icon {

  48.   background-image: url('../images/sprites.png'),

  49.   -moz-linear-gradient(

  50.   -90deg,

  51.   #fff 0px,

  52.   #e8e8e8 100%

  53.   );

  54.   background-image: url('../images/sprites.png'),

  55.   -webkit-gradient(

  56.   linear,

  57.   left top,

  58.   left bottom,

  59.   color-stop(0.0, rgba(255, 255, 255, 1.0)),

  60.   color-stop(1.0, rgba(232, 232, 232, 1.0))

  61.   );

  62.   background-image: url('../images/sprites.png'),

  63.   -webkit-linear-gradient(

  64.   -90deg,

  65.   #fff 0px,

  66.   #e8e8e8 100%

  67.   );

  68.   background-repeat: no-repeat, repeat-y;

  69.   border: 1px solid #ddd;

  70.   -moz-border-radius: 4px;

  71.   -webkit-border-radius: 4px;

  72.   border-radius: 4px;

  73.   -moz-box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;

  74.   -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;

  75.   box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;

  76. }

  77. 

  78. .views-admin a.icon:hover {

  79.   border-color: #d0d0d0;

  80.   -moz-box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;

  81.   -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;

  82.   box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;

  83. }

  84. 

  85. .views-admin a.icon:active {

  86.   border-color: #c0c0c0;

  87. }

  88. 

  89. /**

  90.  * Targets a  element inside an  element.

  91.  * This assumes no visible text from the span.

  92.  */

  93. .views-admin span.icon {

  94.   display: inline-block;

  95.   float: left;

  96.   position: relative;

  97. }

  98. 

  99. .views-admin .icon.compact {

  100.   display: block;

  101.   overflow: hidden;

  102.   text-indent: -9999px;

  103. }

  104. 

  105. /* Targets any element with an icon -> text combo */

  106. .views-admin .icon-text {

  107.   padding-left: 19px; /* LTR */

  108. }

  109. 

  110. .views-admin .icon.linked {

  111.   background-position: center -153px;

  112. }

  113. 

  114. .views-admin .icon.unlinked {

  115.   background-position: center -195px;

  116. }

  117. 

  118. .views-admin .icon.add {

  119.   background-position: center 3px;

  120. }

  121. 

  122. .views-admin a.icon.add {

  123.   background-position: center 3px, left top;

  124. }

  125. 

  126. .views-admin .icon.delete {

  127.   background-position: center -52px;

  128. }

  129. 

  130. .views-admin a.icon.delete {

  131.   background-position: center -52px, left top;

  132. }

  133. 

  134. .views-admin .icon.rearrange {

  135.   background-position: center -111px;

  136. }

  137. 

  138. .views-admin a.icon.rearrange {

  139.   background-position: center -111px, left top;

  140. }

  141. 

  142. .views-displays .secondary a:hover > .icon.add {

  143.   background-position: center -25px;

  144. }

  145. 

  146. .views-displays .secondary .open a:hover > .icon.add {

  147.   background-position: center 3px;

  148. }

  149. 

  150. /* @end */

  151. 

  152. /* @group Forms */

  153. 

  154. fieldset.box-padding {

  155.   border: none;

  156. }

  157. 

  158. .views-admin fieldset fieldset {

  159.   margin-bottom: 0;

  160. }

  161. 

  162. .form-item {

  163.   margin-top: 9px;

  164.   padding-bottom: 0;

  165.   padding-top: 0;

  166. }

  167. 

  168. .form-type-checkbox {

  169.   margin-top: 6px;

  170. }

  171. 

  172. input.form-checkbox,

  173. input.form-radio {

  174.   vertical-align: baseline;

  175. }

  176. 

  177. .form-submit:not(.js-hide) + .form-submit,

  178. .views-admin a.button:not(.js-hide) + a.button {

  179.   margin-left: 1em; /* LTR */

  180. }

  181. 

  182. .container-inline {

  183.   padding-top: 15px;

  184. }

  185. 

  186. .container-inline > * + *,

  187. .container-inline .fieldset-wrapper > * + * {

  188.   padding-left: 4pt; /* LTR */

  189. }

  190. 

  191. .views-admin fieldset fieldset.container-inline {

  192.   margin-bottom: 1em;

  193.   margin-top: 1em;

  194.   padding-top: 0;

  195. }

  196. 

  197. .views-admin fieldset fieldset.container-inline > .fieldset-wrapper {

  198.   padding-bottom: 0;

  199. }

  200. 

  201. /* Indent form elements so they're directly underneath the label of the checkbox that reveals them */

  202. .views-admin .form-type-checkbox + .form-wrapper {

  203.   margin-left: 16px; /* LTR */

  204. }

  205. 

  206. /* Hide 'remove' checkboxes. */

  207. .views-remove-checkbox {

  208.   display: none;

  209. }

  210. 

  211. /* sizes the labels of checkboxes and radio button to the height of the text */

  212. .views-admin .form-type-checkbox label,

  213. .views-admin .form-type-radio label {

  214.   line-height: 2;

  215. }

  216. 

  217. /* @group Dependent options */

  218. 

  219. .views-admin-dependent .form-item {

  220.   margin-bottom: 6px;

  221.   margin-top: 6px;

  222. }

  223. 

  224. /* @end */

  225. 

  226. /* @end */

  227. 

  228. /* @group Lists */

  229. 

  230. .horizontal > * + * {

  231.   margin-left: 9px; /* LTR */

  232.   padding-left: 9px; /* LTR */

  233. }

  234. 

  235. .views-ui-view-title {

  236.   font-weight: bold;

  237. }

  238. 

  239. /* @end */

  240. 

  241. /* @group Messages */

  242. 

  243. .view-changed {

  244.   margin-bottom: 21px;

  245. }

  246. 

  247. /* @end */

  248. 

  249. /* @group Headings */

  250. 

  251. /* Intentionally targeting h1 */

  252. .views-admin h1.unit-title {

  253.   font-size: 15px;

  254.   line-height: 1.6154;

  255.   margin-bottom: 0;

  256.   margin-top: 18px;

  257. }

  258. 

  259. /* @end */

  260. 

  261. /* @group Tables */

  262. 

  263. table td,

  264. table th {

  265.   vertical-align: top;

  266. }

  267. 

  268. /* @end */

  269. 

  270. /* @group List views */

  271. 

  272. /* These header classes are ambiguous and should be scoped to th elements */

  273. 

  274. th.views-ui-name {

  275.   width: 18%;

  276. }

  277. 

  278. th.views-ui-description {

  279.   width: 26%;

  280. }

  281. 

  282. th.views-ui-tag {

  283.   width: 8%;

  284. }

  285. 

  286. th.views-ui-path {

  287.   width: auto;

  288. }

  289. 

  290. th.views-ui-operations {

  291.   width: 24%;

  292. }

  293. 

  294. /* @end */

  295. 

  296. /* @group Add view */

  297. 

  298. /**

  299.  * Drupal core forces AJAX triggering elements to float left when they are

  300.  * disabled due to AJAX processing. On the add view page, we have inline

  301.  * containers where we don't want that behavior; it causes the select dropdown

  302.  * which is triggered to jump to the left while the AJAX throbber is active.

  303.  *

  304.  * See also http://drupal.org/node/769936 (Drupal core issue); when that is

  305.  * fixed it may no longer be necessary to do this.

  306.  */

  307. .views-admin .container-inline .progress-disabled {

  308.   float: none;

  309. }

  310. 

  311. /**

  312.  * I wish this didn't have to be so specific

  313.  */

  314. .form-item-description-enable + .form-item-description {

  315.   margin-top: 0;

  316. }

  317. 

  318. .form-item-description-enable label {

  319.   font-weight: bold;

  320. }

  321. 

  322. .form-item-page-create,

  323. .form-item-block-create {

  324.   margin-top: 13px;

  325. }

  326. 

  327. .form-item-page-create label,

  328. .form-item-block-create label {

  329.   font-weight: bold;

  330. }

  331. 

  332. /* This makes the form elements after the "Display Format" label flow underneath the label */

  333. .form-item-page-style-style-plugin > label,

  334. .form-item-block-style-style-plugin > label {

  335.   display: block;

  336. }

  337. 

  338. .views-attachment .options-set label {

  339.   font-weight: normal;

  340. }

  341. 

  342. /* @end */

  343. 

  344. /* @group Rearrange filters

  345.  *

  346.  * Styling for the form that allows views filters to be rearranged.

  347.  */

  348. 

  349. .group-populated {

  350.   display: none;

  351. }

  352. 

  353. td.group-title {

  354.   font-weight: bold;

  355. }

  356. 

  357. .views-ui-dialog td.group-title {

  358.   margin: 0;

  359.   padding: 0;

  360. }

  361. 

  362. .views-ui-dialog td.group-title span {

  363.   display: block;

  364.   height: 1px;

  365.   overflow: hidden;

  366. }

  367. 

  368. .group-message .form-submit,

  369. .views-remove-group-link,

  370. #views-add-group {

  371.   float: right;

  372.   clear: both;

  373. }

  374. 

  375. .views-operator-label {

  376.   font-style: italic;

  377.   font-weight: bold;

  378.   padding-left: 0.5em; /* LTR */

  379.   text-transform: uppercase;

  380. }

  381. 

  382. .grouped-description,

  383. .exposed-description {

  384.   float: left;

  385.   padding-top: 3px;

  386.   padding-right: 10px;

  387. }

  388. 

  389. /* This keeps the collapsible fieldsets of options from crashing into the bottom

  390.  * of the edit option columns. Because the edit option columns are floated, the collapsible

  391.  * fieldsets need to be floated as well so that the margin above the fieldset interacts with

  392.  * the float edit option columns.

  393.  */

  394. #edit-options .collapsible {

  395.   float: left;

  396.   width: 100%;

  397. }

  398. 

  399. #edit-options-more {

  400.   clear: both;

  401. }

  402. 

  403. /* @end */

  404. 

  405. /* @group Attachments */

  406. 

  407. .views-displays {

  408.   border: 1px solid #ccc;

  409.   padding-bottom: 36px;

  410. }

  411. 

  412. .views-display-top {

  413.   background-color: #f9f9f9;

  414.   border-bottom: 1px solid #ccc;

  415.   padding: 8px 8px 8px; /* LTR */

  416.   position: relative;

  417. }

  418. 

  419. .views-display-top .secondary {

  420.   margin-right: 18em;

  421. }

  422. 

  423. .views-display-top .secondary > li {

  424.   margin-right: 6px;

  425.   padding-left: 0;

  426. }

  427. 

  428. .views-display-top .secondary > li:last-child {

  429.   margin-right: 0;

  430. }

  431. 

  432. #views-display-extra-actions li {

  433.   padding: 3px 9px;

  434. }

  435. 

  436. .views-display-top #views-display-top {

  437.   max-width: 180px;

  438. }

  439. 

  440. /* @end */

  441. 

  442. /* @group Attachment details tabs

  443.  *

  444.  * The tabs that switch between sections

  445.  */

  446. 

  447. ul#views-display-menu-tabs {

  448.   margin-right: 200px;

  449. }

  450. 

  451. ul#views-display-menu-tabs li {

  452.   margin-bottom: 5px;

  453. }

  454. 

  455. ul#views-display-menu-tabs li.add ul.action-list li {

  456.   margin: 0;

  457. }

  458. 

  459. .views-displays .secondary a {

  460.   border: 1px solid #cbcbcb;

  461.   display: inline-block;

  462.   font-size: small;

  463.   line-height: 1.3333;

  464.   padding: 3px 7px;

  465. }

  466. 

  467. /**

  468.  * Display a red border if the display doesn't validate.

  469.  */

  470. .views-displays ul.secondary li.active a.active.error,

  471. .views-displays .secondary a.error {

  472.   border: 2px solid #ed541d;

  473.   padding: 1px 6px;

  474. }

  475. 

  476. .views-displays .secondary a:focus {

  477.   outline: none;

  478. }

  479. 

  480. .views-displays .secondary a:hover,

  481. .views-displays .secondary .active a {

  482.   background-color: #666;

  483.   color: #fff;

  484.   border-bottom-width: 1px;

  485. }

  486. 

  487. .views-displays .secondary .open > a {

  488.   background-color: #f1f1f1;

  489.   border-bottom: 1px solid transparent;

  490.   position: relative;

  491. }

  492. 

  493. .views-displays .secondary .open > a:hover {

  494.   background-color: #f1f1f1;

  495. }

  496. 

  497. .views-displays .secondary .action-list  li {

  498.   background-color: #f1f1f1;

  499.   border-color: #cbcbcb;

  500.   border-style: solid;

  501.   border-width: 0 1px;

  502.   padding: 2px 9px;

  503. }

  504. 

  505. .views-displays .secondary .action-list  li:first-child {

  506.   border-width: 1px 1px 0;

  507. }

  508. 

  509. .views-displays .secondary .action-list  li.last {

  510.   border-width: 0 1px 1px;

  511. }

  512. 

  513. .views-displays .secondary .action-list  li:last-child {

  514.   border-width: 0 1px 1px;

  515. }

  516. 

  517. .views-displays .secondary .action-list input.form-submit {

  518.   background: none repeat scroll 0 0 transparent;

  519.   border: medium none;

  520.   margin: 0;

  521.   padding: 0;

  522. }

  523. 

  524. .views-displays .secondary .action-list li:hover {

  525.   background-color: #ddd;

  526. }

  527. 

  528. /* @end */

  529. 

  530. /* @group Attachment details */

  531. 

  532. #edit-display-settings-title {

  533.   font-size: 14px;

  534.   line-height: 1.5;

  535.   margin: 0;

  536. }

  537. 

  538. #edit-display-settings-top {

  539.   padding-bottom: 4px;

  540. }

  541. 

  542. #edit-display-settings-content {

  543.   margin-top: 12px;

  544. }

  545. 

  546. #edit-display-settings-main {

  547.   margin-top: 15px;

  548. }

  549. 

  550. /* @end */

  551. 

  552. /* @group Attachment columns

  553.  *

  554.  * The columns that contain the option buckets e.g. Format and Basic Settings

  555.  */

  556. 

  557. .views-display-column + .views-display-column {

  558.   margin-top: 0;

  559. }

  560. 

  561. /* @end */

  562. 

  563. /* @group Auto preview

  564.  *

  565.  * The auto-preview checkbox line.

  566.  */

  567. 

  568. #views-ui-preview-form > div > div,

  569. #views-ui-preview-form > div > input {

  570.   float: left;

  571. }

  572. 

  573. #views-ui-preview-form .form-type-checkbox {

  574.   margin-top: 2px;

  575.   margin-left: 2px;

  576. }

  577. 

  578. #views-ui-preview-form .form-type-textfield {

  579.   margin-top: 5px;

  580. }

  581. 

  582. #views-ui-preview-form .arguments-preview {

  583.   font-size: 1em;

  584. }

  585. 

  586. #views-ui-preview-form .arguments-preview,

  587. #views-ui-preview-form .form-type-textfield {

  588.   margin-left: 14px;

  589. }

  590. 

  591. #views-ui-preview-form .form-type-textfield label {

  592.   display: inline-block;

  593.   float: left;

  594.   font-weight: normal;

  595.   height: 6ex;

  596.   margin-right: 0.75em;

  597. }

  598. 

  599. #views-ui-preview-form .form-type-textfield .description {

  600.   white-space: nowrap;

  601. }

  602. 

  603. /* @end */

  604. 

  605. /* @group Attachment buckets

  606.  *

  607.  * These are the individual "buckets," or boxes, inside the display settings area

  608.  */

  609. 

  610. .views-ui-display-tab-bucket {

  611.   border: 1px solid #f3f3f3;

  612.   line-height: 20px;

  613.   margin: 0;

  614.   padding-top: 4px;

  615. }

  616. 

  617. .views-ui-display-tab-bucket + .views-ui-display-tab-bucket {

  618.   border-top: medium none;

  619. }

  620. 

  621. .views-ui-display-tab-bucket > h3,

  622. .views-ui-display-tab-bucket > .views-display-setting {

  623.   padding: 2px 6px 4px;

  624. }

  625. 

  626. .views-ui-display-tab-bucket h3 {

  627.   font-size: small;

  628.   margin: 0;

  629. }

  630. 

  631. .views-ui-display-tab-bucket .horizontal.actions {

  632.   margin-right: 6px;

  633. }

  634. 

  635. .views-ui-display-tab-bucket .actions.horizontal li + li {

  636.   margin-left: 3px;

  637.   padding-left: 3px;

  638. }

  639. 

  640. .views-ui-display-tab-bucket.access {

  641.   padding-top: 0;

  642. }

  643. 

  644. .views-ui-display-tab-bucket.page-settings {

  645.   border-bottom: medium none;

  646. }

  647. 

  648. .views-display-setting .views-ajax-link {

  649.   margin-left: 0.2083em;

  650.   margin-right: 0.2083em;

  651. }

  652. 

  653. /* @end */

  654. 

  655. /* @group Attachment bucket overridden

  656.  *

  657.  * Applies a overriden(italics) font style to overridden buckets.

  658.  * The better way to implement this would be to add the overridden class

  659.  * to the bucket header when the bucket is overridden and style it as a

  660.  * generic icon classed element. For the moment, we'll style the bucket

  661.  * header specifically with the overriden font style.

  662.  */

  663. 

  664. .views-ui-display-tab-setting.overridden,

  665. .views-ui-display-tab-bucket.overridden > h3 {

  666.   font-style: italic;

  667. }

  668. 

  669. /* @end */

  670. 

  671. /* @group Attachment bucket drop button */

  672. 

  673. .views-ui-display-tab-bucket {

  674.   position: relative;

  675. }

  676. 

  677. /* @end */

  678. 

  679. /* @group Attachment bucket rows

  680.  *

  681.  * This is each row within one of the "boxes."

  682.  */

  683. 

  684. .views-ui-display-tab-bucket .views-display-setting {

  685.   color: #666;

  686.   font-size: 12px;

  687.   padding-bottom: 2px;

  688. }

  689. 

  690. .views-ui-display-tab-bucket .even {

  691.   background-color: #f9f9f9;

  692. }

  693. 

  694. .views-ui-display-tab-bucket .views-group-text {

  695.   margin-top: 6px;

  696.   margin-bottom: 6px;

  697. }

  698. 

  699. .views-display-setting .label {

  700.   margin-right: 3pt; /* LTR */

  701. }

  702. 

  703. /* @end */

  704. 

  705. /* @group Preview

  706.  *

  707.  * The preview controls and the preview pane

  708.  */

  709. 

  710. #edit-displays-preview-controls .fieldset-wrapper > * {

  711.   float: left;

  712. }

  713. 

  714. #edit-displays-preview-controls .fieldset-wrapper > .form-item {

  715.   margin-top: 0.3333em;

  716. }

  717. 

  718. #edit-displays-preview-controls .form-submit {

  719.   display: inline-block;

  720.   margin-right: 1em;

  721. }

  722. 

  723. #edit-displays-preview-controls .form-type-textfield {

  724.   margin-left: 1em;

  725.   position: relative;

  726. }

  727. 

  728. #edit-displays-preview-controls .form-type-textfield label {

  729.   border-left: 1px solid #999;

  730.   padding-left: 1em;

  731.   position: absolute;

  732. }

  733. 

  734. #edit-displays-preview-controls .form-type-textfield label:after {

  735.   content: ":";

  736. }

  737. 

  738. #edit-displays-preview-controls .form-type-textfield label ~ * {

  739.   margin-left: 105px;

  740. }

  741. 

  742. /* @end */

  743. 

  744. /* @group Modal dialog box

  745.  *

  746.  * The contents of the popup dialog on the views edit form.

  747.  */

  748. 

  749. .views-ui-dialog {

  750.   font-size: small;

  751.   padding: 0;

  752. }

  753. 

  754. .views-ui-dialog .ui-dialog-titlebar-close {

  755.   background: url('../images/close.png') no-repeat scroll 6px 3px #f3f4ee;

  756.   border-color: #aaa;

  757.   -moz-border-radius: 0 10px 12px 0;

  758.   -webkit-border-radius: 0 10px 12px 0;

  759.   border-radius: 0 10px 12px 0;

  760.   border-style: solid;

  761.   border-width: 1px 1px 1px 0;

  762.   -moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);

  763.   -webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);

  764.   box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1);

  765.   height: 22px;

  766.   right: -28px;

  767.   top: 0;

  768.   width: 26px;

  769. }

  770. 

  771. .views-ui-dialog .ui-dialog-titlebar-close span {

  772.   display: none;

  773. }

  774. 

  775. .views-filterable-options .form-type-checkbox {

  776.   border: 1px solid #ccc;

  777.   padding: 5px 8px;

  778.   border-top: none;

  779. }

  780. 

  781. .views-filterable-options {

  782.   border-top: 1px solid #ccc;

  783. }

  784. 

  785. .views-filterable-options .even .form-type-checkbox {

  786.   background-color: #f3f4ee;

  787. }

  788. 

  789. .filterable-option .form-item {

  790.   margin-bottom: 0;

  791.   margin-top: 0;

  792. }

  793. 

  794. .views-filterable-options .form-type-checkbox .description {

  795.   margin-top: 0;

  796.   margin-bottom: 0;

  797. }

  798. 

  799. #views-filterable-options-controls {

  800.   margin: 1em 0;

  801. }

  802. 

  803. #views-filterable-options-controls .form-item {

  804.   width: 45%;

  805.   margin-right: 2%; /* LTR */

  806. }

  807. 

  808. #views-filterable-options-controls input,

  809. #views-filterable-options-controls select {

  810.   width: 200px;

  811. }

  812. 

  813. .views-ui-dialog .views-filterable-options {

  814.   margin-bottom: 10px;

  815. }

  816. 

  817. .views-ui-dialog .views-add-form-selected.container-inline {

  818.   padding-top: 0;

  819. }

  820. 

  821. .views-ui-dialog .views-add-form-selected.container-inline > div {

  822.   display: block;

  823. }

  824. 

  825. .views-ui-dialog #edit-selected {

  826.   margin: 0;

  827.   padding: 6px 16px;

  828. }

  829. 

  830. .views-ui-dialog #views-ajax-title,

  831. .views-ui-dialog .views-override {

  832.   background-color: #f3f4ee;

  833. }

  834. 

  835. .views-ui-dialog .views-override {

  836.   padding: 0 13px 8px;

  837. }

  838. 

  839. .views-ui-dialog .views-override > * {

  840.   margin: 0;

  841. }

  842. 

  843. .views-ui-dialog #views-ajax-title {

  844.   font-size: 15px;

  845.   padding: 8px 13px;

  846. }

  847. 

  848. .views-ui-dialog #views-progress-indicator {

  849.   font-size: 11px;

  850.   position: absolute;

  851.   right: 10px; /* LTR */

  852.   top: 8px;

  853. }

  854. 

  855. .views-ui-dialog #views-progress-indicator:before {

  856.   content: "\003C\00A0";

  857. }

  858. 

  859. .views-ui-dialog #views-progress-indicator:after {

  860.   content: "\00A0\003E";

  861. }

  862. 

  863. .views-ui-dialog .scroll {

  864.   border: 1px solid #ccc;

  865.   border-width: 1px 0;

  866.   padding: 8px 13px;

  867. }

  868. 

  869. .views-ui-dialog fieldset .item-list {

  870.   padding-left: 2em;

  871. }

  872. 

  873. .views-ui-dialog .form-buttons {

  874.   background-color: #f3f4ee;

  875.   padding: 8px 13px;

  876. }

  877. .views-ui-dialog .form-buttons input {

  878.   margin-bottom: 0;

  879.   margin-right: 0;

  880. }

  881. 

  882. /* @end */

  883. 

  884. /* @group Configure filter criteria */

  885. 

  886. /* @todo The width and border info could be moved into a more generic class. */

  887. /* @todo Make this a class to be used anywhere there's node types? */

  888. .form-type-checkboxes #edit-options-value,

  889. .form-type-checkboxes #edit-options-validate-options-node-types {

  890.   border-color: #ccc;

  891.   border-style: solid;

  892.   border-width: 1px;

  893.   max-height: 210px;

  894.   overflow: auto;

  895.   margin-top: 5px;

  896.   padding: 0 5px;

  897.   width: 190px;

  898. }

  899. 

  900. /* @end */

  901. 

  902. /* @group Rearrange filter criteria */

  903. 

  904. #views-ui-rearrange-filter-form table {

  905.   border-collapse: collapse;

  906. }

  907. 

  908. #views-ui-rearrange-filter-form tr td[rowspan] {

  909.   border-color: #cdcdcd;

  910.   border-style: solid;

  911.   border-width: 0 1px 1px 1px;

  912. }

  913. 

  914. #views-ui-rearrange-filter-form tr[id^="views-row"] {

  915.   border-right: 1px solid #cdcdcd;

  916. }

  917. 

  918. #views-ui-rearrange-filter-form tr[id^="views-row"].even td {

  919.   background-color: #f3f4ed;

  920. }

  921. 

  922. #views-ui-rearrange-filter-form .views-group-title {

  923.   border-top: 1px solid #cdcdcd;

  924. }

  925. 

  926. #views-ui-rearrange-filter-form .group-empty {

  927.   border-bottom: 1px solid #cdcdcd;

  928. }

  929. 

  930. /* @end */

  931. 

  932. /* @group Expose filter form items */

  933. 

  934. .form-item-options-expose-required,

  935. .form-item-options-expose-label,

  936. .form-item-options-expose-description {

  937.   margin-bottom: 6px;

  938.   margin-left: 18px;

  939.   margin-top: 6px;

  940. }

  941. 

  942. /* @end */

  943. 

  944. /* @group Live preview elements */

  945. 

  946. #views-preview-wrapper {

  947.   border: 1px solid #ccc;

  948.   border-top: 2px solid #ccc;

  949.   padding-bottom: 12px;

  950.   padding-top: 12px;

  951. }

  952. 

  953. #views-ui-preview-form {

  954.   margin: 12px;

  955. }

  956. 

  957. #views-live-preview {

  958.   margin: 0 12px;

  959. }

  960. 

  961. #views-live-preview .views-query-info {

  962.   overflow: auto;

  963. }

  964. 

  965. /* Intentionally targeting h1 */

  966. #views-live-preview h1.section-title {

  967.   color: #818181;

  968.   display: inline-block;

  969.   font-size: 13px;

  970.   font-weight: normal;

  971.   line-height: 1.6154;

  972.   margin-bottom: 0;

  973.   margin-top: 0;

  974. }

  975. 

  976. #views-live-preview .view > * {

  977.   margin-top: 18px;

  978. }

  979. 

  980. #views-live-preview .preview-section {

  981.   border: 1px dashed #dedede;

  982.   margin: 0 -5px;

  983.   padding: 3px 5px;

  984. }

  985. 

  986. #views-live-preview li.views-row + li.views-row {

  987.   margin-top: 18px;

  988. }

  989. 

  990. /* The div.views-row is intentional and excludes li.views-row, for example */

  991. #views-live-preview div.views-row + div.views-row {

  992.   margin-top: 36px;

  993. }

  994. 

  995. /* @group Query info table */

  996. 

  997. .views-query-info table {

  998.   border-collapse: separate;

  999.   border-color: #ddd;

  1000.   border-spacing: 0;

  1001.   margin: 10px 0;

  1002. }

  1003. 

  1004. .views-query-info table tr {

  1005.   background-color: #f9f9f9;

  1006. }

  1007. 

  1008. .views-query-info table th,

  1009. .views-query-info table td {

  1010.   color: #666;

  1011.   padding: 4px 10px;

  1012. }

  1013. 

  1014. /* @end */

  1015. 

  1016. /* @group Grid */

  1017. 

  1018. #views-live-preview .views-view-grid th,

  1019. #views-live-preview .views-view-grid td {

  1020.   vertical-align: top;

  1021. }

  1022. 

  1023. /* @end */

  1024. 

  1025. /* @group HTML list */

  1026. 

  1027. #views-live-preview .view-content > .item-list > ul {

  1028.   list-style-position: outside;

  1029.   padding-left: 21px; /* LTR */

  1030. }

  1031. 

  1032. /* @end */

  1033. 

  1034. /* @end */

  1035. 

  1036. /* @group Add/edit argument form */

  1037. 

  1038. #edit-options-default-action {

  1039.   width: 300px;

  1040.   float: left;

  1041. }

  1042. 

  1043. #edit-options-exception.collapsible {

  1044.   float: right;

  1045.   width: 250px;

  1046.   margin-top: -2px;

  1047. }

  1048. 

  1049. /* @end */

  1050. 

  1051. /* @group AJAX */

  1052. 

  1053. /* Hide the drupal system throbber image */

  1054. .ajax-progress .throbber {

  1055.   display: none;

  1056. }

  1057. 

  1058. .ajax-progress-throbber {

  1059.   background-color: #232323;

  1060.   background-image: url('../images/loading-small.gif');

  1061.   background-position: center center;

  1062.   background-repeat: no-repeat;

  1063.   -moz-border-radius: 7px;

  1064.   -webkit-border-radius: 7px;

  1065.   border-radius: 7px;

  1066.   height: 24px;

  1067.   opacity: .9;

  1068.   padding: 4px;

  1069.   width: 24px;

  1070. }

  1071. 

  1072. /* @end */

  1073. 

  1074. /* @group Drupal

  1075.  *

  1076.  * Overrides to Drupal system CSS

  1077.  */

  1078. div.messages {

  1079.   margin-bottom: 18px;

  1080. }

  1081. 

  1082. /* @end */