_scss/_tablet.scss

@media screen and (min-width: $media-size-tablet-start) {
  footer {
    padding: $whisk-footer-base-padding-tablet;
  }

  #whiskHeader {
    h1 {
      font-size: $header-tablet-h1-font-size;
      font-weight: $header-tablet-h1-font-weight;
      font-style: $header-tablet-h1-font-style;
      line-height: $header-tablet-h1-line-height;
    }
    h5 {
      font-size: $header-tablet-h5-font-size;
      font-weight: $header-tablet-h5-font-weight;
      font-style: $header-tablet-h5-font-style;
      line-height: $header-tablet-h5-line-height;
    }
  }

  // "Turn on" left index in this profile, as we have width to support it
  #whiskIndexedLayout {
    padding-top: $whisk-header-tablet-padding-top;

    // Show the index area
    #whiskIndex {
      display: block;
    }

    // Make room on left for the Index
    #whiskNodes {
      display: table-cell;
      // TODO: make a variable
      padding-left: $index-menu-width + 40px;
    }
  }

  #whiskNodes {
    padding-left: $whisk-nodes-padding-tablet-X;
    padding-right: $whisk-nodes-padding-tablet-X;

    main {
      clear: both;
      display: table;
      background: $color-bg-tablet-main;
      position: relative;

      .content {
        display: table-cell;
        vertical-align: top;
        position: relative;
        width: $main-content-width-tablet;
        padding: $whisk-nodes-main-content-padding-tablet;

        // YYY No top margin needed when content & image-wrapper are horz.
        //margin-top: 0px;
      }

      .image-wrapper {
        // Alter to a 'block' display to get side-by-side layout
        display: block;
        position: relative;

        // Note: we have a border in side-by-side layout, but do not in vertical layout.
        border: $color-bg-tablet-image-wrapper-border;
      }
    }
  }
}