/* variables */

$light-grey: #999;
$pane-width: 420px;

/* mixins */
@mixin center($orient:vertical) {
  display: -webkit-box;
  -webkit-box-orient: $orient;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: $orient;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: $orient;
  box-pack: center;
  box-align: center;
}

@mixin box-shadow($left, $top, $blur, $color) {
  -webkit-box-shadow: $left $top $blur $color;
  -moz-box-shadow: $left $top $blur $color;
  box-shadow: $left $top $blur $color;
}

@mixin pane-width() {
  width: $pane-width;
  max-width: 100%;
}

@mixin background-cover() {
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@mixin opacity($val) {
  -moz-opacity: $val;
  filter:alpha(opacity=$val*100);
  opacity: $val;
}

@mixin border-radius($top:3px, $bottom:$top) {
  -webkit-border-radius: $top $top $bottom $bottom;
  -moz-border-radius: $top $top $bottom $bottom;
  border-radius: $top $top $bottom $bottom;
}

@mixin transition($type, $speed:0.2s) {
  -o-transition: $type $speed;
  -moz-transition: $type $speed;
  -webkit-transition: $type $speed;
  transition: $type $speed;
}

@mixin animation($name, $speed:0.2s, $easing:ease-in-out) {
  -webkit-animation: $name $speed $easing;
  -moz-animation: $name $speed $easing;
  -ms-animation: $name $speed $easing;
}

@mixin info-container() {
  @include box-shadow(0, 6px, 20px, #000);
  @include border-radius(3px, 0px);
  @include dark-hatched-bg();
  @include pane-width();

  display: inline-block;
  position: relative;

  border-top: 1px solid #555;
  border-right: 1px solid #444;
  border-left: 1px solid #444;

  padding-top: 25px;

  color: #ddd;

  /* webkit acceleration */
  -webkit-transform: translateZ(0);
}

@mixin dark-hatched-bg() {
  background-color: #444;
  background-image: url("../images/hatched-bg-dark.png");
}

@mixin photo-shadow() {
  @include box-shadow(0, 3px, 15px, #999);
}

@mixin media-text() {
  font: {
    weight: bold;
    size: 2em;
  }

  line-height: 2em;
  padding-bottom: 0;
  margin-bottom: 0;
}

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

.icon-green {
  background-image: url(../img/glyphicons-halflings-green.png);
}

.icon-blue {
  background-image: url(../img/glyphicons-halflings-blue.png);
}

/* styles */
.multi-photo {
  display: table;

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

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

.note-content {
  min-width: 250px;
  width: 90%;
  max-width: 550px;
  padding-bottom: 2em;
  display: inline-block;
  text-align: left;

  p {
    font-size: 1.25em;
    line-height: 1.5em;
    font-family: Palatino, times, georgia, serif;
    margin-bottom: 1em;
    padding: 0 5%;
  }
}

.status,
.status-with-photo-backdrop
{
  p {
    @include media-text();
  }
}

.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 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    padding: 70px 10%;

    height: 100%;
    width: 100%;
  }
}

.post {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

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

.rich-media {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;

  text-align: center;
  background-color: #333;

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

#post-nav {
  @include transition(opacity, 0.5s);
  @include opacity(1);
}

body.idle {
  #post-nav {
    @include opacity(0);

    .nav-arrow{
      &.right {
        margin-right: -40px;
      }

      &.left {
        margin-left: -40px;
      }
    }

  }
}

.nav-arrow {
  @include opacity(0.8);
  @include transition(all, 0.3s);

  display: table;

  position: fixed;
  height: 100%;
  z-index: 3;
  top: 0;
  padding: 0 1.2%;

  background-color: rgba(0,0,0,0);

  .nav-arrow-inner {
    padding: 0; margin: 0;
    display: table-cell;
    vertical-align: middle;
  }

  img {
    @include opacity(0.5);

    height: 30px;
    width: 30px;

    /* half the size of the nav arrows on mobile phones */
    @media (max-width: 480px) {
      height: 15px;
      width: 15px;
    }
  }

  &.left {
    left: 0;
    padding-right: 19px;
  }

  &.right {
    right: 0;
    padding-left: 19px;
  }

  &:hover {
    background-color: rgba(0,0,0,0.1)
  }
}

.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-interactions {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  text-align: center;
  z-index: 100;
}

#post-reactions {
  height: 80%;
  max-height: 350px;
  overflow: auto;
  margin-top: 5px;
}

#post-info,
#post-info-sneaky {
  text-align: center;
  z-index: 10;

  margin-top: -33px;

  #post-info-container {
    @include info-container();
  }

  .well {
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
    -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);

    margin: 5px;
    padding: 5px;
    text-align: left;

    max-height: 20px;
    overflow: hidden;

    background: {
      color: #222;
      color: rgba(0,0,0,0.2);
    }

    border: {
      left: 1px solid #444;
      right: 1px solid #444;
      bottom: 1px solid #555;
      top: 1px solid #111;
    }

    .img {
      margin-right: 5px;
    }

    i {
      margin-top: 1px;
    }

    .avatar {
      @include border-radius();
      margin-right: 0;
    }
  }

  #post-comments {
    text-align: left;
    padding-top: 0;
  }

  #new-post-comment {
    -webkit-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
    box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);

    border-top: 1px solid #444;
    text-align: left;
    background-image: url("../images/hatched-bg-dark.png");
  }

  #new-post-comment-container {
    position: relative;

    padding: 10px;

    textarea{
      height: 18px;
      width: 318px;
    }

    form {
      margin-bottom: 0;
    }

    .btn {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
  }
}

#post-info-sneaky {
  @include transition(all, 0.2s);

  z-index: 1;
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  bottom: 0;

  margin-bottom: -60px;
  min-height: 20px;

  #post-info-container-sneaky {
    @include info-container();

    padding: 10px 0;
    min-height: 20px;
  }
}

.home-button {
  @include transition(opacity, 0.3s);
  @include opacity(0.6);

  position: absolute;
  left: 2px;
  top: 4px;

  padding: 4px 6px;

  &:hover {
    @include opacity(1);
  }
}

.invoker {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#post-feedback:hover {
  #post-info-sneaky:not(.passive) {
    @include opacity(1);
    margin-bottom: -13px;
  }
}

.comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 {  
color: white; 
text-shadow: 1px 1px black;
text-rendering: optimizelegibility;  
}

.post-comment {
  -moz-box-shadow: 0 1px 2px -2px #999;
  -webkit-box-shadow: 0 1px 2px -2px #999;
  box-shadow: 0 1px 2px -2px #999;

  border-bottom: 1px solid #333;

  p:last-child {
    margin-bottom: 0;
  }

  &:last-child {
    box-shadow: none;
    border-bottom: none;
  }

  padding: 10px;
  padding-right: 40px;
  margin: 0px;

  .avatar {
    @include border-radius();

    border: {
      top: 1px solid #222;
      right: 1px solid #444;
      left: 1px solid #444;
      bottom: 1px solid #666;
    }
  }

  text-shadow: 0 1px 3px rgba(0,0,0,0.3);

  a:hover {
    color: #99CCFF
  }

  time {
    color: #666;
    font-size: smaller;
  }

  .controls {
    @include transition(opacity);
    @include opacity(0);

    float: right;
    margin-right: -40px;

    a {
      padding: 3px 5px;
      &:hover {
        text-decoration: none;
      }
    }
  }

  &:hover {
    .controls {
      @include opacity(0.4);

      &:hover {
        @include opacity(1);
      }
    }
  }
}

#user-controls {
  height: 30px;

  .avatar {
    vertical-align: top;
    height: 27px;
    width: 27px;
  }

  .label {
    @include opacity(0.6);
    @include transition(opacity, 0.3s);
    @include box-shadow(0, 0, 2px, rgba(255,255,255,0.9));

    position: relative;

    z-index: 20;

    padding: 5px;
    margin-right: 5px;
    line-height: 24px;

    padding-top: 3px;
    padding-right: 2px;

    i {
      padding: 0;
      margin: 0;
    }

    background-color: #000;
    color: #fff;

    &.comment {
      padding-right: 5px;
      margin-right: 0;
    }

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

#post-content {
  display: table;

  padding: 70px 10%;

  position: absolute;
  height: 100%;
  width: 100%;

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

#post-feedback {
  /* fixes flicker on hover... no idea as to why */
  position: relative;
  z-index: 30;
}

#close-reactions-pane {
  display: none;

  text-align: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: -3px;

  #close-reactions-pane-container {
    @include pane-width();
    top: 0;

    min-height: 30px;
    display: inline-block;
    position: relative;
  }
}

#post-interactions.active #close-reactions-pane {
  display: block;
}

.info-tick {
  @include opacity(0.8);

  position: absolute;
  right: 8px;
  top: 8px;
}