/* Set the background image sources */
#newyork { background-image: url("../_assets/img/newyork.jpg"); }
#buenosaires { background-image: url("../_assets/img/buenosaires.jpg"); }
#paris { background-image: url("../_assets/img/paris.jpg"); }
#capetown { background-image: url("../_assets/img/capetown.jpg"); }
#seoul { background-image: url("../_assets/img/seoul.jpg"); }
#sydney { background-image: url("../_assets/img/sydney.jpg"); }
/* Background settings */
.demo-page {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
/* Transparent footer */
.ui-toolbar-footer {
	background: none;
	border: 0;
	bottom: 0;
}
/* The footer won't have a height because there are only two absolute positioned elements in it.
We can use the header button position classes, but have to position the buttons from the bottom. */
.control.ui-toolbar-header-button-left,
.trivia-button.ui-toolbar-header-button-right {
	top: auto;
	bottom: 7px;
	margin: 0;
}
/* Custom styling for the trivia source */
small {
	font-size: .75em;
	color: #666;
}