You are here

Home » API reference » Panels 6.3

panels_dnd.css in Panels 6.3

Same filename and directory in other branches
  1. 5.2 css/panels_dnd.css
  2. 6.2 css/panels_dnd.css
  3. 7.3 css/panels_dnd.css
#panels-dnd-main {
  margin: 0.5em 0;
}

#panels-dnd-main div.panels-display {
  padding: 0 0 .5em 0;
  border: 1px dashed #ddd;
  background: #f8f8f8;
  -webkit-border-radius: 0.333em;
  -moz-border-radius: 0.333em;
}

#panels-dnd-main div.panels-display h2.label {
  color: #555;
  text-shadow: #fff 1px 1px 1px;
  text-align: center;
  font-size: 13pt;
  margin: 0 0 .5em 0;
  padding-right: 16px;
  vertical-align: middle;
}

#panels-dnd-main div.panels-display .pane-add {
  float: left;
  margin: 2px;
  background: #999;
  border: 1px solid #fff;
}

#panels-dnd-main div.panels-display .pane-add-link {
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  float: left;
  margin: 2px 2px 2px 4px;
}

div.panels-set-title-hide .panels-set-title {
  display: none !important;
}

/* Add Icon */
#panels-dnd-main div.panels-display .pane-add-link  {
}
#panels-dnd-main div.panels-display .pane-add-link img {
  display: none;
}
#panels-dnd-main div.panels-display .pane-add-link a.ctools-dropdown-image-link {
  border: none;
  width: 16px;
  height: 18px;
  float: left;
  background: url('../images/sprite.png') no-repeat 0 -1178px;
/*  background: url('../images/sprite.png') no-repeat -166px -582px; */
}

.panel-portlet {
  padding: 0em;
  background: #ffffff;
  border: 1px solid #bbb;
}

div.panels-set-title-hide .panel-pane-is-title {
  border: 1px solid #bbb;
}

.panel-pane-is-title {
  border: 2px solid #777;
}

/* Cog Icon */
.panel-portlet .buttons a img {
  display: none;
  margin: 0;
}
.panel-portlet .buttons a.ctools-dropdown-image-link {
  border: none;
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  float: none;
  display: block;
  background: url('../images/sprite.png') no-repeat 0 -1178px;
}

#panels-dnd-main .panel-pane,
#panels-dnd-main .helperclass {
  margin: .5em;
}

#panels-dnd-main-form .inline-icon-help {
  vertical-align: middle;
  margin: 2px 1px;
}

.panel-pane.hidden-pane {
  background: #f8f8f8;
}

.panel-portlet .pane-content {
  margin: .5em 0 .5em 0;
  padding: 0 .25em 0 .25em;
  display: none; /* initially hidden */
}

.panel-portlet .grabber {
  width: 100%;
  height: 20px;
  cursor: move;
  margin: 0 0 0.5em 0;
  overflow: hidden;
  background: #b3b3b3 url('../images/bg-shade-medium.png') repeat-x 0 100%;
  color: #fff;
  text-shadow: #555 1px 1px 1px;
  border-color: #999;
  font-weight: bold;
}

.panel-portlet.hidden-pane .grabber {
  background-color: #888;
}

.panel-portlet .changed div.grabber {
  background-color: #FFFFDD !important;
  border-bottom: 1px solid #3D9CD7 !important;
  color: black !important;
}

.panel-portlet .changed.hidden-pane div.grabber {
  background-color: #B4B488 !important;
  border-bottom: 1px solid #3D9CD7 !important;
}

.panel-portlet .changed div.grabber span.star {
  font-weight: bold;
  color: #E09010;
}

.panel-portlet .grabber:hover {
  color: #fff;
  background-color: #2F78A5;
}

.panel-portlet.hidden-pane .grabber:hover {
  background-color: #666;
}

.panel-portlet .grabber:active {
  background-color: red;
}

.panel-portlet .grabber:hover,
.panel-portlet .grabber:active {
  background: #858585 url('../images/bg-shade-dark.png') repeat-x 0 100%;
  color: #fff;
  text-shadow: #333 1px 1px 1px;
  border-color: #858585;
}

.panel-portlet .grabber .text {
  margin-left: 3px;
  font-size: 90%;
  line-height: 20px;
}

.panel-portlet .buttons {
  float: right;
  padding: 0;
  margin: 0;
}

.panel-portlet .buttons input {
  margin: 0;
  padding: 0;
  display: inline;
}

.panel-portlet .buttons a img {
  margin: 2px 1px;
}

.panel-portlet .pane-title {
  font-size:110%;
  cursor: pointer;
}

.panel-portlet .panel-pane-collapsible {
  margin: 0;
  padding: 0;
}

.panel-portlet .toggle {
  float: left;
  width: 21px;
  height: 21px;
  cursor: pointer;
  background: url('../images/sky.png') no-repeat 6px -245px;
}

.panel-portlet .toggle-collapsed {
  background: url('../images/sky.png') no-repeat 6px -1021px;
}

/* CSS to guide a user to a place to drop */
#panels-dnd-main .helperclass {
  border: 1px dashed red;
}

#panels-dnd-main .hoverclass {
  border: 1px solid red !important;
}

/* CSS for an area if something can be dropped in it */
.panels-modal-content {
  background: #fff;
  color: #000;
  padding: 0;
  margin: 2px;
  border: 1px solid #000;
  width: 600px;
  text-align: left;
}

.panels-modal-content .modal-title {
  font-size: 120%;
  font-weight: bold;
  color: white;
  overflow: hidden;
  white-space: nowrap;
}

.panels-modal-content .modal-header {
  background-color: #2385c2;
  padding: 0 .25em 0 1em;
}

.panels-modal-content .modal-header a {
  color: white;
  float: right;
}

.panels-modal-content .modal-content {
  padding: 0 1em;
  overflow: auto;
  width: 575px;
  height: 400px;
}

.panels-modal-content .modal-form {
}

.panels-modal-content .form-checkboxes .form-item {
  float: left;
  width: 24%;
}

.panels-hidden,
.panels-js-only {
  display: none;
}

a.close {
  color: white;
}

a.close:hover {
  text-decoration: none;
}

a.close img {
  position: relative;
  top: 1px;
}

.panels-section-title {
  clear: left;
  border-bottom: 1px solid #ddf;
  margin-bottom: .5em;
  text-align: left;
}

.panels-section-decorator {
}

.panels-add-content-modal .panels-modal-add-category {
  display: block;
  border-bottom: 1px solid white;
  padding-left: .5em;
  margin-left: -2px;
  position: relative;
}

.panels-add-content-modal .panels-modal-add-category.active {
  background: url(../images/arrow-active.png) center right no-repeat white;
  border-right: none;
}

.panels-add-content-modal {
  background: url(../images/bg-content-modal.png);
  height: 100%;
  margin: -1em;
  padding-top: 1em;
  padding-left: 175px;
  position: relative;
}

.panels-section-columns {
  height: 100%;
  overflow: auto;
}
.panels-section-column {
  width: 48%;
  float: left;
}

.panels-section-column .inside {
  padding: 0 1em;
}

.panels-section-column-categories {
  width: 173px;
  margin-left: -173px;
}

.panels-categories-description {
  padding: 0 1em;
  text-align: center;
  vertical-align: center;
}

* html .panels-section-column-categories {
  left: 173px;
  position: relative;
}

.panels-section-column-categories .panels-categories-box {
  border-top: 1px solid white;
  margin-bottom: 1em;
}

.panels-section-column-categories .inside {
  padding: 0;
 }

.panels-section-column-categories .content-type-button {
  padding-left: 10px;
}

.panels-modal-add-category {
  color: #5b5b5b !important;
  font-weight: bold;
  line-height: 2em;
}

.panels-section {
  margin-bottom: 1em;
}

.panels-section-column .content-type-button {
  font-size: 8pt;
  line-height: 1em;
  overflow: hidden;
  text-align: left;
}

.content-type-button img {
  border: 2px solid white;
  float: left;
}

.content-type-button img:hover {
  border: 2px solid blue;
}

.content-type-button div {
  width: 85%;
  top: -5px;
  left: 2px;
  float: left;
  padding-left: 3px;
  padding-top: 5px;
}

#panels-preview .modal-throbber-wrapper {
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/** modal forms CSS **/
.panels-modal-content .form-item label {
  width: 8em;
  float: left;
}

.panels-modal-content .form-item label.option {
  width: auto;
  float: none;
}

.panels-modal-content .form-item .description {
  clear: left;
}

.panels-modal-content .form-item .description .tips {
  margin-left: 2em;
}

.panels-modal-content .no-float .form-item * {
  float: none;
}

.panels-modal-content .modal-form .no-float label  {
  width: auto;
}

.panels-modal-content .modal-form fieldset,
.panels-modal-content .modal-form .form-checkboxes {
  clear: left;
}

#edit-configuration-nid {
  clear: left;
}

.option-text-aligner .form-item {
  float: left;
  padding: .25em 1em .25em 0;
  margin: 0;
}

.option-text-aligner {
  clear: both;
  width: 100%;
  padding: 0;
  margin: 0;
}


#panels-dnd-main div.panel-pane div.ctools-dropdown-container-wrapper {
  margin-left: -158px;
  margin-top: -4px;
}

/*
html.js div.panels-display-links div.ctools-dropdown-container {
  width: 275px;
}

html.js div.panels-display-links div.ctools-dropdown-container ul li li a {
  width: 250px;
}

html.js div.panels-display-links div.ctools-dropdown-container ul li a {
  width: 270px;
}
*/

#panels-dnd-main .panel-pane .pane-title {
  padding: 0.25em 0.5em;
}
#panels-dnd-main .panel-pane .pane-title:after {
  font-size: 0.8em;
  color: crimson;
  letter-spacing: normal;
  display: block;
}
#panels-dnd-main .panel-pane.hidden-pane .pane-title:after {
  content: " status: hidden";
}
#panels-dnd-main .panel-pane.changed .pane-title:after {
  content: " status: changes not saved";
}
#panels-dnd-main .panel-pane.hidden-pane.changed .pane-title:after {
  content: " status: hidden & changed";
}

/* @end */


/* @group CTools Dropdown */
#panels-dnd-main .ctools-dropdown a.ctools-dropdown-text-link,
html.js div.panels-display-links a.ctools-dropdown-text-link {

  background: url('../images/arrow-down-light.png') 0 3px no-repeat!important;
  padding-left: 12px;
}
html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container,
html.js div.panels-display-links div.ctools-dropdown-container {
  width: 160px!important;
  background: #fff url('../images/bg-shade-white-lrg.png') repeat-x 0 100%;
  border: solid 1px #ddd!important;
  margin: 0!important;
/*  padding: 0.5em!important; */
  -webkit-border-radius: 0.333em;
  -moz-border-radius: 0.333em;
  -webkit-box-shadow: 0.333em 0.333em 0.333em rgba(0, 0, 0, 0.25);
  font-size: 0.9em;
  font-weight: bold;
}

html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li,
html.js div.panels-display-links div.ctools-dropdown-container ul li {

  text-decoration: none;
  padding: 0;
  margin: 0;
  color: #555!important;
  text-shadow: #fff 1px 1px 1px;
}
html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.text,
html.js div.panels-display-links div.ctools-dropdown-container ul li span.text {

  font-style: normal;
  color: #000;
  font-weight: bold;
}

html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li a,
html.js div.panels-display-links div.ctools-dropdown-container ul li a {
  color: #555!important;
  font-weight: normal;
  width: auto;
  padding: 0 10px;
}

html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.panels-text,
html.js div.panels-display-links div.ctools-dropdown-container ul li span.panels-text {
  width: auto;
  padding: 0 10px;
}

html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-italic,
html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-italic {
  font-style: italic;
}

html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.dropdown-header,
html.js div.panels-display-links div.ctools-dropdown-container ul li span.dropdown-header {
  background-color: #fefefe;
  padding: 0 10px;
}

html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-sub-menu ul li a,
html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-sub-menu ul li a,
html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-sub-menu span.panels-text,
html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-sub-menu span.panels-text {
  padding: 0 20px;
}

html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container hr,
html.js div.panels-display-links div.ctools-dropdown-container hr {
  border: 0;
  color: #ddd;
  background-color: #ddd;
  height: 1px;
}

/*
html.js #panels-dnd-main  div.ctools-dropdown div.ctools-dropdown-container ul li a:hover,
html.js div.panels-display-links div.ctools-dropdown-container ul li a:hover {
  background: none!important;
  color: #000!important;
}
*/
/* @end */

/* @group Modal */
/* Account for the extra div coming from ctools_modal_form_render() */
div.messages div.messages {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
}
div.ctools-modal-content .modal-header {
  background: #fff url('../images/bg-shade-light.png') repeat-x bottom left;
  color: #777;
  display: block;
  font-weight: 700;
  letter-spacing: normal;
  padding: 0.25em 1em;
  -moz-border-radius-topleft: 0.5em;
  -moz-border-radius-topright: 0.5em;
  -webkit-border-top-left-radius: 0.5em;
  -webkit-border-top-right-radius: 0.5em;
}
div.ctools-modal-content .modal-title {
  font-size: 120%;
  font-weight: bold;
  text-shadow: #fff 1px 1px 1px;
  color: #555;
}
div.ctools-modal-content a.close {
  color: #666;
  font-weight: normal;
  padding-left: 1.6em;
  background: url('../images/sprite.png') no-repeat -166px -1686px;
}
div.ctools-modal-content a.close img {
  display: none;
}
/** modal forms CSS **/
div.ctools-modal-content .form-item label {
  width: 100%;
  float: none;
  clear: both;
}
div.ctools-modal-content .resizable-textarea {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
div.ctools-modal-content {
  font-size: 12px;
  border: solid 1px #ddd;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -webkit-box-shadow: -1em 1em 1em rgba(0, 0, 0, 0.5);
}
#modalBackdrop {
  position: fixed!important;
  background-color: #000!important;
}
/* @end */

File

css/panels_dnd.css
View source 
  1. 

  2. #panels-dnd-main {

  3.   margin: 0.5em 0;

  4. }

  5. 

  6. #panels-dnd-main div.panels-display {

  7.   padding: 0 0 .5em 0;

  8.   border: 1px dashed #ddd;

  9.   background: #f8f8f8;

  10.   -webkit-border-radius: 0.333em;

  11.   -moz-border-radius: 0.333em;

  12. }

  13. 

  14. #panels-dnd-main div.panels-display h2.label {

  15.   color: #555;

  16.   text-shadow: #fff 1px 1px 1px;

  17.   text-align: center;

  18.   font-size: 13pt;

  19.   margin: 0 0 .5em 0;

  20.   padding-right: 16px;

  21.   vertical-align: middle;

  22. }

  23. 

  24. #panels-dnd-main div.panels-display .pane-add {

  25.   float: left;

  26.   margin: 2px;

  27.   background: #999;

  28.   border: 1px solid #fff;

  29. }

  30. 

  31. #panels-dnd-main div.panels-display .pane-add-link {

  32.   position: absolute;

  33.   display: block;

  34.   width: 16px;

  35.   height: 16px;

  36.   float: left;

  37.   margin: 2px 2px 2px 4px;

  38. }

  39. 

  40. div.panels-set-title-hide .panels-set-title {

  41.   display: none !important;

  42. }

  43. 

  44. /* Add Icon */

  45. #panels-dnd-main div.panels-display .pane-add-link  {

  46. }

  47. #panels-dnd-main div.panels-display .pane-add-link img {

  48.   display: none;

  49. }

  50. #panels-dnd-main div.panels-display .pane-add-link a.ctools-dropdown-image-link {

  51.   border: none;

  52.   width: 16px;

  53.   height: 18px;

  54.   float: left;

  55.   background: url('../images/sprite.png') no-repeat 0 -1178px;

  56. /*  background: url('../images/sprite.png') no-repeat -166px -582px; */

  57. }

  58. 

  59. .panel-portlet {

  60.   padding: 0em;

  61.   background: #ffffff;

  62.   border: 1px solid #bbb;

  63. }

  64. 

  65. div.panels-set-title-hide .panel-pane-is-title {

  66.   border: 1px solid #bbb;

  67. }

  68. 

  69. .panel-pane-is-title {

  70.   border: 2px solid #777;

  71. }

  72. 

  73. /* Cog Icon */

  74. .panel-portlet .buttons a img {

  75.   display: none;

  76.   margin: 0;

  77. }

  78. .panel-portlet .buttons a.ctools-dropdown-image-link {

  79.   border: none;

  80.   width: 16px;

  81.   height: 16px;

  82.   margin: 0 5px 0 0;

  83.   float: none;

  84.   display: block;

  85.   background: url('../images/sprite.png') no-repeat 0 -1178px;

  86. }

  87. 

  88. #panels-dnd-main .panel-pane,

  89. #panels-dnd-main .helperclass {

  90.   margin: .5em;

  91. }

  92. 

  93. #panels-dnd-main-form .inline-icon-help {

  94.   vertical-align: middle;

  95.   margin: 2px 1px;

  96. }

  97. 

  98. .panel-pane.hidden-pane {

  99.   background: #f8f8f8;

  100. }

  101. 

  102. .panel-portlet .pane-content {

  103.   margin: .5em 0 .5em 0;

  104.   padding: 0 .25em 0 .25em;

  105.   display: none; /* initially hidden */

  106. }

  107. 

  108. .panel-portlet .grabber {

  109.   width: 100%;

  110.   height: 20px;

  111.   cursor: move;

  112.   margin: 0 0 0.5em 0;

  113.   overflow: hidden;

  114.   background: #b3b3b3 url('../images/bg-shade-medium.png') repeat-x 0 100%;

  115.   color: #fff;

  116.   text-shadow: #555 1px 1px 1px;

  117.   border-color: #999;

  118.   font-weight: bold;

  119. }

  120. 

  121. .panel-portlet.hidden-pane .grabber {

  122.   background-color: #888;

  123. }

  124. 

  125. .panel-portlet .changed div.grabber {

  126.   background-color: #FFFFDD !important;

  127.   border-bottom: 1px solid #3D9CD7 !important;

  128.   color: black !important;

  129. }

  130. 

  131. .panel-portlet .changed.hidden-pane div.grabber {

  132.   background-color: #B4B488 !important;

  133.   border-bottom: 1px solid #3D9CD7 !important;

  134. }

  135. 

  136. .panel-portlet .changed div.grabber span.star {

  137.   font-weight: bold;

  138.   color: #E09010;

  139. }

  140. 

  141. .panel-portlet .grabber:hover {

  142.   color: #fff;

  143.   background-color: #2F78A5;

  144. }

  145. 

  146. .panel-portlet.hidden-pane .grabber:hover {

  147.   background-color: #666;

  148. }

  149. 

  150. .panel-portlet .grabber:active {

  151.   background-color: red;

  152. }

  153. 

  154. .panel-portlet .grabber:hover,

  155. .panel-portlet .grabber:active {

  156.   background: #858585 url('../images/bg-shade-dark.png') repeat-x 0 100%;

  157.   color: #fff;

  158.   text-shadow: #333 1px 1px 1px;

  159.   border-color: #858585;

  160. }

  161. 

  162. .panel-portlet .grabber .text {

  163.   margin-left: 3px;

  164.   font-size: 90%;

  165.   line-height: 20px;

  166. }

  167. 

  168. .panel-portlet .buttons {

  169.   float: right;

  170.   padding: 0;

  171.   margin: 0;

  172. }

  173. 

  174. .panel-portlet .buttons input {

  175.   margin: 0;

  176.   padding: 0;

  177.   display: inline;

  178. }

  179. 

  180. .panel-portlet .buttons a img {

  181.   margin: 2px 1px;

  182. }

  183. 

  184. .panel-portlet .pane-title {

  185.   font-size:110%;

  186.   cursor: pointer;

  187. }

  188. 

  189. .panel-portlet .panel-pane-collapsible {

  190.   margin: 0;

  191.   padding: 0;

  192. }

  193. 

  194. .panel-portlet .toggle {

  195.   float: left;

  196.   width: 21px;

  197.   height: 21px;

  198.   cursor: pointer;

  199.   background: url('../images/sky.png') no-repeat 6px -245px;

  200. }

  201. 

  202. .panel-portlet .toggle-collapsed {

  203.   background: url('../images/sky.png') no-repeat 6px -1021px;

  204. }

  205. 

  206. /* CSS to guide a user to a place to drop */

  207. #panels-dnd-main .helperclass {

  208.   border: 1px dashed red;

  209. }

  210. 

  211. #panels-dnd-main .hoverclass {

  212.   border: 1px solid red !important;

  213. }

  214. 

  215. /* CSS for an area if something can be dropped in it */

  216. .panels-modal-content {

  217.   background: #fff;

  218.   color: #000;

  219.   padding: 0;

  220.   margin: 2px;

  221.   border: 1px solid #000;

  222.   width: 600px;

  223.   text-align: left;

  224. }

  225. 

  226. .panels-modal-content .modal-title {

  227.   font-size: 120%;

  228.   font-weight: bold;

  229.   color: white;

  230.   overflow: hidden;

  231.   white-space: nowrap;

  232. }

  233. 

  234. .panels-modal-content .modal-header {

  235.   background-color: #2385c2;

  236.   padding: 0 .25em 0 1em;

  237. }

  238. 

  239. .panels-modal-content .modal-header a {

  240.   color: white;

  241.   float: right;

  242. }

  243. 

  244. .panels-modal-content .modal-content {

  245.   padding: 0 1em;

  246.   overflow: auto;

  247.   width: 575px;

  248.   height: 400px;

  249. }

  250. 

  251. .panels-modal-content .modal-form {

  252. }

  253. 

  254. .panels-modal-content .form-checkboxes .form-item {

  255.   float: left;

  256.   width: 24%;

  257. }

  258. 

  259. .panels-hidden,

  260. .panels-js-only {

  261.   display: none;

  262. }

  263. 

  264. a.close {

  265.   color: white;

  266. }

  267. 

  268. a.close:hover {

  269.   text-decoration: none;

  270. }

  271. 

  272. a.close img {

  273.   position: relative;

  274.   top: 1px;

  275. }

  276. 

  277. .panels-section-title {

  278.   clear: left;

  279.   border-bottom: 1px solid #ddf;

  280.   margin-bottom: .5em;

  281.   text-align: left;

  282. }

  283. 

  284. .panels-section-decorator {

  285. }

  286. 

  287. .panels-add-content-modal .panels-modal-add-category {

  288.   display: block;

  289.   border-bottom: 1px solid white;

  290.   padding-left: .5em;

  291.   margin-left: -2px;

  292.   position: relative;

  293. }

  294. 

  295. .panels-add-content-modal .panels-modal-add-category.active {

  296.   background: url(../images/arrow-active.png) center right no-repeat white;

  297.   border-right: none;

  298. }

  299. 

  300. .panels-add-content-modal {

  301.   background: url(../images/bg-content-modal.png);

  302.   height: 100%;

  303.   margin: -1em;

  304.   padding-top: 1em;

  305.   padding-left: 175px;

  306.   position: relative;

  307. }

  308. 

  309. .panels-section-columns {

  310.   height: 100%;

  311.   overflow: auto;

  312. }

  313. .panels-section-column {

  314.   width: 48%;

  315.   float: left;

  316. }

  317. 

  318. .panels-section-column .inside {

  319.   padding: 0 1em;

  320. }

  321. 

  322. .panels-section-column-categories {

  323.   width: 173px;

  324.   margin-left: -173px;

  325. }

  326. 

  327. .panels-categories-description {

  328.   padding: 0 1em;

  329.   text-align: center;

  330.   vertical-align: center;

  331. }

  332. 

  333. * html .panels-section-column-categories {

  334.   left: 173px;

  335.   position: relative;

  336. }

  337. 

  338. .panels-section-column-categories .panels-categories-box {

  339.   border-top: 1px solid white;

  340.   margin-bottom: 1em;

  341. }

  342. 

  343. .panels-section-column-categories .inside {

  344.   padding: 0;

  345.  }

  346. 

  347. .panels-section-column-categories .content-type-button {

  348.   padding-left: 10px;

  349. }

  350. 

  351. .panels-modal-add-category {

  352.   color: #5b5b5b !important;

  353.   font-weight: bold;

  354.   line-height: 2em;

  355. }

  356. 

  357. .panels-section {

  358.   margin-bottom: 1em;

  359. }

  360. 

  361. .panels-section-column .content-type-button {

  362.   font-size: 8pt;

  363.   line-height: 1em;

  364.   overflow: hidden;

  365.   text-align: left;

  366. }

  367. 

  368. .content-type-button img {

  369.   border: 2px solid white;

  370.   float: left;

  371. }

  372. 

  373. .content-type-button img:hover {

  374.   border: 2px solid blue;

  375. }

  376. 

  377. .content-type-button div {

  378.   width: 85%;

  379.   top: -5px;

  380.   left: 2px;

  381.   float: left;

  382.   padding-left: 3px;

  383.   padding-top: 5px;

  384. }

  385. 

  386. #panels-preview .modal-throbber-wrapper {

  387.   width: 100%;

  388.   text-align: center;

  389.   margin-left: auto;

  390.   margin-right: auto;

  391. }

  392. /** modal forms CSS **/

  393. .panels-modal-content .form-item label {

  394.   width: 8em;

  395.   float: left;

  396. }

  397. 

  398. .panels-modal-content .form-item label.option {

  399.   width: auto;

  400.   float: none;

  401. }

  402. 

  403. .panels-modal-content .form-item .description {

  404.   clear: left;

  405. }

  406. 

  407. .panels-modal-content .form-item .description .tips {

  408.   margin-left: 2em;

  409. }

  410. 

  411. .panels-modal-content .no-float .form-item * {

  412.   float: none;

  413. }

  414. 

  415. .panels-modal-content .modal-form .no-float label  {

  416.   width: auto;

  417. }

  418. 

  419. .panels-modal-content .modal-form fieldset,

  420. .panels-modal-content .modal-form .form-checkboxes {

  421.   clear: left;

  422. }

  423. 

  424. #edit-configuration-nid {

  425.   clear: left;

  426. }

  427. 

  428. .option-text-aligner .form-item {

  429.   float: left;

  430.   padding: .25em 1em .25em 0;

  431.   margin: 0;

  432. }

  433. 

  434. .option-text-aligner {

  435.   clear: both;

  436.   width: 100%;

  437.   padding: 0;

  438.   margin: 0;

  439. }

  440. 

  441. 

  442. #panels-dnd-main div.panel-pane div.ctools-dropdown-container-wrapper {

  443.   margin-left: -158px;

  444.   margin-top: -4px;

  445. }

  446. 

  447. /*

  448. html.js div.panels-display-links div.ctools-dropdown-container {

  449.   width: 275px;

  450. }

  451. 

  452. html.js div.panels-display-links div.ctools-dropdown-container ul li li a {

  453.   width: 250px;

  454. }

  455. 

  456. html.js div.panels-display-links div.ctools-dropdown-container ul li a {

  457.   width: 270px;

  458. }

  459. */

  460. 

  461. #panels-dnd-main .panel-pane .pane-title {

  462.   padding: 0.25em 0.5em;

  463. }

  464. #panels-dnd-main .panel-pane .pane-title:after {

  465.   font-size: 0.8em;

  466.   color: crimson;

  467.   letter-spacing: normal;

  468.   display: block;

  469. }

  470. #panels-dnd-main .panel-pane.hidden-pane .pane-title:after {

  471.   content: " status: hidden";

  472. }

  473. #panels-dnd-main .panel-pane.changed .pane-title:after {

  474.   content: " status: changes not saved";

  475. }

  476. #panels-dnd-main .panel-pane.hidden-pane.changed .pane-title:after {

  477.   content: " status: hidden & changed";

  478. }

  479. 

  480. /* @end */

  481. 

  482. 

  483. /* @group CTools Dropdown */

  484. #panels-dnd-main .ctools-dropdown a.ctools-dropdown-text-link,

  485. html.js div.panels-display-links a.ctools-dropdown-text-link {

  486. 

  487.   background: url('../images/arrow-down-light.png') 0 3px no-repeat!important;

  488.   padding-left: 12px;

  489. }

  490. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container,

  491. html.js div.panels-display-links div.ctools-dropdown-container {

  492.   width: 160px!important;

  493.   background: #fff url('../images/bg-shade-white-lrg.png') repeat-x 0 100%;

  494.   border: solid 1px #ddd!important;

  495.   margin: 0!important;

  496. /*  padding: 0.5em!important; */

  497.   -webkit-border-radius: 0.333em;

  498.   -moz-border-radius: 0.333em;

  499.   -webkit-box-shadow: 0.333em 0.333em 0.333em rgba(0, 0, 0, 0.25);

  500.   font-size: 0.9em;

  501.   font-weight: bold;

  502. }

  503. 

  504. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li,

  505. html.js div.panels-display-links div.ctools-dropdown-container ul li {

  506. 

  507.   text-decoration: none;

  508.   padding: 0;

  509.   margin: 0;

  510.   color: #555!important;

  511.   text-shadow: #fff 1px 1px 1px;

  512. }

  513. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.text,

  514. html.js div.panels-display-links div.ctools-dropdown-container ul li span.text {

  515. 

  516.   font-style: normal;

  517.   color: #000;

  518.   font-weight: bold;

  519. }

  520. 

  521. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li a,

  522. html.js div.panels-display-links div.ctools-dropdown-container ul li a {

  523.   color: #555!important;

  524.   font-weight: normal;

  525.   width: auto;

  526.   padding: 0 10px;

  527. }

  528. 

  529. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.panels-text,

  530. html.js div.panels-display-links div.ctools-dropdown-container ul li span.panels-text {

  531.   width: auto;

  532.   padding: 0 10px;

  533. }

  534. 

  535. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-italic,

  536. html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-italic {

  537.   font-style: italic;

  538. }

  539. 

  540. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.dropdown-header,

  541. html.js div.panels-display-links div.ctools-dropdown-container ul li span.dropdown-header {

  542.   background-color: #fefefe;

  543.   padding: 0 10px;

  544. }

  545. 

  546. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-sub-menu ul li a,

  547. html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-sub-menu ul li a,

  548. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-sub-menu span.panels-text,

  549. html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-sub-menu span.panels-text {

  550.   padding: 0 20px;

  551. }

  552. 

  553. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container hr,

  554. html.js div.panels-display-links div.ctools-dropdown-container hr {

  555.   border: 0;

  556.   color: #ddd;

  557.   background-color: #ddd;

  558.   height: 1px;

  559. }

  560. 

  561. /*

  562. html.js #panels-dnd-main  div.ctools-dropdown div.ctools-dropdown-container ul li a:hover,

  563. html.js div.panels-display-links div.ctools-dropdown-container ul li a:hover {

  564.   background: none!important;

  565.   color: #000!important;

  566. }

  567. */

  568. /* @end */

  569. 

  570. /* @group Modal */

  571. /* Account for the extra div coming from ctools_modal_form_render() */

  572. div.messages div.messages {

  573.   background: none;

  574.   border: none;

  575.   margin: 0;

  576.   padding: 0;

  577.   -webkit-border-radius: 0;

  578.   -moz-border-radius: 0;

  579. }

  580. div.ctools-modal-content .modal-header {

  581.   background: #fff url('../images/bg-shade-light.png') repeat-x bottom left;

  582.   color: #777;

  583.   display: block;

  584.   font-weight: 700;

  585.   letter-spacing: normal;

  586.   padding: 0.25em 1em;

  587.   -moz-border-radius-topleft: 0.5em;

  588.   -moz-border-radius-topright: 0.5em;

  589.   -webkit-border-top-left-radius: 0.5em;

  590.   -webkit-border-top-right-radius: 0.5em;

  591. }

  592. div.ctools-modal-content .modal-title {

  593.   font-size: 120%;

  594.   font-weight: bold;

  595.   text-shadow: #fff 1px 1px 1px;

  596.   color: #555;

  597. }

  598. div.ctools-modal-content a.close {

  599.   color: #666;

  600.   font-weight: normal;

  601.   padding-left: 1.6em;

  602.   background: url('../images/sprite.png') no-repeat -166px -1686px;

  603. }

  604. div.ctools-modal-content a.close img {

  605.   display: none;

  606. }

  607. /** modal forms CSS **/

  608. div.ctools-modal-content .form-item label {

  609.   width: 100%;

  610.   float: none;

  611.   clear: both;

  612. }

  613. div.ctools-modal-content .resizable-textarea {

  614.   width: 100%;

  615.   margin-left: 0;

  616.   margin-right: 0;

  617. }

  618. div.ctools-modal-content {

  619.   font-size: 12px;

  620.   border: solid 1px #ddd;

  621.   -webkit-border-radius: 0.5em;

  622.   -moz-border-radius: 0.5em;

  623.   -webkit-box-shadow: -1em 1em 1em rgba(0, 0, 0, 0.5);

  624. }

  625. #modalBackdrop {

  626.   position: fixed!important;

  627.   background-color: #000!important;

  628. }

  629. /* @end */