#container {

            width:480px;
}

/* Custom Form Styles Start Here*/
/* IMPORTANT: must set a fixed width for the style 'legend .block'  */

#formbuilder { /* branding styles for whole form */
    clear: both;	 
width: 350px;
     /* May need to set absolute width depending on context of form hotspot in template*/
	 background-color: #E5EAEF; /* Alter according to site branding*/
	 padding:10px 30px;
	 border: solid 1px;
	 border-color: #635C53;
 }
 
#title {
	font-size: 1.4em;
	line-height: 1.8em;
	font-weight: bold;
}

/* Styles to allow scalable field values */

input {
  font-family:Verdana, Arial, Helvetica, sans-serif;

	border:1px solid #000;
}

#checkboxlist input{
	border:0;
}
#radiolist input{
	border:0;
}


textarea {
  font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:1em;
		border:1px solid #000;
  }
  
select {
  font-family:Verdana, Arial, Helvetica, sans-serif;
	
	border:1px solid #000;
}
 
option {
  font-family:Verdana, Arial, Helvetica, sans-serif;
	

}
 
 /* Row refers only to text fields and textarea fields*/
 
/* rowtop applies to form elements whose label is above the field*/

 #formbuilder,rowtop { 
	clear: both;
	/*margin-left: 163px;*/
	margin-left: 0px;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
}


/* rowleft applies to form elements whose label is to the left of the field*/
 
#rowleft { 
	clear: both;
	margin-left: 163px; /* Mac IE fix: ensures consistent alignment of fields in Mac IE*/
	margin-top: 1.0em;
	margin-bottom: 1.0em;
}

 /* Mac IE fix  inserted here*/
#rowleft { 
	clear: both;
	margin-left: 0px;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
}
 /* end Mac IE fix */
 
 
 
/* Styles which allow label to be aligned above field*/ 

#form .labeltop {
    display: block;
    
}
 
#form .linebreak { /* necessary for IE4 to ensure label positions above field */
	line-height: 3px;
	clear: both;
}
 
 #form .fieldtop {
   
}

/* Styles which allow label to be aligned to left of field*/ 

#form .labelleft{ /*In Mac IE this label will display above field NOT to left */
    display: block;
	 float: left;
	 width: auto; /* allows label to run available width of form*/

	 margin-right: 10px; 
	 text-align: left;
 }
 
  /* Mac IE fix  inserted here*/
  #form .labelleft{
    display: block;
	 float: left;
	 width: 150px; 
 
	 margin-right: 10px; 
	 text-align: left;
 }
  /* end Mac IE fix */
  

 #form .fieldleft {
    
}

/* Fieldset styles*/
/* Check box groups and Radio button groups MUST be placed within fieldset, the legend providing a group label*/
  
fieldset {
   clear: both;
   padding: 5px;	
	padding-bottom: 10px;
	margin-bottom: 20px;
}
	 
legend {
   
	
	margin-bottom: 10px;
}	

legend .block {
   display: block;
   margin-bottom: 10px;
	width: 520px; /* MUST be set on a per site basis according to the width of the content area that contains form hotspot*/
}

/* Styles for Check boxes and Radio buttons - to allow listing inline or with with line break between each */

#checkboxlist {

   margin-top: 2px;
	margin-bottom: 2px;
   margin-left: 20px;
}

#radiolist {

   margin-top: 2px;
	margin-bottom: 2px;
   margin-left: 20px;
}

/* Styles for drop down lists with label to left*/

#dropdown {
   clear: both;

	margin-top: 10px;
	margin-bottom: 10px;
}

#dropdown label {
	margin-right: 10px;
}

/* Styles for drop down lists with on top*/

#dropdowntop {
   clear: both;
	
	margin-top: 10px;
	margin-bottom: 20px;
}

#dropdowntop label {
   display: block;
   clear: right;
  }

#dropdowntop select {
   margin-top: 2px;
   margin-left: 20px;
}

/* Styles for selecting single item from list with label on top*/

#select1top {
   clear: both;
	
	margin-top: 10px;
	margin-bottom: 20px;
}

#select1top label {
   display: block;
   clear: right;
}

#select1top select {
  	margin-top: 2px;
   margin-left: 20px;
}

/* Styles for selecting single item from list with label on left*/

#select1left {
   clear: both;

	margin-top: 10px;
	margin-bottom: 10px;

}

#select1left label {
  	margin-right: 10px;
}
#select1left select {
 border:1px solid black;
}
	

/* Styles for selecting multiple items from list with label on top*/

#select2top {
   clear: both;
	
	margin-top: 10px;
	margin-bottom: 20px;
}

#select2top label {
   display: block;
   clear: right;
}

#select2top select {
  	margin-top: 2px;
   margin-left: 20px;
}


/* Styles for selecting multiple items from list with label on left*/

#select2left {
   clear: both;
	
	margin-top: 10px;
	margin-bottom: 10px;
}

#select2left label {
  	margin-right: 10px;
}


/* For adding text between form fields*/

#textinsert {
	clear: both;
	
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Form buttons styles - should be able to extend these styles to customise buttons */

#submit {
   clear: both;
	
}

#submit input, #reset input{
	width:auto;
	height:auto;
	margin-top:1em;
	background:#D4D0C8;
}
#reset {
	margin-left: 15px;
}

span.labelleft{
	
	display:block;
	margin-bottom:.5em;
}
#mandatory{
                color:#870A04;
}