@font-face {
	font-family: klill-light;
	src: url("fonts/klill-light.ttf");
}

body {
	font-family: klill-light, helvetica, arial, sans-serif;
	margin: 0;		/* Necessary	*/
	background: gray url("images/body_bg.jpg") top repeat-x;
}

h1 {
	margin: 0;		/* Necessary	*/
	padding: 20px 0 0 15px;	/* Position the logo image	*/
	line-height: 0.8;
	text-shadow: -1.5px -1px 2px rgba(50, 50, 50, 0.5);
}

h1 a {
	color: black;
	text-decoration: none;	/* Prevents underlines	*/
}

h1 .logo1 {
	font-size: 36px;
	letter-spacing: -0.3px;
}

h1 .logo2 {
	font-size: 27px;
	letter-spacing: 6.9px;
}

h2 {
	font: italic 1.9em "trebuchet ms", helvetica, arial, sans-serif;
	color: #a00;
	margin: 0;
	padding: 0.25em 0 0.25em;
	text-shadow: -1px -1px 2px rgba(50, 0, 0, 0.3);
}

h3 {
	font: italic 1.6em "trebuchet ms", helvetica, arial, sans-serif;
	color: #a00;
	padding: 1.5em 0 1.5em;
	text-align: center;
	margin: 0;
}

h4 {
	clear: both;
	font: italic 1.3em "trebuchet ms", helvetica, arial, sans-serif;
	color: #a00;
	background: #e6e6e0 url("images/bullet.jpg") top left no-repeat;
	padding-left: 2em;
	margin: 0.5em 0;
}

h4:target {
	color: white;
	background: #800 url("images/menu_bg.jpg") top repeat-x;
}

h5 {
	font: italic 1.3em "trebuchet ms", helvetica, arial, sans-serif;
	text-align: center;
	margin: 8px 16px;
	color: #a00;
}

h6 {
	clear: both;
	font-size: 0.8em;
	font-weight: normal;
	color: gray;
	text-align: center;
	margin: 0;	/* Necessary	*/
	padding: 0;
}

h6 a {
	color: gray;
	text-decoration: none;	/* Prevents underlines	*/
}

p {
	font-size: 1em;
	line-height: 1.4;
	margin: 0.5em 0 1em;
}

img {
	border: 0;
}

table {
	color: navy;
	table-layout: fixed;
	font-size: 1.1em;
	border-collapse: collapse;
	text-align: center;
	margin: 0 1em 0.5em 0;
}

th {
	border-width: 1px 1px 2px 1px;
	border-style: solid;
	border-color: silver;
	padding: 0 0.5em;
	background: #e6e6e0;
}

td {
	border: 1px solid silver;
	padding: 0 0.5em;
}

td img {
	vertical-align: middle;
}

header {
	height: 100px;
	background: url("images/header_bg.jpg") right no-repeat;
}

nav {
	float: left;
	width: 200px;
	color: #444;
}

nav ul {
	font-size: 1.1em;
	margin: -3px 0 5px;	/* Compensate for the 3 pixel anchor margin	*/
	padding: 0;		/* Removes the indentation	*/
	list-style-type: none;	/* Removes the bullets on the left edge	*/
}

nav ul ul {			/* Second level	*/
	margin: 0;
	font-size: 0.9em;
}

nav ul li a {
	display: block;
	color: #444;
	text-decoration: none;	/* Prevents underlines	*/
	padding: 0.1em 0.5em;	/* Extends the left & right edges	*/
	margin: 3px 15px 0 15px;
	background: #d3d3d0;
}

nav ul ul li a {
	padding-left: 1.5em;	/* Indent second level	*/
	margin-top: 0;
}

nav ul li a#current {
	color: white;
	background: #800 url("images/menu_bg.jpg") top repeat-x;
}

section {
	font-family: klill-light, verdana, helvetica, arial, sans-serif;
	overflow: hidden;	/* Allows clear: both to ignore the nav and aside blocks */
	padding: 10px 1em 5px;
	margin: 0 100px 0 200px;
	background: #f8f8f6 url("images/content_bg.jpg") top right no-repeat;
}

section ul {
	list-style-type: square;
}

section ul ul {
	list-style-type: circle;
}

section ul ul ul {
	list-style-type: disc;
}

section ol {
	list-style-type: decimal;
}

aside {
	float: right;
	width: 100px;
	height: 245px;
	background: url("images/sidebar_bg.jpg") top no-repeat;
}

footer {
	color: silver;
	padding: 0 1em;
	margin: 5px 100px 0 200px;	/* Line the footer up with the content	*/
	background: #444;
}

footer p {
	padding: 1em 0;
	margin: 0;	/* Stop IE from adding a blank line afterwards	*/
}

article {
	overflow: hidden;
	margin: 0.5em 3em;
	padding: 0 16px;
	background: white url("images/bullet.jpg") top left no-repeat;
	border: 1px solid silver;
	box-shadow: 0 0 8px 2px silver;
}

.floatleft {
	float: left;
	width: auto;
	padding-right: 10px;
}

.floatright {
	float: right;
	width: auto;
	padding-left: 10px;
}

.floatleft img {
	background: white;
	box-shadow: 0 0 8px 2px silver;
}

.floatleft p, .floatright p {
	font: italic 1em/1.2 "trebuchet ms", helvetica, arial, sans-serif;
	color: #a00;
	text-align: center;
	margin: 0.2em 0 0.5em;
}

.distributor {
	clear: both;
	padding: 10px 0;
}

.distributor img {
	float: left;
	margin: 0 10px 20px 0;
	box-shadow: 0 0 8px 2px silver;
}

.distributor p {
	margin: 0;
}

.outer-div {
	text-align: center;
	margin-bottom: 15px;
}

.inner-div {
	display: inline-block;
}

.zoom {
	float: right;
	background: #f8f8f6;
	transition: transform .2s;
}

.zoom img {
	margin: 0;
	box-shadow: none;
}

.zoom p {
	margin: 0;
	font-size: 0.5em;
	text-align: center;
	padding: 0 0.5em;
}

.access_aid {
	display: none;
}

@keyframes slidy {
	0% { left: 0%; }
	16% { left: 0%; }
	20% { left: -100%; }
	36% { left: -100%; }
	40% { left: -200%; }
	56% { left: -200%; }
	60% { left: -300%; }
	76% { left: -300%; }
	80% { left: -400%; }
	96% { left: -400%; }
	100% { left: -500%; }
}

#slider {
	overflow: hidden;
	margin-bottom: 5px;
}

#slider figure img {
	width: 5%;
	float: left;
}

#slider figure {
	position: relative;
	width: 1000%;
	margin: 0;
	left: 0;
	text-align: left;
	font-size: 0;
	animation: 50s slidy infinite;
}

@media (hover: hover) {
	h6 a:hover {
		color: black;
		text-decoration: underline;
	}

	tr.highlight:hover {
		background: white;
	}

	nav ul li a:hover {
		color: #a00;
		background: silver url("images/menu_bg.jpg") top right no-repeat;
		text-decoration: underline;
	}

	.zoom:hover {
		transform: matrix(3, 0, 0, 3, -80, -50);
		background: white;
		box-shadow: 0 0 8px 2px silver;
	}
}

@media only screen and (max-width:1000px) {
	#main_nav {
		display: none;
	}

	#main_nav:target {
		z-index: 1;		/* Ensures menu is on top of image slider	*/
		display: block;
		position: absolute;
		padding-top: 15px;
		padding-right: 40px;
		top: 0;
		right: 15px;
		background: #e6e6e0;
		box-shadow: 0 0 8px 2px #444;
	}

	.access_aid {
		display: block;
		position: absolute;
		top: 15px;
		right: 15px;
		width: 40px;
		height: 0;	/* Hide the text */
		padding-top: 40px;
		overflow: hidden;
		border: 1px solid #a00;
		background: #d3d3d0 10px 10px / 20px 20px no-repeat;
	}

	#access_nav {
		background-image: -webkit-repeating-linear-gradient(#a00, #a00 2px, #d3d3d0 2px, #d3d3d0 4px);
		background-image: repeating-linear-gradient(#a00, #a00 2px, #d3d3d0 2px, #d3d3d0 4px);
	}

	#access_top {
		right: 0;
		background-image: linear-gradient(45deg, transparent 13px, #a00 13px, #a00 15px, transparent 0), linear-gradient(-45deg, #d3d3d0 13px, #a00 13px, #a00 15px, #d3d3d0 0);
	}

	h1 {
		padding-top: 10px;	/* Reposition the logo	*/
	}

	h2 {
		font-size: 1.6em;	/* Reduce the font size	*/
	}

	h3 {
		font-size: 1.3em;	/* Reduce the font size	*/
	}

	img {
		max-width: 100%;	/* Reduce the image size if necessary	*/
		height: auto;
	}

	.non_essential {
		display: none;		/* Remove table columns	classed as non-essential	*/
	}

	header {
		height: 75px;		/* Reduce the height slightly	*/
		background: url("images/small_header_bg.jpg") 250px 0 no-repeat;
	}

	section {
		margin: 0;		/* No spaces at the sides	*/
		background: #f8f8f6 url("images/content_bg.jpg") 250px 0 no-repeat;
	}

	aside {
		display: none;		/* No sidebar	*/
	}

	footer {
		margin: 0;		/* No spaces at the sides	*/
	}

	article {
		margin: 0.5em 0;	/* No gaps at the sides	*/
	}
}