/*  FORM CSS
    Author: David Johnson
    Email: david.johnson@towergate.co.uk
    Published: 07/09/2010

    Description:
    This stylesheet controls the form element styles
    
    DO NOT MODIFY
*/

/* 
Revision history

Change id | Date      | Changed by    | Comments
----------|-----------|---------------|--------------------------------------------
ch-1      |16/02/2011 | APettipher    |added the new table styles to the form
----------|-----------|---------------|--------------------------------------------
ch-2      |16/02/2011 | HV            |Removed the font from indivudual styles and added it to the body
          |           |               |The font will be overriden in the body of each individual flavour should they need to be different.
----------|-----------|---------------|--------------------------------------------
ch-3      |11/03/2011 | AP            |amended styles for add another occupation button on new line
          |           |               |amended widths on occupation table to accomodate drop-down
          |           |               |
----------|-----------|---------------|--------------------------------------------
ch-4      |16/03/2011 | AP            |amended body font-size & changed others to be relative to this
          |           |               |grouped occupation styles together & simplified
          |           |               |
----------|-----------|---------------|--------------------------------------------

*/


body {
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 0.8em;
	line-height: 1.4em; 
}

form {
    margin: 0;
    padding: 0;
}
input, select, textarea {
	font-size: 1em;
}

/* Start Form Layout */

fieldset {
    border: none;
    background: #eee;
    margin: 0 0 15px 0;
    position: relative;
    color: #666;
} 

fieldset .mask * {
	position: absolute;
	display: block;
	width: 6px;
	height: 6px;
	z-index: 99;
	background-image: url(../img/mask_plane_white.gif);
  	background-repeat: no-repeat;
  	line-height:0em;
}

.mask .tl { top: -1px; left: -1px; background-position: top left; }
.mask .tr { top: -1px; right: -1px; background-position: top right; }
.mask .bl { bottom: -1px; left: -1px; background-position: bottom left; }
.mask .br { bottom: -1px; right: -1px; background-position: bottom right; }

fieldset h2 {
    margin: 20px 0 0 25px;
    font-size: 1.2em;
    font-weight: normal;
    color: #444;
} 

legend {
    font-weight:bold;
    color:#333;
    padding:15px 10px 0 25px;
}

/* End Form Layout */
/*\*/

/* Start CSS Table */

div.row {
    position:relative;
    padding:1px 0 10px 0;
    width:100%;
    min-height: 20px;
    height:100% !important;
    height:auto;
    overflow:hidden;
    display:block;
    border-bottom:1px #c7d8e1 dotted;  
}

div.row .label {
    text-align:left;
    position:relative;
    height:auto;
    width:29%;
    display:block;
    float:left;
    padding:5px 8px 0 40px;
}

div.row .asterisk {
    position:relative;
    display:block;
    float:left;
    height:auto;
    width:10px;
    color:#EC0000;
    padding-top:5px;
}

div.row .field {
    position:relative;
    float:left;
    height:100%;
    width:55%;
	display:block;
	padding-top:5px;
}

div.row .help { 
    position:relative;
    float:left;
    height:auto;
    width:5%;
    display:block;
    padding:5px 0 0 5px;
}

/*\*/

/* start occupation area */
div.occupation {
    padding: 0 0 10px 0;
    min-height: 20px;
    border-bottom: 1px #c7d8e1 dotted; 
}

div.occupation .row {
    padding: 0 0 10px;
    min-height: 20px;
    border-bottom: none 0px;
}
div.occupation td {
	vertical-align: top;
}
div.occupation .row .label {
    width: 25%;
    float: left;
    padding: 5px 0 0 40px;
}

div.occupation .row .asterisk {
    float: left;
    height: auto;
    width: 2%;
    color: #EC0000;
    padding: 5px 0 0 40px;
}

div.occupation .row .field {
    float:left;
    height:100%;
    width:55%;
	color:#000000;
	padding-top:5px;
}

div.occupation .row .help { 
    float:left;
    height:auto;
    width:5%;
    padding:0 0 0 5px;
}

div.occupation .row .ABI {
    float:left;
    height:100%;
    width:87%;
	padding: 0 2px 0 5px;
}

div.occupation .row .choose-percent-title {
    text-align:right;
    height:auto;
    width:25%;
    float:left;
    padding:5px 8px 0 40px;
}

div.occupation .row .choose-percent {
    float:left;
    height:100%;
    width:40%;
	padding-top:5px;
}

div.occupation .row .choose-button {
    float:right;
    height:100%;
    width:25%;
	padding: 0 40px 0 0;
}

div.occupation .row .percentage {
    float:left;
    height:100%;
    width:15%;
	padding: 0 2px 0 5px;
}

div.occupation .row .ABI .field  {
    float:left;
    height:100%;
    width:100%;
	padding-top:5px;
}

div.occupation .row .delete {
    float:left;
    height:100%;
    width:15px;
}

div.occupation .row .delete input {
    width: 14px;
    height: 14px;
    background: transparent url(../../img/forms/delete_icon.gif) no-repeat;
    border: none 0;
    cursor: pointer;
}
div.occupation table {
	width: 100%;
}
div.occupation .row .title {
    float:left;
    height:100%;
    width:75%;
	padding: 5px 0 0 40px;
}
div.occupation .row .choose-percent {
    float: left;
    height: 100%;
    padding-top: 5px;
    width: 30%;
}
div.occupation .row .ABI {
    width: 83%;
}
div.occupation .row .title {
	width: 60%;
}
div.occupation .row .percentage, div.occupation .row .remove {
	width: 15%;
}

/* end occupation area */    

/* End CSS Table */
/*\*/

/* 
    Start Form Elements
    Should be spaced a minimum of 10px apart.
    The distance between descriptive text and form fields needs to be at least 3px. 
*/

.or {
    text-align:center;
    height:15px;
    border-top: 1px #eee solid;
    margin: 20px 0 10px 0;
}

.or hr {
    background-color:#eee;
    height:1px;
    border:none;
    z-index:1;
}

.or p {
    display:block;
    width:15px;
    text-align:center;
    margin: -10px auto 0 auto;
    padding:0 6px;
    font-weight:bold;
    background:#fff;
    z-index:100;
}

.dropheadings {

    width: 140px;
    float:left;
    display:inline-block;
    margin: 0 0 0 10px;
    padding: 0 0 10px 0;
}

.small
{
   font-size:0.9em;
   display:block; 
}

/* Controls side-by-side drop down boxes */
.select {
    position: relative;
    width: 140px;
    height: auto;
    margin: 0 10px 0 0;
}

.label-asterisk {
    margin:0;
    padding:0;
}

/* Controls title drop down */
select.title {
    width: 120px;
}

/* Controls general text box */
.input-field {
    width:50%;
    height:20px;
    border:1px #c8c8c8 solid;
    background: #fff url(../img/forms/field-inner-shadow.gif) repeat-x left top;
}

/* ACTIVE FIELDS */
.input-field:focus {
    background: #fffad6 url();
}

.input-field:active {
    background: #fffad6 url();
}

/* Controls postcode text box */
.postcode {
    width:80px;
    height:20px;
    border:1px #c8c8c8 solid;
    background: #fff url(../../img/forms/field-inner-shadow.gif) repeat-x left top;
}

.postcode:focus {
    background: #fffad6 url();
}

/* Controls ABI list dropdown */
.singleABI {
    width: 100%;
    padding: 0 0 0 0;
    background: #fff url(../../img/forms/field-inner-shadow.gif) repeat-x left top;
    border: solid 1px #c8c8c8;
}

.singleABI:focus {
    background: #fffad6 url();
}

/* Controls Occupation Percentage */
.percent {
    width:45px;
    border:1px #c8c8c8 solid;
    padding:0 0 0 0;
    background: #fff url(../../img/forms/field-inner-shadow.gif) repeat-x left top;

}

.percent:focus {
    background: #fffad6 url();
}

/* Controls checkbox */
.check {
    
}

/* Controls horizontal radio button */
.rdoHorizontal {
    position:relative;
    float:none;
    text-align:left;
}

.rdoHorizontal label {
    position:relative;
    margin:0 10px 0 5px;
}

/* Controls vertical radio button */
.rdoVertical {
    position:relative;
    float:none;
    text-align:left;
}

.rdoVertical label {
    position:relative;
    margin:0 0 5px 10px;
}

.rdoVertical input {
    position:relative;
    margin:0 0 0 0;
}

.datepicker {
    width:140px;
    height:20px;
    border:1px #c8c8c8 solid;
    background: #fff url(../../img/forms/field-inner-shadow.gif) repeat-x left top;
}

.datepicker:focus {
    background: #fffad6 url();
}

.fillme {
    color:Red;
}

/* End Form Elements */
/*\*/

/* start buttons */
.retrieve {
	width: 25%;
	padding:5px 0 0 72%;
	text-align: right;
}

/* end buttons */

/* start button areas */

.submit {
    width: 100%;
    height: 40px;
    margin: 0 0 10px 0;
    position: relative;
}

.submit .block1 {
    float: left;
    display: block; 
    left: 0px;
    position: relative;
    width: 50%;
}

.submit .block2 {
    float: left;
    display: block; 
    position: relative;
    width: 25%;
    padding: 0 1% 0 0;
}

.submit .block3 {
    float: left;
    display: block; 
    position: relative;
    width: 23%;
}

fieldset h2 {
    margin: 20px 0 0 30px;
}



/* end button areas */
/*\*/


#AvailProductTable
{
	margin: 20px;
	
}

#AvailProductTable tr td
{
	padding: 3px 3px 15px 3px;
	vertical-align: top;
	text-align: left;
}

#ProductTable
{
	margin: 20px;
	
}

#ProductTable tr td
{
	padding: 3px 3px 15px 3px;
	vertical-align: top;
	text-align: left;
}

#QuoteTable tr td
{
	padding: 3px;
}