/* -webkit-tap-highlight-color:rgba(0,0,0,0); */
html
{
	height:100%;
	background-color:#afb7c0;
	background-image:url('../img/splashscreen.png');
	background-position:center;
	background-repeat:no-repeat;
}

body
{
	padding:0px;
	margin:0px;
	font:17px/22px Helvetica, Arial, Verdana, sans-serif;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform-style: preserve-3d;
	
	-webkit-text-size-adjust:none;
	-webkit-user-select:none;
}

/* iOS Styles */
div.loading
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:#000;
	color:#FFF;
	text-align:center;
	padding-top:100px;
}

div.orientation-message
{
	position:absolute;
	left:0px;
	top:0px;
	width:inherit;
	height:inherit;
	background:#000;
	color:#FFF;
	text-align:center;
	padding-top:100px;
	font-size:130%;
}

#frame
{
	width:100%;
	height:100%;
}

#main-menu
{
	width:100%;
	height:60px;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bccd), color-stop(.5,#889bb3), color-stop(.5,#8195af), to(#6d84a2));
	text-align:center;
}

#content
{
	width:100%;
}

.list a
{
	display:block;
	color:#FFF;
	padding:10px 0px 10px 10px;
	text-decoration:none;
	white-spaces:nowrap;
	overflow:hidden;
	width:100%;
	border-bottom:2px solid #999;
}

.list a.album
{
	position:relative;
	display:block;
	color:#FFF;
	padding:8px 0px 8px 8px;
	text-decoration:none;
	border:2px solid #656565;
	white-spaces:nowrap;
	overflow:hidden;
	width:auto;
	margin:3px 3px 3px 3px;
	-webkit-border-radius:10px;
}

.list a.album:active
{
	/*color:#000;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4ca7fc), to(#0473e3));*/
}

.list a.album .thumbnail
{
	width:70px;
	height:70px;
	float:left;
	margin-right:10px;
	-webkit-border-radius:5px;
}

.list a.album .number
{
	position:absolute;
	top:55px;
	left:88px;
	width:auto;
}

.list a.album .rating
{
	position:absolute;
	top:55px;
	width:100%;
}

.list a.album .rating div.stars
{
	float:right;
	margin-right:15px;
	width:100px;
	height:21px;
	background:url('../img/stars-gray.png') no-repeat center;
}

.list a.album .rating div.stars div
{
	height:21px;
	background:url('../img/stars.png') no-repeat left;
}

.list a.album .title
{
	margin-left:10px;
}

.list a.odd
{
	background-color:#000;
}

.list a.even
{
	background-color:#222;
}

.list-item.current
{
	background:#009;
	color:#FFF;
}

.list a .number
{
	display:block;
	float:right;
	width:40px;
	text-align:center;
	color:#656565;
}

.list a:active
{
	/*
	color:#000;
	background-color: #4ca7fc;
	*/
}

.list a.playing
{
	color:#000;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4ca7fc), to(#0473e3));
	padding-left:8px;
}

.list a.playing .number
{
	float:left;
	width:20px;
	height:20px;
	background-image:url('../img/playing-arrow.png');
	background-repeat:no-repeat;
	background-position:0px 3px;
}

#player
{
	width:100%;
	height:60px;
	background-color:#555;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555), color-stop(.5,#333), color-stop(.5,#222), to(#000));
	text-align:center;
}

#player a.button
{
	display:block;
	width:50px;
	height:60px;
	margin:0px auto;
}

#player a.prev
{
	float:right;
	background:url(../img/prev.png) center no-repeat;
}

#player a.play
{
	background:url(../img/play.png) center no-repeat;
}

#player a.pause
{
	background:url(../img/pause.png) center no-repeat;
}

#player a.next
{
	float:left;
	background:url(../img/next.png) center no-repeat;
}

#player a.loading
{
	background:url(../img/loading.gif) center no-repeat;
}

#player a.list
{
	background:url(../img/list.png) center no-repeat;
}

#player a.close
{
	background:url(../img/close.png) center no-repeat;
}

#player a.time
{
	color:#FFF;
	text-decoration:none;
	text-align:right;
	margin-top:8px;
}

#player div.track
{
	position:absolute;
	height:10px;
	background:#00F;
	margin-top:1px;
	
	-webkit-border-radius:5px;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4ca7fc), to(#0473e3));
}

.album-info
{
	color:#FFF;
	margin-bottom:5px;
}

.album-info h3
{
	color:#4ca7fc;
	margin:10px 0px 5px 0px;
}

.album-info h2
{
	margin:5px 0px 20px 0px;
}

.album-info img
{
	-webkit-border-radius:10px;
}

#back-button-box
{
	float:left;
	width:54px;
	height:60px;
	margin-left:10px;
}

#back-button
{
	display:block;
	background: url('../img/btn-back.png') no-repeat center;
	width:54px;
	height:60px;
}

#now-playing-button-box
{
	float:right;
	width:54px;
	height:60px;
	margin-right:10px;
}

#now-playing-button
{
	display:block;
	background: url('../img/btn-now-playing.png') no-repeat center;
	width:54px;
	height:60px;
}

#menu-artists
{
	display:inline-block;
	background: url('../img/btn-artists.png') no-repeat center;
	width:44px;
	height:60px;
}

#menu-alphabet
{
	display:inline-block;
	background: url('../img/btn-alphabet.png') no-repeat center;
	width:44px;
	height:60px;
}

#menu-search
{
	display:inline-block;
	background: url('../img/btn-search.png') no-repeat center;
	width:44px;
	height:60px;
}

div.logo
{
	display:none;
	position:absolute;
	background: url('../img/logo.png') no-repeat right;
	width:95%;
	height:60px;
	top:0px;
	left:0px;
}

form.search-form
{
	margin-top:40px;
	text-align:center;
}

form.search-form input
{
	font-size:large;
}

form.search-form input.search-field
{
	width:241px;
	height:38px;
	border:0px;
	background:transparent url(../img/search-field.png) no-repeat center;
	padding-left:30px;
}

.fabric {background: url(../img/fabric-background.jpg);}

.hidden {display:none;}
.blue-text {color:#4ca7fc;}
.shadow {text-shadow: 2px 2px 2px #000;}
img.shadow, div.shadow {-webkit-box-shadow: 2px 2px 2px #000;}

#top-shadow
{
	position:absolute;
	width:100%;
	height:20px;
	background:url(../img/shadow.png) repeat-x top;
	z-index:100;
}

/* 3D FLIPPING */
.card-container
{
	-webkit-perspective:500; /* adds 3d look, applies only to children*/
}

.card
{
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 1s ease-in-out;
}

.card-flipped
{
	-webkit-transform: rotateY(360deg) scale(1.7);
	z-index: 1;
}
/* END OF 3D FLIPPING */