/**

 * Theme name: MP3SEvolution

 * Version: 0.0.1

 * Author: Dicky Syaputra

 * Author URI: http://facebook.com/dickysyaputra30

 * Description: Default theme for MP3SEvolution script

 */



 /**

 * CSS Reset & Clearfix

 */



* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,

acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,

strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,

caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; -webkit-appearance: none; -moz-appearance: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

audio, canvas, video { display: inline-block; max-width: 100%; }

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

:focus { outline: 0; }

ins { text-decoration: none; }

del { text-decoration: line-through; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }

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

.clearfix { display: inline-block; }

.clearfix { display: block; }

.none { display: none; }



/**

 * Global Elements

 */



body { line-height: 27px; overflow-y: scroll; background: #f9f9f9; color: #464d55; }



body, input, textarea, select { font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; }



input, textarea, select { color: #464d55; }



input[type=text], textarea, select { padding: 10.5px 14px; border: 1px solid #e5e5e5; -webkit-border-radius: 3px; border-radius: 3px; }

input[type=text]:focus, textarea:focus, select:focus { border-color: #d5d5d5; }



input[type=submit] { cursor: pointer; padding: 0 12px; height: 40px; background: #ec5532; color: #fff; border: none; -webkit-border-radius: 3px; border-radius: 3px; }

input[type=submit]:hover { background: #dc4c2a; }



a { text-decoration: none; }



img { max-width: 100%; height: auto; }



code, kbd, tt, var, samp, pre { font-family: monospace; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; }



pre { max-width: 100%; overflow: auto; padding: 10px 15px; margin: 22px 0; line-height: 24px; font-size: 14px; overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; border-radius: 4px; }

pre:last-child { margin-bottom: 0; }



abbr[title] { border-bottom: 1px dotted #e5e5e5; cursor: help; }



blockquote { margin-bottom: 14px; padding-left: 15px; line-height: 29px; font-size: 20px; font-style: italic; border-left: 2px solid #ec5532; }

blockquote:last-child { margin-bottom: 0; }



address { font-style: italic; }



mark, ins { background-color: #fff9c0; text-decoration: none; }



sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; }



sup { bottom: 1ex; }



sub { top: .5ex; }



small { font-size: 75%; }



big { font-size: 125%; }



img { max-width: 100%; height: auto; }



table, th, tr, td { border: 1px solid #e5e5e5; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

caption, th, td { font-weight: normal; text-align: left; }

th { border-width: 0 1px 1px 0; font-weight: bold; }

td { border-width: 0 1px 1px 0; }

th, td { padding: 5px 10px; }



.lazy-image { display: block; width: 100%; background: url("assets/images/preloader.gif") center center no-repeat; }

.lazy-image.loaded { background: none; }



/**

 * Layouts

 */



.container { width: 900px; margin: 0 auto; }



#primary { float: left; width: 100%; margin-right: -300px; }

#primary #content { margin-right: 330px; }



#secondary { float: right; width: 300px; }



.banner-ads { margin-bottom: 30px; line-height: 0; text-align: center; overflow: hidden; }



.player .player-output { overflow: hidden; }



/**

 * Header

 */



#header { padding: 80px 30px; margin-bottom: 30px; text-align: center; background-color: #353b42; background-image: url('assets/images/patterntop.png'); background-position: top center; background-attachment: fixed; }



#header .site-name { margin: -9px 0 -6px 0; }

#header .site-name a { display: inline-block; line-height: 51px; letter-spacing: -2px; font-weight: bold; font-size: 50px; color: #fff; }

#header .site-description { margin: 7px 30px -7px 30px; line-height: 29px; font-size: 20px; color: #fff; }



#header .search-form { position: relative; width: 700px; margin: 60px auto 0 auto; }

#header .search-form input[type=text] { width: 100%; height: 60px; padding: 0 60px 0 30px; font-size: 20px; border: none; -webkit-border-radius: 3px; border-radius: 3px; }

#header .search-form input[type=submit] { cursor: pointer; position: absolute; top: 0; right: 0; width: 60px; height: 60px; text-indent: -99999em; background: url("assets/images/sprite.png") no-repeat; border: none; }

#header .search-form input[type=submit]:active { background-position: 0 -60px; }



#header .recent-search { margin: 23px auto -7px auto; width: 700px; padding: 0 30px; word-wrap: break-word; text-align: center; }

#header .recent-search a { margin-right: 15px; color: #c3c7cd; }

#header .recent-search a:hover { text-decoration: underline; color: #fff; }



#header2 { padding: 30px 0; margin-bottom: 30px; background: #2c3e50; border-bottom: 1px solid #e5e5e5; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }



#header2 .site-info { float: left; }

#header2 .site-info a { display: inline-block; margin: -9px 0 -6px 0; line-height: 35px; font-size: 28px; font-weight: bold; color: #ccc; }

#header2 .site-info span { display: block; margin: 0 0 -7px 0; color: #9aa0a7; }



#header2 .search-form { float: right; position: relative; top: 3.5px; width: 400px; height: 40px; }

#header2 .search-form input[type=text] { width: 100%; padding: 8px 40px 8px 13px; border: 1px solid #e5e5e5; -webkit-border-radius: 3px; border-radius: 3px; }

#header2 .search-form input[type=text]:focus { border-color: #d5d5d5; }

#header2 .search-form input[type=submit] { cursor: pointer; position: absolute; top: 0; right: 0; width: 40px; height: 40px; text-indent: -999999em; background: url("assets/images/sprite.png") 0 -120px no-repeat; border: none; }

#header2 .search-form input[type=submit]:active { background-position: 0 -160px; }



#header2.full .search-form { float: left; width: 100%; margin: 30px 0 3px 0; top: 0; }



/**

 * Category section

 */



.section-main { padding: 30px 0; }



.section-title { margin: -7px 0 23px 0; line-height: 35px; letter-spacing: -0.5px; font-size: 28px; }

.section-title.center { text-align: center; }

.section-title.bold { font-weight: bold; }



.section-nav { margin: -12px 0 22px 0; }

.section-nav.center { text-align: center; }

.section-nav li { display: inline-block; margin: 5px 15px 0 0; }

.section-nav li a { display: block; position: relative; color: #464d55; }

.section-nav li a:hover,

.section-nav .current > a { color: #ec5532; }



.section-items { margin: -30px -30px 0 0; }

.section-items .item { float: left; width: 33.3333333333333333333%; padding: 30px 30px 0 0; }

.section-items .item-main { background: #fff; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-shadow: 0 2px 5px rgba(0,0,0,0.1); -webkit-border-radius: 3px; border-radius: 3px; }

.section-items .item .image { line-height: 0; }

.section-items .item .image .lazy-image { height: 280px; }

.section-items .item .image .lazy-image img { -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; }

.section-items .item .detail a { display: block; padding: 30px; text-align: center; }

.section-items .item .detail span { display: block; word-wrap: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.section-items .item .title { margin: -7px 0 -8px 0; font-weight: bold; color: #464d55; }

.section-items .item .artist { margin: 7px 0 -7px 0; color: #9aa0a7; }

.section-items .item .detail a:hover > .title { color: #ec5532; }

.section-items .clear { display: none; }

.section-items .clear:nth-child(6n+6) { display: block; }



/**

 * Contents

 */



.breadcrumb { margin: -6px 0 10px 0; line-height: 25px; font-size: 14px; color: #888; }

.breadcrumb a { color: #888; }



.page-title { margin: -9px 0 24px 0; letter-spacing: -0.5px; line-height: 31px; font-size: 22px; font-weight: bold; }



.page-nav { margin: -8px 0 40px 0; }

.page-nav a { display: inline-block; position: relative; margin-right: 15px; font-weight: bold; color: #464d55; }

.page-nav a:last-child { margin-right: 0; }

.page-nav a:hover,

.page-nav .active { color: #ec5532; }

.page-nav .active:before { position: absolute; content: ''; bottom: -10px; left: 0; width: 100%; height: 2px; background: #ec5532; }



.page-description { margin: -8px 0 23px 0; }



.item-tab { display: none; }

.item-tab:first-child { display: block; }



.items-box { padding: 30px; background: #fff; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-shadow: 0 2px 5px rgba(0,0,0,0.1); -webkit-border-radius: 3px; border-radius: 3px; }

.items-box .item { margin-bottom: 30px; }

.items-box .item:last-child { margin-bottom: 0; }

.items-box .item.no-data { margin: -3px 0 -4px 0; }

.items-box .item .image { float: left; line-height: 0; width: 65px; }

.items-box .item .image .lazy-image { height: 65px; background-position: top center; }

.items-box .item .detail { position: relative; top: -8px; margin-left: 80px; }

.items-box .item .title a { color: #464d55; }

.items-box .item .title a:hover { color: #ec5532; }

.items-box .item .time { margin: 0 0 -14px 0; line-height: 25px; font-size: 14px; color: #9aa0a7; }

.items-box .item .buttons { display: none; position: absolute; right: 0; top: 3px; }

.items-box .item .buttons a { float: left; line-height: 30px; padding: 0 12px; margin-right: 10px; font-size: 14px; background: #e5e5e5; color: #464d55; -webkit-border-radius: 3px; border-radius: 3px; }

.items-box .item .buttons a:last-child { margin-right: 0; }

.items-box .item .buttons a:hover { background: #ec5532; color: #fff; }

.items-box .item .player .player-output { float: left; width: 100%; margin: 14px 0 -8px 0; }

.items-box .item .player .player-output.embed { margin-bottom: 0; }

.items-box .item .player .loading { float: left; width: 100%; margin: 6px 0 -7px 0; }

.items-box .item.no-data { margin: -8px 0 -7px 0; }



.items-box .item-detail .thumb { float: left; width: 200px; line-height: 0; }

.items-box .item-detail .thumb .lazy-image { height: 110px; }

.items-box .item-detail .detail { margin-left: 230px; position: relative; top: -8px; margin-bottom: -7px; }

.items-box .item-detail .download-links { margin-top: 8px; }

.items-box .item-detail .download-links a { display: inline-block; line-height: 40px; color: #9aa0a7; }

.items-box .item-detail .download-links a:hover { color: #464d55; }

.items-box .item-detail .download-links .btn { padding: 0 15px; margin-right: 15px; background: #ec5532; color: #fff !important; -webkit-border-radius: 3px; border-radius: 3px; }

.items-box .item-detail .download-links .btn:hover { background: #dc4c2a; }

.items-box .available-downloads { display: none; margin: 20px -10px 0 0; }

.items-box .available-downloads .download-item { float: left; padding: 10px 10px 0 0; width: 33.33333333333333333333333%; }

.items-box .available-downloads .download-item a { display: block; padding: 7px 15px 8px 15px; line-height: 25px; text-align: center; font-size: 14px; background: #e5e5e5; color: #464d55; -webkit-border-radius: 3px; border-radius: 3px; }

.items-box .available-downloads .download-item a:hover { background: #ec5532; color: #fff; }

.items-box .available-downloads .download-item a:hover > span { color: #fff; }

.items-box .item-content { margin: 22px 0 -7px 0; }

.items-box .item-content p { margin-bottom: 15px; }

.items-box .item-content p:last-child { margin-bottom: 0; }



.item-page .item-content a { color: #ec5532; }

.item-page .item-content a:hover { text-decoration: underline; }



.item-lyric .player .player-output { float: left; width: 100%; margin: 30px 0 15px 0; }

.item-lyric .player .loading { float: left; width: 100%; margin: 22px 0 15px 0; }



.item-page .item-content { margin-top: -8px; }



.items-box .lyric-detail .thumb { width: 150px; }

.items-box .lyric-detail .detail { margin-left: 180px; }



/**

 * Contact Form

 */



#contact-form p { margin-bottom: 15px; }

#contact-form .submit { margin: -4px 0 0 0; }

#contact-form input[type=text],

#contact-form textarea { width: 100%; }

#contact-form textarea { height: 120px; resize: vertical; }

#contact-form .name,

#contact-form .email { float: left; width: 50%; }

#contact-form .name { padding-right: 7.5px; }

#contact-form .email { padding-left: 7.5px; }

#contact-form { margin-top: 0; }

#contact-form.has-content { margin-top: 30px; }

#contact-form #response div:first-child { margin-top: -5px; }

#contact-form.has-content #response div:first-child { margin-top: -15px; }

#contact-form #response div:last-child { margin-bottom: 23px; }

#contact-form #response .error { color: #e64f4f; }

#contact-form #response .success { color: #43c878; }



/**

 * Widgets

 */



.widget { margin-bottom: 30px; background: #fff; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-shadow: 0 2px 5px rgba(0,0,0,0.1); -webkit-border-radius: 3px; border-radius: 3px; }

.widget:last-child { margin-bottom: 0; }



.widget-title { padding: 7px 15px 8px 15px; line-height: 25px; text-transform: uppercase; font-size: 14px; border-bottom: 1px solid #eee; color: #9aa0a7; }



.widget-latest-search .widget-content { padding: 7px 0 8px 0; }

.widget-latest-search .widget-content a,

.widget-latest-search .widget-content span { display: block; padding: 0 15px; word-wrap: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #464d55; }

.widget-latest-search .widget-content a:hover { background: #f9f9f9; color: #ec5532; }



/**

 * Footer

 */



#footer { float: left; width: 100%; margin-top: 30px; padding: 30px 0; background: #2c3e50; border-top: 1px solid #eee; }



.playlists { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #34495e; }

.playlists .playlists-main { margin: -30px -30px 0 0; }

.playlists .playlist-title { margin: -8px 0 -7px 0; line-height: 29px; font-size: 20px; font-weight: bold; color: #ec5532; }

.playlists .playlist-items { float: left; width: 33.3333333333333333333%; padding: 30px 30px 0 0; }

.playlists .playlist-items .items { margin-top: 30px; }

.playlists .playlist-items .item { margin-bottom: 15px; }

.playlists .playlist-items .item:last-child { margin-bottom: 0; }

.playlists .playlist-items .item .image { float: left; width: 50px; height: auto; line-height: 0; }

.playlists .playlist-items .item .image .lazy-image { height: 38px; background: none; }

.playlists .playlist-items .item .detail { position: relative; top: -8px; margin: 0 0 -15px 65px; }

.playlists .playlist-items .item .title { word-wrap: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.playlists .playlist-items .item .title a { color: #ccc; }

.playlists .playlist-items .item .title a:hover { color: #ec5532; }

.playlists .playlist-items .item .date { line-height: 25px; font-size: 14px; color: #9aa0a7; }

.playlists .clear { display: none; }

.playlists .clear:nth-child(6n+6) { display: block; }



#footer .footer-menu { margin: -8px 0 8px 0; }

#footer .footer-menu a { margin-right: 15px; color: #aaa; }

#footer .footer-menu a:hover { color: #ec5532; }



#footer .credit { float: left; width: 100%; margin: -8px 0 -8px 0; line-height: 25px; font-size: 14px; color: #9aa0a7; }



/**

 * Responsive

 */



@media (max-width: 1020px) {

	.container { width: auto; margin: 0 60px; }

}



@media (max-width: 940px) {

	.items-box .item-detail .thumb { width: 100px; }

	.items-box .item-detail .thumb .lazy-image { height: 56px; }

	.items-box .item-detail .detail { margin-left: 130px; }

}



@media (max-width: 900px) {

	.container { margin: 0 30px; }



	#header { padding: 60px 0; }



	.section-main { padding: 0; }



	.section-items { margin-top: 0; }

}



@media (max-width: 860px) {

	#primary,

	#primary #content { margin-right: 0; }



	#secondary { float: left; width: 100%; margin-top: 30px; }



	.items-box .item-detail .thumb { width: 190px; }

	.items-box .item-detail .thumb .lazy-image { height: 70px; }

	.items-box .item-detail .detail { margin-left: 220px; }

}



@media (max-width: 760px) {

	#header { padding: 30px 0; }

	#header .search-form { width: auto; padding: 0; margin: 30px; }

	#header .recent-search { margin-top: -7px; width: auto; }



	.playlists .playlist-items { width: 50%; }

	.playlists .playlist-items:nth-child(5n+5) { width: 100%; }

}



@media (max-width: 600px) {

	#header .site-name a { line-height: 35px; letter-spacing: -0.5px; font-size: 28px; }

	#header .site-description { margin: 6px 0 -7px 0; line-height: 27px; font-size: 16px; }



	#header .recent-search { line-height: 25px; font-size: 14px; }



	.section-title { margin-top: -9px; letter-spacing: -0.5px; line-height: 31px; font-size: 22px; }

}



@media (max-width: 580px) {

	.items-box .item-detail .thumb { width: 100px; }

	.items-box .item-detail .thumb .lazy-image { height: 56px; }

	.items-box .item-detail .detail { margin-left: 130px; }



	.items-box .available-downloads .download-item { width: 50%; }

}



@media (max-width: 560px) {

	.section-items .item { width: 50%; }

	.section-items .clear:nth-child(6n+6) { display: none; }

	.section-items .clear:nth-child(4n+4) { display: block; }



	.items-box .item .buttons { display: block !important; float: left; width: 100%; position: static; margin: 22px 0 -8px 0; }



	.playlists .playlist-items { width: 100%; }

}



@media (max-width: 520px) {

	.items-box .item-detail .thumb { width: 100%; }

	.items-box .item-detail .thumb .lazy-image { height: 250px; }

	.items-box .item-detail .detail { float: left; width: 100%; margin: 31px 0 0 0; }



	.item-lyric .player .player-output { float: left; width: 100%; margin: 23px 0 15px 0; }

	.item-lyric .player .loading { float: left; width: 100%; margin: 15px 0 15px 0; }

}



@media (max-width: 420px) {

	.items-box .item-detail .download-links a { float: left; width: 100%; text-align: center; }

	.items-box .item-detail .download-links .mirror { margin: 2px 0 -19px 0; }

	.items-box .item-detail .download-links .btn:last-child { margin-top: 15px; }



	.items-box .available-downloads .download-item { width: 100%; }



	#contact-form .name,

	#contact-form .email { float: left; width: 100%; }

	#contact-form .name { padding-right: 0; }

	#contact-form .email { padding-left: 0; }

}



@media (max-width: 400px) {

	.items-box .item .image { width: 100%; }

	.items-box .item .detail { float: left; margin: 15px 0 0 0; }

}



@media (max-width: 360px) {

	.section-items .item { width: 100%; }

	.section-items .clear:nth-child(4n+4) { display: none; }

	.section-items .clear:nth-child(2n+2) { display: block; }

}



/**

 * Retina

 */



@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {

	#header {

		background-image: url("assets/images/header-bg@2x.png");

		background-size: 200px 200px;

	}



	#header .search-form input[type=submit],

	#header2 .search-form input[type=submit] {

		background-image: url("assets/images/sprite@2x.png");

		background-size: 60px 200px;

	}

}