#charts-container {
	float:left;
	width:271px;
	margin:5px 0px 5px 4px;
	display:inline;
}


#songs-container {
width:271px;
height:475px;
overflow:hidden;
float:left;
}

div.chart-pane {
font-family:Arial, Helvetica, sans-serif;
	font-size:12px;	
	height:450px;
	width:271px;
	padding:0px;
	margin: 0px;
	float:left;
	clear:both;
}

.chart-scrollable {
	position:relative; 
    overflow:hidden; 
	width:271px;
	height:450px;
}

.chart-items {
 position:absolute; 
 width:269px;
 height:450px;
 border-left: solid 1px #dddddd;
border-right: solid 1px #dddddd;
}

.chart-song {
float:left;
width:269px;
height:45px;
display:inline;
overflow:hidden;
cursor:pointer;
}

.chart-song-top {
float:left;
width:259px;
height:35px;
margin:0px 0px 0px 0px;
display:inline;
padding:5px;
overflow:hidden;
cursor:pointer;
}


.chart-song-image-container {
width:35px;
height:35px;
float:left;
display:inline;
margin-right:5px;
}

.chart-position {
	width:12px;
	height:12px;
	border-right:solid 1px #fff;
	border-bottom:solid 1px #fff;
	float:left;
	position:absolute;
	background-color:#ed830d;
	color:#fff;
	margin-top:-35px;
	font-size:10px;
	font-weight:bold;
	text-align:center;
	line-height:12px;
}

.chart-song-title {
float:left;
width: 168px;
height:35px;
display:inline;
margin:3px 0px 0px 0px;
font-size:11px;
}

.chart-icons {
float:left;
margin-left:5px;
display:inline;
width:45px;
height:35px;
}

.chart-icons img {
float:right;
margin:12px 0px 0px 2px;
display:inline;
}

.chart-nav {
float:left;
display:inline;
width:269px;
border-left: solid 1px #dddddd;
border-bottom: solid 1px #dddddd;
border-right: solid 1px #dddddd;
padding-top:4px;
}

.chart-player {
float:left;
position:absolute;
z-index:999;
width:269px;
height:35px;
padding:5px 0px 5px 0px;
}

/* ================== TABS =============== */

ul.chart-tabs { 
	list-style:none !important; 
	margin:0 !important; 
	padding:1px 0px 0px 0px !important;
	width:272px !important;
	float:left; 
	clear:both;
	display:inline;
	background-color: #dddddd;
	background-image: url(../images/charts-header-bg.gif);
	background-repeat: no-repeat;
	background-position: top left !important;
}

/* single tab */
ul.chart-tabs li { 
	float:left;	 
	text-indent:0;
	padding:0 !important;
	margin:0 !important;
	list-style-image:none !important; 
	clear:none;
}

/* link inside the tab. uses a background image */
ul.chart-tabs a, ul.chart-tabs a:link, ul.chart-tabs a:visited ,ul.chart-tabs a:active  { 
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	display:block;
	height: 24px;  
	line-height:24px;
	width: 133px;
	margin:0px 2px 3px 1px;
	text-align:center;	
	text-decoration:none;
	color:#fff;
	background-image:url(../images/chart-tab-bg.png);
	_background-image:url(../images/chart-tab-bg.jpg);
	background-position:top left !important;
}

ul.chart-tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.chart-tabs a:hover {
	color:#fff;	
}

/* active tab uses a class name "current-chart". it's highlight is also done by moving the background image. */
ul.chart-tabs a.current-chart, ul.chart-tabs a.current-chart:hover, ul.chart-tabs li.current-chart a {
	color:#fff !important;
	font-weight:bold;
	background-position: 0px 24px !important;
}

/* =================== NAV ================ */

a.chart-up, a.chart-down		{ 
	background:url(../images/vert_large.png) no-repeat; 
	_background:url(../images/vert_large.jpg) no-repeat; 
	float: left;
	width:15px;
	height:15px;
	margin:0px 5px 5px 5px;
	display:inline;
}

a.chart-up {
margin:0px 5px 5px 120px !important;
}

/* up */
a.chart-up:hover  		{ background-position:-15px 0 !important; }
a.chart-up:active  		{ background-position:-30px 0 !important; }

/* down */
a.chart-down 				{ background-position: 0 -15px !important; }
a.chart-down:hover  		{ background-position:-15px -15px !important; }
a.chart-down:active  	{ background-position:-30px -15px !important; }