/* site wide elements */

html, body, header, h1 {
  margin:0px;
  padding:0px;
  font-size:22px;
  scroll-padding-top: 100px; 
  scroll-behavior: smooth;
}

p, html, body, header, h1 {
  line-height:1.5
}

p {
  text-align: justify;
}

a {
  text-decoration: none;
  color:#010a7d
}

a:hover {
  text-decoration: underline;
}


/* keyboard skip links */

.skip-link {
  color:white;
  position:fixed;
  top:0px;
  left:0px;
  translate: 0 -110%;
}
.skip-link:focus {
  translate:0;
}


#logo {
  text-decoration: none;
  color:#ffee99;
}

header {
  text-align:center;
  background: linear-gradient(180deg, rgba(130,58,0,1) 0%, rgba(0,0,0,1) 100%);
  padding:0px;
  margin:0px;

}

header h1 {
  font-size:42px;
  line-height:100px;
  text-align:center;
  text-shadow: -1px -1px 2px #eeff99;
  text-shadow: 1px 1px 2px black;
}


/* heading are TOC friendly but other elements may need to be displayed the same */


h2.h2 {
  font-weight: 600;
  text-align:center;
}

h2, .h2 {
  font-size:30px;
  text-indent:30px;
}

h3, .h3 {
  font-size:22px;
  text-indent:30px;
} 

.h3 a, h3 a {
  color:#010a68
}

.h3:hover a, h3:hover a {
  color:#004488;
  text-decoration: underline;
}

.show-links:hover a {
  color:#004488;
  text-decoration: underline;
}
.h3 {
    margin: 15px;
}

.desk-right>.h3 {
    text-wrap: balance;
    text-indent: 0px;
    margin: 25px;
}


footer {
   background: linear-gradient(180deg, rgba(130,58,0,1) 0%, rgba(0,0,0,1) 100%);
   color: #ffffbb;
   text-indent: 30px;
   margin: 40px 0 0 0;
   height: 40px;
   padding: 0;
}
footer a {
   color: #ffffbb;
   line-height: 30px;
}
footer.bottom {
  position: fixed;
  bottom: 0;
  width:100%;
  display: block;
  margin: 50px 0 0 0;
}


/* site wide menu and navigation */

.menu {
  margin: 0;
  padding: 0;
}

.menu>ul {
  list-style-type: none;
}

.menu li {
  margin: 0px 20px;
  padding:0px;
  display: inline-block;
  position:relative;
  line-height:50px;
}

.menu a {
  text-decoration: none;
  text-align:center;
  display: inline-block;
  border-radius: 15px;
  line-height:30px;
  background:#004488;
  color:#ffffbb;
  width:150px;
  text-align:center;
  z-index:9;
}

.menu a:hover {
  line-height:40px;
}

.menu a.hl {
  color:#0e1338;
  background:#eeff99;
}

.main nav a {
  background:#773300;
//  color:#0e1338;
}

/* site wide page themes */

.content {
  margin:8px;
  font-size:20px;
  padding-top:30px;
}

.indent-group {
  padding-left:30px;
}

/* Need two columns */

.desk-cols { 
  display: inline-grid;
  grid-template-columns: auto 480px;
  column-gap: 50px;
  margin:8px;
  margin-bottom:20px;
  font-size:20px;
  padding-top:30px;
}

/* aside class */

.desk-right {
    grid-column: 2;
    background:#eee;
    padding: 0px 20px 0px 20px;
    border-radius: 15px;
}

@media screen and (max-width: 1200px) {
    .desk-right {
        grid-column: 1
    }
    .desk-cols { 
      grid-template-columns: auto;
    }
}    





/* masked floats */

img.mag-right, img.fit {
   float: right;
   max-width: 100%;
}


@media screen and (max-width: 700px) {
    #main-content img {
       float: none;
       margin:auto;
       display:block;
    }
    img.mag-right {
       float: none;
       margin:auto;
       display:block;
    }
}    



/* Category | article */
.article {
    margin:30px;
    border-left: thin double #888;
}

.article > * {
    padding: 0px 15px;
}




/* structured grouping */

.structured {
   margin-left:30px;
   margin-bottom:40px;
   clear:left;
   display: flex;
   border: 2px solid silver;
   border-radius: 15px;
   overflow: hidden;
}

.structured>h3 {
   writing-mode: vertical-lr;
   width:40px;
   margin:0;
   padding:20px 10px;
   background:#eee;
   border-right: 2px solid silver;
}

.in-structure {
   float:right;
   margin:30px;
   color:silver;
}
hr {
    width:25%;
    margin:30px;
}
h3 {
    text-wrap: balance;
    text-indent:0px;
    padding-left:30px;
}

#main-content, aside {
   margin-bottom:30px;
}

/* October Classes */



/* Bread Crumbs */

.breadcrumb {
    padding: 15px 3px 8px 8px;
    line-height: 30px;
    background: #eee;
    font-family: "Roboto";
}
.breadcrumb>ol {
   margin:0px;
   padding:0px;
}
.breadcrumb>ol>li {
    list-style-type: none;
    display: inline; 
}
.breadcrumb>ol>li::before {
     content: '  |  ';
 }
.breadcrumb>ol>li:first-child::before {
     content: '';
 }
.breadcrumb a {
     margin: 30px 15px 0px 15px;
}

 /* Grid three */
 
.grid-three {
  display: inline-grid;
  grid-template-columns: 480px auto;
  grid-template-rows: auto 1fr; 
  column-gap: 25px;
  margin:8px;
  margin-bottom:20px;
  font-size:20px;
}
.grid-three > nav {
    grid-column: 1;
    background:#eee;
    padding: 0px 20px 0px 20px;
    border-radius: 25px 25px 0 0;
 }
.grid-three > nav > .h2 { 
   text-indent: 0px;
}
.grid-three > section {
   grid-row: span 2;
   padding: 0 25px 25px 0;
}

.grid-three > aside {
    grid-column: 1;
    background:#eee;
    padding: 0px 20px 0px 20px;
    border-radius: 0 0 25px 25px;
}
.grid-three > aside > .h2 { 
   text-indent: 0px;
}
@media screen and (max-width: 1200px) {
    .grid-three > * {
        grid-column: 1
    }
    .grid-three { 
      grid-template-columns: auto;
    }
}    

/* misc semi-semantic, semi-function classes */

.h2-special  h2 {
  margin-top:68px;
}
.h2-special > h2:first-of-type {
  margin-top:24px;
}

.pixels {
   max-width:100%;
   margin:auto;
   display:block;
}

.like-logo {
    display: block;
    font-family: "Roboto";
    font-weight: normal;
    font-size: 42px;
    line-height: 100px;
    text-align: center;
    color: #cc6633;
}
.like-logo > a {
    text-decoration: none;
    color: #cc6633;
}

.like-logo > a:hover {
      text-decoration: underline;
}

.like-h2 {
  font-size:30px;
  padding:5px;
}
.like-h3 {
    text-wrap: balance;
    font-size:22px;
    padding:7px;
}
.special a{
   color: red;
}
@supports (animation-timeline: scroll()) {
   .breadcrumb {
      padding-top:108px;
   }
   header {
      position:fixed;
      width:100%;
      height:100px;
      animation-name: ScrollAnimation;
      animation-timeline: scroll();
   }
   @keyframes ScrollAnimation {
     from {
        top: 0px;
     }
     to {
        top: -100px;
     }
   }
}