/* Colour Settings - needs to be updated in main_content_left.css. styles.css and navigation.css */

/* 

***NOTE: To remove border-color, you must change to border:none; - so search for border-color:color (no space before first color)***

***Backgrounds***
HEADER-WRAP
Background: #ffffff

MENUBOX, MENU BUTTON, SEARCH BUTTON, NAVIGATION BUTTONS, SUBMIT BUTTONS
Background: #002e7e
Color: #ffffff
border:none;

MENUBOX, MENU BUTTON, SEARCH BUTTON, NAVIGATION BUTTONS, SUBMIT BUTTONS:hover
Background: #29abe2
Color: #ffffff
border:none;

VIEW TAB
Background: #002e7e
Color: #ffffff
border:none;

EDIT TAB
Background: #29abe2
Color: #ffffff
border:none;

EDIT TAB:hover
Background: #002E7E
Color: #ffffff
border:none;

SLIDESHOW WRAP
Background: #333231

COLMASK WRAP
Background: #ffffff

COLMASK (Full width column background colour)
Background: none

COLLEFT (Left Column)
Background: #ffffff

TWOCOL-MAINLEFT (Right Column): 
Background: #f6f6f6

FOOTER TWO WRAP
Background: #e6ecec

FOOTER THREE WRAP
Background: #01499a

FOTER FOUR WRAP
Background: #002e7e

FOOTER BOTTOM WRAP & BODY
Background: #021b66

Find the text **header-height** to adjust the header height for the nav bar


*/


/* Browser Resets - do not alter*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img{
	border:0;
}
address, caption, cite, code, dfn, var {
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1, h2, h3 ,h4, h5, h6, p, li {
	text-align:left;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
abbr, acronym {
	border:0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; /* Correct `block` display not defined for any HTML5 element in IE 8/9, `details` or `summary` in IE 10/11 and Firefox, and `block` display not defined for `main` in IE 11 */
}
html {
	height:100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust:100%;	 /* Stops Safari Mobile from trying to adjust paragraph tags */
}
body {
	border:0;
	width:100%;
	height:100%;
}
audio, 
canvas,
progress,
video {
	display: inline-block; /* Correct `inline-block` display not defined in IE 8/9 */
	vertical-align: baseline; /* Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera */
}
audio:not([controls]) {
	display: none; /* Prevent modern browsers from displaying `audio` without controls */
	height: 0; /* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22*/
}
img,
embed,
object,
video {
	max-width:100%;
	height:auto;
  width:auto;
}
#locationmap_map img, 
#locationmap_map embed, 
#locationmap_map object, 
#locationmap_map video { 
	max-width: none; /* to make Google Map controls appear */ 
} 
#locationmap_map {
	width:auto !important;
  margin: 5px 0;
  margin: 0.5rem 0;
}
input, textarea, select, .grippie {
	-webkit-border-radius:0; /* Stop iOS auto round cornering input elements */
	-webkit-appearance:none; /* Stop iOS auto styling input elements */
	-moz-box-sizing: border-box; /* makes the border and padding part of the width of the item, works IE8+ */
	-webkit-box-sizing: border-box; /* makes the border and padding part of the width of the item, works IE8+ */
	box-sizing: border-box; /* makes the border and padding part of the width of the item, works IE8+ */
}
input[type=radio] {
	-webkit-appearance:radio; /* Stop iOS auto styling input elements */
}
input[type=checkbox] {
	-webkit-appearance:checkbox; /* Stop iOS auto styling input elements */
}
a {
	background: transparent; /* Remove the #ffffff background color from active links in IE 10*/
}
a:active,
a:hover {
	outline: 0; /*Improve readability when focused and also mouse hovered in all browsers*/
}
#overlay-container { /* this is for the Drupal Admin Overlay */
	z-index:1000; /* make the admin overlay appear in front of fixed header */
}
#overlay-container .overlay-element, /* this is for the Drupal Admin Overlay */
#admin-menu, #admin-menu .dropdown {/* this is for the Drupal Admin Overlay to get the admin menu appear to the front */
	z-index:1001; /* make the admin overlay appear in front of fixed header */
}
html body.admin-menu { /* adjust the margin if Admin Menu is being used */
	margin-top:33px !important;
}
html body.admin-menu #header-wrap { /* Moved the fixed header down if admin menu is being used */
	top:33px;
}
html body.admin-menu #menubox { /* Moved the fixed header down if admin menu is being used */
	margin-top:33px;
}
#admin-menu * { /*reduce font size on admin menus */
	font-size:12px;
}



/* --------------- Common Settings - Shouldn't need to adjust ---------------- */
#header-wrap,
#slideshow-wrap,
#colmask-main,
.colmask-wrap,
#breadcrumb-wrap,
#footer-two-wrap,
#footer-three-wrap,
#footer-four-wrap,
#footer-bottom-wrap{
	width:100%;
	margin:0;
	padding:0;
}
.header,
.slideshow,
.footer-two,
.footer-three,
.footer-four,
.footer-bottom {
	margin:0;
	padding:20px 3%;
	padding:2rem 3%;
	width:94%; 				/* 100% minus padding left and right from above */
}


/* --------------- Body styles ---------------- */
body {
	background: #021b66; 	/* Colour of area below footer - should be the same as #footer-bottom-wrap */
}
body#tinymce,
body.mceContentBody,
body.cke_editable {
	background: #FFF; 		/* Colour of background of main body text in TinyMCE/CKEditor */
}
.cke_panel_container body {
	background:#fafafa;		/* Colour of background of Heading Styles drop down in CKEditor */
}
.cke_panel_listItem a {
	border-color:#ccc;
}
.cke_panel_listItem a:hover, 
.cke_panel_listItem a:focus, 
.cke_panel_listItem a:active {
	text-decoration:none;
}


/* --------------- Header styles ---------------- */
#header-wrap { /* header container to edge of screen */
	background:#ffffff; 	/* Header Background Colour*/
	min-height:50px; 		/* Same as the 'top' setting on #menubox **header-height** */
	min-height:5rem; 		/* Same as the 'top' setting on #menubox **header-height** */
	position:fixed;
	top:0;
	left:0;
	-webkit-backface-visibility:hidden; /*needed to make position:fixed work on android*/
	z-index:999;
}
.fixed-header #header-wrap { 	/* header container to edge of screen when scrolling */
	-webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
	border-bottom:1px solid #666; /* Remove comments on IE7 & IE8 */
}
.header { /* header container to edge of display area */
	padding-top:10px;		/* reset common setting above */
	padding-top:1rem;		/* reset common setting above */
	padding-bottom:0;		/* reset common setting above to allow dropdowns to appear direct under navigation */
	clear:both;
}
.fixed-header .header {
}
.logo-wrap { 				/* logo container */
	float:left;
	position:relative;
	text-align:left;
}
.logo-wrap a { 				/* link inside logo container */
	width:100%;
	text-align:left;
	text-decoration:none;
	line-height:1;
}
.logo-wrap img { 			/* image inside logo container */
	height:30px; 			/* same as the height of #menu-icon, #search-icon **header-height** (minus 2rem for padding top & bottom) */
	height:3rem; 			/* same as the height of #menu-icon, #search-icon **header-height** (minus 2rem for padding top & bottom) */
	padding:1px 0; 			/*same as the border thickness of #menu-icon, #search-icon */
}
.name-slogan { 				/* Site name and slogan container */
	padding:0 10px;
	padding:0 1rem;
	margin-top:0;
	text-align:left;
	float:left;
	position:relative;
}
.site-name,
.site-name h1,
.site-name h1 a,
.site-name a { /* Site name */
	color:#010203 !important;
	font-size:16px;
	font-size:1.6rem;
	font-weight:normal;
	text-align:left;
	text-decoration:none !important;
	line-height:1;
  display:none;
}
.site-slogan { /* Site slogan */
	color:#313233;
	font-size:11px;
	font-size:1.1rem;
}


/* --------------- column container ---------------- */
#colmask-main { /* Main content container to edge of screen */
	padding-top:50px;		/* Same height as min-height of #header-wrap **header-height** */
	padding-top:5rem;		/* Same height as min-height of #header-wrap **header-height** */
	background:#ffffff;
}
.colmask { /* Main content container to edge of display area */
	background:none; /* full width column background colour */
	position:relative;
	clear:both;
	overflow:hidden;
}


/* --------------- slideshow ---------------- */
#slideshow-wrap { /* slideshow */
	background:#ffffff;
}
.slideshow { /* slideshow */
	clear:both;
	padding:0; 				/* reset common setting above */
	width:100%; 			/* reset common setting above */
	margin:0 auto;
}


/* --------------- Padding/Border on various elements ---------------- */
.border-pad { /*padding on element containers*/
}


/* --------------- common column settings - no need to adjust ---------------- */
.colright,
.colmid,
.colleft {
	width:100%;
}
.col1,
.col2,
.col3,
.col4 {
	padding:20px 3%;
	padding:2rem 3%;
	width:94%; /* 100% minus padding left and right from above */
}


/* --------------- 2 Column (Main Content Left) settings ---------------- */
.full-col{ /* full width column (in Colmask and Footers) */
}
.twocol-mainleft .colleft { /*column 1 (left column) */
	background:#ffffff; /* column 1 (left column) background colour */
}
.twocol-mainleft .col1 { /*column 1 (left column) (shouldn't need any adjustments here for mobile) */
}
.twocol-mainleft, 
.twocol-mainleft .col2 { /*column 2 (right column) */
	background:#f6f6f6; /* column 2 (right column) background colour */
}
.content-sidebar-top,
.content-sidebar-top-first,
.content-sidebar-top-second {
}
.content-top,
.content-bottom{
}
.sidebar-content-first,
.sidebar-top-first,
.sidebar-first,
.sidebar-bottom-first {
}
.sidebar-content-second,
.sidebar-top-second,
.sidebar-second,
.sidebar-bottom-second {
}


/* --------------- Common Footer settings - no need to adjust ---------------- */
#footer-two-wrap,
#footer-three-wrap,
#footer-four-wrap,
#footer-bottom-wrap { /* footer containers to edge of screen */
}
.footer-two,
.footer-three,
.footer-four,
.footer-bottom { /* main footer container in each footer-***-wrap  */
	clear:both;
	padding-top:10px;
	padding-top:1rem;
	padding-bottom:10px;
	padding-bottom:1rem;
}
.footer-two-bottom,
.footer-three-bottom,
.footer-four-bottom {
	clear:both;
}


/* --------------- Footer 2 Column Layout styles ---------------- */
#footer-two-wrap { /* top footer container to edge of screen */
	background: #002e7e; /* 2 column footer background colour */
}
.footer-two { 
}
.footer-two-top,
.footer-two-first,
.footer-two-second,
.footer-two-bottom { /* 2 column individual columns */
	padding:5px 0;
	padding:0.5rem 0;
}


/* --------------- Footer 3 Column Layout styles ---------------- */
#footer-three-wrap { /* top footer container to edge of screen */
	background: #01499A; /* 3 column footer background colour */
}
.footer-three { 
}
.footer-three-top,
.footer-three-first,
.footer-three-second,
.footer-three-third,
.footer-three-bottom { /* 3 column individual columns */
	padding:5px 0;
	padding:0.5rem 0;
}


/* --------------- Footer 4 Column Layout styles ---------------- */
#footer-four-wrap { /* top footer container to edge of screen */
	background: #002e7e; /* 4 column footer background colour */
}
.footer-four { 
}
.footer-four-left,
.footer-four-right { /* secondary footer container in footer-four-top */
	width:100%;
	padding:0;
	margin:0;
}
.footer-four-top,
.footer-four-first, 
.footer-four-second,
.footer-four-third,
.footer-four-fourth,
.footer-four-bottom { /* 4 column individual columns */
	padding:5px 0;
	padding:0.5rem 0;
}


/* --------------- Footer Bottom Column Layout styles ---------------- */
#footer-bottom-wrap { /* bottom footer container to edge of screen */
	/*no need to set background colour here as it's set by the <body> tag */
}
.footer-bottom-left,
.footer-bottom-right { /* secondary footer container in footer-bottom */
}


/* --------------- Responsive Adjustments ---------------- */
/* Note, the CSS outside these Media Queries is used for all devices incl. mobiles */

/* @media only screen and (min-width: 320px) { */
	/* Mobile & Small screen, non-retina */

/* } */

/* @media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (-o-min-device-pixel-ratio: 2/1)	and (min-width: 320px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (min-resolution: 192dpi) and (min-width: 320px),
only screen and (min-resolution: 2dppx) and (min-width: 320px) { */
	/* Mobile & Small screen, retina, stuff to override above media query */

/* } */

/* @media only screen and (min-width: 700px) { */
	/* Tablet & Medium screen, non-retina */

	/* --------------- Common Settings - Shouldn't need to adjust ---------------- */
	#header-wrap,
	#slideshow-wrap,
	#colmask-main,
	.colmask-wrap,
	#breadcrumb-wrap,
	#footer-two-wrap,
	#footer-three-wrap,
	#footer-four-wrap,
	#footer-bottom-wrap{
	}
	.header,
	.slideshow,
	.footer-two,
	.footer-three,
	.footer-four,
	.footer-bottom {
		padding:30px 2%;
		padding:3rem 2%;
		width:96%; /* 100% minus padding left and right from above */
	}
	.colmask {
		padding:0 2%;
		width:96%; /* 100% minus padding left and right from above */
	}
	.col1,
	.col2,
	.col3,
	.col4 {
		padding:30px 0;
		padding:3rem 0;
	}


	/* --------------- Body styles ---------------- */
	body {
	}
	body#tinymce,
	body.mceContentBody,
	body.cke_editable {
	}


	/* --------------- Header styles ---------------- */
	#header-wrap { /* header container to edge of screen */
		min-height:80px;			/* Same as the 'top' setting on #menubox **header-height** */
		min-height:8rem;			/* Same as the 'top' setting on #menubox **header-height** */
	}
	.fixed-header #header-wrap { /* header container to edge of screen when scrolling */
		min-height:50px; 		/* Same as the 'top' setting on #menubox **header-height** */
		min-height:5rem; 		/* Same as the 'top' setting on #menubox **header-height** */
	}
	.header { /* header container to edge of display area */
		padding-top:15px;		/* reset common setting above */
		padding-top:1.5rem;		/* reset common setting above */
		padding-bottom:0;
	}
	.fixed-header .header {
		padding-top:0;	/* reset common setting above to allow dropdowns to appear direct under navigation */
	}
	.logo-wrap { /* logo container */
	}
	.logo-wrap a { /* link inside logo container */
	}
	.logo-wrap img { /* image inside logo container */
		height:50px; /* same as the height of #menu-icon, #search-icon **header-height** (plus 2rem for padding top & bottom) */
		height:5rem; /* same as the height of #menu-icon, #search-icon **header-height** (plus 2rem for padding top & bottom) */
		padding:0;
	}
	.fixed-header .logo-wrap img {
		height:40px; /* same as the height of #menu-icon, #search-icon **header-height** (minus 2rem for padding top & bottom) */
		height:4rem;	 /* same as the height of #menu-icon, #search-icon **header-height** (minus 2rem for padding top & bottom) */
		padding:5px 0 0 0; /*same as the border thickness of #menu-icon, #search-icon */
	}
	.name-slogan { /* Site name and slogan container */
	}
	.site-name,
	.site-name h1,
	.site-name h1 a,
	.site-name a { /* Site name */
		font-size:24px;
		font-size:2.4rem;
	}
	.site-slogan { /* Site slogan */
		font-size:18px;
		font-size:1.8rem;
	}
	.fixed-header .name-slogan { 
	}
	.fixed-header .site-name,
	.fixed-header .site-name h1,
	.fixed-header .site-name h1 a,
	.fixed-header .site-name a { /* Site name */
		font-size:16px;
		font-size:1.6rem;
	}
	.fixed-header .site-slogan { /* Site slogan */
		font-size:11px;
		font-size:1.1rem;
	}
	
	
	/* --------------- column container ---------------- */
	#colmask-main {/* Main content container to edge of screen */
		padding-top:80px;		/* Same height as min-height of #header-wrap **header-height** */
		padding-top:8rem;		/* Same height as min-height of #header-wrap **header-height** */
    background:url(../images/background.gif) repeat-y center center #FFFFFF;
	}
	.colmask { /* Main content container to edge of display area */
	}
	
	
	/* --------------- slideshow ---------------- */
	#slideshow-wrap { /* slideshow */
    background:url(../images/background.gif) repeat-y center center #FFFFFF;
	}
	.slideshow { /* slideshow */
		padding:0; 				/* reset common setting above */
		width:100%; 			/* reset common setting above */
	}
	
	
	/* --------------- Padding/Border on various elements ---------------- */
	.border-pad { /*padding on element containers*/
	}
	
	
	/* --------------- common column settings - no need to adjust ---------------- */
	.colright,
	.colmid,
	.colleft {
		float:left;
		position:relative;
	}
	.col1,
	.col2,
	.col3,
	.col4 {
		float:left;
		position:relative;	
		width:auto;
	}
	
	
	/* ----------------- 2 Column (Main Content Left) settings ------------------ */
	
	/* Tablet Layout Grid Template (Note: update figures per job for reference)   */
	
	/*   ||                             ||                       ||               */
	/*   ||            Col 1            ||         Col 2         ||               */
	/*   ||             65%             ||          35%          ||               */
	/*   ||    |                   |    ||    |             |    ||               */
	/*   || 0% |        63%        | 2% || 2% |     33%     | 0% ||               */
	/*   ||    |                   |    ||    |             |    ||               */
	
	.full-col{ /* full width column (in Colmask and Footers) */
	}
	.twocol-mainleft .colleft { /*column 1 (left column) */
		right:35%;					/* column 2 (right column) width */
	}
	.twocol-mainleft .col1 { /*column 1 (left column) */
		width:63%;					/* column 1 (left column) content width */
		left:35%;					/* column 2 (right column) width 
									   plus column 1 (left column) left padding */
	}
	.twocol-mainleft .col2 { /*column 2 (right column) */
		width:33%;					/* column 2 (right column) content width */
		left:39%;					/* column 2 (right column) width
									   plus column 1 (left column) left padding 
									   plus column 1 (left column) right padding 
									   plus column 2 (right column) left padding */
	}
	.content-sidebar-top,
	.content-sidebar-top-first,
	.content-sidebar-top-second {
	}
	.content-top,
	.content-bottom{
	}
	.sidebar-content-first,
	.sidebar-top-first,
	.sidebar-first,
	.sidebar-bottom-first {
	}
	.sidebar-content-second,
	.sidebar-top-second,
	.sidebar-second,
	.sidebar-bottom-second {
	}
	
	
	/* --------------- Common Footer settings - no need to adjust ---------------- */
	#footer-two-wrap,
	#footer-three-wrap,
	#footer-four-wrap,
	#footer-bottom-wrap { /* footer containers to edge of screen */
	}
	.footer-two,
	.footer-three,
	.footer-four,
	.footer-bottom { /* main footer container in each footer-***-wrap  */
	}
	
	
	/* --------------- Footer 2 Column Layout styles ---------------- */
	#footer-two-wrap { /* top footer container to edge of screen */
	}
	.footer-two { 
	}
	.footer-two-top,
	.footer-two-first,
	.footer-two-second,
	.footer-two-bottom { 
	}
	.footer-two-first,
	.footer-two-second { 
		width:48%;
		padding-right:4%;
		float:left;
		position:relative;
	}
	.footer-two-second { 
		padding-right:0;
	}
	
	
	/* --------------- Footer 3 Column Layout styles ---------------- */
	#footer-three-wrap { /* top footer container to edge of screen */
	}
	.footer-three { 
	}
	.footer-three-top,
	.footer-three-bottom { /* 3 column footer background colour */
	}
	.footer-three-first,
	.footer-three-second,
	.footer-three-third { /* 3 column footer background colour */
		width:31%;
		padding-right:3.5%;
		float:left;
		position:relative;
	}
	.footer-three-third { /* 3 column footer background colour */
		padding-right:0;
	}
	
	
	/* --------------- Footer 4 Column Layout styles ---------------- */
	#footer-four-wrap { /* top footer container to edge of screen */
	}
	.footer-four { 
	}
	.footer-four-left,
	.footer-four-right { /* secondary footer container in footer-four-top */
		width:50%;
		float:left;
		position:relative;
		margin:0;
		padding:0;
	}
	.footer-four-top,
	.footer-four-bottom { /* 4 column footer top and bottom */
	}
	.footer-four-first, 
	.footer-four-second,
	.footer-four-third,
	.footer-four-fourth { /* 4 column individual columns */
		margin:0;
		padding-right:4%;
	}
	.footer-four-first,
	.footer-four-third { 
		padding-right:none;
	}
	
	
	/* --------------- Footer Bottom Column Layout styles ---------------- */
	#footer-bottom-wrap { /* bottom footer container to edge of screen */
		/*no need to set background colour here as it's set by the <body> tag */
	}
	.footer-bottom-left,
	.footer-bottom-right { /* secondary footer container in footer-bottom */
		width:50%;
		padding:0;
		float:left;
		position:relative;
	}


/* } */

/* @media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (-o-min-device-pixel-ratio: 2/1)	and (min-width: 700px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (min-resolution: 192dpi) and (min-width: 700px),
only screen and (min-resolution: 2dppx) and (min-width: 700px) { */
	/* Tablet & Medium screen, retina, stuff to override above media query */

/* } */

/* @media only screen and (min-width: 1024px) { */
	/* Desktop & Large screen, non-retina */

	/* --------------- Common Settings - Shouldn't need to adjust ---------------- */
	#header-wrap,
	#slideshow-wrap,
	#colmask-main,
	.colmask-wrap,
	#breadcrumb-wrap,
	#footer-two-wrap,
	#footer-three-wrap,
	#footer-four-wrap,
	#footer-bottom-wrap{
	}
	.header,
	.slideshow,
	.colmask,
	.footer-two,
	.footer-three,
	.footer-four,
	.footer-bottom {
		*padding-left:0; /* - remove comment for IE7 (leave * before padding) */
		*padding-right:0; /* - remove comment for IE7 (leave * before padding) */
	}
	html body.admin-menu #menubox { /* Moved the fixed header down if admin menu is being used */
		margin-top:0;
	}


	/* --------------- Body styles ---------------- */
	body {
	}
	body#tinymce,
	body.mceContentBody,
	body.cke_editable {
	}


	/* --------------- Header styles ---------------- */
	#header-wrap { /* header container to edge of screen */
		min-height:170px;			/* Same as the 'top' setting on #menubox **header-height** */
		min-height:17rem;			/* Same as the 'top' setting on #menubox **header-height** */
	}
	.fixed-header #header-wrap { /* header container to edge of screen when scrolling */
	}
	.header { /* header container to edge of display area */
		width:1280px;
		margin:0 auto;				/* Centres the header left to right */
	}
	.fixed-header .header {
	}
	.logo-wrap { /* logo container */
		position:absolute;
	}
	.logo-wrap a { /* link inside logo container */
	}
	.logo-wrap img { /* image inside logo container */
		height:90px; /* same as the height of #menu-icon, #search-icon **header-height** (plus 2rem for padding top & bottom) */
		height:9rem; /* same as the height of #menu-icon, #search-icon **header-height** (plus 2rem for padding top & bottom) */
	}
	.fixed-header .logo-wrap img {
	}
	.name-slogan { /* Site name and slogan container */
		position:fixed;
		margin-left:170px;
		margin-left:17rem;
	}
	.site-name,
	.site-name h1,
	.site-name h1 a,
	.site-name a { /* Site name */
		font-size:28px;
		font-size:2.8rem;
	}
	.site-slogan { /* Site slogan */
		font-size:20px;
		font-size:2rem;
	}
	.fixed-header .name-slogan { 
		margin-left:80px;
		margin-left:8rem;
	}
	.fixed-header .site-name,
	.fixed-header .site-name h1,
	.fixed-header .site-name h1 a,
	.fixed-header .site-name a { /* Site name */
		font-size:16px;
		font-size:1.6rem;
	}
	.fixed-header .site-slogan { /* Site slogan */
		font-size:11px;
		font-size:1.1rem;
	}
	
	
	/* --------------- column container ---------------- */
	#colmask-main { /* Main content container to edge of screen */
		padding-top:170px;		/* Same height as min-height of #header-wrap **header-height** */
		padding-top:17rem;		/* Same height as min-height of #header-wrap **header-height** */
	}
	.colmask { /* Main content container to edge of display area */
		width:1280px;
		margin:0 auto;				/* Centres the webpage left to right */
		*padding-left:0; /* - remove comment for IE7 (leave * before padding) */
		*padding-right:0; /* - remove comment for IE7 (leave * before padding) */
	}
	
	
	/* --------------- slideshow ---------------- */
	#slideshow-wrap { /* slideshow */
	}
	.slideshow { /* slideshow */
		width:1280px;
		margin:0 auto;				/* Centres the webpage left to right */
	}
	
	
	/* --------------- Padding/Border on various elements ---------------- */
	.border-pad { /*padding on element containers*/
	}
	
	
	/* --------------- common column settings - no need to adjust ---------------- */
	.colright,
	.colmid,
	.colleft {
	}
	.col1,
	.col2,
	.col3,
	.col4 {
	}
	
	
	/* ----------------- 2 Column (Main Content Left) settings ------------------ */
	
	/*    PC Layout Grid Template (Note: update figures per job for reference)    */
	/*  Unless changes are set below - this will be the same as the Tablet layout */
	
	/*   ||                                     ||                       ||       */
	/*   ||                Col 1                ||         Col 2         ||       */
	/*   ||                 65%                 ||          35%          ||       */
	/*   ||    |                           |    ||    |             |    ||       */
	/*   || 0% |            63%            | 2% || 2% |     33%     | 0% ||       */
	/*   ||    |                           |    ||    |             |    ||       */
	
	.full-col{ /* full width column (in Colmask and Footers) */
	}
	.twocol-mainleft .colleft { /*column 1 (left column) */
	}
	.twocol-mainleft .col1 { /*column 1 (left column) */
	}
	.twocol-mainleft .col2 { /*column 2 (right column) */
	}
	.content-sidebar-top,
	.content-sidebar-top-first,
	.content-sidebar-top-second {
	}
	.content-top,
	.content-bottom{
	}
	.sidebar-content-first,
	.sidebar-top-first,
	.sidebar-first,
	.sidebar-bottom-first {
	}
	.sidebar-content-second,
	.sidebar-top-second,
	.sidebar-second,
	.sidebar-bottom-second {
	}

	
	/* --------------- Common Footer settings - no need to adjust ---------------- */
	#footer-two-wrap,
	#footer-three-wrap,
	#footer-four-wrap,
	#footer-bottom-wrap { /* footer containers to edge of screen */
	}
	.footer-two,
	.footer-three,
	.footer-four,
	.footer-bottom { /* main footer container in each footer-***-wrap  */
		width:1280px;
		margin:0 auto;				/* Centres the webpage left to right */
	}
	
	
	/* --------------- Footer 2 Column Layout styles ---------------- */
	#footer-two-wrap { /* top footer container to edge of screen */
	}
	.footer-two { 
	}
	.footer-two-top,
	.footer-two-first,
	.footer-two-second,
	.footer-two-bottom { /* 2 column individual columns */
	}
	.footer-two-first { /* 2 column individual columns */
    width:30%;
	}
	.footer-two-second { /* 2 column individual columns */
    width:66%;
	}

	
	
	/* --------------- Footer 3 Column Layout styles ---------------- */
	#footer-three-wrap { /* top footer container to edge of screen */
	}
	.footer-three { 
	}
	.footer-three-top,
	.footer-three-first,
	.footer-three-second,
	.footer-three-third,
	.footer-three-bottom { /* 3 column individual columns */
	}
	
	
	/* --------------- Footer 4 Column Layout styles ---------------- */
	#footer-four-wrap { /* top footer container to edge of screen */
	}
	.footer-four { 
	}
	.footer-four-left,
	.footer-four-right { /* secondary footer container in footer-four-top */
	}
	.footer-four-top,
	.footer-four-bottom { /* 4 column footer top and bottom */
	}
	.footer-four-first, 
	.footer-four-second,
	.footer-four-third,
	.footer-four-fourth { /* 4 column individual columns */
		float:left;
		position:relative;
		width:46%; 
	}
	.footer-four-first,
	.footer-four-third { 
	}
	
	
	/* --------------- Footer Bottom Column Layout styles ---------------- */
	#footer-bottom-wrap { /* bottom footer container to edge of screen */
		/*no need to set background colour here as it's set by the <body> tag */
	}
	.footer-bottom-left,
	.footer-bottom-right { /* secondary footer container in footer-bottom */
	}


/* } */

/* @media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (min-resolution: 192dpi) and (min-width: 1024px),
only screen and (min-resolution: 2dppx)  and (min-width: 1024px) { */
	/* Desktop & Large screen, retina, stuff to override above media query */

/* } */