sassblueprint 0.0.3

data/lib/stylesheets/base_utilities/_layout.sass

@@ -0,0 +1,119 @@
+////////////////////////////////////////////////////
+// FLUID GRID COLUMNS  
+// 
+// Example:  http://sassmeister.com/gist/7951177
+
+$fluid-grid-cols: 1
+$fluid-grid-grid-rows: 10
+$fluid-grid-padding: 2%
+$fluid-grid-class-name: views-row
+
+@mixin grid-mobile($class-name: $fluid-grid-class-name)
+  [class*='#{$class-name}']
+    float: left
+    clear: both
+    width: 100%
+    +box-sizing('border-box')
+
+
+@mixin grid-desktop($class-name: $fluid-grid-class-name)
+  [class*='#{$class-name}']
+    float: left
+    clear: none
+    +box-sizing('border-box')
+
+
+@mixin fluid-grid-modern($cols: $fluid-grid-cols, $grid-rows: $fluid-grid-grid-rows, $padding: $fluid-grid-padding, $class-name: $fluid-grid-class-name)
+  [class*='#{$class-name}']
+    width: (100% + $padding) / $cols
+    padding: 0 0 $padding $padding
+  .#{$class-name}-1  
+    margin-left: -($padding)
+  .#{$class-name}:nth-child(#{$cols}n + 1)
+    margin-left: -($padding)
+    clear: both
+
+@mixin fluid-grid($cols: $fluid-grid-cols, $grid-rows: $fluid-grid-grid-rows, $padding: $fluid-grid-padding, $class-name: $fluid-grid-class-name)
+  [class*='#{$class-name}']
+    width: (100% + $padding) / $cols
+    padding: 0 0 $padding $padding
+    clear: none
+
+  .#{$class-name}-1  
+    margin-left: -($padding)
+  
+  @for $x from 1 through $grid-rows
+    .#{$class-name}-#{$x * $cols + 1}
+      margin-left: -($padding)
+      clear: both
+
+
+
+//======================================
+
+$blue1: rgba(146, 198, 224, 0.25)
+$blue2: rgba(146, 198, 224, 0.075)
+
+@mixin grid-background-4
+  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, $blue1), color-stop(21.05263%, $blue1), color-stop(21.05263%, $blue2), color-stop(26.31579%, $blue2), color-stop(26.31579%, $blue1), color-stop(47.36842%, $blue1), color-stop(47.36842%, $blue2), color-stop(52.63158%, $blue2), color-stop(52.63158%, $blue1), color-stop(73.68421%, $blue1), color-stop(73.68421%, $blue2), color-stop(78.94737%, $blue2), color-stop(78.94737%, $blue1), color-stop(100%, $blue1))
+  background-image: -webkit-linear-gradient(left, $blue1, $blue1 21.05263%, $blue2 21.05263%, $blue2 26.31579%, $blue1 26.31579%, $blue1 47.36842%, $blue2 47.36842%, $blue2 52.63158%, $blue1 52.63158%, $blue1 73.68421%, $blue2 73.68421%, $blue2 78.94737%, $blue1 78.94737%, $blue1 100%)
+  background-image: -moz-linear-gradient(left, $blue1, $blue1 21.05263%, $blue2 21.05263%, $blue2 26.31579%, $blue1 26.31579%, $blue1 47.36842%, $blue2 47.36842%, $blue2 52.63158%, $blue1 52.63158%, $blue1 73.68421%, $blue2 73.68421%, $blue2 78.94737%, $blue1 78.94737%, $blue1 100%)
+  background-image: linear-gradient(left, $blue1, $blue1 21.05263%, $blue2 21.05263%, $blue2 26.31579%, $blue1 26.31579%, $blue1 47.36842%, $blue2 47.36842%, $blue2 52.63158%, $blue1 52.63158%, $blue1 73.68421%, $blue2 73.68421%, $blue2 78.94737%, $blue1 78.94737%, $blue1 100%)
+
+@mixin grid-background-8
+  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, $blue1), color-stop(10.25641%, $blue1), color-stop(10.25641%, $blue2), color-stop(12.82051%, $blue2), color-stop(12.82051%, $blue1), color-stop(23.07692%, $blue1), color-stop(23.07692%, $blue2), color-stop(25.64103%, $blue2), color-stop(25.64103%, $blue1), color-stop(35.89744%, $blue1), color-stop(35.89744%, $blue2), color-stop(38.46154%, $blue2), color-stop(38.46154%, $blue1), color-stop(48.71795%, $blue1), color-stop(48.71795%, $blue2), color-stop(51.28205%, $blue2), color-stop(51.28205%, $blue1), color-stop(61.53846%, $blue1), color-stop(61.53846%, $blue2), color-stop(64.10256%, $blue2), color-stop(64.10256%, $blue1), color-stop(74.35897%, $blue1), color-stop(74.35897%, $blue2), color-stop(76.92308%, $blue2), color-stop(76.92308%, $blue1), color-stop(87.17949%, $blue1), color-stop(87.17949%, $blue2), color-stop(89.74359%, $blue2), color-stop(89.74359%, $blue1), color-stop(100%, $blue1))
+  background-image: -webkit-linear-gradient(left, $blue1, $blue1 10.25641%, $blue2 10.25641%, $blue2 12.82051%, $blue1 12.82051%, $blue1 23.07692%, $blue2 23.07692%, $blue2 25.64103%, $blue1 25.64103%, $blue1 35.89744%, $blue2 35.89744%, $blue2 38.46154%, $blue1 38.46154%, $blue1 48.71795%, $blue2 48.71795%, $blue2 51.28205%, $blue1 51.28205%, $blue1 61.53846%, $blue2 61.53846%, $blue2 64.10256%, $blue1 64.10256%, $blue1 74.35897%, $blue2 74.35897%, $blue2 76.92308%, $blue1 76.92308%, $blue1 87.17949%, $blue2 87.17949%, $blue2 89.74359%, $blue1 89.74359%, $blue1 100%)
+  background-image: -moz-linear-gradient(left, $blue1, $blue1 10.25641%, $blue2 10.25641%, $blue2 12.82051%, $blue1 12.82051%, $blue1 23.07692%, $blue2 23.07692%, $blue2 25.64103%, $blue1 25.64103%, $blue1 35.89744%, $blue2 35.89744%, $blue2 38.46154%, $blue1 38.46154%, $blue1 48.71795%, $blue2 48.71795%, $blue2 51.28205%, $blue1 51.28205%, $blue1 61.53846%, $blue2 61.53846%, $blue2 64.10256%, $blue1 64.10256%, $blue1 74.35897%, $blue2 74.35897%, $blue2 76.92308%, $blue1 76.92308%, $blue1 87.17949%, $blue2 87.17949%, $blue2 89.74359%, $blue1 89.74359%, $blue1 100%)
+  background-image: linear-gradient(left, $blue1, $blue1 10.25641%, $blue2 10.25641%, $blue2 12.82051%, $blue1 12.82051%, $blue1 23.07692%, $blue2 23.07692%, $blue2 25.64103%, $blue1 25.64103%, $blue1 35.89744%, $blue2 35.89744%, $blue2 38.46154%, $blue1 38.46154%, $blue1 48.71795%, $blue2 48.71795%, $blue2 51.28205%, $blue1 51.28205%, $blue1 61.53846%, $blue2 61.53846%, $blue2 64.10256%, $blue1 64.10256%, $blue1 74.35897%, $blue2 74.35897%, $blue2 76.92308%, $blue1 76.92308%, $blue1 87.17949%, $blue2 87.17949%, $blue2 89.74359%, $blue1 89.74359%, $blue1 100%)
+
+@mixin grid-background-12
+  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, $blue1), color-stop(6.77966%, $blue1), color-stop(6.77966%, $blue2), color-stop(8.47458%, $blue2), color-stop(8.47458%, $blue1), color-stop(15.25424%, $blue1), color-stop(15.25424%, $blue2), color-stop(16.94915%, $blue2), color-stop(16.94915%, $blue1), color-stop(23.72881%, $blue1), color-stop(23.72881%, $blue2), color-stop(25.42373%, $blue2), color-stop(25.42373%, $blue1), color-stop(32.20339%, $blue1), color-stop(32.20339%, $blue2), color-stop(33.89831%, $blue2), color-stop(33.89831%, $blue1), color-stop(40.67797%, $blue1), color-stop(40.67797%, $blue2), color-stop(42.37288%, $blue2), color-stop(42.37288%, $blue1), color-stop(49.15254%, $blue1), color-stop(49.15254%, $blue2), color-stop(50.84746%, $blue2), color-stop(50.84746%, $blue1), color-stop(57.62712%, $blue1), color-stop(57.62712%, $blue2), color-stop(59.32203%, $blue2), color-stop(59.32203%, $blue1), color-stop(66.10169%, $blue1), color-stop(66.10169%, $blue2), color-stop(67.79661%, $blue2), color-stop(67.79661%, $blue1), color-stop(74.57627%, $blue1), color-stop(74.57627%, $blue2), color-stop(76.27119%, $blue2), color-stop(76.27119%, $blue1), color-stop(83.05085%, $blue1), color-stop(83.05085%, $blue2), color-stop(84.74576%, $blue2), color-stop(84.74576%, $blue1), color-stop(91.52542%, $blue1), color-stop(91.52542%, $blue2), color-stop(93.22034%, $blue2), color-stop(93.22034%, $blue1), color-stop(100%, $blue1))
+  background-image: -webkit-linear-gradient(left, $blue1, $blue1 6.77966%, $blue2 6.77966%, $blue2 8.47458%, $blue1 8.47458%, $blue1 15.25424%, $blue2 15.25424%, $blue2 16.94915%, $blue1 16.94915%, $blue1 23.72881%, $blue2 23.72881%, $blue2 25.42373%, $blue1 25.42373%, $blue1 32.20339%, $blue2 32.20339%, $blue2 33.89831%, $blue1 33.89831%, $blue1 40.67797%, $blue2 40.67797%, $blue2 42.37288%, $blue1 42.37288%, $blue1 49.15254%, $blue2 49.15254%, $blue2 50.84746%, $blue1 50.84746%, $blue1 57.62712%, $blue2 57.62712%, $blue2 59.32203%, $blue1 59.32203%, $blue1 66.10169%, $blue2 66.10169%, $blue2 67.79661%, $blue1 67.79661%, $blue1 74.57627%, $blue2 74.57627%, $blue2 76.27119%, $blue1 76.27119%, $blue1 83.05085%, $blue2 83.05085%, $blue2 84.74576%, $blue1 84.74576%, $blue1 91.52542%, $blue2 91.52542%, $blue2 93.22034%, $blue1 93.22034%, $blue1 100%)
+  background-image: -moz-linear-gradient(left, $blue1, $blue1 6.77966%, $blue2 6.77966%, $blue2 8.47458%, $blue1 8.47458%, $blue1 15.25424%, $blue2 15.25424%, $blue2 16.94915%, $blue1 16.94915%, $blue1 23.72881%, $blue2 23.72881%, $blue2 25.42373%, $blue1 25.42373%, $blue1 32.20339%, $blue2 32.20339%, $blue2 33.89831%, $blue1 33.89831%, $blue1 40.67797%, $blue2 40.67797%, $blue2 42.37288%, $blue1 42.37288%, $blue1 49.15254%, $blue2 49.15254%, $blue2 50.84746%, $blue1 50.84746%, $blue1 57.62712%, $blue2 57.62712%, $blue2 59.32203%, $blue1 59.32203%, $blue1 66.10169%, $blue2 66.10169%, $blue2 67.79661%, $blue1 67.79661%, $blue1 74.57627%, $blue2 74.57627%, $blue2 76.27119%, $blue1 76.27119%, $blue1 83.05085%, $blue2 83.05085%, $blue2 84.74576%, $blue1 84.74576%, $blue1 91.52542%, $blue2 91.52542%, $blue2 93.22034%, $blue1 93.22034%, $blue1 100%)
+  background-image: linear-gradient(left, $blue1, $blue1 6.77966%, $blue2 6.77966%, $blue2 8.47458%, $blue1 8.47458%, $blue1 15.25424%, $blue2 15.25424%, $blue2 16.94915%, $blue1 16.94915%, $blue1 23.72881%, $blue2 23.72881%, $blue2 25.42373%, $blue1 25.42373%, $blue1 32.20339%, $blue2 32.20339%, $blue2 33.89831%, $blue1 33.89831%, $blue1 40.67797%, $blue2 40.67797%, $blue2 42.37288%, $blue1 42.37288%, $blue1 49.15254%, $blue2 49.15254%, $blue2 50.84746%, $blue1 50.84746%, $blue1 57.62712%, $blue2 57.62712%, $blue2 59.32203%, $blue1 59.32203%, $blue1 66.10169%, $blue2 66.10169%, $blue2 67.79661%, $blue1 67.79661%, $blue1 74.57627%, $blue2 74.57627%, $blue2 76.27119%, $blue1 76.27119%, $blue1 83.05085%, $blue2 83.05085%, $blue2 84.74576%, $blue1 84.74576%, $blue1 91.52542%, $blue2 91.52542%, $blue2 93.22034%, $blue1 93.22034%, $blue1 100%)
+
+@mixin width-25($padding: 0)
+  width: 25%
+  float: left
+  padding: $padding
+
+@mixin width-33($padding: 0)
+  width: 33.33%
+  float: left
+  padding: $padding
+
+@mixin width-50($padding: 0)
+  width: 50%
+  float: left
+  padding: $padding
+
+@mixin width-66($padding: 0)
+  width: 66%
+  float: left
+  padding: $padding
+
+@mixin width-75($padding: 0)
+  width: 75%
+  float: left
+  padding: $padding
+
+@mixin width-100($padding: 0)
+  width: 100%
+
+@mixin width-50-100($padding: 0)
+  width: 100%
+  float: left
+  padding: $padding
+  +breakpoint($tablet-portrait)
+    width: 50%
+    float: left
+    padding: $padding
+
+
+@mixin vertical-align
+  &:before 
+    content: ''
+    display: inline-block
+    vertical-align: middle
+    height: 100% 
+    width: .1px

data/lib/stylesheets/base_utilities/_page.sass

@@ -0,0 +1,48 @@
+
+@mixin page-max-width
+  +breakpoint($phone-l-tab-p)
+    max-width: $tab-p
+    margin: 0 auto
+
+  +breakpoint($tab-p-tab-l)
+    max-width: $tab-l
+    margin: 0 auto
+
+  +breakpoint($tab-l-desk)
+    max-width: $desk
+    //max-width: $tab-l + 20px
+    margin: 0 auto
+
+  +breakpoint($desktop)
+    max-width: ($desk)
+    margin: 0 auto
+
+  +breakpoint($print-media)
+    max-width: 900px
+    margin: 0 auto
+
+
+@mixin content-area-padding($type: both)
+  @if $type == left
+    padding-left: 10px
+    margin-left: 10px
+    +breakpoint($tablet-portrait)
+      padding-left: 20px
+      margin-left: 10px
+
+  @if $type == right
+    padding-right: 10px
+    margin-right: 10px
+    +breakpoint($tablet-portrait)
+      padding-right: 20px
+      margin-right: 10px
+      
+  @if $type == both
+    padding: 10px
+    margin: 0 10px
+    +breakpoint($tablet-portrait)
+      padding: 10px 20px
+      margin: 0 10px
+    +breakpoint($desktop)
+      padding: 20px 20px 0px
+      margin: 0

data/lib/stylesheets/base_utilities/_tooltip.sass

@@ -0,0 +1,48 @@
+@mixin hui_tooltip($content: attr(data-tooltip), $direction: top) 
+  position: relative
+  &:before, &:after 
+    display: none
+    z-index: 98
+  
+  &:hover 
+    &:after  // for text bubble
+      content: $content
+      display: block
+      position: absolute
+      height: 12px 
+      // (makes total height including padding 22px)
+      padding: 6px
+      font-size: 12px
+      white-space: nowrap
+      color: #fff
+      @include text-shadow(1px 1px #000)
+      background-color: #222
+    
+    @if ($direction == 'top')
+      &:before 
+        @include triangle(down, 6px, #222)
+        top: -6px 
+        margin-top: 0
+        left: 47%
+      
+      &:after 
+        top: -28px
+        left: 47% 
+        margin-left: -20px
+      
+    
+    @else if ($direction == 'bottom')
+      &:before 
+        @include triangle(up, 6px, #222)
+        top: auto 
+        margin-top: 0
+        bottom: -6px
+        left: 47%
+      
+      &:after 
+        bottom: -28px
+        left: 47% 
+        margin-left: -20px
+      
+    
+  

data/lib/stylesheets/base_utilities/_typography.sass

@@ -0,0 +1,113 @@
+//**************************************
+// Typography
+
+$base-font-size: 16px
+$base-line-height: 24px
+$rhythm-unit: 'rem'
+$rem-with-px-fallback: true
+
+$sans-serif-small: Arial, sans-serif
+$sans-serif-large: Verdana, Geneva, 'DejaVu Sans', Arial, Helvetica, sans-serif
+$serif-small: Garamond, Perpetua, 'Times New Roman', serif
+$serif-large: Georgia, Baskerville, Palatino, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif
+$mono: Consolas, Monaco, 'Courier New', Courier, monospace, sans-serif
+
+//  Custom Font Fallbacks
+$primary-sans: "Arial", sans-serif
+$primary-serif: "Times New Roman", serif
+$secondary-font: "Impact", $primary-sans
+$icon-font: "FontAwesome"
+
+
+@mixin font-smoothing($value: antialiased)
+  @if $value == antialiased
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
+  @if $value == subpixel
+    -webkit-font-smoothing: subpixel-antialiased
+    -moz-osx-font-smoothing: auto
+
+@mixin primary-font
+  font-family: $sans-serif-small
+  
+@mixin secondary-font
+  font-family: $secondary-font
+
+@mixin icon-font
+  font-family: $icon-font
+
+@mixin font-awesome
+  font-family: $font-awesome
+
+@mixin thick
+  font-weight: bold
+
+@mixin thin
+  font-weight: normal
+
+@mixin italic
+  font-style: italic
+
+@mixin caps
+  text-transform: uppercase
+
+@mixin link($link-color: $link, $link-hover: $link-hover, $underline: no)
+  text-decoration: none
+  &:link,
+  &:visited
+    text-decoration: none
+    color: $link-color
+  @if $underline == no
+    //&.active,
+    &:hover,
+    &:focus
+      color: $link-hover
+  @if $underline == yes
+    //&.active,
+    &:hover,
+    &:focus
+      text-decoration: underline
+      color: $link-hover
+
+
+@mixin link-inherit-color-hover
+  a:hover,
+  a:focus
+    color: inherit
+
+@mixin link-inherit-color($hover: hover)
+  a,
+  a:link,
+  a:visited
+    color: inherit
+  @if $hover == hover
+    &:hover
+      +link-inherit-color-hover
+
+// Blueprint theme - variables are in order of how likely they are to be overridden
+@mixin font-size($size: 22px, $lh: 1.3)
+  @if unit($lh) == 'px'
+    $lh: $lh / $base-line-height
+  +adjust-font-size-to($size, $lh)
+  
+
+@mixin text-style($size: 22px, $color: $text-primary, $link-color: inherit, $active-color: inherit, $type: null, $underline: no, $lh: 1.3)
+  @if unit($lh) == 'px'
+    $lh: $lh / $base-line-height
+  +adjust-font-size-to($size, $lh)
+  @if $type == link
+    a
+      +link($link-color, $active-color, $underline)
+  @else
+    color: $color
+
+%offscreen
+  position: absolute
+  left: -1000em
+
+
+@mixin truncate-text($overflow: ellipsis)
+  overflow: hidden
+  white-space: nowrap
+  text-overflow: $overflow // values are: clip, ellipsis, or a string
+

data/lib/stylesheets/base_utilities/_z-index.scss

@@ -0,0 +1,15 @@
+$zindex: (
+  modal: 9000, 
+  overlay: 8000, 
+  dropdown: 7000, 
+  adminnav: 5000, 
+  header: 4000, 
+  header-contents: 4100, 
+  content: 3000, 
+  content-above: 3100, 
+  footer: 2000
+  );
+
+// How to use:
+//.example-header
+//  z-index: map-get($zindex, header)

data/lib/stylesheets/plugins/layouts/_panels_admin.sass

@@ -0,0 +1,172 @@
+// CSS for modal window 
+#classy-panel-styles-pane-form,
+#panels-edit-style-settings-form 
+  .form-type-select,
+    width: 100%
+  .form-item
+    margin-bottom: 5px
+    float: left
+    clear: both
+    width: 100%
+
+  .form-item label 
+    width: 20%
+    float: left
+    clear: both
+    font-size: 15px
+    text-align: right
+    color: #007FBF
+    padding: 0
+    margin: 5px 2% 2px 0
+    font-weight: bold
+    line-height: 1.1
+
+  input.form-autocomplete,
+  input.form-text,
+  input.form-file,
+  textarea.form-textarea, 
+  select.form-select 
+    padding: 0 5px
+    border: 1px solid #DDD
+    background-color: #FFF
+    background-position: 99% 50%
+    color: #333
+    font-size: 14px
+    margin: 0
+    width: 75%
+    clear: right
+
+  .grippie
+    max-width: 75%
+    float: left
+    margin-left: 22%
+    width: 100%
+    margin-bottom: 10px
+
+  .description
+    float: right
+    clear: right
+    text-align: left
+    padding: 0
+    margin: 7px 2% 15px 0
+    font-weight: normal
+    line-height: 1.1
+    width: 76%
+    color: #555
+    font-size: 13px
+
+////////////////////////////////////
+// Styles for admin interface
+
+.panels-dnd 
+  .panel-pane
+    width: 100% // set default width to 100%
+
+#panels-dnd-main 
+  // ****************************
+  // ****  CTOOLS 
+  div.panel-region .pane-add-link
+    margin: 0
+    a.ctools-dropdown-image-link
+      background: url("../images/gear.png")
+      background-size: contain
+      width: 25px
+      height: 25px
+  .ctools-dropdown .ctools-dropdown-container ul
+    line-height: 1.3
+  .changed .grabber,
+  .ajax-changed .grabber
+    @extend %changed !optional
+  .hidden .grabber
+    @extend %disabled !optional
+  // ****************************
+  // ****  CLEARFIX  
+  .panel-region,  
+  .container-inner,
+  .column-content-region
+    &:after
+      content: "."
+      font-size: 0
+      clear: both 
+  // ****************************
+  // ****  PANEL DISPLAY
+  .panel-panel .inside
+    +clearfix
+
+  .panel-display
+    @include background-grid
+    padding-right: 1% 
+    +clearfix
+    // to compensate for the offset grid bg colors
+  .container-inner.grid-12
+    float: left
+    width: 100%
+
+  // ****************************
+  // ****  PANEL REGION
+  .panel-panel .inside
+    +clearfix
+    background: #EBEBEB
+    border: 1px dashed #ddd
+    margin: 0 0 5px 0
+    padding: 6px 0
+
+  .panel-panel .panel-region
+    +clearfix
+    background: white
+    padding: 2px
+    overflow: visible
+    float: left
+    width: 100%
+    line-height: 0
+  
+    h2.label
+      line-height: 1.5
+      font-size: 1.3em
+      color: black
+    .panel-pane
+      line-height: 1.2
+      //max-width: 98%
+      //margin: 1% !important
+    .panel-portlet.changed
+      width: 100%
+  // ****************************
+  // ****  PANEL PANE    
+  .panel-pane
+    +box-sizing(border-box)
+    padding: 0
+    margin: 0
+    position: relative
+    //float: none !important
+    .pane-content
+      margin: 0 10px
+      position: relative
+
+
+
+///////////////////////////////////
+// IPE
+///////////////////////////////////
+$ipe-color: #FC8F05 
+.panels-ipe-editing .panels-ipe-region 

+  border: $ipe-color dotted 2px
+
+div.panels-ipe-placeholder 
+  background: none
+  border: none
+  margin-top: 2px
+  h3  

+    font-size: 20px   

+    margin: 0.154em 0

+    color: $ipe-color
+
+div.panels-ipe-newblock 
+  +box-shadow(0)
+
+.panels-ipe-linkbar.links--inline li 
+  margin-right: 0em
+
+
+div.panels-ipe-draghandle,
+div.panels-ipe-nodraghandle 
+  padding: 4px 7px

data/lib/stylesheets/plugins/layouts/_panels_global.sass

@@ -0,0 +1,42 @@
+@mixin panel-defaults
+  $breakpoint-no-query-fallbacks: '.lt-ie9' !global
+  @include add-gutter(12px)
+  @include add-gutter-style('fixed')
+  padding: 0
+  position: relative
+  +page-max-width 
+  #panels-dnd-main &
+    overflow: visible
+  
+  .panel-panel.panel-col-top
+    margin-bottom: 0
+    +breakpoint($mobile-device)
+      //height: 50px  // this doesnt work on articles/chevelle
+
+  .panel-col-top,
+  .panel-col-middle,
+  .panel-col-bottom  
+    float: left
+    clear: both
+
+  .panel-col-middle,
+  .panel-col-middle-bottom
+    float: left
+    clear: both
+    .panel-pane 
+      margin-bottom: 15px
+
+    .panel-pane.float-none  
+      float: none
+      
+  .inside,    
+  .indent
+    +content-area-padding
+    +clearfix
+
+  .panel-panel
+    position: relative
+    float: left
+    clear: left
+    width: 100%
+

data/lib/stylesheets/plugins/layouts/armstrong/armstrong.sass

@@ -0,0 +1,69 @@
+@import "../../../base_utilities"
+@import "../panels_admin"
+@import "../panels_global"
+
+
+.panel-display
+  +panel-defaults
+
+  [class*=content-row]
+    clear: left
+  ////////////////////////////////////////////
+  // MOBILE Panel Panel
+  ////////////////////////////////////////////
+  +breakpoint($max-tab-p)
+    max-width: 550px
+    margin: 0 auto
+    .panel-panel
+      @include add-grid(4)
+      //@include grid-background-4
+    
+    .panel-region-top,
+    .panel-region-content-bottom,
+    .panel-region-content,
+    .panel-region-sidebar
+      +grid-span(4, 1)
+      clear: left
+  ////////////////////////////////////////////
+  // TABLET
+  ////////////////////////////////////////////
+  +breakpoint($tab-p-desk)
+    .panel-panel
+      @include add-grid(8)
+      //@include grid-background-8
+
+    .panel-region-top,
+    .panel-region-content-bottom
+      +grid-span(8, 1)
+      clear: left
+    //banner ad
+    .panel-region-content
+      +grid-span(4, 1)
+      clear: left
+    
+    .panel-region-sidebar
+      +grid-span(4, 5)
+      
+
+  ////////////////////////////////////////////
+  // DESKTOP
+  ////////////////////////////////////////////
+  +breakpoint($desktop)
+    .panel-panel
+      //@include grid-background-12
+      @include add-grid(12)
+      //@include layout($grid, $gutter, $output-style)
+
+    .panel-region-top,
+    .panel-region-content-bottom
+      +grid-span(12, 1)
+      clear: left
+
+    .panel-region-content
+      +grid-span(8, 1)
+      clear: left
+
+    
+    .panel-region-sidebar
+      +grid-span(4, 9)
+

data/lib/stylesheets/plugins/layouts/cooper/cooper.sass

@@ -0,0 +1,11 @@
+@import "../../../base_utilities"
+@import "../panels_admin"
+@import "../panels_global"
+
+
+#page .cooper
+  .panel-pane
+    width: auto
+    clear: none
+    margin: 0
+