<style type="text/css">
body {
    margin:0;
    padding:0;
}

#wrapper {
    width:100%;
    overflow:hidden;
}
#mask {
    width:400%;

}
.item {
    width:25%;
    float:left;
}
.content {
    width:99%;
    top: 75px;
    position:relative;
}
.selected {
    background:#fff;
    font-weight:700;
}
.clear {
    clear:both;
}

.skills-list {
	width: 200px;
	display: inline-table;
}
.form-wrap {
	width: 85%;
}
</style>

<script>
$(document).ready(function() {
    $('a.panel').click(function () {
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');

        current = $(this);

        $('#wrapper').scrollTo($(this).attr('href'), 800);

        return false;
    });

    $(window).resize(function () {
        resizePanel();
    });

});

function resizePanel() {
    width = $(window).width();
    height = $(window).height();

    mask_width = width * $('.item').length;

    $('#wrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});

    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);

}
</script>

<h2>Build Your Resume</h2>

<div id="wrapper">
    <div id="mask">

        <div id="contact" class="item">
            <div class="content">
                <a href="#contact" class="panel">Contact</a> |
                <a href="#jobs" class="panel">Jobs</a> |
                <a href="#education" class="panel">Education</a> |
                <a href="#skills" class="panel">Skills</a>

                <div class="form-wrap">
	                <form method="post" action="">
						<div class="form-field form-required">
							<label for="full-name">Full Name</label>
							<input name="full-name" id="full-name" type="text" value="" size="40" aria-required="true">
						</div>
						<div class="form-field form-required">
							<label for="location-to-display">Location to Display</label>
							<input name="location-to-display" id="location-to-display" type="text" value="" size="40" aria-required="true">
						</div>
						<div class="form-field form-required">
							<label for="email">Email</label>
							<input name="email" id="email" type="text" value="" size="40" aria-required="true">
						</div>
						<div class="form-field form-required">
							<label for="phone">Phone</label>
							<input name="phone" id="phone" type="text" value="" size="40" aria-required="true">
						</div>
						<div class="form-field form-required">
							<label for="summary">Summary</label>
							<input name="summary" id="summary" type="text" value="" size="40" aria-required="true">
						</div>

						<hr />

						<div class="form-field form-required">
							<label for="volunteer-activites">Volunteer Activities</label>
							<input name="volunteer-activites" id="volunteer-activites" type="text" value="" size="40" aria-required="true">
						</div>
						<div class="form-field form-required">
							<label for="memberships">Memberships</label>
							<input name="memberships" id="memberships" type="text" value="" size="40" aria-required="true">
						</div>
						<div class="form-field form-required">
							<label for="awards">Awards</label>
							<input name="awards" id="awards" type="text" value="" size="40" aria-required="true">
						</div>
						<div class="form-field form-required">
							<label for="publications">Publications</label>
							<input name="publications" id="publications" type="text" value="" size="40" aria-required="true">
						</div>
						<div class="form-field form-required">
							<label for="certifications">Certifications</label>
							<input name="certifications" id="certifications" type="text" value="" size="40" aria-required="true">
						</div>
						<div class="form-field form-required">
							<label for="presentations">Presentations</label>
							<input name="presentations" id="presentations" type="text" value="" size="40" aria-required="true">
						</div>

						<p>Skills</p>

						<span class="skills-list">
						  <strong>Novice</strong>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						</span>
						<span class="skills-list">
						  <strong>Intermediate</strong>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						</span>
						<span class="skills-list">
						  <strong>Expert</strong>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						</span>

						<hr />

						<span class="skills-list">
						  <strong>Languages Spoken</strong>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						  <p><input type="text"></p>
						</span>

						<p class="submit"><input type="submit" name="Submit" value="Submit" /></p>-->
					</form>
				</div>
            </div>
        </div>

        <div id="jobs" class="item">
            <div class="content">

                <a href="#contact" class="panel">Contact</a> |
                <a href="#jobs" class="panel">Jobs</a> |
                <a href="#education" class="panel">Education</a> |
                <a href="#skills" class="panel">Skills</a>

				<p>jobs</p>
			</div>
        </div>

        <div id="education" class="item">
            <div class="content">
                <a href="#contact" class="panel">Contact</a> |
                <a href="#jobs" class="panel">Jobs</a> |
                <a href="#education" class="panel">Education</a> |
                <a href="#skills" class="panel">Skills</a>

				<p>education</p>
			</div>
        </div>

        <div id="skills" class="item">
            <div class="content">

                <a href="#contact" class="panel">Contact</a> |
                <a href="#jobs" class="panel">Jobs</a> |
                <a href="#education" class="panel">Education</a> |
                <a href="#skills" class="panel">Skills</a>

				<p>skills</p>
			</div>
        </div>
    </div>
</div>