/* Common Teacher Website Styles */

#header { position: relative; }
#header #intro { position: absolute; }
#contents { position: relative; padding: 3px; }
#sidebar { position: relative; }

#sidebar li.private a { color: #bbb; }

/* Reset Generic Elements */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}img,body,html{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}

b, strong { font-weight: bold !important;}
i, em { font-style: italic !important; }
.content ul, .content ul li { list-style: disc outside; }
.content ol, .content ol li { list-style: decimal outside; }
.content ul, .content ol { margin-left: 2.2em; }

.sr-only {
  /*text for screen readers*/
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* For accessibility: set the focus color so keyboard-only users can tell what is focused*/
:focus {
    outline: 2px dotted #6495ed !important;
}

.goog-te-gadget {
    display: inline-block;
}

.google_translate_element {
    padding-top: 5px;
}

/* Mobile Resolution Support */
@media only screen and (max-width: 600px) {
    #wrapper,
    #header,
    #container,
    #footer {
        width: 100% !important;
        max-width: 850px !important;
    }
    .master-container {
        display: flex !important;
        justify-content: center !important;
    }
    .master-container * {
        position: static !important;
        box-sizing: border-box !important;
    }
    #container {
        display: flex !important;
        flex-direction: column !important;
    }
    .header-container {
        width: 100% !important;
    }
    #wrapper {
        display: flex !important;
    }
    #contents {
        flex: 1 !important;
        width: unset !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #header {
        margin-left: 0 !important;
        margin-right: 0 !important;
        background-position: center !important;
    }
    #wrapper {
        flex-direction: column !important;
    }
    #sidebar {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .title,
    ul[role="menu"],
    li[role="menuitem"],
    li[role="menuitem"] a {
        height: unset !important;
        width: 100% !important;
        text-indent: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #sidebar li,
    .body-content {
        /* Standardize the padding */
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .body-content img,
    .body-content video,
    .body-content figure {
        width: 100% !important;
        height: auto !important;
    }
    .body-content iframe {
        width: 100% !important;
        height: unset !important;
        aspect-ratio: 16 / 9 !important;
    }
    .clearBoth {
        display: none !important;
    }
    #footer {
        padding: 0 !important;
        margin: 0 !important;
    }
}