@charset "UTF-8";
/* CSS Document */

body{
	background:#9bd76c;
	font-family:'dinpro',Arial, Helvetica, sans-serif;
}

@font-face {
	font-family: 'dinpro';
	src: url('fonts/DINNextLTPro-Regular.eot');
	src: local('☺'), url('fonts/DINNextLTPro-Regular.woff') format('woff'), url('fonts/DINNextLTPro-Regular.ttf') format('truetype'), url('fonts/DINNextLTPro-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

a {
	color: #fff;
	text-decoration: none;

}

a:hover {
	color: #22BAEA;
	text-decoration: underline;
	
}

a:active { outline: none; }

.wrap{
	width:960px;
	height:auto;
	margin:auto;
	margin-top:0px;
}

.content{
	width:960px;
	height:auto;
	float:left;
	background:#7ac142;
	margin-top:-10px;
}

.header{
	width:960px;
	height:300px;
	float: left;
	position: relative;
	background:url(images/header.jpg);
}

.melodia{
	width:100px;
	height:71px;
	float:left;
	margin-left:200px;
	margin-top:50px;
}

.musiktek{
	width:167px;
	height:51px;
	float:right;
	margin-right:150px;
	margin-top:60px;
}

.klik-home{
	width: 740px;
	height: 106px;
	position: absolute;
	left: 167px;
	top: 129px;
}

.user{
	width:auto;
	height:20px;
	padding:10px;
	padding-top:12px;
	position:absolute;
	left:0;
	bottom:0;
	font-weight:bold;
	text-align:left;
	background:#707073;
	color:#fff;
}

.bg-plan{
	width:960px;
	height:310px;
	float:left;
	background:url(images/menu.jpg);
	
}

.wrap_menu{
	width:600px;
	height:76px;
	float:right;
}

#menu ul{
	margin-top:0px;
	margin-bottom:0px;
	padding:0px;
}

#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 400px;
	height: 76px;
	margin-top:-7px;
	float:right;
}

#menu a {
	display: block;
	text-indent: -900%;
	float:left;
	outline: none;
}
#menu a:hover {
	background-position: left bottom;
}

#menu .submit {
	width: 97px;
	height: 76px;
	background: url(images/bt-submit.png) no-repeat;
	float:left;
	margin-top:2px;
	margin-left:30px;

}

#menu .gallery {
	width: 97px;
	height: 76px;
	background: url(images/bt-gallery.png) no-repeat;
	float:left;
	margin-top:2px;
	margin-left:30px;

}

#menu .info {
	width: 97px;
	height: 76px;
	background: url(images/bt-info.png) no-repeat;
	float:left;
	margin-top:2px;
	margin-left:30px;

}

.box_login{
	width:960px;
	height:470px;
	float:left;
	position:relative;
	text-align:center;
	color:#555555;
	padding-top:10px;
	text-decoration:underline;
	padding-bottom:10px;
	background:#7ac142 url(images/login.jpg) no-repeat top center;
}

.box_gallery{
	width:960px;
	height:auto;
	float:left;
	text-align:center;
	color:#555555;
	padding-top:10px;
	padding-bottom:10px;
	background:#7ac142;
}


#textfield {
background-color: #cae9b2;
color: black;
font-family: dinpro;
font-size: 12pt;
border:0px;
border-radius:10px;
padding:5px;
text-align:center;
}

.link{
	width:330px;
}

.title{
	width:150px;
	margin-left:10px;
}

#submitbutton{
	cursor: pointer;
	background:url(images/submit-form.png);
	width: 100px;
	height: 26px;
	border: none;
	text-indent: -9999px;
	text-align:center;
	margin-left:5px;
}

#submitbutton:hover{
	cursor: pointer;
	background:url(images/submit-form-hover.png);

}

#regbutton{
	cursor: pointer;
	background:url(images/register-form.png);
	width: 100px;
	height: 26px;
	border: none;
	text-indent: -9999px;
	text-align:center;
	margin-left:5px;
}

#regbutton:hover{
	cursor: pointer;
	background:url(images/register-form-hover.png);

}

#file_browse_wrapper {
    width: 400px;
    height: 30px;
    background: url(images/browse.png) 0 0 no-repeat;
    border:none;
    overflow:hidden;
}
#file_browse_wrapper:hover {
    background: url(images/browse-hover.png) 0 0 no-repeat;
}

#file_browse_wrapper2 {
    width: 400px;
    height: 30px;
    background: url(images/browse2.png) 0 0 no-repeat;
    border:none;
    overflow:hidden;
}
#file_browse_wrapper2:hover {
    background: url(images/browse2-hover.png) 0 0 no-repeat;
}
#file_browse_wrapper3 {
    width: 400px;
    height: 30px;
    background: url(images/browse.png) 0 0 no-repeat;
    border:none;
    overflow:hidden;
}
#file_browse_wrapper3:hover {
    background: url(images/browse3-hover.png) 0 0 no-repeat;
}
#file_browse_wrapper4 {
    width: 400px;
    height: 30px;
    background: url(images/browse4.png) 0 0 no-repeat;
    border:none;
    overflow:hidden;
}
#file_browse_wrapper4:hover {
    background: url(images/browse4-hover.png) 0 0 no-repeat;
}
#file_browse_wrapper5{
    width: 400px;
    height: 30px;
    background: url(images/browse5.png) 0 0 no-repeat;
    border:none;
    overflow:hidden;
}
#file_browse_wrapper5:hover {
    background: url(images/browse5-hover.png) 0 0 no-repeat;
}

#file_browse{
	width:400px;
    opacity:0.0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

#file_plan_wrapper {
    width: 160px;
    height: 30px;
    background: url(images/s-plan.png) 0 0 no-repeat;
    border:none;
    overflow:hidden;
}
#file_plan_wrapper:hover {
    background: url(images/s-plan-hover.png) 0 0 no-repeat;
}


#file_plan{
	width:160px;
    opacity:0.0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

.box_band{
	width:425px;
	height: 380px;
	float:left;
	margin-bottom:20px;
	background:#59595c;
	padding:5px;
	margin-left:20px;
	margin-bottom:10px;

}

.foto_band{
	width:250px;
	height:270px;
	float:left;
	text-align:center;

}

.foto_band img{
	width:250px;
	height:250px;
	margin-bottom:5px;
	overflow:hidden;
}

.wrap_tittlesong{
	width:175px;
	height:auto;
	float:left;
}

.tittle_song{
	width:140px;
	height:auto;
	float:left;
	padding:5px;
	background:#333332;
	color:#fff;
	margin-left:5px;
	
	font-weight:bold;
}

.action{
	width:auto;
	height:auto;
	float:left;
	margin:3px 0px 10px 50px;
	
	text-align:center;
}

.action .hide {
background: url(../images/fourshared2.png) 0 0 no-repeat;
padding: 13px 5px 5px;
overflow: hidden!important;
display: none;
position: absolute;
top: 20px;
left: -25px;
}

.action > a.playing, .action > a:hover {
background-color: #ebb24b;
color: #fff;
}

.action .play {
background: #22BAEA;
color: white;
}

.action > a {
font-size: 0.7em;
display: block;
margin: 0 3px 0 0;
float: left;
width: 55px;
height: 15px;
line-height: 15px;
text-align: center;
text-transform: lowercase;

}

.paging{
	width:920px;
	height:auto;
	padding:10px;
	float:left;
	margin-top:15px;
	margin-left:10px;
	text-align:center;
	background:#59595c;
	color:#fff;
}

.icon_like{
	width: 20px;
	height: 25px;
	float: left;
	clear: both;
	padding: 0px 10px;
}

.foot{
	width:960px;
	height:90px;
	float:left;
}

.foot1{
	width:960px;
	height:50px;
	background:#dad4cd;
	float:left;
	margin-top:-3px;
	padding-top:10px;
}

.foot2{
	width:960px;
	height:39px;
	float:left;
	text-align:center;
	padding:10px 0px 10px 0px; 
	font-size:13px;
	background:#7ac142;
	color:#fff;
}

.foot3{
	width:960px;
	height:120px;
	float:left;
	background:#7ac142;
	text-align:center;
	padding:10px 0px 10px 0px; 
	font-size:13px;
	color:#fff;
}

.login{
	width: 300px;
	float: left;
	position: absolute;
	left: 33%;
	bottom: 20px;
	background: #59595c;
	padding: 10px;
	padding-top: 15px;
	color: #fff;
}

.upload{
	width:500px;
	height:195px;
	position:absolute;
	left:22%;
	top:10%;
	padding:10px;
	padding-top:15px;
	color:#fff;
}

.infohaiday{
	width:650px;
	height:auto;
	float:left;
	background:#aeaba4;
	border:10px solid #fff;
	margin-left:140px;
	margin-top:20px;
	padding:10px;
	text-align:left;
	color:#000;
}

.infohaiday p{
	background:url(images/arrow.jpg) no-repeat 2px -2px;
	padding-left:30px;
	padding-bottom:5px;
	border-bottom:1px solid #fff;
}

@media screen {
	/*
	* FancyBox - jQuery Plugin
	* Simple and fancy lightbox alternative
	*
	* Examples and documentation at:http://fancybox.net
	* 
	* Copyright (c) 2008 - 2010 Janis Skarnelis
	* That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
	* 
	* Version:1.3.4 (11/11/2010)
	* Requires:jQuery v1.3+
	*
	* Dual licensed under the MIT and GPL licenses:
	*   http://www.opensource.org/licenses/mit-license.php
	*   http://www.gnu.org/licenses/gpl.html
	*/

	#fancybox-loading { position:fixed; top:50%; left:50%; width:40px; height:40px; margin-top:-20px; margin-left:-20px; cursor:pointer; overflow:hidden; z-index:1104; display:none }
	#fancybox-loading div { position:absolute; top:0; left:0; width:40px; height:480px; background-image:url('../../themes/demos/images/fancybox/fancybox.png') }
	#fancybox-overlay { position:absolute; top:0; left:0; width:100%; z-index:1100; display:none }
	#fancybox-tmp { padding:0; margin:0; border:0; overflow:auto; display:none }
	#fancybox-wrap { position:absolute; top:0; left:0; padding:20px; z-index:1101; outline:none; display:none }
	#fancybox-outer { position:relative; width:100%; height:100%; background:#fff }
	#fancybox-inner { width:0; height:0; padding:0; outline:none; position:relative; overflow:hidden; z-index:1102; border:0px solid #fff }
	#fancybox-hide-sel-frame { position:absolute; top:0; left:0; width:100%; height:100%; background:transparent; z-index:1101 }
	#fancybox-close { position:absolute; top:-15px; right:-15px; width:30px; height:30px; background:transparent url('../../themes/demos/images/fancybox/fancybox.png') -40px 0px; cursor:pointer; z-index:1103; display:none }
	#fancybox-error { color:#444; font:normal 12px/20px Arial; padding:14px; margin:0 }
	#fancybox-img { width:100%; height:100%; padding:0; margin:0; border:none; outline:none; line-height:0; vertical-align:top }
	#fancybox-frame { width:100%; height:100%; border:none; display:block }
	#fancybox-left, #fancybox-right { position:absolute; bottom:0px; height:100%; width:35%; cursor:pointer; outline:none; background:transparent url('../../themes/demos/images/fancybox/blank.gif'); z-index:1102; display:none }
	#fancybox-left { left:0px }
	#fancybox-right { right:0px }
	#fancybox-left-ico, #fancybox-right-ico { position:absolute; top:50%; left:-9999px; width:30px; height:30px; margin-top:-15px; cursor:pointer; z-index:1102; display:block }
	#fancybox-left-ico { background-image:url('../../themes/demos/images/fancybox/fancybox.png'); background-position:-40px -30px }
	#fancybox-right-ico { background-image:url('../../themes/demos/images/fancybox/fancybox.png'); background-position:-40px -60px }
	#fancybox-left:hover, #fancybox-right:hover { visibility:visible; /* IE6 */ }
	#fancybox-left:hover span { left:20px }
	#fancybox-right:hover span { left:auto; right:20px }

	.fancybox-bg { position:absolute; padding:0; margin:0; border:0; width:20px; height:20px; z-index:1001 }
	#fancybox-bg-n { top:-20px; left:0; width:100%; background-image:url('../../themes/demos/images/fancybox/fancybox-x.png') }
	#fancybox-bg-ne { top:-20px; right:-20px; background-image:url('../../themes/demos/images/fancybox/fancybox.png'); background-position:-40px -162px }
	#fancybox-bg-e { top:0; right:-20px; height:100%; background-image:url('../../themes/demos/images/fancybox/fancybox-y.png'); background-position:-20px 0px }
	#fancybox-bg-se { bottom:-20px; right:-20px; background-image:url('../../themes/demos/images/fancybox/fancybox.png'); background-position:-40px -182px }
	#fancybox-bg-s { bottom:-20px; left:0; width:100%; background-image:url('../../themes/demos/images/fancybox/fancybox-x.png'); background-position:0px -20px }
	#fancybox-bg-sw { bottom:-20px; left:-20px; background-image:url('../../themes/demos/images/fancybox/fancybox.png'); background-position:-40px -142px }
	#fancybox-bg-w { top:0; left:-20px; height:100%; background-image:url('../../themes/demos/images/fancybox/fancybox-y.png') }
	#fancybox-bg-nw { top:-20px; left:-20px; background-image:url('../../themes/demos/images/fancybox/fancybox.png'); background-position:-40px -122px }
	#fancybox-title { font-family:Helvetica; font-size:12px; z-index:1102 }

	.fancybox-title-inside { padding-bottom:10px; text-align:center; color:#333; background:#fff; position:relative }

	.fancybox-title-outside { padding-top:10px; color:#fff }

	.fancybox-title-over { position:absolute; bottom:0; left:0; color:#FFF; text-align:left }
	#fancybox-title-over { padding:10px; background-image:url('../../themes/demos/images/fancybox/fancy_title_over.png'); display:block }

	.fancybox-title-float { position:absolute; left:0; bottom:-20px; height:32px }
	#fancybox-title-float-wrap { border:none; border-collapse:collapse; width:auto }
	#fancybox-title-float-wrap td { border:none; white-space:nowrap }
	#fancybox-title-float-left { padding:0 0 0 15px; background:url('../../themes/demos/images/fancybox/fancybox.png') -40px -90px no-repeat }
	#fancybox-title-float-main { color:#FFF; line-height:29px; font-weight:bold; padding:0 0 3px 0; background:url('../../themes/demos/images/fancybox/fancybox-x.png') 0px -40px }
	#fancybox-title-float-right { padding:0 0 0 15px; background:url('../../themes/demos/images/fancybox/fancybox.png') -55px -90px no-repeat }

	/* IE6 */

	.fancybox-ie6 #fancybox-close { background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_close.png', sizingMethod='scale') }

	.fancybox-ie6 #fancybox-left-ico { background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/mages/fancybox/fancy_nav_left.png', sizingMethod='scale') }
	.fancybox-ie6 #fancybox-right-ico { background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_nav_right.png', sizingMethod='scale') }

	.fancybox-ie6 #fancybox-title-over { background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_title_over.png', sizingMethod='scale'); zoom:1 }
	.fancybox-ie6 #fancybox-title-float-left { background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_title_left.png', sizingMethod='scale') }
	.fancybox-ie6 #fancybox-title-float-main { background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_title_main.png', sizingMethod='scale') }
	.fancybox-ie6 #fancybox-title-float-right { background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_title_right.png', sizingMethod='scale') }

	.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame { height:expression(this.parentNode.clientHeight + "px") }
	#fancybox-loading.fancybox-ie6 { position:absolute; margin-top:0; top:expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 :document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop :document.body.scrollTop )) + 'px') }
	#fancybox-loading.fancybox-ie6 div	{ background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_loading.png', sizingMethod='scale') }

	/* IE6, IE7, IE8 */

	.fancybox-ie .fancybox-bg { background:transparent !important }

	.fancybox-ie #fancybox-bg-n { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_shadow_n.png', sizingMethod='scale') }
	.fancybox-ie #fancybox-bg-ne { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_shadow_ne.png', sizingMethod='scale') }
	.fancybox-ie #fancybox-bg-e { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_shadow_e.png', sizingMethod='scale') }
	.fancybox-ie #fancybox-bg-se { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_shadow_se.png', sizingMethod='scale') }
	.fancybox-ie #fancybox-bg-s { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_shadow_s.png', sizingMethod='scale') }
	.fancybox-ie #fancybox-bg-sw { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_shadow_sw.png', sizingMethod='scale') }
	.fancybox-ie #fancybox-bg-w { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_shadow_w.png', sizingMethod='scale') }
	.fancybox-ie #fancybox-bg-nw { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/demos/images/fancybox/fancy_shadow_nw.png', sizingMethod='scale') }
}

.tablelist th, .tablelist td {
padding: 10px 15px;
margin: 1px;
vertical-align: top;
}

.userpage .tablelist {
margin: 5px 0 10px;
}

.tablelist tr:first-child, .tablelist tr.first {
background: #594B3F;
}

.tablelist tr th, .tablelist tr th a, .tablelist tr:first-child td, .tablelist tr:first-child td a, .tablelist tr.first td, .tablelist tr.first td a {
font: 1.6em 'font2', sans-serif!important;
color: #fff;
background-color: #594B3F;
text-align: left;
}

.tablelist tr.odd {
background: #eee;
}

#progress {
background: url(../../themes/demos/images/ajax-loader.gif) center bottom no-repeat;
padding: 10px 0 20px;
text-align: center;
overflow: hidden;
}

.userpage {
width: 600px;
display: table;
}

#progress h1 {
font: 1.2em font2, sans-serif;
}

.hide {
display: none;
}

.userpage > div.buttonblock {
width: 600px;
}

.tablelist {
margin: 20px 0;
width: 100%;
}

.userpage .tablelist {
margin: 5px 0 10px;
}

.tablelist td input[type="text"] {
width: 90%;
background-color: #fff;
}

.tablelist td.auto {
width: auto;
}

.tablelist th, .tablelist td {
padding: 10px 15px;
margin: 1px;
vertical-align: top;
}

.lagu {
	text-align: left;	
}

/* Fourshared tricks */

.fourshared { display:block!important; position:relative; min-height:22px }
.fourshared > div { float:left; display:block }
#co-creation .fourshared .hide,
#b_cocreation .fourshared .hide,
#b_mostplayed .fourshared .hide { background:url(../images/fourshared.png) 0 0 no-repeat; padding:13px 5px 5px; overflow:hidden!important; display:none; position:absolute; top:20px; left:-75px }
.fourshared .hide { background:url(../images/fourshared2.png) 0 0 no-repeat; padding:13px 5px 5px; overflow:hidden!important; display:none; position:absolute; top:20px; left:-25px }
.action { font-size:1em; padding:3px 0; display:table }
.action > a { font-size:0.9em; display:block; margin:0 3px 0 0; float:left; width:55px; height:15px; line-height:15px; text-align:center; text-transform:lowercase; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px }
.action > a.playing,
.action > a:hover { background-color:#F9B240; color:#594B3F }
.action .play { background:#594B3F; color:#fff }
.action .stratus { background:#594B3F; color:#fff }
.action .speakkker { background:#594B3F; color:#fff }
.action .speakkker2 { background:#594B3F; color:#fff }
.action .more { background:#594B3F; color:#fff; width:100px; text-indent:0!important }
.action .download { background:#3BBBC8; color:#fff; padding:0 3px }
.action .download2 { background:#3BBBC8; color:#fff; padding:0 3px }
.action .delete { background:#F9B240; color:#fff; width:20px }
.action .delete:hover { background:#594B3F; color:#fff }
.action .follow,
.action .unfollow,
.action .love { background:#3BBBC8; color:#fff }
.action .loved { background:#F9B240; color:#000 }
.action .delt { background:#3BBBC8; color:#fff }
.action .follow { width:60px }
.action .unfollow { width:100px }

.paging{
	width:920px;
	height:auto;
	padding:10px;
	float:left;
	margin-top:15px;
	margin-left:10px;
	text-align:center;
}

/* PAGINATION */
ul.list_flat {
	list-style: none;
	float: right;
}

.list_flat li {
	float: left;
	margin: 0 5px;
}

.list_flat li a {
	display: block;
	padding: 0px;
	color: #000000;
}

.list_flat li.now a {
	color: #ffffff;
	font-size: 22px;
	font-weight: bold;
	margin-top: -5px;
}

#file_lagu_wrapper {
    width: 160px;
    height: 30px;
    background: url(images/lagu.png) 0 0 no-repeat;
    border:none;
    overflow:hidden;
}
#file_lagu_wrapper:hover {
    background: url(images/lagu-hover.png) 0 0 no-repeat;
}


#file_lagu{
	width:160px;
    opacity:0.0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}