/*EIFY global CSS 2015 V01. Andrew Quicke @ Clearsite P/L. www.clearsite.com.au tel: 61 2 4751 3030. Last edit date: 160525.*/
 
@charset "utf-8";

/**************************** HTML elements (must define before any media queries) ****************************/
/*typography notes:*/

/* base font size set in pixels in html{}. Scaling factors for sections then set in REMS (e.g. in body{}, in media queries for body{}, in root styles for navbar and footer), font sizes and margins then set in ems except for vertical spacing between text blocks, which is applied as margin-bottom set in REMS for a consistent value regardless of text height. ¬ Margin-bottom values thus need to be re-defined along with rem values for in-module scaling. ¬ Fonts sizes can be scaled globally (from html{}), or by section (header, footer, body) or specific container (by setting a rem-based font-size for the container). Proportions set by text element styles with em values.  */


	/* common HTML elements (all settings EXCEPT vertical spacing) */

		html {
			/*from bootstrap */
			-webkit-text-size-adjust: 100%;
			-ms-text-size-adjust: 100%;
			/*base typography - base scale in pixels, will be rems and ems thereafter */
			font-family:  'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; 
			font-size: 16px; /*Change this and ALL text scales proportionally*/
			line-height: 1.5;
			font-weight:300; 
			min-height: 100%; position: relative; /*160401: added for wallpaper to enable DIV to be set to PAGE height*/
		}
		
		body {	
			padding-top: 80px; /* require padding for fixed navbar */
			margin: 0;
			/*base typography - rem size based on pixel size defined in html{} */
			font-size: 1rem; /* older browsers will fallback to html{font-size:[n]px} as base value */
			line-height: 1.5;
			color: #3c3c3c; /*default color for all text */
			height: 100%; /*160401: added for wallpaper to enable DIV to be set to PAGE height*/
		}
		
		p {
			font-family:  'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; 
			font-size: 1.1em;
			line-height: 1.5;
			font-weight:300;
			margin: 0;
			padding: 0;
		}
		
		address {
			color:#2D5596;
		}
		
		hr {
			border: 0;
			border-top: 1px solid rgba(0,0,0,0.15);
		}
			
		h1,
		.h1 {
			font-family: 'Oswald', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-transform:uppercase;
			letter-spacing: .25em;
			font-size: 2.5em;
			line-height: 1.5;
			font-weight: 400;
			margin: 0;
			padding: 0;
		}
		
		h2,
		.h2 {
			font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-family: 'Oswald', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-transform: uppercase;
			font-style: normal;
			letter-spacing: .1em;
			font-size: 2.25em;
			line-height: 1.1;
			font-weight: 300;
			margin: 0;
			padding: 0;
		}
		
		h3,
		.h3 {
			font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 2em;
			line-height: 1.15;
			font-weight: 800;
			margin: 0;
			padding: 0;
		}
		
		h4,
		.h4 {
			font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 1.75em;
			line-height: 1.2;
			font-weight: 400;
			margin: 0;
			padding: 0;
		}
		
		h5,
		.h5 {
			font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 1.5em;
			line-height: 1.3;
			font-weight: 600;
			margin: 0;
			padding: 0;
		}
		
		h6,
		.h6 {
			font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 1.2em;
			line-height: 1.5;
			font-weight: 600;
			margin: 0;
			padding: 0;
		}
		
		ul {
			font-family:  'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; 
			font-size: 1.1em;
			line-height: 1.5;
			font-weight:300;
			list-style:disc;
			padding-left: 20px;
		}
		
		ul ul{
			list-style: circle;			
		}
		
		ol {
			font-family:  'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; 
			font-size: 1.1em;
			line-height: 1.5;
			list-style:decimal-leading-zero;
			font-weight:300;
		}
		
		strong {
			font-weight: bolder;
		}
		
		pre {
			font-size: 1.1em;
			line-height: 1.5;
			font-weight: normal;
			font-family: 'Inconsolata', Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;		
		}
		
		/* default links*/
			a,
			a:link,
			a:visited {
				color:#00AFEB;
				font-weight: bolder;
				text-decoration: none;
				border-bottom: 1px #00AFEB dotted;
			}
			
			a:hover,
			a:focus,
			a:active {	
				color:#FFFFFF;	
				text-decoration: none;
				background-color:#00AFEB;
				border-bottom: none;
			}
			
		/* inverse link styles */
			.link-inverse:link,
			.link-inverse:visited {
				color:#C8F0FF;
				text-decoration: none;
				border-bottom: 1px #C8F0FF solid;			
			}
			
			.link-inverse:hover,
			.link-inverse:active {	
				color:#00AFEB;		
				text-decoration: none;
				background-color:#FFFFFF;
				border-bottom: none;
			}
			
		/* FORMS */
		/* assuming all forms will be bootstrap styles so NOT formatting all HTML form styles to work standalone*/
		/* only modifying styles that are inherited by the bootstrap forms*/
	
			input {
			}
			
			input[type="text"] {
			}
			
			input[type="password"] {
			}
			
			input[type="number"] {
				background-color: #FF00FF;
			}
			
			input[type="radio"] {
			}
			
			input[type="checkbox"] {
			}
			
			input[type="file"] {
			}
			
			label {
				font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-weight:400;				
			}
			
			select {
			}
			
			select[multiple]{
			}
			
			fieldset {
				background-color: rgba(255,255,255,0.25); /* slightly ligher than background */
				border-radius: 8px 8px 8px 8px;
				border: 1px solid rgba(0,0,0,0.15);	 /* slightly darker than background */
				padding: 12px;
				margin-bottom: 1em;
			}
			
			legend {
				width: auto; /*label no wider than it needs to be so fieldset border will meet edge of text*/
				background-color: #FFFFFF;
				border-radius: 8px 0px 8px 0px;
				box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
				border: 1px solid rgba(0,0,0,0.15);	 /* slightly darker than background */
				margin: 0;
				padding: 8px 12px 8px 12px;
				font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-size: 1em;
				line-height: 1.5;
				font-weight: 400;			
			}
			
	
	

		/* TABLES */
		/* ruling lines between rows use border-bottom with partially transparent black so they're visible regardless of the container colour*/
		/* default alignment for everything is left-aligned. */ 
		
		
			table {
				width:100%;
				margin-bottom: 20px; /*same as boostrap for consistency*/
				background-color: transparent;
				font-family:  'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; 
				font-size: .9rem; /* older browsers will fallback to html{font-size:[n]px} as base value */
				font-weight: 300;
				line-height: 1.25;
				border-style:none;	
	
			}
			
			tbody {
				/* move along, nothing to see here. All action in the TD's*/	
			}
			
			tfoot {
				font-weight: 600;	
			}
			
			/* common table cell & row headers */
			td,
			th[scope=row] {
				background-color:transparent;
				vertical-align:top;
				padding: 8px;
				border-bottom: 1px solid rgba(0,0,0,0.15);
			}
			
			/* table headers and <td>'s in table headers*/
			thead,
			thead td {
				/* no borders on table header or any <td's> in table header*/
				/* all other formatting action in the specific row and column scope TH's*/
				border: none;	
			}
			
			
			/*common table header attributes*/
			th{
				padding: 8px;
				text-align:left;				
			}
			
			/*column headers only*/
			th[scope=col]  {
				background-color:#00AFEB; /* header backgrounds set here and not in thead{} to allow for transparent borders*/
				background-clip:padding-box; /* clips background to padding to allow for transparent borders*/			
				border-radius: 8px 0px 8px 0px;
				border: none;
				border-right-style:solid;
				border-right-width: 2px;
				border-right-color:rgba(255,255,255,0.0);
				vertical-align: bottom;
				font-weight: 400;
				color: #FFFFFF;
			}
			
			/*row headers only*/
			th[scope=row] {
				font-weight: 600;
				color: #00AFEB;
			}
			
			caption {
				font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
				color: #00AFEB;
				font-size: 1.1em;
				line-height: 1.5;
				font-weight: 600;
				margin: 0;
				padding: 0;
				padding-left: 8px;
			}
			
			caption:before {
				font-family: 'Glyphicons Halflings';
				font-size: 75%;;
				content: "\e080" ; 
			}
			
			/*get rid of spacing after text elements when within tables*/
			td > h1,
			td > h2,
			td > h3,
			td > h4,
			td > h5,
			td > h6,
			td > h7,
			td > p {
				margin-bottom: 0;
			}
			
			/* EIFY SPECIAL TABLE styles*/
			
			/* table-simple: less decorative table style, no ruling lines, no header backgrounds. Works in panels or without */
			
				.table-simple th[scope=col],
				.panel .table-simple th[scope=col] {
					background-color: transparent; /* header backgrounds set here and not in thead{} to allow for transparent borders*/
					background-clip:padding-box; /* clips background to padding to allow for transparent borders*/			
					border-radius: 0px;
					border: none;
					vertical-align: bottom;
					font-weight: 400;
					color: #282828;
				}
				
				.table-simple tr td,
				.table-simple thead tr td,
				.table-simple thead tr th,
				.table-simple tbody tr td,
				.table-simple tbody tr th,
				.table-simple tfoot tr td,
				.table-simple tfoot tr th {
					background-color: transparent;
					padding: 4px 12px 4px 0px; /*less vertical spacing on these*/
					vertical-align:top;
					border: none;
				}
				
	
				/*get rid of spacing above table headers trick (used when tables within panels)*/
				.panel .table-simple thead:before {
					content:normal;
				}
	
			/* table header styling variations  */

				.table-header-tabstyle th {
					border-radius: 8px 8px 0px 0px;			
				}
				
				.table-header-rectangle th {
					border-radius: 0px 0px 0px 0px;			
				}
			
		

/**************************** VERTICAL SPACING for text blocks (HTML elements, bootstrap and custom classes) ****************************/

	/* based on REM value (set in body{}) so equal margin for all elements (not based on font-size as em's would be)*/
	
	p, ul, ol, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, address, hr, .lead, caption {
		margin-top: 0;
		margin-bottom: 0.8rem;
	}

	
/*************************** spacing & alignment classes (use on bootstrap containers + general purpose) ****************************/

	/*VERTICAL SPACING*/

		/*add padding to the top a container so text isn't flush with the top. Use padding rather than margin so as not to extend container*/
		/*Text blocks all have bottom margins so an equal amount has to be applied to the top of the container as padding*/
		/*class named to express scale of margin applied relative to the margin-bottom value of text blocks (151019: default 0.8 rem) */
		/*e.g. if margin-bottom is 0.8rem then .pad_T1 gives padding-top: 0.8rem, and .pad_B1 gives padding bottom 0.0rem*/
		/*use in conjunction for top and bottom bottom padding. */
		/*Normal paragraphs in a contains should have .pad_T1 only. For extra spacing around titles use muliplied padding - e.g. .pad_T2 and .pad_B1/
	
		/*single spacing for normal paragraph text blocks*/
		.pad_T1 {
			padding-top: 0.8rem;
		}
		
		/*double spacing above, single spacing below for headline-only blocks*/
		.pad_T2 {
			padding-top: 1.6rem;		
		}
		
		.pad_B1 {
			padding-bottom: 0.8rem;
		}
		
		/*margin-removal (not padding) e.g. use for bullet points continuing across columns*/
		.pad_B0 {
			margin-bottom: 0rem;	
		}
		
		/*special cases*/
		.pad_B2 {
			padding-bottom: 1.6rem;
		}
	
	/*VERTICAL ALIGNMENT*/
	
		/*align content the bottom of a column*/	
		/*NOTE: not yet done.*/


/**************************** colour styles ****************************/
/* note: originally tried using CSS variables but abandoned due to browser support issues*/

	.bkg_col_wt {background-color: #FFFFFF;}
	.col_wt {color:#FFFFFF;}
	
	.bkg_col_eify_blue {background-color: #2d5596;}
	.col_eify_blue {color: #2d5596;}
	.border_col_eify_blue {border-color: #2d5596 !important;;}
	
	.bkg_col_eify_cyan {background-color: #00afeb;}
	.col_eify_cyan {color: #00afeb;}
	.border_col_eify_cyan {border-color: #00afeb !important;}
	
	.bkg_col_eify_blue_mid {background-color: #4178d2;}
	.col_eify_blue_mid {color: #4178d2;}
	
	.bkg_col_GB_light {background-color: #8CB4C8;}
	.col_col_GB_light {color: #8CB4C8;}
	
	.bkg_col_GB_mid {background-color: #557887;}
	.col_col_GB_mid {color: #557887;}
	
	.bkg_col_G240 {background-color: #F0F0F0;}
	.col_G240 {color: #F0F0F0;}
	
	.bkg_col_G230 {background-color: #e6e6e6;}
	.col_G230 {color: #e6e6e6;}
	
	.bkg_col_G220 {background-color: #dcdcdc;}
	.col_G220 {color: #dcdcdc;}
	.border_col_G220 {border-color: #dcdcdc !important;}
	
	.bkg_col_G200 {background-color: #c8c8c8;}
	.col_G200 {color: #c8c8c8}
	.border_col_G200 {border-color: #c8c8c8 !important;}
	
	.bkg_col_G160 {background-color: #a0a0a0;}
	.col_G160 {color: #a0a0a0}
	
	.bkg_col_G130 {background-color: #828282;}
	.col_G130 {color: #828282}
	
	.bkg_col_G100 {background-color: #646464;}
	.col_G100 {color: #646464}
	
	.bkg_col_G080 {background-color: #505050;}
	.col_G080 {color: #505050}
	
	.bkg_col_G060 {background-color: #3c3c3c;}
	.col_G060 {color: #3c3c3c}
	
	.bkg_col_G040 {background-color: #282828;}
	.col_G040 {color: #282828}
	
	.bkg_col_danger {background-color: #DC0000;}
	.col_danger {color: #DC0000}
	
	.bkg_col_success {background-color: #6EB428;}
	.col_success {color: #6EB428}

	.bkg_col_warning {background-color: #F5960A;}
	.col_warning {color: #F5960A}

	.bkg_col_default {background-color: #E6E6E6;}
	.col_default {color: #E6E6E6}


/**************************** background wallpaper (currently webkit only) 160331 ****************************/

		
		.eify-wallpaper {
			/*by default make div containing wallpaper invisible. We'll make it visible only for webkit browsers*/
			visibility:hidden;			
		}
		

		/* wallpaper styling ONLY for webkit browsers */
		@media screen and (-webkit-min-device-pixel-ratio:0) {  
		/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */  
		  body { background:#ccc; }  
		  
			.eify-wallpaper {
				visibility:visible;
				background-repeat: repeat;
				top: 0;
				left: 0;
				z-index: 20; /*on top of content and special effects overlays*/
				pointer-events: none; /*disable capture of pointer events so objects below receive them*/				
				width: 100%;
				-webkit-mask-size: auto;
				-webkit-mask-position: center;
				-webkit-mask-image: url(/eify_shared_images/bkg/eify_wallpaper_MASK_lg.png);
				
			}
			
			/*.eify-wallpaper-lighten {*/
				/*!* first wallpaper layer, lightens darker panel backgrounds and doesn't appear over lighter panels *!*/
				/*!* position is fixed so pattern does not scroll with the page*!*/
				/*position:fixed;*/
				/*width: 100%;*/
				/*height: 100%;*/
				/*background-size: 600px 600px; !*background SVG tiling size*!*/
				/*background-image:url(/eify_shared_images/bkg/eify_network-wallpaper_V01_lighten.svg);*/
				/*mix-blend-mode: lighten;*/
				/*opacity: 1;				*/
			/*}*/
			
			/*.eify-wallpaper-darken {*/
				/*!* second wallpaper layer, darkens lighter panel backgrounds *!*/
				/*!* this wallpaper is set to match the PAGE height and scroll with the page (position: ABSOLITE) *!*/
				/*!* this requires html{min-height:100%; position:relative;} and body{height:100%;}*!*/
				/*!* plus setting top, bottom, left & right to 0 and overflow:hidden. Magic.*!*/
				/*position:absolute;*/
				/*bottom:0;*/
				/*right: 0;*/
				/*overflow: hidden; */
				/*min-height: 100%;*/
				/*background-size: 800px 800px; !*background SVG tiling size*!*/
				/*background-image:url(/eify_shared_images/bkg/eify_network-wallpaper_V01_darken.svg);*/
				/*mix-blend-mode: darken;*/
				/*opacity: .5;	*/
			/*}*/

			
			@media (max-width: 1400px) {
				/*hide wallpapers at smaller screen sizes*/
				.eify-wallpaper {
					visibility:hidden;			
				}			
			}
				
		}
	
		@supports (-ms-accelerator:true) {
			/*disable for MS Edge. NOT TESTED*/
			.eify-wallpaper {
				visibility:hidden;			
			}	
		}

/**************************** eify text & image styling ****************************/

	/** text callouts. Used in conjunction with standard colour styles**/
	
		.callout {
			border-radius: 12px 0px 12px 0px;
			font-weight: bolder;
			padding: 1em 1em 1em 1em;
			border: 2px solid #FFFFFF;
			box-shadow: 4px 4px 8px rgba(0,0,0,0.25);
		}
		
		/* framed titles in callouts (or elsewhere). */
			
			/* solid version with background framing */
			/* Use eify colour classes to set background/foreground colour but intended to be reversed*/
			.callout-title-solid {
				padding: 8px;
				border-top: 1px dotted #00AFEB;
				border-bottom: 1px dotted #00AFEB;
				border-radius: 8px 0px 8px 0px;
				line-height: 1;
			}
		
			/* intended for transparent background, ruling lines top and bottom.*/
			.callout-title-ruled {
				padding: 4px 0 4px 0;
				border-top: 1px dotted rgba(0,0,0,.25);
				border-bottom: 1px dotted rgba(0,0,0,.25);
				border-radius: 0px;
				line-height: 1;
			}	

		
		
	/** standard framing style for in-line images that are cropped to the edges (no alpha transparency around object)**/
		.image-frame {
			border-radius: 24px 0px 24px 0px;
			border: .5em solid #FFFFFF;
			box-shadow: 4px 4px 8px rgba(0,0,0,0.25);
		}

	/* custom text styles*/
	
		/* news title and associated expand/collapse button*/
		
			.news-title,
			.news-title a,
			.news-title a:link,
			.news-title a:visited {
				min-width: 100%;
				font-family:  'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-weight: normal;
				border-bottom: none;
				line-height: 1.5em;
				margin-right: 60px;	 /*space before .btn-expand so they don't clash*/
				padding-right: 60px; /*works in conjunction with above and negative margin on the button*/
			}
			
		
			.news-title a:hover,
			.news-title a:focus,
			.news-title a:active {	
				color:#FFFFFF;	
				text-decoration: none;
				background-color:#00AFEB;
				border-bottom: none;
			}
			
			.news-title .btn.btn-expand
			.news-title	.btn-expand,
			.news-title .btn-expand.collapse.in,
			.news-title .btn-expand.collapse,
			.news-title .btn.btn-expand.collapse {
				margin-top: .2em;
				margin-right: -60px;

			}

	/* special link styling*/
	
		/*icon links: for using glyphicons or other icon fonts as rollover links*/
		
			.eify-icon-link,
			.eify-icon-link:link,
			.eify-icon-link:visited {
				background-color:transparent;
				color: #00AFEB;
				border: none;
				text-decoration: none;			
			}
			
			.eify-icon-link:hover {
				background-color:transparent;
				color: #F5960A;
			}
			
			.eify-icon-link-inverse,
			.eify-icon-link-inverse:link,
			.eify-icon-link-inverse:visited {
				background-color:transparent;
				color: #FFFFFF;
				border: none;
				text-decoration: none;			
			}
			
			.eify-icon-link-inverse:hover {
				background-color:transparent;
				color: #00AFEB;
			}
	
		/*fix column width for icon links/buttons*/
		
			.eify-icon-td {
				width: 60px;
				text-align:center;
				vertical-align:middle !important;
			}
	
		/* document link */
		
			.eify-doc-link,
			.eify-doc-link:link,
			.eify-doc-link:visited {
				border: none;
				text-decoration: none;			
			}
			
			.eify-doc-link:hover {
				background-color:transparent;
				color: #F5960A;
			}
		
			.eify-doc-link:before {
				font-family: 'Glyphicons Halflings';
				content: "\e022";
			}
	
		/* view file link */	
		
			.eify-view,
			.eify-view:link,
			.eify-view:visited {	
				border: none;
				text-decoration: none;
			}
			
			.eify-view:hover {
				background-color:transparent;
				color: #F5960A;
			}
	
			.eify-view:before {
				font-family: 'Glyphicons Halflings';
				content: "\e003";
			}

		/* calendar link */
		
			.eify-calendar,
			.eify-calendar:link,
			.eify-calendar:visited {	
				border: none;
				text-decoration: none;
			}
			
			.eify-calendar:hover {
				background-color:transparent;
				color: #F5960A;
			}
	
			.eify-calendar:before {
				font-family: 'Glyphicons Halflings';
				content: "\e109";
			}

		/* view photo icon link */	
				
			.eify-photo,
			.eify-photo:link,
			.eify-photo:visited {	
				border: none;
				text-decoration: none;
			}
			
			.eify-photo:hover {
				background-color:transparent;
				color: #F5960A;
			}
		
			.eify-photo:before {
				font-family: 'Glyphicons Halflings';
				content: "\e060";
			}

/**************************** eify internal system specific ****************************/

	/* eify indicator / indicator columns */

		.eify-indicator-td {
			width: 40px;
			padding-left: 0px;
			text-align: center;
			vertical-align:middle !important;
		}
	
		.eify-indicator {
			color: #FFFFFF;
			text-align:center;
			height: 16px; 
			width:  16px;
			padding: 0;
			margin: 0;
			overflow:hidden;
			border-radius: 50%;
		}
		
	/* eify numbering / numbering columns */	
	
		.eify-numbering-td {
			font-size: 1em;
			width: 35px;
			vertical-align:middle !important;	
			font-family: 'Inconsolata', Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
		}
		
		.eify-numbering-td-wide {
			font-size: 1em;
			width: 50px;
			vertical-align:middle !important;	
			font-family: 'Inconsolata', Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
		}
	
	
/**************************** fade-in effects classes ****************************/

.fade-in-hide {
	/*set default opacity to fully visible - will change with script on page load (so will be visible by default if scripts blocked)*/
	/*original code started with opacity:0; then faded in the elements but I've changed it around for safety*/
    opacity:1; 
}

/* .fade-in-hide:before {
 	position: absolute;
	font-family: 'Glyphicons Halflings';
	z-index:+1;
	font-size: 2em;
	content: "\e134" " "; 
	opacity:1;
}  */

/**************************** design FX ****************************/

/* decorative effects applied to container by empty div within */
/* applied as two classes, the basic setup then the actual effect definition*/ 
	
	/*base classes set up positioning of div for effect */
	
		/* full-width horizontal effects. Requires parent to be position: relative; */ 	
		.eify-FX-top {
			z-index:10; /* on top of other background content, below any wallpaper overlay*/
			position:absolute;
			left: 0;
			right: 0;
			top: 0;		
		}
		
		.eify-FX-bottom {
			z-index:10; /* on top of other background content, below any wallpaper overlay*/
			position:absolute;
			left: 0;
			right: 0;
			bottom: 0;		
		}
	
	
	/* "Shine" effects. Gradient fills (transparent->white->transparent) with range of optional transparency levels*/
	/* naming: .eify-shine-H[pixel height]-[max opacity %] where "H" means "horizontal"*/
	
	.eify-shine-H5-25 {
			min-height: 5px;
			background-color:transparent; /*in case browser doesn't support gradients*/
			background: -webkit-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.25), rgba(255,255,255,0.00)); /* For Safari 5.1 to 6.0 */	
			background: -o-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.25), rgba(255,255,255,0.00)); /* For Opera 11.1 to 12.0 */
			background: -moz-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.25), rgba(255,255,255,0.00)); /* For Firefox 3.6 to 15 */
			background: linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.25), rgba(255,255,255,0.00)); /* Standard syntax */
		}
	
		.eify-shine-H5-50 {
			min-height: 5px;
			background-color:transparent; /*in case browser doesn't support gradients*/
			background: webkit-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.50), rgba(255,255,255,0.00)); /* For Safari 5.1 to 6.0 */	
			background: -o-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.50), rgba(255,255,255,0.00)); /* For Opera 11.1 to 12.0 */
			background: -moz-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.50), rgba(255,255,255,0.00)); /* For Firefox 3.6 to 15 */
			background: linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.50), rgba(255,255,255,0.00)); /* Standard syntax */
		}
	
		.eify-shine-H5-75 {
			min-height: 5px;
			background-color:transparent; /*in case browser doesn't support gradients*/
			background: webkit-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.75), rgba(255,255,255,0.00)); /* For Safari 5.1 to 6.0 */	
			background: -o-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.75), rgba(255,255,255,0.00)); /* For Opera 11.1 to 12.0 */
			background: -moz-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.75), rgba(255,255,255,0.00)); /* For Firefox 3.6 to 15 */
			background: linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.75), rgba(255,255,255,0.00)); /* Standard syntax */
		}
	
		.eify-shine-H5-100 {
			min-height: 5px;
			background-color:transparent; /*in case browser doesn't support gradients*/
			background: webkit-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,1.00), rgba(255,255,255,0.00)); /* For Safari 5.1 to 6.0 */	
			background: -o-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,1.00), rgba(255,255,255,0.00)); /* For Opera 11.1 to 12.0 */
			background: -moz-linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,1.00), rgba(255,255,255,0.00)); /* For Firefox 3.6 to 15 */
			background: linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,1.00), rgba(255,255,255,0.00)); /* Standard syntax */
		}



/*************************** BOOTSTRAP TYPOGRAPHY ****************************/

	.lead {
		font-weight: 400;
		font-size: 125%;
	}
	
	mark {
		background-color: #C8F0FF;
		border-radius: 4px;
		padding-left: 4px;
		padding-right: 4px;
		color: #000000;
	}
	
/*************************** BOOTSTRAP CONTAINERS & GRID - overrides and styling ****************************/
/* note: am declaring "position: relative" as bootstrap CSS does not declare any position type. This is required for absolute positioning of child elements */
	
	/*top level containers*/
	.container-fluid {
		/*box-shadow: 0px 2px 4px rgba(0,0,0,0.25) inset;*/
		position:relative;
	}
	
	.container {
		position:relative;
	}
	
		/** format container to remove left/right margins for both container and container fluid.  **/
		/** Use this for items like banner images where we don't want a left/right margin (especially for mobile**/
		/** apply to both the container fluid and any nested container which encapsulates the banner/full-width image or content**/

		.container-wide {
			padding-left: 0px;
			padding-right: 0px;
		}

	

	/*grid system*/
	.row {
		position:relative;
	}

/*************************** BOOTSTRAP PANELS ****************************/

	/* panel mechanics */
		.panel {
			font-size: 90%; /*all panel content is scaled down.*/
			box-shadow: 2px 2px 2px rgba(0,0,0,0.05);
			border: 1px solid rgba(0,0,0,0.15); 
		}
		
		.panel-body {
			padding: 10px 15px 0px 15px;
		}
		
		/*panel-body ruling lines above when: */
		/*after a table*/
		/*after a responsive-table */
		/*after another panel-body */
		/*after a table in a div*/
		.panel .table + .panel-body,
		.panel .table-responsive + .panel-body,
		.panel .panel-body + .panel-body,
		.panel div > table.table + .panel-body {
			border: none;
		 	border-top: 1px solid rgba(0,0,0,0.15);
		}
		
		/**** 160322 TESTING (not currently affecting anything) ****/		
		.panel > div > .table-responsive table.table + .panel-body{
			background-color:#FFF0FE;
			border-top: 1px solid rgba(0,0,0,0.15);
		}
		
		
		.panel-heading{
			padding: 10px 15px 0px 15px;
		}
		
		.panel-footer{
			background-color: rgba(240,240,240,0.5);
			border-top: 1px solid rgba(0,0,0,0.15);
			padding: 10px 15px 1px 15px; /*needs 1 px padding at bottom or screws up, falling way short. Why?*/
		}
	
		.panel-title {
			font-size: revert; /* doesn't work. Maybe one day... */
		}


	/* panel colour/styling: default panel &  bootstrap contextural alternatives */	

		.panel-default {
			border-color: rgba(0,0,0,0.15);
		}
		
		.panel-default > .panel-heading {
			background-color: #828282;
			border-color: transparent;
			color: #FFFFFF;
		}
		
		.panel-primary {
			border-color: rgba(0,0,0,0.15);
		}
	
		.panel-primary > .panel-heading {
			background-color: #00AFEB;
			border-color: transparent;
			color: #FFFFFF;
		}
		
		.panel-success {	
			border-color: rgba(0,0,0,0.15);
		}
		
		.panel-success > .panel-heading {
			background-color: #6eb428;
			border-color: transparent;
			color: #FFFFFF;
		}
		
		.panel-info {	
			border-color: rgba(0,0,0,0.15);
		}
		
		.panel-info > .panel-heading {
			background-color: #4178D2;
			border-color: transparent;
			color: #FFFFFF;
		}

		.panel-warning {	
			border-color: rgba(0,0,0,0.15);
		}
		
		.panel-warning > .panel-heading {
			background-color: #f5960a;
			border-color: transparent;
			color: #FFFFFF;
		}
		
		.panel-danger {	
			border-color: rgba(0,0,0,0.15);
		}
		
		.panel-danger > .panel-heading {
			background-color: #dc0000;
			border-color: transparent;
			color: #FFFFFF;
		}
		
		.panel-eify {	
			border-color: rgba(0,0,0,0.15);
		}
		
		.panel-eify > .panel-heading {
			background-color: #2D5596;
			border-color: transparent;
			color: #FFFFFF;
		}
		
	/* list groups in panels */
		
		.panel .list-group .list-group-item {
			border: none;
			border-top: 1px solid rgba(0,0,0,0.15);
		}
		
		/*no rule if after an eify ".panel-sub-heading" */
		.panel .panel-sub-heading + .list-group .list-group-item:first-child {
			border-top: none;
		}
		
		/* no margin below if list-group in a div */
		.panel > div .list-group {
		  margin-bottom: 0;
		}
	
	/* eify extensions */	
	
		.panel-sub-heading {
			padding: 10px 15px 0px 15px;
			border-bottom: 1px solid rgba(0,0,0,0.15);
			background-color: #F0F0F0;
		}
		
		.panel-body + .panel-sub-heading,
		.table-responsive + .panel-sub-heading,
		.table + .panel-sub-heading  {
			border-top: 1px solid rgba(0,0,0,0.15);			
		}
				

/*************************** BOOTSTRAP BUTTONS`and special-purpose buttons ****************************/
/* all buttons dark with white text and sharing same rollover colour (eify-cyan), except for "btn-link" and special-purpose buttons */
/* all buttons have a border to keep them all the same size, although most have border colour the same as the fill*/

	/* Bootstrap button classes*/

		/* base class */
		
			.btn {
				font-family: 'Titillium Web', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
				font-weight: 600;
				border-radius: 4px 4px 4px 4px;	
				border: 1px solid transparent;	
				background-clip:padding-box; /* clips background to padding to allow for transparent borders*/	
				color: #FFFFFF;
			}
			
			
		
		/* default appearances */
		
			.btn-default,
			.btn-default > a,
			a.btn-default:link,
			a.btn-default:visited {
				background-color: #828282; 
				color: #FFFFFF;
				border: 1px solid transparent;
			}
			
			.input-group .btn-default,
			.input-group .btn-default > a {
				border: 1px solid #828282;
			}
		
			.btn-primary,
			.btn-primary > a,
			a.btn-primary:link,
			a.btn-primary:visited  {
				background-color: #2D5596;
				color: #FFFFFF;
				border: 1px solid transparent;	
			}
			
			.input-group .btn-primary,
			.input-group .btn-primary > a {
				border: 1px solid #2D5596;
			}
			
			.btn-success,
			.btn-success > a,
			a.btn-success:link,
			a.btn-success:visited {
				background-color: #6eb428;
				color: #FFFFFF;
				border: 1px solid transparent;	
			}
			
			.input-group .btn-success,
			.input-group .btn-success > a {
				border: 1px solid #6eb428;	
			}
	
			.btn-info,
			.btn-info > a,
			a.btn-info:link,
			a.btn-info:visited {
				background-color: #4178D2;
				color: #FFFFFF;				
				border: 1px solid transparent;
			}
			
			.input-group .btn-info,
			.input-group .btn-info > a {
				border: 1px solid #4178D2;
			}
	
			.btn-warning,
			.btn-warning > a,
			a.btn-warning:link,
			a.btn-warning:visited {
				background-color: #f5960a;
				color: #FFFFFF;
				border: 1px solid transparent;
			}
			
			.input-group .btn-warning,
			.input-group .btn-warning > a {
				border: 1px solid #f5960a;
			}
			
			.btn-danger,
			.btn-danger > a,
			a.btn-danger:link,
			a.btn-danger:visited {
				background-color: #dc0000;
				color: #FFFFFF;
				border: 1px solid transparent;
			}

			.input-group .btn-danger,
			.input-group .btn-danger > a {
				border: 1px solid #dc0000;
			}
			
			.btn-link,
			.btn-link:visited,
			a.btn-link:link,
			a.btn-link:visited {
				background-color: transparent;
				border-color:transparent;
				color: #00AFEB;
				font-weight: bolder;
				text-decoration: none;
				border-bottom: 1px #00AFEB dotted;
			}
			
			.input-group .btn-link,
			.input-group .btn-link:visited {
				border: 1px #00AFEB solid;
			}
			

		/* btn appearanace modifiers */
			
			.btn-no-pad {
				padding-left: 0;
				padding-right: 0;
			}
		
		/* hover & focus appearances */
		/* includes focus for when .active class applied*/
			
			/**/
			.btn-default:hover,
			.btn-default:focus,
			.btn-default.active:focus,
			a.btn-default:hover,
			a.btn-default:focus,
			.btn-primary:hover,
			.btn-primary:focus,
			.btn-primary.active:focus,
			a.btn-primary:hover,
			a.btn-primary:focus,
			.btn-success:hover,
			.btn-success:focus,
			.btn-success.active:focus,
			a.btn-success:hover,
			a.btn-success:focus,
			.btn-info:hover,
			.btn-info:focus,
			.btn-info.active:focus,
			a.btn-info:hover,
			a.btn-info:focus,
			.btn-warning:hover,
			.btn-warning:focus,
			.btn-warning.active:focus,
			a.btn-warning:hover,
			a.btn-warning:focus,
			.btn-danger:hover,
			.btn-danger:focus,
			.btn-danger.active:focus,
			a.btn-danger:hover,
			a.btn-danger:focus {	
				background-color: #00afeb;
				color: #FFFFFF;
				border: 1px solid transparent;
				outline: none;
			}
			
			.btn-link:hover,
			.btn-link:focus,
			.btn-link:active,
			a.btn-link:hover,
			a.btn-link:active {	
				color:#FFFFFF;	
				text-decoration: none;
				background-color:#00AFEB;
				border-bottom: none;
				outline: none;
			}
			
			/*needs an outline if part of an input group*/
			.input-group .btn-default:hover,
			.input-group .btn-default:focus,
			.input-group .btn-primary:hover,
			.input-group .btn-primary:focus,
			.input-group .btn-success:hover,
			.input-group .btn-success:focus,
			.input-group .btn-info:hover,
			.input-group .btn-info:focus,
			.input-group .btn-warning:hover,
			.input-group .btn-warning:focus,
			.input-group .btn-danger:hover,
			.input-group .btn-danger:focus,
			.input-group .btn-link:hover,
			.input-group .btn-link:focus {	
				background-color: #00afeb;
				color: #FFFFFF;
				border: 1px solid #00afeb;
				outline: none;
			}
			
			
		/* active state and class appearances */ 
		/* when pressing we want to show the active state and ignore the hover */
		
			.btn-default:active,
			.btn-default:active:hover, 
			.btn-default.active, 
			.btn-default.active:hover,
			.open > .dropdown-toggle.btn-default,
			.btn-primary:active,
			.btn-primary:active:hover,
 			.btn-primary.active, 
			.btn-primary.active:hover,
			.open > .dropdown-toggle.btn-primary,
			.btn-success:active,
			.btn-success:active:hover, 
 			.btn-success.active, 
			.btn-success.active:hover,
			.open > .dropdown-toggle.btn-success,
			.btn-info:active,
			.btn-info:active:hover,
			.btn-info.active, 
			.btn-info.active:hover,		
			.open > .dropdown-toggle.btn-info,
			.btn-warning:active,
			.btn-warning:active:hover, 
 			.btn-warning.active, 
			.btn-warning.active:hover,
			.open > .dropdown-toggle.btn-warning,
			.btn-danger:active,
			.btn-danger:active:hover,
 			.btn-danger.active, 
			.btn-danger.active:hover, 
			.open > .dropdown-toggle.btn-danger {	
				background-color: #FFFFFF;
				box-shadow: none; /*override bootstrap default inner shadow*/
				color: #00afeb;
				border: 1px solid #00afeb;
				outline:none;
			}
		
		/* active class hover */
		
	
		/* buttons in button groups*/	
	
			.btn-group .btn {
				border: 1px solid transparent;	
			}
	
		/* special purpose buttons*/
		
			/*login button*/
			
				.btn-login,
				.btn-login > a {
					background-color: #E6E6E6;
					border: 1px solid #C8C8C8;			
					color: #2D5596;
				}
				
				.btn-login:hover,
				.btn-login:focus { 	
				}

			/*back button*/
				.btn-back {
					box-shadow: 1px 1px 2px rgba(0,0,0,0.1)
				}
				
				.btn-back:before{
					font-family: 'Glyphicons Halflings';
					content: "\e091";
					vertical-align: top;
				}
			


			/*help button (circle button)*/
			
				.btn-help { 
					display: block;
					visibility:visible;
					min-width: 26px;
					max-width: 26px;
					min-height: 26px; /*min-height required or bootstrap will squash me baby!*/
					max-height: 26px; /*max-height to keep things stable*/
					overflow:hidden;
					border-radius: 50%;	/*make circular button*/
					padding: 0 0 0 0;
					margin: 0;
					background-color:#FFFFFF;
					color: #00AFEB;
					outline: none;
					font-size: 20px;
					line-height: 20px;
				}
	
				.btn-help:focus {
					background-color: #00AFEB;
					color: #FFFFFF;
					border: 1px solid #FFFFFF;
					outline: none;				
				}
										
				.btn-help:hover,
				.btn-help:focus:hover {
					background-color: #00AFEB;
					color: #FFFFFF;	
					border: none;
					outline: none;				
				}
			
				.btn-help:active {
					background-color: #FFFFFF;
					color: #00AFEB;
					border: 1px solid #00AFEB;
					outline: none;
				}
				
				.btn-help:after{
					font-family: 'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
					font-weight: 700;
					content: "?";
				}
				
			/*sort button (for use in table headers)*/
			
				.btn-sort{ /*have to be more specific when .btn-expand is applied to a .btn*/
					width: 1.5em;
					padding: 0;
					margin: 0;
					border: none;
					outline: none;
					background-color: #FFFFFF;
					color: #00AFEB;
				}
				
				.btn-sort:after{
					font-family: 'Glyphicons Halflings';
					font-size: 0.75em;
					content: "\e150";
				}
	
				.btn-sort:focus {
					background-color: #00AFEB;
					color: #FFFFFF;
					border: none;
					outline: none;					
				}
										
				.btn-sort:hover,
				.btn-sort:focus:hover {
					background-color: #00AFEB;
					color: #FFFFFF;	
					border: none;
					outline: none;					
				}
			
				.btn-sort:active {
					color: #00AFEB;
					border: none;
					outline: none;	
				}

				
			/*search button*/
				
				.btn-search{
				}
				
				.btn-search:after{
					font-family: 'Glyphicons Halflings';
					content: "\e003";
					vertical-align: top;		
				}
		
			/*expand/collapse button (inbuilt icon) */
			
			/*the button utilises the .collapse state to define the appearance of the symbol within it*/
			/*the collapse state of the button is set by default to be the opposite of the target*/
			/*so when the button is "collapsed" it shows an up-arrow symbol to indicate that it will collapse the target*/
			/*when the button is not collapsed (.collapsed.in) it shows a down-arrow to indicate that it will expand the target */
			/*the code is designed to keep the button visible and looking the same regardless of whether it is collapsed or not*/
			/*to implement give the button an ID and set the data target to both itself and to the target to be collapsed/expanded*/
			/*e.g. <button class="btn btn-expand collapse in" type="btn01" id="thisButton" data-toggle="collapse" data-target="#panel01, #btn01" ></button> */
				
				
				/* common button appearance, applied to both collapsed and non-collapsed button states */
				/* sizing code to keep button visible despite bootstrap collapse (which adjusts height)*/
				/* measurements in pixels as relative measurements do not work properly after bootstrap resizes the object */

					.btn-expand,
					.btn-expand.collapse.in,
					.btn-expand.collapse,
					.btn.btn-expand.collapse { /*have to be more specific when .btn-expand is applied to a .btn*/
						display: inline-block; /* 160426: was "block" - keep an eye out for trouble! */
						visibility:visible;
						min-width: 26px;
						max-width: 26px;
						min-height: 26px; /*min-height required or bootstrap will squash me baby!*/
						max-height: 26px; /*max-height to keep things stable*/
						overflow:hidden;
						border-radius: 50%;	/*make circular button*/
						padding: 2px 0 0 0;
						margin: 0;
						background-color:#FFFFFF;
						color: #00AFEB;
						outline: none;
						font-size: 14px;
					}
					
					.btn-expand.collapse:after{
						font-family: 'Glyphicons Halflings';
						content: "\e260";
					}
					
						/*extension to btn-expand for use within text, displaying "read more" and "read less" labels*/
						/*this is still a method of collapsing/expanding DIV's rather than changing their length to truncate text/content*/

							/*apply this class to a div containing the button*/
							/*div is width of the btn-expand (a 26px square, enabling the circular rounding), position:absolute so that
							/*the absolute positioning of label is relative to this div and not the containing element*/
							/*note: there's no spacing after this control and it can appears over the top of following content*/
							/*use a bootstrap clearfix and/or .pad_T1 or similar to following content to apply vertical spacing if required*/
						
								.control-btn-more {
									position: absolute;
									display:inline-block;
									right: 0%;
									width: 26px;
									max-height: 26px;								
								}
								

							/*apply .btn-more class to the btn.btn-expand to get the "read more/read less" labels*/
						
								.btn-expand.btn-more:before {
									position:absolute;
									font-size: 1em; /*relative to the glyphicon button*/
									left: -5em;	/*should be approx 5 x "m' characters distance, scales with type*/
									color: #00AFEB;
								}
		
								.btn-expand.btn-more.collapse.in:before {
									content: "read more";
								}
								
								.btn-expand.btn-more.collapse:before {
									content: "read less";
								}


					
				/* class to apply to table cells <td> containing btn-expand*/
				
					.btn-expand-td {
						width: 50px;
						vertical-align:middle !important;
					}
				

				/* symbol appearance. Changes dependent on collapsed state*/
			
					/*up arrow indicates button will collapse target*/
					.btn-expand.collapse:after{
						font-family: 'Glyphicons Halflings';
						content: "\e260";
					}

					/*down arrow indicates it will expand the collapsed target)*/
					.btn-expand.collapse.in:after{
						font-family: 'Glyphicons Halflings';
						content: "\e259";
					}			

				/*rollover, active  and focus states the same for collapsed and non-"collapsed" button */
		
					.btn-expand:hover,
					.btn-expand:focus:hover,
					.btn-expand.collapse.in:hover,
					.btn-expand.collapse.in:focus:hover,
					.btn-expand.collapse:hover,
					.btn-expand.collapse:focus:hover,
					.btn.btn-expand.collapse:hover,
					.btn.btn-expand.collapse:focus:hover {
						background-color: #00AFEB;
						border: none;
						color: #FFFFFF;	
						outline: none;				
					}
				
					.btn-expand:active,
					.btn-expand.collapse.in:active,
					.btn-expand.collapse:active,
					.btn.btn-expand.collapse:active {
						background-color: #FFFFFF;
						color: #00AFEB;
						border: 1px solid #00AFEB;
						outline: none;
					}
					
					.btn-expand:focus,
					.btn-expand.collapse.in:focus,
					.btn-expand.collapse:focus,
					.btn.btn-expand.collapse:focus {
						background-color: #00AFEB;
						color: #FFFFFF;
						border: 1px solid #FFFFFF;
						outline: none;
					}

/*************************** BOOTSTRAP DROPDOWNS (button dropdowns and panel-header as dropdown toggle) *************************/

	.dropdown {
		
	}
	
	/* DROPDOWN HOVER */
	
		/* hover enabled at all screen sizes if class= ".hover-enabled-always"*/
		/* note: header menu and other items use ".hover-enabled" class which is set to allow hover-dropdown behaviour in desktop modes only*/
		.dropdown.hover-enabled-always:hover .dropdown-menu{ 
		 	display: block;
		}
	
	
	
	/* dropdown buttons */

		/* btn shape and base styling*/	
		
			.dropdown > .btn {
				border-radius: 4px 4px 0px 0px;	
				box-shadow: 2px 2px 2px rgba(0,0,0,0.05); /*shadow on buttons matches shadow on panels*/	
			}
		
		/*borders same colour as button bkg*/
		
			.dropdown > .btn.btn-default {
				border: 1px solid #828282;
			}
			
			.dropdown > .btn.btn-primary {
				border: 1px solid #2D5596;
			}
			
			.dropdown > .btn.btn-success {
				border: 1px solid #6eb428;
			}		
		
			.dropdown > .btn.btn-info {
				border: 1px solid #4178D2;
			}
			
			.dropdown > .btn.btn-warning {
				border: 1px solid #f5960a;
			}
			
			.dropdown > .btn.btn-danger {
				border: 1px solid #dc0000;
			}
	
	
	
	
		/*button active, open & rollover state*/
		
			.dropdown > .btn.btn-default:hover,
			.dropdown > .btn.btn-success:hover,
			.dropdown > .btn.btn-primary:hover,
			.dropdown > .btn.btn-info:hover,	
			.dropdown > .btn.btn-warning:hover,
			.dropdown > .btn.btn-danger:hover {
				background-color: #00AFEB;
				border-color: #00AFEB;
			}

			.dropdown > .btn.btn-default:active,
			.dropdown > .btn.btn-success:active,
			.dropdown > .btn.btn-primary:active,
			.dropdown > .btn.btn-info:active,
			.dropdown > .btn.btn-info.active,
			.dropdown > .btn.btn-warning:active,
			.dropdown > .btn.btn-danger:active {
				background-color: #FFFFFF;
				color: #00afeb;
				border: 1px solid 00afeb;
				outline: none;
			}

			.open > .dropdown-toggle.btn-default:hover,
			.open > .dropdown-toggle.btn-default:focus,
			.open > .dropdown-toggle.btn-default.focus,
			.open > .dropdown-toggle.btn-success:hover,
			.open > .dropdown-toggle.btn-success:focus,
			.open > .dropdown-toggle.btn-success.focus,
			.open > .dropdown-toggle.btn-primary:hover,
			.open > .dropdown-toggle.btn-primary:focus,
			.open > .dropdown-toggle.btn-primary.focus,
			.open > .dropdown-toggle.btn-info:hover,
			.open > .dropdown-toggle.btn-info:focus,
			.open > .dropdown-toggle.btn-info.focus,
			.open > .dropdown-toggle.btn-warning:hover,
			.open > .dropdown-toggle.btn-warning:focus,
			.open > .dropdown-toggle.btn-warning.focus,
			.open > .dropdown-toggle.btn-danger:hover,
			.open > .dropdown-toggle.btn-danger:focus,
			.open > .dropdown-toggle.btn-danger.focus {
				background-color:  #00afeb;
				color: #FFFFFF;
				border: 1px solid #00afeb;
				outline: none;
			}
	
		/*icon on button*/
		
			.dropdown > .btn.dropdown-toggle:after {
				content:"";
				font-family: 'Glyphicons Halflings';
				font-size: 75%;
				content: "\e258" " ";
			}

	/* dropdown menu styling*/
	
		.dropdown-menu, 
		.dropdown-menu > ul {
			border-radius: 0px 0px 8px 8px;
			box-shadow: 2px 2px 2px rgba(0,0,0,0.05);
			background-color: #FFFFFF;
			border: 1px solid #c8c8c8;
			margin: 0;
			padding: 0;
			font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-transform:none;
			text-decoration: none;
			font-size: 1.1em;
			line-height: 1.5;
			font-weight:300;
						
		}
		
		.dropdown-menu > li>a,
		.dropdown-menu > li>a:link {
			text-decoration:none;
			border-bottom:none;
			margin: 0px 0px 0px 0px;
			padding: 8px 12px 8px 12px;
			color: #00AFEB;
			border-bottom: 1px solid #c8c8c8;
		}
		
		.dropdown-menu > li:last-child a {
			border-radius: 0px 0px 8px 8px; /*rounded bottom corners to match shape of dropdown base*/
			border-bottom: none;
		}
		
		.dropdown-menu li>a:hover,
		.dropdown-menu li>a:focus {
			background-color:#00afeb;
			color: #FFFFFF;
			text-decoration:none;
			outline: 0;
		}
	
	/* special case: using panel-heading as a dropdown toggle */
	
		.panel .panel-heading.dropdown:hover {
			background-color: #00afeb;
			border: transparent;	
		}
	
	
	
/*************************** BOOTSTRAP FORMS ****************************/

	.form-control {
		border: 1px solid #C8C8C8;
		border-radius:4px;
		font-family: 'Inconsolata', 'Titillium Web', Consolas, "Lucida Console",  "Andale Mono",  "Lucida Sans Typewriter", Monaco, monospace, sans-serif;
		padding: 4px 4px 4px 4px;
		box-shadow:none;
	}
	
	.form-control:hover,
	.form-control:active,
	.form-control:focus {
		border: 1px solid #00afeb;
		box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
		outline:none;
	}
	
	.form-group{
	}
	
	.help-block {
		font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 90%;
		font-style:normal;	
	}
	
	.control-label {
	}
	
	.checkbox > label > input[type="checkbox"] {
		/*align checkboxes vertically with text label*/
		margin-top: 5px;
	}
	
	.radio > label > input[type="radio"] {
		/*align radio vertically with text labelt*/
		margin-top: 5px;
	}
	
	.form-inline .form-group {
		/* add some space below form groups within form-inline*/
		/* needed when multiple form groups on one line start to collapse */
		/* but before bootstrap collapses them to a single column*/
		margin-bottom: 15px;
	}
	
	
	
	/* fix indentation of collapsed inline checkboxes and radio buttons (otherwise indents are different between first and following items)*/
		.checkbox-inline,
		.checkbox-inline.checkbox-inline {		
		  margin-left: 0;
		  margin-right: 10px;
		}
		
		.checkbox-inline:last-child {
		  margin-right: 0;
		}
		
		.radio-inline,
		.radio-inline.radio-inline {		
		  margin-left: 0;
		  margin-right: 10px;
		}
		
		.radio-inline:last-child {
		  margin-right: 0;
		}

	
	
/*************************** BOOTSTRAP TABLES ****************************/

	/*bootstrap table bass class. Add to any table to make it a bootstrap table*/
	.table {
		background-color: transparent;
	}
	
	
	/*add alternate striping to tables*/
	.table-striped {
		
	}
	
	/*borders on all sides of the table and cells.*/
	.table-bordered {
		
	}
	
	/* Hover rows: Add .table-hover to enable a hover state on table rows within a <tbody>.*/
	.table-hover {
	}

		.table-hover > tbody > tr:hover {	
			background-color: rgba(0,0,0,0.05); /* was: #2D5596;*/
		}
	
		.table-hover > tbody > tr > td.active:hover,
		.table-hover > tbody > tr > th.active:hover,
		.table-hover > tbody > tr.active:hover > td,
		.table-hover > tbody > tr:hover > .active,
		.table-hover > tbody > tr.active:hover > th {
		  background-color: #2D5596;
		  color: #FFFFFF;
		}
		
	/* makes table more compact by cutting cell padding (bootstrap halves it's own default padding).*/
	.table-condensed {
		
	}
	
	/*bootstrap contextural classes for rows or cells. Allows styling of elements based on preset contexts */
	/*comment desciptions taken from bootstrap 3 documentation. */
	
		/* Applies the hover color to a particular row or cell (static) */
		.active {
		}
		
		/*Indicates a successful or positive action*/
		.success {
			
		}
	
		/*Indicates a neutral informative change or action*/	
		.info {
			
		}
	
		/*Indicates a warning that might need attention*/	
		.warning {
			
		}
	
		/*Indicates a dangerous or potentially negative action*/
		.danger  {
			
		}
	
	/* Responsive tables. Wrap any .table in .table-responsive to make them scroll horizontally on small devices (under 768px) */
	/* When viewing on anything larger than 768px wide, you will not see any difference in these tables. */
	/* refer to media queries section for framing of table for scrollable/mobile display*/

		.table-responsive {
			background-color: transparent;
		}
	
	/*formatting all the table cell types*/
	
		.table > thead > tr > th {
		  border-bottom: none; /* default is : 2px solid #ddd */
		}
		
		.table > thead > tr > th,
		.table > tbody > tr > th,
		.table > tfoot > tr > th,
		.table > thead > tr > td,
		.table > tbody > tr > td,
		.table > tfoot > tr > td,
		.table-responsive thead > tr > th,
		.table-responsive tbody > tr > th,
		.table-responsive tfoot > tr > th,
		.table-responsive thead > tr > td,
		.table-responsive tbody > tr > td,
		.table-responsive tfoot > tr > td {
			line-height: 1.25; /* default is: 1.42857143 */
			border-top: none; /* default is: 1px solid #ddd; */
		}
	
	/*************************** bootstrap tables within panels overrides/customisation ****************************/


	/* note: DON'T PUT TABLES WITHIN .panel-body, .panel-heading or .panel-footer*/
	/* also taking into account special eify .classes for panel content*/
	/* 160317: this is a complex mess, thanks to having to override so many specific bootstrap selectors*/
	/* might need a complete clean-up and overhaul at some point*/
	
		/* get rid of bootstraps border tops above tables */
		/* get rid of margin below tables */
		.panel table.table,
		.panel .panel-body + .table,
		.panel .table-responsive table.table,
		.panel .panel-body + .table-responsive,
		.panel .panel-body + .table-responsive > table.table {
			border-top: none;
			margin-bottom: 0px;
		}

		/* add padding and ruling line above topmost table elements*/
		/* was > caption which works too. */
		/* I can't think what other first-child element there might be but will allow for anything else occurring first up within the <table> */
		.panel table.table > :first-child, 
		.panel .table-responsive table.table > :first-child {
			padding-top: 10px;
			border-top: 1px solid rgba(0,0,0,0.15);
		}

		/*"padding" above tables*/

			/* add top padding for tables within a panel*/
			/* REMOVED - no longer adding space above all tables, only above <thead> if exists */
			.panel table.table,
			.panel .panel-body + .table,
			.panel .table-responsive > table.table,
			.panel .panel-body + .table-responsive > table.table {
				border-collapse:separate; /*otherwise can't add padding*/
				padding-top: 0px;
			}
			
			/* adding space above any table headers <thead> but can't use padding so adding a text element for spacing */
			.panel thead:before {
				font-size: 1;
				line-height: 1;
				content: "\00a0";
			} 
			
		
		/* add left padding to first column in panel tables so text lines up with other panel text*/
		.panel table.table * tr th:first-child,
		.panel table.table * tr td:first-child  {
			padding-left: 15px;
		}
		
		/* add right padding to last column in panel tables so text lines up with other panel text*/
		/* this one not really so necessary...*/
		.panel table.table * tr th:last-child,
		.panel table.table * tr td:last-child  {
			padding-right: 15px;
		}
		
		/* add rule above tables if: */
		/* 1) below panel-body content */
		/* 2) wrapped in div below panel-body content*/
		/* 3) if below another table */
		.panel .panel-body + table.table,
		.panel .panel-body + .table-responsive table.table,
		.panel .panel-body + div > table.table,
		.panel .panel-body + div > .table-responsive table.table,
		.panel table.table + table.table,
		.panel .table-responsive  + .table-responsive table.table,
		.panel .table-responsive + table.table,
		.panel table.table + div table.table  {		
			border-top: 1px solid rgba(0,0,0,0.15);
		}
					
	
		/* remove rule below last row of table, regardless of whether it's in tbody or tfoot */
		
			/* remove rule below last table row tds in tbody*/
			.panel table.table tbody tr:last-child th,
			.panel table.table tbody tr:last-child td {
				border-bottom: none;
			}
		
			/* remove rules below last row of tfoot*/
			.panel table.table tfoot tr:last-child th,
			.panel table.table tfoot tr:last-child td {
				border-bottom: none;	
			}
			
			/* add rule above first-row of footer to compensate for last row of tbody having no rule below it */
			.panel table.table tfoot tr:first-child th,
			.panel table.table tfoot tr:first-child td {
				border-top: 1px solid rgba(0,0,0,0.15);
			}
				
		
		/*column headers */
		.panel th[scope=col]  {
			background-color:#F0F0F0;	/* header backgrounds set here and not in thead{} to allow for transparent borders*/
										/* different header colours for tables when within panels*/	
			color: #282828;	
			border-radius: 4px 4px 4px 4px; /*different shape for headers when tables in panels*/
		}
		
		/*row headers*/
		.panel th[scope=row] {
			font-weight: 400;
			color: #282828;
		}
		
		.panel tfoot [scope=row] {
			font-weight: 600;
		}
		
		/*remove border-top on table if there's a caption in it*/
		/*NOT DONE */
		


/*************************** BOOSTRAP VISUAL ELEMENTS ****************************/

	/* change caret into a right-facing triangle */
	.caret {
		display: inline-block;
		width: 0;
		height: 0;
		margin-left: 4px;
		margin-bottom: 2px;
		vertical-align: middle;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 4px dashed;
		border-right: hidden;
	}


/*************************** EIFY FOOTER ****************************/

	/*base class*/
	.eify-footer {
		margin: 0;
		border-radius:0;
		border-top: 2px solid #FFFFFF;	
		box-shadow: 0px -3px 12px rgba(85,120,135, 0.25);
		background-color:#2D5596;
		/*base typography - rem size based on pixel size definedin html{} */
		/*also set margin-bottom for all text elements in REMs in "footer typography" section*/
		font-size: 0.75rem; 
	}
	
	/*eify logo/address panel */
	.eify-footer-panel-address {
		position: relative;
		margin: 0 0 0 0;
		padding: 10px;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		box-shadow: 2px 2px 16px rgba(0,0,0,0.5);
		background-color:#E6E6E6;
		font-size: 1.33em;
	}
	
	.eify-footer-logo {
		display: block;
		width: 100%;
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;		
	}

	/*login form*/	
			
		#eify-footer-login .form-group {
			padding: 0;
			margin: 0;
		}
		
		#eify-footer-login .form-group .form-control {
			margin: 0px 0 8px 0;
		}
	
		#eify-footer-login .form-group .btn, btn-default {
			margin: 0;
		}
		
		#eify-footer-login .form-control {
			background-color:#FFFFFF;
		}
		
		#eify-footer-login .form-control:hover,
		#eify-footer-login .form-control:active,
		#eify-footer-login .form-control:focus {
			box-shadow: none;
			box-shadow: 0px 0px 8px rgba(255,255,255,1.00);
			outline:none;
		}
	
	/*password recover form*/
	
		#eify-footer-pwd-recover .form-group .form-control {
			margin: 0px 0 8px 0;
		}
		

	/*footer typography */
	/*base font-size for this module is set in .eify-footer class in REM's*/

		.eify-footer address {
			font-family: 'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: .9em;
			margin: 0;
			text-align:center;
			font-weight: 600;
		}
	
		.eify-footer body {
			color: #FFFFFF;
		}
		
		
		.eify-footer p {
			font-family: 'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			color: #FFFFFF;			
		}
		
		.eify-footer ul {
			list-style:disc;
			font-family: 'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			color: #FFFFFF;
			padding-left: 15px;
		}
		
		.eify-footer ul a,
		.eify-footer ul a:link,
		.eify-footer ul a:visited {	
			color: #FFFFFF;
			text-decoration:none;
			border-bottom: none;
		}
		
		.eify-footer ul a:hover{	
			color:#7DDCFF;
			text-decoration:none;
			border-bottom: none;
			background:none;			
		}
		
		.eify-footer ul a:hover:after{
			font-family: 'Glyphicons Halflings';
			font-size: 75%;
			/*add glyphicon menu-right character after link on hover*/
			/*zero width space (\200B) allows symbol to break to new line rather than causing the whole last work to break */
			content: "\200B" "\e258"; 
		}
		
		.eify-footer h6 {
			border-bottom: 1px solid #FFFFFF;
			font-family: 'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-transform:uppercase;
			color: #FFFFFF;
			padding: 0 0 4px 0;
			margin: 0 0 .8em 0x;
		}
		
		.eify-footer h6 a:after{
			font-family: 'Glyphicons Halflings';
			font-size: 75%;
			content: "\e258" " ";
		}
		
		.eify-footer h6 a,
		.eify-footer h6 a:link,
		.eify-footer h6 a:visited {
			border-bottom: none;
			text-decoration:none;
			color: #FFFFFF;
		}
		
		.eify-footer h6 a:hover{	
			color:#7DDCFF;
			text-decoration:none;
			border-bottom: none;
			background:none;
		}
		
		/* VERTICAL SPACING for text blocks (HTML elements, bootstrap and custom classes) */
		/* based on REM value (set in .eify-footer{}) so equal margin for all elements*/
	
		p, ul, ol, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, address, hr, .lead, caption {
			margin-top: 0;
			margin-bottom: 0.75rem;
		}
		
	

/*************************** bootstrap INVERSE NAV BAR and menu element custom EIFY extension(s) & desktop sizing defaults ****************************/

/*navbar-inverse (dark bkg/light text)*/
	
	.navbar-inverse-eify {
		margin: 0;
		background-color: #2d5596;
		border-style: none;
		border-bottom: 2px solid #FFFFFF;
		border-radius:0;
		font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		/*fix height of navbar for desktop display*/
		min-height:80px;
		max-height:80px;
		/*base typography - rem size based on pixel size defined in html{} */
		font-size: 0.9rem;
		line-height: 1.5;
	}

/*container for all collapsable navrbar items*/

	.navbar-inverse-eify .container-fluid > .navbar-collapse {
		border:none;
		/*margin-left: 0px;
		margin-right: 0px;*/
	}

/*brand logo*/

	.navbar-inverse-eify .navbar-brand {
		margin: 0;
		padding: 2px 8px 0px 4px;
		float: left;
		min-height: 80px;
		border-bottom: 2px solid #FFFFFF;
	}

/*search control (revised style 150909)*/

	/*container for search required for mobile menu formatting*/
		.eify-search-panel {
			background:none;
			margin: 0;
			padding: 0;
		}

	/*form and form elements*/
		.navbar-inverse-eify .search-eify{
			margin: 0;
			padding: 22px 0 0 0; /*vertical positioning*/
			height: 100%;
			box-shadow:none;
		}
		
		.navbar-inverse-eify .search-eify .form-control{
			height: 34px;
			width: 200px;
			border: none;
			background-color: #FFFFFF;
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 0px;
			border-top-left-radius: 8px;
			border-top-right-radius: 0px;	
			font-family: 'Inconsolata', 'Titillium Web', Consolas, "Lucida Console",  "Andale Mono",  "Lucida Sans Typewriter", Monaco, monospace, sans-serif;
			font-size: 1em;
			color: #2d5596;
		}
		
		.navbar-inverse-eify .search-eify .btn-default{
			margin-right: 15px;
			height: 34px;
			width: 44px;
			color: #2d5596;
			border: none;
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 8px;
			border-top-left-radius: 0px;
			border-top-right-radius:8px;	
			background-color: #e6e6e6;
		}
		
		.navbar-inverse-eify .search-eify .btn-default:hover, 
		.navbar-inverse-eify .search-eify .btn-default:active, 
		.navbar-inverse-eify .search-eify .btn-default:focus  {
			border: none;
			background-color: #00afeb;
			color: #FFFFFF;
			outline: 0;
		}


/*top level menus & buttons*/

	.navbar-inverse-eify .navbar-nav > li {
		min-height: 80px;		
	}
	
	.navbar-inverse-eify .navbar-nav > li > a {
		/* OPT01: rounded rectangle backgrounds for rollovers, height of container just bigger than text, centered vertically on navbar */
		/*height: 50%;
		line-height: 50%;
		margin: 20px 0px 0px 0px;
		padding-left:12px;
		padding-right:12px;
		text-align: center;
		border-radius: 40px; /*that'll make a circular end*/
		
		/* OPT02: rectangular backgrounds for rollovers, full height of the nav bar */
		margin: 0px 0px 0px 0px;
		padding: 0px 8px 0px 8px;
		height: 78px;
		line-height: 78px;
		vertical-align: middle;
		
		/* common */
		font-size: 1em;
		font-weight: 400;
		color:#FFFFFF;
		text-decoration:none;
	}
	
	/* override <a> /link styling on top-level menu ONLY, to get rid of the dotted cyan bottom border*/
	/* dropdown-toggle idenfies only the top-most menu items. NOTE: this does not affect "Smart Menu" menus, which don't use dropdown-toggle */
	.navbar-inverse-eify .navbar-nav > li > a.dropdown-toggle,
	.navbar-inverse-eify .navbar-nav > li > a.dropdown-toggle:link,
	.navbar-inverse-eify .navbar-nav > li > a.dropdown-toggle:visited {
		border-style:none; /*otherwise link style adds bottom border*/
	}
	

/*top level menus & buttons - hover and focus states*/
	
	.navbar-inverse-eify .navbar-nav > li> a:focus,
	.navbar-inverse-eify .navbar-nav > li> a.focus,
	.navbar-inverse-eify .navbar-nav > li > a:hover,
	.navbar-inverse-eify .navbar-nav > li > a.hover {
		text-decoration: none;
		border-bottom: none;
		background-color: #00afeb;
		outline: 0;
	}
	

/*top level menus & buttons - active state (only visible during mousedown/press & hold) */

	.navbar-inverse-eify .navbar-nav > li > a:active  {
		text-decoration: none;
		border-bottom: none;
		background-color: #FFFFFF;
		color: #2d5596;
	} 

/*top level menus - open state (when menu displayed)*/

	/* 160209 previously was only: .navbar-inverse-eify .navbar-nav .open > a.dropdown-toggle {} */
	.navbar-inverse-eify .navbar-nav .open > a,
	.navbar-inverse-eify .navbar-nav > .open > a.dropdown-toggle,
	.navbar-inverse-eify .navbar-nav > .open > a:hover,
	.navbar-inverse-eify .navbar-nav > .open > a:focus {
		text-decoration: none;
		border-bottom: none;
		background-color: #4178d2;
		color: #FFFFFF;
	}

/* drop down menus */

	.navbar-inverse-eify .dropdown-menu,
	.navbar-inverse-eify .dropdown-menu > ul {
		/*top: 68px; vertical top of dropdown*/
		/*define font & text-tranform here as in some cases we have different font styling for top level buttons */
		font-family:'Titillium Web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-transform:none;
		font-size: 1em;
		margin: 0 0 0 0;
		padding: 8px 0px 8px 0px;
		border-radius: 0px 0px 8px 8px;
		border: none;
		text-decoration: none;
		border-bottom: none;
		background-color: #FFFFFF;
		color: #2d5596;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	}
		
	.navbar-inverse-eify .dropdown-menu li>a,
	.navbar-inverse-eify .dropdown-menu li>a:link{
		text-decoration:none;
		border-bottom:none;
		background:none;
		margin: 0px 0px 0px 0px;
		padding: 4px 12px 4px 12px;
		color: #2d5596;
	}
	
	.navbar-inverse-eify .dropdown-menu li>a:hover,
	.navbar-inverse-eify .dropdown-menu li>a:focus {
		text-decoration:none;
		border-radius:0px;
		color: #FFFFFF;
		background-color:#00afeb;
		outline: 0;
	}
	
	/* dropdown menu misc elements */

		.navbar-inverse-eify .dropdown-header {
			margin: 0px 0px 0px 0px;
			padding: 4px 12px 4px 12px;
			font-family: 'Oswald', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-transform:uppercase;
			font-size: 1em;
			letter-spacing:0.1em;
			font-weight:200;
			color:#00AFEB;	
		}
		
		.navbar-inverse-eify .dropdown-menu .divider {
		  height: 1px;
		  margin: 0px 0;
		  overflow: hidden;
		  background-color: #e6e6e6;
		}
	
/*specific buttons and controls*/

	/*wrapper for the two "access menus" (login and register)*/
		.eify-access-menu > ul {
			display: block;
			width: auto;
		}

	/*register button*/
	
		.btn-eify-register {
			border-left: 2px solid rgba(255,255,255,0.25);
			text-align:center;
			text-transform:uppercase;
			font-family: 'Inconsolata', sans-serif, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
		}
		
		.navbar-inverse-eify .navbar-nav > li.btn-eify-register > a {
			font-weight:400;
		}

	
	/*login button, dropdown menu and form*/
	
		/*login button*/
		
			.btn-eify-login {
				margin-right: 15px; /* this is the rightmost button, needs margin to avoid obscuring by IE scrollbars */
				border-left: 2px solid rgba(255,255,255,0.25);
				border-right: 2px solid rgba(255,255,255,0.25);
				text-align:center;
				text-transform:uppercase;
				font-family: 'Inconsolata', sans-serif, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
			}
			
			.navbar-inverse-eify .navbar-nav > li.btn-eify-login > a {
				font-weight:400;
			}
			
		/*login dropdown menu*/	
			
			#dropdown-eify-login.dropdown-menu,
			#dropdown-eify-login.dropdown-menu> ul {
				width: 16em;
				margin: 0;
				padding: 16px 12px 12px 12px;
				background-color: #F0F0F0;
			
			}
			
		/*login form*/	
			
			#dropdown-eify-login.dropdown-menu .form-group {
				padding: 0;
				margin: 0;
			}
			
			#dropdown-eify-login.dropdown-menu .form-group .form-control {
				margin: 0px 0 8px 0;
			}
		
			#dropdown-eify-login.dropdown-menu .form-group .btn ,btn-default {
				margin: 0;
			}

/*************************** navbar media queries ****************************/

/* firstly, shrink menu as screen gets smaller */
@media (max-width: 1000px) {
	
	/*change padding at top of page to equal the height of the resized navbar*/

		body {	
			padding-top: 60px; /* require padding for fixed navbar */
		}
		
	/*font scale adjustment*/
		.navbar-inverse-eify {
			/*base typography - rem size based on pixel size defined in html{} */
			font-size: 0.75rem;
			line-height: 1.5;
		}

	
	/*brand logo*/
	
		.navbar-inverse-eify .navbar-brand {
			/*shrink space between logo and menu*/
			margin: 0px 10px 0px 0px;
			min-height: 60px;
			max-height: 60px;	
		}
		
		.navbar-inverse-eify .navbar-brand >img {
			/*shrink logo - desktop @ 80 px high navbar is 50% */
			max-height:55px;
			width: auto;
		}

	/*search control*/
	
		.navbar-inverse-eify .search-eify{
			margin: 0;
			padding: 14px 0 0 0; /*vertical positioning*/
			height: 100%;
		}
		
		.navbar-inverse-eify .search-eify .form-control{
			height: 30px;
			width:150px;
		}
		
		.navbar-inverse-eify .search-eify .btn-default{
			height: 30px;
		}
	
	/*top level menus & buttons*/
	
		.navbar-inverse-eify {
			min-height: 60px;
			max-height: 60px;	
		}
		
		.navbar-inverse-eify .navbar-nav > li {
			min-height: 60px;
		}
		
		.navbar-inverse-eify .navbar-nav > li > a {
			/* OPT01: rounded rectangle backgrounds for rollovers, height of container just bigger than text, centered vertically on navbar */
			/*height: 25%;
			line-height:25%;
			margin: 12px 0px 0px 0px;
			padding-left:10px;
			padding-right: 10px;
			text-align: center;
			border-radius: 40px; /*that'll make a circular end*/
			
			/* OPT02: rectangular backgrounds for rollovers, full height of the nav bar */
			margin: 0px 0px 0px 0px;
			padding: 0px 6px 0px 6px;
			height: 58px;
			line-height: 58px;
			vertical-align: middle;
			
			/* common */
			font-weight: 400;
			color:#FFFFFF;
		}
	
	/*specific buttons*/

		/*register button*/
		.btn-eify-register {
			/* nothing to do*/
		}
	
		
		/*login dropdown*/
		.btn-eify-login {
			/* nothing to do*/
		}

}

/* shrink search control before collapse*/
@media (max-width: 860px) {
	.navbar-inverse-eify .search-eify .form-control{
		width:100px;
	}
}

/* custom collapse for mobile*/
@media (max-width: 800px) {	 

	/*change padding at top of page to equal the height of the resized navbar*/
		body {	
			padding-top: 60px; /* require padding for fixed navbar */
		}
		
	/*font scale adjustment*/
		.navbar-inverse-eify {
			/*base typography - rem size based on pixel size defined in html{} */
			font-size: 0.75rem;
			line-height: 1.5;
		}

	/* set margins/padding for higher level containers, matching effect of bootstrap mobile query CSS */
	
		.navbar-inverse-eify .navbar-collapse {
			margin-left: -15px;
			margin-right: -15px; 
			padding-left: 15px;
			padding-right: 15px;
		}
		
		.navbar-inverse-eify ul.nav.navbar-nav {
			margin-left: -15px;
			margin-right: -15px;
		}	
	
		
	/*general collapse shizz - reproducing some of what boostrap would do when switching to <=786px mobile menu*/
	/*only designed/tested to work with fixed navbar type.  */
				
		.navbar-inverse-eify .navbar-left,.navbar-right {
			float: none !important; 
		}
			
		.navbar-inverse-eify .navbar-collapse.collapse {
			display: none!important;
		}
		
		.navbar-inverse-eify .navbar-nav {
			float: none!important;
		}
		
		.navbar-inverse-eify .navbar-nav>li {
			float: none;
		}
		
		.navbar-inverse-eify .collapse.in{
			display:block !important;
		}
		
				
	/*format navbar and menu: sizing, style and effects*/
	
		.navbar-inverse-eify {
			/*allow navbar to expand in height from fixed desktop size*/ 
			min-height: 60px; /* min height the same as the "small" desktop version*/
			border: none;
			max-height: 100%; /* navbar needs to be able to expand to height of container (provides background) */
		}
				
		/*style the fluid container that provides the backdrop for the menu*/
		.navbar-inverse-eify .container-fluid > .navbar-collapse {
			border:none;
			border-bottom: 2px solid #FFFFFF; /*ruling line under menu panel*/
			/*max-height: 100%; /*allow menus to expand to fit everything ** REMOVED - inhibits menu scrolling on mobile ** */
		}
					
		/*navbar header*/
		.navbar-inverse-eify .navbar-header {
			height: 60px;
			border: none;
			border-bottom: 2px solid #FFFFFF;
			margin-right: -15px;	/*keeps dropdown menu icon against right edge*/
			float: none; /*stop the collapsed menu icon from jumping left*/
		}
		

	/*collapsed menu icon*/
	
		.navbar-inverse-eify .navbar-toggle {
			display: block;	
			margin: 0;
			padding: 0 20px 0 20px;
			border-radius: 0px;
			top:0%;
			height:60px;
			border: none;
			border-bottom: 2px solid #FFFFFF;
		}
			
		.navbar-inverse-eify .navbar-toggle:hover,
		.navbar-inverse-eify .navbar-toggle:focus {	
			background-color: #00afeb;
		}
			
		.navbar-inverse-eify .navbar-toggle .icon-bar {
			background-color: #FFFFFF;	
		}	

			
	/*mobile menu styling*/
	
		/*top level menus & buttons*/
			
			/* ensure no spacing above/below groups of drop-downs*/
			.navbar-inverse-eify .navbar-nav {
				margin-top: 0px;
				margin-bottom: 0px;
				padding-top: 0px;
				padding-bottom: 0px;
			}
			
			.navbar-inverse-eify .navbar-nav > li {
				min-height: 2em; /*need min-height (not height) or row height gets huge. Weird.*/
				border-radius: 0px; /*rectangular*/
				border-bottom: 1px solid #00afeb; /*ruling line between menu items*/
			}
			
			.navbar-inverse-eify .navbar-nav > li > a {
				height: 2em;
				padding-top: .35em;
				text-align: left;
				font-size: 1.25em;
				line-height:1.25em;
				overflow: hidden; /* clip the menu text if it's wider than the menu to stop horizontal scrolling on mobile*/
				font-weight: 400;
				color:#FFFFFF;
				padding-left: 15px;
			}
		
			/*top level menus & buttons - hover and focus states*/
			/*since collapsed menu can still appear on desktop environment"*/
			.navbar-inverse-eify .navbar-nav > li > a:hover,
			.navbar-inverse-eify .navbar-nav > li> a:focus {
				text-decoration: none;
				border-bottom: none;
				background-color: #00afeb;
				outline: 0;
			}
		
			/*top level menus & buttons - active state (only visible during mousedown/press & hold) */
			.navbar-inverse-eify .navbar-nav > li > a:active  {
				text-decoration: none;
				border-bottom: none;
				background-color: #FFFFFF;
				color: #2d5596;
			} 
		
			/*top level menus - open state (when menu displayed)*/
			.navbar-inverse-eify .navbar-nav .open > a.dropdown-toggle {
				text-decoration: none;
				border-bottom: none;
				background-color: #00afeb;
				color: #FFFFFF;
			}
	
		/* secondary menus (equivalent of desktop drop down menus) */

			/*unordered list that contains the submenu items*/
			.navbar-inverse-eify .dropdown-menu,
			.navbar-inverse-eify .dropdown-menu > ul {
				width: 100%;
				position: static; float:none; /*allow submenus to "expand" between the top menu items rather than "drop down" like a desktop menu*/
				box-shadow:none;
				border-radius: 0px;	
				border: none;
				padding-top: 0px; /* no space above the list */
				padding-bottom: 0px;  /* no space below the list */
				text-decoration: none; /* applies to children*/	
				border-bottom: none;
			}
			
			/*submenu list items*/
			
				/* link items and headers common styling*/
				.navbar-inverse-eify .navbar-nav .open .dropdown-menu > li > a,
				.navbar-inverse-eify .navbar-nav .open .dropdown-menu > li:last-child a, /*override non-header menu dropdowns which have rounded corner bottoms on submenus*/
				.navbar-inverse-eify .navbar-nav .open .dropdown-menu .dropdown-header {
					border-radius: 0px; 
					height: 2em;					
					font-size: 1.25em; /* 160203: (resize) originally 1em */
					overflow: hidden; /* clip the menu text if it's wider than the menu to stop horizontal scrolling on mobile*/
					line-height: 1.25em; /* 160203: (resize) originally 1em */
					padding: .35em 15px 5px 15px; /*160203: (resize) top was 0.5 em*/
					border-bottom: 1px solid #00afeb;
					color:#2d5596;				
				}

		
				/* link items only */
				
					.navbar-inverse-eify .navbar-nav .open .dropdown-menu > li > a {
						background-color:#FFFFFF;
						background: -webkit-linear-gradient(#FFFFFF, #e6e6e6); /* For Safari 5.1 to 6.0 */	
						background: -o-linear-gradient(#FFFFFF, #e6e6e6); /* For Opera 11.1 to 12.0 */
						background: -moz-linear-gradient(#FFFFFF, #e6e6e6e); /* For Firefox 3.6 to 15 */				
						background: linear-gradient(#FFFFFF, #e6e6e6); /* Standard syntax, wt-G230 gradient */
					}
					
					/*add a little glyph icon before each line*/
					/*160209: REMOVED this styling. Reserving symbols for use in "Smartmenus" multilevel menus, to indicate sub-sub menus. */
					/*.navbar-inverse-eify .navbar-nav .open .dropdown-menu > li > a:before {
						font-family: 'Glyphicons Halflings';
						font-size: 75%;
						content: "\e258" " ";
					}*/
					
					.navbar-inverse-eify .navbar-nav .open .dropdown-menu > li > a:hover,
					.navbar-inverse-eify .navbar-nav .open .dropdown-menu > li > a:focus {
						background:none;
						background-color:#00afeb;
						color:#FFFFFF; 
					}
			
		/* dropdown menu misc elements. */

			.navbar-inverse-eify .navbar-nav .open .dropdown-menu .dropdown-header {
				/*override formatting from standard list elements*/
				background-color:#FFFFFF;
				color: #00AFEB;
			}
			
			.navbar-inverse-eify .dropdown-menu .divider {
				display: none !important; /* hide all dividers on mobile menu and don't allow override */
			}
					
			
		/* "access menu" - login/register side-by-side menu*/
		
			/*wrapper for the two "access menus" (login and register)*/
			
				.eify-access-menu{
					/*extend container to full width of mobile menu, compensating for 15px menu padding*/
					background-color: #00AFEB; /*same as button colour...can be 1-pixel strip showing*/
					margin-right: -15px;
					margin-left: -15px;					
				}
			
				.eify-access-menu > ul {
					display: table;
					width: 100%;
				}
			
				.eify-access-menu ul.navbar-right.nav.navbar-nav {
					margin: 0; /*stop inherited left offset of buttons within .eify-access-menu container */
				}
		
			
			/*common positioning & formatting for the "access menus" */
				
				/*position as side-by-side menu/sub-menu*/
				.navbar-inverse-eify .btn-eify-register,
				.navbar-inverse-eify .btn-eify-login{
					/* side-by-side submenus. */
					/* Using table-cell instead of inline-block to eliminate gaps between the menus */
					/* don't need vertical-align:top; when using table display */
					display: table-cell;				
					width: 50%;							
				}
				
				/*common formatting for the buttons*/
					.navbar-inverse-eify .btn-eify-register,
					.navbar-inverse-eify .btn-eify-login {
						background-color: #dcdcdc;
						text-transform: none;									
					}					
					
					.navbar-inverse-eify .navbar-nav > li.btn-eify-register > a,
					.navbar-inverse-eify .navbar-nav > li.btn-eify-login > a {
						font-weight:400;
						color:#2d5596;
					}
					
					.navbar-inverse-eify .navbar-nav > li.btn-eify-register > a:hover,
					.navbar-inverse-eify .navbar-nav > li.btn-eify-register > a:focus,
					.navbar-inverse-eify .navbar-nav > li.btn-eify-register > a:active,
					.navbar-inverse-eify .navbar-nav > li.btn-eify-login > a:hover,
					.navbar-inverse-eify .navbar-nav > li.btn-eify-login > a:focus,
					.navbar-inverse-eify .navbar-nav > li.btn-eify-login > a:active {
						color:#ffffff;
					}

			/*specific button/dropdown formating */

				/*register button*/
				
					.navbar-inverse-eify .btn-eify-register {	
						border-left: none; /* clear desktop menu border */	
						width: 50%;			
					}
					
			
				/*login dropdown*/
					.navbar-inverse-eify .btn-eify-login {
						border-right: none; /* clear desktop menu border */
						margin-right: 0; /*clear right margin when used in mobile menu*/
						border-left: 1px solid #00AFEB;
						width: 50%;	
					}
			
				/*login dropdown menu*/							
					#dropdown-eify-login.dropdown-menu,
					#dropdown-eify-login.dropdown-menu> ul {
						width: 100%; /*full width on mobile menu*/					
					}			
				
				
		/*search control*/	
		
			/*container for search required for mobile menu formatting*/
			
				.eify-search-panel {
					background-color: #8cb4c8;
					margin: 0 -15px 0 -15px;
					padding: 0 15px 0 15px;
				}
			
			/*form and form elements*/
		
				.navbar-inverse-eify .search-eify{
					display: inline-table; /* stop button splitting from input field */
					border: none; /* get rid of lines above/below that bootstrap adds */
					width: 100%;
					margin: 0;
					padding: 16px 0px 16px 0px;			
					box-shadow:none;			
				}
				
				.navbar-inverse-eify .search-eify .input-group{
					width: 100%;						
				}
			
				.navbar-inverse-eify .search-eify .form-control{
					display: table-cell;
					height: 30px;
					width: 100%;
				}
	
		
				/* button width/spacing requires use of the  "input-group-btn" style. */
						
				.navbar-inverse-eify .search-eify .btn-default{
					margin: 0; /*clear all spacing from .btn-default, spacing will be performed with .input-group-btn from this point on*/
					padding: 0;
				}
				
				.navbar-inverse-eify .search-eify .input-group-btn {
					margin: 0; 
					padding: 0;
					height: 30px;
					width: 44px;
				}

	/* bootstrap responsive table */
	
		/* normal responsive tables, within columns or higher containers */
		.table-responsive {
			border: none; /* default: border: 1px solid #ddd*/
			background-color:rgba(0,0,0,0.03); /* slightly darker than background */
			border-radius: 12px 0px 12px 0px;
			box-shadow: 4px 4px 8px rgba(0,0,0,0.25);
			padding: 1em 1em 1em 1em; /*table will be framed so need padding around it*/
			border: 2px solid #FFFFFF;
		}
	
		/* responsive tables within panels (panels provide framing*/
		.panel .table-responsive {
			border: none; /* default: border: 1px solid #ddd*/
			background-color: transparent;
			border-radius: 0px;
			box-shadow: none;
			padding: 0; /* no extra framing for tables within panels (panel is the frame) */
			border: none;
		}


}

/* make dropdown on hover for desktop*/
@media only screen and (min-width : 926px) {
    /* Make dropdown navigation menus toggle on desktop hover */
	/* to do for all dropdowns use just ".dropdown:hover .dropdown-menu {display: block;}"  */
	/* this method requires dropdowns to have .hover-enabled class applied, so we can create exceptions such as the login menu*/
    .dropdown.hover-enabled:hover .dropdown-menu{
        display: block;
    }
}

/* additional scaling for small screens at Bootstrap breakpoint*/
@media screen and (max-width: 767px) {

/*rescaling of text for small mobile screens */
/*note: not changing the base text pixel size in HTML{} as this affects the menus and footer as well */

		
		body {	
			/*base typography - rem size based on pixel size defined in html{} */
			font-size: 1rem; /* older browsers will fallback to html{font-size:[n]px} as base value */
			line-height: 1.5;
		}
		
		p {
			font-size: 1.1em; /*no change*/
		}
		
		address {
		}
		
		h1,
		.h1 {
			letter-spacing: 0.1em;
			font-size: 1.9em;
		}
		
		h2,
		.h2 {
			font-size: 1.75em;
		}
		
		h3,
		.h3 {
			font-size: 1.6em;
		}
		
		h4,
		.h4 {
			font-size: 1.45em;
		}
		
		h5,
		.h5 {
			font-size: 1.3em;
		}
		
		h6,
		.h6 {
			font-size: 1.2em;
		}
		
		ul {
			font-size: inherit; /*no change*/
			padding-left: 20px;
		}
		
		ol {
			font-size: inherit; /*no change*/
		}
	}