@import '_variables.less';
@import '_mixins.less';

/*
Theme-Specific
------------------------------------------------*/

html, body {
  background: @bodyBackground;
}
body {
  font-family: @bodyCopyFont;
  color: @bodyCopyColor;
}
a, a:link {
  color: @linkColor;
}
a:hover {
  color: @linkHoverColor;
}

h1, h2, h3, h4, h5, h6 {
  color: @headingColor;
}
#footer-wrapper {
  h1, h2, h3, h4, h5, h6 {
    color: @black;
  }
}

// Headings
h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
}
h1 {
  font-family: @headlineFont;
}

h2 {
  font-family: @headlineFont;
  &.headline {
    color: @tan;
    a {
      color: @tan;
    }
  }
}

h3 { font-family: @headlineFont; }
h4 { font-family: @headlineFont; }
h5 { font-family: @headlineFont; }
h6 { font-family: @labelFont; }

.title-wrapper h1#page-title {
  @media (max-width: 768px) {
    font-size: 3em;
  }
}

// Buttons & labels
.button, a.button, a.button:link {
  background-color: @buttonColor;
  border-color: @buttonColor;
  color: @buttonTextColor;
  &.alt {
    background-color: @buttonAltColor;
    border-color: @buttonAltColor;
  }
  &.alt-2 {
    background-color: transparent;
    border-color: transparent;
    color: @red;
  }
  &:hover {
    background-color: @buttonHoverColor;
    border-color: @buttonHoverColor;
    color: @buttonTextColor;
    &.alt-2 {
      background-color: transparent;
      border-color: transparent;
      color: @green;
    }
  }
}
.label {
  color: @black;
}

// Panels
.panel {
  border-style: solid;
  border-width: 1px;
  border-color: @mediumTan;
  margin-bottom: 1.25em;
  padding: 1.25em;
  background: @mediumTan;
  .border-radius(5px);
}

/*
Age Verification
------------------------------------------------*/
body.page-age-verification {
  background: transparent url('../images/bg-age_verification-body-v2.png') no-repeat center 156px;
  @media (max-width: 600px) {
    background-color: @lightBrown;
    background-image: none;
  }
  #main-wrapper {

  }
  #content {
    @media (max-width: 600px) {
      width: 100%;
    }
    .inner {
      padding-top: 10px;
      .bg-age_verification-circle();
      background-image: url('../images/bg-age_verification-circle.png');
      background-position: center center;
      background-color: @lightBrown;
      border: 20px solid @tan;
      height: 515px; max-width: 515px;
      width: 515px;
      div.error {
        color: @black;
      }
      @media (max-width: 600px) {
        width: 95%;
        max-width: none;
        margin-top: @baseline;
        .border-radius(20px);
        height: auto;
        border: none;
        background-image: none;
      }
      .form-item-dob {
        .clearfix();
        h5 {
          color: @black;
          .logo {
            .ir();
            .logo-ottercreek();
          }
        }
        p {
          color: @black;
        }
      }
    }
  }
  #copyright {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: @tan;
  }
}

/*
Main Menu
------------------------------------------------*/
.sf-menu.menu.sf-horizontal {
  li {
    &:hover, &.sfHover {
      ul {
        li {
          background: @black;
          &.last {
            border-bottom-color: @tan;
          }
        }
      }
    }
    a {
      color: @navLinkColor;
      font-family: @labelFont;
      &:hover, &.active {
        color: @navLinkHoverColor;
      }
    }
    &.active-trail {
      a {
        color: @navLinkHoverColor;
      }
      ul li a {
        color: @navLinkColor;
        &.active {
          color: @navLinkHoverColor;
        }
      }
    }
  }
}

.sf-accordion-toggle {
  border-left-color: @tan;
  a {
    background-image: url('../images/ico-nav_pill.png');
    &.sf-expanded {
      background-color: @red;
    }
  }
}

.sf-menu.menu.sf-accordion {
  li {
  	// Edited by Corey
  	background: @red;
    a {
      color: @navLinkColor;
      font-family: @labelFont;
      border-top-color: #fff1cb;
      &:hover, &.active {
        color: black !important;
      }
    }
    &.sf-expanded {

    }
    &.active-trail {
      a {
        color: @navLinkColor;
      }
      ul li a {
        color: @navLinkColor;
        &.active {
          color: @navLinkColor;
        }
      }
    }
  }
}

// Layout
.row {
  max-width: 1250px;
}
.inner {
  background: @tan;
  padding: 0 20px;
  @media (max-width: 768px) {
    padding: 0;
  }
}
#header {
  border-bottom: @borderBottom;
  .box-shadow();
  .inner {
  	// Edited by Corey
    //height: @headerHeight;
    background-color: @tan;
	}
  .inner-wrapper {
    .bg-header();
    // Edited by Corey
    //height: 225px;
    @media (max-width: 768px) {
      background-color: @black !important;
      background-image: none;
    }
  }

  #site-name {
    margin-left: 10px;
    margin-bottom: 0;
    margin-top: 0;
    @media (max-width: 768px) {
      margin: 0 auto;
    }
  }

  .header-prefix {
    .top {
      border-bottom: 1px solid @darkTan;
      padding-bottom: 20px;
      padding-top: 20px;
      margin-bottom: 20px;
    }
    .bottom {
      position: relative;
      @media (max-width: 768px) {
        background: @lightBrown;
        min-height: 80px;
        // Edited by Corey
        border-top: 1px solid @tan;
        border-bottom: 1px solid @tan;
        box-shadow: 0 5px 5px rgba(0,0,0,.25);
      }
    }
    #site-slogan {
      float: left;
      width: 45%;
      padding-top: 10px;
      padding-right: 20px;
      color: @darkestBrown;
      font-family: @labelFont;
      text-transform: uppercase;
      text-align: right;
      height: 55px;
      border-right: 1px solid @darkTan;
    }
    .property-of {
      float: left;
      width: 27%;
      padding-top: 10px;
      text-align: center;
      color: @darkTan;
      font-family: @labelFont;
      text-transform: uppercase;
      height: 55px;
      border-right: 1px solid @darkTan;
      .property-label {
        margin-bottom: 5px;
        font-size: .7em;
        letter-spacing: 1px;
      }
      .first {

      }
      .last {
        border-left: 1px solid @tan;
        padding-left: 5px;
      }
      a {
        color: @tan;
        letter-spacing: 1px;
      }
    }
    .beer-finder {
      height: 55px;
      @media (max-width: 768px) {
        float: none;
        position: absolute;
        top: 5px; left: 15px;
      }
      a {
        .ir();
        .btn-beerfinder();
        margin: -10px auto 0 auto;
        &:hover {
          .btn-beerfinder-hover();
        }
        @media (max-width: 768px) {
          margin: 0;
        }
        @media (max-width: 600px) {
          text-indent: -9999px;
        }
      }
    }
  }
}

.node-type-landing-page, .page-distributors {
  #header {
    .inner-wrapper {
      background-color: @lightBrown;
    }
  }
  .title-wrapper {
    background-color: @lightBrown;
    h1#page-title {
      color: @tan;
    }
  }
}

#footer-wrapper {
	//Edited by Corey
	.connect-row {
		margin-bottom: @baseline*2;
	}
  #footer-callouts {
    background-color: @lightBrown;
    .view-footer-callouts {
      border-bottom-color: @footerCalloutBorder;
    }
    ul.callouts {
      li.callout {
        border-left-color: @footerCalloutBorder;

        a {
          @media (max-width: 768px) {
            border-bottom-color: @black;
          }
          h4 {
            color: @tan;
          }
          &:hover {
            h4 {
              color: @black;
            }
          }
        }
      }
    }
  }
  #footer-columns {
    background-color: @lightBrown;
  }
  // Newsletter Sign Up
  #newsletter-signup {
    .text {
      &:before {
        border-left-color: #a84a18;
      }
      input[type="text"] {
        background-color: #a84a18;
        color: @tan;
        &::-webkit-input-placeholder { /* WebKit browsers */
          color: @tan;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color: @tan;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
          color: @tan;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10+ */
          color: @tan;
        }
        .box-shadow(none);
      }
    }

    .submit {
      input[type="submit"] {
        background: @black;
        color: @tan;
        font-family: @labelFont;
        font-size: .75em;
        text-transform: uppercase;
        letter-spacing: 1px;
        &:hover {
          background: @green;
        }
      }
    }
  }

  // Footer
  #footer {
    background: @black;
    color: #584d3a;
    .copyright {
      font-size: .75em;
    }
  }


  #social {
    .views-row {
      .ico {
        color: @tan;
      }
      .field-content {
        a.url {
          color: @tan;
        }
      }
    }
  }
}

// Home
.view-homepage-content {
  .body {
    color: @tan;
  }
}
.view-homepage-content-2 {
  .row {
    background-color: @lightBrown;
  }
  .body {
    color: @tan;
  }
  .featured-image {
    text-align: center;
  }
}


.content-suffix {
  // Featured Event
  @media (max-width: 768px) {
    .view-featured-event {
      border-bottom: 1px solid #000;
      padding-bottom: @baseline*2; margin-bottom: @baseline*2;
    }
  }


  .left {
    h5, h3 {
      color: @green;
    }
    .links {
      font-family: @labelFont;
    }
  }
  .right {
    h3 {
      color: @red;
    }
  }
}

.view-title-body {
  .body {
    color: @tan;
  }
}


// Our Team
.view-our-team {
  .views-row {
    border-bottom-color: @black;
    margin-bottom: 40px;
    .name, .label {
      color: @green;
    }
    .favorite-beer {
      .beer-name {
        a {
          font-family: @labelFont;
        }
      }
    }
  }
}

/*
Partners & Sponsorships
------------------------------------------------*/
// Content
.view-partners-sponsorships {
  .views-row {
    border-bottom-color: @black;
    a {
      h3 {
        color: @red;
      }
      &:hover {
        h3 {
          color: @green;
        }
      }
    }
  }
}

//Sidebar
#block-block-3 {
  h4 {

  }
  p {

  }

}


/*
Awards
------------------------------------------------*/
#content-second {
  h5 {

  }

  .view-awards {
    .views-row {
      border-top-color: @black;
      &.views-row-last {
        border-bottom-color: @black;
      }
      .year {
        font-family: @labelFont;
      }
      .beer {
        font-family: @labelFont;
      }
      h5 {
        color: @black;
      }
    }
  }

}

/*
Distributors
------------------------------------------------*/
.view-distributors {
  ul.row {
    border-bottom-color: @black;
    li.views-row {

    }
  }
}
// Exposed filter
#views-exposed-form-distributors-page {
  label {
    font-family: @labelFont;
    color: @tan;
    letter-spacing: 1px;
  }
}

/*
Our Beers
------------------------------------------------*/
.view-our-beers {
  ul.row {
    .views-row {
      .availability {
        font-family: @labelFont;
      }
      // Edited by Corey
      @media (max-width: 320px) {
		    min-height: 350px;
		  }
    }
  }
}


/*
Beer Detail
------------------------------------------------*/

.node-type-beer {
  h1#page-title {
    margin-top: 0.15em;
  }
}

// Title Preface
.view-beer-preface {

}

// Specs
.view-beer-detail {
  .specs {
    .column {
      .content {
        background: @mediumTan;
        border-right-color: @tan;
      }
      .detail {
        font-family: @headlineFont;
      }
    }
  }
}

// Awards
.node-type-beer {
  .content-suffix {
    .left {
      h5.block-title {
        border-bottom-color: #ccc1a2;
      }
    }
  }
  .view-beer-images {
    .flex-control-thumbs {
      li {

        img {
          padding: 5px 10px;
          border: 1px solid @tan;
          &.flex-active {
            border: 1px solid @red;
          }
        }
      }
    }
  }
  .content-footer.row {
    .column {
      .content {
        &:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
        }
        background: @mediumTan;
        padding: 15px;

      }
    }
  }
}

/*
Events & Contests
------------------------------------------------*/
.events-contests {
  #content, #content-second {
    .views-row {
      border-top-color: @black;
      &.views-row-last {
        border-bottom-color: @black;
      }
      .links {
        font-family: @labelFont;
      }
    }

  }
}

// Contests and Careers
.node-type-career-opportunity,
.node-type-contest {
  h1#page-title {
    margin-top: 5px;
  }
}
#block-block-5,
#block-block-6 {
  p {
    margin-bottom: 0;
  }
  a {
    text-transform: uppercase;
    font-family: @labelFont;
    font-size: .85em;
    font-weight: bold;
  }
}

/*
Our Story
------------------------------------------------*/
.view-our-story {
  .view-content {
    .row {
      .copy {
        z-index: 2;
        .wrap {
          h2 {
            color: @tan;
            background-image: url('../images/logo-ottercreek-stamp.png');
          }
          background-color: rgba(0,0,0,.6);
          .body {
            color: @tan;
          }
        }
      }
      .parallax {

      }
    }
  }
  .views-row-first {
    .row {
      .copy {
        .wrap {
          h2 {
            background-image: none;
          }
        }
      }
    }
  }
}