/* Basic CSS Styles & Structure						   */

html {
	height: 100%;
}

body {
	background: url('images/body_bg.jpg') repeat;
	color: #19335F;
	font-family: 'Roboto Condensed', Arial, Helvetica, Sans-Serif;
	font-weight: 400;
	height: 100%;
	margin: 0;
}

.wrapper {
	-webkit-box-shadow: 0px 0px 13px 2px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 13px 2px rgba(0,0,0,1);
	box-shadow: 0px 0px 13px 2px rgba(0,0,0,1);
	margin: 20px auto;
	width: 960px;
}

header {
	background-color: #0052A2;
	height: 100px;
	width: 960px;
}

section {
	width: 960px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto Slab', Arial, Helvetica, Sans-Serif;
	font-weight: 700;
	letter-spacing: -1px;
}

h1 {
	font-size: 32px;
	margin: 0 0 0 10px;
	padding: 10px 0 0 0;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 24px;
	margin: 10px 0 3px 0;
}

h4 {
	font-size: 20px;
	margin: 10px 0 3px 0;
}

footer {
	background-color: #DDD;
	height: 293px;
	width: 960px;
}



/* Header Styles & Structure						   */

header .logo {
	background: url('images/logo.svg') no-repeat top;
	float: left;
	height: 60px;
	margin: 20px 0 20px 20px;
	position: absolute;
	width: 249px;
}
	header .logo:hover { background-position: bottom; }
	header .logo a { display: block; height: 60px; width: 249px; }

header .navigation {
	float: right;
	height: 31px;
	margin: 34px 20px 35px 0;
	width: 615px;
}

header nav {
	color: #19345F;
	font-size: 16px;
	font-weight: 700;
}

	header nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	header nav ul li {
		float: left;
		height: 31px;
		line-height: 30px;
		margin: 0 6px 0 0;
		width: auto;
	}
		header nav ul li a { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -moz-border-radius: 2px 2px 2px 2px; -webkit-border-radius: 2px 2px 2px 2px; background-color: #78C2CF; border-radius: 2px 2px 2px 2px; color: #19345F; display: block; padding: 0 7px; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease-out; }
		header nav ul li a:hover { background-color: #19345F; color: #78C2CF; }
		header nav ul li a:active { color: white; }



/* Home Page										   */

#containers {
	background: url('images/homepage/containers.jpg') no-repeat;
	height: 500px;
	width: 960px;
}

	.homelinks {
		float: right;
		height: 88px;
		margin: 399px 10px 0 0;
		width: 418px;
	}
		.homelinks a { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; border: 4px solid white; color: white; display: block; font-size: 18px; font-weight: 700; height: 34px; line-height: 34px; text-align: center; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease-out; }
			.homelinks a:hover { border-color: #19345F; }
		a.shopanywhere { float: right; width: 410px; }
		a.findoutmore { float: left; margin: 6px 6px 0 0; width: 180px; }
		a.financeavailable { float: right; margin: 6px 0 0 0; width: 216px; }

#featuredretailers {
	background: #EEE;
	height: 200px;
	width: 960px;
}

	.retailers {
		height: 170px;
		margin: 0 auto;
		width: 940px;
	}
		.retailers ul { list-style: none; margin: 26px 0 0 0; padding: 0; }
			.retailers ul li { float: left; height: 85px; width: 188px; }
				.retailers ul li.logo { background-position: top; background-repeat: no-repeat }
				.retailers ul li.asda { background: url('images/homepage/retailer_asda.png'); }
				.retailers ul li.tesco { background: url('images/homepage/retailer_tesco.png'); }
				.retailers ul li.argos { background: url('images/homepage/retailer_argos.png'); }
				.retailers ul li.sainsburys { background: url('images/homepage/retailer_sainsburys.png'); }
				.retailers ul li.superdrug { background: url('images/homepage/retailer_superdrug.png'); }
				.retailers ul li.johnlewis { background: url('images/homepage/retailer_johnlewis.png'); }
				.retailers ul li.next { background: url('images/homepage/retailer_next.png'); }
				.retailers ul li.mands { background: url('images/homepage/retailer_mands.png'); }
				.retailers ul li.furniturevillage { background: url('images/homepage/retailer_furniturevillage.png'); }
					.retailers ul li.asda:hover, .retailers ul li.tesco:hover, .retailers ul li.argos:hover, .retailers ul li.sainsburys:hover, .retailers ul li.superdrug:hover, .retailers ul li.johnlewis:hover, .retailers ul li.next:hover, .retailers ul li.mands:hover, .retailers ul li.furniturevillage:hover { background-position: bottom; }

#specialoffers {
	background: url('images/homepage/specialoffer.jpg') no-repeat;
	height: 350px;
	width: 960px;
}

#groceries {
	background: url('images/homepage/groceries.jpg') no-repeat;
	height: 350px;
	width: 960px;
}

#shopnow {
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	background: url('images/homepage/shopnow.jpg') no-repeat;
	overflow: hidden;
	height: 250px;
	transition: all 0.3s ease-in;
	width: 960px;
}
	#shopnow:hover { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; height: 387px; transition: all 0.3s ease-out; }

	#shopnow .button {
    display: inline-block;
    margin: 215px 10px 20px 580px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 8px 0 #19335F, 0 15px 20px rgba(0, 0, 0, .35);
    -moz-box-shadow: 0 8px 0 #19335F, 0 15px 20px rgba(0, 0, 0, .35);
    box-shadow: 0 8px 0 #19335F, 0 15px 20px rgba(0, 0, 0, .35);
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
    -moz-transition: -moz-box-shadow .1s ease-in-out;
    -o-transition: -o-box-shadow .1s ease-in-out;
    transition: box-shadow .1s ease-in-out;
    font-size: 50px;
    color: #FFF;
	}
		#shopnow .button span {
			display: inline-block;
			padding: 20px 30px;
			background-color: #77C1CE;
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(190, 48.7%, 63.3%, .8)), to(hsla(219, 72.2%, 28.2%, .2)));
			background-image: -webkit-linear-gradient(hsla(190, 48.7%, 63.3%, .8), hsla(219, 72.2%, 28.2%, .2));
			background-image: -moz-linear-gradient(hsla(190, 48.7%, 63.3%, .8), hsla(219, 72.2%, 28.2%, .2));
			background-image: -o-linear-gradient(hsla(190, 48.7%, 63.3%, .8), hsla(219, 72.2%, 28.2%, .2));
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
			-moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
			box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
			font-family: 'Roboto Condensed', Arial, Helvetica, Sans-Serif;
			font-weight: 700;
			line-height: 1;
			text-shadow: 0 -1px 1px #19335F;
			-webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in-out;
			-moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;
			-o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;
			transition: background-color .2s ease-in-out, transform .1s ease-in-out;
		}
			.button:hover span { background-color: #13335F; text-shadow: 0 -1px 1px #19335F; }
			.button:active, .button:focus { -webkit-box-shadow: 0 8px 0 #101836, 0 12px 10px rgba(0, 0, 0, .3); -moz-box-shadow: 0 8px 0 #101836, 0 12px 10px rgba(0, 0, 0, .3); box-shadow: 0 8px 0 #101836, 0 12px 10px rgba(0, 0, 0, .3); }
			.button:active span { -webkit-transform: translate(0, 4px); -moz-transform: translate(0, 2px); -o-transform: translate(0, 2px); transform: translate(0, 2px); }

#finance, #airfreight {
	background: #77C1CE;
	height: 350px;
	width: 960px;
}

	.icon { float: left; height: 206px; left: 30px; position: relative; top: 45px; width: 206px; }
	.finance { background: url('images/homepage/finance.svg') no-repeat; }
	.groceries { background: url('images/homepage/groceries.svg') no-repeat; }
	.airfreight { background: url('images/homepage/airfreight.svg') no-repeat; }

a.whitelink {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	border: 4px solid white;
	color: white;
	float: right;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 5px 32px;
	position: relative;
	right: 10px;
	text-decoration: none;
	text-transform: uppercase;
	top: 85px;
	transition: all 0.3s ease-out;
}
	a.whitelink:hover { border-color: #19345F; color: #19345F; }

a.navylink {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	border: 4px solid #143360;
	color: #143360;
	float: right;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 5px 32px;
	position: relative;
	right: 10px;
	text-decoration: none;
	text-transform: uppercase;
	top: 91px;
	transition: all 0.3s ease-out;
}
	a.navylink:hover { border-color: white; color: white; }

p.homepage {
	font-size: 26px;
	font-weight: 300;
	left: 15px;
	position: relative;
	text-align: center;
	top: 70px;
}



/* Page												   */

#page {
	background: #EEE;
	overflow: hidden;
	width: 960px;
}

#section {
	float: left;
	margin: 0 10px;
	width: 660px;
}
	#section h1 { margin: 0 0 10px 0; }
	#section h4 { margin: 0 0 5px 5px; }
	#section h4.terms { margin: 15px 0 2px 10px; }
	#section p {
		color: black;
		font-family: 'Roboto', Arial, Helvetica, Sans-Serif;
		font-size: 16px;
		font-weight: 300;
		line-height: 24px;
		margin: 0 0 7px 0;
		padding: 0 0 0 15px;
	}
		#section p.blurb { border-left: 5px solid #19335F; font-size: 20px; font-weight: 400; letter-spacing: -1px; line-height: 26px; margin: 0 0 40px 10px; padding: 3px 0 3px 7px; }
		#section p.terms { font-size: 14px; }
		#section p.lastupdate { font-size: 12px; font-weight: 400; margin: 20px 0 10px -15px; }
	#section a {
		color: #19335F;
		font-weight: 400;
	}
		#section a:hover { text-decoration: none; }
	#section span {
		color: black;
		float: right;
		font-size: 12px;
		font-weight: 300;
		letter-spacing: 0;
		margin: 3px 0 0 0;
	}
	#section ul {
		color: black;
		list-style: disc;
		margin: -5px 0 5px 0;
	}
		#section ul li {
			font-family: 'Roboto', Arial, Helvetica, Sans-Serif;
			font-size: 14px;
			font-weight: 300;
			margin: 0 0 3px 0;
		}
	
.ordersteps {
	height: 313px;
	margin: 0 0 0 10px;
	width: 650px;
}
	.ordersteps .step, .freightboxes .box {
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		background: #78C2CF;
		color: #19335F;
		height: 52px;
		margin: 0 0 2px 0;
		overflow: hidden;
		transition: all 0.3s ease-out;
	}
		.ordersteps .step:hover, .freightboxes .box:hover { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; background: #19335F; color: white; height: 95px; transition: all 0.3s ease-out; }
		.ordersteps .step h5, .otherservices .service h5, .freightboxes .box h5 { background-position: 10px 10px; background-repeat: no-repeat; font-family: 'Roboto Condensed', Arial, Helvetica, Sans-Serif; font-size: 18px; height: 52px; letter-spacing: 0; line-height: 52px; margin: 0; padding: 0 0 0 52px; text-transform: uppercase; }
			.freightboxes .box h5 strong { float: right; font-size: 14px; font-weight: 400; padding: 0 10px 0 0; text-transform: none; }
			.ordersteps .computer { background: url('images/icon_computer.png'); }
			.ordersteps .email { background: url('images/icon_email.png'); }
			.ordersteps .confirmation { background: url('images/icon_thumbsup.png'); }
			.ordersteps .box, .freightboxes .freightbox { background: url('images/icon_box.png'); }
			.ordersteps .delivery { background: url('images/icon_phone.png'); }
			.otherservices .basket { background: url('images/icon_basket.png'); }
			.otherservices .plane { background: url('images/icon_plane.png'); }
		.ordersteps .step div, .freightboxes .box div { font-family: 'Roboto', Arial, Helvetica, Sans-Serif; font-size: 14px; font-weight: 300; line-height: 18px; margin: 0; padding: 0 5px 0 10px; }
		
.freightboxes {
	height: 230px;
	margin: 0 0 0 10px;
	width: 650px;
}
	.freightboxes .box:hover { height: 100px; }
	.freightboxes .box .price { float: right; font-size: 28px; font-weight: 700; margin: 15px 0 0 0; }
	.freightboxes .box .price strong { font: 300 14px 'Roboto Condensed', Arial, Helvetica, Sans-Serif; text-transform: uppercase; }
	
		
.otherservices {
	height: 52px;
	margin: 0 0 25px 10px;
	width: 650px;
}
	.otherservices .service {
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		background: #78C2CF;
		color: #19335F;
		float: left;
		height: 52px;
		margin: 0 2px 0 0;
		overflow: hidden;
		transition: all 0.3s ease-out;
		width: 324px;
	}
		.otherservices .service:hover { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; background: #19335F; color: white; transition: all 0.3s ease-out; }
		.otherservices .service a { display: block; height: 52px; text-decoration: none; width: 324px; }
			.otherservices .service h5:hover { color: white; }
		.otherservices .right { margin: 0; }

#sidebar {
	float: right;
	margin: 160px 10px 0 0;
	width: 270px;
}
	#sidebar h5 {
		font-family: 'Roboto Condensed', Arial, Helvetica, Sans-Serif;
		font-size: 18px;
		font-weight: 700;
		height: 26px;
		letter-spacing: 0;
		line-height: 24px;
		margin: 10px 0 0 0;
		text-transform: uppercase;
	}
		#sidebar h5.important { color: #D8000C; }
	#sidebar p {
		color: black;
		font-family: 'Roboto', Arial, Helvetica, Sans-Serif;
		font-size: 14px;
		font-weight: 300;
		line-height: 20px;
		margin: 0 0 5px 0;
		padding: 0 0 0 5px;
	}
	#sidebar a {
		color: #19335F;
		font-weight: 700;
	}
		#sidebar a:hover { text-decoration: none; }
	#sidebar ol {
		list-style: decimal;
	}
		#sidebar ol li, #sidebar ul li { line-height: 18px; margin: 0; padding: 0 0 7px; }
	#sidebar ul {
		list-style: disc;
	}
	#sidebar ol, #sidebar ul {
		color: black;
		font-family: 'Roboto', Arial, Helvetica, Sans-Serif;
		font-size: 14px;
		font-weight: 300;
		margin: 0;
		padding: 0 0 0 28px;
	}

	#sidebar .sidebar {
		border-bottom: 1px solid #19335F;
		border-left: 10px solid #19335F;
		margin: 0 0 15px 0;
		padding: 0 0 0 5px;
	}



/* Footer Styles & Structure						   */

footer .top {
	background: url('images/footer_penguins.svg') no-repeat bottom right;
	height: 258px;
	margin: 0 auto;
	width: 940px;
}
	footer .top .topblock {
		float: left;
		height: 150px;
		width: 235px;
	}
	footer .top .bottomblock {
		float: left;
		height: 108px;
		width: 235px;
	}
	footer .top ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
		footer .top ul li { color: #333; font-family: 'Roboto', Arial, Helvetica, Sans-Serif; font-size: 14px; font-weight: 300; margin: 0; padding: 0 0 0 5px; }
			footer .top ul li a { color: #333; font-weight: 400; text-decoration: none; }
				footer .top ul li a:hover { color: #143360; }
			footer .top ul li.facebook { background: url('images/facebook.png') no-repeat top; float: left; height: 32px; width: 32px; }
			footer .top ul li.twitter { background: url('images/twitter.png') no-repeat top; float: left; height: 32px; width: 32px; }
			footer .top ul li.facebook:hover, footer .top ul li.twitter:hover { background-position: bottom; }
				footer .top ul li.facebook a, footer .top ul li.twitter a { display: block; height: 32px; width: 32px;}

footer .bottom {
	background-color: #0053A4;
	color: white;
	font-size: 13px;
	font-weight: 300;
	height: 35px;
	line-height: 35px;
	padding: 0 10px;
	width: 940px;
}

a.back-to-top {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #77C1CE url("images/up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	transition: all 0.3s ease-out;
}
	a:hover.back-to-top { background-color: #19345F; }