/*------------------------------------*\
	HOT TUB CHOOSER
	
	By Simon Wiffen
	NORTHERN CONTRAST LTD
	
	http://www.northerncontrast.com
\*------------------------------------*/




/*------------------------------------*\
	RESET
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ 
	margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{ 
	border:0;
}
address,caption,cite,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
header, nav, article, section, aside, footer{
	display:block;
}





/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	font-size:95%;	
}
body{
	color:#222;
	font-family:'Roboto', sans-serif;
}
.wrapper{
	width:88%;
	margin:0 auto;
}





/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/
h1, h2, h3, h4, h5, h6{
	font-family:'Raleway',sans-serif;
	margin-bottom:15px;
}
h1{	
	font-size:2em;
	color:#00579e;
	margin-top:90px;
	margin-bottom:0;
}
h2{	
	font-size:1.8em;
}
h2.band{
	font-size:1.125em;
	background:#00abea;
	color:#fff;
	padding:15px;
	margin-bottom:20px;
}
h3{	
	font-size:1.5em;	
}
.intro{
	font-size:1.25em;
	color:#00579e;
}
p, ol, ul{
	margin-bottom:20px;
}
.small, small{
	font-size:0.875em;
}
a{
	color:#00abea;
}
a:hover,
a:focus{
	color:#00579e;
}





/*------------------------------------*\
	COLUMNS
\*------------------------------------*/
.cols{
	overflow:hidden;
	margin-left:-3%;
}
.cols .col{
	float:left;
	margin-left:3%;
	overflow:hidden;
}
.cols-2 .col{
	width:47%;
}
.cols-3 .col{
	width:30%;
}
.cols-4 .col{
	width:22%;
}





/*------------------------------------*\
	FORM ELEMENTS
\*------------------------------------*/
.text{
	background:#fff;
	border:1px solid #ddd;
	padding:10px;
	width:100%;
	font-family:'Roboto', sans-serif;
	font-size:1em;
	margin-bottom:20px;
	
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.button{
	display:inline-block;
	background:#36a7e9;
	color:#fff;
	padding:15px;
	font-size:1em;
	text-align:center;
	text-decoration:none;
	border:none;
	cursor:pointer;
	
	-moz-transition:0.15s linear background;
	-webkit-transition:0.15s linear background;
	transition:0.15s linear background;
}
.button:hover,
.button:focus{
	background:#038cbe;
	color:#fff;
}
.btn-disabled{
	opacity:0.25;
}
.btn-disabled:hover,
.btn-disabled:focus{
	background:#36a7e9;
	cursor:default;
}
.btn-sub{
	background:#eee;
	color:#2e2e2e;
}
.btn-sub:hover,
.btn-sub:focus{
	background:#ccc;
	color:#2e2e2e;
}




/*------------------------------------*\
	MAIN HEADER
\*------------------------------------*/
.main-header{
	overflow:hidden;
	margin-bottom:35px;
}
.login-bar{
	background:#00abea;
	color:#fff;
	padding:12px 0;
	margin-bottom:15px;
}
.login-bar ul{
	list-style:none;
	overflow:hidden;
	text-align:right;
	margin:0;
}
.login-bar li{
	display:inline;
	margin-left:15px;
	font-size:0.875em;
	text-transform:uppercase;
}
.login-bar a{
	color:#fff;
	text-decoration:none;
}
.login-bar a:hover,
.login-bar a:focus{
	color:#00579e;
}
.main-header .logo{
	float:left;
	margin-right:30px;
}
.main-header h1{
	float:left;
}





/*------------------------------------*\
	WELCOME COPY
\*------------------------------------*/
.welcome{
	border-top:5px solid #eee;
	padding-top:20px;
	margin-bottom:30px;
}
.welcome .voucher{
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
	padding:10px 0 10px 60px;
	margin-bottom:20px;
	color:#00579e;
	position:relative;
}
.welcome .voucher h3{
	color:#00abea;
	margin:0;
}
.welcome .voucher p{
	margin:0;
}
.welcome .voucher img{
	position:absolute;
	top:10px;
	left:0;
}




/*------------------------------------*\
	FILTERS BOX
\*------------------------------------*/
.filters{
	background:#00579e;
	color:#fff;
	padding:20px;
	margin-bottom:25px;
}
.filters header{
	overflow:hidden;
	margin-bottom:25px;
}
.filters h2{
	float:left;
	margin:0 15px 0 0;
}
.filters .strapline{
	font-size:1.125em;
	color:#bbb;
	float:left;
	margin:9px 0 0 0;
}
.filters .recommended-by-whatspa{
	float:left;
	padding-top:5px
}
.filters .button{
	float:right;
	padding:15px 50px;
	text-transform:uppercase;
}





/*------------------------------------*\
	RESULTS
\*------------------------------------*/
section.results header{
	overflow:hidden;
	margin-bottom:15px;
}
section.results .note{
	float:left;
	line-height:45px;
}
section.results .compare{
	float:right;
	overflow:hidden;
}
section.results .compare p{
	float:left;
	line-height:45px;
}
section.results .compare .button{
	float:left;
	margin-left:20px;
}
table.results{
	width:100%;
	margin-bottom:40px;
}
table.results th,
table.results td{
	border:1px solid #ddd;
	padding:15px 10px;
	font-size:0.875em;
	text-align:center;
}
table.results th{
	background:#00abea;
	color:#fff;
}
table.results th a{
	color:#fff;
}
table.results th a:hover,
table.results th a:focus{
	color:#00579e;
}
table.results tr:nth-child(even){
	background:#f9f9f9;
}
table.results tr .result-img,
table.results tr .result-logo{
	background:#fff;
}
table.results .table-actions ul{
	list-style:none;
	margin:0;
}
table.results .table-actions ul li{
	margin-bottom:10px;
}
table.results .table-actions ul li:last-of-type{
	margin:0;
}
table.results .table-actions .button{
	width:100%;
	padding:10px;
	
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}





/*------------------------------------*\
	PRODUCT DETAIL (SMALL)
\*------------------------------------*/
.product-detail{
	text-align:center;
}
.product-detail h1{
	margin:20px 0 20px 0;
}
.product-detail h2{
	font-size:1.5em;
}
.product-detail .product-image{	
	margin-bottom:20px;
}
.product-detail .product-image img{
	max-width:100%;
}





/*------------------------------------*\
	PRODUCT DETAIL (FULL)
\*------------------------------------*/
.full-product-detail{
	margin-bottom:20px;
	border-top:5px solid #eee;
	padding-top:20px;
}
.full-product-detail h1{
	margin:20px 0 20px 0;
}
.full-product-detail h2{
	font-size:1.5em;
}
.full-product-detail .product-image{	
	margin:20px 0;
	position:relative;
	text-align:center;
}
.full-product-detail .product-image img{
	max-width:100%;
}
.full-product-detail .button{
	width:100%;
	margin-bottom:10px;
	
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}





/*------------------------------------*\
	DISCOUNT VOUCHER
\*------------------------------------*/
.product-voucher{
	background:#00579e;
	color:#fff;
	padding:20px;
	margin-bottom:10px;
	text-align:center;	
}
.product-voucher .button{
	padding:15px 50px;
	text-transform:uppercase;
}





/*------------------------------------*\
	REDIRECTING
\*------------------------------------*/
.redirecting{
	margin-bottom:40px;
	border-top:5px solid #eee;
	padding-top:20px;
	text-align:center;
}





/*------------------------------------*\
	COMPARE PRODUCTS
\*------------------------------------*/
.compare-products{
	margin-bottom:20px;
	border-top:5px solid #eee;
	padding-top:20px;
}
.compare-products .product-image{
	display:inline-block;
	width:100%;
	height:300px;
}
.compare-products .button{
	width:100%;
	padding:15px 50px;
	
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}





/*------------------------------------*\
	FULL PRODUCT LISTINGS
\*------------------------------------*/
.full-product-listings{
	border-top:5px solid #eee;
	padding-top:20px;
	margin-bottom:40px;
}
.full-product-listings .col{
	padding:5px 0;
}




/*------------------------------------*\
	CONTACT FORM
\*------------------------------------*/
section.contact-form{
	background:#eee;
	padding:20px 0;
	margin-bottom:40px;
}
section.contact-form .form-item{
	margin:0;
}
section.contact-form label{
	display:block;
	font-weight:bold;
	margin-bottom:5px;
}
section.contact-form fieldset{
	border:1px solid #ddd;
	padding:20px 20px 10px 20px;
}
section.contact-form fieldset legend{
	font-weight:bold;
}
section.contact-form .check-item{
	margin-bottom:10px;
}
section.contact-form .check-item label{
	display:inline;
	font-weight:normal;
}
section.contact-form #comments{
	height:280px;
}
section.contact-form .captcha{
	margin-bottom:10px;
	overflow:hidden;
}
section.contact-form .button{
	width:100%;
	padding:15px 50px;
}
section.thank-you{
	border-top:5px solid #eee;
	padding-top:20px;
	margin-bottom:30px;
}
.required{
	color:#00abea;
}





/*------------------------------------*\
	VOUCHER REQUEST
\*------------------------------------*/
.voucher-request-details{
	background:#00579e;
	color:#fff;
	font-size:1.5em;
	padding:20px 20px 20px 40px;
	margin-bottom:20px;
}
.voucher-request-details p,
.voucher-request-details ul{
	margin:0;
}





/*------------------------------------*\
	DISCOUNT VOUCHER
\*------------------------------------*/
section.discount-voucher{
	border:5px dashed #eee;
	padding:20px 20px 20px 160px;
	margin-bottom:40px;
	position:relative;
}
section.discount-voucher .voucher-side{
	position:absolute;
	top:20px;
	left:20px;
}
section.discount-voucher small,
section.discount-voucher .small{
	color:#777;
}
section.discount-voucher .valid-for{
	color:#00579e;
}
section.discount-voucher .valid-for .small{
	display:block;
}
section.discount-voucher .voucher-info{
	text-align:center;
	border-top:5px solid #eee;
	border-bottom:5px solid #eee;
	padding:20px 0 0 0;
	margin-bottom:20px;
}
section.discount-voucher .voucher-info h3{
	font-size:2em;
	color:#00579e;
}
section.discount-voucher .voucher-info .details{
	font-family:'Raleway',sans-serif;
	font-size:1.3em;
}
.whatspa{
	font-weight:bold;
	color:#006;
}
.whatspa b{
	color:#09f;
}





/*------------------------------------*\
	ERROR HANDLING
\*------------------------------------*/
.error{
	border:1px solid #b41c1c;
	padding:20px;
	color:#b41c1c;
	background:#e4cdcd;
	margin-bottom:20px;
}
.error p{
	margin:0;
}
.inline-error{
	color:#b41c1c;
}





/*------------------------------------*\
	MAGAZINE PROMO
\*------------------------------------*/
section.magazine{
	margin-bottom:35px;
	position:relative;
}
section.magazine img{
	position:absolute;
	top:15px;
	right:40px;
}
section.magazine .main{
	padding-right:300px;
}





/*------------------------------------*\
	MANUFACTURERS PROMO
\*------------------------------------*/
section.manufacturers h2.band{
	background:#00579e;
}
section.manufacturers ul{
	list-style:none;
	margin:0;
	overflow:hidden;
}
section.manufacturers li{
	display:inline-block;
	float:left;
	margin:0 20px 20px 0;
	height:70px;
}
section.manufacturers li .logo{
	display:inline-block;
	height:100%;
	vertical-align:middle;
}
section.manufacturers li a img{
	vertical-align:middle;
	max-height:70px;
}





/*------------------------------------*\
	MAIN FOOTER
\*------------------------------------*/
footer.main-footer{
	margin-top:30px;
	border-top:1px solid #ddd;
	padding-top:10px;
	font-size:0.75em;
}
footer.main-footer ul{
	list-style:none;
	overflow:hidden;	
}
footer.main-footer li{
	float:left;
	border-right:1px solid #ddd;
	padding-right:5px;
	margin-right:5px;
}
footer.main-footer li:last-of-type{
	border-right:none;
	padding-right:0;
	margin-right:0;
}
footer.main-footer a{
	color:#777;
	text-decoration:none;
}
footer.main-footer a:hover,
footer.main-footer a:focus{
	color:#2e2e2e;
}



/*------------------------------------*\
	MISCELLANEOUS
\*------------------------------------*/
.mt{
	margin-top:20px;
}
.floated{
	overflow:hidden;
}
.text-right{
	text-align:right;
}
.accessibility{
	position:absolute;
	left:-9999999em;
}