/* v1.6.3 */

/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
{
    display: block;
}

audio[controls], canvas, video
{
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/* =============================================================================
   Base
   ========================================================================== */

html
{
    font-size: 100%;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-touch-action: none;
}

body
{
    margin: 0;
    font-size: 13px;
    line-height: 1.231;
}

body, button, input, select, textarea
{
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #222;
}

::-moz-selection
{
    background: #5db7cd;
    color: #fff;
    text-shadow: none;
}

::selection
{
    background: #5db7cd;
    color: #fff;
    text-shadow: none;
}


/* =============================================================================
   Links
   ========================================================================== */

a
{
    text-decoration: none;
    color: inherit;
}

a: active, a: focus
{
    outline: 0;
}


/* =============================================================================
    Fonts
   ========================================================================== */

@font-face
{
    font-family: 'Tekton';
    src: url('../fonts/tektonpro-boldcond.woff');
    src: url('../fonts/tektonpro-boldcond.woff') format('woff'), url('../fonts/tektonpro-boldcond.ttf') format('truetype'), url('../fonts/tektonpro-boldcond.svg#tektonpro-boldcond') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'HandOfSean';
    src: url('../fonts/handsean.woff');
    src: url('../fonts/handsean.woff') format('woff'), url('../fonts/handsean.ttf') format('truetype'), url('../fonts/handsean.svg#hand_of_seanregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* =============================================================================
   Valentine Card Fonts
   ========================================================================== */


@font-face
{
    font-family: 'filmotype';
    src: url('../fonts/filmotype.woff');
    src: url('../fonts/filmotype.woff') format('woff'), url('../fonts/filmotype.ttf') format('truetype'), url('../fonts/filmotype.svg#filmotype') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'proximanova';
    src: url('../fonts/proximanova.woff');
    src: url('../fonts/proximanova.woff') format('woff'), url('../fonts/proximanova.ttf') format('truetype'), url('../fonts/proximanova.svg#proximanova') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'proximanova';
    src: url('../fonts/proximanova-bold.woff');
    src: url('../fonts/proximanova-bold.woff') format('woff'), url('../fonts/proximanova-bold.ttf') format('truetype'), url('../fonts/proximanova-bold.svg#proximanova') format('svg');
    font-weight: 700;
    font-style: normal;
}


/* =============================================================================
    Valentine Sharing Panel
   ========================================================================== */

#shareCardPanel {
    position: absolute;
    top: 30%;
    right: 0px;
    width: 150px;
    height: 240px;
    display: none;
    overflow: hidden;
    cursor:pointer;
}

#shareCardPanel-content {
    position: absolute;
    top: 0px;
    right: -90px;
    width: 240px;
    height: 240px;
    background: url('../img/card-share-bg.png?v=1.6.3');
}

#shareCardPanel p {
    opacity: 0.65;
    font-family: handofsean;
    font-size: 21px;
    position: absolute;
    top: 80px; 
    left: 20px;
    cursor:pointer;
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
    -webkit-transition: opacity 300ms;
    -moz-transition: opacity 300ms;
    -o-transition: opacity 300ms;
    -ms-transition: opacity 300ms;
    transition: opacity 300ms;
}

#shareCardPanel:hover p {
    opacity: 1;
}

@media  (max-height: 820px) and (max-width: 1080px) { 
    #shareCardPanel { display: none !important; }
    #vote-sxsw { display: none !important; }
}

@media  (min-height: 821px) and (max-width: 1240px) { 
    #shareCardPanel { display: none !important; }
    #vote-sxsw { display: none !important; }
}


/* =============================================================================
    Valentine Card
   ========================================================================== */

#card {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #E5E0DC;
    z-index: 100;
    color: #332A25;
    -webkit-font-smoothing: subpixel-antialiased;
    display: none;
}

/* fixed width and then transformed via javascript */

#card-content {
    width: 1366px;
    height: 768px;
    position: absolute;
}

#card.portrait #card-content {
    height: 1366px;
    width: 768px;
}

#card.square #card-content {
    width: 1366px;
    height: 1366px;
}

#card h1, #card h2, #card h3, #card h4, #card h5 {
    font-weight: normal;
}

#card .text-replace {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#card .card-sprite {
    background-image: url(../img/card-sprite-EN.png?v=1.6.3);
    background-size: 800px 800px;
}

#card-petit {
    position: absolute;
    bottom: 0px;
    right: 0px;
    max-height: 40%;
}

#card.square #card-petit {
    max-height: 30%;
}

#card.portrait #card-petit {
    max-height: 25%;
}

#card ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#card ul li {
    display: block;
    margin: 0px;
    padding: 0px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

/* canvas */

#card-canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: transparent;
    width: 100%;
    height: 100%;

}

/* heart */

#card-heart {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url('../img/card-heart.png?v=1.6.3');
    background-repeat: no-repeat;
    background-size: 70% 70%;
    background-position: center 20%;
    opacity: 0.5;
}

/* menu */

#card-menu {
    position: absolute;
    bottom: 0%;
    left: 5%;
    width: 400px;
}

#card.portrait #card-menu {
    bottom: 20%;
}

#card.square #card-menu {
    bottom: 15%;
    left: 10%;
}


#card ul#card-menu  li {
    margin-bottom: 10px;
    padding-bottom: 30px;
    height: 70px;
}

#card ul#card-menu li h3 {
    height: 70px;
}

#card ul#card-menu li:hover h3 {
    background-position-x: -400px;
}


#card-menu h4 {
    position: relative;
    font-family: filmotype;
    font-size: 30px;
    line-height: 0.7;
    margin: 0;
    padding: 0;
    text-align: center;
    top: 0px;
}


/* menu - play */

#card #card-play h3 {
  background-position: 0px 0px;
}

#card-play h4 span {
    border-bottom: 3px solid #332A25;
    display: inline-block;    
}

/* menu - share */

#card #card-share h3 {
  background-position: 0px -100px;
}

/* menu - ie */

#card #card-ie h3 {
  background-position: 0px -200px;
}

#card #card-ie a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

/* message */

#card-message {
    font-size: 120px;
    position: absolute;
    top: 3%;
    left: 0px;
    right: 0px;
    font-family: filmotype;
    line-height: 0.75;
    text-align: center;
    width: 90%;
    padding-right: 3%;
    padding-left: 2%;
    margin: 0 auto;
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
    display: none;
}

#card.portrait #card-message {
}

#card.square #card-message {
    top: 10%;
}

#card.square #card-message div {
    font-size: 130%;
}

#card-to-text {
    display: block;
    text-align: left;
}
#card-message-text {
    display: block;
    position: relative;
    margin: 0.2em auto;
    text-align: center;
    max-width: 90%;
    
}
#card-from-text {
    display: block;
    text-align: right;
}

#card-message-ie {
    position: absolute;
    top: 1%;
    left: 1%;
    right: 1%;
    bottom: 0px;
    background-image: url(../img/card-msg-EN.svg);
    background-repeat:no-repeat;
    background-position: top;
    background-size: contain;
}

#card.portrait #card-message-ie {
    top: 15%;
    left: -5%;
    right: -5%;
}

#card.square #card-message-ie {
    top: 15%;
}

/* editor */

#card-editor.minimized {
	left: 20px !important;
	bottom: 20px;
	cursor: pointer;

	-webkit-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	-moz-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	-o-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	-ms-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);

	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	transform-origin: 0% 100%;

	-webkit-transform: scale(0.135, 0.22);
	-moz-transform: scale(0.135, 0.22);
	-o-transform: scale(0.135, 0.22);
	-ms-transform: scale(0.135, 0.22);
	transform: scale(0.135, 0.22);
}

#card-editor.restored {
	-webkit-transition: all 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	-moz-transition: all 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	-o-transition: all 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	-ms-transition: all 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	transition: all 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

#card-editor.minimized #card-editor-border {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0 !important;

	-webkit-transition: all 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	-moz-transition: all 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	-o-transition: all 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	-ms-transition: all 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
	transition: all 400ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

#card-editor.restored #card-editor-minimized {
    display: none;
}

#card-editor-minimized {
	width: 80px;
	height: 80px;
	z-index: 100;
	position: absolute;
	top: 0px;
	left: 0px;
	background-position: 15px -285px;
	opacity: 0;
	
    -webkit-transition: opacity 400ms;
    -moz-transition: opacity 400ms;
    -o-transition: opacity 400ms;
    -ms-transition: opacity 400ms;
    transition: opacity 400ms;
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    transition-delay: 200ms;
    
	
}

#card-editor.minimized #card-editor-minimized {

	opacity: 1;

	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	transform-origin: 0% 0%;

	-webkit-transform: scale(7.407, 4.54);
	-moz-transform: scale(7.407, 4.54);
	-o-transform: scale(7.407, 4.54);
	-ms-transform: scale(7.407, 4.54);
	transform: scale(7.407, 4.54);
}


#card-editor-minimized:hover {
    background-position: -385px -285px;
}

#card-editor {
    font-family: proximanova;
    position: absolute;
    bottom: 20%;
    left: 20px;
    width: 600px;
    height: 350px;
    background-color: #282421;
    -moz-box-shadow: 0 5px 38px rgba(52,28,14,.75);
    -webkit-box-shadow: 0 5px 38px rgba(52,28,14,.75);
    box-shadow: 0 5px 38px rgba(52,28,14,.75);    
    color: #cac3b7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    display: none;
}

#card-editor-dismiss {
    background: rgba(0,0,0,0);
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: none;
    cursor: pointer;
}

#card-editor-border {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    top: 20px;
    border: 1px solid #48443F;
}

#card-editor-border #card-editor-title {
    position: relative;
    margin: 0 auto;
    display: inline-block;
    width: auto;
    padding: 0 10px;
    text-align: center;
    top: -9px;
    font-size: 15px;
    color: #68635c;
    background-color: #282421;
    font-weight: 700;
}

#card-editor p {
    max-width: 90%;
    margin: 0 auto 10px auto;
}

.card-title {
    font-family: filmotype;
    font-size: 44px;
    line-height: 1;
    margin: 0;
    padding: 10px 0 15px 0;
}

.card-subtitle {
    font-family: proximanova;
    font-size: 15px;
    font-weight: bold !important;
    line-height: 1;
    margin: 0 auto 0 auto;
    padding: 0;
    text-transform: uppercase;
}

.card-button {
    background: #cac3b7;
    color: #282421;
    padding: 10px 20px 9px 20px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    margin: 15px auto 25px auto;
    text-align: center;
    display: inline-block;
    font-size: 15px;
    cursor: pointer;    
}

.card-button.disabled {
    opacity: 0.5;
    cursor: auto;
}

.card-button:hover {
    background: #D95023;
    color: #cac3b7;
}

.card-button.disabled:hover {
    background: #cac3b7;
    color: #282421;
}

/* editor - social */

#card-editor-social {
    display: none;
}

#card-share-icons div {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 20px 30px;
    cursor: pointer;
}

#card-share-twitter {
    background-position: 0px -400px !important;
}

#card-share-facebook {
    background-position: 0px -500px !important;
}

#card-share-stumbleupon {
    background-position: 0px -600px !important;
}

#card-share-icons div:hover {
    background-position-x: -400px !important;
}


/* editor - customize */

#card-editor-customize {
    text-align: left;
    position: absolute;
    top: 30px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: none;
}

.card-inputbg, .card-textareabg  {
    height: 35px;
    left: 100px;
    overflow: visible;
    position: relative;
    width: 260px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 20px;
    background-position: 0 -667px;
}

.card-textareabg {
    height: 90px;
    width: 410px;
}

#card-editor-customize label {
    font-family: proximanova;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    width: 92px;
    display: inline-block;
    text-align: right;
    position: absolute;
    left: -100px;
    top: 21px;
}

#card-editor-customize input, #card-editor-customize textarea {
    height: 48px;
    background: transparent;
    overflow: visible;
    border: none;
    color: #cac3b7;
    font-family: filmotype;
    font-weight: normal !important;
    font-size: 37px;
    line-height: 1;
    position: relative;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0px;
    left: 8px;
    width: 260px;
    outline: none;
    background: rgba(255,255,255,0.0);
}

#card-editor-customize textarea {
    width: 430px;
    height: 100px;
    opacity: 1;
    padding-top: 4px;
    line-height: 43px;
    resize:none;
    overflow: hidden;
}

#card-editor-customize input::-webkit-input-placeholder, #card-editor-customize textarea::-webkit-input-placeholder {
   color: #423E39;
}

#card-editor-customize input:-moz-placeholder, #card-editor-customize textarea:-moz-placeholder {
   color: #423E39;  
}

#card-editor-customize input::-moz-placeholder, #card-editor-customize textarea::-moz-placeholder {  
   color: #423E39;  
}

#card-editor-customize input:-ms-input-placeholder, #card-editor-customize textarea:-ms-input-placeholder {  
   color: #423E39;  
}

#card-customize-preview {
    position: absolute;    
    bottom: 15px;
    left: 15px;   
    margin: 0px;
}

#card-customize-buttons {
    position: absolute;
    bottom: -10px;
    right: 15px;   
    margin: 0px;
}

#card-customize-buttons .card-button {
    width: 60px;   
}

input[type=text]::-ms-clear {
    display: none;
}

/* editor - send */


#card-editor-send p {
    margin: 5px auto 30px auto;
}

#card-editor-send #card-url {
    background: #393430;
    border: none;
    display: block;
    font-family: proximanova;
    font-weight: 700;
    font-size: 24px;
    padding: 10px;
    color: #CAC3B7;
    outline: none;
    width: 300px;
    margin: 20px auto 10px auto;
    text-align: left;
}

#card-url::selection {
    background: #e6885f;
}

.card-inline-button {
    font-family: proximanova;
    font-weight: bold;
    border-bottom: 2px dotted #68635C;
    cursor: pointer;
}

.card-inline-button:hover {
    color: #e6885f;    
}

#card-clipboard-alt {
    margin: 10px auto 40px auto;
    font-size: 12px;
    color: #67625B;
}

#card-editor-send.ie #card-clipboard-alt {
    display: none;
}
#card-editor-send.ie p {
    margin-top: 30px;
    margin-bottom: 0px;
}

#card-editor-send.ie #card-url {
    display: inline-block;
    height: 49px;
    box-sizing: border-box;
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 40px;
}

#card-editor-send.ie #card-clipboard {
    display: inline-block;
    margin-top: 0px;
    height: 49px;
    box-sizing: border-box;
    position: relative;
    padding: 0px;
    top: -3px;
    padding: 16px;
}

#card-clipboard {
    display: none;    
}

#card-editor-send .mac {
    display: none;
}

#card-editor-send.mac .mac {
    display: inline;
}

#card-editor-send.mac .windows {
    display: none;
}

/* close button */

#card-close {
    width: 150px;
    height: 125px;
    position: absolute;
    right: 0px;
    top: 30px;
    background-position: -150px -550px;
    cursor:pointer;
}

#card-close:hover {
    background-position: -550px -550px;

}

#card-close.play {
    width: 175px;
    height: 125px;
    position: absolute;
    right: 0px;
    top: 30px;
    background-position: -150px -400px;
    cursor: pointer;
}

#card-close.play:hover {
    background-position: -550px -400px;
}


/* =============================================================================
    Level Backgrounds
   ========================================================================== */

.level0
{
    background: url(../img/McLevels0-hd.png?v=1.6.3);
}

.level1
{
    background: url(../img/McLevels1-hd.png?v=1.6.3);
}

.level2
{
    background: url(../img/McLevels2-hd.png?v=1.6.3);
}

.level3
{
    background: url(../img/McLevels3-hd.png?v=1.6.3);
}

.level4
{
    background: url(../img/McLevels4-hd.png?v=1.6.3);
}

.level5
{
    background: url(../img/McLevels5-hd.png?v=1.6.3);
}

.level6
{
    background: url(../img/McLevels6-hd.png?v=1.6.3);
}

.level7
{
    background: url(../img/McLevels7-hd.png?v=1.6.3);
}

.level8
{
    background: url(../img/McLevels8-hd.png?v=1.6.3);
}

.level9
{
    background: url(../img/McLevels9-hd.png?v=1.6.3);
}

/* =============================================================================
   Game Styles
   ========================================================================== */

/* end reset
  ------------------------------------------------------------------------------*/
body
{
    -ms-touch-action: none;
    background-color: #3c3c3c;
    overflow: hidden;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    -ms-content-zooming: none;
    text-align: center;
}

#background
{
    position: relative;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#backgroundOverlay {
    background: rgba(50,50,50,0.25);    
}

.stretch
{
    width: 100%;
    height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.stretch-abs {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;   
    width: 100%;
    height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;     
}   

#container
{
    position: relative;
    margin: 0 auto 0 auto;
    width: 1024px;
    height: 730px;
    padding: 0;
}

@media (min-height: 900px) { #container { margin-top: 50px; } }
@media (min-height: 768px) and (max-height: 800px) { #container { margin-top: -30px; } }


#frame
{
    position: absolute;
    width: 960px;
    height: 640px;
    background-image: url(../img/frame.png?v=1.6.3);
    background-repeat: no-repeat;
    background-size: 100%;
}

#devStats
{
    visibility: hidden;
    position: absolute;
    top: 10%;
    right: -195px;
    float: right;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: rgb(13,13,13);
}

.soundButtonDiv
{
    position: absolute;
    right: 50px;
    bottom: 12px;
    width: 50px;
    height: 50px;
}

.soundEffectButtonDiv
{
    position: absolute;
    right: 120px;
    bottom: 12px;
    width: 50px;
    height: 50px;
}

.meetPetitDiv 
{
    position: absolute;
    top: 10px;
    right: 30px;
    cursor: pointer;
    background-repeat: no-repeat;    
    font-family: 'HandOfSean';
    font-size: 21px;
    color: #e0e0e0;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    text-align: center;
}

.meetPetitDiv img {
    display: inline;
    position: relative;
}

.meetPetitDiv span {
    display: inline;
    position: relative;
    top: -50px;
    left: -8px;
}

.meetPetitTextDE
{
    font-size: 28px;
    margin-top: 30px;
    margin-left: 0px;
}
.meetPetitTextRU
{
    font-size: 18px;
    margin-top: 30px;
    margin-left: 0px;
}
.meetPetitTextPT
{
    margin-top: 30px;
    margin-left: 0px;
}
.graphContainer
{
    position: relative;
    height: 50px;
    width: 200px;
    margin: 8px;
}

.graphLabel
{
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 10px;
}

.graphValue
{
    position: absolute;
    right: 30px;
    top: 7px;
    font-size: 32px;
    font-weight: bold;
}

#surface
{
    position: absolute;
    background-color: #000;
}

@-moz-document url-prefix() {
     #surface{position: absolute; background-color: #000; }
}

#plasticineDiv {
    left: 1px;
}

#bgSurface
{
    position: absolute;
}

@-moz-document url-prefix() {
     #bgSurface{position: absolute; }
}

#particleCanvas
{
    position: absolute;
}

@-moz-document url-prefix() {
     #particleCanvas{position: absolute; }
}

#textCanvas
{
    -ms-touch-action: none;
    position: absolute;
}

@-moz-document url-prefix() {
     #textCanvas{position: absolute; }
}

#transitionCanvas
{
    -ms-touch-action: none;
    position: absolute;
}

#surface, #bgSurface, #particleCanvas, #textCanvas, #transitionCanvas {
    left: 1px;
}

@-moz-document url-prefix() {
     #transitionCanvas{ position: absolute; }
}

#scoreCanvas
{
    -ms-touch-action: none;
    position: absolute;
    left: 0px;
    bottom: 3px;
}

@-moz-document url-prefix() {
     #scoreCanvas{position: absolute; margin-left:-480px; -ms-touch-action: none;}
}

#gameHeader
{
    width: 100%;
    height: 55px;
}

#gameHeaderContainer
{
    position: relative;
    width: 1024px;
    height: 55px;
    margin: -9px auto 0 auto;
}

#shareContentText 
{
    cursor:pointer;
}

#game #sharePanelOverlay {
    background: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    padding: 0;
    margin: 0;
    display: none;
}

#game #sharePanel
{
    width: 211px;
    height: 341px;
    position: absolute;
    top: 70px;
    right: 0px;
    background-image: url(../img/shareBg.png?v=1.6.3);
    background-repeat: no-repeat;
    background-position: 155px 160px;
    overflow: hidden;
    z-index: 0;
}

@media all and (max-width: 1200px) {
    #game #sharePanel { display: none }
}

#game #sharePanelOverlay.expanded {
    z-index: 900;
    display: block;
    background: rgba(0,0,0,0.01);
}

#game #sharePanel.expanded, #sharePanel.expanded div {
    z-index: 1000;
}

#game #shareLinks
{
    position: absolute;
    right: -115px;
    top: 30px;
    background-image: url(../img/shareBlack.png?v=1.6.3);
    background-repeat: no-repeat;
    background-position: 0px 16px;
    width: 211px;
    height: 241px;
    overflow: hidden;
}

#game #shareLinks.white {
    background-image: url(../img/shareBlack.png?v=1.6.3);
    background-repeat: no-repeat;
    background-position: 0px 16px;
}

#game #shareLinks.blue {
    background-image: url(../img/shareBlue.png?v=1.6.3);
    background-repeat: no-repeat;
    background-position: 0px 16px;
}

#game #shareLinks.purple {
    background-image: url(../img/sharePurple.png?v=1.6.3);
    background-repeat: no-repeat;
    background-position: 0px 16px;
}

#game #sharePanelHitArea
{
    position: absolute;
    left: 10px;
    top: 90px;
    width: 90px;
    height: 70px;
    background: transparent;
    cursor: pointer;
}

#game #sharePanelHitArea span {
    display: block;
    position: absolute;
    top: 22px;
    left: 19px;
    font-size: 16px;
    font-family: HandOfSean;
    color: #808080;
    -webkit-transform: rotate(14deg);
    -moz-transform: rotate(14deg);
    -o-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    transform: rotate(14deg);
    -webkit-transition: color 200ms;
    -moz-transition: color 200ms;
    -o-transition: color 200ms;
    -ms-transition: color 200ms;
    transition: color 200ms;
}

#game #sharePanelHitArea:hover span 
{
    color: white !important;
}

#game .sharePanelExpanded
{
    cursor:default;
}

#game #shareContent
{
    position: absolute;
    top: 4px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

#game .shareText
{
    color: #b1e1eb;
    font-family: 'Tekton';
    font-size: 20px;
    margin-top:24px;
}

#game .shareTextHover 
{
    color: #fff;
}

#game #shareCanvas 
{
    position: absolute;
    right: -218px;
    top: 30px;
    width: 350px;
    height: 350px;
    z-index: 100;
}

#game .shareIcon
{
    height:20px;
    width: 20px;
}

.gameContainer
{
    position: absolute;
    z-index: 5;
    width: 962px;
    height: 640px;
    overflow: hidden;
    left: 31px;
    -ms-touch-action: none;
}

.generalCanvas
{
    position: absolute;
    width: 960px;
    height: 640px;
}

.hide
{
    display: none;
}

.initBackground
{
    background: rgba(0,0,0, .50);
}

#loading
{
    position: absolute;
    top: 45%;
    left: 25%;
    width: 50%;
}

#loadingBg {

    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
}

/* =============================================================================
   Header / Footer Styles
   ========================================================================== */

#gameGroundHeader
{
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 960px;
    height: 120px;
    top: 0px;
    left: 0px;
    background-image: url(../img/McMainMenuLogo-hd.png?v=1.6.3), url(../img/McMenuGroundPhone-hd.png?v=1.6.3);
    background-repeat: no-repeat;
    background-position: 684px 0px, 0px -20px;
}

#gameGroundFooter
{
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 960px;
    height: 120px;
    left: 0px;
    bottom: 0px;
    background-image: url(../img/McMenuGroundPhone-hd.png?v=1.6.3);
    background-position: 0px -500px;
}

#gameGroundHeaderBlue
{
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 960px;
    height: 120px;
    top: 0px;
    left: 0px;
    background-image: url(../img/McMainMenuLogoBlue-hd.png?v=1.6.3), url(../img/McMenuGroundPhoneBlue-hd.png?v=1.6.3);
    background-repeat: no-repeat;
    background-position: 684px 0px, 0px -20px;
}

#gameGroundFooterBlue
{
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 960px;
    height: 120px;
    left: 0px;
    bottom: 0px;
    background-image: url(../img/McMenuGroundPhoneBlue-hd.png?v=1.6.3);
    background-position: 0px -500px;
}

/* =============================================================================
   Menu Styles
   ========================================================================== */

.menuPanel
{
    height: 640px;
    width: 345px;
    position: absolute;
    transform: translate(960px,0px);
    -ms-transform: translate(960px,0px);
    -webkit-transform: translate(960px,0px);
    -o-transform: translate(960px,0px);
    -moz-transform: translate(960px,0px);
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    transition-duration: 550ms;
    transition-delay: 0ms;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    -webkit-transition-duration: 550ms;
    -webkit-transition-delay: 0ms;
    -ms-transition-property: -ms-transform;
    -ms-transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    -ms-transition-duration: 550ms;
    -ms-transition-delay: 0ms;
    -o-transition-property: -o-transform;
    -o-transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    -o-transition-duration: 550ms;
    -o-transition-delay: 0ms;
    -moz-transition-property: -moz-transform;
    -moz-transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    -moz-transition-duration: 550ms;
    -moz-transition-delay: 0ms;
}

.menuPanelImage
{
    position:absolute;
    height: 640px;
    width: 345px;
}

#gameBtnTray
{
    display: block;
    position: absolute;
    width: 70px;
    height: 64px;
    left: 885px;
    top: 10px;
}

.gameBtn
{

    cursor: pointer;
    border: 2px solid #333;
    background-color: #0f0f0f;
    background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);

    position: absolute;
    width: 50px;
    height: 50px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;

    -moz-box-shadow: 0 2px 18px rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    -webkit-box-shadow: 0 2px 18px rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    box-shadow: 0 2px 18px rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);

    transition-property: transform;
    transition-timing-function: ease-in;
    transition-duration: 150ms;
    transition-delay: 0ms;
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 150ms;
    -webkit-transition-delay: 0ms;
    -ms-transition-property: -ms-transform, opacity;
    -ms-transition-timing-function: ease-in;
    -ms-transition-duration: 150ms;
    -ms-transition-delay: 0ms;
    -o-transition-property: -o-transform, opacity;
    -o-transition-timing-function: ease-in;
    -o-transition-duration: 150ms;
    -o-transition-delay: 0ms;
    -moz-transition-property: -moz-transform, opacity;
    -moz-transition-timing-function: ease-in;
    -moz-transition-duration: 150ms;
    -moz-transition-delay: 0ms;        
}

#container.black .gameBtnBig,
#container.black .gameBtn {
    border: 2px solid #333;
    background-color: #0f0f0f;
    background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
}

#container.blue .gameBtnBig,
#container.blue .gameBtn {
    border: 2px solid #0C202E;
    background-color: #060D12;
    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(15,30,42,0.25) 50%, rgba(15,30,42,0.6) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(15,30,42,0.25) 50%, rgba(15,30,42,0.6) 100%);
    background-image: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(15,30,42,0.25) 50%, rgba(15,30,42,0.6) 100%);
    background-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(15,30,42,0.25) 50%, rgba(15,30,42,0.6) 100%);
}

#container.white .gameBtnBig,
#container.white .gameBtn {
    border: 2px solid #333;
    background-color: #0f0f0f;
    background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
}

#container.purple .gameBtnBig,
#container.purple .gameBtn {
    border: 2px solid #2a202a;
    background-color: #010203;
    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(35,25,35,0.35) 50%, rgba(35,25,35,0.8) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(35,25,35,0.35) 50%, rgba(35,25,35,0.8) 100%);
    background-image: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(35,25,35,0.35) 50%, rgba(35,25,35,0.8) 100%);
    background-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(35,25,35,0.35) 50%, rgba(35,25,35,0.8) 100%);
}


.gameBtnNonThemed
{
    border: 2px solid #333;
    background-color: #0f0f0f;
    background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);

    position: absolute;
    width: 50px;
    height: 50px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-box-shadow: 0 2px 18px rgba(0,0,0,.67), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    -webkit-box-shadow: 0 2px 18px rgba(0,0,0,.67), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    box-shadow: 0 2px 18px rgba(0,0,0,.67), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    transition-property: transform;
    transition-timing-function: ease-in;
    transition-duration: 150ms;
    transition-delay: 0ms;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 150ms;
    -webkit-transition-delay: 0ms;
    -ms-transition-property: -ms-transform;
    -ms-transition-timing-function: ease-in;
    -ms-transition-duration: 150ms;
    -ms-transition-delay: 0ms;
    -o-transition-property: -o-transform;
    -o-transition-timing-function: ease-in;
    -o-transition-duration: 150ms;
    -o-transition-delay: 0ms;
    -moz-transition-property: -moz-transform;
    -moz-transition-timing-function: ease-in;
    -moz-transition-duration: 150ms;
    -moz-transition-delay: 0ms;
}

.gameBtnBlueNonThemed
{
    opacity: 0;
    border: 2px solid #0C202E;
    background-color: #060D12;
    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(15,30,42,0.35) 50%, rgba(15,30,42,0.8) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(15,30,42,0.35) 50%, rgba(15,30,42,0.8) 100%);
    background-image: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(15,30,42,0.35) 50%, rgba(15,30,42,0.8) 100%);
    background-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(15,30,42,0.35) 50%, rgba(15,30,42,0.8) 100%);

    position: absolute;
    width: 50px;
    height: 50px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-box-shadow: 0 2px 18px rgba(0,0,0,.67), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    -webkit-box-shadow: 0 2px 18px rgba(0,0,0,.67), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    box-shadow: 0 2px 18px rgba(0,0,0,.67), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    transition-property: transform;
    transition-timing-function: ease-in;
    transition-duration: 150ms;
    transition-delay: 0ms;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 150ms;
    -webkit-transition-delay: 0ms;
    -ms-transition-property: -ms-transform;
    -ms-transition-timing-function: ease-in;
    -ms-transition-duration: 150ms;
    -ms-transition-delay: 0ms;
    -o-transition-property: -o-transform;
    -o-transition-timing-function: ease-in;
    -o-transition-duration: 150ms;
    -o-transition-delay: 0ms;
    -moz-transition-property: -moz-transform;
    -moz-transition-timing-function: ease-in;
    -moz-transition-duration: 150ms;
    -moz-transition-delay: 0ms;
}

.gameBtnPurpleNonThemed {
    opacity: 0;
    border: 2px solid #251F25;
    background-color: #010203;
    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(35,25,35,0.35) 50%, rgba(35,25,35,0.8) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(35,25,35,0.35) 50%, rgba(35,25,35,0.8) 100%);
    background-image: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(35,25,35,0.35) 50%, rgba(35,25,35,0.8) 100%);
    background-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(35,25,35,0.35) 50%, rgba(35,25,35,0.8) 100%);

    position: absolute;
    width: 50px;
    height: 50px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-box-shadow: 0 2px 18px rgba(0,0,0,.67), inset 0 0 0 2px rgba(0,0,0,1), inset 0 0 10px rgba(156,156,156,.5);
    -webkit-box-shadow: 0 2px 18px rgba(0,0,0,.67), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    box-shadow: 0 2px 18px rgba(0,0,0,.67), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    transition-property: transform;
    transition-timing-function: ease-in;
    transition-duration: 150ms;
    transition-delay: 0ms;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 150ms;
    -webkit-transition-delay: 0ms;
    -ms-transition-property: -ms-transform;
    -ms-transition-timing-function: ease-in;
    -ms-transition-duration: 150ms;
    -ms-transition-delay: 0ms;
    -o-transition-property: -o-transform;
    -o-transition-timing-function: ease-in;
    -o-transition-duration: 150ms;
    -o-transition-delay: 0ms;
    -moz-transition-property: -moz-transform;
    -moz-transition-timing-function: ease-in;
    -moz-transition-duration: 150ms;
    -moz-transition-delay: 0ms;
}

.roseBtn
{
    cursor: pointer;
    width: 96px;
    height: 96px;
    background: url(../img/McRoseButton-hd.png?v=1.6.3);
    background-repeat: no-repeat;
    position: absolute;
    bottom: -40px;
    left: 294px;
    transition-property: transform, opacity;
    transition-timing-function: ease-in;
    transition-duration: 150ms;
    transition-delay: 0ms;
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 150ms;
    -webkit-transition-delay: 0ms;
    -ms-transition-property: -ms-transform, opacity;
    -ms-transition-timing-function: ease-in;
    -ms-transition-duration: 150ms;
    -ms-transition-delay: 0ms;
    -o-transition-property: -o-transform, opacity;
    -o-transition-timing-function: ease-in;
    -o-transition-duration: 150ms;
    -o-transition-delay: 0ms;
    -moz-transition-property: -moz-transform, opacity;
    -moz-transition-timing-function: ease-in;
    -moz-transition-duration: 150ms;
    -moz-transition-delay: 0ms;
}

.venzel
{
    width: 128px;
    height: 48px;
    overflow: hidden;
    background: url(../img/McVenzel-hd.png?v=1.6.3);
    background-repeat: no-repeat;
    position: absolute;
    bottom: -16px;
    left: 124px;
}

.venzel2
{
    width: 128px;
    height: 48px;
    overflow: hidden;
    background: url(../img/McVenzel-hd.png?v=1.6.3);
    background-repeat: no-repeat;
    position: absolute;
    bottom: -16px;
    right: 124px;
    transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
}

.visible
{
    opacity: 1.0;
}

.hidden
{
    opacity: 0.0;
}

.hiddenButton
{
    opacity: 0.0;
}


.pressed
{
    background-position-x: -64px;
    transform: scale(1.1,1.1);
    -webkit-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
}

.gameBtnBig
{
    cursor: pointer;
    border: 2px solid #333;
    background-color: #0f0f0f;
    background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);
    background-image: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.1) 100%);

    position: absolute;
    width: 80px;
    height: 80px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;

    -moz-box-shadow: 0 2px 18px rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    -webkit-box-shadow: 0 2px 18px rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);
    box-shadow: 0 2px 18px rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 0 10px rgba(156,156,156,.15);

    transition-property: transform;
    transition-timing-function: ease-in;
    transition-duration: 150ms;
    transition-delay: 0ms;
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 150ms;
    -webkit-transition-delay: 0ms;
    -ms-transition-property: -ms-transform, opacity;
    -ms-transition-timing-function: ease-in;
    -ms-transition-duration: 150ms;
    -ms-transition-delay: 0ms;
    -o-transition-property: -o-transform, opacity;
    -o-transition-timing-function: ease-in;
    -o-transition-duration: 150ms;
    -o-transition-delay: 0ms;
    -moz-transition-property: -moz-transform, opacity;
    -moz-transition-timing-function: ease-in;
    -moz-transition-duration: 150ms;
    -moz-transition-delay: 0ms;
}

.pressedBig
{
    background-position-x: -96px;
}

.gamePlayBtn
{
    position: absolute;
    top: 272px;
    left: 10px;
}

#gameWarning
{
    width: 47%;
    position: absolute;
    display: none;
    font-family: 'Tekton';
    font-size: 22px;
    color: #FFF;
    text-align: center;
    margin-left: 25%;
    overflow: visible;
}

#gameWarningAppStore
{
    position: absolute;
    width: 114px;
    height: 40px !important;
    background-image: url(../img/McAvailableInAppStore.png?v=1.6.3);
    left: 46%;
    margin-left: -57px;
    margin-top: 80px;
    display: none;
}

.gamePlayIcon
{
    position: absolute;
    width: 48px;
    height: 48px;
    top: 16px;
    left: 18px;
    background-image: url(../img/McPlayIcon-hd.png?v=1.6.3);
}
#container.black  .gamePlayIcon { background-image: url(../img/McPlayIcon-hd.png?v=1.6.3); }
#container.blue   .gamePlayIcon { background-image: url(../img/McPlayIcon-hd_blue.png?v=1.6.3); }
#container.white  .gamePlayIcon { background-image: url(../img/McPlayIcon-hd.png?v=1.6.3); }
#container.purple .gamePlayIcon { background-image: url(../img/McPlayIcon-hd_purple.png?v=1.6.3); }

.gamePauseIcon
{
    position: absolute;
    width: 32px;
    height: 30px;
    top: 10px;
    left: 10px;
    background-image: url(../img/McPauseIcon-hd.png?v=1.6.3);
}
#container.black  .gamePauseIcon { background-image: url(../img/McPauseIcon-hd.png?v=1.6.3); }
#container.blue   .gamePauseIcon { background-image: url(../img/McPauseIcon-hd_blue.png?v=1.6.3); }
#container.white  .gamePauseIcon { background-image: url(../img/McPauseIcon-hd.png?v=1.6.3); }
#container.purple .gamePauseIcon { background-image: url(../img/McPauseIcon-hd_purple.png?v=1.6.3); }

.gameRestartBtn
{
    position: absolute;
    top: 155px;
    left: 150px;
}

.gameRestartIcon
{
    position: absolute;
    width: 48px;
    height: 48px;
    top: 16px;
    left: 17px;
    background-image: url(../img/McRestartIcon-hd.png?v=1.6.3);
}
#container.black  .gameRestartIcon { background-image: url(../img/McRestartIcon-hd.png?v=1.6.3); }
#container.blue   .gameRestartIcon { background-image: url(../img/McRestartIcon-hd_blue.png?v=1.6.3); }
#container.white  .gameRestartIcon { background-image: url(../img/McRestartIcon-hd.png?v=1.6.3); }
#container.purple .gameRestartIcon { background-image: url(../img/McRestartIcon-hd_purple.png?v=1.6.3); }

.gameMenuBtn
{
    position: absolute;
    top: 272px;
    left: 150px;
}

.gameMenuIcon
{
    position: absolute;
    width: 48px;
    height: 48px;
    top: 16px;
    left: 16px;
    background-image: url(../img/McMenuIcon-hd.png?v=1.6.3);
}
#container.black  .gameMenuIcon { background-image: url(../img/McMenuIcon-hd.png?v=1.6.3); }
#container.blue   .gameMenuIcon { background-image: url(../img/McMenuIcon-hd_blue.png?v=1.6.3); }
#container.white  .gameMenuIcon { background-image: url(../img/McMenuIcon-hd.png?v=1.6.3); }
#container.purple .gameMenuIcon { background-image: url(../img/McMenuIcon-hd_purple.png?v=1.6.3); }

.gameSkipBtn
{
    position: absolute;
    top: 395px;
    left: 150px;
}

.introSkipBtn{
    position: absolute;
    top: 550px;
}

.gameSkipIcon
{
    position: absolute;
    width: 48px;
    height: 48px;
    top: 16px;
    left: 18px;
    background-image: url(../img/McSkipIcon-hd.png?v=1.6.3);
}
#container.black  .gameSkipIcon { background-image: url(../img/McSkipIcon-hd.png?v=1.6.3); }
#container.blue   .gameSkipIcon { background-image: url(../img/McSkipIcon-hd_blue.png?v=1.6.3); }
#container.white  .gameSkipIcon { background-image: url(../img/McSkipIcon-hd.png?v=1.6.3); }
#container.purple .gameSkipIcon { background-image: url(../img/McSkipIcon-hd_purple.png?v=1.6.3); }

.introSkipIcon{
    position: absolute;
    width: 48px;
    height: 48px;
    top: 1px;
    left: 4px;
    background-image: url(../img/McSkipIcon-hd.png?v=1.6.3);
    transform: scale(.75,.75);
    -ms-transform: scale(.75,.75);
    -webkit-transform: scale(.75,.75);
    -o-transform: scale(.75,.75);
    -moz-transform: scale(.75,.75);
}

.gameSoundBtnMenuPanel
{
    position: absolute;
    top: 68px;
    left: 200px;
}

.gameSoundBtnMenuPanel .disabledIcon, .gameSoundEffectBtnMenuPanel .disabledIcon {
    z-index: 5;
    position: absolute;
    top: 21px;
    left: 3px;
}

div.disabled .gameSoundIcon,
div.disabled .gameSoundEffectIcon,
div.disabled .gameSoundIconNonThemed,
div.disabled .gameSoundIconBlueNonThemed,
div.disabled .gameSoundIconPurpleNonThemed,
div.disabled .gameSoundEffectIconNonThemed,
div.disabled .gameSoundEffectIconBlueNonThemed,
div.disabled .gameSoundEffectIconPurpleNonThemed
{
    opacity: 0.4;
}

.gameSoundIcon
{
    position: absolute;
    width: 38px;
    height: 32px;
    top: 9px;
    left: 3px;
    background-image: url(../img/McMusicIcon-hd.png?v=1.6.3);
}
#container.black  .gameSoundIcon { background-image: url(../img/McMusicIcon-hd.png?v=1.6.3); }
#container.blue   .gameSoundIcon { background-image: url(../img/McMusicIcon-hd_blue.png?v=1.6.3); }
#container.white  .gameSoundIcon { background-image: url(../img/McMusicIcon-hd.png?v=1.6.3); }
#container.purple .gameSoundIcon { background-image: url(../img/McMusicIcon-hd_purple.png?v=1.6.3); }


.gameSoundIconNonThemed
{
    position: absolute;
    width: 38px;
    height: 32px;
    top: 9px;
    left: 3px;
    background-image: url(../img/McMusicIcon-hd.png?v=1.6.3);
}

.gameSoundIconBlueNonThemed
{
    position: absolute;
    width: 38px;
    height: 32px;
    top: 9px;
    left: 3px;
    background-image: url(../img/McMusicIcon-hd_blue.png?v=1.6.3);
}

.gameSoundIconPurpleNonThemed
{
    position: absolute;
    width: 38px;
    height: 32px;
    top: 9px;
    left: 3px;
    background-image: url(../img/McMusicIcon-hd_purple.png?v=1.6.3);
}

.gameSoundEffectBtnMenuPanel
{
    position: absolute;
    top: 68px;
    left: 130px;
}

.gameSoundEffectIcon
{
    position: absolute;
    width: 38px;
    height: 32px;
    top: 10px;
    left: 8px;
    background-image: url(../img/McSoundIcon-hd.png?v=1.6.3);
}
#container.black  .gameSoundEffectIcon { background-image: url(../img/McSoundIcon-hd.png?v=1.6.3); }
#container.blue   .gameSoundEffectIcon { background-image: url(../img/McSoundIcon-hd_blue.png?v=1.6.3); }
#container.white  .gameSoundEffectIcon { background-image: url(../img/McSoundIcon-hd.png?v=1.6.3); }
#container.purple .gameSoundEffectIcon { background-image: url(../img/McSoundIcon-hd_purple.png?v=1.6.3); }


.gameSoundEffectIconNonThemed
{
    position: absolute;
    width: 38px;
    height: 32px;
    top: 10px;
    left: 8px;
    background-image: url(../img/McSoundIcon-hd.png?v=1.6.3);
}

.gameSoundEffectIconBlueNonThemed
{
    position: absolute;
    width: 38px;
    height: 32px;
    top: 10px;
    left: 8px;
    background-image: url(../img/McSoundIcon-hd_blue.png?v=1.6.3);
}

.gameSoundEffectIconPurpleNonThemed
{
    position: absolute;
    width: 38px;
    height: 32px;
    top: 10px;
    left: 8px;
    background-image: url(../img/McSoundIcon-hd_purple.png?v=1.6.3);
}

.disabledIcon
{
    background-clip: padding-box;
    background-color: #555;
    width: 43px;
    height: 4px;
    position: absolute;
    top: 24px;
    left: 5px;
    border: 2px solid rgba(0,0,0,0.25);

    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -o-transform: rotate(45deg); /* Opera */
    -moz-transform: rotate(45deg); /* Firefox */

    transition-property: opacity;
    transition-timing-function: ease-in;
    transition-duration: 150ms;
    transition-delay: 50ms;
    -webkit-transition-property: opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 150ms;
    -webkit-transition-delay: 50ms;
    -ms-transition-property: opacity;
    -ms-transition-timing-function: ease-in;
    -ms-transition-duration: 150ms;
    -ms-transition-delay: 50ms;
    -o-transition-property: opacity;
    -o-transition-timing-function: ease-in;
    -o-transition-duration: 150ms;
    -o-transition-delay: 50ms;
    -moz-transition-property: opacity;
    -moz-transition-timing-function: ease-in;
    -moz-transition-duration: 150ms;
    -moz-transition-delay: 50ms;
}

/* =============================================================================
   End Menu Styles
   ========================================================================== */


/* =============================================================================
   Level Complete Styles
   ========================================================================== */

#levelCompleteContainer
{
    overflow: hidden;
    position: absolute;
    visibility: hidden;
    background-color: rgba(255,255,255,0.0);
    width: 960px;
    height: 640px;
    text-align: left;
    transition-property: background-color, opacity;
    transition-timing-function: ease-out;
    transition-duration: 500ms;
    transition-delay: 50ms;
    -webkit-transition-property: background-color, opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    -webkit-transition-delay: 50ms;
    -ms-transition-property: background-color, opacity;
    -ms-transition-timing-function: ease-out;
    -ms-transition-duration: 500ms;
    -ms-transition-delay: 50ms;
    -o-transition-property: background-color, opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 500ms;
    -o-transition-delay: 50ms;
    -moz-transition-property: background-color, opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
    -moz-transition-delay: 50ms;
}

#levelCompleteFade
{
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    width: 960px;
    height: 640px;
    position: absolute;
    transition-property: opacity;
    transition-timing-function: ease-out;
    transition-duration: 500ms;
    -webkit-transition-property: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    -ms-transition-property: opacity;
    -ms-transition-timing-function: ease-out;
    -ms-transition-duration: 500ms;
    -o-transition-property: opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 500ms;
    -moz-transition-property: opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
}

.bigText
{
    font-family: 'Tekton';
    font-size: 44px;
    color: #999999;
}

.bigFpsText
{
    font-family: 'Tekton';
    font-size: 44px;
    color: #999999;
    height: 50px;
    width: 50px;
    top: 10px;
    left: 10px;
    position: absolute;
    text-align: left;
}

.mediumLargeText
{
    font-family: 'Tekton';
    font-size: 34px;
    color: #999999;
}

.mediumText
{
    font-family: 'Tekton';
    font-size: 31px;
    color: #999999;
}

.smallText
{
    font-family: 'Tekton';
    font-size: 26.35px;
    color: #999999;
}

.scoreText
{
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 300px;
    margin-left: -125px;
}

.levelText
{
    position: absolute;
    bottom: 52px;
    left: 50%;
    width: 300px;
    margin-left: -125px;
}

.levelComplete
{
    position: absolute;
    width: 645px;
    height: 430px;
    top: 105px;
    left: 157px;
    opacity: 0;
    background-image: url(../img/McLevelComplete-hd.png?v=1.6.3);
    background-repeat: none;
    transform: scale(.8,.8);
    -ms-transform: scale(.8,.8);
    -webkit-transform: scale(.8,.8);
    -o-transform: scale(.8,.8);
    -moz-transform: scale(.8,.8);
    transition-property: transform, opacity;
    transition-timing-function: ease-out;
    transition-duration: 150ms;
    transition-delay: 0ms;
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 150ms;
    -webkit-transition-delay: 0ms;
    -ms-transition-property: -ms-transform, opacity;
    -ms-transition-timing-function: ease-out;
    -ms-transition-duration: 150ms;
    -ms-transition-delay: 0ms;
    -o-transition-property: -o-transform, opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 150ms;
    -o-transition-delay: 0ms;
    -moz-transition-property: -moz-transform, opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 150ms;
    -moz-transition-delay: 0ms;
}

#container.black .bigText, #container.black .mediumText, #container.black .mediumLargeText, #container.black .smallText { color: #999999; }
#container.blue .bigText, #container.blue .mediumText, #container.blue .mediumLargeText, #container.blue .smallText { color: #184563; }
#container.white .bigText, #container.white .mediumText, #container.white .mediumLargeText, #container.white .smallText { color: #999999; }
#container.purple .bigText, #container.purple .mediumText, #container.purple .mediumLargeText, #container.purple .smallText { color: #4A3B4A; }


#levelCompleteMessage
{
    position: absolute;
    top: 60px;
    left: 85px;
}

.letterBox
{
    height: 75px;
    background: #000;
    position: absolute;
    width: 960px;
    transform: translate(0px,0px);
    -ms-transform: translate(0px,0px);
    -webkit-transform: translate(0px,0px);
    -o-transform: translate(0px,0px);
    -moz-transform: translate(0px,0px);
    transition-property: transform;
    transition-timing-function: ease-out;
    transition-duration: 550ms;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 550ms;
    -webkit-animation-delay: 100ms;
    -ms-transition-property: -ms-transform;
    -ms-transition-timing-function: ease-out;
    -ms-transition-duration: 550ms;
    -ms-animation-delay: 100ms;
    -o-transition-property: -o-transform;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 550ms;
    -o-animation-delay: 100ms;
    -moz-transition-property: -moz-transform;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 550ms;
    -moz-animation-delay: 100ms;
}

#letterBoxTop
{
    top: 0px;
    transform: translate(0px,-75px);
    -ms-transform: translate(0px,-75px);
    -webkit-transform: translate(0px,-75px);
    -o-transform: translate(0px,-75px);
    -moz-transform: translate(0px,-75px);
}

#letterBoxBottom
{
    bottom: 0px;
    transform: translate(0px,75px);
    -ms-transform: translate(0px,75px);
    -webkit-transform: translate(0px,75px);
    -o-transform: translate(0px,75px);
    -moz-transform: translate(0px,75px);
}


#scoreContainer
{
    position: absolute;
    top: 140px;
    left: 280px;
}

#levelTitle
{
    height: 30px;
}

#lightsBonus
{
    height: 30px;
}

#timeBonus
{
    height: 30px;
}

.lineBreak
{
    height: 13px;
    width: 0px;
    background: url(../img/McTotalLine-hd_blue.png?v=1.6.3);
    background-repeat: no-repeat;
    transition-property: width;
    transition-timing-function: ease-out;
    transition-duration: 500ms;
    transition-delay: 0ms;
    -webkit-transition-property: width;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    -webkit-transition-delay: 0ms;
    -ms-transition-property: width;
    -ms-transition-timing-function: ease-out;
    -ms-transition-duration: 500ms;
    -ms-transition-delay: 0ms;
    -o-transition-property: width;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 500ms;
    -o-transition-delay: 0ms;
    -moz-transition-property: width;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
    -moz-transition-delay: 0ms;
}

#container.black .lineBreak { background: url(../img/McTotalLine-hd.png?v=1.6.3); }
#container.blue .lineBreak { background: url(../img/McTotalLine-hd_blue.png?v=1.6.3); }
#container.white .lineBreak { background: url(../img/McTotalLine-hd.png?v=1.6.3); }
#container.purple .lineBreak { background: url(../img/McTotalLine-hd_purple.png?v=1.6.3); }

#levelTotal
{
    height: 30px;
}

#completeRestartButton
{
    position: absolute;
    top: 280px;
    left: 264px;
}

#completeMenuButton
{
    position: absolute;
    top: 280px;
    left: 360px;
}

#completeSkipButton
{
    position: absolute;
    top: 280px;
    left: 455px;
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
}


#energiesContainer
{
    position: absolute;
    top: 50px;
    left: 280px;
    width: 320px;
    height: 80px;
}

.energy
{
    width: 80px;
    height: 80px;
    background-image: url(../img/McEnergyBig-hd.png?v=1.6.3);
    background-position-x: -10px;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-right: 20px;
    float: left;
}

.hideDelay
{
    transition-property: visibility;
    transition-timing-function: ease-out;
    transition-duration: 0ms;
    transition-delay: 500ms;
    -webkit-transition-property: visibility;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 0ms;
    -webkit-transition-delay: 500ms;
    -ms-transition-property: visibility;
    -ms-transition-timing-function: ease-out;
    -ms-transition-duration: 0ms;
    -ms-transition-delay: 500ms;
    -o-transition-property: visibility;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 0ms;
    -o-transition-delay: 500ms;
    -moz-transition-property: visibility;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 0ms;
    -moz-transition-delay: 500ms;
}

.pulse
{
    animation-name: pulse;
    animation-duration: 350ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-delay: 5000ms;
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 350ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: 5000ms;
    -ms-animation-name: pulse;
    -ms-animation-duration: 350ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease-out;
    -ms-animation-delay: 5000ms;
    -o-animation-name: pulse;
    -o-animation-duration: 350ms;
    -o-animation-iteration-count: 1;
    -o-animation-timing-function: ease-out;
    -o-animation-delay: 5000ms;
    -moz-animation-name: pulse;
    -moz-animation-duration: 350ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-delay: 5000ms;
}

.fadeUpDown
{
    animation-name: fadeUpDown;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-delay: 0ms;
    -webkit-animation-name: fadeUpDown;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: 0ms;
    -ms-animation-name: fadeUpDown;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease-out;
    -ms-animation-delay: 0ms;
    -o-animation-name: fadeUpDown;
    -o-animation-duration: 1000ms;
    -o-animation-iteration-count: 1;
    -o-animation-timing-function: ease-out;
    -o-animation-delay: 0ms;
    -moz-animation-name: fadeUpDown;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-delay: 0ms;
}

.energyInactive
{
    background-image: url(../img/McEnergyBigInactive-hd.png?v=1.6.3);
    opacity: .3;
}

#fakeHeroCanvas
{
    position: absolute;
    top: 30px;
    left: -20px;
}

#inactive
{
}

@-webkit-keyframes pulse
{

    from
    {
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -o-transform: scale(1,1);
    }

    50%
    {
        transform: scale(1.25,1.25);
        -webkit-transform: scale(1.25,1.25);
        -ms-transform: scale(1.25,1.25);
        -moz-transform: scale(1.25,1.25);
        -o-transform: scale(1.25,1.25);
    }

    to
    {
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -o-transform: scale(1,1);
    }
}

@-ms-keyframes pulse
{
    from
    {
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -o-transform: scale(1,1);
    }

    50%
    {
        transform: scale(1.25,1.25);
        -webkit-transform: scale(1.25,1.25);
        -ms-transform: scale(1.25,1.25);
        -moz-transform: scale(1.25,1.25);
        -o-transform: scale(1.25,1.25);
    }

    to
    {
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -o-transform: scale(1,1);
    }
}

@-moz-keyframes pulse
{
    from
    {
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -o-transform: scale(1,1);
    }

    50%
    {
        transform: scale(1.25,1.25);
        -webkit-transform: scale(1.25,1.25);
        -ms-transform: scale(1.25,1.25);
        -moz-transform: scale(1.25,1.25);
        -o-transform: scale(1.25,1.25);
    }

    to
    {
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -o-transform: scale(1,1);
    }
}

@-o-keyframes pulse {
    to{

      transform: scale(1,1);     
     -webkit-transform: scale(1,1);
     -ms-transform: scale(1,1);
     -moz-transform: scale(1,1);
     -o-transform: scale(1,1);

    }
    50% {

     transform: scale(1.25,1.25);     
     -webkit-transform: scale(1.25,1.25);
     -ms-transform: scale(1.25,1.25);
     -moz-transform: scale(1.25,1.25);
     -o-transform: scale(1.25,1.25);

    }
    from {
       transform: scale(1,1);     
     -webkit-transform: scale(1,1);
     -ms-transform: scale(1,1);
     -moz-transform: scale(1,1);
     -o-transform: scale(1,1);

    }
}

@-webkit-keyframes fadeUpDown
{

    from
    {
        opacity: 0;
    }

    50%
    {
        opacity: 1;
    }

    to
    {
        opacity: 0;
    }
}

@-ms-keyframes fadeUpDown
{
    from
    {
        opacity: 0;
    }

    50%
    {
        opacity: 1;
    }

    to
    {
        opacity: 0;
    }
}

@-moz-keyframes fadeUpDown
{
    from
    {
        opacity: 0;
    }

    50%
    {
        opacity: 1;
    }

    to
    {
        opacity: 0;
    }
}

@-o-keyframes fadeUpDown {
    from { 
      opacity: 0;
    }
    50% { 
      opacity: 1;
    }
    to {
       opacity:0;
    }
}

/* =============================================================================
   Game Site Styles
   ========================================================================== */
#ieLogo
{
    background-image: url(../img/rethink-cj.png?v=1.6.3);
    width: 119px;
    height: 39px;
    cursor: pointer;
    background-repeat: no-repeat;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    top: 23px;
    right: 77px;
}

#cjLogo
{
    background-image: url(../img/cjLogo.png?v=1.6.3);
    background-repeat: no-repeat;
    width: 211px;
    height: 80px;
    position: absolute;
    left: 30px;
    top: 0px;
    cursor: pointer;
}

.cjLogoText
{
    font-family: handofsean, 'Tekton';
    font-size: 17px;
    font-weight: 100;
    color: #C1C2C2;
    float: right;
    margin-right: 46px;
    margin-top: 12px;
}

.cjLogoTextMedium
{
    font-family: handofsean, 'Tekton';
    font-size: 14px;
    color: #C1C2C2;
    float: right;
    margin-right: 40px;
    margin-top: 13px;
}
.cjLogoTextSmall
{
    font-family: handofsean, 'Tekton';
    font-size: 12px;
    color: #C1C2C2;
    float: right;
    margin-right: 40px;
    margin-top: 14px;
}

#gameShadow
{
    position: absolute;
    top: -46px;
    left: -63px;
    /* z-index: 1;       */
    background-image: url(../img/shadow.png?v=1.6.3);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1177px 756px;
    width: 1177px;
    height: 756px;
}

.gameBorder
{
    position: absolute;
    top: -45px;
    left: -63px;
    background-image: url(../img/gameBorderBlack.png?v=1.6.3);
    background-repeat: no-repeat;
    background-position: top center;
    width: 1155px;
    height: 726px;
    opacity: 0;
}

#gameBorderBg {
    background-image: url(../img/gameBorderBg.png?v=1.6.3);
    opacity: 1;
}

#gameBorderBlack {
    background-image: url(../img/gameBorderBlack.png?v=1.6.3);
    opacity: 1;
}

#gameBorderBlue {
    background-image: url(../img/gameBorderBlue.png?v=1.6.3);
    opacity: 0;
}

#gameBorderWhite {
    background-image: url(../img/gameBorderWhite.png?v=1.6.3);
    opacity: 0;
}

#gameBorderPurple {
    background-image: url(../img/gameBorderPurple.png?v=1.6.3);
    opacity: 0;
}

.gameCorner {
    position: absolute;
    width: 30px;
    height: 30px;
    background-image: url(../img/gameCornersBlack.png?v=1.6.3);
}

.gameCorner.topLeft {
    top: 0px;
    left: 1px;
}

.gameCorner.bottomLeft {
    bottom: 0px;
    left: 1px;
    background-position: bottom left;
}

.gameCorner.topRight {
    top: 0px;
    right: 1px;
    background-position: top right;
}

.gameCorner.bottomRight {
    bottom: 0px;
    right: 1px;
    background-position: bottom right;
}


.gameEdge {
    width: 2px;
    position: absolute;
    top: 0px;
    bottom: 90px;
    background: black;
    z-index: 10;
    }

#leftEdge {
    left: 31px;
}

#rightEdge {
    right: 31px;
}

.menuHeader {
    position: absolute;
    top: 0px;
    left: 1px;
    width: 960px;
    height: 130px;
    background-position: 100% top;
    opacity: 0;
}

.menuFooter {
    position: absolute;
    bottom: 0px;
    left: 1px;
    width: 960px;
    height: 110px;
    background-position: 100% bottom;
    opacity: 0;
}

#menuHeaderBg, #menuFooterBg {
    background-image: url(../img/gameHeaderBg.png?v=1.6.3);
    opacity: 1;
}    

#menuHeaderBlack, #menuFooterBlack {
    background-image: url(../img/gameHeaderBlack.png?v=1.6.3);
    opacity: 1;
}    

#menuHeaderBlue, #menuFooterBlue {
    background-image: url(../img/gameHeaderBlue.png?v=1.6.3);
}    

#menuHeaderWhite, #menuFooterWhite {
    background-image: url(../img/gameHeaderWhite.png?v=1.6.3);
}    

#menuHeaderPurple, #menuFooterPurple {
    background-image: url(../img/gameHeaderPurple.png?v=1.6.3);
}    

.copyright
{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}

#gameFooter
{
    width: 100%;
    margin-top: -70px;
    z-index: 0;
}

#gameFooterContainer
{
    position: relative;
    margin: -74px auto 0px auto;
    position: relative;
    width: 1024px;
    height: 90px;
}

#gameFooterContainer > div {
    height: 80px;
}

.app-store-warning #gameFooterContainer, .app-store-warning #gameFooterContainer > div {
    height: 130px;
}

#game .shareButton
{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 38px;
    left: 110px;
}

#game .shareLink
{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    cursor: pointer;
}

#game .shareButton:hover {
    background-image: url(../img/shareHover.png?v=1.6.3);
    background-repeat: no-repeat;
    background-position: -93px 9px;

}

#game #stumbleuponContainer
{
    top: 152px;
    left: 108px;
}
#game #stumbleuponContainer:hover {
    background-position: -91px -105px;
}

#game #facebookContainer
{
    top: 88px;
    left: 128px;
}
#game #facebookContainer:hover {
    background-position: -111px -41px;
}


.mokusLogo
{
    position: relative;
    float: right;
    margin-right: 30px;
    margin-top: 5px;
}

#bgDetail
{
    background-image: url(../img/foregroundDetail.png?v=1.6.3);
    width: 565px;
    height: 270px;
    position: absolute;
    top: 0px;
    right: 0px;
}

#bgDetail2
{
    background-size: 100% 100%;
    width: 551px;
    height: 511px;
    position: absolute;
}

.bg
{
    background-image: url(../img/planet2.png?v=1.6.3);
    left: 2%;
    top: 39%;
}

#bgDetail3
{
    background-image: url(../img/lightsLeft.png?v=1.6.3);
    width: 367px;
    height: 240px;
    position: absolute;
    top: 50%;
    left: -14%;
    opacity: 0.6;
    /* z-index: 5;	   */
}

#bgDetail4
{
    background-image: url(../img/lightsRight.png?v=1.6.3);
    width: 367px;
    height: 240px;
    position: absolute;
    top: 41%;
    right: -10%;
    opacity: 0.7;
    /* z-index: 5;	   */
}


/* =============================================================================
   Level Picker
   ========================================================================== */

#levelPickerContainer
{
    visibility: hidden;
    position: absolute;
    overflow: hidden;
    width: 960px;
    height: 640px;
    background-position: 655px 0px, left top, 0px -80px;
    background-repeat: no-repeat;
    /*transition-property: opacity;
    transition-timing-function: ease-out;  
    transition-duration:500ms;  
    transition-delay: 150ms; 	

    -webkit-transition-property: opacity;
    -webkit-transition-timing-function: ease-out;  
    -webkit-transition-duration:500ms;  
    -webkit-transition-delay: 150ms; 	

    -ms-transition-property: opacity;
    -ms-transition-timing-function: ease-out;  
    -ms-transition-duration:500ms;  
    -ms-transition-delay: 150ms; 	

    -o-transition-property: opacity;
    -o-transition-timing-function: ease-out;  
    -o-transition-duration:500ms;  
    -o-transition-delay: 150ms; 	

    -moz-transition-property: opacity;
    -moz-transition-timing-function: ease-out;  
    -moz-transition-duration:500ms;  
    -moz-transition-delay: 150ms; 	*/
}


#levelPicker
{
    width: 690px;
    height: 180px;
    margin: auto;
    position: absolute;
    top: -55px;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scale(0.5,0.5);
    -webkit-transform: scale(0.5,0.5);
    -ms-transform: scale(0.5,0.5);
    -moz-transform: scale(0.5,0.5);
    -o-transform: scale(0.5,0.5);
    transition-property: transform, opacity;
    transition-timing-function: ease-out;
    transition-duration: 500ms;
    transition-delay: 0ms;
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    -webkit-transition-delay: 0ms;
    -ms-transition-property: -ms-transform, opacity;
    -ms-transition-timing-function: ease-out;
    -ms-transition-duration: 500ms;
    -ms-transition-delay: 0ms;
    -o-transition-property: -o-transform, opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 500ms;
    -o-transition-delay: 0ms;
    -moz-transition-property: -moz-transform, opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
    -moz-transition-delay: 0ms;
}

.levelItem
{
    width: 120px;
    height: 90px;
    background-image: url(../img/McLevelItemBackground-hd.png?v=1.6.3);
    margin-right: 18px;
    margin-top: 17px;
    background-position: 0px -20px;
    float: left;
    cursor: pointer;
    transition-property: transform;
    transition-timing-function: ease-in;
    transition-duration: 150ms;
    transition-delay: 0ms;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 150ms;
    -webkit-transition-delay: 0ms;
    -ms-transition-property: -ms-transform;
    -ms-transition-timing-function: ease-in;
    -ms-transition-duration: 150ms;
    -ms-transition-delay: 0ms;
    -o-transition-property: -o-transform;
    -o-transition-timing-function: ease-in;
    -o-transition-duration: 150ms;
    -o-transition-delay: 0ms;
    -moz-transition-property: -moz-transform;
    -moz-transition-timing-function: ease-in;
    -moz-transition-duration: 150ms;
    -moz-transition-delay: 0ms;
}

.levelItemInactive
{
    width: 120px;
    height: 90px;
    background: url(../img/McLevelItemInactive-hd.png?v=1.6.3);
    margin-right: 18px;
    margin-top: 17px;
    float: left;
}

.levelItemPressed
{
    background-position: -129px, 0px;
}

.levelItemInner
{
    width: 65px;
    height: 65px;
    margin-top: 10px;
    margin-left: 18px;
    float: left;
}

.levelItemLightsContainer
{
    width: 25px;
    height: 65px;
    margin-top: 12px;
    margin-right: 7px;
    float: right;
}

.levelItemLight
{
    background-image: url(../img/McLevelEnergy-hd.png?v=1.6.3);
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
}

.levelItemLightInactive
{
    background-position: -24px, 0px;
}

.levelItemDigitContainer
{
    margin: 12px auto 0px auto;
    width: 50px;
    height: 40px;
}

.levelItemDigit
{
    margin: 0px auto 0px auto;
    width: 25px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: -3px 0px;
}

.gameBackBtn
{
    position: absolute;
    top: 20px;
    right: 30px;

    transition-property: transform, opacity;
    transition-timing-function: ease-in;
    transition-duration: 500ms;
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 500ms;
    -ms-transition-property: -ms-transform, opacity;
    -ms-transition-timing-function: ease-in;
    -ms-transition-duration: 500ms;
    -o-transition-property: -o-transform, opacity;
    -o-transition-timing-function: ease-in;
    -o-transition-duration: 500ms;
    -moz-transition-property: -moz-transform, opacity;
    -moz-transition-timing-function: ease-in;
    -moz-transition-duration: 500ms;
}

.gameBackIcon
{
    position: absolute;
    width: 32px;
    height: 28px;
    top: 12px;
    left: 10px;
    background-image: url(../img/McBackIcon-hd.png?v=1.6.3);
    background-repeat: no-repeat;
}

#container.black  .gameBackIcon { background-image: url(../img/McBackIcon-hd.png?v=1.6.3); }
#container.blue   .gameBackIcon { background-image: url(../img/McBackIcon-hd_blue.png?v=1.6.3); }
#container.white  .gameBackIcon { background-image: url(../img/McBackIcon-hd.png?v=1.6.3); }
#container.purple .gameBackIcon { background-image: url(../img/McBackIcon-hd_purple.png?v=1.6.3); }

.gameFacebookIcon
{
    background-image: url(../img/faceBookIcon_large.png?v=1.6.3);
    background-repeat: no-repeat;
    position:absolute;
    height:33px;
    width:17px;
    top:50%;
    left:50%;
    margin-left:-8.5px;
    margin-top:-16.5px;
}

#scoreShareContainer
{
    transition-property: transform, opacity;
    transition-timing-function: ease-in;
    transition-duration: 500ms;
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 500ms;
    -ms-transition-property: -ms-transform, opacity;
    -ms-transition-timing-function: ease-in;
    -ms-transition-duration: 500ms;
    -o-transition-property: -o-transform, opacity;
    -o-transition-timing-function: ease-in;
    -o-transition-duration: 500ms;
    -moz-transition-property: -moz-transform, opacity;
    -moz-transition-timing-function: ease-in;
    -moz-transition-duration: 500ms;
}

.gameFacebookBtn
{
    position: absolute;
    top: 5px;
    left: 20px;
    transition-property: transform, opacity;
    transition-timing-function: ease-in;
    transition-duration: 500ms;
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 500ms;
    -ms-transition-property: -ms-transform, opacity;
    -ms-transition-timing-function: ease-in;
    -ms-transition-duration: 500ms;
    -o-transition-property: -o-transform, opacity;
    -o-transition-timing-function: ease-in;
    -o-transition-duration: 500ms;
    -moz-transition-property: -moz-transform, opacity;
    -moz-transition-timing-function: ease-in;
    -moz-transition-duration: 500ms;
}

.facebookScore
{
    position:absolute;
    top: 32px;
    left: 95px;
}

.facebookShare
{
    position:absolute;
    top: 10px;
    left: 95px;
    font-size:23px;
}

.facebookScoreOffline
{
    position:absolute;
    top: 18.5px;
    left: 20px;
}

.facebookShareOffline
{
    display:none;
}

#vote-sxsw {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    z-index: 10;
    border: none !important;
}

#vote-sxsw img {
    border: none !important;
}

/* =============================================================================
   Loader Styles
   ========================================================================== */

#loaderLogo
{
    width: 235px;
    height: 90px;
    position: absolute;
    margin: -280px 0px 0px -117px;
    left: 50%;
    top: 50%;
    background-image: url(../img/logo_red.png?v=1.6.3);
    background-repeat: no-repeat;
}

#loaderContainer
{
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
}

#loaderCanvas
{
    position: absolute;
    margin: -400px 0px 0px -250px;
    left: 50%;
    top: 50%;
}

#fader
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 1;
    transition-property: opacity;
    transition-timing-function: ease-out;
    transition-duration: 500ms;
    -webkit-transition-property: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    -ms-transition-property: opacity;
    -ms-transition-timing-function: ease-out;
    -ms-transition-duration: 500ms;
    -o-transition-property: opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 500ms;
    -moz-transition-property: opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
}

#loaderText
{
    width: 133px;
    height: 50px;
    position: absolute;
    margin: 180px 0px 0px -66px;
    left: 50%;
    top: 50%;
    background-image: url(../img/loaderText.png?v=1.6.3);
    background-repeat: no-repeat;
}

#loaderProgressBack
{
    width: 90px;
    height: 27px;
    position: absolute;
    margin: 200px 0px 0px -45px;
    left: 50%;
    top: 50%;
    background-image: url(../img/loaderSwooshBlack.png?v=1.6.3);
    background-repeat: no-repeat;
}

#loaderProgress
{
    width: 0px;
    height: 27px;
    position: absolute;
    margin: 200px 0px 0px -46px;
    left: 50%;
    top: 50%;
    background-image: url(../img/loaderSwooshBlue.png?v=1.6.3);
    background-repeat: no-repeat;
}

.noShow
{
    visibility: hidden;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: ease-out;
    transition-duration: 1000ms;
    -webkit-transition-property: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 1000ms;
    -ms-transition-property: opacity;
    -ms-transition-timing-function: ease-out;
    -ms-transition-duration: 1000ms;
    -o-transition-property: opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 1000ms;
    -moz-transition-property: opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 1000ms;
}

.show
{
    visibility: visible;
    opacity: 1;
}

/* surface (and other hd screens) */

@media screen and (max-device-width: 1366px) and (max-device-height: 768px)
{

    #container
    {
        transform-origin: center top;
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -webkit-transform: translate(0px, 0px) scale(1,1);
        -moz-transform: translate(0px, 0px) scale(1,1);
        -ms-transform: translate(0px, 0px) scale(1,1);
        -o-transform: translate(0px, 0px) scale(1,1);
        transform: translate(0px, 0px) scale(1,1);
    }

    #gameFooterContainer
    {
        width: 1024px;
        margin-top: -90px;
        -webkit-transform: translate(0px, 0px) scale(1,1);
        -moz-transform: translate(0px, 0px) scale(1,1);
        -ms-transform: translate(0px, 0px) scale(1,1);
        -o-transform: translate(0px, 0px) scale(1,1);
        transform: translate(0px, 0px) scale(1,1);
    }

    #gameHeaderContainer
    {
        width: 1024px;
        -webkit-transform: translate(0px, 0px) scale(1,1);
        -moz-transform: translate(0px, 0px) scale(1,1);
        -ms-transform: translate(0px, 0px) scale(1,1);
        -o-transform: translate(0px, 0px) scale(1,1);
        transform: translate(0px, 0px) scale(1,1);
    }
}

@media screen and (max-width: 1280px)
{
    #container
    {
        transform-origin: center center;
        -webkit-transform-origin: center center;
        -moz-transform-origin: center center;
        -ms-transform-origin: center center;
        -webkit-transform: translate(0px, 0px) scale(.8,.8);
        -moz-transform: translate(0px, 0px) scale(.8,.8);
        -ms-transform: translate(0px, 0px) scale(.8,.8);
        -o-transform: translate(0px, 0px) scale(.8,.8);
        transform: translate(0px, 0px) scale(.8,.8);
    }

    #gameFooterContainer
    {
        width: 900px;
        height: 100px;
        margin-top: -145px;
        -webkit-transform: translate(0px, 0px) scale(.9,.9);
        -moz-transform: translate(0px, 0px) scale(.9,.9);
        -ms-transform: translate(0px, 0px) scale(.9,.9);
        -o-transform: translate(0px, 0px) scale(.9,.9);
        transform: translate(0px, 0px) scale(.9,.9);
    }

    #gameHeaderContainer
    {
        width: 900px;
        height: 55px;
        -webkit-transform: translate(0px, 0px) scale(.9,.9);
        -moz-transform: translate(0px, 0px) scale(.9,.9);
        -ms-transform: translate(0px, 0px) scale(.9,.9);
        -o-transform: translate(0px, 0px) scale(.9,.9);
        transform: translate(0px, 0px) scale(.9,.9);
    }

    .meetPetitDiv 
    {
        bottom: -8px;
    }    
}

@media screen and (max-height: 767px)
{
    #container
    {
        transform-origin: center top;
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -webkit-transform: translate(0px, 0px) scale(.8,.8);
        -moz-transform: translate(0px, 0px) scale(.8,.8);
        -ms-transform: translate(0px, 0px) scale(.8,.8);
        -o-transform: translate(0px, 0px) scale(.8,.8);
        transform: translate(0px, 0px) scale(.8,.8);
    }

    #gameFooterContainer
    {
        width: 900px;
        height: 100px;
        margin-top: -220px;
        -webkit-transform: translate(0px, 0px) scale(.9,.9);
        -moz-transform: translate(0px, 0px) scale(.9,.9);
        -ms-transform: translate(0px, 0px) scale(.9,.9);
        -o-transform: translate(0px, 0px) scale(.9,.9);
        transform: translate(0px, 0px) scale(.9,.9);
    }

    #gameHeaderContainer
    {
        width: 900px;
        height: 55px;
        -webkit-transform: translate(0px, 0px) scale(.9,.9);
        -moz-transform: translate(0px, 0px) scale(.9,.9);
        -ms-transform: translate(0px, 0px) scale(.9,.9);
        -o-transform: translate(0px, 0px) scale(.9,.9);
        transform: translate(0px, 0px) scale(.9,.9);
    }

    .meetPetitDiv 
    {
        bottom: -8px;
    }    
}


/*  small smartphones */
@media all and (max-device-width: 480px) and (orientation: portrait)
{
    #fader 
    {
        visibility: hidden;
        opacity: 0.0;
    }    
    #loaderPanel
    {
        transform-origin: center top;
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -webkit-transform:  translate(0px, 200px) scale(.4,.4);
        -moz-transform:  translate(0px, 200px) scale(.4,.4);
        -ms-transform:  translate(0px, 200px) scale(.4,.4);
        -o-transform:  translate(0px, 200px) scale(.4,.4);
        transform:  translate(0px, 200px) scale(.4,.4);
    } 
    #container
    {
        transform-origin: center top;
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -webkit-transform: translate(-350px, 0px) scale(.3,.3);
        -moz-transform: translate(-350px, 0px) scale(.3,.3);
        -ms-transform: translate(-350px, 0px) scale(.3,.3);
        -o-transform: translate(-350px, 0px) scale(.3,.3);
        transform: translate(-350px, 0px) scale(.3,.3);
    }

    #gameFooterContainer
    {
        transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -webkit-transform: translate(0px, 0px) scale(.33,.33);
        -moz-transform: translate(0px, 0px) scale(.33,.33);
        -ms-transform: translate(0px, 0px) scale(.33,.33);
        -o-transform: translate(0px, 0px) scale(.33,.33);
        transform: translate(0px, 0px) scale(.33,.33);
        width: 900px;
        margin-top: -530px;
        margin-left: 10px;
    }

    #gameHeaderContainer
    {
        width: 900px;
        height: 55px;
        transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -webkit-transform: translate(0px, 35px) scale(.33,.33);
        -moz-transform: translate(0px, 35px) scale(.33,.33);
        -ms-transform: translate(0px, 35px) scale(.33,.33);
        -o-transform: translate(0px, 35px) scale(.33,.33);
        transform: translate(0px, 35px) scale(.33,.33);
    }
    
    #card-close {
        display: none;
    }
    
    #card-editor {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: scale(.4,.4);
    }
    
}

/*  small smartphones */
@media all and (max-device-width: 480px) and (orientation: landscape)
{
    #fader 
    {
        visibility: hidden;
        opacity: 0.0;
    }
    #loaderPanel
    {
        transform-origin: center top;
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -webkit-transform:  translate(0px, 115px) scale(.3,.3);
        -moz-transform:  translate(0px, 115px) scale(.3,.3);
        -ms-transform:  translate(0px, 115px) scale(.3,.3);
        -o-transform:  translate(0px, 115px) scale(.3,.3);
        transform:  translate(0px, 115px) scale(.3,.3);
    } 
    #container
    {
        transform-origin: center top;
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -webkit-transform: translate(-260px, -20px) scale(.3,.3);
        -moz-transform: translate(-260px, -20px) scale(.3,.3);
        -ms-transform: translate(-260px, -20px) scale(.3,.3);
        -o-transform: translate(-260px, -20px) scale(.3,.3);
        transform: translate(-260px, -20px) scale(.3,.3);
    }

    #gameFooterContainer
    {
        transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -webkit-transform: translate(90px, 0px) scale(.35,.35);
        -moz-transform: translate(90px, 0px) scale(.35,.35);
        -ms-transform: translate(90px, 0px) scale(.35,.35);
        -o-transform: translate(90px, 0px) scale(.35,.35);
        transform: translate(90px, 0px) scale(.35,.35);
        width: 900px;
        margin-top: -555px;
        margin-left: 5px;
    }

    #gameHeaderContainer
    {
        width: 900px;
        height: 55px;
        transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -webkit-transform: translate(90px, 10px) scale(.35,.35);
        -moz-transform: translate(90px, 10px) scale(.35,.35);
        -ms-transform: translate(90px, 10px) scale(.35,.35);
        -o-transform: translate(90px, 10px) scale(.35,.35);
        transform: translate(90px, 10px) scale(.35,.35);
    }
    
    #card-close {
        display: none;
    }
    
    #card-editor {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: scale(.4,.4);
    }
    
}


/* large smartphones */
@media all and (min-device-width: 768px) and (max-device-width: 768px) and (min-device-height: 1280px) and (orientation: landscape)
{
    #fader 
    {
        visibility: hidden;
        opacity: 0.0;
    }
    #loaderPanel 
    {
        transform-origin: center top;
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -webkit-transform: translate(0px, 100px) scale(.4,.4);
        -moz-transform: translate(0px, 100px) scale(.4,.4);
        -ms-transform: translate(0px, 100px) scale(.4,.4);
        -o-transform: translate(0px, 100px) scale(.4,.4);
        transform: translate(0px, 100px) scale(.4,.4);        
    }
    #container
    {
        transform-origin: center top;
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -webkit-transform: translate(-275px, -25px) scale(.30,.30);
        -moz-transform: translate(-275px, -25px) scale(.30,.30);
        -ms-transform: translate(-275px, -25px) scale(.30,.30);
        -o-transform: translate(-275px, -25px) scale(.30,.30);
        transform: translate(-275px, -25px) scale(.30,.30);
    }
    #gameFooterContainer
    {
        visibility:visible;

        transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -webkit-transform: translate(80px, -340px) scale(.35,.35);
        -moz-transform: translate(80px, -340px) scale(.35,.35);
        -ms-transform: translate(80px, -340px) scale(.35,.35);
        -o-transform: translate(80px, -340px) scale(.35,.35);
        transform: translate(80px, -340px) scale(.35,.35);

    }
    #fpsDiv 
    {
        transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -webkit-transform: translate(0px, 0px) scale(.35,.35);
        -moz-transform: translate(0px, 0px) scale(.35,.35);
        -ms-transform: translate(0px, 0px) scale(.35,.35);
        -o-transform: translate(0px, 0px) scale(.35,.35);
        transform: translate(0px, 0px) scale(.35,.35);        
    }

    #gameHeaderContainer
    {
        width: 900px;
        height: 55px;
        -webkit-transform: translate(-180px, -5px) scale(.30,.30);
        -moz-transform: translate(-180px, -5px) scale(.30,.30);
        -ms-transform: translate(-180px, -5px) scale(.30,.30);
        -o-transform: translate(-180px, -5px) scale(.30,.30);
        transform: translate(-180px, -5px) scale(.30,.30);
    }    
    
    #card-close {
        display: none;
    }
    
    #card-close {
        display: none;
    }
    
    #card-editor {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: scale(.5,.5);
    }
    

}

/* large smartphones */
@media all and (min-device-width: 768px) and (max-device-width: 768px) and (min-device-height: 1280px) and (orientation: portrait)
{
    #fader 
    {
        visibility: hidden;
        opacity: 0.0;
    }
    #loaderPanel 
    {
        transform-origin: center top;
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -webkit-transform: translate(0px, 100px) scale(.5,.5);
        -moz-transform: translate(0px, 100px) scale(.5,.5);
        -ms-transform: translate(0px, 100px) scale(.5,.5);
        -o-transform: translate(0px, 100px) scale(.5,.5);
        transform: translate(0px, 100px) scale(.5,.5);        
    }
    #container
    {
        transform-origin: center top;
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -webkit-transform: translate(-350px, 25px) scale(.30,.30);
        -moz-transform: translate(-350px, 25px) scale(.30,.30);
        -ms-transform: translate(-350px, 25px) scale(.30,.30);
        -o-transform: translate(-350px, 25px) scale(.30,.30);
        transform: translate(-350px, 25px) scale(.30,.30);
    }

    #gameFooterContainer
    {
        width:900px;
        transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -webkit-transform: translate(5px, -290px) scale(.35,.35);
        -moz-transform: translate(5px, -290px) scale(.35,.35);
        -ms-transform: translate(5px, -290px) scale(.35,.35);
        -o-transform: translate(5px, -290px) scale(.35,.35);
        transform: translate(5px, -290px) scale(.35,.35);

    }
    #fpsDiv 
    {
        transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -webkit-transform: translate(0px, 0px) scale(.35,.35);
        -moz-transform: translate(0px, 0px) scale(.35,.35);
        -ms-transform: translate(0px, 0px) scale(.35,.35);
        -o-transform: translate(0px, 0px) scale(.35,.35);
        transform: translate(0px, 0px) scale(.35,.35);        
    }

    #gameHeaderContainer
    {
        width: 900px;
        -webkit-transform: translate(-270px, 45px) scale(.30,.30);
        -moz-transform: translate(-270px, 45px) scale(.30,.30);
        -ms-transform: translate(-270px, 45px) scale(.30,.30);
        -o-transform: translate(-270px, 45px) scale(.30,.30);
        transform: translate(-270px, 45px) scale(.30,.30);
    }    
    
    #card-close {
        display: none;
    }
    
    #card-close {
        display: none;
    }
    
    #card-editor {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: scale(.5,.5);
    }
    

}

#editorLabel {
    margin: 30px 0px 0px 20px;
    width: 90%;
    padding: 15px;
    text-align: left;
}

#editorText {
    width: 90%;
    padding: 15px;
    clear: both;
}

#editorTheme, #editorLoad, #editorClear {
    margin: 10px 10px 50px;
    padding: 5px 10px;
    font-size: 15px;
}

#editorTheme {
    margin-left: 35px;
}