///////////////////////////////////////////////
//
//  Adapta Mixins
//
///////////////////////////////////////////////

/* prefix declarations */
@mixin prefixed($property, $value) {
    -webkit-#{$property}: $value;
       -moz-#{$property}: $value;
        -ms-#{$property}: $value;
         -o-#{$property}: $value;
            #{$property}: $value;
}
/* Calculate fluid ratio based on two dimensions (width/height) */
@mixin fluid-ratio($large-size, $small-size) {
  $width-large: nth($large-size, 1);
  $width-small: nth($small-size, 1);
  $height-large: nth($large-size, 2);
  $height-small: nth($small-size, 2);
  $slope: ($height-large - $height-small) / ($width-large - $width-small);
  $height: $height-small - $width-small * $slope;

  padding-top: $slope * 100%;
  height: $height;

  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
}

////////////////////////////////////////////////////////////////////
//															      //
//		Old Styles from QSF4						//
//																    //
////////////////////////////////////////////////////////////////////

// MIXINS
// -----------------------------------------------------------------
@mixin font($weight: normal, $size: 1em, $lineheight: 1em, $fontfamily: $sans) {
  font: $weight #{$size}/#{$lineheight} $fontfamily;
}

@mixin gradient-vertical-stops($startColor: #555, $startStop: 0%, $endColor: #333, $endStop: 100%) {
  background-color: mix($startColor, $endColor, 60%);
  background-image: -moz-linear-gradient(top, $startColor $startStop, $endColor $endStop); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor $startStop), to($endColor $endStop)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, $startColor $startStop, $endColor $endStop); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, $startColor $startStop, $endColor $endStop); // Opera 11.10
  background-image: linear-gradient(to bottom, $startColor $startStop, $endColor $endStop); // Standard, IE10
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
}

@mixin remove-gradient() {
  background-color:transparent;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

@mixin hline($startColor: #B0BAC5, $midColor1: #9DA7B2, $midColor2: #919CA8, $endColor: #7E8A98) {
    background: $endColor;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: auto auto !important;
    background-size: 100% 100%;
    background: -moz-linear-gradient(top, $startColor 0%, $midColor1 50%, $midColor2 51%, $endColor 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$startColor), color-stop(50%,$midColor1), color-stop(51%,$midColor2), color-stop(100%,$endColor));
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#{$startColor}', endColorstr='#{$endColor}');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{$startColor}', endColorstr='#{$endColor}')";
}

// Transitions
@mixin transition($transition: all linear .1s) {
  -webkit-transition: $transition;
  -o-transition: $transition;
  -moz-transition: $transition;
  transition: $transition;
}


// Table minimal design
@mixin common-table($bgColor: lighten($system, 10%), $padding: 10px) {
  	th {
    background: $bgColor;
    @include ts(0 1px 0 rgb(255,255,255));
    color: $gray-dark;
    padding: $padding;
    border-right: 1px solid $system;
    border-bottom: 1px solid $system;
  }
  td {
    border-bottom: 1px solid $system;
    border-right: 1px solid $system;
    padding: 10px;
  }
}

@mixin adaptive-columns($columns) {
  float:left; 
  @include adaptive-columns-width($columns);
  @media all and (max-width:978px) {
    @include adaptive-columns-width($columns - 2);
  }
  @media all and (max-width:768px) {
    @include adaptive-columns-width($columns - 1);
  } 
  @media all and (max-width:560px) {
    @include adaptive-columns-width($columns - 2);
  }
  @media all and (max-width:460px) {
    @include adaptive-columns-width($columns - 3);
  } 
}

@mixin adaptive-columns-width($columns) {
  $gutter: 2%;
  $gutters: $columns * $gutter;
  margin-right: $gutter;
  width: ((100% - $gutters) / $columns);
}

.hardware-acceleration {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}


///////////////////////////////////////////////
//
//  OVERRIDE BOOTSTRAP RULES
//
///////////////////////////////////////////////

hr {margin:($baseLineHeight / 2) 0; border-color:#eee;}

.row-fluid [class*="span"] { min-height:1px;}

// Columns 
.clmn-to-right {float:right !important;}
.clmn-to-left {float:left !important; margin-left: 0 !important;}

// buttons
.btn-primary {
  @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight, #fff, 0px 1px 1px #5e9307);
  font-weight: 700; 
}
.btn-secondary {
  @include buttonBackground($accent-sec, darken($accent-sec, 5%), #fff, 0px 1px 1px darken($accent-sec, 10%));
  font-weight: 700; 
}

// forms 
form {margin: 0;}
input[type="file"] {
   height: auto; line-height: normal;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  color: darken($textColor, 15%);
}

// dropdowns
.caret {
  border-top: 6px solid $black;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}
.dropdown-menu {
  margin: 0;
  border: none; // Fallback for IE7-8
  border: none;
  *border-right-width: 0;
  *border-bottom-width: 0;
  @include border-radius(4px !important);
  @include box-shadow(none);
  .dropdown-menu {
    margin-left: 1px !important;
  }
}
.dropdown-submenu > a:after {margin-top: 7px;}

// nav pills 
.nav-pills.top-links { margin: $baseLineHeight/2 0;}
.nav-pills.top-links > li > a {background-color: $grayLighter;}

// navbar
#nav-main { 
  clear:right;
  > li:last-child > .dropdown-menu {left:auto; right:0;}
}
.navbar-static-top  .navbar-inner {
  @include border-radius(0);
  border-width: 0;
}
.navbar-search {
  .search-query {
    padding: 1px 12px;
    @include border-radius(12px);
  }
}
.navbar .nav .dropdown-toggle .caret {
  margin-top: 10px; margin-left: 4px;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  background-color: transparent;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  background-color: transparent;
  @include box-shadow(none);
}
.navbar .nav > li > .dropdown-menu {
  &:before, &:after {
    display: none;
  }
}
.navbar .pull-right > li > .dropdown-menu {
  left: 0;
  right: auto;
  .dropdown-menu {
    left: 100%;
    right: auto;
  }
}
.navbar-inverse {
  .nav > li > a:focus,
  .nav > li > a:hover {
    background-color: transparent;
  }
  .nav .active > a,
  .nav .active > a:hover,
  .nav .active > a:focus {  
    background-color: transparent;
  }
  .nav li.dropdown.open > .dropdown-toggle,
  .nav li.dropdown.active > .dropdown-toggle,
  .nav li.dropdown.open.active > .dropdown-toggle {
    background-color: transparent;
  }
  .navbar-search {
    .search-query {
      border: 0;
      @include box-shadow(inset 1px 1px 2px 1px rgba(0,0,0,.3));
      @include transition(width .35s ease-out);
      &:focus,
      &.focused {
        padding: 1px 12px;
        width: 150px;
        @include transition(width .35s ease);        
      }
    }
  }  
}

.table {
  th {
    font-weight: normal;
    font-size: $baseFontSize - 2;
    line-height: $baseFontSize;
    text-transform: uppercase;
    color: $grayDarker;
  }
  th.text-center, td.text-center {text-align: center;}
  th.text-right, td.text-right {text-align: right;}
}
///////////////////////////////////////////////


// TABLE
// -----------------------------------------------------------------

.grid, .linear_grid, .cms_container { 
  border-collapse:collapse; 
  border-spacing:0; 
  width:100%; 
  margin-bottom: 15px;
}

.grid {	
	th, td { border:solid silver 1px; padding:5px 8px;}
	th { 
    text-align:center; 
    font-weight:bold; 
    color:#000; 
    padding:7px 5px; 
    white-space:nowrap;
		a { color: darken($linkColor, 30%);}
	}
	tr td { background-color:$grayLighter;}
	tr.odd td { background-color:$white;}
	tfoot td { border-top:1px solid silver; background-color:#eee; text-align:right;}
}
.table {
  .grid_no, .grid_date, .grid_link_enum, .grid_options, 
  .cell_usage_count, .cell_id, 
  .grid_image, .grid_money, .grid_quantity, .grid_total, .grid_checkbox, .grid_members {text-align:center;}
  .grid_no {width:30px;}
  .cell_show {width:60px;}
  .cell_enabled, .cell_featured, .cell_sold_out {width:90px;}
  .grid_image { width: 150px;}
  .grid_options { width:120px; white-space:nowrap;}
  .grid_page_list {width:200px;}
  .cell_row_total, .cell_total {text-align: right;}
}
.linear_grid {
  margin-top: $baseLineHeight;
	th, td {border:solid silver 1px; padding:7px 5px;}
	th {font-weight:bold; text-align:right; color:#000; background-color: $tableBackgroundAccent; width:20%;}
	tfoot td {border-bottom:none; border-top:2px solid silver;}
	}

.table-linear {
  border-bottom: 1px solid $tableBorder;
  td.grid-label {
    background-color: $tableBackgroundAccent;
    width: 20%;
    font-weight: bold;
  }
}