/* delius-regular - latin */
@font-face {
  font-family: 'Delius';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/delius-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/delius-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/delius-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/delius-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/delius-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/delius-v10-latin-regular.svg#Delius') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-300 - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/merriweather-sans-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/merriweather-sans-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/merriweather-sans-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/merriweather-sans-v14-latin-300.woff') format('woff'), /* Modern Browsers */
       url('./fonts/merriweather-sans-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/merriweather-sans-v14-latin-300.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}
/* merriweather-sans-italic - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: italic;
  font-weight: 300;
  src: url('./fonts/merriweather-v22-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/merriweather-v22-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/merriweather-v22-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/merriweather-v22-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/merriweather-v22-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/merriweather-v22-latin-300italic.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}


* {
	margin:0;
	padding:0;
}

html {
	background:#000;
	/* vis 
	background:#FFF; 
	*/
}

body  {
	font-family: 'Merriweather Sans', sans-serif;
	font-size:13px;
	line-height:150%;
	background:#000;
	color:#bbb;
	min-width:0;
	min-height:100vh;
	overflow-x:hidden;
	-webkit-box-shadow: inset 0px -50px 300px 100px black;
	-moz-box-shadow: inset 0px -50px 300px 100px black;
	box-shadow: inset 0px -50px 300px 100px black;
	/* vis 
	-webkit-filter: invert(100%);
	filter: invert(100%);
	*/
}

input {
font-family: 'Merriweather Sans', sans-serif;
}

.grecaptcha-badge { 
    visibility: hidden;
    z-index:999;
}

/* OVERALL FIXED STRUCTURE */

#onTop {
	padding:5px 30px;
	color: #ddd;
	text-align:center;
	font-style:italic;
	border-bottom: solid 1px rgba(128,128,128,0.5);
}

#container { 
	color:#d8d8d8;
}

#topHamburger{
	position: fixed;
	left:12px;
	top:12px;
	width:24px;
	height:24px;
	background-image: url("/Pix/Menu/myNoiseBurger.png");
	background-size: contain;
	background-repeat:no-repeat;
	z-index: 19;
	border: solid 0px #800;
	cursor:pointer;
	opacity:0.7;
}

#topHamburger:hover{
opacity:1;
}


#topMenu{
	position: fixed;
	width:90%;
	min-width:300px;
	max-width:600px;
	max-height:100%;
	border: solid 1px #333;
	left:10px;
	top:10px;
	z-index: 20;
	text-align:center;
	margin: 0px;
	padding:10px 10px;
	border: solid 1px #555;
	-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
	-webkit-box-shadow: 20px 20px 50px 10px rgba(0,0,0,1);
	-moz-box-shadow: 20px 20px 50px 10px rgba(0,0,0,1);
	box-shadow: 20px 20px 50px 10px rgba(0,0,0,1);
    background-color: #080808;
    display:none;
    overflow-y:auto;
    overflow-x:hidden;
}


#onTop ~ #topMenu {
    /* Push them down if the (also fixed) onTop message exists. */
    top: 40px;
}

#onTop ~ #topHamburger {
    /* Push them down if the (also fixed) onTop message exists. */
    top: 50px;
}

.menuItem, .menuItemBig, .menuItemMedium, .menuItemSmall, .menuItemFloat{
	position:  relative;
	display: block;
	float:left;
	margin:0.5%;
}

.menuItem{
	width:49%;
}

.menuItemBig{
	width:99%;
	text-align:center;
}

.menuItemSmall{
	width:24%;
}

.menuItemMedium{
	width:32.33%;
}

.currMenuItem {
	color:#EEE;
}

.menuIcon {
	margin:0px 7px 2px 7px;
	height:15px;
	opacity:0.6;
	display: inline;
}

.menuNavIcon {
	margin:0 6px 0 0;
	height:20px;
	display: inline;
	opacity:0.7;
	cursor:pointer;
}

.menuNavIcon:hover {
	opacity:1;
}

.menuDivider{
	position:  relative;
	display: block;
	float:left;
	text-align:left;
	border-bottom:1px solid #333;
	width:100%;
	margin:10px 0.5%;
	font-size:13px;
	color:#555;
}

.menutext{
	position:  relative;
	display: block;
	float:left;
	text-align:left;
	width:96%;
	margin:0px 0.5%;
	color:#888;
}

#lilBoxR,#lilBoxL{
	position: absolute;
	width:300px;
	height:370px;
	border: solid 0px #00F;
}
	#lilBoxR{right:0px;}
	#lilBoxL{left:0px;}

.mynoiseTitle {
	position: relative;
	left: 0;
	width:80%;
	margin: 0px auto;
	padding-top:15px;
	border: solid 0px #444;
	text-align:center;
	z-index:3;
}

.noiseTitle {
	position: relative;
	left: 0;
	padding-top:32px;
	margin: 0px auto;
	width:100%;
	border: solid 0px #444;
	text-align:center;
	z-index:4;
}

.player {
	position: absolute;
	left:50%;
	width:716px;
	height:325px;
	margin:5px 0 0 -360px;
	padding-top:0px;
	z-index:3;
	text-align:center;
	border: solid 0px rgba(255,255,255,0.06);
	-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 5px 30px 5px rgba(0,0,0,1);
	-moz-box-shadow: 0px 5px 30px 5px rgba(0,0,0,1);
     box-shadow: 0px 5px 30px 5px rgba(0,0,0,1);
     background-color:rgba(0,0,0,0.3);
}

.calGrid {
	position: absolute;
	left:-1px;
	top:110px;
	width:100%;
	border: solid 0px #444;
	text-align:center;
	z-index:0;
}

.contextPlay {
	position: absolute;
	left:0px;
	top:120px;
	width:100%;
	border: solid 0px #444;
	text-align:center;
	z-index:2;
	display: none;
	cursor:pointer;
}

div.btn {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 28px;
    height:28px;
    margin:0 3px;
}

div.btnOS {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 26px;
    height:26px;
    margin:0 1px;
}

.btnImg{
	height:100%;
	width:100%;
	cursor:pointer;
	-webkit-transition:opacity 100ms linear;
	-moz-transition:opacity 100ms linear;
	-o-transition:opacity 100ms linear;
	-ms-transition:opacity 100ms linear;
	transition:opacity 100ms linear;
	opacity:0.6;
	padding:4px;
	border-width: 2px;
	border-radius: 16px;
	border-style: solid;
	border-color: #AAA;
	vertical-align:middle;
	background:#444;
}

.btnImg:hover{
	opacity:1;
}

.btnImg:active{
	background:#888;
}

.active{
	border-color:#DDD;
	background:#E60;
	opacity:0.9;
}

.disabled{
	opacity:0.2;
}

.inaudible{
	border-style: dotted;
}

.btnInput{
	font-family: 'Merriweather Sans', sans-serif;
	border: none;
	margin-top:4px;
	font-size:13px;
	color:#AAA;
	background: transparent;
	text-align: center;
}

.menu {
	position: fixed;
	bottom:20px;
	background-color: rgba(16,16,16,0.9);
	border: solid 1px rgba(255,255,255,0.5);
	text-align:center;
	padding:5px 5px 3px 5px;
	width:450px;
	max-width: calc(100% - 40px);
	left:50%;
	clear:both;
	font-size:14px;
	z-index:5;
	-webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -webkit-box-shadow: 0px 0px 30px 10px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 30px 10px rgba(0,0,0,1);
     box-shadow: 0px 0px 30px 10px rgba(0,0,0,1);
     -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.menu #active a {
	color:#FFF;
}

.menu #active a:hover {
	text-decoration:none;
}

.allContent {
	position: absolute;
	padding-top:345px;
	left:50%;
	width:720.1px;
	margin:0 0 0 -360px;
	z-index:2;
	border: solid 0px #0FF;
}

.allContentJustBelowTitle {
	padding-top:120px;
	position: relative;
	margin:0 auto 0 auto;
	width:720px;
	z-index:2;
	border: solid 0px #333;
}

.allContentMini {
	position: relative;
	z-index:2;
	width:500px;
	margin:10px auto 0 auto;
}

/* SUBPARTS */

.bigTitle {
	color:#F80;
	font-size:28px;
	padding:0;
	letter-spacing:1px;
}

span.grey { color:#444;}

span.smaller {font-size:22px;}

span.tm {
	margin-left:2px;
	font-size:11px;
	vertical-align:super;
}

span.titlesmall {
	font-size:13px;
	color:#888;
}

.subTitle {
	padding-top:10px;
	color:#555;
	color:rgba(255,255,255,0.3);
	letter-spacing:1px;
}

.radioTitle {
	margin:20px 0px 40px 0px;
	font-size:36px;
	letter-spacing:4px;
	color:#CCC;
	text-shadow: 3px 3px 8px #000;
}

.oneCol {
    width: 100%;
    float: left;
}

.col1 {
    width: 100%;
    float: left;
}

.col2 {
    width: 100%;
    float: left;
}

.colA {
    width: 100%;
    float: left;
}

.colB {
    width: 100%;
    float: left;
    margin: 0px 0px;
}

.colC {
    width: 100%;
    float: left;
}

.content {
	text-align:left;
	margin: 0px 0px 10px 0px;
	padding:10px 20px;
	border: solid 1px rgba(255,255,255,0.2);
	-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 60px 0px black;
	-moz-box-shadow: 0px 0px 60px 0px black;
     box-shadow: 0px 0px 60px 0px black;
     background-color: rgba(0,0,0,0.5);
}

.date {
	margin-top:8px;
	text-align:right;
	color:#777;
	font-style: italic;
}
.fancy {
	border: solid 1px rgba(255,255,255,0.4);
}

.plain {
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
    box-shadow: none;
	border: solid 1px rgba(0,0,0,0.3);
	background-color: rgba(0,0,0,0.4);
	opacity:1;
}

.tiny {
	font-size:12px;
	line-height:12px;
}

.shrunk { padding:0px 20px; }

.contentYT {
	margin: 0px 0px 10px 0px;
	padding:0px;
	border: solid 0px #000;
}

.contentText {
	text-align:left;
	margin: 0px 0px 10px 0px;
	padding:10px 20px;
	border: solid 1px rgba(255,255,255,0.2);
	-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 60px 0px black;
	-moz-box-shadow: 0px 0px 60px 0px black;
     box-shadow: 0px 0px 60px 0px black;
     background-color: rgba(0,0,0,0.45);
}

.fullContent {
	color: #ccc;
	position: relative;
	width:500px;
	padding:30px 20px;
	margin:0 0 40px 0;
	border: solid 1px rgba(255,255,255,0.2);
	-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
} 

.social {
	margin: 10px 10px 20px 10px;
	padding:0px 0px 0px 20px;
	border: solid 1px rgba(255,255,255,0.2);
	-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.bgcontainer {
    position: absolute;
    width:100%;
    height:600px;
	overflow:hidden;
}

#bgimage, #bgimageRadio{
    position: absolute;
    left: 0;
    margin-left: 0;
    width: 100%;
    height:600px;
    background-position: center;
    background-size: cover;
	/* Forcing GPU for blur*/
	transform: translateZ(0);
	opacity:1;
	filter: blur(40px);
}

.animated {
  	animation-name: bgblur;
  	animation-duration: 15s;
  	animation-timing-function: linear;
  	animation-fill-mode: forwards;
}

/* The animation code */
@keyframes bgblur {
  0% 	{ filter: blur(40px); opacity:1;}
  10% 	{ filter: blur(40px);opacity:0.6;}
  100% 	{ filter: blur(2px); opacity:0.7;}
}

#bgimage{ box-shadow: inset 0 -200px 100px 0px black;}
#bgimageRadio{ box-shadow: inset 0 -175px 150px 115px black; }

.mixer{
	border: solid 0px blue;
    position:absolute;
    border: solid 0px #444;
    left: 50%;
    top: 95px;
    width: 302px;
    margin-left: -151px;
	z-index:0;
}

.controlers{
	border: solid 0px #444;
    position:absolute;
    left: 50%;
    top: 240px;
    width: 500px;
    margin-left: -250px;
    text-align:center;
	font-size:10px;
	line-height:12px;
	z-index:1;
}

.controlersRadio{
	position:absolute;
    top:15px;
    right:10%;
	font-size:10px;
	line-height:12px;
}

.radioMsg {
	position:absolute;
	top:45px;
	right:10%;
	color:#888;
	text-align:center;
}

.radioTag{
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	margin-top:32vh;
	text-align:center;
	font-size:5vw;
	letter-spacing:1vw;
	line-height:15vh;
	color:#FFF;
	opacity:0.8;
	text-shadow: 0px 0px 5px #000;
}

.radioWarning{
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	margin-top:47vh;
	padding:0px 50px;
	text-align:center;
	font-size:14px;
	color:#ddd;
	opacity:1;
	text-shadow: 0px 0px 20px #000;
	z-index:999;
}

.radioCaroussel{
	position: absolute;
	bottom:18vh;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	margin-top:0px;
	border: solid 0px #CCC;
	text-align:center;
	opacity:0.6;
}

img.radio{
	width:9%;
	padding:0px;
	margin:1%;
	border: solid 1px #CCC;
	-webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.4);
	opacity:0;
}

.radioFooter {
	position:absolute;
	width:100%;
	bottom:10px;
	color:#444;
	text-align:center;
}

#radioTouch{
	position:fixed;
	width:33%;
	height:33%;
	top:35%;
	bottom:0;
	left: 16%;
	right: 0;
	margin: auto;
	background-image: url("/Pix/play.png");
	background-size: 50%;
	background-repeat: no-repeat;
	display:none;
	cursor:pointer;
}

.msg {
	position: relative;
	z-index:3;
	color:#ccc;
	text-align:center;
	margin-top:285px;
	border: solid 0px #444;
}

.testimonials{
	border: solid 0px #00F;
	margin-top:99px;
	padding:0px 110px;
	height:0;
}

.tleft {
	position:relative;
  	top: 50%;
  	transform: translateY(-50%);
  	-ms-transform:  translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	width: 300px;
    float: left;
	text-align: center; 
  	color:#ccc;
  	border: solid 0px #800;
  	text-shadow: 2px 2px 4px #000;
  	font-size:13px;
}

.tright {
	position:relative;
  	top: 50%;
  	transform: translateY(-50%);
  	-ms-transform:  translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	width: 100px;
    float: right;
	text-align: center; 
  	color:#ddd;
  	border: solid 0px #080;
}

.tcenter {
	position:relative;
  	top: 50%;
  	transform: translateY(-50%);
  	-ms-transform:  translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	margin:0 auto;
  	padding:0 10px;
  	width: 420px;
  	color:#ddd;
  	border: solid 0px #080;
}

.testimonialImg {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border: 1px solid #555;
  border-radius: 50%;
  padding:2px;
}

.testimonialImg:hover {
	border:solid #aaa 1px;
}

.suggestImg {
	margin:7px 3px 0px 3px;
	width:58px;
	border:solid #555 1px;
	padding:2px;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.suggestImg:hover {
	border:solid #aaa 1px;
}

.easyImg {
	margin:0 3px;
	width:75px;
	border:solid #555 1px;
	padding:2px;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.easyImg:hover {
	border:solid #aaa 1px;
}

.donateImg {
	float:left; 
	margin:3px 20px 0px 15px;
	width:20px;
}

.donateButtonBlue,.donateButtonOrange{
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    padding: 5px 0px;
    margin:5px 10px 5px 0px;
    border-radius: 8px;
    font-size:13px;
    font-weight:bold;
    text-decoration: none;
    line-height: 100%;
}

.donateButtonBlue{
    border: 2px solid #048;
    background: #048;
    color: #FFF;
}

.donateButtonOrange {
    border: 2px solid #D60;
    background: #D60;
    color: #000;
}


.donateButtonBlue:hover,
.donateButtonBlue:focus {
    border: 2px solid #CCC;
    text-decoration: none;
    color: #FFF;
    background: #048;
}

.donateButtonOrange:hover,
.donateButtonOrange:focus {
    border: 2px solid #CCC;
    text-decoration: none;
    color: #000;
    background: #D60;
}

.price {
	font-size:10px;
	font-weight:normal;
}

div.donateButton {
	width:150px;
}


/* GENERAL */

h1 {
	font-size:17px;
	color:#ddd;
	font-weight: normal;
	padding:10px 0px 5px 0px;
	line-height: 150%;
}

h2 {
	font-size:15px;
	color:#ddd;
	font-weight: normal;
	padding:10px 0px 0px 0px;
}

a {
	color:#F80;
	text-decoration:none;
	border:none;
	padding:0 2px;
}

a:hover {
	background-color: #F80;
  	color: #000;
  	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

a.bigger {
	font-size:16px;
}

a.blue {
	color:#08F;
	font-size:13px;
}

a.blue:hover {
	color:#000;
  	background-color: #08F;
  	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

a.button{
	padding:3px;
	text-decoration:none;
	background-color: #222;
	border: 1px solid #000;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

a.button:hover{
	background-color: #F80;
  	color: #000 !important;
}

a.nostyle{
	padding:0px;
	text-decoration:none;
	background-color: #000;
}

a.nostyle:hover{
	padding:0px;
	background-color: #000;
}

p {
	padding:10px 0px;
}

hr {
	margin:0px 20px 0px 20px;
	display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #444;
}

img {
	vertical-align:middle;
	border:none;
}

img.lock {
	vertical-align:text-top;
	border:none;
}

img.ss {
	float:left; 
	width:100%;
	border:solid #DDD 1px;
	margin-bottom:5px;
}

figcaption {
	text-align:right;
	color:#777;
	font-style:italic;
	line-height:15px;
}

figure {
	margin:10px 0px 10px 0px;
	width:100%;
}

img.blog {
	float:left; 
	margin:7px 20px 10px 0px;
	width:450px;
	border:solid #DDD 1px;
	padding:3px;
}

img.blogMini {
	float:left; 
	margin:7px 20px 10px 0px;
	width:120px;
	border:solid #DDD 1px;
	padding:3px;
}

img.blogIcon {
	float:left; 
	margin:7px 20px 10px 0px;
	width:48px;
	border:solid #DDD 0px;
	padding:3px;
}

img.blogLong {
	float:left; 
	margin:7px 20px 10px 0px;
	width:200px;
	border:solid #DDD 1px;
	padding:3px;
}

img.blogVert {
	float:left; 
	margin:7px 20px 10px 0px;
	width:270px;
	border:solid #DDD 1px;
	padding:3px;
}

img.blogVertRight {
	float:right; 
	margin:7px 0px 10px 20px;
	width:270px;
	border:solid #DDD 1px;
	padding:3px;
}

img.sectionIcon {
	float:left; 
	margin:5px 20px 10px 0px;
	width:32px;
	border:solid #DDD 0px;
	padding:3px;
	opacity:0.85;
}

img.amazonLeft {
	float:left; 
	margin:0px 20px 10px 0px;
	height:100px;
	border:solid #F60 1px;
	padding:3px;
}

img.amazonRight {
	float:right; 
	margin:0px 0px 10px 20px;
	height:100px;
	border:solid #F60 1px;
	padding:3px;
}

img.ugLeft {
	float:left; 
	margin:0px 20px 10px 0px;
	width:320px;
	border:solid #09C 1px;
	padding:5px;
}

img.ugRight {
	float:right; 
	margin:0px 0px 10px 20px;
	width:320px;
	border:solid #D80 1px;
	padding:5px;
}

img.ugSingle {
	float:left; 
	margin:0px 20px 10px 0px;
	width:320px;
	border:solid #AAA 1px;
	padding:5px;
}

img.over {
	opacity:0.85;
	cursor:pointer;
}

img.over:hover {
	opacity:1;
}

img.album {
	margin:5px 1%;
	width:100px;
	height:100px;
	border:solid rgba(255,255,255,0.5) 1px;
	padding:0px;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
     box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);
     cursor:pointer;
}

img.album:hover {
	border:solid rgba(255,255,255,0.8) 1px;
}

img.albumLeft {
	float:left; 
	margin:15px 20px 10px 0px;
	width:90px;
	height:90px;
	border:solid rgba(255,255,255,0.6) 1px;
	padding:7px;
}

img.albumLeft:hover {
	border:solid rgba(255,255,255,0.8) 1px;
}

img.albumLeftSmall {
	float:left; 
	margin:0px 20px 0px 0px;
	width:90px;
	border:solid #AAA 1px;
	padding:0px;
}

img.albumLeftSmall:hover {
	border:solid #EEE 1px;
}

form {
	margin:0px 0 0px 0;
}

/* OTHERS */

.logout,.az {
	font-size:13px;
	color:#777;
	cursor:pointer;
}

span.actionlink {
	color:#08F;
	text-decoration:none;
    cursor:pointer;
	padding:0 2px;
	  -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

span.actionlink:hover {
	background-color: #08F;
  	color: #000;
}

span.reportlink {
	color:#444;
	text-decoration:none;
    cursor:pointer;
}

span.white {
	color:#fff;
}

.clearedL {
	text-align:right;
	clear:left;
	color:#D80;
	font-family:"Special Elite", sans-serif;
	font-size:14px;
}

.clearedR {
	text-align:left;
	clear:right;
	color:#09C;
	font-family:"Special Elite", sans-serif;
	font-size:14px;
}

#footer {
	clear:both;
	width:100%;
	text-align:center;
	padding:0 0 70px 0;
} 

#searchTxt {
	padding: 0px 3px;
	width:100px;
	background:#444;
	color:#ccc;
	border: solid 0px #777;
	font-size:13px;
	font-family: 'Merriweather Sans', sans-serif;
}

#searchInfo {
	color:#0C5;
}

.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.iANI,.iBLO,.iCAL,.iCOM,.iEER,.iELE,.iUFV,.iHAP,.iHEA,.iSearch,.iMAN,.iMEC,.iMED,.iMUS,.iNAT,.iPHO,.iQUI,.iTON,.iVOC,.iWAT {
	margin:0px 1px 2px 1px;
	height:12px;
	opacity:0.6;
}

.iANI:hover,.iBLO:hover,.iCAL:hover,.iCOM:hover,.iEER:hover,.iELE:hover,.iUFV:hover,.iHAP:hover,.iHEA:hover,.iSearch:hover,.iMAN:hover,.iMEC:hover,.iMED:hover,.iMUS:hover,.iNAT:hover,.iPHO:hover,.iQUI:hover,.iTON:hover,.iVOC:hover,.iWAT:hover  {
	opacity:1;
}

.iFV{
	display:none;
	margin:0px 1px 2px 1px;
	height:12px;
	opacity:0.7;
}

.iFV:hover{
	opacity:1;
}


.cFV{
	margin:0px 1px 3px 1px;
	height:10px;
}

.highlightDimmed{
	opacity:0.2;
}

.highlightGreen{
	color:"#0B4";
}

/* OVERLAYS */

.Lslide{
    position:absolute;
    left: -225px;
    text-align: right;
    width: 270px;
    height: 35px;
	border: solid 0px #000;
    z-index:4;
    transition-property:all;
	transition-duration:0.5s;
	/* Safari */
	-webkit-transition-property:all;
	-webkit-transition-duration:0.75s;
}

.Lslide:hover{
    left: 0px;
    background-color: #222;
    border: solid 0px #222;
	background-color: rgba(0,0,0,0.9);
	-webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
}

.Rslide{
    position:absolute;
    right: -225px;
    text-align: right;
    width: 270px;
    height: 35px;
	border: solid 0px #000;
    z-index:4;
    transition-property:all;
	transition-duration:0.5s;
	/* Safari */
	-webkit-transition-property:all;
	-webkit-transition-duration:0.75s;
}

.Rslide:hover{
    right: 0px;
    background-color: #222;
    border: solid 0px #222;
	background-color: rgba(0,0,0,0.9);
	-webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
}

.zeroRight{right: 0px;}
.zero{top:8px;}
.one{top:10px;}
.two{top:45px;}
.three{top:80px;}
.four{top:115px;}
.five{top:150px;}
.six{top:185px;}
.seven{top:220px;}
.eight{top:255px;}


.Lslide.long{
    top:150px;
    height: 282px;
}

.LslideText{
	text-align: right;
	border: solid 0px #ccc;
	margin :5px 45px 5px 5px;
	font-size:12px;
	line-height:110%;
}

.RslideText{
	text-align: lrft;
	border: solid 0px #ccc;
	margin :5px 5px 5px 45px;
	font-size:12px;
	line-height:110%;
}

.LslideImg{
	float: right;
	margin-top :5px;
}

.LfixedImg{
	padding-top:5px;
	position:absolute;
	margin-left:13px;
	z-index:5;
}

.RslideImg{
	float: left;
	margin-top :5px;
}

.handwriting{
	font-family:Delius, sans-serif;
	color:#aaa;
	line-height:130%;
	font-size:14px;
}

.hand{
	color:#aaa;
	font-family:Delius, sans-serif;
	letter-spacing:0px;
	padding-right:10px;
	font-size:14px;
}

.onBlack{
	background-color: #222;
	background-color: rgba(0,32,32,0.5);
}

.menubar{
	text-align:right;
	border-bottom:1px solid rgba(255,255,255,0.2);
	padding:0px 0px 3px 0px;
	margin:0px;
}

.highlight{ color:#E8E8E8;}
.highlightold{ color:#0AD;}
.lowlight{ color:#777; }

.orange{ color:#F80; }
.blue{ color:#08F; }
.red{ color:#F00; }
.carbon{ color:#7b3;}
.bright{ color:#fff;}

.playOff{ color:#444; }
.playOn{ color:#EEE; }

.scroll-pane{
	height: 400px;
	overflow: auto;
	padding:0px 15px 0px 0px;
	text-align:left;
	outline: none;
}

table.license{
	width:100%;
	border: 0px solid #ccc;
	border-collapse:collapse;
}

table.license td {
    border: 1px solid #333;
    background-color: #222;
    padding:5px 10px 5px 10px;
    text-align:center;
}

table.keyb{
	width:100%;
	border: 1px solid #ccc;
	border-collapse:collapse;
}

table.keyb td {
    border: 1px solid #333;
    background-color: #222;
    padding:5px 10px 5px 10px;
    text-align:left;
}

table.superGen{
	border-collapse:collapse;
}

table.superGen td {
    border: 1px solid #333;
    background-color: #000;
    padding:0px;
    line-height: 0%;
}

table.suggestions{
    border-collapse:collapse;
}

table.suggestions td.img{
    width: 10%;
    text-align: left;
    vertical-align:top;
}

table.suggestions td.descr{
    width: 38%;
    padding: 0 4% 0 2%;
    text-align: left;
    vertical-align:top;
}
table.suggestions td.descr2{
    width: 34%;
    padding: 0 0px 0 2%;
    text-align: left;
    vertical-align:top;
}

textarea{
	padding:2px 5px;
	font-family:Delius, sans-serif;
	font-size:14px;
	border: solid 1px rgba(128,128,128,0.10);
	background-color: #222;
	color: #6af;
	resize: none;
	vertical-align:text-bottom;
	opacity:0.8;
}

.fullwidth{ width:100%; }

.submitLink {
	background-color: transparent;
	color:#F80;
	text-decoration:none;
	border: none;
	cursor: pointer;
	font-family: 'Merriweather Sans', sans-serif;
	font-size:13px;
}

.submitLink:hover {
	text-decoration:underline;
}

iframe.superGen {
	width:498px;
	height:340px;
	overflow:hidden;
    border-style: none;
}

iframe.masterlist {
	background-color: #1c1c1c;
	margin-top: 10px;
	position: relative;
    width: 100%;
    height:600px;
    z-index: 999;
    border: solid 1px rgba(128,128,128,0.7);
	-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
  
.ytcontent {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

iframe.ytvideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

iframe.preview {
    width: 100%;
    height:500px;
}

blockquote {
	padding: 0px 10px 0px 20px;
	margin: 10px;
	border-left: 1px solid #555;
	color: #aaa;
	font-family:"Delius", sans-serif;
	font-size:14px;
	line-height:130%;
}

#paymentOverlay {
  display:none;
  position: fixed;
  height: 100%;
  width: 100%;
  padding:10px 20px;
  z-index: 999999999;
  color:#0FF;
  background-color: rgba(32,32,32,0.9);
}

ul.map {
    padding: 0 0 0 20px;
}

/* -----------------------
Mobile styles
------------------------*/

@media all and (max-width: 720px)
{

.hide{ display:none; }

.allContent {
	width:90%;
	margin:0 0 0 -45%;
}

.allContentFeedback {
	top:380px;
	width:90%;
	margin:0 0 0 -45%;
}

.allContentJustBelowTitle {
	width:90%;
	margin:0 0 0 5%;
}

.player {
	border: 0px;
	-webkit-box-shadow:  none;
	-moz-box-shadow:  none;
    box-shadow:  none;
    background:none;
}

.testimonials{
	padding:0px 150px;
}



#footer {
	padding-bottom:60px;
} 

}

@media all and (max-width: 540px) {
  table.license tr {
    border: 1px solid #333;
  }

  table.license tr.lowlight {
    display: none;
  }

  table.license td {
    border: none;
    display: block;
    padding: 1px 10px;
    text-align: left;
  }

  table.license td:first-child {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  table.license td:last-child {
    padding-bottom: 5px;
  }

  table.license td:nth-child(4):before {
    content: 'Contributions: ';
  }
}

@media all and (max-width: 480px) {
.tleft {
	display:none;
	width: 0px;
}
.tright {
  	width: 100%;
}
.testimonials{
	padding:0px 0px;
}
.tcenter {
  	width: 320px;
}
.easyImg {
	width:40px;
}

.easyImg:hover {
	width:38px;
}

.menu {
	font-size:13px;
	}
}

@media all and (max-height: 375px) {
    .radioWarning{visibility: hidden;}
    .menu{visibility: hidden;}
}


/*  Liquid theme CSS add-on for mynoise.net
    Written by Thomas Weiler in May/June 2018
*/

* {
  /* This changes the box-model so width includes padding and border instead of padding and border being added to width (makes layout way easier) */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

h1 {
  /* Makes too long text that can't word-wrap into the next line get cut off with "..." instead of overflowing its container */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.bigTitle  {
  /* Just a bit to keep it away from the phone display edge */
  padding-left: 20px;
  padding-right: 20px;
  /* Keep long titles from word-wrapping into themselves because of too small line height */
  line-height: 1em;
}

#onTop {
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  background: #000;
}

@media all and (min-width: 481px) {
  #onTop {
    position: fixed;
  }
}

@media all and (min-width: 481px) {
  #onTop ~ .mynoiseTitle, #onTop ~ .noiseTitle {
    /* If the fixed onTop message is displayed, push this further down */
    padding-top: 40px;
  }
}

.noiseTitle {
  margin-top: 0;
}

@media all and (min-width: 721px) {
  .noiseTitle {
    position: absolute;
  }
}

.bgcontainer {
  top: 0;
}

.player, .allContent {
  /* This is mainly rules for resetting container rules from the absolutely positioned base layout */
  position: relative;
  left: 0;
  margin: 0 auto;
  padding-top: 0;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  min-width: 0;
  height: auto;
}

.player {
  /* Defining free space from the viewport edges. Some of the rules for these .player and .allContent containers might be obsolete now or could be combined with other rules, because they were amongst the first rules written. */
  padding-left: 20px;
  padding-right: 20px;
}

@media all and (min-width: 721px) {
  .player {
    padding-left: 50px;
    padding-right: 50px;
  }
}

.player > .fixedArea > .fixedArea {
  position: relative;
  top: 20px;
  left: 0;
  width: 100%;
  height: 100%;
}

@media all and (min-width: 481px) {
  .player > .fixedArea > .fixedArea {
    top: 0;
  }
}

.allContent {
  position: relative;
  display: block;
  padding-top: 20px;
}

@media all and (min-width: 721px) {
  .allContent {
    /* Using flex layout allows the browser to distribute space according to more flexible rules and keeps whitespace in the source code from interfering with the layout. */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 10px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .allContent > .content .shrunk {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
}

.content, .contentYT {
  width: 100%;
}

@media all and (min-width: 721px) {
  .player {
    padding-top: 20px;
    padding-bottom: 20px;
  }
    .noiseTitle ~ .player {
    padding-top: 100px;
  }
  
  #lilBoxL, #lilBoxR {
    /* This is both a technical and a usability fix: Make the side menus available without having to scroll up. */
    position: fixed;
    top: 0;
    z-index: 20;
    /* Since the overflow is visible, this can be 0 so the menu doesn't cover and block any links in the page */
    width: 0;
    overflow: visible;
}

#onTop ~ #lilBoxL, #onTop ~ #lilBoxR {
    /* Push them down if the (also fixed) onTop message exists. */
    top: 30px;
}

.Lslide, .Rslide {
    z-index: 2;
}

.Lslide:hover, .Rslide:hover {
    z-index: 1;
}

.Lslide:hover::before, .Rslide:hover::before {
    /*  This creates a CSS pseudo-element that is larger than the slide it's in, thereby increasing the hoverable area for that slide and removing some frustration with the menu.
            The z-indices above keep the pseudo-element from covering other menu slides, so you can still easily switch between them.
         */
    position: absolute;
    top: -35px;
    bottom: -35px;
    left: -20px;
    right: -20px;
    z-index: 1;
    display: block;
    content: '';
  }
  .LslideImg, .LslideText, .RslideImg, .RslideText {
    position: relative;
    z-index: 2;
  }
  .player, .allContent {
    /* The centerpiece of the layout: Give all the containers a flexible width that caps at a reasonable size */
    padding-left: 0;
    padding-right: 0;
    /* 1vw = 1% of the viewport width */
    width: 80vw;
    min-width: 600px;
    max-width: 1800px;
  }
  .narrow .player, .narrow .allContent {
    /* Fallback for pages that should still be a little smaller for readability's sake. */
    max-width: 1000px;
}
}

@media all and (min-width: 721px) {
  /* This was some of the first code written for this theme. Some of these rules might be obsolete or redundant now. */
    .colA, .colB, .colC {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0 5px;
        width: 33.33%;
    /* Any non-IE browser would be fine with "flex: 1 1 33.33%" and no width rule as well. */
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .colA {
    /* This margin creates space for the padding to "slip" into. */
        margin-left: -5px;
    }

    .colC {
        margin-right: -5px;
        width: 33.34%;
    }
  /* 2-column layout */
    .col1, .col2 {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0 5px;
    }

    .col1 {
        margin-left: -5px;
        width: 50%;
        max-width:300px;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .col1 .content .shrunk::after {
    /* The content of this container requires floating, so the container needs this pseudo-element in order to get the correct height. */
        display: table;
        float: none;
        clear: both;
        content: '';
    }

    .col2 {
        margin-right: -5px;
        width: 50%;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .oneCol {
        width: 100%;
        float: none;
    }
}

.mixer {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto 10px;
    width: 100%;
    max-width: 300px;
    height: auto;
  /* Font size 0 nullifies source code whitespace affecting the layout. */
    font-size: 0;
    line-height: 0;
}

.mixer .ui-slider, .mixer .ui-slider-handle {
  /*  Here I do not want to use border-box because all the sizes in the base CSS are given with !important and I'd have to redefine everything with !important as well. Resetting to the default content-box has no bad consequences here. */
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.mixer #s0, .mixer #s1, .mixer #s2, .mixer #s3, .mixer #s4, .mixer #s5, .mixer #s6, .mixer #s7, .mixer #s8, .mixer #s9 {
  /* Flex layout is problematic here because these sliders have margins, a combination which Internet Explorer can't handle properly. Thus this is done via inline-block, which makes the font-size hack above necessary. */
    display: inline-block;
    float: none;
    clear: both;
}

.calGrid {
    top: auto;
    bottom: 84px;
}

@media all and (max-width: 480px) {
    .calGrid {
        display: none;
    }
}

@media all and (min-width: 721px) {
    .calGrid {
        bottom: 103px;
    }
}

.contextPlay {
    top: auto;
    bottom: 103px;
}

.controlers {
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    width: auto;
}

.controlers .btn {
    margin-bottom: 6px;
}

.controlers .btnImg {
    width: 100%;
    height: 100%;
}

.msg {
    margin-top: 12px;
    min-height: 20px;
}

/* Testimonials */
.testimonials {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  /* Stretch child elements on the X axis to fill available space... */
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
  /* ... and center them on the Y axis. */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.tleft, .tright {
    top: 0;
    width: auto;
    -webkit-transform: none;
    transform: none;
    float: none;
}

.tleft {
  /* First 1 means it can grow if there's more space, second 1 means it can shrink if there's less space, auto is more or less like width. */
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0 5vw;
}

.tright {
  /* 0 and 0 mean it can't grow or shrink, it has to stay at 100px. */
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100px;
          flex: 0 0 100px;
  padding: 0;
  line-height: 1.4em;
}

.tcenter {
  top: 0;
  width: 100%;
  max-width: 600px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-transform: none;
          transform: none;
}


.tleft .handwriting, .tright .handwriting {
  float: none;
  display: inline-block;
}

@media all and (max-width: 480px) {
  .testimonials {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .tleft {
    padding: 0;
    width: 100%;
  }
  .tright {
    width: 100%;
  }
}

@media all and (min-width: 481px) {
  .tright {
    padding: 0 5vw 0 0;
  }
}

.generator-list p {
	column-width:200px;
	column-count: auto;
}

.generator-list p > span {
  /* Generator links are laid out as blocks so they can get padding, which keeps them from line-wrapping underneath the favourite star (if wrapping is necessary) */
  position: relative;
  display: block;
  text-align:left;
}

.logged .generator-list p > span {
  /* Here is the gap where the star can sit. */
  padding-left: 20px;
}

.generator-list p > span .iFV {
  /* Here is the star itself. */
  position: absolute;
  top: 3px;
  left: 0;
}

/* Landing page lists */
table.suggestions {
  /* This section mainly cancels the table layout because it stretches the cells that hold images as well, which is unwanted. Some width redefining is necessary because of this. */
  width: 100%;
  font-size: 0;
}

table.suggestions td {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 13px;
}

table.suggestions td.img {
  display: inline-block;
  width: 50px;
}

@media all and (min-width: 481px) {
  table.suggestions td.img {
    width: 85px;
  }
}

table.suggestions td.img ~ td:not(.img):not(.descr):not(.descr2) {
  width: calc(100% - 50px);
}

@media all and (min-width: 481px) {
  table.suggestions td.img ~ td:not(.img):not(.descr):not(.descr2) {
    width: calc(100% - 85px);
  }
}

table.suggestions td.descr, table.suggestions td.descr2 {
  display: inline-block;
  padding: 0 4% 0 2%;
  width: calc(50% - 50px);
  /* Cut too long text with "..." instead of overflowing the container. */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

@media all and (min-width: 481px) {
  table.suggestions td.descr, table.suggestions td.descr2 {
    width: calc(50% - 85px);
  }
}

@media all and (min-width: 721px) {
  table.suggestions td.descr, table.suggestions td.descr2 {
    padding-left: 20px;
  }
}

table.suggestions td.descr ~ .descr, table.suggestions td.descr ~ .descr2, table.suggestions td.descr2 ~ .descr, table.suggestions td.descr2 ~ .descr2 {
  /* This weird-looking selector is necessary because at one point the order of "descr" and "descr2" classes is reversed. */
  padding-right: 0;
}

/* Payment request */
table.payments {
  /* A bit of visually tidying up the payment section. */
  width: 100%;
}

table.payments td {
  display: inline-block;
}

table.payments select {
  width: 100% !important;
}

table.payments #stripeButton, table.payments #paypalButton, table.payments #EUflag, table.payments #bitpayButton {
  margin: 3px 6px 3px 0px;
}

/* Stack & Sequence */
table.license input {
  width: 100%;
}

.scroll-pane p {
  /* This circumvents a bug in JScrollPane where it would sometimes stretch content underneath the vertical scrollbar and then show a horizontal scrollbar as well. */
  width: calc(100% - 10px);
}