@import "compass/css3/box-sizing";
@import "compass/css3/box-shadow";
@import "compass/css3/border-radius";
@import "compass/css3/transition";
@import "compass/css3/transform";
@import "compass/utilities/general/clearfix";
@import "compass/css3/flexbox";


@import "../fonts/fontello/css/fontello.css";
@import "mixins";
@import "variables";
@import "buttons";

@import "notifications";
@import "code-snippet";
@import "filament-for-blogs";
@import "filament-cards";

.box-shadow {
  @include box-shadow(1px 1px 2px rgba(0,0,0,0.1));
}
#filament-logo {
  width: 105px;
}
#filament {
  -webkit-font-smoothing: antialiased;
  max-width: 785px;
  padding-top: 30px;
  padding-left: 30px;
  p {
    font-size: 16px;
  }
  #header {
    margin-bottom: 15px;
  }
  .has-tooltip {
    position: relative;
    display: inline-block;
    &:hover,
    &:active {
      .filament-tooltip {
        display: block;
      }
    }
  }
  .filament-tooltip {
    $arrow-size: 14px;
    $background-color: white;
    $stroke-size: 1;
    $stroke-color: #cecece;

    display: none;
    background: $background-color;
    margin-top: 40px;
    position: absolute;
    z-index: 100;
    padding: 5px;
    top: 0;
    border-radius: 3px;
    border: solid $stroke-size+px $stroke-color;
    @include box-sizing(border-box);
    @include box-shadow(0px 1px 2px rgba(0,0,0,.22));
    .inner {
      position: relative;
      z-index: 20;
      @include box-sizing(border-box);
      img {
        float: left;
      }
    }
    &:after,
    &:before {
      left: 13%;
      top: 0;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      z-index: 10;
      pointer-events: none;
    }
    &:after {
      border-color: transparent;
      border-bottom-color: $background-color;
      border-width:  $arrow-size ($arrow-size * 0.8);
      margin-top: $arrow-size * -2;
      margin-left: $arrow-size * -1;
    }
    &:before {
      border-color: transparent;
      border-bottom-color: $stroke-color;
      border-width:  ($arrow-size + $stroke-size) (($arrow-size + $stroke-size) * 0.8);
      margin-top: ($arrow-size + $stroke-size) * -2;
      margin-left: ($arrow-size + $stroke-size) * -1;
    }
  }
}


// #filament {
//   -webkit-font-smoothing: antialiased;
//   max-width: 775px;
//   padding-top: 42px;
//   padding-left: 33px;
//   padding-right: 20px;
//   @include box-sizing(border-box);
//   @media only screen and (max-width:480px) {
//     padding-left: 10px;
//   }

//   .has-tooltip {
//     position: relative;
//     display: inline-block;
//     &:hover,
//     &:active {
//       .filament-tooltip {
//         display: block;
//       }
//     }
//   }
//   .filament-tooltip {
//     $arrow-size: 14px;
//     $background-color: white;
//     $stroke-size: 1;
//     $stroke-color: #cecece;

//     display: none;
//     background: $background-color;
//     margin-top: 40px;
//     position: absolute;
//     z-index: 100;
//     padding: 5px;
//     top: 0;
//     left: 50%;
//     border-radius: 3px;
//     border: solid $stroke-size+px $stroke-color;
//     @include box-sizing(border-box);
//     @include box-shadow(0px 1px 2px rgba(0,0,0,.22));
//     .inner {
//       position: relative;
//       z-index: 20;
//       @include box-sizing(border-box);
//       img {
//         float: left;
//       }
//     }
//     &:after,
//     &:before {
//       left: 50%;
//       top: 0;
//       border: solid transparent;
//       content: " ";
//       height: 0;
//       width: 0;
//       position: absolute;
//       z-index: 10;
//       pointer-events: none;
//     }
//     &:after {
//       border-color: transparent;
//       border-bottom-color: $background-color;
//       border-width:  $arrow-size ($arrow-size * 0.8);
//       margin-top: $arrow-size * -2;
//       margin-left: $arrow-size * -1;
//     }
//     &:before {
//       border-color: transparent;
//       border-bottom-color: $stroke-color;
//       border-width:  ($arrow-size + $stroke-size) (($arrow-size + $stroke-size) * 0.8);
//       margin-top: ($arrow-size + $stroke-size) * -2;
//       margin-left: ($arrow-size + $stroke-size) * -1;
//     }
//   }

//   .updated, .error {
//     margin: 0 0 .5em 0;
//     border-left: none;
//     @include border-radius(4px);
//     p {
//       color: #fff;
//       font-size: 14px;
//       padding-left: 1em;
//       a {
//         text-decoration: underline;
//       }
//     }
//   }
//   .updated{
//     background: #42c08c url(../images/bolt-white.png) 6px 12px no-repeat;
//     a {
//       color: #226348;
//       font-size: 13px;
//       line-height: 1.8em;
//       &.right{
//         float: right;
//       }
//     }
//   }
//   .error {
//     background: #d2213a url(../images/bolt-white.png) 6px 12px  no-repeat;
//     a {
//       color: #73121f;
//     }
//   }


//   // Global Purple Button Style
//   .filament-button {
//     cursor: pointer;
//     text-align: center;
//     min-width: 8em;
//     display: inline-block;
//     padding: .5em .75em;
//     margin: 0;
//     background: purple;
//     color: white;
//     text-transform: none;
//     border: none;
//     outline: none;
//     border-color: transparent;
//     @include box-shadow(none);
//     @include border-radius(4px);
//     &:hover {
//       background: lighten(purple, 5%);
//     }
//     &:active {
//       background: darken(purple, 5%);
//     }
//   }

//   #header {
//     $padding-bottom: 12px;
//     font-size: 13px;
//     color: #898989;
//     padding-bottom: 2px;
//     @include gray-border-bottom;
//     position: relative;
//     margin-bottom: 25px;
//     .register {
//       position: absolute;
//       bottom: $padding-bottom;
//       right: 0;
//       @media only screen and (max-width:480px) {
//         position: relative;
//         display: block;
//         bottom: auto;
//         right: auto;
//       }
//       a {
//         font-weight: bold;
//         color: $link-color;
//         padding-left: .75em;
//       }
//     }
//   }

//   // #code-snippet-wrapper {
//   //   background: #223b4a;
//   //   color: white;
//   //   padding: 11px 15px 20px 15px;
//   //   @include border-radius(4px);
//   //   @include box-sizing(border-box);

//   //   > p {
//   //     font-size: 14px;
//   //     font-weight: bold;
//   //     margin: .3em 0 1.2em;
//   //     display: inline-block;
//   //     position: relative;
//   //     strong {
//   //       color: #ffbe00;
//   //     }
//   //     &:after {
//   //       $size: 26px;
//   //       content: '';
//   //       position: absolute;
//   //       bottom: $size * -0.3;
//   //       right: $size * -1.5;
//   //       width: $size;
//   //       height: $size;
//   //       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAA2ElEQVRIx72W0QnEIBBEbcEWrgVbsIW0YAu2cC3YQloQrgJbuBZswXNBYTCG+4hjYAko5DGZWVeldj7lo161Yi1fSzNBAiitMhXYPp4B+K1lWTA9Ab6Z6sSzc1BnmN4doE7ejp3IBOo8EybeBYAFdr+FLcomMLcLlqlpbLAekMQGaYg+3a8D/DLDnll6ZsIJEm/W/cqG7qrsZM0wUhiHsZOe+hKxh0YFkEi/qmET/K7YVcG+fhprnMilGX9ZW33PKDflVveSbYMRIZl9wcm7xoj456hXtn/PDwafW4cUCi1jAAAAAElFTkSuQmCC');

//   //     }
//   //     @media only screen and (max-width:480px) {
//   //       font-size: 12px;
//   //       text-align: center;
//   //     }
//   //   }

//   //   textarea {
//   //     @include box-sizing(border-box);
//   //     // white-space: nowrap;
//   //     // resize: vertical;
//   //     resize: none;
//   //     width: 100%;
//   //     height: 126px;
//   //     padding: 1em;
//   //     margin: 0 0 10px;
//   //     line-height: 1em;
//   //   }
//   //    .snippet-help {
//   //       text-align: right;
//   //       margin-top: .75em;
//   //       font-size: 12px;
//   //       &:after{
//   //         background-image: none;
//   //       }
//   //       a {
//   //         color: #fff;
//   //         text-decoration: none;
//   //         font-weight: normal;
//   //         &:before{
//   //           background: url(../images/question.gif) 0 0 no-repeat;
//   //           content: ' ';
//   //           height: 17px;
//   //           width: 25px;
//   //           float: left;
//   //         }
//   //       }
//   //     }
//   //   .submit {
//   //     text-align: right;
//   //     margin: -4em 0 0 0;
//   //     padding: 0;
//   //     @media only screen and (max-width:480px) {
//   //       input {
//   //         margin: 2em 0 0 0;
//   //         width: 100%;
//   //       }
//   //     }
//   //   }
//   // }

//   #additional-info {
//     margin-top: 4em;
//     .expander {
//       cursor: pointer;
//     }
//     h3{
//       position: relative;
//       color: $dark-gray;
//       font-size: 16px;
//       font-weight: bold;
//       margin: 0;
//       &.expander{
//         @include gray-border-bottom;
//         padding-left: 15px;
//         padding-bottom: 0.45em;
//         color: $gray;
//         &:after {
//           $size: 6px;
//           left: 0;
//           top: 50%;
//           border: solid transparent;
//           content: " ";
//           height: 0;
//           width: 0;
//           position: absolute;
//           pointer-events: none;
//           border-color: transparent;
//           border-left-color: #959595;
//           border-width:  $size ($size * 1.7);
//           margin-top: $size * -1 - ($size * 0.4);
//           @include transition(transform 125ms, transform-origin 125ms);
//         }

//       &.opened {
//         &:after {
//           @include transform(rotate(90deg));
//           @include transform-origin(25%, 50%)
//         }
//       }
//     }
//     }
//     .expandable {
//       margin-bottom: 4em;
//     }
//     #how-to-connect {
//       $number-padding: 22px;
//       margin: 1em 0 3em 0;
//       counter-reset: how-to-counter;
//       &:after {
//         content: '';
//         display: block;
//         clear: both;
//       }
//       .wrapper {
//         &:after {
//           content: '';
//           display: block;
//           clear: both;
//         }
//         overflow: visible;
//         @include box-sizing(border-box);
//         .column {
//           &:before {
//             content: counter(how-to-counter);
//             counter-increment: how-to-counter;
//             display: block;
//             position: absolute;
//             border: solid 2px #c9c9c9;
//             left: 1.5em;
//             font-size: 13px;
//             font-weight: bold;
//             color: #878787;
//             width: $number-padding;
//             height: $number-padding;
//             line-height: $number-padding;
//             text-align: center;
//             border-radius: 50%;
//           }
//           padding: 1em 1.5em;
//           background: #e3e3e3;
//           position: relative;
//           float: left;
//           height: 16em;
//           width: 33%;
//           @include box-sizing(border-box);
//           border-left: solid 1px #d4d4d4;
//           &:nth-child(1) {border-left: none}
//           h4 {
//             margin: 2em 0 .25em 0;
//             font-size: 16px;
//             font-weight: bold;
//             color: #8f8f8f;
//             line-height: $number-padding;
//           }
//           p {
//             margin: 0 0 1em 0;
//             font-size: 12px;
//             color: #8f8f8f;
//             &.active{display: none;}
//           }
//           a {
//             color: $link-color;
//             font-weight: bold;
//             &.filament-button{
//               display: none;
//             }
//           }
//           &.active{
//             background: #d4d4d4;
//             &:before {
//               border: solid 2px $dark-gray;
//               background-color: $dark-gray;
//               color: #fff;
//             }
//             h4, p, a, p a {
//               color: $dark-gray;
//             }
//             p.inactive{display: none;}
//             p.active{display: block;}
//             a.filament-button{
//               min-width: 5em;
//               display: block;
//               color: #fff;
//               text-decoration: none;
//             }
//           }
//           @media only screen and (max-width:767px) {
//             height: 20em;
//           }
//           @media only screen and (max-width:480px) {
//             width: 100%;
//             height: 13em;
//             border-left: none;
//             border-bottom: solid 1px #d4d4d4;
//             &:nth-child(3) {
//               width: 100%;
//             }
//           }
//         }
//       }
//     }
//     #whats-filament-about {
//       margin: 3em 0 0;
//       text-align: center;
//       img {
//         max-width: 100%;
//       }
//     }
//     .apps {

//       p {
//         margin: 2em 0;
//         color: $gray;
//         font-size: 15px;
//         a{
//           color: $link-color;
//         }
//       }
//       h2 a{
//         color: $gray;
//         font-size: 1.3em;
//         font-weight: bold;
//         text-decoration: none;
//         border-bottom: 1px solid $gray;
//       }

//       > div {
//         display: inline-block;
//         width: 22%;
//         margin: 20px 30px 0;
//         position: relative;
//         .image-wrapper {
//           position: relative;
//           overflow: hidden;
//           margin-bottom: 5px;
//           img {
//             float: left;
//           }
//         }
//         strong {
//           color: white;
//           font-weight: normal;
//           position: absolute;
//           bottom: 18px;
//           right: 0;
//           left: 0;
//         }
//         a {
//           background: black;
//           color: white;
//           text-align: center;
//           display: inline-block;
//           padding: .65em 0;
//           width: 100%;
//           line-height: 1em;
//           text-decoration: none;
//           font-weight: bold;
//           text-transform: uppercase;
//           @include border-radius(3px);
//           &:hover {
//             background: lighten(black, 20%);
//           }
//           @media only screen and (max-width:480px) {
//             padding: 1em 0;
//           }
//         }
//         @media only screen and (max-width:480px) {
//           width: 200px;
//           margin-left: auto;
//           margin-right: auto;
//         }
//       }
//     }
//   }
// }