
	/*
	================================================
	CSS written by Elliot Jay Stocks & Decode
	Last edit: 14.02.2012 @ 10.16 GMT
	================================================
	*/

	/* Imports */
	@import "https://s3-eu-west-1.amazonaws.com/belong/css/reset.css";
	@import "https://s3-eu-west-1.amazonaws.com/belong/css/populaire.css";

	/* Basics */
	html 							{ background:#00bdeb url(https://s3-eu-west-1.amazonaws.com/belong/images/html.gif) fixed; padding-bottom:5em; }
	body							{ color:#222; font:1em/1.4em 'Skolar', 'Georgia', 'Times New Roman', serif; }
	h2, 
	button,
	input.button,
	div.blocks div h4				{ color:#fff; font:3em/1em 'Populaire', 'Skolar', 'Georgia', 'Times New Roman', serif; -webkit-font-smoothing:antialiased; }
	h2 span							{ display:block; }
	header h2						{ color:rgba(255,255,255,0.8); }
	header h2 span					{ color:rgba(255,255,255,1); display:inline; }
	button span						{ display:block; font:italic 0.35em/1.4em 'Skolar', 'Georgia', 'Times New Roman', serif; }
	h3,
	p, 
	li								{ font-style:italic; }
	p								{ padding:0.5em 0; }
	a								{ color:#ff0; text-decoration:none; }
	a:hover							{ color:#fff; }
	div.wrapper 					{ margin:0 auto; max-width:1000px; padding:0 2%; }
	div 							{ position:relative; }
	.clearfix 						{ clear:both; }
	.hidden                         { display:none; }

	/* Header */
	header							{ min-height:140px; }
	h1 								{ left:2%; position:absolute; top:0; width:151px; }
	h1 a img						{ width:100%; }
	nav.primary						{ padding:2em 0 1.5em 180px; }
	nav.primary ul li 				{ display:inline; } 
	nav.primary ul li.bag			{ float:right; }
	nav.primary ul li a				{ display:inline-block; color:#fff; padding:0.5em 40px 0.5em 0; -webkit-transition: color 0.25s ease-in-out; -moz-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; } /* padding:2.5em 40px 2em 0; */
	nav.primary ul li a.selected,
	nav.primary ul li a:hover		{ color:#ff0; } 
	nav.primary ul li.tshirts a		{ background:url(https://s3-eu-west-1.amazonaws.com/belong/images/icon-tshirts.png) 0 center no-repeat; padding-left:60px; }
	nav.primary ul li.story a		{ background:url(https://s3-eu-west-1.amazonaws.com/belong/images/icon-story.png) 0 center no-repeat; padding-left:45px; }
	nav.primary ul li.wall a		{ background:url(https://s3-eu-west-1.amazonaws.com/belong/images/icon-wall.png) 0 center no-repeat; padding-left:55px; }
	nav.primary ul li.bag a			{ background:url(https://s3-eu-west-1.amazonaws.com/belong/images/icon-bag.png) 0 center no-repeat; padding-left:50px; padding-right:0; }
	
	/* Bag */
	#bag							{ display:none; background:rgba(255,255,255,0.3); border-radius:5px; margin:2em 0; padding:2em 5%; }
	#bag ol,
	#bag ul 						{ float:left; width:100%; }
	#bag ol:first-of-type 			{ border-top: 1px dashed rgba(255,255,255,0.5); }
	#bag ol:last-of-type 			{ border-bottom: 1px dashed rgba(255,255,255,0.5); margin-bottom:2em; }
	#bag li 						{ float:left; padding:0.5em 0; width:20%; }
	#bag li.first 					{ width:60%; }
	#bag li.first span              { color:rgba(0,0,0,0.4); }
	#bag li.last 					{ text-align:right; width:20%; }
	#bag select#destination 		{ margin:0.5em 0; }
	#bag select.quantity 			{ width:50%; }
	#bag #vat-container 			{ display:none; }
	#bag #vat 						{ width:20%; }
	#bag p 							{ clear:both; }
	#bag input.button 				{ border:none; }
	#bag a.remove					{ display:none; /* Because do we really need remove when people can just click the minus button? */ margin-right:5%; }
	#bag a.plus,
	#bag a.minus					{ background:#222; border-radius:50px; color:#fff; display:inline-block; margin-left:0.5em; text-align:center; width:1.25em; }
	#bag a.plus:hover,
	#bag a.minus:hover				{ color:#ff0; }
	#bag a.plus:active,
	#bag a.minus:active				{ color:#222; background:#fff; }
	#bag p.order-total				{ color:#fff; }
	#bag p.order-total span#price	{ font-size:2em; padding-left:0.125em; }
	#bag span.bag-arrow				{ background:url(https://s3-eu-west-1.amazonaws.com/belong/images/bag-arrow.gif); height:18px; position:absolute; right:3%; top:-18px; width:36px; }
	
	/* Intro text */
	div#bag + h2 					{ font-size:4em; padding:0.5em 0; }
	div#bag + h2 + h3 				{ background:url(https://s3-eu-west-1.amazonaws.com/belong/images/decode_stars.png) top center no-repeat; color:#fff; padding:0 25% 2em 25%; }
	
	/* T-shirts */
	.tshirts > li 					{ border:2px dashed #fff; padding:2%; margin-bottom:5%; }
	.tshirts > li:last-child        { margin-bottom: 0; }
	div.showcase 					{ background: rgba(255,255,255,0.3); padding:5em 0; }
	div.showcase img.full			{ position:absolute; top:0; left:0; width:100%; }
	div.showcase h2,
	div.showcase p 					{ margin:0 5% 0 50%; position:relative; }
	div.showcase p 					{ color:#fff; }
	div.showcase.dark h2,
	div.showcase.dark p             { color:#222; }  
	nav.thumbs ol li 				{ position:absolute; top:70px; left:-10px; -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg); -ms-transform:rotate(10deg); transform:rotate(10deg); border:10px solid #fff; width: 75px; height: 75px; -webkit-box-shadow:0 0 20px 2px rgba(0,0,0,0.2); -moz-box-shadow:0 0 20px 2px rgba(0,0,0,0.2); box-shadow:0 0 20px 2px rgba(0,0,0,0.2); }
	nav.thumbs ol li:first-child 	{ left:-25px; top:-10px; -moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -o-transform:rotate(-3deg); -ms-transform:rotate(-3deg); transform:rotate(-3deg); }
	nav.thumbs ol li:last-child 	{ top:150px; -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); -ms-transform:rotate(-6deg); transform:rotate(-6deg); }
	nav.thumbs ol li:hover			{ cursor:pointer; margin-left:1px; }
	.options-container              { display: none; position:relative; }
	form.options 					{ background:#fff; position:relative; }
	form.options ol li 				{ float:left; width:25%; height: 145px; position: relative; border-bottom: 15px solid #000; }
	form.options ol li.gender:before,
	form.options ol li.colour:before,
	form.options ol li.size:before  			{ bottom: 0; left: 0px; border-width: 0 13px 13px 13px; content: ""; position: absolute; border-style: solid; border-color: #000 transparent; display: block; width: 0; }
	form.options ol li:last-child:before  		{ top: 25px; left: 0px; border-width: 10px 0 10px 10px; content: ""; position: absolute; border-style: solid; border-color: transparent #FFF; display: block; width: 0; }
	form.options ol li.gender:after,
	form.options ol li.colour:after 			{ content:url(https://s3-eu-west-1.amazonaws.com/belong/images/option_divider.png); position:absolute; top:0; right:-10px; }
	form.options ol li.gender.male:before 		{ left: 15px; }
	form.options ol li.gender.female:before 	{ left: 55px; }
	form.options ol li.size.small:before 		{ left: 9px; }
	form.options ol li.size.medium:before 		{ left: 40px; }
	form.options ol li.size.large:before 		{ left: 80px; }
	form.options ol li.size.xlarge:before 		{ left: 123px; }
	form.options ol li.size.xxlarge:before 		{ left: 175px; }
	form.options ol li.colour.position-1:before { left: 29px; }
	form.options ol li.colour.position-2:before { left: 102px; }
	form.options ol li.colour.position-3:before { left: 175px; }
	form.options ol li.gender .buttonContainer label 			{ background-color: transparent; height: 57px; width: 32px; }
	form.options ol li.gender .buttonContainer label.male 		{ background-image: url(https://s3-eu-west-1.amazonaws.com/belong/images/gender-male.png); height: 57px; width: 32px; }
	form.options ol li.gender .buttonContainer label.female 	{ background-image: url(https://s3-eu-west-1.amazonaws.com/belong/images/gender-female.png); height: 57px; width: 32px; }
	form.options ol li.size .buttonContainer label 				{ background-color: transparent; height: 39px; margin-right: 5px; }
	form.options ol li.size .buttonContainer label.small 		{ background-image: url(https://s3-eu-west-1.amazonaws.com/belong/images/size-small.png); width: 23px; }
	form.options ol li.size .buttonContainer label.medium 		{ background-image: url(https://s3-eu-west-1.amazonaws.com/belong/images/size-med.png); width: 30px; }
	form.options ol li.size .buttonContainer label.large 		{ background-image: url(https://s3-eu-west-1.amazonaws.com/belong/images/size-large.png); width: 36px; }
	form.options ol li.size .buttonContainer label.xlarge 		{ background-image: url(https://s3-eu-west-1.amazonaws.com/belong/images/size-xlarge.png); width: 42px; }
	form.options ol li.size .buttonContainer label.xxlarge 		{ background-image: url(https://s3-eu-west-1.amazonaws.com/belong/images/size-xxlarge.png); width: 49px; }
	h2 span small 								{ font-size:0.5em; }
	form.options ol li button					{ height: 160px; }
	form.options ol li:last-child 				{ float:right; height: 160px; border: none; }
	form.options ol li h3 		    			{ margin: 15px; font: 2em/1em 'Populaire', 'Skolar', 'Georgia', 'Times New Roman', serif; -webkit-font-smoothing: antialiased; clear: both; float: left; }
	form.options ol li p 		    			{ color: #00aeef; float: right; margin: 15px 30px 0 0; }

	form.options ol li .buttonContainer 					{ clear: both; padding: 0 0 0 10px; overflow: hidden; }
	form.options ol li .buttonContainer input[type="radio"] { display: none; }
	form.options ol li .buttonContainer label 				{ text-indent: -999px; width: 62px; height: 48px; display: block; float: left; background: url(https://s3-eu-west-1.amazonaws.com/belong/images/t-shirt-mask.png) no-repeat bottom center yellow; margin: 0 10px 0 0; }
	form.options ol li .buttonContainer label.red 			{ background-color: red; }
	form.options ol li .buttonContainer label.white 		{ background-color: white; }
	form.options ol li .buttonContainer label.blue 			{ background-color: blue; }
	
	a.chart													{ background:#222; border-radius:50px; color:#fff; display:inline-block; left:20%; margin-left:0.5em; position:absolute; text-align:center; top:15%;width:1.25em; }
	a.chart:hover											{ color:#ff0; }
	
	button,
	input.button 					{ background:#ec008c; border:none; color:#fff; margin:0; padding:0.75em 5%; text-align:center; width:100%; }
	input.button					{ width:auto; /* Overrides the 100% width in the line above */ }
	p.inline-button					{ padding-top:1.5em; }
	p.inline-button	a,
	input.button					{ background:#ec008c; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#fff; font:2em/1em 'Populaire', 'Skolar', 'Georgia', 'Times New Roman', serif; padding:0.25em; -webkit-font-smoothing:antialiased; }
	button,
	p.inline-button	a,
	input.button					{ -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
	button:hover,
	p.inline-button	a:hover,
	p.inline-button	a.clicked,
	input.button:hover				{ background:#ff0; border:none; color:#222; }
	
	/* 3 Blocks */
	div.blocks div					{ background:rgba(0,0,0,0.8); float:left; margin:2em 2% 0 0; padding-bottom:1em; width:32%; }
	div.blocks div:last-child		{ margin-right:0; }
	div.blocks div h4				{ color:#fff; padding:0.25em 5% 0 5%; }
	div.blocks div p				{ color:#fff; padding:0.5em 5%; }
	
	/* Footer */
	footer ul li 					{ display:inline-block; padding-right:1em; padding-top:2em; }
	
	/* Media queries */
	@media screen and (max-width:1050px) {
		div#bag + h2	 					{ padding:0.5em 2.5%; }
	}
		
	@media screen and (max-width:990px) {
		form.options ol li 					{ width:50%; }
		form.options ol li:nth-child(2n) 	{ float: right; }
	    form.options ol li.colour:after 	{ content: ""; }
	}
	
	@media screen and (max-width:800px) {
		body 								{ font-size:90%; }
		nav.thumbs ol li		    		{ top: 40px; width:45px; height: 45px; border-width: 5px; }
	    nav.thumbs ol li:first-child 		{ left:-15px; }
	    nav.thumbs ol li:last-child 		{ top:90px; }
	}
	
	@media screen and (max-width:680px) {
		body 								{ font-size:80%; }
		nav.primary                 		{ padding-bottom: 2.5em; }
		nav.primary ul li.tshirts a,
		nav.primary ul li.story a,
		nav.primary ul li.wall a    		{ background:none; padding-left: 0; padding-right: 10%; }
		div#bag + h2	 					{ padding:0.5em 5%; }
		div#bag + h2 + h3 					{ background:none; padding:0 5% 2em 5%; }
	}
	
	@media screen and (max-width:600px) {
		h2 span small 						{ display:block; }
	}
	
	@media screen and (max-width:570px) {
		header								{ min-height:6.5em; }
		h1									{ width:100px; }
		nav.primary							{ padding-left:130px; padding-bottom: 0.5em; }
        #bag li.first span          		{ display: block; }
	    #bag select#destination 			{ width:100%; }
		form.options ol li 					{ width:100%; }
	    form.options ol li.gender:after,
	    form.options ol li.colour:after 	{ content: ""; }
	    form.options ol li:last-child:before{ border: none; }
		a.chart								{ left:10%; }
		div.blocks div						{ float:none; margin:2em 0 0 0; width:100%; }
	}
	
	@media screen and (max-width:480px) {
       .tshirts > li                		{ border-width: 1px; }
	   div.showcase                			{ height: 160px; padding: 2em 0 0 0; }
	   div.showcase h2,
	   div.showcase p 			    		{ margin:0 5% 0 45%; }
	   div.showcase h2 span 				{ font-size: 90%; }
	   div.showcase h2 span small   		{ line-height: 1; display: block; }
	   div.showcase p 						{ display: none; }
	   div.showcase p.inline-button 		{ display: block; font-size: 90%; }
	}
	
	@media screen and (max-width:320px) {
	   nav.primary ul li.bag,
	   #bag span.bag-arrow          		{ display: none; }
	   div.showcase h2         				{ font-size: 200%; }
	}
		