/* To get the coloured form background */


*
{
    font-family: Calibri,Arial,Times;
}

div.white {padding: 1em; background-color: #FFFFFF;}
div.red {padding: 1em; background-color: #FFCCCC;}
div.blue
{
    padding: 1em;
    background-color: #DBE5F1;
}
div.yellow {padding: 1em; background-color: #FFFFCC;}
div.green {padding: 1em; background-color: #CCFFCC;}


/* For non-cssp browsers: to ensure the main form table gets coloured */
table.white {background-color: #FFFFFF;}
table.red {background-color: #FFCCCC;}
table.blue {background-color: #DBE5F1;}
table.yellow {background-color: #FFFFCC;}
table.green {background-color: #CCFFCC;}


/* To grey out DISABLED text and form controls */
td.greytext {color: #C0C0C0;}
a:link.greytext {color: #C0C0C0; text-decoration: none;}
a:visited.greytext {color: #C0C0C0; text-decoration: none;}
a:hover.greytext {color: #C0C0C0; text-decoration:underline;}
a:active.greytext {color: #C0C0C0; text-decoration: none;}
input.disabled {background-color: #CCCCCC;}



/* For percentage text boxes used purely for displaying calculated or
   recorded data (i.e. no input) */
.display{  
		border-style: none;
	      	color: black;
	      	background-color: transparent;
	   }

/* For text boxes used purely for displaying calculated or
   recorded data (i.e. no input) (Bold text)*/
.displayB{  
		border-style: none;
		font-weight: bold;
	      	color: black;
	      	background-color: transparent;
	   }

/* For text boxes used purely for displaying calculated or
   recorded data (i.e. no input) (Italic text)*/
.displayI{  
		border-style: none;
		font-style: Italic;
	      	color: black;
	      	background-color: transparent;
	     }

/* For text boxes used purely for displaying calculated or
   recorded data (i.e. no input) (Bold and Italic text)*/
.displayBI{  
		border-style: none;
		font-weight: bold;
		font-style: italic;
	      	color: black;
	      	background-color: transparent;
	   }



/* To make a field invisible (other than hidden fields) */
.invisible { display: none;}

/* Bold/centred style */
.centredB{
             font-weight: bold;

             text-align: center;
          }


/* Style for the title at the head of the display table (mimics the table's "caption" style) */
.table_title 	{
			font-weight: bold;

	      		color: navy;
		}

/* Style for the title at the head of the display table (mimics the table's "caption" style) */
#JSnote	{  color: navy;   }


/* To center the two form buttons on the page */
div.centred {left-margin: auto; right-margin: auto; text-align: center;}


/* To ensure the instruction text stands out */
div.instructions {color: #0000FF; margin: 1%;}


/* To increase the size of important text */
p.important_text {font-size: 1.2em;}

/* Reduce the size of sub-headings on the final table */
.subhead {  
		font-size: 8pt;

		font-weight: bold;
	     }


/* To colour dates green */
span.date {color: #006600;}


/* To hide the form labels (required for accessibility) */
span.hidden {display: none;}


/* To colour errors red */
span.error {color: #FF0000;}


/* To highlight form fields with erroneous data in yellow */
input.highlight {background-color: #FFFF00;}


/* To make captions one level smaller */
caption {font-size: smaller;}