/*------------------------------------*\
	THE NO 2 PLAN
	
	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-family:Arial, Helvetica, sans-serif;
	font-size:100%;
	color:#fff;
	background:#595959;
}
.content{
	position:relative;
	width:1024px;
	margin:0 auto;
}



/*------------------------------------*\
	BANDS
\*------------------------------------*/
.dark{
	color:#fff;
	background:#595959 url(../img/bg-dark.jpg);
}
.light{
	color:#000;
	background:#fffe3a url(../img/bg-light.jpg);
}



/*------------------------------------*\
	LINKS
\*------------------------------------*/
.links{
	list-style:none;
}
.links a{
	position:absolute;
	font-size:1.2em;
	line-height:1.2em;
	display:block;
	padding-left:90px;
	width:170px;
	color:#000;
	text-decoration:none;
	background-position:top left;
	background-repeat:no-repeat;
}
.links a:hover,
.links a:focus{
	text-decoration:underline;
}

/* Specific link icons */
.links a.books{
	background-image:url(../img/icons/link-books.png);
	background-size:73px 60px;
	padding:20px 0 20px 90px;
}
.links a.magazines{
	background-image:url(../img/icons/link-magazines.png);
	background-size:46px 80px;
	padding:7px 0 18px 67px;
}
.links a.toilet-paper{
	background-image:url(../img/icons/link-toilet-paper.png);
	background-size:51px 65px;
	padding:0 0 35px 65px;
}
.links a.apps{
	background-image:url(../img/icons/link-apps.png);
	background-size:40px 68px;
	padding:5px 0 35px 55px;
}
.links a.brush{
	background-image:url(../img/icons/link-brush.png);
	background-size:44px 90px;
	padding:22px 0 35px 60px;
}
.links a.gadgets{
	background-image:url(../img/icons/link-gadgets.png);
	background-size:30px 68px;
	padding:12px 0 35px 38px;
}
.links a.gadgets02{
	background-image:url(../img/icons/link-gadgets02.png);
	background-size:27px 61px;
	padding:12px 0 35px 38px;
}
.links a.seat{
	background-image:url(../img/icons/link-seat.png);
	background-size:36px 65px;
	padding:12px 0 35px 60px;
}



/*------------------------------------*\
	SECTIONS
\*------------------------------------*/
header{
	height:454px;
	background:url(../img/header.png) center no-repeat;
	background-size:1024px 454px;
}
header a{
	display:block;
	height:454px;
}

/* Section 1 */
.section01{
	height:915px;
	background:url(../img/section01.png) center no-repeat;
	/*background:url(../img/section01-guide.png) center no-repeat;*/
	background-size:1024px 915px;
}
.section01 .links a.books{
	left:227px;
	top:725px;
}
.section01 .links a.magazines{
	left:508px;
	top:715px;
}

/* Section 2 */
.section02{
	height:707px;
	background:url(../img/section02.png) center no-repeat;
	background-size:1024px 707px;
}
.comparison{
	text-align:center;
	padding-bottom:112px;
}
.comparison img{
	display:inline-block;
}

/* Section 3 */
.section03{
	height:1667px;
	background:url(../img/section03.png) center no-repeat;
	background-size:1024px 1667px;
}

/* Section 4 */
.section04{
	height:789px;
	background:url(../img/section04.png) center no-repeat;
	/*background:url(../img/section04-guide.png) center no-repeat;*/
	background-size:1024px 789px;
}
.section04 .links a.toilet-paper{
	left:227px;
	top:598px;
}
.section04 .links a.apps{
	left:511px;
	top:593px;
}
.section04 .paypal-button{
	position:absolute;
	top:455px;
	left:200px;
}

/* Section 5 */
.section05{
	height:841px;
	background:url(../img/section05.png) center no-repeat;
	/*background:url(../img/section05-guide.png) center no-repeat;*/
	background-size:1024px 841px;
}
.section05 .links a.brush{
	width:110px;
	left:273px;
	top:634px;
}
.section05 .links a.gadgets{
	width:110px;
	left:512px;
	top:642px;
}

/* Section 6 */
.section06{
	height:846px;
	background:url(../img/section06.png) center no-repeat;
	background-size:1024px 846px;
}

/* Section 7 */
.section07{
	height:1030px;
	background:url(../img/section07.png) center no-repeat;
	/*background:url(../img/section07-guide.png) center no-repeat;*/
	background-size:1024px 1030px;
}
.section07 .links a.seat{
	width:190px;
	left:660px;
	top:863px;
	background:none;
	padding:0;
}
.section07 .paypal-button{
	position:absolute;
	top:860px;
	left:200px;
}

/* Section 8 */
.section08{
	height:290px;
	background:url(../img/section08.png) center no-repeat;
	background-size:1024px 290px;
}
.section08-links{
	height:475px;
	position:relative;
}
.section08-links .links a{
	color:#fff;
}
.section08-links .links a.books{
	top:12px;
	left:222px;
}
.section08-links .links a.magazines{
	top:0;
	left:500px;
}
.section08-links .links a.toilet-paper{
	top:119px;
	left:234px;
	padding-left:76px;
}
.section08-links .links a.apps{
	top:115px;
	left:506px;
	padding-left:65px;
}
.section08-links .links a.brush{
	top:206px;
	left:229px;
	padding-left:80px;
}
.section08-links .links a.gadgets02{
	top:215px;
	left:512px;
	padding-left:58px
}
.section08-links .links a.seat{
	top:314px;
	left:240px;
	padding-left:65px;
}

/* Footer */
.footer{
	height:133px;
	background:url(../img/footer.png) center no-repeat;
	background-size:1024px 133px;
}



/*------------------------------------*\
	BASIC PAGE
\*------------------------------------*/
.page-title,
.page-content{
	padding:30px 0;
}
.page-title h1{
	font-family:'Yellowtail', cursive;
	font-size:3em;
}
.page-content p,
.page-content ul,
.page-content ol{
	margin-bottom:30px;
}



/*------------------------------------*\
	TEXT FORMATTING
\*------------------------------------*/
ul.links{
	font-family:'Yellowtail', cursive;
}
.accessibility{
	position:absolute;
	left:-9999999em;
}



/*------------------------------------*\
	RESPONSIVE STYLES
\*------------------------------------*/
@media screen and (max-width: 1025px){
	
	/* Resize elements */
	.content{
		width:760px;
	}
	header{
		width:760px;
		height:337px;
		background-size:760px 337px;
	}
	header a{
		height:337px;
	}
	.section01{
		height:679px;
		background-size:760px 679px;
	}
	.section02{
		height:525px;
		background-size:760px 525px;
	}
	.section03{
		height:1237px;
		background-size:760px 1237px;
	}
	.section04{
		height:586px;
		background-size:760px 586px;
	}
	.section05{
		height:624px;
		background-size:760px 624px;
	}
	.section06{
		height:628px;
		background-size:760px 628px;
	}
	.section07{
		height:764px;
		background-size:760px 764px;
	}
	.section08{
		height:215px;
		background-size:760px 215px;
	}
	.footer{
		height:99px;
		background-size:760px 99px;
	}
	
	/* Resize link images */
	.links a{
		width:160px;
	}
	.links a.books{
		background-size:37px 30px;
		padding:3px 0 20px 45px;
	}
	.links a.magazines{
		background-size:23px 40px;
		padding:7px 0 18px 30px;
	}
	.links a.toilet-paper{
		background-size:25px 32px;
		padding:0 0 35px 30px;
	}
	.links a.apps{
		background-size:20px 34px;
		padding:0 0 35px 30px;
	}
	.links a.brush{
		background-size:22px 45px;
		padding:5px 0 35px 30px;
	}
	.links a.gadgets{
		background-size:15px 34px;
		padding:0px 0 35px 22px;
	}
	.links a.gadgets02{
		background-size:15px 32px;
		padding:0 0 35px 10px;
	}
	.links a.seat{
		background-size:18px 33px;
		padding:0 0 35px 30px;
	}

	
	/* Reposition links */
	.section01 .links a.books{
		left:150px;
		top:530px;
	}
	.section01 .links a.magazines{
		left:370px;
		top:525px;
	}
	.section04 .links a.toilet-paper{
		left:150px;
		top:440px;
	}
	.section04 .links a.apps{
		left:370px;
		top:440px;
	}
	.section04 .paypal-button{
		position:absolute;
		top:335px;
		left:140px;
	}
	.section05 .links a.brush{
		width:110px;
		left:170px;
		top:475px;
	}
	.section05 .links a.gadgets{
		width:110px;
		left:375px;
		top:480px;
	}
	.section07 .links a.seat{
		width:160px;
		left:478px;
		top:635px;
		background:none;
		padding:0;
	}
	.section07 .paypal-button{
		position:absolute;
		top:635px;
		left:140px;
	}
	.section08-links{
		height:366px;
	}
	.section08-links .links a.books{
		top:12px;
		left:138px;
	}
	.section08-links .links a.magazines{
		top:0;
		left:390px;
	}
	.section08-links .links a.toilet-paper{
		top:100px;
		left:138px;
		padding-left:42px;
	}
	.section08-links .links a.apps{
		top:100px;
		left:390px;
		padding-left:28px;
	}
	.section08-links .links a.brush{
		top:180px;
		left:138px;
		padding-left:42px;
	}
	.section08-links .links a.gadgets02{
		top:184px;
		left:390px;
		padding-left:26px
	}
	.section08-links .links a.seat{
		top:267px;
		left:138px;
		padding-left:43px;
	}


}

@media screen and (max-width: 765px){
	
	
	/* Resize elements */
	.content{
		width:370px;
	}
	header{
		width:370px;
		height:164px;
		background-size:370px 164px;
	}
	header a{
		height:164px;
	}
	.section01{
		height:331px;
		background-size:370px 331px;
	}
	.section02{
		height:256px;
		background-size:370px 256px;
	}
	.comparison{
		padding:0 15% 30px 15%;
	}
	.comparison img{
		max-width:100%;
		height:auto;
	}
	.section03{
		height:602px;
		background-size:370px 602px;
	}
	.section04{
		height:286px;
		background-size:370px 286px;
	}
	.section05{
		height:304px;
		background-size:370px 304px;
	}
	.section06{
		height:305px;
		background-size:370px 305px;
	}
	.section07{
		height:372px;
		background-size:370px 372px;
	}
	.section08{
		height:105px;
		background-size:370px 105px;
	}
	.footer{
		height:49px;
		background-size:370px 49px;
	}
	
	
	/* Resize link images */
	.links a{
		width:70px;
		font-size:0.7em;
		line-height:1em;
	}
	.links a.books{
		background-size:19px 15px;
		padding:0 0 20px 22px;
	}
	.links a.magazines{
		background-size:12px 20px;
		padding:0 0 18px 15px;
	}
	.links a.toilet-paper{
		background-size:13px 16px;
		padding:0 0 35px 15px;
	}
	.links a.apps{
		background-size:10px 17px;
		padding:0 0 35px 15px;
	}
	.links a.brush{
		background-size:11px 23px;
		padding:4px 0 35px 15px;
	}
	.links a.gadgets{
		background-size:8px 17px;
		padding:0px 0 35px 11px;
	}
	.links a.gadgets02{
		background-size:8px 17px;
		padding:0 0 35px 11px;
	}
	.links a.seat{
		background-size:9px 17px;
		padding:0 0 35px 15px;
	}
	
	/* Reposition links */	
	.section01 .links a.books{
		left:72px;
		top:258px;
	}
	.section01 .links a.magazines{
		left:175px;
		top:258px;
		width:90px;
	}
	.section04 .links a.toilet-paper{
		left:72px;
		top:210px;
		width:60px;
	}
	.section04 .links a.apps{
		left:175px;
		top:210px;
		width:60px;
	}
	.section04 .paypal-button{
		position:absolute;
		top:161px;
		left:68px;
	}
	.section04 .paypal-button input{
		width:80px;
		height:24px;
	}
	.section05 .links a.brush{
		width:81px;
		left:77px;
		top:232px;
	}
	.section05 .links a.gadgets{
		width:55px;
		left:181px;
		top:236px;
	}
	.section07 .links a.seat{
		width:83px;
		left:228px;
		top:309px;
		background:none;
		padding:0;
	}
	.section07 .paypal-button{
		position:absolute;
		top:309px;
		left:68px;
	}
	.section07 .paypal-button input{
		width:80px;
		height:24px;
	}
	.section08-links{
		height:212px;
	}
	.section08-links .links a.books{
		top:0;
		left:67px;
	}
	.section08-links .links a.magazines{
		top:0;
		left:175px;
		width:90px;
	}
	.section08-links .links a.toilet-paper{
		top:55px;
		left:67px;
		padding-left:22px;
	}
	.section08-links .links a.apps{
		top:55px;
		left:175px;
		padding-left:14px;
		width:90px;
	}
	.section08-links .links a.brush{
		top:100px;
		left:67px;
		padding-left:21px;
	}
	.section08-links .links a.gadgets02{
		top:100px;
		left:175px;
		padding-left:13px;
		width:90px;
	}
	.section08-links .links a.seat{
		top:145px;
		left:67px;
		padding-left:21px;
	}
	
	
}