A Pen by Dan Malarkey.

index.html

<div class="wrapper">
  <div class="docs-nav">
    <nav>
      <a href="#get-started" class="active">Get Started</a>
      <a href="#defaults">Defaults</a>
      <a href="#frame">Frame</a>
      <a href="#">Grid</a>
      <a href="#">Forms</a>
      <a href="#">Buttons</a>
      <a href="#">Tables</a>
      <a href="#">Menus</a>
    </nav>
  </div>
  <div class="docs">
    <div class="docs-wrapper">
      <div id="get-started">
        <h1>Lets get started, shall we?</h1>
        <hr>
        <p class="lead">A powerfully light, responsive, and lean frontend UI framework, Schema is a quick and easy-to-implement framework for awesome developers who build interfaces for the web. Schema provides an all-inclusive collection of LESS files to jump start the foundation of all your projects.
      </div>
        <div class="row-fluid">
          <div class="col6">
            <h3>Schema</h3>
            <p>Are you ready to dive in? Download the latest version (v2.0) of Schema. You will find the entire project in the download. No documentation or original source files are included.</p>
            <p><a href="" class="btn btn-info-gradient">Download Schema</a></p>
          </div>
          <div class="col6">
            <h3>Source Files</h3>
            <p>This download includes this documentation, all font files, all LESS files, and everything in between. You will need a processor to process the LESS files. Some set up will be required to get started.</p>
            <p><a href="" class="btn btn-default-gradient">Download Source</a></p>
          </div>
        </div>
        <h3>Start your next project with Schema</h3>
      <p>Link to the CSS source</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      
        <div class="defaults" id="defaults">
          <h1>Default settings</h1>
        </div>
      </div>
    </div>
  </div>
</div>

mrxpw.markdown

mrxpw

A Pen by Dan Malarkey on CodePen.

License.

script.js

$('nav > a').on( 'click', function(e){
  $('a.active').removeClass('active');
  $(this).addClass('active');
});

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 700);
            return false;
        }
    }
});

style.less

@base-blue:                             #3498db;
@base-teal:                             #34c1db;
  @info-color:                          @base-teal;
@base-green:                            #2ecc71;
@base-orange:                           #f46801;
@base-warning:                          #f39c12;
@base-danger:                           #e74c3c;

@base-font:                             'source sans pro';
@weight-300:                            300;
@weight-400:                            400;
@weight-700:                            700;
@weight-800:                            800;

@typeset-margin:                        1.3125rem 0;
@base-line-height:                      1.3125;



*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: @base-font;
  height: 100%;
  width: 100%;
  font-size: 1rem;
  line-height: @base-line-height;
  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-weight: @weight-400;
}

a {
  text-decoration: none;
  transition: all .25s ease;
}

hr { 
  height: 1px;
  border-top: 1px solid #ccc;
  border-left: transparent;
  border-right: transparent;
  border-bottom: transparent;
  margin: @typeset-margin;
}

.wrapper {
  position: relative;
  height: 100%;
}

.docs-nav {
  width: 20%;
  background-color: #1f1f1f;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  float: left;
}

#frame,
#get-started {
  padding-top: 3%;
}
.docs-nav a {
  color: rgba(255,255,255,.7);
  padding: 1rem;
  display: block;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
  border-left: 5px solid transparent;
 
  &:hover {
    background-color: rgba(0,0,0,1);
  }
  
  &.active {
    background-color: @info-color;
    color: rgba(255,255,255,1);
    font-weight: @weight-700;
  }
}

.docs {
  float: left;
  width: 80%;
  margin-left: 20%;
}

  .docs-wrapper {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    width: 100%;
    padding: 0 15%;
  }

h1, h2,
h3, h4, 
h5, h6 {
  margin: @typeset-margin;
  margin-bottom: 0;
}

p {
  margin: @typeset-margin;
  color: #333;
}

h1 {
  font-weight: @weight-300;
}



p.lead,
.lead {  
	font-size: 1.3125rem; 
}

ul,
ol {
  margin: 0;
  list-style: none;
  padding: 0;
}
[class^="col"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
  margin-left: 1.25rem;
}
@media screen and (max-width: 767px) {
  [class^="col"] {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}
@media screen and (min-width: 1200px) {
  [class^="col"] {
    margin-left: 30px;
    margin-left: 1.875rem;
  }
}
.row {
  margin-left: -20px;
  margin-left: -1.25rem;
  *zoom: 1;
}
@media screen and (min-width: 1200px) {
  .row {
    margin-left: -30px;
    margin-left: -1.875rem;
    *zoom: 1;
  }
}
@media screen and (max-width: 767px) {
  .row {
    margin-lef: 0px;
    margin-lef: 0rem;
  }
}
.row:before,
.row:after {
  display: table;
  line-height: 0;
  content: "";
}
.row:after {
  clear: both;
}
.container {
  width: 940px;
  width: 58.75rem;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .container {
    width: 95%;
    width: auto;
    float: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .container {
    width: 724px;
    width: 45.25rem;
  }
}
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
    width: 73.125rem;
  }
}
.col12 {
  width: 940px;
  width: 58.75rem;
}
@media screen and (min-width: 1200px) {
  .col12 {
    width: 1170px;
    width: 73.125rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col12 {
    width: 724px;
    width: 45.25rem;
  }
}
@media screen and (max-width: 767px) {
  .col12 {
    width: 100%;
  }
}
.col11 {
  width: 860px;
  width: 53.75rem;
}
@media screen and (min-width: 1200px) {
  .col11 {
    width: 1070px;
    width: 66.875rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col11 {
    width: 662px;
    width: 41.375rem;
  }
}
@media screen and (max-width: 767px) {
  .col11 {
    width: 100%;
  }
}
.col10 {
  width: 780px;
  width: 48.75rem;
}
@media screen and (min-width: 1200px) {
  .col10 {
    width: 970px;
    width: 60.625rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col10 {
    width: 600px;
    width: 37.5rem;
  }
}
@media screen and (max-width: 767px) {
  .col10 {
    width: 100%;
  }
}
.col9 {
  width: 700px;
  width: 43.75rem;
}
@media screen and (min-width: 1200px) {
  .col9 {
    width: 870px;
    width: 54.375rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col9 {
    width: 538px;
    width: 33.625rem;
  }
}
@media screen and (max-width: 767px) {
  .col9 {
    width: 100%;
  }
}
.col8 {
  width: 620px;
  width: 38.75rem;
}
@media screen and (min-width: 1200px) {
  .col8 {
    width: 770px;
    width: 48.125rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col8 {
    width: 476px;
    width: 29.75rem;
  }
}
@media screen and (max-width: 767px) {
  .col8 {
    width: 100%;
  }
}
.col7 {
  width: 540px;
  width: 33.75rem;
}
@media screen and (min-width: 1200px) {
  .col7 {
    width: 670px;
    width: 41.875rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col7 {
    width: 414px;
    width: 25.875rem;
  }
}
@media screen and (max-width: 767px) {
  .col7 {
    width: 100%;
  }
}
.col6 {
  width: 460px;
  width: 28.75rem;
}
@media screen and (min-width: 1200px) {
  .col6 {
    width: 570px;
    width: 35.625rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col6 {
    width: 352px;
    width: 22rem;
  }
}
@media screen and (max-width: 767px) {
  .col6 {
    width: 100%;
  }
}
.col5 {
  width: 380px;
  width: 23.75rem;
}
@media screen and (min-width: 1200px) {
  .col5 {
    width: 470px;
    width: 29.375rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col5 {
    width: 290px;
    width: 18.125rem;
  }
}
@media screen and (max-width: 767px) {
  .col5 {
    width: 100%;
  }
}
.col4 {
  width: 300px;
  width: 18.75rem;
}
@media screen and (min-width: 1200px) {
  .col4 {
    width: 370px;
    width: 23.125rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col4 {
    width: 228px;
    width: 14.25rem;
  }
}
@media screen and (max-width: 767px) {
  .col4 {
    width: 100%;
  }
}
.col3 {
  width: 220px;
  width: 13.75rem;
}
@media screen and (min-width: 1200px) {
  .col3 {
    width: 270px;
    width: 16.875rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col3 {
    width: 166px;
    width: 10.375rem;
  }
}
@media screen and (max-width: 767px) {
  .col3 {
    width: 100%;
  }
}
.col2 {
  width: 140px;
  width: 8.75rem;
}
@media screen and (min-width: 1200px) {
  .col2 {
    width: 170px;
    width: 10.625rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col2 {
    width: 104px;
    width: 6.5rem;
  }
}
@media screen and (max-width: 767px) {
  .col2 {
    width: 100%;
  }
}
.col1 {
  width: 60px;
  width: 3.75rem;
}
@media screen and (min-width: 1200px) {
  .col1 {
    width: 70px;
    width: 4.375rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .col1 {
    width: 42px;
    width: 2.625rem;
  }
}
@media screen and (max-width: 767px) {
  .col1 {
    width: 100%;
  }
}
.offset12 {
  width: 980px;
  width: 61.25rem;
}
.offset11 {
  width: 900px;
  width: 56.25rem;
}
.offset10 {
  width: 820px;
  width: 51.25rem;
}
.offset9 {
  width: 740px;
  width: 46.25rem;
}
.offset8 {
  width: 660px;
  width: 41.25rem;
}
.offset7 {
  width: 580px;
  width: 36.25rem;
}
.offset6 {
  width: 500px;
  width: 31.25rem;
}
.offset5 {
  width: 420px;
  width: 26.25rem;
}
.offset4 {
  width: 340px;
  width: 21.25rem;
}
.offset3 {
  width: 260px;
  width: 16.25rem;
}
.offset2 {
  width: 180px;
  width: 11.25rem;
}
.offset1 {
  width: 100px;
  width: 6.25rem;
}
@media (min-width: 768px) and (max-width: 979px) {
  .offset12 {
    width: 764px;
    width: 47.75rem;
  }
  .offset11 {
    width: 702px;
    width: 43.875rem;
  }
  .offset10 {
    width: 640px;
    width: 40rem;
  }
  .offset9 {
    width: 578px;
    width: 36.125rem;
  }
  .offset8 {
    width: 516px;
    width: 32.25rem;
  }
  .offset7 {
    width: 454px;
    width: 28.375rem;
  }
  .offset6 {
    width: 392px;
    width: 24.5rem;
  }
  .offset5 {
    width: 330px;
    width: 20.625rem;
  }
  .offset4 {
    width: 268px;
    width: 16.75rem;
  }
  .offset3 {
    width: 206px;
    width: 12.875rem;
  }
  .offset2 {
    width: 144px;
    width: 9rem;
  }
  .offset1 {
    width: 82px;
    width: 5.125rem;
  }
  .row-fluid {
    width: 100%;
    *zoom: 1;
  }
  .row-fluid:after {
    clear: both;
  }
  .row-fluid [class^="col"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 30px;
    margin-left: 2.76%;
    *margin-left: 2.70%;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .row-fluid [class^="col"]:first-child {
    margin-left: 0;
  }
  .row-fluid .controls-row [class^="col"] + [class^="col"] {
    margin-left: 2.76%;
  }
  .row-fluid .col12 {
    width: 100%;
  }
  .row-fluid .col11 {
    width: 91.43%;
  }
  .row-fluid .col10 {
    width: 82.87%;
  }
  .row-fluid .col9 {
    width: 74.30%;
  }
  .row-fluid .col8 {
    width: 65.74%;
  }
  .row-fluid .col7 {
    width: 57.18%;
  }
  .row-fluid .col6 {
    width: 48.61%;
  }
  .row-fluid .col5 {
    width: 40.05%;
  }
  .row-fluid .col4 {
    width: 31.49;
  }
  .row-fluid .col3 {
    width: 22.92%;
  }
  .row-fluid .col2 {
    width: 14.36%;
  }
  .row-fluid .col1 {
    width: 5.8%;
  }
  .row-fluid .offset12 {
    margin-left: 105.52%;
  }
  .row-fluid .offset12:first-child {
    margin-left: 102.76%;
  }
  .row-fluid .offset11 {
    margin-left: 96.96%;
  }
  .row-fluid .offset11:first-child {
    margin-left: 94.19%;
  }
  .row-fluid .offset10 {
    margin-left: 88.39%;
  }
  .row-fluid .offset10:first-child {
    margin-left: 85.63%;
  }
  .row-fluid .offset9 {
    margin-left: 79.83%;
  }
  .row-fluid .offset9:first-child {
    margin-left: 77.07%;
  }
  .row-fluid .offset8 {
    margin-left: 71.27%;
  }
  .row-fluid .offset8:first-child {
    margin-left: 68.50%;
  }
  .row-fluid .offset7 {
    margin-left: 62.70;
  }
  .row-fluid .offset7:first-child {
    margin-left: 59.94%;
  }
  .row-fluid .offset6 {
    margin-left: 54.148%;
  }
  .row-fluid .offset6:first-child {
    margin-left: 51.38%;
  }
  .row-fluid .offset5 {
    margin-left: 45.58%;
  }
  .row-fluid .offset5:first-child {
    margin-left: 42.81%;
  }
  .row-fluid .offset4 {
    margin-left: 37.01%;
  }
  .row-fluid .offset4:first-child {
    margin-left: 34.25%;
  }
  .row-fluid .offset3 {
    margin-left: 28.45%;
  }
  .row-fluid .offset3:first-child {
    margin-left: 25.69%;
  }
  .row-fluid .offset2 {
    margin-left: 19.88%;
  }
  .row-fluid .offset2:first-child {
    margin-left: 17.12%;
  }
  .row-fluid .offset1 {
    margin-left: 11.32%;
  }
  .row-fluid .offset1:first-child {
    margin-left: 8.56%;
  }
}
@media (min-width: 768px) and (max-width: 979px) and screen and (max-width: 767px) {
  .row-fluid [class^="col"] {
    margin-left: 0;
  }
}
.row-fluid {
  width: 100%;
  *zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}
.row-fluid:after {
  clear: both;
}
.row-fluid [class^="col"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.12%;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.row-fluid [class^="col"]:first-child {
  margin-left: 0;
}
.row-fluid .controls-row [class^="col"] + [class^="col"] {
  margin-left: 2.12%;
}
.row-fluid .col12 {
  width: 100%;
}
.row-fluid .col11 {
  width: 91.48%;
}
.row-fluid .col10 {
  width: 82.97%;
}
.row-fluid .col9 {
  width: 74.46%;
}
.row-fluid .col8 {
  width: 65.95%;
}
.row-fluid .col7 {
  width: 57.44%;
}
.row-fluid .col6 {
  width: 48.93%;
}
.row-fluid .col5 {
  width: 40.42%;
}
.row-fluid .col4 {
  width: 31.91%;
}
.row-fluid .col3 {
  width: 23.40%;
}
.row-fluid .col2 {
  width: 14.895%;
}
.row-fluid .col1 {
  width: 6.38%;
}
.row-fluid .offset12 {
  margin-left: 104.25%;
}
.row-fluid .offset12:first-child {
  margin-left: 102.12%;
}
.row-fluid .offset11 {
  margin-left: 95.74%;
}
.row-fluid .offset11:first-child {
  margin-left: 93.61%;
}
.row-fluid .offset10 {
  margin-left: 87.23%;
}
.row-fluid .offset10:first-child {
  margin-left: 85.10%;
}
.row-fluid .offset9 {
  margin-left: 78.72%;
}
.row-fluid .offset9:first-child {
  margin-left: 76.59%;
}
.row-fluid .offset8 {
  margin-left: 70.21%;
}
.row-fluid .offset8:first-child {
  margin-left: 68.08%;
}
.row-fluid .offset7 {
  margin-left: 61.70%;
}
.row-fluid .offset7:first-child {
  margin-left: 59.57%;
}
.row-fluid .offset6 {
  margin-left: 53.195%;
}
.row-fluid .offset6:first-child {
  margin-left: 51.06%;
}
.row-fluid .offset5 {
  margin-left: 44.68%;
}
.row-fluid .offset5:first-child {
  margin-left: 42.55%;
}
.row-fluid .offset4 {
  margin-left: 36.17%;
}
.row-fluid .offset4:first-child {
  margin-left: 34.04%;
}
.row-fluid .offset3 {
  margin-left: 27.65%;
}
.row-fluid .offset3:first-child {
  margin-left: 25.53%;
}
.row-fluid .offset2 {
  margin-left: 19.14%;
}
.row-fluid .offset2:first-child {
  margin-left: 17.02%;
}
.row-fluid .offset1 {
  margin-left: 10.63%;
}
.row-fluid .offset1:first-child {
  margin-left: 8.51%;
}
@media screen and (max-width: 767px) {
  .row-fluid {
    width: 100%;
  }
  [class^="col"],
  .uneditable-input[class^="col"],
  .row-fluid [class^="col"] {
    display: block;
    float: none;
    width: 100%;
    margin-left: 0;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
[class^="col"].hide,
.row-fluid [class^="col"].hide {
  display: none;
}
[class^="col"].pull-right,
.row-fluid [class^="col"].pull-right {
  float: right;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}
.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}
.container:after {
  clear: both;
}
.container-fluid {
  padding-right: 20px;
  padding-right: 1.25rem;
  padding-left: 20px;
  padding-left: 1.25rem;
  *zoom: 1;
}
.container-fluid:before,
.container-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}
.container-fluid:after {
  clear: both;
}

a.btn-success,
a.btn-warning,
a.btn-info,
a.btn-danger,
a.btn-primary,
a:hover.btn-success,
a:hover.btn-warning,
a:hover.btn-info,
a:hover.btn-danger,
a:hover.btn-primary,
a:hover.btn-success-gradient,
a:hover.btn-primary-gradient,
a:hover.btn-info-gradient,
a:hover.btn-danger-gradient,
a:hover.btn-warning-gradient,
.nav > li > a:hover.btn-default-outline,
.nav > li > a:hover.btn-primary-outline,
.nav > li > a:hover.btn-info-outline,
.nav > li > a:hover.btn-success-outline,
.nav > li > a:hover.btn-warning-outline,
.nav > li > a:hover.btn-danger-outline {
  text-decoration: none;
  color: #ffffff;
}
.btn > i:before {
  margin-right: 8px;
  margin-right: 0.5rem;
}
a.btn-default,
a:hover.btn-default-gradient {
  color: #777777;
  text-decoration: none;
}
.btn {
  padding: 0.5rem 0.875rem;
  font-size: 1rem;
  line-height: 1.3125;
  border-radius: 6px;
  border: 1px solid transparent;
  color: #777777;
  display: inline-block;
  text-shadow: 0px -1px 0 rgba(0,0,0,.2);
  font-weight: 700;
  outline: 0;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-pill {
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  border-radius: 24px;
}
.btn-link {
  background: transparent;
  background-color: transparent;
  border-color: transparent;
  color: inherit;
}
.btn-full {
  display: block;
  width: 100%;
}
.btn-label {
  vertical-align: middle;
  padding: .1875rem .5rem;
  background-color: #cccccc;
  color: #ffffff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}
.btn-label.primary {
  background-color: #3498db;
  color: #ffffff;
}
.btn-label.success {
  background-color: #2ecc71;
  color: #ffffff;
}
.btn-label.danger {
  background-color: #e74c3c;
  color: #ffffff;
}
.btn-label.info {
  background-color: #34c1db;
  color: #ffffff;
}
.btn-label.warning {
  background-color: #f39c12;
  color: #ffffff;
}
.btn-lg {
  padding: 0.75rem 1.125rem;
  font-size: 1.25rem;
  line-height: 1.70625;
  border-radius: 6px;
}
.btn-sm {
  padding: 0.6rem 0.6rem;
  font-size: 0.875rem;
  line-height: 0.6825;
  border-radius: 6px;
}
.btn-default,
.nav > li > a.btn-default {
  color: #777777;
  background-color: #ffffff;
  border-color: #cccccc;
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-default:hover,
.nav > li > a.btn-default:hover {
  background-color: #f7f7f7;
  border-color: #c4c4c4;
}
.btn-default:active,
.nav > li > a.btn-default:active {
  color: #777777;
  background-color: #f1f1f1;
  border-color: #bebebe;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-default-outline,
.default-outline {
  color: #777777;
  background-color: transparent;
  border-color: #777777;
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-default-outline:hover,
.default-outline:hover {
  background-color: rgba(0, 0, 0, 0);
  border-color: #6f6f6f;
}
.btn-default-outline:active,
.default-outline:active {
  color: #777777;
  background-color: rgba(0, 0, 0, 0);
  border-color: #696969;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-default-outline:hover,
.default-outline:hover {
  border-color: #777777;
  color: #ffffff;
  background-color: #777777;
}
.btn-default-outline:active,
.default-outline:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn-default-gradient,
.default-gradient {
  background: #cccccc;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f5f5f5), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #f5f5f5, #ffffff);
  background: -moz-linear-gradient(center bottom, #f5f5f5 0%, #ffffff 100%);
  background: -o-linear-gradient(#ffffff, #f5f5f5);
  background-image: linear-gradient(top, #f5f5f5, #ffffff);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
  border-color: #cccccc;
  text-shadow: 0 -1px 0 rgba(255,255,255,1);
}
.btn-default-gradient:hover,
.default-gradient:hover {
  background: #cccccc;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f5f5f5), color-stop(1, #f5f5f5));
  background: -ms-linear-gradient(bottom, #f5f5f5, #f5f5f5);
  background: -moz-linear-gradient(center bottom, #f5f5f5 0%, #f5f5f5 100%);
  background: -o-linear-gradient(#f5f5f5, #f5f5f5);
  background-image: linear-gradient(top, #f5f5f5, #f5f5f5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f5f5f5', GradientType=0);
}
.btn-default-gradient:active,
.default-gradient:active {
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
}
.btn-primary,
.nav > li > a.btn-primary {
  color: #ffffff;
  background-color: #3498db;
  border-color: #258cd1;
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-primary:hover,
.nav > li > a.btn-primary:hover {
  background-color: #2791d9;
  border-color: #2383c4;
}
.btn-primary:active,
.nav > li > a.btn-primary:active {
  color: #ffffff;
  background-color: #258ace;
  border-color: #217cb9;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-primary-outline,
.primary-outline {
  color: #3498db;
  background-color: transparent;
  border-color: #3498db;
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-primary-outline:hover,
.primary-outline:hover {
  background-color: rgba(0, 0, 0, 0);
  border-color: #2791d9;
}
.btn-primary-outline:active,
.primary-outline:active {
  color: #3498db;
  background-color: rgba(0, 0, 0, 0);
  border-color: #258ace;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-primary-outline:hover,
.primary-outline:hover {
  border-color: #3498db;
  color: #ffffff;
  background-color: #3498db;
}
.btn-primary-outline:active,
.primary-outline:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn-primary-gradient,
.primary-gradient {
  background: #3498db;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3498db), color-stop(1, #75b9e7));
  background: -ms-linear-gradient(bottom, #3498db, #75b9e7);
  background: -moz-linear-gradient(center bottom, #3498db 0%, #75b9e7 100%);
  background: -o-linear-gradient(#75b9e7, #3498db);
  background-image: linear-gradient(top, #3498db, #75b9e7);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#75b9e7', endColorstr='#3498db', GradientType=0);
  border-color: #3498db;
  color: #ffffff;
}
.btn-primary-gradient:hover,
.primary-gradient:hover {
  background: #3498db;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3498db), color-stop(1, #3498db));
  background: -ms-linear-gradient(bottom, #3498db, #3498db);
  background: -moz-linear-gradient(center bottom, #3498db 0%, #3498db 100%);
  background: -o-linear-gradient(#3498db, #3498db);
  background-image: linear-gradient(top, #3498db, #3498db);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3498db', endColorstr='#3498db', GradientType=0);
}
.btn-primary-gradient:active,
.primary-gradient:active {
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
}
.btn-danger,
.nav > li > a.btn-danger {
  color: #ffffff;
  background-color: #e74c3c;
  border-color: #e43725;
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-danger:hover,
.nav > li > a.btn-danger:hover {
  background-color: #e53f2e;
  border-color: #df2e1b;
}
.btn-danger:active,
.nav > li > a.btn-danger:active {
  color: #ffffff;
  background-color: #e43523;
  border-color: #d32b1a;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-danger-outline,
.danger-outline {
  color: #e74c3c;
  background-color: transparent;
  border-color: #e74c3c;
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-danger-outline:hover,
.danger-outline:hover {
  background-color: rgba(0, 0, 0, 0);
  border-color: #e53f2e;
}
.btn-danger-outline:active,
.danger-outline:active {
  color: #e74c3c;
  background-color: rgba(0, 0, 0, 0);
  border-color: #e43523;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-danger-outline:hover,
.danger-outline:hover {
  border-color: #e74c3c;
  color: #ffffff;
  background-color: #e74c3c;
}
.btn-danger-outline:active,
.danger-outline:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn-danger-gradient,
.danger-gradient {
  background: #e74c3c;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e74c3c), color-stop(1, #ef8b80));
  background: -ms-linear-gradient(bottom, #e74c3c, #ef8b80);
  background: -moz-linear-gradient(center bottom, #e74c3c 0%, #ef8b80 100%);
  background: -o-linear-gradient(#ef8b80, #e74c3c);
  background-image: linear-gradient(top, #e74c3c, #ef8b80);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef8b80', endColorstr='#e74c3c', GradientType=0);
  border-color: #e74c3c;
  color: #ffffff;
}
.btn-danger-gradient:hover,
.danger-gradient:hover {
  background: #e74c3c;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e74c3c), color-stop(1, #e74c3c));
  background: -ms-linear-gradient(bottom, #e74c3c, #e74c3c);
  background: -moz-linear-gradient(center bottom, #e74c3c 0%, #e74c3c 100%);
  background: -o-linear-gradient(#e74c3c, #e74c3c);
  background-image: linear-gradient(top, #e74c3c, #e74c3c);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e74c3c', endColorstr='#e74c3c', GradientType=0);
}
.btn-danger-gradient:active,
.danger-gradient:active {
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
}
.btn-info,
.nav > li > a.btn-info {
  color: #ffffff;
  background-color: #34c1db;
  /* border-color: #25b6d1; */
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-info:hover,
.nav > li > a.btn-info:hover {
  background-color: #27bdd9;
  border-color: #23aac4;
}
.btn-info:active,
.nav > li > a.btn-info:active {
  color: #ffffff;
  background-color: #25b4ce;
  border-color: #21a1b9;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-info-outline,
.info-outline {
  color: #34c1db;
  background-color: transparent;
  border-color: #34c1db;
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-info-outline:hover,
.info-outline:hover {
  background-color: rgba(0, 0, 0, 0);
  border-color: #27bdd9;
}
.btn-info-outline:active,
.info-outline:active {
  color: #34c1db;
  background-color: rgba(0, 0, 0, 0);
  border-color: #25b4ce;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-info-outline:hover,
.info-outline:hover {
  border-color: #34c1db;
  color: #ffffff;
  background-color: #34c1db;
}
.btn-info-outline:active,
.info-outline:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn-info-gradient,
.info-gradient {
  background: #34c1db;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #34c1db), color-stop(1, #75d5e7));
  background: -ms-linear-gradient(bottom, #34c1db, #75d5e7);
  background: -moz-linear-gradient(center bottom, #34c1db 0%, #75d5e7 100%);
  background: -o-linear-gradient(#75d5e7, #34c1db);
  background-image: linear-gradient(top, #34c1db, #75d5e7);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#75d5e7', endColorstr='#34c1db', GradientType=0);
  /* border-color: #34c1db; */
  border-color: rgba(0,0,0,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  color: #ffffff;
}
.btn-info-gradient:hover,
.info-gradient:hover {
  background: #34c1db;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #34c1db), color-stop(1, #34c1db));
  background: -ms-linear-gradient(bottom, #34c1db, #34c1db);
  background: -moz-linear-gradient(center bottom, #34c1db 0%, #34c1db 100%);
  background: -o-linear-gradient(#34c1db, #34c1db);
  background-image: linear-gradient(top, #34c1db, #34c1db);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#34c1db', endColorstr='#34c1db', GradientType=0);
}
.btn-info-gradient:active,
.info-gradient:active {
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
}
.btn-warning,
.nav > li > a.btn-warning {
  color: #ffffff;
  background-color: #f39c12;
  border-color: #e08e0b;
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-warning:hover,
.nav > li > a.btn-warning:hover {
  background-color: #ea940c;
  border-color: #d2850b;
}
.btn-warning:active,
.nav > li > a.btn-warning:active {
  color: #ffffff;
  background-color: #de8c0b;
  border-color: #c57d0a;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-warning-outline,
.warning-outline {
  color: #f39c12;
  background-color: transparent;
  border-color: #f39c12;
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-warning-outline:hover,
.warning-outline:hover {
  background-color: rgba(0, 0, 0, 0);
  border-color: #ea940c;
}
.btn-warning-outline:active,
.warning-outline:active {
  color: #f39c12;
  background-color: rgba(0, 0, 0, 0);
  border-color: #de8c0b;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-warning-outline:hover,
.warning-outline:hover {
  border-color: #f39c12;
  color: #ffffff;
  background-color: #f39c12;
}
.btn-warning-outline:active,
.warning-outline:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn-warning-gradient,
.warning-gradient {
  background: #f39c12;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f39c12), color-stop(1, #f7ba5b));
  background: -ms-linear-gradient(bottom, #f39c12, #f7ba5b);
  background: -moz-linear-gradient(center bottom, #f39c12 0%, #f7ba5b 100%);
  background: -o-linear-gradient(#f7ba5b, #f39c12);
  background-image: linear-gradient(top, #f39c12, #f7ba5b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7ba5b', endColorstr='#f39c12', GradientType=0);
  border-color: #f39c12;
  color: #ffffff;
}
.btn-warning-gradient:hover,
.warning-gradient:hover {
  background: #f39c12;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f39c12), color-stop(1, #f39c12));
  background: -ms-linear-gradient(bottom, #f39c12, #f39c12);
  background: -moz-linear-gradient(center bottom, #f39c12 0%, #f39c12 100%);
  background: -o-linear-gradient(#f39c12, #f39c12);
  background-image: linear-gradient(top, #f39c12, #f39c12);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f39c12', endColorstr='#f39c12', GradientType=0);
}
.btn-warning-gradient:active,
.warning-gradient:active {
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
}
.btn-success,
.nav > li > a.btn-success {
  color: #ffffff;
  background-color: #2ecc71;
  border-color: #29b765;
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-success:hover,
.nav > li > a.btn-success:hover {
  background-color: #2bc06a;
  border-color: #26ab5f;
}
.btn-success:active,
.nav > li > a.btn-success:active {
  color: #ffffff;
  background-color: #29b564;
  border-color: #24a059;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-success-outline,
.success-outline {
  color: #2ecc71;
  background-color: transparent;
  border-color: #2ecc71;
  /* .box-shadow(inset 0px 1px 0 rgba(255,255,255,.5)); */
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.btn-success-outline:hover,
.success-outline:hover {
  background-color: rgba(0, 0, 0, 0);
  border-color: #2bc06a;
}
.btn-success-outline:active,
.success-outline:active {
  color: #2ecc71;
  background-color: rgba(0, 0, 0, 0);
  border-color: #29b564;
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  outline: 0;
}
.btn-success-outline:hover,
.success-outline:hover {
  border-color: #2ecc71;
  color: #ffffff;
  background-color: #2ecc71;
}
.btn-success-outline:active,
.success-outline:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn-success-gradient,
.success-gradient {
  background: #2ecc71;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2ecc71), color-stop(1, #69dd9a));
  background: -ms-linear-gradient(bottom, #2ecc71, #69dd9a);
  background: -moz-linear-gradient(center bottom, #2ecc71 0%, #69dd9a 100%);
  background: -o-linear-gradient(#69dd9a, #2ecc71);
  background-image: linear-gradient(top, #2ecc71, #69dd9a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#69dd9a', endColorstr='#2ecc71', GradientType=0);
  border-color: #2ecc71;
  color: #ffffff;
}
.btn-success-gradient:hover,
.success-gradient:hover {
  background: #2ecc71;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2ecc71), color-stop(1, #2ecc71));
  background: -ms-linear-gradient(bottom, #2ecc71, #2ecc71);
  background: -moz-linear-gradient(center bottom, #2ecc71 0%, #2ecc71 100%);
  background: -o-linear-gradient(#2ecc71, #2ecc71);
  background-image: linear-gradient(top, #2ecc71, #2ecc71);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ecc71', endColorstr='#2ecc71', GradientType=0);
}
.btn-success-gradient:active,
.success-gradient:active {
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.25);
}