/*************************************************************
[TABLE OF CONTENTS]

- MAIN WRAPPER
- TWITCH LOGO AREA
- STATUS TEXTS AREA, 'LIVE NOW' MARKER
- WIDGET
- TWITCH ICON
*************************************************************/


/* MAIN WRAPPER
**************************************************/
/* the main wrapper */
.sst-main-wrapper {
    position:fixed;
    z-index:999999999 !important;
    top:25px;
    left:25px;
    height:32px;
    display:none;
}
.sst-main-wrapper-active {
    display:inline !important;
}


/* TWITCH LOGO AREA
**************************************************/
/* Twitch logo wrapper */
.sst-twitch-logo-wrapper {
    position:absolute;
    top:0;
    display:inline-block;
    width:32px;
    height:32px;
    background-color:#6441A4;
    overflow:hidden;
}
/* Twitch logo icon */
.sst-icon-twitch {
    position:relative;
    top:8px;
    left:8px;
    color:#fff;
    font-size:17px;
    opacity:.9;
    
    -webkit-transition:all .2s ease;
	transition:all .23s ease;
    -moz-transition:all .2s ease;
}
/* glare effect on hover */
.sst-twitch-logo-wrapper::after {
	content:'';
    display:block;
    width:32px;
    height:20px;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    
    background-image:url(img-hover-glare.png);
    background-size:32px 20px;
    background-repeat:no-repeat;
    
    -webkit-transition:all .2s ease;
	transition:all .2s ease;
    -moz-transition:all .2s ease;
}
.sst-main-wrapper:hover .sst-twitch-logo-wrapper::after,
.sst-widget-wrapper:hover .sst-twitch-logo-wrapper::after {
    opacity:.35;
}


/* STATUS TEXTS AREA, 'LIVE NOW' MARKER
**************************************************/
/* status texts wrapper */
.sst-status-wrapper {
    position:absolute;
    z-index:99999;
    top:0;
    left:32px;
    height:32px;
    white-space:nowrap;
    background-color:#1E1E1F;
    border-width:0;
    border-right-width:2px;
    border-style:solid;
    border-color:#6441A4;
    display:table;
    
    -webkit-transform:scaleX(0);
    -moz-transform:scaleX(0);
    transform:scaleX(0);
    
    -webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	transition:all 1s ease;
    
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    transform-origin:left top;
}
.sst-status-wrapper-active {
    -webkit-transform:scaleX(1);
    -moz-transform:scaleX(1);
    transform:scaleX(1);
}
.sst-status-wrapper-inner {
    display:table-cell;
    vertical-align:middle;
}
/* 'live now' marker */
.sst-live-marker {
    position:relative;
    top:-1px;
    left:-4px;
    width:6px;
    height:6px;
    display:inline-block;
    background-color:#E51919;
    border-radius:50%;
    
    animation-name:LiveNow;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}
/* 'live now' dot animation */
@keyframes LiveNow {
0% { opacity:0; }
25% { opacity:1; }
75% { opacity:1; }
100% { opacity:0; }
}
/* status texts */
.sst-status-text-live,
.sst-status-text-offline {
    display:none;
    margin:0 14px 0 13px;
    opacity:0;
    
    font-family:'Roboto',arial,tahoma,verdana;
    font-weight:500;
    font-size:11px;
    color:#C7C7C7;
    
    -webkit-transform:translateY(-1px);
    -moz-transform:translateY(-1px);
    transform:translateY(-1px);
    
    -webkit-transition:opacity .75s ease 1s;
	-moz-transition:opacity .75s ease 1s;
	transition:opacity .75s ease 1s;
}
.sst-status-text-live span,
.sst-status-text-offline span {
    -webkit-transition:color .25s ease;
	-moz-transition:color .25s ease;
	transition:color .25s ease;
}
.sst-current-status {
    display:inline-block;
}
.sst-current-status-active {
    opacity:1;
}
.sst-main-wrapper:hover .sst-status-text-live span,
.sst-main-wrapper:hover .sst-status-text-offline span,
.sst-widget-wrapper:hover .sst-status-text-live span,
.sst-widget-wrapper:hover .sst-status-text-offline span {
    color:#E9E9E9;
    text-decoration:underline;
}


/* WIDGET
**************************************************/
/* widget wrapper */
.sst-main-widget-wrapper {
    display:none;
}
.sst-widget-wrapper {
    position:relative;
    height:32px;
}
.sst-widget-wrapper .sst-status-wrapper {
    width:calc(100% - 34px);
}


/* TWITCH ICON
**************************************************/
@font-face {
  font-family: 'sst-icomoon';
  src:  url('icomoon.eot?ww1p3o');
  src:  url('icomoon.eot?ww1p3o#iefix') format('embedded-opentype'),
    url('icomoon.ttf?ww1p3o') format('truetype'),
    url('icomoon.woff?ww1p3o') format('woff'),
    url('icomoon.svg?ww1p3o#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="sst-icon-"], [class*=" sst-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'sst-icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sst-icon-twitch:before {
  content: "\e900";
}