/* MAIN
------------------------------------------------------------------------------- */
html,body { height: 100%; }
body { background: #fff url(../images/main_bg.png) repeat-x; color: #4e4e4e; }


/* COMMON
------------------------------------------------------------------------------- */
p.small   { font-size: 0.8em; margin-bottom: 1.875em; line-height: 1.875em; }
p.large   { font-size: 1.2em; }
p.title   { font-size: 1.2em; font-weight: bold; margin: 0; }
p.nm	  { margin: 0; }
.hide     { display: none; }
.center,.cntr	  { text-align: center; }
.alft	  { text-align: left; }
.argt	  { text-align: right; }

.selfClear:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    font-size: 0px;
}

.selfClear { display: inline-block; }

/* Hide from IE-mac \*/
* html .selfClear { height: 1%; }

.selfClear { display: block; }
/* End hide from IE-mac */


.horizlist { list-style: none; }
.horizlist li { display: inline; }
.horizlist.cent { text-align: center; }

/* common spacing classes */
.p1 { padding: 4px; } .p2 { padding: 8px; } .p3 { padding: 12px; } .p4 { padding: 20px; }
.tp1 { padding-top: 4px; } .tp2 { padding-top: 8px; } .tp3 { padding-top: 12px; } .tp4 { padding-top: 20px; } .tp5 { padding-top: 17px; }
.sp2 { padding-left: 8px; padding-right: 8px; }
.bp1 { padding-bottom: 4px; } .bp2 { padding-bottom: 8px; } .bp3 { padding-bottom: 12px; } .bp4 { padding-bottom: 20px; }
.lp1 { padding-left: 4px; } .lp2 { padding-left: 8px; } .lp3 { padding-left: 12px; } .lp4 { padding-left: 20px; }
.p0 { padding: 0; }
.tp0 { padding-top: 0; } .bp0 { padding-bottom: 0; } .lp0 { padding-left: 0; } .rp0 { padding-right: 0; }
.vp1 { padding: 0 4px; } .vp2 { padding: 0 8px; } .vp3 { padding: 0 12px; } .vp4 { padding: 0 20px; }

.m1 { margin: 4px; } .m2 { margin: 8px; } .m3 { margin: 12px; } .m4 { margin: 16px; }
.tm1 { margin-top: 4px; } .tm2 { margin-top: 8px; } .tm3 { margin-top: 12px; } .tm4 { margin-top: 16px; }
.bm1 { margin-bottom: 4px; } .bm2 { margin-bottom: 8px; } .bm3 { margin-bottom: 12px; } .bm4 { margin-bottom: 16px; }
.lm1 { margin-left: 4px; } .lm2 { margin-left: 8px; } .lm3 { margin-left: 12px; } .lm4 { margin-left: 16px; }
.rm1 { margin-right: 4px; } .rm2 { margin-right: 8px; } .rm3 { margin-right: 12px; } .rm4 { margin-right: 16px; }

.m0 { margin: 0; }
.tm0 { margin-top: 0; }
.bm0 { margin-bottom: 0; }

/* hyperlink layouts */

/* input layouts */
input[type=password], input[type=text], textarea { /* this is duplicated in ie.css because IE6 cant't parse CSS ;) */
	font: 1em Verdana, Arial, Helvetica, sans-serif;
	background: url(../images/input_bg.png) no-repeat;
	border: 0; margin: 0;
	padding: 4px 0 0 2px;
	height: 18px;
	width: 190px;
}

input[type=submit] { /* this is duplicated in ie.css because IE6 cant't parse CSS ;) */
	background-color: #cacccf;
	color: #000;
}

select {
	font-size: 1em;
	background: url(../images/input_bg.png) no-repeat;
	border:0;
	margin:0;
	padding: 3px 0 3px 2px;
}

.inputwp { background: url(../images/input_bg.png) 100% -22px no-repeat; padding-right: 5px; }

.niceinput { vertical-align: bottom; }
.smbbtn {
	vertical-align: bottom;
	margin: 0; padding: 0;
	display: inline-block;
	height: 22px;
	background: url(../images/input_buttons.png) no-repeat;
	text-indent: -99999px;
	border: 0;
	color: transparent !important;
}


.searchbtn { width: 72px; }
.loginbtn { background-position: 0 -22px ; width: 72px; }
.button_button { background-position: 0 -44px ; width: 72px; }
.sendbtn { background-position: 0 -66px; width:72px; }

/* form layouts */
.frmlayout1 label { display: block; width: 70px; float: left; line-height: 22px; }
.frmlayout1 div { margin-bottom: 8px; }

.frmlayout2 label { display: block; margin-bottom: 2px; }
.frmlayout2 div { margin-top: 4px; }

.frmlayout3 label { display: block; width: 120px; float: left; line-height: 22px; }
.frmlayout3 div { margin-top: 10px; }


.fileinputs {
	position: relative;
}

.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}
.fakefile input[type=text] { width: 213px; }

.file {
	position: relative;
	text-align: right;
	height:28px;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
	width: 285px;
}

/* JQUERY PLUGINS
--------------------------------------------------------------------------- */
	/* checkbox (customized)
	--------------------------------------------------------------------------- */
	.jquery-checkbox       {display: inline; font-size: 15px; line-height: 15px; cursor: pointer; cursor: hand; }
	.jquery-checkbox .mark {display: inline;}

	.jquery-checkbox img { vertical-align: top; width: 12px; height: 15px; margin-top:1px;}
	.jquery-checkbox img { background: url(/images/checkbox_states.png) no-repeat;}

	.jquery-checkbox img { background-position: 0px 0px; }
	.jquery-checkbox-hover img { }
	.jquery-checkbox-checked img{ background-position: -12px 0; }
	.jquery-checkbox-checked .jquery-checkbox-hover img { }

	.jquery-checkbox-disabled img { }
	.jquery-checkbox-checked .jquery-checkbox-disabled img {  }

/* icons buttons */

.iconbtn {
	background: url(../images/icon_buttons.png) no-repeat;
	background-color: transparent !important;
	display: block;
	height: 22px;
	text-indent: -9999px;
	cursor:pointer;
}

.newaccountbtn { width: 116px; }
.facebookbtn { background-position: 0 -22px; width: 145px; }
.savefavorite { background-position: 0 -44px; width: 135px; }
.openxml { background-position: 0 -66px; width: 135px; }
.spotifylogin { background-position: 0 -88px; width: 135px; }
.adduri { background-position: 0 -88px; width: 135px; }
.importall { background-position: 0 -110px; width: 135px; }
.importselected { background-position: 0 -132px; width: 135px; }
.openinspotify { background-position: 0 -154px; width: 135px; }
.playplaylist { background-position: 0 -176px; width: 135px; }

.signup { margin-top:20px; background-position: 0 -198px; width:116px; }
.removefavorite { background-position: 0 -220px; width: 135px; }

.exporttospotify { background-position: 0 -242px; width: 135px; } 
.deleteplaylist { background-position: 0 -308px; width: 135px; }  
.updateplaylist { background-position: 0 -396px; width: 135px; } 

.ok	{ background-position: 0 -330px; width: 60px;}
.cancel { background-position: 0 -286px; width: 81px;}
.export { background-position: 0 -264px; width: 81px;}

.updatesettings { background-position: 0 -374px; width: 135px;}¨
.deleteplaylist { background-position: 0 -374px; width: 135px;}
.deleteaccount { background-position: 0 -264px; width: 81px;}

.done	{ background-position: 0 -440px; width: 71px;}

.updatemoods { background: url("/images/update_btn_small.png") no-repeat 0 0; width:60px; height:19px; }

/* rating */
.rating,
.rating span { 
	display: inline-block;
	background: url(../images/rating_balls.png) repeat-x;
	width: 60px;
	height: 10px;
	vertical-align: middle;
}
.rating span { vertical-align: top; text-indent: -99999999px; }
.rating1 { background-position: 0 -10px !important; width: 12px !important; }
.rating2 { background-position: 0 -20px !important; width: 24px !important; }
.rating3 { background-position: 0 -30px !important; width: 36px !important; }
.rating4 { background-position: 0 -40px !important; width: 48px !important; }
.rating5 { background-position: 0 -50px !important; width: 60px !important; }

/* MAIN LAYOUT
------------------------------------------------------------------------------- */
#container { width:993px; margin-bottom: -74px; min-height: 100%; overflow: hidden; position: relative; }

#mainContentWrapper { min-height: 400px; padding-bottom: 74px; margin-top: 93px; }

#navigation { width: 205px; float: left; }

#mainContent { float: right; width: 758px; margin-top: -69px; padding-bottom: 20px; position: relative; z-index: 50; }

#header { position: absolute; top: 0; left: 0; width: 100%; height: 93px; }
#header img { margin: 24px 0 0 29px; }
#header .logo { float:left; } 
#header .headline { display:none; padding-top: 7px; }
#header form { padding-top: 3px; }

/* player */
.player { background: none; background-color: #f5f5f5; }
.player #pcontainer { width: 581px; position: relative; background-color: #fff; }
.player #playerTop { /*background: url(../images/player_sprites.png) no-repeat; height: 67px;*/ margin: 0;}
.player #playerTop img { margin: 15px 0 0 18px; }

.player #nowPlaying { min-height: 234px; }
.player #nowPlaying ul { margin: 0; }
.player #nowPlaying #adSpace {
	position: absolute;
	top: 7px; right: 12px;
	background: url(../images/player_adbg.jpg) no-repeat;
	width: 280px; height: 268px;
}

.player #playlist table {
	table-layout: fixed;
	width: 581px;
	background: #e5e5e5 url(../images/player_sprites.png) 0 -67px no-repeat;
}
.player #playlist thead th { height: 40px; line-height: 37px; font-weight: bold; padding: 0; }
.player #playlist .scroll { height: 90px;  }
.player #playlist td { padding: 1px 0; }
.player #playlist .odd { background-color: #dadada; }

.player #playlist .first { padding-left: 10px; }
.player #playlist { background: #e5e5e5 url(../images/player_sprites.png) -581px 100% no-repeat; padding-bottom: 31px; min-height: 140px; }

.player #playlist #content0 { overflow: -moz-scrollbars-vertical; overflow-x: hidden; overflow-y: auto; }
.player #playlist #content0 table { background: none; }



	/* TEMPLATES / PAGES
	--------------------------------------------------------------------------- */
	.startpage #mainContent h1 { margin: 16px 0 54px 20px; }
	.startpage #mainContent { float: right; width: 758px; margin-top: 25px; padding-bottom: 20px; position: relative; z-index: 50; }
	
	.startpage #header .headline { float:left;margin:34px 0px 0px 36px; display:block; }
	
	#dynamicPage h2 { color: #000; padding-left: 0; }
	
	/* COLUMNS
	--------------------------------------------------------------------------- */	
	
	/* MODULES
	--------------------------------------------------------------------------- */
	#searchForm { position: absolute; right: 4px; top: 36px; z-index: 51; }
	#searchForm .niceinput { width: 213px; }
	
	#traxxterInfo { width: 330px; margin-left: 20px; }
	#frontpageFeatured h2,
	#traxxterInfo h2 { padding-left: 0; margin-bottom: 8px; }
	
	#loginModule { width: 287px; }
	#loginModule #txtusername { width: 210px; }
	#loginModule #txtpassword { width: 143px; }
	#loginModule .moduleHeader { padding-left: 0px; margin-bottom: 8px; }
	
	#userInfo { position: relative; }
	#userInfo ul { overflow: auto; padding-bottom: 10px; }
	#userInfo .btnrow { position: absolute; bottom: 7px; left: 15px; }
	#userInfo .lstmetainfo strong { color: #000; }
	
	#iTunesImport { position: relative; }
	#iTunesImport .txtcnt { margin-right: 285px; }
	#iTunesImport .fileinputs { float: left; width: 290px; margin-right: 15px; }
	#iTunesImport .btnrow { position: absolute; bottom: 5px; left: 15px; width: 440px; }
	
	#spotifyImport { position: relative; }
	#spotifyImport .txtcnt { margin-right: 285px; }
	#spotifyImport form { position: absolute; margin: 0; bottom: 16px; width: 440px; }
	#spotifyImport .spotifylogin { position: absolute; bottom: 0; right: 0; }
	#spotifyImport .inputwp { width: 285px; }
	#spotifyImport .inputwp input { width: 282px; }
	
	#spotifyPlaylist { position: relative; }
	#spotifyPlaylist .txtcnt { margin-right: 285px; }
	#spotifyPlaylist form { margin: 0; bottom: 0px; width: 440px; }
	#spotifyPlaylist .ok { position: absolute; left:317px; bottom: 8px; }
	#spotifyPlaylist .inputwp { width: 285px; }
	#spotifyPlaylist .inputwp input { width: 282px; }
	
	#importPlaylist table .first { padding-left: 12px; }
	#importPlaylist td.first { padding-left: 25px;}
	#importPlaylist .btnrow { text-align: right; }
	#importPlaylist .btnrow input { display: inline-block; margin-left: 10px; }
	
	#playlistInfo { position: relative; height: 202px}
	#playlistInfo .lstmetainfo { overflow: auto; margin-bottom: 10px;  }
	#playlistInfo .btnrow {
		bottom:7px;
		left:7px;
		position:absolute;
	}
	#playlistInfo .btnrow a { margin-right: 15px; }
	
	/* NAVIGATION
	--------------------------------------------------------------------------- */
	#navigation,
	#navigation a { font: bold 1em/1.5 Helvetica, Arial, sans-serif; }
	
	#navigation .active { color: #000; }
	
	#navigation ul { margin: 0; padding: 0; }
	#navigation { padding: 27px 0 0 30px; }
	
	#navigation ul li { margin-bottom: 7px; }
	#navigation ul li a { font-size: 1.333em; color: #5c5c5c; text-decoration: none; }
	
	#navigation li ul li { margin: 0; }
	#navigation li ul a { font-size: 1em; }
	
	#topMenu .content { min-height: 0; }
	#topMenu .content ul { margin: 3px 0 3px 10px; }
	#topMenu .content ul li { display: inline; margin-right: 15px; }
	#topMenu .content li a {
		color: #5c5c5c;
		font-size: 1.083em;
		text-decoration: none;
	}
	#topMenu .content li a:hover { text-decoration: underline; }
	
	#topMenu .content li .active { color: #000; }
	
	#navigation ul li.more a { font-size: 1em; color: #59631e; text-decoration: none; }
	
	/* MODULEBOX DESIGN
	--------------------------------------------------------------------------- */
	.tabs .menu { display: block; height: 38px; margin: 0; padding: 0; }
	.tabs .menu li { float: left; display: block; height: 38px; }
	.tabs .menu li a,
	.tabs.noaction .menu li a {
		background: url(../images/tab_states.png) 0 -76px no-repeat;
		display: block;
		width: 132px; height: 38px;
		line-height: 38px;
		font-size: 1.166em;
		font-weight: bold;
		padding-left: 18px;
		color: #5c5c5c;
		text-decoration: none;
	}
	.tabs .menu .first a,
	.tabs.noaction .menu .first a { width: 137px; background-position: 0 0; }
	.tabs .menu .last a { background-position: 0 -152px; }
	
	.tabs .menu .active { background-position: 0 -114px; color: #000; }
	.tabs .menu .first .active,
	.tabs.noaction .menu .first .active { background-position: 0 -38px; }
	.tabs .menu .last .active { background-position: 0 -190px; }
	
	.tabs .tabPanes,
	.tabs.noaction .spotBox	{ margin-top: -8px; }
	
	.spotBox .bt,
	.spotBox .bb { background: url(../images/spotbox_corners.png) no-repeat; }
	.spotBox .bt { background-position: 0 -8px; height: 8px; }
	.spotBox .bb { background-position: 0 -26px; height: 22px; }
	
	.spotBox .bw, 
	.spotBox .bw2 { background: url(../images/spotbox_borders.png) repeat-y; }
	.spotBox .bw { padding-left: 6px; }
	.spotBox .bw2 { background-position: 100% 0; padding-right: 4px; }
	
	.spotBox .content { background-color: #fff; min-height: 150px; }
	
	.tabBox .bt { background-position: 0 0; }
	
	.shortTop .bt { background-position: 0 -16px; height: 5px; }
	.shortBottom .bb { background-position: 0 -21px; height: 5px; }
	.nobb .bb { height: 0; }
	
	/* MODULEBOX DESIGN
	--------------------------------------------------------------------------- */
		
	/* MISC LISTS
	--------------------------------------------------------------------------- */
	/* horizontal list */
	.lsthoriz .item { float: left; }
	
	/* alternating colored list (dependent on sbclr[1-7] classes for coloring) */
	.lstaltclr .item { }
	.lstaltclr .item.alt { }
	.lstaltclr .item.first { }
	
	/* use for adding a seperator to list items (prefferably a border) */
	.lstsep .item { border: 1px solid #dadada; border-width: 0 0 1px 0; }
	.lstsep .item.alt { }
	.lstsep .item.first { }
	
	/* use for listing with images aligned left of right */
	.lstimage { float: left; }
	.lstimager { float: right; }
	
	.lstimg1 > .txtcnt { margin-left: 80px; margin-right: 0; }
	.lstimg2 > .txtcnt { margin-left: 100px; margin-right: 0; }
	.lstimg3 > .txtcnt { margin-left: 155px; margin-right: 0; }
	.lstimg4 > .txtcnt { margin-left: 300px; margin-right: 0; }
	.lstimg5 > .txtcnt { margin-left: 315px; margin-right: 0; }
	
	.lstimg1r > .txtcnt { margin-right: 80px; margin-left: 0; }
	.lstimg2r > .txtcnt { margin-right: 100px; margin-left: 0; }
	.lstimg3r > .txtcnt { margin-right: 155px; margin-left: 0; }
	.lstimg4r > .txtcnt { margin-right: 300px; margin-left: 0; }
	.lstimg5r > .txtcnt { margin-right: 275px; margin-left: 0; }
	
	/* thumb list */
	.lstthumbs .item { float: left; width: 148px; margin-right: 4px; }
	.lstthumbs .last { margin-right: 0; padding-bottom: 20px; }
	.lstthumbs .thumbframe { background: url(../images/list_thumbbg.png) no-repeat; padding:7px 0px 0px 7px; width: 148px; height: 85px; }
	.lstthumbs h3,
	.lstthumbs p { margin-left: 20px; }
	
	/* table list */
	.tableList { background: url(../images/standalonetable_header.png) no-repeat; width: 758px; border-collapse: collapse; }
	.tableList table { width: 749px; margin: 0 auto; table-layout: fixed; }
	.tableList thead th { font-size: 1.083em; font-weight: bold; padding-top: 12px; height: 32px; }
	.tableList.snuggTop thead th { height: 22px; }
	.tableList .first { padding: 0 14px; }
	.tableList td { padding: 2px 4px 2px 0;overflow:hidden; }
	.tableList .even td { background: url(../images/tblrow_bg.png); }
	
	.snuggTop { background-position: -758px 0; }
	.snuggTop thead th { line-height: 6px; }
	.snuggTop .even td { background: url(../images/tblrow_bg.png); }
	.snuggTop .odd td { background: none; }	
	
	.snuggTop tbody { padding: 0 8px; }
	
	/* meta info */
	.lstmetainfo li { float: left; }
	
	/* link list */
	.lstlinks { margin: 0; }
	.lstlinks li { background: url(../Images/linklist_icon.gif) 7px 52% no-repeat; padding-left: 17px;  }
	.lstlinks a { text-decoration: none; font-weight: normal; color: #4a93d8; }
	.lstlinks a:hover { text-decoration: underline; }
	
	/* horizontal list */
	.lsthoriz .item { float: left; width: 250px; }

/* FOOTER
--------------------------------------------------------------------------- */
#footer {
	position:absolute;
	bottom:1px;
	background: url(../images/fool_powered.png) 100% 30px no-repeat;
	margin-left: 235px; width: 418px; height: 55px; padding-right: 340px; padding-top: 8px;
	color: #000;
	font-size: 0.825em;
	font-weight: normal;
	line-height: 1.1em;
	z-index:200;
}


#prompt	{
	position:absolute;
	width:424px;
	height:240px;
	z-index:999;
	display:none;
	}
	
/* MISC OVERRIDES (last in document to override previous stated rules)
--------------------------------------------------------------------------- */
.left, .fltl { float: left; }
.right, .fltr { float: right; }

.aleft { text-align: left; }
.aright { text-align: right; }