/* @override http://sound-guru.com/style/style.css */

/* @override http://sound-guru.com/style/style.css */

/* @override 
	http://localhost/soundguru/css/style.css
	http://localhost/soundguru/style/style.css
	http://sound-guru.com/style/style.css
	http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css */

/* This CSS is copyright 2013 Sound Guru. This stylesheet relies on having the Yahoo reset CSS stylesheet included before it. This hleps keep this sheet tidier. */

/* GENERALLY USEFULLY CLASSES */
html {
	font-family: 'Lucida Grande', Helvetica, Tahoma, Arial, sans-serif;
	font-size:  0.9rem;
	background: #32302e;
	color: #fff;
}
body {
	padding: 0;
	margin: 0;
}
::selection {
	background-color: #fe9d28;
	color: white;
}
a {
	color: #fff;
}
strong {
	color: #d9d9d9;
	font-weight: bold;
}
em {
	font-style: italic;
}
p {
	margin-bottom: 1rem;
}
h1, h2, h3, h4 {
	margin-bottom: 1rem;
}
.page-width-container {
	margin: 0 auto;
	width: 90%;
	max-width: 900px;
	clear: both;
	position: relative;
}
.clearboth {
	clear: both;
}
.bottom-margin-medium {
	margin-bottom: 3rem;
}
div.no-right-margin {
	margin-right: 0 !important;
}
.no-bottom-margin {
	margin-bottom: 0 !important; 
}
.align-left {
	float: left;
	margin-right: 1rem;
	max-width: 100%;
}
.align-right {
	float: right;
	margin-left: 1rem;
	max-width: 100%;
}
.align-centre {
	margin: 0 auto 1rem;
	max-width: 100%;
}
article ul, article ol {
	color: #909090;
	padding: 0 0 1rem 1.5rem;
}
article li {
	line-height: 1.5rem;
	margin-bottom: 0.4rem;
}
article ul li {
	list-style: disc;
}
article ol li {
	list-style: decimal;
}
.code {
	font-size: 1.2rem;
	font-family: monospace;
	display: block;
	color: #ddd !important;
	background-color: #282828;
	margin: 2rem 0;
	padding: 1rem;
}

/* HEADER, LOGO & NAV BAR */
#header {
	min-height: 70px;
	min-height: 5rem;
	background: #282828;
	margin-bottom: 2rem;
}

#header h1 {
	margin-bottom: 0;
}

#site-name {
	float: left;
	text-indent: -9999px;
	background: transparent url('img/logo.png') no-repeat left top;
	width: 277px;
	height: 39px;
	margin-top: 1.2rem
}

@media screen and (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)

{
	#site-name {
		background: transparent url('img/logo@2x.png') no-repeat left top;	
		background-size: contain;
	}
}

#top-nav {
	float: right;
	margin: 2.5rem 0 0 auto;
}
#top-nav ul {
	display: inline;
}
#top-nav li {
	display: inline;
	margin-left: 2rem;
	font-size: 1.2rem;
}
#top-nav li a {
	color: #6A6A6A;
	transition: color 0.2s;
	text-decoration: none;
}
#top-nav li a:hover {
	color: #a0a0a0;
}
#top-nav li a.nav-active {
	color: #c8c8c8;
}
#top-nav li a.nav-active:hover {
	color: #fff;
}


/* BANNERS ON HOME PAGE & PRODUCT PAGES */
.product-banner {
	margin-top: 4rem;
	margin-bottom: 2rem;
	overflow: hidden;
}
.product-banner h2, .product-banner h3, .product-banner p, .product-banner h2 a {
	max-width: 48%;
}
.product-banner img, .product-banner video {
	width: 48%;
	height: auto;
	float: right;
	margin-bottom: 3rem;
	border: 4px solid #202020;
}
.product-banner h2 a {
	text-decoration: none;
	transition: background 0.5s;
	margin-left: 0;
}
.product-banner h2 a:hover, .product-banner h2 a:active {
	border-bottom: 4px solid #fff;
}
.product-banner h2 {
	font-size: 2.5rem;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}
.product-banner h3 {
	font-size: 1.3rem;
	color: #b8b8b8;
	margin-bottom: 1.5rem;
}
.product-banner p {
	color: #808080;
	margin-bottom: 1rem;
	line-height: 1.5rem;
}


/* BUTTONS THAT CALL TO ACTION */
a.action-button, a.small-action-button, #submit {
	color: white !important;
	text-decoration: none;
	padding: 0.8rem 1.5rem;
	border-radius: 1000px;
	font-size: 1.1rem;
	background-color: #0395e9;
	border: 1px solid #37b6ff;
	
	transition: background-color 0.1s;
}
p.action-button {
	margin-top: 3.5rem;
}
a.action-button:hover, a.small-action-button:hover {
	background-color: #37b6ff;
}
a.action-button span {
	color: black;
}
a.small-action-button, #submit {
	font-size: 1rem;
	padding: 0.4rem 0.8rem;
	background-color: #444444;
	border: none;
}
a.small-action-button:hover, #submit:hover {
	background-color: #6a5e5e;
}
a.buy-button {
	background-color: #5f9e2d;
	border: 1px solid #6fb63c;
}
a.buy-button:hover {
	background-color: #79be41 !important;
	border: 1px solid #79be41 !important;
}

/* FRONT PAGE "PREVIEW" BOXES */
.front-page-box-container {
	margin: 0 auto 2rem;
	text-align: justify; /* Used to make boxes align properly */
}
.front-page-box-container::after {
	content: '';
	display: inline-block;
	width: 100%;
}
.front-page-box-container div {
	background: #252525;
	display: inline-block;
	vertical-align: top;
	width: 31%;
	text-align: left;
}
.front-page-box-container h3 {
	margin: 0 0 0.8rem;
}
.front-page-box-container h3 {
	font-size: 1.2rem;
}
.front-page-box-container a {
	text-decoration: none;
}
.front-page-box-container a:hover {
	text-decoration: underline;
}
.front-page-box-container p {
	color: #7b7b7b;
	font-size: 0.9rem;
	line-height: 1.3rem;
	padding: 0 1rem 1rem;
}
.front-page-box-container a {
	display: block;
	height: 5rem;
	margin-bottom: 0.8rem;
}
.front-page-box-container a h3 {
	background-color: rgba(0, 0, 0, 0.7);
	padding: 0.4rem 1rem;
}
.es2-fp-box a {
	background: transparent url('../img/es2-bg.jpg') no-repeat 10% top;
}
.ub-fp-box a {
	background: transparent url('../img/ub-bg.png') no-repeat 10% top;
}
.mg-fp-box a {
	background: transparent url('../img/mg-bg.jpg') no-repeat 10% top;
}

/* DUAL COLUMNS ON PRODUCT PAGES */
.two-column div {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	
	width: 48%;
	display: inline-block;
	vertical-align: top;
}
div.margin-right-column {
	margin-right: 4%;
	float: left;
}
.two-column p, .two-column h3 {
	margin-bottom: 1.2rem;
}
.two-column h3 {
	font-size: 1.4em;
}
.two-column p, .tangle-team p {
	font-size: 0.9rem;
	line-height: 1.4rem;
	color: #747474;
}
div.transparent-background {
	/* For 'dummy' (invisible) video link boxes */
	background-color: transparent;
}
div.override-two-column {
	width: 100%;
	margin-bottom: 2rem;
}
div.three-rem-bottom-marg {
	margin-bottom: 3rem;
}
.darker-section {
	background-color: #292929;
	padding: 4rem 0 1rem;
}

/* PRODUCT SELLING POINT BOXES */
.selling-points img {
	float: left;
	margin-right: 1rem;
}
.selling-points h4 {
	margin-bottom: 0.5rem;
}
.selling-points p {
	color: #6f6f6f;
	font-size: 0.9rem;
}
.paralist li {
	line-height: 1.5rem;
}
.tangle-team {
	background-color: #232323;
	padding: 3rem 0;
}
.tangle-team h2 {
	font-size: 1.7rem;
	margin-bottom: 2rem;
}
.tangle-team h3 {
	font-size: 1.3rem;
}
.tangle-team video {
	padding: 0;
	margin-bottom: 0;
}
.tangle-team img {
	margin-bottom: 0.5rem;
}
.tangle-team-right-img {
	width: 400px; 
	height: auto; 
	margin-left: 2rem !important; 
}
.feature-highlight {
	margin-bottom: 5rem;
	overflow: hidden;
}


/* VIDEO & AUDIO BOXES */
div.box-link {	
	background-color: #191919;
	border: 1px solid #424242;
	border-top: 4px solid #424242;
	padding: 1rem 1rem 1rem 1rem;
	margin-bottom: 1.8rem;
}
div.box-link:hover {
	background-color: #11171f;
	border: 1px solid #666666;
	border-top: 4px solid #84bbd0;
}
.box-link a:before, .download-link h3:before {
	color: #707070;
}
.box-link:hover a:before, .download-link:hover h3:before {
	color: #ddd;
}
.media-link a:before {
	font-family: 'Lucida Unicode Sans', 'Arial Unicode MS';
	font-size: 5.5em;
	line-height: 4rem;
	float: left;
	margin: -0.4rem 0.8rem 0 -0.5rem;
	content: "\25b6";
}
.manual-link a:before {
	font-family: 'Times New Roman', Times, Serif;
	font-size: 5em;
	line-height: 4rem;
	float: left;
	margin: -0.4rem 2rem 0 0.35rem;
	content: "i";
	font-style: italic;
}
.download-link h3:before {
	font-family: 'Lucida Unicode Sans', 'Arial Unicode MS';
	font-size: 3em;
	line-height: 4rem;
	float: left;
	margin: -0.2rem 0.4rem 0 -0.7rem;
	content: "\2b07";
}
.box-link h3 {	
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	color: #707070;
}
.box-link p {	
	margin-bottom: 0;
	font-size: 0.8rem;
}
.box-link a {
	text-decoration: none;
}
.box-link:hover a {
	border: 0px;
	border-bottom: 1px solid #606060;
}
.box-link a h3 span {
	color: #616161;
}
.box-link h3 a:hover {
	color: #84bbd0;
}

/* ARTIST QUOTES */
div.artist-quote {
	padding: 1rem;
	margin-bottom: 2.5rem;
	background: #373737;
	border: 1px solid #505050;
}
.artist-quote blockquote {
	font-size: 0.9rem;
	line-height: 1.5rem;
	color: #ccc;
}
.artist-quote blockquote:before {
	content: '\201c'; /* 'quote' symbol */
	font-size: 7.5rem;
	line-height: 0rem;
	color: #505050;
	float: left;
	padding: 3rem 0 0 0;
	margin: 0 1rem 0 0;
}
.artist-quote blockquote:after {
	content: '\201d';
}
.artist-quote span {
	float: right;
}
.artist-quote span a {
	color: #fd5a23;
}
.artist-quote span a:hover {
	color: #f99772;
}

/* CUSTOMER QUOTES */
.customer-feedback div {
	width: 100%;
}
.customer-feedback div:before, .customer-feedback div:after {
	content: '\201c'; /* 'quote' symbol */
	font-family: Times, serif;
	font-size: 4em;
	line-height: 3.5rem;
	float: left;
	color: #79f4d2;
}
.customer-feedback div:after {
	content: '\201d';
	line-height: 1rem;
	float: right;
}
.customer-feedback p, .customer-feedback span {
	padding: 0 2.8rem;
}
.customer-feedback p, .customer-feedback div:before {
	margin: 1.5rem 0 0;
}
.no-top-margin p, div.no-top-margin:before {
	margin-top: 0;
}

/* TUTORIAL CHAPER LISTS */
.tutorial-chapter-list {
	margin-top: 3rem;
}
.tutorial-chapter-list ol {
	margin: 0 0 2rem 2.5rem;
	font-size: 0.9rem;
}
.tutorial-chapter-list li {
	list-style: decimal;
	color: #808080;
	margin-bottom: 0.3rem;
}
.tutorial-chapter-list span {
	color:  #eee;
}
.tutorial-chapter-list h4 {
	margin-bottom: 1rem;
}
.tutorial-chapter-list h3 a, .tutorial-chapter-list h4 a {
	background-color: #6db237;
	transition: background-color 0.2s;
	color: black;
	padding: 0.25rem 0.7rem;
	border-radius: 1000px;
	font-size: 0.8em;
	text-decoration: none;
	margin-left: 1rem;
}
.tutorial-chapter-list h3 a:hover, .tutorial-chapter-list h4 a:hover {
	background-color: #78dd28;
}

/* RELEASE NOTES BOX */
.product-notes {
	margin: 0 0 1.5rem 0.5rem !important;
	padding: 0;
}
.product-notes li {
	color: #6e6e6e;
	font-size: 0.85rem;
	margin: 0 0 1rem 1rem;
	list-style: disc;
}

/* BLOG STYLE TWO-COLUMN LAYOUT FOR BLOG & PRODUCT LISTS */
.right-column {
	float: right;
	width: 34%;
}
.left-column, .blog-column {
	float: left;
	width: 60%;
}
.left-column div, .blog-column div {
	margin-bottom: 3rem;
}
.left-column div p, 
.right-column div p, 
.right-column div ol li, 
.blog-column article p {
	color: #909090;
}
.left-column h2 {
	font-size: 1.4rem;
}
.left-column h2 a, 
.blog-column h2 a {
	text-decoration: none;
}

.right-column div {
	margin-bottom: 3rem;
}
.right-column h3 {
	font-size: 1.3rem;
	margin-bottom: 1rem;
	color: #aaa;
}
.right-column div ol {
	margin-left: 1rem;
	font-size: 0.9rem;
}
.right-column div ol li {
	list-style: disc;
	margin-bottom: 1.5rem;
	line-height: 1.25rem;
}
.right-column img {
	margin-bottom: 0.6rem;
}
.right-column p {
	font-size: 0.9rem;
	margin-bottom: 1rem;
	line-height: 1.3rem;
}

/* BLOG-SPECIFIC STYLES */
.wider-blog-column {
	/* Used on single post pages */
	width: 70%;
}
.blog-column article {
	padding-bottom: 1.5rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid #383838;
}
.blog-column article header h2 {
	margin-bottom: 0;
	font-size: 1.4rem;
}
.blog-column article header {
	margin-bottom: 1rem;
}
.blog-column article header a:hover,
.blog-column aside ul a:hover,
.blog-link a:hover,
.tags a:hover {
	color: #faee7f;
}
.blog-column article h2, .blog-column article h3,
.blog-column article h4, .blog-column article h5 {
	margin: 1.5rem 0;
	font-size: 1.3rem;
	color: #feff9c;
}
.blog-column article h2 { font-size: 1.4rem; }
.blog-column article h3 { font-size: 1.3rem; }
.blog-column article h4 { 
	font-size: 1.1rem;
	color: #ec9d1d;
}
.blog-column article h5 { 
	font-size: 1rem;
	color: #ec9d1d;
}

.blog-column article header p {
	font-size: 0.8rem;
	color: #606060;
	margin-bottom: 0;
}
.blog-column article p {
	color: #909090;
	line-height: 1.8rem;
}
.blog-column article p a {
	text-decoration: none;
}
.blog-column article p a:hover {
	background-color: #554a4a;
	color: white;
	border-bottom: 1px solid #271e1e;
}
.blog-column article blockquote {
	margin-left: 1rem;
	padding-left: 0.7rem;
	font-size: 0.9rem;
	border-left: 3px solid #AB8075;
}
.blog-column article blockquote p {
	color: #bbb;
}
.blog-column aside {
	margin-top: 2.5rem;
}
.blog-column aside ul, 
.blog-column aside ul li {
	display: inline;
	color: #606060;
}
.blog-column aside p {
	color: #ddd;
	margin-bottom: 0.4rem;
}
.blog-column aside ul a {
	text-decoration: none;
	color: #bababa;
}
.blog-column aside div {
	margin-bottom: 1.5rem;
	min-height: 2rem;
}
.blog-column aside a {
	text-decoration: none;
}
.blog-column aside a:hover {
	text-decoration: underline;
}
.blog-column aside a.previous {
	float: left;
}
.blog-column aside a.next {
	float: right;
}
article.blog-link h4 {
	font-size: 1rem;
	margin-bottom: 1rem;
}
article.blog-link h4 a {
	border-bottom: 1px solid #666;
}
.blog-link a {
	text-decoration: none;
}
.blog-link a.permalink {
	margin-left: 0.5rem;
	color: #606060;
	border-bottom: none;
}
.blog-link a.permalink:hover {
	color: white;
}
.tags a {
	text-decoration: none;
}
.tags li {
	margin-bottom: 0.3rem;
}
div.social-icons {
	margin: 0 auto 2rem;
	text-align: center;
}
a.socialicon {
	text-decoration: none;
	fill: #fff;
	margin-right: 1rem;
}
#rssicon svg {
	vertical-align: top;
	margin-top: 5px;
}
#rssicon:hover {
	fill: orange;
}
#twittericon:hover {
	fill: #55ACEE;
}
#gplusicon:hover {
	fill: #dd4b39;
}
#youtubeicon:hover {
	fill: #FF3333;
}

/* MANUAL SPECIFIC STYLES */

.manual-column h1 {
	margin-bottom: 2rem;
	font-size: 1.8rem;
}
.manual-column article h2, .manual-column article h3,
.manual-column article h4, .manual-column article h5 {
	padding-bottom: 4px;
	border-bottom: 1px solid #414141;
	clear: both;
}
.manual-column article h2, .manual-column article h3 {
	color: #feff9c;
	margin-top: 60px;
	padding-top: 15px;
}
.manual-column article h4, .manual-column article h5 {
	color: #eee;
	padding-top: 15px;
}
.manual-column article h5 {
	color: #ccc;
}
.blog-column article p a {
	text-decoration: underline;
}
.return-top {
	font-size: 14px;
	margin-left: 12px;
	color: #606060;
}
.return-top a {
	color: #606060;
	text-decoration: none;
}
.return-top a:hover {
	color: #eee;
	text-decoration: underline;
}
.manual-column img{
	padding: 6px;
	background-color: #454545;
}
.manual-contents a {
	color: #aaa;
	text-decoration: none;
}
.manual-contents a:hover {
	color: #fff;
	text-decoration: underline;
}
ol.manual-contents, .manual-contents ul, ol.manual-contents ol {
	margin: 0.5rem 0 0.5rem 2rem;
}
.manual-contents li {
	margin-bottom: 0.4rem;
}
.manual-contents ul li {
	list-style-type: square !important;
}
ol.manual-contents li {
	list-style-type: decimal;
}
.manual-contents ol li {
	list-style-type: lower-roman;
}
.manual-contents ol li ol li {
	list-style-type: lower-alpha;
}

/* CONTACT FORM SHIZ */
.left-column div input, .left-column div textarea {
	display: block;
	margin-bottom: 1.2rem;
	border-radius: 4px;
	border: none;
	padding: 0.4rem;
}

/* FOOTER */
#footer {
	clear: both;
	padding: 2rem 0;
}
#footer p {
	font-size: 0.9rem;
	color: #606060;
	text-align: center;
	width: 20em;
	margin: 0 auto;
}
#footer a {
	color: #606060;
}
#footer a:hover {
	color: #ddd;
}

@media (max-width: 850px) {
	.product-banner {
		min-height: 0;
		margin-bottom: 3rem;
	}
}

@media (max-width: 750px) {
	html {
		font-size: 0.8rem;
	}
	.front-page-box-container div {
		width: 93%;
		margin-bottom: 1rem;
	}
	#site-name {
		float: none;
		display: inline-block;
	}
	#top-nav {
		margin: 1rem 0 1rem 2rem;
		float: none;
		display: inline-block;
	}
	#top-nav li {
		margin: 0 1rem 0 0;
		font-size: 1rem;
	}
	.product-banner {
		background: transparent url('img/mangle-screenie.png') no-repeat left top;
		background-size: cover auto;
	}
	.product-banner img, .product-banner video {
		width: 100%;
		height:  auto;
		float: none;
		margin-bottom: 1rem;
	}
	.product-banner h2, .product-banner h3, .product-banner p {
		max-width: 100%;
	}
	a.action-button {
		padding: 0.75rem 1rem 0.8rem 1.3rem;
	}
	p.action-button {
		margin-top: 2rem;
	}
	.two-column div {
		width: 100%;
		margin: 0 0 2rem 0;
	}
	.right-column {
		float: left;
		width: 100%;
		margin-bottom: 3rem;
	}
	.left-column {
		float: left;
		width: 100%;
	}
	.wider-blog-column {
		/* Used on single post pages */
		width: 100%;
	}
}