caboose-cms 0.9.229 → 1.0.1

data/app/assets/stylesheets/caboose/admin/pages/new_block.css

@@ -0,0 +1,9 @@
+
+#modal_content div.icons { height: 400px; overflow-y: scroll; }
+#modal_content div.icons h2 { clear: both; padding: 20px 0px 10px 0; text-align: center; }
+#modal_content div.icons a { display: block; float: left; margin: 4px; border: #fff 0px solid; width: 120px; height: 100px; text-align: center; vertical-align: middle; border: #666 4px solid; }
+#modal_content div.icons a span.icon { display: block; padding: 10px 20px; font-size: 24pt; color: #fff; }
+#modal_content div.icons a span.name { display: block; }               
+#modal_content div.icons a:hover { background: #fff69f; color: #000; border: #666 0px solid; border: #666 4px solid; }
+#modal_content div.icons a:hover span.icon { color: #000; }
+#modal_content div.icons a:hover span.name { color: #000; }

data/app/assets/stylesheets/caboose/admin/pages/page_edit.scss

@@ -0,0 +1,960 @@
+body {
+  padding-bottom: 500px;
+}
+
+#loco-loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255,255,255,0.85);
+  z-index: 9999;
+  text-align: center;
+  img {
+    display: inline-block;
+    margin-bottom: 20px;
+  }
+  h1 {
+    margin-bottom: 0;
+    font-size: 18px;
+    color: #4990E1;
+    font-family: "Open Sans";
+  }
+}
+
+#admin_content_wrapper {
+  // height: calc(100vh - 54px);
+  // overflow: scroll;
+}
+#admin_content_body {
+  background: #f3f3f3;
+  padding: 0 !important;
+}
+#admin_content_body #page_content {  
+  /*max-width: calc(100vw - 390px);*/  
+  margin: 0 0 0 1px; /*20px auto*/  
+  &.desktop { width: 1080px; }  
+  &.tablet  { width: 570px;  }
+  &.mobile  { width: 315px;  }
+}
+
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+header#admin_header,
+#admin_nav,
+#admin_subnav {
+  font-family: 'Open Sans';
+  z-index: 999;
+}
+
+#admin_subnav {
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Open Sans';
+  }
+}
+
+#admin_subnav #admin_subnav_content #edit_block_content .mb_container input[type=text],
+#admin_subnav #admin_subnav_content #edit_block_content .mb_container select,
+#admin_subnav #admin_subnav_content #edit_block_content .mb_container .mb_fake option,
+#admin_subnav #admin_subnav_content #edit_block_content .mb_container option,
+#admin_subnav #admin_subnav_content #edit_block_content .mb_container .mb_placeholder span {
+  font-family: 'Open Sans';
+}
+
+    
+#viewers input[type=checkbox] { position: relative; }
+#editors input[type=checkbox] { position: relative; }
+
+#admin_subnav .ui-tabs { padding: 0; }
+#admin_subnav .ui-tabs .ui-tabs-nav { width: 100%; }
+#admin_subnav .ui-tabs .ui-tabs-nav li { width: 32%; }
+#admin_subnav .ui-tabs .ui-tabs-nav .ui-tabs-anchor { display: block; padding: 0; width: 100%; text-align: center; }
+#admin_subnav .ui-tabs .ui-tabs-panel { padding: 0; }
+#admin_subnav .ui-tabs .ui-tabs-panel .ui-accordion-content { padding: 4px; }
+#admin_subnav {
+  .subnav_tabs {    
+    padding: 0 !important;
+    ul {      
+      padding: 0 !important;
+      li { 
+        margin: 0;
+        padding: 0;
+        width: 33%;
+        a {
+          font-size: 10px; 
+        }
+      }
+    }         
+  }
+
+  ul.edit_selector {  
+    width: 270px;                 
+    list-style: none;
+    margin: 0;
+    padding: 0;    
+    border-top: 4px solid #f7f7f7;
+    li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      float: left;
+            
+      a {
+        display: block;
+        text-decoration: none;        
+        width: 90px;
+        height: 75px;
+        position: relative;
+    //    border-top: #f7f7f7 4px solid;
+        border-bottom: #f7f7f7 4px solid;
+                                         
+        span.icon {
+          position: absolute;
+          top: 0px;
+          left: 20px;
+          display: block;
+          width: 50px;
+          height: 50px;
+          background-image: url('/assets/caboose/admin/page_edit_icons2.gif');         
+        }
+        span.text {
+          display: block;
+          position: absolute;
+          top: 50px;
+          left: 0;
+          width: 90px;
+          height: 20px;
+          color: #a1a1a1 !important;            
+          text-transform: uppercase;
+          font-size: 10px;
+          text-align: center;
+        }
+        &:hover {                     
+          border-bottom: #8d9fb9 4px solid;
+          span.text { color: #8d9fb9  !important; }
+        }      
+      }  
+      &.selected {
+        a, a:hover {
+          border-bottom: #505e72 4px solid;
+          span.text { color: #505e72 !important; }          
+        }        
+      }
+      
+      &.content  { a { span.icon { background-position: 0px    0px; } &:hover { span.icon { background-position: -50px    0px; }}} &.selected { a, a:hover { span.icon { background-position: -100px    0px; }}}}
+      &.layout   { a { span.icon { background-position: 0px  -50px; } &:hover { span.icon { background-position: -50px  -50px; }}} &.selected { a, a:hover { span.icon { background-position: -100px  -50px; }}}}
+      &.settings { a { span.icon { background-position: 0px -100px; } &:hover { span.icon { background-position: -50px -100px; }}} &.selected { a, a:hover { span.icon { background-position: -100px -100px; }}}}                      
+    }
+  }
+  
+  li.layout_block_type {
+    list-style: none;
+    width: 190px;
+    height: 114px;
+    background: url('http://placehold.it/190x114');
+    border: #ccc 1px solid;
+    margin: 0 auto 10px auto;
+    span.name { display: none; }
+  }  
+}
+
+#admin_subnav_content h2 { clear: left; }
+
+ul.block_types {
+  clear: left;
+  li:nth-child(odd)  { margin: 0 10px 10px auto; }
+  li:nth-child(even) { margin: 0 auto 10px 10px; }
+}
+
+ul.block_type_groups {
+  clear: left;
+  li:nth-child(odd)  { margin: 0 10px 10px auto; }
+  li:nth-child(even) { margin: 0 auto 10px 10px; }
+}
+
+li.new_block_type,
+li.new_block_type_group {    
+  list-style: none;
+  width: 100px;
+  height: 100px;
+  float: left;
+  position: relative;
+  
+  background-color: #F2F2F2;
+  border-color: #ccc;
+  border-width: 10px;
+  border-style: solid;
+  border-radius: 10px;
+  border-width: 2px;
+
+  background-size: cover;
+    
+  .name {
+    display: table;      
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    z-index: 21;
+    width: 88px;
+    height: 32px;      
+    text-align: center;
+    span {
+      display: table-cell;
+      vertical-align: middle;
+      text-align: center;
+      font-size: 10px;
+      text-transform: uppercase;
+      line-height: 0.95
+    }
+  }
+}
+  
+#admin_content_body {
+  text-align: center;
+  position: relative;
+}
+
+#select_device_wrapper {
+  
+  table {
+    margin: 0 auto;  
+    width: 100%;
+    
+    td {
+      text-align: center;      
+    }
+    
+    tr#device_selector {      
+      td {    
+        margin: 0;
+        padding: 0;        
+
+        a {
+          display: block;
+          text-decoration: none;        
+          width: 74px;
+          height: 54px !important;
+          margin: 0 auto;
+          padding: 0;
+          position: relative;          
+                                                 
+          span.icon {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            display: block;
+            width: 74px;
+            height: 54px;
+            background-image: url('/assets/caboose/admin/admin_device_icons.gif');
+            background-position: center center;
+          }
+          span.text {
+            display: block;
+            position: absolute;
+            top: 36px;
+            left: 0;
+            width: 74px;
+            height: 16px;
+            color: #333 !important;
+            text-transform: uppercase;
+            font-size: 10px;
+            text-align: center;
+          }
+          &:hover {                             
+            span.text { color: white !important; }
+          }      
+        }  
+        &.selected {
+          border-bottom: none;
+          a, a:hover {        
+            span.text { color: white !important; }
+          }        
+        }
+        
+        &.breakpoint3 /* Mobile  */ { a { span.icon { background-position: -74px    0px; } &:hover { span.icon { background-position: -148px    0px; }}} &.selected { a, a:hover { span.icon { background-position: 0    0px; }}}}
+        &.breakpoint2 /* Tablet  */ { a { span.icon { background-position: -74px  -54px; } &:hover { span.icon { background-position: -148px  -54px; }}} &.selected { a, a:hover { span.icon { background-position: 0  -54px; }}}}
+        &.breakpoint1 /* Desktop */ { a { span.icon { background-position: -74px -108px; } &:hover { span.icon { background-position: -148px -108px; }}} &.selected { a, a:hover { span.icon { background-position: 0 -108px; }}}}
+      }
+    }
+  }
+}
+
+.flex-grid-container.ui-droppable, .flex-grid-unit.ui-droppable {
+  border: 1px dashed #cccccc;
+  &.block_over {
+    border-color: #4990E1;
+  }
+}
+
+#page_content {
+  background: #fff;
+    
+  .new_block_link { position: relative; width: 100%; }
+  .new_block_link .line { position: absolute; top: -11px; width: 100%; height: 2px; background: transparent; }
+  .new_block_link a { position: absolute; top: -20px; left: 45%; background: transparent; color: transparent !important; display: block; padding: 4px 8px; }
+  .new_block_link_over { position: relative; width: 100%; }
+  .new_block_link_over .line { position: absolute; top: -11px; width: 100%; height: 2px; background: #ccc; }
+  .new_block_link_over a { position: absolute; top: -22px; left: 45%; color: #fff; background: #666; display: block; padding: 2px 4px; text-decoration: none; font-size: 12px; }
+      
+  .flexbox {
+    .flex-grid-unit {
+      &.resize_handle {
+        position: relative;    
+        width: 4px;
+        background: #dcdcdc;
+        transition: all ease-in 0.1s;
+        position: relative;
+        border-radius: 2px;     
+        .grabber {
+          display: none;
+          // width: 20px; height: 20px; position: absolute; top: calc(50% - 10px); left: -10px; background: transparent; 
+        }
+      }
+    }
+    &:hover {
+      .flex-grid-unit {
+        &.resize_handle {
+          position: relative;    
+          width: 4px;
+          background: #dcdcdc;
+          transition: all ease-in 0.1s;
+          position: relative;
+          border-radius: 2px;     
+          .grabber {
+            display: none;
+         //   width: 20px; height: 20px; position: absolute; top: calc(50% - 10px); left: -10px; background: #ff0000; 
+          }
+        }
+      }
+    }
+  }
+  
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  
+  $dt1: 1px dotted #666666;
+  $dt2: none;
+  $dt3: 2px solid #ff0000;
+    
+  .drop_target_active                                     { border: $dt1; }
+  .drop_target_hover_all                                  { border-top: $dt3; border-right: $dt3; border-bottom: $dt3; border-left: $dt3; }
+  .drop_target_hover_top                                  { border-top: $dt3; border-right: $dt1; border-bottom: $dt1; border-left: $dt1; }
+  .drop_target_hover_bottom                               { border-top: $dt1; border-right: $dt1; border-bottom: $dt3; border-left: $dt1; }
+  .drop_target_hover_left                                 { border-top: $dt1; border-right: $dt1; border-bottom: $dt1; border-left: $dt3; }
+  .drop_target_hover_right                                { border-top: $dt1; border-right: $dt3; border-bottom: $dt1; border-left: $dt1; }
+    
+  .flex-grid-unit > .drop_target_active                   { border-bottom: $dt1; }    
+  .flex-grid-unit > .drop_target_hover_top                { border-bottom: $dt1; }
+  .flex-grid-unit > .drop_target_hover_bottom             { border-bottom: $dt3; }
+  .flex-grid-unit > .drop_target_hover_left               { border-bottom: $dt1; }
+  .flex-grid-unit > .drop_target_hover_right              { border-bottom: $dt1; }
+
+  /*
+  .flex-grid-unit > .drop_target_active:first-child       { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; }    
+  .flex-grid-unit > .drop_target_hover_top:first-child    { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; }
+  .flex-grid-unit > .drop_target_hover_bottom:first-child { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt3; border-left: $dt2 !important; }
+  .flex-grid-unit > .drop_target_hover_left:first-child   { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; }
+  .flex-grid-unit > .drop_target_hover_right:first-child  { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; }
+    
+  .flex-grid-unit > .drop_target_active:last-child        { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; }
+  .flex-grid-unit > .drop_target_hover_top:last-child     { border-top: $dt3; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; }
+  .flex-grid-unit > .drop_target_hover_bottom:last-child  { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; }
+  .flex-grid-unit > .drop_target_hover_left:last-child    { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; }
+  .flex-grid-unit > .drop_target_hover_right:last-child   { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; }
+  */
+  
+  /*
+  .drop_target                         {}
+  .drop_target_horizontal              { height: 10px; border:            #efefef 1px solid; background: transparent; }
+  .drop_target_vertical                { width:  10px !important; border: #efefef 1px solid; background: transparent; flex: 0 0 10px; }
+  
+  .drop_target_highlight               { border: 1px dotted #666666; }
+  .drop_target_horizontal_highlight    { height: 10px; border: #ccc 1px solid; background: #efefef !important; }
+  .drop_target_vertical_highlight      { width:  10px !important; border: #ccc 1px solid; background: #efefef !important; flex: 0 0 10px; }
+    
+  .drop_target_horizontal_hover        { height: 10px; border: #ff0000 1px solid; background: #ffcccc !important; } 
+  .drop_target_vertical_hover          { width:  10px !important; border: #ff0000 1px solid; background: #ffcccc !important; flex: 0 0 10px; }    
+  .drop_target_highlight_about_to_drop { height: 40px !important;  background: #ffffff !important; border: #ff0000 1px solid; }
+  */
+}
+
+.magic_header {
+  padding: 4px 8px;
+  font-size: 10px;    
+}
+
+.block_tabs {
+  width: 270px;
+  background: #E7E7E7;
+  margin: 0 0 10px -20px;
+  padding: 10px 0 0 0; 
+  ul {
+    li {
+      display: inline-block;            
+      a {
+        display: block;
+        margin: 0;
+        padding: 4px 8px;
+        font-size: 12px;
+        text-decoration: none;
+        border-right: #E7E7E7 1px solid;
+        border-bottom: #E7E7E7 1px solid;
+        color: #000;
+      }
+      &:last-child { a { border-right: 0 }}    
+      &.selected   { a { background: #fff; border-bottom: #fff 1px solid; }}
+    }    
+  }
+}
+
+#admin_header #admin_page_top_nav {
+  position: absolute;
+  top: 0;
+  right: 0;
+      
+  & > ul {
+    & > li {
+      position: absolute;
+      top: 0;
+      right: 0;      
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+      vertical-align: top;
+      
+      a {
+        margin: 0;
+        padding: 0;
+        display: inline-block;
+        text-decoration: none;
+        font-size: 12px;
+        text-transform: uppercase;
+        text-align: center;
+        position: relative;        
+        background-repeat: no-repeat;
+        border: transparent 1px solid;
+        color: #fff;
+      }
+      a:hover {
+        border: #2d76b7 1px solid;        
+      }
+
+      &.select-device  {
+        top: 13px;
+        right: 243px;
+
+        #select_device_wrapper {
+          display: none;
+        }
+      }
+      
+      &.stack           { top: 13px; right: 244px; }
+      &.undo            { top: 13px; right: 204px; }
+      &.redo            { top: 13px; right: 174px; }
+      &.revisions       { top: 26px; right: 174px; }
+      &.preview         { top: 13px; right:  93px; }
+      &.publish         { top: 13px; right:  12px; }
+            
+      &.select-device   a { background-color: #3893e5; width: 75px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; }
+      &.undo            a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 6px 0px 0px 0px; background-image: url('/assets/caboose/admin/undo_arrow.png'); background-position:  6px 1px; }
+      &.redo            a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 0px 6px 0px 0px; background-image: url('/assets/caboose/admin/redo_arrow.png'); background-position:  6px 1px; }
+      &.revisions       a { background-color: #3893e5; width: 59px; height: 11px; border-radius: 0px 0px 6px 6px; background-image: url('/assets/caboose/admin/down_arrow.png'); background-position: 22px 0px; }
+      &.preview         a { background-color: #3893e5; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; }
+      &.publish         a { background-color: #6cb049; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; }
+
+      &.stack           a { background-color: #3893e5; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; text-align: center; }
+      &.undo            a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 6px 0px 0px 0px; background-image: url('/assets/caboose/admin/undo_arrow.png'); background-position:  6px 1px; }
+      &.redo            a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 0px 6px 0px 0px; background-image: url('/assets/caboose/admin/redo_arrow.png'); background-position:  6px 1px; }
+      &.revisions       a { background-color: #3893e5; width: 59px; height: 11px; border-radius: 0px 0px 6px 6px; background-image: url('/assets/caboose/admin/down_arrow.png'); background-position: 22px 0px; }
+      &.preview         a { background-color: #3893e5; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; text-align: center; }
+      &.publish         a { background-color: #6cb049; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; text-align: center; }
+
+      &.revisions.open         { top: 31px; }
+      &.revisions.open a       { height: 16px; border-radius: 0;           border-color: transparent !important; }
+      &.revisions.open a:hover { height: 16px; border-radius: 0;           border-color: transparent !important; }
+
+      &.preview.open   a       { height: 35px; border-radius: 6px 6px 0 0; border-color: transparent !important; }
+      &.preview.open   a:hover { border-color: #72a761 1px solid; }
+
+      &.publish.open   a       { height: 35px; border-radius: 6px 6px 0 0; border-color: transparent !important; }
+      &.publish.open   a:hover { border-color: #72a761 1px solid; }
+
+      &.stack     a span { }
+      &.undo      a span { display: none; }
+      &.redo      a span { display: none; }
+      &.revisions a span { display: none; }
+      &.preview   a span { }
+      &.publish   a span { }
+      
+
+      &.select-device.open {
+        #select_device_wrapper {
+          display: block;
+          position: absolute;
+          top: 35px;
+          right: -110px;
+          z-index: 1000;
+          width: 300px;
+          padding: 10px;
+          border-radius: 6px 6px 6px 6px;
+          border-color: #EDEEF0;
+          border-width: 0 2px 2px 2px;
+          border-style: solid;
+          background: #3893e5;
+          color: #fff;
+          text-align: center;
+        }
+        /*
+        a {
+          height: 35px;
+          border-radius: 6px 6px 0 0;
+          border-color: transparent !important;
+        }
+        */
+      }
+    }
+  }
+}
+
+#revision_history {
+  position: absolute;
+  top: 48px;
+  right: 10px;
+  z-index: 1000;
+  width: 300px;
+  max-height: 200px;
+  overflow-y: scroll;
+  border-radius: 6px 6px 6px 6px;
+  border-color: #EDEEF0;
+  border-width: 0 2px 2px 2px;
+  border-style: solid;
+  background: #3893e5;
+  color: #fff;
+  text-align: center;
+  p {
+    padding: 10px;
+  }
+    
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    
+    li {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      
+      a {        
+        display: block;
+        margin: 0;
+        padding: 0 30px 0 0;
+        width: 285px;
+        background: #3893E5;
+        color: #fff;
+        font-size: 12px;
+        text-decoration: none;
+        border-top: #2d76b7 1px solid;;
+                          
+        span {
+          display: inline-block;
+          margin: 0;
+          padding: 8px 8px;
+          text-align: center;
+          
+          &.user { width: 50%; }
+          &.date { width: 25%; }
+          &.time { width: 25%; }
+        }                                                                                                                                                                                    
+      }
+      &:first-child a { border-top: 0; }
+      &.like a    { background-image: url('/assets/caboose/admin/like_thumb.png'); background-position: 4px 3px; }
+      &.current a { background: #2d76b7; }
+    }
+  }  
+}
+
+#preview_confirm {
+  position: absolute;
+  top: 48px;
+  right: 10px;
+  z-index: 1000;
+  width: 300px;
+  padding: 10px;
+  border-radius: 6px 6px 6px 6px;
+  border-color: #EDEEF0;
+  border-width: 0 2px 2px 2px;
+  border-style: solid;
+  background: #3893e5;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+  p { margin-bottom: 8px; }
+  
+  select, input[type=text] {
+    margin: 0;
+    padding: 4px 8px;
+    border: #ccc 1px solid;
+    font-size: 14px;
+    width: 250px;
+  }
+}
+
+#publish_confirm {
+  position: absolute;
+  top: 48px;
+  right: 10px;
+  z-index: 1000;
+  width: 300px;
+  padding: 10px;
+  border-radius: 6px 0 6px 6px;
+  border-color: #EDEEF0;
+  border-width: 0 2px 2px 2px;
+  border-style: solid;
+  background: #6cb049;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+  p { margin-bottom: 8px; }
+  
+  select, input[type=text] {
+    margin: 0;
+    padding: 4px 8px;
+    border: #ccc 1px solid;
+    font-size: 14px;
+    width: 250px;
+  }
+}
+
+#block_overlays_container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  
+  #block_overlays {  
+    position: relative;
+    
+    .section_width_overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 100;
+      border-left:  #3893E5 1px dashed;
+      border-right: #3893E5 1px dashed;
+    }
+    
+    .block_overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 100;
+      /*
+      border: #ff0000 1px dashed;
+      */
+      &.section_block_overlay {
+        border-bottom: #ff0000 1px dashed;
+      }      
+      .message {
+        width: 100%;
+        height: 100%;
+        display: table;                
+      }
+      .caboose_note {        
+        width: 100%;
+        height: 100%;
+        display: table-cell;
+        vertical-align: middle;
+        text-align: center;
+        padding: 10px 20px; background: #d07f7f; color: #fff; font-size: 16px; 
+      }      
+      &.selected { 
+        background: #fff799;
+        border: #ff0000 2px solid;
+        background: transparent;
+      }            
+             
+      $dt1: 1px dotted #666666;            
+      $dt3: 2px solid #00ff00 !important;
+    
+      &.drop_target_active        { /* border: $dt1; */ }
+      &.drop_target_hover_all     { border-top: $dt3; border-right: $dt3; border-bottom: $dt3; border-left: $dt3; }
+      &.drop_target_hover_top     { border-top: $dt3; }
+      &.drop_target_hover_bottom  { border-bottom: $dt3; }
+      &.drop_target_hover_left    { border-left: $dt3; }
+      &.drop_target_hover_right   { border-right: $dt3; }
+      
+      .overlay_controls {
+        display: none;
+      }      
+       
+      &.over {
+        /*
+        background: #e3e3e3 !important;
+        background-color: rgba(0,0,0,0.1) !important;
+        */
+        border: #ff0000 1px dashed;
+        &.selected {
+          border: #ff0000 2px solid;
+        }
+        .overlay_controls {
+          display: block;
+          a {
+            position: absolute;
+            top: -26px;
+            display: block;
+            width: 25px;
+            height: 25px;
+            background-image: url('/assets/caboose/admin/overlay_nav.png');
+            background-repeat: no-repeat;
+            background-position: top left;            
+            border: #10151b 1px solid;
+            
+            &.layers              { right: 74px; background-position: -350px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+            &.duplicate           { right: 49px; background-position: -375px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+            &.save                { right: 24px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+            &.delete              { right: -1px; background-position: -325px 0; border-width: 1px 1px 1px 1px; width: 27px; height: 27px; }
+            
+            /*
+            &.align_left          { right: 25px; background-position: 50px 0; }          
+            &.align_right         { right: 25px; background-position: 50px 0; }
+            &.align_bottom        { right: 25px; background-position: 50px 0; }
+            &.align_top           { right: 25px; background-position: 50px 0; }
+            &.align_horizontally  { right: 25px; background-position: 50px 0; }
+            &.align_vertically    { right: 25px; background-position: 50px 0; }
+            &.center_horiontally  { right: 25px; background-position: 50px 0; }
+            &.center_vertically   { right: 25px; background-position: 50px 0; }
+            */                        
+          }
+        }
+        &.section_block_overlay {
+          .overlay_controls {                    
+            a {            
+              top: -1px;
+            }                        
+          }
+        }
+      }
+    }
+            
+    .over > .layers_handle    { display: block; position: relative; z-index: 3; }
+    .over > .duplicate_handle { display: block; position: relative; z-index: 3; }
+    .over > .save_handle      { display: block; position: relative; z-index: 3; }
+    .over > .delete_handle    { display: block; position: relative; z-index: 3; }
+          
+    .over > .layers_handle    span { position: absolute; top: 0; right: 54px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
+    .over > .duplicate_handle span { position: absolute; top: 0; right: 36px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
+    .over > .save_handle      span { position: absolute; top: 0; right: 18px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
+    .over > .delete_handle    span { position: absolute; top: 0; right:  0px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
+    
+    .highlight { border-width: 2px; background-color: rgba(255, 255, 0, 0.5); }  
+    /*
+    .block_overlay_flex_grid {   
+      border: #ff0000 1px dashed;            
+    }
+    .block_overlay_flex_unit {      
+      border: #ff0000 1px dashed;      
+    }
+    */
+    
+    .guide {
+    	display: none;
+    	position: absolute;
+    	left: 0;
+    	top: 0;
+      background: #ff0000 !important;
+      z-index: 20000;
+    }
+    
+    #guide-h {
+    	border-top: 1px dashed #55f !important;
+    	width: 100%;    	    	
+    }
+    
+    #guide-v {
+    	border-left: 1px dashed #55f !important;
+    	height: 100%;    	
+    }
+  }
+}
+
+.group_overlay {
+  border: #0000ff 1px dotted;    
+  position: absolute;
+  
+  .caboose_note {        
+    width: 100%;
+    height: 100%;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    padding: 10px 20px;
+    background: #d07f7f;
+    color: #fff;
+    font-size: 16px; 
+  }
+  
+  .group_controls {
+    position: absolute;
+    top: -20px;    
+    height: 20px;
+    a {
+      float: right;
+      width: 20px;
+      &.hover { background: #ff0000; }    
+    }
+    #align_top     {}
+    #align_bottom  {}
+    #align_left    {}
+    #align_right   {}
+    #evenly_dist_h {}
+    #evenly_dist_v {}
+    #create_group  {}
+    #clear_group   {}
+  }
+  
+  .overlay_controls {
+    position: absolute;
+    left: -1px;
+    top: -2px; 
+    box-sizing: border-box;
+    display: block;
+    a {
+      position: absolute;
+      top: -25px;
+      display: block;
+      width: 26px;
+      height: 26px;
+      background-image: url('/assets/caboose/admin/overlay_nav.png');
+      background-repeat: no-repeat;
+      background-position: top left;
+      background-color: #ff0000;
+      border: #10151b 1px solid;
+      color: #fff;
+      
+      /*
+      &.layers              { right: 74px; background-position: -250px 0; background-color: #3c4c62; border-width: 1px 0px 1px 1px; }
+      &.duplicate           { right: 49px; background-position: -275px 0; background-color: #3c4c62; border-width: 1px 0px 1px 1px; }
+      */
+      
+      span {
+        display: block;
+        color: #fff;
+        padding-top: 4px;         
+        background: #4f5e72;
+        font-size: 12px;
+      }
+      &.align                     { left:   0px; background: #4f5e72;           border-width: 1px 0px 1px 1px; width: 50px; height: 27px; text-align: center; }
+      &.distribute                { left:  50px; background: #4f5e72;           border-width: 1px 0px 1px 1px; width: 75px; height: 27px; text-align: center; }
+      &.save                      { left: 125px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.delete                    { left: 151px; background-position: -325px 0; border-width: 1px 1px 1px 1px; width: 27px; height: 27px; }
+       
+      &.align_top_edges           { top: 0; left:   0px; background-position:    0px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.align_vertical_centers    { top: 0; left:  25px; background-position:  -25px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.align_bottom_edges        { top: 0; left:  50px; background-position:  -50px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }        
+      &.align_left_edges          { top: 0; left:  75px; background-position:  -75px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.align_horizontal_centers  { top: 0; left: 100px; background-position: -100px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.align_right_edges         { top: 0; left: 125px; background-position: -125px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+
+      &.dist_top_edges            { top: 0; left:   0px; background-position: -150px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_vertical_centers     { top: 0; left:  25px; background-position: -175px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_bottom_edges         { top: 0; left:  50px; background-position: -200px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_left_edges           { top: 0; left:  75px; background-position: -225px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_horizontal_centers   { top: 0; left: 100px; background-position: -250px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_right_edges          { top: 0; left: 125px; background-position: -275px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_padding_vertically   { top: 0; left: 150px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_padding_horizontally { top: 0; left: 175px; background-position: -325px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+    }
+    #align_controls {
+      position: absolute;
+      top: -25px;      
+      left: 50px;
+      width: 0;
+      height: 27px;
+      overflow: hidden;
+      background: #ff0000;
+    }
+    #distribute_controls {
+      position: absolute;
+      top: -25px;      
+      left: 125px;
+      width: 0;
+      height: 27px;
+      overflow: hidden;
+      background: #ff0000;
+    }
+  }
+}
+
+.move {
+  width : 25px;
+  height: 25px;
+  right : 0;
+}
+
+.move_up {
+  margin-top: 25px;
+}
+
+.move_down {
+  margin-top: 50px;
+}
+
+/****************************************/
+
+.selected {
+  border-bottom: #505e72 4px solid;
+}
+
+#multiselect {
+  position:absolute;
+  z-index: 9000;  
+  background-color:rgba(73, 144, 225, 0.3);
+  border: 1px solid #4990E1;  
+  cursor: default !important;
+}
+
+/****************************************/
+/* Heading Froala editor
+/****************************************/
+
+.fr-box.fr-basic .fr-wrapper {
+  background: transparent !important;
+}
+.fr-box.fr-basic.fr-top .fr-wrapper {
+  box-shadow        : none !important;
+  -webkit-box-shadow: none !important;
+}
+
+.heading-froala > .fr-toolbar.fr-desktop.fr-top {
+  position: absolute;
+  top: -40px;
+  width: 500px;
+}
+
+.fr-box.fr-basic .fr-wrapper {
+  text-align: center;
+}
+
+.fr-box.fr-basic .fr-element {
+  padding: 0 !important;
+  overflow-x: hidden !important;
+  height: 100% !important;
+}
+
+.fr-element.fr-viewer {
+  margin: 0;
+}
+
+/****************************************/
+/* Richtext Froala editor
+/****************************************/
+
+.richtext-froala > .fr-toolbar.fr-desktop.fr-top {
+  position: absolute;
+  top: -80px;
+  width: 600px;
+}
+
+/****************************************/