/**
 *  Vertical Buttons
 */
.scrollView-next {
    position: absolute;
    bottom: 1%;
    left: 45%;
    width: 1em;
    height: 1em;
    cursor: pointer;
    background: url('next.png') no-repeat scroll top;
    background-size: cover;

-moz-user-select: none;
 user-select: none;
-webkit-user-select:none;

display:none;

}




.scrollView-next:hover,
.scrollView-next:focus {
    background-position: 0 33%;
}

.scrollView-next:active {
    background-position: 0 68%;
}

.scrollView-next-disabled,
.scrollView-next-disabled:hover,
.scrollView-next-disabled:focus,
.scrollView-next-disabled:active {
    cursor: default;
    background-position: bottom;
}


.scrollView-prev {
    position: absolute;
    top: 1%;
    left: 45%;
    width: 1em;
    height: 1em;
    cursor: pointer;
    background: transparent url(prev.png) no-repeat scroll top;
    background-size: cover;

-moz-user-select: none;
 user-select: none;
-webkit-user-select:none;

display:none;

}

.scrollView-prev:hover,
.scrollView-prev:focus {
    background-position: 0 33%;
}

.scrollView-prev:active {
    background-position: 0 68%;
}

.scrollView-prev-disabled,
.scrollView-prev-disabled:hover,
.scrollView-prev-disabled:focus,
.scrollView-prev-disabled:active {
    cursor: default;
    background-position: bottom;
}


#moraleDialext
{
   font-size:10em;
 position:absolute;   
 overflow:hidden;
    top: 0%;
    left: 0;
    width:1.1em;
    height:1.078em;
    
    z-index:-1;


}




.moraleDialBackground {
    position: absolute;
    top: 0%;
    left: 0%;
    width:100%;
    height:100%;
    background: transparent url(MoraleDialBackground.png) no-repeat scroll top;
    background-size: auto 100% ;
    background-position:0 0;

//    -webkit-transform: translate3d(0, 0, 0);
}

.moraleDial 
{
    position: absolute;
    top: 0%;
    left: 0%;
    width:200%;
    height:100%;
    background: transparent url( MoraleDialHighlightedH.png) no-repeat scroll right;
    background-size: auto 100% ;
    background-position: left 0%;
    
    
    
    z-index:11;
    
    -webkit-transform: translate3d(0, 0, 0);
}

#dateDialextWrapper
{

    top: 13%;
    left: 0%;
    //width:35em;
    //height:22em;
    width:100%;
    height:100%;

    
    overflow:hidden;
    display:none;
}
#dateDialext
{
 position:relative;   
 overflow:hidden;
    top: 10%;
    left: 0%;
    width:35em;
    height:24.7802733em;

    top: 18%;
    left: 17%;
    width:14em;
    height:9.91210932em;
     
    
    z-index:-1;
    
   -webkit-transform: translate3d(0, 0, 0); 
}
.dateDialBackground {
    position: absolute;
    
    top: 0%;
    left: 0%;
    width:100%;
    height:100%;
    background: transparent url(DateDial.png) no-repeat scroll top;
    background-size: auto 100% ;
    background-position:0 0;


    z-index:10;
//    -webkit-transform: translate3d(0, 0, 0);
}

.spritePosition
{
 position:absolute;   
 overflow:hidden;
    top: 50%;
    left: 50%;
    width:4.5em;
    width:3.9365em;
    height:4.5em;
    height:3.9365em;

    width:1.5746em;
    height:1.8em;


    z-index:11;
    
}

.dateDial 
{
    position: absolute;
    top: 0%;
    left: 0%;
    width:200%;
    height:100%;
    background: transparent url( DateDialHighlightedHB.png) no-repeat scroll right;
    background-size: auto 100% ;
    background-position: left 0%;
//    -webkit-transform: translate3d(0.0, 0.0, 1.0);  /* problems in chrome with 0,0,0 */
    
    
    z-index:11;
    }

.dateCurrentYear
{
    position: absolute;
    left: 66.3%;
    top: 31.3%;
    -o-transform: rotate(52deg); /* Opera */
    width:3em;
    height:1em;
    width:2.625em;
    height:0.875em;




    font-size:0.6em;
    font-size:0.42em;
    background-color: #00d3ff;
    color:White;
    text-align:center;
    padding-bottom:0.3465em;
    
    border-top-right-radius: 16px;
    -moz-border-top-right-radius: 16px;
    -webkit-border-top-right-radius: 16px;    
    
    transform: rotate(-90deg);
 -ms-transform: rotate(-90deg); /* IE 9 */
 -webkit-transform: rotate(-90deg); /* Safari and Chrome */
 -moz-transform: rotate(-90deg); /* Firefox */

/* 
  transition: top 2s, left 2s, transform 2s;
 -moz-transition: top 2s, left 2s, -moz-transform 2s;
 -webkit-transition: top 2s, left 2s, -webkit-transform 2s;
 -o-transition: top 2s, left 2s, -o-transform 2s;
*/
 
 z-index:5;

    }

.dateNextYear
{
    position: absolute;
    left: 68.7%;
    top: 37.5%;
    -o-transform: rotate(57deg); /* Opera */
    width:3em;
    height:1em;
    width:2.625em;
    height:0.875em;
    font-size:0.6em;
    font-size:0.42em;
    background-color: #00eade;
    color:#90f7f0;
    text-align:center;
    padding-bottom:0.3465em;
    
    border-top-right-radius: 16px;
    -moz-border-top-right-radius: 16px;
    -webkit-border-top-right-radius: 16px;    
    
    transform: rotate(-85deg);
 -ms-transform: rotate(-85deg); /* IE 9 */
 // -webkit-transform: rotate(-85deg); /* Safari and Chrome */

 -moz-transform: rotate(-85deg); /* Firefox */
 /*
 transition: top 2s, left 2s, transform 2s;
 -moz-transition: top 2s, left 2s, -moz-transform 2s;
 -webkit-transition: top 2s, left 2s, -webkit-transform 2s;
 -o-transition: top 2s, left 2s, -o-transform 2s;
*/
 
 z-index:4;

    }

.dateInDialTab
{
    position:relative;
    top:-10%;
}


#calendar{
position:absolute;
top:16%;
left:55%;
//width:1em;
//height:1em;

font-size:0.6em;
}

#calendarYear{
position:absolute;
text-align:right;
width:2.4em;

}

#calendarMonth{
position:absolute;
text-align:right;
left:4em;
width:1.2em;


}




.MarqueeExt
{
    position:absolute;
    top:21.1%;
    left:23.4%;
    right:22.1%;
    bottom:74.2%;
    
    
    background-color:black;
    color:white;
    font-size:1em;
    overflow:hidden;
}
.MarqueeInt
{
    position:relative;
    width:300em;
}
.green
{
    color:green;
}
#Test
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
	  font-size:1em;
	  background-color:lime;

}

.MarqueeUsingCanvas
{
    position:absolute;
    top:21.1%;
    left:23.4%;
top:80%;
left:0%;

width:100%;
    background-color:black;
    overflow:hidden;

    
}
.CloudsUsingCanvas
{
    position:absolute;
    top:21.1%;
    left:23.4%;

    background-color:cornflowerblue;
    overflow:hidden;


    z-index:-10;
//    z-index:-29;    
}

#CloudDivExt
{
z-index:1;
}
.CloudsUsingDiv
{
    position:absolute;

    top:22.1%;
    left:30.5%;
//    width:45%;
    height:51.5%;


    background-color:cornflowerblue;
    color:white;

    z-index:-290;
     -webkit-transform: translate3d(0, 0, 0);

}
.CloudsImagesUsingDiv
{
    position:absolute;
    background-repeat:no-repeat;
    background-size:100% 100%;
    z-index:10;
//         -webkit-transform: translate3d(0, 0, 0);
}
.divSkyImage
{
    position:absolute;
    background-repeat:no-repeat;
    background-size:100% 100%;
    z-index:9;
    width:100%;
    height:100%;

    background-image:url('sky.png');
//         -webkit-transform: translate3d(0, 0, 0);
}
.divBuildingsImage
{
    position:absolute;
    background-repeat:no-repeat;
    background-size:100% 100%;
    z-index:11;
    width:100%;
    height:58.42%;
    top:41.58%;

    background-image:url('buildings.png');
//         -webkit-transform: translate3d(0, 0, 0);
}


#boostCanvas
{
position:absolute;
left:40%;
top:45%;

visibility:hidden;

//width:20%;
//height:5%;


z-index:200;

//transition: width 2s, height 2s, transform 2s;
// -moz-transition: width 2s, height 2s, -moz-transform 2s;
// -webkit-transition: width 2s, height 2s, top 1s, -webkit-transform 2s;
// -o-transition: top 0.7s, -o-transform 0.3s, opacity 0.7s;


//-o-animation: boostAnim 1s infinite;

-webkit-transform: translate3d(0, 0, 0);

width:20%;
heigth:8%;


opacity:0;
}

.boostCanvasClass
{

animation-name: boostAnim1;
-o-animation-name: boostAnim1;
-webkit-animation-name: boostAnim1;
-moz-animation-name: boostAnim1;

animation-duration:2s;
-o-animation-duration:2s;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;


animation-direction:alternate;
-o-animation-direction:alternate;
-moz-animation-direction:alternate;
-webkit-animation-direction:alternate;

animation-iteration-count:1;
-webkit-animation-iteration-count:1;
-o-animation-iteration-count:1;

}



@keyframes boostAnim1
{
0% {opacity:1}
10% {transform:scale(2,2);}
20% {transform:scale(1,1);}
100% {transform:scale(0.5,0.5);transform:translateY(-10em);opacity:0.3}
}
@-webkit-keyframes boostAnim1
{
0% {opacity:1}
10% {-webkit-transform:scale(2,2);}
20% {-webkit-transform:scale(1,1);}
100% {-webkit-transform:scale(0.5,0.5);-webkit-transform:translateY(-10em);opacity:0.3}
}
@-moz-keyframes boostAnim1
{
0% {opacity:1}
10% {-moz-transform:scale(2,2);}
20% {-moz-transform:scale(1,1);}
100% {-moz-transform:scale(0.5,0.5);-moz-transform:translateY(-10em);opacity:0.3}
}
@-o-keyframes boostAnim1
{
0% {opacity:1}
10% {-o-transform:scale(2,2);}
20% {-o-transform:scale(1,1);}
100% {-o-transform:scale(0.5,0.5);-o-transform:translateY(-10em);opacity:0.3}
}



@keyframes boostAnim2
{
0% {top:45%;}
10% {top:45%;-o-transform:scale(2,2);}
20% {top:45%;-o-transform:scale(1,1);}
100% {top:5%;}
}

#boostCanvas.boostCanvas2
{

transform:scale(2,2);
 -ms-transform:scale(2,2); /* IE 9 */
 -moz-transform:scale(2,2); /* Firefox */
 -webkit-transform:scale(2,2); /* Safari and Chrome */
 -o-transform:scale(2,2); /* Opera */
}
#boostCanvas.boostCanvas3
{
top:10%;
left:40%;
transform:scale(0.3,0.3);
 -ms-transform:scale(2,2); /* IE 9 */
 -moz-transform:scale(2,2); /* Firefox */
 -webkit-transform:scale(2,2); /* Safari and Chrome */
 -o-transform:scale(0.3,0.3); /* Opera */
opacity:0.3;
}


#eventsOfTheGameAnimationExt {
position:absolute;
z-index:221;
top:5%;
left:10%;
width:80%;
height:80%;

//-webkit-transform: translate3d(0, 0, 0);

transform:scale(0,0);
 -ms-transform:scale(0,0); /* IE 9 */
 -moz-transform:scale(0,0); /* Firefox */
 -webkit-transform:scale(0,0); /* Safari and Chrome */
 -o-transform:scale(0,0); /* Opera */

//opacity:0;


}
#eventsOfTheGameAnimationInt{
position:absolute;
width:100%;
height:100%;
    background-repeat:no-repeat;
    background-size:100% 100%;

}
#eventsOfTheGameAnimationIntText{
position:absolute;
top:50%;
width:100%;
//height:100%;
font-size:2em;
font-family: 'GROBOLD'; 
text-align:center;
color:yellow;
}


.eventsOfTheGameAnimationClass
{

animation: eventsOfTheGameAnimationAnim1 4s;
-o-animation: eventsOfTheGameAnimationAnim1 4s;
-webkit-animation: eventsOfTheGameAnimationAnim1 4s;
-moz-animation: eventsOfTheGameAnimationAnim1 4s;

}

@keyframes eventsOfTheGameAnimationAnim1
{
0% {scale(1,1)}
10% {transform:scale(1.1,0.7);}
20% {transform:scale(0.6,0.6);}
30% {transform:scale(0.7,1.1);}
40% {transform:scale(0.8,0.8);opacity:1}

100% {transform:scale(0.5,0.5);opacity:0}

}
@-webkit-keyframes eventsOfTheGameAnimationAnim1
{
0% {scale(1,1)}
10% {-webkit-transform:scale(1.1,0.7);}
20% {-webkit-transform:scale(0.6,0.6);}
30% {-webkit-transform:scale(0.7,1.1);}
40% {-webkit-transform:scale(0.8,0.8);opacity:1}

100% {transform:scale(0.5,0.5);opacity:0}
}
@-moz-keyframes boostAnim1
{
0% {opacity:1}
10% {-moz-transform:scale(2,2);}
20% {-moz-transform:scale(1,1);}
100% {-moz-transform:scale(0.5,0.5);-moz-transform:translateY(-10em);opacity:0.3}
}
@-o-keyframes boostAnim1
{
0% {opacity:1}
10% {-o-transform:scale(2,2);}
20% {-o-transform:scale(1,1);}
100% {-o-transform:scale(0.5,0.5);-o-transform:translateY(-10em);opacity:0.3}
}