#wrapper {
	position:relative;
	margin:5px auto;
	max-width:850px;
	border:1px solid #aaaaaa;
	background-color: #fefefe;
	min-height:800px;
}
.scaled #wrapper {
	font-size:0.5em !important;
	min-height:400px;
}

#wrapper #pagebanner {
	border:none;
	max-width:850px;
	padding-top:37%;
	background-size: cover;
	background-position: center center;
}
#wrapper #pagetitle {
	position:absolute;
	top:10px;
	right:15px;
	font-size:1.3em;
	font-weight:bold;
	padding:10px;
	color:white;
	background-color:rgba(0,0,0,0.35);
	border-radius: 5px;
	box-shadow: 5px 10px 20px rgba(0,0,0,0.35);
}
#wrapper #pageinset {
	border:5px solid white;
	width:160px;
	height: 160px;
	background-size: cover;
	background-position: center center;
	position:absolute;
	top:170px;
	left:20px;
	box-shadow: 5px 5px 20px #666;
	border-radius: 2px;
}
.scaled #wrapper #pageinset {
	border:2px solid white;
	top:63px;
	left:11px;
	width:50px;
	height:50px;
}

#wrapper #ribbon {
	text-align: right;
	border-bottom:1px solid #aaaaaa;
	padding-left:160px;
}
.scaled #wrapper #ribbon {
	padding-left:40px;
}
.scaled #wrapper a.button,
.scaled #wrapper .button {
	padding:1px 8px;
	width:auto;
	height:auto;
}
#wrapper #maintext {
	padding:30px 60px;
	div, p {
		font-size:1.0em;
		line-height: 1.5em;
	}
}
.scaled #wrapper #maintext {
	padding:10px 20px;
}
.scaled #wrapper #maintext img {
	width:30%;
}

#wrapper .crlink {
	text-align:right;
	padding:8px;
	font-size:.8em;
  text-decoration:none;
  position:absolute;
  bottom:0px;
}
#wrapper .crlink.right {
	right:0px;
}
#wrapper .crlink a,
#wrapper .crlink a:visited {
	color:darkblue;
	text-decoration:none;
}
#wrapper .crlink a:hover {
	color:blue;
	text-decoration: underline;
}

@media only screen and (max-width: 500px) {
	#wrapper #maintext {
		padding: 10px 5px;
		font-size:1.5em;
	}
	#wrapper #pageinset {
		top: 20px;
		width: 120px;
		height: 120px;
	}
	#wrapper #ribbon {
		padding-left:140px;
	}
}