/* only for border box */
.divRteEditButton ion-icon,i>ion-icon {font-size: 16px!important; padding: 0!important; margin: 3px; color:white;vertical-align: middle;pointer-events: none;}
.divToolImgSettings ion-icon,body .row-tool ion-icon {font-size: 16px!important; padding: 0; margin: 7px; color:white;pointer-events: none;}
/*prevent icon css override*/
body .row-tool ion-icon,
body .col-tool ion-icon,
body .is-section-tool ion-icon{
background-color: initial !important;
min-height: 0;
}
body {margin:0 !important; padding: 0 !important; } /* give space 70px on the bottom for panel */
#panelCms {width:100%;height:57px;border-top: #eee 1px solid;background:rgba(255,255,255,0.95);position:fixed;bottom:0;padding:10px;box-sizing:border-box;text-align:center;white-space:nowrap;z-index:10001;}
#panelCms button {border-radius:4px;padding: 10px 15px;text-transform:uppercase;font-size: 11px;letter-spacing: 1px;line-height: 1;}
div.contentBoxEditor {
margin: 0 !important;
margin-top: 38px !important;
margin-bottom: 46px !important;
}
div.is-container {
width: 90%;
}
#ContentBoxEditorContent div.is-container {
width: 100%; /*reflect website content*/
}
/*
div.is-wrapper {
transform-origin: left top 0px;
transform:scale(0.8,1);
}
@media (min-width: 1000px) {
div.is-wrapper {
transform:scale(0.85,1);
}
}
@media (min-width: 1200px) {
div.is-wrapper {
transform:scale(0.9,1);
}
}
@media (min-width: 1400px) {
div.is-wrapper {
transform:scale(0.95,1);
}
}*/
/*test padding to remove stretching using scale (above)*/
div.is-wrapper{padding-right:15%;}
.bottomBar {position: fixed;z-index:61;left:0;bottom:0;height:32px; display:none;}
.bottomBar button.btn{transition: background-color .3s ease;height:32px;line-height:28px;background: #3c3e3f!important;border:0;color:#fff;margin: 0 !important;padding: 0 10px !important;}
.bottomBar #btnAddSection{}
.bottomBar #btnEditBox{}
#rte-toolbar button {color: white;}
#rte-toolbar ion-icon {
font-size: 14px;
vertical-align: middle;
}
#htmlEditorSaveIframe { height: 30px ;}
#pop-align,#pop-list,#pop-table.rte-pop { top: 43px; z-index:361;}
#pop-align i,#pop-list i{ color:#fff; }
.md-pickalign *, .md-picklist * {font-size: 14px;color: white;}
.clearfix { clear: both;}
#rte-toolbar button.textButton{
font-family:Georgia,serif;
padding: 0;
line-height: 29px;
font-size: 14px;
vertical-align: middle;
height: 29px;
width: 48px;
}
#cbNodeType{width: 40px;overflow:hidden;}/*deal with blockquote*/
#rte-toolbar button.colourButton{
height: 29px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
#rte-toolbar #cbTextColour{
height: 16px;
width: 16px;
border:1px solid rgba(255,255,255,0.3);
}
.is-boxes{
height:100%!important; /*added to address chrome vert postioning issue should work without important like firefox*/
}
/*fix contentbox float issue*/
body .is-boxes, body .is-wrapper > div {
float: none;
}
body .is-boxes.slick-slide {
float: left;
}
.flex{
display: flex;
}
/**********************************
Andrew Slider Widget STYLING
***********************************/
.cb-sl-add,.cb-sl-nav,{display:none;}
.ineditor .cb-sl-nav{display:block;}
.ineditor .cb-sl-add{display:inline-block;}
.column.slide .col-tool{display:none;}
.inpagelazygallery + .row-tool .row-addcol,
.inpagelazygallery + .row-tool .row-remcol{display:none;}
.ineditor .inpagelazygallery .column.slide{position:relative;margin:5px!important;}
.inpagelazygallery .slideThumbsEditor{display:none;}
.inpagelazygallery.gt img.inpageslide{padding:0 10px;} /*.gt greater than one e.g. multiple images, styled first img prior to slide init to avoid visual jump*/
.inpagelazygallery.gt a{padding:0 10px;}
.ineditor .inpagelazygallery .column.slide,
.ineditor .inpagelazygallery .column.slide img{height:100px!important;width:auto!important;margin:0;display:inline-block;}
.ineditor .inpagelazygallery .cb-sl-add-ico,
.ineditor .inpageslideradd{display:inline-block;border:1px dotted #222;color:#222;background:rgba(255,255,255,0.1);text-align:center;font-size:2rem;cursor:pointer;line-height: 98px;width: 100px;margin:5px;}
/*used unique class for new non-snippet embedded thumbnails to identify and get away from .column*/
.inpagesliderthumb,
.inpagesliderthumb img{height:80px!important;width:auto!important;margin:0;display:inline-block;}
.inpagesliderthumb{display:inline-block;width:auto!important;float:none; vertical-align:top;margin:5px 5px 5px 0;cursor:move;border:1px solid rgba(0,0,0,0);position: relative;}
.inpagesliderthumbnails .inpageslideradd{border:1px dotted #222;color:#222;background:rgba(255,255,255,0.1);text-align:center;font-size:2rem;cursor:pointer;line-height: 78px;width: 80px;margin:5px 0;}
.inpagesliderthumb.active{border:1px solid red!important;}
.inpagesliderthumb .inpagesliderdelete {
background: rgb(247, 99, 46);right:0;
}
.inpagesliderthumb:first-child .inpagesliderdelete{
display:none!important;
}
.inpagesliderthumb:hover .inpagesliderdelete{opacity:1}
.inpagelazygallery{margin: 1.3em;}
.ineditor .inpagelazygallery,
.ineditor .inpagelazyproduct,
.ineditor .cb-widget, /*without settings modal*/
.ineditor .cb-settings.cb-slider,
.ineditor .cb-settings.cb-grid{margin: 1rem; padding: 1rem 1rem 1.5rem;border:1px solid #ccc;background:#efefef;display: block;position: relative;}
.ineditor .row.cb-slider,
.ineditor .ui-draggable:hover .row.cb-slider{
margin:0 -1rem;
padding: 0rem 1rem;
}
.ineditor .cb-slider .slideactive .animated {
visibility:visible; /*override core setting to stop flicker on load, made visible by slick init - no slick in cms...*/
}
.ineditor .cb-smartblock .column{
text-align:center;
font-size:120%;
line-height: 1.2;
padding-bottom:1rem;
}
.ineditor .cb-smartblock .column:after{
content:"Add custom code by creating a Smart Block via DESIGN > SMART BLOCKS \A Then replace the example [SMART-BLOCK] tag above with your own. \A Custom code for the Smart Block should be added in HTML mode";
white-space: pre-wrap;
font-size:70%;
}
.ineditor .inpagelazygallery .slick-arrow,.ineditor .inpagelazygallery .slick-arrow:hover {padding: 7px;height: 44px;width: 44px;background-repeat:no-repeat!important;background-position:center!important;}/*match live css*/
.ineditor .inpagelazygallery .slick-dots{bottom:10px;left: 0;right: 0;}
.ineditor .inpagelazygallery .column.slide{display:inline-block;width:auto!important;float:none; vertical-align:top;}
.inpagelazygallery img{width: 100%;margin: 0;}
.inpagelazygallery > .column{display:none;}
/*Attempt to show first image while loading/swapping*/
.inpagelazygallery > .column:first-child{display:block;padding:0;float: none;border:none;}
.inpagelazygallery.gt > .column:first-child{display:none;}
.inpagelazygallery .cb-sl-add-ico:hover {background: rgba(255,255,255,0.8);}
.ineditor .inpagelazygallery .cb-title:before{content: "INPAGE GALLERY SLIDER";}
.ineditor .inpagelazygallery .cb-title.variable-width:before{content: "INPAGE VARIABLE WIDTH GALLERY SLIDER";}
.ineditor .inpagelazygallery .cb-title{text-align:center;}
/*Reset padding for V4 slider*/
.ineditor .inpageslidercontainer .column:first-child{padding-left:1rem;padding-right:1rem;}
/*Ineditor slick-slide customistions*/
/*V4 inpage slider*/
body.ineditor .inpageslidercontainer > .column .col-tool{display:none;}
body.ineditor .inpageslidercontainer.cb-slider{margin:0!important;background:none;border:none;}
body.ineditor .inpageslidercontainer.cb-slider:not(.is-multicol-slider){padding:0!important;}
body.ineditor .inpageslidercontainer.cb-slider.cmsUsualWidth {margin-inline: auto!important;} /*If section width contstrained to usualwidth*/
.ineditor .inpageslidercontainer{display:grid!important;}
.ineditor .inpageslidercontainer > .column{grid-area: 1 / 1;display:block;}
.ineditor .inpageslidercontainer.flexSlides > .column{display:flex;}
.ineditor .inpageslidercontainer > .column{visibility:hidden;}
.ineditor .inpageslidercontainer > .column.slideactive,.ineditor .inpageslidercontainer .slidevisible{visibility:visible; z-index: 1;}
/*V4 cbox*/
.ineditor .is-overlay .inpageslidercontainer .slider-image{display:none!important;}
.ineditor .is-overlay .inpageslidercontainer .slider-image.slideactive{display:table!important;float: none;}
.ineditor .is-overlay .inpageslidercontainer{display:block!important;height: 100%;}
/*V4 cbox caption*/
.ineditor .is-caption-slider .is-box{display:none;}
.ineditor .is-caption-slider .is-box.slideactive{display:block;float: none;}
.ineditor .is-caption-slider .is-boxes{position:relative;}
.is-caption-slider .row img{width: unset;}
/*V4 cbox multislide - display as grid to show max height*/
body.ineditor .is-multicol-slider.is-combinedWidth{
margin-inline:auto!important;
}
.ineditor .is-multicol-slider{
display:grid;
}
.ineditor .is-multicol-slider > .slideMultiColumn {
visibility: hidden;
}
.ineditor .is-multicol-slider > .slideMultiColumn {
grid-area: 1 / 1;
display: block;
}
.ineditor .is-multicol-slider > .slideMultiColumn.slideactive {
visibility: visible;
z-index: 1;
}
@media (min-width: 960px) {
.ineditor .slideMultiColumn > .is-boxes{
display:flex;
}
}
.ineditor .slideMultiColumn .is-box{
height:100%;
}
.ineditor .slideMultiColumn .is-single-column{display: table;} /*firefox fix*/
.ineditor .slide-tool{cursor:pointer;}
.ineditor .slide-tool ion-icon{pointer-events: none;}
.ineditor .slide-tool{font-size:30px;padding:1rem;}
.ineditor .cb-slider-prev {
position: absolute;
top: 50%;
margin-top: -31px;
z-index: 23;
}
.ineditor .cb-slider-next {
position: absolute;
top: 50%;
margin-top: -31px;
z-index: 23;
right:0;
}
.ineditor .cmsSlickArrow {
position: absolute;
top: 50%;
left:0;
transform: translateY(-50%);
z-index: 23;
padding: 0;
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor:pointer;
margin:1rem;
}
.ineditor .cmsSlickArrow:hover{ outline: rgba(228, 156, 90, 0.5) solid 1px;}
.ineditor .cmsSlickArrow.cb-slider-next {
right: 0;
left: auto;
}
/* allow 10% to get higher than the section buttons */
.ineditor .cb-slider-pager {
position:absolute;
bottom:10%;
z-index:23;
left: 50%;
transform: translateX(-50%);
caret-color: rgba(0,0,0,0);
}
.ineditor .cb-pager-button {
cursor: pointer;
height: 12px;
width: 12px;
border-radius: 12px;
background: none;
border: 1px solid #777;
margin: 2px;
display:inline-block;
}
.ineditor .cb-pager-button.active {
background:#777;
}
/*INPAGE SLIDER V4 customisations*/
.cbcaptioncontainer{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; position: absolute;z-index:9;top:0;bottom:0;left:0;right:0;}
.cbimagecontainer{position: relative;}
.cbimagecontainer:hover img{-webkit-user-select: none;user-select: none;}
.cbimageoverlay{position: absolute;z-index: 8;top:0;bottom:0;left:0;right:0;}
.cbcaptioncontainer figcaption{position:absolute;}
.cbcaptioncontainer{pointer-events:none;}
.cbcaptioncontainer > *{pointer-events:all;}
.slideAspect1 .slidevisible{aspect-ratio:1;}
.slideAspect6x4 .slidevisible{aspect-ratio:6/4;}
.slideAspect4x6 .slidevisible{aspect-ratio:4/6;}
.slideAspect6x5 .slidevisible{aspect-ratio:6/5;}
.slideAspect5x6 .slidevisible{aspect-ratio:5/6;}
.slideAspect2x1 .slidevisible{aspect-ratio:2/1;}
.slideAspect1x2 .slidevisible{aspect-ratio:1/2;}
.slideAspectWS .slidevisible{aspect-ratio:1;}
.slideAspectWS .slidevisible img{object-fit: contain;}
.slideAspectWW .slidevisible{aspect-ratio:6/4;}
.slideAspectWW .slidevisible img{object-fit: contain;}
[class*=" slideAspect"] img,[class^="slideAspect"] img{
object-fit:cover;
height: calc(100% - 2rem); /*maintain margin*/
}
@supports not (aspect-ratio: 6/4) {
[class*=" slideAspect"] img,[class^="slideAspect"] img{
height:auto; /*do not fit*/
}
}
/*INPAGE SECTION SLIDER V4 (Caption Slider) customisations*/
.is-caption-slider .cbBoxToolBottomRight{
z-index:1000;
}
.is-caption-slider .is-box {
position: relative;
}
.is-caption-slider .btnBoxSlideBGImage,
.is-caption-slider .btnEditBox,
.is-multicol-slider .btnEditBox,
.is-multicol-slider .btnAddBox,
.is-multicol-slider .btnRemoveBox{
display:none!important;
}
.is-caption-slider .btnEditBox.btnBoxSectionSettings,
.is-multicol-slider .btnBoxSectionSettings {display:inline-block!important;}
/*INPAGE SECTION SLIDER V4 VARIABLE WIDTH customisations*/
.ineditor .inpageslidercontainer.variablewidthslider {
display: flex !important;
}
.ineditor .variablewidthslider .column.full {
width: auto;
}
.ineditor .variablewidthslider img{
height:300px;
width:auto!important;
object-fit:contain;
}
.ineditor .inpageslidercontainer.variablewidthslider > .column {
display: none;
}
.ineditor .inpageslidercontainer.variablewidthslider > .column.slidevisible {
display: block;
}
/*Popup*/
.ineditor .is-wrapper>div.inpagelazypopup { display: table; }
.ineditor .inpagelazypopup.cb-settings{background:unset;margin:unset;padding:unset;border:none;position: relative;}
.ineditor .inpagelazypopup{display: block;position: relative;}
.ineditor .inpagelazypopup.flex{display: flex;}
.ineditor .inpagelazypopup:before{
content: "POPUP WINDOW";
background: #006ac2;
color: white;
position: absolute;
top: 0;
right: 0;
padding: 0.3rem 0.5rem;
font-size: 10px;
}
.ineditor .inpagelazypopup.cb-settings{
border:1px solid #006ac2;
}
.cbcaptioncontainer{pointer-events:none;}
.cbcaptioncontainer > *{pointer-events:all;}
/*end widget styling*/
/*ignore .col-tools*/
.ineditor .lastElBaseAlign .column > *:nth-last-child(4){
margin-top:auto;
}
#md-imageselect, #md-fileselect { width:90% !important; height: 90% !important ; border: 2px solid #333; overflow: auto; }
#ifrImageBrowse, #ifrFileBrowse {min-height: 2500px !important ; min-width: 600px !important ; background: white; }
#md-imageselect .md-content {
border-radius: 0px !important;
}
body div.bar > div,
body div.bar > div > i {
white-space: nowrap;
overflow: hidden;
}
#md-properties{
top: auto;
bottom: 0;
left: 0;
transform: inherit;
right: 0;
width: 100%;
}
#md-properties,#md-properties .md-content{
border-radius:0!important;
}
#divTool { width: 13% !important ; padding: 0; }
#divSnippetList { padding: 1%; width:95%; }
#divSnippetList{padding-bottom:100px;} /*allow small screen customers to scroll to bottom*/
#divSnippetList>div img { min-height: 30px;}
#divSnippetList div {
margin: 1% ; padding: 1%; width:95%;
border: 1px solid #acacac;
background: white;
font-size: 8pt;
color: #777;
text-align: center;
}
.is-content-maxwidth #divTool { left: 10px !important; }
#divRteLink, .divRteEditButton, .divRteEditButtonLarge {
display: none;
white-space: nowrap;
height: 25px;
position: absolute;
text-align: center;
vertical-align: middle;
z-index: 1000;
opacity: 0.9;
background: #1AA3FF;
cursor: pointer;
border-radius: 3px;
border: #B7DEF3 0px solid;
color: #fff;
font-family: sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0 5px;
line-height: 25px;
}
.divRteEditButtonLarge{
height:30px;
font-size: 12px;
line-height: 20px;
padding: 5px 10px;
box-sizing: border-box;
}
.divRteEditButtonLarge ion-icon{
height: 20px;
color: white;
vertical-align: top;
font-size:18px!important;
min-width: 18px;
padding:0!important;
}
.distractionFree #divRteLink,.distractionFree .divRteEditButton{
font-size: 0;
width: 26px;
box-sizing:border-box;
}
.distractionFree .divRteEditButtonLarge {
font-size: 0;
width: 38px;
}
.distractionFree #divRteLink ion-icon,.distractionFree .divRteEditButton ion-icon{
margin:0;
}
#divSetLink div.slide{
display:none;
}
#divSetLink.slider div.slide{
display:block;
}
#divSetLink.slider div.setting{
display:none;
}
#divRteHeading,#divSlideLink{display:none!important;}
#rte-toolbar {
top: 1px;
left: 50%;
width: auto;
margin-left:-327px;
padding: 2px;
height: 38px;
border: none;
}
#rte-toolbar button { padding: 5px; top: 5px; left: 12%; width: 38px;height: 34px;box-sizing: border-box; background-color: rgba(0,0,0,0.9); border-right: 1px solid rgba(255,255,255,0.2);vertical-align: middle;}
#rte-toolbar button[data-rte-cmd=mobileView]{width:30px;}
#rte-toolbar button:first-child{border-left: 1px solid rgba(255,255,255,0.2);}
#rte-toolbar .separator{background:#999;display:inline-block;width:2px;height:34px; vertical-align: middle;}
.md-body input[type=text], .md-body textarea { padding: 5px }
.md-body .md-vals{width:70%;background:#f7f7f7; display: inline-block;}
.md-body .md-span{
display: inline-block;
height: 37px !important;
line-height: 37px !important;
vertical-align: top;
padding: 0 5px;
}
.md-body .md-label {
width:25% !important;
display: inline-block;
height: 37px !important;
line-height: 37px !important;
}
.md-body input[type=text] {
display: inline-block;
height: 37px !important;
}
.md-body select,
.md-body textarea.inptxt,
.md-modal input[type='text'],
input#txtAltText,
.md-body .three-quarter {
float: left !important;
width: 75% !important;
height: 37px !important;
color: #999;
color:black;
border-bottom: 1px solid #444;
border-bottom:1px solid #eaeaea;
border-radius: 0;
margin: 0;
background-color: rgba(255,255,255,0.1);
padding-left: 1rem;
}
.md-body .three-quarter{padding-left:0;}
#txtImgUrl, #txtLinkUrl {color: #999;color:black;}
.md-modal .md-title {
font-size: 16px;
text-align: center;
letter-spacing: 0.5px;
}
.md-modal input#txtImgUrl,
.md-modal input#txtImageLink,
.md-modal input#txtLinkUrl,
.md-modal input#txtLink,
.md-modal input.inpTxtWithButton
{
width: 65% !important;
display: inline-block;
}
.md-modal input#txtSrc ,
.md-modal input.inptxtFull { width: 100% !important; }
.md-btnbrowse, .md-btneffects,.md-btnstyle,
i#btnImageBrowse, i#btnFileBrowse,
.md-modal input[type=button].inpPopupButton,
.md-body .md-btnright {
float:left;
width:10% !important;
height: 37px;
line-height: 37px;
width: 10%;
cursor: pointer;
font-size: 13px;
margin: 0; padding: 0;
text-align: center;
box-sizing: border-box;
}
.md-body .md-btnright{
height:auto;
}
.md-modal .md-btnright input[type=button].inpPopupButton{
width:100%!important;
}
.md-body input.inpPopupButton,
.md-body .md-btnbrowse
{
float: right;
display: inline-block;
padding: 0;
margin: 0;
background-color:#c2d3eb; color: black;
border:1px solid #c2d3eb;
width:10% !important;
height: 37px !important;
line-height: 37px !important;
}
.md-body .md-btnbrowse {
color:#fff;
background-color:#006bc2;
border:1px solid #006bc2;
}
.md-body .md-btnstyle {
color:#fff;
background-color:#a73c3c;
border:1px solid #a73c3c;
}
.md-body .md-btneffects {
color:#fff;
background-color:#832f2f;
border:1px solid #832f2f;
}
.md-body #divImgLnk #btnImageBrowse,
#md-createlink #btnLinkBrowse,
#btnFileBrowse,
.md-body input.inpPopupButton,
.md-body .md-btnbrowse {
cursor:pointer;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
transition: all 0.2s ease-in-out;
}
.md-body .md-intro-text {
background-color: #dfdfdf;
color: black;
margin:0;
}
#btnLinkBrowse,
#btnFileBrowse{
background-color:#006bc2;
background-color:#3c3e3f;
}
.md-body input.inpPopupButton:hover,
.md-body .md-btnbrowse :hover
{
background-color: #9bb7df;
}
.md-body .md-btnstyle:hover {
background-color:#963636;
}
.md-body .md-btneffects:hover {
background-color:#702929;
}
.md-body #divImgLnk #btnImageBrowse:hover,
#btnFileBrowse:hover
{
background-color:#004f8f;
border:1px solid #004f8f;
}
#md-createlink #btnLinkBrowse:hover,
#btnFileBrowse:hover
{
background-color:#2f3131;
border:1px solid #2f3131;
}
.ineditor .stretchElement:after {content:none;}
#divImgLnkOk,#divLnkOk,
#md-html .md-footer{
background-color:#ddd;
background-color: #f7f7f7;
padding: 0 1rem 1rem;}
#md-html .md-footer{
padding: 0;
}
#btnHtmlOk{
padding: 1rem;
}
#md-view-html #btnViewHtmlOk,
#divImgLnkOk #btnImgOk,#divLnkOk #btnLinkOk,
#md-html .md-footer #btnHtmlOk{background-color:#00bf00;color:#fff; border-radius: 0px; width: 100%; }
#md-view-html #btnViewHtmlOk:hover,
#divImgLnkOk #btnImgOk:hover,
#md-html .md-footer #btnHtmlOk:hover{background-color:#00a300;}
.md-label {
font-size: 11px;
letter-spacing: 0.5px;
text-transform: uppercase;
color:#555;
}
.removeOnSave {
font-family: Arial;
}
.md-modal {
top: 8%;
transform: translateY(0) translateX(-50%);
font-family: Arial;
}
.md-modal.largerModal {
height: 85% !important;
width: 90% !important;
transform: none !important;
left: 0 !important;
top: 0 !important;
margin: 2% 5% !important;
}
.md-modal.maximiseModal {
top: 0 !important;
width:100% !important;
max-width:100% !important;
left: 0 !important;
height: 100% !important;
max-height:100% !important;
transform: none !important;
margin: 0% !important;
}
/* give space to the footer bar */
.md-modal.largerModal .md-content .md-body {
box-sizing: border-box;
border-bottom:rgba(0,0,0,0) 55px solid;
}
.md-modal.largerModal .md-content,
.md-modal.largerModal .md-content .md-body,
.md-modal.largerModal .md-content .md-body .maximiseHeight
{
height: 100% !important;
}
.md-modal.maximiseModal .md-content,
.md-modal.maximiseModal .md-content .md-body,
.md-modal.maximiseModal .md-content .md-body .maximiseHeight
{
height: inherit !important;
}
.md-modal.largerModal .md-footer ,
.md-modal.maximiseModal .md-footer {
position:absolute; bottom: 0; right: 0;
}
.modalControls { position:absolute; top:0px; right: 8px; height:auto;}
.modalControls button { line-height: 100% !important; padding: 3px; height:auto;}
.modalControls button ion-icon { font-size: 15px; color: inherit;}
/* InnovaBox */
.md-tabs span#tabImgPl,
form#form-upload-cover { display: none !important ; visibility: hidden; }
.md-body p {color: silver;}
.md-body .md-intro-text {
padding-inline: 1rem;
font-size: 80%;
line-height: 30px; }
.md-modal .is-box-2 { display: inline-block;box-sizing: border-box;}
.md-modal .is-box-3 { display: inline-block;box-sizing: border-box;}
.md-modal .is-box-4 { display: inline-block;box-sizing: border-box;}
.md-modal .is-box-6 { display: inline-block;box-sizing: border-box;}
.md-modal .is-box-12 {display: inline-block;box-sizing: border-box;}
.is-box{vertical-align:top;}
.cmsButton {
padding: 3px 20px;border-radius:30px;background:#515151;text-decoration:none;color:#fff;margin-right:10px; margin-left: 10px;
}
iframe #cmsContent {
margin: 0;
}
.row-colour {
cursor: pointer;
color: #fff;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background: #028bd4;
}
/* -/+ Panel CSS*/
.row-addcol, .row-remcol {
cursor: pointer;
background: #a73c3c;
color: #fff;
width: 15px;
height: 30px;
font-size: 15px;
text-align: center;
line-height: 30px;
display: inline-block;
}
.row-addcol {
background: #8a3737;
}
.row-addcol .cb-add-col:before {
content: "+";
}
.row-remcol .cb-rem-col:before {
content: "-";
}
.row-addcol i, .row-remcol i {
font-style: normal;
font-weight: 500;
}
/****************************
SNIPPET CONTROLBOX FORMATTING (e.g. Sliders)
*****************************/
.cb-controls {
flex-wrap: wrap;
border: 1px solid #ccc;
background: #efefef;
padding: 10px;
font-size: 12px;
align-items: center;
}
.cb-slider-controls {
flex-wrap: wrap;
align-items: center;
}
.diventry {
display: inline-block;
border: 1px solid #ccc;
padding: 5px;
font-size: 12px;
background: white;
text-align: center;
}
.divblock{
display: inline-block;
padding: 0 3px 0 10px;
}
.numblock:before {
content: "Posts to show:";
}
.colblock:before {
content: "Columns:";
}
.widthblock:before {
content: "Col gap:";
}
.numblock{text-align:center;}
.tokenblock:before{content:" ";display:inline-block;padding:0 3px 0 0;}
.tokenblock{flex:1;}
.tokenblock a{background:#ccc;border-radius:5px;color: #444;padding:10px;}
.inpagecheck {
border: 1px solid #888;
font-style: italic;
color: #888;
cursor: pointer;
user-select: none;
caret-color: #efefef;
padding: 7px 15px;
}
.inpagecheck.active,
.cb-selectblock.selected {
background: white;
color: #222;
font-style: normal;
caret-color: white;
}
.cb-selectblock{
position:relative;
min-width: 125px;
align-items: center;
}
.cb-selectblock ion-icon{
font-size:18px;
}
.cb-options{
background: white;
border: 1px solid #ccc;
position: absolute;
bottom: 32px;
display:none;
z-index:21;
left: 0;
width: 140px;
}
.cb-selectblock:hover .cb-options{
display:block;
}
.cb-selectblock{
border: 1px solid #888;
font-style: italic;
color: #888;
cursor: pointer;
user-select: none;
caret-color: #efefef;
padding: 7px;
max-width:160px;
margin-right:1rem;
width:100%;
}
.cb-option{padding:0.25rem 0.5rem;}
.cb-option:hover{
background:#efefef;
}
/* Custom code widget formatting for ineditor*/
.ineditor.cb-widget,
.ui-draggable .cb-feed,
.ui-draggable .cb-featured{
margin: 1rem;
border: 1px dotted #ccc;
}
.ineditor.cb-widget .cb-feed-content:before,
.ineditor .cb-widget:before,
.ui-draggable .cb-feed-content:before {
font-size: 1.5em;
text-align: center;
display: block;
padding-top:1rem;
min-height:50px;
}
.ineditor .inpagelazygallery .cb-title:before {
display: block;
padding-bottom: 1rem;
}
.ineditor.cb-widget .cb-feed-content:after,
.ineditor .cb-widget:after,
.ui-draggable .cb-feed-content:after{
text-align:center;
display:block;
padding-bottom:1rem;
min-height:50px;
}
.ineditor .cb-spacer{border:1px solid rgba(228, 156, 90, 0.2);}
.ineditor .cb-spacer:hover{
border:1px solid rgba(228, 156, 90, 0.4);
}
.ineditor a#mobbtn{
z-index:0;
}
/* Customise CB Section Slider Toolbar*/
.is-banner-slide-images-editor .row-tool{
display: flex;
flex-direction: column;
}
.is-banner-slide-images-editor .row-html,
.is-banner-slide-images-editor .row-copy,
.is-banner-slide-images-editor .row-copy,
.is-banner-slide-images-editor .row-remove,
.is-banner-slide-images-editor .row-handle{display:none;}
.is-banner-slide-images-editor .row-addcol,
.is-banner-slide-images-editor .row-remcol {
width: 30px;
display: block;
}
.is-banner-slide-images-editor .row-addcol{
border-radius:5px 5px 0 0;
background: rgb(77, 77, 77);
}
.is-banner-slide-images-editor .row-remcol{
border-radius:0 0 5px 5px;
background: rgb(247, 99, 46);
order:2;
}
/* Template Snippets */
/*
#cb-editor { background: #f7f7f8; }
*/
#cb-editor .wsb-template{font-size:14px;}
#cb-editor .wsb-template .column{
margin:0.6em 0;
border: 1px dotted #ccc;
padding:1.2em;
}
.cmsNoEdit ,
div#menu.menu
{
}
/* Reuben, put this into the here, not in the page, simply hidden by default... */
body .is-boxes.is-slideshow-boxes {
display: table; position: absolute !important;
bottom: 0 !important; z-index:23!important;
height: 0;/*above secondary */
}
body.ineditor .is-boxes.is-slideshow-boxes {
display:block!important;
}
body .has-sections .is-boxes.is-slideshow-boxes {
height: 100%;/*address issue with height 0 above on multi-sections*/
}
/*AJ Fixes for 2-col slider display issues ONLY - target .two-col-with-slider*/
body.ineditor .two-col-with-slider .banner-box .is-boxes.is-slideshow-boxes {
position: absolute !important;
bottom: 0 !important;
}
body.ineditor .two-col-with-slider .is-boxes.is-slideshow-boxes {
display:table!important; /* should target slide thumb box only...*/
position:relative!important;
}
.ineditor .hidden.is-banner-slide-images-editor {display: table-cell!important; background:rgba(0,0,0,0.4); bottom: 0; position: absolute; width: 100%; opacity: 1 ; color: white; }
body.ineditor .is-wrapper .is-banner-slide-images-editor .is-container {max-width: none;transform: none; margin:10px 40px !important; padding:10px !important; min-height: none !important;
background:none !important; ; }
.ineditor .is-banner-slide-images-editor .column{width:150px!important;display:inline-block;}
.ineditor .is-banner-slide-images-editor .row{display:flex;flex-wrap:wrap;}
.slideThumbsEditorMessage {text-align: center;}
.is-banner-slide-images-editor .slideThumbsEditor { margin-left: 80px; padding: 1rem 0 0 0; }
/* Slider Section Styling V2 for #innovaContentBoxArea */
body.ineditor .is-wrapper .is-banner-slide-images-editor.v2 .is-container{padding:5px!important; margin: 0!important; max-width: none!important;}
body.ineditor .is-wrapper .is-banner-slide-images-editor.v2 .addBlockRow{display:none!important;}
.is-banner-slide-images-editor{display:none;}
#innovaContentBoxArea .is-banner-slide-images-editor{display:block;}
.ineditor .banner-section{margin-bottom:80px!important;}
.ineditor .is-banner-slide-images-editor.v2{position: absolute;bottom: -80px;}
.ineditor .is-banner-slide-images-editor.v2 .row-tool{display:none!important;}
.ineditor .is-banner-slide-images-editor.v2 .row{margin:0;}
.ineditor .is-banner-slide-images-editor.v2 .column{position:relative;margin:5px!important;}
.ineditor .is-banner-slide-images-editor.v2 .slideThumbsEditor{display:none;}
.ineditor .is-banner-slide-images-editor.v2 .column,
.ineditor .is-banner-slide-images-editor.v2 .column img{height:60px!important;width:auto!important;margin:0;}
.ineditor .is-banner-slide-images-editor.v2 .column.slide{padding:0;border:1px dotted white;}
.ineditor .is-banner-slide-images-editor.v2 .column:first-child .cb-sl-prev{display:none;}
.ineditor .is-banner-slide-images-editor.v2.column:first-child .cb-sl-next{left:0;}
.ineditor .is-banner-slide-images-editor.v2 .column:nth-last-child(2) .cb-sl-next{display:none;}
.ineditor .is-banner-slide-images-editor.v2 .column .cb-sl-nav{opacity:0; transition: opacity 0.4s;position:absolute;z-index:510;top:0;left:0;background: #026699;line-height:20px;margin: 0;width: 20px;height: 20px;text-align: center;cursor:pointer;}
.ineditor .is-banner-slide-images-editor.v2 .column:hover .cb-sl-nav{opacity:1;}
.ineditor .is-banner-slide-images-editor.v2 .column .cb-sl-next{left:20px;}
.ineditor .is-banner-slide-images-editor.v2 .column .cb-sl-del{left:auto;right:0;background:#f7632e;}
.ineditor .is-banner-slide-images-editor.v2 .cb-sl-add-ico {
border: 1px dotted white;
background: rgba(255,255,255,0.1);
text-align: center;
font-size: 2rem;
cursor: pointer;
line-height: 58px;
width: 60px;
margin: 5px;
}
/*unsticky in editor - causes issues editing template*/
.is-wrapper .is-section.is-sticky,
.is-sticky,
body.ineditor .is-wrapper > div.is-sticky{
position: relative;
top: inherit;
z-index: auto;
}
.is-wrapper div.wsColourMenuBG{
position:relative;
z-index:auto;
}
.ineditor .row.flex figcaption{}
.ineditor .row.grid{display:grid;}
#divboxtool { width: 260px !important; margin-left: -100px !important;}
#divboxtool > div { display:inline-block !important; border-radius: 0 !important; margin-right: 2px; min-width: 30px; background-color: silver; }
#divboxtool #lnkeditbox { width: 260px !important; }
.sideTabBtn{
width: 30px;
padding: 10px 3px;
margin: 0;
position: fixed;
top: 172px;
font-family: sans-serif;
color: rgb(37, 37, 37);
font-size: 1.2em;
line-height: 1;
text-decoration: none;
text-align: center;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: none;
box-sizing: border-box;
right: 0;
background: rgba(213, 213, 213, 0.9);
cursor: pointer;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
}
.distractionFree .sideTabBtn{ display:none; }
.nocss .sideTabBtn{ display:none; } /*bulk mailer*/
.sideTabBtn{
position:absolute;
right:unset;
left:-30px;
}
/*Prevent theme css overrides*/
.sideTabBtn *,
.sideTabBtn ion-icon.md.hydrated{
color:inherit!important;
font-size: 18px!important;
}
/*
#lnkTextOpen {top: 137px;}
#lnkPropOpen {top: 172px;}
#lnkStyleOpen {top: 212px;}
#lnkEffectsOpen{top: 288px;}
#lnkMobileOpen{top: 250px;}
#lnkTableOpen{top: 328px;}
*/
#lnkTextOpen {top:-9999px;}
#lnkPropOpen {top: 140px;}
#lnkStyleOpen {top: 260px;}
#lnkEffectsOpen{top: 220px;}
#lnkMobileOpen{top: 180px;}
#lnkTableOpen{top: 328px;}
.sideTabBtn:hover{
background: #c9c9c9e6;
}
#md-imageselect , #md-fileselect {
transform:none;
-webkit-transform: none;
left: 5%;
top: 5%;
width: 90% !important;
height: 90% !important;
}
#md-fileselect {
transform:none;
-webkit-transform: none;
left: 20%;
top: 20%;
width: 60% !important;
height: 60% !important;
}
body .is-wrapper>.is-section { /*margin-bottom: 10px; padding-bottom: 10px;*/}
body .is-section{ border: 0px solid #ffffff00;}
body .is-section .is-box + .is-box{ border-left: 0px dashed rgba(0, 172, 214,0);}
body .is-section:hover { border: 0px solid rgb(0, 172, 214);}
body .is-section:hover .is-box + .is-box{ border-left: 1px solid rgb(0, 172, 214);}
.is-section-auto .is-container { margin-bottom: 20px; margin-top: 20px; }
.is-tab-links a:link {/*color: #76a248;*/ text-transform: uppercase; text-decoration: none;border-radius: 4px;}
.is-tab-links a:link.active{color:white;}
.is-tab-links > a {
padding: 0 8px;
margin:0 2px;
}
body .is-section > .is-boxes:before{
pointer-events: none;
z-index:1;
content:" ";
border: 1px solid rgba(0, 172, 214,0.3);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0px;
}
body .is-section > .is-boxes:hover:before{
border: 2px solid rgb(0, 172, 214);
}
body .is-section.editing > .is-boxes:hover:before{
/*content:none;*/
border: 1px solid rgba(0, 172, 214,0.8);
}
.is-tab-links > a:hover {
background: #c2d3eb;
color:white;
}
.is-tab-links{
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.is-section.fixed is-overlay-bg{
background-attachment:fixed;
}
/*change section block captions from absolute to relative to allow the section to stretch to fit*/
.ineditor .secondary-overlay{
position:relative!important;
}
/*allow v4 slider controls to work*/
.ineditor .is-inpage-banner .secondary-overlay,
.ineditor .is-inpage-banner .secondary-overlay > div{
pointer-events: none;
}
.ineditor .is-inpage-banner .secondary-overlay .is-container{
pointer-events: all;
}
.ineditor .is-inpage-banner .btnAddBox,
.ineditor .is-caption-slider .btnAddBox{display:none!important;}
/*replicate normal ui for is-fill-section sections...*/
.ineditor .is-fill-section .is-container .ui-dragbox-outlined{margin-left:1rem;margin-right:1rem;}
.ineditor .is-fill-section .is-container .row{margin-left:-1rem;margin-right:-1rem;}
/*--------------------------------------------------------------------
AJ TABLE CSS ADDED FROM 2.49 SRC
---------------------------------------------------------------------*/
#pop-table{
z-index:61;
}
#pop-table table {
background-color: rgba(0,0,0,0.8) !important;
color: rgba(255,255,255,0.7);
}
#pop-table table td{
color: rgba(255,255,255,0.7);
}
/*#pop-textsettings, #pop-fontfamily, #pop-headings, #pop-colors,*/ #pop-table {width:180px;height:190px;padding:0 13px;text-align:left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 5px;
text-transform: uppercase;
font-size: 11px;
font-family: sans-serif;
letter-spacing: 1px;
line-height: 2;
}
#pop-table {width:211px;height:196px;padding:0 0;}
#btnInsertPlh, #btnDelRowCancel, #btnDelRowOk, #btnDelTableCancel, #btnDelTableOk, .md-pick-tag {
padding: 0 30px;
font-size: 11px;
line-height: 35px;
height: 35px;
text-transform: uppercase;
border-radius: 4px;
letter-spacing: 1px;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#btnInsertPlh, #btnDelRowCancel, #btnDelTableCancel {color: #333333;background-color: #e3e3e3;}
#btnInsertPlh:hover, #btnDelRowCancel:hover, #btnDelTableCancel:hover, .md-pick-tag:hover {color: #111;background-color: #e8e8e8;}
#btnDelRowOk {color: #ffffff;background-color: #08c2b3;}
#btnDelRowOk:hover {color: #ffffff;background-color: #09cbbb;}
#btnDelTableOk {color: #ffffff;background-color: #08c2b3;}
#btnDelTableOk:hover {color: #ffffff;background-color: #09cbbb;}
.table-insert {width:100%;height:100%}
.table-insert tr td {
padding: 7px 8px;
border-right: #ccc 1px dotted;
border-bottom: #ccc 1px dotted;
cursor: pointer;
text-align: center;
font-family: sans-serif;
font-size: 12px;
line-height: 2;
}
.table-insert td.highlight {
background: #3279d2; /*#70b421*/
color: #fff;
}
table.default td {
border: #cccccc 1px dashed;
}
#md-edittable .md-body {
text-transform: uppercase;
font-size: 12px;
font-family: sans-serif;
letter-spacing: 1px;
line-height: 2.7;
}
#divTableDesign > div, #divTableLayout > div {
margin:10px 20px;
}
#divTableLayout button {padding:12px}
#divRteTable {display:none;width:60px;height:20px;position:absolute;z-index:160;padding:0; font-size:10px;}
#divRteTable #btnEditTable {float:left;padding:0;background:#f7a82e;color:#fff;border-top-left-radius:4px;border-bottom-left-radius:4px;border:none;margin:0;width:20px;height:100%;box-sizing:border-box;cursor:pointer;text-align:center;}
#divRteTable #btnAddTableRow {float:left;padding:0;background:rgb(77,77,77);color:#fff;border:none;margin:0;width:20px;height:100%;box-sizing:border-box;cursor:pointer;text-align:center;}
#divRteTable #btnDeleteTable {float:left;padding:0;background:#f7632e;color:#fff;border-top-right-radius:4px;border-bottom-right-radius:4px;border:none;margin:0;width:20px;height:100%;box-sizing:border-box;cursor:pointer;text-align:center;}
#divRteTable ion-icon{color:white;}
#divRteTable button{
display: flex;
align-items: center;
justify-content: center;
}
.ineditor .column td{
border: 1px dotted #dadada;
}
cp-color-picker { z-index: 100000;} /*tinyColorPicker*/
#inpTextColor, #inpCellBgColor, #inpCellTextColor, #inpCellBorderColor {
padding: 2px 7px;
width: 160px!important;
float:none!important;
height: 36px;
margin: 0;
display: inline-block;
border:#dcdcdc 1px solid;
box-sizing:border-block;
}
#selCellBorderWidth{float:none!important;}
.rte-pop input[type=text], .rte-pop textarea {
display: block;
width:100%;
margin:0;
font-size: 14px;
letter-spacing: 1px;
height:63px;
line-height: 1.7;
color: #000;
background-color: #ffffff;
background-image: none;
padding: 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*border: 1px solid #b3b3b3;*/
border:none;
/*border-radius: 5px;*/
border-bottom:#eaeaea 1px solid;
border-collapse:collapse;
}
.rte-pop select {
padding: 5px;
margin:0 0 10px;
font-size: 14px;
letter-spacing: 1px;
height:35px;
line-height: 1.7;
color: #454545;
border-radius: 5px;
border: none;
background:#eee;
}
.rte-pop select option {background:#fff;}
.rte-pop .inpchk {
font-family: sans-serif;
font-size: 14px;
letter-spacing: 1px;
line-height: 1.7;
float: left;
height: 63px;
padding: 20px;
box-sizing: border-box;
margin:0;
}
.rte-pop button {
background-color: rgba(0,0,0,0.8) !important;
color: rgba(255,255,255,0.7);
}
#rte-toolbar button.on {
background-color: #eee;
}
.rte-pop button.on {
background-color: #eee;
}
.table-insert {width:100%;height:100%}
.table-insert tr td {
padding: 7px 8px;
border-right: #ccc 1px dotted;
border-bottom: #ccc 1px dotted;
cursor: pointer;
text-align: center;
font-family: sans-serif;
font-size: 12px;
line-height: 2;
}
.table-insert td.highlight {
background: #3279d2; /*#70b421*/
color: #fff;
}
table.default td {
border: #cccccc 1px dashed;
}
#md-edittable .md-body,
#md-editrow .md-body {
text-transform: uppercase;
font-size: 12px;
font-family: sans-serif;
letter-spacing: 1px;
line-height: 2.7;
}
#md-textformat .md-body{
line-height:24px; /*match stylemodal draggable area*/
}
.md-body {
line-height: 2.7;
}
.md-modal-handle{text-align:center;border-bottom: 1px solid #e3e3e3;}
.md-modal-handle .md-modal-close{display:none;}
#md-textformat .cb-icon-dot{
line-height:0;
}
#md-textformat .md-modal-close{
display:block;
position: absolute;
right: 0;
top: 5px;
font-size: 20px;
line-height: 0;
color: silver;
z-index: 1;
cursor: pointer;
}
#md-textformat .md-text{
color: #555;
text-transform: uppercase;
letter-spacing: 0.8px;
font-family: sans-serif;
letter-spacing: 0.8px;
line-height: 1.2;
line-height: 1.2;
font-size: 7pt;
}
#md-textformat .md-modal-handle{height:25px;}
#divTableDesign > div, #divTableLayout > div {
margin:10px 20px;
}
#divTableLayout button {padding:12px}
.md-overlay.noOverlay{
pointer-events: none;
background:none;
}
.md-tfbtn {
height: 36px;
width: 36px;
background: white;
border: 1px solid #ccc;
color: #444;
cursor: pointer;
}
.md-modal {
border-radius:4px;
}
.md-modal button {
margin: 0;
line-height: 1.7;
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: #000;
background-color: #e3e3e3;
border:none;
cursor:pointer;
transition: all 0.2s ease-in-out;
padding:0;
}
.md-modal button.ap-btn {
border: 1px solid #ccc;
bACkground: white;
border-radius: 0;
letter-spacing: 0.5px !important;
}
.md-modal button.ap-btn:hover {
background-color: #f5f5f5;
}
.md-modal button.md-tfbtn {
background: white;
border: 1px solid #ccc;
}
.md-modal .tf-align{
margin: 1.25rem 0 0.5rem;
text-align: center;
}
.md-modal .tf-align button {
background-color: #fff;
border:1px solid #ccc;
height: 32px;
width: 32px;
}
.md-modal .tf-align button *{
color:#000;
}
#md-textformat.linkModalMin{
max-height: 138px;
overflow: hidden;
}
.md-modal .tf-dom{
text-align:center;
margin: 16px 0;
min-height:24px;
}
.tf-dom .separator:first-of-type{display:none;}
.md-modal .tf-colours{
display:none;
}
.md-modal .tabsection{display:none;}
.md-modal .tabsection.tabactive{display:block;}
.md-modal .tf-dom i{font-size:9px;}
.tabbtn{
padding: 4px 10px;
border-radius: 5px;
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 0.88);
cursor: pointer;
border: 5px;
font-family: sans-serif;
font-size: 10px;
line-height: 1.2em;
letter-spacing: 1.2px;
display: inline-block;
text-transform: uppercase;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
.tabbtn.active{
background:black;
color:white;
text-decoration:none;
}
.tabbtn:hover{
background: #c2d3eb;
}
.tabbtn.inactive{
cursor:default;
}
.tabbtn.inactive:hover{
background:none;
}
#md-edittable .md-tabs > * {
background: rgba(255, 255, 255, 0.7);
color: rgba(0, 0, 0, 1);
}
#md-edittable .md-tabs span.active {
color: rgba(255, 255, 255, 0.7);
background: rgba(0, 0, 0, 1);
}
#md-edittable .cb-icon-cancel.md-modal-close,
#md-editrow .cb-icon-cancel.md-modal-close{display:none;}
#md-edittable .md-modal-handle.ui-draggable-handle,
#md-editrow .md-modal-handle.ui-draggable-handle{text-align:center;}
.column table td{padding:12px;}
.md-classes{text-align:center;}
.md-classes span{
font-size: 10px;
display: inline-block;
padding: 5px;
margin: 2px;
border-radius: 5px;
line-height: 12px;
border: 1px solid #ccc;
}
/*--------------------------------------------------------------------
IMAGE LINK ICONS
---------------------------------------------------------------------*/
#divToolImgSettings {
margin-left: -30px;
}
#lnkImageChange,
#lnkImageCrop {
width: 30px;
height: 30px;
border-radius: 4px;
opacity: 0.8;
background: rgba(233, 84, 0, 0.9);
cursor: pointer;
font-size: 14px;
color: #ffffff;
display: inline-block;
line-height: 30px;
text-align: center;
}
#lnkImageChange ion-icon,
#lnkImageCrop ion-icon,
#lnkImageSettings ion-icon,
.row-tool ion-icon {
font-size: 15px !important;
}
div.col-tool.cb-move {
right: 1rem;
margin-right: 40px;
background: rgb(175, 206, 1);
cursor:move;
}
.col-block-placeholder,
.col-box-placeholder{
width: 15px;
display: inline-block;
background:rgba(0,106,194,0.3);
height: 50px;
float:left;
}
.col-box-placeholder{
display:table-cell;
float:none;
}
/*drag placeholder override*/
.block-placeholder {
height: 30px;
background: rgba(225,225,225,0.5); /*grey*/
background: rgba(214,234,245,0.65);
}
.col-tool ion-icon {
font-size: 13px !important;
padding: 0 !important;
}
#lnkImageChange {
background: rgba(0, 172, 214, 0.9);
}
#divToolImgSettings #lnkImageSettings {
background: rgba(167, 60, 60, 0.9);
}
#lnkImageCrop {
background: rgba(233, 84, 0, 0.9);
}
#divToolImgSettings.minicons {
margin-left: 0;
}
#divToolImgSettings.minicons #lnkImageCrop,
#divToolImgSettings.minicons #lnkImageSettings {
display: none !important;
}
#divToolImgSettings.noicons {
pointer-events: none;
}
#divToolImgSettings.noicons>* {
display: none !important;
}
#divResizeHelper {
display: none;
width: 30px;
height: 30px;
white-space: nowrap;
position: absolute;
z-index: 9999;
pointer-events: none;
}
/*--------------------------------------------------------------------
AJ ANIMATION CLASSES - ADD VIA LAZYLOADCSS - /innovacontentbox/box/animations.css /cmscommon_animations.css Added here for CMS preview
---------------------------------------------------------------------*/
.tracking-in-expand{-webkit-animation: tracking-in-expand 0.5s;animation: tracking-in-expand 0.5s;}
.tracking-in-contract{-webkit-animation: tracking-in-contract 0.5s;animation: tracking-in-contract 0.5s;}
.focus-in-expand{-webkit-animation: focus-in-expand 0.5s;animation: focus-in-expand 0.5s;}
.focus-in-contract{-webkit-animation: focus-in-contract 0.5s;animation: focus-in-contract 0.5s;}
.text-flicker-in-glow{-webkit-animation: text-flicker-in-glow 1s;animation: text-flicker-in-glow 5s;}
.scale-in-center{-webkit-animation: scale-in-center 1s;animation: scale-in-center 1s;}
.scale-fade-center{-webkit-animation: scale-fade-center 1s;animation: scale-fade-center 1s;}
.flip-in-ver-left{-webkit-animation: flip-in-ver-left 1s;animation: flip-in-ver-left 1s;}
.flip-in-hor-bottom{-webkit-animation: flip-in-hor-bottom 1s;animation: flip-in-hor-bottom 1s;}
.rotate-center{-webkit-animation: rotate-center 1s;animation: rotate-center 1s;}
@-webkit-keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}
@-webkit-keyframes flip-in-ver-left{0%{-webkit-transform:rotateY(80deg);transform:rotateY(80deg);opacity:0}100%{-webkit-transform:rotateY(0);transform:rotateY(0);opacity:1}}@keyframes flip-in-ver-left{0%{-webkit-transform:rotateY(80deg);transform:rotateY(80deg);opacity:0}100%{-webkit-transform:rotateY(0);transform:rotateY(0);opacity:1}}
@-webkit-keyframes flip-in-hor-bottom{0%{-webkit-transform:rotateX(80deg);transform:rotateX(80deg);opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}}@keyframes flip-in-hor-bottom{0%{-webkit-transform:rotateX(80deg);transform:rotateX(80deg);opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}}
@-webkit-keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}@keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}
@-webkit-keyframes tracking-in-contract{0%{letter-spacing:1em;opacity:0}40%{opacity:.6}100%{letter-spacing:normal;opacity:1}}@keyframes tracking-in-contract{0%{letter-spacing:1em;opacity:0}40%{opacity:.6}100%{letter-spacing:normal;opacity:1}}
@-webkit-keyframes focus-in-expand{0%{letter-spacing:-.5em;-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes focus-in-expand{0%{letter-spacing:-.5em;-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}
@-webkit-keyframes focus-in-contract{0%{letter-spacing:1em;-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes focus-in-contract{0%{letter-spacing:1em;-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}
@-webkit-keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}
@-webkit-keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@-webkit-keyframes scale-fade-center{
0%{-webkit-transform:scale(0.7);transform:scale(0.7);opacity:0}
100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
}
@keyframes scale-fade-center{
0%{-webkit-transform:scale(0.7);transform:scale(0.7);opacity:0}
100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
}
/* --------------------------------------------------------------------------------------------------------*/
#divRteLink {
width: 97px;
}
.cbBoxToolBottomRight {
line-height:28px;
position:absolute;
text-align: right;
right:4px;
bottom:4px;
/*width: 40%;*/
min-width:132px;
transition: opacity 0.5s ease-in-out,background 0.4s ease-in-out;
z-index:22;
border:none;
color:white;
padding:0;
border-radius: 0;
font-size:13px;
}
.distractionFree .cbBoxToolBottomRight {
display:none; /*distraction free mode*/
}
.cbBoxToolBottomRight *{color:white!important;}
.cbBoxToolBottomRight button,
.cbBoxToolBottomRight .btn{
opacity:1;
position:static;
text-align: center;
border:none;
color:white;
padding:3px 5px!important;
margin:0!important;
height:28px!important;
line-height:22px;
font-weight:300!important;
border-width: inherit!important;
border-radius:2px!important;
}
.cbBoxToolBottomRight .btn:hover{
border-width: inherit!important;
}
.cbBoxToolBottomRight .btn i,.cbBoxToolBottomRight .btn ion-icon{
vertical-align: middle!important;
}
body.distractionFree .cbBoxToolBottomRight{display:none;} /*Shown in default editing mode*/
body .cbBoxToolBottomRight button{font-size:10px;}
.cbBoxToolBottomRight button{font-size:0;}
.cbBoxToolBottomRight button i{font-size:13px;}
.editing .is-box:hover .cbBoxToolBottomRight{display:block;}
.cbBoxToolBottomRight button.btnRemoveBox {background: #f7632e!important;}
.cbBoxToolBottomRight button.btnRemoveBox:hover {background: #db4914!important;}
.cbBoxToolBottomRight button.btnAddBox {background:#4d4d4d!important;width:28px;font-size:15px;display: inline-flex; align-items: center;justify-content: center;} /*ion-icon*/
.cbBoxToolBottomRight button.btnAddBox:hover {background: #404040!important;}
div.btnMoveBox {
position:absolute;
top:4px;
right:4px;
/*background:#afce01!important;*/
width:24px;
height:24px;
font-size:15px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity:1;
border-radius:4px;
border:1px solid #282828aa;
} /*ion-icon*/
div.btnMoveBox *{
color:#282828aa;
}
.is-light-text div.btnMoveBox{
border:1px solid white;
}
.is-light-text div.btnMoveBox *{
color:white;
}
.is-box:hover > div.btnMoveBox {opacity:1;}
div.btnMoveBox:hover {/*background: #79c811!important;*/background:#afce01!important;cursor: move;}
.cbBoxToolBottomRight button.btnBoxBGImage {background: #00acd6;}
.cbBoxToolBottomRight button.btnBoxBGImage:hover {background: #0097bd!important;}
.cbBoxToolBottomRight button.btnEditBox {
background: #006bc2 !important;
}
button.btnEditBox:hover {
background: #004f8f !important;
}
button.btnEditBox i,
.is-section-set.btnEditBox i {
font-size: 15px !important;
}
.is-section.editing button.btnEditBox {
/*opacity:1;*/
}
.is-section.editing .is-box:hover button.btnEditBox {
opacity: 1;
}
.is-wrapper .is-section.editing button.btnEditBox {
z-index: 61;
}
.is-box button.btnEditBox {}
.addBlockRow {
height: 20px;
position: relative;
left: 0;
width: 100%;
z-index: 62;
margin-top: -20px;
}
.addBlockRow:hover .add-block.add-btn,
.addBlockRow.show .add-block.add-btn {
opacity: 1;
left: 0;
width: 100%;
}
.ui-draggable.ui-dragbox-outlined {
z-index: 63;
}
img.ui-draggable{
cursor:move;
}
/*overlay add-block 62 on highlighted section when active;*/
.add-btn {
z-index: 28;
opacity: 0;
position: absolute;
height: 26px;
width:220px;
bottom: 0;
transition: opacity 0.2s ease-in-out, bottom 0.2s ease-in-out, background 0.3s ease-in-out;
left: -9999px;
background: rgba(0, 0, 0, 0.03);
text-align: center;
font-size: 13px;
color: #fff;
/* sit in center - no longer stretch*/
width: 220px;
}
.add-btn:hover,
.ui-draggable.ui-dragbox-outlined .add-btn{
z-index:61;
}
.add-btn i{color:#fff;}
.add-btn i{
transform: rotate(90deg);
display: inline-block;
}
.add-block.add-btn{
}
.colDrag .add-block.add-btn,
.colDrag .removeOnSave{
display:none;
position:relative;
left:-9999px;
}
.add-btn-content{
cursor:pointer;
}
.add-block span.add-btn-content{
display:inline-block;
padding:5px 0;
border-radius:2px;
line-height:16px;
/*background: rgb(175, 206, 1);*/
/*transition: width 0.4s ease-in-out;*/
transition: background 0.4s ease-in-out;
width:220px;
color:#282828;
}
.add-block span.add-btn-content .add-btn-text{
padding-right:5px;
}
.add-block span.add-btn-content{
background: rgb(175, 206, 1)
}
.add-block span.add-btn-content:hover{
/*width:100%; No longer stretches
max-width:none;*/
background: #79c811;
}
.cloned-handler .add-block{
display:none!important;
}
/* .Always visible... */
/* .add-section.add-btn{display:none;} */
.add-section .add-section-btn{
text-align: right;
width: 100%;
/*background:#3c3e3f; old advediting-off lightgrey*/
background: #111;
position:absolute;
top:-40px;
left:-1px;
/*border: 1px solid rgb(0, 172, 214);
border-width: 1px 1px 0 1px;*/
left:-9999px; /* reuben want it visible */
padding: 5px 0;
border-left:1px solid black;
border-right:1px solid black;
}
.is-section.editing .add-section .add-section-btn{
left:-1px; display: block;
}
.is-section .add-section i{
color:#fff;
padding: 6px; /* more clickable area */
}
.is-section .add-section{
left: 0;
right: 0;
top: 40px;
opacity:1; /* always visible */
z-index: 61;
position: sticky;
}
.is-section .add-section span {
padding:0 15px 0 10px;
line-height:28px;
color:#fff;
display: inline-block;
font-size: 14px;
}
.add-section span i{
line-height:20px;
}
.is-section:hover{ }
.is-section.editing .add-section{ opacity:1; position:sticky; height: 0; } /* reuben likes it fixed */
.is-box.editing:hover button.btnEditBox { opacity:1; }
.btnAddSection{
background: rgb(175, 206, 1);
border-radius: 4px;
color: white;
font-weight: 700;
border: 1px solid rgba(255,255,255,0.7);
}
.btnAddSection:hover{
background: #9bb701;
background:#79c811;
cursor:pointer;
}
.btnAddSection i{
transform: rotate(90deg);
display: inline-block;
padding: 0 !important;
}
.is-boxes .is-boxes + .bottomBar.section-bar {
width:100%;
}
#md-snippets {
border: 5px solid white;
}
#md-snippets .md-content{width:100%;}
#md-addsection {
max-height: 80%;
overflow: scroll;
}
#md-addsection .section-list {
max-height: none;
}
#md-editsection .is-box-3 {width: 25% !important; }
#md-snippets{display:flex; }
#md-snippets #snip-filters{
position:relative!important;
flex:1;
list-style:none;
padding-left:0;
border-right:1px solid #ddd;
margin: 0;
border-radius: 0px 0 0 0;
}
#md-snippets #snip-filters li{
padding:10px;
border-bottom:1px solid #ddd;
cursor:pointer;
color: #222;
line-height: 1.5em;
}
#md-snippets #snip-filters li:hover{
background: #ddd;
}
#md-snippets #snip-filters li.active {
background: #006bc2;
color: white;
}
#md-snippets #snippets{
flex:5;
border: 0!important;
/*grid update to get rid of rightside gap*/
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: max-content;
}
#md-snippets #snippets,
#md-snippets #snip-filters{
overflow-y:auto;
}
#md-snippets #snippets div {
margin: 0;
padding: 1%;
width: 100%;
cursor:pointer;
border:1px solid #ddd;
float: left;
height: 150px;
align-items: center;
color: #222;
line-height: 1.2em;
justify-content: center;
text-align: center;
box-sizing: border-box;
}
#md-snippets #snippets div:hover {
background:#efefef;
}
#md-snippets #snippets div img{
max-width: 100%;
}
#md-snippets{background:white;}
#md-snippets #snippets div.snippetSectionTitle{
pointer-events: none;
grid-column: 1/-1;
height: 48px;
font-size: 16px;
line-height: 48px;
font-weight: 700;
margin-top:0.5rem;
border:none;
}
#divSnippetList div.snippetSectionTitle{
display:none!important;
pointer-events:none;
color: white;
background: none;
border: none;
letter-spacing: 0.5px;
}
.ui-draggable .row:not(.cmsFormElement){transition: padding-bottom 0.3s ease-in-out,opacity 0.3s ease-in-out;padding-bottom:0;margin-bottom:0;}
.ui-draggable:hover .row:not(.cmsFormElement){padding-bottom:0;margin-bottom:0px;}
.ui-draggable.nostretch:hover .row,
.ui-draggable:hover .row .row,
.cmsEditable .row .row{padding-bottom:0;margin-bottom:0;}
.row.ui-resizable{position:relative;}
.row.ui-resizable .row.ui-resizable .ui-resizable-handle{display: none!important;}
.ui-dragbox-selected > div:first-child {
outline: rgba(228, 156, 90, 0.5) solid 1px;
z-index: 1;
}
/*body.advEditing .ui-draggable .row .row .col-tool,
.ui-draggable .row .row .col-tool{display:none;}
.ui-draggable .column .column .col-tool,*/
.ui-draggable .column .column .col-tool{display:none;}
.col-tool ion-icon{
pointer-events: none;
color: #fff;
font-size:14px;
}
/*allow space for modal setting button (dont interfere with ionicon setting)*/
header{padding-top:50px!important;}
/*disable column options for header elements - restrict the snippet to format, let the css handle things*/
.header-flex-item .col-tool{display:none;}
/* helps to locate the size of the row */
.ui-draggable:hover:not(.ui-dragbox-outlined) > div:first-child {
outline: rgba(228, 156, 90, 0.1) solid 1px;
}
.ui-draggable:hover .add-block{
left:50%;
right:0;
margin-left: -110px;
opacity:1;
bottom: -15px;} /*move it out of way so i don't click on it. REUBEN*/
.ui-draggable.ui-dragbox-outlined .add-block{bottom: -26px;} /*move down when active*/
.is-wrapper .add-block [class^="cb-icon-"]:before, .is-wrapper .add-block [class*=" cb-icon-"]:before {
line-height: 16px;
}
body.cbSidebar div#divTool {
right: -280px!important;
}
body div.cmsOuterContainer{
padding-right:0;
}
body.dockSidebar .cmsOuterContainer{
padding-right: 280px;
}
/*modify rowtool*/
.row-tool {
top: -30px;
/*left:-1rem!important;*/
left: -1rem;
/*allow for overrides*/
width: auto;
height: 30px;
z-index: 21;
min-width: 180px;
}
.row-tool>div {
float: left;
}
.row-tool>div,
.col-tool {
filter: brightness(100%) saturate(100%) contrast(1);
transition: filter 0.3s ease;
}
.row-tool>div:hover,
.col-tool:hover{
filter: brightness(90%) saturate(90%) contrast(1.4); /*general colour shift*/
}
.ui-draggable.ui-dragbox-outside .row-tool {
left: 0 !important;
}
/*when outside browser area e.g. 100%*/
.row-tool .row-handle {
border-radius: 5px 0 0 0;
}
.row-tool .row-remove {
border-radius: 0 5px 0 0;
}
body .is-section .is-section-tool {
margin-left: 0;
padding-left: 0;
box-sizing: border-box;
top: 0;
z-index: 20;
height: 32px;
left: 4px;
display: none;
}
body .is-section:hover .is-section-tool {
opacity:1; /* Reuben want visible*/
}
body .is-section .is-section-tool {
top:-30px;
border-radius: 4px 4px 0 0;
overflow: hidden;
}
/* When current section is being edited... */
body .is-section.editing .is-section-tool {
opacity:1;
display:block;
}
body .is-section-tool .is-section-edit{border-radius:0 0 0 0; /*background: none;*/ }
body .is-section-tool .is-section-copy{border-radius:0 0 0 0;}
body .is-section-tool .is-section-edit:hover{background: #0097bd;}
body .is-section-tool .is-section-set:hover{/*background: #a73c3c;*/background: #004f8f;}
body .is-section-tool .is-section-remove:hover{background: #db4914;}
body .is-section-tool .is-section-copy:hover{background:#404040;}
#divToolImgSettings #lnkImageChange:hover{background: rgba(0, 172, 214, 1);}
#divToolImgSettings #lnkImageCrop:hover{background: rgba(233, 84, 0, 1);}
#divToolImgSettings #lnkImageSettings:hover{background:rgba(167,60,60,1);}
body .is-section-tool > div {
/*float:none;*/
/*background:rgba(0,0,0,0);*/
height: 30px;
width: 30px;
display: flex;
justify-content: center;
align-items: center;
}
body .is-section-tool .is-section-set{
background: #006bc2;
cursor: pointer;
}
#innovaTitle{display:none!important;}
.is-section-tool > div,
.btnAddSection,
#lnkImageChange,
#lnkImageSettings,
#lnkImageCrop{
-webkit-transition: 0.3s background-color opacity linear;
-moz-transition: 0.3s background-color opacity linear;
-o-transition: 0.3s background-color opacity linear;
transition: 0.3s background-color linear;
}
/* END ADDBLOCK EXPERIMENTAL*/
/*--------------------------------------------------------------------
ADVANCED EDITING
---------------------------------------------------------------------*/
body.distractionFree .is-advanced{display:none;}
body.distractionFree .is-basic{display:block;}
body #rte-toolbar button[data-rte-cmd=advanced] {
display:none;
}
body.dragdrop #rte-toolbar button[data-rte-cmd=advanced] {
display: inline-block;
}
body #rte-toolbar button[data-rte-cmd=advanced] i{
color: #fff;
}
body.advEditing #rte-toolbar button[data-rte-cmd=advanced] i{
color: #DAA520;
}
body.distractionFree .column .is-advanced{display:block;}
body.distractionFree .ui-dragbox-outlined .column .is-advanced{display:none;}
.ui-dragbox-outlined span:hover{/*background-color:#ffcc0011;*/}/*AJ this hides the 'add snippet' animation not sure why I disabled*/
/* OLD COL-TOOL COLUMN RESIZE BUTTONS*/
/*
.ui-dragbox-outlined .column .col-tool.cb-sl-inc{
height:20px;
}
.ui-dragbox-outlined .column .col-tool.cb-sl-inc i{
color: #9a9a9a!important;
position:relative;
z-index:1;
}
.ui-dragbox-outlined .column:hover .col-tool.cb-sl-inc {
opacity: 1;
text-align: center;
width: 8px;
height:100%;
}
.cb-sl-inc ion-icon{
position:relative;
left:3px;
}
.cb-sl-inc.right ion-icon{
position:relative;
left:-6px;
}
.ui-dragbox-outlined .column:hover .col-tool.cb-sl-inc.right:before {
left:-8px;
}
.ui-dragbox-outlined .column:hover .col-tool.cb-sl-inc:before {
content:" ";
display:block;
position:absolute;
height:20px;
width:16px;
}
.ui-dragbox-outlined .column:hover .col-tool.cb-sl-inc:hover:before {
background: rgb(178 210 237);
}
.ui-dragbox-outlined .column .col-tool.cb-sl-inc:hover {
opacity: 1;
background: rgba(0,106,194,0.3);
width:8px;
}
*/
.col-tool i.ion-chevron-right, .col-tool i.ion-chevron-left {
font-size: 10px!important;
}
.col-tool i.ion-chevron-left:before,
.col-tool i.ion-arrow-left-b:before,
.col-tool i.ion-chevron-right:before,
.col-tool i.ion-arrow-right-b:before {
line-height: 18px;
}
.ui-draggable.ui-dragbox-outlined div.col-tool {
z-index: 65; /*Priority over add-btn when block ACTIVE. move up from z-index:10 to sit over hideformobile labels at z-index 59...*/
}
div.col-tool {
z-index:25; /*less important than add-btn when not active r*/
font-size: 14px;
margin-top:0!important;
}
/*Grid snippet allows up to 16*/
[data-type=grid-snippet] .column:nth-child(n+16) div.col-tool.cb-sl-new {
display:none;
}
[data-type=grid-snippet] .column:nth-child(n+16) div.col-tool.cb-move {
margin-right: 20px;
}
/*Grid snippet allows up to 16*/
.row:not([data-type=grid-snippet]) .column:nth-child(n+8) div.col-tool.cb-sl-new {
display:none;
}
.row:not([data-type=grid-snippet]) .column:nth-child(n+8) div.col-tool.cb-move {
margin-right: 20px;
}
body div.is-section-expert,
body div.is-section-mobile{
width: 30px;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
height: 30px;
vertical-align: top;
cursor:pointer;
}
.add-section .material-icons{font-size:15px!important;padding:0;}
.add-section .is-section-mobile .material-icons{font-size: 18px!important;}
.add-section .material-icons.on{display:block;}
.add-section .material-icons.off{display:none;}
body.distractionFree .add-section .material-icons.on{display:none;}
body.distractionFree .add-section .material-icons.off{display:block;}
body .add-section ion-icon{color:white;font-size: 15px!important;}
body .add-section div.is-section-expert i{color:#fff;}
body.distractionFree .add-section div.is-section-expert i{color:#777;}
body .add-section div.is-section-expert:hover i{color:#fff;}
body.advEditing .add-section .add-section-btn{background:black;}
body #rte-toolbar button:hover {
background-color: #777;
}
body .rte-pop button:hover {
background-color: #777 !important;
}
.md-col-btns .tabcolbtn{
display: inline-block;
padding: 2px;
margin: 0 5px;
background: #efefef;
width: 14px;
line-height: 14px;
border-radius: 14px;
font-weight: 700;
}
.rc-edit{
outline: red solid 1px;
}
.rc-highlight{
outline: rgb(90 222 228 / 50%) solid 1px;
}
.cbimagecontainer img.rc-edit{
border:1px solid red!important; /*outline hidden*/
}
/*Image Resize Helper*/
/*imitate image margins*/
.column > a > .resizehelper, .column > .resizehelper{
margin-top: 1em;
margin-bottom: 1em;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: none!important;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-e,.ui-resizable-w {
cursor: e-resize;
width: 5px;
right: 0;
top: 50%;
height: 50px;
background: #006ac299;
margin-top: -21px;
pointer-events: all;
}
/*CBOX Column Resize*/
.editing .is-box > .ui-resizable-e{
display:block!important;
z-index: 90;
display: block;
top: 0;
margin-top: 0;
height: 100%;
right: -3px;
opacity:0;
background: #006ac2;
}
.editing .is-box .ui-resizable-e:hover{
opacity:0.5;
}
.column .ui-resizable-e{
top:0;
bottom:0;
height:100%;
width:4px;
margin-top:0;
background: #006ac277;
opacity:0;
}
.column .ui-resizable-e:hover{
opacity:1;
}
.ui-resizable-w {
left:0;
right:unset;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100px;
bottom: 0px;
left: 50%;
margin-left:-50px;
background: #006ac299;
}
.ui-resizable-n {
cursor: s-resize;
height: 7px;
width: 100px;
top: 0px;
left: 50%;
margin-left:-50px;
background: #006ac299;
}
.column #resizeValue{
position:absolute;
top:0;
left:0;
z-index:60; /*above hidden label*/
color:currentColor;
padding-inline:4px;
font-size:9px;
}
.ui-dragbox-outlined .ui-resizable-handle{display:block!important;}
.distractionFree .ui-dragbox-outlined .ui-resizable-handle{display:none!important;}
.row .resizehelper:hover .ui-resizable-handle{display:block!important;}
.cb-spacer:hover .ui-resizable-handle{display:block!important;}
.distractionFree .ui-resizable-handle{display:none!important;}
.distractionFree .cb-spacer .ui-resizable-handle{display:none!important;}
/*Stylemodal helpers*/
#divHelperMTop,#divHelperMBottom,#divHelperMLeft,#divHelperMRight,
#divHelperPTop,#divHelperPBottom,#divHelperPLeft,#divHelperPRight{
background: #ffa5004a; /*orange*/
position: absolute;
z-index: 1000;
height:0;
}
#divHelperMLeft,#divHelperMRight{
background: #ffa50026; /*orange*/
}
#divHelperPTop,#divHelperPBottom{
background: #1da1f24a; /*blue*/
}
#divHelperPLeft,#divHelperPRight{
background: #1da1f226; /*blue*/
}
#divHelperHeight{
background: #1da1f21a; /*blue*/
position: absolute;
z-index: 1;
height:0;
align-items: center;
justify-content: center;
pointer-events: none;
}
/*help styling when in margin-padding editing mode*/
.marginPaddingMode .divHelper{
/*pointer-events: none;*/
display:flex;
align-items: center;
justify-content: center;
}
.marginPaddingMode .divHelper:hover .ui-resizable-handle{
display:block!important;
/*pointer-events: all;*/
}
.divHelper .num{
font-size:11px;
opacity:0;
transition:opacity 0.3s ease;
display:none;
}
.marginPaddingMode .divHelper .num{
display:block;
}
.marginPaddingMode .divHelper:hover .num,.marginPaddingMode .divHelper .num.active,#divHelperHeight .num.active{
opacity:1;
}
/*Margin-padding mode helper styling*/
.marginPaddingMode .divHelper .ui-resizable-handle{
background:inherit;
}
.md-pick{
padding:0;
}
/*switch to cbuilder format*/
div.md-tabs > .active {
background: rgba(0, 0, 0, 0.88);
background:#393c46;
text-decoration: none;
color: rgba(255, 255, 255, 0.95);
cursor: auto;
}
div.md-tabs > * {
background: rgba(255, 255, 255, 1);
text-decoration: underline;
color: rgba(0, 0, 0, 0.88);
padding: 3px 10px;
}
.md-num {
text-align: center;
font-size: 11px;
width: 40px;
cursor:pointer;
height:36px;
line-height: 36px;
position:relative;
}
.md-row.single {height:40px;}
.md-row.single span:first-child{width: 145px;}
.md-row.single span.md-num{text-align:left; border: none;}
#md-textval{
height: 36px!important;
width: 38px!important;
background: white;
border: 1px solid #ccc;
text-align: center;
font-size: 11px;
position: absolute;
left: 1px;
padding-left: 5px;
}
body.distractionFree .bottomBar{display:none;}
/*AJ attempt to indicate mobile-only elements in the editor, both template and content ... */
.ineditor .mobile,
.ineditor .desktop,
body.ineditor .cmsHidden,
.ineditor .inpagelazypopup,
.ineditor .hideForHome{
background: rgba(16, 137, 210, 0.1);
border: 2px dotted #a9dae2;
display: block!important;
position:relative!important;
}
.ineditor .sectionAutoReveal:not(input) {
background: rgba(16, 137, 210, 0.1);
border: 2px dotted #a9dae2;
position:relative!important;
border-width:0px;
display:block; /*allow to show in editor for editing*/
}
.ineditor input.sectionAutoReveal {
display:block;
background: rgba(16, 137, 210, 0.1);
}
.ineditor .mobile:before,
.ineditor .desktop:before,
body.ineditor .cmsHidden:before,
.ineditor .inpagelazypopup:before,
.ineditor .hideForHome:before,
.ineditor .sectionAutoReveal:before{
content: " ";
content: "MOBILE ONLY";
background: #a9dae2;
color: white;
position: absolute;
top: 0;
right: 0;
padding: 0.5rem 0.5rem;
font-size: 10px;
min-width: 90px;
text-align: center;
z-index: 59;
height: 32px;
box-sizing: border-box;
left: auto;
}
.ineditor a#mobbtn:before{
content:"";
display:none;
}
.ineditor .desktop:before{
content: "DESKTOP ONLY";
}
body.ineditor .cmsHidden:before{
content: "HIDDEN CONTENT";
}
body.ineditor .cmsHidden[data-show-after]:before,
body.ineditor .cmsHidden[data-show-until]:before{
content: "SCHEDULED REVEAL";
}
.ineditor .inpagelazypopup:before{
content: "POPUP CONTENT";
}
.ineditor .hideForHome:before{
content: "HIDE ON HOMEPAGE";
}
.ineditor .sectionAutoReveal:before{
content: "HIDDEN / REVEALED BY FORM";
}
.ineditor [data-promo-type=FeaturedProductsHomeFeatured]:before {
content: "HOMEPAGE FEATURED PRODUCT SLIDER V3"!important;
}
.ineditor [data-promo-type=FeaturedProductsHomeOnSale]:before {
content: "HOMEPAGE ON SALE PRODUCT SLIDER V3"!important;
}
.ineditor [data-promo-type=FeaturedProductsHomeNewItems]:before {
content: "HOMEPAGE NEW ITEMS PRODUCT SLIDER V3"!important;
}
.ineditor [data-promo-type=FeaturedProductsHomeBestSeller]:before {
content: "HOMEPAGE BEST SELLER PRODUCT SLIDER V3"!important;
}
.ineditor [data-promo-type=FeaturedProductsHomeComingSoon]:before {
content: "HOMEPAGE COMING SOON PRODUCT SLIDER V3"!important;
}
.ineditor [data-promo-grid-type=FeaturedProductsHomeFeatured]:before {
content: "HOMEPAGE FEATURED PRODUCT GRID"!important;
}
.ineditor [data-promo-grid-type=FeaturedProductsHomeOnSale]:before {
content: "HOMEPAGE ON SALE PRODUCT GRID"!important;
}
.ineditor [data-promo-grid-type=FeaturedProductsHomeNewItems]:before {
content: "HOMEPAGE NEW ITEMS PRODUCT GRID"!important;
}
.ineditor [data-promo-grid-type=FeaturedProductsHomeBestSeller]:before {
content: "HOMEPAGE BEST SELLER PRODUCT GRID"!important;
}
.ineditor [data-promo-grid-type=FeaturedProductsHomeComingSoon]:before {
content: "HOMEPAGE COMING SOON PRODUCT GRID"!important;
}
.ineditor.distractionFree .mobile:before,
.ineditor.distractionFree .desktop:before,
body.ineditor.distractionFree .cmsHidden:before,
.ineditor.distractionFree .inpagelazypopup:before,
.ineditor.distractionFree .hideForHome:before{
display:none;
}
.ineditor .mobileMenuButton{position:relative!important;} /*mobbtn outer snippet block*/
/*Show dismissBlock type in the editor but hide on website by default, until js loads to determine visibility*/
.ineditor .inpagelazyDismissablePanel.hidden{display:block!important;}
.ineditor .inpagelazyDismissablePanel.hidden.flex{display:flex!important;}
body .is-section.editing,
body .ineditor .is-section.editing, .ineditor .is-wrapper > div.editing{
z-index: 60;
}
body .is-section.editing.under .add-section{
z-index: 20;
}
body .is-section.editing.under .addBlockRow{display:none!important;} /*First addblock overlay if too close to top (under state)*/
body .is-section.editing.under .addBlockRow.show {display:block!important;} /*First addblock overlay if too close to top (under state)*/
.is-container>div:last-child,
.is-container>.ui-draggable:hover{ transition: margin-bottom 0.5s; margin-bottom:0px;}
.is-container>div:last-child,
.is-container>.ui-draggable:hover { /*margin-bottom:26px; AJ V2 DISABLE*/ }
.is-wrapper .is-section > .is-boxes {
position: relative;
z-index:21;
margin-top: 0;
height: inherit;
}
.is-wrapper .is-section.editing > .is-boxes {
margin-top: 0;
}
/*If under rule triggered, move first snippet down so to not sit over contentbox section buttons*/
.is-wrapper .is-section.under .ui-dragbox-outlined.first-draggable {
margin-top: 30px;
}
/*Drop top snippet down 30px on click, if there is no margin to avoid contentbox/drag-drop buttons obscuring each other
first child is .addBlockRowWrap
*/
.is-wrapper .is-section.is-min-margin .ui-dragbox-outlined:nth-child(2){
margin-top: 33px;
}
/* INNER CMS REPOSITION CSS*/
/*
#ContentCMS {
max-width:none;
transform: scale(1)!important;
margin-right: 5%!important;
}
*/
#dragdropEditorContainer {
/*max-width: 1100px; let cmsUsualWidth set editor width*/
margin-top:35px;
margin-left: 5%;
min-height: 500px !important;
padding-top:10px;
padding-bottom:300px;
margin-right: 18%;
}
body>#dragdropEditorContainer {
transform-origin: left top 0px;
}
@media (max-width: 1200px) {
body>#dragdropEditorContainer {
/* transform:scale(0.9); //aj affects img icon postitioning and sizing - possible to remove or handle another responsive way? */
max-width: 90%; /*new approach?*/
}
}
@media (max-width: 1000px) {
body>#dragdropEditorContainer {
/*transform:scale(0.8); //aj affects img icon postitioning and sizing - possible to remove or handle another responsive way? */
}
}
@media (max-width: 800px) {
body>#dragdropEditorContainer {
/* transform:scale(0.7); //aj affects img icon postitioning and sizing - possible to remove or handle another responsive way? */
}
}
div.is-wrapper {
padding-right: 0;
}
/*--------------------------------------------------------------------
@media
---------------------------------------------------------------------*/
@media (max-width: 1280px){
/*#md-snippets #snippets div { width: 25%; }*/
/*#lnkTextOpen,#lnkStyleOpen,#lnkPropOpen,#lnkEffectsOpen,#lnkMobileOpen{display:none;}
#lnkTableOpen{display:none!important;} show all the time*/
}
@media (max-width: 1050px){
/*#md-snippets #snippets div { width: 33%; }*/
}
@media (max-width: 960px){
body .is-boxes.is-slideshow-boxes {
position: relative !important;
}
}
@media (max-width: 600px){
/*hide drag sidebar on mobile*/
#divSnippetList,
#lnkToolOpen,
#divTool{display:none;}
body>#dragdropEditorContainer {
transform: scale(1);
max-width: 90%;
margin-top: 90px;
}
.ineditor #dragdropEditorContainer{
margin-inline: auto;
margin-top: 100px; /*AJ Give some space for the row tools to show below double-line text icons*/
}
/*reformat toolbar for mobile*/
#rte-toolbar {
left: 0;
margin-left:0;
height: auto;
background: rgba(60, 62, 63, 1);
display:block!important;
}
.advEditing #rte-toolbar{
background:#000;
}
div.contentBoxEditor {
margin-top: 111px !important;
}
#md-snippets #snippets {
flex: 2;
border: 0!important;
}
#md-snippets #snippets div {
height: 70px;
width: 90%;
}
#md-snippets #snip-filters li {
font-size: 11px;
line-height: 1.2em;
}
.md-modal .is-box-2,.md-modal .is-box-3{
width: 25%;
}
.md-modal .is-box-4{
width:33%;
}
.md-modal .is-box-5
.md-modal .is-box-6{
width: 50%;
}
.md-modal .mob-box-2{
width: 50%;
}
.md-modal .mob-box-3{
width: 33%;
}
.md-modal .mob-box-full{
width: 100%;
}
}
@media (max-width: 360px){
body { margin-top: 123px !important; }
}
@media (max-height:650px){
/*Reduce height of text modal for EXTREMELY small screens e.g. kiwiarthouse site...*/
.md-tfbtn {
height: 26px;
}
.md-num {
height: 26px;
line-height: 26px;
}
.md-row {
height: 30px;
}
.md-modal .tf-dom {
margin: 0.25rem 0;
}
}