@import "normalize";
@import "compass/css3";

#typecase{
  z-index:9999;
  position: fixed;
  left:0;
  bottom:0;
  right:0;
  height:45px;
  margin:0;
  padding: 4px 7px;
  background:#272727;
  @include background-image(linear-gradient(#303030, #141414));
  border-top:1px solid #000;

	*:not(.font-item){
		font-family: Helvetica, Arial, Verdana, sans-serif;
	}

  iframe {
    display:block;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    border:0;
  }

  .badge {
    display:none;
    font-style:normal;
    border-radius:1em;
    background:darken(#ff0000,8%);
    box-shadow:0 4px 8px rgba(#fff,.4) inset,
               0 2px 5px black;
    text-shadow:none;
    padding:3px;
    width:23px;
    height:23px;
    position:absolute;
    top:-10px;
    line-height:13px;
    right:-6px;
    border:solid 2px #fff;
  }

  .sidebar {
    overflow:auto;
    height: 100%;
  }

  #firsttimer{
    display:none;
  }

  #masthead{
    h1{
      width:auto;
      background:none;
      background-color:none;
      float:right;
      width:112px;
      height:35px;
      border:none;
      margin:0;
      padding:0;
      box-shadow:none;

      strong{
        margin:7px 0 0;
        border:0;
        background-image:url("../images/logo_typecase_small.png");
        background-repeat:no-repeat;
      }

      span,
      .buttons{
        display:none;
      }
    }
  }

  .no-fonts{
    padding:0;
    height:100%;

    .no-fonts-content {
      top: 50%;
      margin-top: -27px;
    }

    h2{
      font-size:16px;
      line-height:21px;
    }
  }

  .no-results{
    padding:0;
    height:100%;
    border:0;

    .no-results-content {
      top: 50%;
      margin-top: -27px;
    }
  }

  #your-collection-wrap,
  #available-fonts-wrap,{
    display:none;
    left:0;
    right:0;
    bottom:50px;
    margin:0 10px 8px;
    position:fixed;
    box-shadow:0 0 30px rgba(0,0,0,0.7);
    background:#333;
    border-radius:6px;
    height:40%;
    overflow:visible;
    padding:4px;

    #your-collection,
    #available-fonts {
      height:100%;
    }

    .font {
      height:62px;
    }

    .font-name {
      font-family:Arial,sans-serif;
    }

    .font-sample {
      height:61px;
    }

    &.active{
      display:block;
    }

    header{
      border-top-width:0;
      border-left-width:0;
      border-right-width:0;
    }

    #available-fonts .content-wrap{
      border:0;
      border-radius:0 0 4px 4px;
      position:absolute;
      bottom:0;
      top:88px;
      overflow:hidden;
    }

    #available-fonts .font-list {
      overflow:hidden;
    }

    .font-list,
    .font-list#loaded-fonts,
    .font-list#search-results{
      margin:0;
    }

    #available-fonts .font-list-wrap {
      position:absolute;
      bottom:39px;
      left:0;
      right:0;
      top:0;
      overflow:auto;
    }

    #your-collection .content-wrap {
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      top:41px;
      border:0;
    }

    #your-collection .font-list-wrap {
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      overflow:auto;
      border:0;
    }

    #your-collection .sidebar {
      position:absolute;
      top:0;
      left:70%;
      background:#f6f6f6;
      border:0;
      padding-bottom:15px;
      border-left:solid 1px #ccc;
    }

    #your-collection .font-list {
      position:absolute;
      top:0;
      left:0;
      bottom:0;
      width:70%;
      margin-right:-1px;
      overflow:visible;
    }

    #your-collection .font {
      -moz-box-sizing:content-box;
    }

    .arrow-down{
      display:block;
      width:11px;
      height:6px;
      position:absolute;
      bottom:-6px;
      z-index:9999;
      left:71px;
      background-image:url("../images/arrow_down.png");
    }

    #more-fonts {
      position:absolute;
      bottom:0;
      right:0;
      left:0;
      z-index:9999;
    }

  }

  #available-fonts-wrap{

    .arrow-down{
      left:200px;
    }

  }

  > .typecase-btn{
    color:white;
    display:block;
    padding:9px 14px;
    margin-right:7px;
    float:left;
    text-align:center;
    border-radius:4px;
    background-color:#222;
    text-shadow:0 -1px 0 #000;
    border:1px solid #000;
    box-shadow:0 1px 0 rgba(255,255,255,0.1) inset;
    text-decoration:none;
    @include background-image(linear-gradient(#666, #444));

    &:hover{
      @include background-image(linear-gradient(#777, #555));
    }

    &:active,
    &:focus,
    &.active{
      background:#181818;
      box-shadow:0 3px 7px rgba(0,0,0,0.4) inset;
      outline: none;
    }

  }

  #your-collection {
    .content-wrap {

    }
  }

  #available-fonts {
    .content-wrap{

    }
  }

  #available-fonts.searching {
    .content-wrap {

    }
  }

}