/* Fonts */
@font-face {
font-family: 'HelveticaM';
src: url('fonts/Helvetica.ttf') format('truetype');
} 

@font-face {
font-family: 'MyriadProM';
src: url('fonts/MyriadPro.ttf') format('truetype');
} 

/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	html, body {
		font-family: Verdana, Arial;
		font-size: 12px;
		color: #000000;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background: #ffffff url(../images/bg_graph.png) top left repeat;
	}
	
	p {
		padding: 10px;
	}
	
	img {
		text-decoration: none;
		border: none;
	}
	
	h1 {
		font-size: 22px;
	}
	
	h2 {
		font-size: 20px;
	}
	
	h3 {
		font-size: 14px;
	}
	
	h4 {
		font-size: 12px;
	}
	
	h5 {
		font-size: 8px;
	}
	
	h6 {
		font-size: 4px;
	}
	
	/* Headers */
	h1,h2,h3,h4,h5,h6 {
		font-family: MyriadProM, Myriad Pro, Verdana, Arial;
		color: #ee7427;
		font-weight: normal;
		padding: 5px;
		border-bottom: 1px solid #85888f;
	}
	
	.subheader {
		font-family: HelveticaM, Helvetica, MyriadProM, Myriad Pro, Verdana, Arial;
		color: #9c9c9c;
		padding: 5px;
		border: none;
		font-weight: normal;
		font-size: 14px;
	}
	
	.caption {
		width: 100%;
		position: relative;
		text-align: left;
		font-size: 10px;
		margin: 0px;
		margin-left: 10px;
		padding: 0px;
	}
	
	/* Links */
	a {
		text-decoration: none;
		color: #ee7427;
	}
	
	a:hover {
		text-decoration: none;
		color: #000000;
	}

	a:visited {
		text-decoration: none;
		color: #ee7427;
	}
	
		ul {
		list-style-type: none;
	}
	
	ul li {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	ul li a {
		color: #000000;
		text-decoration: none;
	}
	
	ul li a:hover {
		color: #000000;
		text-decoration: underline;
	}
	
	ul li a:visited {
		color: #000000;
		text-decoration: none;
	}
	
	/* Page Area */
	#page {
		width: 100%;
		position: relative;
		max-width: 1140px;
		background: #ffffff;
		margin: 0px auto;
		overflow: hidden;
		
        -webkit-box-shadow:  0px 0px 5px 2px rgba(0, 0, 0, 0.3);
        box-shadow:  0px 0px 5px 2px rgba(0, 0, 0, 0.3);
	}
	
	/* Padding Styles */
	.padding-10 {
		padding: 10px;
	}
	
	.padding-20 {
		padding: 20px;
	}
	
	.padding-top-20 {
		padding-top: 20px;
	}
	
	.padding-top-10 {
		padding-top: 10px;
	}
	
	.padding-bottom-10 {
		padding-bottom: 10px;
	}
	
	.padding-bottom-20 {
		padding-bottom: 20px;
	}
	
	.padding-bottom-40 {
		padding-bottom: 40px;
	}
	
	.padding-bottom-60 {
		padding-bottom: 60px;
	}
	
	/* About Us Figure Caption */
	.figcaption {
		width: 100%;
		position: relative;
		text-align: center;
	}
	
	.figure {
		float: left;
		width: 145px;
		height: 191px;
		padding: 5px;
		margin: 10px;
	}
	
	.figure img {
		width: 100%;
		height: 100%;
	}
	
	/* Header Specific */
		#header {
			width: 100%;
			position: relative;
			height: 165px;
		}
		
		.decoration {
			width: 100%;
			position: absolute;
			height: 72px;
			background: #ee7427;
			z-index: 1;
			bottom: 0px;
			left: 0px;
			right: 0px;
		}
		
		.logo {
			position: absolute;
			padding: 0;
			width: 204px;
			height: 162px;
			margin: 0;
			bottom: 0px;
			left: 5%;
			z-index: 5;
		}
		
		.logo img {
			border: none;
			text-decoration: none;
		}
	
	#content {
		width: 100%;
		position: relative;
		padding: 20px 0px 20px 0px; 
	}
	
	#content ul {
		list-style-type: disc;
		margin-left: 30px;
	}
	
	#footer {
		position: relative;
		width: 100%;
		padding: 10px 0px 10px 0px;
		border-top: 1px solid #85888f;
		font-size: 10px;
	}
		
	
	/* Main Menu */
	.menu {
		position: absolute;
		right: 0px;
		bottom: 56px;
		font-family: HelveticaM, Helvetica, MyriadProM, Myriad Pro, Verdana, Arial;
		color: #85888f;
		font-size: 20px;
		z-index: 99;
	}
	
	.menu ul {
		float: right;
		width: auto;
		list-style-type: none;
		margin: 0;
		padding: 0;
		margin-right: 20px;
		z-index: 99;
		height: 65px;
	}
	
	.menu ul li {
		float: left;
		position: relative;
		height: 65px;
		width: auto;
		margin-right: 40px;
		padding: 0px;
		text-align: center;
	}
	
	.menu ul li a {
		text-decoration: none;
		color: #85888f;
	}
	
	.menu ul li a:hover {
		text-decoration: none;
		color: #000000;
	}
	
	.menu ul li a:visited {
		text-decoration: none;
		color: #85888f;
	}
	
	.menu ul li.active, .menu ul li:hover {
		background: transparent url(../images/down-arrow.png) center bottom no-repeat;
	}
	
	.menu ul li.active a {
		text-decoration: none;
		color: #000000;
	}
	
	.menu ul li:last-child {
		margin-right: 0px;
		padding-right: 0px;
	}
	
	/** Bottom Menu **/
	
	.bottom-menu {
		position: relative;
		float: right;
		margin-top: 10px;
		font-family: HelveticaM, Helvetica, MyriadProM, Myriad Pro, Verdana, Arial;
		color: #85888f;
		font-size: 14px;
		z-index: 99;
	}
	
	.bottom-menu ul {
		float: right;
		width: auto;
		list-style-type: none;
		margin: 0;
		padding: 0;
		margin-right: 10px;
		z-index: 99;
		height: 25px;
	}
	
	.bottom-menu ul li {
		float: left;
		position: relative;
		height: 25px;
		width: auto;
		padding: 0px;
		margin-right: 15px;
		text-align: center;
	}
	
	.bottom-menu ul li a {
		text-decoration: none;
		color: #85888f;
	}
	
	.bottom-menu ul li a:hover {
		text-decoration: none;
		color: #000000;
	}
	
	.bottom-menu ul li a:visited {
		text-decoration: none;
		color: #85888f;
	}
	
	.bottom-menu ul li.active a {
		text-decoration: none;
		color: #000000;
	}
	
	.bottom-menu ul li.last {
		margin-right: 0px;
	}
	
	/* iPad Image Rotator */
	.ipad {
		position: relative;
		width: 500px;
		height: 393px;
		background: transparent url(../images/ipad.png) top left no-repeat;
		margin: 20px auto;
	}

	.ipad .images {
		width: 424px;
		height: 324px;
		position: absolute;
		overflow: hidden;
		top: 32px;
		left: 35px;
	}
	
	.ipad .images .scroller {
		float: left;
		position: relative;
		width: 2968px;
		height: 324px;
	}
	
	.ipad .item {
		float: left;
		position: relative;
		width: 424px;
		height: 324px;
	}
	
	.ipad .item img {
		width: 100%;
		height: 100%;
	}
	
	/* Product Display Area */
	.product {
		width: 100%;
		position: relative;
		z-index: 1;
		height: auto;
		max-height: 325px;
		overflow: hidden;
	}
	
	.product img {
		z-index: 1;
		width: 100%;
		height: auto;
	}
	
	.listing {
		width: 100%;
		position: relative;
		z-index: 1;
		height: auto;
		padding: 0;
		margin-top: 5px;
	}
	
	.thumb {
		float: left;
		position: relative;
		width:200px;
		height: 150px;
		padding: 10px;
		margin: 0;
		cursor: pointer;
	}
	
	.thumb img {
		width: 100%;
		height: 100%;
	}
	
	.product .meta {
		position: absolute;
		top: 5px;
		right: 5px;
		color: #ffffff;
		font-family: HelveticaM, Helvetica, MyriadProM, Myriad Pro, Verdana, Arial;
		font-size: 14px;
		left: 50%;
		z-index: 10;
		padding: 10px;
		text-align: justify;
		line-height: 24px;
		background: rgb(238,116,39);
		background: rgba(238,116,39, 0.9);
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}
	
	.product .arrow {
		position: absolute;
		left: 10%;
		bottom: 0px;
		width: 32px;
		height: 16px;
		background: transparent url(../images/up-arrow.png) top left no-repeat;
		z-index: 10;
	}
	
	/* Buttons */
	.button {
		width: 100%;
		height: 45px;
		text-align: center;
		cursor: pointer;
		position: relative;
		float: left;
		
		font-size: 16px;
	}
	
		.white div {
			width: 100%;
			position: absolute;
			top: 50%;
			left: 0px;
			margin-top: -12px;
			text-align: center;
			font-weight: bold;
			color: #85888f;
		}
		
		.white a {
			color: #85888f;
		}
		
		.white a:hover {
			color: #85888f;
		}
			
		.white a:visited {
			color: #85888f;
		}
		
		.white {
			color: #85888f;
			background: #fff;
			/*background: #ffffff url(../images/gray-arrow.png) 95% 50% no-repeat;*/
			border: 1px solid #85888f;
			-webkit-box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, 0.2);
       	 	box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, 0.2);
		}
		
		.orange div {
			width: 100%;
			position: absolute;
			top: 50%;
			left: 0px;
			margin-top: -12px;
			text-align: center;
			font-weight: bold;
			color: #ffffff;
		}
		
		.orange a {
			color: #ffffff;
		}
		
		.orange a:hover {
			color: #ffffff;
		}
		
		.orange a:visited {
			color: #ffffff;
		}
		
		.orange {
			color: #ffffff;
			background: #ff4e00; /*url(../images/white-arrow.png) 95% 50% no-repeat;*/
	}
	
.purchase-position {
	position: absolute !Important; 
	left: 55% !Important; 
	top: 50% !Important; 
	margin-top: -100px !Important;
}

.purchase-position .button {
	width: 85% !Important;
}
	
/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 1024px) {
	
	/* iPad Image Rotator */
	.ipad {
		position: relative;
		width: 500px;
		height: 393px;
		background-size: 100% 100%;
	}

	.ipad .images {
		width: 424px;
		height: 324px;
		position: absolute;
		overflow: hidden;
		top: 32px;
		left: 35px;
	}
	
	.ipad .images .scroller {
		float: left;
		position: relative;
		width: 2968px;
		height: 324px;
	}
	
	.ipad .item {
		float: left;
		position: relative;
		width: 424px;
		height: 324px;
	}
	
	.menu {
		bottom: 70px;
	}
	
	.menu ul {
		height: 35px;
	}
	
	.menu ul li {
		float: left;
		height: 45px;
		font-size: 14px;
	}
}

@media handheld, only screen and (max-width: 799px) {

	body {
		
	}

	#header {
		height: auto;
	}
	
	.product .meta  {
		font-size: 12px;
		line-height: 14px;
	}
	
	.button {
		float: none;
	}
	
	.row .fourcol {
		margin-bottom: 10px;
	}

	.logo {
		position: relative;
		margin: 3px auto;
	}
	
	.decoration {
		position: relative;
		width: 100%;
		height: 30px;
	}
	
	.menu {
		bottom: 0px;
		height: 35px;
		position: relative;
	}
	
	.menu ul {
		width: auto;
		float: right;
		margin-right: 5%;
	}
	
	.menu ul {
		height: 35px;
	}
	
	.menu ul li {
		float: left;
		height: 45px;
		font-size: 12px;
	}
	
	.bottom-menu ul li {
		font-size: 10px;
	}
	
	.button p {
		font-size: 14px;
		padding-top: 15px;
	}
	
	.purchase-position .button {
		width: 100% !Important;
	}
	
		/* iPad Image Rotator */
	.ipad {
		position: relative;
		width: 500px;
		height: 393px;
		margin: 20px auto;
	}

	.ipad .images {
		width: 424px;
		height: 324px;
		position: absolute;
		overflow: hidden;
		top: 32px;
		left: 35px;
	}
	
	.ipad .images .scroller {
		float: left;
		position: relative;
		width: 2968px;
		height: 324px;
	}
	
	.ipad .item {
		float: left;
		position: relative;
		width: 424px;
		height: 324px;
	}
}

@media handheld, only screen and (max-width: 570px) {
	.menu ul {
			width: 100%;
			height: auto;
			float: none;
		}
		
	.menu {
		height: auto;
	}
		
	.menu ul li {
		width: 100%;
		font-size: 16px;
		float: none;
	}
	
	.purchase-position {
		top: auto !Important;
		left: auto !Important;
		position: relative !Important;
		width: 90% !Important;
		margin: 0px !Important;
		right: auto !Important;
	}
}

@media handheld, only screen and (max-width: 450px) {	
	.product .meta {
		display: none;
	}
	
	.menu ul li {
		font-size: 12px;
		margin-right: 20px;
	}
	
	.menu ul {
		
	}
	
	.subheader {
		font-size: 10px;
		color: #9c9c9c;
	}
	
	h1 {
		font-size: 16px;
	}
	
	h2 {
		font-size: 12px;
	}
	
	h3 {
		font-size: 8px;
	}
	
	/* iPad Image Rotator */
	.ipad {
		position: relative;
		width: 300px;
		height: 193px;
		margin: 20px auto;
		background-size: 100% 100%;
	}

	.ipad .images {
		width: 245px;
		height: 155px;
		position: absolute;
		overflow: hidden;
		top: 20px;
		left: 28px;
	}
	
	.ipad .images .scroller {
		float: left;
		position: relative;
		width: 1715px;
		height: 155px;
	}
	
	.ipad .item {
		float: left;
		position: relative;
		width: 245px;
		height: 155px;
	}
}