body,div,h1,button,p{margin:0;padding:0} button{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit} a:active,a:focus {outline:0} body, input, select, textarea {font:13px/13px "Helvetica Neue",Helvetica,Arial,sans-serif;} body { background:#ddd;} h1 { text-align:center;margin-top:15px;font-size:1em;font-weight:normal;color:#bbb;} h1, a { text-shadow:0 1px 0 rgba(255,255,255,.8);} #sm { background:rgb(80,80,80);background:-moz-linear-gradient(top, rgba(80,80,80,1) 0%, rgba(0,0,0,1) 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(80,80,80,1)), color-stop(100%,rgba(0,0,0,1)));background:-webkit-linear-gradient(top, rgba(0,0,0) 0%,rgba(168,168,168) 50%,rgba(168,168,168) 51%,rgba(0,0,0) 100%);background:-o-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(0,0,0,1) 100%);background:-ms-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(0,0,0,1) 100%);background:linear-gradient(top, rgba(80,80,80,1) 0%,rgba(0,0,0,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#080808',GradientType=1 );width:315px;margin:5px auto 5px;padding:5px;border-radius:10px;} #sm, .lever button {box-shadow:0 1px 7px rgba(0,0,0,.25)} .group, .reel, .lever {display:inline-block;} .group, .lever { background:rgb(96,96,96);background:-moz-linear-gradient(top, rgba(96,96,96) 0%, rgba(96,96,96) 50%, rgba(96,96,96) 51%, rgba(96,96,96) 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(216,216,216)), color-stop(50%,rgba(252,205,77,1)), color-stop(51%,rgba(248,181,0,1)), color-stop(100%,rgba(251,223,147,1)));background:-webkit-linear-gradient(top, rgba(0,0,0) 15%,rgba(168,168,168) 50%,rgba(168,168,168) 51%,rgba(0,0,0) 100%);background:-o-linear-gradient(top, rgba(216,216,216) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%);background:-ms-linear-gradient(top, rgba(216,216,216) 100%,rgba(252,205,77,1) 30%,rgba(248,181,0,1) 0%,rgba(251,223,147,1) 100%);background:linear-gradient(top, rgba(216,216,216) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr= #'BEBEBE', endColorstr='#F8F8F8',GradientType=0 );} .group { border-radius:7px;padding:4px 0 4px 4px;} .reel { background:#fff;background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1)));background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);background:-o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);background:-ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);background:linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );text-align:center;float:left;padding:4px 4px;width:32px;height:60px;overflow:hidden;margin-right:3px;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,.3) inset, 0 0px 1px rgba(0,0,0,.2) inset;} .reel div { position:relative;top:-48px;font-size:1em;} .reel p { font-weight:bold;height:60px;margin-top:10px;font-size:3em;} .reel p:nth-child(1) {color:#c60} .reel p:nth-child(2) {color:#690} .reel p:nth-child(3) {color:#630} .reel p:nth-child(4) {color:#c60} .reel p:nth-child(5) {color:#690} .reel p:nth-child(6) {color:#630} .lever { float:right;padding-right:4px;} .lever button { text-align:center;border-radius:15px;line-height:60px;width:35px;border:none;font-size:1em;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;background:rgb(252,255,244);background:-moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(233,233,206,1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1)));background:-webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%);background:-o-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%);background:-ms-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%);background:linear-gradient(top, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 );} .lever button:active { color:#900;box-shadow:0 1px 3px rgba(0,0,0,.3);margin:2px 0 -2px;} .msg { text-align:left;color:#bbb;font-size:1.2em;padding:14px 0 14px;text-shadow:0 -1px 0 rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.5);} a { color:#222cff;margin-top:5px;text-align:center;display:block;text-decoration:none;font-size:1.2em;} a:hover { color:#ff4c00 }