/* -------------- RESET -------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0 auto;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}
:focus { outline: 0;}
div { margin: 0; padding: 0; }
a, a:link, a:visited, a:hover, a:active{text-decoration: none; color: #c2c2c2;}
table {	border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
input, textarea, select {-webkit-appearance: none; -webkit-font-weight: 400; -webkit-border-radius: 0;}
pre {white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }
strong { font-weight: bold; }
hr { height: 1px; border: 1px solid rgba(255,255,255,0.25); display: block; margin: 30px 0;  }
.sticky {}
.alignright { text-align: right; }
.alignleft { text-align: left; }
.aligncenter { text-align: center; }

/* -------------- ALL-PAGE STYLES -------------------- */

html, body
{
	background: #fff;
	background-image: url(bg.png);
	/* font-family: 'HelveticaNeue', 'Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	font-weight: 200;
	line-height: 1.5;
	color: #eee;
	text-shadow: 0 1px #000;
	width: 100%;
	-webkit-text-size-adjust: none; /* prevent WebKit-based browsers from resizing text */
	position: relative;	
	margin: 0 auto;
}

h1 { font-size: 16px; line-height: 20px; margin-bottom: 10px; font-weight: bold; }
h2 { font-size: 14px; line-height: 18px; margin-bottom: 8px; font-weight: bold; }
h3 { font-size: 12px; line-height: 17px; margin-bottom: 6px; font-weight: bold; }
h4 { font-size: 11px; line-height: 15px; margin-bottom: 4px; font-weight: bold; }
h5 { font-size: 10px; line-height: 12px; margin-bottom: 2px; font-weight: bold; }
h6 { font-size: 8px; line-height: 10px; margin-bottom: 1px; font-weight: bold; }

.twocol
{
	width: 45%;
	padding: 0 2%;	
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin-left: -2%;
}

.threecol
{
	width: 29%;
	padding: 0 2%;	
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin-left: -2%;
}

.fourcol
{
	width: 21.3%;
	padding: 0 2%;	
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin-left: -2%;
}

#content .icon
{
	width: 15px;
	padding: 4px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 0.75px 0px #000, inset 0 0.9px 0px rgba(255,255,255,0.75);
    -webkit-box-shadow: 0 0.75px 0px #000, inset 0 0.9px 0px rgba(255,255,255,0.75);
    box-shadow: 0 0.75px 0px #000, inset 0 0.9px 0px rgba(255,255,255,0.75);
	vertical-align: middle;
		
}

table
{
	display: table;
	text-align: center;	
	margin: 0 auto;
	background: rgba(255,255,255,0.075);
	border: 1px dashed rgba(255,255,255,0.175);
	
}

table thead tr
{
	background: rgba(0,0,0,0.05);
}

table thead tr td {font-weight:bold;}
table tr { text-align: center; }


table td
{
	padding: 0px 10px;	
	text-align: center;	
	border: 1px solid rgba(0,0,0,0.05);
}

input, textarea
{
	display: block;	
	margin: 0;
	border: none;
	background-image: linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -o-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(62,62,62)),color-stop(1, rgb(71,71,71)));
	color: rgba(255,255,255,0.75);
	padding: 10px;
	letter-spacing: -0.3px;
	font-size: 13px;
	width: 92% !important;
	min-width: 50%;
	border-left: 1px solid #555;
	border-top: 1px solid #555;
}

textarea { height: 100px; }
input:hover, textarea:hover { background: #5b7e88; }
input:focus, textarea:focus { background: #5b7e88; }
input:hover, input[type=button]:hover { background: #5b7e88; }

input[type=submit], input[type=button]
{
	display: inline-block;
	border: none;	
	background-image: linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -o-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(62,62,62)),color-stop(1, rgb(71,71,71)));
	color: #fff;
	padding: 8px 16px;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;
	border-left: 1px solid #555;
	border-top: 1px solid #555;
}

label { font-weight: bold; }
form { margin-top: 30px; width: 100%; overflow: hidden; }

.toggle
{
	padding: 6px 12px;
	margin-bottom: 0px;
	font-size: 12px;
	font-weight: normal !important;
	cursor: pointer;
}

.container
{
	display: block;
	padding: 6px 12px;	
	font-size: 12px;
}

#searchform
{
	width: 290px;
	
	background-image: linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -o-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(62,62,62)),color-stop(1, rgb(71,71,71)));
	
	padding: 2px 0;
	border-left: 1px solid #555;
	border-top: 1px solid #555;
	margin: 15px auto;
}

#searchform-text
{
	padding-left: 12px;
	width: 198px;
	margin: 0;
	background-color: transparent;
	border: none;
	display: inline-block;
	color: #fff;
	text-shadow: 1px 0 #000;
}

#searchform-submit
{
	background-image: linear-gradient(bottom, rgb(2,116,222) 0%, rgb(36,147,251) 100%);
	background-image: -o-linear-gradient(bottom, rgb(2,116,222) 0%, rgb(36,147,251) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(2,116,222) 0%, rgb(36,147,251) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(2,116,222) 0%, rgb(36,147,251) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(2,116,222) 0%, rgb(36,147,251) 100%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(2,116,222)),
		color-stop(1, rgb(36,147,251))
	);
	border: 1px solid #234fa8;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 0.9px 0px rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 0.9px 0px rgba(255,255,255,0.5);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 0.9px 0px rgba(255,255,255,0.5);
	text-transform: capitalize;
	font-size: 13px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
	padding: 5px 3px;
	display: inline-block;
	margin-bottom: 2px;
}

/* -------------- WRAPPER -------------------- */

#page-wrapper
{
	min-width: 320px;
	width: auto;
	max-width: 1024px;
	margin: 0px auto;
	background: url(page-pattern.png);
	-moz-box-shadow: 0 0px 20px rgba(0,0,0,0.25), inset 0 0 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0px 20px rgba(0,0,0,0.25), inset 0 0 5px rgba(0,0,0,0.5);
	box-shadow: 0 0px 20px rgba(0,0,0,0.25), inset 0 0 5px rgba(0,0,0,0.5);
}

/* -------------- HOMEPAGE MENU -------------------- */

#menu-main
{
	margin: 0 auto;	
}

	#menu-main, .page-header-menu ul
	{
		
		background: #222;
	}

		#menu-main li, .page-header-menu ul li
		{
			display: inline-block;
			margin-bottom: 4px;
		}
			
			#menu-main li.buy a { background-image: url(buy.png); background-repeat: no-repeat; background-size: 35px; background-position: 50% 44%; }
			#menu-main li.videos a { background-image: url(videos.png); background-repeat: no-repeat; background-size: 35px;  background-position: 50% 44%; }
			#menu-main li.features a { background-image: url(features.png); background-repeat: no-repeat; background-size: 35px; background-position: 50% 44%; }
			#menu-main li.gallery a { background-image: url(gallery.png); background-repeat: no-repeat; background-size: 35px; background-position: 50% 44%; }
			#menu-main li.contact a { background-image: url(contact.png); background-repeat: no-repeat; background-size: 35px; background-position: 50% 44%; }
			#menu-main li.blog a { background-image: url(blog.png); background-repeat: no-repeat; background-size: 35px; background-position: 50% 44%; }
		
			#menu-main li a, .page-header-menu li a
			{
				font-size: 12px;
				color: #fff;
				text-shadow: 0 1px 0px #000;
				height: 158px;
				width: 158px;	
				display: inline-block;
				-moz-box-shadow: inset 0px 2px 2px rgba(255,255,255,0.1);
				-webkit-box-shadow: inset 0px 2px 2px rgba(255,255,255,0.1);
				box-shadow: inset 0px 1px 0px rgba(255,255,255,0.1);
				border: 0px solid #252525;
				text-align: center;
				line-height: 210px;
				background-color: #333;  /* ** */
			}
			
			#menu-main li a:active, .page-header-menu li a:active
			{
				background-color: #222;  /* ** */
			}
			
			.page-header-menu li { margin-right: 4px; }
			#menu-main li { margin-right: 0; }
			
/* -------------- CONTENT -------------------- */

#page-content
{

}
	
	#page-content article
	{
		font-size: 13px;
		line-height: 1.5;
		border-bottom: 1px solid rgba(255,255,255,0.25);
		padding: 15px;
	}
	
	#page-content article p { margin: 11px 0; }
	#page-content article a {text-decoration: underline; }
	
		#page-content article img { max-width: 100%; margin: 10px 0; }
		#page-content article iframe { max-width: 100%; margin: 10px 0; }
	
		#page-content article .article-title
		{
			font-weight: bold;
			font-size: 14px;
			margin-left: 58px;
			margin-bottom: 5px;
		}
		
		#page-content article .article-avatar img
		{
			float: left;
			margin-top: 6px;	
			
		}
		
		#page-content article .article-xcontent
		{
			margin-left: 58px;	
			margin-bottom: 8px;
		}
		
		#page-content article .article-content
		{
			padding: 0 15px;
		}
	
		#page-content article .article-meta
		{
			margin-left: 58px;
			font-style: italic;
			
			color: #a8a8a8;
		}
		
			#page-content article .article-meta a { color: #a8a8a8; }
			#page-content article .article-meta .article-meta-left { display: inline-block; }
			#page-content article .article-meta .article-meta-right { float: right; }
	
/* -------------- BLOG LIST -------------------- */
			
.article-blog-list
	{
		background-image: linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
		background-image: -o-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
		background-image: -moz-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
		background-image: -webkit-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
		background-image: -ms-linear-gradient(bottom, rgb(62,62,62) 0%, rgb(71,71,71) 100%);
		
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, rgb(62,62,62)),
			color-stop(1, rgb(71,71,71))
		);
		border: none !important;
		-moz-box-shadow: 0 0.75px 0px #000, inset 0 1px 0px rgba(255,255,255,0.75);
		-webkit-box-shadow: 0 0.75px 0px #000, inset 0 1px 0px rgba(255,255,255,0.75);
		box-shadow: 0 -2px 2px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.1);
		color: #fff;
		text-shadow: 0 0 1px #000;
		position: relative;
		border-right: 5px solid #7d9849 !important;
	}
	
.article-blog-list p { margin: 11px 0; }
.article-blog-list a {text-decoration: none !important; }
.article-blog-list .article-title {  margin-right: 60px !important; }
.article-blog-list h1 a {color: #fff !important; }

.article-blog-list .article-meta-right
{
	position: absolute;
	right: 15px;
	top: 17px;
	font-size: 11px;
}
			
/* -------------- RESPONSIVE -------------------- */
	
@media only screen and (max-width: 320px) { /* Mobile  (portrait)*/

html, body
{
	background: #333;
}

	#menu-main, .page-header-menu ul
	{
		min-width: 313px;
		max-width: 313px;
		border: 3px solid #222;
		border-bottom: none;
	}
	
	#menu-main li a, .page-header-menu li a
	{
		font-size: 12px;
		height: 154px;
		width: 154px;
	}
	
}

@media only screen and (min-width: 321px) and (max-width: 480px) { /* Mobile (landscape)*/

html, body
{
	background: #333;
}

	#menu-main, .page-header-menu ul
	{
		min-width: 470px;
		max-width: 470px;
		border: 3px solid #222;
		border-bottom: none;
	}
	
	#menu-main li a, .page-header-menu li a
	{
		font-size: 12px;
		height: 154px;
		width: 154px;
	}
	
}

@media only screen and (min-width: 481px) and (max-width: 767px) { /* Mobile (landscape)*/

html, body
{
	background: #333;
}

	#menu-main, .page-header-menu ul
	{
		min-width: 560px;
		max-width: 560px;
		border: 3px solid #222;
		border-bottom: none;
	}
	
	#menu-main li a, .page-header-menu li a
	{
		font-size: 12px;
		height: 184px;
		width: 184px;
		line-height: 260px;
	}
	
}


@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait)  { /* Tablet */
 	
	html, body
	{
		background: #333;	
	}
 
	#menu-main, .page-header-menu ul
	{
		min-width: 764px;
		max-width: 764px;
		border: 3px solid #222;
		border-bottom: none;
		border-right: none;
	}
	
	#menu-main li a, .page-header-menu li a
	{
		font-size: 14px;
		height: 251px;
		width: 251px;
		line-height: 300px;
	}

}

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape)  { /* Tablet */
 	
	html, body
	{
		background: #333;	
	}
 
	#menu-main, .page-header-menu ul
	{
		min-width: 1020px;
		max-width: 1020px;
		border: 3px solid #222;
		border-bottom: none;
		border-right: none;
	}
	
	#menu-main li a, .page-header-menu li a
	{
		font-size: 14px;
		height: 322px;
		width: 336px;
		line-height: 380px;
	}

}
@media (min-width: 1025px) { /* Hi-res desktop 1440px+ */
	
	#page-wrapper
	{
		max-width: 768px;
	}
	

	#menu-main, .page-header-menu ul
	{
		min-width: 768px;
		max-width: 768px;
		border: 3px solid #222;
		border-bottom: none;
		border-right: none;
	}
	
	#menu-main li a, .page-header-menu li a
	{
		font-size: 14px;
		height: 252px;
		width: 252px;
		line-height: 300px;
	}
}


/* -------------- END OF CSS -------------------- */