<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Abbey Dawn</title>
 
<style type="text/css" media="screen">
    @import url("public/css/main.css");
</style>
 
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="public/css/ie6.css" /><![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="public/css/ie7.css" /><![endif]-->
 
</head>
<body>
   	<div class="container">
	    <div class="body-content">
		    <!-- Page -->
		    <div id="page">
		    	<div><div class="skull1"></div></div>
		    	<div><div class="skull2"></div></div>
		    	<!-- Content -->
		        <div class="content">
		        	<div class="logo-block"><div class="logotype"><a href="#"><img src="public/images/logotype/logotype.gif" alt="Abbey Dawn" /></a></div></div>
 
		        	<!-- BEGIN: Form -->
		        	<div class="form">
			        	<div class="form-bg"><div class="form-container">
				        	<div class="left-col">
				        		<img src="public/images/titles/coming-soon.gif" alt="Coming Soon..." />
				        		<p>I'm really excited to announce my new clothing line that will be available online from this site or though <a href="#">Kohl's</a>.  I worked closely with my design team to create the outfits and you'll be able to see them all very soon.  Keep checking back... </p>
				        		<div class="relax"></div>
				        	</div>
				        	<div class="right-col">
				        		<form action="#">
				        			<div class="right-form">
				        				<div class="line-form">
				        					<label for="f-n">First name:</label>
				        					<input type="text" id="f-n" class="in-text" /> <span class="required">*</span>
				        				</div>
				        				<div class="line-form">
				        					<label for="l-n">Last name:</label>
				        					<input type="text" id="l-n" class="in-text" /> <span class="required">*</span>
				        				</div>
				        				<div class="line-form">
					        				<label for="zip">Zip:</label>
					        				<input type="text" id="zip" class="in-text zip-in-text" /> <span class="required">*</span>
				        				</div>
				        				<div class="line-form">
				        					<label for="mob-no">Mobile No:</label>
				        					<input type="text" id="mob-no" class="in-text" />
				        				</div>
				        				<div class="line-form">
					        				<label>Gender:</label>
					        				<input type="radio" checked="checked" name="gender" id="female" class="radio" />
					        				<label for="female" class="radio-label">Female</label>
					        				<input type="radio" name="gender" id="male" class="radio" />
					        				<label for="male" class="radio-label">Male</label>
				        				</div>
				        				<div class="line-form">
					        				<label for="age">Age:</label>
					        				<input type="text" id="age" class="in-text age-in-text" />
				        				</div>
				        				<div class="line-form">
					        				<label for="email">Email:</label>
					        				<input type="text" id="email" value="email address" onblur="if(this.value == '') this.value = 'email address'" onfocus="if(this.value == 'email address') this.value = ''" class="in-text" /> <span class="required">*</span>
					        			</div>
					        			<div class="line-form last-line-form">
					        				<div class="form-text"><label for="terms">Accept <a href="#">Terms</a></label></div>
					        				<input type="checkbox" class="check" id="terms" />
					        				<input type="submit" value="" class="sign-up" />
					        			</div>
				        			</div>
				        			<div class="relax"></div>
				        		</form>
				        		<div class="relax"></div>
				        	</div>
				        	<div class="relax"></div>
			        	</div></div>
		        		<div class="relax"></div>
		        	</div>
		        	<!-- END: Form -->
 
		        	<div class="relax"></div>
		        	<div class="line-links">
		        		<a href="#"><img src="public/images/pictures/link-1.gif" alt="" /></a>
		        		<a href="#"><img src="public/images/pictures/link-2.gif" alt="" /></a>
		        		<a href="#"><img src="public/images/pictures/link-3.gif" alt="" /></a>
		        		<a href="#"><img src="public/images/pictures/kohls.gif" alt="" class="kohls" /></a>
		        	</div>
 
		        	<div class="relax"></div>
		        </div>
		        <div class="relax"></div>
		        <!-- BEGIN: Footer -->
	      	  	<div class="footer">
	        		<ul>
	        			<li><a href="#">Terms &amp; Conditions</a></li>
	        			<li>|</li>
	        			<li><a href="#">Privacy Policy</a></li>
	        			<li>|</li>
	        			<li><a href="#">Site by Ciplex</a></li>
	        		</ul>
	        		<div class="relax"></div>
	        	</div>
	        	<!-- END: Footer -->
	        </div>
	        <div class="relax"></div>
	    </div>
	    <div class="relax"></div>
    </div>
</body>
</html>
 
/*  Tags Declaration  */
BODY {
    margin: 0;
    padding: 0;
    text-align: center;
    background: url("../images/backgrounds/bg-body.gif") repeat left top;
	font-family: Georgia, Times, serif;
}
A {text-decoration: none;}
A:HOVER {text-decoration: underline;}
IMG {border: none;}
HTML, BODY {height: 100%;}
.container {
	min-width: 950px;
	margin: auto;
	overflow: hidden;
	position: relative;
	margin-left: -121px;
}
.body-content {
	background: url("../images/backgrounds/content-body.png") no-repeat center top;
}
.body-container {
}
.skull1 {
	background: url(../images/backgrounds/skull1.png) no-repeat;
	width: 265px;
	height: 193px;
	position: absolute;
	top: 415px;
	left: -133px;
	z-index: 10;
}
.skull2 {
	background: url(../images/backgrounds/skull2.png) no-repeat;
	width: 263px;
	height: 198px;
	position: absolute;
	top: 389px;
	left: 713px;
	z-index: 10;
}
 
 
/*  Page  */
#page {
	margin: auto;
    text-align: left;
	width: 912px;
	padding: 16px 0 0;
	position: relative;
	left: 60px;
}
/*  Content  */
.content {
	height: 553px;
	width: 912px;
	background: url(../images/backgrounds/content.jpg) no-repeat 0px 10px;
}
.logotype {
	padding: 15px 0 0 24px;
	line-height: 0px;
	font-size: 1px;
}
.left-col {
	width: 176px;
	float: left;
	display: inline;
}
.content P {
	padding: 0px;
	margin: 0px;
	font-size: 12px;
	color: #70565F;
	margin-top: 5px;
	line-height: 14px;
}
.form-container {
	padding: 28px 0 0 27px;
}
.content A {
	color: #D21A5A;
	text-decoration: underline;
	position: relative;
}
.content A:HOVER {text-decoration: none;}
.form {
	padding:0 0 0 21px;
	position:relative;
	margin-top:-12px;
	z-index: 1;
}
.form SPAN.required {
	float: right;
	font-size: 12px;
	font-family: Georgia;
	color: #70565F;
	padding: 0 5px 0 0;
}
.form .form-bg {
	height: 277px;
	width: 552px;
	background: url(../images/backgrounds/form.png) no-repeat;
}
.right-col {
	width: 280px;
	float: left;
	height: 250px;
	margin-left: 21px;
	display: inline;
	position: relative;
}
.right-form {
	width: 255px;
	margin: 10px 0 0 20px;
}
.line-form {
	width: 100%;
	float: left;
}
.right-form LABEL {
	width: 72px;
	font-size: 12px;
	color: #70565F;
	cursor: pointer;
	float: left;
	margin-top: 5px;
	position: relative;
}
.right-form LABEL.radio-label {
	width: 50px;
	margin-top: 2px;
	margin-left: 3px;
}
.right-form INPUT.radio {
	padding: 0px;
	margin: 0px;
	margin-top: 3px;
	width: auto;
	float: left;
}
.right-form INPUT.in-text {
	width: 160px;
	border: 1px solid #C3BDB1;
	background: #F7F7F7 url("../images/backgrounds/bg-input.gif") repeat-x left top;
	padding-left: 5px;
	float: left;
	font-size: 12px;
	color: #B6B3AB;
	padding-top: 4px;
	padding-bottom: 4px;
	line-height: 14px;
	margin-top: 2px;
}
.right-form INPUT.in-text.zip-in-text {width: 90px;}
.right-form INPUT.in-text.age-in-text {width: 35px;}
.right-form INPUT.sign-up {
	width: 83px;
	height: 28px;
	float: left;
	border: none;
	background: url("../images/buttons/sign-up.gif") no-repeat left top;
	cursor: pointer;
	margin-left: 10px;
	display: inline;
}
.right-form INPUT.check {
	padding: 0px;
	margin: 0px;
	width: auto;
	float: left;
	margin-top: 7px;
}
.form-text {
	width: 74px;
	float: left;
	margin-left: 58px;
	display: inline;
	margin-top: 3px;
}
.line-form.last-line-form LABEL,
.form-text P {
	letter-spacing: -1px;
}
.line-form.last-line-form {margin-top: 6px;}
 
.line-links {
	padding: 3px 0 0 125px;
}
.line-links IMG {
	margin-right: 10px;
	position: relative;
}
.line-links IMG.kohls {
	margin-bottom:15px;
}
.right-col FORM {
	padding: 0px;
	margin: 0px;
}
/*  Footer  */
.footer {
	padding: 15px 0 0 0;
}
.footer UL {
	padding: 0px;
	margin: 0px;
	list-style: none;
	float: right;
	position: relative;
	z-index: 100;
} 
.footer UL LI {
	display: inline;
	font-size: 10px;
	color: #F3AFC7;
	position: relative;
	z-index: 100;
}
.footer UL LI A {
	color: #D21A5A;
	text-decoration: underline;
	position: relative;
	z-index: 100;
}
.footer UL LI A:HOVER {text-decoration: none;}
.relax {
	clear: both;
	height: 0;
	font-size: 0px;
	line-height: 0;
}