/*
	 Circulate jQuery Plugin
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #ccc; }
#page-wrap { z-index: 20; width: 570px; margin: 70px auto; background: white; padding: 20px; position: relative; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; }
/* start commented backslash hack \*/
* html .group { height: 1%; }
.group { display: block; }
/* close commented backslash hack */

h1, h2 { font-weight: normal; margin: 30px 0 10px 0; }
p { margin: 0 0 10px 0; }
pre { overflow: auto; padding: 10px; background: #eee; margin: 0 0 10px 0; }

.top-demo div { background: #ccc; width: 80px; height: 80px; float: left; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; }
.top-demo div:nth-child(5n) { background: #FF9900; }
.top-demo div:nth-child(5n+1) { background: #424242; }
.top-demo div:nth-child(5n+2) { background: #E9E9E9; }
.top-demo div:nth-child(5n+3) { background: #BCBCBC; }
.top-demo div:nth-child(5n+4) { background: #3299BB; }

#sphere-area { height: 350px; position: relative; width: 100%; }
#sphere-area img { width: 150px; height: 150px; position: absolute; top: 50px; left: 250px; }
#sphere-area #blue-ball { opacity: 0; }
#sphere-area #green-ball { opacity: 0; }

#unicorn { z-index: 60; position: absolute; top: 150px; left: 44%; width: 110px; display: block; }

#text-demo span { float: left; font: 30px bold Helvetica, Sans-Serif; }