@charset "utf-8";
@import 'normalize';
@import 'compass';
@import 'variables';
@import 'syntax';
@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; 
  -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;
}

@mixin embossed-bg {
  @include background(
    linear-gradient(top,
                    rgba(#000, 0.2),
                    rgba(#000, 0) 8px),
    linear-gradient(bottom,
                    rgba(#000, 0.2),
                    rgba(#000, 0) 8px),
    linear-gradient(top,
                    rgba($nav-embossed-border-top, 1),
                    rgba($nav-embossed-border-top, 0) 1.5px),
    linear-gradient(bottom,
                    rgba($nav-embossed-border-bottom, 1),
                    rgba($nav-embossed-border-bottom, 0) 1.5px),
    $nav-subitem-bg
  );
}

.tocify-wrapper {
  @include transition(left ease-in-out 0.3s);
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  z-index: 30;
  top: 60px;
  left: 0;
  bottom: 0;
  width: $nav-width;
  background-color: $nav-bg;
  font-size: 13px;
  letter-spacing: 1px;
  z-index: 5000; 
  padding-bottom: 30px; 

  // 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;
  }

  &>.search {
    position: relative;

    input {
      background: $nav-bg;
      border-width: 0 0 1px 0;
      border-color: $search-box-border-color;
      padding: 6px 0 6px 20px;
      @include box-sizing(border-box);
      margin: $nav-v-padding $nav-padding;
      width: $nav-width - 30;
      outline: none;
      color: $nav-text;
      border-radius: 0; /* ios has a default border radius */
    }

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

  img+.tocify {
    margin-top: $logo-margin;
  }

  .search-results {
    margin-top: 10px; 
    @include box-sizing(border-box);
    height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    @include transition-property(height margin);
    @include transition-duration(180ms);
    @include transition-timing-function(ease-in-out);
    &.visible {
      height: 30%;
      margin-bottom: 1em;
    }

    @include embossed-bg;

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

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

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .tocify-item>a, .toc-footer li {
    padding: 0 $nav-padding 0 $nav-padding;
    display: block;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  // For truncated TOC entries, show additional text on hover
  .tocify-item>a:hover, .toc-footer li:hover {
    text-overflow: inherit;
    overflow-x: visible;
  }

  // Change text color on hover
  .tocify-hover {
    color: $nav-hover-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: 28px;
  }

  li {
    color: $nav-text;
    @include transition-property('background');
    @include transition-timing-function('linear');
    @include transition-duration(230ms);
  }

  // This is the currently selected ToC entry
  .tocify-focus {
    @include box-shadow(0px 0px 0px $nav-active-shadow); 
    background-color: $nav-active-bg;
    color: $nav-active-text;
  }

  // Subheaders are the submenus that slide open
  // in the table of contents.
  .tocify-subheader {
    .tocify-item>a {
		  // Styling here for a level 2 nesting. For example -> 
		  padding-left: $nav-padding + $nav-indent * 1.5; 
		  font-size: 12px;
	}
	display: none; // tocify will override this when needed
	background-color: $nav-subitem-bg;
	font-weight: 500;
	.tocify-subheader {
		display: none; // tocify will override this when needed
		background-color: $nav-subitem-bg;
		font-weight: 500;
		.tocify-item>a {
		  // Styling here for a level 2 nesting. For example -> 
		  padding-left: $nav-padding + $nav-indent * 3;
		  font-size: 12px;
		}
	}
  }

  .toc-footer {
    //padding: 1em 0;
    //margin-top: 1em;
    //border-top: 1px solid $nav-footer-border-color;

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

    a:hover {
      //text-decoration: underline;
    }

    li {
      font-size: 12px; 
      line-height: 1.7;
      text-decoration: none;
    }
  }

  // Section headers
  .tocify-item[data-unique="getting-started"], .tocify-item[data-unique|="configuration"], .tocify-item[data-unique|="usage"], .tocify-item[data-unique|="faq"] {
	text-transform: uppercase;
	margin-top: 1em;
	margin-bottom: 0.5em;
	border-bottom: 1px solid $nav-footer-border-color;
	font-weight: bold;
  }

  .tocify-item[data-unique="getting-started"]:hover, .tocify-item[data-unique|="configuration"]:hover, .tocify-item[data-unique|="usage"]:hover, .tocify-item[data-unique|="faq"]:hover {
	color: $nav-text;
  }

 .tocify-item[data-unique="additional-reference"], .tocify-item[data-unique="deprecations"] {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: 1px dashed $nav-footer-border-color;
	font-weight: bold;
  }
}


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

.page-wrapper {
  margin-left: $nav-width;
  position: relative;
  z-index: 10;
  background-color: $main-bg;
  min-height: 100%;
  margin-top: 60px; 
  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;
    border-bottom: 5px solid $lang-select-active-bg;
  }
}

.lang-selector {
  background-color: $lang-select-bg;
  width: 100%;
  font-weight: bold;
  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;
    }

    &.active {
      background-color: $lang-select-active-bg;
      color: $lang-select-active-text;
    }
  }

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

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

.customTOCSectionHeading {
    font-size: 40px;
    border-bottom: 0px;
}

h1.section-header, h2.section-header, h3.section-header, h4.section-header {
    padding-top: 30px !important;
}

.content {
  // to place content above the dark box
  position: relative;
  z-index: 30;
  margin-bottom: 0 !important;
  padding-bottom: 30px;

  a {
    color: $content-link-text;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
  }

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

  &: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;
    @include box-sizing(border-box);
    display: block;
    @include text-shadow($main-embossed-text-shadow);
    @extend %left-col;
  }

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

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

  IMG.table {
    display: block;
    margin-left: auto;
    margin-right: auto

  }

  TD.quickstart {
    text-align: center
    
  }
    
  .faq {
    @extend %header-font;
    font-size: 20px;
    //margin-top: 4em;
    margin-bottom: 0;
    //border-top: 1px solid #ccc;
    padding-top: 3.6em;
    padding-bottom: 1.2em;
  }    
    

  h1 {
    @extend %header-font;
    font-size: 30px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
    margin-bottom: $h1-margin-bottom;
    margin-top: 2em;
  }

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

  h2 {
    @extend %header-font;
    font-size: 20px;
    //margin-top: 4em;
    margin-bottom: 0;
    //border-top: 1px solid #ccc;
    padding-top: 1.2em;
    padding-bottom: 1.2em;
  }

  // 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: 16px;
	padding-top: 1.2em;
  }

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

  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: 1px solid #ccc;
      vertical-align: bottom;
    }

    td {
      padding-top: 10px;
      padding-bottom: 10px;
      padding-right: 30px;
      padding-left: 30px
    }

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

    tr:nth-child(odd)>td {
      background-color: $table-odd-bg; 
    }

    tr:nth-child(even)>td {
      background-color: $table-even-bg;
    }
  }

  dt {
    font-weight: bold;
  }

  dd {
    margin-left: 15px;
  }

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

  img {
    max-width: 100%;
  }

  code {
    background-color: #e9eaf1; //rgba(0,0,0,0.05);
    padding: 3px;
    border-radius: 3px;
    @extend %break-words;
    @extend %code-font;
  }

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

  aside {
    padding-top: 1em;
    padding-bottom: 1em;
    @include text-shadow(0 0px 0 lighten($aside-notice-bg, 15%));  
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    background: $aside-notice-bg;
    line-height: 1.6;
    margin-left: 20px;
    margin-right: 43%;
    border-left: 4px solid $aside-notice-border;

    &.warning {
      background-color: $aside-warning-bg;
      border-color: $aside-warning-border;
      @include text-shadow(0 0px 0 lighten($aside-warning-bg, 15%)); 
    }

    &.success {
      background-color: $aside-success-bg;
      border-color: $aside-success-border;
      @include text-shadow(0 0px 0 lighten($aside-success-bg, 15%));   
    }
  }

  aside:before {
    vertical-align: middle;
    padding-right: 0.5em;
    font-size: 14px;
  }

  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: 4px;
    border: 1px solid #F7E633;
    @include text-shadow(1px 1px 0 #666);
    @include background(linear-gradient(bottom right, #F7E633 0%, #F1D32F 100%));
  }

}

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

.content {
  pre, blockquote {
    background-color: $code-bg;
    color: #fff;

    padding: 2em $main-padding;
    margin-left: $main-padding;
    margin-right: $main-padding;
    width: 80%;

    @include box-sizing(border-box);
    @include text-shadow(0px 0px 0px rgba(0,0,0,0.4));  

    @extend %right-col;

    &>p { margin: 0; }

    a {
      color: #fff;
      text-decoration: none;
      border-bottom: dashed 1px #ccc;
    }
  }

  pre {
    @extend %code-font;
    padding: 5px $main-padding; //2em $main-padding;
  }

  blockquote {
    padding: 34px $main-padding 5px $main-padding; //2em $main-padding;

    &>p {
      background-color: $code-annotation-bg;
      border-radius: 5px;
      padding: $code-annotation-padding;
      color: #ccc;
      border-top: 1px solid #404040;
      border-bottom: 1px solid #404040;
      font-weight: 300;
      //font-size: 15px;
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
// BANNER STYLES
////////////////////////////////////////////////////////////////////////////////
// This is the banner that appears across the top of the page

.navbar-container .navbar {
  position: fixed !important;
  width: 100% !important;
  height: 60px;
  background: $banner-bg;
  left: 0;
  top: 0;
  right: 0;
  z-index: 5000;
}

.navbar {
  width: 100%;
}

nav {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

nav .logo {
  height: 50px;
  width: 542px;
  margin: 0 auto;
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  color: transparent;
  text-shadow: none;
  position: relative;
}

@media (min-width: 48em) {
    nav .logo {
      display: inline-block;
      margin: 6px 0 0 15px;
    }
}

nav .logo-container {
  width: 100%;
}

@media (min-width: 48em) {
    nav .logo-container {
      width: auto;
    }
}

nav ul {
  padding: 0;
  margin-top: 15px;
  display: none;
}

@media (min-width: 48em) {
    nav ul {
      display: block;
    }
}

nav ul li {
  list-style: none;
  float: left;
}

nav li {
  list-style: none !important;
  color: #FFF;
  padding: 10px;
  font-size: 11px;
  letter-spacing: 1px;
  font-family: 'proxima_nova_reg';
  font-weight: normal;
  text-transform: uppercase;
  text-decoration: none;
}

nav li {
  list-style: none !important;
  color: #FFF;
  padding: 10px;
  text-decoration: none;
}

a {
  background-color: transparent;
  text-decoration: none;
}

nav ul li a {
  color: #fff;
  padding: 10px;
  text-decoration: none;
}

nav li > a:only-child:after {
  content: '';
}

@media (min-width: 48em) {
    nav {
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
}

// button to show navigation on mobile devices
#nav-button {
  padding: 17px 15px;
  display: none;
  position: fixed;
  top: 0;
  left: 100% !important;
  margin-left: -60px;
  z-index: 5000;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  opacity: 0.7;
  line-height: 16px;
  -moz-transition: left 0.3s ease-in-out;
  -o-transition: left 0.3s ease-in-out;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}

#nav-button img {
  height: 16px;
  vertical-align: bottom;
}

#nav-button:hover {
  opacity: 1;
}

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

@media (max-width: $tablet-width) {
  .tocify-wrapper {
    left: -$nav-width;

    &.open {
      left: 0;
    }
  }

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

  #nav-button {
    display: block;
  }

  .tocify-wrapper .tocify-item > a {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
  }
}

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

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

  .tocify-wrapper .lang-selector {
    display: block;
  }

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

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

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

