@charset "utf-8";

@import url("//fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("//fonts.googleapis.com/css?family=Raleway:300,500,700");

@import 'normalize';
@import 'variables'; //revert to tripit defaults
@import 'variables2'; // tradegecko overrides
@import 'icon-font';

/*
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.
*/

////////////////////////////////////////////////////////////////////////////////
// GENERAL STUFF
////////////////////////////////////////////////////////////////////////////////

html, body {
  color: $main-text;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @extend %default-font;
  background-color: $main-bg;
  height: 100%;
  -webkit-text-size-adjust: none; /* Never autoresize text */
}

////////////////////////////////////////////////////////////////////////////////
// TABLE OF CONTENTS
////////////////////////////////////////////////////////////////////////////////

#toc > ul > li > a > span {
  float: right;
  background-color: #2484FF;
  border-radius: 40px;
  width: 20px;
}

.toc-wrapper {
  transition: left 0.3s ease-in-out;

  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  bottom: 0;
  width: $nav-width;
  background-color: $nav-bg;
  padding: $nav-padding;
  box-sizing: border-box;

  @extend %nav-font;

  // language selector for mobile devices
  .lang-selector {
    display: none;
    a {
      padding-top: 0.5em;
      padding-bottom: 0.5em;
    }
  }

  // This is the logo at the top of the ToC
  &>img {
    display: block;
    max-width: 100%;
  }

  &>.search {
    position: relative;
    margin: $nav-padding 0;

    input {
      background: $base-grey-5;
      padding: $nav-padding 0 $nav-padding 30px;
      box-sizing: border-box;
      width: $nav-width - ($nav-padding * 2);
      border: 0;
      outline: none;
      border-radius: $border-radius; /* ios has a default border radius */
      color: $nav-text;
    }

    &:before {
      position: absolute;
      top: $nav-padding + 3px;
      left: $nav-padding;
      color: $nav-text;
      @extend %icon-search;
    }
  }

  .logo {
    margin: auto;
    margin-bottom: $logo-margin;
  }

  .search-results {
    margin-top: 0;
    box-sizing: border-box;
    height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition-property: height, margin;
    transition-duration: 180ms;
    transition-timing-function: ease-in-out;
    background: $nav-subitem-bg;
    &.visible {
      height: 30%;
      margin-bottom: 1em;
    }

    li {
      margin: 1em $nav-padding;
    }

    a {
      color: $nav-text;
      text-decoration: none;

      &:hover {
        text-decoration: none;
        color: $main-text;
      }
    }
  }

  // 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.
  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 36px;
  }

  li {
    color: $nav-text;
    transition-property: background;
    transition-timing-function: linear;
    transition-duration: 200ms;
    a {
      color: $nav-text;
      text-decoration: none;
    }
  }

  // This is the currently selected ToC entry
  .toc-link.active {
    background-color: $nav-active-bg;
    color: $nav-active-parent-text;
    border-radius: $border-radius;
  }

  // this is parent links of the currently selected ToC entry
  .toc-link.active-parent {
    background-color: $nav-active-parent-bg;
    color: $nav-active-parent-text;
    border-radius: $border-radius;
  }

  .toc-list-h2 {
    display: none;
    background-color: $nav-subitem-bg;
    font-weight: 500;
  }

  .toc-h2 {
    padding-left: $nav-padding + $nav-indent;
    font-size: 12px;
  }

  .toc-footer {
    padding: $nav-padding 0;
    margin-top: 1em;
    border-top: $dotted-border;

    li,a {
      color: $nav-footer-text;
      text-decoration: none;
    }

    a:hover {
      text-decoration: none;
    }

    li {
      @extend %small-font;
      text-decoration: none;
    }
  }
}

.toc-link, .toc-footer li {
  padding: 0 $nav-padding 0 $nav-padding;
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  color: #fff;
  transition-property: background;
  transition-timing-function: linear;
  transition-duration: 130ms;
}

// button to show navigation on mobile devices
#nav-button {
  span {
    display: block;
    margin-top: $nav-v-padding;
    padding: $nav-padding;
    background-color: $tg-slate;
    border-radius: 0 3px 3px 0;
  }
  padding: 0 1.5em 5em 0; // increase touch size area
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  color: $tg-slate;
  text-decoration: none;
  font-weight: bold;
  line-height: 16px;
  img {
    height: 16px;
    vertical-align: bottom;
  }

  transition: left 0.3s ease-in-out;

  &.open {left: $nav-width}
}


////////////////////////////////////////////////////////////////////////////////
// PAGE LAYOUT AND CODE SAMPLE BACKGROUND
////////////////////////////////////////////////////////////////////////////////

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

  padding-bottom: 1px; // prevent margin overflow

  // The dark box is what gives the code samples their dark background.
  // It sits essentially under the actual content block, which has a
  // transparent background.
  // I know, it's hackish, but it's the simplist way to make the left
  // half of the content always this background color.
  .dark-box {
    width: $examples-width;
    background-color: $examples-bg;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .lang-selector {
    position: fixed;
    z-index: 50;
    padding: 1em $main-padding;
    background-color: $code-annotation-bg;
  }
}

.lang-selector {
  background-color: $code-annotation-bg;
  border-radius: $border-radius;
  width: 100%;

  a {
    display: block;
    float:left;
    color: $lang-select-text;
    text-decoration: none;
    padding: 0 10px;
    line-height: 30px;
    outline: 0;

    &:active, &:focus {
      background-color: $lang-select-pressed-bg;
      color: $lang-select-pressed-text;
      border-radius: $border-radius;
    }

    &.active {
      background-color: $lang-select-active-bg;
      color: $lang-select-active-text;
      border-radius: $border-radius;
      font-weight: 600;
    }
  }

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

////////////////////////////////////////////////////////////////////////////////
// CONTENT STYLES
////////////////////////////////////////////////////////////////////////////////
// This is all the stuff with the light background in the left half of the page

.content {
  // fixes webkit rendering bug for some: see #538
  -webkit-transform: translateZ(0);
  // to place content above the dark box
  position: relative;
  z-index: 30;

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

  &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
    margin-right: $examples-width;
    padding: 0 $main-padding;
    box-sizing: border-box;
    display: block;

    @extend %left-col;
  }

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

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

  h1 {
    @extend %header-font;
    font-size: 25px;
    padding-top: 1.0em;
    padding-bottom: 0.5em;
    margin-bottom: $h1-margin-bottom;
    margin-top: 5em;
  }

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

  h2 {
    @extend %header-font;
    font-size: 24px;
    margin-bottom: 0;
    padding-top: 2em;
    padding-bottom: 0.5em;
  }

  // h2s right after h1s should bump right up
  // against the h1s.
  h1 + h2, h1 + div + h2 {
    margin-top: $h1-margin-bottom * -1;
    border-top: none;
  }

  h3, h4, h5, h6 {
    @extend %header-font;
    font-size: 18px;
    margin-top: 2.5em;
    margin-bottom: 0.8em;
  }

  h4, h5, h6 {
    font-size: 10px;
  }

  hr {
    margin: 2em 0;
    border-top: 2px solid $examples-bg;
    border-bottom: 2px solid $main-bg;
  }

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

    th {
      padding: 5px 10px;
      border-bottom: $solid-border;
      vertical-align: bottom;
    }

    td {
      padding: 10px;
    }

    tr:last-child {
      border-bottom: $solid-border;
    }

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

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

  dt {
    font-weight: bold;
  }

  dd {
    margin-left: 15px;
  }

  p, li, dt, dd {
    line-height: 1.8;
    margin-top: 0;
  }

  a {
    font-weight: 700;
    text-decoration: none;
    color: $content-link;
    transition: linear 50ms;
    &:hover {
      color: $content-link-hover;
    }
  }

  img {
    max-width: 100%;
  }

  .screenshot {
    margin: 28px;
    text-align: center;
    margin-right: 50%;
    padding: 30px;
    box-sizing: border-box;
    display: block;
    background-color: $base-grey-10;
  }

  code {
    background-color: rgba($code-bg, .05);
    padding: 3px;
    border-radius: $border-radius;
    @extend %break-words;
    @extend %code-font;
  }

  pre>code {
    background-color: transparent;
    padding: 0;
  }

  aside {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 28px;
    margin-left: 28px;
    width: 47%;
    background: $aside-notice-bg;
    line-height: 1.6;
    border-radius: $border-radius;
    color: $white;
    display: inline-table;

    &.warning {
      background-color: $aside-warning-bg;
    }

    &.success {
      background-color: $aside-success-bg;
    }
  }

  aside:before {
    vertical-align: middle;
    padding-right: 0.2em;
    @extend %base-font
  }

  aside.notice:before {
    @extend %icon-info-sign;
  }

  aside.warning:before {
    @extend %icon-exclamation-sign;
  }

  aside.success:before {
    @extend %icon-ok-sign;
  }

  .search-highlight {
    padding: 2px;
    margin: -2px;
    border-radius: $border-radius;
    background-color: $search-highlight;
  }
}

////////////////////////////////////////////////////////////////////////////////
// CODE SAMPLE STYLES
////////////////////////////////////////////////////////////////////////////////
// This is all the stuff that appears in the right half of the page

.content {
  pre, blockquote {
    background-color: $code-annotation-bg;
    color: $white;

    margin: 0;
    width: $examples-width;

    float:right;
    clear:right;

    box-sizing: border-box;

    @extend %right-col;

    &>p { margin: 0; }

    a {
      color: $white;
      text-decoration: none;
      border-bottom: $solid-border;
    }
  }

  pre {
    @extend %code-font;
    padding-top: 2em;
    padding-bottom: 2em;
    padding: 2em $main-padding;
  }

  blockquote {
    &>p {
      background-color: rgba($code-bg, 0.3);
      padding: $code-annotation-padding 2em;
      color: $base-grey-10;
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
// RESPONSIVE DESIGN
////////////////////////////////////////////////////////////////////////////////
// These are the styles for phones and tablets
// There are also a couple styles disperesed

@media (max-width: $tablet-width) {
  .content {
    padding-top: $main-padding;
  }
  .toc-wrapper {
    left: -$nav-width;

    &.open {
      left: 0;
    }
  }

  .page-wrapper {
    margin-left: 0;
  }

  #nav-button {
    display: block;
  }

  .toc-link {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
  }
}

@media (max-width: $phone-width) {
  .dark-box {
    display: none;
  }

  %left-col {
    margin-right: 0;
  }

  .toc-wrapper .lang-selector {
    display: block;
    margin: $nav-padding 0;
  }

  .page-wrapper .lang-selector {
    display: none;
  }

  %right-col {
    width: auto;
    float: none;
  }

  %right-col + %left-col {
    margin-top: $main-padding;
  }
}

.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs {
  color: #909090;
}

.highlight, .highlight .w {
  background-color: $code-annotation-bg;
}

.private, .deprecated {
  @extend %label-font;
  color: $white;
  background-color: $base-grey-70;
  border-radius: $border-radius;
  padding: 1px $nav-v-padding;
  border-radius: 3px;
}

.faux-toc-link {
  @extend %nav-font;
  padding: 10px;
  line-height: 36px;
  text-decoration: none;
  color: $tg-slate;
}

a[data-title=Resources] {
  font-weight: 100;
  text-transform: uppercase;
  font-size: 0.9em;
  padding-top: 30px;
}

#resources {
  margin-bottom: 0px;
  font-weight: bold;
  & + p {
    display: none;
  }
  & + p + h1 {
    padding-top: 0.6em;
    margin-top: 0px;
    border-top: 0;
  }
}

.content pre.tab-json--inline {
  float: left;
  clear: none;
  background-color: $examples-bg;
  border-radius: $border-radius;
  margin-bottom: 15px;
  margin-left: 28px;
  width: 47%;
  .w {
    background-color: $examples-bg;
  }
  .p {
    color: $white;
  }
  .s2 {
    color: #a6e22e;
  }
  .mi {
    color: #f6574d;
  }
}