@import 'fonts/stylesheet.css';
@import 'generics.less';
@import 'elements.less';
@import 'variables.less'; 

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: TYPOGRAPHY
:: COLUMNS
:: BLOCK GRIDS
:: TABS
:: REVEAL MODALS
:: GENERIC
:: FORMS
:: BODY
:: MAIN
:: TOP NAVIGATION
:: CRUMB NAVIGATION
:: LEFT NAVIGATION
:: FOOTER
:: TOOLBARS
:: REUSABLE MODULE: PRODUCT GRID
:: REUSABLE MODULE: SOCIAL SIGN UP
:: REUSABLE MODULE: HOW IT WORKS
:: REUSABLE MODULE: BASKET
:: REUSABLE MODULE: ADD TO BASKET/SHOW COSTS 
:: REUSABLE MODULE: WISH LIST: LIST
:: UNIQUE MODULE: HOME HERO
:: UNIQUE MODULE: HOME ABOUT US
:: TEMPLATES: CATEGORIES, COLLECTIONS, SEASONAL COLLECTIONS, VOUCHER
:: TEMPLATES: PRODUCT & VOUCHER
:: TEMPLATES: BASKET PAGE
:: TEMPLATES: CHECKOUT PROCESS / CUSTOMER / LOGIN
:: TEMPLATES: CHECKOUT SUCCESS
:: TEMPLATES: CUSTOMER ACCOUNT
:: TEMPLATE: WISH LISTS
:: TEMPLATE: HOW IT WORKS
:: TEMPLATE: PEACE OIL
:: TEMPLATE: CONTACT US
:: TEMPLATE: SEARCH
:: TEMPLATE: GENERIC PAGES
:: TEMPLATE: 404
:: RESPONSIVE
:: NO-JS
:: DEBUG

*/


/* :: TYPOGRAPHY */
/* ----------------------------------------- */

article, aside, canvas, details,
figcaption, figure, footer, header,
hgroup, nav, section, summary, video {
    display: block;
}

html, body, div, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
input, select, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	font-family: @familyRegular;
	font-size: @14pt;
	color: @body-color;
	line-height: @body-line-height;
	letter-spacing: @body-letter-spacing; 
}
strong {	
	color: inherit;
	font-size: inherit;
}
h1, h2, h3, h4, h5, h6 { font-family: @familyHeader; font-weight:normal; line-height: 1.3; color: @title-color; } 
h1.heavy, h2.heavy, h3.heavy, h4.heavy, h5.heavy, h6.heavy { font-family: @familyBoldHeader; } 
.cms-home h1 { font-size: @36pt; }
h1 { font-size: @44pt; line-height: 1.1; }
h2 { font-size: @30pt; line-height: 1.1; }
h3 { font-size: @24pt; line-height: 1.1; }
h4 { font-size: @22pt; line-height: 1.2; }
h5 { font-size: @18pt; line-height: 1.2; }
h6 { font-size: @16pt; line-height: 1.15; }
h1 b { font-size: 1em; color: @title-highlight-color; } 
h2 b { font-size: 1em; color: @title-highlight-color; }
h3 b { font-size: 1em; color: @title-highlight-color; }
address { font-style: normal; }
strong { font-family: @familyBold; font-weight: normal; }
em { font-family: @familyItalic; font-style: normal; } 
.alert { background:red; color:white; } 
input { .transition(0.3s, ease-in-out); }
input:focus { outline: none; }
.brand {
	h1, h2, h3, h4, h5, h6 {
		font-family: @familyBrand;
		color: @brand-logo-color;	
		line-height: 1.1em;
	}
	h1 {
		font-size: @48pt; 
	}
}

a, button {
	text-decoration: none;
	color: @color-brand-neutral;
	.transition(0.2s, ease-in-out);
}
a:hover {
	//color: darken(@nav-link-color, 50%);
	color: @highlight-color;
}
figure {
	img {
		max-width: 100%;
	}
	&.left, &.right {
		img {
			max-width: none;
		}
	}
}
p {
	margin-bottom: 1em;	
}
table {
	width: 100%
}

/* :: COLUMNS */
/* ----------------------------------------- */

.row { .clearfix; }
.column.right { 
	.right;
}
.column:last-child, .column.last { 
	margin-right: 0;
	.right;	
}
.column.left, .column.first { 
	.left;	
}

.column, .columns { margin-left: @column-padding; float: left; min-height: 1px; position: relative; }
.column:first-child, .columns:first-child { margin-left: 0; }
[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: left; }

.column.no-margin, .columns.no-margin { margin: 0; } 


.one 	{ .columnWidth(1); }
.two 	{ .columnWidth(2); }
.three 	{ .columnWidth(3); }
.four 	{ .columnWidth(4); }
.five 	{ .columnWidth(5); }
.six 	{ .columnWidth(6); }
.seven 	{ .columnWidth(7); }
.eight 	{ .columnWidth(8); }
.nine 	{ .columnWidth(9); }
.ten 	{ .columnWidth(10); }
.eleven { .columnWidth(11); }
.twelve { .columnWidth(12); }


/* :: BLOCK GRIDS */
/* ----------------------------------------- */
/*  --------------------------------------------------    
These are 2-up, 3-up, 4-up and 5-up ULs, suited
for repeating blocks of content. Add 'mobile' to
them to switch them just like the layout grid
(one item per line) on phones

For IE7/8 compatibility block-grid items need to be
the same height. You can optionally uncomment the
lines below to support arbitrary height, but know
that IE7/8 do not support :nth-child.
-------------------------------------------------- */

.block-grid { display: block; overflow: hidden; }
.block-grid>li { display: block; height: auto; float: left; }

.block-grid.two-up { margin-left: -4% }
.block-grid.two-up>li { margin-left: 4%; width: 46%; margin-bottom: 4%;}
/*  .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */

.block-grid.three-up { margin-left: -2% }
.block-grid.three-up>li { margin-left: 2%; width: 31.3%; margin-bottom: 2%;}
/*  .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */

.block-grid.four-up { margin-left: -2% }
.block-grid.four-up>li { margin-left: 2%; width: 23%; margin-bottom: 2%;}
/*  .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */

.block-grid.five-up { margin-left: -1.5% }
.block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; margin-bottom: 1.5%;}
/*  .block-grid.five-up>li:nth-child(5n+1) {clear: left;} */

/* Artfully masterminded by ZURB  */   


/* :: TABS */
/* ----------------------------------------- */

dl.tabs { display: block; }
dl.tabs dt { display: block; width: auto; font-size: @14pt; padding: 1px 9px 0 20px; float: left; cursor: default; }
dl.tabs dt:first-child { padding: 1px 9px 0 0; }
dl.tabs dd { margin-top: -4px; display: block; width: auto; font-size: @14pt; padding: 0; float: left; }
dl.tabs dd a { padding: 5px @padding-smaller; display: block; width: auto; font-size: @14pt; .rounded(@rounding-large); .transitionNone(); }
dl.tabs dd a.active { background: @color-brand-neutral; color: @reversed-type-color; }	

ul.tabs-content { margin: 0; display: block; }
ul.tabs-content>li { display: none; }
.no-js ul.tabs-content>li { display: block; }
ul.tabs-content>li.active { display: block; }

/* Artfully masterminded by ZURB  */


/* :: REVEAL MODALS */
/* ----------------------------------------- */
        
    .reveal-modal-bg { 
        position: fixed; 
        height: 100%;
        width: 100%;
        background: #000;
        z-index: 4000;
        display: none;
        top: 0;
        left: 0; 
        }
    
    .reveal-modal {
        visibility: hidden;
        top: 100px; 
        left: 50%;
        margin-left: -240px;
        width: 470px;
        background: @background-color;
        position: absolute;
        z-index: 5000;
        padding: @padding-medium @padding-small @padding-small;
		.rounded(@rounding-medium);
		.box-shadow(0px 0px @padding-small rgba(0, 0, 0, 0.35)); 
        }
        
    .reveal-modal.small         { width: 200px; margin-left: -140px;}
    .reveal-modal.medium        { width: 400px; margin-left: -240px;}
    .reveal-modal.large         { width: 600px; margin-left: -340px;}
    .reveal-modal.xlarge        { width: 800px; margin-left: -440px;}
    
    .reveal-modal .close-reveal-modal {
        font-size: 22px;
        line-height: .5;
        position: absolute;
        top: @padding-small;
        right: @padding-small;
        color: #aaa;
        text-shadow: 0 -1px 1px rbga(0,0,0,.6);
        font-weight: bold;
        cursor: pointer;
        } 
    
    .reveal-modal .row {
        min-width: 0;
    }
	.reveal-modal {
		h2, h3, h4, h5, h6 {
			margin-bottom: @padding-smallest;
		}
		p, label, input, textarea, select, li {
			font-size: @16pt;
		}
		ul, ol {
			list-style-type: none;
		}
		label, input, select, textarea {
			color: @input-label-color;	
			&.input-text, &[type=text], &[type=password],  {
				width: 100%;
				display: block;
				margin-bottom:  @padding-smaller;
			}
		}					
		textarea {
			width: 100%;
			min-height: 120px;
			margin-bottom:  @padding-smaller;
		}
	}
    
    /* Mobile */
        
        @media handheld, only screen and (max-width: 1023px) {
            .reveal-modal-bg { position: absolute; }
            
            .reveal-modal,
            .reveal-modal.small,
            .reveal-modal.medium,
            .reveal-modal.large,
            .reveal-modal.xlarge { width: 60%; top: 60px; left: 15%; margin-left: 0; padding: 20px; height: auto; }
        }
        
        @media handheld, only screen and (max-width: 767px) {
            .reveal-modal-bg { position: absolute; }
            
            .reveal-modal,
            .reveal-modal.small,
            .reveal-modal.medium,
            .reveal-modal.large,
            .reveal-modal.xlarge { width: 80%; top: 15px; left: 5%; margin-left: 0; padding: 20px; height: auto; }
        }
    
    
    /*
            
    NOTES
    
    Close button entity is ×
    
    Example markup
    
    <div id="myModal" class="reveal-modal">
        <h2>Awesome. I have it.</h2>
        <p class="lead">Your couch.  I it's mine.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
        <a class="close-reveal-modal">&#215;</a>
    </div>
    
    */


/* :: GENERIC */
/* ----------------------------------------- */

.reversed { color: @reversed-type-color; }
//.medium { font-size: @12pt; }
.add-to-wishlist {
	background: url(../images/add-reversed.png) no-repeat 6px 2px;
	padding: 3px 0 4px 30px;
	color: @color-brand-positive;
} 
.normal-link {
	font-size: @14pt;
	font-family: @familyRegular;
}
.button {
	font-family: @familyBold; 
	font-size: @12pt;
	display: inline-block; 
	padding: 4px 12px; 
	width: auto; 
	.rounded(@rounding-large);
	border: 5px solid @button-border-color;
	cursor: pointer; 
	position: relative; 
	color: @button-link-color;
	&:before { 
		content: ''; 
		display: block ; 
		position: absolute; 
		top: -5px; bottom: -5px; left: -5px; right: -5px; 
		.rounded(@rounding-large);
		border: 2px solid @button-outline-color; 
	}	
}
.thin { padding: 1px 6px; font-size: @12pt; }
.big { padding: 6px @padding-smaller; font-size: @14pt; }
.huge { padding: 6px @padding-smaller; font-size: @19pt; }
.huger { padding: 10px @padding-smaller; font-size: @24pt; }
.button.bold { font-family: @familyBold; }
.button.medium { padding: 4px @padding-smaller; }
.button.energetic { background: @color-brand-energetic; }
.button.neutral { background: @color-brand-neutral; }
.button.negative { background: @color-brand-negative; }
.button.positive { background: @color-brand-positive; }
.button.leading { 
	&:after {
		content: '\00BB';
		padding-left: 4px;
	}
 }
 .button.buy { 
	&:before {
		content: '';
		background: url(../images/buy.png) no-repeat 2px 2px;
		width: 22px;
		height: 22px;
		position: relative; 
		display: inline-block;
		float: left;
		.rounded(0px);
		border: none; 
		top: 0;
	}
	&:after {
		content: ''; 
		display: block ; 
		position: absolute; 
		top: -5px; bottom: -5px; left: -5px; right: -5px; 
		.rounded(@rounding-large);
		border: 2px solid @button-outline-color; 
	}
 }
.button.small { 
 	padding: 6px 6px;
	&:after  {
		top: -1px; bottom: -1px; left: -1px; right: -1px; 
	}
}
.button.buy.big { padding: 2px 9px; }
.button.buy.big.add { padding: 5px 9px 0; }
.button.buy.big.add:before { background-position: 2px 0; }
.button.buy.small { 
 	padding: 1px 6px;
	&:before {
		content: '';
		width: 17px;
		height: 16px;
		background: url(../images/buy-small.png) no-repeat 2px 2px;
	}
	&:after  {
		top: -3px; bottom: -3px; left: -3px; right: -3px; 
	}
}
.button.neutral:hover, .button.neutral.leading:hover  { background: @color-brand-energetic; }
.button.leading:hover { background: @color-brand-positive; }
.button.positive:hover { background: @color-brand-energetic; }
.button.disabled { 
	background: @color-brand-neutral; 
	&:hover { 
		background: @color-brand-neutral; 
	}
}
.button:hover { color: @button-link-color; }
.button:active { 
	top: 1px;
	.transitionNone();
 }
 .btn-remove {
	.sprite-background(12px, 13px, left, top);
	background-image: url(../images/bg-small-red-cross.png);
	.transitionNone();
	&:hover {
		background-position: left bottom;
	}
 }
.highlighted { 
	color: @highlight-color; 
	&:hover {		
		color: darken(@highlight-color, 35%);
	}
}
.inset { .text-shadow(0, 1px, 1px, 255, 0.5); }
.has-flyout {
	.flyout {
		display: none;
	}
}
.padded-module { 
	padding: 30px @padding-smaller 0; 
	p {	
		margin: 1em 0;	
	}
}
.padded-module.tight { 
	padding: @padding-smallest 0 0; 
}
.divider-module { 
	margin-bottom: @padding-largest;
	&:after {
		content: "";
		position: absolute;
		padding-top: @padding-medium;
		left: -@padding-small;
		display: block;
		width: 720px;
		height: 7px;
		background: url(../images/bg-section-divider.png) left bottom no-repeat;
	}
}
.divider-module.butted {
	margin-bottom: @padding-medium;
	&:after {
		bottom: -6px;
		height: 6px;
	}		
}
.divider-module.has-product-grid {
	margin-bottom: @padding-medium;
	&:after {
		bottom: -@padding-smaller;
	}
}
.divider-module.no-shadow {
	margin-bottom: @padding-large;
	&:after {
		height: 0;
		background: none;
	}		
}
.shadowed { 
	line-height: 0;
	&:after {
		content: "";
		display: block;
		width: 100%;
		height: 14px;
		background: url(../images/bg-shadow-right.png) top right no-repeat;
	}
}
.vcard {
	li {
		line-height: 1.5;
		h2, h3, h4, h5, h6 {
			line-height: 1.5;
		}
	}
}
.tooltip-indicator {
	padding: 0 6px;
	color: @reversed-color;
	background-color: @color-brand-neutral;
	.rounded(@padding-smaller);
	display: inline-block;
	margin-left: @padding-smallest;
	font-size: @12pt;
	cursor: default;
}
.tooltip {
	position: absolute;
	z-index: 999;
	max-width: 260px;
	padding: @padding-smaller;
	.drop-shadow(0, 0px, 16px, 0.35);
}
.no-padding { padding: 0; }
.margin-above {	margin-top: @padding-medium; }
.margin-above.smaller {	margin-top: @padding-smaller; }
.margin-above.smallest {	margin-top: @padding-smallest; }
.margin-below {	margin-bottom: @padding-small; }
.margin-below.medium { margin-bottom: @padding-medium; }
.margin-below.largest { margin-bottom: @padding-largest; }
.margin-gauche { margin-left: @padding-small; }
.margin-gauche.smallest { margin-left: @padding-smallest; }
.margin-droite { margin-right: @padding-small; }
.margin-droite.smallest { margin-right: @padding-smallest; }
.pad-left.largest {	padding-left: @padding-largest; }
.pad-right.largest { padding-right: @padding-largest; }
.pad-left.large { padding-left: @padding-large; }
.pad-right.large { padding-right: @padding-large; }
.pad-left.medium { padding-left: @padding-medium; }
.pad-right.medium {	padding-right: @padding-medium; }
.pad-left.small { padding-left: @padding-small; }
.pad-right.small { padding-right: @padding-small; }
.pad-left.smaller { padding-left: @padding-smaller; }
.pad-right.smaller { padding-right: @padding-smaller; }
.pad-left.smallest { padding-left: @padding-smallest; }
.pad-right.smallest { padding-right: @padding-smallest; }
.pad-top { padding-top: @padding-smaller; }
.pad-top.small { padding-top: @padding-small; }
.pad-bottom.small { padding-bottom: @padding-small; }
.pad-bottom.smaller { padding-bottom: @padding-smaller; }
.pad-bottom.smallest { padding-bottom: @padding-smallest; }
.pad-all { padding: @padding-smaller; }


/* :: FORMS */
/* ----------------------------------------- */

input, textarea {	
	padding: 0 6px;
	.rounded(2px);
	border: 1px solid @input-border-color;
	&[type=text], &[type=password], &[type=email]  {		
		height: 36px;
	} 
	&[type=checkbox], &[type=radio] {
		border: none;
	} 
	background: @input-background-color;
	.transition(0.2s, ease-in-out);
	&:focus {		
		background: @input-background-color-active;
	}
	&.quantity, &.qty {
		width: 50px;	
		height: 24px;
		padding: 0 6px;
		background: @input-quantity-background-color;
	}	
	&.wide {
		width: 50%;
	}
	&.narrow {
		width: 25%;
	}
	&.medium {
		width: 50%;
	}
	&.golden {
		width: 66%;
	}
	&.full {
		width: 100%;
	}
}
select {
	&.golden {
		width: 66%;
	}
}

label{
	&.inline-block {
		input {
			&.quantity, &.qty {
				margin-left: @padding-smallest/2;
			}
		}
	}
}



/* :: BODY */
/* ----------------------------------------- */

html {	
}
body {
	background-color: @background-color;
}
html.js body {	
}
	
	
/* :: MAIN  */
/* ----------------------------------------- */

.container {
	margin: 0 auto;
	padding-top: @padding-small;
	padding-bottom: @padding-large;
	background-color: @container-background-color;
	max-width: @maxWidth;
	min-width: @maxWidth; /* to stop scrunching unless we go responsive */
	min-height: 520px;
	section {
		/*margin-bottom: @section-padding;
		padding: 0 @padding-small @padding-small;*/
	}
	&.two-columns-left {
		background: url(../images/bg-two-columns-left.png) repeat-y;
	}
	.section-header {
		h6 {
			font-size: @16pt;
			p {
				font-size: @16pt;
			}
		}
	}
}

/* :: TOP NAVIGATION */ 
/* ----------------------------------------- */

header {
	&.main-navigation {
		position: relative;
		section {
			.row {
				margin: @centered;
				max-width: @maxWidth;
				min-width: @maxWidth; /* to stop scrunching unless we go responsive */
			}
			&.secondary {
				background: /*url(../images/bg-header.png)*/ @color-brand-energetic;
				.logo { 
					display: inline-block;
					padding: 22px 0 @padding-small;
				}
			}
			&.primary {
				.gradient(@header-gradient-bottom, @header-gradient-bottom, @header-gradient-top);
				height: 46px;
				li {					
					>a {	
						color: @nav-link-color;					
						font-size: @13pt;						
						&:hover {
							color: @color-brand-energetic;		
							&.flyout-toggle {
								&:after {
									.arrow-down(6px, @color-brand-energetic);
								}
							}	
						}
					}
				}
			}	
			.cart-small {
				height: 125px;
				background: url(../images/bg-nav-cart.png) no-repeat 16px 46px @cart-background-color;
				&>div {
					margin: 44px 0 0 70px;	
				}
				p {
					font-size: @12pt;
					margin-bottom: 0;
					color: @cart-quickview-color;
					&.title {
						strong {
							font-size: @14pt;	
						}
						a {
							&:before {
								content: '/';
								padding: 0 @padding-smallest;	
							}
						}
					}	
					a {
						color: @color-brand-positive;	
					}
					&.empty {
						margin-top: @padding-smallest;
					}
				}
				&:before, &:after {
					content: '';
					display: block;
					width: 80px;
					height: 125px;
					position: absolute;
				}
				&:before {
					background: url(../images/nav-cart-before.png);
					left: -79px;
				}
				&:after {					
					right: -79px;
					background: url(../images/nav-cart-after.png);
				}
			}
			nav {
				&[role=navigation]  {
					margin-left: -@padding-smaller;
					ul {
						>li {
							&:last-child {
								margin-right: 0;
							}
							&:hover {
								background-color: @flyout-background-color;
							}
							&.has-flyout {
								position: relative;
								padding-right: @padding-smaller;
								&:hover {
									.flyout {
										display: block;
										position: absolute;
										z-index: 100;
										left: 0;
										top: 46px;
									}
								}
								.flyout {
									padding: @padding-smallest @padding-small;
									background-color: @flyout-background-color;	
									.border-radius(0, @rounding-medium, @rounding-medium, 0);
									display: none;	
									left: auto;
									ul {
										margin: 0 @padding-smallest;
										li {
											line-height: 1;
											font-size: @13pt;
											margin-left: 2px;
											&.level-top {
												margin-left: 0;
											}
											&:last-child {
												margin-bottom: 0;
											}
											a {
												white-space: nowrap;
												font-family: @familyRegular;
												padding: 4px 0;	
												height: auto;
												color: @nav-link-color;						
												&:hover {
													color: @color-brand-energetic;		
												}
												&:before {												
													.arrow-right(5px, white);
													position: absolute;
													top: 6px;
													left: -12px;
												}
											}
										}			
									}
									h1, h2, h3, h4, h5, h6, p {
										color: @reversed-type-color;
									}
								}	
								#browse-gifts {	
									.box-shadow(0px 0px @padding-small rgba(0, 0, 0, 0.35)); 
									padding: @padding-small;
									width: @maxWidth + @padding-smaller;
									left: 0;
									.three{
										img {
											width: 128px;
											height: 96px;
											margin-right: @padding-small + @padding-smaller;									
										}
										display: inline;
									}
									.left.two {
										margin: @padding-small @padding-medium 0 0;	
										display: inline;
									}
									.left.five {	
										margin: @padding-small @padding-medium 0 @padding-small;	
										margin-right: 0;
										display: inline;
										ul {
											float: none;
											li {
												float: left;
												display: inline-block;
												width: 48%;
												&.level-top {
													width: 100%;
												}
											}
										}
									}
									ul {	
										float: left;
										display: inline-block;
										margin-bottom: @padding-small;
										li {
											&.level-top {
												a {			
													font-family: @familyBold;	
													color: @reversed-type-color;					
													&:hover {
														color: @color-brand-energetic;		
													}
													&:before {												
														content: none;
													}
												}
											}
										}
												
									}
									
								}
							}
							> a {
								display: inline-block;
								padding: 12px @padding-smaller;
								height: 46px;
								font-family: @familyBold;
								&.flyout-toggle {
									position: relative;
									&:after {
										.arrow-down(6px, @nav-link-color);
										position: absolute;
										top: 19px;		
										right: 0;	
									}
								}	
							}
						}
					}
				}				
			}
			nav {
				&.utility  {
					margin-right: @padding-small;
					li {
						a {	
							font-size: @11pt;
							color: @nav-link-utility-color;
							display: inline-block;
							padding: 15px @padding-smallest/2 0;
							&:after {
								padding-left: @padding-smallest; 
								content: '|';
							}
						}						
						&:last-child {
							a {
								&:after {
									padding-left: 0; 
									content: '';
								}
							}
						}
					}
				}
			}
			form {
				margin-top: @padding-smallest;	
				.right;
				position: relative;
				input {	
					padding: 0;
					-webkit-appearance: none;
					border: none;
					background: none;
					.left;
					font-size: @13pt;
					&[type=search], &.reversed {
						.rounded(@rounding-large);
						background: @search-background-color;
						width: 126px;
						margin-left: 6px;
						padding: 6px;
						padding-right: 36px;
						height: 30px;
						zoom: 1;
						&:focus {	
							color: @search-focus-color;				
							background: lighten(@search-background-color, 50%);					
							width: 175px;
							&~input[type=submit] {	
								background-position: left bottom;
							}
						}
						&::-webkit-search-cancel-button {
    						-webkit-appearance: none;
						}
					}
					&[type=submit] {
						.transitionNone();
						position: absolute;
						right: 0;
						top: 1px;
						.sprite-background(32px, 32px, left, top);
						border: none;
						background: url(../images/search.png) no-repeat;
					}
				}
			}			
		}
	}
}

/* :: CRUMB NAVIGATION */ 
/* ----------------------------------------- */

header {	
	&.crumb-navigation {
		padding-bottom: 10px;
		margin-bottom: @padding-smaller * 2;
		li {
			background: url(../images/bg-breadcrumb-left.png) left no-repeat @breadcrumb-background-color;
			a {
				color: @breadcrumb-link-color;
				display: block;
				padding: 2px 16px 2px 20px;
				font-size: @12pt;
				background: url(../images/bg-breadcrumb-right.png) right no-repeat;
				&:hover {					
					color: darken(@color-brand-neutral, 25%);
				}
			}
			&.home {	
				.border-radius(0, 0, 3px, 3px);			
				background-color: @breadcrumb-background-home-color;
				background-image: none;
				a {
					padding-left: @padding-smallest;
					background-image: url(../images/bg-breadcrumb-home.png);
				}
			}
			&:last-child {		
				background: none;
				a {
					cursor: default;
					padding: 2px @padding-smallest;
					background: none;
					color: @breadcrumb-link-current-color;	
				}
			}			
		}
	}
}

/* :: LEFT NAVIGATION */
/* ----------------------------------------- */

nav {
	&.left-nav, &.left-nav-customer {
		h5 {
			text-transform: uppercase;	
			padding-bottom: @padding-smallest / 2;
			margin: 7px 0 @padding-smallest;
			border-bottom: 1px solid @light-border-color;
		}
		li {
			line-height: 1;
			a {
				display: block;
				padding: 6px @padding-smaller;
				margin-left: -@padding-smaller;
				color: @left-nav-link-color;
				&:hover, &.current {
					background-color: @left-nav-link-background-color;
				}
			}	
		}
	}
}


/* :: FOOTER */
/* ----------------------------------------- */

footer {
	background-color: @footer-background-color;
	section {
		margin: @centered;
		max-width: @maxWidth;
		min-width: @maxWidth; /* to stop scrunching unless we go responsive */
		.sprite-background(auto, 307px, 653px, 100px);
		text-indent: 0;
		background-image: url(../images/bg-footer.png);
		#secondary-links {
			margin-top: 62px;
			h3 {
				a {
					.sprite-background(299px, 27px, 0, 0);
					background-image: url(../images/footer-charities.png);	
				}
			}
			li {
				margin: 30px @padding-small 30px 0;
				a {
					&#footer-knit {
						.sprite-background(126px, 31px, 0, 0);
						background-image: url(../images/footer-knit.png);	
					}
					&#footer-card {
						.sprite-background(82px, 31px, 0, 0);
						background-image: url(../images/footer-card.png);							
					}
					&#footer-peace {
						.sprite-background(85px, 31px, 0, 0);
						background-image: url(../images/footer-peace.png);	
					}
					&#footer-green-hotel {
						.sprite-background(118px, 31px, 0, 0);
						background-image: url(../images/footer-green-hotel.png);	
						margin-right: -30px;						
					}
				}				
			}
			small {
				color: @footer-small-color;	
				font-size: @12pt;
			}
		}
		#footer-links {
			margin-top: 125px;
			ul {
				li {
					width: 175px;
					a {
						display: block;
						color: @footer-link-color;	
						font-size: @12pt;
						&:hover {							
							color: @footer-link-hover-color;	
						}
					}
				}
			}
		}
	}
}

/* :: TOOLBARS */
/* ----------------------------------------- */

ul.toolbar {
	background-color: @toolbar-background-color;
	.rounded(3px);	
	margin: @padding-small 0;
	margin-left: 0;	
	select {
		font-size: @14pt;
	}
	&>li {
		padding: 0 @padding-smaller;
		margin-top: 1%; 
		margin-bottom: 1%; 	
		&.last {
			float: right;
		}
		.pages {
			li {
				&.label {			
					padding: 0 @padding-smallest/2;						
				}
				&.current  {
					padding: 0 @padding-smallest;
					color: @reversed-color;
					background-color: @color-brand-neutral;
					.rounded(@padding-smaller);
				}
				a {						
					padding: 0 @padding-smallest/2;
					&:hover {
						color: @title-color;
					}
				}
			}
		}
	}
}


/* :: REUSABLE MODULE: PRODUCT GRID */
/* ----------------------------------------- */

.product-grid.reusable {
	margin-top: @padding-small;	
	li {
		margin-bottom: @padding-smaller*2;
		margin-left: 20px;
		.info {
			min-height: @padding-medium;
		}
		.price {
			margin: @padding-smallest 0;	
			padding: @padding-smallest/4 0;	
			.category {
				color: @recessive-link-color;
				width: 66%;
				padding-left: @padding-smallest;
			}
		}
		.description, .description p {
			font-size: @12pt;
		}
		img {			
			border: 10px solid @image-border-color;	
			margin-bottom: @padding-small/2;
			.transition(0.2s, ease-in-out);
			width: @product-thumbnail-medium-width;
			height: @product-thumbnail-medium-height;
			&:hover {				
				border-color: @link-color;
			}
		}
		h6 {
			a {
				color: @title-color;	
				&:hover	{
					color: @link-color;
				}
			}
		}			
		strong, p, strong span, .category {
			font-size: @12pt;
			display: inline;
		}
		strong, strong span {
			color: @title-color;	
			font-family: @familyBold; 
			font-weight: normal;
		}
		&.last {	
			float: right;
		}
		&:first-child, &.first {
			clear: both;		
			margin-left: -1px;	
		}
	}
	&.large {
		li {			
			width: @product-thumbnail-large-width;	
		}
	}
	&.medium {
		li {			
			width: @product-thumbnail-medium-width;	
		}
	}
	&.small {
		li {		
			width: @product-thumbnail-small-width;				
			margin-left: 10px;
			img {			
				border: 8px solid @image-border-color;
				width: @product-thumbnail-small-width;
				height: @product-thumbnail-small-height;
				&:hover {				
					border-color: @link-color;
				}
			}
			h6 {
				font-size: @14pt;	
				margin: -6px 0 4px;
			}
			&:last-child, &.last {	
				float: right;
			}
			&:first-child, &.first {
				clear: both;		
				margin-left: -1px;	
			}
			&:last-child.first {
				float: left;		
			}
		}
	}
}
body.category-browse-collections, body.category-special-occasions {
	.product-grid.reusable {
		li {
			img {			
				height: @product-thumbnail-medium-height-collections;
			}
		}
	}
}
.product-grid.reusable.similar {
	li {
		img {		
			width: @product-thumbnail-large-width;
			height: @product-thumbnail-large-height;
		}
		.description {
			margin-top: @padding-smallest;
			width: 66%;
		}
	}
}


/* :: REUSABLE MODULE: SOCIAL SIGN UP */
/* ----------------------------------------- */
#social.reusable {
	.sign-up {
		margin-left: 240px;
		header {
			padding-bottom: 12px;
			margin-bottom: @padding-smaller;
			ul {
				padding-top: @padding-smallest;
				li {
					margin-left: 12px;	
					#facebook {
						.sprite-background(32px, 32px, 0, 0);
						background-image: url(../images/social-facebook.png);	
					}
					#twitter {
						.sprite-background(32px, 32px, 0, 0);
						background-image: url(../images/social-twitter.png);	
					}
				}
			}
		}
		h3 {
			margin-bottom: 0.75em;	
		}
		input {
			width: 93%;
			font-size: @16pt;
			margin-bottom: @padding-smallest;	
		}
	}	
}


/* :: REUSABLE MODULE: HOW IT WORKS */
/* ----------------------------------------- */
#how-it-works.reusable {
	.rounded(3px);	
	background: @how-it-works-background-color;
	.four {
		width: 28%;
	}
	.eight {
		width: 69%;
		.tabs {
			margin-top: 4px;
			padding-bottom: 11px;
		}
		.tabs-content {
			margin: 1em 0;
			li {		
				height: 210px;	
				margin-right: -@padding-smaller;
				padding-right: @padding-smaller;
				padding-left: 160px;
				&#peace-oilTab {
					background: url(../images/how-it-works-peace-oil.png) no-repeat 0px @padding-medium;	
					background: url(../images/how-it-works-peace-oil.png) no-repeat 0px @padding-medium, url(../images/bg-how-it-works-peace-oil.png) no-repeat right center;	
				}
				&#little-good-giftsTab {
					background: url(../images/how-it-works-little-good-gifts.png) no-repeat 0px @padding-medium;	
					background: url(../images/how-it-works-little-good-gifts.png) no-repeat 0px @padding-medium, url(../images/bg-how-it-works-little-good-gifts.png) no-repeat right center;	
				}
				&#gigantic-good-giftsTab {
					background: url(../images/how-it-works-gigantic-good-gifts.png) no-repeat 0px @padding-medium;	
					background: url(../images/how-it-works-gigantic-good-gifts.png) no-repeat 0px @padding-medium, url(../images/bg-how-it-works-gigantic-good-gifts.png) no-repeat right center;	
				}
			}			
		}
	}
	.border-bottom {
		padding-bottom: @padding-smaller;
	}
	h3, h4, p {		
		color: @reversed-type-color;
	}
	h3 {
		a {
			color: @reversed-type-color;
		}
	}
}


/* :: REUSABLE MODULE: BASKET */
/* ----------------------------------------- */
.basket.reusable {
	margin-bottom:  @padding-smaller;
	&.has-remove-column {
		width: 112%;
		th.remove, td.remove {
			background: @background-color;
			width: 10%;
			margin-right: -10%;
		}
	}
	&.success {
		tbody {
			td {
				vertical-align: top;
				p {
					margin: @padding-smallest 0 0;
				}
			}
		}
	}
	tr {
		&:nth-child(even) {
			td {
				background-color: @basket-even-row-color;
				&.remove {
					background-color: transparent;
				}
			}
		}	
		th {
			background-color: @basket-header-color;
			text-align: left;
			font-weight: normal;
			&.gifts {
				width: 25%;
			}
		}
		th, td {
			font-size: @16pt;
			color:  @basket-body-color;
			padding: @padding-smaller;
			vertical-align: middle;
			h6 a {
				color: @title-color;
				&:hover {					
					color: @highlight-color;
				}
			}
			&.gift.image {
				padding-right: 0;
				img {
					vertical-align: middle;
				}
			}
			&.a-center {
				text-align: center;
			}
			.price {
				white-space: nowrap;
			}
		}
		&.grand-total {	
			th, td {
				background-color: @basket-header-color;	
			}
		}
	}
	tfoot {
		tr {
			&.first {
				border-bottom: 1px solid @light-border-color;
				h4 {
					text-align: right; 
				}
			}
			&:nth-child(even) {
				background-color: transparent;
				th, td {
					background-color: transparent;
				}
			}
			&.grand-total {	
				th, td {
					background-color: @basket-header-color;	
				}
			}
		}
	}
}

.basket-summary.reusable {
	margin-bottom: @padding-large;
	.summary-totals { 
		padding: @padding-smaller 0;
		margin-bottom: @padding-smaller;
		.basket-totals {
			width: auto;
			th, td {
				text-align: left;
				font-size: @20pt;
				color:  @basket-body-color;
				padding: 0 @padding-smaller;
				vertical-align: middle;
				.price {
					white-space: nowrap;
				}
			}
		}
	}
	aside {
		background-color: @basket-aside-color;
		padding: @padding-smaller/2 @padding-smaller;
		p {
			font-size: @16pt;
			color: @title-color;
			margin: 0;
		}
	}
	.cta {
		padding: @padding-medium 0;
	}
}

.checkout-progress.reusable {
	margin-bottom: @padding-medium;
	padding-bottom: @padding-small;
	ul {
		margin-top: 12px;
		li {
			.rounded(3px);
			background: url(../images/bg-checkout-progress-left.png) left no-repeat @checkout-progress-background-color;
			span {
				display: block;
				padding: 2px 20px 2px 24px;
				font-size: @16pt;
				background: url(../images/bg-checkout-progress-right.png) right no-repeat;
			}
			&.active {		
				background: url(../images/bg-checkout-progress-left-active.png) left no-repeat @color-brand-positive;
				span {
					color: @reversed-color;
					background: url(../images/bg-checkout-progress-right-active.png) right no-repeat;
				}
			}
			&:first-child {
				span {
					padding-left: 8px;	
				}
				background-image: none;		
			}
		}	
	}
}


/* :: REUSABLE MODULE: ADD TO BASKET/SHOW COSTS */
/* ----------------------------------------- */
body div.j2tajax-confirm, body div.j2tajax-progress {
	.drop-shadow(0, 16px, 16px, 0.35);
	.rounded(@padding-smaller);
	padding: @padding-small @padding-medium @padding-medium;
	min-height: 200px;
	ul {
		list-style-type: none;
	}
	.success-msg {
		margin-bottom: @padding-small;
		.j2tajax-checkout-img 
		{
			margin-right: @padding-smaller;
		}
		.j2tajax-checkout-txt 
		{
			color: @title-color; 
			font-size: @16pt;
			line-height: 1.3;
		}
	}
}

body div.j2tajax-progress {
	padding-top: 0;
	min-height: 100px;
}

#hiddenitems {
	position: absolute;
	margin-top: @padding-smaller;
	background: @background-color;
	width: auto;
	padding: @padding-smaller;
	border-radius: @padding-smaller;
	.drop-shadow(0, 0px, 16px, 0.35);
	z-index: 400;
	th, td {
		color: @title-color;
		padding: @padding-smallest/2 @padding-smallest;
		&.price {			
			font-family: @familyBold;
		}
	}
	.spacer {
		td {
			font-size:  @padding-smallest/2;
		}
	}
	.subtotal {
		td {
			padding-top: @padding-smallest;
			font-family: @familyBold;
		}
	}
}


/* :: REUSABLE MODULE: WISH LIST: LIST */
/* ----------------------------------------- */
.my-lists.reusable {
	margin-bottom:  @padding-smaller;
	&.has-remove-column {
		width: 112%;
		th.remove, td.remove {
			background: @background-color;
			width: 10%;
			margin-right: -10%;
		}
	}
	tr {
		&:nth-child(even) {
			background-color: @basket-even-row-color;
		}	
		th {
			background-color: @basket-header-color;
			text-align: left;
			font-weight: normal;
			&.list {
				width: 25%;
			}
		}
		th, td {
			font-size: @16pt;
			color:  @basket-body-color;
			padding: @padding-smaller;
			vertical-align: middle;
			&.gift.image {
				padding-right: 0;
				img {
					vertical-align: middle;
				}
			}
		}	

	}
}


/* :: UNIQUE MODULE: HOME HERO */
/* ----------------------------------------- */

.cms-home {
	#hero {
		width: 720px;
		height: 552px;
		margin-left: -@padding-small;		
		padding-left: @padding-small;
		background: url(../images/hero.jpg) right top no-repeat;
		padding-right: 410px;
		padding-top: 10px;
		p {
			font-size: @16pt;
		}
	}	
	#hero2 {
		background: url(../images/donkey.jpg) 25px 55px no-repeat;
		padding-left: 255px;
		padding-top: 40px;
		padding-bottom: 40px;
		blockquote {
			font-family: @familyItalic;
			margin-bottom: 1em;
			font-size: @16pt;
		}
		p {
			font-size: @16pt;
		}
		h2, h3, h4, h5, h6 {
			margin-bottom: @padding-smallest;
		}
	}	
}



/* :: UNIQUE MODULE: HOME ABOUT US */
/* ----------------------------------------- */

.cms-home {
	#about-us {
		width: 700px;
		height: 288px;
		background: url(../images/bg-about-us-module.jpg) center center no-repeat;
		padding-right: @module-padding-right-big;
	}	
}



/* :: TEMPLATES: CATEGORIES, COLLECTIONS, SEASONAL COLLECTIONS, VOUCHER */
/* ----------------------------------------- */

body {
	&.product-voucher, &.product-category {
		section {
			&[role=main] {
				.header-image {
					.section-header {
						background-position: top right;
						background-repeat: no-repeat;
						padding-right: @module-padding-right-medium;
						min-height: @product-thumbnail-medium-height;
					}
				}
				.section-header {
					h1 {
						margin-bottom: @padding-small;
					}
					h6 {
						color: @body-color;
						font-family: @familyRegular;
						line-height: 1.5;
						/*font-size: @14pt;
						
						p {
							font-size: @14pt;
							line-height: 1.5;
						}*/
					}
					&.no-image {
						padding-right: 0;
					}
				}
				.hero {
					h2 {
						a {
							color: @title-color;
							&:hover {
								color: @color-brand-neutral;
							}
						} 
					}
				}
				h2 {
					margin-bottom: @padding-smallest;
				}
			}
		}
	}
}
body {
	&.category-gigantic-good-gifts, &.category-in-memoriam {
		section {
			&[role=main] {
				.header-image {
					.section-header {
						background-position: top right;
						background-repeat: no-repeat;   
					      padding-right: 300px; 
					      min-height: 300px;
					}
				}
			}
		}
	}
}
body {
	&.category-little-good-gifts {
		section {
			&[role=main] {
				.header-image {
					.section-header {
						background-image: none;
					    padding-right: 0; 
					    min-height: 0;
					    .pull-quote {
					    	margin-top: -@padding-large;
					    }
					}
				}
			}
		}
	}
}





/* :: TEMPLATES: PRODUCT & VOUCHER */
/* ----------------------------------------- */

body {
	&.catalog-product-view {
		section {
			&.product {
				margin-bottom: @padding-largest;
				.left-col {
					//padding-right: @padding-medium;	
					figure {
						img {
							max-width: 300px;	
							border: 1px solid @light-darker-border-color;
						}
					}
					h4 {
						margin-bottom: 0.5em;	
					}
					#how-it-works {
						padding: @padding-small @padding-small @padding-smallest;
						background: @light-background-color;
						margin: @padding-small 0 @padding-medium;
						.rounded(3px);
					}
				}
				.right-col {
					//margin-left: 0;
					//width: 59%;
					br {
						display: none;	
					}
					h1 {
						font-size: @36pt;	
						margin-bottom: 0.5em;	
					}
					h6 {
						font-size: @14pt;	
						font-family: @familyRegular;
						color: @body-color;
						margin-bottom: @padding-smallest;
					}
					p {						
						font-size: @16pt;	
					}
					.product-options {
						.required {
							display: none;
						}
						margin: @padding-smallest 0;
					}
					.purchase {	
						margin-left: 16px;	
						padding: @padding-smallest 14px;				
						.gradient(@purchase-gradient-top, @purchase-gradient-bottom, @purchase-gradient-top);	
						.price-box {
							span {
								font-family: @familyBold;
								font-size: @22pt;	
								color: @title-color;
							}
						}
						.add-to-cart {
							margin: @padding-smallest 0;
							color: @title-color;
							font-size: @16pt;
							button {
								margin: @padding-smallest -5px;
							}
						}
					}
					.more-information {						
						background: url(../images/pdf-icon.png) no-repeat 6px 2px;
						padding: 3px 0 4px 30px;
						font-size: @14pt;
					}
				}
				&.voucher {
					h2 {
						margin-bottom: 0.5em;
					}
					section {
						&.voucher-picker {
							margin: @padding-smaller 0 @padding-medium;	
							#voucher-slider {
								width: 94%;
								margin: 0 0 2px 6px;
								background: url(../images/bg-voucher-slider.png) 10px 0px no-repeat;
								height: 12px;
								padding-right: 12px;
								a {
									top: -7px;
									border: 5px solid white;
									-webkit-appearance: none;
									outline: none;
								}
							}
							#voucher-amount {
								span {
									font-family: @familyRegular;
								}
							}
							#voucher-labels {
								font-size: @16pt;
							}
							.purchase {
								label {
									font-size: @16pt;
									padding-top:  @padding-smallest;
								}
								button {
									float: right;	
								}
							}
						}
						&.voucher-testimonials {
							.testimonials-text {
								padding-right: @padding-medium;
								p, em {
									font-size: @16pt;
								}
							}
						}
					}
				}
			}
		}
		section {
			&.similar-gifts {
				margin-top: -@padding-medium;
				margin-bottom: @padding-largest;
			}
		}
	}
}


/* :: TEMPLATES: BASKET PAGE */
/* ----------------------------------------- */

body {
	&.checkout-cart-index {
		section {
			&[role=main] {
				padding-top: @padding-medium;
				#discount-coupon-form {
					margin: @padding-small 0;
					padding: @padding-small 0;
					h3 {
						display: inline-block;
						cursor: pointer;
						 &:after {
						 	border: none;
							.arrow-down(6px, @title-color);
							top: 11px;
							position: absolute;
							margin-left: 6px;
						 }
						 &:hover {
					 		color: @color-brand-neutral;
						 }
						 &.expanded {						 	
							 &:after {
						 		border: none;
								.arrow-up(6px, @title-color);
								top: 14px;
							 }
						}
					}
					.discount-form {
						margin: @padding-smaller 0;
					}
				}
				.remove-voucher {
					margin-left: @padding-medium;
				}
			}			
		}
	}
}


/* :: TEMPLATES: CHECKOUT PROCESS / CUSTOMER / LOGIN */
/* ----------------------------------------- */

body {
	&.checkout-onepage-index, &.customer-account-forgotpassword, 
	&.customer-account-resetpassword, &.customer-account-login, 
	&.customer-account-create, &.customer-account-logoutsuccess, &.customer {
		section {
			&[role=main] {
				padding-top: @padding-medium;
				h4 {
					margin-bottom: @padding-smaller;
					padding-bottom: 4px;
					b {
						display: block;
						font-weight: normal;
						font-size: @14pt;
					}
				}
				p, label, input, textarea, select, li {
					font-size: @16pt;
				}
				ul, ol {
					list-style-type: none;
				}
				label, input, select, textarea {
					color: @input-label-color;
				}
				input{
					&.input-text, &[type=text], &[type=password],  {
						width: 100%;
						display: block;
						margin-bottom:  @padding-smaller;
						&.narrow {
							width: 25%;
						}
						&.medium {
							width: 50%;
						}
						&.golden {
							width: 66%;
						}
						&.full {
							width: 100%;
						}
						&.validation-failed {
							border-color: @color-brand-negative;
						}
					}
				}
				textarea {
					width: 100%;
					min-height: 180px;
				}
				select {
					width: 100%;
					//min-height: 32px;
					margin-bottom:  @padding-smaller;
				}
				.basket {
					h1, h2, h3, h4, h5, h6 {
						margin-bottom: 0;
						padding-bottom: 0;
					}
					tfoot {
						tr {
							th {
								background: none;
							}
						}
					}
				}
				#opc-review {
					display: none;
				}
				#checkoutSteps {
					li {
						&.section {
							display: none;
							&.active {
								display: block;
							}
						}
					}
					.please-wait {
						display: block;
						margin-top: @padding-smaller;
					}
					.your-order {
						tr {
							&.line-item {
								td {
									&.quantity-product {
										width: 75%;
									}
								}
							}
							&.sub-totals {
								td {
									padding: @padding-smallest/2 @padding-smallest;
								}
							}
							&.grand-total {
								td {
									padding: @padding-smaller @padding-smallest;
								}
							}
						}
						td {
							padding: @padding-smallest;
						}
					}
					#checkout-step-shipping {						
						.same-as-billing {
							border-color: @donation-border-color;
							background-color: @donation-background-color;
						}
						.customer-name {
							h4 {
								display: none;
							}
						}
						.change-delivery {
							p {
								font-size: @14pt; 
							}
						}
					}
					#checkout-step-review {
						h6 {
							margin-bottom: @padding-smallest;
						}
						.donation {
							h5 {
								padding: 5px;
								padding-left: 0;
							}
						}
						.donation, .clickforapound {
							padding: @padding-small;
						}
						.donation, .gift-aid {
							border-color: @donation-border-color;
							background-color: @donation-background-color;
						}
						.clickforapound {
							border-color: @click-border-color;
							background-color: @click-background-color;
						}
						#checkout-review-table {
							.gifts {
								width: 66%;
							}
						}
						.agreement-content {
							display: none;
						}
					}
				}
			}
		}
	}
}

body {
	&.customer {
		section {
			&[role=main] {
				padding-top: @padding-small;
			}
		}
	}
}

ul.messages {
	list-style-type: none;
	ul {
		list-style-type: none;
	}
}
.error-msg, .validation-advice {
	color: @color-brand-negative;
	margin: @padding-small 0;
	li {
		color: @color-brand-negative;
	}
}
 .validation-advice {
 	margin-top: -@padding-smallest;
 }
.success-msg {
	color: @color-brand-positive;
	margin: @padding-small 0;
	li {
		color: @color-brand-positive;
	}
}


/* :: TEMPLATES: CHECKOUT SUCCESS */
/* ----------------------------------------- */

body {
	&.checkout-onepage-success {
		section {
			&[role=main] {				
				.success-msg {
					font-size: @36pt;
					color: @color-brand-positive;
				}
				.intro {
					padding-bottom: @padding-medium;
					background: url(../images/success.png) 88% 0% no-repeat; 
					p {
						font-size: @16pt;
					}
					h5 {
						padding: @padding-smaller 0;
					}
					.print-order {
						a {
							background: url(../images/print-order.png) no-repeat;
							padding: @padding-smaller 0; 
							padding-left: @padding-medium;
						}
					}
					.share {
						border-color: @donation-border-color;
						background-color: @donation-background-color;
						ul {
							padding-top: @padding-smallest;
							li {
								margin-right: 12px;	
								#facebook {
									.sprite-background(32px, 32px, 0, 0);
									background-image: url(../images/social-facebook.png);	
								}
								#twitter {
									.sprite-background(32px, 32px, 0, 0);
									background-image: url(../images/social-twitter.png);	
								}
							}
						}
					}
				}
				th {
					&.gifts {
						width: 60%;
					}
				}
				.gift-aid {
					h5 {
						padding-top: @padding-small;
					}
					.gift-aid-applied {
						min-height: 100px;
						background: url(../images/gift-aid.png) no-repeat; 
						padding-left: @module-padding-right-big;
					}					
				}
			}
		}
	}
}

 


/* :: TEMPLATES: CUSTOMER ACCOUNT */
/* ----------------------------------------- */

body {
	&.customer, &.customer-account-login, &.customer-account-create, &.adjgiftreg-index-view {
		section {
			&[role=main] {
				.section-header {
					h1 {
						margin-bottom: @padding-small;
					}
				}
				.welcome-msg {
					p {
						font-size: @16pt;
					}
				}
				h2, h3, h4, h5, h6 {
					margin-bottom: @padding-smallest;
				}
				div>a, p>a, p, div, address, .limiter label {
					font-size: @16pt;

				}
				p, .limiter label {
					color: @body-color;
				}
				>.row {
					>.three.column {
						.left-nav, .block-compare, .block-reorder {
							display: none;
						}
					}
				}
				table {
					th {
						text-align: left;
						background-color: @basket-header-color;
						h6 {
							margin-bottom: 0;
						}
					}
					td, th {
						padding: @padding-smaller;
						&.last {
							text-align: right;
						}
					}
					&#my-orders-table {
						tfoot {
							td {
								padding: 0 @padding-smaller;
								&.pad-top {
									padding-top: @padding-smaller;
								}
							}
						}
					}
				}
				.limiter {
					select {
						width: auto;
						margin: @padding-smallest;
					}
				}
				.back-link {
					display: none;
				}
			}
		}
	}
}

/* :: TEMPLATE: WISH LISTS */
/* ----------------------------------------- */

body {
	&.adjgiftreg-index-home {
		section {
			&[role=main] {
				.section-header {
					h1 {
						margin-bottom: @padding-small;
					}
				}
				.intros {
					div {
						h5 {
							margin: @padding-medium 0 @padding-smallest;
							&:first-child {
								margin-top: @padding-smaller;
							}
						}
					}					
				}
			}
		}
	}
}

.wish-list-table {
	&.has-remove-column {
		width: 112%;
		th.remove, td.remove {
			background: @background-color;
			width: 10%;
			margin-right: -10%;
		}
	}
	tr {
		&:nth-child(even) {
			td {
				background-color: @basket-even-row-color;
				&.remove {
					background-color: transparent;
				}
			}
		}	
		td {
			&.gift {
				width: 18%;
			}	
		}
	}
	img {
		width: @product-thumbnail-table-width;
	}

}

/* :: TEMPLATE: HOW IT WORKS */
/* ----------------------------------------- */

body {
	&.cms-how-it-works {
		section {
			&[role=main] {
				.section-header {
					h1 {
						font-size: @36pt;
						margin-bottom: @padding-small;
					}
				}
				h3 {
					margin-bottom: @padding-smaller;
				}
				.row.border-bottom {
					padding-bottom: @padding-small;
				}
				.how-it-works {
					padding: @padding-small 0;
				}
				div.crackers-gift-cards {			
					margin-bottom: @padding-medium;
				}
				section.crackers-gift-cards {					
					padding-bottom: @padding-medium;
				}
				.quote-block {
					position: absolute;
					aside {
						margin-top: @padding-small;
						&:first-child {
							margin-top: 0;
						}
					}
					h6, blockquote, cite {
						display: block;
						text-align: center;
						font-style: normal;
						font-size: @14pt;
					}
					h6, blockquote {
						font-family: @familyBrand;
					}
					h6 {
						margin-bottom: @padding-smallest/2;
					}
					blockquote {
						 margin-bottom: @padding-smallest;
					}
					cite {
						font-size: @11pt;
					}
					.neutral {
						blockquote, cite {
							color: @color-brand-neutral;
						}
					}
					.positive {
						blockquote, cite {
							color: @color-brand-positive;
						}
					}
					.energetic {
						blockquote, cite {
							color: @color-brand-negative;
						}
					}
				}
				.big-quote {
					img {
						display: block;
						margin: -@padding-largest 0 0 @padding-small;
					}
					blockquote {
						h2 {
							font-family: @familyBoldItalic;
						}						
					}
					cite {
						color: @title-color;
						font-style: normal;		
						font-size: @24pt;
					}
				}
				#guarantee-and-promise {
					padding: @padding-medium;
					background: url(../images/bg-shaded-column.png) top right repeat-y;
					.guarantee {
						p {
							font-size: @16pt;
						}
					}
				}
				#big-quote-carousel {
					padding: 0 @padding-largest*2 @padding-medium;
					blockquote {	
						text-align: center;
						font-size: @24pt;
						color: @color-brand-neutral;
						font-family: @familyItalic;
						&.hide {
							position: absolute;
						}
					}
				}
				#case-studies {
					padding: @padding-small 0 @padding-medium;
					height: @padding-largest*4;
					h3, h4 {
						margin-bottom: @padding-smaller;
					}
					h4 {
						color: @body-color;
						text-transform: uppercase;
						img {
							width: 150px;
						}
					}
				}
			}
		}
	}
}

/* :: TEMPLATE: PEACE OIL */
/* ----------------------------------------- */

body {
	&.cms-peace-oil {
		section {
			&[role=main] {
				blockquote {
					font-family: @familyBoldItalic;	
					font-size: @16pt;
					margin-bottom: @padding-smallest;
				}
				cite {
					color: @title-color;
					font-style: normal;	
					strong {
						font-family: @familyBold;
						display: block;	
					}
				}
				table.peace-oil-prices {
					tbody {
						tr {
							&:nth-child(even) {
								background-color: @basket-even-row-color;
							}
						}	
					}	
					th {
						&.name {
							width: 70%;
						}
						background-color: @basket-header-color;
						text-align: left;
						font-family: @familyBold;
						font-size: @18pt;
						font-weight:  normal;
					}
					th, td {
						color:  @basket-body-color;
						padding: @padding-smaller;
						vertical-align: middle;
					}
				}
			}
		}
	}
}

/* :: TEMPLATE: GOOD GIFTS FOR COMPANIES */
/* ----------------------------------------- */
body {
	&.cms-good-gifts-for-companies {
		section {
			&[role=main] {
				.related-grid {
					h6 {
						margin-top: @padding-smallest;
						a {
							color: @title-color;
							&:hover {
								color: @color-brand-neutral;
							}
						}
					}
					p {
						font-size: @12pt;
					}
				}
			}
		}
	}
}




/* :: TEMPLATE: CONTACT US */
/* ----------------------------------------- */

body {
	&.cms-contact-us {
		section {
			&[role=main] {
				.company-name {
					color: @title-color;
				}
				p, li {
					font-size: @16pt;
				}
			}
		}
	}
}

/* :: TEMPLATE: GENERIC PAGES */
/* ----------------------------------------- */

body {
	&.cms-page-view {
		section {
			&[role=main] {
				.section-header {
					h1 {
						margin-bottom: @padding-small;
					}
				}
				h2, h3, h4, h5, h6 {
					margin-bottom: @padding-smallest;
				}
			}
		}
	}
	section {
		&[role=main] {
			.cms-block {
				h2, h3, h4, h5, h6 {
					margin-bottom: @padding-smallest;
				}	
				p, li {
					font-size: @16pt;
				}	
			}
		}
	}
}

/* :: TEMPLATE: SEARCH / BROWSE GIFTS */
/* ----------------------------------------- */

body {
	&.catalogsearch-result-index, &.cms-browse-gifts {
		section {
			&[role=main] {
				.three.column {
					.block.block-layered-nav {
						display: none;
					}
				}
				section {
					&#social {
						margin-top: @padding-largest;
					}
				}
			}
		}
	}
}


/* :: TEMPLATE: 404 */
/* ----------------------------------------- */

body {
	&.cms-no-route {
		section {
			&[role=main] {
				padding-top: @padding-medium;
				.section-header {
					h1 {
						margin-bottom: @padding-small;
						span {
							color: @color-brand-negative;
						}
					}
				}
				padding-right: @module-padding-right-bigger;
				background: url(../images/bg-404.jpg) 100% 30% no-repeat; 
			}
		}
	}
}


/* :: RESPONSIVE */
/* ----------------------------------------- */

@media only screen and (max-width: 1200px) {	
}

@media only screen and (max-width: 1024px) {
	header {
		&.main-navigation {
			section {
				.cart-small {
					margin-right: 80px;				
				}
			}
		}
	}
	.basket.reusable {
		margin-bottom:  @padding-smaller;
		&.has-remove-column {
			width: 100%;
			th.remove, td.remove {
				display: none;
				width: 0;
				margin: 0;
			}
		}
	}
	.my-lists.reusable {
		&.has-remove-column {
				width: 100%;
			th.remove, td.remove {
				display: none;
				width: 0;
				margin: 0;
			}
		}
	}
	.wish-list-table {
		&.has-remove-column {
				width: 100%;
			th.remove, td.remove {
				display: none;
				width: 0;
				margin: 0;
			}
		}
	}
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 560px) {	
}

@media only screen and (max-width: 320px) {
}

/* :: NO-JS */
/* ----------------------------------------- */

div.noscript {
	height: 100px;
	background-color: #333;
	p {
		color: #FFF;
	}
}

/* :: DEBUG */
/* ----------------------------------------- */

//* {
	//outline: 1px solid red;	
//}