/**  FORMS typography **/

label, h3.label
{
	font-size: 1.2em;
	padding: 5.5px 0 0 0;
	font-weight: normal;
}

	div.form-element.req label,
	div.form-element.req h3.label
	{
		font-weight: bold;
	}

input, textarea
{
	font-size: 1.4em;
	color: #555555;
}

p.error
{
	background: #ecd3c5;
	padding: 5px 10px;
	font-weight: bold;
}




/**  FORMS styles **/

div.form-block
{
	background: #f8f8f8;
	border-top: 1px solid #eaecef;
	padding: 0 1em;
	margin-bottom: 20px;
	position: relative;
}

	div.form-block h2
	{
		margin-top: 0;
	}
	
div.form-element
{
	clear: both;
	margin-top:1em;
}

	label, h3.label
	{
		color:#666;
		display: block;
		margin: 0 10px 0 0;
	}
	
	.auth label {
		float: left;
		width: 130px;
	}
	
	input.text, div.form-element div
	{
		float: left;
		display: block;
		width: 280px;
	}
	
	input.submit
	{
		float: right;
	}
	
	button
	{
		background: url('../img/button.jpg');
		border: none;
		width: 123px;
		height: 23px;
		line-height: 18px;
		font-weight: bold;
		margin: 0 0 10px 0;
	}
	
	div.form-element div
	{
		width: 200px;
	}
	
	textarea
	{
		display: block;
		width: 25em;
		height: 150px;
	}
	
	div.form-element.wide input
	{
		width: 25em;
		float: none;
		display: inline;
	}
	
	div.form-element.inline label, div.form-element.inline input
	{
		width: auto;
		float: none;
		display: inline;
		margin: 0;
	}
	
	div.form-element label.inline
	{
		width: auto;
		float: none;
		display: inline;
		margin: 0 20px 0 6px;
	}
	
	div.form-element div.vendor
	{
		border-top: 1px dashed #999;
		position: relative;
		width: 100%;
		padding: 5px 0 0 0;
	}
	
		div.form-element div.vendor label, div.form-element div.vendor input
		{
			display: block;
			float: left;
			margin-right: 10px;
		}
		
		div.form-element div.vendor label
		{
			width: 300px;
		}
		
		div.form-element div.vendor ul
		{
			position: absolute;
			float: right;
			top: 0;
			right: 0;
		}
		
			div.form-element div.vendor ul li
			{
				display: inline;
				float: left;
				list-style-type: none;
			}




/**  FORMS other **/

div.help-box
{
	width: 250px;
	padding: 0.1em 0 1px 0;
	background: url('../img/help-bg.jpg') bottom left no-repeat;
	position: absolute;
}

	div.help-text
	{
		margin: 10px 10px 10px 10px;
	}
	
	div.help-text p
	{
		margin: 0;
	}
	
	div.help-text h2
	{
		margin-bottom: 0.25em;
	}
	
	span.help-bottom
	{
		display: block;
		height: 10px;
		width: 100%;
		background: url('../img/help-bg.jpg') top left no-repeat;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	span.help-arrow
	{
		display: block;
		width: 10px;
		height: 100%;
		background: url('../img/help-arrow.jpg') left center no-repeat;
		position: absolute;
		top: 0;
		left: -10px;
	}
	
/*
 * Good old Clearfix. Due respect and recognition to everone/anyone who invented this, or helped develop it.
 * Search for the responsibles with google. I could mention positioniseverything.net and 456bereastreet.com
 * for the starters...
 */

.clearfix:after,div.form-element:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix,div.form-element {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix, * html div.form-element {height: 1%;}
.clearfix, div.form-element {display: block;}
/* End hide from IE-mac */

.left
{
	float: left;
}

img.left { margin: 0 10px 10px 0; }

.right
{
	float: right;
}

img.right { margin: 0 0 10px 10px; }