.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;
}