@import "settings";
@import "foundation";
@import "coderay";

/* Documentation Overrides */

/* Coderay styles */
.html, .css, .scss, .js { position: relative; }

ul, ol, dl { list-style-position: inside; }

.CodeRay:before {
  position: absolute;
  top: 6px;
  right: 6px;
  display: block;
  color: #ccc;
  font-size: .75em;
}
.html > .CodeRay:before { content: "HTML"; }
.css > .CodeRay:before { content: "SCSS"; }
.js > .CodeRay:before { content: "JS"; }

/* Docs Footer Styles */
.row.full-width {
  max-width: 100%;
}
footer.row.full-width {
  padding-top: 30px;
  border-top: solid 1px #ddd;
  font-size: 14px;
}

#copyright {
  background: #3f3f3f;
  color: #fff;
  padding: 11px 0;
  margin-top: 30px;

  a {
    color: #fff;
    font-size: 14px;
  }

  p,
  ul { margin-bottom: 0; }
}

.docs.header { margin-bottom: 10px; }
.docs.subheader {
  float: $default-float;
}

.docs.section-container a.active { font-weight: bold; }


/* Alert Docs */
.alert-base {
  @include alert-base;

  &.bg { @include alert-style; }
  &.custom-bg { @include alert-style(#ff6c3c); }
  &.radius { @include radius; }
  .close { @include alert-close; }
}

/* Breadcrumb Docs */
.crumb-container {
  @include crumb-container;
  &.radius { @include radius; }
  &.crumbs li { @include crumbs; }
}

/* Button Docs */
.buttony.custom { @include button(1.1em, #FF94CB, 20px); }

.button-base {
  @include button-base;
  &.size { @include button-size; }
  &.style { @include button-style; }
  &.shine { @include single-transition(background-color); @include radius; @include inset-shadow(); }
}

/* Button Group Docs */
.button-group-docs {
  @include button-group-container;
  .button-class { @include button; }
  &.list li { @include button-group-style; }
  &.extras {
    li { @include button-group-style(true); }
    .button-class { @include inset-shadow; @include single-transition(background-color); }
  }
}

/* Forms Docs */
.attached-label {
  @include prefix-postfix-base;
  @include grid-column($columns:3,$float:left);
  &.style { @include prefix; }
  &.custom { @include prefix(orange); }
}

input[type="text"].attached-input {
  @include grid-column($columns:9);
}

/* Dropdown Buttons Docs */
.customized-dropdown-docs {
  @include button;
  @include dropdown-button;
  @include radius;
  @include single-transition;
  @include inset-shadow;
}

/* Keystroke Docs */
.custom-keystroke kbd { @include keystroke(orange);}

/* Label Docs */
.label-custom {
  @include label(0 10px,11px,pink,6px);
}

/* Panels Docs */
.panel-custom { @include panel(pink,40px); }

/* Progress Bar Docs */
.progress-custom {
  @include progress-container;
  @include radius(6px);
  & > span {
    @include progress-meter(pink);
    @include radius(5px);
  }
}

/* Side Nav Docs */
.side-nav-custom { @include side-nav(darken(orange, 20%),16px,orange); }

/* Sub Nav Docs */
.sub-nav-custom { @include sub-nav(orange,11px,orange); }

/* Thumbs Docs */
.th-custom {
  @include thumb(10px,0 0 0 2px black, 0 0 10px 2px rgba(orange,0.5));
  @include radius(6);
  @include single-transition(all,400ms,ease-in);
}

/* Grid Docs */
#masthead { @include grid-row; @include panel;
  & > hgroup { @include grid-column(4, $float:$default-float); }
  & > section { @include grid-column(8, $float:$default-float); }
}

/* Switch Docs */
.switch-custom { @include switch(700ms, ease-in-out, 50px, 18px, 2.6em, #888, lighten(yellow, 30%), lighten(red, 40%)); }
.switch-custom-base { @include switch-base;
  &.size { @include switch-size; }
  &.style { @include switch-style; }
}

/* ZURBjobs */
.jobs {
  border: 1px solid #eee;
  padding: 10px 20px 20px;
  font-size: 14px;
  line-height: 1.1;
  ul { list-style: none;
    li { margin-bottom: 10px; }
  }
  .location {
    display: block;
    color: #555;
  }
}

@media only screen and (min-width: 800px) {
  .docs.header { float: $default-float; }

  .docs.subheader {
    margin-top: 38px;
    float: $opposite-direction;
  }
}