api_docs/source/stylesheets/all.css.scss

@charset "utf-8";
@import 'normalize';
@import 'compass';
@import 'variables';
@import 'syntax';

/*
Copyright 2008-2013 Concur Technologies, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may
not use this file except in compliance with the License. You may obtain
a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations
under the License.
*/

html, body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: $main-text-color;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.page-wrapper {
  margin-left: $nav-width;
  min-width: 700px;
  position: relative;
  z-index: 10;
  background-color: $main-bg;

  padding-bottom: 1px; // prevent margin overflow
  
  .dark-box {
    width: $examples-width;
    background-color: $examples-bg;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }

  #lang-selector {
    position: fixed;
    width: 100%;
    z-index: 50;
    font-weight: bold;
    background-color: $lang-select-bg;
    // @include background-image(linear-gradient(top, #1d82c6, #1864ab));
    border-bottom: 5px solid $examples-bg;
    // box-shadow: 0 10px 5px $code-bg;
    a {
      // background-color: $lang-select-bg;
      display: block;
      float:left;
      color: $lang-select-text;
      text-decoration: none;
      padding: 0 10px;
      // border-right: 1px solid $lang-select-border;
      line-height: 30px;

      &.active {
        background-color: $examples-bg;
        top: 1px;
        z-index: 70;
      }

      &:active {
        background-color: #000;
        border-color: #000;
      }
    }

    &:after {
      content: '';
      clear: both;
      display: block;
    }
  }
}

.content {
  // to place content above the dark box
  position: relative;
  z-index: 30;

  pre, code {
    font-family: Monaco, "Courier New", monospace;
    font-size: 12px;
  }

  code {
    background-color: rgba(0,0,0,0.05);
    padding: 3px;
    border-radius: 3px;
    @include break-words;
  }

  &>h1, &>h2, &>h3, &>p, &>table, &>ul, &>ol {
    margin-right: $examples-width;
  }
  &>h1, &>h2, &>h3, &>p, &>table, &>ul, &>ol {
    padding: 0 $main-padding;
    @include box-sizing(border-box);
    display: block;
    @include embedded-text;
  }

  &>ul, &>ol {
    padding-left: $main-padding + 15px;
  }

  li {

  }

  &>h1, &>h2, &>div { // the div is the tocify hidden div for placeholding stuff
    clear:both;
  }

  table {
    margin-bottom: 1em;
    overflow: auto;
    th,td {
      text-align: left;
      vertical-align: top;
      line-height: 1.6;
    }

    th {
      padding: 5px 10px;
      border-bottom: 1px solid #ccc;
      vertical-align: bottom;
    }

    td {
      padding: 10px;
    }

    tr:last-child {
      border-bottom: 1px solid #ccc;
    }

    tr:nth-child(odd)>td {
      background-color: lighten($main-bg,4.2%);
    }

    tr:nth-child(even)>td {
      background-color: lighten($main-bg,2.4%);
    }
  }

  h1 {
    font-size: 30px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
    margin-top: 2em;
    margin-bottom: 21px;
    border-top: 1px solid #ddd;
    @include background-image(linear-gradient(top, #fff, #f9f9f9));
  }

  h1:first-child, div:first-child + h1 {
    margin-top: 0;
  }

  h2 {
    font-size: 20px;
    margin-top: 4em;
    margin-bottom: 0;
    border-top: 1px solid #ccc;
    padding-top: 1.2em;
    padding-bottom: 1.2em;
    @include background-image(linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0)));
  }

  h1 + h2, h1 + div + h2 {
    margin-top: -21px;
    border-top: none;
  }

  h3 {
    font-size: 12px;
    margin-top: 2.5em;
    margin-bottom: 0.8em;
    text-transform: uppercase;
  }

  h1,h2,h3 {
    font-weight: bold;
  }

  p, li {
    line-height: 1.6;
    margin-top: 0;
  }

  img {
    max-width: 100%;
  }

  pre, blockquote {
    background-color: $code-bg;
    float:right;
    width: $examples-width;
    clear:right;
    @include box-sizing(border-box);
    margin: 0;
    color: #fff;
    @include text-shadow(0px 1px 2px rgba(0,0,0,0.4));
    padding: 2em $main-padding;
    &>p { margin: 0; }
    a {
      color: #fff;
      text-decoration: none;
      border-bottom: dashed 1px #ccc;
    }
  }

  blockquote {
    &>p {
      background-color: $code-annotation-bg;
      border-radius: 5px;
      padding: $code-annotation-padding;
      color: #ccc;
      @include fancy-inset-border-top;
      @include fancy-inset-border-bottom;
    }
  }

}

.tocify {
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: $nav-width;
  background-color: $nav-bg;
  font-size: 13px;
  font-weight: bold;

  &>img {
    background-color: #f29a3c;
    display: block;
    margin-bottom: $logo-margin;
  }
}

.tocify-item>a {
  padding: 0 $nav-padding 0 $nav-padding;
  display:block;
  overflow-x:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  // @include text-shadow(0px 0px 3px rgba(0,0,0,0.7));
}

/* The Table of Contents is composed of multiple nested unordered lists.  These styles remove the default styling of an unordered list because it is ugly. */
.tocify ul, .tocify li {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 28px;
}

.tocify li {
  color: #fff;
  @include transition-property('background');
  @include transition-timing-function('linear');
  @include transition-duration(230ms);
}

.tocify .tocify-focus {
  @include box-shadow(0px 1px 0px #000);
  // @include background-image(linear-gradient(top, #1d82c6, #1864ab));
  // background-color: #1d82c6;
  background-color: $nav-select-bg;
  color: #fff;
}

.tocify-header {
}

.tocify-subheader {
    display: none;
    background-color: $nav-subitem-bg;
    font-weight: 500;
    @include background-image(linear-gradient(top, darken($nav-subitem-bg,2%),$nav-subitem-bg 10%, $nav-subitem-bg 90%, darken($nav-subitem-bg,2%)));
    .tocify-item>a {
      padding-left: $nav-padding + $nav-indent;
      font-size: 12px;
    }
    &>li:first-child {
      @include fancy-inset-border-top;
    }

    &>li:last-child {
      @include fancy-inset-border-bottom;
    }
}