body { margin:0; font-family: "verdana", "tahoma","arial","sans-serif"; color:#444; background:url(images/background.png) top center no-repeat #002656; font-size:12px; }

h1 { margin:0; padding:5px; color:#333; letter-spacing:1px; font-size:18px; text-align:center; font-weight:normal  }
h1.midi { color:#00c; }
h1.audio { color:#a05; }
h1.multi { color:#660; }
h1.warn { color:#FF0; background-color: #333; font-size:24px; }
h2 { margin-top:10px; text-align:center; letter-spacing:1px; color:#888; font-size:14px; font-style:normal; font-weight:700; }
h3 { font-size:14px }
a { text-decoration:none; cursor: pointer }
button { background: linear-gradient(#DE549C,#D93F90); border:none; border-radius: 4px; width:156px;
	vertical-align:middle;  padding:6px 0 8px 0; font-size:14px; cursor:pointer; color: #fff; }
form { margin: 0px 4px 0px 0px; }
input, textarea { background:#f0f0f0; margin:0; border:1px solid #f99 }
th { font-size:12px; color:#666; text-align:center}
td {  }
img { border:none }

.fl { float:left }
.fr { float:right }
.cl { clear:both; margin:0; padding:0; font-size:0px; }
.r { text-align:right }
.c { text-align:center }
.nw { white-space: nowrap }
.b1 { background-color:#ffffff; padding:1px 3px; }
.b2 { background-color:#f1f1f2; padding:1px 3px; }
.b2-midi { background-color:#eeeeff; padding:1px 3px; }
.b2-audio { background-color:#ffeeff; padding:1px 3px; }
.b2-multi { background-color:#ffffdd; padding:1px 3px; }
.b2-arranger { background-color:#ffeeff; padding:1px 3px; }

.pw { margin:auto; width:990px; }

.header { margin-top:0px; text-align:right; width:100%  }
.h2 { text-align:center; color:#F90; font-weight:bold }
.logo img { vertical-align:middle   }
.logo { font-size:10px;  padding: 3px 5px 0 0; text-align: right }
.logo a { color:#ccc   }
.user2 { display:none; color:#ccc; position:absolute; background-color:#002656; width:300px; height:40px; left:50%; padding:5px 10px;  }
#user { display:none; color:#ccc; position:absolute; background-color:#002656; width:250px; height:110px; left:50%; padding:3px 20px 10px 20px; z-index: 3;
	border-radius: 4px; box-shadow: 0 0 6px #000}
#user form { margin:2px 0; }
#user .mail { font-size:10px; border:none; padding:2px 5px 0 5px; width:141px; height:16px; margin-bottom:3px; color:#333 }
#user .pass { font-size:10px; border:none; padding:2px 5px 0 5px; width:87px; height:16px; color:#333 }
#user .button { background:transparent left; font-size:10px; border:none;  width:42px; height:18px; vertical-align:top; margin:5px 0 10px 0; padding:0 }
div.cart { float:right; padding:17px 5px 0 0; height:88px; color:#FFF; font-size:10px}
#user div a { font-size:13px; display: block; line-height: 24px }
#user a, .cart a { font-size:10px; color:#ccc }
#user a:hover, .cart a:hover { font-size:10px; color:#fff }

.search { position: relative; float:left; margin: 24px 0 0 420px; width:305px; height:30px; font-size:14px; margin-right:15px}
#txtajaxsearch { background-color:#fff; border:none; width:240px; font-size:14px; padding:0px 15px 0 5px; margin:0;   height:23px }
.search .button { background:transparent left; font-size:10px; border:none; vertical-align:top; margin:0; padding:0 }
#header .search form { position: relative; }
#ajaxsearch { position:absolute; z-index:20; top:30px; left:0px; width:330px; height:280px; display:none;  }
#ajaxresults { background-color: #fff; border-radius: 0 0 3px 3px; box-shadow: 0 0 7px #777  }
#ajaxresults a { display:block; font-size:12px; text-decoration:none; color:#000; padding: 5px 10px; }
#ajaxresults a:hover { background-color:#ccc; color:#00f; display:block; text-decoration:none;  }
.menu { float:right; width:530px; height:29px; color:#FFF; font-size:13px; font-weight:bold; text-align:right}
.menu a { display: inline-block; background: linear-gradient(#68D3FF,#06A5FF); height:29px; line-height: 29px; text-transform: uppercase; border-radius: 4px 4px 0 0; 
		  padding: 0 6px; vertical-align: top; color: #fff; text-shadow: 0 0 5px #555  }
.menu a.audio { background: linear-gradient(#DE549C,#D93F90); }
.menu a.multi { background: linear-gradient(#FFEC03,#FFC503); }
.menu a.soft { background: linear-gradient(#FFA700,#FF8500); }
.menu a:hover, .menu a.current { color: #fff; }
.menu a.audio:hover, .menu a.current-audio, .menu a.current-audio:hover {  }
.menu a.multi:hover, .menu a.current-multi, .menu a.current-multi:hover {  }
.menu a.arranger:hover, .menu a.current-arranger, .menu a.current-arranger:hover {  }
.header .footer-midi { width:100%; font-size:1px; background-color:#900; height:5px; border-bottom:1px solid #c00; margin-bottom:10px }
.header .footer-audio { width:100%; font-size:1px; background-color:#009; height:5px; border-bottom:1px solid #00c; margin-bottom:10px }
.header .footer-multi { width:100%; font-size:1px; background-color:#090; height:5px; border-bottom:1px solid #0c0; margin-bottom:10px }
.header .footer-arranger { width:100%; font-size:1px; background-color:#909; height:5px; border-bottom:1px solid #c0c; margin-bottom:10px }
.currency { clear:left; float:right;  margin-right:0px }
.currency span { font-size:11px; display:block; float:left; color:#999; text-align:center; margin-left:3px;
	height:15px; width:16px; font-weight:bold; cursor:pointer; border:1px solid transparent  }
.currency span:hover, span.on { color:#fff; text-decoration:underline  }

.currency a { display:block; float:left; color:#FFF; text-align:center; margin-right:1px; padding-top:4px; height:20px; background:url(images/currency.gif) no-repeat; width:23px; font-weight:bold; cursor:pointer;  }
.currency img { vertical-align:middle}
.currency a:hover, .currency a.on { }

#leftpanel { float:left; margin-right:7px; width: 200px }
#leftpanel .midi { background-color:#fff; border:5px solid #42C1FF; border-top-width: 0px; border-radius: 0 0 4px 4px; margin-bottom: 10px }
#leftpanel .audio { background-color:#fff; border:5px solid #DE539B; border-top-width: 0px; border-radius: 0 0 4px 4px; margin-bottom: 10px }
#leftpanel .multi { background-color:#fff; border:5px solid #FFC603; border-top-width: 0px; border-radius: 0 0 4px 4px; margin-bottom: 10px }
#leftpanel .arranger { background-color:#fff; border:5px solid #990099; border-top-width: 0px; }
#leftpanel .software { background-color:#fff; border:5px solid #FF7E00; border-top-width: 0px; }
#leftpanel .categories a { display:block; width:170px; color:#003882; padding:5px 0 5px 20px; text-align:left;  }
#leftpanel .categories a:hover { color:#00f; background-color:#f1f1f2 }
#leftpanel .artists {  padding:5px 10px; color:#999 }
#leftpanel .artists.first { margin: 0; border-bottom: none; border-radius: 0 }
#leftpanel .artists a { color:#003882; padding:0px; }
#leftpanel .artists a:hover { text-decoration:underline }
#leftpanel .bigcart {  width:100%; padding:5px 5px; box-sizing: border-box; border-top-width: 5px; border-radius: 4px;}
#leftpanel .bigcart img { width:100%;  }
#leftpanel .bigcart p { margin:0; padding:2px 0; text-align:left; font-size:11px; border-bottom: 1px solid #ddd }
#leftpanel .bigcart .price { text-align:right; padding:4px 0; border:none  }
#leftpanel .voting {   padding:5px 10px }
#leftpanel .voting a { color:#003882 }
#leftpanel .voting a:hover {  text-decoration:underline }
#leftpanel .voting ul { list-style:none; text-indent:0; margin:0; padding:0 }
#leftpanel .voting ul li { text-indent:0; margin:0; padding:0; margin-bottom:4px; color:#444; font-size:11px}
#leftpanel .title { margin:0; padding:4px 0; color:#fff; font-size:12px; font-weight:bold; text-align:center}

.top10 div { width:340px; }
.top10 p { text-align:center }
.top10 p a { padding:3px 2px; }
.top10 .on { background-color:#fcc;  }
#main { float:left; width:783px; }
#main table { text-align:left; margin:auto}
#main .archive { margin:15px auto; font-size:11px; white-space:nowrap }
#main .pages { margin:10px auto; float:left; font-size:13px; text-align:left;   }
#main .pages a, .pages a:visited { display:block; float: left; padding:1px 5px; margin-right:1px;  color: #7F3F97; }
#main .pages a.mark  { background:url(images/page-active.png) no-repeat center; font-weight:bold; padding:1px 5px; color: #fff  }
#main .pages a:hover  { background:url(images/page-active.png) no-repeat center; padding:1px 5px; color: #fff }

#main .icon { background-repeat: no-repeat; width:11px; height:11px; margin-right:5px; border:0px; }
#main .content { width:733px; background-color:#fff; border:5px solid #FF3300; border-radius: 4px 0 4px 4px;  margin:0; padding:10px 20px }
#main div.midi  { border:5px solid #0EA9FF; }
#main div.audio { border:5px solid #DE539B; }
#main div.multi { border:5px solid #FFC603; }
#main div.arranger { border-left:5px solid #880088; border-right:5px solid #880088; }
#main div.soft { background-color:#fff; border:5px solid #FF7E00; }
#main .contentsong { width:100%; margin:0px auto 20px auto; clear:both; border-spacing: 0 }
#main .contentsong td { height:31px; }
#main .contentsong .b1 { border-top:0px solid #FFdddd; background-color:#FFF }
#main .contentsong .b2 { border-top:0px solid #f1f1f2;  }
#main .title { font-weight:bold }
#main .info { position: relative; margin:auto;  margin-bottom:20px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;  }
#main .playdemo, .playvideo { width: 24px; height: 24px; background: url(images/play.png) no-repeat; vertical-align: top; }
#main .playdemo.play {  }
#main .playvideo { background-image: url('images/thum_demo_play_icon.png') }
#main .playdemo.stop { background: url(images/stop.png) no-repeat; width: 24px; height: 24px; }
#main .share { margin-bottom: 10px;  }
#main .facebook { display: inline-block; width:106px;  vertical-align: top; }
#main .twitter {  display: inline-block; width:55px; vertical-align: top;}
#main .googleplus { display: inline-block; width:60px; vertical-align: top;}

/* Rating */
#like-stats { position: absolute; top: 0px; background-color: #fff; padding: 6px; border-radius: 4px; box-shadow: 0 1px 7px #777; }
.rates {  margin: 0; }
.rate { display: inline-block; background: url(images/star-off.gif); width: 24px; height: 22px; margin-right: 1px; vertical-align: bottom; cursor: pointer }
.rate.on { background: url(images/star.gif); }

#main .rate img { vertical-align:middle }
#main .rate a { margin:0 }
#main h2.comments { margin-top:0px; font-size:12px}
#main h2.comments img { vertical-align:middle}
#main div.comments { height:100px; overflow-y:scroll; margin:auto;  }
#main div.sm { height:auto;  }
#main div.comments table { background-color:#fff; width:500px }
#main div.comments table td { background-color:#fff; border-bottom:1px solid #ddd }
#main div.comments table td.commleft { width:140px; vertical-align:top; font-weight:bold; font-size:10px; color:#666 }
#main div.comments textarea { font-size:12px }

#main .bookmark { padding:5px;  }
#main .bookmark a { margin:0 2px;  }
#main .bookmark img { vertical-align:bottom; }

#main .cont { clear:both;  width:698px;  }
#main .cont p { text-align:left; padding:0 10px }
#main .info .l { float:left; padding-right:5px; }
#main span.price { color:#a00; font-size:16px; border:0px solid #ff9999; padding:2px 0px}


#main .cart { width:100%; margin:auto }
#main .cart th { background-color:#DE539B; color:#fff;  }
#main .cart .b2  { border-bottom:1px solid #fcc; background-color:#Fff }
#main .download { font-size:12px; padding-left:100px; text-align:left;  }
#main .download img { vertical-align:middle; margin-left: 20px; }
#main .download a { font-size:12px;  }
#main .download a:hover { color:#000  }
#main .payment { width:330px; float:left }
#main .payment .t,#main .payment .b { width:310px; }
#main .payment .cont { width:328px; height:110px }
#main .backbuy { display:none }
#main .displayimg { float:left; margin-right:10px; border:1px solid #ccf; padding:1px }
#main div.software { width:733px; }
#main .software .cont { padding:10px; width:678px; }

#main .software h2 { text-align:left; font-size:18px }

#main .voting td { border-top:1px solid #ccc; padding:2px  }


.smallcontent { background:#ffffff; text-align:center;}

.footer { padding:10px 0; color:#ccc; font-size:11px; margin:10px auto; background-color: #001C3A; border-radius: 4px; text-align: center; }
.footer a { color:#ccc; }


.mobile { display: none; }

/* Mobile + Tablet */
@media only screen and (max-width: 992px) {
	.mobile { display: inherit }
	.nomobile { display: none }
	.pw { width: 100% }
	body { background-position: -305px -4px }
	div.cart { display: none }
	#header .logo { text-align: center; width:auto; float: none }
	
	#header .search { clear:both; float: none; width: auto; margin: 80px 10px 5px 10px; text-align: center }
	#ajaxresults { text-align: left }
	#header .search form { display: inline-block }
	
	#header #topcart { display: none }
	#header > .user { display: none }
	#header .mobile-menu { background-color: #21A2FF; height: 40px; margin-bottom: 10px  }
	#header .mobile-menu a { display: inline-block;  width: 24%; text-align: center; padding: 5px 0 }
	#header .mobile-menu .spr { background-image: url(images/mob.png); width: 28px; height: 28px; background-size: auto; display: inline-block }
	#header .mobile-menu .email .spr { background-position: -6px -3px; }
	#header .mobile-menu .user .spr { background-position: -40px -3px; }
	#header .mobile-menu .cart .spr { background-position: -6px -33px; }
	#header .mobile-menu #mobi-menu .spr { background-position: -40px -33px; }
	nav.nomobile { display: block; }
	#header nav.nomobile a { width: auto; padding: 4px 11px }
	#header nav.nomobile a:first-child, #header nav.nomobile a:last-child { display: none; }
	
	.cats.mobile { display: none }
	#leftpanel { margin-left: 10px; width: 165px; }
	#leftpanel .mobile { display: none }
	#leftpanel div[style] { width: 165px !important; border-radius: 0 4px 0 0 }
	
	#main, #main .content  { width: 527px; margin:0; }
	#main .about { height:auto; width:233px; }
	#main .software { width: 100%; }
	#main div.software, #main .software .cont { width: 100%; box-sizing: border-box }
	#main .displayimg { max-width: 100%; }
	#main .multi .fl:sev
	#colorbox { max-width: 100%; }
	#login, #register { float:none; border:none; width: 100%; padding: 0; margin: 20px 0 }
	#login input, #register input { width: 100% !important; box-sizing: border-box; }
	.bookmark { display: none }
}

@media only screen and (max-width: 767px) {
	.bigcart { display: none }
/*	#header nav.nomobile { display: none; }*/
	#header nav.nomobile a { /*width: auto; float: none;*/ background: linear-gradient(#1c1c1c,#323232 50%, #222222 50%, #000); }
	#header .profile-menu { padding: 0; }
	#header .profile-menu a { width: auto; float: none; background: linear-gradient(#1c1c1c,#323232 50%, #222222 50%, #000); }
	#header nav.nomobile .email { display: none }
	
	#header .cats { display: block; background-color: #68D3FF; background: linear-gradient(#68D3FF,#06A5FF); border-radius: 4px; color: #fff; padding: 5px 10px 3px; font-size: 14px; margin:10px; width: 120px;
		text-transform:  uppercase; font-weight: bold; text-shadow: 0 0 5px #555; }
	#header .cats .spr { background-position: -164px -58px; width: 30px; height: 20px; vertical-align: -4px }
	 
	#main { width: auto; margin: 0 10px; }
	#main .content { width: auto; }
	#leftpanel { display: none; position: fixed; width: 220px; height: 100%; overflow-y:scroll; background-color: #001997; padding: 10px; margin: 0;  top:0; right:0px;
				 box-sizing: border-box; z-index: 3 }
	#leftpanel .mobile { display: block; font-family: verdana; float: right; font-size:24px; margin-top: -10px; color: #fff; }
	#leftpanel div[style] { width: 200px !important; border-radius: 0 4px 0 0 }
}


@media only screen and (max-width: 407px) {
	#header nav.nomobile a:nth-child(5),#header nav.nomobile a:nth-child(7) { display: none }
	#main .displayimg { padding: 0; border: none; margin: 0 0 10px }
	object, embed { max-width:  100%; margin: auto}
}

/* Mobile only */
@media only screen and (max-width: 639px) {
	#header .topmenu { display: none }
	#header1 .logo img { max-width: 351px; min-width: 250px; width: 30%; margin: 10px 0 }
	#txtajaxsearch { width: 241px; }	
	#header .menu a { width: 11%;  }
	#header .profile-menu a { width: auto; }
	.menu { width: auto; height: auto;  }
	.menu a { font-size: 12px; padding: 0 4px }	
	
	#main, #main .content { margin: 0 ;}
	#main .demo-save { display: none } 
	#main .top { float: none; width: 100% } 
	#main .payments td { display: block;  width: 100%; border-left: none; border-bottom : 1px solid #ccc } 
	#main table.cart tr th:nth-child(1), #main table.cart tr th:nth-child(3) { display: none } 
	#main table.cart tr:not(.total) td:nth-child(1):not(.r),#main table.cart tr td:nth-child(3) { display: none } 
	#main table.cart form { display: none } 
	#main article > div.fl { float:none; width: 100% !important }
	#main article > div.fr { float:none; margin: 20px auto }
	#main .content { padding: 5px }
	
	#main .content.multi > div { float:none; height: auto !important; margin: 10px 0 !important; width: 100% !important }
	#main .contentsong .vocals div { display: block }
	#main .download { padding: 0 }
	#main .payment  { width: 100% }
	#main .payment .cont { width: 100% }
	table.register td { display: block; text-align: left }
	#user { left: 5%;}
	.top10 div { width: 100% }
	
	#footer, #footer .fl, #footer .fr { float: none; display: block; text-align: center }
}