@import url("webfontkit/stylesheet.css");

body{
//background:#4d4d4d;
background:url("photo.jpg") no-repeat;

}

#bar{
width:100%;
/*height: 25px;*/
font-family: cm, sans-serif;
font-weight: bold;
font-size:16px;
color: #303531;
background:rgba(255, 255, 255, 0.75);
}

#bar p{
text-align:right;
margin-right:100px;
}

#bar p a{
text-decoration:none;
color: #33ABD1;
}

#bar p a:hover{
text-decoration:none;
color: #33ABD1;
}

#footer{
position:absolute;
width:99%;
height: 25px;
font-family: cm, sans-serif;
font-weight: bold;
font-size:13px;
color: #303531;
bottom:40px;
z-index:-1;
}

#footer p{
text-align:right;
margin-right:100px;
}


#footer p a{
color: #33ABD1;
}

#container{
width:100%;
height:100%;
//padding-top:10px;
}

#ipod{
width:360px;
height:582px;
background: #F1F5F6;
//background: #ECECEE url("ipod.png");
margin:0 auto;
margin-top:50px;
-webkit-border-radius: 35px;
border-radius: 35px;
-webkit-box-shadow:  0px 50px 41px 3px rgba(0, 0, 0, .4);

background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(255,255,255,1) 0%, rgba(237,237,237,1) 59%, rgba(243,243,243,1) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(59%,rgba(237,237,237,1)), color-stop(60%,rgba(243,243,243,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(237,237,237,1) 59%,rgba(243,243,243,1) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(237,237,237,1) 59%,rgba(243,243,243,1) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(237,237,237,1) 59%,rgba(243,243,243,1) 60%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(237,237,237,1) 59%,rgba(243,243,243,1) 60%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

border-right: #C3CAD2 4px solid;
border-left: #909599 4px solid;
border-top: #D2D5DA 4px solid;
border-bottom: #737278 4px solid;
}

#screen{
position:relative;
width:240px;
height:188px;
background:#C0BDB6;
top:28px;
left:56px;
font-family: cm, sans-serif;
font-weight: bold;
font-size:16px;
color: #303531;
overflow:hidden;
-webkit-border-radius: 10px;
border-radius: 10px;
border:3px #595854 solid;
-webkit-box-shadow:  1px 1px 1px 1px #C0BFBD;
box-shadow:  1px 1px 1px 1px #C0BFBD;
background: rgb(170,167,160); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(170,167,160,1) 0%, rgba(193,190,185,1) 49%, rgba(191,190,185,1) 51%, rgba(203,202,197,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(170,167,160,1)), color-stop(49%,rgba(193,190,185,1)), color-stop(51%,rgba(191,190,185,1)), color-stop(100%,rgba(203,202,197,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  rgba(170,167,160,1) 0%,rgba(193,190,185,1) 49%,rgba(191,190,185,1) 51%,rgba(203,202,197,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  rgba(170,167,160,1) 0%,rgba(193,190,185,1) 49%,rgba(191,190,185,1) 51%,rgba(203,202,197,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  rgba(170,167,160,1) 0%,rgba(193,190,185,1) 49%,rgba(191,190,185,1) 51%,rgba(203,202,197,1) 100%); /* IE10+ */
background: linear-gradient(45deg,  rgba(170,167,160,1) 0%,rgba(193,190,185,1) 49%,rgba(191,190,185,1) 51%,rgba(203,202,197,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa7a0', endColorstr='#cbcac5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}



#clickwheel{
position:relative;
width:300px;
height:300px;
border:2px solid #4d4d4d;
top:55px;
left:25px;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow:  2px 1px 10px 10px rgba(232, 232, 232, .4);
box-shadow:  2px 1px 10px 10px rgba(232, 232, 232, .4);
}

#innerwheel{
position:relative;
width:234px;
height:234px;
border:2px solid #4d4d4d;
background:#E9EDEC;
top:32px;
left:32px;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow:  2px 1px 10px 10px rgba(232, 232, 232, .4);
box-shadow:  2px 1px 10px 10px rgba(232, 232, 232, .4);

background: rgb(255,255,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(255,255,255,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

#innerbutton{
position:absolute;
width:80px;
height:80px;
border:2px solid #4d4d4d;
top:75px;
left:75px;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index:15;
-webkit-box-shadow:  2px 1px 10px 10px rgba(232, 232, 232, .4);
box-shadow:  2px 1px 10px 10px rgba(232, 232, 232, .4);

background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.button{
position:absolute;
width:150px;
height:150px;
border:1px solid #090708;

-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

#topbutton{
top:-33px;
left:74px;
border-top:0px;
border-left:0px;
}

#topbutton span{
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

#bottombutton{
top:182px;
left:74px;
border-bottom:0px;
border-right:0px;
}

.title{
width:100%;
height:23px;
text-align:center;
margin-top:5px;
border-bottom: 2px #303531 solid;
}

#screen ul {
	display:block;
	padding:0;
	cursor:pointer;
	margin-top:3px;
}

#screen ul a{
	display:block;
	text-decoration: none;
	color: #303531;
}

#screen a li {
	list-style:none;
	height: 24px;
	padding-left:7px;
	padding-top:2px;
	overflow: hidden;
	text-overflow: ellipsis;
	//background: url("arrow.png");
}

#screen a.select li  {
	background:#303531;
	//background:#303531 url("arrow_selected.png");
	color:#C0BDB6;
}

#screen a .arrow {
	margin-left: 228px;
	position: absolute;
	margin-top: -23px;
}

#screen a.select  .arrow {
	margin-left: 228px;
	position: absolute;
	margin-top: -23px;
	color:#C0BDB6;
}



#playindicator{
	display:none;
	position: absolute;
	width: 22px;
	height: 20px;
	top: 8px;
	left: 15px;
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent; 
	border-left: 8px #303531 solid;
	float: left;
}


#pauseindicator{
	display:none;
	position: absolute;
	width: 22px;
	height: 20px;
	top: 8px;
	left: 15px;
	float:left;
}

.pausebar{
	width: 0; 
	height: 15px; 
	//border-top: 8px solid transparent;
	//border-bottom: 8px solid transparent; 
	border-right: 4px #303531 solid;
	float: left;
	margin-right:2px;
}

.battery{
	position: absolute;
	width: 22px;
	height: 9px;
	top: 9px;
	right: 8px;
	outline: #303531 1px solid;
	font-size: 35px;
	letter-spacing: -10px;
	overflow: hidden;
	line-height: 1px;
	text-indent: -5px;
	border: solid 1px #C0BDB6; 
}

.batterytip{
	position: absolute;
	width: 2px;
	height: 3px;
	right: 4px;
	top: 12px;
	border: 1px #303531 solid;
	border-left: 1px #C0BDB6 solid;
}

#menu{
	position: absolute;
	top: 7px;
	left: 127px;
	color: #979EA4;
	font-family: cm, sans-serif;
	font-size:16px;
}

#prev{
	position: absolute;
	top: 140px;
	left: 8px;
	color: #979EA4;
	font-family: cm, sans-serif;
	font-size:16px;
}

.bar-left {
	width: 0; 
	height: 15px; 
	//border-top: 8px solid transparent;
	//border-bottom: 8px solid transparent; 
	border-right: 4px #A1A5A8 solid;
	float: left;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent; 
	border-right: 8px #A1A5A8 solid;
	float: right;
}

#next{
	position: absolute;
	top: 140px;
	left: 276px;
	color: #979EA4;
	font-family: cm, sans-serif;
	font-size:16px;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent; 
	border-left: 8px #A1A5A8 solid;
	float: left;
}

.bar-right {
	width: 0; 
	height: 15px; 
	//border-top: 8px solid transparent;
	//border-bottom: 8px solid transparent; 
	border-left: 4px #A1A5A8 solid;
	float: right;
}

#play-pause{
	position: absolute;
	top: 277px;
	left: 145px;
	color: #979EA4;
	font-family: cm, sans-serif;
	font-size:16px;
}

#leftbutton{
top: 74px;
left: -32px;
border: 0px;
}

#rightbutton{
top: 74px;
left: 179px;
border: 0px;
}

.gap{
	margin-left:2px;
}

.tile{
margin:0;
float:left;
width: 100%;
}

.tile li{
list-style:none;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
/*Now Playing*/
.tracknumber{
line-height:20px;
font-size: 12px;
padding-left:5px;
}

.songtitle, .songartist, .albumtitle{
text-align:center;
line-height:28px;
}

.timevolume{
line-height:25px;
padding-left:10px;
padding-top:10px;
}

.trackbar{
position:absolute;
width:65%;
height:10px;
bottom:22px;
left:70px;
border: 2px #303531 solid;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

.trackbartime{
width:0%;
height:100%;
background: #545850;
}

#player{
display:none;
}

.timeline{
//display:none;
}

.volumeincr{
width:24px;
height:24px;
background:url("volumeu.png") 24px 0px;
float:left;
margin-left:3px;
}

.volumedecr{
width:24px;
height:24px;
background:url("volumeu.png") -4px 0px;
float:right;
margin-right:10px;
}

.volumebar{
position:absolute;
width:70%;
height:10px;
bottom:19px;
left:30px;
border: 2px #303531 solid;
}

.volumelevel{
width:0%;
height:100%;
background: #545850;

}

.volume{
display:none;
}

.scrolltime{
display:none;
}

.scrolltimebar{
position:absolute;
width:70%;
height:10px;
bottom:25px;
left:30px;
border: 2px #303531 solid;
}

.scrolltimelevel{
width:0%;
height:100%;
//background: #545850;
float:left;
}

.scrolltimebar span {
color: #303531;
line-height: 7px;
font-size: 20px;
height: 5px;
margin: 0px 0px 0 -11px;
display: block;
float: left;
text-shadow: rgba(0, 0, 0, 1) 0 0 0;
}

.jqclock{
font-size: 50px;
margin-left: 40px;
margin-top: 50px;
}

.calendar-month{
font-size: 15px;
margin-top: -15px;
}

#calendarr{
margin-top: -15px;
}

#current-month{
margin-left:60px;
}