﻿/* Promos
---------------------------------------------------------------------------------------- //// */
/*
default

communities
divider
find_us_online
logos
instagram
iphone
rotate-promos
page top promo
*/
/* default ----------------------------------------- //// */
.promo {
  clear: both;
  margin: 14px 0 28px; }

.promo p,
.promo ul {
  line-height: 1.429;
  /* 20px */ }

.promo img {
  float: left;
  margin: 3px 16px 24px 0; }

.promo a:focus img {
  outline: 1px dotted #7c746c; }

.promo li img {
  float: none;
  margin: 0 8px 0 0; }

/* communities ----------------------------------------- //// */
.promo ul.promo_communities li {
  margin: 0 0 14px 16px; }

.promo ul.promo_communities li a {
  padding: 4px 5px 4px 22px;
  background-repeat: no-repeat;
  background-position: 0 50%; }

.promo ul.promo_communities li.twitter a {
  background-image: url(/static/images/promos/icon_twitter.gif); }

.promo ul.promo_communities li.facebook a {
  background-image: url(/static/images/promos/icon_facebook.gif); }

.promo ul.promo_communities li.flickr a {
  background-image: url(/static/images/promos/icon_flickr.gif); }

.promo ul.promo_communities li.youtube a {
  background-image: url(/static/images/promos/icon_youtube.gif);
  background-position: 1px 50%; }

.promo ul.promo_communities li.mystarbucksidea a {
  background-image: url(/static/images/promos/icon_mystarbucksidea.gif); }

/* divider ----------------------------------------- //// */
.promo .divider {
  padding-bottom: 24px;
  border-bottom: 1px solid #d7d1ca; }

/* find_us_online ----------------------------------------- //// */
.promo ul.find_us_online {
  overflow: hidden;
  padding: 1em 0 0;
  background: #fff; }

.ie6 .promo ul.find_us_online {
  zoom: 1; }

.promo ul.find_us_online li {
  float: left;
  margin: 0; }

.promo ul.find_us_online li a {
  display: block;
  margin: 0 0 1em;
  width: 101px;
  height: 54px;
  line-height: 35px;
  text-align: center; }

.promo ul.find_us_online li a:hover,
.promo ul.find_us_online li a:focus {
  background: #fff; }

.promo ul.find_us_online li a img {
  float: none;
  margin: 0; }

/* logos ----------------------------------------- //// */
.promo ul.logos {
  width: 320px;
  overflow: hidden; }

.promo ul.logos li {
  float: left;
  margin: 0 15px 15px 0; }

.promo ul.logos li a {
  padding: 0;
  background: none; }

.promo ul.logos li img {
  float: none;
  margin: 0; }

/* instagram ----------------------------------------- //// */
#instagramPromo div {
  position: relative;
  overflow: hidden;
  height: 153px; }

#instagramPromo img {
  position: absolute;
  top: 0;
  margin-right: 5px; }

#instagramPromo div a {
  position: absolute;
  top: 0;
  margin-right: 5px; }

#instagramPromo div a img {
  position: static;
  margin-right: 0; }

/* iphone ----------------------------------------- //// */
.promo .promo_iphone p {
  clear: both;
  margin: 0 0 1.2em;
  padding: 0; }

.promo .promo_iphone p a {
  display: block;
  padding: 2px 7px;
  background: #8A8178;
  color: #fff;
  font-size: 1.2em;
  text-decoration: none;
  text-transform: uppercase; }

.promo .promo_iphone p a:hover {
  background: #006634; }

.promo .promo_iphone dl {
  padding: 0 7px; }

.promo .promo_iphone dt {
  margin: 0 0 0.3em;
  font-size: 1.1em; }

.promo .promo_iphone dd {
  color: #4d3921;
  line-height: 1.6; }

/* rotate-promos ----------------------------------------- //// */
.rotate-promos {
  margin: 0 0 28px;
  width: auto !important; }

/* custom-promo-classes ----------------------------------------- //// */
.bordered_promo {
  outline: 1px solid #000; }

.ie7 .bordered_promo {
  border: 1px solid black;
  margin: -1px; }

.bordered_promo h3 {
  padding: .5em;
  display: block;
  background-color: #000;
  color: #fff; }

.bordered_promo p, .bordered_promo ul {
  padding: .5em; }

.horizontal_link_icons li {
  display: inline;
  margin-right: 1em; }

.horizontal_link_icons p {
  margin-bottom: 0; }

.horizontal_link_icons li a {
  background-color: transparent; }

/* email signup styles ----------------------------------------- //// */
.NewsletterSignup, .NewsletterSignup .form {
  width: 100%;
  position: relative;
  padding-bottom: 2.143em; }

.NewsletterSignup button, .NewsletterSignup input {
  margin: 0;
  font-size: 1em; }

.NewsletterSignup input {
  width: 160px; }

.ie7 .NewsletterSignup,
.ie7 .signup_message {
  width: 304px; }

.NewsletterSignup .button {
  position: absolute;
  top: 60px; }

.NewsletterSignup fieldset .button:last-child {
  float: none; }

.NewsletterSignup .button, .NewsletterSignup .button button {
  width: 100%; }

.NewsletterSignup ol.form li {
  float: left; }

@media (min-width: 320px) {
  .NewsletterSignup {
    overflow: hidden;
    width: 100%;
    padding-bottom: inherit; }
  .NewsletterSignup .signup_input {
    display: block;
    overflow: hidden;
    padding-right: 25px; }
  .NewsletterSignup .button, .NewsletterSignup .button button {
    width: auto; }
  .NewsletterSignup .button {
    position: static;
    display: block;
    float: right; }
  .NewsletterSignup label {
    display: block;
    padding: 7px 0;
    color: #3d3935; } }

@media (min-width: 480px) {
  .NewsletterSignup {
    width: 70%; } }

@media (min-width: 769px) {
  .NewsletterSignup {
    width: 100%; } }

.signup_error {
  background: url("/static/images/check_warn.jpg") no-repeat;
  color: #ea9d29; }

.signup_success {
  background: url("/static/images/check_positive.jpg") no-repeat;
  color: #2B8815; }

.signup_message, .signup_error {
  outline: none; }

.signup_success, .signup_error {
  padding-left: 32px;
  margin: 1em 0;
  font-weight: bold;
  line-height: 2em; }

@media (min-width: 992px) {
  .promo img {
    float: none; }
  .main_content > .fields > .size1of3 .promo img {
    /*make sure 'sidebar' promo images cause line break*/
    display: block; } }

/* page top promo ----------------------------------------- //// */
.header_bar {
  min-height: 10px;
  background: #006341; }

.header_bar .container {
  padding: 0; }
  @media (min-width: 1024px) {
    .header_bar .container {
      padding: 0 15px; } }
  @media (min-width: 1280px) {
    .header_bar .container {
      padding: 0 20px; } }

.header_bar .wrapper {
  margin-bottom: 0;
  line-height: 1.2; }
  @media (min-width: 768px) {
    .header_bar .wrapper {
      float: right; } }

.header_bar.no_cta .wrapper {
  padding: 12px 20px; }
  @media (min-width: 481px) {
    .header_bar.no_cta .wrapper {
      padding: 12px 20px; } }
  @media (min-width: 768px) {
    .header_bar.no_cta .wrapper {
      padding: 12px 24px; } }
  @media (min-width: 1024px) {
    .header_bar.no_cta .wrapper {
      padding: 12px 0; } }

.header_bar.no_cta .js-overflow:hover {
  cursor: pointer; }

.header_bar .promo_text {
  color: rgba(255, 255, 255, 0.85); }

.js .header_bar .promo_text {
  white-space: nowrap;
  overflow: hidden; }

.js .header_bar .js-overflow .promo_text {
  display: block;
  width: 100%;
  text-overflow: ellipsis;
  cursor: pointer; }

.js .header_bar .js-allow-overflow .promo_text {
  white-space: normal; }

.header_bar .promo_text .lead_in {
  padding-right: .5em;
  text-transform: uppercase;
  font-weight: bold; }

.header_bar a {
  display: block;
  padding: 12px 20px;
  background: #004F34;
  color: rgba(255, 255, 255, 0.85);
  font-weight: normal; }
  .header_bar a:hover,
  .header_bar a:focus,
  .header_bar a:active {
    background: #003B27; }
  .header_bar a .pagetop_cta {
    text-decoration: underline; }
  @media (min-width: 481px) {
    .header_bar a {
      padding: 12px 20px; } }
  @media (min-width: 768px) {
    .header_bar a {
      padding: 12px 24px; } }

/*.js-overflow::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: $gutter-width;
    
    @include breakpoint(sm) {
        width: $gutter-width-sm;
    }
    @include breakpoint(med) {
        width: $gutter-width-med;
    }
}
.has_cta .js-overflow::before {
    background: $promo_bar_link_bg;
}
.has_cta .js-overflow:hover::before {
    background: $promo_bar_link_active;
}
.no_cta .js-overflow::before {
    background: $siren_green;
}
.js-overflow::after {
    content: '';
    position: absolute;
    right: $gutter-width;
    top: 0;
    height: 100%;
    width: 60px;
    
    @include breakpoint(sm) {
        right: $gutter-width-sm;
    }
    @include breakpoint(med) {
        right: $gutter-width-med;
    } 
}
.has_cta .js-overflow::after {
    background: -webkit-linear-gradient(left, rgba(0,79,52,0) 0%,rgba(0,79,52,1) 100%);
    background: linear-gradient(to right, rgba(0,79,52,0) 0%,rgba(0,79,52,1) 100%);
}
.has_cta .js-overflow:hover::after {
    background: -webkit-linear-gradient(left, rgba(0,59,39,0) 0%,rgba(0,59,39,1) 100%);
    background: linear-gradient(to right, rgba(0,59,39,0) 0%,rgba(0,59,39,1) 100%);
}

.no_cta .js-overflow::after {
    background: -webkit-linear-gradient(left, rgba(0,99,65,0) 0%,rgba(0,99,65,1) 100%);
    background: linear-gradient(to right, rgba(0,99,65,0) 0%,rgba(0,99,65,1) 100%);
}*/

/*# sourceMappingURL=promos.css.map */