.examples {
	margin: 1em;
}

.example {
	background-color: rgb(230, 196, 230);
	border: 1px solid black;
	display: inline-block;
}

h4 {
	margin-top: 0;
	padding-top: 0;
}

.code {
	white-space: pre;
	background-color: rgb(232, 248, 214);
	border: 1px solid black;
	display: inline-block;
	font-family: monospace;
	font-size: 1.2em;
}

/* Default theme */
@import "../../themes/default/css/uniform.default.scss";

/* Include multiple other themes */
$class-wrapper: ".uniform-agent";
@import "../../themes/agent/css/uniform.agent.scss";

$class-wrapper: ".uniform-aristo";
@import "../../themes/aristo/css/uniform.aristo.scss";

$class-wrapper: ".uniform-jeans";
@import "../../themes/jeans/css/uniform.jeans.scss";

$class-wrapper: "";  /* Reset for the simple example below*/

/* Along with the default theme, this tiny bit of SCSS makes the
 * simple example work. Only use this method when the sprite images
 * depict elements with identical sizes. */
.jeans {
	@include use-backgrounds(url('../images/sprite-jeans.png'), 0, url('../images/bg-input-jeans.png'), url('../images/bg-input-focus-jeans.png'), 0);

	input {
		color: #FFE000;
	}
}