/**
 * Modal stylings
 */

#modal-content .form-item-exposed-widget-title input,
#modal-content .form-item-title input {
  font-size: 1.5em;
}

#modalContent div.ctools-modal-content {
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -webkit-box-shadow: none;
  border: none;
}

/** hide contextual links when they are inside a pane add modal to avoid the view opening in the modal */
.panels-add-content-modal .contextual-links-wrapper {
  display:none!important;
}

.content-type-button .add-content-link-node-image-button,
.content-type-button .add-content-link-custom-image-button {
  display:none;
}

.add-content-link-node-text-button:before,
.add-content-link-custom-text-button:before {
  content: "\2295";
  font-size: 2em;
  top: .1em;
  color: #666;
  position: relative;
  margin-right: 5px;
}

#modalContent .panels-section-column-categories .content-type-button .add-content-link-custom-text-button,
#modalContent .panels-section-column-categories .content-type-button .add-content-link-node-text-button {
  padding-left: 5px;
}

/* border top left and right subtly differentiates header from dark background, and now background can be darker */
#modalContent div.ctools-modal-content .modal-header {
  border-top: 1px solid #666;
  border-left: 1px solid #444;
  border-right: 1px solid #444;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  background: #222;
  color: #ddd;
  font-family: "Helvetica-Neue", helvetica, "Segoe UI", segoe, "Ubuntu", "Droid Sans", "Arial", sans-serif; /* "Helvetica-Neue" with hyphen required for mac font */
  padding: 0 2em;
}

/* removed margin and padding and added to parent */
#modalContent div.ctools-modal-content .modal-title {
  color: #bbb;
  font-size: 2.1em;
  font-family: "Helvetica-Neue", helvetica, "Segoe UI", segoe, "Ubuntu", "Droid Sans", "Arial", sans-serif;
  text-shadow: none;
  padding: .2em 0em;
  font-weight: 300;
  /*margin-top: 10px;*/
  /*height: 30px;*/
  display: inline-block;
}

#modalContent div.ctools-modal-content a.close {
  display: block;
  text-indent: -99999em;
  overflow: hidden;
  outline: none;
  height: 15px;
  width: 16px;
  margin-top: 1em;
  background: url(../images/close-popup.png) no-repeat left top;
  padding: 0;
  -webkit-transition: 0;
  -moz-transition: 0;
  -o-transition: 0;
  transition: 0;
}

#modalContent div.ctools-modal-content a.close:hover {
  background-position: 0px -15px;
}

#modalContent .panels-add-content-modal {
  background: #FFF;
  padding-top: .9em;
}

#modalContent .panels-add-content-modal a.panels-modal-add-category {
  background-color:#efefef;
  font: bold 11px/30px "Helvetica-Neue", helvetica, "Segoe UI", segoe, "Ubuntu", "Droid Sans", "Arial", sans-serif;
  color: #2fa6e5!important;
  text-decoration: none;
  margin-left: 10px;
  border-bottom: 1px solid #ddd;
  padding: 0 2em;
}

#modalContent .panels-add-content-modal a.panels-modal-add-category:active,
#modalContent .panels-add-content-modal a.panels-modal-add-category.active {
  border-left: 1px solid #ddd;
  background: #FFF;
  margin-right: -1px;
  color: #007ec0!important;
}

#modalContent .panels-add-content-modal a.panels-modal-add-category:first-child {
  border-top: 1px solid #CECECA;
}

/* percent width expands catagory column for wider displays */
#modalContent .panels-section-column-categories {
  min-width: 182px;
  margin-left: -182px;
  border-right: 1px solid #ccc;
}

#modalContent .panels-section-column-categories .content-type-button {
  padding: 0px;
  background-color: #efefef;
  margin-left: 9px;
  border-bottom: 1px solid #ddd;
}

#modalContent .panels-section-column-categories .content-type-button div {
  background: #efefef;
  float: none;
  left: 0;
  top: 0;
  width:100%;
  margin: 0 8px 0 0px;
  padding: 0;
  padding-top:5px;
  padding-bottom:5px;
}

#modalContent .panels-section-column-categories .content-type-button div a {
  font: bold 11px/21px "Helvetica-Neue", helvetica, "Segoe UI", segoe, "Ubuntu", "Droid Sans", "Arial", sans-serif;
  text-decoration: none;
  color:#007ec0;;
  padding: 0 8px;
  display:block;
  width:100%;
}

#modalContent .panels-section-column-categories .panels-categories-box {
  border-top: none;
  margin-bottom: 0;
}

#modalContent .panels-section-column-categories .content-type-button div a:before{
content: "\2295";
font-size: 2em;
top: .1em;
color: #999999;
position: relative;
margin-right: .1em;
}

#modalContent .panels-section-column-categories .content-type-button div:active {
  outline: none;
  background-image: linear-gradient(bottom, #FFFFFF 0%, #E9EAEC 100%);
  background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #E9EAEC 100%);
  background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #E9EAEC 100%);
  background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #E9EAEC 100%);
  background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #E9EAEC 100%);
  background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0, #FFFFFF),
  color-stop(1, #E9EAEC)
  );
}

#modalContent .panels-section-column-categories .content-type-button img {
  border: none;
  padding-top: 7px;
  display:none;
  margin-left:5px;
  margin-right:5px;
}

/* removes extra padding left and top */
#modalContent div.ctools-modal-content .modal-content {
  padding: 0 2px 0 10px;
  overflow-x: hidden;
}

#modal-content .option-text-aligner {
  display: inline-block;
  width: auto;
}

/**
 * Pane configuration preview styling
 *
 * Much of the fieldset-related css is ripped directly from Bartik to give
 * IPE a more consistent look
 * @see https://drupal.org/node/1717644
 */
#modal-content .widget-preview {
  clear: none;
  width: auto;
  position: relative;
  top: 12px; /* Offsets the negative margin of legends */
  margin-top: 10px;
  margin-bottom: 32px;
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  padding: 0 0 10px;
}

#modal-content .widget-preview {
  margin-top: 2em;
  margin-bottom: 2em;
  -webkitborder-top-right-radius: 0;
  -moz-border-topright-radius: 0;
  border-top-right-radius: 0;
}

#modal-content .widget-preview-single {
  margin-top: 10px;
  margin-bottom: 1em;
}

#modal-content .widget-preview-single .fieldset-wrapper {
  font-size: 100%;
  max-width: 100%;
  overflow-y: auto;
  min-height: 75px;
  max-height: 375px;
}

#modal-content .widget-preview-single .fieldset-wrapper .wetkit-spotlight img {
  width: 100%;
}

#modal-content .panel-heading {
  position: initial;
}

#modal-content .panopoly-magic-preview-title-wrapper {
  color: #3b3b3b;
  display: block;
  height: 2em;
  left: -1px; /* LTR */
  line-height: 2;
  padding: 1px 0 0;
  position: absolute;
  padding-right:2px;
  text-indent: 10px;
  top: -8px;
  width: 100%;
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
}

#modal-content fieldset.widget-preview legend {
  -moz-border-radius-topright: 0;
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
}

#modal-content .panopoly-magic-preview-title-inner {
  font: bold 12px/1.5em "Helvetica-Neue", helvetica, "Segoe UI", segoe, "Ubuntu", "Droid Sans", "Arial", sans-serif;
  background: #333;
  color: #cccccc;
  background: none;
  color: #2fa6e5;
}

#modal-content fieldset.collapsed legend {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

#modal-content fieldset legend a {
  color: #3b3b3b;
}

#modal-content fieldset legend a:hover,
#modal-content fieldset legend a:focus,
#modal-content fieldset legend a:active {
  color: #000;
}

#modal-content .panopoly-magic-preview-inner {
  padding: 0 10px;
  margin-top: 4.25em;
}

#modal-content .widget-preview .panopoly-magic-preview-inner {
  max-width: 100%;
  overflow-y: auto;
  font-size: 75%;
  max-height: 400px;
  overflow-x: hidden;
}

#modal-content .widget-preview .panopoly-magic-preview-inner table tr.even td,
#modal-content .widget-preview .panopoly-magic-preview-inner table tr.odd td {
  padding: 3px 5px;
}

#modal-content .widget-preview .panopoly-magic-preview-inner h2 {
  font-size: 2em;
  margin-top: .25em;
  color:#000;
  font-family:"Helvetica-Neue", helvetica, "Segoe UI", segoe, "Ubuntu", "Droid Sans", "Arial", sans-serif;
  text-shadow: none;
}

#modal-content .widget-preview-single {
  float: right;
  margin-left: 1em;
  margin-top: 0;
  width: 48%;
}

#modal-content .form-actions {
  float: right;
  clear: right;
  width: 48%;
  margin-left: 1em;
  text-align: right;
}

#modal-content .panopoly-magic-preview-title {
  position: absolute;
  right: 0px;
  top: -23px;
  color: #cccccc;
  font: bold 11px/23px "Helvetica-Neue", helvetica, "Segoe UI", segoe, "Ubuntu", "Droid Sans", "Arial", sans-serif;
}

#modal-content .panopoly-magic-preview-title .content-type-button div {
  float: none;
  left: 0;
  top: 0;
  width: 60px;
  padding: 0;
}

#modal-content .panopoly-magic-preview-title .content-type-button div a {
  display: block;
  font: bold 11px/23px "Helvetica-Neue", helvetica, "Segoe UI", segoe, "Ubuntu", "Droid Sans", "Arial", sans-serif;
  color: #fff;
  text-decoration: none;
  background: #58b7ea;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  padding: 0 10px;
  text-shadow: 0 1px 0 #1a3646;
}

#modal-content .panopoly-magic-preview-title .content-type-button div a:hover {
 background: #2fa6e5;
 text-shadow: 0 1px 0 #1a3646;
}

#modal-content .panopoly-magic-preview-title .content-type-button div a:active {
 background: #2fa6e5;
 text-shadow: 0 1px 0 #1a3646;
}

#modal-content .panels-section-columns,
#modal-content .panels-categories-description {
  overflow: visible;
  border: 1px solid #CECECA;
  border-left: none;
  border-right: none;
  height: 100%;
  margin: 0;
  overflow-y: auto;
  border-bottom:none;
}

#modal-content .panels-categories-description {
  color: #FFF;
}

/**
 * Misc Modal Stylings
 */
#modal-content .form-type-textarea .form-type-select,
#modal-content .field-type-text-long .form-type-select {
  float: right;
  margin-top: 5px;
  margin-bottom: 5px;
}

#modal-content .form-type-textarea .form-type-select label,
#modal-content .field-type-text-long .form-type-select label {
  float: left;
  margin-right: .5em;
  margin-top: .5em;
  font-weight: normal;
  display: block;
  width: auto;
}

#modal-content .view-settings-wrapper .form-radios {
  display: inline;
  padding-right: 5px;
}

.panels-section-column .content-type-button {
  font-size: 1em;
}

#modal-content .panopoly-magic-preview-title .content-type-button img,
#modal-content .panels-add-content-modal > .panels-modal-add-category {
  display: none;
}

#modal-content #edit-widget-preview {
  margin-top: 0;
}

#modalContent .panels-section-column-categories .content-type-button img:hover {
  border: none;
}

#modal-content .widget-preview .fieldset-wrapper table img,
#modal-content .widget-preview .wetkit-image-featured {
  width: 100%;
}

.pane-content .create-links,
.pane-categories .categories-links,
.pane-menus .menu-links,
.pane-users .user-links {
  float: right;
}

#modalContent .panels-add-content-modal a.panels-modal-add-category:hover,
#modalContent .panels-section-column-categories .content-type-button div:hover {
  background: #ccc;
}

/**
 * Form action button styling
 */
#modal-content .form-submit {
  margin-bottom: .5em;
  margin-right: 1em;
  font: bold 12px/32px "Helvetica-Neue", helvetica, "Segoe UI", segoe, "Ubuntu", "Droid Sans", "Arial", sans-serif;
  text-decoration: none;
  height: 33px;
  color:#fff;
  cursor: pointer;
  outline: none;
  -moz-border-radius: 2px;
  -khtml-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #2fa6e5;
  text-shadow: 0 1px 0 #0e3144;
  padding: 0 13px 1px;
  border:none;
  transition: background, color, border, outline, 0.2s;
  -webkit-transition: background color border, 0.2s;
  -webkit-transition-delay: outline, 0s;
}

#modal-content .form-submit:hover {
  background: #58b7ea;
  color:#fff;
  text-shadow: 0 1px 0 #0e3144;
  color: #fff;
}

#modal-content .form-submit:active {
  outline: none;
  background: #2fa6e5;
  color: #fff;
}

#modalContent .panels-add-content-modal .panels-section-column-categories a.panels-modal-add-config {
  background-color:#efefef;
  font: bold 11px/30px "Helvetica-Neue", helvetica, "Segoe UI", segoe, "Ubuntu", "Droid Sans", "Arial", sans-serif;
  color: #2fa6e5!important;
  text-decoration: none;
}

#modalContent .panels-add-content-modal .panels-section-column-categories a.panels-modal-add-config span {
  margin-left: 20px;
}

.panels-section-columns .inside { margin-top: 1.5em; }

.panopoly-magic-preview-link { position: relative; padding: 5px 0px; }
.panopoly-magic-preview-link .content-type-button { position: absolute; right: 10px; top: 50%; margin-top: -10px; }
.panopoly-magic-preview-link .content-type-button a { background: #999; float: left; color: white; padding: 5px 10px; text-decoration: none; }
.panopoly-magic-preview-link .content-type-button a img { display: none; }
.panopoly-magic-preview-link .content-type-button a span { margin: 0; padding: 0; position: static; }
.panopoly-magic-preview-link .content-type-button a:hover { background: #2fa6e5; }
.panopoly-magic-preview-link .panopoly-magic-preview-title-inner a { background: transparent; border: none; color: #666 !important; text-shadow: none; margin: 0; padding: 0px 50px 0px 0px; text-align: left; width: 100%; cursor: pointer; }
.panopoly-magic-preview-link .panopoly-magic-preview-title-inner a:hover { color: #000 !important; }
.panopoly-magic-preview-title .content-type-button span { top: 0px; }