@import "normalize";
@import "compass/css3";
@import "compass/utilities/general/clearfix";

@mixin rotate($rotate: $default-rotate, $perspective: false, $only3d: false) {
  $trans: rotate($rotate);
  @if $perspective {
    $trans: perspective($perspective) $trans;
  }
  @include transform($trans, $only3d);
}

#typecase {
	margin:10px 15px 2px;

  * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(boxsizing.htc);
    position: relative;
    vertical-align: middle;
  }

  .arrow-down{
  	display:none;
  }

  iframe {
    display:none;
  }

  .typecase-btn {
    border: 1px solid #060606;
    @include background-image(linear-gradient(#828282,#555));
    text-align:center;
    padding: 7px 11px;
    font-size:12px;
    font-family: Helvetica, Arial, Tahoma, sans-serif;
    line-height:auto;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    border-radius:4px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.6);
    @include transition(all 200ms ease-in);

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

		&.primary{
			border-color:#0b84c2;
    	@include background-image(linear-gradient(#179fe5,#0b84c2));

			&:hover {
			  @include background-image(linear-gradient(#3ab3f2,#0b84c2));
			}

      &:active {
        box-shadow:none;
        @include background-image(linear-gradient(bottom,#0b84c2,darken(#0b84c2,3%)));
      }
		}

    &.saving {
      opacity:.5;
    }

		&.large{
			font-size:14px;
			padding:9px 13px;
		}

		&:active {
			box-shadow:none;
      @include background-image(linear-gradient(bottom,#0b84c2,darken(#0b84c2,3%)));
		}
  }

  .clear {clear:both}

  .font-list-wrap {
    margin-bottom:-1px;
  }

  span.add {
    cursor:pointer;
    display:inline-block;
    width:20px;
    height:20px;
    margin:0;
    top:-2px;
    border-radius:20px;
    text-decoration:none;
    box-shadow:0 0 0 1px rgba(#000,.3) inset;
    background-color:#74b741;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;

    &:hover {
      box-shadow:0 0 0 1px rgba(#000,.3) inset,
                 0 0 0 5px rgba(#74b741,.25);
    }

    span {
      display:block;
      width:16px;
      height:16px;
      background:url("../images/icons.png") 2px 2px;
    }
  }

	#masthead{
		border-radius:4px;

		h1{
 			background-color:#555;
			@include background-image(linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.8)));
			box-shadow:0 0 20px rgba(#000,.2) inset,
			           0 0 0 1px rgba(#000,.3) inset;
			border-radius:4px;
			padding:20px;
			margin-bottom:10px;
			height:auto;
      position:static;

			strong{
				background-image: url("../images/logo_typecase.png");
				height:35px;
				width:136px;
				text-indent:-9000px;
				display:inline-block;
				margin-right:5px;
			}

			span{
				font-family:"JournalRegular";
				font-size:20px;
				margin-left:20px;
				font-weight:normal;
				color: #ddd;
				text-shadow: none;
			}

      .pro-badge {
        display:block;
        float:right;
        position:absolute;
        top:-1px;
        right:-1px;
        width:32px;
        height:32px;
        background-image:url("../images/pro_badge.png");
      }
		}

		.buttons{
			margin-left:25px;
      position:static;
			font-family: Helvetica, Arial, Tahoma, sans-serif;
			float:right;
			text-shadow:none;
			font-weight:normal;
			font-size: 11px;
			clear:none;
			line-height:21px;
			margin-top:7px;
			text-align:right;

      a.primary {margin-right:10px}

			span{
				display:block;
				margin-bottom:3px;
				color: #ababab;
				font-size: 11px;
				font-family: Helvetica, Arial, Tahoma, sans-serif;
			}

			.primary{
				border:none;
			}
		}
	}

  .no-fonts, .no-results{
    text-align:center;
    padding:40px 0 50px 0;

    h2 {
      color:#666;
      text-shadow:0 1px 1px #fff;
      margin-bottom:10px;
      font-weight:bold;
      font-size: 18px;
    }

    h4 {
      color:#999;
      text-shadow:0 1px 1px #fff;
      font-weight:normal;
      font-size:14px;
      margin:0;
    }

  }

  .no-results {
    display:none;
    border-bottom:solid 1px #d6d6d6;
    margin-bottom:1px;
  }

  .font-list {
    background:#fbfbfb;

    top:-1px;
    margin-bottom:-1px;

    .font {
      border-bottom:solid 1px #eee;
      background:#fbfbfb;
      -moz-user-select:none;
      -webkit-user-select:none;
      user-select:none;
      -ms-user-select:none;

      .font-sample {
        font-size:20px;
        float:left;
        color:#333;
        padding-left:15px;
        white-space:nowrap;
        width:100%;
        overflow:hidden;
        margin-top:-60px;
        line-height:60px;
      }

      .font-meta {
        float:right;
        display:inline-block;
        padding:0;
        z-index:2;

        .active-arrow {
          display:none;
          width:12px;
          background:url("../images/active_arrow.png") right center no-repeat;
          top:0;
          right:-12px;
          bottom:0;
          position:absolute;
        }

        .font-name {
          float:right;
          color:#aaa;
          font-size:12px;
          height:60px;
          line-height:60px;
          padding-left:50px;
          @include background-image(linear-gradient(left, rgba(#fbfbfb,0) 0%, #fbfbfb 20%));
          background-color:#fbfbfb;
          background-color:rgba(0,0,0,0);
        }

        .font-actions {
          padding:0;
          list-style:none;
          float:right;
          line-height:60px;
          height:59px;
          background-color:#fbfbfb;
          padding:0 15px 0 10px;
          -webkit-transition: all 200ms linear;
          -moz-transition: all 200ms linear;

          li {
            display:block;
            float:left;
          }

          a {
            display:block;
            width:20px;
            height:20px;
            line-height:0;
            border-radius:16px;
            margin:20px 5px;
            opacity:.5;
            text-decoration:none;
            box-shadow:0 0 0 1px rgba(#000,.3) inset;
            -webkit-transition: all 200ms linear;
            -moz-transition: all 200ms linear;

            span {
              display:block;
              width:16px;
              height:16px;
              font-size:0;
            }
          }

          a.delete {
            background-color:#c93e3e;

            &:hover {
              box-shadow:0 0 0 1px rgba(#000,.3) inset,
                         0 0 0 5px rgba(#c93e3e,.25);
            }

            span {
              background:url("../images/icons.png") -14px 2px;
            }
          }

          a.add {
            background-color:#74b741;

            &:hover {
              box-shadow:0 0 0 1px rgba(#000,.3) inset,
                         0 0 0 5px rgba(#74b741,.25);
            }

            span {
              background:url("../images/icons.png") 2px 2px;
            }
          }

          a.preview {
            display:none;
            background-color:#6f94da;

            &:hover {
              box-shadow:0 0 0 1px rgba(#000,.3) inset,
                         0 0 0 5px rgba(#6f94da,.25);
            }

            span {
              background:url("../images/icons.png") -48px 0;
            }
          }

          a.edit {
            display:none;
            background-color:#eac526;

            &:hover {
              box-shadow:0 0 0 1px rgba(#000,.3) inset,
                         0 0 0 5px rgba(#eac526,.25);
            }

            span {
              background:url("../images/icons.png") -64px 0;
            }
          }

          a.disabled {
            opacity:.5;
            background-color:#eee;
            cursor:default;

            &:hover {
              box-shadow:0 0 0 1px rgba(#000,.3) inset;
            }
          }
        }
      }

      &:hover {
        cursor:pointer;
        background:#fff;

        .font-meta {

          .font-name {
            background:transparent;
            @include background-image(linear-gradient(left, rgba(#fff,0) 0%, #fff 20%));
          }
        }

        .font-actions {
            background:#fff;

            a {opacity:1}
          }
      }

      &.active {
        border-color:#d6d6d6;
        background:#fff;
        z-index:10;
        box-shadow:0 0 10px rgba(#000,.15);

        .active-arrow {display:block;}

        .font-meta {
          z-index:2;

          .font-name {
            background:transparent;
            @include background-image(linear-gradient(left, rgba(#fff,0) 0%, #fff 20%));
          }

          .font-actions {
            background:#fff;

            a {opacity:1}
          }
        }
      }
    }
  }

  .content-wrap {
    background:#f6f6f6;
    border:solid 1px #d6d6d6;
    border-top:none;
    border-radius:0;
    overflow:hidden;
    width:100%;
  }

  .sidebar {
    display:none;
    float:left;
    right:1px;
    width:30%;
    padding:15px;
    border-left:solid 1px #d6d6d6;

    #save-fonts {
      width:100%;
    }

    h2 {
      margin:0;
      font-weight:bold;
      color:#555;
      font-size:12px;
      line-height:1.5em;
      border-bottom:solid 1px #e2e2e2;

      &:after {
        content:"";
        display:block;
        position:absolute;
        left:0;
        right:0;
        bottom:-2px;
        height:0;
        border-bottom:solid 1px #fbfbfb;
      }
    }

    #selectors {
      margin:0 0 5px 0;
      padding:0;
      width:100%;
      list-style:none;
      overflow:hidden;
      padding:5px 1px;

      .new-selector-width {
        font-size:13px;
        display:block;
        height:1px;
        color:transparent;
        overflow:hidden;
        float:left;
        padding-top:10px;
      }

      li {
        display:block;
        float:left;
        overflow:hidden;
        background:#fbfbfb;
        @include background-image(linear-gradient(#fff 40%, #ececec));
        border-radius:30px;
        margin:5px 0;
        max-width:100%;
        margin-right:5px;
        padding:6px 0 6px 5px;
        text-indent:5px;
        color:#555;
        font-size:13px;
        white-space:nowrap;
        text-shadow:0 1px 0 rgba(#fff,.75);
        border:solid 0px rgba(0,0,0,0)!important;
        border:solid 1px #ddd;
        box-shadow:0 0 0 1px rgba(#000,.15) inset,
                   0 -1px 1px 1px rgba(#000,.1) inset,
                   0 1px 0 1px rgba(#fff,.5) inset,
                   0 2px 3px -1px rgba(#000,.2);

        .selector-name {
          overflow:hidden;
          display:block;
          font-size:12px;
          line-height:16px;
          border-right:solid 30px transparent;
        }

        &.add-new {
          display:block;
          float:left;
          clear:left;
          width:135px;
          max-width:100%;
          padding:3px;
          margin-bottom:10px;
          -webkit-transition:all 200ms linear;
          -moz-transition: all 200ms linear;
          z-index:2;
        }

        input#new-selector {
          border-radius:22px;
          border:none;
          font-size:13px;
          float:left;
          height:22px;
          padding:3px 25px 2px 7px;
          width:100%;
          margin-right:-5px;
          color:#555;
          border:solid 1px #ccc;
          box-shadow:1px 0 0 rgba(#fff,.25),
                     0 1px 2px rgba(#000,.1) inset;
          outline:none;
          -webkit-transition:all 200ms linear;
          -moz-transition: all 200ms linear;
        }

        input#submit-selector {
          float:right;
          margin-top:-22px;
          height:22px;
          width:24px;
          padding:3px 0 2px 0;
          border-radius:0 22px 22px 0;
          border:0;
          border:solid 1px #ccc;
          box-shadow:0 1px 0 0 rgba(#fff,.4) inset,
                     0 -1px 1px rgba(#000,.05) inset;
          @include background(url("../images/icons.png") right -24px, linear-gradient(#fefefe, #e5e5e5));
          background-color:#e5e5e5;

          &:hover {
            @include background(url("../images/icons.png") right -24px, linear-gradient(#fefefe 70%, #eee));
          }

          &:active {
            @include background(url("../images/icons.png") right -24px, linear-gradient(#efefef, #f3f3f3 30%));
          }
        }

        a.delete {
          cursor:pointer;
          opacity:.5;
          position:absolute;
          right:6px;
          top:6px;
          display:block;
          -webkit-transition:all 250ms linear;
          -moz-transition: all 250ms linear;

          span {
            background:url("../images/icons.png") -16px 0;
            background-color:#999;
            display:block;
            width:16px;
            height:16px;
            border-radius:8px;
            text-decoration:none;
            box-shadow:0 0 0 1px rgba(#000,.25) inset;
          }

          &:hover {
            opacity:.75;
          }
        }
      }
    }

    #variants-form,
    #subsets-form {
      margin:10px 0 20px 0;
      text-transform:capitalize;
    }

    label {
      display:block;
      font-size:12px;
      color:#333;

      input {
        margin-right:5px;
        vertical-align:middle;
      }
    }
  }

	#your-collection header,
	#available-fonts header{
		box-shadow:0 0 20px rgba(#000,0) inset,
							 0 1px 0 rgba(255,255,255,.6) inset;
		border:1px solid #ccc;
	  background-color: #fff;

		h1{
	    color:#333;
		}
	}

  header {
    border-radius:4px 4px 0 0;
    margin:0;
    padding:0;
    @include background-image(linear-gradient(rgba(#000,.02),rgba(#000,.07)));

    h1 {
      margin:0;
      color: #fff;
      font-size:14px;
      font-weight:bold;
      height:40px;
      line-height:40px;
      text-shadow:0 1px 0 rgba(#fff,1);
      text-indent:15px;
    }
  }

  #your-collection {
    overflow:hidden;
    margin:0 0 10px;

    .font-list-wrap {
      float:left;
      width:70%;
      border-right:solid 1px #ccc;

      .font-list {display:none}

      .font {
        border-radius:0;

        &:hover:last-child, &.active:last-child {
          border-radius:0;
        }
      }
    }
  }

  #available-fonts {
    margin:0;

		header{
			border-bottom-width:0;
		}

    .content-wrap {
      border-bottom:none;
    }

    .font-list {
      border-radius:0;
      padding-bottom:0;
      overflow:auto;
      border-bottom:solid 1px #ccc;

      &#search-results {display:none}
      &#loaded-fonts {height:489px}

      .font {

        &:last-child {
          border-radius:0;
        }
      }
    }

    #search {
      padding:10px 9px;
      overflow:hidden;
      height:48px;
      border:1px solid #ccc;
      border-top-width:0;
      background-color:#f9f9f9;
      box-shadow: 0 1px 0 rgba(0,0,0,0.1) inset;
      @include background-image(linear-gradient(rgba(#000,0.13),rgba(#000,0.04)));

      input#search-input {
        width:100%;
        float:left;
        height:28px;
        padding:9px 8px 7px 8px;
        line-height:28px;
        font-size:13px;
        border:none;
        box-shadow:0 0 0 1px rgba(#000,.3),
                   0 2px 0 rgba(#fff,.3),
                   0 1px 2px rgba(#000,.1) inset;
        border-radius:2px;
        -webkit-transition:all 200ms linear;
        -moz-transition: all 200ms linear;

        &:focus {
          box-shadow:0 0 0 1px #179fe5,
                     0 0 8px lighten(#179fe5,10%),
                     0 1px 2px rgba(#000,.1) inset;
          // @include background-image(linear-gradient(,#0b84c2));
        }
      }

      input#search-submit {
        display:none;
        width:7%;
        float:left;
        height:28px;
        padding:0 8px;
        line-height:28px;
        background:lightblue;
        color:white;
        font-size:14px;
        text-shadow:0 1px 0 rgba(#000,.5);
        border:solid 1px #999;
        border:none;
        text-align:center;
        @include background(url("../images/icons.png") center -46px, linear-gradient(#6691da, #2f5abb));
        background-color:#4077cd;
        box-shadow:0 0 0 1px #1b44ab,
                   0 2px 0 rgba(#fff,.4),
                   0 1px 1px rgba(#fff,.2) inset;
        border-radius:0 2px 2px 0;
        -webkit-transition:all 100ms linear;
        -moz-transition: all 100ms linear;

        &:hover {
          box-shadow:0 0 0 1px #1b44ab,
                     0 2px 0 rgba(#fff,.4),
                     0 1px 1px rgba(#fff,.2) inset,
                     0 0 0 28px rgba(#fff,.1) inset;
        }

        &:active {
          @include background(url("../images/icons.png") center -46px, linear-gradient(bottom,#4f7bd1,#2f5abb));
          box-shadow:0 0 0 1px #133a9c,
                     0 2px 0 rgba(#fff,.4),
                     0 1px 1px rgba(#000,.3) inset;
        }
      }
    }
  }

  #more-fonts.typecase-btn{
    display:block;
    clear:both;
    padding: 10px;
    border-radius:0 0 4px 4px;
    margin-top:-1px;
  }

  #firsttimer{
		color:#343434;
  	border-radius:4px;
		background-color:#faf4bf;
		border:1px solid #ddce4f;
		padding:20px;
		margin-bottom:10px;
		clear:both;
		font-family:"JournalRegular","Hand of Sean";
		@include clearfix();

		h1{
			font-weight:normal;
			font-size:40px;
			margin:10px 0 40px 0;
			padding:0 0 25px;
			text-align:center;
			background:url("../images/stripe.png") no-repeat bottom center;
		}

		.buttons{
			text-align:center;
			padding:20px 0 0 0;
			clear:both;

			small{
				display:block;
				margin-top:15px;
				font:normal 11px/11px Helvetica, Arial, Tahoma, Verdana, sans-serif;
				color:rgba(0,0,0,0.5);
			}

		}

		ol{
			margin-left: 50px;
			margin-bottom: 40px;

			li{
				font-size:32px;
				list-style-position:outside;
				position:relative;
				width:28%;
				float:left;
				line-height: 1em;

				.list-item{
					background-image:url("../images/circle_background.png");
					width:57px;
					height:57px;
					position:absolute;
					left:-57px;
					top:-12px;
					display:block;
				}

				strong{
					font-weight:normal;
					font-size:26px;
					padding-left:10px;
					padding-right: 65px;
					display:block;
					line-height: 1em;
				}

				&:first-child{

					width:36%;

					& strong{
						padding-left:10px;
					}

					& span{
						left:-52px;
					}

				}

				&:nth-child(2n){
					width:36%;

					.list-item{
						@include rotate(75deg, false, false);
					}
				}

				&:nth-child(3n){

					.list-item{
						@include rotate(155deg, false, false);
					}
					strong{
						padding-right:0;
					}
				}

			}

		}

  }

}

.typecase_copyright{
	color: #666;
	margin: 20px 0 40px 16px;
	display: block;
}