#composer.zoom-in #framer {
  -webkit-animation: ease-over 0.2s;
  -moz-animation: ease-over 0.2s;
  -ms-animation: ease-over 0.2s;
}

#composer.zoom-out #framer {
  -webkit-animation: ease-out 0.2s;
  -moz-animation: ease-out 0.2s;
  -ms-animation: ease-out 0.2s;
}

#composer #framer {
  padding-top : 100px;
}

#framer {
  color : #fff;
  background-color : rgba(0,0,0,0.8);

 background-image : image_url("texture/hatched-dark.png");

  z-index : 200;

  text-align : left;

  position : absolute;
  left : 0;
  top : 0;

  height : 100%;
  width : 100%;

  overflow : auto;

  .new_picture{
    margin-top: 4%;
  }

  .photos{
    margin-top: 5px;
  }

  input[disabled] {
      background: inherit;
  }

  textarea#post_text{
    height: 100px;
    padding : 10px;
  }

  .template-picker {
    float : left;
    margin-left : 10px;
    margin-right : -100px; // prevent the picker from being bumped down under the frame.

    input {
      display : none;
    }


    label {
      @include transition(background-color);
      @include border-radius();

      display : inline-block;

      cursor : pointer;

      margin-right: 11px;
      padding: 7px;
      color: #999;
      font-size: 14px;
      line-height: 2em;

      &:hover {
        img {
          border : 4px solid rgba(255,255,255,1);
        }
      }

      .template-name {
        text-align : center;
        text-transform : uppercase;
      }

      img {
        @include border-radius(5px);
        @include transition(border);

        border : 4px solid transparent;
        background-color : #ddd;

        height : 54px;
        width : 54px;
      }
    }

    input:checked + label {
      .template-name {
        color : $link-blue;
      }

      img {
        border : 4px solid $link-blue;
      }
    }
  }

  .preview {
    .canvas-frame {
      margin-left : 0;

      &:hover {
        [contentEditable] {
          @include box-shadow(0,0,5px,$link-blue);
        }
      }

      [contentEditable]:focus {
        @include box-shadow(0,0,0,rgba(0,0,0,0));
        outline : none;
      }
    }

    .content {
      cursor : auto;

      &:active {
        -webkit-transform : none;
      }

      .info {
        display : none;
      }
    }
  }

  .flow-controls {
    padding: 20px 0;
    max-height: 68px;

    .aspect-selector {
      display : inline-block;

      .aspects_dropdown {
        display : inline-block;
      }

      form {
        margin: 0
      }

      i, input {
        display: none;
      }

      input:checked + label i {
        display: inline-block;
        position: absolute;
        left : 3px;
        margin-top : 1px;
      }

      label {
        margin : 0;
        padding : 5px 0;

        &:hover {
          background-color : #eee;
        }

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

    .service-selector {
      display : inline-block;
    }

    .dropdown-menu {
      text-align: left;
    }
  }

  // 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 {
    margin : 0;

    label { display : inline; }

    img {
      @include transition(opacity);
      @include box-shadow(0,0,0,0);

      cursor : pointer;
      height : 70px;
      width : 54px;
    }

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

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

    input {
      display : none;
    }
  }
}

input[type="image"] {
  height : 70px;
  width : 70px;

  &:active {
    -webkit-transform : scale(0.95);
       -moz-transform : scale(0.95);
        -ms-transform : scale(0.95);
  }
}

.flow-controls {
  text-align : center;
}

.new_photo .photo{
  display: inline;
  max-width: 240px;
  max-height: 240px;
  padding: 2px;
}

#photo_upload_button {
  position: relative;
  margin-bottom : 9px;

  input{
    @include opacity(0);
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    cursor : pointer;
  }
}