/* ==================================================
   MOGUBO — LIVE INTERACTIONS
   ================================================== */


/* ==================================================
   DETAILS
   ================================================== */

.live-action {
position:relative;
overflow:hidden;

-webkit-user-select:none;
user-select:none;

-webkit-tap-highlight-color:
rgba(0,0,0,0);
}

.live-action:after {
content:"";

position:absolute;
z-index:4;

top:0;
right:0;
bottom:0;
left:0;

opacity:0;

pointer-events:none;

-webkit-border-radius:4px;
border-radius:4px;

background:
-webkit-linear-gradient(
top,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 38%,
rgba(255,255,255,0.020) 50%,
rgba(255,255,255,0.055) 63%,
rgba(255,255,255,0.115) 78%,
rgba(255,255,255,0.245) 100%
);

background:
linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 38%,
rgba(255,255,255,0.020) 50%,
rgba(255,255,255,0.055) 63%,
rgba(255,255,255,0.115) 78%,
rgba(255,255,255,0.245) 100%
);
}

.live-action.is-pressed {
color:#fff;

background:
-webkit-linear-gradient(
top,
rgba(2,2,2,0.84) 0%,
rgba(8,8,8,0.79) 46%,
rgba(18,18,18,0.70) 100%
);

background:
linear-gradient(
to bottom,
rgba(2,2,2,0.84) 0%,
rgba(8,8,8,0.79) 46%,
rgba(18,18,18,0.70) 100%
);

-webkit-box-shadow:
inset 0 5px 9px rgba(0,0,0,0.76),
inset 0 -1px 0 rgba(255,255,255,0.06);

box-shadow:
inset 0 5px 9px rgba(0,0,0,0.76),
inset 0 -1px 0 rgba(255,255,255,0.06);
}

.live-action.is-pressed:after {
-webkit-animation:
primaryPressGlow 150ms ease-out forwards;

animation:
primaryPressGlow 150ms ease-out forwards;
}


/* ==================================================
   DATE — ADD TO CALENDAR
   ================================================== */

.live-date-cell.live-calendar {
position:relative;
overflow:hidden;

cursor:pointer;

-webkit-user-select:none;
user-select:none;

-webkit-tap-highlight-color:
rgba(0,0,0,0);
}

.live-date-cell.live-calendar:after {
content:"";

position:absolute;
z-index:4;

top:0;
right:0;
bottom:0;
left:0;

opacity:0;

pointer-events:none;

background:
-webkit-linear-gradient(
top,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 39%,
rgba(255,255,255,0.025) 51%,
rgba(255,255,255,0.065) 65%,
rgba(255,255,255,0.135) 81%,
rgba(255,255,255,0.245) 100%
);

background:
linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 39%,
rgba(255,255,255,0.025) 51%,
rgba(255,255,255,0.065) 65%,
rgba(255,255,255,0.135) 81%,
rgba(255,255,255,0.245) 100%
);
}

html.no-ios-device .live-date-cell.live-calendar:hover {
background:
rgba(255,255,255,0.17);

-webkit-box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18);

box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18);
}

.live-date-cell.live-calendar.is-pressed,
html.no-ios-device .live-date-cell.live-calendar.is-pressed,
html.no-ios-device .live-date-cell.live-calendar.is-pressed:hover {
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%
),
rgba(0,0,0,0.32);

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%
),
rgba(0,0,0,0.32);

-webkit-box-shadow:
inset 0 6px 9px rgba(0,0,0,0.66),
inset 0 -1px 0 rgba(255,255,255,0.06);

box-shadow:
inset 0 6px 9px rgba(0,0,0,0.66),
inset 0 -1px 0 rgba(255,255,255,0.06);
}

.live-date-cell.live-calendar.is-pressed:after,
html.no-ios-device .live-date-cell.live-calendar.is-pressed:hover:after {
-webkit-animation:
secondaryPressGlow 150ms ease-out forwards;

animation:
secondaryPressGlow 150ms ease-out forwards;
}


/* ==================================================
   EVENT INFORMATION — ADD TO CALENDAR
   ================================================== */

.live-info-cell.live-calendar-info {
cursor:pointer;

-webkit-user-select:none;
user-select:none;

-webkit-tap-highlight-color:
rgba(0,0,0,0);
}


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

html.ios6-device .live-action,
html.ios6-device .live-date-cell.live-calendar,
html.ios6-device .live-info-cell.live-calendar-info {
-webkit-transition:none !important;
transition:none !important;

-webkit-animation:none !important;
animation:none !important;

-webkit-transform:none !important;
transform:none !important;
}

html.ios6-device .live-action:after,
html.ios6-device .live-date-cell.live-calendar:after {
display:none;
}

html.ios6-device .live-action.is-pressed {
color:#fff;

background:
-webkit-linear-gradient(
top,
rgba(2,2,2,0.84) 0%,
rgba(8,8,8,0.79) 46%,
rgba(18,18,18,0.70) 100%
);

-webkit-box-shadow:
inset 0 5px 9px rgba(0,0,0,0.76),
inset 0 -1px 0 rgba(255,255,255,0.06);

box-shadow:
inset 0 5px 9px rgba(0,0,0,0.76),
inset 0 -1px 0 rgba(255,255,255,0.06);
}

html.ios6-device .live-date-cell.live-calendar.is-pressed {
background:
-webkit-linear-gradient(
top,
rgba(0,0,0,0.70) 0%,
rgba(0,0,0,0.50) 25%,
rgba(0,0,0,0.31) 54%,
rgba(0,0,0,0.18) 79%,
rgba(0,0,0,0.12) 100%
),
rgba(0,0,0,0.30);

-webkit-box-shadow:
inset 0 6px 9px rgba(0,0,0,0.62),
inset 0 -1px 0 rgba(255,255,255,0.06);

box-shadow:
inset 0 6px 9px rgba(0,0,0,0.62),
inset 0 -1px 0 rgba(255,255,255,0.06);
}