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

html {
	overflow-y: scroll;
	width: 100%;
	height: 100%;
}

body {
	font-family:'Frutiger W01', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 100%;
	line-height: 1.4em;
	width: 100%;
	min-height: 100%;
	color: rgb(76, 76, 76);
	background-color: rgb(255, 255, 255);
	background-position: 50% 50%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;
}



	/**
	 * BASIC TEXT STYLES
	 */

		a:link, a:active, a:visited {
			color: rgb(0, 130, 186);
			text-decoration: none;
		}
		a:hover {
			color: rgb(128, 128, 128);
		}



		.clearfix { zoom: 1; }
			.clearfix:before,
			.clearfix:after {
				content: "";
				display: table;
			}
			.clearfix:after { clear: both; }



		h1 {
			font-family: 'ITC Avant Garde Gothic W01', Arial, Helvetica, sans-serif;
			font-weight: 600;
			font-size: 150%;
			line-height: 1em;
			margin-bottom: 0.5em;
			color: rgb(255, 255, 255);
			text-shadow: 3px 2px 1px rgba(0, 0, 0, 0.3);
		}

		h2 {
			font-family: 'ITC Avant Garde Gothic W01', Arial, Helvetica, sans-serif;
			font-weight: 600;
			font-size: 130%;
			line-height: 1em;
			margin-top: 1.25em;
			margin-bottom: 1.25em;
			color: rgb(0, 130, 186);
			text-align: center;
		}
		h2:first-child{
			margin-top: 0;
		}
			.body-background h2 {
				text-align: left;
				margin-bottom: 0.5em;
			}

		.body-background h2,
		.orange { color: rgb(240, 179, 35) !important; }
		.white { color: rgb(255, 255, 255) !important; }

		h2.thin {
			font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
			font-weight: 300;
			font-size: 175%;
			margin: 2em 0 1em 0;
			color: rgb(120, 190, 32);
			text-align: center;
			text-transform: uppercase;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		h3 {
			font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
			font-weight: 300;
			font-size: 130%;
			line-height: 1.3em;
			color: rgb(0, 130, 186);
			margin-top: 1em;
			margin-bottom: 0.3em;
		}

		h4 {
			font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
			font-weight: 300;
			font-size: 110%;
			color: rgb(240, 179, 35);
			text-transform: uppercase;
			margin: 0.4em 0;
		}

		h5, h6 {
			font-family: 'ITC Avant Garde Gothic W01', Arial, Helvetica, sans-serif;
			font-weight: 600;
			font-size: 100%;
			line-height: 1.3em;
			margin: 0 0 0.4em;
			color: rgb(0, 130, 186);
		}


		h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; }

		.inherit-color h2, .inherit-color-headers h2,
		.inherit-color h3, .inherit-color-headers h3,
		.inherit-color h4, .inherit-color-headers h4,
		.inherit-color h5, .inherit-color-headers h5,
		.inherit-color h6, .inherit-color-headers h6,
		.inherit-color a:link, .inherit-color a:active, .inherit-color a:visited,
		.inherit-color-anchors a:link, .inherit-color-anchors a:active, .inherit-color-anchors a:visited { color: inherit; }
		.inherit-color a:hover, .inherit-color-anchors a:hover { color: rgb(128, 128, 128); }

		p { margin: 0 0 1em; }

		.highlight {
			font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
			font-weight: 300;
			font-size: 150%;
			line-height: 1.3em;
			margin: 0 0 1em;
			color: rgb(120, 190, 32);
		}
			p.highlight img{
				margin-right: 1em;
				margin-bottom: 1em;
			}

		.credit {
			text-transform: uppercase;
			font-size: 70%;
		}

		strong, b { font-weight: 600; }

		em { font-style: italic; }

		sup {
			vertical-align: super;
			font-size: smaller;
    	}

		img { max-width: 100%; }
		img.pad { max-width: none; display: block; }

		/*
		figure {
			margin: 0;
			padding: 0;
		}

			figure img {
				width: 100%;
				height: auto;
			}
		*/

		.no-mobile {
			display: none;
		}


		/*	for content semantics	*/
		.outline {
			display: none;
		}

		/*	hides from browsers, leaves accessible to screen readers	*/
		.reader {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}



	/**
	 * SYSTEM ERRORS
	 */

		div.err-wrap {
			margin: 1em 1.5em;
			padding: 1em;
			border: 1px solid rgb(128, 128, 128);
			overflow: scroll;
		}

			div.err-wrap h1,
			div.err-wrap h2,
			div.err-wrap p,
			div.err-wrap ul {
				font-family:'Frutiger W01', Arial, Helvetica, sans-serif;
				font-weight: 400;
				font-size: 100%;
				line-height: 1.2em;
				margin: 0 0 0.5em;
				text-shadow: none;
				color: rgb(76, 76, 76);
			}

				div.err-wrap h1 {
					color: red;
					font-weight: 400;
				}

				div.err-wrap.notice h1 { color: rgb(240, 179, 35); }

				div.err-wrap p,
				div.err-wrap ul {
					font-size: 80%;
					font-weight: 400;
				}



	/**
	 * LAYOUT BLOCKS
	 */

		#viewport {
			width: 100%;
			background-color: transparent;
			position: relative;
			z-index: 100;
		}

		.wrap {
			width: 98%;
			max-width: 1240px;
			margin: 0 auto;
			padding: 0;
		}
		.wrap.wide { max-width: 1770px; }



	/**
	 * CENTERRING STYLES
	 *
	 * Elements using these styles should be placed within a positioned parent
	 * to which the centerring will be relative.
	 */

		.center,
		.center-horrizontal,
		.center-vertical { position: absolute; }

		.center {
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			   -moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				 -o-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
		}

		.center-horrizontal {
			left: 50%;
			-webkit-transform: translate(-50%, 0);
			   -moz-transform: translate(-50%, 0);
				-ms-transform: translate(-50%, 0);
				 -o-transform: translate(-50%, 0);
					transform: translate(-50%, 0);
		}

		.center-vertical {
			top: 50%;
			-webkit-transform: translate(0, -50%);
			   -moz-transform: translate(0, -50%);
				-ms-transform: translate(0, -50%);
				 -o-transform: translate(0, -50%);
					transform: translate(0, -50%);
		}



	/**
	 * GREEN BUTTON
	 */
	 
	a.green-button{
		display:inline-block;
		text-transform: uppercase;
		background: rgb(120,190,32);
		color: #fff;
		padding: 30px 15px;
		font-size: 22px;
		font-family: 'Titillium Web',Arial,Helvetica,sans-serif;
	}
	a.green-button:hover{
		opacity: 0.7;
	}
	
	/**
	 * BLUE BUTTON
	 */
	 
	a.blue-button{
		display:inline-block;
		background: rgb(0, 130, 186);
		color: #ffffff;
		padding: 5px 20px;
		font-size: 20px;
		font-family: 'Titillium Web',Arial,Helvetica,sans-serif;
		margin-right: 5px;
	}
	a.blue-button:hover{
		opacity: 0.7;
	}





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

	/**
	 * BASIC TEXT STYLES
	 */

		h1 { font-size: 200%; }

		h2 { font-size: 150%; }

		h2.thin { font-size: 200%; }

		.highlight { font-size: 170%; }

}






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

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

	/**
	 * BASIC TEXT STYLES
	 */

		h1 { font-size: 300%; }

		h2 { font-size: 170%; }

		h2.thin {
			font-size: 230%;
			margin: 2em 0 1em 0;
		}

		h3 { font-size: 150%; }

		h4 {
			font-size: 110%;
			margin: .6em 0;
		}

		p.bigger {
			font-size: 175%;
			line-height: 1.1em;
		}

		.highlight { font-size: 190%; }


		.no-mobile {
			display: initial;
		}




	/**
	 * LAYOUT BLOCKS
	 */

		/*.wrap { width: 95%; }*/

}






/**********************
		LARGE
**********************/

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

	/**
	 * BASIC TEXT STYLES
	 */

		h1 { font-size: 450%; }

		h2 { font-size: 200%; }

		h2.thin { font-size: 240%; }

		.highlight { font-size: 220%; }

}



/*******************************
	SHORT n WIDE SCREENS
********************************/

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

	/**
	 * LAYOUT BLOCKS
	 */

		.wrap {
			max-width: 900px;
		}

}