// ----
// libsass (v3.2.5)
// ----

$site-font-family: "Open Sans";
$site-font-size-default: 1.4rem;
$site-font-size-small: 1.1rem;

$site-font-weight-light: 300;
$site-font-weight-bold: 900;

$btn-default-bg-color: #EEE;
$btn-cta-bg-color: #5396CF;
$btn-danger-bg-color: #C13000;

$site-bg-color: #E4DDCF;
$site-nav-bg-color: #555;

$site-control-bg-color: #5396CF;

@function btn-hover($n) {
  @return darken($n, 5%);
}

@function shadow($n) {
  $shadow-dims: 0px 2px 0px;

  @return $shadow-dims darken($n, 10%);
}

html {
  font-size: 62.5%;
}

body {
  font: $site-font-size-default $site-font-family;
}

.btn {
  border: 0;
  font-size: $site-font-size-small;
  font-weight: $site-font-weight-bold !important;
  text-transform: uppercase;
}

.btn-default {
  background-color: $btn-default-bg-color;
  box-shadow: shadow($btn-default-bg-color);
  color: #444;

  &:hover {
    background-color: btn-hover($btn-default-bg-color);
  }
}

/***
 *FILTER
 *** */

.filter-container {
  background-color: #555;
  color: #FFF;
}

.filter {
  background-color: #555;
  color: #FFF;
  top: 50px;
  bottom: 0;
  left: 0;
}

.filter.open {
  overflow-y: auto;
}

.filter-content {
  display: none;
}

.closed {
  width: 40px;
  z-index: 1000;

  /*apparently, this is needed */
}

.open {
  padding: 15px;
  padding-top: 0;
}

.filter-btn {
  cursor: pointer;
  background: #888;
  text-align: center;
  padding: 10px 0 5px 0;
}

.open .filter-btn {
  width: 40px;
  float: left;
  margin-left: -15px;
}

.filter-btn:hover {
  background: #777;
}

.closed label, .open label {
  cursor: pointer;
  text-transform: uppercase;
  font-family: "Open Sans";
  font-weight: 700;
}

.closed label {
  padding: 10px;
  padding-bottom: 4px;
}

.closed .filter-label {
  /*this is a better and more efficient way of displaying the label rotated
   *but needs to be tested cross-browser and for back compatability */
  /* Safari, Chrome */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);
  position: absolute;
  top: 52px;
  left: -17px;
}

.closed .filter-label:hover {
  background: #444;
}

.open .filter-label {
  display: block;
  margin-bottom: 10px;
  padding-left: 45px;
  padding-top: 10px;
  border-bottom: 1px solid #888;
  padding-bottom: 0px;
  margin-left: -15px;
  margin-right: -15px;
}

/*main content */
.main {
  padding-top: 15px;
  padding-left: 55px;

  /*offset for closed filter */
}

/***
 *RIBBON STYLE
 *** */

.ribbon {
  background-color: $site-control-bg-color;
  border-radius: 0px;
  margin: -15px;
  margin-bottom: 15px;
  padding: 20px 10px;
  box-shadow: shadow($site-control-bg-color);
}

.ribbon div {
  color: #FFF;
  text-align: center;
  border-left: 1px solid #FFF;
}

/*date container */
.ribbon div:first-child {
  text-align: left !important;
  border-left: 0px !important;
}

.ribbon-label {
  font-size: 1.8rem;
  font-weight: 300;
}

.ribbon-value {
  display: block;
  font-size: 2.5rem;
  font-weight: 300;
}

.ribbon .date {
  padding-top: 25px;
}