/* TODO(matt): Test the performance of this variables approach against the non-variables one */
:root {
    --body_bg: #000;
    --clickable: #111;
    --clickable_hover: #080808;
    --flow_bg: #000;
    --flow_line: #3399FF;
}

/* Structure */
body {
	margin: 0 auto;
}

body.js div#clear {
    background: #000;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 64;
}

header > nav {
    display: flex;
    flex-flow: row wrap;
}

header > nav > * {
    padding: 8px;
    border-left: 1px solid;
    border-bottom: 1px solid;
}

header > nav a:first-child {
    border-left: 0;
    flex-grow: 0;
}

header > nav a {
    flex-grow: 1;
}

header > nav a.current {
    border-bottom: 1px solid;
}

header > div.gutter {
    height: 8px;
}

div#main_nav {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

div#main_nav div {
    padding: 8px;
}


div#main_nav div.margin {
    border-top: 1px solid;
    width: 48px;
}

div#main_nav div.smoother_left {
    border-top: 1px solid;
    border-bottom: 1px solid;
    width: 32px;
}

div#main_nav nav {
    display: flex;
    flex-flow: row wrap;
}

div#main_nav nav div.item {
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 8px 9px;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

div#main_nav nav div.item.current {
    border-top: 0;
    border-right: 1px solid;
    border-bottom: 0;
    border-left: 1px solid;
    padding: 8px 8px;
}

div#main_nav div.smoother_right {
    border-top: 1px solid;
    border-bottom: 1px solid;
    width: 32px;
}

div#main_nav div.item_pad {
    border-top: 1px solid;
    border-bottom: 1px solid;
    flex-grow: 1;
}

section#main {
    margin: 0 64px;
}

section#main > h1 {
    margin: 0;
    padding: 16px;
}

section#main div#frontispiece {
    height: 512px;
    width: 512px;
    margin: auto;
    background-image: url('coloureruption-black-512.jpg');
    background-size: cover;
}
 
@media (max-width: 512px) {
    header > nav { margin-bottom: 0; }
    section#main { margin: 0; }
    section#main div#frontispiece {
        height: 256px;
        width: 256px;
    }
}

body.js section#main > article {
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-left: 1px solid;
}

section#main > article > h2 {
    margin: 0;
}

section#main > article > section {
    column-count: 2;
    column-fill: balance;
    column-gap: 24px;
}

@media (max-width: 1024px) {
    section#main > article > section { column-count: 1; }
}

@media (min-width: 2048px) {
    section#main > article > section { column-count: 3; }
}

section#main > article.fullwidth > section {
    column-count: 1;
}

section#main > article > h2,
section#main > article > section {
    padding: 16px;
}

section#main > article > section > p:first-of-type {
    margin: 0;
}

section#main ul li a:active,
article section a:active {
    position: relative;
    top: 1px;
    left: 1px;
}

blockquote {
	border: 1px solid;
	padding: .5em;
}

    /* Cinera Slide */
article.cinera section a.image img {
    display: block; margin: 8px auto; width: 86%;
}

article.cinera section > section.titled-list,
article.pledge section > section.titled-list {
    column-count: 1;
    display: inline-block;
    padding: 0px;
}

article.cinera section > section.titled-list p,
article.pledge section > section.titled-list p {
    margin-bottom: 0px;
}

article.cinera section > section.titled-list ul,
article.pledge section > section.titled-list ul {
    margin-top: 0px;
}
    /* /Cinera Slide */

    /* Pledge Slide */
.pledge-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 320px;
    margin: 0 auto;
    -webkit-column-break-inside: avoid;
    column-span: none;
}

.pledge-container .pledge-progress {
    display: flex;
    margin-top: 8px;
    width: 100%;
}

.pledge-container .pledge-progress * {
    height: 8px;
}

.pledge-container .pledge-progress .pledge-progress-prior {
    background-color: #3D3D3D;
    border-color: #3D3D3D;
    border-radius: 4px 0px 0px 4px;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    width: 4%;
}

.pledge-container .pledge-progress .pledge-progress-rated {
    width: 92%; /* Compute this */
    border-width: 1px 0;
    border-style: solid;
    border-image: linear-gradient(to right, #3D3D3D 0%, #3D3D3D 28%, #3399FF 69%, #9933FF 100%);
    -moz-border-image: -moz-linear-gradient(left, #3D3D3D 0%, #3D3D3D 28%, #3399FF 69%, #9933FF 100%);
    -webkit-border-image: -webkit-linear-gradient(left, #3D3D3D 0%, #3D3D3D 28%, #3399FF 69%, #9933FF 100%);
    border-image-slice: 1;
    background: linear-gradient(to right, #3D3D3D 0%, #3D3D3D 28%, #3399FF 69%, #9933FF 100%);
}

.pledge-container .pledge-progress .pledge-progress-rated .unfilled {
    background-color: #000;
    margin: 0 0 0 auto;
}

.pledge-container .pledge-progress .pledge-progress-after {
    border-radius: 0px 4px 4px 0px;
    border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: #9933FF;
    width: 4%;
}

.pledge-container > .comment {
    margin-bottom: 0;
}

.pledge-container > .comment + .comment {
    margin-top: 0;
}

.pledge-container a.pledge-button,
article.hire a.button,
input.button
{
    border: 1px solid;
    border-radius: 4px;
    display: inline;
    margin: 4px;
    padding: 8px;
}

.pledge-container a.pledge-button {
    flex-basis: 294px;
}

.pledge-container a.pledge-button.halfwidth {
    flex-basis: 134px;
}

.pledge-container a.pledge-button.halfwidth.left {
    border-radius: 4px 0 0 4px;
}

.pledge-container a.pledge-button.halfwidth.right {
    border-radius: 0 4px 4px 0;
}

.pledge-container > .recovery {
    margin: 0 0 0 auto;
}

.pledge-container a.pledge-platform {
    width: 100%;
}

.pledge-container a.pledge-platform img {
    vertical-align: middle;
}
    /* /Pledge Slide */

    /* Hiring Slide */
article.hire > section
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

article.hire article > section
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

article.hire article
{
    width: 50%;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    article.hire > section { flex-direction: column; }
    article.hire article { width: 100%; }
}

article.hire h1
{
    margin-bottom: 0;
}

article.hire h2
{
    margin-top: 0;
}
    /* /Hiring Slide */

/* TODO(matt): REMOVE */
article#hire section
{
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-direction: column;
}

article#hire section div
{
    border: 8px dotted gold; /* NOTE(matt): Temporary colour styling */
    margin: 32px auto;
    padding: 8px;
}

article#hire section div h1
{
    font-size: 64px;
    text-transform: uppercase;
    padding-bottom: 0;
}

article#hire section div p
{
    font-variant: small-caps;
    margin-top: 0;
}

article#hire h1
{
    margin: 0;
    padding: 16px 16px 0 16px;
}

article#hire p
{
    margin-bottom: 16px;
}
/* TODO(matt): /REMOVE */

form > section
{
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-top: 4px;
    width: 100%;
}

form > section label:nth-child(1)
{
    width: 97px; /* TODO(matt): Compute this, or line it all up another way? */
    text-align: right;
}

form .form-row label:not(:nth-child(1))
{
    margin-left: 1em;
}

form > section input:not([type=number]),
form > section textarea,
form > section select,
#form-hire section#form-hire-length,
#form-hire #form-hire-cost-scheme
{
    margin-left: 0.5em;
}

#form-hire #form-hire-cost-scheme
{
    font-style: oblique;
    font-weight: bold;
    color: #9933FF;
}

form .form-row input,
form .form-row textarea
{
    flex-grow: 1;
}

form .form-single input,
form .form-single textarea
{
    flex-grow: 0;
}

form #form-hire-rate-value
{
    flex-grow: 0;
    width: 4em;
}

form .form-row input#form-hire-length-hours
{
    width: 2.5em;
}

form .form-row input#form-hire-length-minutes,
form .form-row input#form-hire-length-seconds
{
    width: 2em;
}

form #form-hire-cost
{
    width: 5em;
    font-weight: bold;
}

form textarea#form-hire-notes
{
    resize: none;
    height: 12ex;
}

#form-hire input[type=text],
#form-hire input[type=email],
#form-hire input[type=number],
#form-hire textarea,
#form-hire select
{
    box-shadow: none;
    padding: 0.5em;
    font-family: Inconsolata, fixed;
    font-size: 16px;
    background: #080808;
    color: #FFFFFF;
    border: 1px solid;
}

#form-hire section#form-hire-length
{
    font-family: Inconsolata, fixed;
    font-size: 16px;
    background: #080808;
    border: 1px solid;
}

#form-hire section#form-hire-length input[type=number]
{
    border: 0;
    padding: 0.5em 0;
}

#form-hire section#form-hire-length input:first-child
{
    padding-left: 0.5em;
}

#form-hire section#form-hire-length input:last-child
{
    padding-right: 0.5em;
}

#form-hire input[type=text]:not(:placeholder-shown),
#form-hire input[type=email]:not(:placeholder-shown),
#form-hire section#form-hire-length:not(.placeholder-shown),
#form-hire textarea:not(:placeholder-shown),
#form-hire select:not(:placeholder-shown)
{
    border-color: #3399FF;
}

#form-hire input[type=text]:not(:valid),
#form-hire input[type=email]:not(:valid),
#form-hire section#form-hire-length.invalid,
#form-hire textarea:not(:valid)
{
    border-color: #993333;
}

#form-hire input[type=text]:placeholder-shown,
#form-hire input[type=email]:placeholder-shown,
#form-hire section#form-hire-length.placeholder-shown,
#form-hire textarea:placeholder-shown
{
    border-color: #4D4D4D;
}

#form-hire input[type=text]:focus,
#form-hire input[type=email]:focus,
#form-hire section#form-hire-length.focused,
#form-hire textarea:focus,
#form-hire select:focus
{
    border-color: #33FF33;
}

#form-hire input[type=text]:focus,
#form-hire input[type=email]:focus,
#form-hire input[type=number]:focus,
#form-hire textarea:focus,
#form-hire select:focus
{
    outline: none;
}

#form-hire #form-hire-cost
{
    border-color: #9933FF;
}

#form-hire select.disabled
{
    cursor: not-allowed;
    border-color: #080808;
    background: #010101;
}

label.disabled,
#form-hire select.disabled
{
    color: #161616;
}

#form-hire-rate-slider
{
    -webkit-appearance: none;
    height: 2px;
    background: #4D4D4D;
    outline: none;
    -webkit-transition: background .2s;
    transition: background .2s;
}

#form-hire-rate-slider:hover,
#form-hire-rate-slider:focus
{
    cursor: pointer;
    background: #888888;
}

#form-hire-rate-slider::-webkit-slider-thumb
{
    -webkit-appearance: none;
    width: 8px;
    height: 24px;
    -webkit-border-radius: 4px;
    background: #3399FF;
    cursor: pointer;
    -webkit-transition: .2s;
}

#form-hire-rate-slider::-moz-range-thumb
{
    border: none;
    width: 8px;
    height: 24px;
    background: #3399FF;
    cursor: pointer;
    transition: background .2s;
}

#form-hire-rate-slider:hover::-webkit-slider-thumb,
#form-hire-rate-slider:focus::-webkit-slider-thumb
{
    background: #33FF33;
}

#form-hire-rate-slider:hover::-moz-range-thumb,
#form-hire-rate-slider:focus::-moz-range-thumb
{
    background: #33FF33;
}

/* /Structure */

/* Typography */
body {
	font-family: Liberation Sans, sans-serif;
}

header > nav a,
section#main > h1,
.pledge-container a.pledge-button,
article.hire a.button,
input.button,
article.hire > section
{
    text-align: center;
}

.pledge-container a.pledge-platform {
    text-align: right;
}

article.hire article section
{
    text-align: left;
}

header > nav a,
section#main > article > h2 a,
section#main ul li a:link,
article section a:link,
.pledge-container a.pledge-button:hover,
article.hire a.button:hover,
.pledge-container a.pledge-platform:hover
{
	text-decoration: none;
}

section#main ul li a:hover,
article section a:hover,
section#main ul li a:focus,
article section a:focus,
section#main ul li a:active,
article section a:active {
	text-decoration: underline;
}

div#main_nav nav div.item {
    font-weight: bold;
}

section#main > h1 {
    font-size: 64px;
}

article.hire h1
{
    font-size: 20px;
}

article.hire h2
{
    font-size: 16px;
}

.button
{
    font-size: 16px;
}

.pledge-container p {
    font-size: 12px;
}
/* /Typography */

/* Colour */
body {
	background-color: var(--body_bg);
	color: #FFF9E7;
}

header > nav > * {
    background: var(--clickable);
    border-color: #222;
}

header > nav a {
    color: #FFF;
}

header > nav a.current {
    background: var(--flow_bg);
    border-color: var(--flow_bg);
}

header > div.gutter {
    background: var(--flow_bg);
}

header > nav a:not(.current):hover,
header > nav a:not(.current):focus,
header > nav a:not(.current):active,
div#main_nav nav div.item:not(.current):hover,
div#main_nav nav div.item:not(.current):focus,
div#main_nav nav div.item:not(.current):active {
    background: var(--clickable_hover);
}

div#main_nav nav div.item:not(.current):hover,
div#main_nav nav div.item:not(.current):focus,
div#main_nav nav div.item:not(.current):active {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, var(--flow_line) 0%, var(--flow_bg) 16%, var(--flow_bg) 84%, var(--flow_line) 100%);
    -moz-border-image: -moz-linear-gradient(right, var(--flow_line) 0%, var(--flow_bg) 16%, var(--flow_bg) 84%, var(--flow_line) 100%);
    -webkit-border-image: -webkit-linear-gradient(right, var(--flow_line) 0%, var(--flow_bg) 16%, var(--flow_bg) 84%, var(--flow_line) 100%);
    border-image-slice: 1;
}

.comment {
    color: #777;
}

.comment .note {
    color: #33FF33;
}

.comment code {
    color: #9933FF;
}

div#main_nav div.smoother_left {
    background: linear-gradient(to left, var(--clickable), var(--body_bg));
}

div#main_nav div.smoother_left.focused {
    background: linear-gradient(to left, var(--clickable_hover), var(--body_bg));
}

div#main_nav nav div.item {
    background: var(--clickable);
}

div#main_nav div.smoother_right {
    background: linear-gradient(to right, var(--clickable), var(--body_bg));
}

div#main_nav div.smoother_right.focused {
    background: linear-gradient(to right, var(--clickable_hover), var(--body_bg));
}

div#main_nav div.smoother_left.current,
div#main_nav div.smoother_right.current {
    background: var(--body_bg);
}

div#main_nav div.margin,
div#main_nav div.smoother_left,
div#main_nav nav div.item,
div#main_nav nav div.item.current,
div#main_nav div.smoother_right,
div#main_nav div.item_pad,
body.js section#main article {
    border-color: var(--flow_line);
}

div#main_nav nav div.item.current {
    background: var(--flow_bg);
    border-top: 1px solid var(--flow_bg);
    border-bottom: 1px solid var(--flow_bg);
}

section#main > article > h2 {
    background: #080808;
}

section#main > article > h2 a {
    color: #FFF9E7;
}

section#main > article section {
    background: #101010;
}

body.js section#main > article section {
    background: var(--flow_bg);
}

section#main ul li a:link,
article section a:link {
	color: #3399FF;
}

section#main ul li a:visited,
article section a:visited {
	color: #33CCFF;
}

section#main ul li a:hover,
article section a:hover,
section#main ul li a:focus,
article section a:focus,
section#main ul li a:active,
article section a:active {
	color: #33FF33;
}

blockquote {
	background: #3D3D3D;
    border-color: #3399FF;
	color: #FEF697;
}

.pledge-container a.pledge-button,
article.hire a.button,
input.button
{
    background: #3399FF;
    border-color: #3399FF;
    color: #FFF;
}

.pledge-container a.pledge-button:hover,
article.hire a.button:hover,
input.button:hover
{
    cursor: pointer;
    background: #2061A3;
}

.pledge-container a.pledge-platform {
    color: #444;
}

.pledge-container a.pledge-platform:hover {
    color: #1F587C;
}
/* /Colour */

/* TODO(matt): Something to do with "h2 a" URL styling clashing...  */