body {
    padding: 0;
    margin: 0;
    background-color: #DFDFDF;
    font-size: 14pt;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Text bigger on mobile? */
@media only screen and (max-device-width: 640px) 
                   and (orientation: landscape) {
    body {
        font-size:18pt;
    }
}

@media only screen and (max-device-width: 640px) 
                   and (orientation: portrait) {
    body {
        font-size:22pt;
    }
}

/* Options is the container of buttons beneath the visualizer */
.options {
    font-family: Times, 'Times New Roman', serif;
    display: flex;
    width: 841px;
    margin-top: 8px;
}

.options .option-item,
.options label,
.options .square-button,
.options .menu-button {
    display: inline-block;
    vertical-align: middle;
}


/* We use checkboxes as the element, but hide the actual button so we can make a custom one */ 
.options input[type="checkbox"] {
    display: none;
}

/* Big spacing between our labels, except the first one after a separator.
   This is because the separator itself has the spacing. This improves the
   "highlight rectangle" during a tour. */
.options label,
#phi-container {
    margin-left: 30px;
}

.options .first-after-sep {
    margin-left: 0px;
}

/* Spacers can grow */
.options .spacer {
    flex-grow: 1;
}

/* Options separator is a thin vertical dottedl ine */
.options .separator {
    width: 1px;
    border-left: dotted 2px #999;
    margin-left: 20px;
    margin-right: 20px;
    height: 42px;
    align-self: center;
    position: relative;
    bottom: 2px;
}

/* Visually align buttons */
.square-button,
.menu-button {
    margin-left: 5px;
    position: relative;
    bottom: 2px;
}

/* Size our buttons */
.options label,
.square-button div,
.menu-button-container div {
    display: inline-block;
    height: 38px;
}

.options label,
.square-button,
.menu-button {
    cursor: pointer;
    font-size: 28pt;
    border-radius: 8px;
    color: #555;
    min-width: 45px;
    text-align: center;
    border: solid 2px #333;
    background-color: white;
    white-space: nowrap;
    line-height: 38px;
    padding: 0px 8px 5px 8px;
}

.menu-button {
    width: 60px;
    font-weight: bold;
    color: #333;
}

/* Support for the "squared" text in psi/phi */
.options sup {
    font-size: 0.45em;
    vertical-align: super;
    line-height: 0;
    display: inline-block;
    width: 4px;
}

/* Adjust our big triangle */
.playpause {
    position: relative;
    top: 5px;
    left: 2px;
    font-size: 28pt;
}

.square-button > div {
    font-weight: bold;
    color: #242424;
}

.square-button:active {
    background-color: #999;
    color: black;
}

.options input[type="checkbox"]:checked + label {
    background-color: #333;
    color: #99CCFF;
    text-shadow: 2px 2px black;
}

#vis-container {
    width: 800px;
    height: 600px;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    /* allow offsetLeft and offsetTop to work */
}

#draw-text {
    position: absolute;
    color: rgba(219, 219, 219, .66);
    width: 100%;
    text-align: center;
    top: 255px;
    font-size: 50pt;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
}

#energy-dragging-container {
    width: 100px;
    height: 600px;
    display: inline-block;
    vertical-align: bottom;
    margin-left: -38px;
    position: relative;
    pointer-events: none;
}

#potential-dragging-container {
    width: 800px;
    height: 30px;
    display: block;
    margin-bottom: -30px;
    position: relative;
    z-index: 2;
    opacity: .9;
    pointer-events: none;
}

#ui-and-tutorial-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

#ui-container {
    white-space: nowrap;
    flex: none;
    padding: 5px 0 5px 5px;
}

#ui-scale-target {
    padding-bottom: 7px;
}

#tut-container {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    height: 630px;
    width: 100%;
    max-width: 900px;
}

#tutorial-receiver {
}


.no-pointer-events {
    pointer-events: none;
}

.noselect,
.dragger,
.dragger * {
    /* Defeat text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Draggers are the grippy tab things */
.dragger {
    display: inline-block;
    position: absolute;
    pointer-events: auto;
}

.dragger div {
    display: inline-block;
    vertical-align: top;
}

/* Vertical dragger */
.v-draggers .dragger .grip {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 20px;
    height: 21px;
    background-image: linear-gradient(180deg, #AAA 80%, black);
    background-size: 100% 6px;
    background-position: 0 5px;
    border-style: solid;
    border-width: 1px 11px 1px 7px; /* top right bottom left */
    border-color: #AAA;
}

/* Horizontal dragger */
.h-draggers .dragger .grip {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 21px;
    height: 14px;
    background-image: linear-gradient(90deg, #AAA 80%, black);
    background-size: 6px 100%;
    background-position: -1px 5px;
    border-style: solid;
    border-width: 7px 1px 11px 1px; /* top right bottom left */
    border-color: #AAA;
}

.dragger .value_text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16pt;
    user-select: none;
}

/* Center the draggers so their middle is the value we want */
.v-draggers .dragger > .centerer {
    position: relative;
    bottom: 13px;
}

.h-draggers .dragger > .centerer {
    position: relative;
    right: 13px;
}

.dragger .click_event_target,
.dragger .touch_event_target {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: -5px;
    padding: 5px 0;
}

.v-draggers .touch_event_target,
.v-draggers .click_event_target {
    cursor: ns-resize;
    left: 0px;
    top: -5px;
    padding: 5px 0;
}

.h-draggers .touch_event_target,
.h-draggers .click_event_target {
    cursor: ew-resize;
    left: -5px;
    top: 0px;
    padding: 0 5px;
}

.v-draggers .touch_event_target {
    /* Bigger touch targets! */
    top: -20px;
    padding: 20px 5px;
}

.h-draggers .touch_event_target {
    /* Bigger touch targets! */
    left: -20px;
    padding: 5px 20px;
}


/* Rotator is the spinning thing to rotate the visualizer */
#rotator {
    position: relative; /* for absolute children */
    display: inline-block;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(219, 219, 219, 1) 0%, rgba(74, 74, 74, 1) 100%);
    border: solid 2px #AAA;
    width: 44px;
    height: 44px;
    margin-right: 5px;
}

#rotator_knob {
    display: inline-block;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -7px;
    background: linear-gradient(to top, rgba(219, 219, 219, 1) 0%, rgba(74, 74, 74, 1) 100%);
    border: solid 1px #AAA;
}

/* Shift energy buttons left a bit so they don't run into the tutorial */
#energy_buttons {
    margin-right: 40px;
}

/* menu is used for the potential picker */
.menu {
    position: absolute;
    bottom: 0px;
    left: 6px;
    box-shadow: 0 0 8px 0 black;
    border-radius: 3px;
    background-color: #DDD;
    display: none;
    list-style-type: none;
    margin: 0;
    text-align: left;
    padding: 3px 0;

    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 38px;
}

.menu-item .glyph {
    font-size: 24pt;
    margin-right: 5px;
    display: inline-block;
    width: 40px;
    text-align: center;
    vertical-align: middle;
}

.menu-item img {
    width: 1.7em;
    vertical-align: middle;
    margin-right: 12px;
    margin-left: 5px;
}

.menu-item {
    padding: 0 8px 3px 5px;
}

.menu-item:hover {
    background-color: #777;
}

.menu-button-container {
    /* Allow absolute positioning of child menu */
    position: relative;
    cursor: pointer;
    font-size: 28pt;
    text-align: center;
    white-space: nowrap;
    line-height: 38px;
}

/* Show menu on hover */
.menu-button-container:hover .menu,
.menu:hover {
    display: block;
}