body { font-family: open-sans, sans-serif; line-height: 1em; }
p, h1, h2, h3, h4, h5 { padding: 0; margin: .3em 0; }

div#header { margin-bottom: 20px; }
div#header h1, div#header img { float: left; }
div#header img { padding: 10px 30px 10px 20px; }
div#header h1.header {font-size: 2.5em; line-height: 1em; width: calc(100% - 160px - 50px - 40px); background: #0079C1; color: #fff; padding: 17px 20px; margin-top: 10px; } 

div#footer { text-align: center; font-size: .75em; padding: 10px; margin: 10px; border-top: 1px solid #CCC; }
div#footer, div#footer a { text-decoration: none; color: #999; }
div#footer a:hover { color: #0079C1; }

a { text-decoration: none; }

input[type=button], input[type=submit], a.greenbutton {
	background: #78BD43;
	color: #fff;
	border: none;
	padding: 10px;
	font-size: 0.8em;
	cursor: pointer;
	margin: 8px 0;
	display: inline-block;
}
input[type=submit], input.quote {
	background: #78BD43 url(images/quote.png) no-repeat left top;
	padding: 10px 10px 10px 55px;
}
input.optionsback {
	background: #78BD43 url(images/options.png) no-repeat 10px 50%;
	padding: 10px 10px 10px 35px;
}

div.steps { width: 33%; float: left; clear: left; }

a.step { display: block; font-size: 14px; font-weight: bold; margin: 20px 0; width: calc(100% - 1em); position: relative; color: #000; }
a.step, a.step label, a.step selection { cursor: pointer; }
a.step.active, a.step.active label, a.step.active selection, a.step.inactive, a.step.inactive label, a.step.inactive selection { cursor: default; }
a.step.active { background:#7AC143; color: #fff; }
a.step.active::after { height: 0; width: 0; border-left:2.5em solid #7AC143; border-right: 2.5em solid transparent;border-bottom: 2.5em solid transparent;border-top: 2.5em solid transparent;content: ""; position: absolute; top: 0; right: -5em; }

a.step.inactive { opacity: 0.5; }

a.step .number { float: left; background: #7AC143; color: #fff; border-radius: 2em; -moz-border-radius: 2em; -webkit-border-radius: 2em; padding: 0.5em; width: 1em; height: 1em; display:inline-block; text-align:center; font-size: 2em; line-height: 1em; margin: 0.25em 0.5em 0.25em 0; }
a.step .label { float: left; padding-top: 2em; }
a.step label { font-weight: bold; font-size: 1em; }
a.step selection { font-weight: normal; font-size: .9em; color:#0079C1; }


div.options { width: 60%; float: right; position: fixed; top: 0; right: 0; }
div#cleanroom_options h3, div#cleanroom_options h4 { text-align: center; }
div#cleanroom_options h4 { padding: 10px; }

h2 { font-size: 1.25em; line-height: 1.25em; color: #0c63b4; }
div.intro { margin-bottom: 40px; }
div.intro h2 { color: #000; text-align: center; }
div.intro h3 { font-size: 1em; color: #666; text-align: center; }

a.option { display: block; color: #0c63b4; margin: 20px 0; }
a.option:hover { background: #e9f1f8; }
a.option img { display: inline-block; width: 15%; margin: 2%; vertical-align: middle; }
a.option div { display: inline-block; width: 75%; vertical-align: middle; }
a.option p { font-size: 0.9em; }

div.quality { float: right; background: #7AC143; color: #fff; width: 3em; height: 3em; border-radius: 2em; -moz-border-radius: 2em; -webkit-border-radius: 2em;text-align:center; line-height: 3em; text-align:center; }

div.selection {padding: 13px 0;}
div.selection .photo { float: left; width: 30%; text-align: center; }
div.selection img.chair { padding-right: 20px; max-width:80%; min-width: 50px; max-height: 150px; }
div.selection div.details { float: left; width: 70%; }
div.selection h2 {font-size: 1.5em; margin: 0; color: #0c63b4;}
div.selection h3 {font-size: 1em; color: #0c63b4; margin: 0;}
div.selection h4 {font-size: 0.9em; color: #666; margin: 0; font-weight: normal;}
div.selection p {font-size: 0.9em;margin: 0;}

div.configuration {padding: 10px 0;}
div.configuration img.chair { float: left; padding-right: 5%; max-width:25%; min-width: 50px; max-height: 180px; }
div.configuration div.details { float: left; width: 70%; }
div.configuration h2 {font-size: 1.7em; margin: 0; color: #0c63b4;}
div.configuration h3 {font-size: 1em; color: #0c63b4; margin: 5px 0;}
div.configuration h4 {font-size: 0.9em; color: #0c63b4; margin: 5px 0;}
div.configuration p {font-size: 1em; color: #0c63b4; margin: 10px 0;}

div.configuration a.option { display: inline-block; vertical-align:top; margin: 0 5px; }
div.configuration a.option img { width: 50px; height: 50px; border: 3px solid #eee; border-radius: 2em; -moz-border-radius: 2em; -webkit-border-radius: 2em; }
div.configuration a.option:hover { background: none; }
div.configuration a.option:hover img { border: 3px solid #0c63b4; }
div.configuration a.option span { display: inline-block; width: 58px; text-align: center; font-size: .6em; line-height: 1em;}
div.configuration a.option.selected img { border: 3px solid #7AC143; }

div.borderbox { border: 1px solid #000; padding: 10px 20px; }
span.partnum { padding: 19px 0 19px 10px; display: inline-block; }
div.borderbox.nopartnum { border: none; }
div.borderbox.nopartnum span.partnum { display: none; }
div.borderbox input { float: right; }
div.borderbox.nopartnum input { float: none; }

div#contact-info { margin: 20px 0;}
div#contact-info label { display:inline-block; width: 120px; text-align: right; padding-right: 3px;}
div#contact-info input, div#contact-info textarea { width: 200px;}
div#contact-info p { line-height: 1.75em; }

div#splash {
	background-image: url(/images/dura-splash.png), url(/images/splash-page-background.jpg);
 	background-repeat: no-repeat, no-repeat;
	background-position: 80% 100%, center center;
	background-size: auto 85%, cover;
	padding: 12% 6%;
}
div#splash h2 { font:normal 2em Arial, Helvetica, sans-serif; margin: 0; color: #7AC143; }
div#splash p { width: 40%; color: #666; margin: 20px 0 30px 0; }
div#splash a { font-size: 1.15em; padding: 0.7em; }

div.clear { clear: both; }

p.change-prompt { background: #7AC143; color: #fff; padding: 15px; text-align: center; }
.text-grey { color: #666; }

@media screen and (max-width:970px) and (min-width:751px) { 
	a.step .number { font-size: 1.6em; }
	a.step .label { padding-top: 1.4em; }
	a.step.active::after { border-left:2em solid #7AC143; border-right: 2em solid transparent;border-bottom: 2em solid transparent;border-top: 2em solid transparent; right: -4em; }
	div.steps { width: 285px; }
	div.options { width: calc(95% - 285px); margin-right: 1%; }
}
@media screen and (max-width:750px) and (min-width:100px) { 
	a.step .number { font-size: 1.3em; }
	a.step .label { padding-top: 1em; }
	a.step.active::after { border-left:1.7em solid #7AC143; border-right: 1.7em solid transparent;border-bottom: 1.7em solid transparent;border-top: 1.7em solid transparent; right: -3.3em; }
	div.steps selection { display: none; }
	div.steps { width: 220px; }
	div.options { width: calc(95% - 220px); margin-right: 1%; }
}
@media screen and (max-width:600px) { 
	a.step .number { font-size: 1.3em; }
	a.step .label { padding-top: 1em; }
	a.step.active::after { border-left:1.7em solid #7AC143; border-right: 1.7em solid transparent;border-bottom: 1.7em solid transparent;border-top: 1.7em solid transparent; right: -3.3em; }
	div.steps selection { display: block; }
	div.steps { width: 90%; }
	div.options { width: 100%; position: relative; }
	div.borderbox { text-align: center; padding: 5px 10px; }
	span.partnum { display: block; padding: 10px 0; }
	span.partnum, div.borderbox input { float: none; }
}