/*
 ____ ____ ____ ____ ____ ____ ____ ____ 
||s |||p |||e |||a |||k |||k |||e |||r ||
||__|||__|||__|||__|||__|||__|||__|||__||
|/__\|/__\|/__\|/__\|/__\|/__\|/__\|/__\|

PORKHEAD.ORG AND PROJEKKTOR.COM 2011
*/

/* SPEAKKER DARK --------------------------------------- */
/* INDIVIDUAL COLORS BLOCKS */
.dark .skControls { background-color:#212121}
.dark .skBiglayer { background-color:#252525}
.dark .skLeftBlock,
.dark .skMiddleBlock,
.dark .skSocial { border-color:#000;}

/* VOLUME COLORS  --------------------------------------*/
.dark .skVolume,
.dark .skScrubbler { border:1px solid #151515} 
.dark .skVolume,
.dark .skScrubbler { background-color:#000;}
.dark .skLoad { background-color:#2E2E2E;}
.dark .skTimeRemain,
.dark .skVolumeRemain { background-color:#9CA4BE}

/* FONT COLORS  --------------------------------------*/	 
.dark,
.dark a { color:#fcfcfc; font-weight:bold;}
.dark a:hover { color:#b52b09}
.dark { text-shadow: 1px 1px 1px #111;}
.dark .skArtistlist .active { color:#5d5c5c }
				 
/* SCROLLER COLORS ----------------------------------*/
.dark .jspDrag { background-color:#171717;}
.dark .jspDrag:hover { background-color:#090909;}	 





/* SPEAKKER LIGHT --------------------------------------- */
/* INDIVIDUAL COLORS BLOCKS */
.light .skControls { background-color:#E1E1E1}
.light .skBiglayer { background-color:#EBEBEB}
.light .skLeftBlock,
.light .skMiddleBlock,
.light .skSocial { border-color:#000;}

/* VOLUME COLORS  --------------------------------------*/
.light .skVolume,
.light .skScrubbler { border:1px solid #CACACA} 
.light .skVolume,
.light .skScrubbler { background-color:#fff;}
.light .skLoad { background-color:#A41F35;}
.light .skTimeRemain,
.light .skVolumeRemain { background-color:#611300}
	
					
/* FONT COLORS  --------------------------------------*/	 
.light,
.light a { color:#000; font-weight:bold;}
.light a:hover { color:#b52b09}
.light { text-shadow: 0px 1px 0px #b9b2ba;}
.light .skArtistlist .active { color:#333 }

/* SCROLLER COLORS ----------------------------------*/
.light .jspDrag { background-color:#B0B0B0;}
.light .jspDrag:hover { background-color:#090909;}	
	

/* INDIVIDUAL WITDH FOR BOTTOM PLAYER |<-- STANDARD WIDTH 790px -->|  */

.speakker.fat  		{	width:960px; } /* your layout wrap => fat width  */
	
.speakker.fat .skActControl,
.speakker.fat .skScrubbler  
							 	 { width:558px; } /* fat  => 960px */
.speakker.fat						
.skMiddleBlock,
.speakker.fat	
ul.skArtistlist  { width:692px;} /*  fat  => 960px */
 
/* SPEAKKER RESET & BASIC --------------------------------------- */
.speakker li, 
.speakker span, .speakker strong {
	background: transparent;
	border: 0 none;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline; 
}
.speakker {
	font-size:11px;
	font-family:"Century Gothic", "Apple Gothic", "Gill Sans", Tahoma, sans-serif;
	width:790px; /* Standard witdh for speakker */
}
.speakker {
	position: fixed;
	bottom:0;
	margin:0 auto;
}
.speakker a {
	outline:none;
}



/* MODULES */
.skControls {
	background-position:left top;
	background-repeat:repeat-x;
	text-align:left;
	border-bottom:1px solid #000;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-rigtht-radius: 10px;
	margin:0 auto;
	height:62px;
}
.skBiglayer {
	background-position:top left;
	background-repeat:repeat-y;
	margin:0 auto;
	height:218px;
	position:relative;
	display: none; /* compacted by default*/
}
.skCopyright {
	background:#252525 url('../img/sk-copyright.png') right bottom repeat-x;
	border-top:1px solid #030303;
	width:100%;
	height: 25px;
	position:absolute;
	bottom:0;
	left:0;
	margin:0;
	padding:0;
}
.skLeftBlock {
	position:relative;
	background-repeat:repeat;
	background-position:left bottom;
	float:left;
	width:94px;
	padding:17px;
	height:158px;
	border-style:solid;
	border-right-width:1px;
	z-index:0;
}
.skMiddleBlock {
	background-repeat:repeat;
	background-position:left bottom;
	float:left;
	width:522px;
	height:158px;
	padding:17px;
	border-style:solid;
	border-right-width:1px;
	overflow: hidden;
	position: relative;
}
.skRightBlock {
	background-repeat:repeat;
	background-position:right bottom;
	float:left;
	position:relative;
	width:104px;
	height:192px;
	text-align:center;
}
/* MODULE CONTROLS */
.skMainControl,
.skActControl { 
	float:left;
	position:relative;
	height:33px;
}
.skMainControl { 
	padding:17px 32px 12px 17px;
	width:97px;
}
.skActControl {
	width:385px; /* Standard witdh for speakker */
	padding:15px 0px 14px;
	
}
.skModuleControl {
	width:85px; 
	padding:17px 17px 12px 17px;
	float:right;
	height:33px;
}
.skVolumeControl { 
	float:left;
	position:relative;
	width:108px;
	height:33px;
	padding:17px 0px 12px 29px;
}
.skOpener,
.skCloser,
.skLoud {
	float:right;
	cursor:pointer;
}
.skPlay, .skPause {
	margin:0 12px;
}
.skHeart,
.skPlay,
.skPause,
.skForwards,
.skBackwards,
.skMute,
.skLoopOn,
.skLoopOff {
	float:left;
	cursor:pointer;
}

.skPause.inactive,
.skPlay.inactive,
.skLoopOn.inactive,
.skLoopOff.inactive {
	display: none;
}

.skForwards.inactive,
.skBackwards.inactive
{
	-moz-opacity:.20;
	filter:alpha(opacity=20);
	opacity:.20;
}

.active {
	display: block;
	-moz-opacity:1;
	filter:alpha(opacity=100);
	opacity:1.00;	
}



.skHeart { 
	--background:transparent url('../img/sk-heart.png') left top no-repeat; 
	width:18px; 
	height:25px;
}
a.skEdit,
a.skUrl {
	background:transparent url('../img/sk-edit.png') right 4px no-repeat;
	text-transform:uppercase;
	text-decoration:none;
	float:left;
	font-size:10px;
	margin:6px 0 0 17px;
	padding-right:17px;
}
a.skEdit,
a.skUrl { 
	color:#fcfcfc;
	text-shadow: 1px 1px 1px #111;
	font-weight:normal;
}
a.skEdit:hover,
a.skUrl:hover { 
	color:#b52b09;
}
a.skUrl {
	color:#5d5c5c;
	background:none;
	padding-right:0px;
	margin:6px 17px 0 0;
	float:right;
}
.skWiki,
.skArtistlist { 
	list-style-type: none;
	margin-top:12px;
}
.skWiki a.lastfm {
	background:transparent url('../img/sk-lastfm.png') right 2px no-repeat;
	padding-right:24px;
}
.skWiki a {
	text-decoration:none;
	line-height:24px;
}
.skArtistlist a {
	text-decoration:none;
}


.skArtistlist li {
	height: 24px;
	cursor: pointer;
}

.skArtistlist  li:hover { color:#b52b09}

.skArtistlist {
	width:520px;
	height: 170px;
	margin:0;
	padding:0;
	overflow: hidden;
}
.skAct {
	width:260px;
	float:left;
	padding:0 12px;
	line-height:24px;
	height:24px;
	overflow:hidden;
}
.skTime { 
	width:80px;
	float:right;
	line-height:24px;
	text-align:right;
}
.skScrubbler {
	width:385px; /* Standard witdh for speakker */
	float:none;
	height:2px;
	position:absolute;
	left:0;
	bottom:15px;
	z-index:3;
}
.skLoad {
	float:none;
	height:2px;
	position:absolute;
	bottom:16px;
	left:1px;
	z-index:4;
}
.skTimeRemain {
	float:none;
	height:2px;
	position:absolute;
	bottom:16px;
	left:1px;
	z-index:5;
}
.skVolumeWidth { 
	width:48px;
	position: absolute;
	left:57px;
	bottom:15px;
	float:none;
}
.skVolume {
	width:100%;
	height:2px;
	position:absolute;
	left:0;
	bottom:12px;
	z-index:6;
}
.skVolumeRemain {
	float:none;
	height:2px;
	position:absolute;
	bottom:13px;
	left:1px;
	z-index:7;
	cursor:pointer;
}
.skLabel {
	background:transparent url('../img/sk-label.png') left top no-repeat;
	width:94px;
	height:75px;
	position:absolute;
	top:17px;
	left:17px;
	z-index:8;
}
.skSocial {
	width:70px;
	border-style:solid;
	border-bottom-width:1px;
	padding:17px;
	float:left;
}
.skFacebook,
.skTwitter {
	display:bock;
	float:left;
	text-indent:-99999px;
}
.skTwitter {
	margin-left:12px;
}
.skDownload {
	position:absolute;
	top:148px;
	left:17px;
	text-indent:-99999px;
}
/* WHEN NO COVER ADDED */
.skCover {
	background:transparent url('../img/sk-nocover.png') left top no-repeat;
	width:72px;
	height:72px;
	overflow:hidden;
}


/* THEME LIGHT */
.light .skBackwards,
.light .skForwards,
.light .skOpener,
.light .skCloser,
.light .skDownload,
.light .skFacebook,
.light .skTwitter,
.light .skLoopOn,
.light .skLoopOff,
.light .skLoud,
.light .skMute,
.light .skPlay,
.light .skPause,
.light .jspArrow.jspArrowUp.jspDisabled,
.light .jspArrow.jspArrowUp,
.light .scrollbar-handle-up ,
.light .scrollbar-handle-down  { background-image: url('../img/light/sk-light.png'); }
/*.light .skLeftBlock { background-image: url('../img/light/sk-leftblock.png'); }
.light .skMiddleBlock { background-image: url('../img/light/sk-middleblock.png'); }
.light .skRightBlock { background-image: url('../img/light/sk-rightblock.png'); }
*/
.light .skControls { background-image:url('../img/light/sk-controlbg.png'); }

/* THEME DARK */
.dark .skBackwards,
.dark .skForwards,
.dark .skOpener,
.dark .skCloser,
.dark .skDownload,
.dark .skFacebook,
.dark .skTwitter,
.dark .skLoopOn,
.dark .skLoopOff,
.dark .skLoud,
.dark .skMute,
.dark .skPlay,
.dark .skPause,
.dark .scrollbar-handle-up,
.dark .scrollbar-handle-down { background-image: url('../img/dark/sk-dark.png'); }
.dark .skLeftBlock { background-image: url('../img/dark/sk-leftblock.png'); }
.dark .skMiddleBlock { background-image: url('../img/dark/sk-middleblock.png'); }
.dark .skRightBlock { background-image: url('../img/dark/sk-rightblock.png'); }
.dark .skControls { background-image:url('../img/dark/sk-controlbg.png'); }

/* ICONS POSITION */
.skBackwards { background-position:  0 0; height: 32px; width: 20px; }
.skBackwards:hover { background-position:  0 -32px; }
.skForwards { background-position:  0 -64px; height: 32px; width: 20px; }
.skForwards:hover { background-position:  0 -96px; }
.skCloser { display: none; background-position:  -24px 0; height: 28px; width: 26px; }
.skCloser:hover { background-position:  -24px -29px; }
.skDownload { background-position:  -50px 0; height: 32px; width: 67px; }
.skDownload:hover { background-position:  -50px -32px; }
.skFacebook { background-position:  -50px -64px; height: 33px; width: 28px; }
.skFacebook:hover { background-position:  -50px -98px; }
.skTwitter { background-position:  -78px -64px; height: 33px; width: 28px; }
.skTwitter:hover { background-position:  -78px -98px; }

.skLoopOn, .skLoopOff { background-position:  -24px -57px; height: 32px; width: 26px; }
.skLoopOn:hover, .skLoopOff:hover { background-position:  -24px -89px; }
.skLoopOn {-moz-opacity:.40; filter:alpha(opacity=40); opacity:.40;}

.skLoud { background-position:  -24px -120px; height: 32px; width: 26px; }
.skLoud:hover { background-position:  -24px -152px; }
.skMute { background-position:  -24px -184px; height: 32px; width: 26px; }
.skMute:hover { background-position:  -24px -216px; }
.skOpener { background-position:  -24px -248px; height: 28px; width: 26px; }
.skOpener:hover { background-position:  -24px -278px; }
.skPause { background-position:  -50px -132px; height: 34px; width: 32px; }
.skPause:hover { background-position:  -50px -167px; }
.skPlay { background-position:  -82px -132px; height: 34px; width: 32px; }
.skPlay:hover { background-position:  -82px -168px; }

.scrollbar-handle-up.jspDisabled,
.scrollbar-handle-up.jspDisabled:hover  { background-position:  0 -128px; height: 16px; width: 16px; }
.scrollbar-handle-down { background-position:  0 -144px; height: 16px; width: 16px; }
.scrollbar-handle-down:hover { background-position:  0 -160px; }
.scrollbar-handle-up.jspDisabled,
.scrollbar-handle-up.jspDisabled:hover { background-position:  0 -176px; height: 16px; width: 16px; }
.scrollbar-handle-up{ background-position:  0 -192px; height: 16px; width: 16px; }
.scrollbar-handle-up:hover { background-position:  0 -208px; height: 16px; width: 16px; }

.scrollbar-pane {
	margin-right: 16px;
}

.scrollbar-handle-container {
    background: transparent;
    width: 15px;
}


 .scrollbar-handle:hover {
	background-color:#090909;
}


/* handle */
.scrollbar-handle {
	cursor: pointer;
	width:15px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-color:#171717;
}