@import "../../elements.less";
@import "for.less";
//@import url('../fonts/Kalam/stylesheet.css');
@import url(//fonts.googleapis.com/css?family=Slabo+27px|Dancing+Script|Kalam|Architects+Daughter|Indie+Flower|Shadows+Into+Light|Pacifico|Gloria+Hallelujah|Covered+By+Your+Grace|Kaushan+Script|Coming+Soon|Courgette|Satisfy|Cookie|Permanent+Marker|Rock+Salt|Shadows+Into+Light+Two|Tangerine|Handlee|Great+Vibes&subset=latin,latin-ext);/*============================================================================


/*============================================================================
  VARIABLES
==============================================================================*/
  
@red-text-colour              : #D6061E;
@blue-text-colour             : #3825DD;
@black-text-colour            : #000;
@pink-text-colour             : #AA0D86;
@white-text-colour            : #fff;
@light-grey-text-colour       : #999;
@dark-grey-text-colour        : #333;

@yellow-background-colour     : #FEF20A;
@blue-background-colour       : #6ACEE5;
@green-background-colour      : #A0DE61;
@pink-background-colour       : #FCBBDD;
@orange-background-colour     : #FEA200;
@white-background-colour      : #fff;
@light-grey-background-colour : #aaa;
@dark-grey-background-colour  : #444;


/*============================================================================
  MIXINS 
==============================================================================*/

.wp-notes-widget-reset() {
  background:none;
  border:none;
  padding:0;
  margin:0; 
  list-style-type:none;
  text-decoration:none;
  &:before,
  &:after {
    display:none; 
  }
} 

.transition (@transition) {
  -webkit-transition: @transition;  
  -moz-transition:    @transition;
  -ms-transition:     @transition; 
  -o-transition:      @transition;  
}
  
.text-colour (@color) {
  color:@color !important;
  a.wp-notes-action-link,
  p,
  h5,
  h3 {
    color:@color !important;
  }
}


/*============================================================================
  WP NOTES WIDGET STYLE
==============================================================================*/

.background-colour (@color) {
  background-color:@color !important;
  border-bottom: 1px solid darken(@color,10) !important;
}

.border-colour (@color) {
  border-color:@color !important;
  border-color:fade(@color,50%) !important;
}

.wp-notes-widget-hidden {
  position: absolute;
  left:-9999px;
}

.SetFontStyle (@font-family) {
  font-family: @font-family, cursive;
  p,h1,h2,h3,h4,h5,li,a {
    font-family: @font-family, cursive !important;
  }
}

aside {
  display:block;
}

/**
*
* .use-wp-notes-style is used as a flag to indicate if any styles in this CSS file should be used.
* disabling .use-wp-notes-style can be useful if it is desired to override all of the built-in styles
*
**/
.wp-notes-class-widget.use-wp-notes-style {
  background-color:transparent !important;
  border:none !important;
}

.wp-notes-widget-container.use-wp-notes-style {
  position:relative;
  z-index:1;
  padding-top:10px;

  a.wp-notes-widget-tweet {
    position: relative;
    padding-left: 36px;
    line-height: 32px;
    display:inline-block;
    .transition (opacity 0.15s ease-in-out);
    //text-decoration: underline;
    &:before {
      position: absolute;
      font-family: FontAwesome;
      top:0;
      left:0;
      content: "\f099";
      font-size: 32px;
      display:inline-block;
    }
    &:hover {
      opacity:0.6;
      text-decoration: none;
    }
  }

  * {
    .wp-notes-widget-reset();
  }

  .wp-notes-widget { 
    font-family: 'Kalam', cursive;
    color:red;
    padding:10px;
    margin: 0 0px 30px 0;
    padding: 0px;
    border-bottom: 1px solid #efefef;
    position: relative;
     .box-shadow(~"0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.17) inset, 3px 3px 3px rgba(0, 0, 0, 0.15)");
    border-radius: ~"0 0 120px 120px / 0 0 6px 6px";
    min-height:150px;

    p,h1,h2,h3,h4,h5,li,a {
      text-transform: uppercase;
    }
    
    &.do-not-force-uppercase {
      p,h1,h2,h3,h4,h5,li,a {
        text-transform: none;
      }
    }

    &.font-style-indie-flower {
      .SetFontStyle('Indie Flower');
      //font-family: 'Indie Flower', cursive;
    }
    &.font-style-shadows-into-light {
      .SetFontStyle('Shadows Into Light');
      //font-family: 'Shadows Into Light', cursive;
    }
    &.font-style-pacifico {
      .SetFontStyle('Pacifico');
      //font-family: 'Pacifico', cursive;
    }
    &.font-style-kalam {
      .SetFontStyle('Kalam');
      //font-family: 'Kalam', cursive;
    }
    &.font-style-dancing-script {
      .SetFontStyle('Dancing Script');
      //font-family: 'Dancing Script', cursive;
    }
    &.font-style-kaushan-script {
      .SetFontStyle('Kaushan Script');
      //font-family: 'Kaushan Script', cursive;
    }
    &.font-style-gloria-hallelujah {
      .SetFontStyle('Gloria Hallelujah');
      //font-family: 'Gloria Hallelujah', cursive;
    }
    &.font-style-covered-by-your-grace {
      .SetFontStyle('Covered By Your Grace');
      //font-family: 'Covered By Your Grace', cursive;
    }
    &.font-style-courgette {
      .SetFontStyle('Courgette');
      //font-family: 'Courgette', cursive;
    }
    &.font-style-coming-soon {
      .SetFontStyle('Coming Soon');
      //font-family: 'Coming Soon', cursive;
    }
    &.font-style-permanent-marker {
      .SetFontStyle('Permanent Marker');
      //font-family: 'Permanent Marker', cursive;
    }
    &.font-style-shadows-into-light-two {
      .SetFontStyle('Shadows Into Light Two');
      //font-family: 'Shadows Into Light Two', cursive;
    }
    &.font-style-rock-salt {
      .SetFontStyle('Rock Salt');
      //font-family: 'Rock Salt', cursive;
    }
    &.font-style-cookie {
      .SetFontStyle('Cookie');
      //font-family: 'Cookie', cursive;
    }
    &.font-style-handlee {
      .SetFontStyle('Handlee');
      //font-family: 'Handlee', cursive;
    }
    &.font-style-tangerine {
      .SetFontStyle('Tangerine');
      //font-family: 'Tangerine', cursive;
    }
    &.font-style-great-vibes {
      .SetFontStyle('Great Vibes');
      //font-family: 'Great Vibes', cursive;
    }

    & {
      //since we are using multiple loops in the same scope, we need to wrap them in an ampersand selector

      @text-colors: ~'red', ~'blue', ~'black', ~'pink', ~'white', ~'light-grey', ~'dark-grey';

      .for(@text-colors); .-each(@name) {
        &.text-colour-@{name} {
          
          @colour : "@{name}-text-colour";
          .text-colour(@@colour);
          font-weight:bold;
          a.wp-notes-widget-tweet {
            color: @@colour;
          }
        } 
      }

      //This loop outputs LESS code similar to:
      /*
        &.text-colour-red {
          .text-colour(@text-colour-red);
          a.wp-notes-widget-tweet {
            color: @text-colour-red
          }
        }
       */
    }
    


    & {
      //since we are using multiple loops in the same scope, we need to wrap them in an ampersand selector

      @background-colors: ~'yellow', ~'blue', ~'green', ~'pink', ~'orange', ~'white', ~'light-grey', ~'dark-grey';
      
      .for(@background-colors); .-each(@bg-colour) {
        &.background-colour-@{bg-colour} {
          @colour_var : "@{bg-colour}-background-colour";
          .background-colour(@@colour_var);
        }    
      }

      //This loop outputs LESS code similar to:
      /*
        &.background-colour-blue {
          .background-colour(@background-colour-blue);
        }
       */
    }
    


    & {
      //since we are using multiple loops in the same scope, we need to wrap them in an ampersand selector

      @iterations: 50;
      .span-loop (@i) when (@i > 0) {
          @font-class-num :  @i;
          @font-size : 100 - @font-class-num;
         
          &.font-size-minus-@{font-class-num} {
            font-size:~"@{font-size}%";              
          }

          .span-loop(@i - 5);
      }
      .span-loop (@iterations);      

      //This loop outputs LESS code similar to:
      /*
        &.font-size-minus-30 {
          font-size:70%;
        }
      */

    }
    

    & {
      //since we are using multiple loops in the same scope, we need to wrap them in an ampersand selector

      @iterations: 50;
      .span-loop (@i) when (@i > 0) {
          @font-class-num : @i;
          @font-size : 100 + @font-class-num;
         
          &.font-size-plus-@{font-class-num} {
            font-size:~"@{font-size}%";
              
          }
          .span-loop(@i - 5);
      }
      .span-loop (@iterations);      

      //This loop outputs LESS code similar to:
      /*  
        &.font-size-plus-5 {
          font-size:105%;
        }
      */

    }
    
    &:after {
      //The shadow of the :after pseudoclass may not be positioned properly depending on the note width.
      //This is disabled dy default.  
      
      /*  
      z-index: -1; 
      position: absolute; 
      background: transparent; 
      width: 70%; 
      height: 55%; 
      content: ''; 
      right: 30px; 
      bottom: 17px;
      -webkit-transform:  skew(15deg) rotate(6deg);
      -moz-transform:     skew(15deg) rotate(6deg);
      transform:          skew(15deg) rotate(6deg);
      -webkit-box-shadow: 0 10px 16px rgba(0, 0, 0, 0.3); 
      -moz-box-shadow:    0 10px 16px rgba(0, 0, 0, 0.3);
      box-shadow:         0 10px 16px rgba(0, 0, 0, 0.3);
      display:none;
      */
    } 

    &:before {
      //The shadow of the :before pseudoclass may not be positioned properly depending on the note width.
      //This is disabled dy default.

      /*
      z-index: -2; 
      position: absolute; 
      background: transparent; 
      width: 70%; 
      height: 55%; 
      content: ''; 
      left: 30px;
      bottom: 17px;
      -webkit-transform:  skew(-15deg) rotate(-6deg); 
      -moz-transform:     skew(-15deg) rotate(-6deg); 
      transform:          skew(-15deg) rotate(-6deg);
      -webkit-box-shadow: 0 10px 16px rgba(0, 0, 0, 0.3); 
      -moz-box-shadow:    0 10px 16px rgba(0, 0, 0, 0.3);
      box-shadow:         0 10px 16px rgba(0, 0, 0, 0.3);
      display:none;
      */
    }

    .header-area {
      position:relative;

      .pushpin {
        background: url("../images/thumbtack-pushpin-2-md.png") no-repeat center top;
        background-size: 60px auto;
        width:100%;
        height:50px;
        margin:0px auto 0;
        top:-10px;
        position:absolute;

        & {
          //since we are using multiple loops in the same scope, we need to wrap them in an ampersand selector

          @tack-colors: ~'blue', ~'red', ~'green', ~'gray', ~'orange', ~'pink', ~'teal', ~'yellow';

          .for(@tack-colors); .-each(@colour) {
            &.thumb-tack-colour-@{colour} {
              background-image: url("../images/thumbtack-@{colour}.png");
            }        
          }
      
          //This loop outputs LESS code similar to:
          /*
            &.thumb-tack-colour-blue {
              background-image: url("../images/thumbtack-blue.png");
            }
          */

        }

        .ie8 & {
          display:none;
        }

      }

      h3 {
        padding:40px 15px 0 !important;
        margin:0 !important;
        text-align:center;
        font-size:1.6em;
        line-height: 1.3em;
        //text-transform:  uppercase;
        //font-family: 'Kalam', cursive;
        text-shadow: 0 0 0 rgba(0,0,0,0) !important;
        display:block;
        border:none;
        font-weight:bold;
      }

    }
      
    ul.wp-notes-widget-list {

      h5 {
        font-size:1.3em;
        //font-family: 'Kalam', cursive;
        margin:0 0 15px;
        padding:0;
        line-height:1.2em;
        text-shadow:none !important;
        font-weight:bold;
      }

      iframe.wp-notes-widget-iframe,
      .wp-notes-widget-audio-container {
        margin:0 0 15px;

        audio {
          width:100%;
        }
      }

      p { 
        font-size: 1.1em;
        line-height: 1.3em;
        //font-family: 'Kalam', cursive;
        margin:0 0 15px;
        padding:0;
        text-shadow:none !important;
        &:last-child {
           margin-bottom:0;
         }
      }

      p.wp-notes-widget-date {
        font-size:1em;  
      }

      p.wp-notes-widget-no-notes {
        text-align: center;
      }

    }

    a.wp-notes-action-link {
      padding:7px 10px 5px;
      display:inline-block;
      background-color: #fff;
      background-color: rgba(255,255,255,0.4);
      border:1px solid rgba(255,255,255,0.5);
      .transition(background-color .1s ease-out);
      text-decoration: none;
      &:hover,
      &:focus {    
        background-color: rgba(255,255,255,0.6);
        text-decoration: none !important;
      }
    }

    &.background-colour-white {
      a.wp-notes-action-link {
        background-color: #ddd;
        background-color: fade(#ddd, 90%);
        &:hover,
        &:focus {    
          background-color: fade(#ddd,60%);
        }
      }
    }

    &.white-text-colour {
      a.wp-notes-action-link {
        background-color: #bbb;
        background-color: fade(#bbb, 75%);
        &:hover,
        &:focus {    
          background-color: fade(#bbb,50%);
        }
      }
    }

    &.light-grey-text-colour.background-colour-dark-grey {
      a.wp-notes-action-link {
        background-color: #444;
        background-color: fade(#444, 75%);
        &:hover,
        &:focus {    
          background-color: darken(#444,10%);
        }
      }
    }

  }  

}

.wp-notes-widget-container.use-wp-notes-style.wp-notes-no-title {

  .header-area {
    h3 {
      padding-top:25px;
    }
  }

  ul.wp-notes-widget-list {
    margin:-10px 0 !important;
  }

}

.use-wp-notes-style ul.wp-notes-widget-list {
  
  &.no-title {
    padding:40px 15px 15px !important;
  }
  padding:15px !important;
  margin:0 !important;
  list-style-type:none;
  
  li {
    img {
      width:100%;
      display:block;
      margin: 0 auto 15px;
    }

    &:first-child {
      margin-top:0px !important;
      padding-top:0px !important;
      border-top:none !important;
    }

    //text-transform: uppercase;;
    margin-top:10px 0 0 0 !important;
    padding:10px 0 10px 0 !important;
    border-top-width:1px !important;
    border-top-style: dotted !important;
    border-bottom:none !important;
    list-style-type:none;
    
    &:before,
    &:after {
      display:none !important;
    }
  }

}

.use-wp-notes-style {
  
  & {
    //since we are using multiple loops in the same scope, we need to wrap them in an ampersand selector

    @border-colours: ~'red', ~'blue', ~'black', ~'pink', ~'white', ~'light-grey', ~'dark-grey';

    .for(@border-colours); .-each(@colour) {
      
      .text-colour-@{colour} ul.wp-notes-widget-list li {
        @colour_var : "@{colour}-text-colour";
        .border-colour(@@colour_var);
      }  
    
    }

    //This loop outputs LESS code similar to:
    /*
      .text-colour-red ul.wp-notes-widget-list li {
        .border-colour(@red-text-colour);
      }
    */

  }
  
}