-->
*      {
       margin: 0 ;
       }@font-face {	font-family: 'Lapsus Pro Bold';	src: url('/fonts/LapsusPro-Bold.otf');}
@font-face {	font-family: 'Godfather';	src: url('/fonts/TheGodfather-v2.ttf');}@font-face {	font-family: 'Square Caps';	src: url('/fonts/SquareCaps.ttf');}@font-face {	font-family: 'Soulcraft';	src: url('/fonts/Soulcraft.ttf');}@font-face {	font-family: 'Benja';	src: url('/fonts/Benja.otf');}
h1      { 
        border-bottom: 5px solid #B0D4FE; 
        margin-top: 6px; 
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        }
h2      { 
        font-family: 'Permanent Marker','Staatliches', cursive; 
        font-size: 30px; 
        font-weight: 600; 
        font-style: normal; 
        color: black;
        letter-spacing: 3px; 
        text-align: center;		text-transform: uppercase;
        }
h3      { 
        text-align: left; 
        font-family: 'Staatliches', 'Permanent Marker', Arial; 
        font-size: 16px; 
        font-weight: 800;		text-decoration: underline;
        }
h4      {
        font-size: medium;
        font-weight: 800;
        margin-top: 0px; 
        margin-bottom: 0px;
        padding-left: 0px; 
        padding-right: 0px; 
        padding-top: 0px; 
        padding-bottom: 0px; 
        margin-left: 0px; 
        }
h5      { 
        margin-top: 6px; 
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-style: italic;
        font-size: x-large;
        color: red;
        }
h6      { 
        font-family: Arial; 
        font-size: xx-small; 
        font-weight: 300; 
        font-style: normal;  
        vertical-align: text-bottom;
        }
html, body   {
        height: 100%;		/* margin-bottom: 95px; */		/* min-height: 400px; */
        }
body    { 
        margin-top: 0px; 
        /*margin-bottom: 0px;*/
        padding-top: 0px; 
        font-family: Arial; 
        font-size: 10px; 
        font-weight: 400; 
        font-style: normal; 
        text-decoration: none; 
        text-transform: none; 
        font-variant: normal; 
        /* background-image: url(bluebar.jpg); */
        /* background-repeat: repeat-x; */
        }
table   { 
        font-size: 10px;
        text-align: left;
        }
p       { 
        text-align: left; 
        font-size: 14px; 
        font-family: 'Acme'; 
        font-style: normal; 
        font-weight: 400
        }
a       { 
        text-decoration: none; 
        color: #7163BA; 
        background-color: #B0D4FE;
        cursor: pointer;
        }
a:hover { 
        background-color: #941214; 
        color: #B0D4FE;
        cursor: pointer;
        
        }/*
span    { 
        background-color: #941214; 
        }*/
ul      { 
        list-style-type: none; 
        padding-left: 0px; 
        padding-right: 0px; 
        padding-top: 0px; 
        padding-bottom: 0px; 
        margin-left: 0px; 
        margin-right: 0px; 
        margin-top: 0px; 
        margin-bottom: 0px;
        /*white-space: nowrap;*/
        }
li      {
        margin-top: 5px;
        margin-bottom: 5px;
        padding-left: 0px; 
        padding-right: 0px; 
        margin-left: 0px; 
        margin-right: 0px;
        /*white-space: nowrap;*/
        }
#container
      {
      margin: 0 auto;
      width: auto;
      position: relative; 
      min-height: 100%;
      height: auto !important;	        }
#content_wrapper
        {
        width: 465px;
        height: auto;
        margin: auto;
        text-align: left;
        padding-bottom: 110px;				font-family: 'Abril Fatface';				font-size: 14px;		        }
@media screen and (max-width: 600px) {      #content_wrapper {            width: 90%;      }}	#content_wrapperwho
        {
        width: 550px;
        height: auto;
        margin: auto;
        text-align: left;
        padding-bottom: 50px;				font-family: 'Righteous';		        }
#content_wrapperwrite
        {
        width: 650px;
        height: auto;
        margin: auto;
        text-align: left;
        padding-bottom: 50px;				font-family: 'Righteous';
        }
#content_wrapperblog
        {
        width: 600px;
        height: auto;
        margin: auto;
        text-align: left;
        padding-bottom: 40px;
        }     
#leftcontent {
		width: 212px;
        float: left;
        text-align: left;
        margin-left: 20px;
        }
.leftcontent_leftcolumn {
        width: 50%;
        float: left;
        background: #FFFF00;
        }
.leftcontent_rightcolumn {
        width: 50%;
        float: left;
        background: #FF8000;
        text-align: right;
        }
#centercontent {
		width: 500px;
        float: left;
        margin-left: 25px;
        margin-bottom: 10px;
        }
        
#centercontent_leftcolumn {
        width: 100px;
        float: left;
        text-align: right;
        margin-left: 3%;
        }
#centercontent_rightcolumn {
        width: 45%;
        float: left;
        text-align: left;
        margin-right: 3%;
        }
#centercontent_rightcolumn_full {
        width: 350px;
        float: left;
        text-align: left;
        }
.centercontent_centercolumn {
        width: 100%;
        float: left;
        text-align: center;
        margin-top: 5px;
        }
#rightcontent {
		width: 212px;
        float: left;
        overflow: visible;
        }

#centered {
        margin-right: auto;
        margin-left: auto;
        width: 432px;
        text-align: left;
        background:#8000FF;
        height: auto !important;
        } 
#footer {
        height: 45px;
        text-align: center;
        position: relative;
        clear: both;
        bottom: 0;
        width: 100%;
        /* background-image: url(bluebar2_bottom.jpg); 
        background-repeat: repeat-x;
        background-position: bottom left; */		font-family: 'Staatliches';		font-size: 14px;		margin-top: -45px;
        }@media screen and (max-width: 481px) {	#footer {		height: 60px;		position: relative; /* Might need to change to initial */		margin-top: -60px;	}}	
/*.w3c {
      font-size: 10px;
      font-weight: 400;	  	  margin-bottom: 5px;
      } */
.w3c {	float: right;	margin-left: -50%;	margin-top: -25px;}.w3c a
        {         background-color: transparent; 
        cursor: pointer;        }
.w3c a:hover
        { 
        cursor: pointer;
        color: #941214;
        text-decoration: underline;
        background: none;
        }
.dates  {
        color: #6A6A6A;
		}
.favorites{
        color: #941214;
        background-color: #B0D4FE;
        }
.pictures{
         color: #941214;
         text-align: right;
         }
#compositions  {
        background-color: #B0D4FE;
        text-align: left;
		top:450px;
		width:400px;
		border-bottom:0px solid #941214;
        border-top:0px solid #941214
		}  
.genres {
        text-align: right;
        }
.genres h3{
        text-align: left; 
        font-family: 'Permanent Marker'; 
        font-size: 20px; 
        font-weight: 800; 
        font-style: italic; 
        margin-top: 5px; 
        margin-bottom: 5px; 
        padding-left: 0px; 
        padding-right: 0px; 
        padding-top: 0px; 
        padding-bottom: 0px; 
        margin-left: 0px;
        }
.genres_right {
        text-align: left;
        color: black;
        }

.genres_right h3{
        text-align: left; 
        font-family: 'Permanent Marker'; 
        font-size: 20px; 
        font-weight: 800; 
        font-style: italic; 
        margin-top: 5px; 
        margin-bottom: 5px; 
        padding-left: 0px; 
        padding-right: 0px; 
        padding-top: 0px; 
        padding-bottom: 0px; 
        margin-left: 0px;
        }

#header
     {
      /* width:429px; pre-hero width */
      height:300px; /* pre-hero 182px */
      background-image: url(hero_chelan.png); /* pre-hero original url(mixer_banner_2.jpg) */
	  background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      }
.clearall
      {
      clear: both;
      }/*
#navigation ul
      {	font-family: 'Staatliches';	font-size: 20px;	list-style-type: none;	margin: 0;	padding: 0;	overflow: hidden;	border-radius: 20px;      }
#navigation ul li
      {	float: left;	width: 12.5%;	}#navigation li a {	display: block;	color: white;	text-align: center;	padding: 14px 16px;	text-decoration: none;}#navigation li a:hover {	background-color: #111;}.active {	background-color: #111;}#navigation {	margin-left: auto;	margin-right: auto;	width: 60%;}*/
.active {	background-color: #111;}hr    {
      color: #99CCFF;
      height: 1px;
      width: 85%;
      text-align: center;
      }
#search
      {
      position: absolute;
      top: 10px;
      right: 10px;
      }.topnav {	overflow: hidden;	margin-left: auto;	margin-right: auto;	width: 528px;	font-family: 'Staatliches';	font-size: 20px;	background-color: transparent;	border-radius: 0px 0px 0px 20px; float: right; /*float new to support hero. border-radius pre-hero was 20px*/}.topnav a {  float: left;  display: block;  color: white;  text-align: center;  padding: 14px 16px;  text-decoration: none;  font-size: 20px;  width: 100px;  background-color: #B0D4FE;}.topnav .active {	background-color: #111;}.topnav a:hover {  background-color: #111;}.topnav .icon {  display: none;}@media screen and (max-width: 600px) {  #header {/*display: none;*/ height: 150px; /*height new to support hero*/}  .topnav {width: 100%; border-radius: 0px; background-color: #000;}  .topnav a {width: auto;}  .topnav a:not(:first-child) {display: none;}  .topnav a:first-child {display: block; width: auto; padding: 14px 16px; background-color: #111;}  .topnav a.icon {    float: right;    display: block;	background-color: #000;	position: absolute;	right: 0;	top: 0;  }}@media screen and (max-width: 600px) {  .topnav.responsive {position: relative; border-radius: 0px 0px 20px 20px;}  .topnav.responsive .icon {    position: absolute;    right: 0;    top: 0;  }  .topnav.responsive a {    float: none;    display: block;    text-align: left;	}}@media screen and (max-width: 600px) {	.jeremy {    position: absolute;    z-index: 1;    margin-left: auto;    margin-right: auto;    width: 50%;	left: 25%;    top: -3px;    text-align: center;    font-family: 'Pacifico';    font-size: 30px;	color: #fff;}.lastlink {    border-top-right-radius: 0px !important;    border-bottom-right-radius: 0px !important;}}@media screen and (min-width: 600px) {	.jeremy {		display: none;	}	}.fa {	font-size: 20px !important;}.lastlink {    border-top-right-radius: 0px;    border-bottom-right-radius: 0px;} /* pre-hero border radius was 20px for each */#playlist {    background: #6A8EB8;    width: auto;    padding: 20px;	border-radius: 20px;}#audio {    margin-left: auto;    margin-right: auto;    width: 99%;    margin-bottom: 5px;    padding: 5px;	background-color: #6A8EB8;	border-radius: 20px;}#gradient_header {	background-image: linear-gradient(#B0D4FE,#fff);    height: 182px;    position: absolute;    top: 0px;    left: 0px;    width: 100%;    z-index: -1;}@media screen and (max-width: 600px) {#gradient_header {     background-image: linear-gradient(#B0D4FE, #fff);	 height: 100px;	}	}#gradient_footer {	background-image: linear-gradient(#fff, #B0D4FE);    height: 45px;    position: absolute;    top: 0px;    left: 0px;    width: 100%;    z-index: -1;}@media screen and (max-width: 600px) {#gradient_footer {     background-image: linear-gradient(#fff, #B0D4FE);	 height: 60px;	}	}	@media screen and (max-width: 800px) {	.w3c {	display: none;		}}#playlist .active::after {    content: "Now Playing...";    margin-right: 5px;    color: #B0D4FE;    float: right;	-webkit-animation: nowplaying 2s linear infinite alternate;}#playlist .active {    border-radius: 20px;    width: 95%;}#playlist a {    color: white;    background-color: transparent;    padding-left: 10px;	white-space: nowrap;}#playlist a:hover {    text-decoration:underline;    }@keyframes nowplaying {	0% {color: #BADEFF;}	25% {color: #CEF2FF;}	50% {color: #E2FFFF;}	75% {color: #F6FFFF;}	100% {color: #FFFFFF;}}.picture {	margin-left: auto;	margin-right: auto;	width: 100%;	}
#myTopnav > a:before {
      -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}
#myTopnav > a#sounds:hover:before {
      content: "\f001"; /*fa-music */
}
#myTopnav > a#home:hover:before {
      content: "\f015"; /*fa-home */
}
#myTopnav > a#pictures:hover:before {
      content: "\f030"; /*fa-camera */
}
#myTopnav > a#words:hover:before {
      content: "\f56b"; /*fa-feather-alt */
}
-->