@mixin wide() {
  width : $two-column-width + px;
}

a.logo{
text-decoration: none;
color: white;
  &:hover{
    text-decoration: none;
    color: white;
    cursor: pointer;
  }
}
.no-post-message {
  text-align: center;
  margin-top: 50px;
  font-size: 1.2em;
}

.canvas-frame {
  float : left;
  margin : 10px;
  margin-bottom : 18px;

  max-width : 100%;

  /* expand / contract cursor declarations */
  &.x2 .content {
    cursor : nw-resize;
    cursor : -moz-zoom-out;
    cursor : -webkit-zoom-out;
  }
  .content {
    cursor : nwse-resize;
    cursor : -moz-zoom-in;
    cursor : -webkit-zoom-in;
  }

  .content {
    /* default height to be overridden */
    min-height : $column-width + px;
  }

  &.has-media .content {
    min-height : 0;
  }

  .content {
    @include transition(-webkit-transform);
    @include box-shadow(0, 8px, 50px, rgba(0,0,0,0.9));

    background-image : image_url("texture/paper.jpg");

    &:hover {
      .info {
        top : 0;
      }
    }

    &:active {
      -webkit-transform : scale(0.99);
    }

    img {
      border : none;
    }

    //hax to deal with markdownify
    p {
      font-size: inherit;
      line-height: inherit;
    }

    position : relative;

    background-color : #fff;

    width : $column-width + px;
    max-width : 100%;

    overflow : hidden;

    /* used in masking photos with overflow: hidden; */
    .image-container {
      overflow : hidden;
      width : 100%;

      img {
        width: 100%;
        max-width : 100%;
      }
    }
  }

  .embed-frame {
    .thumb {
      position : relative;
    }
    img  {
      width: 100%;
    }

    iframe {
      height : 100%;
      width : 100%;
      max-height: 222px;
    }
  }

  .controls{
    position : absolute;
    z-index : 100;
    top : 10px;
    right : 10px;

    display : none;

    .edit-mode & {
      display : inline-block;
    }

    a, span {
      display : inline-block;
      background-size : 30px 30px;
      height : 30px;
      width : 30px;
      text-decoration : none;
    }

    .delete {
      background-image : image_url('buttons/delete.png');

      &:hover {
        background-image : image_url('buttons/delete_hover.png');
      }
    }
  }

  .info {
    @include transition(top);
    @include box-shadow(0,1px,3px,rgba(0,0,0,0.3));
    @include opacity(0.8);

    cursor : pointer;

    background-color : rgba(255,255,255,0.8);
    border-bottom : 1px solid #fff;

    color : #000;

    position : absolute;
    top : -32px;
    right : 0;
    text-align : center;
    width : 100%;

    z-index : 30;

    padding : 5px 0;

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

    i {
      margin-left:  3px;
    }

    .avatar {
      position : absolute;
      top : 0;
      left : 0;

      height : 29px;
      width : 29px;
    }

    .timestamp,
    .permalink {
      margin : 1px 7px;
    }

    .timestamp {
      float : left;
      margin-top : 2px;
    }

    .permalink {
      cursor : pointer;
      float : right;
    }
  }

  .background-color {
    height : 100%;
    width : 100%;
    position: absolute;
    top : 0;
    left : 0;
  }

  .text-content {
    position : relative;
    z-index : 10;
    color : #000;

    text-shadow : 0 2px 0 rgba(#fff,0.6), 0 -1px 2px rgba(#555, 0.1);
    font-size : 1.5em;
    line-height : 1.2em;

    /* I'D DO ANYTHING FOR TEXT, BUT I WON'T DO THAT (see: http://www.youtube.com/watch?v=9GNhdQRbXhc) */
    max-height : 485.5px;

    img {
      max-width: 100%;
      width: 100%;
    }

    p {
      word-break : break-word;
    }

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

  &.cyan .background-color   { background-color : rgba($cyan, 0.2); }
  &.green .background-color  { background-color : rgba($green, 0.2); }
  &.yellow .background-color { background-color : rgba($yellow, 0.2); }
  &.purple .background-color { background-color : rgba($purple, 0.2); }
  &.lime-green .background-color { background-color : rgba($lime-green, 0.2); }
  &.orange .background-color { background-color : rgba($orange, 0.2); }
  &.red .background-color { background-color : rgba($red, 0.2); }
  &.turquoise .background-color { background-color : rgba($turquoise, 0.2); }
  &.sand .background-color { background-color : rgba($sand, 0.8); }

  &.blog-text {
    .text-content {
      padding : 10px;
      color : #222;

      p {
        text-shadow : none;

        font-family : Palatino, Georgia, Times, serif;
        font-weight : normal;
        font-size : 0.8em;
        line-height : 1.5em;
        text-align : justify;
      }
    }
  }

  &:no-text {
    img {
      border : none;
    }
  }

  &:not(.wallpaper) {
    img {
      border-bottom : 1px solid #ddd;
    }

    .text-content {
      padding : 20px;
      font-size : 14px;
      line-height : 18px;
      color : #444;
    }
  }

  &.editable:not(.has-media),
  &.big-text {
    .text-content {
      display : table;
      height : 225px;
      width : 225px;
      margin: 0px auto;
      
      p {
        display : table-cell;
        vertical-align : middle;

        font-size : 2.0em;
        line-height : 1.1em;
        text-align : center;
      }
    }
  }

  &.editable:not(.has-media) p {
    min-width : 225px;
    min-height : 225px;
  }

  &.x2.big-text .text-content {
    width : $two-column-width - 40 + px;
  }

  /* larger declarations */
  &.x2.width .content { @include wide(); }

  &.sticky-note.x2.height  .content {
    min-height : $two-row-height + px;
  }

  &.wallpaper {
    .image-container {
      background-color: black;
    }

    &.has-text{
      img {
        //image container background is black, lowering opacity darkens image
        @include opacity(0.7);
      }
    }

    .text-content {
      position: absolute;
      left: 0;
      width: 100%;
      top: 40%;
      @include centered-frame();
      font-size: 2em;
      color: white;

      p {
        text-shadow : none;
        padding : 0 10px;
      }
    }
  }

  /* new styles go! */
  &.typist {
    .content {
      background : {
        image : image_url("texture/typist.png");
        color : transparent;
      }
    }

    .background-color {
      display : none;
    }

    p {
      font-family : "American Typewriter", "Courier";
      letter-spacing : 1.5px;
      font-size : 0.9em;
      color : #111;
    }
  }

  &.fridge {
    p {
      font : {
        family : "Noteworthy", "Marker Felt", "Comic Sans";
        style : italic;
      }
      font-size : 2em;
      line-height : 1.4em;
    }
  }

  &.vanilla {
    .content {
      background :{
        color : #fff;
        image : image_url("texture/vanilla.jpg");
      }
    }

    .background-color {
      display : none;
    }

    p {
      color : #111;
      text-shadow : none;
      font : {
        weight : normal;
        family : Roboto-Light;
      }
    }
  }
}

/* new stream overrides */
#stream {
  color : #fff;
  background-color : #222;

  .background {
    @include box-shadow(-2px, 0, 7px, rgba(0,0,0,0.8));
    @include dark-hatched-bg();

    position : fixed;
    height : 100%;
    width : 100%;
  }


  #stream-interactions,
  #stream-content {
    padding-top : 90px;
  }
}

#stream-content {
  .stream-frame {
    .stream-frame-wrapper {
      position: relative; //interactions scroll spy gets confused about div height when there are images without this line.
    }
    margin-bottom : 40px;

    .stream-frame-feedback {
      float : right;
      margin-top : 8px;
    }

    .photo-backdrop .text-content p,
    .status-with-photo-backdrop .text-content p {
      color: #111;
    }

    .canvas-frame {
      .info {
        display : none;
      }
    }

    /* a media box object */
    .author {
      margin : 0;

      .bd {
        margin-top : 11px;
      }
    }

    .selected-frame {
      .content {
        border: 10px solid red;
      }
    }
  }

  .canvas-frame {
    width: 100%;
    margin : 0;
    float : none;

    .content {
      width: 100%;

      /* cursor overrides */
      cursor : pointer;
    }
  }
}

/* responsive */
@media (max-width: 767px) {
  body {
    padding : 0;
  }

  .canvas-frame {
    width : 100%;
    margin-left : 0;
    margin-right : 0;

    margin-bottom : 10px;

    .content {
      font-size : 0.9em;
      margin : 0;
      width : auto !important;
    }
  }
}