@import url("reset.css");
@import url("form.css");

body {
	background: #000 url("../images/signup/background.jpg") 50% 0 no-repeat;
	color: #463f2d;
	font: 11px/18px Arial, Helvetica, sans-serif;
}

a { color: #817963; }
a:hover { text-decoration: underline; }
hr { display: none; }

/* #container
==========================================================*/
#container {
	margin: 0 auto;
	padding: 150px 0 0 0;
	width: 809px;
}

/* #header
==========================================================*/
#header { padding-left: 345px; }
	h1 {}
		h1 a {
			background-image: url("../images/signup/logo.png");
			text-indent: -9999px;
			width: 119px;
		}

/* #main
==========================================================*/
#main { height: 519px; }
	.introduction {
		padding-left: 27px;
		width: 414px;
	}
		.introduction h2 {
			font-size: 16px;
			font-style: italic;
			font-weight: bold;
			line-height: 18px;
			margin-bottom: 20px;
		}

		.about {}
			.text { width: 203px; }
			.list {
				padding-left: 10px;
				width: 201px;
			}
				.list ul {}
					.list li {
						background-image: url("../images/signup/checkmark.png");
						background-position: 8px 8px;
						border-top: 1px solid #6c2f26;
						padding: 6px 0 6px 35px;
					}
					.list li:first-child {
						background-position: 8px 2px;
						border: 0;
						padding-top: 0;
					}

		.gallery { padding-top: 8px; }
			.gallery li {
				height: 100px;
				margin: 8px 8px 0 0;
				width: 132px;
			}
			.gallery li.last { margin: 8px 0 0 0; }

	.form {
		padding-left: 27px;
		width: 314px;
	}
		.form h2 {
			font-size: 58px;
			font-weight: bold;
			line-height: 60px;
			letter-spacing: -5px;
		}
		.form h3 {
			font-size: 14px;
			margin-top: 5px;
			padding-left: 3px;
		}

		form { padding-top: 27px; }
			.fields {}
				.fields > li {
					margin-bottom: 10px;
					padding-top: 1px;
				}
				.fields > .agree {
					text-align: center;
				}
					.fields li .field-text {
						background-image: none;
						background-color: #fff;
						height: 29px;
					}
						.fields li input[type=text], .fields li input[type=password] {
							background-image: none;
							width: 134px;
						}
					.fields li .status { width: 39px; }
						.fields li .status span {
							background-position: 50% 50%;
							height: 30px;
						}
							.fields li .status span.success { background-image: url("../images/signup/form/success.png"); }
							.fields li .status span.error { background-image: url("../images/signup/form/error.png"); }
					li .button { width: 314px; }

				.fields .field { background-image: url("../images/signup/form/field-text.png"); }
				.fields .field.gender { background-image: url("../images/signup/form/field.png"); }
					.field > label {
						cursor: pointer;
						font-size: 12px;
						line-height: 30px;
						padding-left: 10px;
						text-transform: lowercase;
						width: 107px;
					}
				.options {
					color: #7b7970;
					line-height: 30px;
				}
					.options li { margin-left: 25px; }
					.options li:first-child { margin-left: 11px; }
						.options label { cursor: pointer; }
						.options input {
							margin: 0 5px 0 0;
							vertical-align: middle;
						}

/* #footer
==========================================================*/
#footer {
	padding: 21px 0;
	text-align: center;
}

/* ~
==========================================================*/
h1 a, .fields .field { background-position: 0 0; }

h1 a, .list li, .fields .field, .fields li .status span { background-repeat: no-repeat; }

#header, h1 a { height: 94px; }

#main, .about, .gallery, .fields .field,
h1, .options { overflow: hidden; }

h1 a, .status span { display: block; }

#main .introduction, #main .form, .text, .list, .gallery li,
.field > label, .field .status, .options li,
.fields li .field-text { float: left; }

h2, h3 { color: #fff; }

.introduction, .field > label { color: #92886e; }

/* Tispy
==========================================================*/

.tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 100000; }
  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
  .tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
  .tipsy-arrow { position: absolute; background: url("../images/tipsy/tipsy.gif") no-repeat top left; width: 9px; height: 5px; }
  .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
  .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
  .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }
  .tipsy b { font-weight: bold; font-size: 120%; }