/*
Common styles used across the entire system. Applied prior to
either clunky.css or mobile.css (pick one.)
*/

body {
    margin: 0;
    font-family: sans-serif;
    font-size: 14pt;
}

.logo {
  display:block;
  background-image: url(logo180.png);
  background-size: contain;
  background-repeat: no-repeat;
}

a {
    color: #cb4b23;
}

li {
    padding-bottom: 0.6em;
}

.bloop {
    margin: 1em 0 1em 1em;
}

.blip {
    margin: 1em 0 1em 0;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
    box-sizing: border-box;
    padding: 0.6em;
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 14pt;
    width: 100%;
    font-family: inherit; /* because date monospace */
}

input[type="checkbox"] {
    width: 1.6em;
    height: 1.6em;
    margin: 0.3em;
    vertical-align: -0.2em; /* align w/ 1.4em text*/
    cursor: pointer;
}

/* remove arrow b/c it looks silly */
select {
    appearance: none;
}

form {
    color: #777;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

label,
legend {
    padding: 0;
    font-weight: bold;
    display: block;
    color: #ffaa00;
}

label {
    margin: 0 0 0.3em 0;
}

fieldset label {
    color: #333;
}

button,
input[type="submit"],
label.button {
    background-color: #ffaa00;
    border: 1px solid #ffaa00;
    color: #000;
    font-weight: bold;
    padding: 0.5em 0.9em;
    box-shadow: 0 1px 2px #3336, 0 1px 3px 1px#3333;
    border-radius: 4px;
    cursor: pointer;

    font-size: 14pt;
    margin: 1em 1em 0 0;
}

button:active,
input[type="submit"]:active,
label.button:active {
    box-shadow: none;
}

button:hover,
input[type="submit"]:hover,
label.button:hover {
    border: 1px solid #812e14;
    color: #000;
}

.validation:empty {
    display: none;
}

.validation {
    color: #f30;
    font-weight: bold;
    margin: 0.3em 0 0 0;
}

.tip {
    color: #777;
    margin: 0.3em 1em 0 0;
}

.result {
    color: #000;
    padding: 1em;
    margin: 0.3em 0 0.3em 0;
    border-radius: 3px;
    animation-name: resultFlyIn;
    animation-duration: 500ms;
}

@keyframes resultFlyIn {
    from {
        transform: translate(-4em, 0);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.positive {
    background-color: #0f12;
    border: 2px solid #0c0;
    border-left-width: 16px;
}

.negative {
    background-color: #f002;
    border: 2px solid #c00;
    border-left-width: 16px;
}

.footnote {
    color: #333;
    font-size: .8em;
}

/* Because our legends/labels are otherwise large, apply this 
   class to labels applied to checkbox inputs */
.checkboxLabel {
    font-weight: normal;
}