// compileCompressed: ../css/admin-style.min.css, compileExpanded: ../css/expanded/admin-style.css, compileNested: ../css/nested/admin-style.css
table, tr, td, th, tbody, thead{
  box-sizing:content-box;
}

.tef-water-mark{
  position: fixed;
  right: 30px;
  bottom: 10px;
  opacity: 0.5;
  z-index: -1;
}

.tef-media-container{
  clear: both;
  width: 100%;
  display: block;
  float: left;

  .tef-media-file{
    display: inline-block;
    float: left;
    margin-bottom: 15px;
    &.thumbnail{
      border: 3px solid #FFF;
      box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    }
    
    img{
      max-width: 200px;
      border: 1px solid #CCC;
    }

  }
}
.sortable-icon{
  cursor: row-resize;
}

.no-display{
  display: none !important;
}

.admin_page_tef-manage-taxonomy{

  width: 100%;
  min-width: 100%;

  thead{

    th#position{
      width: 20px;
    }

    th#name,
    th#type{
      width: 10%;
    }

    th#label{
      width: 15%;
//TMP
width: 500px;
    }

  }

  tbody{
    position: relative;

    tr{
      min-width: 100%;
      max-width: 100%;
      &.in-edition{
        .row-actions{
          opacity: 0;
        }

        td.label{
          column-span: 4;
        }

        td.name,
        td.type,
        td.description{
          display: none;
        }

        table.tef-form{
          display: table;
        }

      }

      td.position{
        text-align: center;
        font-weight: bold;
      }

      &.no-items{
        h2{
          line-height: 2em !important;
        }

        .button{
          margin-left: 15px;
        }
      }

      &.ui-sortable-helper{
        background: #e7f1ff;
        box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
      }

    }


  }
}

.tef-form{

  background: #FFF;
  border: 1px solid #CCC;
  min-width: 500px;
  max-width: 100%;
  width: 50%;
  border-collapse: collapse;

  &:not(.visible){
    display: none;
  }

  tr{
    border: 1px solid #CCC;
    border-bottom: 1px solid #EEE;

    &:last-child{
      border-bottom: none;
    }

    th{
      width: 150px;
      font-weight: bold;
    }

    td{
      position: relative;

      input[type=text],
      input[type=number],
      textarea,
      select{
        width: 100%;
      }

      input:not([readonly=readonly]) + a.unlock-field{
        display: none;
      }

      input[readonly=readonly] + a.unlock-field{
        position: absolute;
        opacity: 0;
        top: 0; left: 0;
        width: calc(100% - 18px);
        height: calc(100% - 16px);
        margin: 8px 10px;
        transition: all .2s;
        color: #333;
        line-height: 30px;
        padding-left: 10px;
        box-sizing: border-box;
        cursor: pointer;
        background: #e7f1ff;
        border: 1px solid #CCC;
        font-size: 1.3em;
        box-shadow: 1px 1px 1px rgba(0,0,0,0.05);

        &:hover{
          opacity: 1;

        }
      }

      textarea{
        min-height: 200px;
      }

      &.options_list{
        .options{
          width: 100%;
          float: left;
          margin: 10px 0;
        }
        hr{
          clear: both;
        }
        .option{
          width: 100%;
          position: relative;
          float: right;

          input{
            width: 49%;
            width: calc(50% - 4px);
          }

          .key.no-display + .value{
            width: 100%;
          }

        }


      }

      &.actions{
        text-align: right;

        button{
          i{
            font-size: 1.2em;
            margin-right: 5px;
          }
        }
      }
    }
  }

}


ul.vendors{
  li{
    float: left;
    display: inline-block;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    transition: 0.2s all;
    margin: 0 20px;
    padding: 0;
    border: 2px solid #FFF;

    *{
      margin: 0;
      padding: 0;
      display: inline-block;
    }

    a{
      border: 1px solid #EEE;
    }

    img{
      height: 150px;
    }

    &:hover{
      box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
    }
  }
}
