@charset "utf-8";
/* CSS Document */
body
{
	margin: 0;
	padding: 0;
	background-color: #090;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
p
{
	margin: 0 0 .5em 0;	
	font-size: .8em;
}
h1, h2, h3, h4
{
	font-weight: bold;
	font-size: 1em;
	text-align: center;
	padding-top: 0.25em;
	-webkit-text-shadow: 0px 1px 1px #090;
	-moz-text-shadow: 0px 1px 1px #090;
	-o-text-shadow: 0px 1px 1px #090;
	text-shadow: 0px 1px 1px #090;	
}
ul
{
	list-style-type: none;
}
li:before
{
		content: "\2713";	
		color: #F00;
		padding-right: 1em;
		font-weight: bold;
}
img
{
	border: none;	
}
.clear
{
	clear: both;	
}
.float
{
	float: left;
	width: 20%;
	max-width: 100px;
}

#wrapper		/*Outermost wrapper*/
{
	width: 100%;
	min-width: 375px;
	margin: 0 auto 0 auto;
	height: auto;
	position: relative;
}


	/*HEADER AND ADDRESS*/
		#header
		{
			width: 100%;
			margin: 0 auto  auto;
			background-image: -webkit-linear-gradient(top, #0F0, #090); background-image: -moz-linear-gradient(top, #0F0, #090); background-image: -o-linear-gradient(top, #0F0, #090); background-image: -ms-linear-gradient(top, #0F0, #090); background-image: linear-gradient(top, #0F0, #090);
			position: relative;
		}
		#header .logo
		{
			width: 65%;
			max-width: 250px;
			height: auto;	
			margin-left: 2%;
		}
		address
		{
			text-align: center;	
			font-weight: bold;
			padding-top: 0.25em;
			-webkit-text-shadow: 0px 1px 1px #ffffff;
			-moz-text-shadow: 0px 1px 1px #ffffff;
			-o-text-shadow: 0px 1px 1px #ffffff;
			text-shadow: 0px 1px 1px #ffffff;
		}
		/*START ADDRESS*/
			.contactInfo	
			{
				width: 27%;			
				position: absolute;
				top: 15%;
				right: 2%;
			}
			.contactInfo p	/*PHONE NUMBER*/
			{
				text-align: right;
				color: #00F;	
				-webkit-text-shadow: 0px 1px 1px #000000;
				-moz-text-shadow: 0px 1px 1px #000000;
				-o-text-shadow: 0px 1px 1px #000000;
				text-shadow: 0px 1px 1px #000000;
			}
			.contactInfo img	/*EMAIL IMAGE LINK*/
			{
				width: 100%;
				max-width: 75px;
				float: right;
			}

		/*END ADDRESS*/

	/*END HEADER AND ADDRESS*/
	
	/*Main wrapper*/
	#main		
	{
		clear: both;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto 2em auto;
		height: auto;
		background-color: #ffffff;
		-webkit-box-shadow: 5px 5px 20px 2px #000000, -5px 5px 20px 2px #000000;
		-moz-box-shadow: 5px 5px 20px 2px #000000, -5px 5px 20px 2px #000000;
		-o-box-shadow: 5px 5px 20px 2px #000000, -5px 5px 20px 2px #000000;
		box-shadow: 5px 5px 20px 2px #000000, -5px 5px 20px 2px #000000;
	}
	.main		/*Main content text*/
	{
		width: 75%;
		margin: 0 auto 0.5em auto;
		font-size: 1em;	
		clear: both;
	}
	.bigImage		/*Main content images*/
	{
		width: 80%;
		max-width: 700px;
		margin-left: 10%;	
	}
	/*START WEBFORM*/
	#webForm
	{
		width: 75%;
		min-width: 300px;
		background-image: -webkit-linear-gradient(top, #0F0, #090); background-image: -moz-linear-gradient(top, #0F0, #090); background-image: -o-linear-gradient(top, #0F0, #090); background-image: -ms-linear-gradient(top, #0F0, #090); background-image: linear-gradient(top, #0F0, #090);
		margin: 1em auto 1em auto;
		border:1px solid #000000; 
		padding:10px; 
		border-radius: 5px;	
		-webkit-box-shadow: 5px 5px 20px 2px #000000, -5px 5px 20px 2px #000000;
		-moz-box-shadow: 5px 5px 20px 2px #000000, -5px 5px 20px 2px #000000;
		-o-box-shadow: 5px 5px 20px 2px #000000, -5px 5px 20px 2px #000000;
		box-shadow: 5px 5px 20px 2px #000000, -5px 5px 20px 2px #000000;
	}
	#webForm p
	{
		font-size: 1.1em;	
		padding: 1em;
	}

	.formLogo
	{
		width: 25%;
		float: right;	
	}
	/*END WEBFORM*/
	.right
	{
		width: 90%;
		max-width: 500px;
		height: auto;
		margin: 3em auto 1em auto;	
		background-color: #CCC;
		border: solid 1px #333;
		border-radius: 5px;
		padding: 1em;
		-webkit-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
		-moz-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
		-o-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
		box-shadow: 2px 2px 2px #000000, inset 2px 2px #ffffff;
	}
	.right h2
	{
		margin: 0 0 0.5em 0;
		color: #F00;
		font-size: 1.75em;
		-webkit-text-shadow: 1px 1px 3px #000000;
		-moz-text-shadow: 1px 1px 3px #000000;
		-o-text-shadow: 1px 1px 3px #000000;
		text-shadow: 1px 1px 3px #000000;
	}
	.right h3
	{
		width: 90%;
		padding:0.75em;
		margin-top: 0;
		background-color: #0F0;	
		border: solid 1px #000000;
		border-radius: 5px;
		-webkit-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
		-moz-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
		-o-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
		box-shadow: 2px 2px 2px #000000, inset 2px 2px #ffffff;
	}
	
	/*START PELLET DEMO IMAGE BLOCK*/
		#productDemo
		{
			display: block;
			width: 90%;
			max-width: 500px;
			height: auto;
			margin: 2em auto 0 auto;	
			background-color: #CCC;
			border: solid 1px #333;
			border-radius: 5px;
			padding: 1em;
			-webkit-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
			-moz-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
			-o-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
			box-shadow: 2px 2px 2px #000000, inset 2px 2px #ffffff;
		}
		#productDemo h2
		{
			color: #F00;
			-webkit-text-shadow: 1px 1px 3px #000000;
			-moz-text-shadow: 1px 1px 3px #000000;
			-o-text-shadow: 1px 1px 3px #000000;
			text-shadow: 1px 1px 3px #000000;	
		}
		#productDemo img
		{
			width: 100%;
		}
		#productDemo p
		{
			font-style: italic;
			margin-bottom: 0;
			font-size: 1em;
		}
	/*END PELLET DEMO IMAGE BLOCK*/
	
	/*START SERVICES BLOCK*/
		#services
		{
			display: block;
			width: 90%;
			max-width: 500px;
			height: auto;
			margin: 1em auto 0 auto;	
			background-color: #0F0;
			border: solid 1px #060;
			border-radius: 5px;
			padding: 1em;
			-webkit-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
			-moz-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
			-o-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
			box-shadow: 2px 2px 2px #000000, inset 2px 2px #ffffff;
		}
		#services h3
		{
			margin-top: 0;
			font-size: 1.5em;	
		}
		#services img
		{
			width: 25%;
			max-width: 100px;
			float: left;
		}
		.white
		{
			background-color: #ffffff;
			border: solid 1px #060;
			border-radius: 5px;
			padding: 0.5em;
		}
		
		#services ul
		{
			margin: -1em 0 0 35%;
			padding: 0;
		}
		#services ul li
		{
			
			font-style: italic;
			font-size: 1em;
		}
	/*END SERVICES BLOCK*/
	
	/*START BIOS BLOCK*/
		#bios
		{
			width: 90%;
			margin: 1em auto 0 auto;
			background-color: #CCC;
			border: solid 1px #333;
			border-radius: 5px;
			padding: 1em;
			-webkit-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
			-moz-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
			-o-box-shadow: 2px 2px 2px #000000, inset 2px #ffffff;
			box-shadow: 2px 2px 2px #000000, inset 2px 2px #ffffff;	
		}
		#bios ul
		{
			display: inline;
			width: 100%;
			padding: 0;
			margin: 0;
		}
		#bios ul li
		{
			display: block;
			width: 90%;
			background-color: #0F0;
			margin: 0.5em 0 0 2%;
			padding: 1em 0.5em;
			border: solid 1px #000000;
			border-radius: 5px;
			-webkit-box-shadow: 2px 2px 2px #000000;
			-moz-box-shadow: 2px 2px 2px #000000;
			-o-box-shadow: 2px 2px 2px #000000;
			box-shadow: 2px 2px 2px #000000;
		}
		#bios ul li:before		/*remove check mark*/
		{
			content: none;
		}
		#bios ul li p
		{
			padding-top: 1em;
			font-size: 1em;
		}
		#bios ul li .names
		{
			padding: 0.25em 15%;
			margin-left: 25%;
			background-color: #ffffff;
			font-weight: bold;
			font-size: 1.1em;	
			border: solid 1px #000000;
			border-radius: 5px;
			-webkit-box-shadow: 2px 2px 2px #000000;
			-moz-box-shadow: 2px 2px 2px #000000;
			-o-box-shadow: 2px 2px 2px #000000;
			box-shadow: 2px 2px 2px #000000;
			-webkit-text-shadow: 1px 1px 1px #0F0;
			-moz-text-shadow: 1px 1px 1px #0F0;
			-o-text-shadow: 1px 1px 1px #0F0;
			text-shadow: 1px 1px 1px #0F0;
		}
		
	
	/*END BIOS BLOCK*/
	
	
	/*START LINKS BLOCK*/
	
		.links
		{
			clear: both;
			width: auto;	
			margin-left: auto;
			margin-right: auto;
		}
		.links ul
		{
			padding: 0.5em 0 0 0;
			width: 100%;
		}
		.links ul li
		{
			display: inline-block;
			list-style: none;
			width: 32%;	
		}
		.links ul li:before
		{
			content: none;	
		}
		.links ul li img
		{
			width: 100%;	
			max-width: 75px;
			padding-left: 1em;			
		}
		.links ul li p
		{	
			font-size: 1em;	
			text-align: center;
		}
	/*END LINKS BLOCK*/
	
	
		/*FOOTER AND ADDRESS*/
		#footer
		{
			width: 100%;
			margin: 0 auto  auto;
			position: relative;
			background-image: -webkit-linear-gradient(top, #090, #0F0); background-image: -moz-linear-gradient(top, #090, #0F0); background-image: -o-linear-gradient(top, #090, #0F0); background-image: -ms-linear-gradient(top, #090, #0F0); background-image: linear-gradient(top, #090, #0F0);
		}
		#footer .logo
		{
			width: 65%;
			max-width: 250px;
			height: auto;	
			margin-left: 2%;
		}


	/*END FOOTER AND ADDRESS*/
	
/*~~~~~~~~~~~~~~~~~~START MEDIA QUERIES~~~~~~~~~~~~~~~~~*/

	
	@media (min-width: 400px)
	{
		h1
		{
			font-size: 1.4em;	
		}
		
		/*Links*/
		.links ul li img
		{
			padding-left: 2.5em;			
		}
		/*Links*/
	}
	
	@media (min-width: 575px)
	{
		h1
		{
			font-size: 1.5em;	
			margin-top: -1em;
		}
		h2
		{
			font-size: 1em;	
		}
		/*Links*/
		.links ul li img
		{
			padding-left: 4.5em;			
		}
		/*Links*/
		.links ul li p
		{	
			font-size: 1.2em;	
			text-align: center;
		}
		#bios ul li .names
		{
			margin-left: 30%;
		}
	}
	@media (min-width: 768px)
	{
		h1
		{
			font-size: 2em;	
			-webkit-text-shadow: 0px 1px 1px #090, 0px 2px 2px #090;
			-moz-text-shadow: 0px 1px 1px #090, 0px 2px 2px #090;
			-o-text-shadow: 0px 1px 1px #090, 0px 2px 2px #090;
			text-shadow: 0px 1px 1px #090, 0px 2px 2px #090;				
		}
		h2
		{
			font-size: 1.25em;	
		}
		address
		{
			font-size: 1.25em;	
		}
		#header .logo
		{
			max-width: 300px;			
		}
		.contactInfo	
		{
			padding: 0.25em 2em 0 0;
		}
		.float
		{
			padding-left: 2em;	
			margin-top: -1em;
			max-width: 125px;
		}
		.main
		{
			padding-top: 1em;	
		}
		#footer .logo
		{
			max-width: 300px;			
		}
		/*Links*/
		.links ul li img
		{
			padding-left: 6em;	
			max-width: 100px;		
		}
		/*Links*/
		#productDemo
		{
			width: 40%;
			float: left;
			margin-left: 2em;	
		}
		#services
		{
			width: 75%;	
			margin: 1em auto;
		}
		.right	/*float the text right on bigger screens*/
		{
			float: right;
			width: 40%;
			margin-right: 2em;
		}
		#bios ul li
		{
			display: inline-block;
			width: 45%;
			height: 5em;
			overflow: auto;
		}
		#bios ul li .names
		{
			margin-left: 30%;
		}
	}
	@media (min-width: 1000px)
	{
		.main
		{
			font-size: 1.1em;	
		}
		#main
		{
			border-radius: 5px;	
		}
		.bigImage
		{
			margin-left: 15%;		
		}
		h1
		{
			font-size: 2.5em;
			margin: 0.5em -1.05em;
			padding: 0.5em 0;
			position: relative;	
			border-radius: 5px;
			-webkit-text-shadow: 0px 1px 1px #090, 0px 2px 2px #090, 0px 3px 3px #090;
			-moz-text-shadow: 0px 1px 1px #090, 0px 2px 2px #090, 0px 3px 3px #090;
			-o-text-shadow: 0px 1px 1px #090, 0px 2px 2px #090, 0px 3px 3px #090;
			text-shadow: 0px 1px 1px #090, 0px 2px 2px #090, 0px 3px 3px #090;
			-webkit-box-shadow: 0px 5px 15px #000000, inset 0px 2px 2px #333, 0px 3px 3px #090;
			-moz-box-shadow: 0px 5px 15px #000000, inset 0px 2px 2px #333, 0px 3px 3px #090;
			-o-box-shadow: 0px 5px 15px #000000, inset 0px 2px 2px #333, 0px 3px 3px #090;
			box-shadow: 0px 5px 15px #000000, inset 0px 2px 2px #333, 0px 3px 3px #090;
			background-color: #CCC;
		}
h1:before, h1:after
{
	content: '';
	position: absolute;
	top: 100%;	
	height: 0;
	width: 0;
	border-top: 0.4em solid #CCC;
	z-index: -1;				/*Keep it behind*/	
}
h1:before						/*This adds the lower left corner*/
{
	left: 2px;
	border-left: 1em solid transparent;
}
h1:after						/*This adds the lower right corner*/
{
	right: 2px;	
	border-right: 1em solid transparent;
}

		h2
		{
			font-size: 1.5em;	
		}
		/*Links*/
		.links ul li img
		{
			padding-left: 7em;			
		}
		/*Links*/
		.contactInfo p
		{
			font-size: 1.1em;
		}
		.contactInfo img	/*EMAIL IMAGE LINK*/
		{
			width: 100%;
			max-width: 100px;
			float: right;
		}
	}
	@media (min-width: 1200px)
	{
		#header .logo
		{
			padding-left: 2em;	
			max-width: 350px;
		}
		#footer .logo
		{
			padding-left: 2em;	
			max-width: 350px;
		}
		.contactInfo	
		{
			padding-right: 4em;	
		}
	}
	@media (min-width: 1200px)
	{
		#header .logo
		{
			padding-left: 4em;	
		}
		#footer .logo
		{
			padding-left: 4em;	
		}
		.contactInfo	
		{
			padding-right: 6em;	
		}
	}