/* tags */
#app-showcase-tags-wrapper{
	display:none;
	height:0;
	overflow:hidden;
	border-bottom:2px solid #ddd;
}
#app-showcase-tags{
	padding:1.2em 0 0.8em;
}
#app-showcase-tags .apps-tag{
	display:inline-block;
	position:relative;
	background-color:#ccc;
	border-radius:3px;
	margin:0 0.75em 0.75em 0;
	line-height:26px;
	padding:0 1em;
	cursor:pointer;
}
#app-showcase-tags .apps-tag span{color:#CD1625;}
#app-showcase-tags .apps-tag span:before{content:'(';}
#app-showcase-tags .apps-tag span:after{content:')';}
#app-showcase-tags .apps-tag:hover{background-color:#bbb;}
#app-showcase-tags .apps-tag.apps-tag-selected, #app-showcase-tags .apps-tag.apps-tag-selected:hover{background-color:#CD1625;}

#app-showcase-tags .apps-tag.apps-tag-selected:after{
	content:'×';
	position:absolute;
	top:0;
	right:0.5em;
	font-size:17px;
	line-height:22px;
	color:#fff;
	font-weight:bold;
}

/* app container and icons */
#app-showcase{
	position:relative;
	margin:0 -18px;
	font-size:0;
	padding-top:20px;
}
#app-showcase .apps-app{
	display:inline-block;
	position:relative;
	padding:15px 19px;
	width:128px;
	height:128px;
	cursor:pointer;
}
#app-showcase .apps-app img{
	width:128px;
	height:128px;
}

/* info panel */
#app-showcase .apps-overlay{
	display:none;
	position:absolute;
	border-radius:15px;
	background-color:#fff;
	border:1px solid #ddd;
	width:294px;
	height:auto;
	min-height:286px;
	padding:15px 19px;
	top:-1px;
	left:-1px;
	z-index:2;
	opacity:0;
	cursor:default;
	font-size:14px;
	box-shadow:0 6px 18px rgba(0,0,0,0.16);
}
#app-showcase .apps-overlay.apps-overlay-open{
	display:block;
	opacity:1;
}
#app-showcase .apps-overlay.apps-overlay-right{left:auto;right:-1px;}

#app-showcase .apps-overlay .apps-overlay-close{
	position:absolute;
	top:4px;
	right:4px;
	width:24px;
	height:24px;
	z-index:3;
	cursor:pointer;
}
#app-showcase .apps-overlay .apps-overlay-close:after{
	content:'×';
	position:absolute;
	color:#aaa;
	top:2px;
	left:4px;
	font-size:18px;
	font-weight:bold;
}
#app-showcase .apps-overlay .apps-overlay-close:hover:after{color:#CD1625;}

/* app icon in overlay */
#app-showcase .apps-overlay .apps-app-icon{
	display:inline-block;
	width:128px;
	height:128px;
	vertical-align:bottom;
	margin-right:15px;
}

/* store links */
#app-showcase .apps-overlay .apps-links{
	display:inline-block;
	vertical-align:bottom;
	padding-bottom:6px;
}
#app-showcase .apps-overlay .apps-link a{
	display:block;
	margin:8px 0;
	width:135px;
	height:40px;
	background:url(http://www.appcelerator.com.s3.amazonaws.com/web/showcase/assets/store-links-1x.png) no-repeat scroll center -999em;
}
#app-showcase .apps-overlay .apps-link a.apps-link-itunes{background-position:center 0px;}
#app-showcase .apps-overlay .apps-link a.apps-link-play{background-position:center -40px;}


#loading{
	visibility:hidden;
	width:100%;
	height:104px;
	background:url(http://www.appcelerator.com.s3.amazonaws.com/web/showcase/assets/throbber.gif) no-repeat scroll center center;
}


/* high PPI backgrounds */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5){
	
	#app-showcase .apps-overlay .apps-link. a{
		background-image:url(http://www.appcelerator.com.s3.amazonaws.com/web/showcase/assets/store-links-2x.png);
		background-size:270px 80px;
	}	
}

/* first flexpoint - 5 across below 1024 */
@media only screen and (max-width:1023px){
	#app-showcase .apps-app,
	#app-showcase .apps-app img,
	#app-showcase .apps-overlay .apps-app-icon{width:110px;height:110px;}
	
	#app-showcase .apps-overlay{width:258px;min-height:250px;}
	
	
	#app-showcase .apps-overlay .apps-link a{
		width:121px;
		height:36px;
		background-size:121px 72px;
	}
	#app-showcase .apps-overlay .apps-link a.apps-link-play{background-position:center -36px;}

}

/* second flexpoint - reduce icon size below 767px width */
@media only screen and (max-width:767px){
	#app-showcase{width:444px;margin:0 auto;}
}

/* last flexpoint - reduce icon size below 567px width */
@media only screen and (max-width:479px){
	#app-showcase{width:280px;margin:0 auto;}
	#app-showcase .apps-app,
	#app-showcase .apps-app img{width:102px;height:102px;}
	#app-showcase .apps-overlay{width:244px;min-height:238px;}
	
}