/*
 * Copyright (c) 2012, Intel Corporation.
 *
 * This program is licensed under the terms and conditions of the 
 * Apache License, version 2.0.  The full text of the Apache License is at
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */

/* -------------------------------- main page ----------------------------- */

@font-face {
    font-family: 'Romantiques';
    src: local(Romantiques), url('../fonts/Romantiques.ttf');
}

@font-face {
    font-family: 'Sancreek';
    src: local(Sancreek), url('../fonts/Sancreek-Regular.ttf');
}


body {
    margin: 0px;
    -webkit-user-select: none;
    background-color: "white";
    box-shadow: 5px 5px 20px black;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    overflow: hidden;
    cursor: default;
    width: 1024px;
    height: 600px;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}



/* 480 x 800 */
@media screen and (orientation: landscape) {
  body {	top: -50%; left: -57%;

   transform: scale(0.475, 0.5);}
}




.game_page {
    background-position: left top;
    position: absolute;
    overflow: hidden;
    cursor: default;
    width: 1024px;
    height: 600px;
}

.debugRect {
    border-width: thin;
    border-color: red;
    border-style: solid;
}


/* Intro page styles. */
/* ================== */

#main_bg {
    background:url(../images/extravaganza_background.jpg) no-repeat;
    width: 100%;
    height: 100%;
    z:1;
}

#main_spetacular_title {
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0px;
    top: 190px;
}

#main_memory_title {
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0px;
    top: 277px;
}

#main_extravaganza_title {
    position: absolute;
    width: 100%;
    height: 74px;
    left: 4px;
    top: 354px;
}

.main_sancreek_text2 {
    font-size: 49.5pt;
    font-family: Sancreek;
    color: #f1e412;
    text-align: center;
    letter-spacing: 2.9px;
}

.main_sancreek_text {
    font-size: 49.5pt;
    font-family: Sancreek;
    color: #f1e412;
    text-align: center;
    letter-spacing: 5px;
}

.main_romantique_text {
    font-size: 60.5pt;
    font-family: Romantiques;
    color: #f1e412;
    text-align: center;
}



/* Choose level-page styles */
/* ======================== */

#selLevel_bg {
    background:url(../images/selectgame_background.jpg) no-repeat;
    width: 100%;
    height: 100%;
    z:1;
}

#selLevel_title {
    position: absolute;
    left: 0px;
    top: 175px;
    width: 100%;
    height: 35px;
}

#selLevel_hint {
    position: absolute;
    left: 0px;
    top: 400px;
    width: 100%;
    height: 25px;
	color:#f1e412;
}

#selLevel_levelCard1 {
    position: absolute;
    background: url(../images/card_purple.png) no-repeat;
    left: 299px;
    top: 258px;
    width: 88px;
    height: 115px;
}

#selLevel_levelCard2 {
    position: absolute;
    background: url(../images/card_green.png) no-repeat;
    left: 412px;
    top: 258px;
    width: 88px;
    height: 115px;
}

#selLevel_levelCard3 {
    position: absolute;
    background: url(../images/card_red.png) no-repeat;
    left: 525px;
    top: 258px;
    width: 88px;
    height: 115px;
}

#selLevel_levelCard4 {
    position: absolute;
    background: url(../images/card_teal.png) no-repeat;
    left: 638px;
    top: 258px;
    width: 88px;
    height: 115px;
}

#selLevel_resetLocked {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 20px;
    height: 20px;
}

.setLevel_lockedLevel {
    opacity: 0.5;
}


.selLevel_sancreek_big {
    font-size: 28pt;
    font-family: Sancreek;
    color: black;
    text-align: center;
    vertical-align: top;
    letter-spacing: 5px;
	color:#f1e412;
}

.selLevel_sancreek_small {
    font-size: 12pt;
    font-family: Sancreek;
    color: black;
    text-align: center;
    vertical-align: top;
    letter-spacing: 2px;
}

.selLevel_levelCard {
    font-size: 30pt;
    font-family: Sancreek;
    color: white;
    text-align:center;
    padding-top: 17px;
}

@-webkit-keyframes selLevel_moveToSlot1 {
    100% {left: 299px;}
}

@-webkit-keyframes selLevel_moveToSlot2 {
    100% {left: 412px; }
}

@-webkit-keyframes selLevel_moveToSlot3 {
    100% {left: 525px; }
}

@-webkit-keyframes selLevel_moveToSlot4 {
    100% {left: 638px; }
}

.selLevel_anim1 {
    -webkit-animation: selLevel_moveToSlot1 .8s;
    -webkit-animation-fill-mode: forwards;
}
.selLevel_anim2 {
    -webkit-animation: selLevel_moveToSlot2 .8s;
    -webkit-animation-fill-mode: forwards;
}
.selLevel_anim3 {
    -webkit-animation: selLevel_moveToSlot3 .8s;
    -webkit-animation-fill-mode: forwards;
}
.selLevel_anim4 {
    -webkit-animation: selLevel_moveToSlot4 .8s;
    -webkit-animation-fill-mode: forwards;
}
.selLevel_selectedCard {
    z-index: 100;
}

/* Level 1 styles */
/* ============== */

#level1_bg {
    background:url(../images/level1_background.jpg) no-repeat;
    width: 100%;
    height: 100%;
    z:1;
}


#level1_card_01 { position: absolute; left: 916px; top: 20px; width: 88px; height: 115px; }
#level1_card_02 { -webkit-perspective: 600px; position: absolute; left: 818px; top: 20px; width: 88px; height: 115px; }
#level1_card_03 { -webkit-perspective: 600px; position: absolute; left: 720px; top: 20px; width: 88px; height: 115px; }
#level1_card_04 { -webkit-perspective: 600px; position: absolute; left: 622px; top: 20px; width: 88px; height: 115px; }
#level1_card_05 { -webkit-perspective: 600px; position: absolute; left: 524px; top: 20px; width: 88px; height: 115px; }
#level1_card_06 { -webkit-perspective: 600px; position: absolute; left: 426px; top: 20px; width: 88px; height: 115px; }
#level1_card_07 { -webkit-perspective: 600px; position: absolute; left: 916px; top: 145px; width: 88px; height: 115px; }
#level1_card_08 { -webkit-perspective: 600px; position: absolute; left: 818px; top: 145px; width: 88px; height: 115px; }
#level1_card_09 { -webkit-perspective: 600px; position: absolute; left: 720px; top: 145px; width: 88px; height: 115px; }
#level1_card_10 { -webkit-perspective: 600px; position: absolute; left: 622px; top: 145px; width: 88px; height: 115px; }
#level1_card_11 { -webkit-perspective: 600px; position: absolute; left: 524px; top: 145px; width: 88px; height: 115px; }
#level1_card_12 { -webkit-perspective: 600px; position: absolute; left: 426px; top: 145px; width: 88px; height: 115px; }

#level1_indicator  {
    position: absolute;
    left: 30px;
    top: 176px;
    width: 180px;
    height: 30px;
}
.level1_indicator_text {
    font-size: 21pt;
    font-family: Sancreek;
    color: black;
    text-align: center;
    letter-spacing: 4px;
	color:white;
}

.lev1CardBg {
    background: url(../images/card_purple.png);
}

/* Level 2 styles */
/* ============== */

#level2_bg {
    background:url(../images/level2_background.jpg) no-repeat;
    width: 100%;
    height: 100%;
    z:1;
}

#level2_card_01 { position: absolute; left: 886px; top: 185px; width: 88px; height: 115px; }
#level2_card_02 { position: absolute; left: 788px; top: 185px; width: 88px; height: 115px; }
#level2_card_03 { position: absolute; left: 690px; top: 185px; width: 88px; height: 115px; }
#level2_card_04 { position: absolute; left: 592px; top: 185px; width: 88px; height: 115px; }
#level2_card_05 { position: absolute; left: 494px; top: 185px; width: 88px; height: 115px; }
#level2_card_06 { position: absolute; left: 396px; top: 186px; width: 88px; height: 115px; }
#level2_card_07 { position: absolute; left: 886px; top: 310px; width: 88px; height: 115px; }
#level2_card_08 { position: absolute; left: 788px; top: 310px; width: 88px; height: 115px; }
#level2_card_09 { position: absolute; left: 690px; top: 310px; width: 88px; height: 115px; }
#level2_card_10 { position: absolute; left: 592px; top: 310px; width: 88px; height: 115px; }
#level2_card_11 { position: absolute; left: 494px; top: 310px; width: 88px; height: 115px; }
#level2_card_12 { position: absolute; left: 396px; top: 310px; width: 88px; height: 115px; }
#level2_card_13 { position: absolute; left: 886px; top: 435px; width: 88px; height: 115px; }
#level2_card_14 { position: absolute; left: 788px; top: 435px; width: 88px; height: 115px; }
#level2_card_15 { position: absolute; left: 690px; top: 435px; width: 88px; height: 115px; }
#level2_card_16 { position: absolute; left: 592px; top: 435px; width: 88px; height: 115px; }
#level2_card_17 { position: absolute; left: 494px; top: 435px; width: 88px; height: 115px; }
#level2_card_18 { position: absolute; left: 396px; top: 435px; width: 88px; height: 115px; }

#level2_indicator  {
    position: absolute;
    left: 32px;
    top: 174px;
    width: 180px;
    height: 30px;
}
.level2_indicator_text {
    font-size: 21pt;
    font-family: Sancreek;
    color: back;
    text-align: center;
    letter-spacing: 4px;
	color:white;
}

.lev2CardBg {
    background: url(../images/card_green.png);
}


/** Level 3 styles */
/** ============== */
#level3_bg {
    background:url(../images/level3_background.jpg) no-repeat;
    width: 100%;
    height: 100%;
    z:1;
}

#level3_card_01 { position: absolute; left: 886px; top: 50px; width: 88px; height: 115px; }
#level3_card_02 { position: absolute; left: 788px; top: 50px; width: 88px; height: 115px; }
#level3_card_03 { position: absolute; left: 690px; top: 50px; width: 88px; height: 115px; }
#level3_card_04 { position: absolute; left: 592px; top: 50px; width: 88px; height: 115px; }
#level3_card_05 { position: absolute; left: 494px; top: 50px; width: 88px; height: 115px; }
#level3_card_06 { position: absolute; left: 396px; top: 50px; width: 88px; height: 115px; }
#level3_card_07 { position: absolute; left: 886px; top: 175px; width: 88px; height: 115px; }
#level3_card_08 { position: absolute; left: 788px; top: 175px; width: 88px; height: 115px; }
#level3_card_09 { position: absolute; left: 690px; top: 175px; width: 88px; height: 115px; }
#level3_card_10 { position: absolute; left: 592px; top: 175px; width: 88px; height: 115px; }
#level3_card_11 { position: absolute; left: 494px; top: 175px; width: 88px; height: 115px; }
#level3_card_12 { position: absolute; left: 396px; top: 175px; width: 88px; height: 115px; }
#level3_card_13 { position: absolute; left: 886px; top: 305px; width: 88px; height: 115px; }
#level3_card_14 { position: absolute; left: 788px; top: 305px; width: 88px; height: 115px; }
#level3_card_15 { position: absolute; left: 690px; top: 305px; width: 88px; height: 115px; }
#level3_card_16 { position: absolute; left: 592px; top: 305px; width: 88px; height: 115px; }
#level3_card_17 { position: absolute; left: 494px; top: 305px; width: 88px; height: 115px; }
#level3_card_18 { position: absolute; left: 396px; top: 305px; width: 88px; height: 115px; }
#level3_card_19 { position: absolute; left: 886px; top: 430px; width: 88px; height: 115px; }
#level3_card_20 { position: absolute; left: 788px; top: 430px; width: 88px; height: 115px; }
#level3_card_21 { position: absolute; left: 690px; top: 430px; width: 88px; height: 115px; }
#level3_card_22 { position: absolute; left: 592px; top: 430px; width: 88px; height: 115px; }
#level3_card_23 { position: absolute; left: 494px; top: 430px; width: 88px; height: 115px; }
#level3_card_24 { position: absolute; left: 396px; top: 430px; width: 88px; height: 115px; }

#level3_indicator  {
    position: absolute;
    left: 36px;
    top: 176px;
    width: 180px;
    height: 30px;
    -webkit-transform: rotate(10deg);
}
.level3_indicator_text {
    font-size: 21pt;
    font-family: Sancreek;
    color: back;
    text-align: center;
    letter-spacing: 4px;
	color:white;
}

.lev3CardBg {
    background: url(../images/card_red.png);
}


/** Level 4 styles */
/** ============== */
#level4_bg {
    background:url(../images/finalegame_background.jpg) no-repeat;
    width: 100%;
    height: 100%;
    z:1;
}

#level4_card_01 { position: absolute; left: 886px; top: 50px; width: 88px; height: 115px; }
#level4_card_02 { position: absolute; left: 788px; top: 50px; width: 88px; height: 115px; }
#level4_card_03 { position: absolute; left: 690px; top: 50px; width: 88px; height: 115px; }
#level4_card_04 { position: absolute; left: 592px; top: 50px; width: 88px; height: 115px; }
#level4_card_05 { position: absolute; left: 494px; top: 50px; width: 88px; height: 115px; }
#level4_card_06 { position: absolute; left: 396px; top: 50px; width: 88px; height: 115px; }
#level4_card_07 { position: absolute; left: 886px; top: 175px; width: 88px; height: 115px; }
#level4_card_08 { position: absolute; left: 788px; top: 175px; width: 88px; height: 115px; }
#level4_card_09 { position: absolute; left: 690px; top: 175px; width: 88px; height: 115px; }
#level4_card_10 { position: absolute; left: 592px; top: 175px; width: 88px; height: 115px; }
#level4_card_11 { position: absolute; left: 494px; top: 175px; width: 88px; height: 115px; }
#level4_card_12 { position: absolute; left: 396px; top: 175px; width: 88px; height: 115px; }
#level4_card_13 { position: absolute; left: 886px; top: 305px; width: 88px; height: 115px; }
#level4_card_14 { position: absolute; left: 788px; top: 305px; width: 88px; height: 115px; }
#level4_card_15 { position: absolute; left: 690px; top: 305px; width: 88px; height: 115px; }
#level4_card_16 { position: absolute; left: 592px; top: 305px; width: 88px; height: 115px; }
#level4_card_17 { position: absolute; left: 494px; top: 305px; width: 88px; height: 115px; }
#level4_card_18 { position: absolute; left: 396px; top: 305px; width: 88px; height: 115px; }
#level4_card_19 { position: absolute; left: 886px; top: 430px; width: 88px; height: 115px; }
#level4_card_20 { position: absolute; left: 788px; top: 430px; width: 88px; height: 115px; }
#level4_card_21 { position: absolute; left: 690px; top: 430px; width: 88px; height: 115px; }
#level4_card_22 { position: absolute; left: 592px; top: 430px; width: 88px; height: 115px; }
#level4_card_23 { position: absolute; left: 494px; top: 430px; width: 88px; height: 115px; }
#level4_card_24 { position: absolute; left: 396px; top: 430px; width: 88px; height: 115px; }

#level4_indicator  {
    position: absolute;
    left: 35px;
    top: 176px;
    width: 180px;
    height: 30px;
}
.level4_indicator_text {
    font-size: 21pt;
    font-family: Sancreek;
    color: back;
    text-align: center;
    letter-spacing: 4px;
}

.lev4CardBg {
    background: url(../images/card_green.png);
}


/** Finale level styles */
/** =================== */

#finaleIntro_bg {
    background:url(../images/finale_background.jpg) no-repeat;
    width: 100%;
    height: 100%;
    z:1;
}

#finaleIntro_introducing_title {
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0px;
    top: 185px;
}

#finaleIntro_finale_title {
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0px;
    top: 265px;
}

#finaleIntro_memorymatch_title {
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0px;
    top: 344px;
}

.finaleIntro_sancreek_text {
    font-size: 39pt;
    font-family: Sancreek;
    color: #F1E412;
    text-align: center;
    letter-spacing: 5px;
}

.finaleIntro_sancreek_text2 {
    font-size: 35pt;
    font-family: Sancreek;
    color: #F1E412;
    text-align: center;
    letter-spacing: 8px;
}

.finaleIntro_romantique_text {
    font-size: 54.5pt;
    font-family: Romantiques;
    color: #F1E412;
    text-align: center;
    letter-spacing: 20px;
}


/** Victory styles */
/** ============== */

#victory_bg {
    background:url(../images/finale_background.jpg) no-repeat;
    width: 100%;
    height: 100%;
    z:1;
}

#victory_youwin_title {
    position: absolute;
    left: 230px;
    top: 190px;
    width: 560px;
    height: 95px;
}
.victory_youwin_title_text {
    font-size: 60pt;
    font-family: Romantiques;
    color: black;
    text-align: center;
}


#victory_playagain_box {
    position: absolute;
    width: 258px;
    height: 127px;
    left: 365px;
    top: 249px;
    background: url(../images/play_again_ticket.png);
}

#victory_playagain_lines {
    position: relative;
    left: 35px;
    top: 65px;
    text-align: center;
}
#victory_playagain_title {
    position: relative;
    height: 35px;
    top: 26px;
}
.victory_playagain_title_text {
    font-size: 24pt;
    font-family: Sancreek;
    color: black;
    text-align: center;
    letter-spacing: 2px;
}

#curvedText {
    position: absolute;
    left: 166px;
    top: 90px;
}




/** Animated cards */
/** ============== */

.cardContainer {
    -webkit-perspective: 600px;
}

.back {
    position: absolute;
    background-size: 88px 115px;
    width: 100%;
    height: 100%;
    z-index: 900;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform .4s ease-in-out, z-index .4s ease-in-out;
}

.front {
    background-size: 88px 115px;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 800;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform .4s ease-in-out, z-index .4s ease-in-out;
}

.card {
    width: 100%;
    height: 100%;
}

.flip_to_visible .front{
    z-index: 1000;
    -webkit-transform: rotateY(0deg);
}

.flip_to_visible .back{
    z-index: 900;
    -webkit-transform: rotateY(180deg);
}



/** Common styles */
/** ============= */

#handitem {
    position: absolute;

    width: 397px;
    height: 300px;
    left: 7px;
    bottom: 0px;
}

#handitem_card_rect {
    position: relative;
    left: 35px;
    top: 175px;
    width: 216px;
    height: 123px;
}

#handitem_gamenum_title {
    position: relative;
    left: 0px;
    top: 8px;
    width: 216px;
    height: 38px;
}
.handitem_gamenum_title_text {
    font-size: 30pt;
    font-family: Sancreek;
    color: black;
    text-align: center;
    letter-spacing: 5px;
}

#handitem_stars_container {
    position: relative;
    left: 50px;
    top: 25px;
    width: 128px;
    height: 56px;
}

#handleitem_star1 {
    width: 36px;
}

#handleitem_star2 {
    width: 36px;
}

#handleitem_star3 {
    width: 36px;
}
.unplayedGameStar {
    opacity: 1;
}

#homebutton_backtomain {
    position: absolute;
    right: 10px;
    bottom: 5px;
    height: 40px;
    width: 180px;
    text-align: right;
}
#homebutton_text
{
    padding-top: 10px;
}
#homebutton_icon
{
    vertical-align: middle;
}


.homebutton_backtomain_text {
    font-size: 12.5pt;
    font-family: Sancreek;
    color: black;
    text-align: center;
    letter-spacing: 2px;
}
.homebutton_icon {
    position: relative;
}
