/**
 * Project:		Yukon Energy 2017
 * Style Sheet:	Base Icons
 * Sites:		1 - Yukon Energy, 2 - Resource Plan
/* ---------------------------------------- */


/**********************
		BASE
**********************/

	/**
	 * Icons are implemented as a font set built using the Icomoon App (@see
	 * https://icomoon.io). The following icon styles build upon the styles
	 * set by Icomoon (www/assets/lib/fonts/icomoon/style.css).
	 */

	i {
		text-indent: 0;
		/* Even though icomoon styles set font weight on <i>, Chrome in some
		   cases has <i> inheriting it's parent font-weight. Let's fix it. */
		font-weight: normal !important;
	}
	
	[class^="ico-"]:before, [class*=" ico-"]:before,
	[class^="ico-"]:after, [class*=" ico-"]:after {
		text-shadow: none;
	}
	

		/**
		 * Outlined and Options icons
		 *
		 * These icons are displayed with a circular outline by layering the
		 * `outline` icon over the primary icon. Options icons are specific to
		 * the resource plan options section, and further add size &
		 * colour styles.
		 */
		.outline[class^="ico-"], .outline[class*=" ico-"],
		[class^="ico-opt-"], [class*=" ico-opt-"] {
			display: inline-block;
			position: relative;
		}	
		.outline[class^="ico-"]:after, .outline[class*=" ico-"]:after,
		[class^="ico-opt-"]:after, [class*=" ico-opt-"]:after {
			position: absolute;
			left: 0;
			content: "\e900";
		}
		[class^="ico-opt-"], [class*=" ico-opt-"] { font-size: 110%; margin-right: 0.3em; }	
		[class^="ico-opt-"]:after, [class*=" ico-opt-"]:after { color: rgb(240, 179, 35); }



		/**
		 * Duotone icons
		 *
		 * Duotone icons layer dedicated pairs, each representing one colour
		 * (or tone) and together creating the whole icon. The base icon,
		 * also the canonical class name to be used in markup (ex
		 * `.ico-duo-notes`) is set in orange, and it's overlay counterpart
		 * (ex `.ico-duo-notes-overlay`) is light-orange. The overlay icons
		 * are appropriately matched below.
		 */
		[class^="ico-duo-"], [class*=" ico-duo-"] {
			display: inline-block;
			position: relative;
			margin-right: 0.3em;
		}	
		[class^="ico-duo-"]:before, [class*=" ico-duo-"]:before {
			color: rgb(240, 179, 35);
		}
		[class^="ico-duo-"]:after, [class*=" ico-duo-"]:after {
			position: absolute;
			left: 0;
			color: rgb(235, 198, 140);
		}
		a:hover [class^="ico-duo-"]:before, a:hover [class*=" ico-duo-"]:before,
		a:active [class^="ico-duo-"]:before, a:active [class*=" ico-duo-"]:before {
			color: rgb(128, 128, 128);
		}
		a:hover [class^="ico-duo-"]:after, a:hover [class*=" ico-duo-"]:after,
		a:active [class^="ico-duo-"]:after, a:active [class*=" ico-duo-"]:after {
			color: rgb(230, 230, 230);
		}
			/* Overlays */
			.ico-duo-recycle:after				{ content: "\e910"; }
			.ico-duo-evaluation:after			{ content: "\e912"; }
			.ico-duo-technical-and-financial-findings:after	{ content: "\e914"; }
			.ico-duo-initial-key-findings:after	{ content: "\e916"; }
			.ico-duo-notes:after				{ content: "\e918"; }
			.ico-duo-capacity:after				{ content: "\e91a"; }
			.ico-duo-energy:after				{ content: "\e91c"; }
			.ico-duo-download:after				{ content: "\e91e"; }



		/**
		 * Circular icons.
		 *
		 * These icons are placed on a circular background. The circle is
		 * implemented as a duotone icon, using the "circle" icon as the
		 * background, with the exception of gradient classed icons which
		 * implement a circular parent element.
		 *		Default:	white icon on a light blue circle, size is inherited.
		 *		.white:		blue icon on a white circle.
		 *		.gradient:	white icon on a dark to light blue gradient
		 *					circle, medium NON-responsive fixed size.
		 *		.small:		small NON-responsive fixed size icon.
		 *		.big:		larger fixed size, whose enlargement IS reached
		 *					responsively.
		 */
		.ico-plus, .ico-minus,
		.ico-down, .ico-right {
			display: inline-block;
			position: relative;
		}	
		.ico-plus:not(.gradient):before, .ico-minus:not(.gradient):before,
		.ico-down:not(.gradient):before, .ico-right:not(.gradient):before {
			position: absolute;
			left: 0;
			color: rgb(255, 255, 255);
		}
		.ico-plus:not(.gradient):after, .ico-minus:not(.gradient):after,
		.ico-down:not(.gradient):after, .ico-right:not(.gradient):after {
			content: "\e91f";
			color: rgb(0, 175, 215);
		}
			
			/* White background class */
			.ico-plus.white:before, .ico-minus.white:before,
			.ico-down.white:before, .ico-right.white:before { color: rgb(0, 130, 186); }
			.ico-plus.white:after, .ico-minus.white:after,
			.ico-down.white:after, .ico-right.white:after { color: rgb(255, 255, 255); }
			
			/* Gradient background class */
			.ico-plus.gradient, .ico-minus.gradient,
			.ico-down.gradient, .ico-right.gradient {
				color: rgb(255, 255, 255);
				width: 16px;
				height: 16px;
				font-size: 16px;
				vertical-align: 6.25%;
				line-height: 1;
				text-indent: 0;
				display: inline-block;
				-webkit-border-radius: 50%;
				   -moz-border-radius: 50%;
						border-radius: 50%;
				background: rgb(0, 175, 215);
				background: -webkit-linear-gradient(top, rgb(0, 130, 186), rgb(0, 175, 215));
				background:    -moz-linear-gradient(top, rgb(0, 130, 186), rgb(0, 175, 215));
				background: 	 -o-linear-gradient(top, rgb(0, 130, 186), rgb(0, 175, 215));
				background: 		linear-gradient(to bottom, rgb(0, 130, 186), rgb(0, 175, 215));
			}
			
			/* Small size class */
			.ico-plus.small, .ico-minus.small,
			.ico-down.small, .ico-right.small {
				font-size: 14px;
				vertical-align: 7.1428571%;
			}
			.ico-plus.small.gradient, .ico-minus.small.gradient,
			.ico-down.small.gradient, .ico-right.small.gradient {
				width: 14px;
				height: 14px;
			}
			
			/* Big size class */
			.ico-plus.big, .ico-minus.big,
			.ico-down.big, .ico-right.big {
				vertical-align: 0;
			}
	




		/**
		 * Parent classed icons (without a `<i>`).
		 * Setup icons classed directly on parent element, rather than
		 * within a dedicated `<i>` element. The later method is preferred
		 * for purposes of baseline alignment, but in some cases it's just
		 * more practical to apply the class to the parent without adding
		 * the extra markup. In this case, we style the pseudo elements
		 * directly.
		 */
		:not(i)[class^="ico-"]:after, :not(i)[class*=" ico-"]:after,
		:not(i)[class^="ico-"]:before, :not(i)[class*=" ico-"]:before {
			/* use !important to prevent issues with browser extensions that change fonts */
			font-family: 'icomoon' !important;
			speak: none;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			line-height: 1;
			/* Better Font Rendering =========== */
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
			:not(i)[class^="ico-duo-"], :not(i)[class*=" ico-duo-"] {
				padding-left: 1.3em;
			}
			:not(i)[class^="ico-duo-"]:after, :not(i)[class*=" ico-duo-"]:after,
			:not(i)[class^="ico-duo-"]:before, :not(i)[class*=" ico-duo-"]:before {
				position: absolute;
				left: 0;
				bottom: 0;
				line-height: inherit;
			}

		

		/**
		 * Pointed icon tweaking.
		 */
	 
		/* Alternate version of download icon (same as `.ico-download-small`). */
		.ico-download.small:before { content: "\e92b"; }
	
		/* Hard-code the Facts page banner icon (simplifies the banner template output). */
		.ico-banner-facts {
			display: block;
			font-size: 150%;
			margin: -1.15em 0 0.15em;
		}
		.ico-banner-facts:before {
			content: "\e925";
		}	




		/**
		 * Bit map icons... ick.
		 */
		
		.icon-askus {
			display: inline-block;
			margin-right: 0.2em;
			width: 2em;
			height: 2em;
			vertical-align: -60%;
			background: transparent url("/assets/layout/icon-ask-steph.png") no-repeat 50% 50%;
			-webkit-background-size: cover;
			   -moz-background-size: cover;
				 -o-background-size: cover;
					background-size: cover;
		}
		.icon-askus.circled {
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}



/**********************
		SMALL
**********************/
@media only screen and (min-width: 600px) {

		/**
		 * Circular Icons
		 */
		 
		/* Responsive enlargement of fixed size `.big` icons. */
		.ico-plus.big, .ico-minus.big,
		.ico-down.big, .ico-right.big {
			font-size: 24px;				
		}
		.ico-plus.big.gradient, .ico-minus.big.gradient,
		.ico-down.big.gradient, .ico-right.big.gradient {
			width: 24px;
			height: 24px;
		}
		
}






/**********************
		MEDIUM
**********************/

@media only screen and (min-width: 900px) {

		/**
		 * Circular Icons
		 */
		 
		/* Responsive enlargement of fixed size `.gradient` icons. */
		.ico-plus.gradient:not(.small):not(.big), .ico-minus.gradient:not(.small):not(.big),
		.ico-down.gradient:not(.small):not(.big), .ico-right.gradient:not(.small):not(.big) {
			font-size: 24px;
			width: 24px;
			height: 24px;
			vertical-align: 4.166%;
		}
		
		/* Responsive enlargement of fixed size `.big` icons. */
		.ico-plus.big, .ico-minus.big,
		.ico-down.big, .ico-right.big {
			font-size: 40px;
		}
		.ico-plus.big.gradient, .ico-minus.big.gradient,
		.ico-down.big.gradient, .ico-right.big.gradient {
			width: 40px;
			height: 40px;
		}
				
}





/**********************
		LARGE
**********************/
/*
@media only screen and (min-width: 1250px) and (min-height: 760px) {
}
*/