component-templates { display: none; }

ImageLoader {
	display: inline-block;
	box-sizing: border-box;
	text-align: center;
	background-color: rgba(255,255,255,0.3);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;			
}
ImageLoader > spinner { display: none; }
ImageLoader.loading > spinner { display: block; }

GameTile {
	display: inline-block; box-sizing: border-box;
	position: relative;
	width: 8.6em; height: 5.4em;
	margin: 0.4em 0.2em 0em 0.2em; padding: 0.3em; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0em 0.1em 0.15em 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.5) 0em 0.1em 0.15em 0px;
	box-shadow: rgba(0, 0, 0, 0.5) 0em 0.1em 0.15em 0px;
	transition: transform 0.1s ease-in;
	-webkit-transform: translate3d(0,0,0);
	background-color: rgba(255,255,255,1);
	overflow: hidden;
	border: 1px solid #CCC; 
}
GameTile:hover {
	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0em 0.2em 0.5em 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.5) 0em 0.2em 0.5em 0px;
	box-shadow: rgba(0, 0, 0, 0.5) 0em 0.2em 0.5em 0px;
	-webkit-transform: scale(1.02);
	overflow: hidden;
}

GameTile > a { 
	display: block; box-sizing: border-box; position: absolute; left: 0.3em; right: 0.3em; top: 0.3em; bottom: 0.3em; 
	overflow: hidden; cursor: pointer; text-align: left;
}
GameTile > a > ImageLoader { 
	width:100%; height: 3.6em; padding-top: 0.6em; 
	color:#E03306;
	color:#CCC;
	border: 1px solid rgba(0,0,0,0.1); 
}
GameTile > a > h2 { 
	display: block; position: absolute; bottom: 0em;
	color: #e03306; font-size: 0.6em; font-weight: bold; white-space: nowrap; margin: 0px; height: 1.4em; line-height: 1.4em; 
}

GameTile[marker]:after {
	
	font-size: 0.4em;
	
	text-align: center;
	display: block; position: absolute;
	
	content: attr(marker);
	background-color: attr(marker-background);
	color: attr(marker-color);
	
	left: -3em; top: 1em; width: 9em; height: 1.4em; line-height: 1.4em;
	
	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0em 0.2em 0.5em 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.5) 0em 0.2em 0.5em 0px;
	box-shadow: rgba(0, 0, 0, 0.5) 0em 0.2em 0.5em 0px;
	
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
GameTile[marker].marker-white:after { background-color: rgba(255,255,255,0.8); color: rgba(0,0,0,1); }
GameTile[marker].marker-yellow:after { background-color: rgba(255,255,0,0.8); color: rgba(0,0,0,1); }
GameTile[marker].marker-fuchsia:after { background-color: rgba(255,0,255,0.8); color: rgba(0,0,0,1); } 
GameTile[marker].marker-red:after { background-color: rgba(255,0,0,0.8); color: rgba(255,255,255,1); }
GameTile[marker].marker-silver:after { background-color: rgba(192,192,192,0.8); color: rgba(0,0,0,1); }
GameTile[marker].marker-gray:after { background-color: rgba(128,128,128,0.8); color: rgba(255,255,255,1); }
GameTile[marker].marker-olive:after { background-color: rgba(128,128,0,0.8); color: rgba(255,255,255,1); }
GameTile[marker].marker-purple:after { background-color: rgba(128,0,128,0.8); color: rgba(255,255,255,1); }
GameTile[marker].marker-maroon:after { background-color: rgba(128,0,0,0.8); color: rgba(255,255,255,1); }
GameTile[marker].marker-aqua:after { background-color: rgba(0,255,255,0.8); color: rgba(0,0,0,1); }
GameTile[marker].marker-lime:after { background-color: rgba(0,255,0,0.8); color: rgba(0,0,0,1); }
GameTile[marker].marker-teal:after { background-color: rgba(0,128,128,0.8); color: rgba(255,255,255,1); }
GameTile[marker].marker-green:after { background-color: rgba(0,128,0,0.8); color: rgba(255,255,255,1); }
GameTile[marker].marker-blue:after { background-color: rgba(0,0,255,0.8); color: rgba(255,255,255,1); }
GameTile[marker].marker-navy:after { background-color: rgba(0,0,128,0.8); color: rgba(255,255,255,1); }
GameTile[marker].marker-black:after { background-color: rgba(0,0,0,0.8); color: rgba(255,255,255,1); }

TilesList {
	display: block; box-sizing: border-box;
	text-align: center; 
	width: 100%; margin: 0em; padding-bottom: 1em;
}

CarouselItem {
	display: inline-block; box-sizing: border-box; position: relative;
	width: 26.6em; height: 12em;
	margin: 0px; padding-top: 0px;
	overflow: hidden;
}

CarouselItem > ImageLoader { 
	width: 26.6em; height: 12em; 
	padding-top: 5em;
	pointer-events: none;
}


Carousel {
	display: block; box-sizing: border-box; position: relative; 
	width: 26.6em; height: 12em;
	margin: 0.5em auto 0em auto;
	overflow: hidden;
	cursor: default;
	background-color: rgba(0,0,0,0.3);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid #CCC; 
}

Carousel:after {
	display: block; position: absolute; content: '';
	left: 0px; right: 0px; top: 0px; bottom: 0px;
	border: 0.3em solid rgba(255,255,255,0.8); 
	overflow: hidden; pointer-events: none;
}

Carousel > wrapper {
	display: block; box-sizing: border-box;
	position: absolute; left: 0em; right: 0em; top: 0em; bottom: 0em;
	margin: 0px; padding: 0px;
	overflow: hidden;
}

Carousel > wrapper > items {
	display: block; box-sizing: border-box;
	width: 26.6em; height: 12em;
	margin: 0px; padding: 0px;
	overflow: hidden; white-space: nowrap;
}

Carousel > panel {
	display: block; box-sizing: border-box; position: absolute;
	margin: 0px; padding: 0px;
	
	left: 0.3em; right: 0.3em; height: 3em; bottom: 0.3em;
	
	background: rgba(0,0,0,0.6);
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(75%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,1)));
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,1) 100%);
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#000000',GradientType=0 );
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#000000',GradientType=0 );
	background: rgba(0,0,0,0.8);
}

Carousel > panel > button {
	display: inline-block; box-sizing: border-box; position: absolute;
	outline: none; border: 0px;
	background: transparent; color: rgba(227,77,37,1);
	font-size: 3em;
	top: 0em; height: 1em; width: 1em; line-height: 1em;
	text-align: center; vertical-align: middle;
	cursor: pointer;
	z-index: 100;
}
Carousel > panel > button.previous { left: 0em; }
Carousel > panel > button.next { right: 0em; }

Carousel > panel > h2 {
	font-size: 0.7em;
	font-weight: bold;
	margin: 0px; margin-top: 0.7em;
	color: #FFF;
	text-align: center;
}

Carousel > panel > h3 {
	font-size: 0.7em;
	font-weight: normal;
	color: #E44C26;
	margin: 0px;
	margin-bottom: 0.2em;
	text-align: center;
}

Carousel > panel > dots {
	display: block; position: absolute; box-sizing: border-box; text-align: center; 
	height: 1em; bottom: 0px; left: 0px; right: 0px;
}

Carousel > panel > dots > dot {
	display: inline-block; box-sizing: border-box;
	width: 0.3em; height: 0.3em;
	background-color: rgba(0,0,0,0.5);
	border: 2px solid rgba(255,255,255,1);
	border-radius: 0.3em;
	margin: 0.3em 0.1em; cursor: pointer;
}

Carousel > panel > dots > dot.current {
	border-width: 0px;
	background-color: rgba(227,77,37,1); 
	pointer-events: none;
}