body {
    background-color: white;
    color: #404040;
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    margin: 0px;
    padding: 0px;
}

#container { margin-left: auto; margin-right: auto; width: 980px; }

/* page header */
#top {
    box-shadow: rgb(238, 238, 238) 0px 0px 8px 0px;
    border-radius: 6px;
    height: 128px;
    margin-bottom: 20px;
    padding: 15px 60px 45px 60px;
    position: relative;
    text-align: center;
    top: -8px;
    width: 820px;
}

#top > a > img {
    position: absolute;
    top: 25px;
    left: 30px;
    width: 150px;
    height: 150px;
    border: 0;
    margin: 0;
    padding: 0;
}
#top > h1 { font-size: 18px; margin: 25px 0 8px 0; padding: 0; border: 0; font-weight: 200; }
#top > h2 { font-size: 20px; margin: 16px 0; padding: 0; border: 0; }

.menu-button {
    font-size: 15px;
    line-height: normal;
    padding: 9px 14px 9px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    margin: 0;
    color: #333;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    background-color: #e6e6e6;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
    background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);

    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -ms-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all;
}
.menu-button:hover {
    background-position: 0 -15px;
    color: #333;
    text-decoration: none;
}
.menu-button.disabled {
    cursor: default;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    filter: alpha(opacity=65);
    -khtml-opacity: 0.65;
    -moz-opacity: 0.65;
    opacity: 0.65;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    pointer-events: none;
    color: #bbb;
}
.menu-button.current {
    color: #777777;
}

.mailing,
.updator { text-align: center; }
.updator { margin-bottom: 20px; }

/* ## root ## */

#root .updator { clear: left; }
#root img { float: left; width: 319px; height: 321px; }
#root h1 { text-align: center; padding-top: 70px; }
#root menu { margin-top: 50px; }
#root menu div { text-align: center; margin: 20px 0; }
#root footer p { float: right; margin-right: 20px; }
#root aside { text-align: center; }

/*#root .menu-button.now { color: #a7960c; }*/
#root .menu-button.now {
  /*color: rainbow;*/ /*SUCH SAD*/
  background: linear-gradient(to right, red, yellow, green, aqua, blue, violet);
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
  color: white;
  font-size: 20px;
}
#root .menu-button.now:hover {
  background: linear-gradient(to right, violet, blue, aqua, green, yellow, red);
}
@media (max-width: 1000px) {
    #root #container { width: auto; }
}
@media (max-width: 900px) {
    #root h1 { line-height: 30px; }
    #root img { max-width: 90%; margin-left: 5%; }
    #root #container { width: 350px; }
    #root .menu-button { margin: 0 0 20px 0; }
    #root menu div { margin: 0; padding: 0; }
    #root menu { padding: 0; margin: 0; }
}

/* ## demo entry template (home/demos) ## */

section > div > h3 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; font-style: normal; font-weight: bold; line-height: 20px; margin: 0 0 8px 0; padding: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
section > div > p { margin-left: 80px; margin-bottom: 9px; padding: 0; }
p + a, p + a + a { float: right; clear: right; }

/* demo title, links, desc */
section.demos > div > h3 { margin: 0 0 3px 0px; padding: 0; font-size: 16px; }
section.demos > div > menu { margin: 5px 0 0 0; padding: 0; min-height: 10px; }
section.demos > div > p { margin-left: 60px; }
.links > b, .links > span { margin-right: 10px; }

.demos .bgi-demo { width: 50px; height: 50px; float: left; margin-right: 10px; margin-top: 5px; border: 1px solid black; }

/* ## home ## */
#home section > header { margin: 0 0 40px 0; }
#home section > header > h2 { font-size: 24px; font-weight: bold; height: 36px; line-height: 36px; margin: 0; padding: 0px; }
#home .bgi-front { float: left; width: 50px; height: 50px; margin: 0 8px; padding: 0; border-radius: 99em; border: 0; }
#home [href="https://twitter.com/"] { display: none; }
#home [href="https://twitter.com/"] { display: none; }
#home [style="background-position: -px -px;"] { display: none; }

/* ## demos **/

#demos section > div > p { margin-left: 0; }
#demos .mailing,
#demos .updator { text-align: left; }


/* ## home + demos ## */

section { float: left; margin: 0 20px 20px 0; width: 300px; }
section > div { margin: 0; overflow: auto; width: 300px; }
section > hr:last-child { display: none; }

/* ## rules ## */

/* make rule indexing work, allow prefixing of outer OL index to inner OL items */
#rules>#container>ol { counter-reset: rules; margin-top: 30px; }
#rules>#container>ol>li { counter-increment: rules; }
#rules>#container>ol ol>li:before { content: counter(rules) "."; margin-left: -35px; margin-right: 30px; }

/* ## rules and details ## */

code { font-family: monospace; background-color: #fff6eb; color: rgba(0, 0, 0, 0.75); padding: 1px 3px 1px 5px; line-height: 1; -ms-tab-size: 2; -webkit-tab-size: 2; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; }

/* ## submission page ## */

#submit .after-contest { opacity:0.3; }
#submit .hidden { display: none; }

form > header { border-bottom: 1px solid #eee; padding: 5px 15px; margin-bottom: 30px; }

.form-item { color: #808080; clear: left; margin: 10px; overflow: auto; }
.bots { visibility: hidden; height: 0; margin: 0; padding: 0; }
#submit .form-item.with-check>div { padding-top: 6px; }

.form-item>label,
.submit-part>label {
    padding-top: 6px;
    font-size: 13px;
    float: left;
    width: 130px;
    text-align: right;
    color: #404040;
    margin-right: 10px;
}
label.checkbox { height:50px; line-height:50px; }
label.radio {
    padding: 0;
    margin: 6px 0 0 0;
    width: 125px;
    height: 30px;
    text-align: center;
}
input, textarea {
    width: 210px;
    height: 18px;
    padding: 4px;
    font-size: 13px;
    line-height: 18px;
    color: #404040;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 0;

    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;

    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
#submit .short { width: 50px; }
#submit .wide { width: 550px; }
textarea {
    width: 400px;
    height: auto;
}
input:focus, textarea:focus {
    outline: 0;
    border-color: rgba(82, 168, 236, 0.8);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}

input[type=checkbox],
input[type=radio] {
    width: auto;
    height: auto;
    padding: 0;
    margin: 3px 0 0 5px;
    cursor: pointer;
}
input[type=radio] {
    vertical-align: sub;
    margin-right: 5px;
}
input[type=checkbox]:focus,
input[type=radio]:focus {
    outline: 1px dotted #666;
}
input:focus, textarea:focus {
    outline: 0;
    border-color: rgba(82, 168, 236, 0.8);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
.canvas-element-settings { /* fieldset */
    border-color: rgba(255, 255, 255, 0.3);
    background-color: white;
    border-radius: 5px;
    width: 540px;
    margin-left: 148px;
}
.canvas-element-settings > legend {
    padding: 0 10px;
    font-size: 18px;
    color: #888;
}
.canvas-element-settings label { /* inputs */
    text-align: left;
}
.canvas-element-settings .with-check label { /* radios */
    width: 155px;
}
.canvas-element-settings .with-check input { /* radios */
    float: right;
}

.submit-part {
    background-color: #f5f5f5;
    padding: 0 15px 15px;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: inset 0 1px 0 #ffffff;
    -moz-box-shadow: inset 0 1px 0 #ffffff;
    box-shadow: inset 0 1px 0 #ffffff;
    margin-bottom: 0;
    overflow: auto;
}
#submit .submit-part>input { clear:left; }
#submit .submit-part>label { height: 30px; line-height: 30px; width:auto; clear:left; }
input.menu-button { height: 40px; float: left; margin-top: 20px; }

/* make links pretty */
a { color: #890000; text-decoration: none; font-weight: bold; }
a:hover { text-decoration: underline; }
a:hover, a:active { outline: 0; }
a:focus { outline: none; }

hr { margin: 20px 0 19px; border: 0; border-bottom: 1px solid #eee; }

footer {
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid #eee;
    clear: left;
}

/* ## details ## */

/* no longer used?
dl { margin: 0; padding: 0; line-height: 1; color: #404040; }
dt { font-weight: bold; margin: 0; padding: 0; color: #404040; line-height: 18px; }
dd { margin: 0 0 10px 9px; padding: 0; color: #404040; line-height: 18px; }
ul { margin-top: 15px; }
*/

#details dd { white-space: pre-line; max-width: 800px; }
#details .modal-header { max-width: 600px; max-width: 80ch; font-family: monospace; }
#details .modal-header h2,
#details .modal-header p { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
#details .modal-header h2 { font-size: 25px; }
#details .modal-header p { font-size: 16px; }

#details dd>pre { max-width: 600px; max-width: 80ch; word-break: break-all; white-space: pre-wrap; text-align: left; margin: 0; padding: 0; background-color: #fff6eb; }
#details dd>pre>code { margin: 0; padding: 0; border: 0; font-size: 13px; }
#details code>span { color: #6034A0; }
#details dt { margin-bottom: 5px; clear: left; }
/* original code may be wider than 80char/600px */
#details dd:last-child,
#details dd:last-child code,
#details dd:last-child pre {
    white-space: pre-wrap; max-width: 900px; word-break: normal; background: #fff6eb;

    /* http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html */
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(left, #fff6eb 75%, #FFFFFF 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(left, #fff6eb 75%, #FFFFFF 100%);
    /* Opera */
    background-image: -o-linear-gradient(left, #fff6eb 75%, #FFFFFF 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0.75, #fff6eb), color-stop(1, #FFFFFF));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(left, #fff6eb 75%, #FFFFFF 100%);
    /* unprefixed */
    background-image: linear-gradient(to right, #fff6eb 75%, #FFFFFF 100%);
}
#details dd:last-child code { background: transparent; }

#details .thumb { width: 50px; height: 50px; border: 1px solid black; float: right; margin: -7px 0 5px 5px; }

#details dd { margin-top: 20px; margin-bottom: 20px; }

/* single line pairs */
#details dt.one-line { float: left; margin: 0 5px 0 0; padding: 0; width: 70px; }
#details dt.one-line+dd { margin: 0; padding: 0; }
#details dt.newline,
#details dt.newline+dd { margin-bottom: 15px; }
#details dt.empty,
#details dt.empty+dd { display: none; } /* you can be better at this, css */

/* hide `http://` and `https://` from view. the calc is to compensate for "something", but its okay if not supported. */
#details dt.link+dd,
#details dt.links+dd { overflow:hidden; }
#details dt.link+dd>span,
#details dt.link+dd>a { font-family:monospace; margin-left: -7ch; margin-left:calc(.5px - 7ch); }
#details dt.links+dd>span,
#details dt.links+dd>a { font-family:monospace; margin-left: -8ch; margin-left:calc(.5px - 8ch); }

#details nav>a[href=""] { text-decoration: line-through; pointer-events: none; color: #ccc; }