/* CSS defaults to webkit-engine (Chrome, Safari) with IE/Gecko(Firefox)/Opera modifications inline. */


/* ===============================================
   Global Elements Init (Modified Boilerplate)
   =============================================*/

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, p.figure {display:block;}
audio, canvas, video {display:inline-block;}

html {-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;overflow-y:scroll;}
html, button, input, select, textarea {font-family:arial,sans-serif;color:#000;}
body {margin:0;font-size:14px;line-height:22px;}

abbr[title] {border-bottom:1px dotted;}
b, strong {font-weight:bold;}
hr {display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}

ul, ol {margin:0 0 18px 0;padding:0 0 0 34px;}
.ie article ul {list-style-image:url(../images/list-style-dot.png);}
p + ul, p + ol {margin-top:-4px;}
dd {margin:0 0 0 34px;}
nav ul, ol.designlines, div.form ol {list-style:none;list-style-image:none !important;margin:0;padding:0;}

img {
	border:0;
	vertical-align:middle;
	max-width:100%;
}
.ie8 img {width:auto;}

label {cursor:pointer;}
button, input, select, textarea {font-size:14px;line-height:22px;margin:0;vertical-align:baseline;}

button, input[type="button"], input[type="reset"], input[type="submit"] {cursor:pointer;-webkit-appearance:button;}
button[disabled], input[disabled] {cursor:default;}
input[type="checkbox"], input[type="radio"] {box-sizing:border-box;padding:0;}

textarea {overflow:auto;vertical-align:top;resize:vertical;}

table, fieldset, legend {border-collapse:collapse;border-spacing:0;}
p, table {margin:0 0 22px 0;}
td {vertical-align:top;}

a {color:#000;text-decoration:underline;}
a:visited {color:#000;}
a:hover {color:#000;text-decoration:none;}
a:focus {outline:#999 solid 2px;}
a:hover, a:active {outline:0;}
a[disabled="disabled"] {color:#000 !important;text-decoration:none !important;}

h1, h2, h3, h4 {font-family:"Arimo",arial,sans-serif;color:#8a630f;font-weight:normal;text-rendering:optimizeLegibility;text-transform:uppercase;}



/* ===============================================
   Page Elements
   =============================================*/

html {background-color:#fff;height:100%;}
html.home {background-color:#e1e0df;}
html.home body {
	background:url(../images/bg-loft.jpg) no-repeat 60% 0;
	background-size:960px 415px;
}
html.offer body {
	background:url(../images/bg-built-in-bed.jpg) no-repeat 70% 30px;
	background-size:960px 450px;
}
html.partners body {
	background:url(../images/bg-building-plan2.jpg) no-repeat 70% 100px;
	background-size:960px 350px;
}
html.about body {
	background:url(../images/bg-stairs.jpg) no-repeat 70% 45px;
	background-size:960px 380px;
}


/* =============================================== */
/* !Header Default */

header[role="banner"] {
	height:139px;
	padding:0 10px 0 10px;
	background-color:#f4f3f2;
	border-bottom:1px solid #e6e6e6;
}
.home header[role="banner"] {height:140px;background:none;border:none;}

/* !Logo */
header[role="banner"] h1 {text-indent:-3000px;}
header[role="banner"] h1 a {
	float:left;
	width:208px;
	height:60px;
	margin:24px 0 14px -10px;
	background:url(../images/logo-compact-solutions.png);
	display:block;
}

/* !Navigation */
nav[role="navigation"] {margin:0 0 0 -7px;clear:both;}
nav[role="navigation"] ul li {float:left;}
nav[role="navigation"] ul li.opt {display:none;}
nav[role="navigation"] a {
	font-family:"Arimo",arial,sans-serif;
	font-size:14px;
	line-height:0;
	text-transform:uppercase;
	color:#000;
	padding:14px 7px 12px 7px;
	display:block;
	text-decoration:none;
}
nav[role="navigation"] a:hover {text-decoration:underline;}
nav[role="navigation"] ul li.current a {
	margin:-2px 7px -2px 7px;
	border:2px solid #9b6f11;
	border-radius:3px;
} 


/* =============================================== */
/* !Content Default */

#main {padding:0 0 0 10px;}


/* !Article */
article {
	position:relative;
	display:block;
	margin:50px 0 0 0;
	padding-right:10px;
	background:#fff;
	background:rgba(255,255,255,0.8); 
}
html.home article {margin:0;background:none;}

article h1 {
	font-size:26px;
	line-height:24px;
	padding:20px 0 4px 0;
}
.home article h1 {padding-top:30px;}
.home article > h2 {display:none;}
.home .content {padding-top:100px;}
.home-container aside {display:none;}

article h1 + p {
	font-size:17px;
	line-height:24px;
	padding-right:10px;
}
article h2, aside h2 {
	font-size:15px;
	font-weight:700;
	line-height:21px;
	padding-bottom:2px;
	color:#000;
}
article h3, aside h3 {
	font-size:15px;
	font-weight:700;
	line-height:21px;
	color:#000;
	text-transform:none;
}
article + aside {padding-right:10px;}

/* !Designlines */
ol.designlines li {padding-left:60px;position:relative;}
ol.designlines li img {
	position:absolute;
	left:0;
	top:2px;
	width:50px;

}


/* !Forms */
div.form {
	margin:0 0 18px 0;
}
div.form > p {margin:0 0 12px 2px;display:none;}
div.form li.nopass {display:none;}
div.form ol {width:100%;display:inline-block;}
div.form ol li {
	float:left;
	width:100%;
	margin:0 0 6px 0;
	padding-right:10px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	position:relative;
}

div.form ol li.button {width:50%;margin-top:4px;}
div.form fieldset {float:left;}
div.form label {display:block;padding:0 0 2px 2px;}
div.form legend {display:inline-block;padding:6px 20px 0 2px;}
div.form legend strong {padding-left:30px;position:relative;}
div.form legend strong span {
	position:absolute;
	left:0;
	top:-5px;
	width:22px;
	height:20px;
	padding:4px 0 0 2px;
	text-align:center;
	color:#fff;
	background:#f60;
	border-radius:12px;
}
.ie div.form legend strong span, .safari div.form legend strong span,
.mac.chrome div.form legend strong span {top:-6px;}
.gecko div.form legend strong span {padding:3px 0 1px 2px;}

div.form li.req {font-size:11px;padding-top:11px;width:50%;}
div.form li.req a {white-space:nowrap;padding-left:10px;display:none;}
.js div.form li.req a {display:inline;}
div.form label span.req, div.form legend span.req, div.form li.req span {
	font-size:18px;
	vertical-align:bottom;
	color:#966600;
}

/* Input, Select, Textarea */
div.form input[type="text"], div.form input[type="password"], div.form select, div.form textarea {
	font-size:16px;
	line-height:18px;
	width:100%;
	border:1px solid #cdcdcd;
	background-color:#fff !important;
	padding:7px 8px 6px 8px;
	border-radius:2px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-appearance:none;
}
div.form ol li:hover input[type="text"], div.form ol li:hover input[type="password"], div.form ol li:hover select, div.form ol li:hover textarea {box-shadow:0 0 3px 0px #cdcdcd;}
div.form input[type="text"]:focus, div.form input[type="password"]:focus, div.form select:focus, div.form textarea:focus {
	outline:none;
	border:1px solid #966600 !important;
	box-shadow:0 0 0 1px #966600 !important;
	background-color:#faf6ee !important;
	border-radius:2px;
}
div.form ol li.alert input[type="text"], div.form ol li.alert input[type="password"], div.form ol li.alert select, div.form ol li.alert textarea {
	outline:none;
	border:1px solid #d50000 !important;
	box-shadow:0 0 0 1px #d50000 !important;
	background-color:#fddcdc !important;
	border-radius:2px;
}
div.form select {
	padding:6px 24px 6px 4px;
	background:url(../images/sprite-icons.png) no-repeat;
	background-position:right -154px !important;
}
div.form textarea {height:150px;}


/* Checkbox, Radiobutton */
div.form ol ul {margin:10px 0 4px 0;}
div.form ol ul li {
	width:inherit;
	white-space:nowrap;
	overflow:hidden;
	padding:0 40px 0 0;
}
div.form ol ul.rows li {width:100%;}
div.form ol ul.columns li {width:50%;}
div.form input[type="checkbox"] {float:left;margin:1px 6px 1px 4px;}
div.form input[type="radio"] {float:left;margin:1px 5px 1px 5px;}


/* Browser styles */
.safari div.form input[type="text"], .safari div.form input[type="password"] {padding:8px 8px 6px 7px;}
.safari div.form select {padding:8px 26px 6px 8px;}
.safari div.form textarea {padding-top:8px;}
.safari div.form input[type="checkbox"], .safari div.form input[type="radio"] {float:left;margin:2px 6px 0 4px;}

.iphone.safari div.form input[type="text"], .iphone.safari div.form input[type="password"],
.ipad.safari div.form input[type="text"], .ipad.safari div.form input[type="password"] {padding:7px 8px 5px 7px;}
.iphone.safari div.form select, .ipad.safari div.form select {padding:7px 26px 7px 8px;}
.iphone.safari div.form input[type="checkbox"], .ipad.safari div.form input[type="checkbox"],
.iphone.safari div.form input[type="radio"], .ipad.safari div.form input[type="radio"]  {margin:0 6px 4px 4px;}

.mac.chrome div.form input[type="text"], .mac.chrome div.form input[type="password"] {padding-top:8px;}
.mac.chrome div.form select {padding:8px 26px 6px 8px;}
.mac.chrome div.form textarea {padding-top:8px;}
.mac.chrome div.form input[type="checkbox"], .mac.chrome div.form input[type="radio"] {float:left;margin:2px 6px 0 4px;}

.ie div.form input[type="text"], .ie div.form input[type="password"] {padding-top:7px;height:34px;}
.ie div.form textarea {padding-top:8px;}
.ie div.form select {padding:7px 7px 6px 6px;height:34px;background:none;}

.ie9 div.form select {padding:6px 8px 5px 5px;}

.ie8 div.form input[type="text"], .ie8 div.form input[type="password"] {padding-bottom:7px;}
.ie8 div.form select {padding:6px 8px 6px 5px;background:none;}
.ie8 div.form input[type="checkbox"] {margin:1px 6px 1px 4px;}
.ie8 div.form input[type="radio"] {margin:1px 5px 1px 5px;}

.gecko div.form input[type="text"], .gecko div.form input[type="password"] {padding:6px 8px 7px 7px;}
.gecko div.form select {padding:5px 8px 6px 4px;background:none;}
.gecko div.form textarea {padding-left:7px;}

/* !Buttons */
input[type="submit"].button {
	width:100%;
	font-size:14px;
	font-weight:bold;
	padding:8px 11px 6px 9px;
	border-radius:3px;
	-webkit-appearance:none;
}
input[type="submit"].button {
	border:0;
	color:#fff;
	background:#896312;
}
input[type="submit"].button:hover, input[type="submit"].button:active, input[type="submit"].button:focus,
a.button:hover, a.button:active, a.button:focus {
	outline:none;
	text-decoration:none;
	background:#795a17;
}


/* !Icons */



/* !Misc */
.js .hidden {display:none !important;visibility:hidden;}
.visuallyhidden {border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}
.invisible {visibility:hidden;}
.group:after {content:"";display:table;clear:both;}
.clr {clear:both;}

figure.left, p.figure.left, p.left {float:left;padding:0 20px 10px 0;margin:0 !important;}
figure.right, p.figure.right, p.right {float:right;padding:0 0 10px 20px;margin:0 !important;}
figure.small img, p.figure.small img, p.small img {width:134px !important;}

div.alert, div.notice {
	margin:0 9px 20px -1px;
	padding:10px 12px 8px 12px;
	color:#d00000;
	border:2px solid #da1b23;
	border-radius:3px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	display:block;
}
div.notice {color:#3a7021;border:2px solid #5b7e33;}
div.alert p:last-child, div.notice p:last-child {margin-bottom:10px;}
.alert, .alert h2 {color:#d00000;text-transform:none;}
.notice, .notice h2 {color:#3a7021;text-transform:none;}

b {font-weight:normal !important;}
#tint {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:#000;
	opacity:0.6;
	z-index:10000;
}
.ie8 #tint {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";}

span.nowrap {white-space:nowrap;}
.js .hires img {visibility:hidden;position:absolute;}
.ie8 .hires img {position:relative;}



/* =============================================== */
/* !Footer Default */

footer[role="contentinfo"] {
	padding:0 10px 40px 10px;
}
#assets {
	position:relative;
	margin-right:144px;
	height:78px;
	border-bottom:1px solid #000;
}
#assets span {
	position:absolute;
	right:-144px;
	bottom:-11px;
	width:144px;
	height:78px;
	background:url(../images/footer-assets.png) no-repeat right 0;
	display:block;
}
#assets em {display:none;}
#copy {
	font-size:12px;
	line-height:18px;
	margin:10px 0 0 0;
}
    
 
/* ===============================================
   Media Queries
   =============================================*/


@media only print, screen and (min-resolution:124dpi), (-webkit-min-device-pixel-ratio:1.3) {

	/* =============================================== */
	/* !Header Default Hi-Res */

	/* Logo */
	header[role="banner"] h1 a {
		background:url(../images/logo-compact-solutions@2x.png);
		background-size:208px;
	}


	/* =============================================== */
	/* !Content Default Hi-Res */



	/* =============================================== */
	/* !Footer Default */

	#assets span {
		background:url(../images/footer-assets@2x.png) no-repeat right 0;
		background-size:146px;
	}

}


@media only print, screen and (min-width:480px) {

	/* =============================================== */
	/* !Header Medium (iPhone landscape etc) */


	html.home body {background-position:66% -24px;}


	/* !Navigation */
	nav[role="navigation"] ul li.opt {display:inline;}
	nav[role="navigation"] {margin:0 0 0 -10px;}
	nav[role="navigation"] a {padding:14px 10px 12px 10px;}
	nav[role="navigation"] ul li.current a {margin:-2px 10px -2px 10px;} 



	/* =============================================== */
	/* !Content Medium */


	/* Forms */
	div.form ol li {width:50%;}
	div.form ol li.wide {width:100%;}


	/* =============================================== */
	/* !Footer Medium */


}


@media only print, screen and (min-width:768px) {

	/* =============================================== */
	/* !Header Large (iPad portrait etc) */

	html.home body {background-position:48% -55px;background-size:1632px 706px;}
	html.offer body {background-position:80% 0;background-size:1200px 562px;}
	html.partners body {background-position:85% 120px;}
	html.about body {background-position:70% -80px;background-size:1632px 646px;}

	header[role="banner"] {padding:0 69px 0 69px;}

	/* Logo */
	header[role="banner"] h1 a {margin-top:49px;}

	/* Navigation */
	nav[role="navigation"] {float:right;margin:80px -10px 0 0;clear:inherit;}



	/* =============================================== */
	/* !Content Large */

	#main {padding:0 39px 0 69px;}

	article {margin-top:50px;padding-right:0;}
	html.home article {margin-top:0;}

	article .content, article aside {
		float:left;
		padding-right:60px;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
	}
	.home article .content, .home article aside {width:50%;padding-right:30px;}
	article + aside {padding-right:50px;}

	.home article h1 {
		font-size:40px;
		line-height:36px;
		padding-top:10px;
	}
	.home article h1 span.opt {display:none;}
	.home article > h2 {padding-top:96px;display:block;}
	.home .content {padding-top:0;}
	.home-container {padding-top:100px;}
	.home-container aside {
		position:absolute;
		right:0;
		bottom:0;
		display:block;
	}
	.home-container p span.opt {display:none;}

	article h1 {
		font-size:36px;
		line-height:32px;
		padding:40px 30px 10px 0;
	}
	article h1 + p {padding-right:60px;}


	/* Designlines */
	ol.designlines li {padding-left:110px;}
	ol.designlines li img {
		top:0;
		width:91px;
	}

	/* Forms */
	div.form ol li.button {width:33.333333%;}




	/* =============================================== */
	/* !Footer Large */

	footer[role="contentinfo"] {padding:0 59px 60px 59px;}

	#assets {
		height:136px;
		margin-right:292px;
		border-bottom:2px solid #000;
	}
	#assets span {
		right:-292px;
		bottom:-22px;
		width:292px;
		height:156px;
		background:url(../images/footer-assets@2x.png) no-repeat right 0;
	}
	#copy {margin-left:10px;}

}

@media only print, screen and (min-resolution:124dpi), (-webkit-min-device-pixel-ratio:1.3) and (min-width:768px) {

	/* =============================================== */
	/* !Header Large Hi-Res */


	/* =============================================== */
	/* !Content Large Hi-Res */


	/* =============================================== */
	/* !Footer Large Hi-Res */

	#assets span {
		background:url(../images/footer-assets@4x.png) no-repeat right 0;
		background-size:292px;
	}

}


@media only screen and (min-width:988px) {

	/* =============================================== */
	/* !Header Wide (Desk/Laptops, iPad landscape etc) */

	html.home body {background-position:center -110px;background-size:1920px 830px;}
	html.offer body {background-position:70% 140px;background-size:1920px 900px;}
	html.partners body {background-position:70% 140px;background-size:1920px 700px;}
	html.about body {background-position:70% 140px;background-size:1920px 760px;}

	header[role="banner"] {padding:0 10px 0 10px;}
	header[role="banner"] > div {width:960px;margin:0 auto;}


	/* =============================================== */
	/* !Content Wide */

	#main {padding:0 10px 0 10px;}
	#main > div {width:960px;margin:0 auto;}

	article {background:none;}
	article .content, article aside {
		padding-right:50px;
		box-sizing:content-box;
		-moz-box-sizing:content-box;
	}
	.home article {width:100%;padding-bottom:10px;}
	.home article .content, .home article aside {width:300px;}
	.home article > h2 {padding-top:100px;}
	.home-container {padding:90px 0 0 0;}
	.home-container aside {left:330px;bottom:10px;}

	article {float:left;width:66.666666%;}
	article + aside {
		float:left;
		width:33.333333%;
		margin:133px 0 0 -16px;
		padding:0 0 0 15px;
		border-left:1px solid #e6e6e6;
	}
	article h1 + p {padding-right:50px;}
	
	.offer p.spacer {margin-top:370px;}


	/* =============================================== */
	/* !Footer Wide */

	footer[role="contentinfo"] {padding:0 0 100px 0;}
	footer[role="contentinfo"] > div {width:980px;margin:0 auto;}
	
	#assets {height:90px;}
	#assets em {
		display:block;
		position:absolute;
		right:-90px;
		bottom:-32px;
		font-family:"Arimo",arial,sans-serif;
		font-size:12px;
		text-transform:uppercase;
	}

}

@media only screen and (min-resolution:124dpi), (-webkit-min-device-pixel-ratio:1.3) and (min-width:988px) {

	/* =============================================== */
	/* !Header Wide Hi-Res */


}



/* ===============================================
   Print Styles
   =============================================*/
 
@media print {
	* {background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important;filter:none !important; -ms-filter:none !important;} /* Black prints faster: h5bp.com/s */
	tr, img, ul.promo li {page-break-inside:avoid;}
	@page {size:auto;margin:2cm 1cm 2cm 1cm;}
	p, h2, h3 {orphans:3;widows:3;}
	h2, h3 {page-break-after:avoid;}

}