form.f { width: 450px; padding:10px; margin: 1em 0; border: 1px solid #9FA4A9; line-height:1.25em;  }

form.f p { clear:both; padding-top:4px; }

form.f div { clear:both; padding: 0; margin: 0; }
form.f div div { clear:none; padding:0; }
#content form.f div div p { font-size:1em; margin:0 0 1em 0; }
form.f label { width:80px; display:block; float:left; margin:0 20px 0 0;}
form.f div.field label { width:225px; display:inline-block; margin:0;}
form.f input, form.f textarea { line-height:1.25em; border:#ccc solid 1px; padding:2px; font-size:1em; }  
form.f select { line-height:1.25em; border:#ccc solid 1px; font-size:1em; padding:2px 0;}  
form.f input { width:250px; }
form.f textarea { width: 35em; height: 8em; }
form.f textarea.large { width:450px; height:16em; }

form.f div.field { display: block; margin: 0 0 0 100px;}
form.f input.checkbox { width:25px; vertical-align:middle; border:0;}
form.f input.radio { width:25px; vertical-align:middle; border:0;}
form.f input.small, form.f select.small { width:55px; }
form.f input.medium, form.f select.medium { width:130px; }
form.f input.large, form.f select.large { width:250px; }
form.f input.checkbox-group { margin:0 0 0 100px;}

form.f div.inline-field label { width:80px; display:inline; float:none; margin:0 10px 0 0;}
form.f div.inline-field { margin:0 0 0 100px; color:#585757; }
form.f div.buttons,form.f p.buttons { margin: 20px 0 0 100px; }

form.medium-label div.field { display: block; margin: 0 0 0 150px; }
form.medium-label label { width:130px;}
form.medium-label div.inline-field label { width:55px; display:inline; float:none; margin:0 10px 0 0;}
form.medium-label div.inline-field { margin:0 0 0 150px;}
form.medium-label .checkbox-group { margin:0 0 0 150px; font-size:1em;}
form.medium-label div.buttons { margin: 20px 0 0 150px; }

form.large-label div.field { display: block; margin: 0 0 0 200px; }
form.large-label label { width:180px;}
form.large-label div.inline-field label { width:55px; display:inline; float:none; margin:0 10px 0 0;}
form.large-label div.inline-field { margin:0 0 0 200px;}
form.large-label .checkbox-group { margin:0 0 0 200px; font-size:1em;}
form.large-label div.buttons { margin: 20px 0 0 200px; }

form.auto-label div.field { display: block; margin: 0 0 0 200px; }
form.auto-label label { width:180px;}
form.auto-label div.inline-field label { width:55px; display:inline; float:none; margin:0 10px 0 0;}
form.auto-label div.inline-field { margin:0 0 0 200px;}
form.auto-label .checkbox-group { margin:0 0 0 200px; font-size:1em;}
form.auto-label div.buttons { margin: 20px 0 0 200px; }

form.f input.submit, form.f a.button, form.f input.button { padding: 0.25em 1em; border: 1px solid #9FA4A9; width: auto; cursor: pointer; color: #000; }
form.f a.button:hover { text-decoration: none; }
form.f input.submit { background-color: #B1C1D2; }

label.rhs_label {display: inline !important; float: none !important; width: auto !important; margin:0 !important;}
form.f div.field ul { margin: 0 0 1em 2em; padding: 0; }
form.f div.field ul li { margin: 0; padding: 0; }

form.f table { width:28em; border:#00344f solid 1px; border-collapse: collapse;}
form.f td, th { padding:4px 6px;}
form.f table thead { background-color:#ccc;}
form.f th { text-align:left; width:60%; }
form.f tbody th {border-right:#eee solid 1px;}
form.f table tfoot { background-color:#eee;}

form.f div.form-section { padding-top:0; }

form.auto { width:auto; border:0; padding:0; }
form.auto table { width:100% }
form.auto td, th { padding:2px; }
form.auto th { width:auto; }

form.f .form-row .field table.d {
	margin: 0 0 1em 0; 
}

/**** calendar colours ****/
form.f div.calendar
{
  background-color: #fff;
  border: 1px solid #5E5E5E;
}

form.f div.calendar-header
{
  background-color: #B1C1D2;
  color: #000;
}

form.f div.calendar-days
{
  background-color: #F2F2F2;
}

form.f div.calendar-cells a
{
  color: #000;
  border-left: 1px solid #DDDDDE; /* note: MUST be a 1px border-left */
  border-top: 1px solid #DDDDDE;  /* note: MUST be a 1px border-top */
}

form.f div.calendar-cells a:hover, form.f div.calendar-cells a.selected
{
  background-color: #B1C1D2;
  color: #000;
  font-weight: bold;
}

form.f div.calendar-cells a.other-month
{
  background-color: #F2F2F2;
}

form.f div.calendar-cells a.other-month:hover
{
  background-color: #F2F2F2;
}

form.f div.calendar-cells a.today
{
  background-color: #DDDDDE;
}

form.f div.calendar-cells a.today:hover
{
  background-color: #B1C1D2;
}

form.f div.calendar-header a
{
  color: #000;
}


/**** calendar layout ****/
form.f div.calendar
{
  display: inline;
  position: absolute;
  width: 210px;
  
  /* drop shadow in supported browsers to give "depth of field" */
  -webkit-box-shadow: 0px 4px 35px rgba(0,0,0,0.5);;
}

form.f div.calendar-header
{
  height: 20px;
}

form.f div.calendar-header a
{
  display: block;
  float: left;
  width: 20px;
  text-align: center;
  
  text-decoration: none;
}

form.f div.calendar-header a:hover
{
  font-weight: bold;
}

form.f div.calendar-header span
{
  display: block;
  float: left;
  width: 170px;
  text-align: center;
  font-size: 0.9em;
}

form.f div.calendar-days
{
  line-height: 22px;
  height: 22px;
}

form.f div.calendar-days span
{
  display: block;
  float: left;
  width: 30px;
  text-align: center;
  
  font-size: 0.9em;
  font-weight: bold;
}

form.f div.calendar-cells a
{
  display: block;
  float: left;
  width: 29px;
  line-height: 22px;
  text-align: center;
  
  text-decoration: none;
  font-size: 0.9em;
}

form.f div.calendar-cells a.other-month:hover
{
  background-color: #F2F2F2;
}

form.f div.treeselector
{
  display: inline-block;
}

form.f div.treeselector select
{
  margin: 0.5em;
}

form.f div.treeselector div.treeselect_descendants
{
  padding: 0 0 0 2em;
}

/** validation css **/

input.valid-form-field, textarea.valid-form-field
{
  background-image: url('../include/modules/optional/formgeneration/images/field-verified-tick.png');
  background-repeat: no-repeat;
  background-position: 100% 50%;
}

input.invalid-form-field, textarea.invalid-form-field
{
  background-color: #FFCCC8;
}

form.f div.field-validation-rules
{
  display: inline-block;
  margin: 0 0 0 5px;
  vertical-align: top;
  
  font-size: 0.7em;
  padding: 0.2em 1em;
  background-color: #f55;
  color: #fff;
  
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
}

form.f input.product_qty_field {
	width:33px;
	font-size:11px;
}

form.f fieldset {
	border: 1px solid #00344f;
}
form.f label {
	font-size:0.75em;
}
form.f .form-row {
	background:#EEF5FD;
	margin-bottom: 2px;
	padding: 8px;
}
.note {
	font-size:0.75em;
	margin: 5px  10px;
	display: block;
}

#card_type_note.note {
  display: inline;
  margin: 0;
}

form.f input, form.f select, form.f textarea {
	font-size: 0.75em;
}
form.f fieldset table.d {
	margin: 0;
}

form.f div.buttons {
	background: transparent;
	margin: 10px 0;
	text-align:center;
}

form.f input.submit, form.f a.submit {
	background: transparent url('../images/g-submit.gif') no-repeat;
	color:#fff;
	width: 290px;
	height:28px;
	text-align:left;
	padding: 0 20px 0 10px;
	border:0;
	cursor:pointer;
}
#content form.f a.submit {
  padding-top: 6px;
  height: 22px;
  display:inline-block;
  font-size: 0.75em;
  line-height: 1.25em;
  color:#fff;
}
form.f input.submit:hover, form.f a.submit:hover {
	background-position: left -28px;
}