/* ==================================================
   MOGUBO — ALBUM COVERS
   ================================================== */

.cover-button {
display:block;
position:relative;
width:100%;
margin:0;
padding:0;
overflow:hidden;
outline:none;
cursor:pointer;
background:#080808;
border:1px solid rgba(0,0,0,0.96);
-webkit-border-radius:0;
border-radius:0;
-webkit-background-clip:padding-box;
background-clip:padding-box;
-webkit-box-shadow:
0 3px 6px rgba(0,0,0,0.42),
0 6px 11px rgba(0,0,0,0.16);
box-shadow:
0 3px 6px rgba(0,0,0,0.42),
0 6px 11px rgba(0,0,0,0.16);
text-decoration:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-select:none;
user-select:none;
}

.cover-image {
display:block;
width:100%;
height:auto;
margin:0;
padding:0;
border:0;
-webkit-border-radius:0;
border-radius:0;
}


/* ==================================================
   NO-COVER ARTWORK
   ================================================== */

.cover-placeholder {
display:block;
position:relative;
width:100%;
height:0;
padding-top:100%;
overflow:hidden;
background-color:#303236;
background-image:
-webkit-linear-gradient(
top,
#44474c 0%,
#36383d 38%,
#292b2f 71%,
#222428 100%
);
background-image:
linear-gradient(
to bottom,
#44474c 0%,
#36383d 38%,
#292b2f 71%,
#222428 100%
);
}

.cover-placeholder-image {
display:block;
position:absolute;
z-index:1;
top:0;
left:0;
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
}


/*
Very subtle outer glass treatment only.

The actual record lighting belongs to No Cover.svg itself,
so CSS does not place a second unrelated highlight or shadow
over the vinyl.
*/

.cover-placeholder:after {
content:"";
position:absolute;
z-index:2;
top:0;
right:0;
bottom:0;
left:0;
pointer-events:none;
background:
-webkit-linear-gradient(
top,
rgba(255,255,255,0.085) 0%,
rgba(255,255,255,0.018) 24%,
rgba(255,255,255,0) 47%,
rgba(0,0,0,0.040) 100%
);
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.085) 0%,
rgba(255,255,255,0.018) 24%,
rgba(255,255,255,0) 47%,
rgba(0,0,0,0.040) 100%
);
-webkit-box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
inset 1px 0 0 rgba(255,255,255,0.035),
inset -1px 0 0 rgba(0,0,0,0.08),
inset 0 -1px 0 rgba(0,0,0,0.11);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
inset 1px 0 0 rgba(255,255,255,0.035),
inset -1px 0 0 rgba(0,0,0,0.08),
inset 0 -1px 0 rgba(0,0,0,0.11);
}


/* ==================================================
   INNER RELIEF
   ================================================== */

.cover-button:after {
content:"";
position:absolute;
z-index:4;
top:0;
right:0;
bottom:0;
left:0;
pointer-events:none;
-webkit-border-radius:0;
border-radius:0;
-webkit-box-shadow:
inset 0 1px 0 rgba(255,255,255,0.16),
inset 1px 0 0 rgba(255,255,255,0.045),
inset -1px 0 0 rgba(255,255,255,0.035),
inset 0 -1px 0 rgba(255,255,255,0.025);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.16),
inset 1px 0 0 rgba(255,255,255,0.045),
inset -1px 0 0 rgba(255,255,255,0.035),
inset 0 -1px 0 rgba(255,255,255,0.025);
}


/* ==================================================
   PRESS
   ================================================== */

.cover-press {
position:absolute;
z-index:5;
top:0;
right:0;
bottom:0;
left:0;
opacity:0;
pointer-events:none;
-webkit-border-radius:0;
border-radius:0;
background:
-webkit-linear-gradient(
top,
rgba(0,0,0,0.72) 0%,
rgba(0,0,0,0.53) 24%,
rgba(0,0,0,0.34) 52%,
rgba(0,0,0,0.19) 78%,
rgba(0,0,0,0.12) 100%
);
background:
linear-gradient(
to bottom,
rgba(0,0,0,0.72) 0%,
rgba(0,0,0,0.53) 24%,
rgba(0,0,0,0.34) 52%,
rgba(0,0,0,0.19) 78%,
rgba(0,0,0,0.12) 100%
);
-webkit-transition:opacity 120ms ease;
transition:opacity 120ms ease;
}

.cover-button.is-pressed {
-webkit-box-shadow:
inset 0 6px 9px rgba(0,0,0,0.66),
inset 0 -1px 0 rgba(255,255,255,0.06),
0 2px 4px rgba(0,0,0,0.28);
box-shadow:
inset 0 6px 9px rgba(0,0,0,0.66),
inset 0 -1px 0 rgba(255,255,255,0.06),
0 2px 4px rgba(0,0,0,0.28);
}

.cover-button.is-pressed .cover-press {
opacity:1;
}

.cover-button.is-pressed:after {
-webkit-box-shadow:
inset 0 1px 0 rgba(255,255,255,0.065),
inset 1px 0 0 rgba(255,255,255,0.020),
inset -1px 0 0 rgba(255,255,255,0.018),
inset 0 -1px 0 rgba(255,255,255,0.060);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.065),
inset 1px 0 0 rgba(255,255,255,0.020),
inset -1px 0 0 rgba(255,255,255,0.018),
inset 0 -1px 0 rgba(255,255,255,0.060);
}


/* ==================================================
   iOS 6
   ================================================== */

html.ios6-device .cover-button,
html.ios6-device .cover-button * {
-webkit-transition:none !important;
transition:none !important;
-webkit-animation:none !important;
animation:none !important;
-webkit-transform:none !important;
transform:none !important;
}