@import './normalize';
@import './_tutdown/index';
@import './_site/index';

* {
  .box-sizing(border-box);
}

body {
  line-height: 1.3;
  color: @textColor;
}


//////////
// GRID //
//////////


/* @media only screen and (min-width: 34em) { */
/*         .feature, .info { width: 50%; } */
/* } */

// @media only screen and (min-width: 480px) {
//         #content { width: 78.00%; }
//         #sidebar { width: 22.00%; }
// }

// @media only screen and (min-width: 960px) {
//         #sidebar { width: 220px; }
// }

#page-wrapper {
  padding-left: @sidebarWidth;
}

@sidebarWidth: 250px;

#sidebar {
  //background-color: #FC8BBA;
  position: fixed;
  left: 0;
  top: 0;
  padding: 8px 24px 24px 24px;
  width: @sidebarWidth;
  height: 100%;
  overflow: auto;
  color: @lightTextColor;
  border-right: solid 1px #eee;


  a {
    color: @lightTextColor;
  }

  .active {
    font-weight: bold;
  }
  li {
    font-size: 14px;
  }
  h2 {
    font-size: 18px;
    margin-bottom: 2px;
    color: @mediumTextColor;
  }
  h3 {
    font-size: 14px;
    //color: @mediumTextColor;
    color: @lightTextColor;
  }
  a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  ul {
    margin-top: 2px;
  }
}

#content {
  max-width: 800px;
  min-width: 500px;
  min-height: 100%;
  padding: 24px;

  h1, h2, h3 {
    padding-top: 20px;
  }
}

/////////// GENERAL
h1, h2, h3, h4, h5 {
  color: @mediumTextColor;
}

iframe.result {
  width: 100%;
  height: auto;
  border: 0;
}

article {
  section {
    margin-bottom: 60px;
  }
}

ul {
  list-style: none;
  padding-left: 1em;
}

strong {
  font-weight: bold;
  color: @mediumTextColor;
}

a {
  color: @linkColor;
  text-decoration: underline;

  strong {
    color: @linkColor;
  }
}

.caption {
  margin-left: 14px;
  /* font-size: 12px; */
  color: @lightTextColor;
  font-family: @monospaceFontFamily;
  font-weight: normal;
  font-size: 14px;
}

.static {
  font-style: italic;
}
.static:before {
  content: '.';
}

#logo {
  width: 515px;
  height: 137px;
}

.nav-title {
  font-size: 15px;
}

.collapsed > * {
  display: none;
}

.collapsed:before, .uncollapsed:before {
  background-color: #d8f3f8;
  border: solid 1px #a6ebf8;
  font-size: 0.8em;
  padding: 0.5em;
  .border-radius(4px);
  cursor: pointer;
}

.collapsed:before {
  content: "learn more...";

}
.uncollapsed:before {
  content: "hide...";
}


.note {
  background-color: #ffffed;
  color: #54544a;
  margin: 1.5em;
  padding: 0.5em;
  border: solid 1px #ededba;

  code {
    border: solid 1px #ebebba;
    background-color: #fcfcdc;
  }
}

.aside {
  background-color: #f4f4f4;
  color: #666;
  margin: 1.5em;
  padding: 0.5em;
  border-right: solid 1px #ececec;
  border-bottom: solid 1px #ececec;
}

.download-labels {
  display: inline;
}

.download-size-label {
  text-decoration: italic;
}

.download-version-label {
  font-weight: bold;
}

.button-size-label {
  position: relative;
  top: 15px;
  left: 8px;
}


#text-logo {
  color: #8DCC06;
  font-size: 64px;
  font-family: Georgia, 'Times New Roman', serif;
}