/************************************************************
	Author: 	Alex Holsgrove
	E-Mail: 	alex.holsgrove@soup.co.uk
	Date:   	17th November 2008
	Client: 	Space Kitchens

 __  (\_ 	Notes:		
(_ \ ( '>  	This file contains all structural styles such as heights
  ) \/_)=	and widths that define the skeleton of the site. 
  (_(_ )_	Clearfixes are also listed at the bottom of the file.
************************************************************/
pre {
	margin:					10px 0px;
	font-size:				1.27em;
	color:					#333333;
	border:					1px dashed #666666;
	background:				#EEEEEE;
	padding:				10px;
}


* {
	margin:					0;
	padding:				0;
}
html, body {
	height:					100%;
	width:					100%;
}
h1 {
	margin-bottom:			15px;
}
h2 {
	margin-bottom:			5px;
}
hr {
	margin:					15px 0px;
}
p {
	margin-bottom:			14px;
}

/* -------------------- Core Styles -------------------- */
#site-wrapper {
	margin:					auto;
	padding:				0px 10px;
	width:					980px;
}
#framework {
	margin:					0px 15px;
}
#sidebar {
	float:					left;
	margin-right:			24px;
	width:					200px;
}
#content {
	float:					left;
	position:				relative;
	width:					720px;
}
.standard-content {
	margin-left:			24px;
}
#content #column {
	float:					left;
	width:					505px;
}
#content #callouts {
	margin-left:			10px;
}
#content .column-content {
	float:					left;
	margin-right:			30px;
	padding:				20px 12px 0px 18px;
	width:					350px;
}
#content .column-content h2 {
	margin-bottom:			10px;
}
#content .column-callouts {
	float:					left;
	width:					310px;
}
#callouts {
	float:					left;
	margin-left:			20px;
	padding:				0px;
	width:					205px;
}

/* -------------------- Header Styles -------------------- */
#header div {
	min-height:				121px;
	position:				relative;
}
#header div img {
	margin:					28px 0px 0px 35px;
}
#header div p img {
	margin:					0;
	position:				absolute;
	top:					19px;
	right:					41px;
}


/* -------------------- Navigation Styles -------------------- */
#nav-primary {
	margin:					14px 12px 0px 22px;
	padding:				10px 0px 0px 16px;
}
#nav-primary li {
	float:					left;
	margin-right:			12px;
}
#nav-primary li a {
	height:					21px;
}
#nav-primary .nav-p-home {
	width:					53px;
}
#nav-primary .nav-p-planning {
	width:					172px;
}
#nav-primary .nav-p-about {
	width:					76px;
}
#nav-primary .nav-p-finance {
	width:					66px;
}
#nav-primary .nav-p-offers {
	width:					110px;
}
#nav-primary .nav-p-competition {
	width:					99px;
}
/*
#nav-secondary {
	margin:					12px 0px 20px 13px;
}
#nav-secondary li {
	float:					left;
}
#nav-secondary li a {
	height:					38px;
}
#nav-secondary .nav-s-traditional-kitchens {
	width:					159px;
}
#nav-secondary .nav-s-modern-kitchens {
	width:					148px;
}
#nav-secondary .nav-s-shaker-kitchens {
	width:					148px;
}
#nav-secondary .nav-s-appliances {
	width:					145px;
}
#nav-secondary .nav-s-accessories {
	width:					145px;
}
#nav-secondary .nav-s-quote {
	width:					204px;
}
*/
#nav-secondary {
	margin:					12px 0px 20px 13px;
}
#nav-secondary li {
	float:					left;
}
#nav-secondary li a {
	height:					38px;
}
#nav-secondary .nav-s-traditional-kitchens {
	width:					156px;
}
#nav-secondary .nav-s-shaker-kitchens {
	width:					132px;
}
#nav-secondary .nav-s-modern-kitchens {
	width:					140px;
}
#nav-secondary .nav-s-appliances {
	width:					103px;
}
#nav-secondary .nav-s-accessories {
	width:					106px;
}
#nav-secondary .nav-s-bedrooms {
	width:					105px;
}
#nav-secondary .nav-s-quote {
	width:					204px;
}

#navigation {
	margin:					0px 0px 50px;
	width:					180px;
}
#navigation .nav-heading {
	padding:				0px 0px 8px 10px;
}
#navigation li {
	margin-bottom:			6px;
	padding-left:			10px;
}
#navigation li a {
	padding-left:			18px;
}

/* -------------------- Form Styles -------------------- */
form {
	margin-bottom:			30px;
	position:				relative;
}
form .submit {
	width:					auto!important;
}
form.gradient div.form-main {
	padding:				24px 24px 0px;
}
form.gradient div.form-end {
	padding:				0px 0px 24px;
}
form p {
	margin-bottom:			16px;
}
form ul {
	margin:					0px;
}
form ul li,
form ol li {
	margin-bottom:			0px;
}
form.split-fields h4 {
	margin-bottom:			10px;
}
form.split-fields fieldset {
	float:					left;
	margin-top:				24px;
	width:					336px;
}
form.split-fields label {
	float:					left;
	width:					70px;
}
form.split-fields input,
form.split-fields select,
form.split-fields textarea {
	float:					left;
	width:					200px;
}
form.split-fields textarea {
	height:					90px;
}
form.split-fields .frm-title {
	width:					70px;
}
form.split-fields .frm-postcode {
	margin-right:			10px;
	width:					110px;
}
form.split-fields .field-col-2 {
	padding-left:			35px;
	width:					300px;
}
form.split-fields .field-col-2 label {
	margin-bottom:			10px;
	width:					300px;
}
form.split-fields .checkbox,
form.split-fields li input {
	margin:					0px 8px 10px 0px;
	width:					auto;
}
form.split-fields .field-col-2 li label {
	width:					200px;
}
form div.form-consent p {
	float:					left;
	width:					270px;
}

/* -------------------- Element Styles -------------------- */

#scroller-panel,
#product-panel {
	margin:					30px 0px 20px;
	overflow:				hidden;
	position:				relative;
}
#scroller-panel .panel-inner,
#product-panel .panel-inner {
	overflow:				hidden;
	min-height:			280px;
}

#scroller-panel .product-viewer h2 {
	padding:				20px 0px 0px 60px;
}
#scroller-panel .product-viewer .viewer-note {
	position:				absolute;
	top:					22px;
	right:					60px;
}

.product-sale-icon {
	position:				absolute;
	top:					0px;
	right:					0px;
}
.product-summary {
	width:					600px;
}
.product-points {
	float:					left;
	padding:				16px 20px 0px;
	width:					260px;
}
.product-points ul {
	margin:					0px 0px 15px;
}
.product-points ul li {
	margin:					0px;
	padding:				5px 25px;
}
.product-points p a {
	display:				block;
	margin-bottom:			3px;
}
.product-points .buttons {
	padding-bottom:			10px;	
}
.product-points .buttons a {
	display:				block;
	margin-bottom:			5px;
}

.features-list ul {
	float:					left;
	margin-right:			15px;
	width:					330px;
}

.image-block {
	margin-bottom:			14px;
}
.image-block img {
	float:					left;
	margin-right:			20px;
}
.image-block div {
	float:					left;
	width:					530px;
}
#column .image-block div {
	width:					330px;
}

ul, ol {
	margin-left:			15px;
}
ul li,
ol li {
	margin-bottom:			10px;
}
.section-panels {
	margin:					0 0 16px;
}
.section-panels h2 {
	margin:					0;
}
.section-panels .panel {
	float:					left;
	height:					315px;
	margin:					0px 2px 0px 0px;
	position:				relative;
	width:					239px;
}
.section-panels .panel-2 {
	width:					238px;
}
.section-panels .panel-3 {
	margin:					0;
}
.section-panels .panel p {
	margin:					6px 12px 5px;
}
.section-panels .panel a {
	display:				block;
	height:					30px;
	width:					239px;
}
.section-panels .panel-2 a {
	width:					238px;
}
.section-panels .panel span a {
	position:				absolute;
	bottom:					-1px;
}
.section-panels .panel p strong a {
	display:				inline;
}
.product-list div {
	float:					left;
	padding:				10px 10px 10px 0px;
	width:					350px;
}
.product-list li {
	margin-bottom:			10px;
}

.features-list a img {
	margin-top:				10px;
}

/* -------------------- Callout Styles -------------------- */
#content .widget {
	margin:					0px 0px 15px;
}
#content .section-panels .widget {
	margin:					0px;
}
#content .column-callouts .widget {
	margin:					0px 0px 4px;
}
#callouts .widget {
	margin:					0px 0px 8px;
}
#callouts p {
	margin-bottom:			4px;
}
.callout h3 {
	margin-bottom:			5px;
}
#callouts .callout h3.title-point {
	padding-left:			10px;
}
#callouts .callout p.standout {
	padding:				5px 0px;
}
.callout-gradient {
	padding:				0px 0px 8px;
}
.callout-upper {
	padding:				8px 0px 0px;
}
.callout .callout-upper-gradient {
	padding:				10px 12px 4px;
}
.callout div {
	padding:				7px 6px 8px 12px;
}
.callout div img {
	float:					right;
	margin:					-22px 0px 5px;
}
.callout .callout-upper-gradient img {
	margin:					0px;
}

#callouts .w-next-steps {
	margin:					20px 2px 0px;
}
#callouts .w-next-steps div {
	padding:				12px 12px 22px;
}
#callouts .w-next-steps h3 {
	margin:					6px 0px 8px;
	padding-left:			10px;
}

/* -------------------- Footer Styles -------------------- */
#footer {
	clear:					both;
	margin:					32px -10px 0px;
	padding:				0px 12px 0px 11px;
}
#footer div.inner {
	padding:				52px 0px 0px 39px;
}
#footer div div {
	float:					left;
	margin-right:			70px;
	width:					200px;
}
#footer img {
	margin-bottom:			16px;
}
#footer span img {
	margin:					0px 5px 0px 0px;
}
#footer ul {
	margin:					0;
}
#footer li .section-title {
	display:				block;
	margin-bottom:			24px;
	padding-left:			12px;
}
#footer ul li {
	float:					left;
	min-height:				130px;
	padding:				0px 10px;
	width:					120px;
}
#footer ul li.last {
	width:					190px;
}
#footer ul ul li {
	float:					none;
	margin-bottom:			5px;
	min-height:				0px;
	padding:				0;
	width:					auto;
}

/* ---------------- Address Lookup --------------------- */
#addressSelect {
	padding: 0 0 16px 70px;
	margin: 0 0 16px;
}




/* -------------------- MISC STYLES -------------------- */
.left {
	float:					left!important;
}
.right {
	float:					right!important;
}

.clearfix:after {
    content:				".";
    display:				block;
    height:					0;
    clear:					both;
    visibility:				hidden;
}
.clearfix {
	display:				inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height:					1%;
}
.clearfix {
	display:				block;
}
/* End hide from IE-mac */

#framework:after,
#nav-primary:after,
#nav-secondary:after,
.callout div:after,
.image-block:after,
form p:after,
form li:after {
    content:				".";
    display:				block;
    height:					0;
    clear:					both;
    visibility:				hidden;
}
#framework,
#nav-primary,
#nav-secondary,
.callout div,
.image-block,
form p,
form li {
	display:				inline-block;
}
/* Hides from IE-mac \*/
* html #framework,
* html #nav-primary,
* html #nav-secondary,
* html .callout div,
* html .image-block,
* html form p,
* html form li {
	height:					1%;
}
#framework,
#nav-primary,
#nav-secondary,
.callout div,
.image-block,
form p,
form li {
	display:				block;
}
/* End hide from IE-mac */