/* ==============================================
FACE Example CSS

version:  0.1
site:     KuraFire Network
author:   Faruk Ates (kurafire.net)
date:     December 13th, 2005
================================================= */

/* =ANIMATION
================================================= */

.example .box0 div { border-color: #eef; }
.example .box1 div { border-color: #fff; }
.example .box2 div { border-color: #fff; }
.example .box3 div { border-color: #fff; }
.example .box4 div { border-color: #fff; }
.example .box5 div { border-color: #eee; }
.example .box6 div { border-color: #ddd; }
.example .box7 div { border-color: #ccc; }
.example .box8 div { border-color: #bbb; }
.example .box9 div { border-color: #aaa; }
.example .box10 div { border-color: #999; }
.example .box11 div { border-color: #888; }
.example .box12 div { border-color: #777; }
.example .box13 div { border-color: #666; }
.example .box14 div { border-color: #555; }
.example .box15 div { border-color: #444; }
.example .box16 div { border-color: #333; }
.example .box17 div { border-color: #222; }
.example .box18 div { border-color: #111; }
.example .box19 div { border-color: #000; }
.example .box20 div,
.example .box21 div,
.example .box22 div,
.example .box23 div,
.example .box24 div,
.example .box25 div,
.example .box26 div,
.example .box27 div,
.example .box28 div,
.example .box29 div,
.example .box30 div { border-color: #000; }

.example .box0 span { background: #fff; }
.example .box1 span { background: #fff; }
.example .box2 span { background: #fff; }
.example .box3 span { background: #fff; }
.example .box4 span { background: #005F31 } /* #003082 */
.example .box5 span { background: #007F41 } /* #053B96 */
.example .box6 span { background: #009F51} /* #0C46A9 */
.example .box7 span { background: #00BF62 } /* #1551B9 */
.example .box8 span { background: #00CF6A } /* #1F5DC8 */
.example .box9 span { background: #0EEF81 } /* #2B6AD6 */
.example .box10 span { background: #2FFF99 } /* #3877E2 */
.example .box11 span { background: #4FFFA9 } /* #4884EC */
.example .box12 span { background: #5FFFB1} /* #5992F4 */
.example .box13 span { background: #6FFFB9} /* #6BA0FB */
.example .box14 span { background: #7FFFC0 } /* #80AFFF */
.example .box15 span { background: #8FFFC8 } /* #9ABFFF */
.example .box16 span { background: #9FFFD0 } /* #B3CFFF */
.example .box17 span { background: #8FFFC6 } /* #CCDFFF */
.example .box18 span { background: #DFFFEF } /* #E6EFFF */
.example .box19 span { background: #FFFFFF } /* #FFFFFF */

/* =OPACITY
=================================================
Yes, I know this has nasty proprietary stuff. See
through that for the sake of the example, please. */
.example .box20 span { background: #fff; -moz-opacity: 0.95; opacity: 0.95; filter: alpha(opacity=95); }
.example .box21 span { background: #fff; -moz-opacity: 0.9; opacity: 0.9;   filter: alpha(opacity=90); }
.example .box22 span { background: #fff; -moz-opacity: 0.8; opacity: 0.8;   filter: alpha(opacity=80); }
.example .box23 span { background: #fff; -moz-opacity: 0.7; opacity: 0.7;   filter: alpha(opacity=70); }
.example .box24 span { background: #fff; -moz-opacity: 0.6; opacity: 0.6;   filter: alpha(opacity=60); }
.example .box25 span { background: #fff; -moz-opacity: 0.5; opacity: 0.5;   filter: alpha(opacity=50); }
.example .box26 span { background: #fff; -moz-opacity: 0.4; opacity: 0.4;   filter: alpha(opacity=40); }
.example .box27 span { background: #fff; -moz-opacity: 0.3; opacity: 0.3;   filter: alpha(opacity=30); }
.example .box28 span { background: #fff; -moz-opacity: 0.2; opacity: 0.2;   filter: alpha(opacity=20); }
.example .box29 span { background: #fff; -moz-opacity: 0.1; opacity: 0.1;   filter: alpha(opacity=10); }
.example .box30 span { background: none; -moz-opacity: 0; opacity: 0;       filter: alpha(opacity=00); }