body {
    background-color: darkseagreen;
    padding: 20px;
    font-family: Helvetica;
}


.stage {
    margin-top: 75px;
    width: 900px;
    height: 450px;
    margin: auto;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border: 4px solid black;
}

/*--------IndexPage-------------*/

#textBannerStart {
    background: #078c2d;
    color: #FFF;
    border-radius: 25px;
    border: 10px solid #FFF;
    padding: 5px;
    font-size: 35px;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 500px;
    position: absolute;
    top: 220px;
    right: 0px;
    left: 0px;
    cursor: pointer;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*--------All pages banner dialogue-------------*/

#textBanner {
    background: #FFF;
    border-radius: 25px;
    border: 4px solid #000;
    padding: 0px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 850px;
    position: absolute;
    top: 440px;
    right: 0px;
    left: 0px;
    cursor: pointer;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#textBanner:hover {
    background: #f5c542;
    border-radius: 25px;
    border: 4px solid #000;
    padding: 0px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 850px;
    position: absolute;
    top: 440px;
    right: 0px;
    left: 0px;
    cursor: pointer;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*--------page1.html-------------*/


#farmMap {

    background-image: url("images/farm.png");


}

#houseBackground {

    background-image: url("images/road_background.png")
}


#table {

    background-image: url("images/table_background.png")
}

/*--------page2.html-------------*/


#newspaperLarge {
    position: absolute;
    width: 900px;
    top: 0px;
    left: 100px;
    cursor: pointer;

}


/*--------page4.html-------------*/


#farm {

    background-image: url("images/background.png");


}

#tractor {

    position: absolute;
    width: 200px;
    bottom: 70px;
    left: -250px;

}


#house {

    position: absolute;
    width: 700px;
    bottom: -70px;
    left: -190px;

}

#cow {
    position: absolute;
    width: 100px;
    bottom: 140px;
    left: 450px;
    cursor: pointer;

}

#chicken {
    position: absolute;
    width: 50px;
    bottom: 70px;
    left: 210px;
    cursor: pointer;

}

#pig {
    position: absolute;
    width: 100px;
    bottom: 95px;
    left: 650px;
    cursor: pointer;

}

#farmer {
    position: absolute;
    width: 100px;
    bottom: 15px;
    left: -100px;

}

#pigpen {
    position: absolute;
    width: 300px;
    bottom: 80px;
    left: 300px;
    cursor: pointer;

}

#milk {
    position: absolute;
    width: 100px;
    bottom: 135px;
    right: 0px;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/*--------page2.html-------------*/



#background-pig {

    background-image: url(images/pigconversation.png)
}

#pig-dialog {
    position: absolute;
    width: 250px;
    bottom: 150px;
    left: 320px;
    cursor: pointer;

}

#newspaper {
    position: absolute;
    width: 180px;
    bottom: 215px;
    left: 320px;
    cursor: pointer;

}

#background-cow {

    background-image: url(images/cowbackground.png)
}

#cow-backstory {

    background-image: url(images/soldier_cow.png)
}

#chicken-backstory {

    background-image: url(images/pirate_chicken.png)
}

#pig-backstory {

    background-image: url(images/dictator_pig.png)
}



#cow-dialog {
    position: absolute;
    width: 200px;
    bottom: 70px;
    left: 550px;
    cursor: pointer;

}

#background-chicken {

    background-image: url(images/chickenbackground.png)
}

#chicken-dialog {
    position: absolute;
    width: 140px;
    bottom: 70px;
    left: 550px;
    cursor: pointer;

}


#background-win {

    background-image: url(images/win_background.png)
}

#background-lose {

    background-image: url(images/sad_meals.png)
}



.background-sky {

    background-color: skyblue;
    background-size: cover;
    width: 900px;
    height: 450px;
    margin: auto;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border: 2px solid black;

}


.background-grass {

    background-color: #a0eb87;
    background-size: cover;
    width: 900px;
    height: 450px;
    margin: auto;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border: 2px solid black;

}

.chub {
    background: transparent url(images/smollchub.png);
    cursor: crosshair;
    display: none;
    height: 44px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0px;
    width: 47px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*--------page14.html-------------*/

#forest {

    background-image: url("images/trufflebg.png");

}

#truffleBasket {
    position: absolute;
    bottom: 10px;
    right: 10px;

}

#truffle01 {
    position: absolute;
    z-index: 999;
    top: 10px;
    left: 10px;
    opacity: 0.7;
}

#truffle02 {
    position: absolute;
    z-index: 999;
    top: 100px;
    left: 400px;
    opacity: 0.6;
}

#truffle03 {
    position: absolute;
    z-index: 999;
    top: 230px;
    left: 130px;
    opacity: 0.7;
}

#truffle04 {
    position: absolute;
    z-index: 999;
    top: 90px;
    left: 800px;
    opacity: 0.6;
}

#truffle05 {
    position: absolute;
    z-index: 999;
    top: 320px;
    left: 30px;
    opacity: 0.7;
}

#truffle06 {
    position: absolute;
    z-index: 999;
    top: 270px;
    left: 200px;
    opacity: 0.6;
}

#truffle07 {
    position: absolute;
    z-index: 999;
    top: 319px;
    left: 320px;
    opacity: 0.7;
}

#truffle08 {
    position: absolute;
    z-index: 999;
    top: 360px;
    left: 460px;
    opacity: 0.6;
}

#truffle09 {
    position: absolute;
    z-index: 999;
    top: 50px;
    left: 850px;
    opacity: 0.7;
}

#truffle10 {
    position: absolute;
    z-index: 999;
    top: 150px;
    left: 740px;
    opacity: 0.6;
}

#truffle11 {
    position: absolute;
    z-index: 999;
    top: 99px;
    left: 650px;
    opacity: 0.7;
}

#truffle12 {
    position: absolute;
    z-index: 999;
    top: 120px;
    left: 500px;
    opacity: 0.6;
}

#truffle13 {
    position: absolute;
    z-index: 999;
    top: 220px;
    left: 450px;
    opacity: 0.7;
}

#truffle14 {
    position: absolute;
    z-index: 999;
    top: 175px;
    left: 300px;
    opacity: 0.6;
}

#truffle15 {
    position: absolute;
    z-index: 999;
    top: 140px;
    left: 200px;
    opacity: 0.7;
}

#truffle16 {
    position: absolute;
    z-index: 999;
    top: 90px;
    left: 100px;
    opacity: 0.6;
}

#truffleScoreBanner {
    background: #FFF;
    border-radius: 25px;
    border: 4px solid #000;
    padding: 0px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 300px;
    position: absolute;
    top: 440px;
    right: 0px;
    left: 0px;
    cursor: pointer;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

#score_help {
    text-align: center;
    font-size: 25px;
    background-color: #eaeaea;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}