html {
    height: 100%;
}

body {
    padding: 0px;
    margin: 0px; 
    background-color: #7099b3;
    background-image: url('/static/images/background-strip.png');
    background-repeat: repeat-x;
    height:100%;
    text-align: center;
}

#leftbar {
    z-index: -1;
    position: absolute;
    background-image: url('/static/images/circuitry.png');
    width: 222px;
    height: 326px;
}

#contentwrapper {
    transition: 0.5s;
    width: 70%;
    min-height: 100%;
    display: inline-block;
    text-align: left;
    border-left: 20px solid #d5e5ef;
    border-right: 20px solid #d5e5ef;
    background-color: #FFF;
}



#header {
    background-image: url('/static/images/zerosones.png');
    height: 145px;
    background-repeat: no-repeat;
    color: #6f8694;
    overflow: hidden;
}

#header div {

}

#titleimagediv {
    max-width: 100%;
    width: 484px;
    height: 83px;
    padding-top: 23px;
    background-image: url('/static/images/titlebar.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    float: right;
}

#titleimage {
    float: right;
}

#twotraces {
    margin-top: 5px;
    background-image: url('/static/images/twotraces.png');
    background-position: center bottom;
    background-repeat: repeat-x;
    height: 38px;
    display: inline-block;
    width: 100%;
    padding-left: 26px;
    font-weight: bold;
}

#twotracesright {
    background-image: url('/static/images/twotracesright.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    min-height: 38px;
    min-width: 52px;
    height:38px;
    width: 52px;
    display: inline-block;
    float: right;
}

#twotracesleft {
    background-image: url('/static/images/twotracesleft.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    min-height: 38px;
    min-width: 52px;
    height:38px;
    width: 52px;
    display: inline-block;
}

#onetrace {
    background-image: url('/static/images/onetrace.png');
    background-position: center top;
    background-repeat: repeat-x;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
}

#onetraceleft {
    background-image: url('/static/images/onetraceleft.png');
    background-position: left top;
    background-repeat: no-repeat;
    min-height: 41px;
    width: 160px;
    display: inline-block;
    float: left;
}

#breadcrumbs {
    background-image: url('/static/images/breadcrumbs-bg.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    min-height: 45px;
    padding-left:25px;
    float: left;
    max-height: 1em;
    overflow: hidden;
    float: inherit;
    display: inline-block;
    width: 1000%;
}

/* Make breadcrumbs appear in a row */
.breadcrumbs li {
	float:left;    /* this creates the side-by-side array of top-level buttons */
	position:relative;    /* create local positioning contexts for each button */
	margin:0;
    list-style-type: none;
}

/* Tune positioning of breadcumb start */
.breadcrumbs ul {
    padding: 0px;
    padding-left: 25px;
    padding-top: 3px;
}

#bodywrapper {
    height: 100%;
    min-height: 100%;
    width: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: start;
}

#content {
    flex-grow: 3;
    min-height: 100%;
    height: 100%;
    width: 1rem;
    min-width: 70%;
    background-image: url('/static/images/border-hashing.png');
    background-repeat: repeat-y;
    background-position: left top;
}

#contentborder {
    width: 20px;
    height: 73px;
    background-image: url('/static/images/border-hatching-clear.png');
    vertical-align: top;
    float: left;
}

#innercontent {
    color: #616161;
    margin-left: 20px;
}

#sidebar {
    width: 175px;
    flex-grow: 0;
    flex-shrink: 0;
    padding-right: 14px;
    padding-left: 10px;
    color: #616161;
    display: flex;
    flex-direction: column;
}

#sidebar h1,
#sidebar h2,
#sidebar h3,
#sidebar h4,
#sidebar h5,
#sidebar h6 {
    color: #596b88;
    margin-bottom: 0.25em;
    margin-top: 0px;
}

#sidebar ul {
    margin-top: 0.3em;
    margin-bottom: 0px;
}

#sidebar div ul li {
    list-style-image: url('/static/images/sidebarbullet.png');
    margin-bottom: 0.4rem;
}

#sidebar div ul {
    padding-left: 15px;
}

a,
a:visited,
#sidebar ul li a,
#sidebar ul li a:visited {
    color: #616161;
}

#innercontent ul li a,
#innercontent ul li a:visited, 
#innercontent div p a,
#innercontent div p a:visited,
p.notice a,
p.notice a:visited,
p.notice p a,
p.notice P a:visited,
#innercontent p a,
#innercontent p a:visited {
    color: #616161;
}

#breadcrumbs ul li a,
#breadcrumbs ul li a:visited,
#breadcrumbs ul li {
    color: #616161;
}

.widget {
    border-left: 1px solid #979796;
    padding-left: 4px;
}

.widget form p {
    margin-bottom: 0px;
}

.sidebarbender {
    margin-bottom: 1em;
    height: 19px;
    background-image: url('/static/images/sidebarbender.png');
    background-repeat: no-repeat;
}

#onetracebottom {
    background-image: url('/static/images/onetrace.png');
    background-position: center top;
    background-repeat: repeat-x;
    padding-top: 0.5em;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    background-color: #e7ecf0;
    height: 100%;
    align: bottom;
}

#onetracebottom a,
#onetracebottom a:visited,
#onetracebottom {
    color: #616161;
}

pre {
    overflow-x: scroll;
    width: 100%;
    white-space: pre-wrap;
}

img {
    max-width: 100%;
}

.embedded-pdf {
    width: 100%;
    aspect-ratio: 8.5/11;
}

@media screen and (max-width: 975px) {
    #contentwrapper {
        width:100%;
        border-left: 0px;
        border-right: 0px;
    }
}

/* overrides for mobile screens */
@media screen and (max-width : 680px) {
    #content {
        margin-left: 0px;
        min-width: 100%;
    }

    #twotraces {
        color: rgba(0,0,0,0);
    }

    #breadcrumbs {
        left: 0px;
    }

    #onetraceleft {
        width:31px;
    }
}

/* Screen reader "skip to content" link */
#skip a
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
 
#skip a:focus
{
position:float;
width:auto;
height:auto;
left: 0;
top: 0;
background-color: white;
}