/*	defaults ------------------------------------------------------------------------------------ 

	.main
	- flex: 1; to stretch the .main to full height of available space
	- display: flex; prep for flex items which will allow for sticky elements
	- flex-flow: column nowrap; for single column layout on mobile devices
	
	- Any element involed in shaping layout needs the versitility of flex... always!
	- Block level elemnts are used for stacking only

	last updated: 08/10/17 - core - candidate -- dp
   	-------------------------------------------------------- */

.main {
	background: #f9f9f9;
	background: #2a2a2a;
 }
.nav {
	// background: #6DBCDB;
	border-bottom: 3px solid #000;
 }
.aside {
	background: #f1f1f1;
	background: #222222;
 }

@media (min-width: 90em) {
	.aside {
		border-left: 3px solid #000;
	 }
 }

.footer { 
	background: #6DBCDB;
 }
.article {

 }

/*	specific ------------------------------------------------------------------------------------ 

	- 

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

.heading {
	color: #4CBDDC;
 }
.para {
	color: rgba(255,255,255,0.5);
 }
.span {
	color: rgba(0,0,0,0.5);
 }
.legend {
	color: #4CBDDC;
 }
.quote {
	color: rgba(0,0,0,0.5);
 }
.caption {
	color: rgba(0,0,0,0.5);
 }
.message {
	color: rgba(0,0,0,0.5);
	border:1px solid rgba(0,0,0,0.1);
 }

/* 	link ---------------------------------------------------------------------------------------- 

	.link

	last updated: 13/02/16 - core - candidate -- dp
   	-------------------------------------------------------- */

.txt::selection {
  background: #4CBDDC;
  color:white;
 }
.txt::-moz-selection {
  background: #4CBDDC;
  color:white;
 }

/*	specific ------------------------------------------------------------------------------------ 

	- 

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

.link {
	color: rgba(0,0,0,0.4);
 }
.link:hover {
	color: #4CBDDC;
 }

/* 	button skins -------------------------------------------------------------------------------- 

	** Needs review and documentation update **

	- Copy this section when styling a unique button
	- Default styling above

	checked: 11/5/16 - core - concept stage -- dp	
   	-------------------------------------------------------- */

.btn {
	background-color: #6DBCDB;
	color: rgba(0,0,0,0.4);
	border: 1px solid rgba(0,0,0,0.15);
	padding: .75em 1em;
 }
.btn:hover,
.btn:active,
.btn:focus {
	color:white;
	background-color: #6DBCDB;
	border: 1px solid rgba(0,0,0,0.15);
	box-shadow: inset 0 0 0 1px #fff;
 }

.btn.cancel {
	background-color: rgba(255,255,255,0.8);
 }
.btn.cancel:hover,
.btn.cancel:active,
.btn.cancel:focus {
	background-color: rgba(0,0,0,0.1);
 }

.btn.delete {
	background-color: OrangeRed;
 }
.btn.delete:hover,
.btn.delete:active,
.btn.delete:focus {
	background-color: #4CBDDC;
 }


/* 	-------------------------------------------------------------------------------------------- */
/* 	--------------------------------------- GRID STYLING --------------------------------------- */
/* 	-------------------------------------------------------------------------------------------- */

/* pay close attention to this one... */

.section.split { 
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
 }
.section.row { 
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: min-content;
	grid-row-gap: 1.25em;
 }

@media (min-width: 0em)   	{

 }
@media (min-width: 33.75em) {
	.section.split { 
		grid-template-columns: 1fr 1fr;
	 }
 }
@media (min-width: 45em)  	{

 }

@media (min-width: 60em)  	{

 }
@media (min-width: 90em)  	{
	.section.split { 
		grid-template-columns: 1fr 1fr;

	 }
 }
@media (min-width: 120em) 	{

 }
@media (min-width: 150em) 	{

 }

/* 	grid ----------------------------------------------------------------------------------------

	- grid for the landing pages

	- use below code if bottom line required on first row only

	.section.grid > .link:nth-child(3n):nth-last-child(-n+4) ~ .link {
		border-bottom: 0px solid transparent;
	}

	refactored: 16/10/17 -- dp
   	-------------------------------------------------------- */

.section.content { 
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: min-content;
 }
.section.content > .link {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.25em;
	border-bottom: 2px solid rgba(0,0,0,0.09);
	border-right: 2px solid rgba(0,0,0,0.09);
 }
.section.content > .link:hover {
	background-color: rgba(255,255,255,0.9);
 }
.section.content > .link:before {
	content: "";
	display: table;
	padding-top: 100%;
 }
.section.content > .link > .div{
	display: flex;
	flex-direction: column;
	align-items: center;
 }

@media (min-width: 0em)  and (max-width: 33em) {
	.section.content { 
		grid-template-columns: 1fr 1fr;
	 }
	.section.content > .link:nth-of-type(2n){
		border-right: 0px transparent;
	 }
	.section.content > .link:nth-child(2n+1):nth-last-child(-n+2),
	.section.content > .link:nth-child(2n+1):nth-last-child(-n+2) ~ .link {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 33em) and (max-width: 44em) {
	.section.content { 
		grid-template-columns: 1fr 1fr 1fr;
	 }
	.section.content > .link:nth-of-type(3n){
		border-right: 0px transparent;
	 }
	.section.content > .link:nth-child(3n+1):nth-last-child(-n+3),
	.section.content > .link:nth-child(3n+1):nth-last-child(-n+3) ~ .link {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 44em) and (max-width: 59em) {
	.section.content { 
		grid-template-columns: 1fr 1fr;
	 }
	.section.content > .link:nth-of-type(2n){
		border-right: 0px transparent;
	 }
	.section.content > .link:nth-child(2n+1):nth-last-child(-n+2),
	.section.content > .link:nth-child(2n+1):nth-last-child(-n+2) ~ .link {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 59em) and (max-width: 74em) {
	.section.content { 
		grid-template-columns: 1fr 1fr;
	 }
	.section.content > .link:nth-of-type(2n){
		border-right: 0px transparent;
	 }
	.section.content > .link:nth-child(2n+1):nth-last-child(-n+2),
	.section.content > .link:nth-child(2n+1):nth-last-child(-n+2) ~ .link {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 74em) and (max-width: 89em) {
	.section.content { 
		grid-template-columns: 1fr 1fr 1fr;
	 }
	.section.content > .link:nth-of-type(3n){
		border-right: 0px transparent;
	 }
	.section.content > .link:nth-child(3n+1):nth-last-child(-n+3),
	.section.content > .link:nth-child(3n+1):nth-last-child(-n+3) ~ .link {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 89em) and (max-width: 119em) {
	.section.content { 
		grid-template-columns: 1fr 1fr 1fr;
	 }
	.section.content > .link:nth-of-type(3n){
		border-right: 0px transparent;
	 }
	.section.content > .link:nth-child(3n+1):nth-last-child(-n+3),
	.section.content > .link:nth-child(3n+1):nth-last-child(-n+3) ~ .link {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 119em) {
	.section.content { 
		grid-template-columns: 1fr 1fr 1fr 1fr;
	 }
	.section.content > .link:nth-of-type(4n){
		border-right: 0px transparent;
	 }
	.section.content > .link:nth-child(4n+1):nth-last-child(-n+4),
	.section.content > .link:nth-child(4n+1):nth-last-child(-n+4) ~ .link {
		border-bottom: 0px solid transparent;
	 }
 }

/* 	grid ---------------------------------------------------------------------------------------- 

	-

	refactored: 16/10/17 -- dp
   	-------------------------------------------------------- */

.main.flex {
	display: flex;
	flex-direction: column;
 }

/* 	grid ---------------------------------------------------------------------------------------- 

	-

	refactored: 16/10/17 -- dp
   	-------------------------------------------------------- */

.main.flex > .section.display {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: min-content;
 }
.main.flex > .section.display > .div {
	border-bottom: 2px solid rgba(0,0,0,0.09);
	border-right: 2px solid rgba(0,0,0,0.09);
 }

@media (min-width: 0em)  and (max-width: 33em) {
	.main.flex > .section.display { 
		grid-template-columns: 1fr 1fr;
	 }
	.main.flex > .section.display > .div:nth-of-type(2n){
		border-right: 0px transparent;
	 }
	.main.flex > .section.display > .div:nth-child(2n+1):nth-last-child(-n+2),
	.main.flex > .section.display > .div:nth-child(2n+1):nth-last-child(-n+2) ~ .div {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 33em) and (max-width: 44em) {
	.main.flex > .section.display { 
		grid-template-columns: 1fr 1fr 1fr;
	 }
	.main.flex > .section.display > .div:nth-of-type(3n){
		border-right: 0px transparent;
	 }
	.main.flex > .section.display > .div:nth-child(3n+1):nth-last-child(-n+3),
	.main.flex > .section.display > .div:nth-child(3n+1):nth-last-child(-n+3) ~ .div {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 44em) and (max-width: 59em) {
	.main.flex > .section.display { 
		grid-template-columns: 1fr 1fr;
	 }
	.main.flex > .section.display > .div:nth-of-type(2n){
		border-right: 0px transparent;
	 }
	.main.flex > .section.display > .div:nth-child(2n+1):nth-last-child(-n+2),
	.main.flex > .section.display > .div:nth-child(2n+1):nth-last-child(-n+2) ~ .div {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 59em) and (max-width: 74em) {
	.main.flex > .section.display { 
		grid-template-columns: 1fr 1fr;
	 }
	.main.flex > .section.display > .div:nth-of-type(2n){
		border-right: 0px transparent;
	 }
	.main.flex > .section.display > .div:nth-child(2n+1):nth-last-child(-n+2),
	.main.flex > .section.display > .div:nth-child(2n+1):nth-last-child(-n+2) ~ .div {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 74em) and (max-width: 89em) {
	.main.flex > .section.display { 
		grid-template-columns: 1fr 1fr 1fr;
	 }
	.main.flex > .section.display > .div:nth-of-type(3n){
		border-right: 0px transparent;
	 }
	.main.flex > .section.display > .div:nth-child(3n+1):nth-last-child(-n+3),
	.main.flex > .section.display > .div:nth-child(3n+1):nth-last-child(-n+3) ~ .div {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 89em) and (max-width: 119em) {
	.main.flex > .section.display { 
		grid-template-columns: 1fr 1fr 1fr;
	 }
	.main.flex > .section.display > .div:nth-of-type(3n){
		border-right: 0px transparent;
	 }
	.main.flex > .section.display > .div:nth-child(3n+1):nth-last-child(-n+3),
	.main.flex > .section.display > .div:nth-child(3n+1):nth-last-child(-n+3) ~ .div {
		border-bottom: 0px solid transparent;
	 }
 }
@media (min-width: 119em) {
	.main.flex > .section.display { 
		grid-template-columns: 1fr 1fr 1fr 1fr;
	 }
	.main.flex > .section.display > .div:nth-of-type(4n){
		border-right: 0px transparent;
	 }
	.main.flex > .section.display > .div:nth-child(4n+1):nth-last-child(-n+4),
	.main.flex > .section.display > .div:nth-child(4n+1):nth-last-child(-n+4) ~ .div {
		border-bottom: 0px solid transparent;
	 }
 }

/* 	btnGrp ------------------------------------------------------------------------------------- 

	- .btnList is a custom use of the list element to create a unique combination of button styles

   	last updated: 16/10/17 - admin - candidate -- dp
   	-------------------------------------------------------- */

.main.flex > .section.btnGrp {
	display: grid;
	grid-template-columns: min-content min-content 1fr;
	grid-auto-rows: min-content;
	grid-gap: .75em;
	margin-top: auto;
	border-top: 1px solid rgba(0,0,0,0.05);
	background-color: rgba(0,0,0,0.01);
 }
.main.flex > .section.btnGrp > .div > .btn {
	display: block;
	float: right;
 }
.main.flex > .section.btnGrp > .div > .btn + .btn {
	border-right: 0px solid transparent;
 }
.main.flex > .section.btnGrp > .div > .btn + .span {
	border-right: 0px solid transparent;
 }
.main.flex > .section.btnGrp > .div > .span {
	display: block;
	color: rgba(0,0,0,0.4);
	padding: .75em 1em;
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,0,0,0.15);
	text-align: right;
	float: right;
 }




/* 	-------------------------------------------------------------------------------------------- */
/* 	--------------------------------------- FORM STYLING --------------------------------------- */
/* 	-------------------------------------------------------------------------------------------- */


/*	all input field styling -------------------------------------------------------------------- 
	
	*** Documentation goes here ***

   	last updated: 17/04/17 - admin - candidate -- dp
   	-------------------------------------------------------- */

.form .field > .input,
.form .field > .textarea {
	background-color: rgba(255,255,255,.1);
	border: 1px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	color: rgba(255,255,255,0.6);
	padding: .75em 1em;
	font-family: 'latoregular';
 }

.form .field > .input:focus,
.form .field > .textarea:focus {
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #4CBDDC;
	color: rgba(0,0,0,0.7);
 }

.form .field .select {
	background-color: rgba(255,255,255,.1);
	border: 1px solid rgba(0,0,0,0.2);
    background-clip: padding-box;
	color: rgba(255,255,255,0.6);
	padding: .75em 1em;
	font-family: 'latoregular';
 }
.form .field .select:focus {
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #4CBDDC;
	color: rgba(0,0,0,0.7);
 }

.form .field > .textarea {
	height:9em;
 }

/* 	radio button colour picker ----------------------------------------------------------------- 
	
	- colourPicker unique radio button styling

	- now using additional swatch element as difficulties with pseudo elements & backgrounds colours
	- remove background from parent element but retain on pseudo element dynamically, can't be done i think
	- pseudo elements can provide out of focus icons if font size set on parent does not equal whole number
	- pseudo elements can produce warped bullets again if the font size effects size of pseudo element
	- using a bullet in it's own element ensures font size will not impact overall size
	- you can change background colours by adding classes without messy pseudo solutions
	- down side, an empty element is required, does it scale with existing fonts?

	- colour picker is a simple square with no text so no swatch element was needed

	checked: 11/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.colourPicker > .div {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-auto-rows: 1fr;
	grid-column-gap: .375em;
	grid-row-gap: .375em;
	background-color:rgba(255,255,255,.4);
	border: 1px solid rgba(0,0,0,0.09);
	padding: .5em;
 }
.colourPicker > .div > .field > .radiobtn + .label {
	border: 1px solid rgba(0,0,0,0.3);
 }
.colourPicker > .div > .field > .radiobtn + .label:before {
	content: '';
	display: table;
	padding-top: 100%;
 }
.colourPicker > .div > .field > .radiobtn:focus + .label {
	box-shadow: inset 0 0 0 3px #fff;
	border: 1px solid rgba(0,0,0,0.4);
 }
.colourPicker > .div > .field > .radiobtn:checked + .label {
	box-shadow: inset 0 0 0 2px #fff;
	border: 1px solid rgba(0,0,0,0.4);
 }

/* 	checkbox labels ---------------------------------------------------------------------------- 
	
	- checkbox must be placed inside a field div as it requires absolute positioning

	- swatch adopted for more accurate check boxes, icons, radio buttons 
	- txt size can have impact on consistancy of pseudo elements blurring can occur when not whole pixels
	- use label to get max coverage for clickable area including type 
	- use swatch element and attach to label using "+" adjacent selector
	- although entire label activates checkbox set checkbox size to mirror swatch swatch for consistancy, might change
	- core checkbox properties are set in forms style sheet

	- swatch is by default a absolutely positioned element
	- target style and position in each unique case of checkbox

	checked: 17/04/2016 - core - candidate -- dp
   	-------------------------------------------------------- */

.form > .fieldset.checkLab > .div {
	border: 1px solid rgba(0,0,0,0.09);
	background-color:rgba(255,255,255,.7);
	padding: 0 1em;
	height: 15.375em;
	overflow: auto;
 }
.form > .fieldset.checkLab > .div > .field {
	border-bottom: 1px dashed rgba(0,0,0,0.15);
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
 }
.form > .fieldset.checkLab > .div > .field:last-of-type {
	border-bottom: 0px solid transparent;
 }

.form > .fieldset.checkLab > .div > .field .checkbox {
	// display: none;
 }
.form > .fieldset.checkLab > .div > .field .checkbox + .label {
	color: rgba(0,0,0,0.6);
	padding: .625em 0 .625em .75em;
	flex: 1;
	order: 2;
 }
.form > .fieldset.checkLab > .div > .field .checkbox + .label + .swatch {
	order: 1;
	border: 1px solid rgba(0,0,0,0.3);
	height: .5em;
	width: 1.25em;
 }

.form > .fieldset.checkLab > .div > .field:hover .checkbox + .label,
.form > .fieldset.checkLab > .div > .field .checkbox:focus + .label {
	color: rgba(0,0,0,0.7);

 } 

.form > .fieldset.checkLab > .div > .field:hover .checkbox + .label + .swatch,
.form > .fieldset.checkLab > .div > .field .checkbox:focus + .label + .swatch {
	border: 1px solid rgba(0,0,0,0.4);
	box-shadow: inset 0 0 0 1px #fff;
 }

.form > .fieldset.checkLab > .div > .field .checkbox:checked + .label {
	color: rgba(0,0,0,0.7);
 } 
.form > .fieldset.checkLab > .div > .field .checkbox:checked + .label::after {
	content: 'selected';
	float: right;
 }
.form > .fieldset.checkLab > .div > .field .checkbox:checked + .label + .swatch {
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: inset 0 0 0 1px #fff;
 }
.form > .fieldset.checkLab > .div > .field .checkbox:checked:focus + .label {
	color: rgba(0,0,0,0.8);
 } 
.form > .fieldset.checkLab > .div > .field .checkbox:checked:focus + .label + .swatch {
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: inset 0 0 0 1px #fff;
 }

/*	specific ----------------------------------------------------------------------------------- 
	
	Custom fields used in on the product page cell focuses perfectly over border

	- fields borders to appear like a table with no border spacing
	- top and left fields have a 1px negative margin
	- use inset box shaddow to create borders and use transparent borders on fields
	- when focused cell should cover cell border exactly for both cells

	- this is very niffty bit of css... don't touch fragile.

	checked: 25/06/17 - core - candidate -- dp
   	-------------------------------------------------------- */

.form > .fieldset.custField > .div {
	display: flex;
	flex-flow: row wrap;
	background-color: rgba(255,255,255,.7);
	box-shadow: -1px -1px 0 rgba(0,0,0,0.09) inset;
 }
.form > .fieldset.custField > .div > .field {
	margin: 0;
	box-shadow: inset 1px 1px 0 rgba(0,0,0,0.09);
	margin-top: -1px;
 }
.form > .fieldset.custField > .div > .field:nth-child(2n+1) {
	flex-basis: 35%;
 }
.form > .fieldset.custField > .div > .field:nth-child(2n+2) {
	flex: 1 0 65%;
	margin-left: -1px;
 }

.form > .fieldset.custField > .div > .field > .input {
	border: 1px solid transparent;
	// border-left: 1px solid transparent;
	background-color: transparent;
 }
.form > .fieldset.custField > .div > .field > .input:focus {
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #4CBDDC;
	color: rgba(0,0,0,0.7);
 }

.form > .fieldset.custField > .div.salePrice > .field:first-of-type {
	flex-basis: 80%;
 }
.form > .fieldset.custField > .div.salePrice > .field:last-of-type {
	flex: 1 0 20%;
	margin-left: -1px;
 }

/* 	radio button ------------------------------------------------------------------------------- 

	- 

	- refer to bones--forms.css for core radio button defaults and usage guidelines

	checked: 09/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form > .fieldset.passwordList > .div {
	background-color: rgba(255,255,255,1);
	border: 1px solid rgba(0,0,0,0.09);
	color: rgba(0,0,0,0.6);
 }
.form > .fieldset.passwordList > .div > .field {
	margin: 1.25em;
	display: none;
 }
.form > .fieldset.passwordList > .div > .field:first-of-type {
	display: block;
	margin: .75em 1.25em;
 }

/* 	radio button ------------------------------------------------------------------------------- 

	- refer to bones--forms.css for core radio button defaults and usage guidelines

	checked: 09/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form > .fieldset.starList {
	margin: 1.25em;
 }
.form > .fieldset.starList > .field {
	overflow: hidden;
	float: left;
	position: relative;
	margin: 0;
 }

/*	imgQuality --------------------------------------------------------------------------------- 
	
	Specific to the range slider and animated radio buttons
   	
   	-------------------------------------------------------- */

.form .imgQuality > .para.note {
	clear: both;
	margin-top: .75em;
 }
.form .imgQuality > .range {
	margin: .15em 0 0 0;
 }

/* 	radio button user privileges --------------------------------------------------------------- 

	- refer to svg icon used at top of the page

	checked: 09/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form .field > .radiobtn.star + .label {
	position: relative;
	height: 24px;
	width: 24px;
	float:left;
 }
.form .field > .radiobtn.star + .label > .icon {
	height: 24px;
	width: 24px;

	stroke-width: 0;
	stroke: currentColor;
	fill: rgba(255,255,255,0.4);
 }
.form .field > .radiobtn.star + .label > .icon + .icon {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	stroke-width: 0;
	stroke: currentColor;
	fill: rgba(0,0,0,0.4);
 }

.form .field > .radiobtn.star:checked + .label > .icon {
	fill: #FFD700;
 }
.form .field > .radiobtn.star:checked + .label > .icon + .icon {
	fill: rgba(0,0,0,0.4);
 }

/* 	radio button ------------------------------------------------------------------------------- 

	- 

	- refer to bones--forms.css for core radio button defaults and usage guidelines

	checked: 09/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.aside .form > .min.para.success {
	background-color: #a3f416;
	border:1px solid #507c04;
	color: #507c04;
	padding: .75em 1em;
	text-align: center;
	margin-bottom: 0;
 }

.aside .form > .min.para:before {
	//content: "";
 }

.aside .form > .min.para.error {
	background-color: #ff4b30;
	border:1px solid #a51600;
	color: #a51600;
	padding: .75em 1em;
	text-align: center;
	margin-bottom: 0;
 }
.aside .form > .min.para.error > .span {
	padding-bottom: .5em;
	display: block;
	color: #a51600;
 }

.aside .form > .div {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr min-content;
	grid-row-gap: 1.25em;
	margin: 0;
 }

@media (min-width: 30em) {

	.aside .form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: min-content;
		grid-row-gap: 1.25em;
		column-gap: 1.25em;
		margin: 0;
	 }
	.aside .form > .button {
		grid-column: 2; 
	 }
	.aside .form > .div > .field > .textarea {
		flex: 1;
	 }

	.aside .form > .min.para.success,
	.aside .form > .min.para.error {
		grid-column-start: 1; 
  		grid-column-end: 3; 
	 }

 }

@media (min-width: 90em) {

	.aside .form {
		display: grid;
		//font-size: 1rem;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		grid-row-gap: 1.25em;
		margin: 0;
	 }

	.aside .form > .div {
		grid-auto-rows: unset;
	 }

	.aside .form > .div:last-of-type {

		grid-auto-rows: 10em min-content;
		grid-row-gap: 1.25em;
		margin: 0;
	 }

	.aside .form > .min.para.success,
	.aside .form > .min.para.error {
		grid-column-start: 1; 
  		grid-column-end: 2; 
	 }

 }


/* 	radio button ------------------------------------------------------------------------------- 

	- bullet default styling

	checked: 18/10/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form .field > .radiobtn.bullet + .label {
	display: flex;
	align-items: center;
	color: rgba(255,255,255,0.4);
	font-family: 'latolight';
 }
.form .field > .radiobtn.bullet + .label::before {
	content: " ";
	border-radius: 50%;
	background-color: rgba(255,255,255,0.2);
	background-clip: content-box;
	border: 1px solid rgba(0,0,0,0.2);
	height: 1.25em;
	width: 1.25em;
	margin-right: .5em;
 }
.form .field > .radiobtn.bullet:focus + .label {
	//color: rgba(255,255,255,0.7);
 }
.form .field > .radiobtn.bullet:focus + .label::before {
	padding: .2em;
 }
.form .field > .radiobtn.bullet:checked + .label {
	color: #4CBDDC;
 }
.form .field > .radiobtn.bullet:checked + .label::before {
	background-color: #6DBCDB;
	border: 1px solid #4CBDDC;
	padding: 3px;
 }

/* 	radio button ------------------------------------------------------------------------------- 

	- bullet default styling

	checked: 18/10/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form .field > .checkbox.cube + .label {
	display: flex;
	align-items: center;
	color: rgba(0,0,0,0.5);
 }
.form .field > .checkbox.cube + .label::before {
	background-color: rgba(255,255,255,0.6);
	background-clip: content-box;
	border: 1px solid rgba(0,0,0,0.2);
	height: 1.25em;
	width: 1.25em;
	margin-right: .5em;
 }
.form .field > .checkbox.cube:focus + .label {
	color: rgba(0,0,0,0.7);
 }
.form .field > .checkbox.cube:focus + .label::before {
	padding: .2em;
 }
.form .field > .checkbox.cube:checked + .label {
	color: rgba(0,0,0,0.7);
 }
.form .field > .checkbox.cube:checked + .label::before {
	background-color: #6DBCDB;
	border: 1px solid rgba(0,0,0,0.4);
	padding: 3px;
 }

/* 	Label Table -------------------------------------------------------------------------------- 
	
	- combined label with table to make a label table!
	- appears to work the same without all the table properties?
	- need to check how dispaly table-cell work on it's own, what effect does display table have?

	- providing total substitute for form elements that behave differently accross browsers
	- best bet is to hide element and use a table to create a equal height multi col form field 

	- Need to research how tables behave across browser 100% width fluid columns
	- Have set a cell to 1% width and on the other cell no width
	- use cell as with 1% as wrapper for dynamic content, cell expands to take content
	- something about 1% of column in comparision to 
	
	checked: 19/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form .field.imgBase {
	display: flex;
	flex-flow: row wrap;
 }
.form .field.imgBase > .heading {
	flex-basis: 100%;
 }
.form .field.imgBase > .input {
	text-align: right;
	flex: 1;
 }
.form .field.imgBase > .div {
	width: auto;
	background-color: #6DBCDB;
 }
.form .field.imgBase > .div > .select {

 }
.form .field.imgBase > .span {
	padding: .75em 1em;
	color: rgba(0,0,0,0.6);
	background-color: rgba(255,255,255,0.7);
	border: 1px solid rgba(0,0,0,0.09);
	border-left-width: 0px;
 }

.form .field.imgBase > .div > .select:hover,
.form .field.imgBase > .div > .select:active {
	//background-color: #6DBCDB;
	box-shadow: inset 0 0 0 1px #fff;
	border: 1px solid rgba(0,0,0,0.4);
	color: rgba(0,0,0,0.6);
 }
.form .field.imgBase > .select:focus {
	background-color: transparent;
 }

/* 	Label Table -------------------------------------------------------------------------------- 
	
	- combined label with table to make a label table!
	- appears to work the same without all the table properties?
	- need to check how dispaly table-cell work on it's own, what effect does display table have?

	- providing total substitute for form elements that behave differently accross browsers
	- best bet is to hide element and use a table to create a equal height multi col form field 

	- Need to research how tables behave across browser 100% width fluid columns
	- Have set a cell to 1% width and on the other cell no width
	- use cell as with 1% as wrapper for dynamic content, cell expands to take content
	- something about 1% of column in comparision to 
	
	checked: 19/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form .field.uploadBar {
	
 }
.form .field.uploadBar > .file {
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	width: 0.1px;
	z-index: -1;
 }
.form .field.uploadBar > .para:last-of-type {
	margin-bottom: 1.25em;
 }
.form .field.uploadBar > .label {
	display: flex;
	flex-direction: row;
 }
.form .field.uploadBar > .label > .div {
	border: 1px solid rgba(0,0,0,0.2);
	background-color: rgba(255,255,255,0.7);
	border-right-width: 0px;
	flex: 1;
 }
.form .field.uploadBar > .label > .div > .span{
	display: block;
	padding: .75em 1em;
	color: rgba(0,0,0,0.6);
 }
.form .field.uploadBar > .label > .btn {
	display: block;
 }
.form .field.uploadBar > .label:hover > .div {
	border-color: #4CBDDC;
	background-color: rgba(255,255,255,0.9);
	color: rgba(0,0,0,0.6);
 }
.form .field.uploadBar > .label:hover > .btn {
	box-shadow: inset 0 0 0 1px #fff;
 }

/* 	-------------------------------------------------------------------------------------------- */
/* 	------------------------------------ GENERIC COMPONENTS ------------------------------------ */
/* 	-------------------------------------------------------------------------------------------- */




/* 	Message States ----------------------------------------------------------------------------- 
	
	- Colour styles only

	checked: 20/10/17 - candidate -- dp
   	-------------------------------------------------------- */

.span.message {
	display: block;
	border:1px solid rgba(0,0,0,0.1);
	color:rgba(0,0,0,0.5);
	padding: .75em 1em;
	margin: 0;
 }
.span.message.error   {
	background-color: rgb(255,81,58);
 }
.span.message.warning {
	background-color: rgb(251,188,5);
 }
.span.message.success {
	background-color: rgb(98,255,142);
 }

.span.unapproved {
	color: OrangeRed;
 }
.span.approved {
	color: LimeGreen;
 }
.span.date {
	font-style: italic;
 }

.wrapBtn {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.exception::before {
	content: "Exception: ";
	font-weight: bold;
}


/*	specific ----------------------------------------------------------------------------------- 

	- 

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

.div.someName {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	border-top: 1px solid rgba(0,0,0,0.09);
	border-bottom: 1px solid rgba(0,0,0,0.09);
 }
.div.someName > .swatch {
	display: block;
	height: .5rem;
	width: 1.25rem;
	border: 1px solid rgba(0,0,0,0.3);
 }
.div.someName > .para {
	padding: .75em 0 .75em 1em;
	margin-bottom: 0;
 }
.div.someName > .para:last-of-type {
	margin-left: auto;
 }