﻿/* -------------------------------------------------------------- 
	
	forms.css	
	* Styles for Accessible Form and Form Layout Elements
   	* Sets up some default styling for forms
   	* Gives you classes to enhance your forms
   
   	Usage:
   	* For text fields, use class .title or .text
   
-------------------------------------------------------------- */
/*
		form {
			margin: 0;
			padding: 0;
			}
			
			fieldset {
				border: 0;
				margin: 0 0 1.8em;
				padding: 1em;
				border: 1px solid #ccc;
				}
				
				legend {
					display: table;
				}
				
				label.txtField {
					display: block;
					float: left;
					text-align: right;
					width: 48%;
					padding: 2px 12px 0 0;
					}

					label span {
						margin-left: -12px;
						width: 18px;
						color: red;
					}
					
				fieldset div {
					text-align: center;
				}
					
				input.text, input.title, textarea, select {
					width: 48% !important;
					color: #4E5B6E;
				    border: 1px solid #bbb;
					}
					
					input.text:focus, input.title:focus, textarea:focus, select:focus {
					    border: 1px solid #666;
					}
				
				textarea { 
					padding: .5em; 
					width: 48%; 
					height: 250px; 
					border: 1px solid #ccc;
					color: #4E5B6E;
				}

				select {
					width: 48%; 
					color: #4E5B6E;
				}

*/
/* Sample FormBuilder CSS base */

div.contactform { 
	margin-top: 2em; 
	font-size: 12px;
}
form {margin-top:0}
form, td, th, li { font-size: 100%}
form div {margin-bottom:0}
fieldset div {
	margin-bottom:1em;
}
fieldset div div {
	margin-top:0.5em;
	margin-left:1em
}
fieldset {
	border: none;
	margin-bottom:1em;
	padding:0;
}
fieldset label {
	width:auto;
}
legend {
	color:#FFF;
	background:#4E5B6E;
	font-size:1.2em;
	margin-bottom:0.5em;
	padding:0.2em;
	width:auto;
	border:1px solid #CCC
}
textarea {
	margin: 0.5em 0;
	width:98%;
	height: 6em
}

/* Apply this class to text/select input fields with shorter labels
	to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}

/* Pretty up your Captcha image output */
.captcha {
	margin:0.5em 0;
	width:200px;
	text-align:center
}
.captcha img {border:1px solid #4E5B6E; margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em}

/* Just a bit more room for the Submit button */
.submit {margin-top:0.5em}


/* Apply this class to text/select input fields with shorter labels
	to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}

/* Pretty up your Captcha image output */
.captcha {
	margin:0.5em 0;
	width:200px;
	text-align:center
}
.captcha img {border:1px solid #4E5B6E; margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em}

/* Just a bit more room for the Submit button */
.contactform .submit {
	margin-top:0.5em;
	background: url(../img/content-design/send.gif) no-repeat 0 0;
	height: 32px;
	width: 86px;
	border: none;
}
.contactform .submit input {
	background: url(../img/content-design/send.gif) no-repeat 0 0;
	height: 32px;
	width: 86px;
	border: none;	
	text-indent: -99999px;
	position: relative;
}

.contactform input {
	border-top: 1px solid #999;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	padding: .2em;
}
.contactform input.checkbox {border: none;}
.contactform label {
	display: block;
	float: left;
	width: 200px;
	height: 19px;
	line-height: 19px;
}
.contactform label.label {
	display: inline;
	float: none;
	width: 50px;
	font-size: 10px;
}
.contactform textarea {
	background: #ddd;
	padding: .5em;
	border: 1px solid #4E5B6E;
    overflow: auto;
}
.formbuilderform .message {
	line-height: 16px;
	padding: 0 0 8px 0;
}

span.required { color: red; margin:0; }


.contactform div.checkbox label {
	width: 680px;
		*width: 670px;
		*position: relative;
		*bottom: 23px;
	float: right;
}
.contactform div.checkbox input {
	*float: left;
}
.contactform div.checkbox {
    margin-top: 2em;
	line-height: 23px;
}

				
/* Success, notice and error boxes
-------------------------------------------------------------- */

.error      { 
	background: #FBE3E4; 
	color: #8a1f11; 
	border-color: #FBC2C4; 
	margin-top: .3em;
}


.notice, 
.success    { padding: .8em; margin-bottom: 1em; border: 1px solid #ddd; }


.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }				


div.error_message ul {
	padding: 0 0 0 14px;
}

.formbuilderform { margin: 2em 0; }
.formbuilderform div  { margin-bottom: 1em; }
.formbuilderform .submit { 
	margin: 2em 0; 
	height: 32px;
	width: 86px;
}
.formbuilderform .submit input {
	background: url(../img/content-design/login.gif) no-repeat 0 0;
	height: 32px;
	width: 86px;
	border: none;	
	text-indent: -99999px;
	display: block;
	}


.formbuilderform label {
	display: block;
	float: left;
	width: 100px;
	height: 19px;
	line-height: 19px;
}


.formbuilderform input {
	border-top: 1px solid #999;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	padding: .2em;
}

