//
// Imports
// --------------------------------------------------


// Bootstrap imports
// -------------------------

// Core variables and mixins
@import "../../../vendor/twbs/bootstrap/less/mixins.less";
@import "../../../vendor/twbs/bootstrap/less/variables.less";
@import "variables.less";

// Reset and dependencies
@import "../../../vendor/twbs/bootstrap/less/normalize.less";
@import "../../../vendor/twbs/bootstrap/less/print.less";
// @import "../../../vendor/twbs/bootstrap/less/glyphicons.less"; //we use font-awesome, see below

// Core CSS
@import "../../../vendor/twbs/bootstrap/less/scaffolding.less";
@import "../../../vendor/twbs/bootstrap/less/type.less";
@import "../../../vendor/twbs/bootstrap/less/code.less";
@import "../../../vendor/twbs/bootstrap/less/grid.less";
@import "../../../vendor/twbs/bootstrap/less/tables.less";
@import "../../../vendor/twbs/bootstrap/less/forms.less";
@import "../../../vendor/twbs/bootstrap/less/buttons.less";

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

// Components w/ JavaScript
@import "../../../vendor/twbs/bootstrap/less/modals.less";
@import "../../../vendor/twbs/bootstrap/less/tooltip.less";
@import "../../../vendor/twbs/bootstrap/less/popovers.less";
@import "../../../vendor/twbs/bootstrap/less/carousel.less";

// Utility classes
@import "../../../vendor/twbs/bootstrap/less/utilities.less";
@import "../../../vendor/twbs/bootstrap/less/responsive-utilities.less";

// Bewelcome imports
// -------------------------

//Font-awesome
@import "../../../vendor/components/font-awesome/less/font-awesome.less";

// select2
@import (less) "../../../vendor/select2/select2/dist/css/select2.css";

//select2 bootstrap them
@import (less) "../../../node_modules/select2-bootstrap-theme/dist/select2-bootstrap.css";

// Bewelcome general layout elements
// --------------------------------------------------
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 120px;
  background: url("../../images/bggrey.png") repeat-x scroll left top #F7F7F7;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 120px;
  background-color: #555;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
// Bewelcome body styles
// -------------------------

.navbar {
  font-weight: bold;
  color: white;
  background: #f37000;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}
.navbar-fixed-top {
}
.dropdown-menu {
  border:none;
}
.dropdown-menu {
  > li {
    background: #333;
    background: rgba(3,3,3,0.8);
  }
  > li > ul {
    background: #333;
    background: rgba(3,3,3,0.8);
  }
  > li > a {
    font-weight: bold;
    color: white;
  }
}
.navbar-brand {
  padding: 5px;
}
.navbar-nav {
  > li > a {
    font-weight: bold;
    color: #fff;
  }
}

.navbar-left {
  > li {
    border-left: 1px solid white;
  }
  > li:last-child {
    border-left: 1px solid white;
    border-right: 1px solid white;
  }
}
.navbar-username {
  padding-left:0px;
  > p {
   border-left: 1px solid #fff;
   padding-left: 15px;
   font-size: @font-size-base;
   }
}
  
// Bewelcome teaser styles
// ------------------------

// Grey line below the teaser and smaller font-size for small screens
.page-teaser {
  border-bottom: 1px solid #EEEEEE;
  margin: 30px 0 -1px;
  > h1 {
    font-size: ceil((@font-size-base * 1.7));
    @media (min-width: @screen-sm-min) {
      font-size: (@font-size-h1);
    }
  }
}

// Bewelcome submenu styles
// -------------------------

.submenu {
  margin-bottom: 1.5em;
}

footer { height:8em;
  position:absolute;
  bottom:0;
  border-top: 1px solid white;
  background-color: #646464;
  width: 100%;
padding: 1em;}
footer a {margin: 0.1em 0 0 0; padding: 0.2em 0 0 0; color:#999; font-weight: normal; text-align: left; white-space: nowrap; }
footer a:hover { text-decoration:underline; }
footer a:focus { text-decoration:underline; }
footer .linklist {padding-top: 0.2em;}  
//#footer { padding: 2.5em 4em; color:#666; border-top: 5px #efefef solid; }

// Bewelcome login and login widget styles
// -------------------------

#login-widget {
    padding: 1em;
    padding-top: 0;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    margin: 0 auto;
    max-width: 360px;
}
.form-signin {
    margin: 0 auto;
    max-width: 330px;
    padding: 15px;
}
.form-signin .form-signin-heading, .form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 16px;
    height: auto;
    padding: 10px;
    position: relative;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="text"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -1px;
}
.form-signin input[type="password"] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 10px;
}

.dividerbox {
    border-bottom: solid #DFDFDF;
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 20px;
}
.ordivider {
    background-color: #F5F5F5;
    color: #666666;
    left: 40%;
    position: absolute;
    text-align: center;
    bottom: -11px;
    text-transform: uppercase;
    width: 60px;
}
// Bewelcome pagination and button styles
// -------------------------

.pagination-nomargin {
  margin: 0;
}
.button, input.button, .control-links a, .control-links input, a.cancel {
  .btn;
  .btn-default;
  border-color: #E5E5E5 #BBBBBB #BBBBBB #E5E5E5;
  border-style: solid;
  border-width:1px;
}

// Bewelcome typo styles
// -------------------------

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 0;
}

// Bewelcome grid styles
// -------------------------

.subcolumns {
  .make-row();
}

.c50l {
.make-sm-column(6);
}
.c50r {
.make-sm-column(6);
}

.c66l {
.make-sm-column(8);
}
.c33r {
.make-sm-column(4);
}

.c33l {
.make-sm-column(4);
}
.c66r {
.make-sm-column(8);
}
.c75l {
.make-sm-column(9);
}
.c25r {
.make-sm-column(3);
}

.c25l {
.make-sm-column(3);
}
.c75r {
.make-sm-column(9);
}
.c62l {
.make-sm-column(7);
}
.c38r {
.make-sm-column(5);
}

.c38l {
.make-sm-column(5);
}
.c62r {
.make-sm-column(7);
}

// ******************
// Full width col3 layout will be implemented with:
//
//        protected function getColumnNames()
//    {
//        return array('col3');
//    }
//
// This way is needed as a 12 columns grid does not need any markup. 
// To be backward compatible we create a grid with current BW semantic in less:
// Default: col1 or col 2 as left sidebar, col3 as main content.
//******************
#col1{
.make-xs-column(12);
.make-xs-column-push (0);
.make-sm-column(4);
.make-sm-column-push (8);
.make-md-column(3);
.make-md-column-push (9);
.make-lg-column(3);
.make-lg-column-push (9);
}

#col2{
.make-xs-column(12);
.make-xs-column-push (0);
.make-sm-column(4);
.make-sm-column-push (8);
.make-md-column(3);
.make-md-column-push (9);
.make-lg-column(3);
.make-lg-column-push (9);
}
#col3{
.make-xs-column(12);
.make-xs-column-pull (0);
.make-sm-column(8);
.make-sm-column-pull (4);
.make-md-column(9);
.make-md-column-pull (3);
.make-lg-column(9);
.make-lg-column-pull (3);
}
// Custom: col1_left or col 2_left as left sidebar, col3_right as main content (example: profile)
#col1_left{
.make-xs-column(12);
.make-sm-column(4);
.make-md-column(3);
.make-lg-column(3);
}
#col2_left{
.make-xs-column(12);
.make-sm-column(4);
.make-md-column(3);
.make-lg-column(3);
}
#col3_right{
.make-xs-column(12);
.make-sm-column(8);
.make-md-column(9);
.make-lg-column(9);
}

// Bewelcome helper styles
// -------------------------
.bw-row {
  padding: .5em 0;
}

.white-text {
  color: #fff;
}

th, td {
    padding: 0.5em;
}

//
// Bewelcome build (app) specific styles
// --------------------------------------------------


// Bewelcome signup styles
// -------------------------

// Custom BeWelcome signup progress bar
.progress-bar > .bw-progress > a {
  color: #fff;
  display: block;
}
// Custom BeWecome collapse panel for signup
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'FontAwesome';  /* essential for FontAwesome */
    content: "\f077";    /* adjust as needed */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f078";    /* adjust as needed */
}

// Bewelcome startpage styles
// -------------------------

#BeWelcome  {
   opacity:0;
  .animation(fadein 3.5s ease-in 1);
   animation-fill-mode:forwards;
   -webkit-animation-fill-mode:forwards;
}

#opendoor {
   opacity:0;
  .animation(fadein 2.5s ease-in 1.5s 1);
   animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.map {
  height: 300px;
}

.map > #progress {
  position: absolute;
  width: 40%;
  height: 30px;
  top: 50%;
  left: 50%;
  margin-left: -20%;
  margin-top: -1em;
  z-index: 1000;
}

.map > #progress > #progress-label {
  position: absolute;
  left: 50%;
  margin-left: -50%;
  top: 5px;
  height: 20px;
}


