/* Browser Resets*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
	-webkit-text-size-adjust:100%;	 /* Stops Safari Mobile from trying to adjust paragraph tags */
}
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;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
}
html {
	height:100%;
}
body {
	border:0;
	width:100%;
	height:100%;
	background: #2c9347; /* Colour of area below footer which is used for Footer-Bottom */
}
body#tinymce,
body.mceContentBody {
	background: #FFF; /* Colour of background of main body text in TinyMCE */
}
img,
embed,
object,
video {
	width:auto;
	height:auto;
}
input, textarea, select, .grippie {
    border-radius:0;
	-webkit-border-radius:0; /* Stop iOS auto round cornering 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.form-submit,
input.form-submit-other {
	-webkit-appearance: none; /* Stop iOS auto styling buttons */
}
.element-invisible {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
}
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}



/* --------------- Header styles ---------------- */
#header-wrap { /* header container to edge of screen */
	margin:0;
	background: url(../images/header_bg.png) top repeat-x #A2C9A7; /* Header Background Colour*/
}
#header { /* header container to edge of display area */
	clear:both;
	padding:20px 2% 18px 2%;
	padding:2rem 2% 1.8rem 2%;
	width:96%; /* 100% minus padding left and right from above */
	text-align:center;
}
.logo-wrap, 
.logo-wrap-right { /* logo container */
	text-align:left;
	float:left;
	position:relative;
	width:48%;
}
.logo-wrap-right { /* logo container */
	float:right;
}
.logo-wrap { /* logo container */
	text-align:left;
}
.logo-wrap a { /* link inside logo container */
	text-decoration:none;
	line-height:1;
}
.logo-wrap img { /* image inside logo container */
}
.name-slogan { /* Site name and slogan container */
	text-align:center;
	margin-top:0;
	padding:0;
}
.name-slogan .site-name,
.name-slogan .site-name h1,
.name-slogan .site-name h1 a,
.name-slogan .site-name a { /* Site name */
	text-align:center;
	font-weight:normal;
	color:seashell !important;
	font-size:28px;
	font-size:2.8rem;
	text-decoration:none !important;
}
.name-slogan .site-slogan { /* Site slogan */
	text-align:center;
	color:peachpuff;
	font-size:20px;
	font-size:2rem;
}


/* --------------- slideshow ---------------- */
.slideshow-wrap { /* slideshow */
	background:#998479;
}
.slideshow { /* slideshow */
}


/* --------------- column container ---------------- */
.colmask-wrap { /* Main content container to edge of screen */
	margin:0;
	background:#efefef;
}
.colmask { /* Main content container to edge of display area */
	position:relative;
	clear:both;
	overflow:hidden;
	width:96%;
	padding:0 2%;
}


/* --------------- Padding/Border on various elements ---------------- */
.border-pad .content { /*padding on element containers*/
	padding:10px 3% 4px 3%;
	padding:1rem 3% 0.4rem 3%;
}

.col1 .border-pad,
.col2 .border-pad { 
	background:#fff;
	border:#ccc;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}
.col1 .border-pad { 
	margin:10px 0;
	margin:1rem 0;
}
.col2 .border-pad {
	background:url(../images/woman-trying-dress-smaller.jpg) top right no-repeat #fff;
	height:200px;
	margin:10px 0;
	margin:1rem 0;
}

/* --------------- common column settings - no need to adjust ---------------- */
.colright,
.colmid,
.colleft {
	width:100%;
}
.col1,
.col2,
.col3,
.col4 {
}


/* --------------- Richard's Divs ---------------- */

.div1,
.div2,
.div3,
.div4,
.div5,
.divOther {
	display:none;
}
.lblStatus {
	color: #FF0000;
}
.lblInfo,
.lblValidate {
	color: #cc0000;
}


/* --------------- 2 Column (Main Content Left) settings ---------------- */
.full-col{ /* full width column (in Colmask and Footers) */
}
.twocol-mainleft .colleft { /*column 1 (left column) */
}
.twocol-mainleft .col1 { /*column 1 (left column) (shouldn't need any adjustments here for mobile) */
}
.twocol-mainleft, 
.twocol-mainleft .col2 { /*column 2 (right column) */
}


/* --------------- Common Footer settings - no need to adjust ---------------- */
#footer-top-wrap,
#footer-middle-wrap,
#footer-bottom-wrap { /* footer containers to edge of screen */
	padding:0;
	margin:0;
}
.footer,
.footer-top,
.footer-middle,
.footer-bottom { /* main footer container in each footer-***-wrap  */
	clear:both;
	margin:0 auto;
}


/* --------------- Footer Layout styles ---------------- */
#footer-top-wrap { /* top footer container to edge of screen */
	background: #ccc; /* Top footer background colour */
}
.footer-top { /* main footer container in footer-top-wrap  */
}
.footer-top-left,
.footer-top-right { /* secondary footer container in footer-top */
	width:100%;
	padding:0;
	margin:0;
}
.footer-col,
.footer-col1, 
.footer-col2,
.footer-col3,
.footer-col4 { /* individual footer columns in footer-top-left and footer-top-right */
}

#footer-middle-wrap { /* middle footer container to edge of screen */
	background: #444; /* middle footer background colour */
}
.footer-middle { /* main footer container in footer-middle-wrap  */
}
.footer-middle-left,
.footer-middle-right { /* secondary footer container in footer-middle */
}

#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 { /* main footer container in footer-bottom-wrap  */
	padding:0 2%;
}
.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 */

	/* --------------- Header styles ---------------- */
	#header-wrap { /* header container to edge of screen */
	}
	#header { /* header container to edge of display area */
		width:auto;
		padding:30px 2% 30px 2%;
		padding:3rem 2% 3rem 2%;
	}
	.logo-wrap { /* logo container */
		float:left;
		position:relative;
		text-align:left;
	}
	.logo-wrap a { /* link inside logo container */
		text-align:left;
	}
	.logo-wrap img { /* image inside logo container */
	}
	.name-slogan { /* Site name and slogan container */
		text-align:left;
		float:left;
		position:relative;
		padding-left:10px;
		padding-left:1rem;
	}
	.name-slogan .site-name,
	.name-slogan .site-name h1,
	.name-slogan .site-name h1 a,
	.name-slogan .site-name a { /* Site name */
		text-align:left;
	}
	.name-slogan .site-slogan { /* Site slogan */
		text-align:left;
	}
	
	
	/* --------------- slideshow ---------------- */
	.slideshow { /* slideshow */
		padding:0 0 0 2%;
	}
	
	
	/* --------------- column container ---------------- */
	.colmask-wrap { /* Main content container to edge of screen */
	}
	.colmask { /* Main content container to edge of display area */
	}
	
	
	/* --------------- Padding/Border on various elements ---------------- */
	.border-pad .content { /*padding on element containers*/
	}
	.col1 .border-pad { 
		margin:20px 0;
		margin:2rem 0;
	}
	.col2 .border-pad {
		background:url(../images/woman-trying-dress-small.jpg) top right no-repeat #fff;
		height:200px;
		margin:20px 0;
		margin:2rem 0;
	}
	
	
	
	/* --------------- Common Footer settings - no need to adjust ---------------- */
	#footer-top-wrap,
	#footer-middle-wrap,
	#footer-bottom-wrap { /* footer containers to edge of screen */
	}
	.footer,
	.footer-top,
	.footer-middle,
	.footer-bottom { /* main footer container in each footer-***-wrap  */
		width:auto;
	}
	
	
	/* --------------- Footer Layout styles ---------------- */
	#footer-top-wrap { /* top footer container to edge of screen */
	}
	.footer-top { /* main footer container in footer-top-wrap  */
	}
	.footer-top-left,
	.footer-top-right { /* secondary footer container in footer-top */
		float:left;
		position:relative;
	}
	.footer-col,
	.footer-col1, 
	.footer-col2,
	.footer-col3,
	.footer-col4 { /* individual footer columns in footer-top-left and footer-top-right */
		float:left;
		position:relative;
		width:47.75%; 
		border-left:1px solid #999;
		padding:0 2%;
		margin:0;
	}
	.footer-col1,
	.footer-col3 { 
		padding-left:0;
		border-left:none; 
	}
	.footer-col2, 
	.footer-col4 { 
		padding-right:0; 
	}
	
	#footer-middle-wrap { /* middle footer container to edge of screen */
	}
	.footer-middle { /* main footer container in footer-middle-wrap  */
	}
	.footer-middle-left,
	.footer-middle-right { /* secondary footer container in footer-middle */
		width:70%;
		padding:0;
		float:left;
		position:relative;
	}
	.footer-middle-right {
		width:30%;
	}
	
	#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 { /* main footer container in footer-bottom-wrap  */
	}
	.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 */

	/* --------------- Header styles ---------------- */
	#header-wrap { /* header container to edge of screen */
		padding:0;
	}
	#header { /* header container to edge of display area */
		width:1024px;
		margin:0 auto;				/* Centres the header left to right */		
	}
	.logo-wrap { /* logo container */
	}
	.logo-wrap a { /* link inside logo container */
	}
	.logo-wrap img { /* image inside logo container */
	}
	.name-slogan { /* Site name and slogan container */
	}
	.name-slogan .site-name,
	.name-slogan .site-name h1,
	.name-slogan .site-name h1 a,
	.name-slogan .site-name a { /* Site name */
	}
	.name-slogan .site-slogan { /* Site slogan */
	}
	
	
	/* --------------- slideshow ---------------- */
	.slideshow-wrap { /* slideshow */
	}
	.slideshow { /* slideshow */
		width:1024px;
		margin:0 auto;				/* Centres the header left to right */
		padding:0 2%;
	}
	
	
	/* --------------- column container ---------------- */
	.colmask-wrap { /* Main content container to edge of screen */
		margin:0 auto;				/* Centres the webpage left to right */
		padding:0;
	}
	.colmask { /* Main content container to edge of display area */
		width:1024px;
		margin:0 auto;				/* Centres the webpage left to right */
	}
	
	
	/* --------------- Padding/Border on various elements ---------------- */
	.border-pad .content { /*padding on element containers*/
	}
	.col1 .border-pad { 
		margin:30px 0;
		margin:3rem 0;
	}
	.col2 .border-pad {
		background:url(../images/woman-trying-dress-large.jpg) top center no-repeat #fff;
		height:500px;
		margin:30px 0;
		margin:3rem 0;
	}
	

	
	/* --------------- common column settings - no need to adjust ---------------- */
	.colright,
	.colmid,
	.colleft {
		float:left;
		position:relative;
	}
	.col1,
	.col2,
	.col3,
	.col4 {
		float:left;
		position:relative;	
		padding:0;					/* no left and right padding on columns */
		width:auto;
	}
	
	
	/* ----------------- 2 Column (Main Content Left) settings ------------------ */
	
	/* Tablet Layout Grid Template (Note: update figures per job for reference)   */
	
	/*   ||                             ||                       ||               */
	/*   ||            Col 1            ||         Col 2         ||               */
	/*   ||             68%             ||          32%          ||               */
	/*   ||    |                   |    ||    |             |    ||               */
	/*   || 0% |        68%        | 0% || 2% |     30%     | 0% ||               */
	/*   ||    |                   |    ||    |             |    ||               */
	
	.full-col{ /* full width column (in Colmask and Footers) */
	}
	.twocol-mainleft .colleft { /*column 1 (left column) */
		right:32%;					/* column 2 (right column) width */
	}
	.twocol-mainleft .col1 { /*column 1 (left column) */
		width:68%;					/* column 1 (left column) content width */
		left:32%;					/* column 2 (right column) width 
									   plus column 1 (left column) left padding */
	}
	.twocol-mainleft .col2 { /*column 2 (right column) */
		width:30%;					/* column 2 (right column) content width */
		left:34%;					/* 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 */
	}
	
	
	/* --------------- Common Footer settings - no need to adjust ---------------- */
	#footer-top-wrap,
	#footer-middle-wrap,
	#footer-bottom-wrap { /* footer containers to edge of screen */
		padding:0;
	}
	.footer,
	.footer-top,
	.footer-middle,
	.footer-bottom { /* main footer container in each footer-***-wrap  */
		width:1024px;
		margin:0 auto;				/* Centres the webpage left to right */
	}
	
	
	/* --------------- Footer Layout styles ---------------- */
	#footer-top-wrap { /* top footer container to edge of screen */
	}
	.footer-top { /* main footer container in footer-top-wrap  */
	}
	.footer-top-left,
	.footer-top-right { /* secondary footer container in footer-top */
		width:50%;
	}
	.footer-col,
	.footer-col1, 
	.footer-col2,
	.footer-col3,
	.footer-col4 { /* individual footer columns in footer-top-left and footer-top-right */
		width:45.75%;
		border-left:1px solid #999;
		padding:0 2%;
		margin:0;
	}
	.footer-col1 {
		border-left:none;
		padding-left:0;
	}

	#footer-middle-wrap { /* middle footer container to edge of screen */
	}
	.footer-middle { /* main footer container in footer-middle-wrap  */
	}
	.footer-middle-left,
	.footer-middle-right { /* secondary footer container in footer-middle */
		width:70%;
		padding:0;
		float:left;
		position:relative;
	}
	.footer-middle-right {
		width:30%;
	}

	#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 { /* main footer container in footer-bottom-wrap  */
	}
	.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 */

/*}*/