body {
  background-image : image_url("pattern.png");
}

/* new link color */
a { color : rgb(42,156,235)  }

/* bootstrap extentions */
.icon-red   { background-image: image_url("img/glyphicons-halflings-red.png");   }
.icon-blue  { background-image: image_url("img/glyphicons-halflings-blue.png");  }

.photoset {
  @include center(horizontal);
  width: 100%;
}

.rich-media {
  //z-index : -5000; //so the framer controls don't get lost
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;

  text-align: center;
  background-color: $night-background-color;

  p {
    @include media-text();
    color: #999;

    a {
      font-weight: normal;
      font-size: smaller;
    }
  }

  iframe {
    @include box-shadow(0, 3px, 15px, #000);

    width: 857px;
    height: 480px;
    max-width: 100%;
    max-height: 100%;
  }
}

.rich-media-container {
  display: table;
  height: 100%;
  width: 100%;
}

.rich-media-container2 {
  display: table-cell;
  vertical-align: middle;
}

.avatar {
  &.micro {
    height: 20px;
    width: 20px;
  }

  &.small {
    height: 35px;
    width: 35px;
  }
}

.author-name {
  font-family : Roboto;
  color: inherit;
}

#author-info {
  position : absolute;
  z-index : 300;

  .author-name {
    color: #555;
  }

  .bd {
    margin-top : 5px;
  }

  .post-time,
  .icon-retweet {
    color: #555;
    @include opacity(0.5);
  }
}

#post-author {
  margin : 0;
  padding : 10px;

  &.status-with-photo-backdrop,
  &.Wallpaper {
    .author-name {
      color : #fff;
    }

    .post-time,
    .icon-retweet {
      color: #fff;
      @include opacity(0.5);
    }
  }
}

.post-view {
  display: table;
  height: 100%;
  width: 100%;
}

#post-content {
  display: table;
  position: absolute;

  height: 100%;
  width: 100%;

  img {
    @include photo-shadow();
  }
}

article { //mood posts
  //default frame show styles
  $big-text-size : 2.5em;
  $medium-text-size : 1.5em;
  $small-text-size: 1em;
  width: 960px;
  margin: 0 auto;

  img {
    max-height: 70%;
    border : 10px solid #fff;
  }

  .photo_viewer {
    margin-bottom : 20px;
  }

  @include centered-frame();
  .container {
    padding: 70px 0;
    max-width: 85%;
  }

  header {
    padding : 0 100px;
  }

  header, header p{
  //big text
    @include media-text();
    font-size: $big-text-size;
    line-height: 1.5em;
  }

  section.body{
    p { font-size: $small-text-size; }

    &.short_body{
      p{
        font-size: $medium-text-size;
        margin-top: .5em;
      }
    }
  }

  &.night{
    background-color : $night-background-color;
    color : $night-text-color;

    #author-info {
      color : $night-text-color;
    }

    .photo-viewer {
      img {
        max-height: 80%;
      }
    }
  }

  &.newspaper {
    @include newspaper-type();

    text-align: left;

    .container {
      max-width: 600px;
    }

    .photo_viewer {
      float: right;
      margin-left: 20px;
      max-width: 320px;
    }

    header {
      margin-bottom: 1em;
      line-height: 1.2em;
    }

    .body p {
      @include newspaper-type();
      font-size: 1.2em;
      line-height: 1.7em;
      margin-bottom: 1.2em;
    }
  }

  &.wallpaper{
    color : #fff;
  }

  &.multi-photo {
    p {
      @include media-text();
    }

    .img-bounding-box {
      display: table-cell;
      text-align: center;
      vertical-align: middle;

      padding: 20px;
      max-height: 400px;
      width: 300px;
    }

    img {
      @include photo-shadow();
      max-width: 100%;
      max-height: 100%;
    }
  }
}

.status-with-photo-backdrop {
  p {
    color: #fff;

    a {
      @include transition(background-color, 0.3s);

      color: #000;
      background-color: #fff;
      background-color: rgba(255,255,255,0.7);
      padding: 0 5px;

      &:hover {
        text-decoration: none;
        background-color: #fff;
        background-color: rgba(255,255,255,1);
      }
    }
  }
}

.darken {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.3);

  display: table;

  .darken-content {
    @include centered-frame();
    height: 100%;
    width: 100%;
  }
}

.photo-fill {
  @include background-cover();
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.photo-backdrop {
  p {
    color: #fff;
    z-index: 2;
  }

  img {
    position: relative;
  }

  .photo-fill {
    @include opacity(0.2)
  }
}

$bring-dark-accent-forward-color: #DDD;



div[data-template=flow] {
  display : table;
  width : 100%;
  height : 100%;
  position : absolute;
}

.flow-content {
  display : table;
  width : 100%;
  height : 100%;
}

.post-form {
  margin-top: 2%;
}

.flow-controls {
  @include info-container-base();
  z-index: 999;

  position: fixed;
  width: 100%;
  bottom: 0;

  padding: 20px 0;
  max-height: 68px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;


  .controls {
    margin: 0 auto;
    max-width: 960px;

    text-align: center;

    button {
      float : right;
    }
    #controls-wrapper {
      margin: 0 9%;
    }
  }

  .aspect-selector {
    float: left;

    i {
      display: none;
    }

    .selected i {
      display: inline-block;
      position: absolute;
      left : 3px;
      margin-top : 1px;
    }

    a {
      display : block;

      span:not(.caret) {
        padding-left: 5px;
      }
    }
  }

  .service-selector {
    float: left;
    margin-left: 100px;
  }

  .dropdown-menu {
    bottom : 0;
    top: auto;
    text-align: left;
  }

  a.mood {
    @include border-radius();
    margin-right: 11px;
    padding: 7px;
    color: #999;
    font-size: 14px;
    line-height: 2em;

    &#selected_mood {
      background-color: #222;
    }

    &:hover {
      background-color: #222;
      text-decoration: none;
    }
  }
}

// this is about the service toggle icons, there is a jasmine test that tests this in service_selector spec
// if you change this, check toggling the new publisher service broadcasts is still sensible
// the checkbox should be hidden, and in the off state the service icons should be lighter
// when the service icons are clicked they should be lighter, and toggle the hidden checkbox.
.magic-service-selector {
  label { display : inline;}

  img {
    @include transition(opacity);

    cursor : pointer;
    height : 28px;
    width : 28px;
  }

  input:not(:checked) + label {
    img {
      @include opacity(0.4);
    }
  }

  input:checked + label {
    &:hover img {
      @include opacity(1);
    }
  }

  input {
    display : none;
  }
}


#top-right-nav {
  z-index: 10;
  position : absolute;
  right : 10px;
  top : 10px;

  & > a {
    @include transition(opacity);
    @include opacity(0.4);

    margin-left : 5px;

    &:hover {
      @include opacity(0.75);
      text-decoration : none;
    }
  }
}

/* bootstrap label fixes for Roboto */
.label {
  padding : 2px 5px;
  padding-bottom : 3px;

  span {
    display : inline-block;
    position : relative;
    top : 1px;
    font-family : Roboto-Bold;
  }
}