@import "compass/css3/background-size";
@import "compass/css3/box-sizing";

@import "variables";

* {
  line-height: 1.3;
}

h2 {
  font-weight: bold;
}
h2, h3 {
  color: $gray-4;
}

q, blockquote {
  font-weight: bold;
}

slides > slide {
  color: $gray-4;
  
  $grayBarHeight: 90px;

  // Grey bottom bar.
  &:not(.nobackground) {
    &:before {
      background: none;
      background-color: $gray-1;
      height: $grayBarHeight;
      left: 0;
      width: 100%;
      bottom: 0;
    }
    &:after {
      background: url(../../images/google_developers_icon_128.png) no-repeat 0 0;
      @include background-size($brand-small-icon-size);
      background-position: $slide-left-right-padding 50%;
      left: 0;
      bottom: $grayBarHeight;
      width: 100%;
      @include box-sizing(border-box);
      text-align: right;
      padding-right: $slide-left-right-padding;
    }
  }

  &.title-slide {
    &:after {
      content: '';
      background: url(../../images/io2013/google-io-lockup-1.png) no-repeat 100% 50%;
      @include background-size(contain);
      position: absolute;
      bottom: $slide-top-bottom-padding + 40;
      right: $slide-top-bottom-padding;
      width: 100%;
      height: 90px;
    }

    hgroup {
      h1 {
        font-weight: bold;
        line-height: 1.1;
      }
      h2, p {
        color: $gray-4;
      }
      h2 {
        margin-top: 0.25em;
      }
      p {
        margin-top: 3em;
      }
    }
  }
  
  .source {
    bottom: $grayBarHeight + 40;
  }
  
  > article:only-child {
    height: 88%
  }
  
  > article:only-child > iframe {
   height: 100%;
  }
  
}