*{ padding: 0px; margin: 0px; }

body{ background-color: #111; color: #ddd; font-family: "Ubuntu Mono", monospace; padding: 0px; padding-left: 0px; }

header{ font-size: 16pt; background: #111; position: fixed; top: 0px; left: 0px; border-top: 10px solid #111; border-bottom: 10px solid #111; }
    .logo{ height: 28px; margin-bottom: -8px; padding: 0px 2px; }

#content_container{ margin-top: 120px; margin-bottom: 50px; font-size: 11pt; }
    #content p{ line-height: 130%; }
    #spacer{ display: block; }

#overlay{ display: none; width: 1200px; height: 70%; background: #222; border: 3px solid #099; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    #overlay_head{ background: #888; color: #444; position: relative; padding-left: 10px; margin-bottom: 20px; }
        #overlay_head a{ position: absolute; right: 0px; background-color: #099;  color: #111; text-decoration: none; }
    #overlay_content{  padding: 10px; overflow-y: scroll; height: calc(100% - 60px); }

nav{ top: 70px; border-bottom: 12px solid #111; }
nav, footer{ background-color: #888; font-size: 14pt; display: block; text-transform: uppercase; position: fixed; }
    nav a, footer a{ color: #111; text-decoration: none; display: inline-block; }
    nav a:hover{ background-color: #900; color: #ddd; }
    .nav_padding{ padding: 3px 11px; display: inline-block; }

footer{ position: fixed; bottom: 0px; left: 0px; display: block; font-size: 10pt; }
    footer a:hover{ background-color: #444; color: #fff; }
    footer .nav_padding{ padding: 3px 11px 3px 1px; }
    .hotkey{ background-color: #099; padding: 3px 2px 3px 5px !important; }

#content{ margin-top: 20px; font-size: 11pt; height: calc(100vh - 50px); }
    #content table tr td{ vertical-align: top; padding-right: 20px; padding-bottom: 20px; }

    ul li{ margin-left: 25px; list-style-type: square; }


h1 sup{font-size: 40%; }

strong{ color: #099; font-weight: bold; }

a{ font-weight: bold; color: #900; text-decoration: none; }
a::before{content: "["; }
a::after{content: "]"; }
a:hover, a:focus{ color: #fff; }

footer a::before, footer a::after, #overlay_head a::before, #overlay_head a::after, #top_anchor::before, #top_anchor::after{ content: ""; }

.bold{ font-weight: bold; }
.red{ color: #900; }
.yellow{ color: #990; }
.green{ color: #090; }
.teal{ color: #099; }
.gray{ color: #777; }

.full_width{ width: 1480px; margin-left: calc(calc(100vw - 1480px) / 2); }

.selection_span{ padding: 5px; width: 300px; display: inline-block; margin-right: 20px; margin-bottom: 24px; text-align: center; cursor: pointer; }
    .selection_span img{ width: 70%; margin: auto; display: block; margin-bottom: 15px; }
    .selection_span_active{ background: #099; }

    /* Make dropdown background black when open */
.form_test_package { background-color: #222 !important; color: #fff !important; width: 100%; color: #fff; padding: 10px; font-size: 14pt; border: 1px solid #333; }
.form_test_package:focus { background-color: #222 !important; color: #fff !important; }
.form_test_package option { background-color: #111; color: #fff; }

.deco_img{ width: 100%; }

#error_msg{ background-color: #900; color: #fff; padding: 10px; border: 1px solid #FFF; }
#success_msg{ background-color: #070; color: #fff; padding: 10px; border: 1px solid #FFF; }

#contact_form input, #contact_form textarea{ background-color: transparent; border: 2px solid #222; color: #444; padding: 5px; font-size: 13pt; caret-color: #CCC; caret-shape: block; }
#contact_form input[type=text], #contact_form input[type=email], #contact_form input[type=password], #contact_form input[type=tel], #contact_form textarea{ border: 2px solid #444; width: 600px; }
#contact_form input[type="submit"] { color: #fff !important; background-color: #900; border-top: 2px solid #eee; border-left: 2px solid #eee; border-bottom: 2px solid #444; border-right: 2px solid #444; box-shadow: 5px 5px 0px 0px #333; padding: 5px 15px; font-weight: bold; cursor: pointer; font-family: "Ubuntu Mono", "Courier New", monospace; font-size: 12pt; text-transform: uppercase; border-radius: 0; outline: none; appearance: none; }
    #contact_form input[type="submit"]:active { border-top: 2px solid #444; border-left: 2px solid #444; border-bottom: 2px solid #eee; border-right: 2px solid #eee; transform: translate(5px, 5px); box-shadow: 2px 2px 0px 0px #333; }
#contact_form table tr td:first-child{ padding-right: 20px; }

#learner_list{ border-collapse: collapse; }
    #learner_list tr th{ color: #900; }
    #learner_list tr td, #learner_list tr th{ padding: 5px 5px 5px 5px !important; }

.videolist{ width: 340px; padding-right: 32px;}

#content ul li, #content ol li{ margin-left: 40px; padding: 3px 0px; }
#content table tr th{ text-align: left; }
#content table tr th, #content table tr td{ padding-right: 20px; }

#content a::before{content: ""; }
#content a::after{content: ""; }

/* TABLET */
@media (max-width: 1560px) {
    .full_width{ width: calc(100% - 40px); margin-left: 15px; }
    #content_container{ margin-top: 155px; }
    #overlay{ width: 900px; }
}

/* MOBILE PHONE */
@media (max-width: 960px) {
    #spacer{ height: 125px; }
    #var_www_html{ display: none; }
    #overlay{ width: 90%; }
    nav a{ display: block !important; }
    #content_container{ margin-top: 20px; }
    .full_width{ width: 90%; }
    nav, footer, header{ position: relative; top: 0; }
    table, tr, td{ display: block; }
    #contact_form input[type=text], #contact_form input[type=email], #contact_form input[type=tel], #contact_form textarea{ width: 90%; }
    #content{ height: auto; }
    #spacer{ display: none; }
    #jump_to, .welcome_to{ display: none; }
    table tr td img{ max-width: 100%; } 
}