Untitled


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title> </title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <link href="/Content/site.css" rel="stylesheet"/>

        <link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>

        <script src="/Scripts/modernizr-2.5.3.js"></script>
        <script src="/Scripts/jquery-1.7.1.js"></script>
        <script src="/Scripts/jquery-ui-1.8.20.js"></script>
        <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

        <script src="/Scripts/main.js" type="text/javascript"></script>


    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">

                </div>
                <div class="float-right">
                    <section id="login">

                    </section>
                    <nav>
                        <div><p></p></div>
                        <ul id="menu">
                            <li><a href="/">Home</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">

        <section class="featured content-wrapper">
            <div class="title-wrapper">
                <hgroup class="title">
                    <h1>Screen PoC</h1>
                </hgroup>
                <p>

                </p>
            </div>
        </section>

            <section class="content-wrapper main-content clear-fix">


<style type="text/css">
    .ui-tabs .ui-tabs-panel { min-height: 700px;}
    label { font-size: 1em;}
    .advisordialog {width:450px; height:300px;}
    .isp{float:left; width:45%;}
    .applicant{width: 50%; float:left;}
    .secondapplicantcheck{width:50%; float:left;}
    .tabvalidicon {height: 10px;width: 100%;background-color: chartreuse;}
    .tabinvalidicon {height: 10px;width: 100%;background-color: red;}
    .employment{width:50%; float:left;}
</style>


<script id="demo" type="text/javascript">
    $(document).ready(function () {

	var tabs = $("#tabs").tabs();
	var validator = $("#signupform").validate({
	    ignore:"",
	    groups: {
			birthdate: "birthdateDay birthdateMonth birthdateYear"
		},
		//errorPlacement: function(label, element) {
		//	if (/^birthdate/.test(element[0].name)) {
		//		label.insertAfter("#birthdateYear");
		//	} else {
		//		label.insertAfter(element);
		//	}
		//}
	});

	$.validator.setDefaults({
	    ignore: ""
	});


	// validate the other two selects when one changes to update the whole group
	//var birthdaySelects = $("#birthdateGroup select").click(function() {
	//	birthdaySelects.not(this).valid();
	//})

	//// overwrite focusInvalid to activate tab with invalid elements
	//validator.focusInvalid = function() {
	//	if( this.settings.focusInvalid ) {
	//		try {
	//			var focused = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []).filter(":visible");
	//			tabs.tabs("select", tabs.find(">div").index(focused.parent().parent()));
	//			focused.focus();
	//		} catch(e) {
	//			// ignore IE throwing errors when focusing hidden elements
	//		}
	//	}
	//};

});
</script>


<style>
	body { font-size: 65.2% }
	label { display: inline-block; width: 8em; }
	label.error { color: red; margin-left: 0.5em; width: 20em; }
</style>


<form id="signupform">

	<div id="tabs">
		<ul>
			<li><a href="#logindata">Login data</a></li>
			<li><a href="#personaldata">Personal data</a></li>
			<li><a href="#subscriptions">Subscriptions</a></li>
		</ul>
		<div id="logindata">
			<p>
				<label for="username">Username</label>
				<input id="username" name="username" class="required" minlength="3" maxlength="20" type="text" />
			</p>
			<p>
				<label for="email">Email address</label>
				<input id="email" name="email" class="required email" type="text" />
			</p>
			<p>
				<label for="password">Password</label>
				<input name="password" type="password" class="required" id="password" minlength="4" maxlength="50" />
			</p>
			<p>
				<label for="confirmpassword">Confirm Password</label>
				<input name="confirmpassword" type="password" class="required" equalTo="#password" id="confirmpassword" />
			</p>
		</div>
		<div id="personaldata">
			<p>
				<label for="street">Street</label>
				<input id="street" name="street" class="required" minlength="3" maxlength="50" type="text" />
			</p>
			<p>
				<label for="city">City</label>
				<input id="city" name="city" class="required" minlength="3" maxlength="50" type="text" />
			</p>
			<p id="birthdateGroup">
				<label for="birthdateDay">Birthdate</label>
				<select id="birthdateDay" name="birthdateDay" class="required">
					<option value="">Day</option>
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>...</option>
				</select>
				<select id="birthdateMonth" name="birthdateMonth" class="required">
					<option value="">Month</option>
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
					<option>6</option>
					<option>7</option>
					<option>8</option>
					<option>9</option>
					<option>10</option>
					<option>11</option>
					<option>12</option>
				</select>
				<select id="birthdateYear" name="birthdateYear" class="required">
					<option value="">Year</option>
					<option>1950</option>
					<option>1951</option>
					<option>1952</option>
					<option>1953</option>
					<option>1954</option>
					<option>1955</option>
					<option>...</option>
				</select>
			</p>
		</div>
		<div id="subscriptions">
			<p>
				<label for="weekly">Weekly Newsletter</label>
				<input id="weekly" name="weekly" type="checkbox" />
			</p>
			<p>
				<label for="updates">Product Updates</label>
				<input id="updates" name="updates" type="checkbox" />
			</p>
			<p>
				<label for="terms">Terms and conditions</label>
				<input id="terms" name="terms" class="required" type="checkbox" />
			</p>
		</div>
	</div>

	<input type="submit" />
</form>

            </section>

        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; 2013 </p>
                </div>
                <div class="float-right">
                    <button class="btnThemes">Change Theme</button>
                </div>
            </div>
        </footer>


    </body>
</html>