/*
  Load fonts
*/
@font-face {
	font-family: STB;
 	src: url("./fonts/Steinschrift.eot")
 	src: url("./fonts/Steinschrift.eot?#iefix") format("embedded-opentype"); 
}
@font-face {
	font-family: STB;
	src: url("./fonts/Steinschrift.ttf")
}
@font-face {
	font-family: SSB;
 	src: url("./fonts/StreetSemiBold.eot")
 	src: url("./fonts/StreetSemiBold.eot?#iefix") format("embedded-opentype"); 
}
@font-face {
	font-family: SSB;
	src: url("./fonts/StreetSemiBold.ttf")
}
@font-face {
	font-family: DS;
 	src: url("./fonts/DroidSans.eot")
 	src: url("./fonts/DroidSans.eot?#iefix") format("embedded-opentype"); 
}
@font-face {
	font-family: DS;
	src: url("./fonts/DroidSans.ttf")
}
@font-face {
	font-family: DSB;
 	src: url("./fonts/DroidSans-Bold.eot")
 	src: url("./fonts/DroidSans-Bold.eot?#iefix") format("embedded-opentype"); 
}
@font-face {
   font-family: DSB;
   src: url("/fonts/DroidSans-Bold.ttf")
}

/*
 Body
*/
body {
    margin:0 auto;
    padding:0;
    overflow:hidden;
    background-color:#000000;
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

#outerbox {
    margin:auto auto;
    padding:0;
    position:relative;
    overflow:hidden;
}

#player {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 2048px;
    text-align: center;
    font-size: 22px;
    font-family: STB;
    color: #ffffff;
}

#mainscreen {
    background-position: 0px 0px;
    background-image: url("./images/main_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

#loginscreen {
    background-position: 0px 0px;
    background-image: url("./images/main_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    opacity: .25;
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: none;
}

#cardscreen,
#summaryscreen,
#infoscreen {
    position: absolute;
    background-color: #101010;
    opacity: .25;
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 11;
}

.loginblock {
    font-family: STB;
    position: absolute;  
    top: 0; 
    left: 0px;
    width: 700px;
    height: 1114px;
}

.loginblock a {
    text-decoration: none;
    color: #ffde00;
}

.loginblock form {
    margin: 0px 65px 20px 65px;
    padding: 0;
}

span.ih {
    display: block;
    text-align:center;
    font-size: 20px;
}

.input { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    font-size: 22px;
    font-family: STB;
    color: #ffffff;
    width: 400px; 
    text-shadow: 2px 2px #000000;
    background: #c33880; 
    border-radius: 8px 8px;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 8px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#732d4b), to(#431a2f)); 
    background: -moz-linear-gradient(top, #732d4b, #431a2f);
}

.lab {
    display: block;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    margin-top: 10px;
    text-transform: uppercase;
}

.waiting {
    font-family: STB;
    color: #f2f2f2;
    text-align: center;
    display: block;
    position: absolute;
}

#formerror {
    color: #f00000;
}

sup {
    color: #e00000;
    cursor: pointer;
}

.btn-3d-sub {
    width: 340px; 
    display: block;
    margin: 0 auto 20px auto;
    height: 80px;
    font-size: 20px;
    text-transform: uppercase;
    font-family: STB;
    border-bottom: 5px solid #173814;
    border-top: none;
    border-left: none;
    border-right: none;
    background: linear-gradient(#357b12,#1d5801);
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 2px 10px #c0c0c0;
    transition: 150ms ease;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
}

.btn-3d-sub:active {
    border: none;
    border-bottom: 2px solid #5c1432;
    box-shadow: 0px 1px 5px grey;
    background: linear-gradient(#357b12,#1d5801);
    color: #ffffff;
}

.btn_cancel {
    background: linear-gradient(#991b1b,#490e0e);
}

.l_p {
    margin: 10px 50px 20px 50px;
    font-size: 24px;
    text-align: center;
    color: #ffffff;
}

h2 {
    margin: 20px 50px;
    text-align: center;
    font-size: 30px;
    line-height: 46px;
    font-weight: bold;
}

.admin p {
    color: #ffffff;
    line-height: 30px;
    font-size: 14px;
}

.admin {
    font-family: STB;
    color: #ffde00;
    font-size: 16px;
}

.l_h3 {
    margin: 10px 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #ffde00;
}

.infoblock {
    background-position: 0px 0px;
    background-image: url("./images/complete.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 200px;
    left: 686px;
    width: 676px;
    height: 856px;
}

.cardblock {
    background-position: 0px 0px;
    background-image: url("./images/card.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 358px;
    left: 231px;
    width: 1586px;
    height: 820px;
}

.levelheart1 {
    position: absolute;
    top: 45px;
    left: 115px;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.levelheart2 {
    position: absolute;
    top: 40px;
    left: 165px;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.levelheart3 {
    position: absolute;
    top: 45px;
    left: 215px;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.levelstar-1 {
    position: absolute;
    top: 145px;
    left: 11px;
    width: 110px;
    height: 110px;
    background-position: 0px 0px;
    background-image: url("./images/star1.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.levelstar-2 {
    position: absolute;
    top: 78px;
    left: 111px;
    width: 144px;
    height: 144px;
    background-position: 0px 0px;
    background-image: url("./images/star2.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.levelstar-3 {
    position: absolute;
    top: 20px;
    left: 247px;
    width: 202px;
    height: 202px;
    background-position: 0px 0px;
    background-image: url("./images/star3.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.levelstar-4 {
    position: absolute;
    top: 78px;
    left: 437px;
    width: 144px;
    height: 144px;
    background-position: 0px 0px;
    background-image: url("./images/star2.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.levelstar-5 {
    position: absolute;
    top: 145px;
    left: 560px;
    width: 110px;
    height: 110px;
    background-position: 0px 0px;
    background-image: url("./images/star1.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.crown {
    position: absolute;
    top: -36px;
    left: 136px;
    width: 101px;
    height: 77px;
    background-position: 0px 0px;
    background-image: url("./images/crown-grey.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.crownmatch {
    position: absolute;
    top: 20px;
    left: 880px;
    width: 101px;
    height: 77px;
    background-position: 0px 0px;
    background-image: url("./images/crown.png");
    background-repeat: no-repeat;
    background-size: cover;
}

#card_h3,
#summary_h3,
#levelinfo_h3 {
    margin: 0 0 10px 0;
    color: #ffffff;
    font-size: 64px;
    font-weight: bold;
    font-family: SSB;
}

#card_p,
#summary_p,
#levelinfo_p {
    margin: 0 0 5px 0;
    color: #dbbb3c;
    font-size: 48px;
    font-weight: bold;
    font-family: SSB;
}

#card_h3 {
    font-size: 80px;
}

#card_p {
    font-size: 64px;
}

.levelinfo {
    position: absolute;
    text-align: center;
    top: 257px;
    left: 18px;
    width: 640px;
    height: 420px;
    scrollbar-width: none;
    overflow-y: auto;
}

#cardinfo {
    position: absolute;
    text-align: center;
    top: 100px;
    left: 16px;
    width: 1554px;
    height: 500px;
    scrollbar-width: none;
    overflow-y: auto;
}

#launch {
    background-position: 0px 0px;
    background-image: url("./images/launch.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
}

#loader {
    position: absolute;
    top: 920px;
    left: 710px;
    width: 600px;
    height: 20px;
    border: 1px solid #f9e303;
}

#stars {
    position: absolute;
    bottom: 40px;
    left: 350px;
    width: 340px;
    height: 32px;
}

.bs-1 {
    left: 0px;
}
.bs-2 {
    left: 60px;
}
.bs-3 {
    left: 120px;
}
.bs-4 {
    left: 180px;
}
.bs-5 {
    left: 240px;
}

#progressbar {
    background-position: 0px 0px;
    background-image: url("./images/progressbar.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 32px;
    left: 100px;
    width: 800px;
    height: 79px;
}

.mediaprogress {
    position: relative;
    top: 20px;
    left: 34px;
    height: 28px;
    width: 0px;
    border-radius: 10px 10px;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(4,102,6,1) 43%, rgba(85,255,125,1) 100%);
}

.gameprogress {
    position: relative;
    top: 20px;
    left: 34px;
    height: 28px;
    width: 0px;
    border-radius: 10px 10px;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 43%, rgba(0,212,255,1) 100%);
}

.progress {
    position: absolute;
    top: 1px;
    display: inline-block;
    width: 0%;
    height: 19px;
    margin: 0 auto;
    padding: 0;
    background-color: #000000;
}

#gamescreen {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#levels {
    display: none;
    opacity: 0;
    background-color: #000000;
}

.levelrow {
    background-color: #1d1006;
    background-position: left bottom;
    background-image: url("./images/level_shelf.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px;
    width: 100%;
    position: relative;
}

#addword {
    width: 820px;
    height: 560px;
    left: 1218px;
    top: -560px;
    z-index: 115;
    position: absolute;
    background-position: 0px 0px;
    background-image: url("./images/addword.png");
    background-repeat: no-repeat;
    background-size: cover;
    font-family: STB;
    text-align: center;
}

.aw {
    display: block;
    margin: 5px 20px;
    color: #f2f2f2;
    font-size: 38px;
}

.awi {
    display: block;
    margin: 5px 55px;
    font-size: 24px;
    color: #ffffff;
}

.awl {
    margin-top: 20px;
    color: #fdfd00;
    font-weight: bold;
    text-align: center;
    display: block;
    font-size: 30px;
    cursor: pointer;
}

#privacy {
    display: none;
    height: 100%;
}

img.levellocked {
    width: 263px;
    height: 444px;
}

div.head {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
}

div.leveldata {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    height: 1336px;
    min-height: 1336px;
    max-height: 1336px;
    font-size: 50px;
    line-height: 60px;
}

span.infokey {
    display: block;
    font-family: DSB;
    font-weight: bold;
    position: absolute;
    text-align: center;
    color: #1effe7;
    cursor: pointer;
    z-index: 100;
}

span.bubblekey {
    display: block;
    font-family: STB;
    font-weight: bold;
    position: absolute;
    text-align: center;
}

img.levelstar1 {
    position: absolute;
    left: 61px;
    top: 161px;
    width: 32px;
    height: 34px;
}

img.levelstar5 {
    position: absolute;
    left: 278px;
    top: 161px;
    width: 32px;
    height: 34px;
}

img.levelstar2 {
    position: absolute;
    left: 103px;
    top: 174px;
    width: 42px;
    height: 44px;
}

img.levelstar4 {
    position: absolute;
    left: 233px;
    top: 174px;
    width: 42px;
    height: 44px;
}

img.levelstar3 {
    position: absolute;
    left: 158px;
    top: 174px;
    width: 59px;
    height: 60px;
}

img.locked {
    width: 377px;
    height: 254px;
}

div.levelfooter {
    width: 377px;
    height: 254px;
    position: absolute;
    bottom: 0; left: 0;
    background-position: 0px 0px;
    background-image: url("./images/level_footer.png");
    background-repeat: no-repeat;
    background-size: cover;
}

span.yourjob {
    text-align: center;
    display: block;
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    font-family: SSB;
    font-weight: bold;
    font-size: 42px;
    color: #ffffff;
}

span.collect {
    text-align: center;
    display: block;
    position: absolute;
    top: 112px;
    left: 0;
    width: 100%;
    font-family: SSB;
    font-weight: bold;
    font-size: 32px;
    color: #ffffff;
}

div.data {
    background-position: 0px 0px;
    background-image: url("./images/sub_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    height: 1336px;
    min-height: 1336px;
    max-height: 1336px;
    font-size: 32px;
    line-height: 70px;
}

#gamedata {
    background-position: 0px 0px;
    background-image: url("./images/sub_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    left: 0px;
    top: 0px;
    overflow: hidden;
    width: 2048px;
    min-width: 2048px;
    max-width: 2048px;
    height: 1336px;
    min-height: 1336px;
    max-height: 1336px;
    position: relative;
}

.curtain {
    background-color: #101010;
    opacity: .7;
    width: 100%;
    height: 100%;
    position: absolute;
}

.panel p {
    padding: 10px 5px;
    margin: 74px 30px;
    text-align: center;
    color: #efe356;
}

.panel {
    background-position: 0px 0px;
    background-image: url("./images/panel.png");
    background-repeat: no-repeat;
    background-size: cover;
/*
    border: 2px solid #101010;
    background-color: #ffffff;
    border-radius: 10px 10px;
*/
    overflow: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    position: absolute;
    width: 1000px;
    height: 600px;
    font-weight: normal;
    font-family: STB;
    font-size: 28px;
}

.democurtain {
    background-color: #101010;
    opacity: .1;
    width: 100%;
    height: 100%;
    position: absolute;
}

.wordbox {
    position: absolute;
    font-size: 30px;
    width: 566px;
    height: 900px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    font-family: STB;
    font-size: 30px;
    color: #ffffff;
}

div.data p {
    color: #e75311;
    text-align: justify;
    padding: 5px;
    font-family: STB;    
}

span.title {
    display: block;
    color: #e75311;
    font-family: SSB;
    font-weight: bold;
    font-size: 90px;
    line-height: 90px;  
    text-align: center;  
}

img.button {
    width: 400px;
    height: 196px;
}

img.button1 {
    width: 360px;
    height: 176px;
}

img.button2 {
    width: 328px;
    height: 161px;
}

.go_home {
    cursor: pointer;
}

.ButtonText {
    display: block;
    font-family: SSB;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.Buttons {
    position: absolute;
    right: 35px;
    cursor: pointer;
}

.playButton {
    top: 120px;
    width: 622px;
    height: 305px;
}

.infoButton {
    top: 500px;
    width: 498px;
    height: 244px;
}

.demoButton {
    top: 800px;
    width: 498px;
    height: 244px;
}

.loginButton {
    top: 1100px;
    width: 498px;
    height: 244px;
}

.gamebar {
    width: 1000px;
    height: 196px;
    float: left;
    position: relative;
    text-align: center;
}

img.bluestar {
    width: 40px;
    height: 40px;
    position: absolute;
}

.gamebutton {
    width: 360px;
    height: 176px;
    float: left;
    position: relative;
    text-align: center;
}

.gamebuttonsmall {
    width: 328px;
    height: 161px;
    top: 10px;
    float: left;
    position: relative;
    text-align: center;
}

.smallbutton {
    color: #bbf606;
    display: block;
    position: absolute;
    font-family: SSB;
    font-weight: bold;
    font-size: 60px;
    text-align: center;
    width: 100%;
    top: 48px; left: 0;
    cursor: pointer;
}

.backbutton {
    display: block;
    position: absolute;
    font-family: SSB;
    font-weight: bold;
    font-size: 66px;
    color: #26d4f9;
    text-align: center;
    width: 100%;
    top: 56px; left: 0;
    cursor: pointer;
}

.back {   
    float: left;
    width: 360px;
    height: 176px;
    position: relative;
    text-align: center;
}

.backfull {   
    width: 1586px;
    bottom: 16px;
    height: 200px;
    position: absolute;
    text-align: center;
}

.backlarge {   
    width: 676px;
    bottom: 16px;
    height: 200px;
    position: absolute;
    text-align: center;
}

.backsmall1 {   
    float: left;
    width: 338px;
    bottom: 16px;
    height: 157px;
    position: absolute;
    text-align: center;
}

.backsmall2 {   
    float: left;
    width: 338px;
    bottom: 16px;
    left: 339px;
    height: 157px;
    position: absolute;
    text-align: center;
}

.p20 {
    height: 600px;
    float: left;
    width: 402px;
    position: relative;
    text-align: center;
}

.p25 {
    height: 100%;
    float: left;
    width: 25%;
}

.p50 {
    float: left;
    width: 50%;
}

/* Bubble colors */
span.blue {
    color: #0000e0;
}

span.black {
    color: #000000;
}

span.red {
    color: #e00000;
}