/*

CSS by Ushan Wickremanayake, IDRS Inc.
E-Mail: ushan@idrs.org.au; ushwick@gmail.com

The webpage set to default width of 960px and default min height of about 600px 

References and credits:
http://www.alistapart.com
http://www.colorcombos.com/combolibrary.html
http://www.echoecho.com
http://www.color-hex.com
http://www.queness.com
https://github.com/jquerytools/jquerytools/issues
http://jquerytools.org
http://www.scriptiny.com/2008/04/custom-javascript-dialog-boxes/

"Always keep pushing yourself to learn and create. Deliver delight. Excel in your craft."

*/

* { padding: 0; margin: 0; }
/* ................................................................................................................................... General */

html {
    overflow-y: scroll;
}

body {
 font:0.85em Arial, Verdana, Helvetica, sans-serif;
 background:#9EAEB3;   /*#9EAEB3;   */
 color:#525252;

}

/*html {font-size:1em;}*/

h1  {
	margin:10px 0 20px;
	padding:0px;
	text-transform:none; 
	color:#525252;
	font-size:1.9em; /*1.333em;*/
	border-bottom:dotted 1px  #C5CDD8;
	font-weight:400; 

}


h2 { 
	margin:30px 0px 10px;
	padding:0px;
	text-transform:none;
	color:#525252;
	font-size:1.4em;
	font-weight:400; 
	/*border-bottom:dashed 1px #F3BBBB;*/
	/*background:url('../_images/layout/bullet_point.gif') no-repeat left center;*/
}


h3 {
	margin:30px 0px 20px;
	padding:0px;	
	text-transform:none;
	color:#525252;
	font-size: 1.2em;
	font-weight:400; 

}

h4 {
	margin:10px 0 5px 0;
	padding:0 0 0 10px;
	text-transform:none;
	color:#525252;
	font-size: 1.1em;
	font-weight:bolder; 
}

h5 {
	font-size: 1em;
	font-weight:bold; 
	margin:15px 15px; /*Marging is the same as in <p>*/
	padding:0px;
	color:#525252;
}
h6 {
	margin:15px 15px; /*Marging is the same as in <p>*/
	padding:0px;
	color:#525252;
}
/*
a:link, a:visited  {text-decoration:underline;color:#CB2524;outline:none;}
a:hover {text-decoration:underline;color:#E77979;}
a:active {color:#7C2290;}
*/
/*
::-moz-selection{background:#cc0000;color:#fff;}
::selection {background:#cc0000;color:#fff;}
*/
ul, ol {
	margin:5px 0 0 15px; 
	list-style-position:outside; 
	padding:0 0 0 10px;
	color:#525252;
	font-weight:bold;
	line-height:1.2em;
	margin-bottom: 1.2em;	
	 }	 

.disc-circle ul, .disc-circle ol, .disc-circle li{
	list-style-type: disc;
}	

.disc-circle li ul, .disc-circle li ol{
	list-style-type:circle;
}
	 
ul.compactList , ol.compactList {
	line-height:1.2em;
}

.greenTicked ul, .greenTicked li{
	list-style-image: url('../_images/layout/greenTick.png');
}	 

.redMarked ul, .redMarked li{
	list-style-image: url('../_images/layout/redMark.png');

}	

.actionPoint ul, .actionPoint li {
	list-style-image: url('../_images/layout/blueArrowRight.png');
}

.majorPoint ul, .majorPoint li {
	list-style-image: url('../_images/layout/lightBluePointer.png');
}



ol, .mainOl ol{
	list-style-type:decimal;
}	

.subOl ol{
	list-style-type:lower-alpha;
}	
	
li {
	margin:0px 20px 0px; 
	line-height:1.5em;
	padding:5px 5px; 
	font-weight:normal;	
	}
	
li img { display: block; position: absolute; bottom: 0; }		
	
.compactList li {
	line-height:1.3em;
	padding:5px 5px; 
}	

.mainOl li{
	list-style-type:decimal;
}	

.subOl li{
	list-style-type:lower-alpha;
}	

ol.compacted, ul.compacted, li.compacted  {
	line-height:1em;
	padding:5px 5px; 
}

.noBullets ol li, .noBullets ul, .noBullets li{
	list-style-type: none ;
	list-style-image:none;
}

p {
	margin:15px 15px;
	line-height:1.7em;
	margin-bottom: 1.2em;
	color:#525252;	
	}
	

.bolder, .bolder p, .bolder span, .bolder ul, .bolder ol {
	font-weight:bold;
	}

p.actionPoint, span.actionPoint {	
	display:table;	
	background:url('../_images/layout/blueArrowRight.png') no-repeat 3px 50%;
	background-position:left  middle;
	padding:0px 0px 0px 30px;	
}
	
a {
	text-decoration:none; /*Easier to read without underline, links in blue to help find them */
} 	

a:link{
	color: #0000FF;
}

a:visited{
	color:#800080;
}

a:active, a:hover{
	color:#FF0000;
}

iframe {
	border:3px #C5CDD8 solid;
	margin: 5px 0;
} 

/*
div {
	overflow: hidden; /*stops the vertical twitch when refreshing the page
	
}*/

/*.................................................................... .......................................................Information popup */
.linkpopup {
 position: relative;
}

.linkpopup span {
 background-color: #ccc;
 border: 1px solid #000;
 display: block;
 left: 0;
 padding: .25em;
 position: absolute;
 top: -1.75em;
}

.linkpopup:link span, .linkpopup:visited span {
 visibility: hidden;
}

.linkpopup:hover span, .linkpopup:focus span, .linkpopup:active span {
 color: #000;
 text-decoration: none;
 visibility: visible;
}

/*HTML to use <a href="#" class="linkpopup">Link text <span>Description text</span></a>

/* -----------------------------------------------------------------------------------------------------------------------------------------------*/



/*..........................................................................................................................................Layout */


#wrapper{ 
	/*Holds everything on the site from Masthead to Footer*/
	margin: 2px auto;
	width: 960px; /* ---------------------------------------------------------------------------------------------------------defines the total width*/
	height:auto;
	/*min-height:700px;*/
	background:#F2F2E6;
	/*background:#354E71;*/
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}


#header {
	width: 940px; 
	padding: 5px 10px 10px 10px;
	height: 158px;
	background: #354E71;/*#003366; */
	-moz-border-radius:8px 8px 0px 0px;
	-webkit-border-radius:8px 8px 0px 0px;
	border-radius:8px 8px 0px 0px;
}

#header img {
	display:block;
	float:right;
	margin:0px;
	border:none; 
}

a.header {
	border:none; 
	text-decoration:none;

}

/*.................................................................... .......................................................Text styles */

#mastheadMainText {
 color: #FFFFFF;
 font-size:2.1em;
 font-weight:700;
 padding:10px 0;
 display:block;
 height:20px;	
 margin:40px 0 20px -2px;	
}

#mastheadSubText {
 color: #FFFFFF;
 display:block;
 font-size:1.4em;	
 padding:10px 0;
 margin:20px 0 0 -2px;	
 height:10px;	
 
}

/*--------------------------------------------------------------------------------------------------------------------------------------------Main Menue--*/

#mainMenu {
	float: left;
	width: 940px;
	height:55px; /*Originally 45px */
	color: #FFF;
	padding: 0px 5px 5px 15px;
	background:  #841F27;
}



a.mainMenu:link, a.mainMenu:visited {
	text-decoration:none;
	display:block;
	float: left;
	min-width:85px;
	padding: 5px 7px 0px;
	margin: 10px 8px 0 0;
	border:none;
	line-height:1.4em;
	font-size:1em;
	height:45px; /*Originally 30px */
	color: #003366; /*Originally 333 */
	text-align:left;
	background: #C6BE90; 
	-moz-border-radius:8px 8px 0px 0px;
	-webkit-border-radius:8px 8px 0px 0px;
	border-radius:8px 8px 0px 0px;
	
}


a.mainMenu:hover { 
	color: #FFF;
	background: #B28600;
}

a.mainMenu:active {
	color: #333;
	background:#E5BF4C;
}

a.mainMenu.selected {
	color: #333;
	background:#E5BF4C;

}

/*..........................................................................................................................................Trace Box */

#traceBox {
	display:table;
	text-decoration:none;
	vertical-align:middle;
	float: left;
	width: 955px;
	line-height:22px;
	border-bottom:3px #F2F2E6 solid;
	border-top:5px #F2F2E6 solid;
	padding: 0px 0px 5px 5px;
	background: #E5E5E5;
}

#trace_box p {
	display:inline;
	float:left;
	width:100%;
	min-height: 30px;
	margin: 0px 5px 0px -12px;
	padding-left:20px;
	font-size:0.95em;	
	color: #841F27;
	}

#trace_box ul li:before {
	content: "\0020 \0020 \00BB \0020" !important;	/*"\0020 \0020 \00BB \0020"*/
	}

#trace_box ul, #trace_box li {
	display: inline;
	margin: 0;
	padding:0;
	line-height:1.9em;
	font-size:0.95em;
	color: #841F27;
	}	
	
#trace_box a {
	text-decoration:none;
} 	
/*
#trace_box a:hover {
		color: #841F27;
}
*/	

/*..........................................................................................................................................ADDED LATER Functions bar - Accessibility, translator, Share functions */

#functionsBar {
	display:block;
	float:left;
	width: 960px;
	height:25px;
	border-top:2px #F2F2E6 solid;
	border-bottom:5px #E5E5E5 solid;	
	padding: 0 0 5px 0;
	background: #F2F2E6 ;
}

.functionsBarBlock{
	display:inline-block;
	line-height:2em;
	float:left;
	margin:2px 12px 5px;
	padding:0;
}

.functionsBarBlock div{
	display:inline-block;
	overflow:visible;
	float:left;
	padding:0;
	margin:0;	
}

.font-sizer {height:16px;position:relative;}

.functionsBarBlock p, .functionsBarBlock span, .functionsBarBlock a {
	font-size:1em;
	color:#525252;

}

.decreaseFont a, a.zoomOut{
	font-size:1em;
	}

.increaseFont a, a.zoomIn {
	font-size:1.5em;
}

/* --------------------------------------------------------------------------- */

/* Page body area contains - left & right columns + content area - used to prevent wrapper background appearing in this section */
#pageBody {
	color: #333;
	border: none;
	width:960px; /*max width is 960px*/ 
	min-height:700px;  /* important to keep the website from shifting when the body height is less than 500px of content*/ 
	height:auto;
	float: left; 
	background: #F2F2E6 !important; 
				
}

.leftColumn { 
	color: #333;
	background:#C5CDD8;
	padding: 10px 3px 0px 0px;
	margin: 5px 0px;
	min-height: 0px;
	width: 330px;
	float: left; 
	-moz-border-radius:0px 8px 8px 0px;
	-webkit-border-radius:0px 8px 8px 0px;
	border-radius:0px 8px 8px 0px;
 
}

.leftColumn h4 {
	color:#E5E5E5;
	font-size:1.2em; /*1.333em;*/
	margin: 2px 0px 0px -20px;
	padding:5px 0;
	border-bottom:dotted 1px #E5E5E5;
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------Sub Menue--*/
.subMenu ul, .subMenu ol{

	/*white-space:pre-line;	*/
	display:block;
	line-height:1.7em;
	list-style:none;
	color: #333;
	padding:0px 0px 10px 30px;
	margin: 3px 0px 5px 0px;
	text-align:left;
	background: #C5CDD8;/*#FFF; /*#C6BE90; */	
}

.subMenu li {

	/*white-space:pre-line;	*/
	display:block;
	line-height:1.7em;
	list-style:none;
	color: #333;
	padding:2px 0px 0px 5px;
	margin: 2px 0px 0px -15px;
	text-align:left;
	background: #C5CDD8;/*#FFF; /*#C6BE90; */	
}


.subMenu li a:link, .subMenu li a:visited {
	display:block;
	padding:2px 0px 0px 5px;
	margin: 2px 0px 0px -10px;
	-moz-border-radius:8px 0px 0px 8px;
	-webkit-border-radius:8px 0px 0px 8px;
	border-radius:8px 0px 0px 8px;	

}


.subMenu .selected, .subMenu li a:active {
	display:block;
	background:#FCFCFC;
	-moz-border-radius:8px 0px 0px 8px;
	-webkit-border-radius:8px 0px 0px 8px;
	border-radius:8px 0px 0px 8px;	
	
}
	
.subMenu li a:hover {	
	display:block;
	background: #E5E5E5;

}
	
/* 
Note there is an abosolute positioning of the content- this is to allow the layout to be done before the content div is put on the page
	allowing the layout section to be fixed and identical-> allows to be called by a java script function instead of having the structure 
	related HTML on the cntent pages 
*/	
	
#content { 
 float: left;
 color: #333;
 background: #F2F2E6;
 margin: 0px;
 padding: 5px;
 min-height: 500px;
 height:auto;
 width: 615px; /*was 615px, changed to 620px in 06 Aug 2012*/
 display: block;
}

#content ul {
	list-style-image: url('../_images/layout/lightBlueDot.png');
}

#content li ul {
	list-style-image: url('../_images/layout/lightBlueDash.png');
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------Right column  */
.rightColumn { 
 color: #000000; /*#333;*/
 background: #E6E6DC; /*#E6E6DC #C5CDD8;*/
 padding: 5px;
 min-height: 30px;
 height:auto;
 width: 300px;
 margin: 5px 0px 5px 5px;
 float: right; 
 -moz-border-radius:8px 0px 0px 8px;
 -webkit-border-radius:8px 0px 0px 8px;
 border-radius:8px 0px 0px 8px;

}

.rightColumn h2 {
	font-size:1.2em;
	font-weight:bold;
}

.rightColumn h3 {
	font-size:1em;
	font-weight:bold;
}

.rightColumn h3 {
	font-size:1em;
	font-weight:bold;
}

.rightColumn p {
	margin:15px 15px;
	line-height:1.5em;
	margin-bottom: 0.9em;
	/*color:#525252;*/	
}

.rightColumn li  {
	margin:0px 15px;
	line-height:1.5em;
}



/*-----------------------------------------------------------------------------------------------------creates particians within the body content*/
.sectionMajor{
	display:block;
	padding:0px;
	margin:0px;
	width:100%;
}

.sectionMajor h2{
		border-bottom:dashed 1px  #C5CDD8;
}

.sectionMinor{
	display:block;
	padding:0px;
	margin:0px;
	width:100%;
	border-bottom:dotted 1px  #C5CDD8;
}

.sectionMinor h3, .sectionMinor h4,{
		padding-left:15px;
}


/*--------------------------------------------------------------------------------------------------------------------------------------------------- Footer */
#footer { 
 width: 940px;
 font:0.9em Arial, Verdana, Helvetica, sans-serif;
 float: left;
 clear: both;
 height:auto;
 background: #354E71;
 padding: 10px;
 -moz-border-radius:0px 0px 8px 8px;
 -webkit-border-radius:0px 0px 8px 8px;
 border-radius:0px 0px 8px 8px;
 
}

#footer .fsection{
	display:block;
	height:auto;
	float:left;
	width:100%;
	margin:0 auto;
	overflow:hidden;	
}

#footer .fcolumn {
	display:inline-block;
	float:left;
	margin:0 1px;
	padding:0;
}

#footer ul {
	margin:5px 0px 5px 0px;
	padding:0;	
	display: inline;
	} 

#footer ul li {
	margin-left: 0;
	list-style: none;
	padding-bottom:2px;
	display: inline-block;
	}
#footer .fcolumn ul li{
	margin:0px 0 0 15px;

}	
		
#footer ul li.first {
	font-weight:600;
	}

#footer a, #footer p, #footer .fsection a{
	text-decoration:none;
	color:silver; 
	 }

#footer .fsection p{
	display:block;
	text-align: center ;
	color:silver;	
	padding:5px 2px 2px;
	margin:5px 0 0 0;
	border-top:1px silver dotted;
}
 


/*----------------------------------------------------------------------------------------------------------------------------------------- On-page navigations*/


/*------------------------------------trace box -----------------------------------*/
/*See ubove under traceBox */



/*-------------------------------------------------------------------------------------------------------------------- On page navigation - PgUp, Next Prev etc. -----*/
a.go_top:link, a.go_top:visited {
	display:block;
	float:right;
	padding:5px 25px 0px 10px;
	margin:10px 0px;
	text-align:right;
	text-transform: none;
	width:100%;
	font-size: 1em;
	background-position:right;
	background-repeat:no-repeat; 
	background-image: url('../_images/layout/upArrow.png');	

}


/*a.go_top:active {color:#7C2290;}
a.go_top:hover {text-decoration:none;color:#E77979;}*/

/* Navigation at the bottom of each section of the guide*/
a#bottomNavPrev {
	display:inline-block;
	padding:5px 10px 5px 70px;
	font-size:1em;
	line-height:1.5em;
	float: left; 
	background-position:left center;
	background-repeat:no-repeat; 
	background-image: url('../_images/layout/arrowPrev.png');

}


a#bottomNavNext {
	display:inline-block;
	padding:5px 70px 5px 10px;
	font-size:1em;
	line-height:1.5em;
	background-position:right center;
	background-repeat:no-repeat; 
	background-image: url('../_images/layout/arrowNext.png');	
	float: right; 
	 
}


/*------------ links style used for "go back" link --------------------*/
.go_back {
	display:block;
	padding:15px 15px 10px 30px;
	text-align:right;
	text-transform: uppercase;
	color: #CC0000;
	font-size: 0.9em;	
	}
}

a.go_back:link, a.go_back:visited {
	display:block;
	padding:15px 15px 10px 30px;
	text-align:right;
	text-transform: uppercase;
	color: #CC0000;
	font-size: 0.9em;
	/*background: url('../_images/layout/go_top.gif') no-repeat 3px 50%;*/
}


a.go_back:active {color:#7C2290;}
a.go_back:hover {text-decoration:none;color:#E77979;}
/* ------------------- */

/* ---------------------------------------------------------------------------------------------------------------------------------- special disaplay styles */


.makeUnclickable div{
		
}

.superscript { vertical-align: super; }

/*----------------------------------------------------------------------------------------------------------------------------------- Displaying Contact details */

.contact_tel {
	display:inline-block;		
	background:url(../_images/layout/icon_telephone.png) no-repeat 3px 50%;
	background-position:left  top;
	padding:0px 0px 0px 30px;
}
	
.contact_email {
	display:inline-block;		
	background:url(../_images/layout/icon_email.png) no-repeat 3px 50%;
	background-position:left  top;
	padding:0px 0px 0px 30px;
}

.contact_postal {
	display:inline-block;	
	background:url(../_images/layout/icon_envelope.png) no-repeat 3px 50%;
	background-position:left  top;
	padding:0px 0px 0px 30px;
}

.contact_street {
	display:inline-block;	
	background:url(../_images/layout/icon_house.png) no-repeat 3px 50%;
	background-position:left  top;
	padding:0px 0px 0px 30px;
}

.contact_fax {
	display:inline-block;
	background:url(../_images/layout/icon_fax.png) no-repeat 3px 50%;
	background-position:left  top;
	padding:0px 0px 0px 30px;
}

.contact_web {
	display:inline-block;	
	background:url(../_images/layout/icon_mouse.png) no-repeat 3px 50%;
	background-position:left  top;
	padding:0px 0px 0px 30px;
}

.google_map {
	display:block;
	float: right;
	padding:0px;
	font-size: 1em;	
}


/* ------------------------------------------------------------------------------------------------------------------------------- Info boxes - highlighted  etc.   */

.info_box {
	display:block;
	background:#D6E4E1; /*#E6F4BC; /* #D1E6E7 E2CF97  F0D78D #EFD279 #EAE6EE; /*#F8F7F8; /*#D8D0DD; /*#BDAEC6;  /*#F1F0FF; /*#F1E7F3; /*#F1E7F3; #E9E9E9*/
	float:left;
	width:570px;
	line-height:1.5em;
	min-height:50px !important;
	height:auto ;
	margin:20px 20px 20px 20px;
	padding:5px 5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}


.info_box h2 {
	font-size:1.4em;
	margin: :5px 0 0 16px;	
	}

.info_box h3 {
	font-size:1.3em;
	margin: :5px 0 0 16px;	
	}

.info_box a{
	font-size:1em;
	color:#3d0c49; /*#7C2290; /*#525252; /*#FFF;*/ 

	}
	
.info_box p{
	font-size:1em ;
	font-weight:300;
}

/*.info_box p.citation_text{
	font-size:0.9em ;
	line-height:1.3em;
	font-weight:200;			
}*/


.info_box a:link, a:visited  {text-decoration:underline;color:##76547D;outline:none;}
.info_box a:hover {text-decoration:underline;color:#E77979;}
.info_box a:active {color:#7C2290;}


/*-----------------------------------------------------------------------------------------------------------------------citation texts*/
p.citation_text {
	display:inline-block;
	font-size:0.9em ;
	line-height:1.2em;
	font-weight:200;
	width:93%;
	padding:5px;
	border:thin silver ridge;
}



/* ---------------------------------------------------------------------------------------------------------------------- Info boxes - small .   */
.info_box_small {
	display:block;
	background:#DEF0A6!important; /*E2CF97  F0D78D #EFD279 #EAE6EE; /*#F8F7F8; /*#D8D0DD; /*#BDAEC6;  /*#F1F0FF; /*#F1E7F3; /*#F1E7F3; #E9E9E9*/
	float:right;
	width:200px;
	line-height:1.4em;
	min-height:30px !important;
	height:auto ;
	margin:10px 5px 10px 15px;
	padding:3px 5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
.info_box_small h2 {
	font-size:1.2em;
	margin: :5px 0 0 16px;	
	}

.info_box_small a{
	font-size:1em;
	color:#3d0c49; /*#7C2290; /*#525252; /*#FFF;*/ 

	}
	
.info_box_small p{
	font-size:1em ;
	font-weight:300;
}


.info_box_small a:link, a:visited  {text-decoration:underline;color:##76547D;outline:none;}
.info_box_small a:hover {text-decoration:underline;color:#E77979;}
.info_box_small a:active {color:#7C2290;}



/*--------------------------------------------------------------------------------------------------------------------------------------------------------Sample Letters Etc.--------------*/

.sampleText {
	
	display:block;
	border:1px #C5CDD8 solid;
}

/*------------------------------------------------------------------------------------------------------------------------------------------------------- information tables ------*/
table.info {
	border:1px solid #4E90FE; 
	background:white;	
	border-collapse:collapse;
	margin:15px 15px;
	line-height:1.7em;
	white-space:normal;
	color:#525252;	
	width:95%;
	}
	
.info td {
	border:1px solid #4E90FE; 
	padding:15px;
	text-align:left;
	}

.info th {
	border:1px solid #4E90FE; 
	padding:15px;
	text-align:left;
	font-weight:700;
	}

.info th:first-child, .info td:first-child {
	width:210px;
	}

/* -------------------------------------*/
table.basic {
	border:none;
	margin:15px 15px;
	width:100%;				
}

table.basic caption, table.basic tbody {
	text-align:left;
	margin:0;
	padding:0;
}
.basic th:first-child, .basic td:first-child {
	width:300px;
	}


/* -------------------------------------*/
table.paraInfo {
	border:1px solid #4E90FE; 
	background:white;	
	border-collapse:collapse;
	margin:15px 5px;
	line-height:1.7em;
	white-space:normal;
	color:#525252;	
	width:auto;
	}
	
.paraInfo td {
	border:1px solid #4E90FE; 
	margin:0;
	padding:10px 5px;
	text-align:left;
	position:relative;
	vertical-align:top;	
	}

.paraInfo td p {
	padding:0px 0 10px;
	margin:0px;
}

.paraInfo th {
	border:1px solid #4E90FE; 
	padding:15px 10px;
	text-align:left;
	font-weight:700;
	}

.paraInfo th:first-child, .paraInfo td:first-child {
	width:210px;
	}
/* -------------------------------------*/

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- Devide page into columns */
/*
.columnedSection{
	display:block;
	height:auto;
	width:100%;
	padding:0;
	margin:0;
	float:left;
}

.2col_1 {	
	display:inline-block;
	float:left;
	width:150px !important;
	height:auto;
	font-weight:bold;
	padding:0 10px 0 10px;
	
}

.2col_2 {
	display:inline-block;
	float:left;
	width:150px;	
	padding:0 10px 0 10px;
}*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------- Functions -----------------*/

#siteSearch { /*This is the Google search box used for the site*/
	display:block;
	float:left;
	height: auto;
	width:102%;
}

#searchForm {
	/*this is the form elements used to allow visitors to enter the search string*/
	display:inline-block;
	float:right; 
	height:auto;	
	margin:2px 5px 0px 5px;			
}

/* -------------------------------------------------------------------------------------------------------------------------------  search input field. */
#searchField {
	float:left;
	width:300px;
	height:20px;
	margin-right:3px;
	margin-top:1px;
	line-height:1em;
	text-indent:1px;
	font-size:1em;
	color:#333;
	background: #fff;
	border:solid 1px #d9d9d9;
	border-top:solid 1px #c0c0c0;
	border-right:none;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- Search button */
#searchButton {
  	font-family: inherit;
	cursor:pointer;
	width:40px;
	height: 22px;
	color: transparent;
	background: #4d90fe url('../_images/layout/icon-search.png') no-repeat center;
	border: 2px solid #3079ED;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius:2px;
}


/* ==============================================================================================================================================================flow chart items */
/* 

Credit - http://css-tricks.com/snippets/css/css-triangle/ 

This is only used as a reference to create the chart objects - and easy-to-understand further development
The CSS classes 'learned' from this is right below this section
*/
.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-bottom: 5px solid black;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-top: 20px solid #f00;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	
	border-left: 60px solid green;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid blue; 
}


/* -----------------------------------------------------------------------------------------------------------------------------------------------------------*/

.chartArea {
	background-color:white;	
	height:960px;
	width:600px;
	margin:5px;
	padding:5px;		
}


.chartLine {
	display:block;
	height:100px;
	float:left;
	width:100%;
	border:10px 0px;
	padding:0px;
	
}
/*a blank line is used after each line! */
.blankLine {
	display:block;
	height:15px;
	float:left;
	width:100%;
	border:0px;
	padding:0px;
	background-color:white;
}

.columnHeading{
	height:25px;
	float:left;
	width:100%;
	border:0;
	overflow:hidden;
	color:#003399;
	background-color:white;
}

.columnHeading h1 {
	line-height:1.5em;			
	color:#003399;
}
/* ---------------------------------------------------------------------------------------------------------------------------------- for chart type A - this is the first of the two charts */
/* This chart reads left to right*/


/* -------------------------------------- textbox-1 */
.chartLine .chart-A-textbox-1 {				
	display:block;
	float:left;
	height:100%;
	width:100px;
	background-color:#336699;
	padding:0 10px;
	font-weight:500;
}

.columnHeading .chart-A-textbox-1 {				
	display:inline-block;
	float:left;
	width:160px;/*This will cover the width area taken by the arrow + box area*/
	background-color:white;
	
}

.columnHeading .chart-A-textbox-1 h1 { 
	color:#003399;
	font-weight:bolder;	
	font-size:1.1em;	
	line-height:1.2em;	
	border:none;
	padding:0 0 5px 0;
	margin:0px;	
	} 
	
.chart-A-textbox-1 h1 {
	color:white;
	text-decoration:none;
	font-weight:bolder;	
	font-size:1.1em;			
	line-height:1.8em;
	font-style:normal;
	border:none;
	position:relative;
	top:20%;
	text-transform:capitalize;	
}

.chart-A-textbox-1 a{
	color:white;
	text-decoration:underline;
	font-weight:bolder;	
	font-size:1.1em;			
	line-height:1.8em;
	font-style:normal;
	border:none;
	position:relative;
	top:20%;
	text-transform:capitalize;	
}

.chartLine .chart-A-rightArrow-1 {				
	display:inline-block;
	float:left;
	height:0px;
	width:0px;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;	
	border-left: 40px solid #336699;;	
	padding:0px;
}

/* -------------------------------------- textbox-2 */
.chartLine .chart-A-textbox-2 {				
	display:table;
	float:left;
	height:100%;
	width:145px;
	background-color:#60AAF3;
	color:black;
	padding:0 10px;
	font-weight:normal;

}

.columnHeading .chart-A-textbox-2{
	display:inline-block;
	float:left;
	width:205px; /*calculated for the arrow */	
	background-color:white;				
}
.columnHeading .chart-A-textbox-2 h1 { 
	color:#003399;
	font-weight:bolder;	
	font-size:1.1em;	
	line-height:1.2em;	
	border:none;
	padding:0 0 5px 0;
	margin:0px;	
	} 

.chart-A-textbox-2 h1{
	font-weight:bolder;	
	font-size:1.1em;	
	line-height:1.2em;
	color:black;	
	border:none;
	padding:0 0 5px 0;
	margin:0px;		
}

.chart-A-textbox-2 p{
	color:black;
	font-size:1em;			
	line-height:1.5em;
	font-style:normal;
	border:none;
	padding:0px;
	margin:0px;
  	display: table-cell; 
  	vertical-align: middle; 
			
}

.chartLine .chart-A-rightArrow-2 {				
	display:inline-block;
	float:left;
	height:0px;
	width:0px;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;	
	border-left: 40px solid #60AAF3;
	padding:0px;
}


/* -------------------------------------- textbox-3 */
.chartLine .chart-A-textbox-3{				
	display:table;
	float:left;
	height:100%;
	width:215px;
	background-color:#A4CEF8;
	color:black;
	padding:0 10px;
	font-weight:normal;

}

.columnHeading .chart-A-textbox-3{
	display:inline-block;
	float:left;
	width:200px;	
	background-color:white;	
				
}

.columnHeading .chart-A-textbox-3 h1 { 
	color:#003399;
	font-weight:bolder;	
	font-size:1.1em;	
	line-height:1.2em;	
	border:none;
	padding:0 0 5px 0;
	margin:0px;	

} 
	
	
.chart-A-textbox-3 p{
	color:black;
	font-size:1em;			
	line-height:1.5em;
	font-style:normal;
	border:none;
	padding:0px;
	margin:0px;
  	display: table-cell; 
  	vertical-align: middle; 
 	
}


/* ---------------------------------------------------------------------------------------------------------------------------------- for chart type b - this is the first of the two charts */
/* This chart reads top-down - five columns and three rows of content - each row has it's own stylinh => three styles of boxes - like in type A*/
.chartArea-B{
	background-color:white;	
	height:630px;
	width:600px;
	margin:5px;
	padding:5px;		
}

.Char_B_Column {
	width:110px;
	margin:0 5px;
	border-color:white;
	float:left;
}

/* ------------------------------ row 1*/
.Char_B_Column .chart-B-rightArrow-row1 {				
	display:inline-block;
	float:left;
	height:0px;
	width:0px;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;	
	border-top: 40px solid #336699;	
	padding:0px;
}

.Char_B_Column .chart-B-textbox-row1 {				
	display:inline-block;
	height:20px;
	width:100px;
	background-color:#336699;
	padding:0px 5px 20px 5px;
	margin:5px 0 0 0;
	font-weight:500;
}

.Char_B_Column .chart-B-textbox-row1 h1 {
	color:white;
	font-weight:bolder;
	text-align:center;	
	font-size:1.2em;			
	line-height:1.4em;
	font-style:normal;
	border:none;
	position:relative;
	top:20%;	
}

/* ------------------------------ row 2*/

.Char_B_Column .chart-B-rightArrow-row2 {				
	display:inline-block;
	float:left;
	height:0px;
	width:0px;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;	
	border-top: 40px solid #60AAF3;	
	padding:0px;
}

.Char_B_Column .chart-B-textbox-row2 {				
	display:table;
	vertical-align:top;
	height:160px;
	width:110px;
	background-color:#60AAF3;
	padding:1px 0px 1px 0px;
	margin:0;
}

.Char_B_Column .chart-B-textbox-row2 p {
	color:black;
	text-align:left;
	font-size:0.9em;			
	line-height:1.3em;
	font-style:normal;
	border:none;
	padding:none;
}


/* ------------------------------ row 3*/

.Char_B_Column .chart-B-textbox-row3 {				
	display:table;
	vertical-align:top;
	height:340px;
	width:110px;
	background-color:#A4CEF8;
	padding:0px 0px 2px 0px;
	margin:0;
}

.Char_B_Column .chart-B-textbox-row3 p {
	color:black;
	text-align:left;
	font-size:0.8em;			
	line-height:1.3em;
	font-style:normal;
	border:none;
	padding:none;
}

	

/* -------------------------------------------------------------------------------------------------------------------------------------------- section for customised popups -------------------- */

/*Credits (taken from) : http://jquerytools.org  

Date - August 02 2012

Issues and problem solving: https://github.com/jquerytools/jquerytools/issues

*/



  /* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
    display:none;
    background:transparent url('../_images/layout/black_arrow.png'); 
    font-size:1.2em;
    height:70px;
    width:160px;
    padding:25px;
    color:#eee;
}

/*Extra styling for tool-tipped words*/
.showTip {
	color: #CF5300; /*#841F27;*/
	display:inline;
	font-weight:500;
	cursor:help;			
}

/* the overlayed element simple_overlay*/
.simple_overlay{
 
    /* must be initially hidden */
    display:none;
    
    /* change display location from the default to display roughly in the center 
    margin:50%;*/
 
    /* place overlay on top of other elements */
    z-index:10000;
 
    /* styling */
    background-color:#333;
 
    min-width:250px;
    max-width:500px;
    min-height:50px;
    max-height:250px; /*originally 200px*/
    padding:35px 25px 20px 25px; /*originally 35px 30px 20px 30px;*/
    border:1px solid #666;
    
    /*Added - font colour!! */
 	color:white;
 
    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
}
 
/* close button positioned on upper right corner */
.simple_overlay .close {
    background-image:url('../_images/layout/dialog_close.png');
    background-repeat:no-repeat;
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------- END OF section for customised popups -------------------- */


/* ==================================================================================   Google CSS for Google Site Search ==================================================================  */


/**
 * Default theme
 *
 */
/* Slight reset to make the preview have ample padding. */
.cse .gsc-control-cse,
.gsc-control-cse {
  padding: 1%;
  width: 98%; 
  line-height:1.9em;

}
.cse .gsc-branding, /*------------------------------------------------------------------------------------------------ modified*/
.gsc-branding {
  display: none;
  background-position:right;
  
}
.cse .gsc-control-cse div,
.gsc-control-cse div {
  position: normal;
}
/* Selector for entire element. */
.cse .gsc-control-cse,
.gsc-control-cse {
  background-color: #F2F2E6; /*#ffffff;*/
  border: 1px solid;
  border-color: #ffffff;
}
.cse .gsc-control-cse:after,
.gsc-control-cse:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.cse .gsc-resultsHeader,
.gsc-resultsHeader {
  border: block;
}

.cse input.gsc-search-button
{
  font-family: inherit;
  color: #000000;
  text-shadow: 0 1px 2px #FFFFFF;
  background-color: #CECECE;
  border: 1px outset;
  border-color: #666666;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

/* ---------------------------------------------------------------------------------------------------------- Input button has different styling from Google original */
input.gsc-search-button
{
  	font-family: inherit;
	cursor:pointer;
	width:45px;
	height: 25px;
	color: transparent;
	background: #4d90fe url('../_images/layout/icon-search.png') no-repeat center;
	border: 1px solid #3079ED;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius:2px;
}

/* --------------------------------------------------------------------------------------------------------.gsc-input class added to original Google  */
.gsc-input {
	float:left;
	width:550px;
	height:20px;
	margin-right:3px;
	padding-right:3px;
	line-height:1em;
	text-indent:0px;
	font-size:1em;
	color:#333;
	background: #fff;
	border:solid 1px #d9d9d9;
	/*border-top:solid 1px #c0c0c0; */
	border-right:none;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius:2px;

}

input.gsc-input {
  padding: 1px 6px;
  border: 1px solid #DDD;
  width: 100% !important; /*this over-rides googles setting for 99% width - which leaves a gap when displayed.*/
}


/* Inactive tab */
.cse .gsc-tabHeader.gsc-tabhInactive,
.gsc-tabHeader.gsc-tabhInactive {
  border-bottom: none;
  color: #666666;
  background-color: #e9e9e9;
  border: 1px solid;
  border-color: #e9e9e9;
  border-bottom: none;
}
/* Active tab */
.cse .gsc-tabHeader.gsc-tabhActive,
.gsc-tabHeader.gsc-tabhActive {
  background-color: #FFFFFF;
  border: 1px solid;
  border-top: 2px solid;
  border-color: #e9e9e9;
  border-top-color: #FF9900;
  border-bottom: none;
}
/* This is the tab bar bottom border. */
.cse .gsc-tabsArea,
.gsc-tabsArea {
  margin-top: 1em;
  border-bottom: 1px solid #e9e9e9;
}
/* Inner wrapper for a result */
.cse .gsc-webResult.gsc-result,
.gsc-webResult.gsc-result {
  padding: .25em;
  border: 1px solid;
  border-color: #ffffff;
  margin-bottom: 1em;
}
/* Result hover event styling */
.cse .gsc-webResult.gsc-result:hover,
.gsc-webResult.gsc-result:hover {
  border: 1px solid;
  border-color: #FFFFFF;
}
/*Promotion Settings*/
/* The entire promo */
.cse .gs-promotion,
.gs-promotion {
  background-color: #FFFFFF;
  border: 1px solid;
  border-color: #336699;
}
/* Promotion image */
.cse .gs-promotion .gs-promotion-image,
.gs-promotion .gs-promotion-image {}
/* Promotion links */
.cse .gs-promotion a.gs-title:link,
.gs-promotion a.gs-title:link,
.cse .gs-promotion a.gs-title:link *,
.gs-promotion a.gs-title:link *,
.cse .gs-promotion .gs-snippet a:link,
.gs-promotion .gs-snippet a:link {
  color: #0000CC;
}
.cse .gs-promotion a.gs-title:visited,
.gs-promotion a.gs-title:visited,
.cse .gs-promotion a.gs-title:visited *,
.gs-promotion a.gs-title:visited *,
.cse .gs-promotion .gs-snippet a:visited,
.gs-promotion .gs-snippet a:visited {
  color: #0000CC;
}
.cse .gs-promotion a.gs-title:hover,
.gs-promotion a.gs-title:hover,
.cse .gs-promotion a.gs-title:hover *,
.gs-promotion a.gs-title:hover *,
.cse .gs-promotion .gs-snippet a:hover,
.gs-promotion .gs-snippet a:hover {
  color: #0000CC;
}
.cse .gs-promotion a.gs-title:active,
.gs-promotion a.gs-title:active,
.cse .gs-promotion a.gs-title:active *,
.gs-promotion a.gs-title:active *,
.cse .gs-promotion .gs-snippet a:active,
.gs-promotion .gs-snippet a:active {
  color: #0000CC;
}
/* Promotion snippet */
.cse .gs-promotion .gs-snippet,
.gs-promotion .gs-snippet,
.cse .gs-promotion .gs-title .gs-promotion-title-right,
.gs-promotion .gs-title .gs-promotion-title-right,
.cse .gs-promotion .gs-title .gs-promotion-title-right *,
.gs-promotion .gs-title .gs-promotion-title-right * {
  color: #000000;
}
/* Promotion url */
.cse .gs-promotion .gs-visibleUrl,
.gs-promotion .gs-visibleUrl {
  color: #008000;
}
/* Style for auto-completion table
 * .gsc-completion-selected : styling for a suggested query which the user has moused-over
 * .gsc-completion-container : styling for the table which contains the completions
 */
.gsc-completion-selected {
  background: #D5E2FF;
}
.gsc-completion-container {
  font-family: Arial, sans-serif;
  font-size: 13px;
  position: absolute;
  background: white;
  border: 1px solid #666666;
  margin-left: 0;
  margin-right: 0;
  /* The top, left, and width are set in JavaScript. */
}

/* Full URL */
.gs-webResult div.gs-visibleUrl-short {
  display: none;
}
.gs-webResult div.gs-visibleUrl-long {
  display: block;
}

/* ==================================================================================  / Google CSS for Google Site Search ==================================================================  */