html, body {  }
body  { color: #fff; background: #000 url(bg.jpg) top center; margin: 0; padding: 0; }
body, p, td, li, ul, ol, h1, h2, h3, h4, h5, h6  {
  font-family: "Geist Pixel", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "ELSH" 0;
}

h1 { color: #aaa; font-size: 1.6em; text-align:center;font-weight:normal;margin-top:0;margin-bottom:40px;}
h2 { color: #fff; font-size: 1.1em; text-align:center;font-weight:normal;margin:0;padding:1px;text-transform:uppercase;}

a { font-weight:bold; text-decoration: none;}
a:link { color: #ccffaa; }
a:visited { color: #ccffaa; }
a:hover, a:active, a.active { color: #ffffff; text-decoration: none; }

p { text-indent:14px; }
p img {float:left; margin: 0 14px 14px 0; border: 4px solid #f2f2f2;}



img.grayscale {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

  /* Chrome, Safari */
  -webkit-filter: grayscale(1);

  /* Firefox */
  filter: grayscale(1);
}

#nav {color:#868686;margin-bottom:10px;}

#welcome {margin:0px auto 10px auto;max-width:420px;font-size:0.8em;color:#fff;}

#update, #latest, #upcoming, #disco, #breadcrumb {text-align:left;font-size:0.9em;max-width:420px;background: #343434;border:1px solid #868686;border-radius:4px;padding:10px;margin:4px auto;}
#breadcrumb, #breadcrumb a {color:#aaa;}
#breadcrumb a strong {color:#ccffaa;font-weight:bold;}

#update b, #latest b, #latest .more {color:#ccffaa;font-size:0.8em;margin-bottom:9px;display:block;padding:0;clear:both;}

#upcoming {background:#aaa;}
#breadcrumb {background:#4d4d4d;}
#upcoming b.feat {color:#e86246;display:block;text-indent:20px;}
	
#upcoming .date {color:#3c3c3c; font-family: "Lucida Console", "Courier New", monospace; display:inline;float:left; font-size:1.3em;padding:8px 6px;border-radius:4px;margin-right:12px;
background: #ffc9b1; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ccffaa, #ffffff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ccffaa, #ffffff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ccffaa, #ffffff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ccffaa, #ffffff);}
	
#upcoming .event-title {color:#3c3c3c;font-size:1.1em;margin-bottom:0;}
#upcoming span.loc {color:#3c3c3c;margin-top:0;}
#upcoming span.loc a {color:#ccffaa;text-decoration:none;}


#latest {height:360px;}
#update .title, #latest .title {margin-bottom:4px;}
#latest .latestart {float:left;display:inline;transition: all .75s ease; width:311px;}
#latest .latestmusic {float:right;display:inline;margin-bottom:13px;transition: all .75s ease; width:95px;}
#latest .latestmusic:hover, .latestart:hover, .discopic:hover { /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);
  /* Chrome, Safari */
  -webkit-filter: grayscale(0);
  /* Firefox */
filter: grayscale(0);}
#latest .moreleft {display:inline; float:left;color:#868686;}
#latest .more a {color:#fff;}
#latest .moreright {display:inline; float:right;color:#868686;}

.disco {margin-bottom:4px;}
.discodate {color:#fff;font-size:0.8em;}
.discopic {transition: all .75s ease;}
.discotitle {color:#ccffaa;font-size:0.9em;}

.discography .albumcover {display:inline; float:left;margin:04px 4px 0;}
.discography .format, .discography .label, .discography .catalog, .discography .reldate {display:block;float:none;clear:right;text-align:right;}
.discography .format, .discography .catalog {font-size:.8em;}
.discography .project {display:block;clear:both;padding-top:10px;}
.discography .title {font-size:1.2em;color:#ccffaa;font-style:italic;}
.discography .tracklisting {color:#ccffaa;}
.discography .player {padding-top:10px;}


/*
** Page layout elements
*/

#header {}

#header #logo {text-align:center;margin:10px 0 6px 0;}
#header #logo img {height:50px;}


#content {text-align:center;}

#content h1 {}

.bands {text-align:center;display:inline;border:none;padding:12px 0 0 0;margin:6px auto 0 auto;}
.bands .bandwords {font-style:italic;color:#c3c3c3;}
.bands .icons {transform: translateZ(20px);}
.bands a {}
.bands a:hover {}
.bands a img {width:30px;opacity:0.5;transform: translateZ(20px);margin:1px;}
.bands a img.icon-www:hover {background: linear-gradient(#14a208, #086b00);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-bandcamp:hover {background: linear-gradient(#6094a3, #2b758a);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-soundcloud:hover {background: linear-gradient(#f78302, #f76201);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-reverbnation:hover {background: linear-gradient(#f70000, #c71f1e);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-instagram:hover {background: linear-gradient(#8837a4, #e96a34);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-facebook:hover {background: linear-gradient(#1873eb, #395597);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-patreon:hover {background: linear-gradient(#ff4307, #ff4307);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-twitch:hover {background: linear-gradient(#8c45f7, #6441a5);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-amazon:hover {background: linear-gradient(#000000, #f78f00);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-itunes:hover {background: linear-gradient(#ffc0bc, #3ec7e2);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-spotify:hover {background: linear-gradient(#a2ca3f, #1dd05d);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-mixcloud:hover {background: linear-gradient(#3c3c3c, #000000);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-twitter:hover {background: linear-gradient(#489be5, #1b7fbf);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-youtube:hover {background: linear-gradient(#f70000, #c71f1e);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img.icon-discord:hover {background: linear-gradient(#6e85d3, #082147);background-size: 20px 22px;background-repeat: no-repeat;background-position:5px 5px;}
.bands a img:hover {width:30px;opacity:1;transform: translateZ(20px);}


.bands a img:active {width:30px;opacity:1;transform: translateZ(20px);}
.bands a img:visited {transform: translateZ(20px);}


#contact { max-width:420px;}
#contact form {text-align:right;width:300px;margin:0 auto;margin-left:-1px;}
#contact input, #contact textarea {margin:10px 0 0 10px;}

#footer {clear:both;padding:50px;font-size:0.8em;color:#aaa;}
#footer {text-align:center;}

#footer .nav td {}


@media screen and (max-width:680px) {
h1 .h1line {color:#3c3c3c;display:block;clear:both;visibility:hidden;font-size:0.1px;}
.bands {width:89%;display:block;margin-bottom:12px;transform:none;transform-style: none;}
.bands a img {transform:none;}
}

@media screen and (max-width:420px) {
#update b, #latest b, #latest .more {font-size:1.1em;}
#upcoming .date {display:inline;clear:both; float:none;margin-top:10px;}
#upcoming .event-title {display:block;clear:both;margin-top:10px;}
#upcoming .title {margin-bottom:12px;display:block;font-size:1.6em;}
#latest {text-align:center; height:auto;}
#latest .latestart {display:block;float:none;margin:10px auto;clear:both;}
#latest .latestmusic {float:none;width:29%;margin:1%;}
#latest .more {padding-bottom:10px;display:block;}


h1 .h1line {color:#3c3c3c;display:block;clear:both;visibility:hidden;font-size:0.1px;}
.bands {width:86%;display:block;margin-bottom:12px;transform:none;transform-style: none;}
.bands a img {transform:none;}
div.bands:before, div.bands:after {border:none;left:auto;right:auto;}
}