stylesheets/screen.scss
@import "partials/base";
@import "partials/addons";
@import "partials/fonts";

// force scrollbar to be visible to avoid shifting
html {
  overflow-y: scroll;
}

.col, .row-col, .span0 {
  float: left;
  margin-left: $gridGutterWidth;
}

.gutter-left {
  margin-left: $gridGutterWidth;
}

.gutter-right {
  margin-right: $gridGutterWidth;
}

.gutters {
  @extend .gutter-left;
  @extend .gutter-right;
}

.inward-gutter-left {
  padding-left: $gridGutterWidth;
}

.inward-gutter-right {
  padding-right: $gridGutterWidth;
}

.inward-gutters {
  @extend .inward-gutter-left;
  @extend .inward-gutter-right;
}

.offset-gutter-left {
  left: $gridGutterWidth;
}

.offset-gutter-right {
  right: $gridGutterWidth;
}

@for $i from 1 through $gridColumns {
  .span#{$i - 1}.half {
    width: $gridColumnWidth * $i + $gridGutterWidth * ($i - 1) - ($gridColumnWidth + $gridGutterWidth)/2;
    //width: $gridColumnWidth * ($i - .5) + $gridGutterWidth * ($i - 1.5);
  }

  .offset#{$i - 1}.half {
    margin-left: $gridColumnWidth * ($i - 1) + $gridGutterWidth * $i + ($gridColumnWidth + $gridGutterWidth)/2;
    //margin-left: $gridColumnWidth * ($i - .5) + $gridGutterWidth * ($i + .5);
  }
}

@media (max-width: 767px) {
  .row > .col, .row-fluid > .col, .row-col {
    float: none;
    display: block;
    width: auto;
    margin: 0;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  // these happens to match out default
  //.col, .row-col, .span0 {
  //  margin-left: 20px;
  //}

  // these happens to match out default
  //.gutter-left {
  //  margin-left: 20px;
  //}
  //.gutter-right {
  //  margin-right: 20px;
  //}
  //.inward-gutter-left {
  //  padding-left: 20px;
  //}
  //.inward-gutter-right {
  //  padding-right: 20px;
  //}
  //.offset-gutter-left {
  //  left: 20px;
  //}
  //.offset-gutter-right {
  //  right: 20px;
  //}

  @for $i from 1 through $gridColumns {
    .span#{$i - 1}.half {
      width: 42px * $i + 20px * ($i - 1) - 31px;
    }

    .offset#{$i - 1}.half {
      margin-left: 42px * ($i - 1) + 20px * $i + 31px;
    }
  }
}

@media (min-width: 1200px) {
  .col, .row-col, .span0 {
    margin-left: 30px;
  }
  .gutter-left {
    margin-left: 30px;
  }
  .gutter-right {
    margin-right: 30px;
  }
  .inward-gutter-left {
    padding-left: 30px;
  }
  .inward-gutter-right {
    padding-right: 30px;
  }
  .offset-gutter-left {
    left: 30px;
  }
  .offset-gutter-right {
    right: 30px;
  }
  @for $i from 1 through $gridColumns {
    .span#{$i - 1}.half {
      width: 70px * $i + 30px * ($i - 1) - 50px;
    }

    .offset#{$i - 1}.half {
      margin-left: 70px * ($i - 1) + 30px * $i + 50px;
    }
  }
}

// General settings for text

a {
  // puts PDF icon next to PDF links
  &[href$=".pdf"] {
    @include link-icon("pdf.png");
    padding-right: 20px;
  }
}

#{headers(all)} {
  font-family: $header_font_family;
  a {
    color: inherit;
    text-decoration: none;
    &:hover {
      text-decoration: none;
    }
  }
  small {
    font-size: 0.9em;
    font-weight: bold;
  }
}

h1 small {
  font-weight: normal;
}

// TODO use mixin / loop to add lanyrd overrides
h1, body ol.lanyrd-listing h1 {
  color: $h1_color;
  a {
    color: $h1_color;
    &:hover {
      color: mix($h1_color, #fff, 80%);
      text-decoration: none;
    }
  }
}

h2, body ol.lanyrd-listing h2 {
  color: $h2_color;
  font-size: 2.2em;
  font-weight: bold;
  margin-bottom: 0.25em;
  a {
    color: $h2_color;
    &:hover {
      color: mix($h2_color, #fff, 80%);
      text-decoration: none;
    }
  }
}

h3, body ol.lanyrd-listing h3 {
  color: $h3_color;
  font-size: 1.7em;
  margin-bottom: 0.5em;
  a {
    color: $h3_color;
    &:hover {
      color: mix($h3_color, #fff, 80%);
      text-decoration: none;
    }
  }
}

h4, body ol.lanyrd-listing h4 {
  color: $h4_color;
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

h5, body ol.lanyrd-listing h5 {
  color: $h5_color;
  font-size: 1.2em;
}

.content-bumper {
  margin-bottom: 3em;
}

ul {
  list-style-type: square;
}

hr.taper {
  height: 1px;
  margin: 2.5em 0;
  @include background-image(linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)));
  border: 0;
}

// bootstrap customization
pre, code {
  font-family: $fixed_font_family;
  word-wrap: normal;
  white-space: pre;
}

// bootstrap customization
code {
  color: $inline_code_color;
  border-color: $palette_26gray; //might insert better variable name
  font-style: normal !important;
}

// bootstrap customization
.label {
  font-size: 0.85em;
  padding: 2px 4px;
  line-height: 1em;
  vertical-align: baseline; 
}

// bootstrap customization
dl {
  margin-bottom: 1em;
}

// bootstrap customization
dl.unstyled, ul.unstyled {
  margin-bottom: 0;
}

// bootstrap customization
dl.unstyled dd {
  margin-left: 0;
  margin-bottom: 1em;
}

.nav-pills li a:hover {
  @include single-transition(background-color, .35s, linear, 0);
}

h3.highlights ~ dl:first-of-type {
  dt .icon-star {
    vertical-align: text-top;
  }
  dd {
    // FIXME the overzealous .post styles are overridding us
    border-left: 0 !important;
    padding-left: 20px !important;
    margin-left: 0 !important;
  }
}

#toTop {
  position: fixed;
  top: -50px;
  right: 0px;
  background-color: $palette_60gray;
  @include border-radius(8px 0 0 8px);
  color: white;
  font-weight: bold;
  padding: 10px 12px;
  text-decoration: none;
}

.bind {
  white-space: nowrap;
}

a.artifact {
  @extend code;
  font-family: inherit;
  color: $link_color;
  @include reset-focus();
  &:hover {
    color: $palette_white;
    border-color: $link_color;
    background-color: $link_color;
    text-decoration: none;
  }
}

blockquote {
  margin-left: 2em;
  &:before {
    color: $blockquote_quote_color;
    content: '\201C'; // unicode for open quote
    font: italic 400%/1 Cochin, Georgia, "Times New Roman", serif;
    float: left;
    margin-left: -1em;
    margin-top: -3px;
  }
  p {
    font-size: $baseFontSize;
    margin-bottom: 1em;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  small {
    font-size: 0.9em;
  }
}

blockquote > .paragraph > p {
  font-weight: normal;
  color: $guide_author_name_color;
  &:last-of-type {
    margin-bottom: 1em;
  }
}

#content {
  .imageblock,
  .videoblock {
    margin-bottom: 1em;
  }

  .imageblock.right {
    float: right;
    margin-left: 1.5em;
    margin-right: 4px;
  }

  .imageblock,
  .videoblock {
    font-weight: bold;
  }

  .imageblock > .title {
    padding-left: 4px;
    padding-right: 4px;
  }

  .videoblock {
    margin-left: 4px;
  }
}

// Sprite setup and generic activity

// fixme could be cleaner, perhaps a mixin, fix a size
h2.icon, h2 > a.icon {
  display: block;
  &.news, &.invasion, &.crown {
    @include sprite-background("header_icons.png");
    width: auto;
    // NOTE moves text away to make room for the icon
    padding-left: 70px;
    margin-bottom: .75em;
  }
  &.news {
    @include sprite-row(10);
    &:hover {
      @include sprite-row(9);
    }
  }
  &.invasion {
    @include sprite-row(2);
    &:hover {
      @include sprite-row(1);
    }
  }
  &.crown {
    @include sprite-row(6);
    &:hover {
      @include sprite-row(5);
    }
  }
  &.forum, &.chat, &.jira, &.git {
    @include sprite-background("header_icons2.png", 42px, 42px);
    line-height: 44px;
    width: auto;
    padding-left: 52px;
    margin-bottom: .75em;
  }
  &.forum {
    @include sprite-row(1, 42px);
  }
  &.chat {
    @include sprite-row(2, 42px);
  }
  &.jira {
    @include sprite-row(3, 42px);
  }
  &.git {
    @include sprite-row(4, 42px);
  }
}

// add additional icon
.icon-github {
  background-image: image-url("icon-github.png");
  background-position: 0 0;
  width: 16px;
  height: 16px;
  line-height: 16px;
}

[class^="icon-"],
[class*=" icon-"] {
  vertical-align: middle;
}

h3 [class^="icon-"],
h3 [class*=" icon-"] {
  vertical-align: baseline;
}

table tbody tr .tag {
  visibility: hidden;
}
table tbody tr .tag a {
  color: $palette_white;
  text-decoration: none;
}
table tbody tr:hover .tag {
  visibility: visible;
}

table th a {
  font-weight: normal;
}

// Team page

// merge/share .team and .contributors
ul.team {
  list-style-type: none;
  @include row;
  li {
    @include span(3);
    line-height: 1.4;
    margin-top: .5em;
    margin-bottom: 2em;
    &:nth-of-type(3n+1) {
      clear: left;
    }
    a {
      position: absolute;
      margin-top: 1px;
      @include square(60px); // size a for IE8
      img {
        @extend .thumbnail;
      }
    }
    h3, strong, em {
      padding-left: 80px;
    }
    h3 {
      margin-top: .05em;
      margin-bottom: .1em;
      line-height: normal;
    }
    strong, em {
      display: block;
      font-weight: 400;
    }
  }
}

ul.contributors {
  list-style: none;
  padding: 0;
  margin: .5em 0 2em 0;
  & > li {
    @include span(4);
    margin-bottom: 2em;
    display: block;
    @include clearfix;
    &:nth-of-type(3n+1) {
      @include first;
      clear: left;
    }
    line-height: 1.4;
    .photo {
      float: left;
      position: relative;
      margin-right: 10px;
      overflow: hidden;
      @extend .thumbnail;
      cursor: pointer;
      //&:hover {
      //  border-color: $link_color;
      //}
      img {
        display: block;
        @include square(140px);
      }
      ul {
        margin: 0 4px;
        font-size: 0.9em;
        padding: 0;
        position: absolute;
        height: 0px;
        width: 140px; // 100% doesn't work here
        left: 0;
        bottom: 3px;
        @include single-transition(height, .4s, ease-in-out);
        background-color: $palette_black_20trans;
        list-style: none;
        text-align: center;
        border-top: 1px solid $light_border;
        @include single-box-shadow($palette_white_50trans, 0, 1px, 0, 0, inset);
        overflow-y: hidden;
        li {
          font-size: 0.95em;
          display: inline;
          padding: 0 2px;
          a {
            color: $palette_white;
          }
          span {
            color: $palette_40gray;
          }
        }
      }
      &:hover ul {
        height: 24px;
      }
    }
    h3 {
      margin-bottom: .15em;
    }
    strong, em {
      display: block;
    }
  }
  & + p {
    clear: left;
    @extend .well;
    strong {
      display: block;
    }
  }
}

// Buzz page

.tweet {
  margin-bottom: 3em;
  padding: 2px;
  .loading {
    padding: 1.5em;
    margin: 0;
  }
  .tweet_intro {
    font-size: 1.3em;
    font-weight: bold;
    padding: 0.5em;
    margin: 0;
  }
  .tweet_outro {
    padding: 0.5em;
    margin: 0;
    text-align: center;
  }
  ul.tweet_list {
    list-style: none;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    .awesome, .epic {
      text-transform: uppercase;
    }
    .tweet_odd {
      background-color: $tweet_row_color;
      @include border-radius(4px);
    }
    .tweet_even {
    }
    .tweet_avatar {
      @include square(48px);
      margin-right: .5em;
      float: left;
      img {
        vertical-align: middle;
        @include border-radius(2px);
      }
    }
    li {
      padding: 0.5em;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
}

// Event page

#sessions .session {
  .header, .body, .speakers {
    padding-left: 60px;
  }
  .header {
    position: relative;
    h2.title {
      line-height: 1.3;
      margin-bottom: 0;
    }
    .date {
      position: absolute;
      left: 0;
      top: 5px;
    }
    p.meta {
      margin-bottom: 1em;
    }
  }
  .speakers {
    margin-bottom: 2em;
  }
}

// Styling for information pulled from Lanyrd

// REVIEW use two columns for speaker avatar and sessions
.lanyrd-target-splat {
  margin-bottom: 1em;
  ol.lanyrd-listing {
    padding-left: 0;
  }
}

// Community press page

.feed .entry {
  //border-bottom: 1px solid $light_border;
  //margin-bottom: 1.5em;
  .header {
    h2.title {
      line-height: 1.3;
      margin-bottom: 0;
    }
    // REVIEW need a better word for author, date, source of an article
    .meta {
      margin-bottom: 1em;
    }
  }
  .body {
    p:last-of-type strong {
      font-weight: normal;
    }
    a[rel=tag]:after {
      content: ', ';
      display: inline-block;
      text-decoration: none;
      color: $default_font_color !important;
    }
    a[rel=tag]:last-child:after {
      content: '';
    }
  }
}

// Video page

.video {
  @include row();
  .preview {
    @include span(4);
  }
  .desc {
    @include span(5);
    h3 {
      line-height: 1.3;
    }
  }
}

// Tag cloud styling

.tag-cloud {
  @include tag-cloud-groups(12, .15);
  a {
    padding: 3px;
    text-decoration: none;
    @include border-radius();
    &:hover {
      background-color: $link_hover_color;
      color: $palette_white;
    }
  }
}

// Pager customization

.pager {
  margin: 2em 0 0 0;
  a {
    @include border-radius(4px);
  }
  .pages {
    display: inline-block;
    padding: 5px 14px;
  }
  .disabled a,
  .disabled a:hover {
    // not provided by bootstrap, see http://css-tricks.com/pointer-events-current-nav/
    pointer-events: none;
    visibility: hidden;
  }
}

// Styling for code blocks

.filename {
  //background: $palette_pale_lavender;
  background: transparentize($palette_blue, .75);
  padding: 3px 10px;
  @include single-text-shadow($palette_white_50trans);
  @include border-radius(4px);
  margin: 26px 10px 0 55px;
  position: relative;
}

.filename + pre.prettify {
  background-image: image-url("edit.png");
  background-repeat: no-repeat;
  background-position: 5px 2px;
  margin-top: -40px;
  padding-top: 50px;
}

pre.output {
  background-color: $palette_80gray;
  border: 1px solid $light_border;
  color: $palette_white;
  padding: 10px;
  overflow-x: auto;
  @include single-box-shadow(rgba(128,128,128,0.5), 0, 1px, 2px);
}

ul.filetree {
  margin-right: 0;
  margin-left: 0;
  //border: 1px dashed $light_border;
  background-color: $filetree_background_color;
  margin-bottom: 1.5em !important;
  padding: .75em 2.5em;
  li {
    line-height: 1.5em;
  }
  ul, li {
    margin-bottom: 0 !important;
  }
}

// Styling for tip and warning info blocks
// could use the extends or mixin feature here
// & > span is required since redcloth adds <span class="caps"> around 3 char uppercase seq

@include article-callouts(
  (info $info_box_background_color)
  (warning $warning_box_background_color)
  (important $important_box_background_color));

// Calender image styling

.date {
  display: block;
  @include square(44px);
  font-size: 24px;
  line-height: 22px;
  font-family: $fancy_font_family;
  font-weight: bold;
  @include single-text-shadow();
  text-align: center;
  @include border-radius();
  @include single-box-shadow(rgba(0,0,0,0.09), 0, 1px, 3px);
  border: 1px solid $light_border;
  background-color: $palette_white;
  vertical-align: top;
  abbr {
    display: block;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 1px;
    @include geometry(44px, 13px);
    color: $palette_white;
    font-size: 10px;
    text-transform: uppercase;
    @include single-text-shadow();
    line-height: 13px;
    padding-top: 1px;
    border-bottom: 1px solid $light_border;
    @include border-radius(4px 4px 0 0);
    background-color: $palette_terra;
    @include background-image(linear-gradient($palette_light_terra, $palette_terra))
  }
}

// General data table (used on Nobles page)

table.data, .metadata table {
  border-collapse: collapse;
  tr:nth-of-type(2n + 1) td {
    background-color: $palette_pale_lavender;
  }
  th {
    font-size: .9em;
    @include background-image(linear-gradient(bottom, #dbd7db 17%, #e8e8e8 60%));
    @include single-text-shadow(); 
    border-top: 1px solid $light_border;
    border-bottom: 1px solid $light_border;
    padding: 7px 0 7px 7px;
    line-height: 1.3;

    &:first-child {
      width: 25%;
    }
  }
  td {
    padding: 7px 0 7px 7px;
    border-bottom: 1px solid $light_border;
  }
}

// Green bar styling

.greenbar {
  @include background-image(linear-gradient(#5FBF5F + #333, #5FBF5F - #333));
  color: $palette_white;
  padding: 2px 3px;
  @include border-radius(2px);
}

.redbar {
  @include background-image(linear-gradient(#B00000 + #333, #B00000 - #333));
  color: $palette_white;
  padding: 2px 3px;
  @include border-radius(2px);
}

p.post_to_twitter {
  display: inline-block;
  a {
    display: inline-block;
    @include square(60px);
    overflow: hidden;
    &:hover img {
      margin-top: -60px;
    }
  }
}

// undo bootstrap breakage of google +1 bubbles
.gc-bubbleDefault {
  @for $i from 1 through 9 {
    img[height='#{$i}'] {
      height: #{$i}px;
    }
  }
}

.addthis_toolbox {
  @extend .well;
  padding: 9px;
  min-height: 47px;
}

img.emoticon {
  vertical-align: text-bottom;
}

// Page ending styling i.e. Death to all bugs

p.rally {
  @extend .well;
  clear: both;
  font-size: 2.5em;
  margin-bottom: 0;
  line-height: 1.5em;
  font-family: $header_font_family;
  text-align: center;
  color: $rally_color;
}

img.flag {
  @include geometry(16px, 11px);
  padding-bottom: 1px;
  vertical-align: middle;
}

// Ohloh widget
body div.gadget {
  float: right;
  // FIXME margin-left should be pulled from .gutter-left
  margin-left: 30px !important;
  margin-bottom: 2em;
  @include geometry(290px, 178px);
  h3 {
    font-size: 24px;
    margin-bottom: 0.25em;
  }
}

// Top banner and navigation section

.navbar-fixed-top {
  a.brand {
    font-family: $banner_font_family;
    font-size: 1.7em;
    line-height: .8em;
    text-transform: lowercase;
    .logo {
      display: block;
      float: left;
    }
  }
  .nav-collapse {
    @include offset(4);
  }
  .nav li {
    font-family: $banner_font_family;
    font-size: 1.5em;
    a {
      font-weight: bold;
    }
  }
  .plusone, .g-plusone-slot {
    display: block;
    float: right;
    margin-top: 7px;
    margin-right: 5px;
  }
}

@media (min-width: 980px) {
  .navbar-fixed-top {
    .navbar-inner {
      border-bottom: 1px solid $palette_white_50trans;
      overflow: hidden;
      height: 64px; // make this 65px?
    }
    a.brand {
      padding-top: 0;
      padding-bottom: 0;
      margin-top: 5px;
      font-size: 2.2em;
      line-height: 1em;
      @include single-transition(color, .8s, ease, .05s);
      &:hover {
        color: $navbarLinkColorHover; 
      }
      .logo {
        @include square(46px);
        background-image: image-url("arquillian-icon-s.png");
      }
      .name {
        display: block;
        float: left;
        margin-top: 20px; // or .65em
        margin-left: -3px;
      }
    }
    .g-plusone-slot {
      display: block;
      float: right;
      margin-top: 21px;
      margin-right: 0;
    }
    .nav {
      white-space: nowrap;
      li {
        padding: 0 5px;
        a {
          padding: 27px 15px 18px; // 27px top, 19px font, 18px bottom = 64px
          @include single-transition(color, .8s, ease-in-out, .05s);
          @include single-text-shadow(rgba(0,0,0,0.75));
        }
      }
    }
  }
}

#content-header > .container > h1 {
  @extend .page-header;
  font-size: 3em;
  padding-left: 3px;
}

// Main content section of page

#main {
  // NOTE must be equal to header size (variable perhaps?)
  // QUESTION should we use body { padding-top: 64px; } instead??
  margin-top: 64px;
}

#content {
  @extend .content-bumper;
  // specific to community page, make this selector more specific?
  .section-area {
    overflow: hidden;
    border: 0 solid $light_border;
    border-top-width: 1px;
    padding-top: 1.5em;
    margin-top: .5em;
    // FIXME limit width?
    p, dl {
    }
    // FIXME duplicate from invasion section!
    dd {
      margin-top: .5em;
      margin-bottom: 1em;
      margin-left: 4px;
      border-left: 6px solid $palette_9gray;
      padding-left: 10px;
      color: $palette_70gray;
    }
    .screenshot img, .graphic img {
      float: right;
      margin: -1.5em 5px 0 0;
    }
    .screenshot img {
      margin-bottom: 4em;
      border: 1px solid $light_border;
      @include box-reflect(below, -1px, .8);
      @include box-shadow;
    }
  }
}

// Page footer

footer {
  @include single-box-shadow($palette_black_50trans, 0, 12px, 20px, -10px, inset);
  //font-size: 1.1em;
  background-color: $footer_base_color;
  color: $footer_text_color;
  p {
    font-size: 0.9em;
    &.image {
      margin-bottom: 0.5em;
    }
  }
  .container {
    padding: 2em 0 1em 0;
    .project {
      @include span(4, true);
      img {
        margin: 30px 0 1em 0;
      }
      p {
        margin-top: 30px;
      }
    }
    a {
      color: $footer_link_color;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
    h4 {
      // may not need margin/weight overrides
      margin-bottom: .5em;
      font-weight: bold;
      color: $footer_header_color;
    }
    .footer-nav {
      @include span(2);
      ul {
        @extend .unstyled;
        font-size: 0.9em;
        margin-bottom: 1em;
      }
    }
    .sponser {
      @include span(4);
      img.branding {
        @include geometry(254px, 50px);
        background-color: $branding_background_color;
        padding: 5px;
        @include border-radius();
      }
    }
    .follow-us {
      @include clearfix();
      h4, ul, li {
        float: left;
      }
      ul {
        @extend .unstyled;
        margin: 0 0 0 8px;
        li {
          margin-right: 5px;
        }
        a {
          display: block;
        }
        a, img {
          @include square(16px); // size a for IE8
        }
      }
    }
  }
}

body.home {
  #intro {
    //background-color: $intro_background_color;
    // give the appearance of a hover light under the nav bar
    @include background-image(linear-gradient(top, rgba(128,128,128,0.05), $palette_50gray_80trans));
    .logline {
      margin-top: 0.6em;
      //line-height: 1.5em;
      @include span(8, true);
      @include border-box;
      @include single-text-shadow(rgba(0,0,0,.1));
      @extend .inward-gutter-left;
      h2 {
        color: $log_title_color;
        margin-bottom: 0;
        //line-height: 1.5em;
        //@include single-text-shadow($palette_white_20trans);
      }
      p {
        @extend .inward-gutter-left;
        // should switch to hgroup so this is an h3, not a p
        font-family: $header_font_family;
        color: $log_detail_color;
        font-size: 1.8em;
        //margin-bottom: .1em;
        line-height: 1.4em;
        //@include single-text-shadow($palette_white_20trans);
        //@include span(4.5);
        max-width: 600px;
        margin-bottom: 0.4em;
      }
    }
    .cta {
      @include span(4);
      a.primary {
        @extend .btn;
        // FIXME btn-primary not giving us the color we want
        @extend .btn-success;
        @include border-radius(5px);
        padding: 9px 0;
        width: 200px;
        font-family: $button_font_family;
        margin-top: 1.5em;
        text-decoration: none;
        line-height: normal;
        font-size: 2em;
        @include box-shadow(rgba(255,255,255,.35) 0 1px 0 0 inset, rgba(255,255,255,.15) 0 0 0 1px inset, rgba(0,0,0,.5) 1px 1px 4px -1px);
      }
    } 
  }

  p.question {
    margin-bottom: 2em;
    text-align: center;
    font-family: $fancy_font_family;
    font-style: italic;
    font-size: 1.75em;
  }

  // Slideshow layout styles

  // TODO unnest me from .home!
  #slideshow {
    margin-bottom: 0;
    line-height: inherit;
    .carousel-control {
      @include single-box-shadow($palette_black_50trans, 0, 0, 2px);
      // hardcode font-family to get spacing consistent
      font-family: Verdana, sans-serif;
      width: 38px;
      @include single-transition(opacity, 1s, ease);
      &.left {
        padding-right: 2px;
      }
      &.right {
        padding-left: 2px;
      }
      &:focus {
        @include reset-focus();
      }
    }
    .carousel-inner {
      height: 520px;
      overflow: hidden;
    }
    .item {
      height: inherit;
      background-color: $palette_white;
      // general styles for the headline blocks
      .headline {
        margin-top: 2em;
        h2 {
          line-height: 1.2em;
          font-weight: bold;
          //img {
          //  vertical-align: middle;
          //  margin-left: -4px;
          //  margin-top: -4px;
          //}
          .arrow {
            padding-left: 4px;
            @include single-text-shadow(transparentize($h2_color, .25));
            color: $palette_forest;
          }
        }
      }
      .layout-sample {
        .visual {
          // cheat by trimming offset margin from second column
          @include span(8, true);
          @include border-box;
          @extend .inward-gutter-left;
          padding-top: 3em;
          pre.prettify {
            float: left;
            //word-break: normal;
          }
        }
        .headline {
          @include span(4);
          @include border-box;
          @extend .inward-gutters;
          ol {
            margin-top: 2em;
            margin-bottom: 0;
            li {
              padding: 0 0 1.5em 0;
              &:last-of-type {
                padding-bottom: 0;
              }
            }
          }
        }
      }
      .layout-gallery {
        .visual {
          @include span(7.5, true);
          @include border-box;
          @extend .inward-gutter-left;
          padding-top: 8.5em;
          img {
            @extend .thumbnail;
            padding: 0;
          }
        }
        .headline {
          @include span(3.5);
          margin-top: 2em;
          img.trim {
            @extend .thumbnail;
            padding: 0;
            @include border-radius(8px 8px 0 0);
            position: relative;
            max-width: 125%;
            margin-left: -8em;
            margin-top: 3em;
          }
        }
      }
      .layout-title {
        height: 520px;
        background-repeat: no-repeat;
        background-position: top center;
        background-color: #020506;
        .headline {
          h2 {
            font-size: 3.5em;
            letter-spacing: 1px;
            margin-top: 55px;
            color: $palette_white;
            text-align: center;
            @include single-text-shadow(rgba(255,255,255,0.75), 0, 0, 25px);
            opacity: 0;
            @include transition(opacity 3s ease-in-out 1s);
            a {
              color: inherit;
            }
            html.ready & {
              opacity: 100;
            }
          }
        }
      }
      .layout-photo {
        //height: inherit;
        height: 520px; // min-height doesn't inherit, needed for responsive

        // <<KEEP - use these styles if we decide to have background on .visual
        //.visual {
        //  background-repeat: no-repeat;
        //  background-position: top center;
        //  position: absolute;
        //  width: 100%;
        //  height: 100%;
        //}
        //.container {
        //  position: relative;
        //}
        // KEEP>>

        // use these styles if background is on .layout3
        background-repeat: no-repeat;
        background-position: top center;

        .headline {
          @include span(4, true, false);
          background-color: $palette_black_20trans;
          @include border-radius(8px);
          position: relative;
          top: 210px;
          padding: 1em;
          float: left;
          h2, h2 > a {
            color: $link_color;
          }
          p, p > a {
            color: $palette_white;
          }
          p.more {
            margin-bottom: 0;
          }
          //p:not(.more) {
          //  color: $palette_white;
          //}
          //p.more a {
          // @extend .btn;
          //}
        }
      }
    }
  }
  
  #activity {
    padding-bottom: 3em; // TODO can we make .content-bumper use padding so we can use it here?
    //the background below colors the entire bottom of the page when turned on
    @include background-image(linear-gradient(top, #fff, $page_background_color));
    .container {
      #spotlight {
        &:hover {
          h2.icon.crown {
            @include sprite-row(5);
          }
        }
      }
      #news {
        &:hover {
          h2.icon.news {
            @include sprite-row(9);
          }
        }
      }
      #events {
        &:hover {
          h2.icon.invasion {
            @include sprite-row(1);
          }
        }
      }
      #spotlight, #news, #events {
        margin-bottom: 2em;
      }
      #spotlight, #news {
        @include border-box;
        // removed border-right until can fix centering and overflow of question text and column text overflow
        //border-right: 1px dotted $palette_lighter_purple; 
        @extend .inward-gutter-right;
      }
      #spotlight {
        @include span(4, true);
      }
      #news {
        @include span(4);
        // FIXME not happy with this here
        h3 {
          line-height: 1.2;
        }
      }
      #events {
        @include span(4);
      }
      ul {
        @extend .unstyled;
        padding: 0 5px;
        img {
          @include border-radius();
          @include single-box-shadow(rgba(0,0,0,0.9), 0, 1px, 3px);
          //padding: .2em;
          margin-right: 10px;
          float: left;
        }
      }
      .more a {
        @extend .btn;
      }
      // fixme put in a more general place
      .date {
        float: left;
        margin-right: 10px;
        margin-left: 1px;
        //& + h3 {
          //line-height: 1;
        //}
        & + h3 + p, & + h3 + .location, & + h3 + .location + p {
          margin-left: 58px;
        }
      }
    }
  }
}

// Invasion section (may change "invasion" to a general page content type)

body.invasion {
  #sidebar {
    @include span(3, true);
    @extend .content-bumper;
    .tab-group {
      @extend .tabbable;
      @extend .tabs-left;
    }
    ul.nav {
      @extend .nav-tabs;
      width: 100%;
      margin-top: .5em;
    }
    // I spelled these out because I was fighting w/ overrides
    .tab-group ul.nav {
      border-right: 0;
    }
    .tab-group ul.nav > li > a {
      @include border-radius(4px);
    }
    .tab-group ul.nav > li.active > a,
    .tab-group ul.nav > li.active > a:hover {
      border-right-color: $palette_12gray;
    }
    .tab-group ul.nav > li > a:hover {
      border-right-color: $palette_9gray;
    }
    .tab-group ul.nav > li:not(.active) > a:hover {
      @include single-transition(background-color, .5s, linear, .2s);
    }
  }
  #content {
    @include border-box;
    @include span(9);
  }
  dd {
    margin-top: .5em;
    margin-bottom: 1em;
    margin-left: 4px;
    border-left: 6px solid $palette_9gray;
    padding-left: 10px;
    color: $palette_70gray;
  }
}

// Blog section

body.blog {
  #main > .container {
    #content {
      @include span(9, true);
      .post {
        position: relative;
        margin-left: 60px;
        h2.title {
          line-height: 1.35;
          padding-top: .2em;
          margin-bottom: 5px;
          border-bottom: 1px solid $article_border;
          a {
            &:hover {
              text-decoration: none;
            }
          }
        }
        .byline {
          margin-bottom: 1em;
          padding-left: 2px;
          font-size: 0.9em;
          .avatar {
            @extend .thumbnail;
            @include border-radius(5px);
            padding: 3px;
            position: absolute;
            top: 0px;
            left: -60px;
          }
          .date {
            // FIXME remove .date if it isn't going to be used
            display: none;
            position: absolute;
            //top: 10px;
            //left: -60px;
            top: 48px;
            left: -52px;
          }
          .comments {
            text-transform: lowercase;
          }
        }
        .body {
          margin-right: 30px; // TODO reexamine padding on blog body
          margin-bottom: 5px;
          img {
            margin-left: 4px;
            margin-right: 4px;
            @extend .thumbnail;
            &.emoticon, &.graphic {
              padding: 0;
              border: none;
              @include box-shadow(none);
              margin: 0;
            }
            &.emoticon {
              display: inline;
            }
            &.pull-right {
              margin-left: 12px;
            }
            &.pull-left {
              margin-right: 12px;
            }
          }
          a[href^="https://community.jboss.org/people"] {
            @include link-icon("profile.png");
            // switch to other side of link
            padding: 0 0 0 18px;
            margin: 0;
            background-position: left center;
          }
          // FIXME duplicate from invasion
          dd {
            margin-top: .5em;
            margin-bottom: 1em;
            margin-left: 4px;
            border-left: 6px solid $palette_9gray;
            padding-left: 10px;
            color: $palette_70gray;
          }
        }
        .abstracts {
          background-color: $palette_5gray;
          overflow: hidden;
          padding-bottom: 0.3em;
          margin-bottom: $baseLineHeight;
          border: 2px solid #fff;
          @include border-radius(10px);

          h3 {
            font-size: 1.6em;
            padding-left: .8em;
            padding-bottom: 0;
            margin-top: .5em;
            margin-bottom: 0;
          }
  
          p {
            padding-left: 1.5em;
            padding-right: 1.5em;
          }
  
          p.speakers {
            padding-left: 1.3em;
            font-size: 14px;
            line-height: .6;
          }
        }        
        .footer {
          padding-top: 5px;
          border-top: 1px solid $article_border;
          text-transform: lowercase;
        }
        //#comments {
        //  margin-bottom: 3em;
        //}
      }
    }
    #sidebar {
      @include span(3);
      @extend .content-bumper;
      h2 {
        margin-bottom: 5px;
      }
      .subscribe {
        h2.icon {
          // NOTE make the text fit in the clickable region
          font-size: 1.7em;
          line-height: 1.1;
          a {
            // REVIEW still need to color this link, via general h2 a
            padding-top: 5px;
            height: 55px;
            text-decoration: none;
            color: inherit;
          }
        }
        p {
          padding-top: 0.5em;
          line-height: 1.5;
          font-size: 0.9em;
          em {
            font-style: normal;
          }
        }
      }
      ul {
        @extend .unstyled;
        li {
          margin-top: 0;
          margin-bottom: 10px;
          padding-bottom: 5px;
          border-bottom: 1px dotted $light_border;
          line-height: 1.5;
          a {
            font-weight: normal;
          }
          .meta, .dsq-widget-meta { 
            font-size: .9em;
            text-align: right;
          }
        }
      }
    }
  }
  .pager {
    margin-left: 60px;
  }
  #disqus_thread {
    margin-bottom: 0;
  }
}

// start to unnest some of post
.post {
  .releaseinfo {
    table {
      @extend .table;
      @extend .table-bordered;
      @extend .table-striped;
    }
  }
  .footer .tag {
    @extend .label;
    @include single-text-shadow(none); 
    //background-color: $palette_20gray;
    &:hover {
      background-color: $link_hover_color;
    }
  }
}

// FIXME should go inside the blog section
.post + .post {
  margin-top: 2em;
}

// Features section

.features {
  .feature {
    @include row;
    .summary, .preview {
      @include span(6);
      img {
        margin-top: 1em;
        // default dimensions; override in html
        @include geometry(300px, 200px);
      }
    }
    &:nth-of-type(2n) .summary {
      float: right;
    }
  }

  p.learn a {
    @extend .btn;
  }

  hr {
    @extend hr.taper;
  }
}

// Guides section

body.guide #banner {
  position: absolute;
}

body.guide.index #banner {
  position: fixed;
}

body.guide {
  #content-header {
    & > .container {
      position: relative;
    }
    .headline {
      @extend .page-header;
    }
    h1 {
      display: inline-block;
      font-size: 3em; // FIXME make a variable
      padding-left: 3px;
      small {
        font-family: $default_font_family;
        font-size: 15px;
        display: block;
        padding-top: 8px;
        margin-bottom: -18px;
        //font-weight: normal;
      }
    }
    // Styling for the guide button in the header (i.e. top of page)
    .directory {
      display: inline-block;
      float: right;
      @extend .gutter-right;
      .icon-menu-closed, .icon-menu-open {
        position: relative;
        top: -1px;
        margin-right: -2px;
      }
      .icon-menu-closed {
        @extend .icon-white;
        @extend .icon-chevron-right;
      }
      .icon-menu-open {
        @extend .icon-chevron-down;
      }
      a#guides_menu {
        @extend .btn;
        // FIXME btn-primary not giving us the color we want
        @extend .btn-success;
        @include border-radius(5px);
        padding: 9px 0;
        width: 200px;
        display: block;
        line-height: normal;
        font-family: $button_font_family;
        font-size: 2em;
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
        @include box-shadow(rgba(255,255,255,.35) 0 1px 0 0 inset, rgba(255,255,255,.15) 0 0 0 1px inset, rgba(0,0,0,.5) 1px 1px 4px -1px);
      }
      // the following section is for the modal menu dropdown styling
      // FIXME use fluid grid for contents
      #guides {
        text-align: left;
        @include border-radius();
        //@include box-shadow;
        @include single-box-shadow($palette_black_80trans, 0, 1px, 10px);
        padding: 2em 2em 1.5em 2em;
        top: 24px;
        @extend .offset-gutter-right;
        margin-right: -2px;
        width: 640px;
        background-color: $guide_dropdown_color;
        position: absolute;
        z-index: 10;
        padding: 2em;
        // styling for guide button when it has been pressed
        .guides_menu {
          text-decoration: none;
          font-family: $button_font_family;
          font-size: 2em;
          float: right;
          margin: -12px 2px 5px 0;
          color: $guide_button_text_active_color;
        }
        dl {
          width: 320px;
          float: left;
          text-decoration: none;
          &:nth-of-type(3n) {
            clear: left;
          }
        }
        dd {
          padding-left: 9px;
          text-indent: -9px;
          line-height: 1.3em;
          margin-top: .3em;
          margin-bottom: .4em;
        }
      }
    }
  }
  #guide {
    @extend .content-bumper;
    border: 1px solid $light_border;
    @include border-radius();
    @include single-box-shadow(rgba(0,0,0,0.09), 0, 1px, 5px);
  }
  #content {
    @include border-box;
    @include span(9, true);
    background-color: $guide_content_background_color;
    @include border-radius(6px 0 0 6px);
    padding: 0 $gridGutterWidth 1em $gridGutterWidth;
    border-right: 1px solid $light_border;
    margin-bottom: 0;
    h2.group {
      font-size: 2em;
      line-height: 1.3em;
    }
    h2.group, .header {
      padding: 10px $gridGutterWidth;
      margin: 0 (-$gridGutterWidth);
      border-bottom: 1px solid $light_border;
    }
    h2.group:first-child, .header {
      background: $palette_5gray image-url("content_gradient.png") repeat-x;
      @include border-radius(6px 0 0 0);
    }
    .header {
      padding-top: 18px;
      .titlebar {
        @include clearfix;
        h2 {
          @extend .pull-left;
          line-height: 1.3em;
          margin-bottom: 0.5em;
        }
        .btn-group {
          @extend .pull-right;
          padding-top: 2px;
        }
      }
      .authors {
        font-size: 0.9em;
        margin-bottom: 1.25em;
        color: $guide_author_name_color;
        border: 1px dotted $light_border;
        @include border-radius(4px);
        padding-left: 10px;
        a:not(:hover) {
          color: inherit;
        }
      }
      ul {
        padding-left: 0;
        margin-left: 15px;
        li {
          font-weight: bold;
          list-style: none;
          font-size: .95em;
          background: image-url("bullet_check.gif") no-repeat 3px 2px;
          margin: .75em 0;
          padding-left: 30px;
        }
      }
    }
    // headings in guide content
    h3 {
      font-size: 1.9em;
      margin: .65em 0 .2em 0;
    }
    h4 {
      font-size: 1.6em;
      font-style: italic;
      margin-top: 0.75em;
    }
    p, ul, table {
      margin-bottom: 1em;
    }
    img {
      max-width: 100%;
    }
    dl dt {
      margin-top: 1em;
    }
    table {
       border: 1px solid $light_border;
       th {
         background-color: $palette_cerulean;
         color: $palette_white;
         white-space: nowrap;
       }
    }
  }
  #sidebar {
    @include border-box;
    //padding: 1em $gridGutterWidth 0 0;
    padding: 1em 10px 0 0;
    @include span(3);
    h3 {
      font-family: $default_font_family;
      font-size: 1.1em;
      font-weight: normal;
      margin: 0 0 1em -5px;
      text-transform: uppercase;
      color: $toc_text_color;
      &.chapter_header {
        background: image-url("chapters.png") no-repeat 0 10px;
        padding: 5px 0 0 22px;
      }
    }
    ol.chapters {
      list-style: decimal outside;
      color: $toc_text_color;
      padding: 0;
      margin-right: 0;
      margin-left: -3px;
      li {
        margin: 1.5em;
        margin-right: 0;
        a {
          color: $toc_link_color;
          text-decoration: none;
        }
      }
    }
    ul.legend {
      padding: 0;
      margin: 0 0 0 -5px;
      li {
        list-style-type: none;
        line-height: 1.5;
        padding-left: 55px;
        padding-top: 0;
        margin: 0 0 1.5em 0;
        display: block;
        min-height: 40px;
        background-repeat: no-repeat;
        &.edit {
          background-image: image-url("edit.png");
        }
        &.command {
          background-image: image-url("command.png");
        }
      }
    }
  }
}

body.guide.index #content {
    dl dt {
      margin-top: 1em;
      font-size: 1.15em;
      padding: .125em 0 .25em 0;
      font-weight: normal;
    }
    dl dd {
      font-size: 1em;
      border-bottom: 1px solid $light_border;
      margin-left: 0;
      margin-bottom: 1em;
      padding: .25em 0 1.5em 0;
      &:last-of-type {
        border-bottom: 0;
        padding-bottom: 0;
      }
    }
}

// QUESTION go up top?
@import "partials/prettify";

// Media queries for site styles
// NOTE these can be put in nested blocks and sass will bubble them out

@media (max-width: 480px) {
  // TODO hide guide index for now until we have a better layout
  body.guide #content-header .directory {
    display: none;
  }
}

@media (max-width: 767px) {
  // boostrap customization
  body {
    padding-left: 0; 
    padding-right: 0; 
  }

  // boostrap customization
  .navbar-fixed-top {
    margin-left: 0;
    margin-right: 0;
  }

  .content-bumper {
    margin-bottom: 1em;
  }

  body.home {
    #intro .cta {
      text-align: center;
      a.primary {
        margin-top: .5em;
        margin-bottom: 1em;
      }
    }
    #activity {
      padding-bottom: 0;
      #spotlight, #news, #events {
        border: none;
        padding: 0;
        margin-bottom: 2em;
      }
    }
  }

  // breathing room on narrow screens (bootstrap default is 20px)
  footer, .home #activity, body:not(.home) #main {
    padding-left: 15px;
    padding-right: 15px;
  }

  // stretch guide
  #guide {
    margin-left: -10px;
    margin-right: -10px;
  }
}

// navbar collapses under 980px
@media (max-width: 979px) {
  .navbar-fixed-top {
    margin-bottom: 0;
    a.brand {
      padding-top: 3px;
      padding-bottom: 4px;
      .logo {
        @include square(32px);
        background-image: image-url("arquillian-icon-xs.png");
      }
      .name {
        display: none;
        // enable if we want to show text
        //display: block;
        //float: left;
        //line-height: 32px;
        //margin-left: 3px;
      }
    }
    .nav-collapse {
      margin-left: 0;
    }
  }
  body.home #slideshow .carousel-inner {
    height: auto;
    overflow: visible;
  }
  body:not(.guide) #main {
    margin-top: 0;
  }
  body.guide {
    #main {
      margin-top: 49px;
    }
    #content-header .directory {
      float: none;
      margin-top: 2em;
    }
    #content {
      width: 100%;
      border-right: 0;
      @include border-radius(6px 6px 0 6px);
      h2.group:first-child, .header {
        @include border-radius(6px 6px 0 0);
      }
    }
    #sidebar {
      display: none;
    }
  }
  // FIXME holy crap we need to remove some of this nesting!
  body.blog #main > .container #content .post {
    margin-left: 0;
    h2.title {
      margin-left: 60px;
    }
    .byline .avatar {
      left: 0;
    }
    .body {
      margin-right: 0; // TODO reexamine padding on blog body
    }
  }
}
