style.less

@white:                 #FFFFFF;
@black:                 #000000;

body {
  background-color: #eeeeee;
}

#main-demo-body {
  margin: 30px auto 100px;
  width: 600px;
}

.demo-widget {
//  width: 600px;
  margin: 0 auto 30px;

  .demo-widget-header {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 55px;
    font-weight: 300;
    color: lighten(@black, 20%);
    margin: 0 0 12px 0;
  }

  .demo-widget-body {
    border-radius: 4px;
    border: 1px #d7d7d7 solid;
    padding: 21px;
    background-color: @white;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);

    .form-group:last-of-type {
      margin: 0;
    }
  }
}

.demo-primary-header {
//  width: 600px;
  margin: 0 auto 30px;

  .main-title {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 55px;
    font-weight: 300;
    margin: 0 0 12px 0;
    padding: 0 0 12px 0;
    box-shadow: inset 0 -1px 0 darken(@white, 10%);
    border-bottom: 1px darken(@white, 1%) solid;

    .sub-title {
      font-weight: 400;
      font-size: 22px;
      display: block;
    }
  }

  .download {
    margin: 0 0 12px 0;
  }

  .share {

    &.facebook-share {
      height: 68px;
    }

    &.twitter-share {
      height: 20px;
      margin: 0 0 6px 0;
    }

    &.googleplus-share {
      height: 20px;
    }
  }

  .divider {
    border-top: 1px darken(@white, 10%) solid;
    border-bottom: 1px darken(@white, 1%) solid;
    margin: 0 0 12px 0;
  }
}

.demo-code {
  padding: 12px;
  background-color: darken(@white, 3%);
  font-size: 12px;
  font-family: 'Droid Sans Mono', sans-serif;
  border-radius: 4px;
  margin: 0 0 12px 0;
  box-shadow: inset 0 1px 6px rgba(0,0,0,0.08);

  ol {
    border-top: 1px darken(@white, 12%) solid;
    margin: 0 0 0 29px;
    padding: 0;

    li {
      color: #252525;
      margin: 0;
      padding: 0 0 0 12px;
      border-left: 1px darken(@white, 12%) solid;
      border-bottom: 1px darken(@white, 12%) solid;
      line-height: 22px;

      &.indent-1 {
        padding-left: 30px;
      }

      &.indent-2 {
        padding-left: 60px;
      }

      &.indent-3 {
        padding-left: 90px;
      }

      &.indent-4 {
        padding-left: 120px;
      }

      &.indent-5 {
        padding-left: 150px;
      }

      .nt {
        color: #2f6f9f;
      }

      .na {
        color: #4f9fcf;
      }

      .s {
        color: #d44950;
      }

      .c {
        color: #999;
      }
    }
  }
}