@import "variables.less";
@import "mixins.less";

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #444;
  line-height: 1.5em;
}

body, p {
    font-family: "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1;letter-spacing: -1px;
}

h3 {
    padding:40px 0 10px;
    margin: 0 0 20px;
    border-bottom: 1px solid #eee;
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    letter-spacing: 0;
}

#main-content li {
    padding: 5px 0;
}
/* Featurettes
------------------------- */

.divider {
  margin: 50px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
  padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
  overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
  margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}

/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
  margin-right: 40px;
}
.featurette-image.pull-right {
  margin-left: 40px;
}

/* Thin out the marketing headings */
.featurette-heading {
  font-size: 50px;font-weight: 300;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 979px) {
  .featurette {
    height: auto;
    padding: 0;
  }
  .featurette-image.pull-left,
  .featurette-image.pull-right {
    display: block;
    float: none;
    max-width: 40%;
    margin: 0 auto 20px;
  }
}


@media (max-width: 767px) {
  .featurette-heading {
    font-size: 30px;
  }
  .featurette .lead {
    font-size: 18px;
    line-height: 1.5;
  }
}

/** Shadows
-------------------------------------------------------------- */
.dropshadow {
    position: relative;.mb();
    &:before, &:after {
        content: "";position: absolute;
    }
}
.shadow1, .shadow2, .shadow3 {
    &:before, &:after {
        width: 50%;max-width:300px;background: rgba(0, 0, 0, 0.7);
        top: 80%;bottom: 15px;left: 10px;
        .box-shadow(0 15px 10px rgba(0, 0, 0, 0.7));
        .rotate(-3deg);
    }   
    &:after {
        right: 10px;left: auto;
        .rotate(3deg);
    }
}
.shadow4, .shadow5 {
    &:before, &:after {
        width: 50%;height: 100%;
    }
    &:before {
        top:10%;left: 0;width: 100%;height:80%;
        .border-radius(~"12px / 65px");
        .box-shadow(0 0 10px #555);
    }
}
.shadow5:before {
    top: 10px;left: 8px;width: 30%;height:80%;
    .box-shadow(-7px 0 10px #555);
    .rotate(-5deg);
}
.shadow6, .shadow7 {    
    &:before, &:after {
        left: 5%;width: 90%;height: 50px;
        .border-radius(~"125px / 12px");
        .box-shadow(0 0 8px #555);  
    }
    &:before { top: 0; }
    &:after { bottom: 0}
}
.shadow2:before, .shadow3:after, .shadow4:after, .shadow5:after, .shadow7:before { 
    display: none
}

.fancy_x {
    background:#111 url(../img/fancy_overlay.png) repeat-x 0 0;
}
.greenforest, .ba-greenforest::before, .ba-greenforest::after {
    background-color: #189800 !important;
    border-color: #189800 !important;
}
.yellow {
    color: #ffc40d;
}
.box {
    .box-title {
        padding: 10px 20px;text-transform: uppercase;letter-spacing: 1px;line-height: 10px;margin: 0;
        color:#fff;background-color:#fff;border: 1px solid #444;
        position: relative;
        
        & [class^="icon-"]:before, & [class*=" icon-"]:before {
            font-size: 16px;position: relative;top:1px;left: -5px;
        }
    }
    .box-content {
        background-color:#fefefe;border: 1px solid #e5e5e5;
        padding:20px 20px 10px;position: relative;z-index: 2
    }
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

.navbar {
    /* Remove border and change up box shadow for more contrast */
    .navbar-inner {
      border: 0;
      .box-shadow(0 2px 10px rgba(0,0,0,.25));
    }
    
    /* Downsize the brand/project name a bit */
    .brand {
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }
    
    li.dropdown:hover > ul.dropdown-menu{
        display: block;
    }
    .dropdown-menu {
        margin-top: 0px;
    }
}

.introduction {
    background: #4ea6ea;
    color: #000;
    padding: 53px 0 31px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    
    header {
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);text-align: center;
        padding: 21px 0;line-height: 1;color:#fff;
    }
    
    h1 {
        font-size: 6em;text-transform: uppercase;font-family: "Open Sans";
    }
    h2 {
        font-size:2em;font-style: italic;padding-top: 11px;font-family: "Open Sans";
    }
}
.teaser {
    font-size: 3em;
    text-shadow: 0 0 1px #333;
    width: 300px;
    margin: -30px auto 0;
    background: #fff;
    padding: 20px;
    .box-shadow(0 2px 6px #999);
    text-align: center;
    .border-radius(10px);
}
.section-offset {
    margin-left: 50px;
}

.pr5 {
    padding-right: 5px;
}

li .alert {
margin: 10px 0 0;
}
.alert {
padding-right: 14px;
line-height: 1.4em;
font-size: 0.9em;
}

.label {
    position: relative;top: -1px;
}
.back-top {
    position: fixed;
    bottom: 25px;
    right: 30px;
    background: #4ea6ea;
    display: block;
    padding: 4px 6px;
    .border-radius(4px);
    color: #fff;
    font-size: 20px;
    
    &:hover {
        color: #fff;text-decoration: none;
    }
}

.btn-hero {
    display: block;
    width: auto;
    padding: 19px 24px;
    margin-bottom: 27px;
    font-size: 30px;
    line-height: 1;
    text-align: center;
    .border-radius(6px);
}