//
// Examples
// --------------------------------------------------

.example {
  padding: 45px 15px 15px;

  border: 1px solid #ddd;
  border-radius: 4px 4px 0 0;

  position: relative;
  margin-top: 1em;

  &:after {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 12px;
    font-weight: 700;
    color: #959595;
    text-transform: uppercase;
    letter-spacing: 1px;
    content: "Example";
  }
}

.example-live:after {
  content: "Live Example (Try It!)";
}

.example-code > pre {
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0;
  margin-bottom: 0;
}

.example-footer {
  padding: 10px 15px;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  margin-bottom: 1em;

  > a {
    font-size: 12px;
    font-weight: 700;
    color: #959595;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    text-align: center;
  }
}