/*--------------------------------------------------
 *   css/ads.css - ../game/css/ads.css
 */
.ad-big-ad {
display: block;
width: 15.2em;
height: 28.8em;
margin: 0 0.5em;
text-align: center;
text-shadow: 0.3em 0.2em 0.3em #333;
line-height: 2.3em;
}

#subtle-message-content .ad-big-ad span {
    font-size: 2.3em;
}

#subtle-message-content .ad-text span {
    font-size: 2.2em;
}

.ad-board {
    background: url(../i/ad-board.png) top left no-repeat;
    background-size: 100%;
}
.ad-sakura {
    background: url(../i/ad-sakura.png) top left no-repeat;
    background-size: 100%;
}
.ad-paco {
    background: url(../i/ad-paco.png) top left no-repeat;
    background-size: 100%;
}
    
.tshirt-image {
    width: 6.95em;
    height: 6.95em;
}

.social-image {
    width: 4em;
    height: 4em;
    margin: 0 .5em;    
}

#social-text {
    text-align:center; 
    font-size: 2.2em;    
}

#webstore-image {
    width: 7.5em;    
}

.twitter-tweet {
min-width: 18.5em !important;
margin: -0.6em !important;
max-height: 100em;
}

/*--------------------------------------------------
 *   css/background.css - ../game/css/background.css
 */
/*
 *  BACKGROUND ELEMENTS AND ORNAMENTALS
 */

.background-image { /* bordering leaves class */
    position: absolute;
    transition: left 1s ease-in-out, top 1s ease-in-out, right 1s ease-in-out, bottom 1s ease-in-out, opacity 1s linear;
}

#bgTL1 {
    z-index:30;
    left: -30em;
    top: 0;
    width: 27em;
    height: 37.1em;
}
#bgL {
    z-index:31;
    left: -25em;
    bottom: 10%;
    width: 15em;
    height: 16.3em;
}
#bgTL2 {
    z-index:32;
    left: -21.8em;
    top: 0;
    width: 21.8em;
    height: 67.2em;
}
#bgTR1 {
    z-index:33;
    right: -42.7em;
    top: 0;
    width: 39.7em;
    height: 31.6em;
}
#bgSBR {
    right: -40.9em;
    bottom: 0;
    width: 40.9em;
    height: 52.5em;
}
#bgSBL {
    left: -40.9em;
    bottom: 0;
    width: 40.9em;
    height: 52.5em;
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
#bgSTR {
    right: -40.9em;
    top: 0;
    width: 40.9em;
    height: 52.5em;
    -webkit-transform: scale(1, -1);
    -moz-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    transform: scale(1, -1);
    opacity: 0.65;
}
#bgSTL {
    left: -40.9em;
    top: 0;
    width: 40.9em;
    height: 52.5em;
    -webkit-transform: scale(-1, -1);
    -moz-transform: scale(-1, -1);
    -ms-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    transform: scale(-1, -1);
    opacity: 0.65;
}
#bgGlow {
    z-index: 34;
    left: 0;
    top: 0;
    width: 100%;
    height: 75%;
    opacity: 0;
}
#bgT {
    z-index:35;
    left: 50%;
    top: -8.2em;
    width: 57.9em;
    height: 8.2em;
    margin-left: -27em;
}
#bgBL {
    z-index:36;
    left: -40.9em;
    bottom: 0;
    width: 40.9em;
    height: 52.5em;
}
#bgTR2 {
    z-index:37;
    right: -36.4em;
    top: 0;
    width: 36.4em;
    height: 57.8em;
}
#bgTL3
{
    z-index:38;
    left: -35.6em;
    top: 0;
    width: 35.6em;
    height: 75.7em;
}
#bgTR3
{
    z-index:39;
    right: -26.4em;
    top: 0;
    width: 26.4em;
    height: 75.7em;
}


/*--------------------------------------------------
 *   css/browsers.css - ../game/css/browsers.css
 */
#browsers {margin: 5px 0px; padding: 0; width: 360px; height: 72px;}
#browsers li {float: left; margin: 0; padding: 0; list-style: none;}
#browsers a {height: 72px; width: 72px; display: block;}
#browsers span {display: none;}
.opera {background: url('../i/browsers.png') -216px 0px no-repeat;}
.firefox {background: url('../i/browsers.png') -144px 0px no-repeat;}
.chrome {background: url('../i/browsers.png') -72px 0px no-repeat;}
.safari {background: url('../i/browsers.png') 0px 0px no-repeat;}
.ie-icon {background: url('../i/browsers.png') -288px 0px no-repeat;}

/* Chrome Frame install info z-index needs to be higher */
.xdgcfinstall-dlg,.xdgcfinstall-dlg-bg {
    z-index: 4000;
}

/*--------------------------------------------------
 *   css/button-bar.css - ../game/css/button-bar.css
 */
#button-bar
{
    position: absolute;
    top: 0;
    right: 0;
    width: 19.8em;
    height: 4.5em;
    z-index: 2005; 
    background: url(../i/bar.png) no-repeat;
    background-size: 100% 100%;
}

.button-bar-button
{
    position: absolute;
    width: 3em;
    height: 3.1em;
}

#sfx-button
{
    top: 0.7em;
    left: 1.3em;
}
#music-button
{
    top: 0.7em;
    left: 6.1em;
}
#log-in-button
{
    top: 0.7em;
    left: 11.1em;
}
#bb-menu-button
{
    top: 0.7em;
    left: 11.1em;
    display: none;
}

#gopher-button
{
    left: 15.3em;
    top: 0.6em;
}

#sfx-on 
{
    visibility: hidden;
}
#music-on 
{
    visibility: hidden;
}
.logged-out #log-in-on {
    visibility: hidden;
}
.logged-in #log-in-on {
    visibility: visible;
}
#bb-menu-on 
{
    visibility: hidden;
}


/***********************************************************************
*MOBILE
***********************************************************************/
 
.mobile #button-bar {
    right: -6.37em;
    width: 25.74em;
    height: 5.85em;
    transition: right .5s ease-in-out;
}

.mobile .button-bar-button
{
    width: 3.9em;
    height: 4.03em;
}

.mobile #sfx-button
{
    top: 0.91em;
    left: 1.69em;
}

.mobile #music-button
{
    display: none;
}

.mobile #log-in-button
{
    top: 0.91em;
    left: 7.93em;
}

.mobile #bb-menu-button
{
    top: 0.91em;
    left: 14.43em;
    display: block;
}

.mobile #gopher-button
{
    display: none;
}


/*--------------------------------------------------
 *   css/buy-page.css - ../game/css/buy-page.css
 */
/*Expansion Buy Page*/

#buy-page
{
    background: url('../i/bg-highscores.png') center center no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 96.6em;
    height: 64.8em;
    margin-left: -48.3em;
    margin-top: -32.4em;
    z-index: 2010;
    opacity: 0;
    display: none;
    color: white;
    
    transition: opacity 1s ease-in-out;
}

#buy-page-exit-button
{
    position: absolute;
    right: 1.5em;
    top: 10em;
    width: 5.4em;
    height: 5.3em;
}

#buy-page-exit-button:hover .button-hover
{
    opacity: 1;
    cursor: pointer;
}

#title-panel
{
    position: absolute;
    left: 8.5em;
    top: 11em;
    text-align: center;
    height: 10em;
}

#buy-page-title
{
    width: 100%;
    text-align: center;
    font-size: 4.5em;
    white-space: nowrap;
}

#buy-page-title-underline
{
    position: absolute;
    width: 27em;
    margin-left: -13.5em;
    left: 50%;
    top: 1.7em;
}

#detail-panel-divider {
    position: absolute;
    display: block;
    width: 11.7em;
    height: 5.3em;
    left: 20.5em;
    top: 44em;
    
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

#buy-page-divider {
    position: absolute;
    display: block;
    width: 49.4em;
    height: 6.3em;
    left: 15.3em;
    top: 34em;
    
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}



#button-panel {
    position: absolute;
    left: 2em;
    top: 17em;
}

.buy-page-menu-button:hover .button-hover
{
    opacity: 1;
    cursor: pointer;
}

.button-hidden
{
    display: none;
}

.buy-page-menu-button {
    width: 36.6em;
    margin-bottom: -1.8em;
    height: 8.3em;
    position: relative;
    line-height: 8em;
}

.buy-page-menu-button-text {
    position: absolute;
    width: 100%;
    top: 0;
    font-size: 2.6em;
    color: white;
    text-align: center;
    text-shadow: 0 0.2em 0.3em black;
}

.buy-page-button-icon {
    cursor: pointer;
    width: 17%;
    height: 76%;
    position: absolute;
    left: 3%;
    top: 11.4%;
}

.buy-page-button-icon-faded {
    cursor: pointer;
    width: 17%;
    height: 76%;
    position: absolute;
    left: 3%;
    top: 11.4%;
    opacity: .2;
}

#detail-panel
{
    position: absolute;
    width: 55em;
    height: 54em;
    left: 40.7em;
    top: 10.7em;
}

#buy-details-title
{
    font-size: 3em;
    font-weight: bold;
    position: absolute;
    width: 100%;
    text-align: center;
    top: .3em;
    
    /*
    font-size: 2.5em;
    font-weight: bold;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0.3em;
    */
}

#buy-details-subtitle
{
    font-size: 2em;
    height: 4%;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 2.2em;
}

.buy-details-icon
{
    position: absolute;
    height: 10em;
    width: 10em;
    top: -1em;
    left: -1.7em;
}

#expansion-image-clip
{
    position: absolute;
    width: 50em;
    height: 33em;
    top: 7.6em;
    margin-left: -25em;
    left: 50%;
    overflow: hidden;
}

#expansion-image {
    position: absolute;
    height: 100%;
    top: 0em;
    left: 0em;
    
    transition: left .5s ease-in-out;
}

#expansion-image-bar {
    width: 100%;
    line-height: 2em;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: top .5s ease-in-out;
}

#expansion-image-bar-text
{
    font-size: 2em;
    padding-left: 2.6em;
    text-align: center;
    padding-right: 2.6em;
    padding-bottom: .5em;
    padding-top: .5em;
    position: relative;
}

#expansion-image-bar-bg
{
    background: black;
    opacity: 0.55;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

#expansion-chooser
{
    position: absolute;
    top: 36.8em;
    width: 100%;
    z-index: 1;
}

#expansion-chooser table
{
    margin: auto;
}

#expansion-chooser .selection-box-window-outer
{
    width: 40em;
    visibility: hidden;
}

#tied-to-account
{
    font-size: 1.7em;
    line-height: 1em;
    bottom: 1.4em;
    position: absolute;
    text-align: center;
    width: 21em;
    left: 1.3em;
}

#login-message
{
    text-align: center;
    top: 41.5em;
    position: absolute;
    width: 100%;
    height: 12em;
}

#trial-message
{
    text-align: center;
    top: 41.5em;
    position: absolute;
    width: 25em;
    height: 12em;
    right: 2.5em;
}

#buy-message
{
    text-align: center;
    top: 41.5em;
    position: absolute;
    width: 25em;
    height: 12em;
    left: 2.5em;
}

#buy-page-purchase-for
{
    position: absolute;
    top: 0;
    font-size: 2em;
    width: 100%;
}

#buy-buttons-box
{
    top: 2.5em;
    position: absolute;
    width: 100%;
    height: 12em;
}

#buy-page-try-trial
{
    position: absolute;
    top: 0;
    font-size: 2em;
    width: 100%;
    line-height: 1em;
}

#buy-page-trial-button, #buy-page-buy-button {
    position: absolute;
    width: 14.2em;
    height: 5.1em;
    left: 50%;
    top: 4.2em;
    margin-left: -7.2em;
}

#buy-page-trial-button:hover .button-hover, #buy-page-buy-button:hover .button-hover {
    opacity: 1;
    cursor: pointer;
}

.buy-page-trial-button-text, .buy-page-buy-button-text {
    position: absolute;
    width: 100%;
    top: 0.3em;
    font-size: 2.6em;
    color: white;
    text-align: center;
}

.buy-page-sample-1
{
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 1.9em;
    line-height: 1em;
    top: 0em;
}

.buy-page-sample-2
{
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 1.9em;
    line-height: 1em;
    top: 1.5em;
}

.highlighted-text
{
    color: #00FFD6;
}

.login-button
{
    height: 2em;
    top: 3em;
    width: 7.1em;
    position: absolute;
}

#buy-page-PPP {
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -75px;
}

#buy-page-PPP-img {
    position: absolute;
}

#buy-page-cio-button {
position: absolute;
width: 35.2em;
height: 8.1em;
left: 50%;
top: 1.2em;
line-height: 8.1em;
margin-left: -17.3em;
}



/*--------------------------------------------------
 *   css/create-shortcut.css - ../game/css/create-shortcut.css
 */
.add-to-homescreen {
    background: rgba(0, 0, 0, 0.65);
    border-right: .1em solid #999;
    position: absolute;
    width: 20em;
    z-index: 1500;
    transition: top 1s ease-in-out, bottom 1s ease-in-out;
    font-size: 2em;
    color: #fff;
    padding: 1em;
    line-height: 1.5em;
}

.add-to-homescreen img {
    width: 1.5em;
}

.add-to-homescreen.ipad {
    border-radius: 0 0 1em 0;
    border-bottom: .1em solid #AAA;
    top: -40em;
    left: 0;
}
.add-to-homescreen.ipad.slide-in {
    top: 0;
    left: 0;
}

.add-to-homescreen.ipod {
    border-radius: 0 1em 0 0;
    border-top: .1em solid #AAA;
    bottom: -40em;
    left: 0;
}
.add-to-homescreen.ipod.slide-in {
    bottom: 0;
    left: 0;
}


/*--------------------------------------------------
 *   css/dialog.css - ../game/css/dialog.css
 */
#dialog
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40.5em;
    height: 54.5em;
    margin: -27.2em 0 0 -20.2em;
    z-index: 2010;
    opacity: 0;
    display: none;
    transition: opacity 1s ease-in-out;
    background: url(../i/dialog-box.png) center center no-repeat;
    background-size: 100% 100%;
}

#dialog-content
{
    margin: 10em 2.2em 2.2em 2.2em;
    height: 42em;
    text-align: center;
    color: white;
    line-height: 1.1em;
}
      
      
/*RETURN BUTTON*/
      
.return {
    cursor: pointer;
    width: 5.4em;
    margin: 0;
    height: 5.3em;
    position: absolute;
    right: 0.5em;
    top: 2em;
    line-height: 5.4em;
    text-align: center;
    z-index: 3000;
    transition: opacity .5s ease-in-out;
    background: url(../i/exit.png) left center no-repeat;
    background-size: 200%;
}

.return a
{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .5s ease-in-out;
    opacity: 0.01;
    background: url(../i/exit.png) right center no-repeat;
    background-size: 200%;
}

.return a:hover, .return a:active 
{
  opacity: 1;
}      
      
/*RANDOM BUTTONS*/
      
.main-button-fake {
    width: 36.6em;
    margin: -1.2em auto;
    height: 8.3em;
    text-shadow: .2em .2em .3em #333333;
    color: #ffffff;
    background: url(../i/button_default1.png) center center no-repeat;
    background-size: 100% 100%;
}
.main-button-real {
    background: url(../i/button_roll.png) center center no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 36.6em;
    margin: -1.2em auto;
    height: 8.3em;
    text-shadow: .2em .2em .3em #333333;
    color: #ffffff;
    transition: opacity 0.3s ease-in-out;
    opacity: 0.01;
}
.main-button-real:hover, .main-button-real:active {
        background: url(../i/button_roll.png) center center no-repeat;
        background-size: 100% 100%;
          width: 36.6em;
          margin: -1.2em auto;
        height: 8.3em;
        text-shadow: .2em .2em .3em #333333;
        color: #ffffff;
        transition: opacity 0.3s ease-in-out;
        opacity: 1;
}

.new-main-button-fake
{
          width: 36.6em;
          margin: -1.2em auto;
        height: 8.3em;
        text-shadow: .2em .2em .3em #333333;
        color: #ffffff;
        background: url(../i/button-new-no-text.png) center center no-repeat;
        background-size: 100% 100%;
        position: relative;
}
.new-main-button-real {
    background: url(../i/button-new-highlight-no-text.png) center center no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 36.6em;
    margin: -1.2em auto;
    height: 8.3em;
    text-shadow: .2em .2em .3em #333333;
    color: #ffffff;
    transition: opacity 0.3s ease-in-out;
    opacity: 0.01;
    position: relative;
}
.new-main-button-real:hover, .new-main-button-real:active {
    background: url(../i/button-new-highlight-no-text.png) center center no-repeat;
    background-size: 100% 100%;
    width: 36.6em;
    margin: -1.2em auto;
    height: 8.3em;
    text-shadow: .2em .2em .3em #333333;
    color: #ffffff;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    position: relative;
}
      
.main-button-text
{
    font-size: 3em;
    line-height: 2.7em;
}      
      
.dialog-menu {
    position: absolute;
    width: 40.5em;
    height: 42em;
    bottom: 1.6em;
    left: 0;
}      
      
/******************************************************************************************************************************
CONTENT BELOW HERE
******************************************************************************************************************************/      
      
/*ABOUT*/      

#about-gopherwood
{
    width: 31.1em;
    height: 9.3em;    
}

.about-line
{
    width: 29.3em;
    height: 6.3em;    
    margin: -1.5em 0 -1em 0;
}

#about-jp {
height: 4.8em;
width: 15.6em;
}

#about-omni
{
    width: 17.8em;
    height: 9em;    
}

#about-filler
{
    width: 100%;
    height: 9em;    
}

#about-blog
{
    width: 6.9em;
    height: 8.3em;    
}

.about-dialog-menu /*THIS FOLLOWS THE DIALOG MENU ON PURPOSE! DONT MOVE IT ABOVE IT*/
{
    height: 9em;
}



/* ARE YOU SURE */

.are-you-sure-text
{
    margin-top: 5.5em;
    font-size: 3em;
    line-height: 1em;
}

.are-you-sure-dialog-menu /*THIS FOLLOWS THE DIALOG MENU ON PURPOSE! DONT MOVE IT ABOVE IT*/
{
    height: 16em;
}


/* Instructions */

.youtube-player {
    display: block;
    width: 36em;
    height: 23.2em;    
}

.youtube-instructions-dialog-menu /*THIS FOLLOWS THE DIALOG MENU ON PURPOSE! DONT MOVE IT ABOVE IT*/
{
     height: 9em;
}

#youtube-bar 
{
    width: 29.3em;
    height: 6.3em;
}

/* SUBMIT SCORE */

.submit-score-dialog-menu  /*THIS FOLLOWS THE DIALOG MENU ON PURPOSE! DONT MOVE IT ABOVE IT*/
{
    height: 16em;
}

.submit-score-text
{
    font-size: 3em;
    line-height: 0.9em;
}

#submit-score-small-text
{
    font-size: 2em;
    line-height: 1em;
}

/* NAME CHOOSER */
#name-chooser-text
{
    font-size: 3em;
    line-height: 0.9em;
}

.name-chooser-dialog-menu  /*THIS FOLLOWS THE DIALOG MENU ON PURPOSE! DONT MOVE IT ABOVE IT*/
{
    height: 16em;
}

.name-chooser-chooser table
{
    margin: auto;
}

/* LOGIN FOR PURCHASE */
#login-purchase-text
{
    font-size: 2.2em;
    line-height: 1em;
}

#login-purchase-small-text
{
    font-size: 2em;
    line-height: 1em;
}

.login-purchase-dialog-menu  /*THIS FOLLOWS THE DIALOG MENU ON PURPOSE! DONT MOVE IT ABOVE IT*/
{
    height: 16em;
}

/*INSTRUCTIONS*/

.instructions
{
    font-size:   1.8em;
    line-height: 0.9em;
}

/*--------------------------------------------------
 *   css/effects.css - ../game/css/effects.css
 */
.moving-score {
position: absolute;
width: 3em;
height: 0.2em;
top: -0.1em;
left: -1.5em;
line-height: 0.2em;
text-align: center;
color: #fff582;
text-shadow: 0 0 0.1em #000;
font-size: 6em;
z-index: 220;
pointer-events: none;
}

.explosion {
position: absolute;
width: 200px;
height: 200px;
top: -100px;
left: -100px;
text-align: center;
color: rgba(255,255,255,0);
z-index: 100;
pointer-events: none;
}
.sparks-1 {
    background: url('../i/sparks1.png') no-repeat;
    background-size: 100% 100%;
}
.sparks-2 {
    background: url('../i/sparks2.png') no-repeat;
    background-size: 100% 100%;
}
.transform-05s-transition {
    transition: transform 0.5s ease-in;
}
.transform-1s-transition {
    transition: transform 1s ease-out;
}
.transform-fade-2s-transition {
    transition: transform 2s ease-out, opacity 2s ease-in;
}


/*--------------------------------------------------
 *   css/language.css - ../game/css/language.css
 */
/* Slayer for languages that support it */
@font-face {
    font-family: 'slayer';
    font-style: normal;
    font-weight: normal;
    src: url('../f/slayer.ttf');
}
@font-face {
    font-family: 'slayer';
    font-style: normal;
    font-weight: normal;
    src: url(http://:/) format("No-IE-404"), url('../f/slayer.ttf') format('truetype');
}

.en-US .main-menu-button-text, .en-GB .main-menu-button-text, .id .main-menu-button-text, .fil .main-menu-button-text {
    font-family: slayer, Fontin-SmallCaps, arial, sans serif;
    font-size: 2.2em;
    letter-spacing: 0.2em;
    font-variant: small-caps;
    word-spacing: -0.5em;
}
.en-US .side-menu-button-text, .en-GB .side-menu-button-text, .id .side-menu-button-text, .fil .side-menu-button-text {
    font-family: slayer, Fontin-SmallCaps, arial, sans serif;
    font-size: 2.2em;
    letter-spacing: 0.2em;
    font-variant: small-caps;
    word-spacing: -0.5em;
}
.en-US .vertical-text span, .en-GB .vertical-text span, .id .vertical-text span, .fil .vertical-text span {
    font-family: slayer,Fontin-SmallCaps,arial,sans serif;
    font-size: 1.6em;
    letter-spacing: .2em;
    font-variant: small-caps;
    word-spacing: -0.5em;
}


.fil #main-menu-title
{
    font-size: 2em;
    top: 21%;
}

.fil #mm-multiplayer-button .main-menu-button-text {
    font-size: 1.4em;
}

.fil #mm-more-maps-button .main-menu-button-text {
    font-size: 1.2em;
}
.id #mm-more-maps-button .main-menu-button-text {
    font-size: 1.7em;
}

.fil #mm-high-scores-button .main-menu-button-text {
    font-size: 1.4em;
}

.en-US #mm-about-button .main-menu-button-text, .en-GB #mm-about-button .main-menu-button-text, .id #mm-about-button .main-menu-button-text {
    font-size: 1.7em;
}
.et #mm-about-button .main-menu-button-text {
    font-size: 2.2em;
}
.fil #mm-about-button .main-menu-button-text {
    font-size: 1.4em;
}

.fil #sm-main-menu-button .side-menu-button-text, .fil #sm-get-the-music-button .side-menu-button-text, .fil #sm-other-devices-button .side-menu-button-text {
    font-size: 1.6em;
}
.tr #sm-get-more-maps-button .side-menu-button-text, .tr #sm-other-devices-button .side-menu-button-text {
    font-size: 2em;
}
.fil #sm-get-more-maps-button .side-menu-button-text {
    font-family: Fontin-SmallCaps,arial,sans serif;
    font-size: 1.8em;
    letter-spacing: 0;
    word-spacing: -0.2em;
}

.el #more-tab span, .tr #more-tab span {
    font-size: 1.2em;
    letter-spacing: -0.1em;
}
.et #more-tab span, .sr #more-tab span, .sl #more-tab span, .sk #more-tab span, .nl #more-tab span, .lt #more-tab span, .it #more-tab span, .hu #more-tab span, .hr #more-tab span, .hi #more-tab span, .ca #more-tab span, .de #more-tab span, .es #more-tab span {
    font-size: 1.7em;
}
.id #more-tab span, .fil #more-tab span {
    font-family: Fontin-SmallCaps,arial,sans serif;
    font-size: 1.2em;
    letter-spacing: -0.05em;
    word-spacing: 0;
}

/*--------------------------------------------------
 *   css/main-menu.css - ../game/css/main-menu.css
 */
/* Main Menu Background */

#main-menu-background {
    background: #000;
    padding: 0px;
    margin: 0px;
    position: absolute;
    z-index: 2000;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease-in-out;
}

#main-menu-background-image {
    position: absolute;
    top: 0;
    margin: 0 0 0 -69em;
    left: 50%;
    width: 137.9em;
    height: 80.5em;
}

#main-menu-background-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -36.7em 0 0 -37.3em;
    width: 74.6em;
    height: 13.6em;
}


/* Buttons */

.button-default {
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
}

.button-hover {
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

/* Main Menu Layout */

#main-menu {
    display: none;
    opacity: 0;
    padding: 0;
    margin: -24em 0 0 -24em;
    position: absolute;
    z-index: 2001;
    top: 50%;
    left: 50%;
    width: 48em;
    height: 72.4em;
    background: url(../i/menu_background.png) no-repeat;
    transition: opacity 1s ease-in-out;
    background-size: 100%;
}

.main-menu-page {
    position: absolute;
    width: 100%;
    top: 26%;    
    height: 47.1%;
    text-align: center;
}

.main-menu-button:hover .button-hover {
    opacity: 1;
    cursor: pointer;
}

.main-menu-button {
    width: 36.6em;
    margin: -1.2em auto;
    height: 8.3em;
    position: relative;
    line-height: 8.3em;
}

.main-menu-button-text {
    position: absolute;
    width: 100%;
    top: 0;
    font-size: 2.6em;
    color: white;
    text-align: center;
    text-shadow: 0 0.2em 0.3em black;
}

.hover-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;    
    opacity: .01;
    transition: opacity .2s ease-in-out;
}

#main-hover-container {
    position: absolute;
    height: 10em;
    width: 10em;
    left: 39.6%;
    top: -26.4%;
    z-index: 1;
}

#sub-hover-container {
    position: absolute;
    width: 10em;
    height: 10em;
    left: 10.5%;
    top: -31.5%;
    z-index: 1;
}

.main-menu-title {
    top: -24%;
    width: 100%;
    text-align: center;
    font-size: 3em;
    color: white;
    text-shadow: 0 0 .1em white,0 0 .4em white;
    position: absolute;
}

.main-menu-title-line {
    left: 23%;
    top: -23%;
    width: 24.7em;
    height: 6.3em;
    position: absolute;
}

.main-menu-back-button {
    left: 73%;
    top: -28%;
    width: 7.5em;
    height: 7.5em;
    position: absolute;
}

.main-menu-back-button:hover .button-hover {
    opacity: 1;
    cursor: pointer;
}

.nwjs #mm-more-maps-button { /* turn off extras for downloadable version. */
    display: none;
}

/*******************************************************************************************************************************
MOBILE DOWN HERE
*******************************************************************************************************************************/

.mobile #main-menu-background-logo {
    visibility: hidden;
    display: none;
}


.mobile #main-menu {
    display: none;
    opacity: 0;
    padding: 0;
    margin: -24em 0 0 -24em;
    position: absolute;
    z-index: 2001;
    top: 50%;
    left: 50%;
    width: 48em;
    height: 72.4em;
    background: url(../i/menu_background.png) no-repeat;
    transition: opacity 1s ease-in-out;
    background-size: 100%;
}

#menu-logo {
    width: 37.3em;
    height: 6.8em;
    left: 11%;
    top: -23%;
    position: absolute;
}

.mobile #main-hover-container {
    visibility: hidden;
    display: none;
}

.logged-out #mm-high-scores-button {
    display: none;
}

/*--------------------------------------------------
 *   css/menu.css - ../game/css/menu.css
 */
/*
 * Main menu
 */

.button {
    width: 36.6em;
    margin: 0 0 0 -18.3em;
    height: 8.3em;
    left: 50%;
    line-height: 8.3em;
    text-align: center;
    color: white;
    transition: opacity 1s ease-in-out;
    background: url(../i/button.png) no-repeat;
    background-size: 100% 100%;
}
.button a:link, .button a:visited {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    transition: opacity 0.3s ease-in-out;
    opacity: 0.01;
    background: url(../i/button-highlight.png) no-repeat;
    background-size: 100% 100%;
}
.button a:hover, .button a:active {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    background: url(../i/button-highlight.png) no-repeat;
    background-size: 100% 100%;
}


.button-real:link, .button-real:visited {
    background: url(../i/button-highlight-partial.png) center right no-repeat;
    display: block;
    width: 30.7em;
    margin: 0;
    height: 6.8em;
    line-height: 6.8em;
    text-align: center;
    transition: opacity 0.3s ease-in-out;
    opacity: 0.01;
}
.button-real:hover, .button-real:active {
    background: url(../i/button-highlight-partial.png) center right no-repeat;
    width: 30.7em;
    margin: 0;
    height: 6.8em;
    line-height: 6.8em;
    text-align: center;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.button-fake
{
      width: 30.7em;
      margin: 0;
    height: 6.8em;
    line-height: 6.8em;
    text-align: center;
    color: #ffffff;

    background: url(../i/button-partial.png) center right no-repeat;
}

.empty-button {
    width: 30.7em;
    margin: 0;
    height: 6.8em;
    line-height: 6.8em;
    text-align: center;
    transition: opacity 1s ease-in-out;
    background: transparent;
}

.logged-out #sm-scoreboard-button {
    visibility: hidden;
}

/*
 * NEW
 */
 
 .new
 {
     position: absolute;
     top: 20px;
     left: 20px;
     font-size: 0.7em;
     line-height: 1.5em;
 }
 








/*--------------------------------------------------
 *   css/page-swipe.css - ../game/css/page-swipe.css
 */
.page-swipe {
position: relative;
width: 34em;
height: 26em;
margin: 0 auto 2em auto;
overflow: hidden;

-webkit-box-shadow: inset 0 0 1.2em 0.6em rgba(0,0,0,0.8);
-moz-box-shadow: inset 0 0 1.2em 0.6em rgba(0,0,0,0.8);
-ms-box-shadow: inset 0 0 1.2em 0.6em rgba(0,0,0,0.8);
-o-box-shadow: inset 0 0 1.2em 0.6em rgba(0,0,0,0.8);
box-shadow: inset 0 0 1.2em 0.6em rgba(0,0,0,0.8);
}

.buy-page-swipe.page-swipe {
width: 52em;
height: 32.5em;
margin: 8em 0 0 1em;
}

.right-arrow {
background: url('../i/arrow-right.png') 95% 97% no-repeat;
background-size: 25%;
width: 50%;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
cursor: pointer;
}
.buy-page-swipe .right-arrow {
background: url('../i/arrow-right.png') 95% 97% no-repeat;
background-size: 18%;
}
.left-arrow {
background: url('../i/arrow-left.png') 5% 97% no-repeat;
background-size: 25%;
width: 50%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
cursor: pointer;
}
.buy-page-swipe .left-arrow {
background: url('../i/arrow-left.png') 5% 97% no-repeat;
background-size: 18%;
}

.page-swipe-slider {
position: absolute;
white-space: nowrap;
z-index: -1;

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

transition: all 0.5s ease-in-out;
}

.page-swipe div div {
width: 34em;
height: 26em;
position: relative;
display: inline-block;
}
.buy-page-swipe.page-swipe div div {
width: 52em;
height: 32.5em;
}

.page-swipe div div div {
background: rgba(0,0,0,0.6);
font-size: 2.5em;
color: white;
width: 100%;
height: 2em;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
line-height: 2em;
}
.buy-page-swipe.page-swipe div div div {
width: 100%;
height: 2em;
}

.ss-classic {
background: url('../i/ss-classic.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-classic {
background: url('../i/ss-classic.jpg') center center no-repeat;
background-size: 100%;
}

.ss-sakura-grove {
background: url('../i/ss-sakura-grove.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-sakura-grove {
background: url('../i/ss-sakura-grove.jpg') center center no-repeat;
background-size: 100%;
}

.ss-hanna-blossom {
background: url('../i/ss-hana-blossom.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-hanna-blossom {
background: url('../i/ss-hana-blossom.jpg') center center no-repeat;
background-size: 100%;
}

.ss-lotus-petal {
background: url('../i/ss-lotus-petal.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-lotus-petal {
background: url('../i/ss-lotus-petal.jpg') center center no-repeat;
background-size: 100%;
}

.ss-daily-challenge {
background: url('../i/ss-daily-challenge-new.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-daily-challenge {
background: url('../i/ss-daily-challenge-new.jpg') center center no-repeat;
background-size: 100%;
}

.ss-clover {
background: url('../i/ss-clover.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-clover {
background: url('../i/ss-clover.jpg') center center no-repeat;
background-size: 100%;
}

.ss-desert-trek {
background: url('../i/ss-desert-trek.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-desert-trek {
background: url('../i/ss-desert-trek.jpg') center center no-repeat;
background-size: 100%;
}

.ss-ephemeral-tranquility {
background: url('../i/ss-ephemeral-tranquility.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-ephemeral-tranquility {
background: url('../i/ss-ephemeral-tranquility.jpg') center center no-repeat;
background-size: 100%;
}

.ss-honeycomb {
background: url('../i/ss-honeycomb.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-honeycomb {
background: url('../i/ss-honeycomb.jpg') center center no-repeat;
background-size: 100%;
}

.ss-lovely {
background: url('../i/ss-lovely.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-lovely {
background: url('../i/ss-lovely.jpg') center center no-repeat;
background-size: 100%;
}

.ss-raceway {
background: url('../i/ss-raceway.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-raceway {
background: url('../i/ss-raceway.jpg') center center no-repeat;
background-size: 100%;
}

.ss-sakura-blossom {
background: url('../i/ss-sakura-blossom.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-sakura-blossom {
background: url('../i/ss-sakura-blossom.jpg') center center no-repeat;
background-size: 100%;
}

.ss-sakura-garden {
background: url('../i/ss-sakura-garden.jpg') center center no-repeat;
background-size: 140%;
}
.buy-page-swipe .ss-sakura-garden {
background: url('../i/ss-sakura-garden.jpg') center center no-repeat;
background-size: 100%;
}

/*
 * MULTIPLAYER
 */
 
.mini-menu-button {
display: inline-block;
width: 10em;
height: 10em;
position: relative;
margin: -1.4em;
cursor: pointer;
}

.mini-menu-button .mini-button-border {
position: absolute;
width: 100%;
height: 100%;
background: url('../i/menu-icons-2.png') 85.714% 100% no-repeat;
background-size: 800%;
}

.mini-button-border-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../i/menu-icons-2.png') 85.714% 66.667% no-repeat;
    background-size: 800%;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.mini-menu-button:hover .mini-button-border-hover {
opacity: 1;
}

.mini-menu-button .mini-button-players {
position: absolute;
width: 64%;
height: 64%;
top: 18%;
left: 18%;
}

.mini-menu-button .mini-button-players-hover {
    position: absolute;
    width: 64%;
    height: 64%;
    top: 18%;
    left: 18%;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.mini-menu-button:hover .mini-button-players-hover {
opacity: 1;
}

.mini-menu-button .mini-button-2 {
background: url('../i/menu-icons-2.png') 14.286% 100% no-repeat;
background-size: 800%;
width: 72%;
height: 72%;
top: 14%;
left: 14%;
}

.mini-menu-button .mini-button-2-hover {
background: url('../i/menu-icons-2.png') 14.286% 66.667% no-repeat;
background-size: 800%;
width: 72%;
height: 72%;
top: 14%;
left: 14%;
}

.mini-menu-button .mini-button-3 {
background: url('../i/menu-icons-2.png') 28.571% 100% no-repeat;
background-size: 800%;
width: 72%;
height: 72%;
top: 14%;
left: 14%;
}

.mini-menu-button .mini-button-3-hover {
background: url('../i/menu-icons-2.png') 28.571% 66.667% no-repeat;
background-size: 800%;
width: 72%;
height: 72%;
top: 14%;
left: 14%;
}

.mini-menu-button .mini-button-4 {
background: url('../i/menu-icons-2.png') 42.857% 100% no-repeat;
background-size: 800%;
}

.mini-menu-button .mini-button-4-hover {
background: url('../i/menu-icons-2.png') 42.857% 66.667% no-repeat;
background-size: 800%;
}

.mini-menu-button .mini-button-5 {
background: url('../i/menu-icons-2.png') 57.143% 100% no-repeat;
background-size: 800%;
}

.mini-menu-button .mini-button-5-hover {
background: url('../i/menu-icons-2.png') 57.143% 66.667% no-repeat;
background-size: 800%;
}

.mini-menu-button .mini-button-6 {
background: url('../i/menu-icons-2.png') 71.429% 100% no-repeat;
background-size: 800%;
}

.mini-menu-button .mini-button-6-hover {
background: url('../i/menu-icons-2.png') 71.429% 66.667% no-repeat;
background-size: 800%;
}

.mini-menu-button .mini-button-lock {
position: absolute;
width: 64%;
height: 64%;
top: 36%;
left: 36%;
background: url('../i/menu-icons-2.png') 100% 100% no-repeat;
background-size: 800%;
}


/*--------------------------------------------------
 *   css/play-again-panel.css - ../game/css/play-again-panel.css
 */
#pap-panel {
    position: absolute;
    left: 50%;
    bottom: -30em;
    width: 30em;
    height: 27em;
    margin-left: -15em;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 1.55em;
    border: .2em solid #591B17;
    transition: bottom 1s ease-in-out;
    z-index: 91;
    box-shadow: inset 0 -0.1em 0em 0.3em black,inset 0 -0.3em 2.5em 0.3em white;
}

.pap-button
{
    position: absolute;
    width: 11em;
    height: 11.4em;
}

.pap-button:hover .button-hover
{
    opacity: 1;
    cursor: pointer;    
}

.pap-arrow-icon-layer-default
{
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
}

.pap-arrow-icon-layer-hover {
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.pap-map-icon-layer-default
{
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
}

.pap-map-icon-layer-hover {
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}



#pap-play-again
{
    left: 10%;
    top: 5%;
}

#pap-change-map
{
    right: 10%;
    top: 4%;
}

.pap-banner {
    position: absolute;
    left: 5%;
    top: 50%;
    width: 27em;
    height: 9em;
    opacity: 1;
    transition: opacity .2s ease-in-out;
    cursor: pointer;
}

.pap-banner-img
{
    border-radius: 0.75em;
    box-shadow: 0 0 0.3em white, 0 0 0.8em white;
    width: 100%;
    height: 100%;
}

.pap-banner:hover .pap-banner-img
{
    box-shadow: 0 0 .3em #DB3636,0 0 .8em #DB3636;
}

.pap-banner-text
{
    position: absolute;
    top: 8%;
    color: white;
    font-size: 2em;
    text-shadow: 0em 0em 0.2em black, 0em 0em 0.2em black, 0em 0em 0.2em black;
    left: 2%;
    width: 81%;
}

/*--------------------------------------------------
 *   css/play-ui.css - ../game/css/play-ui.css
 */
/*
 * Scoring Panel
 */
#scores {
    text-align: left;
    position: absolute;
    top: -40em;
    left: 0;
    padding: 1em 1em 2em 1em;
    width: 22.2em;
    z-index: 80;
    color: #fff;
    background: url(../i/score_background.png) bottom left no-repeat;
    background-size: 100%;
    transition: height 1s ease-in-out, top 1s ease-in-out;
}
#single-score
     {
text-align: left;
font-size: 5em;
line-height: 0.8em;
top: 0.3em;
z-index: 95;
float: left;
margin-left: 0.2em;
     }
     .team-score
     {
font-size: 1.3em;
padding: 0;
margin: 0;
clear: both;
line-height: 1.5em;
     }
     
#score-title
{
    float: left;
    font-size: 2.6em;
    line-height: 1.5em;
}

#current-winner-text
{
       font-size: 2em;
       color: #FFDF82;
}
     
     #daily-challenge-title
     {
         font-size: 4.8em;
         color: #F9D23A;
         text-shadow: 0 0 0.1em black, 0 0 0.3em white, 0 .2em .3em black;
         margin: 0.5em 0 -0.5em 0;
     }
     
     
/*
 * SWAP Button
 */
 
#swap {
    position: absolute;
    width: 19.4em;
    height: 20.6em;
    z-index: 89;
    bottom: -21em;
    left: 0;
    background: url(../i/swap.png) top left no-repeat;
    background-size: 200%;
    transition: bottom 1s ease-in-out;
}

#swap-over {
    position: absolute;
    width: 19.4em;
    height: 20.6em;
    z-index: 91;
    bottom: -21em;
    left: 0;
    opacity: 0.01;
    background: url(../i/swap.png) top right no-repeat;
    background-size: 200%;
    cursor: pointer;
    transition: bottom 1s ease-in-out, opacity 0.3s ease-in-out;
}
#swap-over:hover, #swap-over:active {opacity: 1;}

.swap-text
{
top: 0.5em;
left: 0;
width: 95%;
text-align: center;
position: absolute;
font-size: 2.6em;
color: white;
}
#swap-over .swap-text{text-shadow: 0 0 0.3em white;}

      

 

/*
 * Rotate Buttons
 *  for mobile
 */

.rotate-button {
cursor: pointer;
position: absolute;
display: block;
top: -99px;
left: -90px;
width: 180px;
height: 198px;
z-index: 92;
opacity: 0.6;
}
.mobile .rotate-button {
top: 50%;
margin-top: -12em;
width: 13.5em;
height: 24em;
background: rgba(0, 0, 0, 0.5);
border-radius: .75em;
border: .2em solid #AAA;
opacity: 0.8;
}

.rotate-button canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    
    -webkit-transform: scale(0.8, 0.8) rotate(0deg) translateZ(0);
    -moz-transform: scale(0.8, 0.8) rotate(0deg) translateZ(0);
    -ms-transform: scale(0.8, 0.8) rotate(0deg);
    -o-transform: scale(0.8, 0.8) rotate(0deg);
    transform: scale(0.8, 0.8) rotate(0deg);
    
    transition: all 0.25s ease-in-out;
}

.rotate-button.right:hover canvas {
    -webkit-transform: scale(1, 1) rotate(15deg) translateZ(0);
    -moz-transform: scale(1, 1) rotate(15deg) translateZ(0);
    -ms-transform: scale(1, 1) rotate(15deg);
    -o-transform: scale(1, 1) rotate(15deg);
    transform: scale(1, 1) rotate(15deg);
}

.rotate-button.left:hover canvas {
    -webkit-transform: scale(1, 1) rotate(-15deg) translateZ(0);
    -moz-transform: scale(1, 1) rotate(-15deg) translateZ(0);
    -ms-transform: scale(1, 1) rotate(-15deg);
    -o-transform: scale(1, 1) rotate(-15deg);
    transform: scale(1, 1) rotate(-15deg);
}

.rotate-button.right:active canvas {
    -webkit-transform: scale(1, 1) rotate(30deg) translateZ(0);
    -moz-transform: scale(1, 1) rotate(30deg) translateZ(0);
    -ms-transform: scale(1, 1) rotate(30deg);
    -o-transform: scale(1, 1) rotate(30deg);
    transform: scale(1, 1) rotate(30deg);
}

.rotate-button.left:active canvas {
    -webkit-transform: scale(1, 1) rotate(-30deg) translateZ(0);
    -moz-transform: scale(1, 1) rotate(-30deg) translateZ(0);
    -ms-transform: scale(1, 1) rotate(-30deg);
    -o-transform: scale(1, 1) rotate(-30deg);
    transform: scale(1, 1) rotate(-30deg);
}

.mobile .rotate-button canvas {
    top: 50%;
    left: 50%;
    margin-top: -3.44em;
    margin-left: -3.8em;
    width:  6.88em;
    height: 7.6em;
}

.mobile .left {
    left: -1em;
}
.mobile .right {
    left: auto;
    right: -1em;
}


/*--------------------------------------------------
 *   css/progress-bar.css - ../game/css/progress-bar.css
 */
progress {
height: 5px;
width: 50%;
left: 122px;
top: 250px;
position: absolute;
}



/*--------------------------------------------------
 *   css/scoreboard.css - ../game/css/scoreboard.css
 */
 /*
  * SCOREBOARD
  */
.scoreboard {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96.6em;
    height: 65.1em;
    margin: -37em 0 0 -48.3em;
    z-index: 2100;
    opacity: 0;
    display: none;
    transition: opacity 1s ease-in-out;
    background: url(../i/bg-highscores.png) center center no-repeat;
    background-size: 100%;
}

      #scoreboard-content
      {
margin: 18em 2.2em 2.2em 2.2em;
text-align: center;
color: white;
      }
      #scoreboard-content table
      {
        margin: auto;
      }
      #scoreboard-content th
      {
        height: 4em;
        font-weight: normal;
      }
      #scoreboard-content th div
      {
        font-size: 2.8em;
        text-shadow: 0 0 0.2em white;
      }
      #scoreboard-content td
      {
        line-height: 4.2em;
        height: 4.2em;
      }
      #scoreboard-content h2 
      {
        font-size: 3em;
        line-height: 60px;
        margin: 0;
      }
      
      #scoreboard-content2
      {
margin: 2.2em;
text-align: center;
color: #fff;
      }
      #scoreboard-content2 th
      {
        height: 4em;
      }
      #scoreboard-content2 h2 
      {
        font-size: 3em;
        line-height: 2em;
        margin: 0;
      }
      
      
.scoreboard-player-results {
width: 25.4em;
color: black;
background: url(../i/field_lengths.png) center center no-repeat;
background-size: 23.4em;
}
.scoreboard-player-results div {font-size: 2.3em;}
      
      
.scoreboard-title
{
    top: 1.79em;
    width: 100%;
    text-align: center;    
    position: absolute;
    font-size: 5.6em;
    color: #ffffff;
    text-shadow: 0 0 0.15em #ffffff;
}

.selection-box-inside {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    color: black;
    transition: left 0.5s ease-in-out;
}

.selection-box-item
{
    width: 25.7em; height: 2.8em; line-height: 2.8em;
}

.selection-box-item span
{
    font-size: 2em;
}

#game-mode
{
position: absolute;
left: 40em;
top: 17em;
}
.selection-box-right-arrow, .selection-box-left-arrow {
cursor: pointer;
width: 4.1em;
height: 3.4em;
}
.selection-box-window-outer {
background: url(../i/field.png) center center no-repeat;
background-size: 100%;
}
.selection-box-window-inner {
margin: 0.4em; width: 25.5em; height: 2.8em; overflow: hidden; position: relative;    
}
#global-toggle
{
position: absolute;
left: 40em;
top: 21em;
}
#scoreboard-table
{
width: 90em;
height: 24em;
overflow: hidden;
position: absolute;
top: 29em;
left: 50%;
margin-left: -45em;
background: url(../i/menu_bg2.png) center bottom no-repeat;
background-size: 100%;
}
.scroll-table {
height: 24em;
width: 81em;
overflow-x: hidden;
overflow-y: scroll;
margin-left: 4.6em;
text-align: center;

scrollbar-arrow-color: #4E0303;
scrollbar-base-color: #4E0303;
scrollbar-track-color: #4E0303;
scrollbar-face-color: #C20000;
scrollbar-highlight-color: #FB2D00;
scrollbar-3dlight-color: #B32A06;
scrollbar-darkshadow-color: #B32A06;
scrollbar-shadow-color: #FB2D00;
}
.scroll-table table {
width: 76.7em;
}

#scoreboard-content2 td
{
line-height: 3.2em;
height: 3.2em;
}

.scoreboard-icon {
    width: 4.4em;
    background-size: 100%;
}
.icon-star {
background: url(../i/icon_star.png) center center no-repeat;
    background-size: 100%;
}
.icon-online {
background: url(../i/online.png) center center no-repeat;
    background-size: 100%;
}
.icon-offline {
background: url(../i/offline.png) center center no-repeat;
    background-size: 100%;
}
.icon-person-0 {
background: url(../i/red.png) center center no-repeat;
background-size: 2.8em;
}
.icon-person-1 {
background: url(../i/blue.png) center center no-repeat;
background-size: 2.8em;
}
.icon-person-2 {
background: url(../i/yellow.png) center center no-repeat;
background-size: 2.8em;
}
.icon-person-3 {
background: url(../i/green.png) center center no-repeat;
background-size: 2.8em;
}
.icon-person-4 {
background: url(../i/orange.png) center center no-repeat;
background-size: 2.8em;
}
.icon-person-5 {
background: url(../i/purple.png) center center no-repeat;
background-size: 2.8em;
}

.scoreboard-icon img {
width: 2.8em;
height: 2.8em;
vertical-align: middle;
border-radius: 1em;
box-shadow: 0 0 1em 0.1em #C8FFF8;
}

.scoreboard-rankings {
width: 8.7em;
background: url(../i/field_places.png) center center no-repeat;
background-size: 6.8em;
}
.scoreboard-rankings div {font-size: 2.8em;}

.scoreboard-player-titles {
width: 47.9em;
color: black;
background: url(../i/field_names.png) center center no-repeat;
background-size: 45.7em;
}
.scoreboard-player-titles.highlight {
background: url(../i/field_names_highlight.png) center center no-repeat;
    background-size: 48.7em;
}
.scoreboard-player-name
 {
     overflow: hidden;
     white-space: nowrap; 
     width: 46.7em; 
     margin: 0 auto;
 } 
.scoreboard-player-name div {font-size: 2.3em;}

.scoreboard-player-scores {
width: 16.7em;
color: black;
background: url(../i/field_small.png) center center no-repeat;
background-size: 14.5em;
}
.scoreboard-player-scores.highlight {
background: url(../i/field_small_highlight.png) center center no-repeat;
    background-size: 17.5em;
}
.scoreboard-player-scores div {font-size: 2.3em;}

.scoreboard-error {font-size: 2em;}

.hs-header
{
  position: absolute;
  top: 26em;
  height: 2.8em;
  line-height: 2.8em;
  display: block;
  text-align: center;
  text-shadow: -0.2em 0.1em 0.3em #222;
  color: #fff;
}
.hs-header span {
  font-size: 2.6em;
}
#hs-place
{
  left: 13.3em;
  width: 6.1em;
  background: url(../i/button_numberbar.png) center center no-repeat;
  background-size: 100%;
}
#hs-name
{
  left: 21.7em;
  width: 45.7em;
  background: url(../i/button_namebar.png) center center no-repeat;
  background-size: 100%;
}
#hs-score
{
  left: 69.4em;
  width: 14.3em;
  background: url(../i/button_scorebar.png) center center no-repeat;
  background-size: 100%;
}


  
 #scoreboard-mode
 {
position: absolute;
color: white;
font-size: 3em;
right: 19.2em;
top: 6.4em;
 }

#scoreboard-ad
{
position: absolute;
left: 6em;
top: 9.2em;
}

.scoreboard .return {
right: 1.8em;
top: 10.8em;
}

.scoreboard-icon.icon-exsampler, .scoreboard-icon.icon-extranquil, .scoreboard-icon.icon-exclassic {
background: url('../i/menu-icons-2.png') 71.429% 34% no-repeat;
background-size: 800%;
}

.scoreboard-icon.icon-excombo {
background: url('../i/menu-icons-2.png') 100% 66% no-repeat;
background-size: 800%;
}

.scoreboard-icon.icon-debugger {
background: url('../i/menu-icons-2.png') 57.143% 34% no-repeat;
background-size: 800%;
}

.scoreboard-icon.icon-developer {
background: url('../i/menu-icons-2.png') 0 34% no-repeat;
background-size: 800%;
}
#scoreboard-replay-button {
    right: 10em;
    bottom: 0em;
}

#scoreboard-maps-button {
    right: 0em;
    bottom: 0em;
}

#scoreboard2-replay-button {
    right: 10em;
    bottom: 0em;
}

#scoreboard2-maps-button {
    right: 0em;
    bottom: 0em;
}

.scoreboard-button {
    position: absolute; 
    width: 11em; 
    height: 11em;
    
}
.scoreboard-button-bg-default {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../i/menu-icons-2.png') 85.714% 100% no-repeat;  
    background-size: 800%;
}
.scoreboard-button-bg-hover {
    position: absolute;  
    width: 100%;  
    height: 100%;  
    background: url('../i/menu-icons-2.png') 85.714% 66.667% no-repeat;  
    background-size: 800%;  
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.scoreboard-button:hover .scoreboard-button-bg-hover {
    opacity: 1;    
}

.scoreboard-button-icon-replay-default {
    position: absolute;  
    width: 59%;  
    height: 56%;  
    background: url('../i/post-game-buttons.png') 0% 0% no-repeat;  
    background-size: 200%;
    top: 19%;
    left: 20%;
}

.scoreboard-button-icon-replay-hover {
    position: absolute;  
    width: 59%;  
    height: 56%;  
    background: url('../i/post-game-buttons.png') 100% 0% no-repeat;  
    background-size: 200%;
    top: 19%;
    left: 20%;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.scoreboard-button:hover .scoreboard-button-icon-replay-hover {
    opacity: 1;    
    cursor: pointer;
}

.scoreboard-button-icon-maps-default {
    position: absolute;
    width: 50%;
    height: 56%;
    background: url('../i/post-game-buttons.png') 0 100% no-repeat;
    background-size: 200%;
    top: 19.8%;
    left: 24%;
}

.scoreboard-button-icon-maps-hover {
    position: absolute;
    width: 50%;
    height: 56%;
    background: url('../i/post-game-buttons.png') 100% 100% no-repeat;
    background-size: 200%;
    top: 19.8%;
    left: 24%;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.scoreboard-button:hover .scoreboard-button-icon-maps-hover {
    opacity: 1;    
    cursor: pointer;
}

/*--------------------------------------------------
 *   css/scrollbar.css - ../game/css/scrollbar.css
 */
::-webkit-scrollbar {
    width:  2.9em;
    height: 2.9em;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:end:increment {
    background: url(../i/scrollbar_middle.png) bottom center no-repeat;
    background-size: 100%;
}
 
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:start:decrement {
    background: url(../i/scrollbar_middle.png) top center no-repeat;
    background-size: 100%;
}

::-webkit-scrollbar-thumb {
    background: url(../i/scrollbar_small.png) center center no-repeat;
    background-size: 2.3em;
    height: 3.4em;
}

::-webkit-scrollbar-track
{
    background: url(../i/scrollbar_middle.png) center center no-repeat;
    background-size: 100%;
}

::-webkit-scrollbar-button
{
    height: 1.8em;
}

/*--------------------------------------------------
 *   css/side-menu.css - ../game/css/side-menu.css
 */
/*
 * SIDE MENU
 */
 
 #side-menu .return 
 {
     top: 5.2em;
 }
 
#side-menu {
    position: absolute;
    width: 35.8em;
    right: -31.8em;
    height: 45em;
    bottom: 0;
    z-index: 1000;
    background: url(../i/side-background.png) top right no-repeat;
    background-size: 31.8em 52.5em;
    transition: right 1s ease-in-out;
}

.side-menu-tab {
    display: block;
    float: left;
    clear: left;
    width: 4em;
    height: 14.1em;
    cursor: pointer;
    z-index: 1001;
    text-align: center;
    background: url('../i/tab-small.png') no-repeat;
    background-size: 100% 100%;
    line-height: 14.1em;
    overflow: hidden;
    transition: top 1s ease-in-out;
}

a.side-menu-tab
{
    color: white;
}

a.side-menu-tab:hover
{
    color: white;
}

.vertical-text
{
    -webkit-transform: rotate(-90deg);
    -khtml-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    
    white-space: nowrap;
height: 14.1em;
width: 14.1em;
margin-left: -4.9em;
}

.vertical-text span {
font-size: 2.1em;
display: block;
text-align: center;
}

.side-icon {
  position: absolute;
  top: 62px;
  right: 85px;
  width: 131px;
  height: 96px;
  margin: 0;
  opacity: 0.01;
  transition: opacity 0.3s ease-in-out;
}

#fake-tab {
    visibility: hidden;
}

#main-tab {
    
}

.nwjs #more-tab {
    display: none;
}

#inner-side-menu
{
    width: 30.5em;
    position: absolute;
    top: 41.2%;
    height: 100%;
    right: 0;
}

.side-menu-page
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.side-menu-button {
    width: 30.5em;
    margin: -1.5em auto;
    height: 8.3em;
    position: relative;
    line-height: 8.3em;
}

.side-menu-button:hover .button-hover
{
    opacity: 1;
    cursor: pointer;
}

.side-menu-button-text {
    position: absolute;
    width: 100%;
    top: 0;
    font-size: 2.6em;
    color: white;
    text-align: center;
}

#side-hover-container {
    position: absolute;
    height: 9.6em;
    width: 13.1em;
    left: 29.3%;
    top: -27.4%;
    z-index: 1;
}

.side-menu-title
{
    top: -24%;
    width: 100%;
    text-align: center;
    font-size: 3em;
    color: white;
    text-shadow: 0 0 .1em white,0 0 .4em white;
    position: absolute;
}

.side-menu-title-line
{
    left: 11%;
    top: -11.4%;
    width: 24.7em;
    height: 6.3em;
    position: absolute;
}

/*******************************************************************************************************************************
MOBILE DOWN HERE
*******************************************************************************************************************************/


.mobile #side-menu {
    position: absolute;
    width: 40.5em;
    right: 50%;
    height: 54.3em;
    bottom: -100%;
    z-index: 1000;
    margin: 0 -20.25em -27.15em 0;
    background: url(../i/dialog-box.png) top right no-repeat;
    background-size: 100% 100%;
    transition: bottom 1s ease-in-out;
}


.mobile .side-menu-page 
{
    top: 20%;
}

.mobile #side-hover-container 
{
    display: none;
}

.mobile .side-menu-title-line 
{
    left: 19%;
    top: -8.7%;
}

.mobile .side-menu-button 
{
    width: 36.6em;
}


/*--------------------------------------------------
 *   css/standard.css - ../game/css/standard.css
 */
@font-face { /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
  font-family: 'Fontin-SmallCaps';
  font-style: normal;
  font-weight: normal;
  src: url('../f/Fontin-SmallCaps.ttf');
}
@font-face {
  font-family: 'Fontin-SmallCaps';
  font-style: normal;
  font-weight: normal;
  src: url(http://:/) format("No-IE-404"), url('../f/Fontin-SmallCaps.ttf') format('truetype');
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Prevents odd highlighting on Android browsers */  
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-tap-highlight-color: rgba(0, 0, 0, 0);
    -o-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);

    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    background: url('../i/bg.jpg');
    font-family: Fontin-SmallCaps, arial, sans serif;
    font-size: 10px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#body-clip{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}


#title {
    font-size: 1em;
    padding: 0;
    margin: 0 0 0 -16.1em;
    position: absolute;
    z-index: 350;
    top: 0.5em;
    left: 50%;
    width: 32.2em;
    height: 4.8em;
    transition: top 1s ease-in-out;
}
#title img {
    width: 32.2em;
    height: 4.8em;
}
     h1 span {display: none;}
     h2 {color: #fff; text-align: center; font-size: 1.8em;}
    img {
        border: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-drag: none;
        user-select: none;
    }
table {
border-spacing: 0;
}
a {
    cursor: pointer;
       -webkit-user-drag: none;
       -webkit-user-select: none;
       -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-drag: none;
    user-select: none;
}
a:link, a:visited {text-decoration: none; color: white;}
a:active, a:hover {text-decoration: none; color: white;}
a:focus {outline: none;} /* so firefox doesn't show a dotted line around things */





#game {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}



#play-again {
    position: absolute;
    bottom: 0px;
    z-index: 1001;
    opacity: 0.1;
    display: none;
}

.play-again-text
{
    font-size: 3em;
}


#dialog-play-again
{
          position: absolute;
        bottom: 60px;
        z-index: 1001;
}
#dialog-play-again2
{
          position: absolute;
        bottom: 10px;
        z-index: 1001;
}






.back
{
    position: absolute;
    top: 92px;
    left: 347px;
    width: 75px;
    height: 75px;
    z-index: 2005;
    line-height: 75px;
    text-align: center;
    background: url(../i/button-back.png) center center no-repeat;
}
.back a:link, .back a:visited {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease-in-out;
    opacity: 0.01;
    background: url(../i/button-back-highlight.png) center center no-repeat;
}
.back a:hover, .back a:active {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    background: url(../i/button-back-highlight.png) center center no-repeat;
}

.med-button
{
    position:    relative;
    width:       7.1em;
    height:      2.55em;
    line-height: 2.55em;
    text-align:  center;
    background:  url(../i/button-tiny.png) left center no-repeat;
    background-size: 200%;
    color:       white;
    font-size:   2em;
    margin:      auto;
}
.med-button a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.01;
    background: url(../i/button-tiny.png) right center no-repeat;
    background-size: 200%;
    color: #fff;
    transition: opacity 0.3s ease-in-out;
}

.med-button a:hover, .med-button a:active {
    opacity: 1;
}

#loading-panel {
    padding: 0px;
    margin: -240px 0 0 -240px;
    position: absolute;
    z-index: 2001;
    top: 50%;
    left: 50%;
    width: 480px;
    height: 724px;
    text-align: center;
}


/* Scoreboard */

/* moving scores */
.gameboard-message {
    font-size: 20px;
    font-weight: bold;
    width: 90px;
    height: 40px;
    margin: -20px 0 0 -45px;
    text-align: center;
    z-index: 92;
    pointer-events: none;
}
.big-gameboard-message
{
    position: absolute;
    left: 50%;
    text-align: center;
    top: 25%;
    margin-left: -200px;
    width: 400px;
    z-index: 92;
    pointer-events: none;
}

.map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 90;
}
.map-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#preview {
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 33;
    transition: opacity 1s ease-in-out;
}


/*--------------------------------------------------
 *   css/subtle-message.css - ../game/css/subtle-message.css
 */
/* Top-right message system */

#subtle-message {
    position: absolute;
    top: -500px;
    right: 0px;
    width: 18.5em;
    z-index: 999; /*2001;*/
    transition: top 1s ease-in-out;
    background: url(../i/dialog-box.png) bottom left no-repeat;
}
#subtle-message-content {
    margin: 5em 1em 2em 1em;
    text-align: left;
    color: #fff;
}

.subtle-exit {
    position: absolute;
    display: block;
    bottom: 0px;
    left: 28px;
    width: 10px;
    line-height: 10px;
    height: 10px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
}

.subtle-message-button
{
    position: absolute;
    width: 10%;
    height: 10%;    
}

.subtle-message-button:hover .button-hover
{
    opacity: 1;
    cursor: pointer;
}

.tutorial-text
{
    font-size: 1.8em;
}

/***********************************************************************************
* MOBILE
***********************************************************************************/

.mobile #subtle-message 
{
    right: 50%;
    width: 40.5em;
    background-size: 100%;
    margin-right: -20.25em;
    z-index: 2006; /*2001;*/
}

.mobile #subtle-message-content {
    margin: 1em 5em 2em 1em;
    min-height: 4em;
}

.mobile .subtle-message-button
{
    width: 5em;
    height: 5em;
    min-height: 28px;
    min-width: 28px;
    right: .5em;
    position: absolute;
    top: 0.5em;
}

.mobile .tutorial-text
{
     font-size: 3em;
}

/*--------------------------------------------------
 *   css/tile-control.css - ../game/css/tile-control.css
 */
.tile-pad {
    position: absolute;
    top: -100px;
    left: -100px;
    z-index: 90;
    width: 200px;
    height: 200px;
    cursor: pointer;
}
.tile-pad-transition {
    transition: transform 0.25s ease-out;
}

.tile-glow {
position: absolute;
top: -90px;
left: -90px;
width: 180px;
height: 180px;
}

.tile-message {
position: absolute;
width: 200px;
height: 200px;
top: -100px;
left: -100px;
line-height:200px;
text-align: center;
opacity: 0.4;
color: #fff;
font-size: 110px;
cursor: pointer;
z-index: 91;
}