/**
 *  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
{
   
 position:absolute;   
 overflow:hidden;
    top: 0%;
    left: 0%;
    width:11em;
    height:10.78em;
    
    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, 1.0);
}

#dateDialextWrapper
{

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

    
    overflow:hidden;
    //display:none;
}
#dateDialext
{
 position:relative;   
 overflow:hidden;
    top: 12%;
    left: 0%;
    width:35em;
    
    height:24.7802733em;
     
    
    z-index:-1;
    
 
}
.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;
    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:1.05em;
    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:1.05em;
    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%;
}