.line
{
	background-image: url("line.gif");
	background-repeat: repeat-x
}

.bg
{
	background-image:url("sky.jpg");
	background-position: top center;
	background-attachment:fixed;
}

.back
{
	background-image:url("back.gif");
	background-position: center;
	background-repeat:no-repeat
}

.heading
{
	font-family: verdana; 
	text-decoration: underline;
	font-weight: bold;
	text-align:left;
	font-size: 16;
	color: #000000
}

.headingPortal
{
	font-family: verdana;
	font-weight: bold;
	line-height: 125%;
	font-size: 18;
	text-align:left;
	color: #FFFFFF
}

.mainFontText
{
	font-family: verdana; 
	font-size: 12;
	text-align:justify;
	color: #000000;
	line-height:1.5;
}

.mainFontTextNoJust
{
	font-family: verdana; 
	font-size: 12;
	color: #000000;
		line-height:1.5;
}

.mainFontTextOpp
{
	font-family: verdana; 
	font-size: 10;
	text-align:justify;
	color: #FFFFFF 
}

.smallFont
{
	font-family: verdana; 
	font-size: 9;
	font-weight: bold;
	color: #000000
}

.imageBorder
{
	border: thin solid #CCCCCC;
	border-style: solid;
	border-width: 1
}

table.tableBorder{
	border: thin solid #AAAAAA;
	border-style: dashed;
	border-width: 0
}
table.tableBorderth {
	border: thin solid #AAAAAA;
	border-style: dashed;
	border-width: 1
}
table.tableBorder td {
	border: thin solid #AAAAAA;
	border-style: dashed;
	border-width: 1
}


.mainFontTextLink a:link 
{
	font-family: verdana; 
	color: #E20A17;
	font-weight: bold;
	text-decoration: none
}

.mainFontTextLink a:visited
{
	font-family: verdana; 
	color: #E20A17;
	font-weight: bold; 
	text-decoration: none
}

.mainFontTextLink a:hover 
{
	font-family: verdana;
	color: #E20A17;
	font-weight: bold; 
	text-decoration: underline
}

.menuLink a:link 
{
	font-family: verdana; 
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none
}

.menuLink a:visited
{
	font-family: verdana; 
	color: #FFFFFF;
	font-weight: bold; 
	text-decoration: none
}

.menuLink a:hover 
{
	font-family: verdana;
	color: #000000;
	font-weight: bold; 
	text-decoration: underline
}

/*input
{
	font-size: 8pt;
	font-family: verdana;
	color: #00335B;
	height:18
}

select
{
	font-size: 8pt;
	font-family: verdana;
	color: #00335B
}

textarea
{
	font-size: 8pt;
	font-family: verdana;
	color: #00335B;
}*/


a.linkopacity img
{
	filter:alpha(opacity=100); 
	-moz-opacity: 1.0; 
	opacity: 1.0;
}

a.linkopacity:hover img
{
	filter:alpha(opacity=50);   
	-moz-opacity: 0.5;   
	opacity: 0.5;
}

/* ======================================================================================================================================================================================
   Variables 
   ====================================================================================================================================================================================== */
:root
{
	--colour:				#09A9CF;
	--imageratio:			56.25%;
	--transition:			200ms ease;
}


/* Label Transition */
.labelcontainer 			  
{ 
	position:				relative;
}

.labelcontainer label
{
	color:					#BABABA;
	position:				absolute;
	pointer-events:			none;
	top:					18px;
    left:					10px;
	transition:				var(--transition);
	border:					none !important;	/* so the error class doesn't add a border to the label */
}

.input:focus ~ label, .input:valid ~ label
{
	top:					5px !important;
	font-size:				12px !important;
}

.inputbig
{
	font-size:				20px;
}

.inputbig label
{
	top:					10px;
}

input:not(.input)
{
	padding:10px;
}

/* Bar */
.input:focus ~ .bar:before, .input:focus ~ .bar:after
{
	width:					100%;
}

.bar
{
	position:				relative;
	display:				block;
	width:					100%;
}

.bar:before, .bar:after
{
	content:				"";
	height:					2px; 
	width:					0;
	bottom:					5px;
	position:				absolute;
	background:				var(--colour);
	transition:				var(--transition);
}

/* Fix placeholder - only required with certain fonts */
/*input::placeholder, textarea::placeholder
{
	color:					#CCCCCC;
	padding-top:			1px;
	border:					none !important;*/	/* so the error class doesn't add a border to the label */
/*}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder
{
	color:					#CCCCCC;
	padding-top:			1px;
}*/


.report
{
	display:				none;
	word-wrap:				break-word; 
	overflow:				hidden;
}

.error, .error::placeholder/*, .error::-webkit-input-placeholder*/
{
	color:					#ED1848 !important;
	border:					2px solid #ED1848 !important;
}

.smallfont
{
	font-size:				12px;
	color:					#606060;
}