//*******************************************
//
//  EASELJS DOCS
//  - 2.0 skin
//
//  1) IMPORTS
//  2) LIBRARY SPECIFIC COLORS
//  3) RULES
//
//*******************************************



//*******************************************
//
//  IMPORTS
//
//*******************************************
// UTILITIES
@import "utilities/breakpoint.scss";
@import "utilities/clearfix.scss";

// SETTINGS
@import "settings/breakpoint.scss";
@import "settings/color.scss";
@import "settings/fonts.scss";
@import "settings/layout.scss";
@import "settings/path.scss";

// ELEMENTS
@import "elements/tags.scss";


//*******************************************
//
//  LIBRARY SPECIFIC COLORS
//
//*******************************************
@import "library-specific.scss";

.yui3-skin-sam .yui3-tab-selected .yui3-tab-label,
.yui3-skin-sam .yui3-tab-selected .yui3-tab-label:focus,
.yui3-skin-sam .yui3-tab-selected .yui3-tab-label:hover {
  background: none !important;
  border: none !important;
  background-color: $library-color !important;
}
.yui3-skin-sam .yui3-tabview-list {
  border-bottom: 5px solid $library-color !important;
}


//*******************************************
//
//  RULES
//
//*******************************************
html {
  background: $color_gray-lightest;
  color: $color_gray-default;
  overflow-y: scroll;
}
body {
  margin: 0;
  padding: 0;
}


/* -- Links ----------------------------------------------------------------- */
h1 a {
  &::after {
    display: none;
  }
}

.hidden {
  display: none;
}

/* "Jump to Table of Contents" link is shown to assistive tools, but hidden from
sight until it's focused. */
.jump {
  position: absolute;
  padding: 3px 6px;
  left: -99999px;
  top: 0;
}
.jump:focus {
  left: 40%;
}
/* -- Paragraphs ------------------------------------------------------------ */
dd p,
td p {
  margin-bottom: 0;
}
dd p:first-child,
td p:first-child {
  margin-top: 0;
}


/* -- Code and examples ----------------------------------------------------- */
code,
kbd,
pre,
samp,
A.crosslink {
  font-family: $fontFamily-monospace;
  font-size: $fontSize-smallest;
}
p code,
p kbd,
p samp {}
a code,
a kbd,
a samp,
pre code,
pre kbd,
pre samp,
table code,
table kbd,
table samp,
.intro code,
.intro kbd,
.intro samp,
.toc code,
.toc kbd,
.toc samp {
  background: none;
  border: none;
  padding: 0;
}
pre.code,
pre.terminal,
pre.cmd {
  overflow-x: auto;
  *overflow-x: scroll;
  padding: 1em;
}

pre.terminal,
pre.cmd,
pre.code {
  background: $color_gray-darkest;
  border-left: $gridUnit-smallest solid $color_gray-dark;
  margin: $gridUnit-large 0;
}

.description,
.box.intro,
.param-description,
.returns-description {
  code {
    background-color: $color-gray-lighter;
  }
}
pre code { background-color: transparent !important; }



/* Used to denote text that shouldn't be selectable, such as line numbers or
shell prompts. Guess which browser this doesn't work in. */
.noselect {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
/* -- Lists ----------------------------------------------------------------- */
dd {
  margin: 0.2em 0 0.7em 1em;
}
dl {
  margin: 1em 0;
}
dt {
  font-weight: bold;
}
/* -- Tables ---------------------------------------------------------------- */
caption,
th {
  text-align: left;
}
table {
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid $color_gray-lightest;
  padding: 5px 12px;
  vertical-align: top;
}
td {
  background: $color_gray-lighter;
}
td dl {
  margin: 0;
}
td dl dl {
  margin: 1em 0;
}
td pre:first-child {
  margin-top: 0;
}
th {
  background: $color_gray-light;

  border-bottom: none;
  border-top: none;
  color: $color_gray-darker;
  /*$color_gray-lightest1D5*/

  font-family: 'Trebuchet MS', sans-serif;
  font-weight: bold;
  line-height: 1.3;
  white-space: nowrap;
}
/* -- Layout and Content ---------------------------------------------------- */
#doc {
  margin: auto;
  min-width: 1024px;
}
.content {
  padding: 0 20px 0 25px;
  max-width: 104rem;
}
.content.source-content{
  max-width: none;
}
.sidebar {
  padding: 0 2em;
}
#bd {
  padding: $gridUnit-large 0 $gridUnit-larger;
  position: relative;
  width: 99%;
}
/* -- Table of Contents ----------------------------------------------------- */
/* The #toc id refers to the single global table of contents, while the .toc
class refers to generic TOC lists that could be used throughout the page. */
.toc code,
.toc kbd,
.toc samp {
  font-size: 100%;
}
.toc li {
  font-weight: bold;
}
.toc li li {
  font-weight: normal;
}
/* -- Intro and Example Boxes ----------------------------------------------- */
/*
.intro, .example { margin-bottom: 2em; }
.example {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 0 5px #bfbfbf;
    -webkit-box-shadow: 0 0 5px #bfbfbf;
    box-shadow: 0 0 5px #bfbfbf;
    padding: 1em;
}
.intro {
    background: none repeat scroll 0 0 #F0F1F8; border: 1px solid #D4D8EB; padding: 0 1em;
}
*/
/* -- Other Styles ---------------------------------------------------------- */
/* These are probably YUI-specific, and should be moved out of Selleck's default
theme. */
.button {
  border: 1px solid $color_gray-lighter;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: $color_gray-darker;
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 92.308%;
  font-weight: bold;
  padding: 4px 13px 3px;
  -moz-text-shadow: 1px 1px 0 $color_gray-lightest;
  -webkit-text-shadow: 1px 1px 0 $color_gray-lightest;
  text-shadow: 1px 1px 0 $color_gray-lightest;
  white-space: nowrap;
  background: $color_gray-lighter;
  /* old browsers */

  background: -moz-linear-gradient(top, #f5f5f5 0%, $color_gray-lighter 50%, #e5e5e5 51%, #dfdfdf 100%);
  /* firefox */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(50%, $color_gray-lighter), color-stop(51%, #e5e5e5), color-stop(100%, #dfdfdf));
  /* webkit */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#dfdfdf', GradientType=0);
  /* ie */

}
.button:hover {
  border-color: #466899;
  color: $color_gray-lightest;
  text-decoration: none;
  -moz-text-shadow: 1px 1px 0 #222;
  -webkit-text-shadow: 1px 1px 0 #222;
  text-shadow: 1px 1px 0 #222;
  background: #6396D8;
  /* old browsers */

  background: -moz-linear-gradient(top, #6396d8 0%, #5a83bc 50%, #547ab7 51%, #466899 100%);
  /* firefox */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6396d8), color-stop(50%, #5a83bc), color-stop(51%, #547ab7), color-stop(100%, #466899));
  /* webkit */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6396D8', endColorstr='#466899', GradientType=0);
  /* ie */

}
.newwindow {
  text-align: center;
}
.header {
  padding: 1em 0 0 0 !important;
  background-color: $color_gray-dark;
  a:hover {
    background: transparent;
  }
  .yui3-u-3-4 {
    width: 100%;
  }
}
.header .version {
  display: block;
  background: $color_gray-dark;
  padding: 0 $gridUnit-smaller;
  width: 100%;
  text-align: right;
}
.header .version em {
  display: block;
  text-align: right;
  line-height: 32px;
  color: $color_gray-default;
  margin-bottom: 0;
}
#classdocs .item {
  border-bottom: 1px solid $color_gray-light;
  margin: 0 !important;
  padding: 2em;
}
#classdocs .item .params p,
#classdocs .item .returns p {
  display: inline;
}
#classdocs .item em code,
#classdocs .item em.comment {
  color: green;
}
#classdocs .item em.comment a {
  color: green;
  text-decoration: underline;
}
#classdocs .foundat {
  font-size: 11px;
  font-style: normal;
}
.attrs .emits {
  margin-left: 2em;
  padding: .5em;
  border-left: 1px dashed #ccc;
}
abbr {
  border-bottom: 1px dashed #ccc;
  font-size: 80%;
  cursor: help;
}
.prettyprint li.L0,
.prettyprint li.L1,
.prettyprint li.L2,
.prettyprint li.L3,
.prettyprint li.L5,
.prettyprint li.L6,
.prettyprint li.L7,
.prettyprint li.L8 {
  list-style: decimal;
}
ul li p {
  margin-top: 0;
}
.method .name {
  font-size: 110%;
}
.apidocs .methods .extends .method,
.apidocs .properties .extends .property,
.apidocs .attrs .extends .attr,
.apidocs .events .extends .event {
  font-weight: bold;
  a {
    font-weight: bold;
  }
}
.apidocs .methods .extends .inherited,
.apidocs .properties .extends .inherited,
.apidocs .attrs .extends .inherited,
.apidocs .events .extends .inherited {
  font-weight: normal;
  a {
    font-weight: normal;
  }
}

#hd {
  padding: 0 15px 1px 20px;
}
#hd a {
  display: block;
  margin: 0 auto;
  vertical-align: middle;
  text-align: center;
  img {
    display: inline-block;
    height: 60px;
    margin-bottom: $gridUnit-small;
  }
}
#hd a:hover {
  background: transparent;
}

/* -- API Docs CSS ---------------------------------------------------------- */
/*
This file is organized so that more generic styles are nearer the top, and more
specific styles are nearer the bottom of the file. This allows us to take full
advantage of the cascade to avoid redundant style rules. Please respect this
convention when making changes.
*/
/* -- Generic TabView styles ------------------------------------------------ */
/*
These styles apply to all API doc tabviews. To change styles only for a
specific tabview, see the other sections below.
*/
.yui3-js-enabled .apidocs .tabview {
  visibility: hidden;
  /* Hide until the TabView finishes rendering. */

  _visibility: visible;
}
.apidocs .tabview.yui3-tabview-content {
  visibility: visible;
}
.apidocs .tabview .yui3-tabview-panel {
  padding: 0;
}
/* -- Generic Content Styles ------------------------------------------------ */

.link-docs {
  float: right;
  font-size: 15px;
  margin: 4px 4px 6px;
  padding: 6px 30px 5px;
}

/* Generic box styles. */
.apidocs .box {
  margin: 1em 0;
  padding: 0 1em;
}
/* A flag is a compact, capsule-like indicator of some kind. It's used to
   indicate private and protected items, item return types, etc. in an
   attractive and unobtrusive way. */
   .apidocs .flag {
	background: transparentize($color_gray-darker, 0.9);
    color: $color_gray-darker;
    font-size: 11px;
    margin: 0 0.5em;
    padding: 4px;
    position: relative;
    top: 0;
  }
  /* Class/module metadata such as "Uses", "Extends", "Defined in", etc. */
  .apidocs .meta {
    color: $color_gray-default;
    font-size: $fontSize-smallest;
    padding: 1em 0;
  }
  .apidocs .meta p {
    margin: 0;
  }
  .module-class {
    font-size: $fontSize-smaller;
  }
  /* Deprecation warning. */
  .apidocs .box.deprecated,
  .apidocs .flag.deprecated {
    background: $color_tweenjs-default-transparent;
    border: 1px solid #fd7775;
    p {
      color: $color_gray-darkest;
    }
  }
  .apidocs .box.deprecated p {
    margin: 0.5em 0;
  }
  .apidocs .flag.deprecated {
    color: $color_gray-darker;
  }
  /* Module/Class intro description. */
  .apidocs .intro {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    font-family: $fontFamily-secondary;
    font-size: $fontSize-smaller;
    line-height: $gridUnit-small;
    padding: 0 !important;
  }
  /* Loading spinners. */
  #bd.loading .apidocs,
  #api-list.loading .yui3-tabview-panel {
    background: $color_gray-lightest url(../img/spinner.gif) no-repeat center 70px;
    min-height: 150px;
  }
  #bd.loading .apidocs .content,
  #api-list.loading .yui3-tabview-panel .apis {
    display: none;
  }
  .apidocs .no-visible-items {
    color: $color_gray-default;
  }
  /* Generic inline list. */
  .apidocs ul.inline {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .apidocs ul.inline li {
    display: inline;
  }
  /* Comma-separated list. */
  .apidocs ul.commas li:after {
    content: ',';
    font-size: $fontSize-smaller;
  }
  .apidocs ul.commas li:last-child:after {
    content: '';
  }
  /* Keyboard shortcuts. */
  kbd .cmd {
    font-family: $fontFamily-monospace;
  }
  /* -- Generic Access Level styles ------------------------------------------- */
  .apidocs .item.protected,
  .apidocs .item.private,
  .apidocs .index-item.protected,
  .apidocs .index-item.deprecated,
  .apidocs .index-item.private {
    display: none;
  }
  .show-deprecated .item.deprecated,
  .show-deprecated .index-item.deprecated,
  .show-protected .item.protected,
  .show-protected .index-item.protected,
  .show-private .item.private,
  .show-private .index-item.private {
    display: block;
  }
  .hide-inherited .item.inherited,
  .hide-inherited .index-item.inherited {
    display: none;
  }
  /* -- Generic Item Index styles --------------------------------------------- */
  .apidocs .index h3 {
    border-bottom: 1px solid $color_gray-light;
    color: $color_gray-darker;
    font-size: 13px;
    margin: 1em 0 0.6em;
    padding-bottom: 2px;
  }
  .apidocs .index .no-visible-items {
    margin-top: 2em;
  }
  .apidocs .index-list {
    border-color: $color_gray-lighter;
    font-size: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -moz-column-width: 170px;
    -ms-column-count: 4;
    -ms-column-gap: 10px;
    -ms-column-width: 170px;
    -o-column-count: 4;
    -o-column-gap: 10px;
    -o-column-width: 170px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    -webkit-column-width: 170px;
    column-count: 4;
    column-gap: 10px;
    column-width: 170px;
  }
  .apidocs .no-columns .index-list {
    -moz-column-count: 1;
    -ms-column-count: 1;
    -o-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
  .apidocs .index-item {
    white-space: nowrap;
  }
  .apidocs .index-item .flag {
    background: none;
    border: none;
    color: #afafaf;
    display: inline;
    margin: 0 0 0 0.2em;
    padding: 0;
  }
  /* -- Generic API item styles ----------------------------------------------- */
  .apidocs .args {
    display: inline;
    margin: 0 0.5em;
  }
  .apidocs .flag.chainable {
    background: #46ca3b;
  }
  .apidocs .flag.protected {
    background: #9b86fc;
  }
  .apidocs .flag.private {
    background: #fd6b1b;
  }
  .apidocs .flag.async {
    background: $color_gray-darker;
  }
  .apidocs .flag.required {
    background: #e60923;
  }
  .apidocs .item {
    border-bottom: 1px solid $color_gray-lighter;
    margin: 1.5em 0 2em;
    padding-bottom: 2em;
  }
  .apidocs .item .description p,
  .apidocs .item pre.code {
    margin: 1em 0 0;
  }
  .apidocs .item .description {
    font-size: $fontSize-smaller;
  }
  .apidocs .item .meta {
    background: none;
    border: none;
    padding: 0;
  }
  .apidocs .item .name {
    display: inline;
    font-size: 14px;
  }
  .apidocs .item .type,
  .apidocs .item .type a,
  .apidocs .returns-inline {
  //color: $color_gray-default;
  text-decoration: none;
  font-size: 12px;
}
.apidocs .item .type,
.apidocs .returns-inline {
  font-size: 12px;
  margin: 0 0 0 0;
}
.apidocs .item .type a {
  border-bottom: 1px dotted #afafaf;
}
.apidocs .item .type a:hover {
  border: none;
}
/* -- Item Parameter List --------------------------------------------------- */
.apidocs .params-list {
  list-style: square;
  margin: 1em 0 0 2em;
  padding: 0;
}
.apidocs .param {
  margin-bottom: 1em;
}
.apidocs .param-description {
  font-size: $fontSize-smaller;
  code {
    font-size: $fontSize-smallest
  }
}
.apidocs .param .type,
.apidocs .param .type a {
  //color: $color_gray-default;
}
.apidocs .param .type {
  margin: 0 0 0 0.5em;
  *margin-left: 0.5em;
}
.apidocs .param-name {
  // font-weight: bold;
}
/* -- Item "Emits" block ---------------------------------------------------- */
.apidocs .item .emits {
  background: #f9f9f9;
  border-color: #eaeaea;
}
/* -- Item "Returns" block -------------------------------------------------- */
.apidocs .item .returns .type,
.apidocs .item .returns .type a {
  font-size: 12px;
  margin: 0;
}
/* -- Class Constructor block ----------------------------------------------- */
.apidocs .constructor .item {
  border: none;
  padding-bottom: 0;
}
/* -- File Source View ------------------------------------------------------ */
.apidocs .file pre.code,
#doc .apidocs .file pre.prettyprint {
  background: inherit;
  border: none;
  overflow: visible;
  padding: 0;
}
pre.prettyprint {
  border-top: inherit;
  border-right: inherit;
  border-bottom: inherit;
}
.apidocs .L0,
.apidocs .L1,
.apidocs .L2,
.apidocs .L3,
.apidocs .L4,
.apidocs .L5,
.apidocs .L6,
.apidocs .L7,
.apidocs .L8,
.apidocs .L9 {
  background: inherit;
}
/* -- Submodule List -------------------------------------------------------- */
.apidocs .module-submodule-description {
  font-size: 12px;
  margin: 0.3em 0 1em;
}
.apidocs .module-submodule-description p:first-child {
  margin-top: 0;
}
/* -- Sidebar TabView ------------------------------------------------------- */
#api-tabview {
  margin-top: 0.6em;
}
#api-tabview-filter,
#api-tabview-panel {
  background: $color_gray-lighter;
  border: none !important;
}
#api-tabview-filter {
  border-bottom: none;
  border-top: none;
  padding: 1em 1em 0 1em;
}
#api-tabview-panel {
  border: none !important;
}
#api-filter {
  width: 100%;
}
/* -- Content TabView ------------------------------------------------------- */
#classdocs .yui3-tabview-panel {
  border: none !important;
}
/* -- Source File Contents -------------------------------------------------- */
.prettyprint li.L0,
.prettyprint li.L1,
.prettyprint li.L2,
.prettyprint li.L3,
.prettyprint li.L5,
.prettyprint li.L6,
.prettyprint li.L7,
.prettyprint li.L8 {
  list-style: decimal;
}
/* -- API options ----------------------------------------------------------- */
#api-options {
  font-size: 11px;
  margin-top: 0.5em;
  position: absolute;
  right: 2em;
}
/*#api-options label { margin-right: 0.6em; }*/
/* -- API list -------------------------------------------------------------- */
#api-list {
  margin-top: 0em;
}
#api-modules {
  background-color: $color_gray-light
}
.apis {
  font-size: 12px;
  line-height: 1.4;
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.4em;
}
.apis a {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 0 -4px;
  padding: 0.1rem 1.4em;
  text-decoration: none;
}
#api-modules.apis a {
  font-size: $fontSize-smaller;
}
.apis li {
  margin: 0;
}
.api-list-item a:hover,
.api-list-item a:focus {
  font-weight: bold;
  text-shadow: 1px 1px 1px $color_gray-lightest;
}
.apis .message {
  color: $color_gray-light;
}
.apis .result a {
  padding: 3px 5px 2px;
}
.apis .result .type {
  right: 4px;
  top: 7px;
}
.api-list-item .yui3-highlight {
  font-weight: bold;
}
/* -- YUI Overrides -------------------------------------------------------------- */
.yui3-skin-sam .yui3-tab-selected a.yui3-tab-label {
  border: none !important;
  &::after {
    display: none !important;
  }
}
.yui3-skin-sam .yui3-tab-label {
  padding: 1em !important;
  border: none !important;
  background: none !important;
  background-color: $color_gray-light !important;
}
.yui3-skin-sam .yui3-tab-label:hover {
  background-color: $color_gray-darker !important;
  color: $color_gray-lightest !important;
}

.yui3-tab-panel-selected {
  padding: $gridUnit-smaller;
}
div#hd.yui3-g.header {
  word-spacing: normal;
  letter-spacing: normal;
}

// Syntax Highlighting
.pln {
  color: $color_gray-lighter;
}
.com {
  color: lighten($color_gray-dark, 10%);
}
.kwd {
  color: $color_easeljs-default;
}
.str {
  color: $color_createjs-default;
}
.typ {
  color: $color_tweenjs-default;
}
.lit {
  color: $color_preloadjs-default;
}
.pun,
.opn,
.clo {
  color: $color_soundjs-default;
}

ol.linenums {
  position: relative;
  padding-left: 60px;
  &::before {
    content: '';
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    width: 5.5rem;
    background-color: $color_gray-dark;;
  }
  .file-line {
    position: relative;
    z-index: 2;
    color:$color_gray-darkest;
  }
}

.yui3-skin-sam .yui3-tab-label,
.yui3-skin-sam .yui3-tab-selected a.yui3-tab-label {
  font-size: $fontSize-smallest;
  &::after {
    top:0;
    bottom:0;
    left:0;
    right:0;
  }
}

ol.linenums .file-line {
  color: $color_gray-light;
}

.apidocs .file pre.code, #doc .apidocs .file pre.prettyprint {
  overflow-x: auto;
  background-color: $color_gray-darkest;
}
#doc {
  overflow-x: hidden;
}
