.thebutton-wrap {
    text-align: center
}
.thebutton-wrap h1 {
    text-align: left;
    line-height: 30px;
    margin: 0;
    font-size: 24px;
    padding: 0
}
.active .thebutton-form {
    background-image: radial-gradient(50% 125%, #ffffff 25%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.05)
}
.thebutton-form {
    background: #FAFAFA;
    border: 1px solid #E0E0E0;
    font-family: Georgia;
    color: #4A4A4A;
    display: inline-block;
    padding: 20px;
    margin: 10px auto
}
.thebutton-pie-container,
.thebutton-container {
    position: relative;
    float: left;
    margin-top: 15px;
    margin-left: 15px;
    background: #eaeaea;
    border: 1px solid #E0E0E0;
    box-shadow: inset 0px 1px 1px 0px rgba(73, 73, 73, 0.1);
    border-radius: 5px
}
.thebutton-pie-container {
    border-radius: 50%;
    margin-top: -5px
}
.thebutton-container {
    min-height: 60px;
    min-width: 190px
}
.thebutton-container.denied:before,
.thebutton-container.locked:before,
.thebutton-container.unlocking:before,
.thebutton-container.denied:after,
.thebutton-container.locked:after,
.thebutton-container.unlocking:after {
    cursor: pointer;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    z-index: 100;
    transform: translate(0, 0) scale(1, 1);
    background-position: center center;
    background-repeat: no-repeat;
    transition: all 0.2s;
    opacity: 1;
    line-height: 60px;
    font-size: 14px
}
.thebutton-container.denied:before,
.thebutton-container.locked:before,
.thebutton-container.unlocking:before {
    content: '';
    display: block
}
.thebutton-container.denied:before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAoCAYAAADt5povAAAAAXNSR0IArs4c6QAAAuNJREFUWAntWM9rE0EY7W6WaGLFVsRfjacmpxw86EEiakDID6EQ8CKieBL/Aani1YsUFQURehZETxYE84MIsWAu4s1QNLEIxlShBw+SrLFJfG/ZDbtDamaTvZkPpjPzzXvf2/3m2zBTZWqIxeNxze/3x3w+3zlFUWK9Xu8QKAdN2nf4NuArdzqdV+12u1wqlbb+FVLZbjGdTu9AoGsIeBONIkMNeIrfAX45m83+HkQYKAixMwA/AfHIINIwH0S/AnMZom9ErE90QOw6hCg2I67JzsHdA+ylSCTSqtVqZTvPIQixGwAvAaDaQRzjqXtYe9ftdlcwfIm2ivlHLO1E20+M3bCmoiXC4bAO0bfWWj+lqVTqAgBP0fo+ghBYR3uMdjefz29YRHuPB53H/BaoV9A7XgI82sVcLveMHCM4KnFfMBisYu5II4CfUH3nC4XCB4KHWSKROK1p2nPgrCq2KD+bzWYEFbxppC4QCNzGiihWa7VaJ2XFGBnYVTzgKQw3ObfZjKkxpSSTyb2qqv5AOjQLgDf7AztaLBbXLJ+bHttzFjGLdg5ibmH/D8CvZuxiBGH+aFQx8rFfryHwgmPLqEEtpnTBclo9nmTZGo/aQ3BQjAUKssL6BuBnPCHLfSzTdZ1vqQtB5ik4Jzi/CPORpuZv6jeBPMdCmRWcu/BdZQSfV9NZDZvp+NAxPYHojg33So1axnfoVUCZOBNBmSy5wkxS6ipdMuBJSmWy5AozSamrdMmA/4OU4hjwSyYVXmCoxZQ2vAgmGaPB8/97SfDYMGqpOCmvjB1JMgC11Hq9TsF1Sc44sHVqqZVKpY0oi+NEkuQuUsu4WlWr1TXc43YjxzFJsisYqvMebsMPSerf5XBpLEJ02mtRXBvu4yTPDPYcgnRAtIBrMu+Cx9HEAzLxbox1cRVv9gC9IUay4xBMBy0ajfpDoVAG/yrJIB3H4DqMN582Frf5Y/6ANFj6rEYWiFkfDsZfvU8m3UQu+lMAAAAASUVORK5CYII=');
    background-size: 14px 20px
}
.thebutton-container.denied:after,
.thebutton-container.denied:hover:before {
    opacity: 0
}
.thebutton-container.denied:hover:after {
    opacity: 1
}
.thebutton-container.denied.logged-out:after {
    content: 'you must log in'
}
.thebutton-container.denied.too-new:after {
    content: 'your account is too new'
}
.thebutton-container.denied.has-expired:after {
    content: 'the experiment is over'
}
.thebutton-container.denied.not-active:after {
    font-size: 10px;
    content: 'the experiment has not yet started'
}
.thebutton-container.denied.locked:after {
    content: 'connecting...'
}
.thebutton-container.active.locked:before {
    background-color: rgba(73, 73, 73, 0.9);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA+CAYAAABdhInWAAAAAXNSR0IArs4c6QAAAwZJREFUaAXtmrtrFFEUxp1gVHwERSsjFnZiUASfjSTY2SSmECGFCIJ/gJ12NhZaWllZaCMoCvEFEYsIQkgsLcRooRiCa1ASja+4/s5lZ5Ld3Ht3Z/bczRb3wMfcueec73xz9s4jM0lWFbRyubyF1BOgF3SD7RV0sZ0GnyqYZPsQvEiSZIFteEPcWnAejIA/II+VCL4JjgVTCnkChsB7oGHDkPSoCoZwL3iloa6GY4H9G2B904IhGQBzIKRNQL6jsFiSL4J/IRUu4Z5ifDi3WJIuLSHJM/xB8GdQ5ABnyWt83RLcn6PQGLFyUPvB5rQjjDvBTnAK3AZfQSP2jqBtKY9zS1APkCOrZ6MEHHES1TiI3QQug++gnj0noLOGYnEXp1yCxoHPfuI8u5iVb0RuN3jpK1DxXXAyE3C6DsE0/qNOggYdcMhN41adWl/wZ0spo2ZS1tRbT/I8voNZQpMDuDqAXPR9dmVZGaLP+TLwDS1LanICzi7w2lNXriBbq8ow8dST8LgqWHGHmr2euuI6k5VjR47st8xaTG5z+7LgAAP4H1nqplP3spLM+E6iJ1lgoAH1+1JVlq3cvtdJ6Q7Q59Fw3+PTco1CNOMg28D8IfGJUN8DwbAEhTQepv/C7/vljD4RKk/mNpuH5KPNEWDujYfT6PMJnfIka7t8tTKhroeAkrYaD5+vltG3mmTpqs32cMaN2RwB5uQPRZcZfSLUZXLGqd02XUUamE8kxtXNBvJbGxKFavc7djR2VLsD2nxxjcaOandAmy+u0dhR7Q5o88U1Gjuq3QFtvrhGY0e1O6DNF9do7Kh2B7T54hoN0dFZbVJlPqNPfnrf217lmoXo5J9ozGvH8ULprUsy+qSjrfhEU/Sw5kh8JsmpUPnfpHa063yZ+SXCzGtn3tUPMr7bZkrl3NmN0G+iy1xH2ZFvjtdkok1MungyFVmlia7KN/SrYKVtBgHHq8TZdggaBJMrpPYBdXfZdJk1WusgeA1zA6AfHADy9Wwj0LQyZCXwAYyAO/zUE2yt9h9DiWgUfFdVpAAAAABJRU5ErkJggg==');
    background-size: 22px 31px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2)
}
.thebutton-container.active.locked:hover:before,
.thebutton-container.unlocking:before {
    transform: translate(0, -10px) scale(1, 1);
    background-color: rgba(73, 73, 73, 0.7);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAABGCAYAAAC69QZ6AAAAAXNSR0IArs4c6QAAAyxJREFUaAXtmjtoFFEUhjNB17cQQfEBNlaCiGKhoMI2IiiIGDsfIFaChaWFYEBLUwppFGxsoiABUXwVEa0UU9iqMRFJMNGIhigmrt8/2V3Y7L2zZnNmMuI98DMz55z7nz9n7p2Z7EzU0qSVSqU2hh4ERbABrAPrwUowDD6W8ZbtXfA0iqIptukb4haBM+Ax+AVmY6Mk3wDF1JRC3gpOgH5gYfcg2WoqGMLtoM9C3QyOKY6vgWVzFgzJUTAO0jQ1YWNTYhkYgQ7wG2RhwxTZnSQ2cgUZ1IH/ois2wzfJcS94CAaAVvo4WAt0BdgGDpX32SSaxu3hytCXmFUJIlKnu1Enh8g5C3SJSjRydHZ2gR7QyN6TsCaRUEGStHCS5qQWwGWwvCGZI4Fxe8FrkGTPCBYcw6ddBHUJSlrdX4kf8BL8ZQCOFaBRd8976Rh8EvjsC4Et3sGzDMClplz3FcM/BlbV0eLUHUfzw2WTOPfXDZqjA86FoNdVsOzrrCtBQLdFn12oG2DkoOBqMOIp/EPxmlI4nniSB/Evrkk2PoD/nKe23Ker5ThoA74HjFPVxJR2qF0A74DLeqpliR53ZeDTZWpJNTHFHepc8miYwL9UpVtBUTsOe8BdYsLhT8N1x0OqabdTMQnVQ6/L7rucafhoyEt4P3m4Y30Sqnuyy/pdzhR9Ax7uWF+SUD1gZGm+erHQBSipvwNMyxvNUiW1usEHR81Xsc+z2uTWo1puTKf+n7Ag1Po0hY6Gjlp3wJpP/yGWPKS38Gf1UOKRELuf8yzQlSQ0aXCWsZsIPRZWvXXLQ0dDR607YM0X5mjoqHUHrPnCHA0dte6ANV+Yo6Gj1h2w5gtzNHTUugPWfGGOho5ad8CaL8zR/7qj363/emO+b+LTHPW9MTOu1zRdrE9C9cI0zxbrk1DfK+g8iNe0fCQhFaH6xjOPdpVfm39KWPzJGz/jt7Ov3+zzZEOI2YzQMYlSR1s4uM2mU/s5MXXxSEVkjSa6qo+mroD5ts8I2FcjznVAUjt4M09q9SncJpcu32eZBZIPl7GDrb5CaOrDQcb5TO+3RsAg0Mru5lS/YOu0P/i20U1rfwU1AAAAAElFTkSuQmCC');
    background-size: 22px 35px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1)
}
.thebutton-container.unlocking:before {
    opacity: 0;
    transform: translate(0, -80px) scale(1, -1)
}
.thebutton-container.unlocking #thebutton {
    transition-delay: 0.3s
}
#google-visualization-errors-all-1 {
    display: none!important
}
@-webkit-keyframes pulse {
    0% {
        background-color: #24a0ed
    }
    100% {
        background-color: #eaeaea
    }
}
@-moz-keyframes pulse {
    0% {
        background-color: #24a0ed
    }
    100% {
        background-color: #eaeaea
    }
}
@keyframes pulse {
    0% {
        background-color: #24a0ed
    }
    100% {
        background-color: #eaeaea
    }
}
.thebutton-pie-container.pulse,
.thebutton-container.pulse {
    -webkit-animation: pulse 1s ease;
    -moz-animation: pulse 1s ease;
    animation: pulse 1s ease
}
@-webkit-keyframes pulse2 {
    0% {
        background-color: #848484
    }
    100% {
        background-color: #eaeaea
    }
}
@-moz-keyframes pulse2 {
    0% {
        background-color: #848484
    }
    100% {
        background-color: #eaeaea
    }
}
@keyframes pulse2 {
    0% {
        background-color: #848484
    }
    100% {
        background-color: #eaeaea
    }
}
.thebutton-pie-container.pulse2,
.thebutton-container.pulse2 {
    -webkit-animation: pulse2 1s ease;
    -moz-animation: pulse2 1s ease;
    animation: pulse2 1s ease
}
#thebutton {
    font-size: 1px;
    text-indent: -999999px;
    line-height: 25px;
    outline: none;
    margin: 10px;
    background-color: #24a0ed;
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
    border: 1px solid #1394e5;
    box-shadow: 0px 4px 0px 0px #0f76b6, 0px 0px 0px 0px rgba(255, 255, 255, 0.6), 0px 6px 4px 0px rgba(0, 0, 0, 0.3), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    height: 40px;
    width: 170px;
    transform: translate(0, -4px);
    transition: all 0.1s
}
.unlocked #thebutton:hover {
    background-image: none;
    transform: translate(0, -3px);
    box-shadow: 0px 3px 0px 0px #0f76b6, 0px 0px 0px 0px rgba(255, 255, 255, 0.6), 0px 4px 4px 0px rgba(0, 0, 0, 0.3), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2)
}
.denied>#thebutton,
.locked>#thebutton,
.unlocked #thebutton:active {
    background-color: #169aec;
    box-shadow: 0px 0px 0px 0px #0f76b6, 0px 1px 0px 0px rgba(255, 255, 255, 0.6), 0px 0px 3px 0px rgba(0, 0, 0, 0.3), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
    transform: translate(0, 0)
}
.denied>#thebutton,
.pressed>#thebutton {
    background-image: none;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 0px 0px #d7d7d7, 0px 1px 0px 0px rgba(255, 255, 255, 0.4), 0px 0px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.2);
    transform: translate(0, 0)
}
.thebutton-pie {
    float: left;
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 15px;
    line-height: 70px;
    text-align: center
}
.thebutton-pie rect {
    fill: transparent
}
#thebutton-timer {
    width: 170px;
    height: 40px;
    margin: 10px;
    line-height: 40px;
    display: block;
    position: absolute
}
.thebutton-numeral {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    font-family: monospace;
    font-weight: bold;
    font-size: 28px;
    margin: 1px;
    padding: 3px 2px
}
.thebutton-counter {
    float: left;
    line-height: 1.4;
    margin-top: 15px;
    margin-left: 15px
}
.thebutton-counter span {
    line-height: 1
}
.thebutton-counter {
    float: right;
    text-align: right;
    white-space: nowrap
}
.thebutton-participants {
    font-size: 12px
}
.thebutton-participants-description {
    font-size: 12px;
    color: #737373
}
#thebutton-s-10ms,
#thebutton-s-100ms {
    color: #999999
}
.thebutton_sidebox .morelink {
    background: #5cb85c;
    border: 1px solid #4cae4c;
    padding: 5px;
    letter-spacing: 0px;
    height: 100%;
    border-radius: 4px
}
.thebutton_sidebox .morelink:hover {
    background-color: #449d44;
    border-color: #398439
}
.thebutton_sidebox .morelink a {
    color: #fff
}
.thebutton_sidebox .morelink .nub {
    display: none
}