.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;
    }
}