@import 'prettify.css';
@import '../bower_components/bootstrap/dist/css/bootstrap.min.css';

@protractor-red: #e23237;
@protractor-red-dark: #b52e31;
@padding-top: 50px;
@api-padding-top: 10px;
@child-color: #777;
@mobile-menu-margin: 15px;

a code {
  color: inherit;
}

.protractor-container {
  margin-bottom: 50px;
  padding-top: @padding-top;

  .protractor-header {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 90px - @padding-top;
  }
}

.gist {
  margin: 20px 0;
}

.github-button {
  background-color: @protractor-red;

  &:hover {
    background-color: @protractor-red-dark;
  }

  img {
    margin-right: 12px;
  }
}

.protractor-logo {
  display: inline-block;
  background-size: 100%;
  @media (max-width: 500px) {
    background-image: url(../img/protractor-logo-300.png);
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
      background-image: url(../img/protractor-logo-600.png);
    }
    height: 67px;
    width: 300px;
  }
  @media (min-width: 500px) {
    background-image: url(../img/protractor-logo-450.png);
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
      background-image: url(../img/protractor-logo-900.png);
    }
    height: 101px;
    width: 450px;
  }
}

.twitter {
  margin: 20px 0;
  text-align: center;
}

.api-title {
  margin-top: @api-padding-top;
}

.api-webdriver {
  border: 1px solid #F0F0F0;
  padding: 0.5em;
  font-style: italic;
}

.api-left-nav {
  .title {
    display: inline-block;
    font-size: 1.2em;
    margin: @api-padding-top 0 5px;
  }

  .child {
    color: @child-color;
  }

  .depth-1 {
    margin-left: 20px;
  }

  .depth-2 {
    margin-left: 40px;
  }

  .depth-3 {
    margin-left: 60px;
  }
}

.api-left-nav a, .mobile-menu a {
  display: inline-block;
}

.api-left-nav .extension, .mobile-menu .extension {
  &:before {
    content: 'Inherited from ';
  }
  font-style: italic;
}

// The grid is too wide.
@media (min-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

.toggle-menu-button-container {
  padding: 0 @mobile-menu-margin;

  button {
    margin-top: 10px;
    width: 100%;
  }
}

.mobile-menu {
  margin: @mobile-menu-margin;

  .title {
    font-size: 1.5em;
    margin-top: 10px;
    text-align: center;
  }

  .parent {
    font-size: 1.2em;
    margin-top: 10px;
  }

  .child {
    color: @child-color;
    font-size: 1.1em;
    padding-right: 10px;
  }
}

//Anchors
.anchored {
  div {
    position: relative;
    margin-left: -1.5em;
    padding-left: 1.5em;

    a {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0em;
      width: 2em;
      height: 1em;
      line-height: 1em;
      margin: auto;
      text-align: center;
      color: inherit;
      text-decoration: none;
      font-size: 0.75em;
      display: none;
    }

    &:hover a {
      display: inline-block;
    }
  }

  //Offset
  &:before {
    content: " ";
    display: block;
    height: 70px;
    margin-top: -70px;
    visibility: hidden;
  }
}
