/* ---
| MISC, PREP
--- */

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
body { margin: 0; background: #eaeaea; }
* { font-family: 'Trebuchet MS'; color: #666; box-sizing: border-box; }
p, label, span, a, input, select { font-size: 1em; }
.cl { clear: both; }

/* centered containers */
header div, footer div, section { width: 1200px; max-width: 100%; margin: 0 auto; padding: 1em !important; position: relative; }
header div, footer div { text-align: center; }

/* links */
a { color: #E25F63; }

/* panels */
form, aside, #code { background: #d8d8d8; border-radius: 1em; }

/* tabs */
.tabs { border-bottom-color: #aaa; margin-bottom: 2em; }
.tabs li { background: #aaa !important; font-weight: normal; }
.tabs li:not(.on) { color: #fdfeff !important; }
.tabs .on { background: #D8D8D8 !important; border-color: #aaa; border-bottom-color: #D8D8D8; color: #666 !important; }

/* headings */
h1, h1 span, h2 { font-family: 'Roboto Condensed'; }
h1 { margin: 0; color: #E25F63; }
h1 span, h2 span { color: #aaa; font-weight: normal; }
h2 { text-align: center; margin-top: 0; }

/* forms & fields */
form::after { content: ''; clear: both; display: block; }
fieldset { float: left; width: 50%; margin: 0; padding: 0 1.7em; border: none; }
fieldset:last-of-type { border-left: solid 1px #ccc; float: right; }
form div { padding: .75em 0; border-top: solid 1px #ccc; }
label { width: 33%; float: left; position: relative; top: .45em; }
label span { color: #d00; }
label span + span { display: none; }
input, select { float: none; display: inline-block; }
input:not([type=color]), select { padding: .3em; }
input[type=text], input[type=number] { width: 5em !important; }
input + input[type=color] { position: relative; left: .5em; top: .2em; }
form div > span { color: #999; }
button { border: solid 2px #E25F63; color: #E25F63; transition: background .5s, color .5s; margin-top: 2em; }
button:hover { background: #E25F63; color: #edefdd !important; }
.fs-disabled, .fs-disabled  ~ * { opacity: .5; }
.fs-disabled ~ input[type=color] { display: none; }
input[type=checkbox] { outline: solid 3px #fff; }

/* lightbox */
#lightbox { background: #504B36 !important; }
#lightboxdialog { background: white; height: 18em; width: 25em; padding: .5em; }
#lightboxdialog h4 { background: #E6B16B; margin-top: 0; padding: .65em 1.7em; color: white; font-size: 1.3em; }
#lightboxdialog p { margin: 1.7em; }
#lightboxdialog button { margin: 0 1.7em 0 0; }

/* ---
| TOP
--- */

header { background: #fff; border-bottom: solid 1px #d5d5d5; }

/* share buttons (header ones, not LBD ones) */
header .addthis_sharing_toolbox { position: absolute; right: .5em; top: 1.5em; }
header .addthis_sharing_toolbox, .addthis_sharing_toolbox > div { padding: 0 !important; width: auto !important; }

/* ---
| INTRO and browser support
--- */

/* intro */
section > p { text-align: center; }

/* browser support */
#support img { margin: 0 .25em; }

/* ---
| FORM
--- */

form { margin: 1.7em 0; padding: 1.7em 0; }

/* generate button */
form button { display: block; margin: 0 auto; font-size: 1.5em; padding: .6em; cursor: pointer; }

/* ---
| PREVIEW - most CSS done inline, for easy-export (i.e. just dump current DOM)
--- */

aside { calc(25% - (1.7em / 2)); padding: 1.7em; }
aside > div { margin: 2.5em 0; }
aside > div * { transition: background .5s, border .5s; }
aside > div > div { background: #504B36; border: solid 10px #E6B16B; } /* <-- prevents these styles fading in load, as they're read from field values */
aside a { text-align: center; display: block; }

/* ---
| CODE
--- */

#code { width: 100%; margin: 1.7em 0 4em 0; opacity: 0; transition: opacity .5s, height .5s; padding: 1.7em; height: 0; overflow: hidden; }
#code.show { opacity: 1; height: 380px; }
#code p { text-align: center; }
#code textarea { float: none; width: 100%; height: 15em; }

/* ---
| FOOTER
--- */

footer { position: fixed; background: #fff; bottom: 0; width: 100%; border-top: solid 1px #d5d5d5; }
footer p { margin-left: 0; color: #888; }