@import "elements.less";
@import "for.less";
//@import url(http://fonts.googleapis.com/css?family=Kalam:400,700); 
@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 
==============================================================================*/

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

.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;
	}
}

.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;
}

.notes-widget-wrapper-clearfix {
	zoom:1;
	&:before, &:after{ content:""; display:table; }
	&:after{ clear: both; }
}

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

.notes-widget-wrapper  {
	&:extend(.notes-widget-wrapper-clearfix all);

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

	&.force-uppercase-letters {
		text-transform: uppercase;
	}

	h1, h2, h3, h4, h5, h6 {
		.notes-widget-wrapper-reset();
		background:none !important;
		line-height: 120% !important; 
	}
	p, ul, ol, li {
		.notes-widget-wrapper-reset();
		background:none !important;
		line-height: 150% !important;
	}
	img {
		.notes-widget-wrapper-reset();
	}

	//font-family: 'Kalam', cursive;
	color:red;
	padding:40px 15px 15px !important;
	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;
	position: relative;
	
	h1 {
		font-size: 170% !important;
	}
	h2 {
		font-size: 155% !important;
	}
	h3 {
		font-size: 140% !important;
	}
	h4 {
		font-size: 125% !important;
	}
	h5 {
		font-size: 110% !important;
	}


	a {

		&:hover,
		&:focus {
			text-decoration: none !important;
		}		
		
		//font-family: 'Kalam', cursive !important;
		text-decoration: underline !important;
		text-shadow: none !important;
		border:none !important;
	}

	
	ul {
		margin-left:20px !important;
		
		li {
			//.wp-notes-widget-reset();
			border:none !important;
			list-style: disc !important;
			padding: 2px 0 !important;
		}
	}

	ol {
		margin-left:20px !important;
		
		li {
			//.wp-notes-widget-reset();
			border:none !important;
			list-style: decimal !important;
			padding: 2px 0 !important;
		}
	}

	
	iframe {
		width:100%;
		height:auto;
	}


	@font-list: indie-flower "Indie Flower", shadows-into-light "Shadows Into Light", pacifico "Pacifico", kalam Kalam, dancing-script "Dancing Script", kaushan-script "Kaushan Script", gloria-hallelujah "Gloria Hallelujah", covered-by-your-grace "Covered By Your Grace", courgette "Courgette", coming-soon "Coming Soon", satisfy Satisfy, permanent-marker "Permanent Marker", shadows-into-light-two "Shadows Into Light Two", rock-salt "Rock Salt", cookie Cookie, handlee Handlee, tangerine Tangerine, great-vibes "Great Vibes"; 

	.loop(@index) when (@index > 0){  
			@font-item: extract(@font-list, @index); //extract based on comma separator each page-icon combo
			@font-slug: extract(@font-item,1); //first part of the extracted value is the page type
			@font-name: extract(@font-item,2); //second part is the icon
			&.font-style-@{font-slug}{
				h1, h2, h3, h4, h5, h6, p, ul, ol {
					font-family: '@{font-name}', cursive;
				}       
			}
			.loop(@index - 1); 
	}
	.loop(length(@font-list)); //pass the length as counter (split based on comma)
	
	h1, h2, h3, h4, h5, h6, p, ul, ol, iframe {
		//font-family: 'Kalam', cursive !important;
		display:block !important;
		border:none !important;
		text-decoration: none !important;
		text-shadow:none !important;
		

		&:last-child {
			margin-bottom:0 !important;
		}
		margin-bottom: 20px !important;
	}


	& {
		//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;
				h1,h2,h3,h4,h5,h6 {
					color: @@colour !important;
					font-weight:bold !important;
				}
				p,li,a {
					color: @@colour !important;
					font-weight:normal !important;
				}
			} 
		}

		//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%;
			}
		*/

	}
	

	& {
		//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);
			}
		*/

	}


	& {
		//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} .notes-widget-wrapper-pushpin {
				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");
			}
		*/

	}

	.notes-widget-wrapper-pushpin {
		background: no-repeat center top;
		background-size: 60px auto;
		width:100%;
		height:50px;
		margin:0px auto 0;
		top:-10px;
		left:0;
		position:absolute;

		.ie8 & {
			display:none;
		}

	}

}