conway.css

/* Normalize.css */

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace, serif;font-size:1.2em}
pre{white-space:pre-wrap}
q{quotes: "\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type=button],
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
body,figure{margin:0}
legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}

/* Custom styling */
* {
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body
{
    background: #404040;
    color: #333;
    font: bold 0.857em/1.5em "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
}

input[type=text],
input[type=password]
{
    border: 1px solid #ccc;
    border-radius: 6px;
    display: block;
    margin: 0 auto 10px auto;
    outline-width: 0;
    padding: 3px 4px;
    width: 100%;
}

input[type=hidden]
{
    display: none;
}

label
{
    display: block;
    margin: 0 auto;
    width: 100%;
}

#container
{
    background: #f0f0f0;
    border: 1px solid #111;
    border-radius: 0;
    width: 100%;
}

#statistics
{
    font-size: 90%;
    padding-top: 10px;
    min-height: 28px;
}

#uiSelect
{
    padding-top: 10px;
}

#container form
{
    padding: 10px;
    margin-top: 30px;
    margin-bottom: 0;
}

#panel
{
    padding: 0 30px;
    width: 100%;
    height: 0;
    font-size: 75%;
    line-height: normal;
    text-align: -webkit-center;
    -webkit-transition: height 750ms;
    transition: height 750ms;
    overflow: hidden;
}

#panel.showing
{
    height: 111px;
}

#drawerHandle
{
    background: #f0f0f0;
    color: #b0b0b0;
    border: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#drawerHandle:hover
{
    color: #808080;
}

#drawerHandle:focus
{
    outline:0;
}

.answer
{
    font-size: 130%;
    margin: 10px;
}

#prompt
{
    font-size: 110%;
    margin: 15px;
}

#theDate
{
    font-size: 150%;
    margin: 10px;
}

#speedDate
{
    font-size: 95%;
    padding: 7px;
}

button[id^="conway"]
{
    border: 2px solid #c0c0c0;
    border-radius: 6px;
    color: #700000;
    display: block;
    margin: 15px auto 0 auto;
    padding: 6px;
    width: 75%;

    background-color: #ffdd00;

    /* W3C */
    background: linear-gradient(top, #ffcc88, #ff7700);

    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffcc88), to(#ff7700));

    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #ffcc88, #ff7700);

    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #ffcc88, #ff7700);

    /* IE 10 */
    background: -ms-linear-gradient(top, #ffcc88, #ff7700);

    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #ffcc88, #ff7700);
}

button[id^="conway"]:hover
{
    border-color: #808080;
}

button[id^="conway"]:focus
{
    outline:0;
}

button[id^="conway_"]
{
    width: 45%;
    margin: 5px auto;
}

button[id^="conwaySpeed_"]
{
    width: 20%;
    margin: 2px;
    display:inline-block;
}

button[id^="conwaySpeed_"].correctAnswer
{
    animation: pulse 1s 1;
}

@keyframes pulse {
    0%, 100% {
        background-color: #ffdd00;

        /* W3C */
        background: linear-gradient(top, #ffcc88, #ff7700);

        /* Safari 4-5, Chrome 1-9 */
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffcc88), to(#ff7700));

        /* Safari 5.1, Chrome 10+ */
        background: -webkit-linear-gradient(top, #ffcc88, #ff7700);

        /* Firefox 3.6+ */
        background: -moz-linear-gradient(top, #ffcc88, #ff7700);

        /* IE 10 */
        background: -ms-linear-gradient(top, #ffcc88, #ff7700);

        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #ffcc88, #ff7700);
    }
    50% {
        background-color: #90ee90;

        /* W3C */
        background: linear-gradient(top, #90ee90, #228b22);

        /* Safari 4-5, Chrome 1-9 */
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#90ee90), to(#228b22));

        /* Safari 5.1, Chrome 10+ */
        background: -webkit-linear-gradient(top, #90ee90, #228b22);

        /* Firefox 3.6+ */
        background: -moz-linear-gradient(top, #90ee90, #228b22);

        /* IE 10 */
        background: -ms-linear-gradient(top, #90ee90, #228b22);

        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #90ee90, #228b22);
    }
}

/* Tablet Landscape */
@media screen and (max-width: 1060px)
{
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}
}

/* Tablet Portrait */
@media screen and (max-width: 768px)
{
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

html { font-size:100%; }

@media (min-width:  320px) {body {font-size:1.3rem;} #panel.showing {height: 146px;}}
@media (min-width:  414px) {body {font-size:1.4rem;} #panel.showing {height: 156px;}}
@media (min-width:  490px) {body {font-size:1.5rem;} #panel.showing {height: 167px;}}
@media (min-width:  568px) {body {font-size:1.6rem;} #panel.showing {height: 174px;}}
@media (min-width:  680px) {body {font-size:1.6rem;} #panel.showing {height: 188px;} #container {border-radius: 7px; width: 40%; margin: 25px auto;}}
@media (min-width:  823px) {body {font-size:1.7rem;} #panel.showing {height: 171px;}}
@media (min-width: 1024px) {body {font-size:1.8rem;} #panel.showing {height: 182px;}}
@media (min-width: 1136px) {body {font-size:1.9rem;} #panel.showing {height: 186px;}}