@charset "utf-8";
html { scroll-behavior: smooth; }
body {
 margin:20px 0px;
 background-color:#4b2c02;
	background-image:url(img/bg.gif);
	background-position:center top;
 font-family:Verdana, Geneva, sans-serif;
 font-size:14px;
 color:#1a0f00;
}
table { border-collapse:collapse; }
td, th { font-size:14px;padding:0px;vertical-align:top; }
.padded td, .padded th { padding:2px; }
th { text-align:left; }

table.bordered { border-top:1px solid #cccccc; border-left:1px solid #cccccc; }
.bordered td, .bordered th { border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; }

img { border:0px;margin:0px; }

p { margin-top:0px; }

h1 { font-size:14px;font-weight:normal;margin:18px 0px 0px;text-align:right; }
h2 { font-size:18px;margin:0 0 14px; }
h3 { font-size:14px;margin:1px 0px 2px;padding:3px 0px; }
h4 { font-size:11px;margin:16px 0px 0px; }

a:link { color:#00b2b2; }
a:visited { color:#008080; }
a:active, a:hover { color:#8ae6e6; }
#top_nav a { text-decoration:none; }
#top_nav a div { text-decoration:underline;cursor:pointer; }

ul {
	margin-top:0px;
	margin-left:0px;
	padding-left:16px;
}
.no_bullets {
 list-style-type:none;
	padding-left:0px;
	margin:0px;
}
.spaced_li li {
 margin-bottom:13px;
}

form { margin:0px; }
select, input, textarea { font-size:11px;margin:0px; }

.m { font-size:12px; }
.s { font-size:11px; }
.xs { font-size:10px; }

.inlineBlock {
 display:-moz-inline-box;
	display:inline-block;
	zoom:1;
	*display:inline;
}
.clear {
	height:1px;
	overflow:hidden;
	clear:both;
}

main {
	background-color:#fff;
	border-radius:10px;
	box-shadow:10px 10px 10px rgba(0,0,0,0.1);
	display:block;
	margin:0 auto;
	padding:20px;
 width:calc(100% - 20px);
	max-width:960px;
	box-sizing:border-box;
}

#logo {
	width:260px;
	height:69px;
	margin:20px 0px 14px;
}
#top {
	float:right;
	text-align:right;
}
#top_nav {
	margin:20px 0px 0px;
	font-size:12px;
}
#top_nav div {
	margin-left:20px;
 display:-moz-inline-box;
	display:inline-block;
	zoom:1;
	*display:inline;
}
.current { font-weight:bold; }
#left_column {
	float:left;
	width:260px;
}
#main_column {
	margin-left:280px;
	width:640px;
}
#video_nav a { text-decoration:none; }
#video_nav div {
	background-color:#8ae6e6;
	padding:10px 10px 9px;
	margin-bottom:4px;
	color:#1a0f00;
	overflow:hidden;
	white-space:nowrap;
 border-radius:5px;
}
#video_nav a:hover div, #video_nav a:active div {
	background-color:#b2ffff;
}
#mackie_logo {
	 width:240px;
		height:187px;
		margin:15px 10px 0px;
}
#copyright {
	font-size:10px;
	color:#99805c;
	width:calc(100% - 60px);
	max-width:920px;
	margin:17px auto 0px;
	text-align:right;
}
#buybox {
	float:right;
	background-color:#fff3d9;
	width:200px;
	min-height:155px;
	margin-left:10px;
}
#buybox h3 {
	background-color:#8ae6e6;
	margin:0px;
	padding:3px 10px;
}
#buybox form {
	margin:0px;padding:7px 10px 9px;
}
#buybox select { width:178px;display:block;margin:5px 0px 8px; }

.screenshots {
	float:right;
}
.screenshots img {
	width:208px;
	height:155px;
	margin:0 0 10px 10px;
}

.vid {
	margin-bottom:20px;
	position:relative;
}
.vid:before {
	content:"";
	display:block;
	width:0;
	padding-top:72.5%;
}
.vid iframe {
	position:absolute;
	width:100%;
	height:100%;
	left:0; top:0; right:0; bottom:0;
}

@media (max-width:980px) {
	#main_column, #left_column {
		width:100%;
		margin-left:0;
		float:none;
		clear:both;
	}
	#video_nav div {
		display:inline-block;
		width: calc(33.3% - 4px);
		vertical-align:top;
		margin-right: 4px;
		box-sizing: border-box;
	}
	#mackie_logo {
		display:none
	}
}
@media (max-width:820px) {
	#video_nav div {
		width: calc(50% - 4px);
	}	
}
@media (max-width:620px) {
	main { padding:10px; }
	#video_nav div {
		width: auto;
		display:block;
		margin-right:0;
	}
	#top {
		float:none;
		text-align:center;
	}
	h1 {
		text-align:center;
		margin-top:0;
		font-size:13px;
	}
	#top_nav { margin-top:10px; }
	#logo {
		display:block;
		margin:10px auto 4px;
	}
	#buybox {
		float:none;
		width:auto;
		margin:0 0 10px;
		min-height: 0;
	}
	#buybox select { margin:5px auto 8px; }
	#buybox input[type=image] { margin: auto; display: block; }
	img { max-width:100%; height:auto !important; }
	.screenshots { float:none; text-align:center; }
	.screenshots img { margin:0 auto; }
	#copyright { text-align:center; }
}