@font-face
{
	font-family: 'EncodeSans';
	src: url('fonts/EncodeSansNormal-400-Regular.woff') format('woff');
    font-weight:400;
}

@font-face
{
	font-family: 'EncodeSans';
	src: url('fonts/EncodeSansNormal-500-Medium.woff') format('woff');
    font-weight:500;
}

@font-face
{
	font-family: 'EncodeSans';
	src: url('fonts/EncodeSansNormal-600-SemiBold.woff') format('woff');
    font-weight:600;
}

/* Ensure all browsers use the correct weight for strong/bold */
strong, b
{
	font-weight: 600;
}

/* Defaults (including phone) */
html
{
    background-color: #d2d2d2;
    color: #202020;
    font-family: 'EncodeSans', Verdana, sans-serif;
    font-weight: 400;
    line-height: 1.5;
}

body
	margin: 0.625rem 1.25rem; /* == 10px 20px */
	font-size: 15px;
}

@media (min-width: 576px) {
  body {
		margin: 0.625rem auto;
		max-width: 540px;
	}
}
@media (min-width: 768px) {
  body {
		font-size: 16px;
		max-width: 720px;
	}
}
@media (min-width: 992px) {
  body {
		font-size: 17px;
		max-width: 960px;
	}
}
@media (min-width: 1200px) {
  body {
		font-size: 18px;
		max-width: 1140px;
	}
}


img
{
max-width: 100%;
}

.imgborder
{
   border: 1px solid #404040;
   max-width: 100%;
}

img.imagedesc
{
   border: 1px solid #808080;
}

.imgtiledtable
{
	width: 100%;
	height:auto;
	margin:0 auto;
}

/* Contents page */
.contents
{
    width: 100%;
    max-width: 1024px;
		font-size: 1.2em;
    font-weight:400;
    border: 0;
		margin: 0 auto;
}

.contents__left
{
	width: 65%;
}

.contents__right
{
	text-align: right;
}
.quicklinks
{
    width: 100%;
    max-width: 500px;
		font-size: 1.0em;
    font-weight:400;
    border: 0;
}

table.quicklinks td, table.quicklinks th
{
	border-bottom: 0;
}

p, li, h1, h2, h3, h4, h5, h6, table
{
    margin-top: 0;
}

h1, h2, h3, h4, h5, h6
{
    color: #026ebe;
    font-weight:500;
    line-height: 1.2em;
		padding-top:12px;
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.0em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.7em; }

/* Links */
a
{
    color: #000000;
    font-weight:600;
    text-decoration: none;
	border-bottom: 1px solid;
}

a.imagelink
{
	border: 0;
}

/* Highlight styles */
.highlight-green
{
  border: 2px solid #27d42f;
  padding: 0 2px;
  color: #27d42f;
}

.highlight-darkgreen
{
  border: 2px solid #006400;
  padding: 0 2px;
  color: #006400;
}

.highlight-red
{
  border: 2px solid #c02020;
  padding: 0 2px;
  color: #c02020;
}


/* Horizontal rules */
hr
{
	border: 1px solid #A0A0A0;
	border-style: solid;
}

/* Tables */
table
{
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

table td, table th
{
  border-bottom: 1px solid #808080;
  vertical-align: top;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: .9em;
}
table thead
{
	border-bottom: 1px solid #A0A0A0;
}

table thead th
{
	font-weight: bold;
	text-align: left;
	padding: 10px;
}

table td:first-child {
	min-width: 15vw;
}
@media (min-width: 992px) {
	table td:first-child {
		min-width: 10vw;
	}
	td:first-child img {
		max-width: none;
	}
}

/* Footer table */
table.footer td
{
	border-bottom: 0;
}



/* .grid is for instruments and effects pages  */
.grid,
.grid * {
	box-sizing: border-box;
}
	.grid {
		/* align-items: flex-start; */
		display: flex;
		flex-wrap: wrap;
		font-size: 90%;
		justify-content: space-between;
	}
	.grid--two {
		margin: 0 auto;
		max-width: 1024px;
	}
	.grid-item {
		display: flex;
		flex-direction: column;

		margin-bottom: 2rem;
		max-width: 512px;
		width: 100%;
	}
	@media (min-width: 576px) {
		.grid-item {
			width: 49.5%;
		}
	}
	@media (min-width: 768px) {
		.grid-item {
			/* width: 49%; */
		}
		.grid--four .grid-item {
			width: 33%;
		}
	}
	@media (min-width: 992px) {
		.grid-item {
			/* width: 24%; */
		}
		.grid--four .grid-item {
			width: 24%;
		}
	}
	.grid-item__description {
		flex: 1 0 auto;
	}
	.grid-item__name {
		color: #202020;
		font-size: 1rem;
		font-weight: 600;
		margin-bottom: 0;
	}
	.grid-item__image {
		height: auto;
		max-width: 100%;
		width: 512px;
	}
	.grid-effects .grid-item__image {
		width: 289px;
	}


/* Image with accompanying test description on the right hand side */
table.imagedesc
{
	background-color: rgb(100,100,110);
}

table.imagedesc th,
table.imagedesc thead {
	border-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

table.imagedesc td {
	color: rgb(220,220,220);

	border-bottom: 0;
	padding-left: 8px;
	padding-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
}

table.imagedesc td:first-child {
	padding-top: 8px;
}

table.imagedesc td:first-child img {
		/* 300 mostly works */
    /* height: 300px; */
		/* height: 100%;
    width: auto;
    max-width: none; */
}

table.imagedesc td:last-child {
	padding-left: 8px;
	padding-right: 8px;
	/* width: 75%; */
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	table.imagedesc td:first-child img {
		height: auto;
		max-width: 280px;
		min-height: 150px;
		width: auto;
	}
	table.imagedesc td:last-child {
		width: 100%;
	}
}
@media (min-width: 768px) {
	table.imagedesc td:first-child img {
			height: auto;
			max-width: 400px;
			min-height: 0;
			width: auto;
		}
}
@media (min-width: 992px) {
	table.imagedesc td:first-child img {
			height: 100%;
	    width: auto;
			min-height: 0;
	    max-width: none;
	}
}

table.imagedesc td a
{
	color: rgb(220,220,220);
}


/**
 * Small screen tweaks.
 * Note this uses 'max-width' to target from 565px down.
 */

 /*
 TODO: tables with multple strongs/brs in the right TD could use stronger 'headings'. See: Project.html#new-mixdown
 */

@media (max-width: 575px) {
	img {
		height: auto;
		max-width: 100%;
	}

	/* Hide the empty spacer cells */
	tr:empty,
	th:empty,
	td:empty {
		display: none;
	}

	table td,
	table th {
		/* Force tables to render vertically */
		display: block;
		/* And adjust the vertical spacing */
		padding-top: 0;
		/*  And remove the borders */
		border: 0 none;
	}

	/* Adjust "list" type table vertical spacing */
	table td:first-child {
		border-top: 1px solid #808080;
		min-width: inherit;
		padding-bottom: 0;
		padding-top: 10px;
	}

	/* Avoid double borders */
	table thead {
		border-bottom: 0;
	}

	/* Fix spacing on imagedesc tables */
	table.imagedesc td {
		padding-right: 8px;
	}
	table.imagedesc td:last-child {
		padding-left: 8px;
		padding-right: 8px;
		padding-bottom: 1em;
		/* er, 94%? Tables for layout is just weird. */
		width: 94%;
	}

	/* These aren't needed since things are stacked. */
	img + br {
		display: none;
	}
	.contents__left {
		width: 50%;
	}

	.contents__right {
		text-align: right;
	}

	/* Reset TDs for the contents table */
	.contents td {
		border-bottom: 1px solid #808080;
		display: table-cell;
		padding-top: 10px;
	}
	.contents a {
		font-size: 85%;
	}
}