/** CSS Reset **/
*
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;

}

/** Font Families **/
@font-face 
{
    font-family: 'robotothin';
    src: url('../fonts/roboto/roboto-thin-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face 
{
    font-family: 'robotothin_italic';
    src: url('../fonts/roboto/roboto-thinitalic-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-thinitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face 
{
    font-family: 'robotolight';
    src: url('../fonts/roboto/roboto-light-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face 
{
    font-family: 'robotolight_italic';
    src: url('../fonts/roboto/roboto-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face 
{
    font-family: 'robotoregular';
    src: url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face 
{
    font-family: 'robotoitalic';
    src: url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face 
{
    font-family: 'robotomedium';
    src: url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face 
{
    font-family: 'robotomedium_italic';
    src: url('../fonts/roboto/roboto-mediumitalic-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face 
{
    font-family: 'robotobold';
    src: url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/****************************** General ******************************/
html
{
    height: 100%;
    overflow-y: hidden;

}

body
{
    background-color: #FAFAFA;

}

main
{
    height: calc(100vh - 100px);
    overflow-y: auto;

}

h1
{
    font-family: robotoregular;
    font-size: xx-large;
    font-weight: 400;

}

h2
{
    font-family: robotoregular;
    font-size: 24pt;
    font-weight: 300;
    background-color: #E4E4E7;
    text-indent: 10px;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;

}

h3
{
    font-family: robotoregular;
    font-size: 16pt;

}

p
{
    font-family: robotoregular;
    font-weight: lighter;
    line-height: 1.5;

}

li
{
    font-family: robotoregular;
    font-weight: lighter;
    line-height: 1.5;

}



/****************************** Body Containers ******************************/
details.content-container
{
    padding-top: 32px;
    padding-right: 32px;
    padding-left: 32px;
    height: auto;

}

details.content-container[open]
{
    padding-bottom: 32px;

}

details.content-container summary
{
    display: flex;
    flex-flow: row nowrap;
    list-style-type: none;
    background-color: #E4E4E7;
    border-radius: 3px;
    cursor: pointer;
    overflow-x: auto;
    user-select: none;
    margin-bottom: 5px;

}

details.content-container summary::-webkit-details-marker 
{
    display: none;

}

details.content-container summary::before
{
    content: url("/practical_arm_assembly/assets/images/icons/icon_list_001_outline_001.svg");
    width: 24px;
    height: 24px;
    margin: 0px 20px;
    align-self: center;
    filter: invert(71%) sepia(7%) saturate(287%) hue-rotate(202deg) brightness(91%) contrast(84%);
    transform: rotate(90deg);
    flex-basis: 24px;
    flex-shrink: 0;
}

details.content-container[open] summary::before
{
    content: url("/practical_arm_assembly/assets/images/icons/icon_list_001_outline_001.svg");
    transform: rotate(0deg);

}

details.content-container summary p
{
    font-family: robotoregular;
    font-size: 24pt;
    font-weight: 300;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    padding: 0px;
    margin: 0px;
    flex-basis: calc(100% - 24px - 150px);
    min-width: 75px;

}

details.content-container summary div
{
    justify-self: flex-end;
    justify-content: end;
    align-content: center;
    padding: 0px;
    margin: 0px;
    flex-basis: 150px;
    flex-shrink: 0;

}

details.content-container summary div button
{
    border: 1px solid #18181B;
    border-radius: 5px;
    padding: 7px 20px;
    margin: 3px;
    cursor: pointer;
    font-size: 14px;

}

details.content-container summary div button:hover
{
    background-color: #D4D4D8;

}

details.content-container summary div button.inactive
{
    border: 1px solid #A1A1AA;
    background-color: #D4D4D8;
    border-radius: 5px;
    padding: 7px 20px;
    margin: 3px;
    font-size: 14px;
    color: #A1A1AA;
    cursor: default;
    
}

details.content-container p
{
    padding: 10px; 
    margin-left: 10px;
    text-wrap: pretty;

}

details.content-container ul
{
    margin-top: 5px;
    margin-left: 60px;

}

details.content-container ol
{
    margin-top: 5px;
    margin-left: 60px;

}

details.content-container li
{
    text-wrap: pretty;
    margin-bottom: 20px;

}

details.content-container h3
{
    margin-top: 10px;
    margin-left: 16px;

}

div.a64-content
{
    display: none;

}

div.illustration
{
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top: 20px;
    margin-bottom: 45px;

}

div.illustration h3
{
    margin-left: 10px; 
    margin-bottom: 10px;

}

div.illustration img
{
    display: block;
    margin: auto;
}

div.illustration p.emphasized
{
    font-family: robotoitalic;


}

div.codebox
{
    position: relative;
    top: 0px;
    background-color: #27272A;
    border: 1px solid #18181B;
    border-radius: 5px;
    scrollbar-width: thin;
    overflow-x: auto;
    scrollbar-color: #C0C0C0 transparent;
    padding: 15px;

}

div.codebox p
{
    font-family: 'Courier New', Courier, monospace;
    color: #FAFAFA;
    text-wrap: nowrap;
    line-height: 0.75;

}

div.codebox p.indented
{
    padding-left: 45px;

}
div.codebox p.indentedx2
{
    padding-left: 90px;

}

div.codebox p.centered
{
    text-align: center;


}

div.codebox p.symboled
{
    position: relative;
    left: -1ch;

}

div.codebox span.comment
{
    font-family: 'Courier New', Courier, monospace;
    color: #4CAF50;
    padding: 15px;
    padding-right: 75px;

}

div.codebox a
{
    color: #FAFAFA;

}

div.codebox hr
{
    height: 1px; 
    color: #FAFAFA; 
    background-color: #FAFAFA; 
    width: 75%; 
    margin: auto;
    
}

table.content-table
{
    padding: 10px; 
    margin-left: auto;
    margin-right: auto;
    text-wrap: pretty;
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    
}

table.content-table th
{
    font-family: robotoregular;
    font-weight: lighter;
    line-height: 1.5;
    text-align: center;
    padding: 15px; 
    border: 1.5px solid #18181B;
    background-color: #E4E4E7;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;

}

table.content-table td
{
    font-family: robotoregular;
    font-weight: lighter;
    line-height: 1.5;
    padding: 15px; 
    margin-left: 10px;
    border: 1.5px solid #18181B;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    
}

table.content-table tr.centered
{
    text-align: center;

}

table.content-table tr.code td
{
    font-family: 'Courier New', Courier, monospace;

}

table.content-table tr.tiny-text td, tr.tiny-text th
{
    font-size: 1.75ch;
    padding-inline: 5px;

}

table.content-table tr.tiny-text th:active
{
    width: 100%;

}

hr.page-end
{
    background-color: gray;
    height: 1px;
    margin-top: 32px;
    
}


ol.bits
{
    list-style-type: none;

    flex-flow: row;
    content: "Bit: ";
    counter-reset: bitcounter 32; 
}

ol.bits li::before
{
    font-family: robotomedium;
    font-weight: light;
    line-height: 1.5;

    content: "Bit " counter(bitcounter) ".";
    counter-increment: bitcounter -1;
    padding-right: 5px;

}

ol.bits li.asprge::before
{
    font-family: robotomedium;
    font-weight: light;
    line-height: 1.5;

    content: "Bits 19-16."

}