/* ================== Body & General Stuff ================== */
body {
	margin: 0;
	padding: 0 0 8px 0;
	font: 0.7em Verdana, Arial, Helvetica, sans-serif;
	background-color: #e4ffe3;
	min-width: 805px; /* keep double border */
}
#header, #menu, #menu ul, #main, #footer, #header form p {
	min-width: 799px;
}
h1, h2, h3, h4, h5, h6 {
	font: 3.0em normal Arial, Helvetica, sans-serif;
	color: #d01f3c;
}
h1 {
	width: 50%;
	padding: 0 0 5px 0;
	margin: 0 0 30px 10%;
	border-bottom: 2px solid #dddde1;
}
h2 {
	font-size: 1.8em;
	margin-bottom: 8px;
}
h2 a {
	color: #d01f3c;
	text-decoration: none;
}
h2 a:hover {
	text-decoration: underline;
}
h3 {
	font-size: 1.4em;
}
p {
	line-height: 1.5em;
	margin-left: 20px;
}
#main > ul, #main > ol {
	margin-left: 60px;
}
li {
	margin-bottom: 0.6em;
}
a img {
	border: 0;
}
a {
	text-decoration: none;
	color: #0505c4;
}
a:hover {
	text-decoration: underline;
	color: #e91331;
}
fieldset {
	border: 0;
}
/*get them out of the way, but don't hide from text-based etc */
.hide {
	position: absolute;
	left: -1000px;
}
.nocookie {
	color: red;
	font-weight: bold;
}
/* ================== Header ================== */
#header {
	position: relative;
	height: 90px;
	background: url(../i/header.png) top right repeat-x;
}
#header #logo {
	position: absolute;
	top: 0;
	left: 17%;
	margin: 0;
	border: none;
	width: 251px;
	height: 90px;
	background: url(../i/header_title.png) top left no-repeat;
}
#header #logo a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
#header #logo span {
	display: none;
}
/* Form is absolute, sticks at top (not affected by img), spans 100%
 * form p spans 70%, sits relative to form, has margin-top to position
 * searchbox positioned by p; submit button absolute again to position over searchbox
 */
#header form {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* z-index: -1; /* force behind #logo for #logo a to work  - stopped working in FF :(*/
}
#header form p {
	margin: 35px auto 0 auto;
	width: 70%;
	padding-right: 25px;
	text-align: right;
	font-size: 0.8em;
	position: relative;
}
#header label {
	font: bold 1.3em "Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif;
	color: #fff;
}
#header #searchbox {
	height: 1.6em;
	padding-left: 5px;
	border: none;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: middle;
	background-color: #a4d0ff;
}
#header #ssearch {
	position: absolute;
	right: 10px;
	top: 0;
}
/* ================== Menu ================== */
/* This is a really hacky menu. It'd be so nice, but IE 6 refuses to line up the li's if i float:left them
(granted it will if I give them a width, but I don't want to do that! I need buttons of different widths
and I don't want to resort to specifying each one individually)
so I'm forced to resort to display:inline instead, and it all gets rather messy from there! */
/* GENERAL */
#menu {
	height: 32px;
	font: bold 1.25em "Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif;
	background: url(../i/menu.png) top right repeat-x;
}
/* FIRST LEVEL */
#menu ul {
	margin: 0 auto 0 auto; /* centre */
	padding: 0;
	width: 70%; /* line up above content */
	height: 32px;
	list-style: none;
	position: relative; /* for the sub-menu */
	background: url(../i/menu_seperator.png) top left no-repeat; /* left-most seperator */
}
#menu ul li {
	margin: 0;
	padding: 0;
	display: inline;
}
#menu ul li span {
	/* This element is needed to hold the seperator, as the li refuses to have full height as is inline */
	display: inline-block;/* works here in IE because has natural display: inline */
	float: left; /* This gets round what appears to be the IE whitespace bug, but affects FF too =S */
	background: url(../i/menu_seperator.png) center right no-repeat; /* the seperators */
	padding-right: 1px; /* stop hover bg from overriding seperators */
}
#menu ul li.first span {
	padding-left: 1px; /* again stop hover bg from overriding seperator */
}
#menu ul li a {
	margin: 0;
	padding: 7px 2em 0 2em;
	height: 25px; /* height - padding-top */
	display: inline-block; /* works here in IE because has natural display: inline */
	float: left; /* This gets round what appears to be the IE whitespace bug, but affects FF too =S */
	color: #fff;
	text-decoration: none;
}
#menu a:hover, #menu :hover > a, #menu li.highlight a {
	/* Display hover bg when hovered OR 2nd level hovered OR or current page anyway*/
	background: url(../i/menu_highlight.png) top left repeat-x;
}
/* SECOND LEVEL */
#menu ul ul {
	visibility: hidden; /* hide until we need it */
	position: absolute;
	top: 32px;
	left: 0;
	height: 25px;
	width: 100%;
	background: #d1f1ba;
	font-size: 0.9em;
	font-weight: normal;
}
#menu ul ul li span {
	background: none;
}
#menu ul ul li a {
	margin: 0;
	padding: 3px 1.2em 0 1.2em;
	height: 22px;
	background: none;
	color: #000;
}
#menu ul ul li.first a {
	margin-left: 11px;
}
#menu ul ul li a:hover, #menu ul ul li.highlight a {
	text-decoration: underline;
}
#menu a:hover ul a, #menu :hover > ul a, #menu li.highlight ul a {
	/* undo the damage from the first level */
	background: none;
}
#menu ul li:hover ul, #menu ul a:hover ul, #menu li.highlight ul {
	/* make the second level visible when hover on first level list OR link OR first level is highlighted */
	visibility: visible;
}
#menu ul li:hover ul, #menu ul a:hover ul {
	z-index: 1000;
}
#menu li.highlight ul {
	z-index: 999;
}
/* EXCEPTIONS */
.no_submenu #menu ul li:hover ul, .no_submenu #menu ul a:hover ul, .no_submenu #menu li.highlight ul {
	/* Override submenu if told to (done on index for aesthetic reasons, eg) */
	visibility: hidden;
}
#index #menu li.highlight a {
	/* Exception for the home page - it just looks odd */
	background: none;
}
#menu li#menu_item_view_basket {
	/* methinks this is the easiest way */
	position: absolute;
	right: 0;
}
#menu li#menu_item_view_basket span {
	background: none;
}
#view_basket li#menu_item_view_basket a {
	background: none;
	text-decoration: underline;
}
#view_basket li#menu_item_view_basket a:hover {
	text-decoration: none;
}
#menu li#menu_item_view_basket a:hover {
	background: none;
	text-decoration: underline;
}
/* ================== Main Body ================== */
#main {
	width: 70%;
	margin: 0 auto;
	padding: 30px 0 35px 0;
	/*background-color: #f9f9ff;*/
	background-color: #fff;
	border: 3px double #4db031;
	border-top: none;
}
body.has_submenu #main, body.is_submenu #main {
	padding-top: 55px; /* just looks odd otherwise */
}
/* Can't pad #main because border moves */
#main > * {
	padding: 0 20px 0 30px;
}
/* ================== Footer ================== */
#footer {
	width: 70%;
	margin: 20px auto 0 auto;
	padding: 0 3px; /* padding pushes the border out to line up with #main */
	text-align: center;
	background-color: #f9f9ff;
	border: 1px solid #4db031;
}
#footer p {
	margin: 8px 0;
}
	
@media print {
	#header {
		display: none;
	}
	#menu {
		display: none;
	}
	#main {
		margin-top: 0;
		border: 0;
		min-width: 670px; /* i don't have a clue why this is the deciding factor - tooks hours of trial and error! width just screws things up :(*/
		margin-left: 0;
	}
	#main > * {
		padding: 0;
	}
	#main h1 {
		font-size: 2.2em;
	}
	#main h1:before {
		content: 'Life Supplies - ';
	}
	#main h1 + h1:before { /* in case we have multiple h1s */
		content: '';
	}
	p {
		margin-left: 0;
	}
	#footer {
		display: none;
	}
}