/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
html,
body {
	font-family: 'Source Sans Pro', sans-serif;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	height: 100vh;
}

body {
	background: #7e4140 url('/HDD_inside.png');
	background-position: center bottom;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
#main {
	min-width: 320px;
	margin: auto;
	max-width: 900px;
}

@media (max-height: 480px) and (max-width: 600px) {
	body {
		background-position: 40px -140px !important;
	}
}

/*@media (min-width: 900px) and (min-height: 630px) and (max-height: 630px)*/

#content {
	padding-bottom: 300px;
}

#eapps-instagram-feed-1 {
	position: fixed;
	bottom: 0;
}

#logo,
#player,
#shows,
#show,
#show-list,
#venue,
#bio {
	min-width: 100px;
	padding: 8px;
	float: none;
	margin: 8px;
	width: 50vw;
}

#logo,
#player,
#shows,
#show,
#venue,
#bio {
	max-width: 200px;
}

#logo img {
	width: 100%;
	height: 100%;
}

#bio {
	background-color: rgba(0, 0, 0, 0.4);
}

#shows,
#show,
#show-list,
#venue {
	background-color: rgba(0, 0, 0, 0.1);
}


@media (max-width: 480px) {

	#shows,
	#bio {
		width: 90vw;
		margin-top: 135px;
	}

	#logo,
	#player {
		padding: 0;
	}

	#player {
		float: left;
		margin-top: 56px;
	}

	#logo {
		float: left;
		width: 40vw;
	}
}

#content h1 {
	margin: 16px;
}


#footer {
	text-align: right;
	font-size: 12px;
	position: fixed;
	right: 8px;
	bottom: 8px;
}

a:link {
	color: #2175f2;
	text-decoration: none;
}

a:visited {
	color: #2175f2;
	text-decoration: none;
}

a:hover {
	color: #ffffff;
	text-decoration: underline;
}

a:active {
	color: #C49964;
	text-decoration: underline;
}

#content a img {
	margin: 0px 0px 0px 8px;
}

#footer a {
	font-size: 12px;
}

p {
	margin: 16px 16px 16px 16px;
}

pre {
	color: #ffffff;
	margin: 16px 16px 16px 16px;
}

ul {
	margin: 0 0 24px 0;
	padding: 0;
}

li {
	margin: 1px 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

ol {
	color: #ffffff;
}

ol li {
	list-style: decimal;
}

/*#content ol li
{
	color: #ffffff;
}

#content ul li
{
	color: #ffffff;
	list-style: disc;
	margin: auto auto auto 16px;
}*/

.welcome p {
	font-size: 14px;
	color: #ffffff;
	display: inline;
	float: left;
	margin: 0px 0px 16px 0px;
	padding: 0px 0px 0px 0px;
	font-weight: bold;
}

#content p {
	font-size: 14px;
	color: #ffffff;
}

.byline {
	width: 93%;
	text-align: right;
}

#leftColumn {
	float: left;
	width: 275px;
}

#rightColumn {
	float: right;
	width: 275px;
}


img {
	border: none;
	margin: 0px;
	vertical-align: top;
}

#comingSoon {
	margin: 0px 8px 0px 16px;
	width: 250px;
	height: 250px;
	text-align: center;
	vertical-align: middle;
	border: solid 2px #ffffff;
}

#comingSoon pre {
	line-height: 220px;
	text-align: center;
	vertical-align: middle;
}

#footer p {
	font-size: 12px;
	margin: 5px 0px 0px 0px;
	width: 100%;
	text-align: center;
}



/* HEADINGS   
----------------------------------------------------------*/
h2,
h3,
h4,
h5,
h6 {
	color: #ffffff;
}

h1 {
	margin: 8px 16px 0px 16px;
	color: #BCBCBC;
	text-align: center;
	font-size: 20px;
}

h2 {
	font-size: 18px;
}

h3 {
	font-size: 16px;
	margin: 8px 16px 8px 16px;
}

h4 {
	font-size: 14px;
}

h5,
h6 {
	font-size: 12px;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn>h1,
.rightColumn>h2,
.leftColumn>h1,
.leftColumn>h2 {
	margin-top: 0;
}



.info {
	float: right;
	width: 380px;
	height: 200px;
	overflow: hidden;
}

.thumb {
	width: 100px;
}

.albumCover {
	float: left;
	display: block;
	margin: 0px;
}

.albumCover img {
	width: 200px;
	height: 200px;
}

.songTitle {
	color: #ffffff;
	float: left;
	margin: 0px 8px 0px 8px;
	overflow: hidden;
}

.albumThumb {
	float: left;
	display: inline;
	margin: 0px;
}

.albumImage {
	float: left;
	display: block;
	margin: 0px 16px 16px 0px;
}

.albumImage img {
	width: 275px;
	height: 275px;
}

.albumInfo {
	float: left;
	width: 300px;
	overflow: hidden;
}

#albumDesc {
	display: block;
}

.playList {
	margin: 0px;
	vertical-align: top;
}

.albumThumb img {
	height: 27px;
	width: 27px;
}

#contact {
	margin: 0px 0px 0px 0px;
	width: 604px;
	height: 20px;
}



/* TAB MENU   
----------------------------------------------------------*/
#menu ul {
	color: #2175f2;
	margin: 0px 0px 0px 25px;
	padding: 0px 0px 0px 15px;
}

#menu li {
	color: #2175f2;
	float: left;
	margin: 12px 24px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#menu a {
	margin: 0px 0px 0px 0px;
}

#shows h1 a,
#menu a {
	font-size: 20px;
}

#shows h1 a:hover,
#menu a:hover {
	color: #2175f2;
}

#shows li a {
	font-size: 14px;
}

#contact ul {
	margin: 16px 0px 0px 16px;
	padding: 0px 0px 0px 0px;
	width: 604px;
}

#contact li {
	color: #2175f2;
	float: left;
	width: 31%;
	font-size: 12px;
	margin: 2px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-weight: bold;
}

#contact a {
	color: #2175f2;
	font-size: 12px;
	text-decoration: none;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
	margin: 1em 0;
	padding: 1em;
	border: none;
}

fieldset p {
	margin: 2px 12px 10px 10px;
}

fieldset label {
	display: block;
}

fieldset label.inline {
	display: inline;
}

.welcome form {
	display: inline;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

p form {
	display: inline;
}

input[type="submit"] {
	border: solid 1px #2175f2;
	font-family: arial;
	font-size: 14px;
	font-weight: bold;
	padding: 0px 2px 0px 2px;
	margin: -1px 0px 0px 0px;
	height: 20px;
	vertical-align: top;
	color: #ffffff;
	background-color: #000000;
}

td h2 {
	margin-top: 12px;
}

td img {
	margin-top: 15px;
}

table.songs tr td img {
	margin: 0px;
	vertical-align: middle;
}

input[type="text"] {
	border: solid 1px #2175f2;
	padding: 1px 2px 1px 2px;
	margin: -1px 0px 0px 0px;
	color: #2175f2;
	font-size: 14px;
	width: 450px;
	font-family: arial;
	font-weight: bold;
	background-color: #ffffff;
	line-height: 16px;
}

input[type="password"] {
	padding: 1px 2px 1px 2px;
	margin: -1px 0px 0px 0px;
	color: #2175f2;
	font-size: 14px;
	width: 450px;
	font-family: arial;
	border: none;
	background-color: #ffffff;
	line-height: 16px;
}

#welcome input[type="text"] {
	width: 160px;
}

#listen input[type="text"] {
	width: 120px;
	margin-top: 0px;
}

#listen input[type="submit"] {
	margin-top: 0px;
}

textarea {
	border: solid 1px #ffffff;
	padding: 1px 2px 1px 2px;
	margin: 0px 3px 0px -3px;
	color: #ffffff;
	font-size: 14px;
	width: 575px;
	font-family: Courier New;
	height: 550px;
	background-color: #000000;
	line-height: 16px;
}

select {
	padding: 1px 2px 1px 2px;
	margin: -1px 0px 0px 0px;
	color: #B18C93;
	font-size: 14px;
	font-family: arial;
	border: none;
	background-color: #ffffff;
	line-height: 16px;
	max-height: 100px;
}

a.linkButton {
	border: solid 1px #2175f2;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	white-space: nowrap;
	font-size: 14px;
	color: #ffffff;

	font-weight: bold;
	padding: 2px 5px 0px 5px;

	vertical-align: top;
}


/* TABLE
----------------------------------------------------------*/

table {
	color: #ffffff;
	margin: 0px 8px 0px 8px;
}

.content {
	height: 390px;
}

table th {
	vertical-align: top;
	text-align: left;
	padding: 8px;
}

table td {
	vertical-align: top;
	padding: 2px 4px 2px 4px;
}

table.shows,
table.members,
table.epk,
table.venues {
	width: 95%;
}

table.albums tr td,
table.members tr th,
table.members tr td,
table.shows tr td,
table.venues tr td {
	white-space: nowrap;
}

.wrap {
	white-space: normal !important;
}

table.epk tr td {
	width: 31%;
	text-align: center;
}

table.albums tr td img {
	margin: 0px;
}

#contact td {
	font-size: 14px;
	margin: 0px 0px 0px 16px;
	padding: 0px 0px 0px 0px;
	width: 29%;
	line-height: 18px;
}

/* MISC  
----------------------------------------------------------*/

.right {
	float: right;
}

.left {
	float: left;
}

.center {
	text-align: center;
}

img.banner {
	display: inline-block;
	width: 590px;
	height: 115px;
	margin: -26px 0 28px 0 !important;
}

hr {
	color: #B18C93;
	margin: 16px 16px 16px 16px;
}

.clear {
	clear: both;
}

.error {
	color: Red;
}

#menucontainer {
	margin-top: 40px;
}

.field-validation-error {
	color: #ff0000;
}

.input-validation-error {
	border: 1px solid #ff0000;
	background-color: #ffeeee;
}

.validation-summary-errors {
	margin: 16px 16px 16px 16px;
	font-weight: bold;
	color: #ff0000;
}

/*	****************************
	JQuery scrolling home page

/* js-disabled class - set image sizes so they all fit in the viewer */

.js-disabled img {
	display: block;
	float: left;
	margin: 0px 0px 0px 0px;
}

#outerContainer {
	padding: 0px;
	width: 572px;
	margin: 0px 0px 0px 16px;
	position: relative;
	overflow: hidden;
}

#imageScroller {
	width: 572px;
	height: 327px;
	position: relative;
	background: #000000;
}

#viewer {
	width: 572px;
	height: 327px;
	overflow: hidden;
	position: relative;
	top: 2px;
}

#imageScroller a:active,
#imageScroller a:visited {
	color: #000000;
}

#imageScroller a img {
	border: 0;
}

#controls {
	width: 560px;
	height: 47px;
	background: url(/controlsBG.png) no-repeat;
	position: absolute;
	top: 0px;
	left: 4px;
	z-index: 10;
}

#controls a {
	margin-top: 0px;
	width: 37px;
	height: 35px;
	position: absolute;
	top: 0px;
}

#controls a:active,
#controls a:visited {
	color: #0d0d0d;
}

#title {
	color: #ffffff;
	font-family: arial;
	font-size: 100%;
	font-weight: bold;
	width: 100%;
	text-align: center;
	padding-top: 1px;
}

#rtl {
	background: url(/rtl.png) no-repeat;
	left: 100px;
}

#rtl:hover {
	background: url(/rtl_over.png) no-repeat;
	left: 99px;
}

#ltr {
	background: url(/ltr.png) no-repeat;
	right: 100px;
}

#ltr:hover {
	background: url(/ltr_over.png) no-repeat;
}


#blog {
	margin-top: 50px;
}

#blog img {
	float: left;
	max-width: 200px;
	padding-right: 10px;
	padding-bottom: 10px;
}

#review img {
	float: left;
	max-width: 570px;
	padding-right: 10px;
	padding-bottom: 10px;
}


.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/* End hide from IE-mac */

.together {
	display: inline-block;
}


@media (max-width: 960px) {

	.data-table {
		width: 100%;
		color: white;
		overflow: hidden;
		border-collapse: collapse;
	}

	.data-table .right {
		float: none
	}

	.data-table tr:last-child td {
		border-bottom: none;
	}

	.data-table th {
		display: none;
	}

	.data-table td {
		display: flex;
	}

	.data-table td:first-child {
		padding-top: .5rem;
	}

	.data-table td:last-child {
		padding-bottom: .5rem;
		border-bottom: 1px solid #FFFFFF;
	}
}