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

	- Generic form styling used throughout website
	- classes have been listed from the required root element to the target element
	- All fields require at least one fieldset and all fieldsets will be used inside a form
	- combinators used for elements inside field as 
	- Use this setup for all input field, text area fields, radio buttons, check boxes

	https://www.w3.org/community/webed/wiki/CSS/Selectors

	- .form 		= default browser font size as browsers have variable default font sizes for input fields. All form elements have the class form
					  check the 0.01em setting? Could be 100% on input elements and a hack to ensure border is displayed on right hand side
	- .fieldset		= Groups related field elements in a form, use margin on bottom becuase outer element so you can collapse borders
	- .legend		= Defines a heading for a specific group of fields inside a fieldset
  	- .field		= The form and field classes are not connected by child combinator this allows fields to be wrapped in divs
  					  The field class is required to wrap all input elements as position is set to relative
  					  Not all fields require a fieldset but they should have one - check this...

  	- .input		= All input class elements must be wrapped in a field class element
  	- .label		= ???????
	- .textarea		= Textarea has height issues, looking a javascript solution
	- .radio-btn	= All radio button are combined with a label element, native button is hidden and label simulates styling
	- .check-box	= All checkboxes are combined with a label element, native button is hidden and label simulates styling
	- .select		= dropdown cannot be styled but a suitable option is provided
	- .upload-bar	=
	- .range		= 
	- .screen		= Vision impared / screen readers / default setting is display none.

	- .specialised 	= Honeypot field to capture spam

	-----------------------------------------------------------------------------------------

	<form>			Defines an HTML form for user input
	<input>			Defines an input control
	<textarea>		Defines a multiline input control (text area)
	<label>			Defines a label for an <input> element
	<fieldset>		Groups related elements in a form allows for group headings
	<legend>		Defines a caption for a <fieldset> element
	<select>		Defines a drop-down list
	<optgroup>		Defines a group of related options in a drop-down list
	<option>		Defines an option in a drop-down list
	<button>		Defines a clickable button
	<datalist>		Specifies a list of pre-defined options for input controls
	<keygen>		Defines a key-pair generator field (for forms)
	<output>		Defines the result of a calculation

	checked: 20/5/2015 - core - research -- dp
   	----------------------------------------------------------------------------------------- */


/* 	-------------------------------------------------------------------------------------------- */
/* 	---------------------------------- DEFAULT CLASS SETTINGS ---------------------------------- */
/* 	-------------------------------------------------------------------------------------------- */


/* 	form --------------------------------------------------------------------------------------- 

	- all form elements require the form class decendant selectors will only work if associated with correct parent

	- child combinators used to confirm expected layout with elements
	- class names reflect element names except for field as no field element available

	- an input class must be wrapped in a field class and a field class must be wrapped in a fieldset class
	- a fieldset does require to be wrapped in a form but the fieldset does not have to be a direct decendant
	- this allows for forms to be split into columns if required

	- font size was set to rems to provide a consistant base may not scale as expected
	- some settings may require review

	At present, some difficulties remain when using CSS with forms. These problems can be divided in three categories

	research these...

	https://www.w3.org/TR/2011/WD-html5-author-20110705/the-form-element.html
	https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms
	https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms

	created: 20/5/2015 - updated: 12/5/2017 - research -- dp
   	----------------------------------------------------------------------------------------- */

.form {
	font-size: 1rem;
	display: block;
	margin: 0;
	padding: 0;
 }

/* 	fieldset ----------------------------------------------------------------------------------- 

	- You cannot collapse margins on fieldsets as alot of default browser styling use as wrapper
	- Last field of a fieldset will hold buttons so remove margin on bottom
	- fieldset has a default border be careful
	- fieldset produces a unique heading when using legend element
	- add form class to declaration because fieldset can only be used inside a form
	- padding with .1em is for collapsing margins but margins don't collapse!

	https://thatemil.com/blog/2015/01/03/reset-your-fieldset/

	https://www.w3.org/TR/2011/WD-html5-author-20110705/the-fieldset-element.html
	https://www.w3.org/TR/2011/WD-html5-author-20110705/forms.html#categories

	checked: 20/5/2015 - core - research -- dp
   	----------------------------------------------------------------------------------------- */

.fieldset {
	border: 0;
	padding: 0.01em 0 0 0;
	padding: 0;
	min-width: 0;
	margin: 0;

 }

/* 	field -------------------------------------------------------------------------------------- 

	- cannot define with selectors when wanting to refer to specific element as it has an effect on specifity and makes difficult to combine
	- field is a generic wrapper with relative positioning for input or label elements that may require absolute positioning
	- add field class to a div and use to wrap all form element, field class will indicate a form element is inside 

	- need to confirm if user input styling varies to much these days
	- tabindex could be used to allow focus on an outer div while targeting input element
	- form elements styling may have alot of bugs removed these days 

	https://www.w3.org/TR/2011/WD-html5-author-20110705/the-form-element.html

	https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
	
	checked: 12/5/2017 - core - research -- dp
   	----------------------------------------------------------------------------------------- */

.field {
	display: block;
	position: relative;
	padding: 0;
	margin:0 0 1em 0;
	border: none;
 }

/* 	legend ------------------------------------------------------------------------------------- 

	- name of the group is given by the first legend element that is a child of the fieldset element
	- use child selector with legend class because it must be inside a fieldset

	https://www.w3.org/TR/2011/WD-html5-author-20110705/the-legend-element.html

	checked: 20/5/2015 - core - research -- dp
   	----------------------------------------------------------------------------------------- */

.legend {
	padding: 0;
	display: table;
	margin-bottom:.75em;
 }

/* 	label -------------------------------------------------------------------------------------- 

	- cannot define with selectors when wanting to refer to specific element as it has an effect on specifity and makes difficult to combine
	- The label represents a caption in a user interface
	- The label element has been widely used as a substitute for form elements because of browser rendering differences
	- Labels are not as commonly used to style input fields as they were but are still used to substitute checkboxes and radio buttons
	- The caption can be associated with a specific form control, either using the for attribute, or by putting the form control inside the label element itself

	https://www.w3.org/TR/2011/WD-html5-author-20110705/the-label-element.html

	checked: 20/5/2015 - core - research -- dp
   	----------------------------------------------------------------------------------------- */

.label {
	cursor: pointer;
	display: block;
 }

/* 	screen ------------------------------------------------------------------------------------- 

	- invisable element for screen readers

	checked: 20/5/2015 - core - research -- dp
   	----------------------------------------------------------------------------------------- */

.form .fieldset .field .screen {
	font-size: 0;
	float:left;
 }

/* 	input -------------------------------------------------------------------------------------- 
	
	** Needs review and documentation update **

	- colour property used to overwrite, not sure about this...?

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

.form .fieldset .field > .input {
	border-radius: 0;
	background-color: transparent;
	display: block;
	cursor: text;
	// line-height: inherit;
	letter-spacing: normal;
	margin: 0;
	padding: 0;
	outline: none;
	text-shadow:none;
	text-align: left; /* as backup */ text-align: start;
	text-indent: 0px;
	word-spacing: normal;
	white-space: nowrap;
	width: 100%;

	overflow: hidden;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
 }
.form .fieldset .field > .input::-webkit-input-placeholder {
	color: rgba(0,0,0,0.3);
 }
.form .fieldset .field > .input:-moz-placeholder {
	color: rgba(0,0,0,0.3);
 }
.form .fieldset .field > .input::-moz-placeholder {
	color: rgba(0,0,0,0.3);
 }
.form .fieldset .field > .input:-ms-input-placeholder {
	color: rgba(0,0,0,0.3);
 }

.form .fieldset .field > .input:focus {
	outline: 0;
 }
.form .fieldset .field > .input:focus::-webkit-input-placeholder {
	color: #000000; opacity: 0.8;
 }
.form .fieldset .field > .input:focus:-moz-placeholder {
	color: #000000; opacity: 0.8;
 }
.form .fieldset .field > .input:focus::-moz-placeholder {
	color: #000000; opacity: 0.8;
 }
.form .fieldset .field > .input:focus:-ms-input-placeholder {
	color: #000000; opacity: 0.8;
 }

.form .fieldset .field > .input.error {
	border: 1px solid red;
 }
.form .fieldset .field > .input.success {
	border: 1px solid green;
 }
.form .fieldset .field > .input.specialised {
	display: none !important;
 }

/* 	textarea ----------------------------------------------------------------------------------- 
	
	** Needs review and documentation update **

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

.form .fieldset .field > .textarea {
	border-radius:0;
	cursor: text;
	display: block;
	line-height: 1.333;
	letter-spacing: normal;
	outline: none;
	overflow-x: hidden;
	text-shadow:none;
	text-align: left; /* fallabck */
	text-align: start;
	text-indent: 0px;
	vertical-align: bottom;
	word-spacing: normal;
	width: calc(100% - .5px);
	max-width: 100%;

	-webkit-appearance:none; 
	-webkit-border-radius:0;
 }
.form .fieldset .field > .textarea::-webkit-input-placeholder {
	color: rgba(0,0,0,0.3); 
 }
.form .fieldset .field > .textarea:-moz-placeholder {
	color: rgba(0,0,0,0.3); 
 }
.form .fieldset .field > .textarea::-moz-placeholder {
	color: rgba(0,0,0,0.3); 
 }
.form .fieldset .field > .textarea:-ms-input-placeholder {
	color: rgba(0,0,0,0.3); 
 }

.form .fieldset .field > .textarea:focus {
	outline:0;
 }
.form .fieldset .field > .textarea:focus::-webkit-input-placeholder {
	color: #000000; opacity: 0.8;
 }
.form .fieldset .field > .textarea:focus:-moz-placeholder {
	color: #000000; opacity: 0.8;
 }
.form .fieldset .field > .textarea:focus::-moz-placeholder {
	color: #000000; opacity: 0.8;
 }
.form .fieldset .field > .textarea:focus:-ms-input-placeholder {
	color: #000000; opacity: 0.8;
 }

.form .fieldset .field > .textarea.error {
	border: 1px solid red;
 }
.form .fieldset .field > .textarea.success {
	border: 1px solid green;
 }

/* 	radio button ------------------------------------------------------------------------------- 
	
	Radio button styling uses a combination of two elements to create unique radio buttons

	- radio button sits on top layer with opacity set to 0
	- radio button is rendered differently across browsers so style label instead
	- label is attached to a specific form control through the use of the for attribute
	- radiobtn and label tags are used together to create unique types of radio button
	- radiobtn must be placed inside a field div as it requires absolute positioning
	- core properties are listed as default

	guidelines
	- radiobtn must be placed inside a field div as it requires absolute positioning
	- note positioning, input field must come before label
	- visable styling occurs on label only
	- radiobtn covers the label for enhanced clickable area

	link: https://www.w3.org/TR/WCAG20-TECHS/H44.html

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

.form .fieldset .field > .radiobtn {
	cursor: pointer;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
	opacity: 0;
	z-index: 100;

	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
 }
.form .fieldset .field > .radiobtn + .label {
	cursor: pointer;
	display: block;
 }

/* 	checkbox ----------------------------------------------------------------------------------- 

	- checkbox must be placed inside a field div as it requires absolute positioning
	- label must be positioned below the checkbox element
	- swatch span must be placed below the label element

	- 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

	** Needs review and documentation update - see above for furthur abstraction **

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

.form .fieldset .field .checkbox {
	display: inline-block;
	cursor: pointer;
	position: absolute;
	left: 0;
	opacity: 0;
	vertical-align: middle;
	z-index: 100;
	margin: 0;
	padding: 0;

	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
 }
.form .fieldset .field .checkbox + .label {
	display: block;
	cursor: pointer;
 }
.form .fieldset .field .checkbox + .label + .swatch {
	position: absolute;
	top: 50%;
	left: 0;
 }

/* 	select ------------------------------------------------------------------------------------- 

	** Needs review and documentation update **

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

.form .fieldset .field .select {
	display: block;
	border: 0px solid transparent;
	box-shadow: none;
	background: transparent;
	background-image: none;
	cursor: pointer;
	border-radius: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
 }
.form .fieldset .field .select:focus {
	outline: none;
 }

.form .fieldset .field .select + .icon-arrow:after {
	content: "";
	margin-top: -2px;
	height: 0;
	width: 0;
	position: absolute;
	top: 50%;
	right: 1em;

	border: solid transparent;
	border-color: rgba(0,0,0,0);
	border-top-color: rgba(0,0,0,0.3);
	border-width: 5px;

	z-index: 200;
 }
.form .fieldset .field .select:focus + .icon-arrow:after {
	content: "";
	margin-top: -7px;
	height: 0;
	width: 0;
	position: absolute;
	top: 50%;
	right: 1em;
	border: solid transparent;
	border-color: rgba(0,0,0,0);
	border-bottom-color: rgba(0,0,0,0.3);
	border-width: 5px;
	z-index: 200;
 }

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

	** Needs review and documentation update **

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

.form .fieldset .field > .range {

	background-clip: border-box;
	background-color: transparent;
	display:block;
	width: 100%;
	position: relative;
	z-index: 2;
	padding: .25em 0 0;
	margin:0;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	outline: none;
 }
.form .fieldset .field > .range:focus {
	outline: none;
 }
.form .fieldset .field > .range.rtl {
	direction: rtl;
 }

/* 	chrome default styling --------------------------------------------------------------------- 

	::-webkit-slider-runnable-track		CSS pseudo-element represents the "track" (the groove in which the indicator slides) of an <input> of type="range".	
   	::-webkit-slider-thumb				CSS pseudo-element represents the "thumb" that the user can move within the "groove" of an <input> of type="range" to alter its numerical value.

	https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

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

.form .fieldset .field > .range::-webkit-slider-runnable-track {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,0,0,0.3);
	height: .625em;
	width: 100%;

	box-sizing: border-box;
 }
.form .fieldset .field > .range:focus::-webkit-slider-runnable-track {
	background: rgba(32,178,170,.6);
	border: 1px solid LightSeaGreen;
 }
.form .fieldset .field > .range::-webkit-slider-thumb {
	position:relative;
	border: none;
	height: 1em;
	width: 1em;
	border-radius: 50%;
	background: LightSeaGreen;
	margin-top: -0.25em;
	border: none;

	-webkit-appearance: none;
 }

/* 	firefox defaults styling ------------------------------------------------------------------- 

	::-moz-range-thumb		CSS pseudo-element represents the thumb, the virtual knob the user can move within the groove, or track, of an <input> of type="range" to alter its numerical value.
	::-moz-range-track		CSS pseudo-element represents the track, that is the groove in which the indicator of an <input> of type="range" slides.
	::-moz-range-progress	CSS pseudo-element represents the portion of the "track" (the groove in which the indicator aka thumb slides) of an <input> of type="range", which corresponds to values lower than the value currently selected by the thumb.

	:-moz-focusring		CSS pseudo-class is similar to the :focus pseudo-class, but it only matches an element if the element is currently focused and the user-agent has focus ring drawing enabled.

	https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track

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

.form .fieldset .field > .range::-moz-range-track {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,0,0,0.3);
	height: .625em;
	width: 100%;
	margin:0;

	box-sizing: border-box;
 }
.form .fieldset .field > .range:focus::-moz-range-track {
	background: rgba(255,255,255,0.6);
	border: 1px solid LightSeaGreen;
 }
.form .fieldset .field > .range::-moz-range-thumb {
	position:relative;
	border: none;
	height: 1em;
	width: 1em;
	border-radius: 50%;
	background: LightSeaGreen;
	margin: 0;
	padding:0;
	overflow: hidden;
	line-height: 0;
	-webkit-appearance: none;
 }
.form .fieldset .field > .range::-moz-range-progress {
	background-color: rgba(255,153,0,0.8);
	height:.625em;
 }
.form .fieldset .field > .range:focus::-moz-range-progress {
	background-color: rgba(255,153,0,0.7);
 }
.form .fieldset .field > .range::-moz-focus-outer {
	width:100%;
	border: none;
 }

/* 	microsoft defaults styling ----------------------------------------------------------------- 

   	Windows dev centre Pseudo-elements

	::-ms-fill-lower		Applies one or more styles to portion of the track of a input type=range control (also known as a slider control). The styles are applied to the control's track from its smallest value up to the value currently selected by the thumb. In a left-to-right layout, this is the portion of the track to the left of the thumb.
	::-ms-fill-upper		Applies one or more styles to portion of the track of a input type=range control (also known as a slider control). The styles are applied to the control's track from the value currently selected by the thumb up to the slider's largest value. In a left-to-right layout, this is the portion of the track to the right of the thumb.
	::-ms-thumb				Applies one or more styles to portion of the input type=range control (also known as a slider control) that the user drags.
	::-ms-ticks-after		Applies one or more styles to the tick marks after the slider track of an input type=range (also known as a slider) control. In a left-to-right layout, these are the ticks below the track. In a top-to-bottom layout, these are the ticks to the right of a track.
	::-ms-ticks-before		Applies one or more styles to the tick marks before the slider track of an input type=range control (also known as a slider control). In a left-to-right layout, these are the ticks above the track. In a top-to-bottom layout, these are the ticks to the left of a track.
	::-ms-tooltip			Applies one or more styles to the tooltip of a slider (input type=range).
	::-ms-track				Applies one or more styles to the track of an input type=range control (also known as a slider control).
	::-webkit-appearance	Changes the appearance of an element to resemble native user interface controls or removes native styling from element.

	https://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx
	https://msdn.microsoft.com/en-us/library/windows/apps/hh465796.aspx?f=255&MSPPError=-2147217396

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

.form .fieldset .field > .range::-ms-track {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,0,0,0.3);
	height: .625em;
	width: 100%;
	box-sizing: border-box;
 }
.form .fieldset .field > .range:focus::-ms-track {
	background: rgba(255,153,0,.6);
	border: 1px solid LightSeaGreen;
 }
.form .fieldset .field > .range::-ms-thumb {
	position:relative;
	border: none;
	height: 1em;
	width: 1em;
	border-radius: 50%;
	background: LightSeaGreen;
	margin-top: 0em;

	-webkit-appearance: none;
 }
.form .fieldset .field > .range::-ms-fill-lower {
	background: rgba(255,255,255,.4);
	background-color: rgba(255,153,0,0.4);
 }
.form .fieldset .field > .range::-ms-fill-upper {
	background: rgba(255,255,255,.4);
 }
.form .fieldset .field > .range:focus::-ms-fill-lower {
	background: rgba(255,255,255,.9);
	background-color: rgba(255,153,0,0.4);
 }
.form .fieldset .field > .range:focus::-ms-fill-upper {
	background: rgba(255,255,255,.9);
 }
.form .fieldset .field > .range::-ms-tooltip {
	// display: none;
 }
.form .fieldset .field > .range::-ms-ticks-before {
	// display: none;
 }
.form .fieldset .field > .range::-ms-ticks-after {
	// display: none;
 }

/* 	range tick styling ------------------------------------------------------------------------- 

	- Massive problems with using linear gradients on fluid containers.
	- Also background size does not like percentage based values. Chrome is the only browser that works as expected.
	- Have considered linear gradients with hairline design work better with containers that have whole or divisable numbers.
	- Possibally better results with fixed with containers as well
	- No show on mircosoft edge 
	- Missing final tick is Mozilla

	** Needs review and documentation update **

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

.ticks-1 {
	display: block;
    height:2em;
    background-clip: border-box;
    background-color:orange;
    background-image: 
    linear-gradient(90deg, rgba(255,0,0, 1) 1px, rgba(255,0,0, 0) 1px);
	background-repeat: repeat-x;
	background-position: left 0 top 0;
	background-origin: content-box; 
	background-size: 10% 2em;
	// padding:0 12px;
 }
.ticks-2 {
	display: block;
	height:2em;
	background-clip: border-box;
	background-color: green;
	background-image:
	-webkit-repeating-linear-gradient( 0deg,
		transparent 0px,
		transparent -webkit-calc(50% - 1px),
		rgba(0,0,255,0.7) -webkit-calc(50% - 1px),
		rgba(0,0,255,0.7) 50%,
		transparent 50%,
		transparent 100%
	);
	background-image:
	-ms-repeating-linear-gradient( 0deg,
		transparent 0px,
		transparent -ms-calc(50% - 1px),
		rgba(0,0,255,0.7) calc(50% - 1px),
		rgba(0,0,255,0.7) 50%,
		transparent 50%,
		transparent 100%
	);
	background-image:
	-moz-repeating-linear-gradient( 0deg,
		transparent 0px,
		transparent -moz-calc(50% - 1px),
		rgba(0,0,255,0.7) -moz-kit-calc(50% - 1px),
		rgba(0,0,255,0.7) 50%,
		transparent 50%,
		transparent 100%
	);
	background-origin: padding-box;
	background-position: center;
	background-repeat: repeat-y;
	background-size: 10% 2em;
	margin: 0 3px;
 }
.ticks-3 {
	display: block;
	background-clip: border-box;
	background-image:
	-webkit-repeating-linear-gradient( 0deg,
		transparent 0px,
		transparent -webkit-calc(50% - 1px),
		rgba(147,39,143,1) -webkit-calc(50% - 1px),
		rgba(147,39,143,1) 50%,
		transparent 50%,
		transparent 100%
	);
	background-origin: padding-box;
	background-position: center;
	background-repeat: repeat-x;
	background-size: 10% 2em;
	margin: 0 8px;
	padding:13px 0;
 }
.ticks-4 {
	background-clip: borber-box;
	background-image: -webkit-linear-gradient( 90deg, rgba(0,0,0,0.3) 1px, rgba(0,0,0,0) 1px);
	background-image: -ms-linear-gradient( 90deg, rgba(0,0,0,0.3) 1px, rgba(0,0,0,0) 1px);
	background-image: -moz-linear-gradient( 90deg, rgba(0,0,0,0.3) 1px, rgba(0,0,0,0) 1px);
	background-image: linear-gradient( 90deg, rgba(0,0,0,0.3) 1px, rgba(0,0,0,0) 1px);
	background-origin: border-box;
	background-position: left top;
	background-repeat: repeat-x;
	background-size: 10% 100%;
	bottom:0;
	display: block;
	left:0;
	right:0;
	top:0;
	position: absolute;
	margin-left: 0.5em;
	margin-right: 0.25em;
	// border-right: 1px solid red;
 }
.ticks-10 {
	background-clip: content-box;
	background-color: green;
	background-image: -webkit-linear-gradient( 90deg, rgba(0,0,0,0.3) 1px, rgba(0,0,0,0) 1px);
	background-image: -ms-linear-gradient( 90deg, rgba(0,0,0,0.3) 1px, rgba(0,0,0,0) 1px);
	background-image: -moz-linear-gradient( 90deg, rgba(0,0,0,0.3) 1px, rgba(0,0,0,0) 1px);
	background-image: linear-gradient( 90deg, rgba(0,0,0,0.3) 1px, rgba(0,0,0,0) 1px);

	background-origin: border-box;
	background-position: 10px top;
	background-repeat: repeat-x;
	background-size: 10% 100%;
	bottom:0;
	display: block;
	padding:0 0.5em;
	overflow: hidden;
 }

/* 	message states ----------------------------------------------------------------------------- 
	
	** Needs documentation update **

	checked: 14/01/17 - not completed -- dp
   	-------------------------------------------------------- */

.min.para.note,
.min.para.error,
.min.para.success {
	color:rgba(0,0,0,0.6);
	position: relative;
	text-align: left;
	padding-left: 4em;
 }

.min.para.note::before,
.min.para.error::before,
.min.para.success::before {
	font-weight: bold;
	left: 0;
	position: absolute;
 }

.min.para.note::before {
	content: 'Note:';
	color: LightSeaGreen;
 }
.min.para.error::before {
	content: 'Error:';
	color: rgb(255,81,58);
 }
.min.para.success::before {
	content: 'Pass:';
	color: rgb(5,193,46);
 }

/* --------------------------------------------------------------------------------------------- */
/* ---------------------------------- CUSTOMISE DEFAULT STATES --------------------------------- */
/* --------------------------------------------------------------------------------------------- */


















































/* 	Chrome default styling --------------------------------------------------------------------- 

	::-webkit-slider-runnable-track		CSS pseudo-element represents the "track" (the groove in which the indicator slides) of an <input> of type="range".	
   	::-webkit-slider-thumb				CSS pseudo-element represents the "thumb" that the user can move within the "groove" of an <input> of type="range" to alter its numerical value.

	https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

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



/*

volume range styling ----------------------------------------------------------------------- 

.form > .btn {
	// float:right;
 }
.field > .range-figure {
	//	background-color:rgba(255,255,255,0.4);
	border: 1px solid rgba(0,0,0,0.3);
	color: rgba(0,0,0,0.6);
	display:inline-block;
	margin-top: 1em;
	text-align: center;
	width:3em;
 }
.field.volume{
	text-align: right;
 }





.form .field.range-1 > .range::-webkit-slider-runnable-track {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,0,0,0.3);
	height: .625em;
	width: 100%;
	position:relative;
 }
.form .field.range-1 > .range::-webkit-slider-runnable-track:before {
	content:" ";
	display: block;
	height: 1.3em;
	background-image: linear-gradient(90deg, rgba(0,0,0,0.3) 1px, rgba(0,0,0, 0) 1px);
	background-repeat: repeat-x;
	background-position: left 0 top 0;
	background-origin: content-box;
	background-size: 10% 2em;
	margin: -.75em .375em 0 .375em;
	padding:0;
	position:absolute;
	top:0; left:0; right:0; bottom:0;

	z-index: -999;
 }

.form .field.range-1 > .range:focus::-webkit-slider-runnable-track {
	background: rgba(255,153,0,.6);
	border: 1px solid LightSeaGreen;
 }
.form .field.range-1 > .range:focus::-webkit-slider-runnable-track:before {
	background-image: linear-gradient(90deg, rgba(147,39,143,1) 1px, rgba(147,39,143,0) 1px);
 }

.form .field.range-1 > .range::-webkit-slider-thumb {
	position:relative;
	border: none;
	height: 1em;
	width: 1em;
	border-radius: 50%;
	background: orange;
	margin-top: 0em;

	-webkit-appearance: none;
 }
.form .field.range-1 > .range::-webkit-slider-thumb:before {
	content:" ";
	color: orange;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-bottom: 1em solid;
	margin: -.5em 0 0 0;
	height: 0;
	width: 0;
	position:absolute;
	top:0; left:0; right:0; bottom:0;

	-webkit-appearance: none;
 }
.form .field.range-1 > .range::-webkit-slider-thumb:after {
	content:" ";
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	height: .5em;
	width: .5em;
	border-radius: 50%;
	background: rgba(0,0,0, .1);
	margin: .25em;

 }
*/
/* 	Firefox defaults styling ------------------------------------------------------------------- 

	::-moz-range-thumb		CSS pseudo-element represents the thumb, the virtual knob the user can move within the groove, or track, of an <input> of type="range" to alter its numerical value.
	::-moz-range-track		CSS pseudo-element represents the track, that is the groove in which the indicator of an <input> of type="range" slides.
	::-moz-range-progress	CSS pseudo-element represents the portion of the "track" (the groove in which the indicator aka thumb slides) of an <input> of type="range", which corresponds to values lower than the value currently selected by the thumb.

	:-moz-focusring		CSS pseudo-class is similar to the :focus pseudo-class, but it only matches an element if the element is currently focused and the user-agent has focus ring drawing enabled.

	https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track

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

/*.form .field.range-1 > .range::-moz-range-track {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,0,0,0.3);
	height: .625em;
	width: 100%;
	position:relative;
 }
.form .field.range-1 > .range:focus::-moz-range-track {
	background: rgba(255,153,0,.6);
	border: 1px solid LightSeaGreen;
 }
.form .field.range-1 > .range::-moz-range-track:before {
	content:" ";
	display: block;
	height: 1.3em;
	background-image: linear-gradient(90deg, rgba(0,0,0,0.3) 1px, rgba(0,0,0, 0) 1px);
	background-repeat: repeat-x;
	background-position: left 0 top 0;
	background-origin: content-box;
	background-size: 10% 2em;
	margin: -.75em .375em 0 .375em;
	padding:0;
	position:absolute;
	top:0; left:0; right:0; bottom:0;

	z-index: -999;
 }

.form .field.range-1 > .range::-moz-range-thumb {
	position:relative;
	border: none;
	height: 1em;
	width: 1em;
	border-radius: 50%;
	background: orange;
	margin-top: 0em;

	-webkit-appearance: none;
 }
.form .field.range-1 > .range::-moz-range-thumb:before {
	content:" ";
	color: orange;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-bottom: 1em solid;
	margin: -.5em 0 0 0;
	height: 0;
	width: 0;
	position:absolute;
	top:0; left:0; right:0; bottom:0;

	-webkit-appearance: none;
 }
.form .field.range-1 > .range::-moz-range-thumb:after {
	content:" ";
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	height: .5em;
	width: .5em;
	border-radius: 50%;
	background: rgba(0,0,0, .1);
	margin: .25em;
 }

.form .field.range-1 > .range::-moz-range-progress {
	background-color: rgba(147,39,143,0.2);
	height:.625em;
 }
.form .field.range-1 > .range:focus::-moz-range-progress {
	background-color: rgba(147,39,143,0.2);
 }
.form .field.range-1 > .range:-moz-focusring{
	outline: 1px solid white;
	outline-offset: -1px;
 }*/

/* 	Microsoft defaults styling ----------------------------------------------------------------- 

   	Windows dev centre Pseudo-elements

	::-ms-fill-lower		Applies one or more styles to portion of the track of a input type=range control (also known as a slider control). The styles are applied to the control's track from its smallest value up to the value currently selected by the thumb. In a left-to-right layout, this is the portion of the track to the left of the thumb.
	::-ms-fill-upper		Applies one or more styles to portion of the track of a input type=range control (also known as a slider control). The styles are applied to the control's track from the value currently selected by the thumb up to the slider's largest value. In a left-to-right layout, this is the portion of the track to the right of the thumb.
	::-ms-thumb				Applies one or more styles to portion of the input type=range control (also known as a slider control) that the user drags.
	::-ms-ticks-after		Applies one or more styles to the tick marks after the slider track of an input type=range (also known as a slider) control. In a left-to-right layout, these are the ticks below the track. In a top-to-bottom layout, these are the ticks to the right of a track.
	::-ms-ticks-before		Applies one or more styles to the tick marks before the slider track of an input type=range control (also known as a slider control). In a left-to-right layout, these are the ticks above the track. In a top-to-bottom layout, these are the ticks to the left of a track.
	::-ms-tooltip			Applies one or more styles to the tooltip of a slider (input type=range).
	::-ms-track				Applies one or more styles to the track of an input type=range control (also known as a slider control).
	::-webkit-appearance	Changes the appearance of an element to resemble native user interface controls or removes native styling from element.

	https://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx

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

/*.form .field.range-1 > .range::-ms-track {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,0,0,0.3);
	height: .625em;
	width: 100%;
	position:relative;
 }
.form .field.range-1 > .range::-ms-track:before {
	content:" ";
	display: block;
	height: 1.3em;
	background-image: linear-gradient(90deg, rgba(0,0,0,0.3) 1px, rgba(0,0,0, 0) 1px);
	background-repeat: repeat-x;
	background-position: left 0 top 0;
	background-origin: content-box;
	background-size: 10% 2em;
	margin: -.75em .375em 0 .375em;
	padding:0;
	position:absolute;
	top:0; left:0; right:0; bottom:0;

	z-index: -999;
 }
.form .field.range-1 > .range:focus::-ms-track {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,0,0,0.3);
	height: .625em;
	width: 100%;
	position:relative;
 }
.form .field.range-1 > .range:focus::-ms-track:before {
	background-image: linear-gradient(90deg, rgba(147,39,143,1) 1px, rgba(147,39,143,0) 1px);
 }

.form .field.range-1 > .range::-ms-thumb {
	position:relative;
	border: none;
	height: 1em;
	width: 1em;
	border-radius: 50%;
	background: orange;
	margin-top: 0em;

	-webkit-appearance: none;
 }
.form .field.range-1 > .range::-ms-thumb:before {
	content:" ";
	color: orange;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-bottom: 1em solid;
	margin: -.5em 0 0 0;
	height: 0;
	width: 0;
	position:absolute;
	top:0; left:0; right:0; bottom:0;

	-webkit-appearance: none;
 }
.form .field.range-1 > .range::-ms-thumb:after {
	content:" ";
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	height: .5em;
	width: .5em;
	border-radius: 50%;
	background: rgba(0,0,0, .1);
	margin: .25em;

 }

.form .field.range-1 > .range::-ms-fill-lower {
	background: rgba(255,255,255,.4);
	background-color: rgba(147,39,143,0.2);
 }
.form .field.range-1 > .range::-ms-fill-upper {
	background: rgba(255,255,255,.4);
 }
.form .field.range-1 > .range:focus::-ms-fill-lower {
	background: rgba(255,255,255,.9);
	background-color: rgba(147,39,143,0.2);
 }
.form .field.range-1 > .range:focus::-ms-fill-upper {
	background: rgba(255,255,255,.9);
 }
.form .field.range-1 > .range::-ms-tooltip {
	// display: none;
 }
.form .field.range-1 > .range::-ms-ticks-before {
	height:10px;
	color: red;
	//display: none;
	margin-bottom: 5px;
 }*/

/* 	Volume range styling ---------------------------------------------------------------------- 

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


/*

	.form .field::before {
		content: " ";
		display: block;
		position: absolute;
		width:100%;
		top:0; right:0; bottom:0; left:0;
		background-clip: border-box;
		background-color: red;
		background-image: -ms-linear-gradient( 90deg, rgba(0,0,0,0.6) 1px, rgba(0,0,0,0) 1px);
		background-image: linear-gradient( 90deg, rgba(0,0,0,0.6) 1px, rgba(0,0,0,0) 1px);
		background-repeat: repeat-x;
		background-position: 0 0;
		background-origin: border-box;
		background-size: 10% 2em;
	 }

*/









/* 	background colours ------------------------------------------------------------------------- 
	
	Background colours
   	
   	-------------------------------------------------------- */



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

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

/*input[type=range]{
	background-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
 }
input[type=range]:focus {
    outline: none;
 }*/

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

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

/*
input[type=range]::-webkit-slider-runnable-track {
	height: .625em;
	border: 1px solid rgba(0,0,0,0.6);
	background-color: rgba(255,255,255,0.9);
	width: 100%;
 }
input[type=range]:focus::-webkit-slider-runnable-track {
    background: rgba(255,255,255,0.9);
 }
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: none;
	height: 1.25em;
	width: 1.25em;
	border-radius: 50%;
	background: LightSeaGreen;
	margin-top: -0.375em;
 }
*/

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

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

/*

input[type="range"]::-moz-range-track {
	background: rgba(255,255,255,.4);
	border-radius: 0px;
	height: .625em;
	border: 1px solid rgba(0,0,0,0.3);
	width: 100%;
 }
input[type="range"]::-moz-range-thumb {
	border: none;
	height: 1.25em;
	width: 1.25em;
	border-radius: 50%;
	border: 1px solid transparent;
	background: #88ba0b;
	margin-top: -0.75em;
 }
input[type="range"]:focus::-moz-range-track {
    background: rgba(255,255,255,1);
 }
input[type="range"]:-moz-focusring{
	outline: 1px solid white;
	outline-offset: -1px;
 }

*/

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

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

/*

input[type="range"]::-ms-track {
	height: .625em;
	color: transparent;
	background: transparent;
	border:1px solid rgba(0,0,0,.3);
	width: auto;
	display: block;
 }
input[type="range"]::-ms-thumb {
	border: none;
	height: 1.25em;
	width: 1.25em;
	border-radius: 50%;
	border: 1px solid transparent;
	background: #88ba0b;
	margin-top:0;
 }
input[type="range"]::-ms-fill-lower {
	background: rgba(255,255,255,.4);
 }
input[type="range"]::-ms-fill-upper {
	background: rgba(255,255,255,.4);
 }
input[type="range"]:focus::-ms-fill-lower {
	background: rgba(255,255,255,.2);
 }
input[type="range"]:focus::-ms-fill-upper {
	background: rgba(255,255,255,.9);
 }

*/





/*

	.form .field.file-bar > .file {
		width: 0.1px;
		height: 0.1px;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		z-index: -1;
	 }
	.form .field.file-bar > .label {
		border-collapse: separate;
		display: table;
		width:100%;
	 }

	.form .field.file-bar > .label > .box {
		background-clip: border-box;
		display: table-cell;
		vertical-align: middle;
		white-space: nowrap;
		background-color: rgba(255,255,255,0.4);
		border: 1px solid rgba(0,0,0,0.3);
	 }
	.form .field.file-bar > .label > .box:first-of-type {
		border-right: none;
	 }
	.form .field.file-bar > .label > .box:last-of-type {
		width:1%;
		background-color: orange;
	 }
	.form .field.file-bar > .label:hover > .box {
		border-color: rgba(0,0,0,0.5);
	 }

	.form .field.file-bar > .label > .box > .cloudupload {
	    color: rgba(0,0,0,0.4);

		background-image: none;
		text-align: center;
		text-decoration: none;
		padding: .75em 1em .75em 3.25em;
		outline: none;
		position: relative;
		cursor: pointer;
	 }
	.form .field.file-bar > .label > .box > .cloudupload:before{
		content: "";
		background-clip: border-box;
		background-color: transparent;
		opacity:0.4;
		background-image: url('../img/icons/icons-36px/icon_cloud-upload.svg');
		background-origin: border-box;
		background-position: center center;
		background-repeat: no-repeat;
		display: block;
		width: 3em;
		position: absolute;
		top: 0;
		bottom: 0;
		left: .25em;
	 }

	.form .field.file-bar > .label:hover > .box > .cloudupload {
		color: rgba(0,0,0,0.6);
	 }
	.form .field.file-bar > .label:hover > .box > .cloudupload:before {
		opacity:0.6;
	 }


	.form .fieldset.upload-bar > .field {
		overflow: hidden;
	 }
	.form .fieldset.upload-bar > .field > .file {
		height: 0.1px;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		width: 0.1px;
		z-index: -1;
	 }

	.form .fieldset.upload-bar > .field > .label {
		border-collapse: separate;
		display: table;
		width:100%;
	 }
	.form .fieldset.upload-bar > .field > .label:hover > .box {
		border-color: rgba(0,0,0,0.6);
		color: rgba(0,0,0,0.6);
	 }

	.form .fieldset.upload-bar > .field > .label > .box {
		display: table-cell;
		vertical-align: middle;
		white-space: nowrap;
		background-color: rgba(255,255,255,0.4);
		border: 1px solid rgba(0,0,0,0.3);
		cursor: pointer;
		outline: none;
		text-decoration: none;
		padding: .75em 1em;
		background-clip: border-box;
		box-sizing: border-box;
	 }
	.form .fieldset.upload-bar > .field > .label > .box:first-of-type {
		border-right: none;
		color:rgba(0,0,0,0.6);
		max-width: 0;
		padding:0 1em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	 }
	.form .fieldset.upload-bar > .field > .label > .box:last-of-type {
		width:1%;
		background-color: orange;
		color: rgba(0,0,0,0.4);
	 }


	.form .fieldset.upload-bar > .testBtn {
		background-color: orange;
		border: 1px solid rgba(0,0,0,0.3);
		border-collapse: separate;
		display: table;
		padding: 0;
		position: relative;
		float: right;
		margin-left: 1em;
		outline: none;
	 }
	.form .fieldset.upload-bar > .testBtn > .upload {
		display: table-cell;
		padding: .75em 1em .75em 3.25em;
		margin-left: 0.5em;
		color: rgba(0,0,0,0.4);
	 }
	.form .fieldset.upload-bar > .testBtn > .upload:before{
		content: "";
		background-color: transparent;
		background-image: url('../img/icons/icons-36px/icon_cloud-upload.svg');
		background-origin: border-box;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 75%;
		bottom: 0;
		display: block;
		left: .25em;
		opacity:0.4;
		position: absolute;
		top: 0;
		width: 3em;
	 }

	.form .fieldset.upload-bar > .testBtn:hover {
		border: 1px solid rgba(0,0,0,0.6);
		color: rgba(0,0,0,0.6);
	 }
	.form .fieldset.upload-bar > .testBtn:hover > .upload {
		color: rgba(0,0,0,0.6);
	 }
	.form .fieldset.upload-bar > .testBtn:hover > .upload:before {
		opacity:0.6;
	 }
	.form .fieldset.upload-bar > .testBtn:active > .upload {
		background-color: rgba(255,153,0,0.8);
	 }
	.form .fieldset.upload-bar > .testBtn:focus > .upload {
		box-shadow: inset 0 0 0 1px #fff;
		color:white;
	 }

*/