
@import "compass/css3";

.teaser {
  font-size:1.3em;
  line-height:1.4em;
}

.highlight,
.highlight2 {
  padding:0em 0.2em;
  background:yellow;
}
.highlight2 {
  @include border-radius(5px);
  padding:0em 0.4em;
}

//
// Dividers
//

hr {
  clear:both;
}

.hr-toplink {
  text-align:right;
  float:right;
  margin-top:0.5em;
}

hr.invisible {
  border:none;
  outline:none;
  background:none;
  width:100%;
  height:2em;
}


a.sc-button {
  display: inline-block;
  zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
  *display: inline;
  @include box-sizing(border-box);
  outline: none;
  padding: .25em 0.75em .27em 0.75em;
  margin:0;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  @include border-radius(0.3em);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  line-height:1.6em;
  color: #fef4e9;
  border: solid 1px #bbb;
  background: #f78d1d;
  color:#fff;
  text-decoration:none!important;
  @include background-image(linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1)));
  &.sc-button-2 {font-size:1.3em;}
  &.sc-button-3 {font-size:1.8em;}
  &.sc-button-4 {font-size:2.5em;}
  &:hover, &:focus {
    text-decoration:none!important;
    @include background-image(linear-gradient(rgba(255,255,255,0.4), rgba(0,0,0,0.1)));
  }
  &[class|="col"] {
    text-align:center;
    @include box-sizing(border-box);
  }
}

aside.box {
  background-color:#e0e0e0;
}

.box-note {
  background:url('../images/pattern_notepad_1.gif');
  color:#666;
  font-family:Cambria, Georgia, "Times New Roman", serif;
  font-size:120%;
  font-style:italic;
}

.dropcap {
  float:left;
  display:block;
  margin:0 6px -5px 0;
  font-size:2.5em;
  line-height:1;
  text-align:center;
}

//
// Drop Shadows
//

.dropshadow {
  position:relative;
  margin-bottom:20px;
  z-index:5;
  display:inline-block;
  max-width:100%;
  img {
    display:block;
    margin:0;
  }
  * {
    position:relative;
    z-index:6;
  }
}

.raised {
  @include box-shadow(0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset);
}

.dropshadow:before,
.dropshadow:after {
  content:"";
  position:absolute;
  z-index:0;
}

.lifted {
  -moz-border-radius:4px;
     border-radius:4px;
}

.lifted:before,
.lifted:after {
  bottom:15px;
  left:10px;
  width:50%;
  height:20%;
  max-width:300px;
  max-height:100px;
  @include box-shadow(0 15px 7px rgba(0, 0, 0, 0.8));
  @include rotate(-3deg);
}

.lifted:after {
  right:10px;
  left:auto;
  @include rotate(3deg);
}

.perspective:before {
  left:80px;
  bottom:3px;
  width:50%;
  height:35%;
  max-width:50px;
  max-height:40px;
  @include box-shadow(-80px 0 8px rgba(0, 0, 0, 0.4));
  @include skew(50deg, 0deg);
  @include transform-origin(0, 107%);
  // -webkit-transform-origin:0 100%;
  //    -moz-transform-origin:0 100%;
  //   -ms-transform-origin:0 100%;
  //    -o-transform-origin:0 100%;
  //     transform-origin:0 100%;
}

.perspective:after {
  display:none;
}

.curved:before {
  top:10px;
  bottom:10px;
  left:0;
  right:50%;
  @include box-shadow(0 0 10px rgba(0,0,0,1));
  @include border-radius(10px , 100px);
}

.curved-vt2:before {
  right:0;
}

.curved-hz1:before {
  top:50%;
  bottom:0;
  left:10px;
  right:10px;
  @include border-radius(100px , 10px);
}

.curved-hz2:before {
  top:0;
  bottom:0;
  left:10px;
  right:10px;
  @include border-radius(100px , 10px);
}

//
// Contact Info & Social Links
//

.html ul.contact-info {
  margin:0;
  padding:0;
  li {
    background:none no-repeat 0 7px;
    list-style:none;
    list-style-type:none;
    padding:10px 0 10px 40px!important;
    margin:0;
    min-height:20px;
    &.address { background-image:url('../icons/address.png') }
    &.email { background-image:url('../icons/email.png') }
    &.phone { background-image:url('../icons/phone.png') }
  }
}

.html ul.social-links {
  margin:0;
  padding:0;
  li {
    margin:0;
    padding:0;
    list-style:none;
    list-style-type:none;
    background:none;
    min-height:20px;
    a {
      padding:12px 0 12px 40px;
      background:none no-repeat 0 7px;
      display:block;
      min-height:19px;
      &:hover, &:focus {
        color:inherit;
      }
    }
    &.behance a { background-image:url('../icons/social/mono/Behance.png') }
    &.dribbble a { background-image:url('../icons/social/mono/Dribbble.png') }
    &.drupal a { background-image:url('../icons/social/mono/drupal.png');padding-top:14px; }
    &.facebook a { background-image:url('../icons/social/mono/Facebook.png') }
    &.feed a { background-image:url('../icons/social/mono/Feed.png') }
    &.flickr a { background-image:url('../icons/social/mono/Flickr.png') }
    &.google a { background-image:url('../icons/social/mono/Google.png') }
    &.linkedin a { background-image:url('../icons/social/mono/LinkedIn.png') }
    &.myspace a { background-image:url('../icons/social/mono/Myspace.png') }
    &.paypal a { background-image:url('../icons/social/mono/PayPal.png') }
    &.pinterest a { background-image:url('../icons/social/mono/Pinterest.png') }
    &.skype a { background-image:url('../icons/social/mono/Skype.png') }
    &.tumblr a { background-image:url('../icons/social/mono/Tumblr.png') }
    &.twitter a { background-image:url('../icons/social/mono/Twitter.png') }
    &.vimeo a { background-image:url('../icons/social/mono/Vimeo.png') }
    &.youtube a { background-image:url('../icons/social/mono/YouTube.png') }

    // Hovers

    &.behance a:hover,&.behance a:focus { background-image:url('../icons/social/color/Behance.png') }
    &.dribbble a:hover,&.dribbble a:focus { background-image:url('../icons/social/color/Dribbble.png') }
    &.drupal a:hover,&.drupal a:focus { background-image:url('../icons/social/color/drupal.png') }
    &.facebook a:hover,&.facebook a:focus { background-image:url('../icons/social/color/Facebook.png') }
    &.feed a:hover,&.feed a:focus { background-image:url('../icons/social/color/Feed.png') }
    &.flickr a:hover,&.flickr a:focus { background-image:url('../icons/social/color/Flickr.png') }
    &.google a:hover,&.google a:focus { background-image:url('../icons/social/color/Google.png') }
    &.linkedin a:hover,&.linkedin a:focus { background-image:url('../icons/social/color/LinkedIn.png') }
    &.myspace a:hover,&.myspace a:focus { background-image:url('../icons/social/color/Myspace.png') }
    &.paypal a:hover,&.paypal a:focus { background-image:url('../icons/social/color/PayPal.png') }
    &.pinterest a:hover,&.pinterest a:focus { background-image:url('../icons/social/color/Pinterest.png') }
    &.skype a:hover,&.skype a:focus { background-image:url('../icons/social/color/Skype.png') }
    &.tumblr a:hover,&.tumblr a:focus { background-image:url('../icons/social/color/Tumblr.png') }
    &.twitter a:hover,&.twitter a:focus { background-image:url('../icons/social/color/Twitter.png') }
    &.vimeo a:hover,&.vimeo a:focus { background-image:url('../icons/social/color/Vimeo.png') }
    &.youtube a:hover,&.youtube a:focus { background-image:url('../icons/social/color/YouTube.png') }
  }
  &.inline {
    li {
      display:inline-block;

    }
  }
}

//
// Columns
//

.col-1-8 {width: 8.5%;}
.col-1-7 {width: 10.85%;}
.col-1-6 {width: 13.32%;}
.col-1-5 {width: 16.8%;}
.col-1-4 {width: 22%;}
.col-1-3 {width: 30.66%;}
.col-1-2 {width: 48%;}
.col-2-3 {width: 65.33%;}
.col-3-4 {width: 74%;}
.col-2-5 {width: 37.6%;}
.col-3-5 {width: 58.4%;}
.col-4-5 {width: 79.2%}
.col-5-6 {width: 82.67%;}
.col-100 {width: 100%;margin-left:0;margin-right:0;}

*[class|="col"] {
  margin-right: 4%;
  margin-bottom: 2em;
  float: left;
  &.float-right {
    float:right;
    margin-left: 4%;
    margin-right:0
  }
}
.col-last { margin-right: 0; }

.align-center,
a.align-center {
  float:none;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  display:block;
}

//
// Tabs & Accordeons
//

// .quicktabs-wrapper {
//   margin:1em 0;
//   .item-list {
//   }
//   .quicktabs_main {
//   border:solid #ccc;
//   border-width:0 1px 1px 1px;
//   clear:both;
//   padding:15px;
//   }
// }

// .quick-accordion {
//   margin:1em 0;

// }

//
// Toggle
//

.toggle {
  margin:1em 0;
  .toggle-content {
    padding:15px 15px 15px 40px;
  }
  h3 {
    background:url('../icons/expand.png') no-repeat 0 0;
    padding:5px 0 8px 40px;
    cursor:pointer;
    min-height:20px;
    &.expanded {
      background-image:url('../icons/collapse.png');
    }
  }
  &.default-collapsed {
    .toggle-content {
      display:none;
    }
  }
}

//
// Icon Lists
//

body .sc-icon-list {
  list-style:none;
  list-style-type:none;
  li,dt {
    padding-left:25px;
    background:transparent none no-repeat 0 0.2em;
  }
  &.sc-arrow li { background-image:url('../icons/fugue/arrow.png');background-position:0 0.5em; }
  &.sc-buoy li { background-image:url('../icons/fugue/buoy.png') }
  &.sc-calendar li { background-image:url('../icons/fugue/calendar.png') }
  &.sc-clock li { background-image:url('../icons/fugue/clock.png') }
  &.sc-pin li { background-image:url('../icons/fugue/pin.png') }
  &.sc-play li { background-image:url('../icons/fugue/play.png');background-position:0 0.5em; }
  &.sc-skip li { background-image:url('../icons/fugue/skip.png');background-position:0 0.5em; }
  &.sc-thumb li { background-image:url('../icons/fugue/thumb.png') }
  &.sc-tick li { background-image:url('../icons/fugue/tick.png') }
  &.sc-tick-grey li { background-image:url('../icons/fugue/tick-grey.png') }
  &.sc-warning li { background-image:url('../icons/fugue/warning.png') }
}