body {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
}

#wrapper,
.hybrid {
  width: $site_width;
  margin: auto;
  max-width: 100%;
}

.inner.hybrid {
  box-sizing: border-box
}

.hybrid {
  width: $site-width
}

html {
  min-height: 100%; ///* make sure it is at least as tall as the viewport */
  position: relative;
}

body {
  height: 100%; ///* force the BODY element to match the height of the HTML element */
}

#main > .inner {
  padding-top: $padding;
  padding-bottom: $padding
}

///* centered layout */
@if $layout=='centered' or $layout=='ll-sb' or $layout=='rr-sb' or $layout=='single' {
  .layout-centered,
  .layout-ll-sb,
  .layout-rr-sb {
    #left {
      float: left;
      width: 75%;
      width: ($main_width+$left_sidebar_width)+0%;
    }
    #main {
      float: right;
      width: 75%;
      width: $main_width/($main_width+$left_sidebar_width)*100%;
    }
    #sb1 {
      float: left;
      width: 25%;
      width: $left_sidebar_width/($main_width+$left_sidebar_width)*100%;

    }
    #sb2 {
      float: left;
      width: 25%;
      width: 100%  - ($main_width+$left_sidebar_width);

    }
  }
}
@if $layout=='single' {
  .layout-single{
    #main {
      margin: auto;
      width: $main_width*1%;
    }
  }
}
@if $layout=='ll-sb' {
  .layout-ll-sb {
    #sb2 {
      float: left
    }
    #left {
      float: right
    }
  }
}

@if $layout=='rr-sb' {
  .layout-rr-sb {
    #sb1 {
      float: right
    }
    #left, #main {
      float: left
    }
    #sb2 {
      float: right
    }
  }
}

@if $layout=='l-sb' {

  //* Left sidebar */
  .layout-l-sb {
    #sb2 {
      float: left;
      display: none;
    }
    #left {
      width: 100%
    }
    #main {
      float: right;
      overflow: hidden;
      width: $main_width+0%;
    }
    #sb1 {
      float: left;
      width: 100%-$main_width;
    }
  }
}

@if $layout=='r-sb' {

  //* Right sidebar */
  .layout-r-sb {
    #left {
      float: left;
      width: 100%
    }
    #main {
      float: left;
      width: $main_width+0%;
    }
    #sb1 {
      float: right;
      width: 100%-$main_width;
    }
    #sb2 {
      float: left;
      display: none
    }
  }
}

//for gradients
//#sb1, #sb2 {
//  background: inherit;
//}
@if ($sb_widget_cards == 1) {

  //#sb1 > .inner,
  //#sb2 > .inner,
  //#sb-page-rsb > .inner,
  //#sb-page-lsb > .inner,
  //#sb-woo > .inner
  .sb-container > .inner {
    padding-top: $padding/2;
    padding-bottom: $padding/2;
  }
} @else {
  //#sb1 > .inner,
  //#sb2 > .inner,
  //#sb-page-rsb > .inner,
  //#sb-page-lsb > .inner,
  //#sb-woo > .inner
  //
  .sb-container > .inner {
    //background: inherit;
    padding-top: $padding;
    padding-bottom: $padding;

  }
}

//Fix for sticky sidebar background
#left, #sticky-sb1-sticky-wrapper, #sticky-sb1 {
  background: inherit;
}

//
//#ns1,
//#ns2 {
//  width: 50%;
//  float: left;
//}
//
//#ns1 > .inner,
//#ns2 > .inner {
//  padding-top: 23px;
//  padding-bottom: 20px
//}
//
//#ns1 {
//
//  margin: 0 0 0 -40px;
//  padding: 0 0 0 40px;
//
//}
//
//#ns2 {
//
//  margin: 0 -40px 0 0;
//  padding: 0 40px 0 0;
//
//}

@if $layout=='centered' or $layout=='ll-sb' or $layout=='rr-sb' {

  .layout-centered,
  .layout-rr-sb,
  .layout-ll-sb {
    #sb1 {
      background: $sb1-bg; //removed important for gradients
    }
    #sb2 {
      background: $sb2-bg;

    }

  }
}

#sb1 {
  background: $sb1-bg;
}

.layout-centered.container-wide {
  #sb1, #wrapper, #sb2 {
    //@todo not represented correctly
    background: rgba($sb1-bg, 1);
  }
}

//end

#site-footer-container {
  padding: $padding 0;
}

.fc {
  width: 100%/$footer-columns;
  float: left
}

//* delete later */
body {
  background: $body-bg;
}

#wrapper {
  background: $wrapper-bg;
}

#content {
  background: $content-bg;
}

#main {
  background: $main-bg;
}

#site-header-container {
  border-bottom: solid 1px $border-color-dark
}

.layout-r-sb {

  #sb1 > .inner {
    border-left: solid 1px $border-color-dark
  }
}

.layout-l-sb {
  #sb1 > .inner {
    border-right: solid 1px $border-color-dark
  }
}

@if $layout=='ll-sb' or $layout=='rr-sb' {

  .layout-ll-sb,
  .layout-rr-sb {
    #sb1 > .inner {
      border: solid 1px $border-color-dark;
      border-width: 0 1px;
    }
  }
}

@if $layout=='centered' or $layout=='ll-sb' or $layout=='rr-sb' {

  .layout-centered {
    #sb1 > .inner {
      border-right: solid 1px $border-color-dark
    }
    #sb2 > .inner {
      border-left: solid 1px $border-color-dark
    }
  }
}

#site-footer-container {

  background: $footer-bg;
  color: rgba($footer-color, .7)
}

//#site-footer-container {
//  a {
//    color: rgba($footer-color, 1)
//  }
//  a:hover {
//    color: $primary
//  }
//}

.container-wide {
  #wrapper {
    width: 100%
  }
}

@media only screen and (min-width: 1200px) {
  .container-boxed {
    #wrapper {
      margin: 20px auto;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      //https://forums.swiftthemes.com/t/double-scroll-bar-on-desktop-bug/111/3
      overflow: auto;
    }
  }
}

@media only screen and (max-width: 1200px) {
  #site-footer-container {
    padding: 20px 0
  }
  #main > .inner {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}