refer.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        form {
            position: relative;
            clear: both;
        }

        label {
            display: block;
            width: 125px;
            float: left;
            text-align: right;
            padding-right: 15px;
        }

        button {
            clear: both;
            display: block;
            position: absolute;
            right: 9%;
            top: 115%;
        }

       .fieldBtns {
           height: 18px;
           width: auto;
           cursor: pointer;
       }

       #userInfo {
           padding-bottom: 20px;
           border-bottom: 1px solid #AAA;
           margin-bottom: 20px;
       }

       #minBtn {
           display: none;
       }

        #referralWidget {
            width: 400px;
        }

        #right {
            float: right;
        }

        #left {
            float: left;
        }
    </style>
</head>
<body>
    <div id="referralWidget">
        <h2>Refer a Friend</h2>
        <p>We're giving awesome rewards for both you and your friend when you refer people to Arithia!</p>

        <div id="left">
            <p><b>You Get</b></p>
            <ul>
                <li>300 Credit Points</li>
                <li>50 Ducats</li>
                <li>Infernal Lockbox</li>
            </ul>
        </div>

        <div id="right">
            <p><b>Your Friend Gets</b></p>
            <ul>
                <li>300 Credit Points</li>
                <li>A "Head Start" Pack</li>
                <ul>
                    <li>50 Ducats</li>
                    <li>25 Cooked Beef</li>
                    <li>Identification Tome</li>
                </ul>
            </ul>
        </div>

        <form action="http://www.graphicgoldfish.com/referral/php/generator.php" method="POST">
            <h2>Send them an email!</h2>
            <p>Here's how you and your friends can cash in on the rewards!</p>
            <div id="userInfo">
                <label for="tf_ref_email">Your Email:</label> <input type="email" id="tf_ref_email" name="tf_ref_email" />
                <label for="tf_ref_username">Arithia Username:</label> <input type="text" id="tf_ref_username" name="tf_ref_username" />
                <label for="tf_ref_ign">Minecraft IGN:</label> <input type="text" id="tf_ref_ign" name="tf_ref_ign" />
            </div>

            <div id="friends">
                <img class="fieldBtns" src="images/plus_button.png" id="addBtn"/>
                <img class="fieldBtns" src="images/minus_button.png" id="minBtn"/>
            </div>
            <button>Submit</button>
        </form>
    </div>
    <script src="js/main.js"></script>
</body>
</html>