body.panels-ipe {
margin-bottom: 60px !important;
}
/* Hide the IPE toolbar on print output. */
@media print {
#panels-ipe-control-container {
display: none !important;
}
body.panels-ipe {
margin-top: 0 !important;
}
}
/* Hide the control container when the overlay is open. */
html.overlay-open #panels-ipe-control-container {
display: none !important;
}
html.overlay-open body.panels-ipe {
margin-top: 0 !important;
}
div.panels-ipe-handlebar-wrapper {
border-bottom: 1px solid #CCC;
}
.panels-ipe-editing div.panels-ipe-portlet-wrapper {
margin-top: 1em;
border: 1px solid #CCC;
width: 100%;
}
/* Hide empty panes when not editing them. */
.panels-ipe-empty-pane {
display: none;
}
.panels-ipe-editing .panels-ipe-empty-pane {
display: block;
}
.panels-ipe-editing div.panels-ipe-portlet-wrapper:hover {
border: 1px dashed #CCC;
}
.panels-ipe-editing .panels-ipe-sort-container {
min-height: 40px;
}
.panels-ipe-editing .panels-ipe-sort-container .ui-sortable-helper {
background: white;
}
.panels-ipe-editing div.panel-pane div.admin-links {
display: none !important;
}
.panels-ipe-editing .panels-ipe-sort-container .ui-sortable-placeholder {
border: 2px dashed #999;
background-color: #FFFF99;
margin: 1em 0;
-moz-border-radius: 0;
-khtml-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
div.panels-ipe-handlebar-wrapper ul {
float: left;
margin: 0;
padding: 0;
text-align: right;
}
div.panels-ipe-handlebar-wrapper li {
background: none;
list-style-type: none;
list-style-image: none;
margin: 0 .5em 0 0;
padding: 0;
float: left;
}
div.panels-ipe-draghandle,
div.panels-ipe-nodraghandle {
background: #E9E9E9;
background-image: linear-gradient(bottom, #D5D5D5 0%, #FCFCFC 100%);
background-image: -o-linear-gradient(bottom, #D5D5D5 0%, #FCFCFC 100%);
background-image: -moz-linear-gradient(bottom, #D5D5D5 0%, #FCFCFC 100%);
background-image: -webkit-linear-gradient(bottom, #D5D5D5 0%, #FCFCFC 100%);
background-image: -ms-linear-gradient(bottom, #D5D5D5 0%, #FCFCFC 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #D5D5D5),
color-stop(1, #FCFCFC)
);
padding: 8px 7px;
}
div.panels-ipe-draghandle span.panels-ipe-draghandle-icon {
display: block;
float: right;
cursor: move;
width: 34px;
height: 34px;
padding: 0 !important; /* override button defaults */
}
span.panels-ipe-draghandle-icon-inner {
display: block;
width: 34px;
height: 34px;
background: url(../images/icon-draggable.png) no-repeat 3px 3px;
}
div.panels-ipe-placeholder {
border: 2px dashed #999;
padding: .5em;
position: relative;
margin-top: .5em;
background-color: #ECFAFF;
color: #999;
font: 15px/1.3em "Open Sans", "Lucida Grande", Tahoma, Verdana, sans-serif;
text-transform: none;
letter-spacing: 0;
text-align: left;
word-spacing: 0;
}
div.panels-ipe-placeholder h3 {
font-weight: normal;
font-size: 15px;
width: 75px; /* In order to prevent the region title from running into the button, set a width. Initital width only--this will be changed by jQuery */
margin: 1.154em 0;
}
/* Hide editor-state-on elements initially */
.panels-ipe-on {
display: none;
}
.panels-ipe-editing .panels-ipe-on {
display: block;
}
/* Show editor-state-off elements initially */
.panels-ipe-off {
display: block;
}
div.panels-ipe-newblock {
-webkit-box-shadow: 0px 0 5px 5px #ECFAFF;
-moz-box-shadow: 0px 0 5px 5px #ECFAFF;
box-shadow: 0px 0 5px 5px #ECFAFF;
position: absolute;
right: 10px;
top: 50%;
margin-top: -18px; /* some initial guesses to help center the add button
panels_ipe.js will evaluate the width and get this pixel-perfect */
margin-left: -30px;
z-index: 99;
}
div.panels-ipe-newblock li {
padding: 0;
}
div.panels-ipe-handlebar-wrapper li a,
div.panels-ipe-dragtitle span,
div.panels-ipe-newblock a,
span.panels-ipe-draghandle-icon {
display: inline-block;
border: 1px solid #ccc;
padding: 0 8px 1px;
font: bold 12px/32px 'Open Sans', 'Lucida Sans', 'Lucida Grande', verdana sans-serif;
text-decoration: none;
height: 33px;
color: #666;
cursor: pointer;
outline: none;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #FAFAFA;
background-image: linear-gradient(bottom, #E9EAEC 0%, #FAFAFA 100%);
background-image: -o-linear-gradient(bottom, #E9EAEC 0%, #FAFAFA 100%);
background-image: -moz-linear-gradient(bottom, #E9EAEC 0%, #FAFAFA 100%);
background-image: -webkit-linear-gradient(bottom, #E9EAEC 0%, #FAFAFA 100%);
background-image: -ms-linear-gradient(bottom, #E9EAEC 0%, #FAFAFA 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #E9EAEC),
color-stop(1, #FAFAFA)
);
-webkit-box-shadow: 0px 3px 3px 0px #d2d2d2;
-moz-box-shadow: 0px 3px 3px 0px #d2d2d2;
box-shadow: 0px 3px 3px 0px #d2d2d2;
}
div.panels-ipe-handlebar-wrapper li a span,
div.panels-ipe-newblock a span {
display: block;
height: 32px;
width: 18px;
background-position: center center;
background-repeat: no-repeat;
text-align: left;
text-indent: -9999em;
}
div.panels-ipe-handlebar-wrapper li.edit a span {
background-image: url(../images/icon-settings.png);
}
div.panels-ipe-handlebar-wrapper li.style a span,
div.panels-ipe-newblock a.style span {
background-image: url(../images/icon-style.png);
}
div.panels-ipe-newblock a.style {
margin-right: .5em;
}
div.panels-ipe-newblock a.add span {
background-image: url(../images/icon-add.png);
}
div.panels-ipe-handlebar-wrapper li.delete a span {
background-image: url(../images/icon-delete.png);
}
div.panels-ipe-handlebar-wrapper li a:hover,
div.panels-ipe-dragtitle span:hover,
div.panels-ipe-newblock a:hover,
span.panels-ipe-draghandle-icon:hover {
background: #E6E6E6;
background-image: linear-gradient(bottom, #C5C5C5 0%, #FAFAFA 100%);
background-image: -o-linear-gradient(bottom, #C5C5C5 0%, #FAFAFA 100%);
background-image: -moz-linear-gradient(bottom, #C5C5C5 0%, #FAFAFA 100%);
background-image: -webkit-linear-gradient(bottom, #C5C5C5 0%, #FAFAFA 100%);
background-image: -ms-linear-gradient(bottom, #C5C5C5 0%, #FAFAFA 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #C5C5C5),
color-stop(1, #FAFAFA)
);
}
div.panels-ipe-handlebar-wrapper li a:active,
div.panels-ipe-dragtitle span:active,
div.panels-ipe-newblock a:active,
span.panels-ipe-draghandle-icon: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)
);
-webkit-box-shadow: 0px 0px 0px 0px #fff;
-moz-box-shadow: 0px 0px 0px 0px #fff;
box-shadow: 0px 0px 0px 0px #fff;
}
.panels-ipe-editing .panels-ipe-portlet-content {
margin: 10px 3px;
overflow: hidden;
}
.panels-ipe-editing .panels-ipe-region {
border: transparent dotted 1px;
float: left;
width: 100%;
margin-bottom: 5px;
}
div.panels-ipe-draghandle {
border: none;
}
.ui-sortable-placeholder {
margin: 1em;
border: 1px dotted black;
visibility: visible !important;
height: 50px !important;
}
.ui-sortable-placeholder * {
visibility: hidden;
}
/** ============================================================================
* Controller form markup
*/
div#panels-ipe-control-container {
z-index: 99999;
position: fixed;
bottom: 0;
display: none;
background-color: #000;
padding: 0.5em 0;
width: 100%;
overflow: hidden;
-moz-box-shadow: 0 3px 20px #000;
-webkit-box-shadow: 0 3px 20px #000;
box-shadow: 0 3px 20px #000;
}
.ipe-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;
/* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
left: 49%;
position: fixed;
top: 48.5%;
z-index: 1001;
}
/* Hide the drupal system throbber image */
.ipe-throbber .throbber {
display: none;
}
div.panels-ipe-pseudobutton-container,
div.panels-ipe-control .form-submit {
cursor: pointer;
background: #666666;
background-image: linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: -o-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: -moz-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: -webkit-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: -ms-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #383838),
color-stop(1, #666666)
);
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #CCC;
display: inline-block;
font: bold 12px/33px "Open Sans", "Lucida Grande", Tahoma, Verdana, sans-serif;
height: 33px;
margin: 0 10px;
}
div.panels-ipe-control .form-submit {
padding: 0 0.8em 2px 34px;
}
div.panels-ipe-control input.panels-ipe-save, div.panels-ipe-control input.panels-ipe-cancel,
div.panels-ipe-control input.panels-ipe-save:hover, div.panels-ipe-control input.panels-ipe-cancel:hover,
div.panels-ipe-control input.panels-ipe-save:active, div.panels-ipe-control input.panels-ipe-cancel:active {
background-repeat: no-repeat;
}
div.panels-ipe-pseudobutton-container a {
height: 33px;
padding: 0 0.8em;
display: inline-block;
color: #CCC;
text-decoration: none;
}
div.panels-ipe-control input.panels-ipe-save {
background-image: url(../images/icon-save.png);
background-image: url(../images/icon-save.png), linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #383838),
color-stop(1, #666666)
);
}
div.panels-ipe-control input.panels-ipe-cancel {
background-image: url(../images/icon-close.png);
background-image: url(../images/icon-close.png), linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-close.png), -o-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-close.png), -moz-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-close.png), -webkit-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-close.png), -ms-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-close.png), -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #383838),
color-stop(1, #666666)
);
}
div.panels-ipe-pseudobutton-container:hover,
div.panels-ipe-control .form-submit:hover {
background: #999999;
background-image: linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: -o-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: -moz-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: -webkit-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: -ms-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #3D3D3D),
color-stop(1, #999999)
);
color: #FFF;
}
div.panels-ipe-pseudobutton-container a:hover {
color: #FFF;
}
div.panels-ipe-control input.panels-ipe-cancel:hover {
background-image: url(../images/icon-close.png), linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: url(../images/icon-close.png), -o-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: url(../images/icon-close.png), -moz-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: url(../images/icon-close.png), -webkit-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: url(../images/icon-close.png), -ms-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: url(../images/icon-close.png), -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #3D3D3D),
color-stop(1, #999999)
);
}
div.panels-ipe-control input.panels-ipe-save:hover {
background-image: url(../images/icon-save.png), linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #3D3D3D 0%, #999999 100%);
background-image: url(../images/icon-save.png), -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #3D3D3D),
color-stop(1, #999999)
);
}
div.panels-ipe-pseudobutton-container:active,
div.panels-ipe-control .form-submit:active {
background: #333;
background-image: linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: -o-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: -moz-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: -webkit-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: -ms-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #616161),
color-stop(1, #333333)
);
color: #CCC;
}
div.panels-ipe-pseudobutton-container a:active {
color: #CCC;
}
div.panels-ipe-control input.panels-ipe-cancel:active {
background-image: url(../images/icon-close.png), linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: url(../images/icon-close.png), -o-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: url(../images/icon-close.png), -moz-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: url(../images/icon-close.png), -webkit-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: url(../images/icon-close.png), -ms-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: url(../images/icon-close.png), -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #616161),
color-stop(1, #333333)
);
}
div.panels-ipe-control input.panels-ipe-save:active {
background-image: url(../images/icon-save.png), linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #616161 0%, #333333 100%);
background-image: url(../images/icon-save.png), -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #616161),
color-stop(1, #333333)
);
}
div.panels-ipe-pseudobutton-container a.panels-ipe-startedit {
padding-left: 34px;
background: url(../images/icon-configure.png) no-repeat 10px 9px;
}
div.panels-ipe-pseudobutton-container a.panels-ipe-change-layout {
padding-left: 34px;
background: url(../images/icon-change-layout.png) no-repeat 10px 9px;
}
div.panels-ipe-button-container {
margin: 0.3em 0.5em;
text-align: center;
}
form#panels-ipe-edit-control-form {
text-align: center;
}