#edit-controls {
  display : none;

  position : fixed;

  width : 100%;
  top : 0;
  left : 0;

  text-align : center;

  z-index : 999;
  background-color : rgba(0,0,0,0.6);

  color : #eee;

  padding : 10px 0;
}

/* functionality under edit mode */
.edit-mode {
  #edit-controls {
    display : block;
  }

  #edit-mode-toggle.control {
    @include opacity(1);
  }

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

#profile-header {
 text-align : center;
 padding : 50px;
}

.profile-image-container {
  border-radius: 140px;
  border : 3px solid #fff;
  box-shadow : 0 0 2px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.6), inset 0 0 15px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(255,255,255,0.3);

  height : 140px;
  width : 140px;
  background-position : center;

  display : inline-block;
}

#profile-controls {
  text-align : right;
  padding : 10px 18px;

  /* when our buttons aren't there, we still want to maintain a persistent height */
  min-height : 35px;

  .control {
    @include transition(opacity);
    @include opacity(0.4);

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

    &:active {
      @include opacity(0.8);
    }
  }
}

#home-button {
  @include transition(opacity);
  @include opacity(0.4);

  position : absolute;
  right : 10px;
  top : 10px;

  .label {
    padding : 2px 5px;
    padding-right : 7px;
    padding-bottom : 3px;

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

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