body {
	padding-bottom: 10em;
}

/* This is my test */

.mtm div.step_contents { display:none; }
.mtm.active div.step_contents { display:block; }

.option_set { display:none; }


.panel__text {
	background: #e7e7e7;
}

.help {
	color: #447eab;
	margin-bottom: 1.5em;
	display: block;
}
.thisstep {
	background: #f2f2f2;
	padding: 1.5em 1.5em;
	color: #dfdfdf;
}
.thisstep h2 {
	color: #dfdfdf;
	margin-bottom: 0;
}
.active .thisstep {
	background-color: #447eab;
	background-image: url(../swoosh.svg);
	background-repeat: no-repeat;
	background-position-x: 40%;
	background-position-y: bottom;
	background-size: 200% auto;
}

.active .thisstep h2 {
	color: white !important; /* overide */
	margin-bottom: 0;
}


.section {
	display: block;
	padding: 0 !important;	/* overide */
	
}
.section.set .thisstep {
	cursor: pointer;
}


.step_contents {
	background: white;
	padding-bottom: 1.5em;
}

.oedema button img {
	float: right;
	height: 1em;
	margin: 0.25em 1.5em;
}
.oedema.set button img {
	display: none;
}

.choose {
	padding-left: 1.5em;
	padding-top: 1.5em;
}
.choose h3 {
	xmargin: 0;
	xpadding-bottom: 1em;
}

.choice,
.option_set label,
.dupe_garment,
.edit_garment,
.delete_garment,
.add_garment_options,
.step_summary button,
#email_measurements button {
	display: block;
	width: 100%;
	border: 0;
	border-top: 2px solid #f2f2f2;
	padding: 1em 0;
	text-align: left;
	background: none;
	cursor: pointer;
}
.choice__description {
	display: none;
}

.option_set label {
	position: relative;
}
.option_set label input[type="checkbox"] {
	margin-right: 1.5em;
	margin-left: 1em;
}
.option_set label:after {
	content: '+';
	position: absolute;
	display: block;
	height: 1em;
	width: 1em;
	left:0;
	top:0.2em;
	line-height: 1em;
	font-size: 2.5em;
	text-align: center;
	background: #f2f2f2;
	color: white;
	border-radius: 50%;
}
.option_set label.chosen:after {
	background: #447eab;
}
.options.set .option_set label.chosen:after {
	background: none;
	position: relative;
	display: inline;
	font-size: 1em;
	line-height: 1.5;
	text-align: left;
}
.option_set label span {
	display: none;
}

.option_confirm,
.step_summary button,
#email_measurements button {
	font-weight: bold;
}

.choose.removed { display:none; }
.choose.unset { display:none; }
.choose.setting { display:block; }

.confirm_garment.confirm_garment--hidden { display:none; }
.cancel_garment.cancel_garment--hidden { display:none; }
.garment_count.garment_count--hidden { display:none; }

.choose.set,
.garment_summary { 
	background: #4379a4; /* $blue--mid */
	xborder-top: 1px solid #6c99bb; /* $keyline--blue */
}
.choose.set h3,
.garment_summary h3 {
	color: white; /* override */
	margin-bottom: 0.5em;
}
.choose.set .choice.active,
.choose.set .option_set label {
	padding-top: 0;
	border: 0;
	color: white;
	display: inline;
	width: auto;
	padding-bottom: 1.5em;
}

.choose.set .choice:not(.active),
.choose.set .option_confirm.active,
.choose.set .option_set label input,
.choose.set .help {
	display: none;
}

.choose.set .layout .layout__item {
	xwidth: auto !important;
}


.options.set {
	padding-bottom: 1em;
}
.options.set h3 {
	margin-bottom: 0.5em;
}
.choose.set .option_set label {
	display: none !important;
}
.choose.set .option_set label.chosen {
	display: inline !important;
	margin: 0;
	padding: 0;
}
.choose.set .option_set label.chosen:after {
	content: ", "
}

.choose:not(.set) .edit_choose_wrap,
.choose:not(.set) .edit_choose {
	display: none;
}
.edit_choose {
	color: #bad5e6; /* this is an new colour was picked in haste and should be better */
}

.garment_count__wrap {
	margin: 1em 1em 2em;
}
.garment_count h3 {
	margin-bottom: 0;
}
.garment_count select {
	visibility: hidden;
	height: 0;
	width: 0;
}
.qty_option {
	display: block;
	width: 2.5em;
	height: 2.5em;
	line-height: 2.5em;
	text-align: center;
	background: #f2f2f2;
	font-size: 1.5em;
	font-weight: bold;
	color: #447eab;
	border-radius: 50%;
	margin: auto;
}
.qty_option.selected {
	background: #447eab;
	color: white;
}

.cancel_garment,
.confirm_garment,
#mtm_order button,
#complete_order button {
	display: block;
	width: 100%;
	color: white;
	background: #345a76;
	padding: 1em 1.5em;
	border: 0;
	text-align: left;
	font-weight: bold;
}

.garment_summary {
	padding-top: 1em !important;
	padding-left: 1em !important;
	position: relative;	
}

.garment_summary__options {
	position: absolute;
	color: white;
	right: 1em;
	top: 1em;
}
.garment_summary .overlay h3 {
	color: #447eab; /* $blue */
}
.summary_mini {
	color: white;
}
.summary_text {
	margin-bottom: 1em;
}

.dupe_garment,
.edit_garment,
.delete_garment,
.add_garment_options {
	font-weight: bold;
}
.step_summary.padded {
	padding-left: 1.5em;
}
.step_summary button {

}

#mtm_measurements h3 {
	margin-top: 1em;
	margin-left: 1em;
}
#mtm_measurements > p,
.order .step_summary > h3,
.order .step_summary > p {
	margin-top: 1em;
	margin-left: 1em;
}
	
.measurepoint {
	padding: 1em;
	border-bottom: 2px solid #f2f2f2;
}
.measurements label {
	display: block;
	font-size: 0.9em;
}
.measurements input {
	margin-bottom: 0.5em;
	width: 4em;
	font-size: 1.5em;
}
.measurepoint__image {
	float: right;
	width: 40%;
	xmargin-top: -2.5em;
	text-align: right;
}
.measurepoint__image > .overlay {
	text-align: left;
}

#email_measurements input,
#email_measurements label {
	width: 100%;
	text-align: left;
}
.measurepoint__dimension {
	font-family: serif;
	font-style: italic;
}


#mtm_order p,
.order_summary h3,
#complete_order p {
	margin: 1em;
}
#mtm_order .layout {
	padding: 1em;
}

.order .step_contents {
/* 	padding: 1em; */
}
.order label {
	display: block;
}
.order input {
	width: 100%;
	padding: 0.5em 0;
	text-indent: 0.5em;
	margin-bottom: 1em;
}
.order-wrap {
	padding: 1em;
}


/*
table {
	width: 100%;
	margin-bottom: 1em;
}
th, td {
	border-collapse: collapse;
	border: 1px solid #ddd;
	padding: 1px 3px;
}
th {
	text-align: left;
	width: 32%
}
tr:nth-child(odd) td {
	background: #eee;
}
*/
.order-wrap table thead tr th:first-child {
	text-align: center;
}



.order_summary {
	padding: 1em;
	background: #f2f2f2;
	margin-bottom: 1em;
}

/*
.order_summary th,
.order_summary td {
	border: 0;
	background: none !important;
}
*/
.order_summary table tbody tr td:first-child {
	text-align: left;
}

#complete_order button {
	margin-left: 0;
}

.step_summary { display:none; padding-top: 1.5em; }
.garment_summary { display:none; }

label.error { display: none !important; }
.error { border: 1px solid #b94a48 !important; background: #FEDCE6; }

.overlay {
	display: none;	
}
.overlay--visible {
	box-sizing: border-box;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	height: 100%;
	width: 100%;
	padding: 4.5em 1em 1em;
	overflow-y: scroll;
	background: white;
}
.overlay__close {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	background: #345a76; /* $blue--dark */
	text-align: right;
	line-height: 3em;
	color: white;
	padding-right: 1em;
	font-weight: bold;
}

.overlay--open {
	position: relative;
}

.colour-spot {
	padding-left: 3em;
	position: relative;
}
.colour-spot:before {
	content: '';
	position: absolute;
	left: 0;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	margin-top: -0.2em;
}
.colour-spot--black:before {
	background: black;
}
.colour-spot--sand:before {
	background: #fae2a9;
}
.colour-spot--natural:before {
	background: #fae2a9;
}
.choose.set .colour-spot {
	padding-left: 0;
}
.choose.set .colour-spot:before {
	display: none;
}

.set-value {
	cursor: pointer;
}

/* hide for credalast */
.credalast .lB1,
.credalast .lE {
	display: none !important;
}


/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


/* hacky media query to temp stuffs */
@media screen and (min-width:720px) {
	.container {
		text-align: center;
	}
	.setting,
	.measurements .step_contents,
	#mtm_order,
	.order-wrap,
	.order_summary {
		max-width: 1024px;
		margin: 0 auto;
	}
	
	.active .thisstep {
		background-color: #447eab;
		background-image: url(../swoosh.svg);
		background-repeat: no-repeat;
		background-position-x: left;
		background-position-y: 55%;
		background-size: 150% auto;
	}
	
	.oedema button img {
		display: block;
		width: 50%;
		height: auto;
		margin: 0.5em 25% 0;
	}
	
	.choice,
	.option_set label,
	.step_summary button,
	#email_measurements button {
		/* this should probbaly be an extenstion of the btn object */
		display: inline-block;
		width: 30%;
		border: 0;
		background: #f2f2f2;
		color: #447eab; /* $blue */
		text-align: center;
		margin-right: 1%;
		margin-left: 1%;
		margin-bottom: 4em;
	}
	
	.choice__description {
		display: block;
		color: #325977;
		padding: 0.5em 1em;
	}
	
	.fabric .choice {
		width: 30em;
		max-width: 40%;
		padding: 2em;
	}
	.style.setting .choice {
		height: 0;
		visibility: hidden;
		margin: 0;
		padding: 0;
	}
	.style.setting .overlay {
		display: block;	
	}
	.style.setting .overlay__close,
	.style.setting .overlay__header {
		display: none;
	}
	
	.choose.set .choice.active,
	.choose.set .option_set label {
		background: none;
		padding-left: 0;
		padding-right: 0;
		margin-right: 0;
		margin-bottom: 0;
	}
	.choose.set .choice__description {
		display: none;
	}
	.colour-spot {
		padding-left: 0;
	}
	.colour-spot:before {
		margin-left: 1.5em;
	}
	
	.option_set {
		text-align: left;
	}
	.options.set .option_set {
		text-align: center;
	}
	.option_set label {
		width: 45%;
		background: none;
		margin-left: 2%;
		margin-right: 2%;
		text-align: left;
		font-weight: bold;
		vertical-align: top;
	}
	.option_set label span {
		display: block;
		margin-left: 3.5em;
		font-weight: normal;
	}
	.option_set label[style="display: block;"] {
		display: inline-block !important;
	}
	.options.set .option_set label {
		font-weight: normal;
	}
	.options.set .option_set label span {
		display: none;
		
	}
	
	.toe .choice {
		width: 33%;
	}
	
	.garment_count__wrap {
		max-width: 500px;
		margin: 2em auto;
	}
	.confirm_garment,
	#mtm_order button,
	#complete_order button {
		width: 25%;
		margin: 4em auto;
		xpadding-left: 0;
		text-align: center;
	}
	
	.garment_summary {
		padding-left: 0 !important;
	}
	.garment_summary .overlay {
		display: block;
		position: relative;
		width: auto;
		height: auto;
		max-width: 500px;
		margin: auto;
		margin-bottom: 2em;
	}
	.garment_summary .overlay__close {
		display: none;
	}
	.garment_summary .overlay h3 {
		display: none;
	}
	.garment_summary .summary_text {
		color: white;
	}
	.garment_summary button {
		font-weight: bold;
		display: inline-block;
		width: 25%;
		color: white;
		border: 0;
		text-decoration: underline;
		text-align: center;
	}
	.summary_mini {
		display: none;
	}
	.step_summary {
		margin-top: 2em;
	}
	
	
	#mtm_measurements {
		padding-top: 2em;
	}
	#mtm_measurements h3 {
		margin-right: 0;
		margin-left: 0;
	}
	#mtm_measurements .layout {
		text-align: left;
	}
	
	.measurepoint {
		border-bottom: 0;
		background: #f2f2f2;
		text-align: left;
		margin-bottom: 1em;
	}
	.measurepoint p {
		width: 60%;
		height: 4em;
	}
	.measurepoint__image {
		margin-top: -5em;
	}
	
	#email_measurements {
		margin: 0 1em;
	}
	
	#mtm_order label {
		text-align: left;
	}

	#complete_order button {
		width: 30%; 
	}
	
/*
	.overlay__trigger,
	.overlay__close,
	.overlay__header {
		display: none;
	}
*/
	.overlay__trigger {
		display: none;
	}
	.overlay--open:after {
		content: '';
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.75);
		z-index: 998;
		height: 100%;
		width: 100%;
	}
	.overlay--visible {
		top: 50%;
		left: 50%;
		margin-left: -350px;
		height: auto;
		width: 700px;
		padding: 4em 0em 1em;
	}
	.step_summary .overlay--visible {
		height: 9em;
		margin-top: -4.5em;
		overflow: hidden;
	}
	.step_summary .overlay--visible button {
		width: 45%;
	}
	
	.email_measurements_container.overlay--visible {
		height: 20em;
		margin-top: -10em;
		overflow: hidden;
	}
}



#mtm_measurements .overlay__trigger {
	display: none;
}