imagepuzzle_footer

by bobbyrne01

HTML

<div id="gameContainer">
    <section id="gameContent">
        <div id="game_buttons">
            <button class="styled-button" type="button" id="soundClick">Mute</button>
            <button class="styled-button" type="button" id="help">Help</button>
        </div>
        <div id="notifications">
             <h4><span id="message"></span></h4>

        </div>
        <div id="gridContainer"></div>
    </section>
    <div id="footerDiv">
        <section id="footer">
            <ul>
                <li>Moves Made: <span id="moveCount">0</span>

                </li>
                <li>Time: <span id="timer">00:00:00.0</span>

                </li>
                <li>Puzzles Solved: <span id="puzzlesSolved">0</span>

                </li>
            </ul>
        </section>
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
html body, html body input {
    font: normal .9em Arial, Verdana, sans-serif;
}
body {
    background-image:url(../images/assets/background.png);
    background-repeat:repeat;
    color:#fff;
}
section, header, footer {
    display: block;
}
header, footer > * {
    margin: 20px;
}
h1 {
    font: bold 2.4em Georgia, serif;
    padding: 10px 0 0;
}
#indexContainer {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}
#indexContent {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
#footer {
    margin-top: -3.3em;
    background-color: #000;
    opacity: .7;
}
#footer ul {
    margin: 0;
    padding: 1em;
    list-style: none;
    text-align: center;
}
#footer li {
    color: #fff;
    display: inline;
    padding: 0 5px;
}
#footerDiv {
    position:absolute;
    bottom:0;
    width:100%;
    height:0px;
}