/*****************************/
/* BEGINNING OF littlePigs.css */
/*****************************/

@font-face {
    font-family: 'Dimbo';
    src: url('fonts/dimbo.ttf');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-family: Dimbo;
    color: #000;
    font-size: 24px;
    height: 2000px;
    overflow: hidden;
    background: #000 no-repeat center top scroll; /*use scroll not fixed as causes issues on S3*/

    -webkit-touch-callout: none; /*prevent the callout toolbar from appearing when a user touches and holds an element such as an anchor tag*/
    -webkit-focus-ring-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: auto; /* prevent webkit from resizing text to fit */
}

#layers * /*make all text unselectable*/
{
    -webkit-tap-highlight-color: rgba(255,255,255,1);/*Remove Gray Highlight When Tapping Links in Mobile Safari*/
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    /* No support for these yet, use at own risk */
    -o-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}


#layers {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0 0 0 0;
    width: 874px;/*948px; width: 800px; per design but I need 74px at each side for #game to be centered*/
    /*height: 526px;*/
    height: 522px;
    text-align: center;
}

.hidden {
    display: none;
}

#rotateToPlayHolder {
    background-color:#000; 
    position:absolute; 
    top:0px; 
    left:0px; 
    z-index:201; 
    margin:0px; 
    padding:0px;
    border:0px; 
    color:#FFF;
};

.bouncing {
    /*Animation*/
    -o-animation-name: bounce;
    -o-animation-duration: 0.5s;
    -o-animation-timing-function: ease-out;
    -moz-animation-name: bounce;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-out;
    -ms-animation-name: bounce;
    -ms-animation-duration: 0.5s;
    -ms-animation-timing-function: ease-out;
}

@-o-keyframes bounce {    0% {top: 0px;}  35% {top: -20px;}   100% {top: 0px;}   }
@-moz-keyframes bounce {    0% {top: 0px;}  35% {top: -20px;}   100% {top: 0px;}   }
@-webkit-keyframes bounce{  0% {top: 0px;}  35% {top: -20px;}   100% {top: 0px;}   }
@-ms-keyframes bounce{	    0% {top: 0px;}  35% {top: -20px;}   100% {top: 0px;}   }

#elmtAudio {
    position: absolute;
    top: 0;
    left: 0;
}

#loading {
    position: absolute;
    width: 100%;
    background: #000;
    top: -64px;
    height: 586px; /* same as layers + top (above)*/
    z-index: 100;
    font-size: 32px;
    color: #FFF;
}

#splashImage {
    margin-top: 128px;
}

/*********************************************************** REELS and REELS CONATINER POSITION */
#reelsContainer {
    position: absolute;
    top: 107px;
    width: 638px;
    height: 383px;
    left: 78px;
    background: url(../img/common/reels-background2.png) -6px 0 no-repeat;
}

.inHelp #reelsContainer {
    display: none;
}

.reel {

    display: inline-block;
    position: absolute;
    top: 10px;
    width: 122px;
    height: 374px;
    overflow: hidden;
    
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
.reel *{
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

#reel0 {
    left: 2px;
}
#reel1 {
    left: 130px;
}
#reel2 {
    left: 258px;
}
#reel3 {
    left: 386px;
}
#reel4 {
    left: 514px;
}

.reelStill {
    position: absolute;
    margin: 0px auto;
    top: 7px;
    width: 100%;
}
.reelSpin {
    position: absolute;
    margin: 0px auto;
    width: 100%;
    top: 6px;
    /*below fixes an issue on iPad3 showing a pin line whilst spinning*/
    -webkit-backface-visibility: visible !important; /*iPhone4 misses out the spinning reels if this is set to hidden*/
    left: 6px;
}

.spinning {

    /*Animation*/
    -o-animation-name: spin;
    -o-animation-duration: 0.2s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -moz-animation-name: spin;
    -moz-animation-duration: 0.2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-name: spin;
    -ms-animation-duration: 0.2s;
    -ms-animation-timing-function: linear;/*   ease; linear; ease-in; ease-ou; ease-in-out; cubic-bezier	*/
    -ms-animation-iteration-count: infinite;
}

@-o-keyframes spin{0% {top: -657px;}100% {top: 0px;}}
@-webkit-keyframes spin{0% {top: -657px;}100% {top: 0px;}}
@-moz-keyframes spin{0% {top: -657px;}100% {top: 0px;}}
@-ms-keyframes spin{0% {top: -657px;}100% {top: 0px;}}

/*********************************************************** SYMBOLS */
.symbol {
    background: url(../img/common/reelsymbols.png) no-repeat;
    display: block;
    width: 100%;
    height: 122px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: absolute;
    border: 0;
    background-position-y: 122px;
}
#s0,#s1,#s2,#s3,#s4 {top: 0px;}
#s5,#s6,#s7,#s8,#s9 {top: 121px;}
#s10,#s11,#s12,#s13,#s14 {top: 242px;}
#s15,#s16,#s17,#s18,#s19 {top: 363px;}


.anim {
    width: 122px;
    height: 122px;
    position: absolute;
}
#s0anim {    top: 17px;    left: 2px;}
#s1anim {    top: 17px;    left: 130px;}
#s2anim {    top: 17px;    left: 258px;}
#s3anim {    top: 17px;    left: 386px;}
#s4anim {    top: 17px;    left: 514px;}
#s5anim {    top: 138px;    left: 2px;}
#s6anim {    top: 138px;    left: 130px;}
#s7anim {    top: 138px;    left: 258px;}
#s8anim {    top: 138px;    left: 386px;}
#s9anim {    top: 138px;    left: 514px;}
#s10anim {    top: 259px;    left: 2px;}
#s11anim {    top: 259px;    left: 130px;}
#s12anim {    top: 259px;    left: 258px;}
#s13anim {    top: 259px;    left: 386px;}
#s14anim {    top: 259px;    left: 514px;}

.symbol.PigOrangeShoes {    background-position-y: 0px}
.symbol.PigGreenShoes {    background-position-y: -122px}
.symbol.PigBrownShoes {    background-position-y: -244px}
.symbol.PigPoliceReport {    background-position-y: -366px}
.symbol.PigWanted {    background-position-y: -488px}
.symbol.PigCellphone {    background-position-y: -610px}
.symbol.PigYellowHat {    background-position-y: -732px}
.symbol.PigGreenHat {    background-position-y: -854px}
.symbol.PigRedCap {    background-position-y: -976px}
.symbol.FreeSpins {    background-position-y: -1098px}
.symbol.OrangeShoes {    background-position-y: -1220px}
.symbol.GreenShoes {    background-position-y: -1342px}
.symbol.BrownShoes {    background-position-y: -1464px}
.symbol.PoliceReport {    background-position-y: -1586px}
.symbol.Wanted {    background-position-y: -1708px}
.symbol.Cellphone {    background-position-y: -1830px}
.symbol.YellowHat {    background-position-y: -1952px}
.symbol.GreenHat {    background-position-y: -2074px}
.symbol.RedCap {    background-position-y: -2196px}

.S1anim div {
    line-height: 26px;
    font-size: 26px;
    margin: 0;
    padding: 20px 0 0 0;
    -webkit-backface-visibility: visible !important; /*iPhone4 misses out the spinning reels if this is set to hidden*/
    text-shadow: -3px 0 #09aae8, 0 3px #09aae8, 3px 0 #09aae8, 0 -3px #09aae8;
}
.S1anim .nonshaded div {
    color: #dfdfe3;
    text-shadow: -3px 0 #000, 0 3px #000, 3px 0 #000, 0 -3px #000;
}
.S2 {    background-position: 0px -799px;}
.S3 {    background-position: -2px -897px;}

.symbol img {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    left: 0;
    top: 0;
}
.whiteBlackout{
    background-color:rgba(255,255,255,0.5);
    width:100%;
    height:122px;
    position:absolute;
    top:0;
    left:0;
}

#wlContainer {
    position: absolute;
    top: 108px;
    width: 636px;
    height: 380px;
    left: 78px;
    z-index: 40;
    overflow: hidden;
}

#animsContainer {
    position: absolute;
    top: 107px;
    width: 636px;
    height: 380px;
    left: 78px;
    z-index: 42;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

#animsContainer *{
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

/*************************************************************************************************** END REELS **/

#popup {
    position: absolute;
    top: 73px;
    left: 60px;
}

#game {
    position: relative; /* Needed to be able to use utils.js:findPosX/findPosY. */
    display: block;
    top: 0px;
    left: -74px;
    width: 948px; /* 800px for design plus 74 px each side to display the house bg*/
    height: 530px;
    margin: 0 74px 0 74px; /* patch to display the house Bg*/
}
#gameBg {
    position:absolute; 
    top: -63px; 
    left: 0px;
}

.inHelp #game {
    display: none;
}

/*************************************************************************************************** CONTROL PANEL **/

#controlPanel {
    display: block;
    position: absolute;
    right: 0px;
    top: 94px;
    width: 798px;
    height: 424px;
    overflow-x: hidden;    
    font-size: 24px;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    z-index:42;
}
#helpButtons{
    height: 424px;    
}

.inHelp #controlPanel {
    z-index: 1; /* Bring control panel forward as help covers entire game space! */
}

/*help button*/
#paytableBtn {
    position: absolute;
    top: 0px;
    right: 0px;
    background: no-repeat;
    width: 142px;
    height: 62px;
}

#paytableBtn.enabled {
    background-position-x: -147px;
}

/*autoplay Button*/

#autoplayBtn {
    position: absolute;
    top: 56px;
    right: 0px;
    background: no-repeat;
    width: 142px;
    height: 62px;
    color: #FFF;
    z-index: 2;
}
#autoplayBtn.enabled {
    background-position-x: -147px;
}

#autoplayBtn.expand.enabled {/* X button*/
    background-position: -2px 2px;
    background-repeat: no-repeat;
    height: 256px;
}

/*stop autoplay Button*/
#autoplayBtn.inAutoplay.enabled {
    background: no-repeat;
    top:59px;
}

#autoplayBtn.inAutoplay p {
    margin: 0 auto;
    padding: 0px;
    line-height: 22px;
    top: 26px;
    position: absolute;
    text-align: center;
    width: 125px;
    left: 10px;
    font-size: 20px;
}

#autoplayValuesContainer {
    position: relative;
    z-index: 50;
    right: 0px;
    top: 56px;
    width: 146px;
    height: 154px;
}

.autoplayValue {
    -webkit-transition: top 0.6s;
    width: 142px;
    position: absolute;
    background: url(../img/common/buttons/autoplayvalue.png) 0 -14px no-repeat;
    top: 0;
    height: 40px;
    font-size: 24px;
    line-height: 36px;
    text-shadow: -3px 0 #860202, 0 2px #860202, 3px 0 #860202, 0 -2px #860202;
    font-family: warszawaregular;
}


/*--------------------------------------------------------------*/
#stakeSelector {
    position: absolute;
    top: 236px;
    right: -246px;
    width: 250px;
    height: 106px;
    background: url(../img/common/betbox.png) no-repeat;
    -webkit-transition: right 0.6s;
    display: none;
    z-index: 50;
}

/*plus button*/
#stakePlus {
    position: absolute;
    right: 0px;
    top: 10px;
    width: 62px;
    height: 84px;
    background: url(../img/common/buttons/plusstakes.png) no-repeat;
    background-position-x: -55px;
}

#stakePlus.enabled {
    background-position-x: 0px;
}

/*stake Input*/
#stakeInput {
    position: absolute;
    left: 56px;
    top: 39px;
    width: 140px;
    height: 46px;
    font-size: 40px;
    color: #FFD600;
}

#stakeInput p {
    line-height: 50px;
    margin: 0;
}

/* minus button*/
#stakeMinus {
position: absolute;
left: 9px;
top: 5px;
width: 62px;
height: 86px;
background: url(../img/common/buttons/minusstakes.png) no-repeat;
background-position-x: -78px;
}
#stakeMinus.enabled {
background-position-x: -15px;
}

#totalBet {
    position: absolute;
    right: -1px;
    bottom: 28px;
    width: 143px;
    height: 87px;
    background: no-repeat;
    color: #000;
}

#totalBetTxt  {
    margin: 0 auto;
    padding: 0px;
    position: absolute;
    top: 39px;
    left: 12px;
    width: 120px;
    height: 36px;
    line-height: 36px;
    font-size: 22px;
}

#stopAnimationsBtn {
    position: absolute;
    top: 8px;
    right: 140px;
    width: 670px;
    height: 392px;
    z-index:45;
    display:none;
}
/*-------------------------------------------------------------------------------------*/

.shaded {
    filter: alpha(opacity=60); /* IE */
    opacity: 0.6; /* Safari, Opera */
    -moz-opacity: 0.60; /* FireFox */
    background-color: #000;
    height: 96px;
    width: 96px;
    position: absolute
}
.nonshaded {
    position: absolute;
    width: 96px;
}
.nonshaded p {
    filter: alpha(opacity=70); /* IE */
    opacity: 0.7; /* Safari, Opera */
    -moz-opacity: 0.70; /* FireFox */
}

/* spin button*/
#spinBtn {
    position: absolute;
    top: 120px;
    right: -10px;
    width: 153px;
    height: 94px;
    background: no-repeat;
}

#spinBtn.enabled {
    background-position-x: -150px;
}

/* bet button*/
#betBtn {
    position: absolute;
    top: 244px;
    right: 0px;
    width: 138px;
    height: 68px;
    background: -20px 0 no-repeat;
}

#betBtn.enabled {
    background-position-x: -172px;
}

/* help screen previous button*/
#prevBtn {
    display: block;
    position: absolute;
    top: 168px;
    right: -2px;
    width: 142px;
    height: 82px;
    background: no-repeat;
    
}

/* help screen next button*/
#nextBtn {
    display: block;
    position: absolute;
    top: 74px;
    right: -6px;
    width: 151px;
    height: 82px;
    background: no-repeat;
}

#helpExitBtn {
    background: no-repeat;
    background-position-y: -62px;
    background-position-x: -149px;
    display: block;
    position: absolute;
    top: 1px;
    right: -6px;
    width: 149px;
    height: 66px;
}

#helpExitBtn.enabled {
    background-position-x: 0px;
}

/*********************************************************************************************** END CONTROL PANEL **/

#winboxpopup {
    width: 400px;
    height: 80px;
    position: absolute;
    bottom: 0px;
    margin: 0 auto;
    background: url(../img/common/winboxalpha2.png) left top no-repeat;
    padding: 0;
    font-size: 22px;
    right: 126px;
}

#winboxpopup p {
    line-height: 40px;
    padding: 0;
    margin: 20px 0 0 0;
    text-transform: uppercase;
}

/*********************************************************************************************** BOTTOM PANEL **/
#bottomPanel {
    position: absolute;
    width: 738px;
    height: 80px;
    left: 16px;
    bottom: 0px;
    z-index: 45;
}

.inHelp #bottomPanel {
    display: none;
}

/*********************************************************************************************** TOP PANEL **/
#topPanel {
    background: no-repeat;
    position: absolute;
    left: 45px;
    top: 24px;
    width: 831px;
    height: 86px;
    display: block;    
    font-size: 18px;
}
.inHelp #topPanel {
    display: none;
}

#logo {
    position: absolute;
    right: 4px;
    top: 7px;
}

#balance {
    position: absolute;
    top: 42px;
    margin: 0px;
    width: 160px;
    height: 32px;
    left: 4px;
}
#totalWin {
    position: absolute;
    top: 42px;
    left: 178px;
    margin: 0px;
    width: 160px;
    height: 32px;
    line-height: 32px;
}
#inGameBalanceTxt, #totalWinTxt {
    width: 146px;
    margin: 0 auto;
    padding: 0px;
    height: 32px;
    line-height: 32px;
}
/******************************************************************************************************* HELP **/
#help {
    display: none;
    position: absolute;
    top: 58px;
    left: 40px;
    width: 690px;
    height: 444px;
    overflow: hidden;
    text-align: right;
    background: url(../img/common/help/framehelp.png) 0px 16px no-repeat;
}
.inHelp #help {
    display: block;
}

#help #logo {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 199px;
}

#helpMarkers {
    position: absolute;
    bottom: 0px;
    left: 292px;
    width: 113px;
}

#currentMarker {
    position: absolute;
    bottom: 10px;
    left: 204px;
    width: 113px;
}

#helpPagesContainer {
    position: absolute;
    left: 48px;
    width: 611px;
    height: 406px;
    overflow: hidden;
}
.helpPage {
    position: absolute;
    left: 800px;
    width: 660px;
    height: 404px;
    overflow: hidden;
}
/*************************************************************************************************** END HELP **/


#reflow {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1px;
    height: 1px;
}

#reflow.aboutBG {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 54;
    display: none;
}
#pleasewait {
    position: absolute;
    top: 275px;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -70px 0 0 -60px;
    padding: 10px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
    background-color: #000;
    z-index: 101;
    opacity: .8;
    display: none;
}

#copyright {
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 10px;
}
#maxamount {
    position: absolute;
    bottom: 40px;
    text-align: center;
    width: 100%;
    font-size: 30px;
}

#maxWinMsg {
    z-index: 150;
    position: absolute;
    top: 100px;
    left: 82px;
    text-align: center;
    width: 634px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    color: #fff;
}
#maxWinMsg p {
    margin: 42px 46px;
}
#maxWinMsg div {
    width: 101px;
    height: 42px;
    margin: 13px auto;
    line-height: 44px;
}

/*************************************************************************************************** FREE SPINS **/
#fstransition{
    background: url(../img/common/dialoguebase.png) center top no-repeat;
    position: absolute;
    top: 110px;
    width: 608px;
    height: 379px;
    left: 92px;  
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    font-size: 42px;
    z-index:44;/* needs to be on top of the control panel so it can be tapped*/
}
#fstransitiontext {
    top: 55px;
    position: relative;
    width: 504px;
    margin: 0 auto;
}
#fstransitionbutton {
    position: absolute;
    bottom: 50px;
    width: 208px;
    left: 200px;
    height: 66px;
    overflow: hidden;
}
#fstransitionresult {
    top: 55px;
    position: relative;
    width: 504px;
    margin: 0 auto;
    color: #7CFC00;
    font-size: 72px;
    height: 88px;
    line-height: 88px;
}

#reelanticipation {
    position: absolute;
    left: -4px;
    top: -10px;
    overflow: hidden;
    height: 384px;
    width: 140px;
}
#fslogo {
    position: absolute;
    left: 342px;
}
#dialogecontinueimg{
    position: absolute;
    left: 0px;
    top: -68px;
}
.enabled #dialogecontinueimg{
    top: 0px;
}
#freeSpinsRemaining {
    background: no-repeat;
    width: 147px;
    height: 118px;
    position: absolute;
    right: -2px;
    top:0px;
}
#fsRemainingTxt {
    position: relative;
    margin: 0 auto;
    padding: 0;
    top: 46px;
    width: 120px;
    line-height: 48px;
    font-size: 48px;
    height: 56px

}

#spinWin {
    background: no-repeat;
    width: 152px;
    height: 90px;
    position: absolute;
    right: -5px;
    bottom: 114px;
}
#spinWinTxt  {
    position: relative;
    top: 42px;
    margin: 0 auto;
    padding: 0px;
    width: 122px;
    height: 34px;
    line-height: 34px;
    font-size: 22px;
}

#freeSpinsWin {
    background: no-repeat;
    width: 143px;
    height: 90px;
    position: absolute;
    right: -5px;
    bottom: 27px;
}
#fsWinTxt  {
    position: relative;
    top: 36px;
    margin: 0 auto;
    padding: 0px;
    width: 122px;
    height: 34px;
    line-height: 34px;
    font-size: 22px;
}

#bigWinContainer {
position: absolute;
top:0;
z-index: 46;
height: 530px;
overflow: hidden;
width: 874px;
background-color: rgba(0,0,0,0.5);
}
#bigwinanimholder {
position: absolute;
top: 44px;
left: 212px;
height: 375px;
width: 536px;
overflow: hidden;
}
#bigWinImg {
position: absolute;
left: 0px;
}
#bigwinfront {
position: absolute;
bottom: -16px;
left: 56px;
}
#bigwintext {
position: absolute;
bottom: 48px;
left: 264px;
};