@import "_new_mixins";

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

 @media (max-width: 770px) { //why is 770 a magic number?
    body {
      padding: 0;
    }
  }

.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;
}

.header {
  position: fixed;

  /* position absolute for mobile */
  @media (max-width: 480px) {
    position: absolute !important;
  }

  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  overflow-x: hidden;
}

#header-container {
  padding: 1.2%;

  /* don't pad the header if we're mobile */
  @media (max-width: 480px) {
    padding: 0 !important;
  }
}

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

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

.author-name {
  color: inherit;
  font-weight: bold;
}

#post-author {
  @include border-radius();

  border: 1px solid rgba(255,255,255,0.2);
  border-top: 1px solid rgba(255,255,255,0.5);

  float: left;
  margin: 0;

  padding: 5px;
  padding-right: 10px;

  background-color: rgba(255,255,255,0.6);

/* don't pad the header if we're mobile */
  @media (max-width: 480px) {
    @include border-radius(0);
    background-color: rgba(255,255,255,0.4);
    width: 100% !important;
    border: none !important;
    padding: none !important;
  }

  max-height: 35px;

  .avatar {
    @include border-radius();
  }

  .post-time,
  .icon-retweet {
    color: #000;
    @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 : 3em;
  $medium-text-size : 2em;
  $small-text-size: 1.5em;
  width: 960px;
  margin: 0 auto;

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

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

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

    &.short_body{
      p{
        font-size: $medium-text-size;
      }
    }
  }

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

  &.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: 1em;
    }

    .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;
      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();
  z-index : -5000; //so the framer controls don't get lost
  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 {
  display : table-cell;
  vertical-align : middle;
}

.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;
    }
  }

  .aspect-selector {
    float: left;

    i {
      display: none;
    }

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

    a {
      display : block;

      span {
        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: 20px;
    padding: 5px;
    color: #999;
    font-size: 20px;

    &#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;}

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

  input {
    display : none;
  }
}