/*
 *
 * START DEFAULT FORM STYLES
 *
 */
/*

SAMPLE:

    <div class="required">
     Required fields are bold  <span class="required">and have the word required beside them</span>
    </div>
    <div class="error">
     Fields with errors are red  <span class="error">and have the word error in front of them</span>
    </div>
    <div>
     <label class="required error">
      <span class="required">Error:</span> <span>Enter your name</span> <span class="required">(required)</span>
      <input type="text" name="name">
     </label>
    </div>

    <fieldset class="checkbox">
     <legend>What do you plan on doing?</legend>
     <div>
      <label>
       <span>Getting Married</span>
       <input type="checkbox" name="cb1">
      </label>
     </div>
     <div>
      <label>
       <span>Having a honeymoon</span>
       <input type="checkbox" name="cb2">
      </label>
     </div>
    </fieldset>




*/
 
form {
	padding: 1em;
	line-height: 1.2em;
	font-size: 1.2em;
}

form div {
	margin-bottom: 1em;
	width: 100%;
	min-width: 100px;
	text-align: right;
}

form div label {
	display: block;
	width: 100%;
	min-width: 100px;
	text-align: left;
	font-size: 1em;
}

form div label.required span, form div.required,  form div label.required {
	font-weight: bold;
}

form div label.error span, form div.error {
	color: #DD0000;
}

div.error {
	text-align: left;
	border: 1px solid #DD0000;
	background-color: #FFDDDD;
	padding: 1em;
	width:auto;
}

form div label.required span.required, form div.required span.required, form div label.error span.error, form div.error span.error {
	position: absolute;
	overflow: hidden;
	clip: auto;
	width: 0px;
	height: 0px;	
}

form div label.error input, form div label.error select {
	background-color: #FFEFEF;
}

form div label.error input:focus, form div label.error select:focus {
	background-color: #FFDFDF;
}

form div input {
	border: 1px solid #C3C3C3;
	border-bottom-color: #7C7C7C;
	border-top-color: #DDDDDD;
	background-color: #D0D0D0;
	color: #000000;
	-moz-border-radius: .2em;
}

form div label input, form div label select, form div label textarea {
	display: block;
	width: 100%;
	font-size: 1em;
	margin-top: .2em;
	border: 1px solid #C3C3C3;
	border-top-color: #7C7C7C;
	border-bottom-color: #DDDDDD;
	padding: .3em;
	background-color: #FFFFFF;
	color: #111111;
	-moz-border-radius: 0em;
}

form div input:focus {
	border: 1px solid #A3A3A3;
	border-bottom-color: #5C5C5c;
	border-top-color: #BDBDBD;
	background-color: #B0B0B0;
}

form div label input:focus, form div label select:focus, form div label textarea:focus {
	border: 1px solid #A3A3A3;
	border-top-color: #5C5C5C;
	border-bottom-color: #BDBDBD;	
	background-color: #EFEFEF;
}

form div label select {
	padding: 0em;
}

form div label textarea {
	height: 10em;
	font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
}

form fieldset {
	border: 1px solid gray;
	padding: 1.5em;
	margin-bottom: 1.5em;
}
form fieldset legend {
	padding-left: 1em;
	padding-right: 1em;
	font-size: 1em;
}

form fieldset.checkbox {
	border: 0px;
	padding: 0px;
	padding-top: 1em;
}
form fieldset.checkbox legend {
	border: 0px;
	padding: 0px;
}

form fieldset.checkbox div {
	text-align: left;
	margin: 0px;
	margin-left: 3em;
	width: auto;
	margin-bottom: .5em;
}
form fieldset.checkbox div label {
	position: relative;
}
form fieldset.checkbox div label input {
	position: absolute;
	width: auto;
	left: -2em;
	top: -.2em;
	height: 1em;
	width: 1em;
	z-index: 999;
	border: 0em;
	margin: 0px;
}

form div.inline {
	text-align: left;
}

form div.inline label,  form div.inline label input, form div.inline label select {
	display: inline;
	width: auto;
}

form div.inline label input, form div.inline label select {
	margin-left: 1em;
}

/*
 *
 * START MULTIPLE FIELDS
 *
 */
 
form div.related_two, form div.related_three, form div.related_four {
	overflow: hidden;
	width: auto;
	margin-right: 0px;
	margin-left: 0px;
	padding: 0px;
}

form div.related_two label, form div.related_three label, form div.related_four label {
	margin-left: 1%;
	float: left;
}

/*
 *
 * START COUPLET FIELDS
 *
 */

form div.related_two label {
	width: 49%;
}

/*
 *
 * END COUPLET FIELDS
 *
 */


/*
 *
 * START TRIPLET FIELDS
 *
 */

form div.related_three label {
	width: 32%;
}

/*
 *
 * END TRIPLET FIELDS
 *
 */

/*
 *
 * START QUADRUPLET FIELDS
 *
 */

form div.related_four label {
	width: 24%;
}

/*
 *
 * END QUADRUPLET FIELDS
 *
 */

/*
 *
 * START SIDE BY SIDE FORMS
 *
 */

form div.sidebyside label {
	overflow: hidden;
}

form div.sidebyside label {
	text-align: right;
	overflow: hidden;
}

form div.sidebyside label span {
	text-align: right;
	margin-right: 1%;
	padding-top: .5em;
}

form div.sidebyside label span, form div.sidebyside label input, form div.sidebyside label select {
	float: left;
	width: 49%;
}

/*
 *
 * END SIDE BY SIDE FORMS
 *
 */

/*
 *
 * END DEFAULT FORM STYLES
 *
 */