/*
* Copyright (c) 2015 gskinner.com, inc.
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/

//*******************************************
//
//	IMPORTS
//
//*******************************************
@import "imports/Normalize.scss";

@import "imports/utilities/breakpoint.scss";
@import "imports/utilities/clearfix.scss";

@import "imports/breakpoint.scss";
@import "imports/color.scss";
@import "imports/fonts.scss";
@import "imports/layout.scss";
@import "imports/transition.scss";

@import "imports/tags.scss";



//*******************************************
//
//	STYLES
//
//*******************************************
p {
	margin-bottom: $gridUnit-small;
	// font-family: 'proxima-nova', sans-serif !important;
}
.cdn-icon {
	svg {
		max-width: 75px;
		margin-bottom:$gridUnit-small;
	}
}
.accordion {
	position: relative;
	overflow: hidden;
	max-height: 38px; // height of the closed accordion
	user-select: none;
	background-color: $color_gray-lighter;

	/* transitions */
	transition-property: max-height;
	transition-duration: 0.35s;
	transition-timing-function: linear;
}

.accordion.expand {
	max-height: 800px;
	svg {
		transform: translateZ(0) rotate(0deg) scale(0.9);
	}
} // max-height of the expanded accordion


.ac-header {
	color:$color_gray-dark;
	padding: 0 3rem;
}

.accordion:hover {
	cursor: pointer;
	background-color: $color_gray-light;
}
.accordion:active {
	background-color: $color_gray-lighter;
}

.expand.accordion {
	background-color: $color_gray-light;
}

.icon-accordion { // Plus/minus icon
	position: absolute;
	top:0;
	right:3rem;
	width:15px;
	height:15px;
	margin: 11px 0;
	user-selection: none;
	pointer-events: none;
	&::before {
		content:"";
		background-color: #4c6575;
		width: 3px;
		height: 11px;
		position: absolute;
		top:2px;
		left: 6px;
		border-radius: 1px;
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
	}
	&::after {
		content:"";
		background-color: #4c6575;
		width: 11px;
		height: 3px;
		position: absolute;
		top:6px;
		left: 2px;
		border-radius: 1px;
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
	}
}
// Change to Minus Icon when expanded
.expand.accordion {
	.icon-accordion {
		&::before {
			content: none;
		}
	}
}

.drawer-icon {
	width: 1.6rem;
	height: 1.6rem;
	position: absolute;
	top: 1.1rem;
	right: $gridUnit-smaller;
	svg {
		transition-origin: center center;
		transition: transform $transition-long-default 0s;
		transform: translateZ(0) rotate(135deg) scale(0.8);
	}
}

section:last-of-type {margin-bottom:2.8rem;}
.section_container {
	padding: $gridUnit-smaller;
	@media (min-width: 1024px) {
		padding: $gridUnit-small;
	}
}
header {
	text-align: center;
	position: relative;
	@extend %color_createjs-gradient;
	padding: 2.1rem 2.1rem 5.1rem 2.1rem;
	overflow: hidden;
}
.header_logo {
	max-width: 20rem;
	margin: auto;
	padding-top: 1rem;
	position: relative;
}
footer {
	text-align: center;
	@extend %color_createjs-gradient;
	padding: 2.1rem;
	position: relative;
	.createjs_bg {
		background-position: 50% 10%;
		background-size: 60% auto;
	}
}
.createjs_bg {
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' enable-background='new 0 0 250 250'><linearGradient id='createjs-bg-grad' x1='0%' y1='100%' x2='0%' y2='0%'><stop offset='0%' stop-color='#FFD20C'/><stop offset='100%' stop-color='#FFFF90'/></linearGradient><path fill='url(#createjs-bg-grad)' d='M140.932 248.307l27.532-4.855-19.682-111.619-27.531 4.854z'/><path fill='url(#createjs-bg-grad)' d='M179.582 239.406l24.211-13.978-56.671-98.157-24.211 13.978z'/><path fill='url(#createjs-bg-grad)' d='M212.856 217.823l17.97-21.416-86.824-72.855-17.971 21.416z'/><path fill='url(#createjs-bg-grad)' d='M236.742 186.16l9.562-26.27-106.507-38.765-9.561 26.27z'/><path fill='url(#createjs-bg-grad)' d='M135.016 120.282h113.342v27.957h-113.342z'/><path fill='url(#createjs-bg-grad)' d='M4.344 147.285h30.667v30.667h-30.667z'/><path fill='url(#createjs-bg-grad)' d='M18 188.15h50.146v50.146h-50.146z'/><path fill='url(#createjs-bg-grad)' d='M57.333 225.483h24.517v24.517h-24.517z'/><path fill='url(#createjs-bg-grad)' d='M103.833 212.983h24.517v24.517h-24.517z'/><path fill='url(#createjs-bg-grad)' d='M0 220.15h24.517v24.517h-24.517z'/><path fill='url(#createjs-bg-grad)' d='M31.208 136.816h62.271v62.271h-62.271z'/><path fill='url(#createjs-bg-grad)' d='M81 181.65h37.846v37.846h-37.846z'/><path fill='url(#createjs-bg-grad)' d='M100.328 58.254l-50.164-50.164-50.164 50.164 50.164 50.164z'/><path fill='url(#createjs-bg-grad)' d='M142.277 50.164l-50.163-50.164-50.164 50.164 50.164 50.164z'/><path fill='url(#createjs-bg-grad)' d='M177.493 123.598l-71.046-71.046-71.046 71.046 71.046 71.047z'/><circle cx='189.665' cy='42.458' r='12.457' fill='url(#createjs-bg-grad)'/><circle cx='157.047' cy='83.077' r='51.751' fill='url(#createjs-bg-grad)'/><circle cx='225.172' cy='57.736' r='24.442' fill='url(#createjs-bg-grad)'/><circle cx='146.913' cy='44.722' r='24.442' fill='url(#createjs-bg-grad)'/><circle cx='146.913' cy='146.722' r='18.968' fill='url(#createjs-bg-grad)'/><circle cx='191.834' cy='12.818' r='12.457' fill='url(#createjs-bg-grad)'/><circle cx='208.543' cy='96.248' r='12.457' fill='url(#createjs-bg-grad)'/><circle cx='153.853' cy='17.003' r='12.457' fill='url(#createjs-bg-grad)'/></svg>");
    background-repeat: no-repeat;
    background-position: 50% -10%;
	background-size: 165% auto;
	opacity: 0.8;
	@media (min-width: 1024px) {
		background-size: 90% auto;
		background-position: center top;
	}
}

// Colors
#CreateJS 	{ border-color: $color_createjs-default; }
#EaselJS 	{ border-color: $color_easeljs-default; }
#TweenJS 	{ border-color: $color_tweenjs-default; }
#SoundJS 	{ border-color: $color_soundjs-default; }
#PreloadJS 	{ border-color: $color_preloadjs-default; }
#MovieClip	{ border-color: $color_gray-darker; }

.allLibraries {
	color: $color_gray-darker;
	font-size: $fontSize-default;
	line-height: 3.8rem;
}

.intro a {
	color: $color_gray-light;
	background-color: transparent;
}
.intro a:hover {
	background-color:$color_gray-lightest;
	color: $color_gray-dark;
}
.imageLink {
	padding:0;text-align: center;
	svg {
		max-height: 60px;
		max-width: 100%;
	}
}
.imageLink:hover {background-color: transparent;}
.imageLink:hover img {
	background-color: transparent;
}
a.imageLink:link {
	&::after {
		display: none;
	}
}
footer .imageLink img {margin-bottom:0;}
a.noHover:hover {
	background-color:transparent;
	&::after {
		display: none;
	}
}

.section_header {
	text-align: center;
	margin-bottom: $gridUnit-smallest;
}
.allLibraries {
	line-height: 0;
	svg {
		max-height: 6rem;
	}
	h2 {
		font-size: 1.6rem;
		color: $color_gray-default;
	}
}
.allLibraries_title {
	line-height: 0;
	margin: 0 0 2rem 0.5rem;
}

// Layout
.container {
	max-width:		1024px;
	padding: 0 2.8rem;
	margin:		5rem auto 0 auto;
	overflow: hidden;
}
.intro {padding-bottom: 2.2rem;}
ul {
	padding: 0;
	margin: 0;
}
li {
	list-style-type:	none;
	font-size:			16px;
	padding: 0.9rem;
	line-height: 2rem;
	@media (min-width: 1024px) {
		text-align: center;
	}
}


    li:nth-child(2n - 1) {
        background-color: $color_gray-lighter;
    }
    .main li:nth-child(1n) {
        background-color: transparent;
    }

.version{
	font-family: 'effra', sans-serif;
	font-weight: 700;
	color: $color_gray-default;
	text-align: left;
}
.path {
	text-overflow: ellipsis;
	// margin: 0.5rem 0;
	margin: 0 0 0.5rem 0;
}
.path a {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: 0;
	color: $color_gray-dark;
	&:hover {
		color: $color_gray-lightest;
	}
}
.date {
    margin-right: 3rem;
    margin-left: 0.9rem;
	font-family: 'effra', sans-serif;
	font-weight: 700;
	color: $color_gray-default;
	font-weight: 400;
	text-align: right ;
}
.contains {
    color: $color_gray-default;
    font-size: $fontSize-smallest;
    font-weight: 400;
    display: block;
    clear: both;
}
.main .contains {
	font-size: $fontSize-smallest;
}



// Enhancements
.announcement {
	position: relative;
	margin: 0 5px;
	font-size: 12px;
	padding-left: 6em;
	margin-bottom: 1em;
}

.announcement:before {
	content: "important";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	padding: 0 5px;

	background-color: $color_tweenjs-default;
	text-transform: uppercase;
	font-weight: 700;
	color: $color_gray-lightest;
	font-size: 8px;
	line-height: 22px;
}

.credit {
    text-align: center;
    color: $color_gray-light;
    a {
    	color: $color_gray-light;
    	&:hover {
    		color: $color_gray-dark;
    		background-color: $color_gray-lighter;
    	}
    }
}

.cf {
	zoom:	1;	// For IE 6/7 (trigger hasLayout)
	clear: both;
	li {
		padding-left: 3rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&.main li {
		padding-left: 0.9rem;
	}
}
.cf:before, .cf:after {
	content: 	"";
	display:	table;
}
.cf:after {
	clear:		both;
}
.cf p {
	color: 	$color_gray-dark;
	padding-left: 0.9rem;
	font-style: italic;
	margin-bottom: 0;
}


@media (min-width: 1024px) {
	.main .path,
	.main .version,
	.main .date {
    	font-size: 2.2rem;
	}
	.version, .path {float:	left;}
	.path {width: 70%;}
	.date {float: right;font-weight: 700; margin-left: 0; width:10%;}
	.version {width:15%;}
	li {overflow: hidden; text-align: center;}
	.allLibraries {font-size: 3.4rem;line-height: 5rem; margin: 0 0 0.5rem 0;}
}
