@import url("sm.css");

#login #buttonLogin .text {
    padding-top: 0.5em;
}

.gc_ibutton.gc_focus,.clickable.gc_focus,.gc_button.gc_focus {
    -webkit-transform: scale(1.05,1.05);
}

.gc_ibutton.disabled {
    color: gray;
}

div.loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    font-family: Cartwheel,Arial;
    text-align: center;
    color: white;
}

div.loading.ready {
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0.5,#3b2f40),color-stop(1,#e17d4e)); 
    background: -moz-linear-gradient(top,#3b2f40 50%,#e17d4e 100%); 
}

div.loading .background {
    width: 100%;
    height: 50%;
    position: absolute;
    top: 50%;
}

div.loading .loader {
    position: relative;
    top: -50px;
    width: 100px;
    height: 100px;
    display: inline-block;
    padding-top: 120px;
}

/* "ready" is added when all the resources are loaded */
div.loading.ready .background {
    background-size: 100% auto;
    background-color: #e17d4e;
}

div.sm {
    background-color: #ffef76;
    overflow: hidden;
    font-family: Cartwheel, Arial;
}

div.shade {
    background-color: rgba(44, 38, 69, 0.8);
}

div.rc {
    background: url(/gc/sm/static/images/smc/corner_4.png) no-repeat;
}

div.gc_button {
    text-align: center;
    border: 2px solid #492f17;
    border-radius: 0.5em;
    background-color: #f8d926;
    font-style: italic;
    color: #41414f;
    background-image: none;
}

.gc_ibutton {
    font-family: Cartwheel, Arial;
    font-weight: bold;
    margin: 0.25em;
    color: #41414f;
    text-align: center;
    height: 2em;
}

.gc_ibutton:last-child,.gc_ibutton.red {
    margin: 0.5em 2em 0 2em;
}

.gc_ibutton .text {
    padding-top: 0.5em;
}

img.full {
    position: absolute;
    width: 100%;
    height: auto;
}
img.top {
    top: 0;
}
img.bottom {
    bottom: 0;
}

.zero {
    color: #b5a3a9;
}

.number {
    color: #fffffe;
}

.prefix {
    color: #b5a3a9;
    font-size: 0.7em;
    vertical-align: bottom;
}

.redText {
    font-family: CartWheel;
    color: #c30007;
    text-shadow: 2px 0 2px white, 2px 2px 2px white, 0 2px 2px white, -2px 2px 2px white, -2px 0 2px white, -2px -2px 2px white, 0 -2px 2px white, 2px -2px 2px white;
    font-weight: bold;
}

/* level up */
#levelup {
    font-size: 4em;
}

/* cowbonus */
#cowbonus {
    font-size: 3em;
}

#getready {
    font-size: 4em;
}

/* promo */
#promo {
    font-family: CartWheel, Verdana;
    background-color:#5f466f;
    width: 80%;
    height: 80%;
    max-width: 600px;
    margin: auto;
    border-radius: 0.5em;
    position:absolute;
}
#promo .title {
    color: white;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#866a9f),color-stop(1,#5f466f));
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}
#promo .exit {
    top: 1.5em;
}
#promo .tabs {
    margin-top: 0.5em;
    padding: 0 2em 0 0.5em;
    text-align: left;
}
#promo .tabs > div {
    font-size: 0.8em;
    font-weight: bold;
    padding: 0.75em 0.5em;
    display: block ! important;
    text-align: center;
    border: 2px solid #392744;
    border-bottom:0;
    border-top-left-radius:.5em;
    border-top-right-radius:.5em;
    color:#4c435c;
    background-color:white;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f8e372),color-stop(0.01,#f5d31a),color-stop(1,#fbe635));
    background:-moz-linear-gradient(top,#f8e372 0,#f5d31a 1%,#fbe635 100%);
}
#promo .tabs>div.active {
    background:white;
}

#promo .body {
    background-color: white;
    color: #604a72;
    text-align: left;
    padding: 0;
}
#promo .row {
    margin: 0.5em;
    padding-bottom: 0.25em;
}

#promo label {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0.25em;
    min-width: 40%;
    color: #6586AC;
    display: inline-block;
}

#promo p {
    padding: 0 0.25em;
}

    
/* dialog popup styles */
.dialog {
    font-family: Cartwheel;
}
div.gc_popup {
    border: 0;
}

div.gc_wait .body {
    background-color: transparent;
    font-family: Cartwheel;
    color: #5f466f;
    text-shadow: 2px 0 2px white, 2px 2px 2px white, 0 2px 2px white, -2px 2px 2px white, -2px 0 2px white, -2px -2px 2px white, 0 -2px 2px white, 2px -2px 2px white;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    margin: 0;
}
div.gc_wait .body img {
    display: none;
}

div.gc_popup.dialog {
    background-color: #5f466f;
    border: 0;
    border-radius: 0.3em;
}

div.gc_popup > .title, div.dialog > .title {
    color: #fdfefd;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#866a9f),color-stop(1,#5f466f)); 
    height: 1.5em;
}

div.gc_popup.dialog .body {
    background-color: white;
    padding-right: 2em;
}

div.gc_popup.dialog .footer {
    text-align: center;
    padding: 0.25em 1em;
}

/* alert styles */
div.gc_popup.gc_alert .body {
    background-color: white;
}

div.gc_popup.gc_alert .footer {
    padding: 0.25em 1em;
}

/* image popup (no text) */
div.gc_popup.image .body {
    background-color: transparent;
}

.image img {
    width: 70%;
    height: auto;
}

/**************************************************************************************
    HEADER
    
    <photo 3em><0.25><score 6em><mult 3em><gap 2em>
    
**************************************************************************************/

#header {
    position: absolute;
    top: 0.5em;
    left: 1.5em;
    right: 1.5em;
    height: 3.5em;
    background-color:rgba(69,61,85,0.75);
    border-radius: 0.5em;
}

#header #score {
    position: absolute;
    top: 0.25em;
    left: 4.5em;
}

#mult {
    position: absolute;
    right: 2em;
    width: 4em;
    top: 0.25em;
    display: none;
}

#multlevel {
    position: absolute;
    right: 2em;
    width: 4em;
    top: 0;
}

#multlevel > div {
    position: relative;
    text-align: right;
}

#multlevel > div:first-child {
    border-bottom: 1px solid #b1a2ab;
}

#multlevel > div > div:first-child {
    position: absolute;
    top: 0.25em;
    left: 0;
}

#header .header {
    font-size: 0.8em;
    color: #f3cd17;
}

#option {
    position: absolute;
    right: -1em;
    top: 0.5em;
    width: 2.5em;
    height: 2.5em;
}

#option img {
    width: 100%;
    height: 100%;
}

#timer {
    position: absolute;
    top: auto;
    bottom: 0.25em;
    left: 4.5em;
    right: 2em;
    background-color: #453d55;
    height: 1em;
    border-top: 2px solid #342a3e;
    border-radius: 0.3em;
}

#timer .bar {
    border-radius: 0.3em;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff03d),color-stop(0.4,#f6cf1d),color-stop(0.7,#f4cc1b),color-stop(1,#eca100)); 
}

/**************************************************************************************
    powerups 
**************************************************************************************/

#powerups {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4em; 
    height: 3.5em;
    background-color: #a8a8a8;
    text-align: center;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    padding: 0.5em;
    color: #efefef;
}

#powerups * { 
    display: inline-block;
}

#powerups .powerup {
    position: relative;
    left: -1.5em;
    white-space: nowrap;
}

#powerups .powerup > * {
    vertical-align: middle;
}

.powerupbutton {
    width: 2.5em;
    height: 2.5em;
    margin-right: 0.5em;
}

.powerup .prefix {
    font-size: 0.8em;
    color: #efefef;
    vertical-align: bottom;
}

/**************************************************************************************
    BODY
**************************************************************************************/

#board {
    position: absolute;
    left: 0;
    top: 4.5em;
    bottom: 1em;
    left: 0.25em;
    right: 0.25em;
    overflow: hidden;
}

#board.single {
    bottom: 8px;
}

#play {
    border-radius: 0.5em;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    background: url(/gc/sm/static/images/smc/playboard.png) no-repeat;
    background-size: 100%;
}

#play canvas {
    position: absolute;
    left: 0;
    top: 0;
}

#cow {
    visibility: hidden;
}

#capture {
    position: absolute;
    background-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    user-select: none;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

div.hint {
    position: absolute;
    visibility: hidden;
    border-radius: 0.5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* game stuff */
div.hint.valid {
    background-color: rgba(60,214,197,0.5);
    visibility: inherit;
    border: 2px solid;
    -webkit-animation: flash 1s infinite;
}
div.hint.invalid {
    background-color: rgba(243,29,84,0.5);
    visibility: inherit;
}
@-webkit-keyframes flash {
    0% { border-color: white; }
    50% { border-color: transparent; }
    100% { border-color: white; }
}


    
/**************************************************************************************
    LOUNGE
**************************************************************************************/
#lounge {
    background-color: rgba(255, 255, 255, 0.8);
    left: 0.5em;
    right: 0.5em;
    top: 4em;
    bottom: 100px;
    z-index: 2;
}

#sm_chatScroll {
    top: 1.5em;
}

#lounge .sm_post {
    color: #a2a2a2;
}

#lounge .sm_post.me {
    color: #453e53;
}
#lounge .sm_post span {
    font-family: Arial;
}
#lounge .sm_post span.poster {
    display: block;
    font-family: Cartwheel, Arial;
    font-size: 0.9em;
}

#sm_chatMenu {
    background-color: #cfcfcf;
    bottom: 0;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}
#sm_chatText {
    position: relative;
    border: 2px solid #a6a6a6;
    color: #757379;
    margin-right: 0;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#sm_chatPost {
    position: relative;
    border: 2px solid #312c3d;
    border-radius: 0;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    background-color: #f7d01d;
    overflow: hidden;
    width: 3em;
    height: 2em;
}
#sm_chatPost > div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-top: 0.25em;
    text-align: center;
    border: 2px solid #eca600;
    border-top: 2px solid #fbf03d;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    color: #463b52;
    font-family: Cartwheel, Arial;

}


/**************************************************************************************
    FOOTER
**************************************************************************************/

#footer {
    background-color: #332c3e;
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 35px;
}

#footer .player {
    position: absolute;
    bottom: 0;
    display: inline-block;
    width: 100px;
    height: 40px;
    margin: 0 1px;
    background: url(/gc/sm/static/images/smc/userbank.png) no-repeat;
    background-size: 100%;
    text-align: center;
}

#footer .player > * {
    position: absolute;
}

#footer .player canvas {
    left: 30px;
    bottom: 18px;
    width: 40px;
    height: 40px;
}

#footer .player .number {
    left: 0;
    bottom: 2px;
    width: 100px;
    font-size: 12px;
}

#footer .player .arrow {
    width: 100px;
    text-align: center;
    left: 0;
    bottom: 55px;
}

#footer .player .arrow img {
    width: 25px;
    height: auto;
}

#footer .player .arrow.arrow2 img {
    width: 50px;
}

#readyContainer {
    position: absolute;
    bottom: 35px;
    padding: 0.25em 0.25em 25px 0.25em;
    overflow: hidden;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    visibility: hidden;
    width: 7em;
}

#readyContainer .gc_ibutton {
    margin: 0;
}

/**************************************************************************************
    MAIN MENU
**************************************************************************************/
div.mainMenu.gc_popup {
    margin: 0;
    border-radius: 0;
    border: 0;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
   
div.mainMenu .title {
    display: none;
}

div.mainMenu .body {
    background-color: #cedf53;
    text-align: center;
    padding: 0;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
}

div.mainMenu .top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
}

div.mainMenu .top img {
    bottom: 0;
}

div.mainMenu .mountain {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0;
}

div.mainMenu .tree {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    bottom: 20%;
}

div.mainMenu .logo {
    position: absolute;
    top: 10%;
    max-height: 30%;
    max-width: 70%;
    -webkit-transform: translate3d(0,0,0);
}

div.mainMenu .demo {
    position: absolute;
    top: 3em;
    bottom: 13em;
    width: 70%;
    left: 15%;
    border-radius: 0.5em;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.6) inset;
    background-color: rgba(237, 140, 76, 0.61);
}

.play > * {
    position: absolute;
}

div.mainMenu .footer {
    text-align: center;
    position: absolute;
    bottom: 1em;
    width: 100%;
    padding: 0 20%;
}

/**************************************************************************************
    OPTION MENU
**************************************************************************************/
div.subMenu {
    text-align: center;
    background-color: transparent;
    border: 0;
}
div.subMenu > .title {
    background-color: transparent;
    background: none;
    height: 4em;
}
div.subMenu > .title img {
    height: 100%; 
    width: auto;
}
div.subMenu > .body {
    display: none;
}
div.subMenu > .footer {
    display: inline-block;
    width: 70%;
    max-width: 15em;
}


/**************************************************************************************
    submit score 
**************************************************************************************/
#submitScore {
    display: inline-block;
    max-width: 15em;
    width: 70%;
}
#submitScore .body {
    padding: 0.5em 1em;
}

/**************************************************************************************
    submit score 
**************************************************************************************/
#submitTwit {
    display: inline-block;
    max-width: 18em;
    width: 90%;
}
#submitTwit .body {
    padding: 0.5em 1em;
}

/**************************************************************************************
    final score
**************************************************************************************/

div.finalScores > canvas {
    top: 1.5em;
    width: 4em;
    height: 4em;
}

div.finalScores > img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
}

div.finalScores {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 100;
}

div.finalScores #ranks {
    position: absolute;
    top: 4em;
    left: 1em;
    right: 1em;
    bottom: 2em;
}

/* portraits */
div.finalScores #ranks .first canvas {
    position: relative;
    left: -1em;
    width: 4em;
    height: 4em;
}

div.finalScores #ranks .rest canvas {
    width: 3em;
    height: 3em;
}

/* name color */
div.finalScores .rest .rank:nth-child(1) .name {
    color: #fcc635;
}
div.finalScores .rest .rank:nth-child(2) .name {
    color: #f18e33;
}
div.finalScores .rest .rank:nth-child(3) .name {
    color: #f74a7a;
}


/* 1st place */
div.finalScores div.first .rank {
    position: relative;
    height: 9em;
    margin-bottom: 0;
}
div.finalScores div.first .rankContainer {
    position: absolute;
    left: 1em;
    right: auto;
    width: 7em;
    height: 7em;
}
div.finalScores div.first .finalScore {
    left: 7em;
    top: 4em;
    height: 3.5em;
}
div.finalScores div.first span {
    font-size: 1.5em;
}
div.finalScores img.sparkle {
    width: 2em;
    height: 2em;
    position: absolute;
}
div.finalScores img.sparkle:nth-child(2) {
    left: 0.5em;
    top: 0em;
    opacity: 0.5;
}
div.finalScores img.sparkle:nth-child(3) {
    left: 4em;
    top: 1em;
    opacity: 0.5;
}
div.finalScores img.sparkle:nth-child(4) {
    left: 3em;
    top: 3.5em;
    opacity: 0.5;
}

/* other places */
div.finalScores div.rank {
    position: relative;
    width: 100%;
    height: 3em;
    margin-bottom: 0.5em;
}
div.finalScores div.rest {
    position: relative;
    width: 100%;
}
div.finalScores .rankContainer {
    display: inline-block;
    position: relative;
}

div.finalScores div.finalScore {
    position: absolute;
    left: 7em;
    right: 0;
    bottom: 0;
    height: 3em;
    font-weight: bold;
    border-radius: 0.5em;
    color: white;
}

div.finalScores div.finalScore .name {
    position: absolute;
    left: 3.5em;
    right: 0.5em;
    top: 0.2em;
    color: white;
    white-space: nowrap;
    overflow: hidden;
}
div.finalScores div.finalScore .score {
    position: absolute;
    left: 3.5em;
    bottom: 0.25em;
    white-space: nowrap;
}

#invite .footer {
    padding: 0.25em 2em;
}
#invite .tabs {
    margin-top: 0.5em;
    padding: 0 2em 0 0.5em;
}
#invite .tabs > div {
    font-size: 0.8em;
    padding: 0.75em 0.5em;
    display: inline-block;
    border: 2px solid #392744;
    border-bottom:0;
    border-top-left-radius:.5em;
    border-top-right-radius:.5em;
    color:#4c435c;
    background-color:white;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f8e372),color-stop(0.01,#f5d31a),color-stop(1,#fbe635));
    background:-moz-linear-gradient(top,#f8e372 0,#f5d31a 1%,#fbe635 100%);
}
#invite .tabs>div.selected{
    background:white;
}

#leaders canvas {
    display: none;
}
#leaders .rank {
    width: 2em;
    text-align: right;
    padding: 1em 0.25em;
}
#leaders .row {
    height: auto;
}
#leaders .row:first-child {
    margin: 0.25em;
    font-size: 1.5em;
}
#leaders .row:nth-child(2n) {
    background-color: #e7e3ea;
}
#leaders .row.me span.name, #leaders .row:first-child span.name {
    color: #fdd521;
    text-shadow: #d69703 0 1px 1px;
}
#leaders .row span.name {
    color: #9489a5;
}
#leaders .row span.score {
    color: #604a72;
}
#leaders .tabs > div {
    display: block ! important;
    text-align: center;
}
#leaders .tabs .expire {
    font-weight: normal;
    background-color:transparent;
    background: none;
    border: 0;
    color: white;
    width: 5em;
}

#tutorial {
    position: absolute;
    left: 1.5em;
    right: 1.5em;
    top: 2em;
    bottom: 2em;
}

#tutorial .scroller {
    width: 100%;
}

#tutorial .pages {
    height: 1.5em;
    text-align: center;
    background-color: #cfcfcf;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#939393),color-stop(0.05,#aeaeae),color-stop(0.1,#c7c7c7),color-stop(0.15,#cfcfcf)); 
    background: -moz-linear-gradient(top,#939393 0%,#aeaeae 5%,#c7c7c7 10%,#cfcfcf 15%);     
}

#tutorial .pages div {
    display: inline-block;
    background: url(/gc/sm/static/images/radial.png) no-repeat;
    background-size: auto 100%;
    width: 0.5em;
    height: 0.5em;
    margin: 0.5em 0.25em 0 0.25em;
}

#tutorial .pages div.selected {
    background-position: 100% 0;
}

#tutorial .contents {
    background-color: white;
    overflow: hidden;
    position: absolute;
    top: 3em;
    bottom: 3em;
    width: 100%;
    color: #888888;
}

#tutorial .content {
    position: relative;
    display: none;
    text-align: center;
    padding: 0.5em;
}

#tutorial .content.selected {
    display: block;
}

#tutorial .content .title {
    color: #5d4673;
}

#tutorial .footer {
    position: absolute;
    height: 3em;
    bottom: 0;
    width: 100%;
}

#tutorial .footer img {
    height: 2em;
    width: auto;
}

#tutorial #prev {
    position: absolute;
    left: 0.5em;
    top: 0.5em;
}

#tutorial #next {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
}

#tutorial .gc_ibutton {
    color: #41414f;
    margin: 0;
    width: 7em;
}

#toc {
    position: absolute;
    left: 1em;
    right: 1em;
    top: 1em;
    bottom: 1em;
    box-shadow: 0 0 5px black;
    background-color: white;
    color: white;
    border-radius: 0.5em;
}
/* AOC */
#aoc {
    background-color: #cedf53;
    color: #41414f;
}
#aoc .body {
    position: relative;
}
    
#aoc iframe {
    position: absolute;
    border: 0;
    width: 100%;
    height: 100%;
}
#aoc .footer {
    padding: 0.25em 2em;
    font-family: Cartwheel, Arial;
    text-align: center;
}
#aoc .footer .gc_button {
    display: inline-block;
    margin: 0.25em;
}

#aoc .link {
    font-weight: bold;
    text-decoration: underline;
    margin: 0.5em;
}

#aoc .gc_ibutton .text {
    padding: 0.5em 1.5em;
}

.centerAlert > div {
    max-width: 80%;
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 1em;
    border-radius: 0.5em;
}

.centerAlert a {
    color: white;
}

.ar {
    font-size: 0.8em;
}
.ar #header #score>*, .ar #header #multlevel>* {
    font-size: 0.8em;
    line-height: 1.2;
}
.ar .text,
.ar #leaders .row,
.ar .tabs > div
{
    direction: rtl;
}
.ar #leaders .date {
    right : auto;
    left: 0.25em;
}

/* 
TITLE : 3.5em
BODY:  19em x 18.5em
FOOTER : 4em
--- 26em
*/
@media (min-width: 38em) and (min-height:52em) and (orientation:portrait), 
       (min-height:38em) and (min-width:52em) and (orientation:landscape) {
    body { font-size: 2em; }
    #lounge { bottom: 4.5em; }
}

@media (orientation:landscape) and (max-height:300px) and (min-width:400px) {
    #board {
        left: 0.25em;
        top: 0.25em;
        bottom: 0.25em;
        right: 8em;
    }
    #board.single {
        bottom: 0.25em;
    }
    #header {
        left: auto;
        top: 0.25em;
        bottom: 0.25em;
        width: 6em;
        height: auto;
    }
    #powerups {
        top: 0;
        left: 0;
        right: 0;
        height: 3.5em;
        width: auto;
        border-top-left-radius: 0.5em;
        border-top-right-radius: 0.5em;
    }
    #header #me {
        position: absolute;
        left: 0.25em;
        top: 1.5em;
    }
    #header #option {
        top: 0.5em;
    }
    #header #score {
        left: 0.25em;
        top: 6em;
    }
    #mult {
        left: 0.25em;
        top: 8.5em;
    }
    #multlevel {
        left: 0.25em;
        top: 8.5em;
    }
    #timer {
        left: 0.25em;
        right: 0.25em;
        top: 4em;
        bottom: auto;
    }
}