/*!==========================================================================
   Twitter Bootstrap
   ========================================================================== */


// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
//@import "bootstrap/print";
//@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

/*!==========================================================================
   Bootstrap Custom Styles
   ========================================================================== */


/* ======================== Acordions ======================== */

#accordion{margin-bottom: 40px;}
.accordion-group{
   margin-bottom: 10px;
   background-color: $gray-lighter;
   a.accordion-header{
      display: block; padding: 7px 18px;
      color: $gray-light;
      font-size: 16px; text-transform: uppercase;
      &:hover{background-color: $brand-primary; color: black; text-decoration: none;}
   }
   .accordion-body{
      padding: 20px 20px 7px 20px;
   }
}


/* ======================== Tabs ======================== */

ul.nav-tabs{
   border-bottom: 0;
   li{
      margin-bottom: 0;
      a{
         padding: 7px 18px; margin-right: 4px;
         font-size: 14px; text-transform: uppercase; color: $gray-light;
         border: 0; background-color: lighten($gray-lighter, 4%);
         &:active, &:focus{border: 0;}
      }
      &.active{
         a{
            border: 0; background-color: $gray-lighter; color: black;
            &:hover{background-color: $gray-lighter; border: 0;}
            &:focus{border: 0;}
         }
      }
      &.highlight{
         a{
            border: 0;
            background-color: $brand-primary; color: white;
            &:hover{background-color: darken($brand-primary, 10%);}
         }
      &.active.highlight a{background-color: darken($brand-primary, 10%); color: white;}
      }
   }
}
.tab-content{
   padding: 20px 20px 7px 20px;
   background-color: $gray-lighter;
}


/* ======================== Buttons ======================== */

.btn{
   padding: 7px 20px; text-transform: uppercase; border-width: 2px;
   &:active, &:focus, &:active:focus{outline: none; -webkit-box-shadow: none; box-shadow: none;}
}
.btn-lg{padding: 18px 25px;}
.btn-sm{padding: 5px 12px;}
.btn-default{
   &:hover{background-color: #edeef0; border-color: #edeef0;}
}
.btn-primary{
   border-color: 444649;
   &:hover{background-color: #000; border-color: #000;}
}
.btn-wider{padding-left: 60px; padding-right: 60px;}
.btn-wide{padding-left: 40px; padding-right: 40px;}
.btn-tall{padding-top: 15px; padding-bottom: 15px;}
.btn-fullwidth{width: 100%;}

/* ======================== Tables ======================== */

.table{
   >thead{
      >tr{
         >th{
            padding: 17px 20px;
            background-color: $gray-lighter; text-transform: uppercase;
            border-bottom-width: 1px; border-color: $gray-lighter; border-right-color: #dcdfe3;
            font-size: 15px;
            &:last-child{border-right-color: $gray-lighter;}
         }
      }
   }
   >tbody{
      >tr{
         >td{
            padding: 8px 20px;
            border-color: $gray-lighter;
            color: $gray-light;
         }
      }
   }
}


/* ======================== Panels, Wells ======================== */

.well, .panel{box-shadow: none; -webkit-box-shadow: none; border: 0;}
.well{
   padding-top: 40px; padding-bottom: 25px; margin-bottom: 40px;
   h3{
      font-size: 28px; font-weight: bold; margin-top: 16px; margin-bottom: 30px;
   }
   button{margin-bottom: 20px;}
}


/* ======================== Forms ======================== */

.form-group{margin-bottom: 30px;}
// .contact-form{margin-bottom: 30px;}
.form-control{
   box-shadow: none; -webkit-box-shadow:none; -webkit-transition:none; border: 0;
   &:focus{
      border-color: #d5d8dd;
      box-shadow: none; -webkit-box-shadow:none; -webkit-transition:none;
      background-color: #d5d8dd;
   }
}


/* ======================== Bootstrap Carousel ======================== */

.carousel{
   //margin-top: 30px;
   .carousel-indicators{
      bottom: 2%; margin-bottom: 0;
      li{
         border: 2px solid white; margin: 0 2px;
         width: 8px; height: 8px;
         background-color: black;
         &.active{margin: 0 2px; background-color: white;}
      }
   }

   .carousel-control{
      width: 10%; min-width: 22px;
      &.left, &.right{
         span{
            display: block; position: absolute; top: 50%; width: 15px; height: 31px; margin-left: -7px; margin-top: -15px;
            background: url(assets/img/slider_arrows.png) 0 0 no-repeat;
         }
      }
      &.right span{background-position: -15px 0; right: 30%; margin-right: -7px; }
      &.left span{left: 30%; }
   }
}

#carousel-single-post{margin-top: 30px;}

.carousel-testimonials{

   .carousel{padding: 0 30px;}

   .carousel-indicators{
      position: static;
      width: auto;
      margin-left: 0; margin-top: 7px;
      li{
         border: 0; margin: 0 2px;
         width: 12px; height: 12px;
         background-color: #c0c2c8;
         &.active{margin: 0 2px; background-color: $brand-primary;}
      }
   }

   .carousel-control{
      width: 22px; opacity: 1;
      &.left, &.right{
         background: none;
         span{
            display: block; position: absolute; left: 50%; top: 20%; width: 22px; height: 41px; margin-left: -11px;
            background: url(assets/img/carousel_controls.png) 0 0 no-repeat;
         }
      }
      &.right span{background-position: -22px 0;}
   }
}