/*------------------------------------------------------------------------
# JOOFORGE.com - Il Web All'Italiana
# ------------------------------------------------------------------------
# Copyright © 2004-2009 JOOFORGE.com. Tutti i diritti riservati.
# Website:  http://www.jooforge.com/
-------------------------------------------------------------------------*/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/* JUKEBOX
--------------------------------------------------------- */
div#jf-jukebox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

div#jf-jukebox a.index {
	font-weight: bold;
	color: #666;
	text-shadow: 1px 1px #EEE;
	font-size: 13px;
	height: 30px;
	line-height: 30px;
	display: block;
	background: url(../images/categories.png) no-repeat 100% 13px;
	margin-right: 5px;
	padding-right: 12px;
	float: right;
}

div#jf-jukebox div.listheader  {
	background: url(../images/l.png) no-repeat 0 0;
	padding-left: 5px;
}

div#jf-jukebox div.listheader div.r {
	background: url(../images/r.png) no-repeat 100% 0;
	padding-right: 5px;
}

div#jf-jukebox div.listheader div.t {
	background: url(../images/t.png) repeat-x 0 0;
	height: 29px;
}

div#jf-jukebox div.listheader div.t div {
	font-weight: bold;
	font-size: 13px;
	line-height: 29px;
	color: #333;
	text-shadow: 1px 1px #BBB;
	padding-left: 6px;
}

div#jf-jukebox div.itemlist {
	border: 1px solid #D5D5D5;
	border-top: none;
}

div#jf-jukebox div.category {
	background: #FFF url(../images/category.png) repeat-x 0 100%;
	padding: 13px;
}

div#jf-jukebox div.categorydesc p,
div#jf-jukebox div.description p {
	margin: 0 0 15px;
}

div#jf-jukebox img {
	border: 1px solid #FFF;
	-moz-box-shadow: 0px 2px 3px #666;
	-webkit-box-shadow: 0px 2px 3px #666;
	box-shadow: 0px 2px 3px #666;
	float: left;
	margin-right: 15px;
}

div#jf-jukebox div.leftcol {
	width: 325px;
	float: left;
}

div#jf-jukebox div.details {
	float: left;
	height: 90px;
	width: 200px;
}

div#jf-jukebox div.details div {
	color: #666;
	height: 20px;
	line-height: 20px;
}

div#jf-jukebox div.details span {
	font-weight: bold;
}

div#jf-jukebox div.details div.categorytitle a {
	display: block;
	font-weight: bold;
	font-size: 15px;
	color: #333;
}

div#jf-jukebox div.details div.categorytitle a:hover {
	text-decoration: none;
	color: #AAA;
}

div#jf-jukebox div.listfooter {
	position: relative;
	background: url(../images/logo.png) no-repeat 50% 0;
}

div#jf-jukebox div.listfooter .inner {
	background: url(../images/smoothshadow.png) no-repeat 50% 0;
	height: 30px;
}

/* DEFAULT LIST
--------------------------------------------------------- */
div#jf-jukebox div.listheader div.t div.artist {
	float: left;
	width: 170px;
	padding-left: 26px;
}

div#jf-jukebox div.title {
	float: left;
	background: url(../images/headsep.png) no-repeat 0 0;
}

div#jf-jukebox div.listen {
	float: left;
	background: url(../images/headsep.png) no-repeat 0 0;
	width: 210px;
}

div#jf-jukebox div.infos {
	height: 31px;
	background: url(../images/track.png) repeat-x 0 0;
	line-height: 31px;
	cursor: pointer;
}

div#jf-jukebox div.trackartist {
	float: left;
	width: 200px;
}

div#jf-jukebox div.trackartist span {
	display: block;
	float: left;
	width: 16px;
	height: 29px;
	background: url(../images/description.png) no-repeat;
	margin: 0 7px;
}

div#jf-jukebox div.trackartist span.icon {
	background-position: 0 7px;
}

div#jf-jukebox div.trackartist span.iconoff {
	background-position: 0 -27px;
}

div#jf-jukebox div.tracktitle {
	float: left;
	padding-left: 6px;
}

div#jf-jukebox div.tracklisten {
	width: 214px;
	float: left;
	padding-left: 6px;
}

div#jf-jukebox div.track div.innerbox {
	padding: 15px 240px 15px 15px;
	background: #EEE url(../images/music.png) no-repeat 100% 50%;
}

div#jf-jukebox div.track div.innerbox img,
div#jf-jukebox div.track div.innerbox div {
	margin-top: 10px;
	margin-bottom: 5px;
}

div#jf-jukebox div.description {
	font-size: 11px;
	color: #666;
	margin-left: 105px;
}

div#jf-jukebox div.player {
	margin-top: 8px;
	margin-left: 5px;
	width: 195px;
}

div#jf-jukebox div.tracklisten span.file {
	display: none;
}

div#jf-jukebox div.player a {
	display: block;
	margin-right: 5px;
	float: left;
	width: 15px;
	height: 15px;
}

/* OFF */
div#jf-jukebox div.player a.playtrack {
	background: url(../images/controls.png) no-repeat 0 0;
}

div#jf-jukebox div.player a.playtrack:hover {
	background-position: 0 100%;
}

div#jf-jukebox div.player a.pausetrack {
	background: url(../images/controls.png) no-repeat -18px 0;
}

div#jf-jukebox div.player a.stoptrack {
	background: url(../images/controls.png) no-repeat -36px 0;
}

/* ON */
div#jf-jukebox div.player a.playtrack.on {
	background: url(../images/controls.png) no-repeat 0 100%;
}

div#jf-jukebox div.player a.pausetrack.on {
	background: url(../images/controls.png) no-repeat -18px 100%;
}

div#jf-jukebox div.player a.stoptrack.on {
	background: url(../images/controls.png) no-repeat -36px 100%;
}

div#jf-jukebox div.player div.timebar {
	float: left;
	width: 135px;
	height: 15px;
	background: url(../images/timebar.png) no-repeat 0 0;
	position: relative;
}

div#jf-jukebox div.timebar div.rail {
	width: 115px;
	height: 5px;
	position: absolute;
	left: 10px; top: 5px;
	background: url(../images/rail.png) no-repeat 0 0;
}

div#jf-jukebox div.timebar div.line {
	height: 5px;
	width: 0;
	background-color: #9FD65F;
}

div#jf-jukebox div.empty {
	color: #666;
	padding: 10px 5px;
}