/* written by Tobu (Toms Burkovskis) */
@import url(//tobu.io/css/normalize.css);
@import url(//tobu.io/css/fonts.css);
@import url(//tobu.io/css/cookieconsent.css);
@import url(//tobu.io/css/magnific.css);
body { background: url(//tobu.io/img/bg.jpg); color: #444; font-family: Catamaran, sans-serif; font-weight: 400; margin-bottom: 100px; }
.bg { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -2; background-repeat: repeat; background-size: 100%; background-position: center; background-attachment: fixed; transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); opacity: 1; filter: alpha(opacity=100); -webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px);
}
.inner_bg { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background-repeat: repeat; background-size: cover; background-position: center; background-attachment: fixed; -webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px); opacity: 1; filter: alpha(opacity=100);
}
a { color: #d4324a; text-decoration: none; outline: none; }
a:hover { text-decoration: underline; }
div.title-large { background-color: #222; margin: 0; font-size: 18pt; font-weight: 400; font-family: Catamaran, sans-serif; text-align: center; padding: 10px; color: #fff; border-radius: 5px;
}
h2 { margin: 0; font-size: 17pt; font-weight: 400; font-family: Catamaran, sans-serif; padding: 5px 10px; line-height: 25px;
}
p { font-weight: 300; padding: 10px; line-height: 18px; margin: 0;
}
button.button { display: inline-block; padding: 15px 20px; border-radius: 5px; color: #fff; font-size: 14pt; background: #d62f49; text-decoration: none; transition: .2s ease; border: 0;
}
button.button.green { background: #009e07;
}
button.button:hover{ background: #b7273e;
}
button.button.green:hover{ background: #008306;
}
button.wait { display: inline-block; padding: 15px 20px; border-radius: 5px; color: #fff; font-size: 14pt; background: #999; text-decoration: none; border: 0;
}
a.green { padding: 15px 20px; display: inline-block; border-radius: 5px; font-size: 14pt; color: #fff; background: #009e07; text-decoration: none; transition:.2s ease;
}
a.green:hover { background: #008306;
}
#loading { height: 70px; width: 220px; margin: 10px auto 0 auto; background: url(//tobu.io/img/loading.gif) no-repeat center;
}
#container { width: 325px; margin: 0 auto; box-shadow: 0 20px 120px #150808; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden;
}
#container.all-round { border-top-left-radius: 5px; border-top-right-radius: 5px;
}
#container_dark { width: 325px; margin: 0 auto; background: #222; margin-top: 20px; border-radius: 5px; box-shadow: 0 0 20px #222; -moz-box-shadow: 0 0 20px #222; -webkit-box-shadow: 0 0 20px #222; overflow: hidden;
}
#container.home { box-shadow: 0 30px 60px #999;
}
#header .logo { text-align: center; padding: 10px; margin: 0;
}
#header .description { width: 325px; color: #ccc; margin: 0 auto; padding: 0; line-height: 28px; font-style: italic; font-size: 14pt; text-shadow: 1px 1px #000;
}
#header { background: #222 url(//tobu.io/img/header-bg.jpg); padding: 50px 0 0 0;
}
#header .header-title { text-align: center; color: #999; font-size: 9pt; font-weight: 300; text-transform: uppercase; margin-top: 20px;
}
#header .tracks { overflow: hidden; width: 325px; margin: 0 auto;
}
#header .tracks img { width: 57px; height: 57px; border-radius: 2px;
}
#header .tracks a { display: block; float: left; width: 57px; height: 57px; transition: .4s ease; margin: 4px; opacity: 0.8; filter: alpha(opacity=80);
}
#header .tracks a:hover { opacity: 1; filter: alpha(opacity=100);
}
#header .search { width: 325px; margin: 25px auto 0 auto;
}
#header .search input { border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: #000; width: 295px; border: 0; font-size: 12pt; padding: 10px 15px; transition: .3s ease; opacity: 0.3; filter: alpha(opacity=30);
}
#header .search input:focus,
#header .search input:hover { opacity: 0.5; filter: alpha(opacity=50); border: none; outline: none;
}
#header .search input:focus { font-size: 16pt; opacity: 1; filter: alpha(opacity=100);
}
#header .search #results { display: none; position: absolute; width: 325px; background: #fff; z-index: 1000; box-shadow: 0 65px 60px #555; -moz-box-shadow: 0 65px 60px #555; -webkit-box-shadow: 0 65px 60px #555; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden;
}
#header .search #results .result a { display: block; padding: 10px; overflow: hidden; color: #777; line-height: 18px; white-space: nowrap; width: 305px; transition: .2s ease;
}
#header .search #results .result a:hover { text-decoration: none; background: #f3f3f3;
}
#header .search #results .result a .artist { font-size: 9pt; color: #888;
}
#header .search #results .result a .title { color: #555;
}
#header .search #results .result a img { width: 40px; height: 40px; float: left; margin-right: 10px; border-radius: 2px;
}
div.content { padding: 10px;
}
.section-title { padding: 10px; background-color: #222; color: #fff; text-align: center; font-size: 14pt;
}
.section-title span { display: block; }
.section-title .small_title { font-size: 9pt; font-weight: 300; text-transform: uppercase; color: #aaa;
}
.section-title .title { display: block; font-size: 15pt; text-align: center;
}
.section-content{ padding: 10px;
}
.bullet { display: inline-block; float: left; position: relative; margin: 0 0 -11px -11px; left: 50%; width: 0; height: 0; top: 0; border-top: 11px solid #222; border-left: 11px solid transparent; border-right: 11px solid transparent;
}
.bullet-white { display: inline-block; float: left; position: relative; margin: 0 0 -10px -10px; left: 50%; width: 0; height: 0; top: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff;
}
/*
#top { padding: 10px 0; margin-bottom: 10px; background: #222 url(../img/tobu.svg) no-repeat center; background-size: 76px 30px;
} */
.coverart { width: 325px; height: 325px; /*border-top-left-radius: 5px; border-top-right-radius: 5px;*/
}
.coverart img.cover { width: 325px; height: 325px;
}
.coverart a.play { display: block; position: relative; width: 325px; height: 325px; background-size: 90px 90px; background-image: url(//tobu.io/img/video.png); background-repeat: no-repeat; position: absolute; top: 0; background-position: center; opacity: 0.8; filter: alpha(opacity=80); transition: .2s ease; text-decoration: none;
}
.coverart a.play:hover { opacity: 1; filter: alpha(opacity=100);
}
div.share { overflow: hidden; padding: 10px 0; line-height: 30px;
}
div.share .icon { float: left; width: 30px;
}
div.share .url { float: left; width: 250px;
}
div.share .url input { border-radius: 5px; border: 0; width: 250px; color: #ccc;
}
.stores { overflow: hidden;
}
button.store-button { display: block; width: 100%; background-color: #fff; border: 0; text-align: center; padding: 8px; transition:.2s ease;
}
button.store-button:hover { background-color: #f3f3f3;
}
.store { border-bottom: 1px solid #eee;
}
.store.last { border: 0;
}
.store a { display: block; background-color: #fff;
}
.store a:hover { background-color: #f3f3f3; transition: .2s ease;
}
.store .play { background-color: #f3f3f3; font-weight: 400; font-size: 10pt; text-align: center; display: inline-block; float: right; margin: 16px 15px 15px 0; border-radius: 5px; width: 75px; padding: 11px 10px 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 155px; color: #777; text-transform: uppercase;
}
.store a:hover .play { transition: .2s ease; color: #fff; background-color: #444;
}
.store.tobu .play { background-color: #2cc1ff; color: #fff; display: none;
}
.store.tobu .play.default { background-color: #f3f3f3; color: #777;
}
.store.tobu a:hover .play.default { color: #fff; }
.store.spotify a:hover .play { background-color: #24cf5f; }
.store.itunes a:hover .play { background-color: #ff6053; }
.store.googleplay a:hover .play { background-color: #61c1cb; }
.store.deezer a:hover .play { background-color: #ec4aa4; }
.store.amazon a:hover .play { background-color: #4200fd; }
.store.soundcloud a:hover .play { background-color: #ff5300; }
.store.tobu a:hover .play { background-color: #d7304a; }
.store.free a:hover .play { background-color: #21b3f0; }
.store.wallpaper a:hover .play { background-color: #21b3f0; }
.store.usage a:hover .play { background-color: #d7304a; }
.store .custom_title { display: inline-block; width: 185px; overflow: hidden; font-size: 16pt; font-weight: 400; padding: 20px 15px 0 15px; color: #444; text-transform: uppercase;
}
div.box { background-color: #222; color: #fff; padding: 10px; font-size: 12pt; border-radius: 5px; position: relative; margin-top: -100px; opacity: 0.9; filter: alpha(opacity=90); line-height: 28px;
}
div.box div.share .url input { color: #222;
}
div.box .socials { letter-spacing: 10px; text-align: center; padding-top: 10px; cursor: default;
}
div.box .socials img { width: 20px; height: 20px;
}
div.box .socials a { opacity: 1; filter: alpha(opacity=100); transition: .2s ease;
}
div.box .socials a:hover { opacity: 0.7; filter: alpha(opacity=70);
}
p.socials { letter-spacing: 10px; text-align: center; padding-top: 10px; cursor: default;
}
p.socials img { width: 20px; height: 20px;
}
p.socials a { opacity: 1; filter: alpha(opacity=100); transition: .2s ease;
}
p.socials a:hover { opacity: 0.7; filter: alpha(opacity=70);
}
p.socials.top a { opacity: 0.7; filter: alpha(opacity=70);
}
p.socials.top a:hover { opacity: 1; filter: alpha(opacity=100);
}
div.tracks { background-color: #fff; overflow: hidden;
}
div.tracks img { width: 60px; height: 60px; border-radius: 2px;
}
div.tracks a.track { width: 325px; height: 60px; display: block; overflow: hidden; color: #444; padding: 15px; border-bottom: 1px solid #f3f3f3; transition: .2s ease;
}
div.tracks a.track:hover { background-color: #f3f3f3;
}
div.tracks a.track .artwork { float: left; width: 75px;
}
div.tracks a.track .info { float: left;
}
div.tracks a.track .title { width: 200px; overflow: hidden; height: 40px; padding-top: 2px; line-height: 20px; font-size: 16pt; font-weight: 300;
}
div.tracks a.track .artist { line-height: 17px; font-size: 9pt; font-weight: 400; color: #999; width: 177px; overflow: hidden; white-space: nowrap;
}
div.tracks a.track .date { color: #bbb; font-size: 9pt; position: absolute; margin-left: 195px;
}
div.tracks a.track .free { background-color: #078d00; padding: 0 5px; position: absolute; text-transform: uppercase; color: #fff; font-weight: 300; font-size: 9pt; border-radius: 5px; margin: -18px 0 0 187px;
}
div.tracks a.track .album { background-color: #f3f3f3; padding: 0 5px; position: absolute; text-transform: uppercase; color: #777; font-weight: 300; font-size: 9pt; border-radius: 5px; margin: 0 0 0 5px;
}
div.tracks a.track .new { background-color: #ff3b5a; padding: 0 5px; position: absolute; text-transform: uppercase; color: #fff; font-weight: 400; font-size: 7pt; border-radius: 5px; margin-left: -7px;
}
.store img { display: block; background-size: 100%; margin: 15px 0 10px 15px
}
div.pg { text-align: center; line-height: 45px; height: 45px; font-size: 12pt;
}
div.pg a { padding: 0 5px; color: #888; text-decoration: none;
}
div.pg a.current { color: #222; font-size: 20pt;
}
div.pg a.current:hover { font-size: 20pt;
}
div.pg a:hover { font-size: 13pt;
}
ul { list-style-type: circle; margin: 0;
}
div.footer { font-size: 9pt; text-align: center; overflow: hidden;
}
div.footer a { background: #333; color: #aaa; border-radius: 5px; text-decoration: none; display: block; padding: 5px; float: left; transition: .2s ease; text-transform: uppercase;
}
div.footer a:hover { color: #fff; background: #444;
}
div.footer span { display: block; float: left; height: 1px; margin: 0 5px;
}
.white-popup { position: relative; background: #fff; border-radius: 5px; padding: 20px; width: auto; max-width: 500px; margin: 20px auto;
}
div.popup_scroll { overflow-y: scroll; max-height: 300px; padding: 0 1em 10px 0; -webkit-overflow-scrolling: touch; border: 1px solid #ddd; border-top: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
}
.tooltip {	display: none;	position: absolute;	background-color: #000;	border-radius: 5px;	padding: 5px 10px;	color: #fff;	font-size: 11pt; opacity: 0.8; filter: alpha(opacity=80);
}
#tobu .buttons { overflow: hidden; padding: 10px 0;
}
#tobu .buttons a { display: block; background-color: #f3f3f3; text-decoration: none; font-weight: 400; font-size: 12pt; text-align: center; color: #777; padding: 10px; border-radius: 5px; margin-bottom: 5px; transition: .2s ease;
}
#tobu .buttons a:hover { background-color: #ddd;
}
#tobu div.sub { font-size: 9pt; color: #777; text-align: center; padding: 10px 0;
}
#copyright-button { display: block; text-align: center; color: white; font-style: normal; font-size: 11pt; padding: 5px 0; margin-top: 10px; background: #151515; border-radius: 5px; text-decoration: none;
}
#copyright-button:hover { background: #050505; transition: .2s ease;
}
#merch-button { display: block; text-align: center; color: white; font-style: normal; font-size: 11pt; padding: 5px 0; margin-top: 10px; background: #151515; border-radius: 5px; text-decoration: none;
}
#merch-button:hover { background: #050505; transition: .2s ease;
}