.dark_earth_sun_bg {
    background: black;
    color: #ddd;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding-top: 0;
    display: inline-block;
    padding: 0;
}

.dark_earth_sun_bg h1, .dark_earth_sun_bg h2, .dark_earth_sun_bg h3,
.dark_earth_sun_bg h4, .dark_earth_sun_bg h5 .dark_earth_sun_bg h6 {
    color: #999;
}

.dark_earth_sun_bg_grad_top, .dark_earth_sun_bg_grad_bottom {
    height: 150px;
    width: 100vw;

    width: 100%;
    max-width: 100%;

    background-image: url("/images/earth_sun/border_a.png");
    background-size: 1000px 150px;
    background-position: calc(50vw - 1000px) 0px;
    background-repeat: repeat-x;
    margin-bottom: -3px;
    margin-top: -6px;
    padding: 0;
    display: block;
}

.dark_earth_sun_bg_grad_bottom {
    background-image: url("/images/earth_sun/border_b.png");
}

.es_space_drawer_container {
    width: 100%;
    height: auto;
    position: relative;
    margin: 2.3em auto 2em auto;
    max-width: 450px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

.es_space_drawer_container:after {
    padding-top: 100%;
    display: block;
    content: '';
}

#es_sun_peri_ap_size:after {
    padding-top: 60%;
}

#es_earth_rotation_solar_day:after {
    padding-top: 85%;
}

#es_earth_orbit_axis_side:after {
    padding-top: 30%;
}

#es_analemma:after {
    padding-top: calc(65% + 30px);
}

#es_analemma {
    max-width: 600px;
}

#es_cosine:after {
    padding-top: 75%;
}

#es_cosine {
    max-width: 600px;
}

#es_sun_size {
    max-width: 400px;
}

#es_plane {
    max-width: 500px;

    cursor: ns-resize;
}

#es_earth_outline {
    max-width: 600px;
}

#es_earth_outline:after {
    padding-top: calc(50% + 2em);
}

#es_base_earth, #es_earth_sunlight, #es_earth_sunlight2 {
    cursor: move;
}

.es_date .slider_left_gutter,
.es_date .slider_right_gutter,
.es_date .slider_knob {
    background: #907567;
}

.es_time .slider_left_gutter,
.es_time .slider_right_gutter,
.es_time .slider_knob {
    background: #5A617A;
}

.es_c0, .es_c1 {
    position: relative;
    margin: 0 0.1em;
    padding: 0.05em 0.25em;
    border-radius: 0.2em;
}

.es_c0 {
    background: rgba(39, 174, 96, 0.6);
}

.es_c1 {
    background: rgba(241, 196, 15, 0.6);
}

.es_spring, .es_summer, .es_fall, .es_winter {
    position: relative;
    margin: 0 0.1em;
    padding: 0.05em 0.25em;
    border-radius: 0.2em;
}

.article a.es_link_button {
    color: #c7ab78;
}

.es_spring {
    background: rgba(39, 174, 96, 0.6);
}

.es_summer {
    background: rgba(255, 198, 0, 0.6);
}

.es_fall {
    background: rgba(167, 89, 0, 0.6);
}

.es_winter {
    background: rgba(200, 200, 200, 0.6);
}

.es_dashed {
    background-image: linear-gradient(to right, rgba(238, 238, 238, 1) 60%, rgba(238, 238, 238, 0) 0%);
    background-position: 0px 1.15em;
    background-size: 8px 1px;
    background-repeat: repeat-x;
}

.es_dotted {
    background-image: linear-gradient(to right, rgba(238, 238, 238, 1) 33%, rgba(238, 238, 238, 0) 0%);
    background-position: 0px 1.15em;
    background-size: 3px 1px;
    background-repeat: repeat-x;
}