/*	UNIVERSAL: Colors	*/
.genre li.sixstr.recorded {
  background-color: #aaffaa;
}
.genre li.sixstr.unrecorded {
  background-color: #cdefaa;
}
.genre li.s7str.recorded {
  background-color: #ffccaa;
}
.genre li.s7str.unrecorded {
  background-color: #ffaaaa;
}
.genre li.t12str.recorded {
  background-color: #aaaaff;
}
.genre li.t12str.unrecorded {
  background-color: #abcdff;
}
span.sixstr_btn {
  background-color: #aaffaa;
}
span.s7str_btn {
  background-color: #ffccaa;
}
span.t12str_btn {
  background-color: #aaaaff;
}

/* my monitor and up	*/
@media all 
  and  (min-device-width: 1281px) {
  	.genre {
	  font-family: 'Cabin', sans-serif;
	  font-size: 1.7em;
	  padding: 0.1em;
	  margin: 0.2em;
	}
	.genre li {
	  font-size: 0.6em;
	  text-decoration: none;
	  display: inline;
	  padding: 0.1em 0.1em 0em 0.2em;
	  margin: 0em 0.1em 0em 0.1em;
	}

	.genre li.original {
	  border: solid 2.1px red;
	  padding: 0em 0.1em 0em 0.2em;
	  margin: 2em 0.1em 0em 0.1em;
	}

	span {
	  border: none;
	  font-size: 0.9em;
	  padding: 0.1em 0em 0em 0em;
	}

	p							{
		font-family: 'Cabin', sans-serif;
		padding: 0em 0.1em 0em 0.2em;
	  	margin: 2em 0.1em 0em 0.1em;
	}
	/*	FOOTER	*/
	.eMail_foot_icon {
	  position: relative;
	  left: 2vw;
	  top:9vh;
	  width: 8vw;
	  height: 8vw;
	  z-index: 43;
	}
	.linkedIn_foot_icon {
	  position: relative;
	  left: 21vw;
	  top: 9vh;
	  width: 8.2vw;
	  height: 8.2vw;
	  z-index: 42;
	}
	.meetup_foot_icon {
	  position: relative;
	  left: 40vw;
	  top: 9vh;
	  width: 9vw;
	  height: 7.5vw;
	  z-index: 41;
	}
	.blog_foot_icon {
	  position: relative;
	  left: 60vw;
	  top: 9vh;
	  width: 9.2vw;
	  height: 9.2vw;
	  z-index: 40;
	}
}
/* my Macbook screen (and iPad Pro)	*/
@media all 
	and  (min-device-width: 801px)
  and  (max-device-width: 1280px) {
  	.genre {
	  font-family: 'Cabin', sans-serif;
	  font-size: 1.9em;
	  padding: 0.1em;
	  margin: 0.2em;
	}
	.genre li {
	  font-size: 0.7em;
	  text-decoration: none;
	  display: inline;
	  padding: 0.1em 0.1em 0em 0.2em;
	  margin: 0em 0.1em 0em 0.1em;
	}
	.genre li.original {
	  border: solid 2.1px red;
	  padding: 0em 0.1em 0em 0.2em;
	  margin: 2em 0.1em 0em 0.1em;
	}

	span {
	  border: none;
	  font-size: 0.9em;
	  padding: 0.1em 0em 0em 0em;
	}
	p							{
		font-family: 'Cabin', sans-serif;
		font-size: 1.4em;
		padding: 0em 0.1em 0em 0.2em;
	  	margin: 2em 0.1em 0em 0.1em;
	}
	/*	FOOTER	*/
	.eMail_foot_icon {
	  position: relative;
	  left: 2vw;
	  top:3vh;
	  width: 8vw;
	  height: 8vw;
	  z-index: 43;
	}
	.linkedIn_foot_icon {
	  position: relative;
	  left: 21vw;
	  top: 3vh;
	  width: 8.2vw;
	  height: 8.2vw;
	  z-index: 42;
	}
	.meetup_foot_icon {
	  position: relative;
	  left: 40vw;
	  top: 3vh;
	  width: 9vw;
	  height: 7.5vw;
	  z-index: 41;
	}
	.blog_foot_icon {
	  position: relative;
	  left: 60vw;
	  top: 3vh;
	  width: 9.2vw;
	  height: 9.2vw;
	  z-index: 40;
	}
  }
  
/* big phones	*/
@media all 
	and  (min-device-width: 480px)
  and  (max-device-width: 800px) {
	.genre {
	  font-family: 'Cabin', sans-serif;
	  font-size: 1.7em;
	  padding: 0.1em;
	  margin: 0.2em;
	}
	.genre li {
	  font-size: 0.77em;
	  text-decoration: none;
	  display: inline;
	  padding: 0.1em 0.1em 0em 0.2em;
	  margin: 0em 0.1em 0em 0.1em;
	}
	.genre li.original {
	  border: solid 2.1px red;
	  padding: 0em 0.1em 0em 0.2em;
	  margin: 2em 0.1em 0em 0.1em;
	}

	span {
	  border: none;
	  font-size: 0.9em;
	  padding: 0.1em 0em 0em 0em;
	}
	p							{
		font-family: 'Cabin', sans-serif;
		padding: 0em 0.1em 0em 0.2em;
	  	margin: 2em 0.1em 0em 0.1em;
	}
/*	FOOTER	*/
	.eMail_foot_icon {
	  position: relative;
	  left: 2vw;
	  top:3vh;
	  width: 8vw;
	  height: 8vw;
	  z-index: 43;
	}
	.linkedIn_foot_icon {
	  position: relative;
	  left: 21vw;
	  top: 3vh;
	  width: 8.2vw;
	  height: 8.2vw;
	  z-index: 42;
	}
	.meetup_foot_icon {
	  position: relative;
	  left: 40vw;
	  top: 3vh;
	  width: 9vw;
	  height: 7.5vw;
	  z-index: 41;
	}
	.blog_foot_icon {
	  position: relative;
	  left: 60vw;
	  top: 3vh;
	  width: 9.2vw;
	  height: 9.2vw;
	  z-index: 40;
	}
}
/* small phones	*/
@media all 
  and  (max-device-width: 479px) {
    .genre {
	  font-family: 'Cabin', sans-serif;
	  font-size: 1.1em;
	  padding: 0.1em;
	  margin: 0.2em;
	}
	.genre li {
	  font-size: 0.77em;
	  text-decoration: none;
	  display: inline;
	  padding: 0.1em 0.1em 0em 0.2em;
	  margin: 0em 0.1em 0em 0.1em;
	}
	.genre li.original {
	  border: solid 2.1px red;
	  padding: 0em 0.1em 0em 0.2em;
	  margin: 2em 0.1em 0em 0.1em;
	}

	span {
	  border: none;
	  font-size: 0.9em;
	  padding: 0.1em 0em 0em 0em;
	}
	p							{
		font-family: 'Cabin', sans-serif;
		padding: 0em 0.1em 0em 0.2em;
	  	margin: 2em 0.1em 0em 0.1em;
	}
	/*	FOOTER	*/
	.eMail_foot_icon {
	  position: relative;
	  left: 2vw;
	  top:3vh;
	  width: 8vw;
	  height: 8vw;
	  z-index: 43;
	}
	.linkedIn_foot_icon {
	  position: relative;
	  left: 21vw;
	  top: 3vh;
	  width: 8.2vw;
	  height: 8.2vw;
	  z-index: 42;
	}
	.meetup_foot_icon {
	  position: relative;
	  left: 40vw;
	  top: 3vh;
	  width: 9vw;
	  height: 7.5vw;
	  z-index: 41;
	}
	.blog_foot_icon {
	  position: relative;
	  left: 60vw;
	  top: 3vh;
	  width: 9.2vw;
	  height: 9.2vw;
	  z-index: 40;
	}
  }