body { overflow: hidden; margin: 0px; font-family: Arial, Helvetica, sans-serif; }

#progressBar { width: 500px; height: 24px; position: absolute; left: 50%; top: 25px; margin-left: -250px; }

#intro {
    position: absolute;
    z-index: 100;   
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#intro h1 {
    text-align: center;
    padding: 4rem;
    color: #FFF;
    text-shadow: 3px 3px 1px #000;
    font-size: 32px;
}

#intro h2 {
    position: absolute; 
    top: 40%;
    max-width: 300px;
    left: 4rem;
    text-align: center;
    color: #FFF;
    text-shadow: 3px 3px 1px #000;
    font-size: 28px;
}

#MainNavigation { 
    position: absolute;
    top: 2rem;
    left: 2rem;
    padding: 1rem;
    background-color: rgba(0,0,0,0.1);
    color: #FFF;
    opacity: 0;
    font-weight: bold;
    text-shadow: 2px 2px 1px #444;
    font-size: 20px;
    line-height: 32px;
    display: none;
}
#MainNavigation.open { display: block; }
#MainNavigation ul { list-style-type: none; padding-left: 0px; margin-left: 0px; }
#MainNavigation ul li { cursor: pointer; list-style-type: none; padding-left: 0px; margin-left: 0px; }
#MainNavigation ul li a { color: #444; text-decoration: none; }


#Step1Launcher span { padding-right: 1rem; color: #00FF00; }
#Step2Launcher span { padding-right: 1rem; color: #0000FF; }
#Step3Launcher span { padding-right: 1rem; color: #EEF103; }
#Step4Launcher span { padding-right: 1rem; color: #FF0000; }

#Step1Instruction h2 span, #Step1-1Content h2 span, #Step1-2Content h2 span { padding-right: 1rem; color: #00FF00; }
#Step2Instruction h2 span, #Step2-1Content h2 span, #Step2-2Content h2 span { padding-right: 1rem; color: #0000FF; }
#Step3Instruction h2 span, #Step3-1Content h2 span, #Step3-2Content h2 span { padding-right: 1rem; color: #EEF103; }
#Step4Instruction h2 span, #Step4-1Content h2 span, #Step4-2Content h2 span { padding-right: 1rem; color: #FF0000; }
                

#Step1Instruction, #Step2Instruction, #Step3Instruction, #Step4Instruction { 
    position: absolute; 
    top: 4rem; 
    right: 4rem; 
    padding: 2rem; 
    background-color: rgba(0,0,0,0.2); 
    color: #FFF; 
    text-shadow: 2px 2px 1px #444;
    display: none; 
    font-size: 20px;
    line-height: 32px;
    font-weight: bold;
}

#Step1Instruction {
    background-color: transparent;
}




#Step1Instruction.open, #Step2Instruction.open, #Step3Instruction.open, #Step4Instruction.open { 
    display: block; 
}

#Step1Instruction a.close, #Step2Instruction a.close, #Step3Instruction a.close, #Step4Instruction a.close { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    color: #FFF; 
    font-weight: bold; 
    display: block; 
    font-size: 32px; 
    padding: 2px; 
    cursor: pointer; 
}

#Step1Instruction ul, #Step2Instruction ul, #Step3Instruction  ul, #Step4Instruction ul { 
    list-style-type: none;
    padding-left: 0px;
    margin-left: 0px;
}

/* #Step1Instruction ul li a, #Step2Instruction ul li a, #Step3Instruction  ul li a, #Step4Instruction ul li a { 
    color: #FFF;
} */

#Step1Instruction ul li a, #Step2Instruction ul li a, #Step3Instruction  ul li a, #Step4Instruction ul li a { 
    color: #FFF; 
    text-decoration: none; 
}

.step-content { 
    display: none; 
    position: absolute; 
    top: 4rem; 
    right: 4rem; 
    width: 50%;
    min-width: 700px;
    bottom: 4rem;
    padding: 2rem; 
    background-color: rgba(255,255,255,0.6); 
    color: #444;
    overflow: scroll;
    overflow-x: hidden; 
    flex-wrap: wrap;
    flex-direction: row;
}
.step-content.open { display: flex; }

.step-content a.close { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    color: #FFF; 
    font-weight: bold; 
    display: block; 
    text-align: center; 
    font-size: 32px; 
    padding: 2px; 
    line-height: 10px; 
    cursor: pointer; 
}

.step-content h2 {
    flex-basis: 100%;
    display: block;
    color: #444;
}

.step-content p { 
    color: #444; 
    flex-basis: 80%;
}

.step-content ul.progress-line {
    flex-basis: 80%;
    position: relative;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    margin-top: 2rem;
}

.step-content ul.progress-line::before {
    content: ' ';
    position: absolute;
    top: 2rem;
    left: 30px;
    border-left: solid 1px #DDD;
    height: calc(100% - 100px);
}

.step-content ul.progress-line li {
    padding: 0px;
    margin: 0px;
    position: relative;
    padding-left: 4rem;
    min-height: 70px;
    padding-bottom: 3rem;
}

.step-content ul.progress-line li span.item-number {
    position: absolute;
    left: 15px; 
    top: 0rem;
    background-color: #888;
    color: #FFF;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/*.step-content ul.progress-line li .item-content { display: none; }
.step-content ul.progress-line li .item-actions { display: none; }*/

.step-content ul.progress-line li .item-content { 
    display: block;
}

.step-content ul.progress-line li .item-actions { 
    display: flex;
    padding-top: 1rem;
    justify-content: space-between;
}

.step-content ul.progress-line li .item-actions.only-one {
    justify-content: flex-end;
}

.step-content ul.progress-line li .item-actions .launch {
    border-radius: 10px;
    background-color: orange;
    color: #FFF;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

.step-content ul.progress-line li .item-actions .completed {
    border-radius: 10px;
    background-color: #888;
    color: #FFF;
    text-decoration: none;
    padding: 0.5rem 1rem;
    justify-self: flex-end;
}

.step-content ul.progress-line li .item-actions .completed.done {
    background-color: green;
    content: '✓';
}

#skip {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    display: inline-block;
    border-radius: 10px;
    background-color: orange;
    color: #FFF;
    text-decoration: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    z-index: 100;
}

#go {
    position: fixed;
    right: 8rem;
    bottom: 2rem;
    display: inline-block;
    border-radius: 10px;
    background-color: green;
    color: #FFF;
    text-decoration: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    z-index: 100;
}

footer { position: fixed; bottom: 0px; height: 15px; color: #FFF; background-color: rgba(0,0,0,0.5); display: flex; overflow: hidden; padding: 5px; width: 100%; font-size: 12px; }
footer.open { height: auto; }
footer .credits { flex-basis: 50%; text-align: left; padding-left: 10px; }
footer .credits a#credits { cursor: pointer; }

footer .copy { flex-basis: 50%; text-align: right; padding-right: 10px; }