@font-face {
    font-family: 'GillSansRegular';
    src: url('fonts/gillsans/gillsans-webfont.eot');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'GillSansRegular';
    src: url('fonts/gillsans/gillsans-webfont.eot');
    src: url('fonts/gillsans/gillsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gillsans/gillsans-webfont.woff') format('woff'),
         url('fonts/gillsans/gillsans-webfont.ttf') format('truetype'),
         url('fonts/gillsans/gillsans-webfont.svg#GillSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'SavoyeRegular';
    src: 	url('fonts/savoyeplain-webfont.eot');
    font-weight: normal;
    font-style: normal;
    }
    
@font-face {
    font-family: 'SavoyeRegular';
    src: 	url('fonts/savoyeplain-webfont.ttf') format('truetype'),
     		url('fonts/savoyeplain-webfont.eot?#iefix') format('fonts/embedded-opentype'), 
     		url('fonts/savoyeplain-webfont.woff') format('woff'),  
     		url('fonts/savoyeplain-webfont.svg#SavoyeRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;
	background-color: black;}
	
html, cover {height: 100%;
	background-color: black;}

#wrap {
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	}



#main {
	overflow:auto;
	padding-bottom: 20px;
	}  /* must be same height as the footer */

#logo {
text-decoration: none;
	color: white;
	padding: 10px;
	width: 150px;
	float: right;
	height: auto;
	}

#logo2 {
text-decoration: none;
	color: white;
	padding: 10px;
	width: 250px;
	float: left;
	height: auto;
	}

#logo3 {
text-decoration: none;
	color: white;
	padding: 10px;
	width: 0px;
	margin-top: 20px;
	margin-right: 200px;
	float: right;
	height: auto;
	}


#home {
	float: left;
	position: absolute;
	margin-top: 10px;
	margin-left: 10px;
	z-index: 20;
	}
	
#home a {
		font-weight: lighter;
	letter-spacing: 1px;
	color: white;
	font-family: "GillSansRegular";
	font-size: 16px;

		list-style: none;
	color: white;
	text-decoration: none;}
	
	
	#homie {
	float: left;
	position: relative;
	margin-top: 10px;
	margin-left: 10px;
	z-index: 20;
	}

#homie a {
		font-weight: lighter;
	letter-spacing: 1px;
	color: white;
	font-family: "GillSansRegular";
	font-size: 16px;

		list-style: none;
	color: white;
	text-decoration: none;}
	

/* Lavarock */

#lavabar {
	width: 960px;
	margin-top: 95px;
	height: 50px;
    filter: alpha(opacity=65);
    opacity: 0.65;
    background-color: red;

    z-index: 10;
    }


/* Description Bar */

#bar {
	width: 775px;
	margin-top: 5px;
	margin-left: 95px;
	height: 50px;
    filter: alpha(opacity=65);
    opacity: 0.65;
    background-color: #505050;

    z-index: 10;
    }

#bar2 {
	width: 775px;
	margin-top: 5px;
	margin-left: 175px;
	height: 50px;
    filter: alpha(opacity=65);
    opacity: 0.65;
    background-color: #505050;

    z-index: 10;
    }

    
#bar li {
	list-style: none;
	
	top: 3%;
	margin-left: 70px;
	}

#bar li a {
	
	padding-top: 0px;
	color: white;
	letter-spacing: 7px;
	
	font: normal 17px 'GillSansRegular';
	}
	
/* Description Bar2 */

#bara {
	width: 960px;
	margin-top: 75px;
	height: 50px;
    filter: alpha(opacity=65);
    opacity: 0.65;
    background-color: #505050;
	position: absolute;
    z-index: 10;
    }

#bara li {
	list-style: none;
	
	top: 3%;
	margin-left: 70px;
	}

#bara li a {
	
	padding-top: 0px;
	color: white;
	letter-spacing: 7px;
	
	font: normal 17px 'GillSansRegular';
	}

#barr {
	width: 960px;
	margin-top: 30px;
	height: 25px;
    filter: alpha(opacity=65);
    opacity: 0.65;
    background-color: #505050;

    z-index: 10;
    }



/* navigation build */

#nav {
	position: relative
	text-align: center;
	padding-top:5%;
	padding-left: 110px;
	padding-bottom: 1%;
	}

#nav li{
	position: static;
	display: inline;
	}

#nav li a {
	position: inherit;
	letter-spacing: 2px;
	border-style: solid;
	border-width: 1px;
	border-color: white;
	height: 85px;
	width: 85px;
	margin: 12px;
	display: inline-block;
	font: normal 14px 'GillSansRegular';
	text-align: center;
	color: black;
	text-decoration: none;
	background: white;
	line-height: 20px;
	}

#nav li a:hover {
	
	color:white;
	background: black;
	}

/* Products menus */

#naw {
	position: static;
	text-align: center;
	padding-top:5%;
	padding-bottom: 5%;
	}
	
#naw li {
	display: inline;
	position: static;	
	}

#naw li  a {
	letter-spacing: 2px;
	border-style: solid;
	border-width: 1px;
	border-color: white;
	list-style-position: outside;
	height: 85px;
	width: 85px;
	margin: 12px;
	display: inline-block;
	font: normal 14px 'GillSansRegular';
	text-align: center;
	color: black;
	text-decoration: none;
	background: white;
	line-height: 90px;
	}

#naw li a:hover {
	color:white;
	background: black;	
	}

#fpimage {
	

	
 position: absolute;
 z-index: 5;

	}

#fpimage l {
	
	z-index: 5;
	}
#nawe {
	position: static;
	padding: 0px 0px 0px 100px;
	padding-top:5%;
	padding-bottom: 0%;
	}
	
#nawe li {
	display: inline;
	position: static;	
	}

#nawe li  a {
	position: inherit;
	letter-spacing: 2px;
	border-style: solid;
	border-width: 1px;
	border-color: white;
	height: 85px;
	width: 85px;
	margin: 7px;
	display: inline-block;
	font: normal 14px 'GillSansRegular';
	text-align: center;
	color: white;
	text-decoration: none;
	background: black;
	line-height: 20px;
	}

#nawe li a:hover {
	color:black;
	background:white;	
	}

#nawe2 {
	position: static;
	padding: 0px 0px 0px 225px;
	padding-top:5%;
	padding-bottom: 0%;
	}
	
#nawe2 li {
	display: inline;
	position: static;	
	}

#nawe2 li  a {
	position: inherit;
	letter-spacing: 2px;
	border-style: solid;
	border-width: 1px;
	border-color: white;
	height: 85px;
	width: 85px;
	margin: 7px;
	display: inline-block;
	font: normal 14px 'GillSansRegular';
	text-align: center;
	color: white;
	text-decoration: none;
	background: black;
	line-height: 20px;
	}

#nawe li a:hover {
	color:black;
	background:white;	
	}

	
/* Story page */

#sp{
	position: floating;
	width:750px;
	padding: 10px 50px 30px 100px;
	float: left;
	text-align: justify;
	text-align-last: left;
	}
	
#sp a {
font-weight: lighter;
	letter-spacing: 1px;
	line-height: 19px;
	color: white;
	font-family: "GillSansRegular";
	font-size: 14px;
	}

#sp a b {
	font-family: "SavoyeRegular";
	font-size: 20px;
	
}
	
	
/* Contact Page */

#cp {
	position: static;
	padding-top:10px;
	padding-bottom: 5px;
	text-align: center;

}

#cp a {

	letter-spacing: 3px;
	font-family: "GillSansRegular";
	font-size: 15px;
	text-decoration: none;
	color: white;

}
	
#social {
	position: static;
	padding-top:10px;
	padding-bottom: 100px;
	text-align: left;

}


/* stckist page */

#retail {
	position: static;
	text-align: center;
	padding-top:3%;
	padding-bottom: 0%;
	}
	
#retail li {
	display: inline;
	position: static;	
	}

#retail li  a {
	letter-spacing: 0px;
	border-style: solid;
	border-width: 1px;
	border-color: white;
	list-style-position: outside;
	height: 85px;
	width: 85px;
	margin: 10px;
	display: inline-block;
	font: normal 16px 'GillSansRegular';
	text-align: center;
	color: black;
	text-decoration: none;
	background: white;
	line-height: 85px;
	}
	
#rtp{
	margin-top: 0px;
	margin-left: 95px;
	width:775px;
	padding-bottom: 30px;

	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	font-size: 16px;
	font-weight: 100;
		border-bottom-style: dashed;
		border-bottom-color:    silver;
	border-bottom-width: 1px;
	}

#rtpimage {
	margin-left:0px;
	padding-top:0px;
	padding-bottom: 0px;
	float: center;
	width:500px;}
	
#rtpimage2 {
	margin-left:125px;
	padding-top:200px;
	padding-bottom: 0px;
	float: center;
	width:500px;}
	
	


#stp{
	margin-top: 50px;
	margin-left: 25px;
	width:950px;
	padding-bottom: 30px;
	vertical-align: middle;
	float: left;
	text-align: left;
	color: white;
	font-family: "GillSansRegular";
	font-size: 16px;
	font-weight: 100;
	}


#stp1{
	margin-top: 25px;
	margin-left: 150px;
	width:500px;
	padding-bottom: 30px;
	vertical-align: middle;
	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	font-size: 16px;
	
	font-weight: 100;
	border-bottom-style: dashed;
	border-bottom-color: silver;
	border-bottom-width: 1px;
	}
	
#stplava{
	margin-top: 25px;
	margin-left: 00px;
	width:800px;
	padding-bottom: 30px;
	vertical-align: middle;
	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	font-size: 16px;
	
	font-weight: 100;
	border-bottom-style: dashed;
	border-bottom-color: silver;
	border-bottom-width: 1px;
	}

#stp1 l {

float: right;
	letter-spacing: 2px;
	line-height: 22px;
	color: white;
	font-family: "GillSansRegular";
	font-weight: 50;
	font-size: small;
	}

#stp2{
	margin-top: 30px;
	margin-left: 40px;
	width:870px;
	padding-bottom: 5px;

	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	font-size: 16px;
	font-weight: 100;
		border-bottom-style: dashed;
		border-bottom-color:    silver;
	border-bottom-width: 1px;
	}

#stp2x{
	margin-top: 0px;
	margin-left: 200px;
	width:555px;
	padding-bottom: 5px;

	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	font-size: 16px;
	font-weight: 100;
		border-bottom-style: dashed;
		border-bottom-color:    silver;
	border-bottom-width: 1px;
	}


#stp20{
	margin-top: 0px;
	margin-left: 185px;
	width:550px;
	padding-bottom: 5px;

	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	font-size: 16px;
	font-weight: 100;
		border-bottom-style: dashed;
		border-bottom-color:    silver;
	border-bottom-width: 1px;
	}


#stp2a{
	margin-top: 30px;
	margin-left: 40px;
	width:875px;
	padding-bottom: 30px;

	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	font-size: 16px;
	font-weight: 100;
		border-bottom-style: dashed;
		border-bottom-color:    silver;
	border-bottom-width: 0px;
	}

#stp2 l {
	letter-spacing: 2px;
	line-height: 20px;
	color: white;
	font-family: "GillSansRegular";
	font-size: 15px;
	}
	
	
	
#stp3 l {
	letter-spacing: 2px;
	line-height: 20px;
	color: white;
	font-family: "GillSansRegular";
	font-size: medium;
	}
	
	
#stp4{
	margin-top: 0px;
	margin-left: 325px;
	width:960px;
	padding-bottom: 10px;
	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	font-size: 20px;
	font-weight: 100;
	}
	
	
#stc {
	position: static;
	padding-top:75px;
	padding-bottom: 100px;
	text-align: center;

}

/* Product Page */

#sppimage {
	margin-left: 95px;
	padding-top:0px;
	padding-bottom: 5px;
	float: left;
	width:400px;}

#spplava {
	margin-left: 0px;
	padding-top:0px;
	padding-bottom: 15px;
	float: left;
	width:960px;}
	
#sppimaget {
	margin-left: 0px;
	padding-top:0px;
	padding-bottom: 15px;
	float: left;
	width:400px;}

#spp {
	margin-top: 25px;
	margin-left: 25px;
	width:350px;
	padding-bottom: 0px;
	vertical-align: left;
	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	
	}

#sppr {
	margin-top: 5px;
	margin-left: 25px;
	width:350px;
	padding-bottom: 0px;
	vertical-align: left;
	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	border-bottom-style: none;
	border-bottom-color: silver;
	border-bottom-width: 1px;}

#sppegg {
	margin-left: 40px;
	padding-top:20px;
	padding-bottom: 15px;
	float: left;
	width:400px;}

#sppeggs {
	margin-top: 10px;
	margin-left: 75px;
	width:325px;
	padding-bottom: 0px;
	vertical-align: left;
	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	
	font-weight:  0;
	border-bottom-style: none;
	border-bottom-color: silver;
	border-bottom-width: 0px;}



/* Recipe Page */

#rcp1 
	{margin-left: 0px;
	padding-top:0px;
	padding-bottom: 15px;
	float: left;
	width: 900px;}

#rcp2
	{margin-top: 0px;
	margin-left: 110px;
	width:625px;
	padding-bottom: 0px;
	vertical-align: left;
	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	
	font-weight: 0;
	border-bottom-style: none;
	border-bottom-color: silver;
	border-bottom-width: 0px;}

#npd
	{margin-top: 0px;
	width:550px;
	padding-bottom: 0px;
	vertical-align: center;
	text-align: justify;
	color: white;
	font-size: 18px;
	font-family: "GillSansRegular";

	font-weight: 0;
	border-bottom-style: none;
	border-bottom-color: silver;
	border-bottom-width: 0px;}

#sppegglx {
	list-style-position: outside;margin-left: 95px;
	padding-top:20px;
	padding-bottom: 0px;
	float: left;
	width:750px;
	}

#sppeggslx {
	letter-spacing: 2px;
	border-style:  none;
	border-width: 0px;
	border-color: white;
	list-style-position: outside;
	margin-top: 0px;
	margin-left: 150px;
	width:650px;
	padding-bottom: 0px;
	vertical-align: left;
	float: left;
	text-align: justify;
	color: white;
	font-family: "GillSansRegular";
	
	font-weight:  200;
	border-bottom-style: none;
	border-bottom-color: silver;
	border-bottom-width: 0px;}


/* Purpose Page */

#ppimage {
	clear: left;
	padding-top:50px;
	padding-bottom: 30px;
	float: left;
	width:960px;
	}
	
	/* In Season page */

#ifs {
	position: floating;
	width:513px;
	padding: 0px 50px 30px 102px;
	float: left;
	text-align: justify;
	text-align-last: justify;
	}

	
	/* In Focus page */

#ifp {
	position: floating;
	font-family: "GillSansRegular";
	width:450px;
	padding: 0px 50px 30px 80px;
	float: left;
	text-align: justify;
	text-align-last: left;
	color: white;
	}

#ifpp {
	position: floating;
	font-family: "GillSansRegular";
	width:450px;
	padding: 0px 50px 30px 250px;
	float: left;
	text-align: justify;
	text-align-last: left;
	color: white;
	}

	
#ifq {
	position: floating;
	width:450px;
	padding: 0px 50px 30px 75px;
	float: right;
	text-align: justify;
	text-align-last: justify;
	}

#ifn {
	position: floating;
	width:750px;
	padding: 0px 50px 30px 30px;
	float: left;
	text-align: justify;
	text-align-last: left;
	}

#ifz {
	position: floating;
	width:400px;
	padding: 10px 50px 30px 125px;
	float: left;
	text-align: justify;
	text-align-last: left;
	
	}
	
#ifx {
	position: floating;
	width:450px;
	padding: 10px 50px 30px 150px;
	float: left;
	text-align: justify;
	text-align-last: left;
	font-size: 16px;
	}
	
	
/* Footer set up */
#footer {
	position: relative;
	margin-top: -20px; /* negative value of footer height */
	height: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	clear:both;
	text-align: center;
	letter-spacing: 3px;
	font-family: "GillSansRegular";
	font-size: 17px;
	} 
	
#footer a {
	list-style: none;
	color: white;
	text-decoration: none;
	}


	





/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

*/

		<div id="sppimage">
		<img style= "padding : 25px 0px 0px 0px" img src="../testimages/savoury.png" width="400px" /></div>
		<div id="spp">
		<font size="7">s a v o u r y</font><br><font size="5">b i s c u i t s</font><br><br>
		<font size="4">All our savoury biscuits are individually handcrafted in small batches using the finest local ingredients where possible to ensure you enjoy the delicious flavours and textures of our artisanal savoury 		range.<br><br>The perfect accompaniment for entertaining with your favourite wine and cheeseboard<br><br>
		<font size="5">p a r m e s a n</font><br><br>
		<font size="5">o a t &#160+&#160s e e d</font><br><br>
		<font size="5">w a l n u t &#160+ &#160r o s e m a r y</font><br><br>
		<font size="5">t h e &#160e n t e r t a i n e r ' s</font><br><font size="5">s e l e c t i o n</font><br><font size="4">All three in the one convenient multipack</font><br>
		</div>
		
		<div id="sppimage">
		<img style= "padding : 25px 0px 0px 0px" img src="../testimages/rustics.png" width="400px" /></div>
		<div id="spp">
		<font size="6">t w i c e &#160b a k e d</font><br><font size="5">r u s t i c &#160c r i s p b r e a d s</font><br><br>
		<font size="4">Our special crisp breads are twice baked to create a rates and texture unlike any other crisp beads and full of the goodness and fruit, herb, nuts and seeds is a delicious healthy snack and perfect with 		any cheese 	platter<br><br>
		<font size="5">c r a n b e r r y &#160+ &#160a l m o n d</font><br><br>
		<font size="5">n u t &#160,&#160s e e d &#160+ &#160r o s e m a r y</font><br><br>
		<font size="5">w a l n u t &#160+ &#160r o s e m a r y</font><br><br>
		<font size="5">t h e &#160e n t e r t a i n e r ' s</font><br><font size="5">s e l e c t i o n</font><br><font size="4">All three in the one convenient multipack</font><br>
		</div>