/*
	Name: EMI Drive Responsive Layout
	Date: 7/25/2014
	Version: 1.0
	Author: Tom Vermeulen II
	
*/

body {
	background-color: #999;
	color: 000305;
	font-size: 87.5%;
	font-family: Arial, 'Lucida Sans Unicode';
	line-height: 1.5;
	text-align: left;
}

a {
	text-decoration: none;
}

a:link, a:visited {
	color: red;
}

a:hover, a:active {
	background-color: red;
	color: #FFF;
	padding: 1% 1%
}

.body {
	margin: 0 auto;
	width: 85%;
	clear: both;
}

.mainheader img {
	width: 50%;
	height: auto;
	margin: 2% 0;
}

.mainheader nav {
	background-color: #777;
	height: 40px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.mainheader nav ul {
	list-style: none;
	margin: 0 auto;
}

.mainheader nav ul li {
	float: left;
	display: inline;
}

.mainheader nav a:link, .mainheader nav a:visited {
	color: #FFF;
	display: inline-block;
	padding: 10px 25px;
	height: 20px;
}

.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
	background-color: Red; /* Change button color here ex REPLACE "RED" with #CF5C3F*/
	color: #FFF;
	text-shadow: none;
}

.mainheader nav ul li a {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.helpnav nav {
	text-align:center;
	height: 40px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.helpnav nav ul {
	display:inline-block;
	list-style: none;
	margin: 0;
    padding: 0;
}

.helpnav nav li {
	float: left;
	display: inline;
	margin: 2;
}

.helpnav nav a:link, .helpnav nav a:visited {
	background-color: #777;
	color: #FFF;
	display: inline-block;
	padding: 10px 15px;
	height: 20px;
}

.helpnav nav a:hover, .helpnav nav a:active,
.helpnav nav .active a:link, .helpnav nav .active a:visited {
	background-color: red; /* Change button color here ex REPLACE "RED" with #CF5C3F*/
	color: #FFF;
	text-shadow: none;
}

.helpnav nav ul li a {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.activepage a {
	background-color: red !important;
	color: #FFF !important;
	font-weight: bold !important;
}
.socialmedia img {
		border:none;
		outline:none;
		position: relative; 
		top: -10px;
		height: 40px !important;
		width: auto !important;
}

.socialmedia  a:link {
		margin: 0px 5px;
		padding: 10px  0px !important;
}

.socialmedia  a:hover {
		background-color: #777 !important;
		margin: 0px 5px;
		padding: 10px  0px !important;
		box-shadow: 0 0 8px 4px #FF0000;
}

#emihome .emihome, #emihome .emihome a:hover, #emihome .emihome a:active, #emihome .emihome a:link, #emihome .emihome a:visited,
#emihelp .emihelp, #emihelp .emihelp a:hover, #emihelp .emihelp a:active, #emihelp .emihelp a:link, #emihelp .emihelp a:visited,
#emiproduct .emiproduct, #emiproduct .emiproduct a:hover, #emiproduct .emiproduct a:active, #emiproduct .emiproduct a:link, #emiproduct .emiproduct a:visited,
#emicart .emicart, #emicart .emicart a:hover, #emicart .emicart a:active, #emicart .emicart a:link, #emicart .emicart a:visited{
	color: #FFF;	
	font-weight: bold;
	background-color: red;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.maincontent {
	line-height: 25px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
}
.maincontent a:link, a:visited {
	color: red;
}

.maincontent a:hover, a:active {
	background-color: transparent; 
	text-decoration: none;
	color: red;
	padding: 1% 1%
}
.content {
	width: 70%;
	float: left;
}

.content img {
	width: 100%;
	height: auto;
	margin: 2% 0;	
}

.topcontent {
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 4%;
	margin-top: 2%;
}
.topcontent img {
	float: left;
	width: 100%;
	height: auto;
		
}
.topcontent form {
    width: 150px;
    margin: 0 auto;
}
.contactwrapper form {
    width: auto;
    margin: 0 auto;
}
.post-info {
	font-style: italic;
	color: #999;
	font-size: 84%;
}

.videowrapper {
	position: relative;
	padding-bottom: 56.25%
}

.videobox {
	position: absolute;
	width: 100%;
	height: 100%;
}

.middlecontent {
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 4%;
	margin-top: 2%;
}
.middlecontent a:hover, a:active {
	background-color: transparent; 
	text-decoration: none;
	color: red;
	padding: 1% 1%
}
.bottomcontent {
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 4%;
	margin-top: 2%;
}
.bottomcontent a:hover, a:active, a:visited{
	background-color: transparent; 
	text-decoration: none;
	color: red;
	padding: 1% 1%
}	
.top-sidebar {
	width: 21%;
	float: left;
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 3%;
	margin: 2% 0 2% 3%;
}
.top-sidebar a:hover, a:active {
	background-color: transparent; 
	text-decoration: none;
	color: red;
	padding: 1% 1%
}
.top-sidebar img {
	width: 100%;
	height: auto;
	margin: 2% 0;	
}

.middle-sidebar {
	width: 21%;
	float: left;
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 3%;
	margin: 2% 0 2% 3%;
}
.middle-sidebar a:hover, a:active {
	background-color: transparent; 
	text-decoration: none;
	color: red;
	padding: 1% 1%
}
.middle-sidebar img {
	width: 100%;
	height: auto;
	margin: 2% 0;	
}
.bottom-sidebar {
	width: 21%;
	float: left;
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 3%;
	margin: 2% 0 2% 3%;
}
.bottom-sidebar a:hover, a:active {
	background-color: transparent; 
	text-decoration: none;
	color: red;
	padding: 1% 1%
}
.bottom-sidebar img {
	width: 100%;
	height: auto;
	margin: 2% 0;	
}

.mainfooter {
	width: 100%;
	height: 40px;
	float: left;
	background-color: #777;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 2% 0 2% 0;
}
.mainfooter a:link, a:visited {
	color: #777;
}

.mainfooter a:hover, a:active {
	background-color: transparent; 
	text-decoration: none;
	color: #777;
	padding: 0% 0%
}
.mainfooter p {
	width: 92%;
	margin: 10px auto;
	color: #FFF;
	text-align: center;
}

.btnamazon { 
	width: 200px; 
    height: 43px; 
    overflow: hidden;
}

@media only screen and (min-width: 150px) and (max-width: 650px)
{

	.body {
		margin: 0 auto;
		width: 98%;
		font-size: 95%;
	}

	.mainheader img {
		width: 100%;
		height: auto;
		margin: 2% 0;
	}

	.mainheader nav {
		height: 80px;
	}
	.mainheader nav ul {
		padding-left: 0
	}

	.mainheader nav ul li {
		width: 50%;
		text-align: center;
	}

	.mainheader nav a:link, .mainheader nav a:visited {
		padding: 10px 25px;
		height: 20px;
		display: block;
	}

	.maincontent {
	line-height: 28px; /* May want to delete*/
	}
	
	.content {
		width: 100%;
		float: left;
		margin-top: 2%;
	}

	.topcontent {
		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 2% 4%;
		margin-top: 2%;
	}

	.post-info {
		display: none;
	}

	.bottomcontent {
		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 2% 4%;
		margin-top: 2%;
	}
	
	.top-sidebar, .middle-sidebar, .bottom-sidebar  {
		width: 94%;
		padding: 2% 3%;
		margin: 2% 0 0 0;
	}

}
@media only screen and (min-width: 651px) and (max-width: 900px)
{

	.body {
		margin: 0 auto;
		width: 92%;
		font-size: 95%;
	}

	.mainheader img {
		width: 75%;
		height: auto;
		margin: 2% 0;
	}

	

	.maincontent {
	line-height: 28px; /* May want to delete*/
	}
	
	.content {
		width: 100%;
		float: left;
		margin-top: 2%
	}

	.topcontent {
		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 2% 4%;
		margin-top: 2%;
	}

	.post-info {
		display: none;
	}

	.bottomcontent {
		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 2% 4%;
		margin-top: 2%;
	}
	
	.top-sidebar, .middle-sidebar, .bottom-sidebar  {
		width: 94%;
		padding: 2% 3%;
		margin: 2% 0 0 0;
	}

}