f/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate.
* Customize the background color to match your design.
*/
/*::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }*/
::selection { background: #444; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin:0; padding:0; }
ul { list-style: none; list-style-image: none;}
dd { margin: 0 0 0 40px; }
nav ol { list-style: none; list-style-image: none;}
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; *overflow: visible; }
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
Author: Daniel Hutchinson, http://dhut.ch/
========================================================================== */
/*
* Mobile first!
* See Media Query section for progressive enhancement.
* Styles adjust based on added classes to the Body tag. Used to take advantage of CSS3 animation instead of JavaScript
*/
/* Global */
@font-face {
font-family: "Icon";
src: url('/fonts/icons.eot');
src: url('/fonts/icons.eot?#iefix') format('embedded-opentype'),
url('/fonts/icons.woff') format('woff'),
url('/fonts/icons.ttf') format('truetype'),
url('/fonts/icons.svg#IcoMoon') format('svg');
font-weight: normal;
font-style: normal;
}
.page, header, .pageMain, footer, section {
overflow:hidden;
}
img {
max-width:100%;
height:auto;
}
body {
background:#E9EFF2; /* footer background */
font-family:"helvetica neue", "helvetica", "sans-serif";
}
a, a:visited, .btn, #goog-wm-sb {
color:#222;
text-decoration:none;
-webkit-transition:color 0.3s ease-out;
-moz-transition:color 0.3s ease-out;
-ms-transition:color 0.3s ease-out;
-o-transition:color 0.3s ease-out;
transition:color 0.3s ease-out;
}
a:hover, .btn:hover, #closeWarnings:hover, #goog-wm-sb:hover {
color:#7F9099;
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;
}
a:active, .btn:active, #closeWarnings:active, #goog-wm-sb:active {
color:#57656D;
}
h1, h2, h3, h4, h5, h6 {
font-weight:normal;
}
input:focus, textarea:focus {
outline:none;
-webkit-box-shadow: 0 0 6px 0 #9FBDC7;
-moz-box-shadow: 0 0 6px 0 #9FBDC7;
box-shadow: 0 0 6px 0 #9FBDC7;
border: 1px solid #9FBDC7 !important;
-webkit-transition:border-color .2s ease-out;
-moz-transition:border-color .2s ease-out;
-o-transition:border-color .2s ease-out;
transition:border-color .2s ease-out;
}
/* Helpers */
.icon:before {
font-family:"Icon";
content:attr(data-icon);
}
.iconReplace {
text-indent:-200px;
overflow:hidden;
display:inline-block;
position:relative;
min-width:1em;
}
.eight .iconReplace {
text-indent:0;
}
.iconReplace:before {
position:absolute;
left:0;
top:0;
text-indent:0;
}
.wrap {
overflow:hidden;
}
.btn, .chrome, #goog-wm-sb {
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #ddd;
background:#fff;
background-image:-o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:-moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:-webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:-ms-linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:linear-gradient(90deg , rgba(0, 0 ,0, 0), rgba(0, 0, 0, .07));
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
text-align:center;
font-size:.75em; /* 12/16 */
font-family:"helvetcia neue", "helvetica", "sans-serif";
font-weight:normal;
text-shadow:0px 1px 0px #fff;
-webkit-appearance:none;
}
.inst {
border:0;
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 1px rgba(0,0,0,.2);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 1px rgba(0,0,0,.2);
}
.btn:active {
background-image:none;
background:#F8F8F8;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
.slide, .fancybox-prev span, .fancybox-next span, a.fancybox, a.fancybox span, .sc-player {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.last {
border:0 !important;
}
/* Walbaum Titles */
h1, .pageNav, .wal, .featured h2 {
font-family:"Walbaum W01 Italic", "Times";
letter-spacing:.2em;
text-transform:uppercase;
}
h1 a, .wal a {
text-decoration:none !important;
}
/* Absolutely/Fixed position */
#mediaLoader {
width:24px;
height:24px;
position:absolute;
top:275px;
left:50%;
margin:0 0 0 -15px;
padding:3px;
z-index:10;
}
.pageAside {
max-width:300px;
padding:1em 0 1.6em 6px;
float:right;
font-size:.75em; /* 12/16 */
overflow:hidden;
}
.adj .pageAside {
margin-right:20px;
}
.pageAside h1 {
margin:0;
font-size:1.166em; /* 14/12 */
text-align:right;
}
#signup {
padding:6px 0 6px 6px;
text-align:center;
overflow:hidden;
}
#email, .submit, #goog-wm-qt {
width:68%;
padding:.535em .25em;
float:left;
-webkit-border-radius:3px;
border-radius: 3px;
border:1px solid #E5E5E5;
background:white;
font-size:.825em; /* 14/16 */
-webkit-appearance:none;
}
#submit {
width:68px;
height:24px;
padding:0;
float:right;
}
.pageAside .socialShare {
float:right;
}
#metricApp a {
display: block;
width: 102px;
margin: 6px 0 0;
float: right;
}
/* Container */
.container {
background-color:#fff;
background-image:url(/img/clouds.png);
background-repeat: no-repeat;
background-position: top center;
-webkit-box-shadow:0 0 10px rgba(0,0,0,.5);
box-shadow:0 0 10px rgba(0,0,0,.5);
}
.page {
max-width:920px;
margin:0 auto;
padding:0 20px;
}
.adj .page {
max-width:960px;
padding:0;
}
/* Warnings */
#warnings, .uhoh {
display:none;
overflow:hidden;
}
#warnings {
max-width:458px;
margin:-60px auto 0 auto;
padding:0 10px;
position:relative;
}
.uhoh p {
margin:1em 0;
}
#closeWarnings {
width:25px;
height:15px;
padding: 3px 0 7px 0;
position:absolute;
bottom:0;
right:0;
z-index:11;
font-size:1.25em;
color:#afafaf;
}
#closeWarnings:before {
top:.2em;
text-indent:.35em;
}
.eight #warnings, .no-js #warnings {
margin:0 auto;
display:block;
}
.eight #closeWarnings {
display:block;
}
.eight #ie, .no-js #js {
display:block;
}
/* Header */
.pageHead {
padding:10px 0 1em 0;
}
.adj .pageHead {
padding:10px 20px 1em 20px;
}
.pageHead h1 {
width:200px;
margin:0 auto;
font-size:1em;
}
.pageHead h1 a {
display:inline-block;
}
.pageHead h1 img {
width:100%;
}
#showNav {
padding:0 .5em;
position:absolute;
top:13px;
left:10px;
overflow:hidden;
font-size:1em; /* 16/16 */
}
#showNav:before {
top:.07em;
text-indent:.5em;
}
.pageNav, .pageNav .subNav ul {
overflow:hidden;
height:0px;
}
.csstransitions .pageNav, .csstransitions .subNav ul {
opacity:0;
}
.navOut .pageNav {
height:auto;
margin:.5em 0;
opacity:1;
}
.pageNav .subNav ul.subOut{
height:auto;
padding:0 0 0 1em;
opacity:1;
}
.pageNav a {
text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.pageNav a.active {
color:#7F9099;
text-shadow:none;
}
/* Main */
.pageMain {
min-height:345px;
}
.news .pageMain a, .tour .pageMain a {
text-decoration:underline;
}
.news .paging a {
text-decoration:none;
}
.sectionHeader {
padding:0 20px;
text-align:center;
}
.sectionHeader h1 {
font-size:1em;
}
/* Home */
.home .pageMain {
padding:0 20px;
}
.featuredMain, .featured {
width:100%;
margin:0 0 2em 0;
float:left;
}
.featured .moduleHeader h1 {
font-size:1em; /* 16/16 */
margin-top:0;
text-align:center;
}
.featured h2 {
margin-top:0;
}
.featured ul {
margin:0 0 1em 0;
padding:0 0 0 1em;
}
/* Bio */
.bioContainer {
max-width: 690px;
margin: 0 auto;
padding:0 0 20px 0;
font-size: .875em;
line-height: 1.5em;
}
.bioContainer img {
width:50%;
margin:0 1em 1em 0;
float:left;
}
/* News */
.blogEntry {
padding:0 0 20px 0;
border-bottom:1px solid #eee;
}
.post .blogEntry {
border:0;
}
.blogTitle {
text-transform:uppercase;
font-size:2em;
text-shadow:0 1px 0 #fff;
text-align:center;
}
.pubDate {
//float:right;
margin:0 0 1em 0;
text-align:right;
display:block;
color:#999;
font-size:.857em; /* 12/14 */
}
.blogBody, .blogImage {
max-width:690px;
margin:0 auto;
font-size:.875em; /* 14/16 */
line-height:1.5em;
}
.blogBody p div {
width:100% !important;
height:auto !important;
}
.paging {
text-align:center;
}
#more {
margin:30px 0;
padding:.5em 2em;
display:inline-block;
}
/* Tour */
.adj .tourContainer {
padding:0 14px 20px 14px;
font-size:.875em; /* 14/16*/
}
.tourHeader {
border-top:1px solid #EEE;
border-bottom:1px solid #EEE;
}
.tourHeader h1 {
font-family:"helvetica neue", "helvetica", "sans-serif";
font-size:.875em; /* 12/14 */
padding:0 0 0 6px;
font-weight:bold;
}
.tourAside, .tourFesto {
height:0px;
overflow:hidden;
border-bottom: 1px solid #EEE;
opacity:0;
}
.tourFesto {
height:auto;
border:none;
opacity:1;
}
.asideOut .tourAside {
height:auto;
//max-height:500px;
padding-top:1em;
padding-bottom:1em;
opacity:1;
}
.tourAside span {
font-weight:bold;
}
.tour table {
width:100%;
border-collapse:collapse;
font-size:1em; /* 14/14 */
}
.tour th {
font-weight:bold;
}
.tour td, .tour th {
padding:6px;
text-align:left;
}
.tour table, .tour thead, .tour tbody, .tour th, .tour td, .tour tr {
display: block;
}
.tour thead {
position:absolute;
top:-1px;
left:-1px;
width:1px;
height:1px;
overflow:hidden;
}
.tour tr {
border-bottom:1px solid #EEE;
padding:20px 0;
}
.tour td {
border:none;
position:relative;
padding-left:33%;
}
.tour td span {
width: 100%;
height: 2.5em;
line-height: 1.6em;
left:0;
}
.yes:before {
content: "%";
font-size: 2em;
}
.tour td:before {
position:absolute;
top:6px;
left:6px;
width:32%;
padding-right:10px;
white-space:nowrap;
color:#999;
}
.tour td:nth-of-type(1):before { content: "Date"; }
.tour td:nth-of-type(2):before { content: "Venue"; }
.tour td:nth-of-type(3):before { content: "City"; }
.tour td:nth-of-type(4):before { content: "Country"; }
.tour td:nth-of-type(5):before { content: "Download"; }
.tour td:nth-of-type(6):before { content: "Status"; }
/* Store */
#s08store {
padding:20px 0 0 0;
min-height:464px;
}
/* Music */
.musicContainer {
padding:0 0 40px 0;
border-bottom:1px solid #EEE;
}
/* Photos/Videos */
.adj #photoContainer, .adj #videoContainer {
max-width:920px;
padding:20px;
}
.photos #photoContainer a, .videos #videoContainer a, .downloads #downloadContainer a {
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(../js/boxsizing.htc);
width:50%;
height:80px;
padding:1px;
float:left;
display:inline-block;
overflow:hidden;
position:relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.photos #photoContainer a:hover, .videos #videoContainer a:hover, .downloads #downloadContainer a:hover {
opacity:.7 !important;
}
.photos #photoContainer a:active, .videos #videoContainer a:active, .downloads #downloadContainer a:active {
opacity:.5 !important;
}
.photos #photoContainer a img, .videos #videoContainer a img, .downloads #downloadContainer a img {
width:100%;
height:auto;
}
/* Press/Release */
.pressContainer, .releaseContainer, .redeemContainer {
max-width:480px;
margin:0 auto;
text-align:center;
font-size:.875em; /* 14/16 */
}
.pressContainer header {
text-align:left;
}
/* Footer */
.pageFoot {
position:relative;
text-shadow:0 1px 1px #fff;
font-size:.75em; /* 12/16 */
line-height:1.75em;
padding:20px 0 0 0;
}
.ywy .pageFoot {
padding-bottom:32px;
}
.adj .pageFoot {
padding-top:20px;
padding-right:20px;
padding-left:20px;
}
.pageFoot h1 {
font-size:1.333em; /* 16/12 */
}
.pageFoot .addthis_toolbox a {
display:block;
float:none;
}
#___plus_0 {
height:92px !important;
display:block !important;
margin:4px 0 0 2px !important;
}
.pageFoot .youtube {
width:100px;
display:block;
margin:12px 0 0 2px;
}
.pageFoot h2, .pageFoot h3 {
margin:0;
}
.pageFoot h2 {
font-size:1.083em; /* 13/12 */
margin-bottom:1em;
}
.pageFoot h3 {
font-size:1em; /* 12/12 */
font-style:italic;
}
.pageFoot .drawer {
overflow:hidden;
height:0px;
}
.csstransitions .pageFoot .drawer {
opacity:0;
}
.pageFoot div.drawer.open {
height:auto;
margin:0 0 1em 1em;
opacity:1;
}
.pageFoot .links .drawer a {
display:block;
}
#up {
width:11px;
height:11px;
padding:6px 7px 8px 7px;
position:absolute;
top:36px;
right:0;
z-index:11;
font-size:1em; /* 16/16 */
}
.adj #up {
right:20px;
}
#up:before {
top:.2em;
text-indent:.59em;
}
#up:active {
padding:7px;
}
.pageFoot small {
display:block;
margin:10px;
text-align:center;
font-size:.833em; /* 10/12 */
}
#muchFact {
display:block;
width:92px; /* /131px */
margin:0 auto;
opacity:.7;
}
#muchFact:hover {
opacity:1;
}
/* Helpers */
/* Soundcloud */
.sc-player {
overflow:hidden;
opacity:0;
padding-top:.5em;
}
.scCont {
width:230px;
height:230px;
margin:0 auto 10px auto;
position: relative;
overflow: hidden;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
}
/* Artwork */
.sc-player .sc-artwork-list li{
display: none;
-webkit-transition:all 1s ease-out;
}
.sc-player .sc-artwork-list li.active{
display: block;
}
.sc-player .sc-artwork-list li img, .sc-player .sc-artwork-list li div {
width:100%;
height:auto;
}
.sc-no-artwork {
display: none;
}
/* Controls */
.sc-player .sc-controls a {
width:40px;
height:40px;
position:absolute;
top:40%;
left:50%;
margin:0 0 0 -20px;
-webkit-border-radius:20px;
border-radius:20px;
display:block;
z-index:600;
background:#efefef;
background-image:-o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:-moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:-webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:-ms-linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:linear-gradient(90deg , rgba(0, 0 ,0, 0), rgba(0, 0, 0, .07));
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 3px rgba(0,0,0,.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 3px rgba(0,0,0,.5);
overflow:hidden;
font-size:1.5em; /* 24/16 */
text-align:center;
text-indent:-200px;
text-shadow:0px 1px 0px #fff;
color:#bbb;
}
.sc-player .sc-controls a.sc-pause{
display: none;
}
.sc-player.playing .sc-controls a.sc-play{
display: none;
}
.sc-player.playing .sc-controls a.sc-pause{
display: block;
}
.sc-player.playing .sc-controls a {
opacity:.7;
}
.sc-player .sc-controls a:hover, .sc-player.playing .sc-controls a:hover {
opacity:1;
color:#7F9099;
}
.sc-player.playing .sc-controls a:active, .sc-player .sc-controls a:active {
opacity:.5;
}
.csstransitions .sc-player.playing .sc-controls a:active, .csstransitions .sc-player .sc-controls a:active {
opacity:1;
-webkit-transform: scale(.95);
-moz-transform: scale(.95);
-ms-transform: scale(.95);
-o-transform: scale(.95);
transform: scale(.95);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9998625445384374, M12=-0.016579868187697525, M21=0.016579868187697525, M22=0.9998625445384374,SizingMethod='auto expand');
}
.sc-player .sc-controls a.sc-play:before {
top:.17em;
left:.4em;
}
.sc-player .sc-controls a.sc-pause:before {
left:.334em;
top:.17em;
}
/* Tracks */
/* Track Listings*/
.sc-player ol.sc-trackslist {
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(../js/boxsizing.htc);
padding:6px 20px 0 20px;
font-size:.75em;
}
.sc-player ol.sc-trackslist li {
position: relative;
line-height:1.8em;
white-space: nowrap;
overflow: hidden;
}
.sc-player ol.sc-trackslist li.active a.songUrl {
color:#7F9099;
}
.sc-player ol.sc-trackslist li span {
position:absolute;
top:0;
right:0;
padding:0 0 0 10px;
background:#fff;
}
.sc-player ol.sc-trackslist li span a {
padding:.25em .5em;
margin:0 0 0 10px;
}
/* Track Info*/
.sc-player .sc-info, .sc-player .sc-info.active, .sc-player .sc-info-toggle, .sc-player .sc-info-toggle.active, .sc-player .sc-info-close {
display:none;
}
/* Scrubber */
.sc-scrubber {
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(../js/boxsizing.htc);
width:100%;
padding:4px 0;
position:absolute;
bottom:0;
left:0;
display:block;
z-index:600;
border-top:1px solid #ccc;
background:#efefef;
background-image:-o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:-moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:-webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:-ms-linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
background-image:linear-gradient(90deg , rgba(0, 0 ,0, 0), rgba(0, 0, 0, .07));
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
text-align:center;
font-size:.75em; /* 12/16 */
font-family:"helvetcia neue", "helvetica", "sans-serif";
font-weight:normal;
text-shadow:0px 1px 0px #fff;
}
.sc-scrubber .sc-time-span{
position: relative;
width: 80%;
min-height: 29px;
margin: 0 auto;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #ccc;
overflow:hidden;
}
.sc-scrubber .sc-buffer, .sc-scrubber .sc-played{
position:absolute;
height:100%;
top: 0;
background-color:#8697A2
}
.sc-scrubber .sc-buffer {
z-index:-1;
opacity:1;
}
.sc-scrubber .sc-played {
background-color: #333;
background-image:-o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
background-image:-moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
background-image:-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
background-image:-ms-linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
background-image:linear-gradient(90deg , rgba(0, 0 ,0, 0), rgba(0, 0, 0, 1));
opacity:0.4;
}
.sc-track-duration {
text-align:right;
float:right;
padding: 0 5px;
margin-left: 5px;
}
.sc-scrubber .sc-time-indicators{
display:none;
position: absolute;
right: 0;
top:-2em;
}
.sc-scrubber .sc-time-span img {
width:100%;
height:auto;
}
/* Volume */
.sc-volume-slider, .sc-volume-slider .sc-volume-status {
display:none;
}
/* Side Projects */
.sideProjects {
padding:0 20px 40px 20px;
}
.sideProject {
border:none;
}
.sideProject .sectionHeader {
padding: 0;
/*text-align: left;*/
}
.sideProject .scCont {
margin:0 auto 20px auto;
float:none;
}
.sideProject .sc-player ol.sc-trackslist {
width:230px;
margin:0 auto;
padding:0;
float:none;
}
/* Utilities */
.sc-player .hidden {
display: none;
}
.sc-player-engine-container{
width: 1px;
height: 1px;
position: fixed;
top:-1px;
left:-1px;
overflow:hidden;
}
.sc-player.live {
opacity:1;
}
/* Fancy Shmancy */
.fancybox-tmp iframe, .fancybox-tmp object {
vertical-align: top;
padding: 0;
margin: 0;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
padding: 0;
margin: 0;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
padding: 0;
margin: 0;
position: relative;
outline: none;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 10px;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
vertical-align: top;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
.fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('../img/lightbox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background:#fff;
background:rgba(255,255,255,1);
-webkit-box-shadow:0 2px 4px rgba(0,0,0,.7);
-moz-box-shadow:0 2px 4px rgba(0,0,0,.7);
box-shadow:0 2px 4px rgba(0,0,0,.7);
cursor: pointer;
z-index: 8020;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('../img/loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 9000;
}
.fancybox-prev, .fancybox-next {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
background: transparent url('../img/blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-prev span, .fancybox-next span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
opacity:0;
}
.fancybox-prev span {
left: 20px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 20px;
background-position: 0 -72px;
}
.fancybox-prev:hover span, .fancybox-next:hover span {
opacity:1;
}
.fancybox-prev:active span, .fancybox-next:active span, .fancybox-close:active {
opacity:.7;
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;
}
ul.fancybox-downloads {
position: absolute;
right: 0;
bottom: 20px;
left: 0;
z-index: 8041;
text-align: center;
color: #fff;
text-shadow: 0 1px 3px #000;
}
ul.fancybox-downloads li {
display: inline;
padding: 0 .5em;
}
ul.fancybox-downloads a {
color: inherit;
}
.fancybox-tmp {
position: absolute;
top: -9999px;
left: -9999px;
padding: 0;
overflow: visible;
visibility: hidden;
}
/* Overlay helper */
#fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: #000;
}
#fancybox-overlay.overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
display:none !important;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -50px;
z-index: 8030;
text-align: center;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
margin-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
/* Hovering */
a.fancybox, a.download {
opacity:0;
}
a.fancybox span, a.download span {
width: 100%;
padding:.25em 0;
position: absolute;
bottom: 0;
z-index: 100;
background:#fff;
background:rgba(255, 255, 255, .7);
text-align: center;
font-size:.75em;
}
.cssgradients a.fancybox span, .cssgradients a.download span {
background:none;
background-image:-o-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5));
background-image:-moz-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5));
background-image:-webkit-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5));
background-image:-ms-linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .5));
background-image:linear-gradient(90deg , rgba(255, 255, 255, .7), rgba(255, 255, 255, .5));
-webkit-box-shadow:0 0 3px rgba(0,0,0,.5);
-moz-box-shadow:0 0 3px rgba(0,0,0,.5);
box-shadow:0 0 3px rgba(0,0,0,.5);
}
a.fancybox:hover span, a.download:hover span {
color:#222;
}
/* 404 */
.fof .pageMain {
max-width:560px;
margin:0 auto;
}
#goog-wm-qt {
display:block;
}
#goog-wm-sb {
padding:.65em 1em;
display:block;
}
/* Fallback */
/* Header */
.eight .pageHead {
padding:0;
}
.eight .adj .pageHead {
padding:0 20px;
}
.eight .pageHead h1 {
width:300px;
margin:40px auto;
}
.eight #showNav {
display:none;
}
.eight .pageNav {
height:auto;
text-align:justify;
}
.eight .subOut .pageNav {
padding:0 0 4em 0;
}
.eight .csstransitions .pageNav {
opacity:1;
}
.eight .pageNav ul, .eight .pageNav li {
display:inline;
}
.eight .pageNav a {
display:inline-block;
}
.eight .pageNav span {
width:100%;
display:inline-block;
}
.eight .pageNav .subNav ul {
display:block;
position:absolute;
top:2em;
left:0;
width:250px;
}
.eight .pageNav .subNav ul.subOut{
padding:0 0 0 1em;
}
.eight .pageNav .subNav li {
display:block;
}
/* Main */
.eight .sectionHeader h1 {
font-size:2em;
text-shadow:0 1px 0 #fff;
}
/* Home */
.eight .featured {
width:31%;
margin:0 3.5% 2em 0;
float:left;
}
.eight .featured.two {
width:65%;
}
.eight .featured.three {
width:100%;
}
.eight .noMargin {
margin-right:0 !important;
}
.eight .module div p:first-child {
margin-top:0;
}
/* Tour */
.eight .tourAside, .eight .tourFesto {
padding-left:20%;
padding-right:20%;
}
.eight .tour table {
display:table;
}
.eight .tour td, .eight .tour th {
display:table-cell;
padding:6px;
}
.eight .tour thead {
display:table-header-group;
position:static;
border-bottom:1px solid #EEE
}
.eight .tour tbody {
display:table-row-group;
}
.eight .tour tr {
display:table-row;
border:none;
position:static;
}
.eight .tour td {
display:table-cell;
border:none;
position:static;
padding:0;
}
.eight .tour td:before {
display:none;
position:static;
}
/* Photos/Videos */
.eight .photos #photoContainer a, .eight .videos #videoContainer a, .eight .downloads #videoContainer a {
width:33%;
height:150px;
}
.eight .adj #photoContainer, .eight .adj #videoContainer, .eight .adj #downloadContainer {
padding:20px 20px 40px 20px;
}
.eight .photos #photoContainer a, .eight .videos #videoContainer a, .eight .videos #downloadContainer a {
width:25%;
height:150px;
}
.eight a.fancybox span, .eight a.download span {
bottom: -100%;
}
.eight a.fancybox:hover span, .eight a.download:hover span {
bottom:0;
}
/* Music */
.eight .music .musicContainer {
padding:0 0 10px 0;
}
.eight .sideProject {
width:33%;
border:none;
}
.eight .sideProject .sectionHeader {
padding: 0;
}
.eight .sideProject .sectionHeader h1 {
font-size: 1.25em;
}
.eight .sideProject .scCont {
margin:0 auto 20px auto;
float:none;
}
.eight .sideProject .sc-player ol.sc-trackslist {
width:230px;
margin:0 auto;
padding:0;
float:none;
}
/* Footer */
.eight .pageFoot h3 {
display:inline-block;
}
.eight .pageFoot span {
display:block;
}
.eight .pageFoot .links .drawer span a {
display:inline;
}
.eight .pageFoot .column {
width: 32%;
margin: 0 2% 0 0;
float:left;
}
.eight .pageFoot section.links.column {
margin:0;
}
.eight .pageFoot small {
margin:20px;
}
/* Helpers */
/* Soundcloud */
.eight .scCont {
margin:0 0 20px 20px;
float: left;
}
.eight .sc-player ol.sc-trackslist {
width:50%;
float:left;
}
.eight .sc-player ol.sc-trackslist li span {
display:block;
}
/* Absolutely/Fixed position */
.eight .pageAside {
position:absolute;
top:0;
right:0;
padding:1em;
}
.eight #metricApp.pageAside {
right: auto;
left: 0;
}
.eight .adj .pageAside {
margin-right:0;
}
.eight .adj #metricApp.pageAside {
margin-left:0;
}
/* Media Queries */
/* Bigger Mobile */
@media only screen and (min-width: 480px) {
/* Main */
/* Home */
.featured {
width:49%;
margin:0 2% 2em 0;
float:left;
}
.module:nth-of-type(2n+2) {
margin-right:0;
}
/* Tour */
.tourAside, .tourFesto {
padding-left:10%;
padding-right:10%;
}
.tour td {
padding-left: 50%;
}
/* Photos/Videos */
.photos #photoContainer a, .videos #videoContainer a, .downloads #videoContainer a {
width:33%;
height:100px;
}
/* Footer */
.pageFoot h3 {
display:inline-block;
}
.pageFoot span {
display:block;
}
.pageFoot .links .drawer span a {
display:inline;
}
}
/* Bigger Mobile */
@media only screen and (min-width: 570px) {
/* Main */
/* Music */
/* Soundcloud */
/* Side Projects */
.sideProject {
width:50%;
float:left;
}
}
/* iPad */
@media only screen and (min-width: 768px) {
/* Header */
.pageHead {
padding:0;
}
.adj .pageHead {
padding:0 20px;
}
.pageHead h1 {
width:300px;
margin:40px auto;
}
#showNav {
display:none;
}
.pageNav {
height:auto;
text-align:justify;
}
.subOut .pageNav {
padding:0 0 4em 0;
}
.csstransitions .pageNav {
opacity:1;
}
.pageNav ul, .pageNav li {
display:inline;
/*position:relative; for dropdown nav */
}
.pageNav a {
display:inline-block;
}
.pageNav span {
width:100%;
display:inline-block;
}
.pageNav .subNav ul {
display:block;
position:absolute;
top:2em;
left:0;
width:250px;
}
.pageNav .subNav ul.subOut{
padding:0 0 0 1em;
}
.pageNav .subNav li {
display:block;
}
/* Main */
.sectionHeader h1 {
font-size:2em;
text-shadow:0 1px 0 #fff;
}
/* Home */
.featured {
width:31%;
margin:0 3.5% 2em 0;
float:left;
}
.featured.two {
width:65%;
}
.featured.three {
width:100%;
}
.module:nth-of-type(2n+2) {
margin-right:3.5%;
}
.module:nth-of-type(3n+3) {
margin-right:0;
}
.noMargin {
margin-right:0 !important;
}
.module div p:first-child {
margin-top:0;
}
/* Tour */
.tourAside, .tourFesto {
padding-left:20%;
padding-right:20%;
}
.tour table {
display:table;
table-layout:fixed;
}
.tour td, .tour th {
display:table-cell;
padding:6px;
}
.tour thead {
display:table-header-group;
position:static;
border-bottom:1px solid #EEE
}
.tour tbody {
display:table-row-group;
}
.tour tr {
display:table-row;
border:none;
position:static;
}
.tour td {
display:table-cell;
border:none;
position:static;
}
.tour td:before {
display:none;
position:static;
}
#tVenue {
width: 200px;
}
/* Photos/Videos */
.photos #photoContainer a, .videos #videoContainer a, .downloads #downloadContainer a {
width:33%;
height:150px;
}
/* Music */
.music .musicContainer {
padding:0 0 10px 0;
}
/* Side Projects */
.music .musicContainer.sideProjects {
padding:0 20px 10px 20px;
}
.sideProject .sectionHeader h1 {
font-size: 1.25em;
}
/* Footer */
.pageFoot .column {
width: 32%;
margin: 0 2% 0 0;
float:left;
}
.pageFoot section.links.column {
margin:0;
}
.pageFoot small {
margin:20px;
}
/* Helpers */
/* Soundcloud */
.scCont {
margin:0 0 20px 20px;
float: left;
}
.sc-player ol.sc-trackslist {
width:50%;
float:left;
}
.sc-player ol.sc-trackslist li span {
display:block;
}
}
/* Desktop */
@media only screen and (min-width: 940px) {
/* Absolutely/Fixed position */
.pageAside {
position:absolute;
top:0;
right:0;
padding:1em;
}
#metricApp.pageAside {
right:auto;
left:0;
}
#metricApp.pageAside h1 {
text-align: left;
}
#metricApp a {
float: left;
}
.adj .pageAside {
margin-right:0;
}
.adj #metricApp.pageAside {
margin-left:0;
}
/* Main */
/* Music */
.sideProject {
width:33%;
}
.music .musicContainer.sideProjects {
padding:0 0 10px 0;
}
/* Photos/Videos */
.adj #photoContainer, .adj #videoContainer, .adj #downloadContainer {
padding:20px 20px 40px 20px;
}
.photos #photoContainer a, .videos #videoContainer a, .downloads #downloadContainer a {
width:25%;
height:150px;
}
a.fancybox span, a.download span {
bottom: -100%;
}
a.fancybox:hover span, a.download span {
bottom:0;
}
.cssanimations .photos #photoContainer a, .cssanimations .videos #videoContainer a, .cssanimations .downloads #downloadContainer a {
-webkit-transform-style: preserve-3d;
}
.cssanimations .photos #photoContainer a:hover, .cssanimations .videos #videoContainer a:hover, .cssanimations .downloads #downloadContainer a:hover {
opacity:1 !important;
padding:0;
-webkit-box-shadow:0px 0px 8px #000;
box-shadow:0px 0px 8px #000;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
z-index:77;
}
.cssanimations .photos #photoContainer a:active, .cssanimations .videos #videoContainer a:active, .cssanimations .downloads #downloadContainer a:active {
opacity:1 !important;
-webkit-box-shadow:0px 0px 8px #fff;
box-shadow:0px 0px 8px #fff;
-webkit-transform: scale(1.04);
-moz-transform: scale(1.04);
-ms-transform: scale(1.04);
-o-transform: scale(1.04);
transform: scale(1.04);
}
.cssanimations .photos #photoContainer a img, .cssanimations .videos #videoContainer a img, .cssanimations .downloads #downloadContainer a img {
position:absolute;
}
}
/* Synthetica Pop Up */
body.pop {
overflow:hidden;
background:#fff;
}
.pop .container {
background-image:none;
-webkit-box-shadow:none;
}
.pop .page {
width:520px;
}
.pop .pageMain {
min-height:0;
}
.pop .sectionHeader h1 {
font-size:1em;
text-shadow:none;
margin:1em 0 0 0
}
.pop .music .musicContainer {
padding:0 0 10px 0;
}
.pop .scCont {
margin:0 0 20px 20px;
float: left;
}
.pop .sc-player ol.sc-trackslist {
width:50%;
float:left;
}
.pop .sc-player ol.sc-trackslist li span {
display:block;
}
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}