/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/

form#new_master {
    display: inline-block;
    width: 100%;
    padding: 3rem;
    margin: 0 auto;
    border: 2px solid #777;
}

input#files {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: #555;
    display: inline-block;
    padding: 1rem;
    margin: 15rem 2rem 0 auto;
    cursor: pointer;
    max-width: 15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    figure {
      text-align: center;
    }
}

#upload-icon{
  transition: .25s ease all;
  fill: #333;
}

.inputfile:focus + label,
.inputfile + label:hover {
    #upload-icon {
      fill: #999;
    }
}

.inputfile:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

img.master-large {
  max-width: 80%;
  max-height: 40%;
}

ul#masters {
  display: inline-block;
  width: 100%;
}

.block {
  @include span-columns(3);
  @include omega(4n);
}

.master-image-edit {
  @include span-columns(6);
  text-align: center;
};

.master-info-edit {
  @include span-columns(6);
}

.master-image {
  @include span-columns(7);
};

.master-info {
  @include span-columns(5);
}

dt.meta-name {
    font-weight: 400;
    font-size: .75rem;
    &:after {
      content: ":";
    }
}

dd.meta-value {
  margin: .25rem 0 .75rem 0;
  font-weight: 500;
  border-left: 3px solid #ddd;
  padding: .5rem;
}

.meta-pair {
    margin: 1.5rem 0;
}

.master-title {
  float: left;
  display: inline-block;
}

dl {
  display: block;
  clear: both;
}
.masters-heading {
  @include outer-container;
  padding: 0.5rem;
  margin-bottom: 1rem;

  .controls {
    @include span-columns(4);
    float: left;
  }

  .search {
    @include span-columns(6);
    float: right;
    form {
      @include outer-container;
    }

    input[type='search'] {
      @include span-columns(7);
      display: inline-block;
      margin-bottom: 0;
    }

    button {
      @include span-columns(2);
    }
    input[type='submit'] {
      @include span-columns(3);
    }
  }
}