html {
  /*background: #f7f7f7 url(http://css-tricks.com/examples/RoundButtons/images/bg.png) repeat center top;*/
  background: #c8d8ed;
}

.floatBox {
    position:fixed;
	z-index: -1;
	top: 80vh;
    bottom:0;       
    left:0;         
	width: 100%;
	position: fixed;
	background-color: rgba(146,146,146,0.25);
	padding: 0.5em;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	border-radius: 1em;
}

.tinyblack {
	bottom: 2vh;
	color: black;
	font-size: 60%;
	position: absolute;
	text-align: right;
}

.puzzleName {
	position:absolute;
	font: bold 5vmin arial, sans-serif;
	left: 5vw;
	bottom: 25vh;	
}

.sponsorLogo {
	position:absolute;
	right: 5vw;
	bottom: 27vh;
    width:auto;
    height:auto;
    max-width:20vh;
}

.patreonsWide {
}

.patreonsNarrow {
}

.patreonsDropIn {
    position:fixed;
	display:none;
	z-index: 10;
	top: 15vh;
    bottom:45vh;       
    left:15vw;         
    right:15vw;         
	position: fixed;
	background-color: rgba(240,240,240,0.9);
	padding: 0.5em;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	border-radius: 1vmin;
}


#sponsor {
	color: green;
}

#supporters {
	color: red;
}

#patreonStuff {
	color: blue;
}

HR {
    border: 50;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	align:"center";
	width:"50%";
}


@media only screen and (orientation: portrait) {
	.floatBox {
		top: 75vh;
		font-size: 150%;
	}	
}

@media only screen and (orientation: landscape) {
}