/* Customizing skeleton. Mostly about the nav bar */

a { color: blue; }  /* overrides skeleton */

/* no underlines for links in the nav bar */
#site_nav a {
    text-decoration: none;
}

#site_nav ul {
    margin: 0px;
    list-style-type: none;
}

#site_nav > ul > li {
    display: inline-block;
    margin: 0px;
    padding: 0px 1rem;
}

/* just put the line on the left, except for the first */

#site_nav > ul > li {
    border-left: 1px solid teal;
}

#site_nav > ul > li:first-child {
    border-left: 0px;
}


#site_nav > ul > li:hover {
    background-color: #ccc;
}

#site_nav li.dropdown {
    position: relative;
}

#site_nav ul.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #eee;
    border: 2px solid teal;
    width: 20rem;
    opacity: 1.0;
    top: 100%;
    left: 0px;
    z-index: 2;
}

#site_nav ul.dropdown-menu li {
    border-bottom: 1px solid teal;
    margin-bottom: 0px;
}

#site_nav a {
    display: inline-block;
    width: 100%;
}

#site_nav ul.dropdown-menu li:hover {
    background-color: #ccc;
}

/* skeleton's default button:focus is invisible to my eyes */

button:focus {
    border: 2px solid red;
}

@media print {
    .container { width: 100%; }
}

/* https://www.accessibility-developer-guide.com/examples/hiding-elements/visually/ */
.visually-hidden {
  position: absolute;
  left:     -10000px;
  top:      auto;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

.exercise, .example {
    border: 2px solid deepskyblue;
    border-radius: 20px;
    padding: 20px;
    background-color: #d3f2f8;
}

/* skeleton sets it to 960, which causes line-wrapping with wide code. */
.container { max-width: 80em; }