* {
    box-sizing: border-box;
}
/* Style the header */
#outercontainer { margin-left: auto;, margin-right: auto; max-width: 3072px;}
#header {
    padding: 0.5vw;
    margin: 0px;
    text-align: center;
    width: 100%;
    font-size: 2vw;
}
#header div { display: inline-block;
    vertical-align: top;}
#header:after{clear:both;}
#headleft {float: left;}
#headright {float: right;}
#btitle {font-size: 3vw;  font-family: arial; font-weight: bold;}
#breadcrumbs { font-size: 1.5vw; width: 100%; text-align: right;
} 
#leftCol, #midColumn, #rightCol { display: inline-block; }
#leftCol {float: left; padding: 10px; width: 20%; height: 100%; }
#leftCol1 {margin: 2px; padding: 4px;}
#leftCol1 a { text-decoration: none;}
#midColumn {float: left; padding: 10px; width:80%;}

#innercontainer:after { content: "";
    display: table;
    clear: both;
}

.floatLeft { float: left; border: 4px brown inset; border-radius: 10px; padding: 4px; margin-right: 4px;} 
.floatRight { float: right; border: 4px brown inset; border-radius: 10px; padding: 4px; margin-left: 4px;} 

#navbar { margin: 0px 0px; padding: 0.7vw; border-radius: 10px;}
#navbar div {
 display: inline; font-size: 2vw; margin: 0px 0.5vw; 
    font-family: Arial, Helvetica, Sans;  white-space: nowrap;}
#navbar form { display: inline;}
#navbar a { text-decoration: none; font-weight: bolder;}
#level1{ margin: 2px 0px; padding: 0.7vw;  }
#level2{ margin: 2px 0px; padding: 0.7vw; }
#pTOC { margin: 0px;}
#pTOC li { display: inline; border-radius: 10px; padding: 3px; line-height: 170%; white-space: nowrap;}
#sTOC {margin: 0px;}
#sTOC li { display: inline;  border-radius: 10px; padding: 3px; line-height: 170%; white-space: nowrap;}
#topTOC {display: none;}

#footer {
    padding: 10px;
    text-align: center; 
    border-radius: 10px;
}

@media (max-width: 1024px) {
    #leftCol { display: none;}
    #midColumn, #rightCol {
        width: 100%; padding: 2px;
    }
    #topTOC { display: block;}
    .TOCList {display: none;}
    .compatTOC {display: block; font-size: 2vw;}
    .compatTOC { display: inline; float: right; margin-right: 1vw;}
    #compatTOC strong;{font-size: 2vw;}
}

@media (max-width: 700px ) {
#breadcrumbs { font-size: 3vw;}
#navbar div { padding: 2px; font-size: 4vw; border-radius: 0.6vw;
    margin: 0px 2px;}
#level1 {padding: 2px; font-size: 4vw; border-radius: 0.6vw;
 font-size: 3vw; margin: 0px 0.1px;
}
#level2 {padding: 2px; font-size: 4vw; border-radius: 0.6vw;
 font-size: 2.5vw; margin: 0px 0.1px; }
    #midColumn ul {margin-left: -0.5vw;}
    #midColumn li { padding-left: -0.5vw; margin-left: -3vw;}

}
@media (max-width: 500px) {
    #breadcrumbs { font-size: 3vw; }
}