/*

Styling the demo page and all the controls.

You don't need any of this to make the counter work.

I know it's messy... it's a demo.

*/

body{font-family:verdana}
p{line-height:16px;margin:0 0 5px}
#wrapper{float:right;position:relative;left:-50%;margin-top:30px}
#flip-counter{position:relative;left:50%;clear:both}
.clear{clear:both}
#demo_controls{padding:0;width:700px;margin:20px auto;list-style-type:none}
#demo_controls li{width:700px;text-align:center;margin:0 0 20px;font-weight:bold;font-size:13px}
.demo_widget{width:700px;margin-top:10px}
.demo_button{margin-top:10px}
.auto_off_controls{display:none}
a.expand:link, a.expand:visited, a.expand:active, a.expand.hover{text-decoration:none;font-size:10px;color:#aaa}
a.back:link, a.back:visited, a.back:active, a.back.hover{text-decoration:underline;font-size:10px;color:#333;display:block;margin-top:4px}
.explain{width:680px;margin:10px auto 0;padding:10px;font-weight:normal;font-size:12px;background:#eee;border:1px solid #666;text-align:center}
.toggle{display:none}
code{font-weight:bold;margin:0 0 5px;display:block}