@page { margin: 25mm 25mm 25mm 25mm; size: A4 portrait; } @media print { div.panel {display: none !important;} div#controls {display: none !important;} div#footer {display: none !important;} } * { box-sizing: border-box; font-size: inherit; margin: 0px; padding: 0px; border: 0px; line-height: 1.15em; } @media screen { div, span, h1, h2, h3, p {font-size: 12px;} } @media screen and (min-width: 400px){ div, span, h1, h2, h3, p {font-size: 16px;} } @media screen and (min-width: 540px){ div, span, h1, h2, h3, p {font-size: 22px;} } @media screen and (min-width: 690px){ div, span, h1, h2, h3, p {font-size: 28px;} } h1, h2, h3, p, input, select, textarea, button { position: relative; top: 0px; left: 0px; border: 0px; padding: 0px; padding-top: 0.35em; padding-bottom: 0.35em; margin: 0px; font-family: Helvetica, Arial, 'Microsoft Sans Serif', 'Lucida Sans Unicode', sans-serif; font-weight: 100; color: rgb(0,0,0); line-height: 1.15em; } h1, h2, h3 { font-weight: 400; } h2 button, h3 button { float: right; font-size: 0.7em; opacity: 0.7; } * + h2 { margin-top: 1em; } p + p { padding-top: 0px; } button:not(:last-of-type) { margin-right: 0.4em; } input, select, textarea { padding: 0.25em; border-width: 0.075em; border-color: rgba(185,70,40,0.5); border-radius: 0px; border-style: solid; border-radius: 0.2em; background-color: rgb(255,255,255); color: rgb(80,80,80); text-align: left; font-size: 0.9em; height: 1.65em; } input.error, select.error, textarea.error { background-color: rgb(255,250,150); } button { padding-top: 0.25em; padding-bottom: 0.25em; padding-left: 0.6em; padding-right: 0.6em; border: 0px; border-radius: 0.2em; background-color: rgb(185,70,40); /* Burnt orange */ color: rgb(255,255,255); text-align: center; font-size: 0.85em; height: 1.65em; cursor: pointer; } a, a:visited, a:hover, a:active { text-decoration: none; cursor: pointer; color: inherit; } body { position: relative; border: 0px; padding: 0px; margin: 0px; width: 100vw; height: auto; background-color: rgb(255,255,255); font-size: 0px; min-width: 290px; min-height: 6em; } span { display: inline-block; } img { border: 0px; padding: 0px; margin: 0px; } label, input, select, textarea { display: inline-block; } /* Animations for panels */ @keyframes show-panel { from {top: 100vh;} to {top: 1.8em;} } @keyframes close-panel { from {top: 1.8em;} to {top: 100vh;} } /* End of animations for panels */ /* Animations for rows */ @keyframes show-rows { from {height: 0em;opacity: 0.25;} to {height: 1.1em;opacity: 1;} } @keyframes hide-rows { from {height: 1.1em;opacity: 1;} to {height: 0em;opacity: 0.25;} } /* End of animations for rows */ div#header, div#content, div.panel, div#controls, div#footer { border: 0px; padding: 0px; padding-left: 0.8em; padding-right: 0.8em; margin: 0px; width: 100%; min-width: inherit; } div#header { position: fixed; height: 1.8em; background-color: rgb(185,70,40); /* Burnt orange */ text-align: left; white-space: nowrap; z-index: 1000; opacity: 0.97; } div#header button { float: right; margin-right: 0px; margin-top: 0.55em; margin-left: 0.7em; font-size: 0.65em; color: rgb(185,70,40); /* Burnt orange */ background-color: rgb(255,255,255); z-index: 1001; cursor: pointer; } div#header button#cancel_panel { display: none; } div#header button#close_panel { display: none; } div#header p#num_processed { display: none; float: right; margin-right: 0px; margin-top: 0.55em; width: auto; color: rgb(255,255,255); background-color: transparent; font-size: 0.65em; text-align: right; z-index: 1001; cursor: default; } div#header h1 { color: rgb(255,255,255); font-weight: 100; } div#header h1 span { margin-left: 0.4em; font-size: 0.5em; } div#content { padding-top: 2.5em; height: auto; max-width: 100%; min-height: 3em; overflow: auto; } div#content div.lead { padding: 0px; margin: 0px; height: auto; } div#content div.lead div.line { display: none; padding: 0px; margin: 0px; height: auto; } div#content div.lead div.line.lead_head { display: block; } div#content div.lead div.line span { z-index: 10; } div#content div.lead div.line span.cursor { position: relative; top: 0.7em; width: 1.5em; font-size: 0.65em; font-family: Helvetica,Arial,sans-serif; text-align: left; font-weight: 100; color: rgb(0,0,0); background-color: transparent; opacity: 0.175; cursor: pointer; z-index: 10; } div#content div.lead div.line span.cursor:hover { opacity: 0.8; } div#content div.lead div.line span.cursor.current { color: rgb(185,70,40); /* Burnt orange */ opacity: 1; } div#content div.lead div.line span.delete { position: relative; width: 1.5em; font-size: 0.7em; font-family: Helvetica,Arial,sans-serif; text-align: center; background-color: transparent; opacity: 0.175; cursor: pointer; font-weight: 400; z-index: 10; } div#content div.lead div.line span.delete:hover { opacity: 0.8; } div#content div.lead div.line span.row_num { padding-right: 0.5em; width: 2.5em; font-size: 0.7em; font-family: Helvetica,Arial,sans-serif; letter-spacing: normal; font-weight: 400; text-align: right; color: rgb(185,70,40); /* Burnt orange */ background-color: transparent; } div#content div.lead div.line span.call { width: 1.2em; font-family: "Andale Mono", Monaco, monospace; text-align: center; color: rgb(0,0,0); background-color: rgb(225,225,225); } div#content div.lead div.line span.row { padding-left: 0.25em; width: auto; font-family: "Andale Mono", Monaco, monospace; text-align: left; letter-spacing: 0.4em; color: rgb(0,0,0); background-color: rgb(240,240,240); } div#content div.lead div.line span.method_name { width: auto; padding-left: 0.75em; text-align: left; font-family: Helvetica,Arial,sans-serif; font-weight: 100; color: rgb(185,70,40); /* Burnt orange */ background-color: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div#content div.lead div.line.regular span { color: rgb(100,150,220); } div#content div.lead div.line.lead_head { margin-bottom: 1px; margin-bottom: max(1px, 0.04em); } div#content div.lead div.line.lead_head span.row { cursor: pointer; } div#content div.lead:first-of-type div.line.lead_head span.row { cursor: default; } div#content div.lead div.line.round_block span.call { background-color: rgb(135,206,235); } div#content div.lead div.line.round_block span.row { background-color: rgb(195,230,245); } div#content div.lead div.line.true_touch span.call { background-color: rgb(100,220,150); } div#content div.lead div.line.true_touch span.row { background-color: rgb(200,245,220); } div#content div.lead div.line.false span.call { background-color: rgb(245,130,120); } div#content div.lead div.line.false span.row { background-color: rgb(252,206,200); } div#content div.lead.false.collapsed div.line span.call { background-color: rgb(245,130,120); } div#content div.lead.false.collapsed div.line span.row { background-color: rgb(252,206,200); } div#content h2 { margin-bottom: 0.4em; padding-bottom: 0.2em; border-bottom-width: 0.06em; border-bottom-color: rgb(185,70,40); /* Burnt orange */ border-bottom-style: solid; } div#content h3 { margin-top: 0.4em; padding-bottom: 0.15em; margin-bottom: 0.25em; border-bottom-width: 0.03em; border-bottom-color: rgb(185,70,40); /* Burnt orange */ border-bottom-style: dashed; } div#content > *:last-child { margin-bottom: 0.5em; } div.panel { position: fixed; display: none; top: 1.8em; bottom: 0px; padding-top: 0.2em; padding-bottom: 1.2em; background-color: rgb(238,208,202); /* Faded burnt orange */ text-align: left; overflow-x: hidden; overflow-y: auto; z-index: 500; } div.panel label:first-child, div.panel input, div.panel select, div.panel textarea { width: calc(100vw - 1.6em); width: calc(100vw - 1.6em - 16px); /* Because Windows is lame */} div.panel label span.note { padding-left: 0.4em; opacity: 0.4; font-size: 0.9em; font-style: italic; } div.panel span.method-vault-chooser { position: absolute; display: none; margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 0.25em; padding-right: 0.25em; border: 0px; border-bottom-left-radius: 0.2em; border-bottom-right-radius: 0.2em; height: auto; min-height: 1.7em; background-color: rgba(240,240,240,0.95); background-color: rgba(160,160,160,0.925); font-size: 0.8em; line-height: 1.15em; overflow-y: auto; z-index: 501; } div.panel span.method-vault-chooser p { color: rgb(0,0,0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; font-size: inherit; line-height: inherit; } div.panel h2 { margin-bottom: 0.4em; padding-bottom: 0.2em; border-bottom-width: 0.06em; border-bottom-color: rgb(185,70,40); /* Burnt orange */ border-bottom-style: solid; } div.panel h3 { margin-top: 0.4em; padding-bottom: 0.15em; margin-bottom: 0.25em; border-bottom-width: 0.03em; border-bottom-color: rgb(185,70,40); /* Burnt orange */ border-bottom-style: dashed; } div#sharecomposition textarea#share_data { height: calc(55vh - 9em); min-height: 3.7em; } @media screen and (min-width: 800px) { /* All panels */ div.panel label:first-child {width: 11em;} div.panel input, div.panel select, div.panel textarea {width: calc(100vw - 14em);} div.panel input, div.panel select, div.panel textarea {width: calc(100vw - 14em - 16px);} /* Because Windows is lame */ /* New Composition */ div#newcomposition select#new_composition_num_bells {max-width: 8em;} div#newcomposition input#new_composition_starting_row {max-width: 8em;} div#newcomposition input#new_composition_length {max-width: 5em;} div#newcomposition select#new_composition_observation_bell {max-width: 8em;} /* Add Method */ div#addmethod input#add_method_bob {max-width: 8em;} div#addmethod input#add_method_single {max-width: 8em;} div#addmethod input#add_method_call_row {max-width: 5em;} /* Edit Composition */ div#editcomposition input#edit_composition_starting_row {max-width: 8em;} div#editcomposition input#edit_composition_length {max-width: 5em;} div#editcomposition select#edit_composition_observation_bell {max-width: 8em;} /* Edit Method */ div#editmethod input#edit_method_bob {max-width: 8em;} div#editmethod input#edit_method_single {max-width: 8em;} div#editmethod input#edit_method_call_row {max-width: 5em;} /* Share Composition */ div#sharecomposition textarea#share_data {width: calc(100vw - 1.8em);} } div#controls { position: fixed; bottom: 2.15em; height: auto; max-height: 12.5em; background-color: rgb(246,231,228); /* Extra-faded burnt orange */ text-align: left; white-space: nowrap; overflow-x: hidden; overflow-y: auto; z-index: 200; opacity: 0.99; } div#controls p { white-space: nowrap; } div#controls button { height: auto; padding-top: 0px; padding-bottom: 0.4em; line-height: 0px; background-color: rgba(185,70,40,0.3); color: black; vertical-align: middle; } div#controls div.method_controls { position: relative; float: right; margin: 0px; padding: 0px; border: 0px; text-align: right; } div#controls div.method_controls button { margin: 0px; padding-left: 0.8em; padding-right: 0.8em; padding-top: 0.3em; padding-bottom: 0.3em; width: 5.5em; font-size: 0.55em; line-height: 1.2em; } div#controls button.method_controls + button.method_controls { top: 3em; } div#controls button:hover { background-color: rgba(185,70,40,0.5); } div#controls button.round_block { background-color: rgba(0,100,190,0.725); color: white; } div#controls button.round_block:hover { background-color: rgba(0,100,190,0.9); color: white; } div#controls button.true_touch { background-color: rgba(0,140,40,0.725); color: white; } div#controls button.true_touch:hover { background-color: rgba(0,140,40,0.9); color: white; } div#controls button.false { background-color: rgba(190,0,20,0.65); color: white; } div#controls button.false:hover { background-color: rgba(190,0,20,0.85); } div#controls button.disabled { opacity: 0.3; cursor: default; } div#controls button.disabled span.lead { visibility: hidden; } div#controls button.disabled span.ob { visibility: hidden; } div#controls button span.call { font-size: 0.55em; line-height: 0.9em; } div#controls button span.lead { font-size: 0.95em; line-height: 0.9em; } div#controls button span.ob { padding-top: 0.3em; font-size: 0.5em; line-height: 0.9em; } div#controls span.method_name { display: inline-block; padding-left: 0.75em; width: calc(100vw - 17em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div#footer { position: fixed; bottom: 0px; height: 2.15em; background-color: rgb(238,208,202); /* Faded burnt orange */ text-align: left; white-space: nowrap; overflow-x: hidden; overflow-y: hidden; z-index: 200; opacity: 0.99; } div#footer p { color: rgb(185,70,40); line-height: 1.3em; } div#footer button.disabled { opacity: 0.3; cursor: default; } div#footer button.composition_actions { float: right; margin: 0px; margin-left: 0.4em; }