/**
 * importer.less
 *
 * By default, new Sails projects are configured to compile this file
 * from LESS to CSS.  Unlike CSS files, LESS files are not compiled and
 * included automatically unless they are imported below.
 *
 * The LESS files imported below are compiled and included in the order
 * they are listed.  Mixins, variables, etc. should be imported first
 * so that they can be accessed by subsequent LESS stylesheets.
 *
 * (Just like the rest of the asset pipeline bundled in Sails, you can
 * always omit, customize, or replace this behavior with SASS, SCSS,
 * or any other Grunt tasks you like.)
 */

// For example:
//
// @import 'variables/colors.less';
// @import 'mixins/foo.less';
// @import 'mixins/bar.less';
// @import 'mixins/baz.less';
//
// @import 'styleguide.less';
// @import 'pages/login.less';
// @import 'pages/signup.less';
//
// etc.

html, body {
  text-align: left;
  font-size: 1em
}

html, body, img, form, textarea, input, fieldset, div, p, div, ul, li, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, code {
  margin: 0;
  padding: 0
}

ul, li {
  list-style: none
}

img {
  display: block
}

a img {
  border: 0
}

a {
  text-decoration: none;
  font-weight: normal;
  font-family: inherit
}

*:active, *:focus {
  outline: 0;
  -moz-outline-style: none
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal
}

div.clear {
  clear: both
}

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden
}

body {
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 300;
}

.top-bar {
  width: 100%;
  background-color: #e4f0f1;
  padding: 15px 0;
}

.top-bar .container img {
  float: left;
}

.top-bar .container ul {
  float: right;
  padding-top: 25px;
}

.top-bar .container li {
  float: left;
  width: 125px;
  text-align: center;
  font-size: 15px;
  color: #000;
  font-weight: 600;
}

.top-bar .container a li:hover {
  color: #118798;
  -webkit-transition: color 200ms;
  -moz-transition: color 200ms;
  -o-transition: color 200ms;
  transition: color 200ms;
}

.container {
  width: 80%;
  max-width: 1200px;
  margin: auto;
}

div.header {
  -webkit-transition: 6s;
  -moz-transition: 6s;
  -o-transition: 6s;
  transition: 6s;
  background: rgba(4, 36, 41, 0.89) url(http://sailsjs.org/images/img_sailsShadow.png) no-repeat 42% bottom;
  padding: 100px 0 65px;
}

.header h1#main-title {
  color: #fff;
  font-weight: 300;
  font-size: 2.5em;
}

.header h3 {
  color: #b1eef7;
  font-style: italic;
  font-weight: 300;
}

.header h3 code {
  font-style: normal !important;
  background-color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  color: #0e6471;
  margin: 0px 5px;
}

div.main.container {
  padding: 50px 0;
}

h1 {
  color: #118798;
  font-weight: 300;
}

code {
  font-size: inherit;
  font-family: 'Consolas', 'Monaco', monospace;
  padding: 4px 5px 1px;
  background-color: #f3f5f7
}

a {
  color: #118798;
  font-weight: 300;
  text-decoration: underline;
}

a:hover {
  color: #0e6471;
  -webkit-transition: color 200ms;
  -moz-transition: color 200ms;
  -o-transition: color 200ms;
  transition: color 200ms;
}

p {
  line-height: 1.5em;
}

blockquote {
  background-color: #e4f0f1;
  padding: 25px;
  line-height: 1.5em;
  margin: 15px 0;
}

blockquote span {
  font-weight: 600;
  padding-right: 5px;
}

.content {
  padding: 25px 75px 25px 0;
  width: 70%;
  float: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ul.getting-started li {
  padding: 25px 0;
}

ul.getting-started li h3 {
  padding-bottom: 10px;
  font-size: 25px;
  font-weight: 300;
}

.sprite {
  background: url(http://sailsjs.org/images/newapp.sprite.png) no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}

.getting-started .sprite {
  margin-left: 10px;
  padding-left: 60px;
  height: 42px;
  width: 0;
  float: left;
}

.getting-started .one {
  background-position: 0 0
}

.getting-started .two {
  background-position: 0 -42px
}

.getting-started .three {
  background-position: 0 -83px
}

div.step {
  position: relative;
  padding-left: 70px;
  opacity: 0.9;
}

div.step:hover {
  opacity: 1;
}

div.links {
  float: left;
  width: 30%;
  max-width: 325px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #f3f5f7;
  border: 1px solid #ebebeb;
  padding: 25px 45px 35px;
}

div.links h3 {
  color: #727272;
  text-align: center;
  font-size: 28px;
  font-weight: 300;
}

div.links h4 {
  color: #727272;
  font-size: 17px;
  font-weight: 600;
  padding: 15px 0 10px;
}

div.links .link-list a {
  text-decoration: none;
  font-weight: 400;
}

div.links .link-list a li {
  padding: 0px 0px 5px 10px;
}

div.default-page {
  min-width: 1200px;
}

.pocket {
  display: none;
}

.btn {
    display: inline-block;
    background: #001c20;
    color: #fff;
    border-radius: .3em;
    padding: .6em 1.2em;
    line-height: 1.2;
    border-radius: 6px;
    margin: 1em .1em;
    text-decoration: none;
}