.contentArea { width: 700px; }
.shortContent { width: 595px; }

.formArea {
	background: url(/starterkit/images/bkgrd-tile-grey.jpg) repeat 0 0;
	float: left;
	font: normal 1em arial;
	margin: 1em 0;
	padding: 2em 0 0;
	width: 100%; 
}

.formArea h2 {
	border-color: #fff;
	margin: .5em auto;
	width: 90%;
}

.formArea p { 
	float: left;
	margin: .5em 0;	
	width: 100%;
}

.formArea hr {
	border: 1px solid #fff;
	color: #fff;
	display: block;
	float: left;
	margin: 1em 0;
	text-align: left; 
}
* html .formArea hr { margin-bottom: 0; }
*:first-child+html .formArea hr { margin-bottom: 0; }

.formArea fieldset { clear: both; }

.contentArea div.formArea div.row { 
	clear: both;
	margin: 0 auto 1em;
	width: 90%; 
}

.formArea label,
.formArea .fauxLabel {
	float: left;
	font-weight: bold;
	margin: .25em 1em 0 0;
	text-align: right;
	text-transform: uppercase;	
	width: 17em; 
}
.shortContent label { width: 10em; }

.formArea label span {
	font-size: 1.2em;
	margin-left: .25em;
}

.formArea input,
.formArea select,
.formArea textarea {
	color: #565658;
	font: bold 1em arial;
}

.formArea input,
.formArea textarea {
	background: #fff url(/starterkit/images/bkgrd-crosshatch.png) repeat 0 0;
	border: 2px solid #bec0c2;
	padding: .25em;
	width: 30em;
}
.shortContent .formArea input,
.shortContent .formArea textarea { width: 35em; }

.formArea select { width: 30.75em; }

.formArea textarea { text-transform: none; }

input.small { width: 5em; }
input.medium { width: 12em; }
input.mediumLong { width: 16.9em; }
select.medium { width: 12.5em; }

textarea.long { width: 100%; }

.formArea .infoLabel {
	float: left;
	margin: 0 1.25em 0 3em;
	width: 14em;
}

.formArea .note {
	clear: both;
	display: block;
	margin: .25em 0 0 15.25em;
	font-style: italic;
}

/* input lists radio/checkboxes */
.contentArea div.formArea div.inputLists { width: auto; }

div.inputLists input {
	background: none;
	border: 0;
	float: left;
	height: 1.5em;
	margin: 0;
	padding: 0;
	width: 1.5em;  
}
div.inputLists label { 
	padding: 0 2em 0 .25em;
	width: auto; 
}

/* Columns */
.hasColumns { margin-bottom: 2em; }

.formArea  .hasColumns  div.columns { 
	margin-bottom: 0; 
	width: 100%;  
}
.formArea .columns div {
	float: left;
	margin-bottom: 0;
	width: 13.2em; 
}
.columns label { 
	text-align: left;
	padding-left: .25em;
	width: auto;
}
.columns input { width: 12em; }

div.formArea div.colMed { width: 29em; }
.colMed input ,
.colMed select { width: 27em; }

div.colLong { width: 43em; }
.colLong input { width: 41em; }

div.formArea div.colSmall { width: 13em; }

.colSmall input { 
	margin-right: 1em;
	width: 8em; 
}
.colSmall select { 
	margin-top: .25em;
	width: 8.5em; 
}

.columns hr { width: 38.6em; }

/* For areas that have no label on the left */
div.formArea .marginLeft { 
	margin: 0 0 0 18em; 
	width: 70%;
}
* html div.formArea .marginLeft { margin: 0 0 0 9.25em; }

div.formArea div.noLeftLabel {
	margin-left: 18em;
	width: auto;
}
* html div.formArea div.noLeftLabel { margin-left: 6em; }

div.noLeftLabel div {
	float: left;
	margin-right: 2em;
	width: auto;
}
div.noLeftLabel span { padding-right: 1em; }

.noLeftLabel .infoLabel { 
	clear: both;
	width: 100%;
}

/* Add new row Link */
div.addRow {
	font-weight: bold;
	margin-bottom: 0;
	padding: 1em 0 0;
	text-align: right;
	text-transform: uppercase;
}

.addRow a,
.addRow a:link {
	background: url(/starterkit/images/link-arrow-down.png) no-repeat right center;
	display: block;
	margin-right: 2em;
	padding: .5em 2.5em .5em 0;
}
.addRow a:hover {
	color: #565658;
	text-decoration: underline;
}

/* Errors */
.hasErrorMsg { float: left; }

.error,
.successMsg { 
	color: #dc143c; 
	font-weight: bold;
}
.successMsg { 
	float: left; 
	padding-bottom: 1em; 
}

.formArea .errorMsg { 
	color: #dc143c; 
	margin-left: 18.2em; 
}
* html .formArea .errorMsg { margin-left: 9.2em; }

.formArea .hasErrorMsg .errorMsg { 
	display: block;
	margin: 0 0 1em; 
}

.shortContent .successMsg p { padding-left: 1em; }
.shortContent .errorMsg { margin-left: 11.2em; }

.error input { background-color: #f4dfe3; }

/* Button */
.formArea div.button {
	background: url(/starterkit/images/form-arrow.png) no-repeat right center;
	float: right;
	margin: 0 0 1em;
	padding-right: 2.5em;
	text-align: right;
	width: 80%;
}

.button input,
.shortContent .button input {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 2.5em;
	margin: 0 .5em;
	padding: 0;
	text-transform: none; text-align: left;
	width: 5.25em;
}
.button input:hover { color: #3cb371; }

.button .first { border-right: 1px solid #fff; }