The template provides a set of styling classes:

Shadows

Box shadows

class="lite-box-shadow"

class="box-shadow"

class="strong-box-shadow"

class="large-box-shadow"

Text shadows

class="lite-text-shadow"

class="text-shadow"

class="strong-text-shadow"

class="large-text-shadow"

Bevels and emboss

Top bevel

class="top-bevel-on-light"

class="top-bevel"

class="top-bevel-on-dark"

Bottom bevel

class="bottom-bevel-on-light"

class="bottom-bevel"

class="bottom-bevel-on-dark"

Bevel

class="bevel-on-light"

class="bevel"

class="bevel-on-dark"

Emboss

class="emboss"

class="emboss-on-dark"

Quick tip

bevel and emboss classes are available for ul/ol elements: add the suffix -subs to the class name and all children elements will be styled, (e.g. bevel-subs).

Text bevel

class="bright-text-bevel"

class="bright-text-bevel-on-dark"

class="dark-text-bevel"

class="dark-text-bevel-on-dark"

Effects

Border

class="with-border"

This class forces a border on an element which does not have one by default. Color is inherited from element's styling.

Glow

class="glow"

Add a subtle glow effect. Does not work on IE7 due to lack of proper styling support.

Stripes

Stripes are created by adding an overlaying block, thus the parent element needs to have position:absolute or position:relative. If not, just add the class relative:

<div class="relative">
	Block content
	<div class="stripes"></div>
</div>

Light stripes

class="thin-stripes"

class="stripes"

class="big-stripes"

Dark stripes

class="dark-thin-stripes"

class="dark-stripes"

class="dark-big-stripes"

Animated stripes

Just add the class animated to get moving stripes. This work for all stripes sizes or color, but use it with caution as some slow computers have a hard time rendering them on large elements.

class="dark-stripes animated"

Generic styles