/**
 *  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: 60%;
    width:5.5em;
    height:5.39em;
    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;

    
}

.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;
    
    
}


#dateDialext
{
 position:absolute;   
 overflow:hidden;
    top: -20%;
    left: -10%;
    width:40em;
    //width:20em;
    height:28.3203125em;
    //height:14.16015625em;
    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;

}

.spritePosition
{
 position:absolute;   
 overflow:hidden;
    top: 50%;
    left: 50%;
    width:4.5em;
    height:4.5em;
    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%;
    
    
    z-index:11;
    }

.dateCurrentYear
{
    position: absolute;
    left: 66.3%;
    top: 31.3%;
    -o-transform: rotate(52deg); /* Opera */
    width:3em;
    height:1em;
    width:3em;
    height:1em;
    font-size:0.6em;
    font-size:1.2em;
    background-color: #00d3ff;
    color:White;
    text-align:center;
    padding-bottom:0.5em;
    
    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 */
 //-o-transform: rotate(-90deg); /* Opera */
 -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:3em;
    height:1em;
    font-size:0.6em;
    font-size:1.2em;
    background-color: #00eade;
    color:#90f7f0;
    text-align:center;
    padding-bottom:0.5em;
    
    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 */
// -o-transform: rotate(-85deg); /* Opera */
 -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%;
}