/*
 * The wrapper div is the centered semi-transparent yellow background behind 
 * all the content. First it is set to be a width of 90% of the screen no 
 * matter what size the screen is. Then it is set to be a maximum of 1000 
 * pixels wide, in case the screen is wide. This will center it with room 
 * to spare on most modern desktop monitors, and show only a sliver of the 
 * background image of the body tag on phones and smaller tablets.
 * 
 * The border radius is the rounded corners.
 * The auto right and left margins cause it to be centered.
 * The top margin allows a little bit of the body background image to show
 *    above the top of the div.
 * 
 * The edges of the background image selected are darker than the center,
 * so on smaller screens, the yellow background is more opaque.
 * 
 * The background does not print.
 */

#wrapper {
	width: 90%;
	max-width: 1000px;
	background-image: url(../images/transparent-yellow-bg-more-opaque.png);
	background-repeat: repeat;
	border-radius: 12px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 12px;
	}

@media (min-width: 700px) {
	#wrapper {
		background-image: url(../images/yellow-transparent-bg.png);
		background-image: url(../images/transparent-yellow-bg-more-opaque.png);
		}
}

@media print {
	#wrapper {
		background-image: none;
		width: 100% !important;
		}
	}