<!doctype html>
<title>switch demo</title>
<style>
h1 {
color: black;
}
h1:after {
content: " -- you'll probably never see this.";
}
.xx-small h1 {
color: aqua;
}
.xx-small h1:after {
content: " -- xx-small";
}
.x-small h1 {
color: blue;
}
.x-small h1:after {
content: " -- x-small";
}
.small h1 {
color: fuchsia;
}
.small h1:after {
content: " -- small";
}
.medium h1 {
color: lime;
}
.medium h1:after {
content: " -- medium";
}
.large h1 {
color: purple;
}
.large h1:after {
content: " -- large";
}
.x-large h1 {
color: red;
}
.x-large h1:after {
content: " -- x-large";
}
.xx-large h1 {
color: teal;
}
.xx-large h1:after {
content: " -- xx-large";
}
.xxx-large h1 {
color: maroon;
}
.xxx-large h1:after {
content: " -- xxx-large";
}
</style>
<script src="mootools.js"></script>
<script src="switch.js"></script>
<body class="indestructible"><h1>Switch!</h1></body>