$contentPadding = 10px
$backgroundColor = #f8f8ff
$contentBackground = white
$dividerColor = #ccc
$dividerBorder = 1px solid $dividerColor

body > nav
  background $backgroundColor
  border $dividerBorder

button[data-tab]
  @extend body > nav
  padding 0 $contentPadding
  line-height 2em
  margin-bottom -1px

  &.doc-active
    font-weight bold
    border-bottom-color $contentBackground
    background-color $contentBackground

section.doc-tabbed
  display none !important
  margin $contentPadding
  background-color $contentBackground

  &.doc-active
    display block !important

  > p
  > pre
    float left
    clear left
    margin 10px 0
    line-height 1.3
    width 40%

  > .style-doc-sample
  > .style-doc-highlight
    float right
    clear right
    padding-left 2%
    width 58%

  > h3
  > h4
    clear both


code
  overflow auto !important
  border $dividerBorder !important

pre
  display none

  .show-code &
    display block

.style-doc-highlight
  display none

  &:after
  &:before
    content ''
    display block
    height 1px
    margin $contentPadding
    border none
    background-image linear-gradient(left, #efefef, #ccc 50%, #efefef)

  .show-highlights &
    display block

$contentPadding = 10px
$backgroundColor = #f8f8ff
$contentBackground = white
$dividerColor = #ccc
$dividerBorder = 1px solid $dividerColor

body > nav
  background $backgroundColor
  border $dividerBorder

button[data-tab]
  @extend body > nav
  padding 0 $contentPadding
  line-height 2em
  margin-bottom -1px

  &.doc-active
    font-weight bold
    border-bottom-color $contentBackground
    background-color $contentBackground

section.doc-tabbed
  display none !important
  margin $contentPadding
  background-color $contentBackground

  &.doc-active
    display block !important

  > p
  > pre
    float left
    clear left
    margin 10px 0
    line-height 1.3
    width 40%

  > .style-doc-sample
  > .style-doc-highlight
    float right
    clear right
    padding-left 2%
    width 58%

  > h3
  > h4
    clear both

@media only screen and (max-width: 480px)
  section.doc-tabbed
    > p
    > pre
    > .style-doc-sample
    > .style-doc-highlight
      float none
      width 100%

code
  overflow auto !important
  border $dividerBorder !important

pre
  display none

  .show-code &
    display block

.style-doc-highlight
  display none

  &:after
  &:before
    content ''
    display block
    height 1px
    margin $contentPadding
    border none
    background-image linear-gradient(left, #efefef, #ccc 50%, #efefef)

  .show-highlights &
    display block

Use single column on smaller screen sizes
Use single column on smaller screen sizes