#games-css {
	top: 1px;   /* used to detect whether or not CSS file has been loaded */
}

html.canvas #page-games .page-inner {
	background-image: url(assets/bg-no-snow.jpg);
}

html.no-canvas #page-games .page-inner {
	background-image: url(assets/bg-snow.jpg);
}

#page-games .page-inner .page-content {
	background-image: url(assets/bg-content.png);
	width: 640px;
	height: 350px;
	top: 160px;
	left: 50%;
	margin-left: -320px;
}

#page-games #button-play-now {
	background-image: url(assets/button-play-now.png);
	width: 217px;
	height: 38px;
	top: 195px;
	margin-left: 17px;
	opacity: 1;
	-webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

/* iScroll */

#page-games #iscroll-game-thumbnail-container {
	top: 70px;
	left: 54px;
	height: 274px;
	width: 488px;
	float: left;
	position: relative;	/* On older OS versions "position" and "z-index" must be defined, */
	z-index: 1;			/* it seems that recent webkit is less picky and works anyway. */
	overflow: hidden;
}

#page-games #iscroll-game-thumbnail-container #scroller {
	width: 1000px;
	height: 100%;
	float: left;
	padding: 0;
}

#page-games #scroller #game-thumbnail-list {
	list-style: none;
	display: block;
	float: left;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

#page-games #iscroll-game-thumbnail-container li {
	width: 244px;
	height: 274px;
	text-align: center;
}

#page-games #iscroll-game-thumbnail-container li .game-thumbnail {
	border: 2px solid #A6D9F0;
	display: block;
	width: 210px;
	height: 156px;
	margin: 0 auto;
	position: relative;
	top: 8px;
	-webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    -ms-transition: all 100ms ease;
    -o-transition: all 100ms ease;
    transition: all 100ms ease;
}

#page-games #iscroll-game-thumbnail-container li.animating .game-thumbnail {
	top: 0;
	width: 234px;
	height: 174px;
	border: 3px solid #FFFFFF;
}

#page-games #iscroll-game-thumbnail-container li .game-thumbnail .thumbnail-image,
#page-games #iscroll-game-thumbnail-container li .game-thumbnail .thumbnail-image-animated {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#page-games #iscroll-game-thumbnail-container li .game-thumbnail .thumbnail-image-animated {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    -ms-transition: opacity 400ms ease;
    -o-transition: opacity 400ms ease;
    transition: opacity 400ms ease;
}

#page-games #iscroll-game-thumbnail-container li.animating .game-thumbnail .thumbnail-image-animated {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition-delay: 2s;
	-moz-transition-delay: 2s;
	-ms-transition-delay: 2s;
	-o-transition-delay: 2s;
	transition-delay: 2s;
}

#page-games #iscroll-game-thumbnail-container li {
	display: block;
	position: relative;
	float: left;
}

#page-games .iscroll-right-border-overlay {
	background-image: url(assets/container-border-right.png);
	height: 240px;
	width: 40px;
	top: 40px;
	right: 63px;
	z-index: 2;
	opacity: 1;
	filter: alpha(opacity=100);
}

#page-games .iscroll-right-border-overlay.disabled {
	opacity: 0;
	filter: alpha(opacity=0);
}

#page-games #iscroll-game-thumbnail-container.hide-gifs .thumbnail-image-animated {
	opacity: 0 !important;
	filter: alpha(opacity=0);
}

/* iScroll Arrows */

#page-games .iscroll-arrow {
	width: 13px;
	height: 22px;
	position: absolute;
	top: 140px;
	z-index: 1;
}

#page-games .iscroll-arrow.disabled {
	opacity: 0.5;
	filter: alpha(opacity=50);
	pointer-events: none;
}

#page-games .iscroll-arrow.hidden {
	display: none;
}

#page-games .iscroll-arrow.prev {
	background-image: url(assets/button-arrow-left.png);
	left: 25px;
}

#page-games .iscroll-arrow.next {
	background-image: url(assets/button-arrow-right.png);
	right: 22px;
}



/* Game Modal */

#page-games .page-games-modal {
	position: absolute;
	display: none;
	width: 854px; /* 835px for game + 19px for close button */
	top: 70px;
	left: 50%;
	margin-left: -410px;
	height: 461px;
	z-index: 99;
}

#page-games .page-games-modal iframe {
	width: 820px;
	height: 461px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	border: none;
}

#page-games .button-close-game {
	background-image: url(assets/button-game-close.png);
	width: 19px;
	height: 15px;
	right: 0;
	top: 0;
}

#page-games .animation-marshmallow {
	background: url(assets/bg-animation-marshmallow.png) no-repeat;
	width: 641px;
	height: 540px;
	position: absolute;
	top: 77px;
	left: 1400px;
}

#page-games .animation-olaf {
	background: url(assets/bg-animation-olaf.png) no-repeat;
	width: 141px;
	height: 180px;
	position: absolute;
	top: 413px;
	left: 1400px;
}

#page-games .animation-marshmallow.shadow {
	background: url(assets/bg-animation-marshmallow-shadow.png) no-repeat 140px 474px;
	opacity: 1;
}

#page-games .animation-olaf.shadow {
	background: url(assets/bg-animation-olaf-shadow.png) no-repeat 26px 150px;
	opacity: 1;
}