teagles / ChoiceCastings.com

@charset 'utf-8';

@import 'settings';
@import 'foundation6/foundation';

@include foundation-global-styles;
@include foundation-grid;

@include foundation-typography;
@include foundation-forms;
@include foundation-button;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;

@import 'slide-show';

body, html {
    height: 100%;
    background: none;
}

html {
  background: image-url('/images/body-bg.png') repeat;
}

.content {
  background: #fff;
  padding: rem-calc(10);
}

.content.page {
  margin: rem-calc(10);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  // font-size: 1.4rem;

  @include breakpoint(small only) {
    // font-size: 1.2rem;
  }

  h1 {
    color: $white;
    background: #4D5D66;
    text-transform: uppercase;
    text-align: center;
  }

   ul, ol {
    overflow: hidden;
    padding-left: rem-calc(25);

    li {
      list-style-position: outside;
    }
  }

  .featured_image {
    float: left;
    margin: 0 rem-calc(10) rem-calc(10) rem-calc(5);

    img {
      border: solid 4px #fefefe;
      // box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
  }
}

.row.wide {
  max-width: rem-calc(1200);
}

.row.services {
  background-color: #E1E2E4;
}

.row.stock-items {
  background-color: #E1E2E4;
}
.top-bar {
  box-shadow: 0 1px 2px rgba(0,0,0,0.24);
  // background-color: #201E1F;
  @include breakpoint(small only) {
    .top-bar-left {
      text-align: center;
    }
  }

  .top-bar-right {
    text-align: right;

    .menu {
      text-align: left;
    }
  }


  .contact-bar {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: 0 0 12px 12px;
    background-color: $primary-color;
    color: $white;
    font-weight: bold;
    text-align: center;

    a:hover {
      color: $white;
      text-decoration: underline;
    }

    @include breakpoint(small only) {
      width: 100%;
      border-radius: 0;
      // text-align: right;
    }
  }

  .title-bar {
    text-align: left;
  }

  .logo img {
    max-width: 225px;
  }

  a {
    color: $white;
  }

  a:hover {
    color: $primary-color;
  }
}

body.index {
  .banner {
    height: 350px;
    @include breakpoint(small only) {
      height: 250px;
    }
  }
}

.banner {
  position: relative;
  height: 250px;
  background: image-url('/images/banner-1.jpg') top center no-repeat;
  background-size: cover;

  @include breakpoint(small only) {
    height: 200px;
  }

  p.lead {
    @include absolute-center;
    color: $white;
    font-weight: bold;
    font-size: rem-calc(45);
    background: rgba(0,0,0, 0.75);
    padding: rem-calc(10);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    @include breakpoint(medium only) {
      width: 90%;
    }

    @include breakpoint(small only) {
      width: 90%;
      font-size: rem-calc(25);
    }
  }
}


.card {
  .title {
    background: linear-gradient(#4D5D66, #687B86); /* Standard syntax */
    background: #4D5D66; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#4D5D66, #687B86); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#4D5D66, #687B86); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#4D5D66, #687B86); /* For Firefox 3.6 to 15 */

    color: $white;

    p.lead {
      font-weight: bold;
      font-size: rem-calc(28);
    }

    a {
      color: $white;
    }
  }
}

.clickable, .pointer {
  cursor: pointer;
}

img.shadow {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

img.float-left {
  margin-right: rem-calc(10);
  margin-bottom: rem-calc(10);
}

footer {
  padding-top: rem-calc(10);
  background: $topbar-background;
  color: $white;

  .menu a {
    font-weight: bold;
  }

  .menu a, .menu .button {
    padding: 0.2rem 1rem;
  }

  .menu.nested {
    margin-left: 0.5rem;

    a {
      font-size: 0.85rem;
      font-weight: normal;
    }
  }
}

textarea {
  min-height: 200px;
}