body > nav ul {
  padding: 0;
}
body > nav li {
  display: inline-block;
}

/* index page, tests page and context independent test pages need a bit of white space around */
body#index,
body#tests,
body.base,
body.module {
  margin: 1rem;
}

div.test-smallbox {
  max-width: 18rem;
  border: 1px solid #000;
}


body#columns > main > div > div,
body#columns > main > div > div > section,
body#columns > main > div > section {
  border: 1px dashed;
}

body#button main > div > section > ul > li {
  display: inline-block;
}

/* state */
body#introduction > header ul.site-links > li.introduction > a,
body#button > header ul.site-links > li.buttons > a,
body#form > header ul.site-links > li.forms > a,
body#table > header ul.site-links > li.tables > a,
body#widgets > header ul.site-links > li.widgets > a {
  font-weight: bold;
  text-shadow: 0 -1px 1px rgb(0, 0, 0, .2);
  background-color: #999;
  box-shadow: 0 1px 0 #bbb inset;
}

body#footer {
  display: flex;
  flex-direction: column-reverse;
}
body#button button,
body#button input,
body#button .button {
  margin-bottom: 1rem;
}

#columnstest {
  columns: 10rem 10;
  -moz-columns: 10rem 10;
  -webkit-columns: 10rem 10;
}

/* example */
nav.pagination[id^="example"] {
  font-size: .75rem;
  font-weight: bold;
  padding: 2rem;
  background-color: #f2f2f2;
}
nav.pagination[id^="example"] > ol > li:not(:last-child) {
  margin-right: .25rem;
}
nav.pagination[id^="example"] > ol > li.active,
nav.pagination[id^="example"] > ol > li > a {
  text-shadow: 0 1px 0 #fff;
  padding: .25rem .75rem;
  border-radius: .1875rem;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255, .8), 0 1px .1875rem rgb(0, 0, 0, .1);
}
nav.pagination[id^="example"] > ol > li.active {
  color: #f0f0f0;
  text-shadow: 0 0 .1875rem rgb(0, 0, 0, .5);
  background-color: #616161;
  box-shadow: inset 0 0 .5rem rgb(0, 0, 0, .5), 0 1px 0 rgb(255, 255, 255, .8);
}
nav.pagination[id^="example"] > ol > li > a {
  color: #717171;
  text-decoration: none;
  border: 1px solid #c0c0c0;
  background: #e9e9e9 linear-gradient(#f8f8f8, #e9e9e9);
}
nav.pagination[id^="example"] > ol > li > a:hover {
  background: #fefefe linear-gradient(#fefefe, #f0f0f0);
}
/* example night */
nav.pagination#example_night {
  background-color: #414449;
}
nav.pagination#example_night > ol > li.active,
nav.pagination#example_night > ol > li > a {
  color: #feffff;
  text-shadow: 0 1px 0 rgb(0, 0, 0, .5);
  box-shadow: inset 0 1px 1px rgb(255, 255, 255, .1), 0 1px .1875rem rgb(0, 0, 0, .1);
}
nav.pagination#example_night > ol > li.active {
  background-color: #2f3237;
  box-shadow: inset 0 0 .5rem rgb(0, 0, 0, .5), 0 1px 0 rgb(255, 255, 255, .1);
}
nav.pagination#example_night > ol > li > a {
  border: solid 1px #32373b;
  background: #3e4347 linear-gradient(#565b5f, #3e4347);
}
nav.pagination#example_night > ol > li > a:hover {
  background: #3d4f5d linear-gradient(#547085, #3d4f5d);
}

/* toddler */
body#toddler > main > section {
  margin: 0 1rem 1rem 0;
  padding: 1rem;
  background-color: #eee;
}
body#toddler > main > section:nth-child(1) {
}
body#toddler > main > section:nth-child(2) {
}
body#toddler > main > section:nth-child(3) {
}
body#toddler > main > section:nth-child(4) {
}
body#toddler > main > section:nth-child(5) {
}

#themetoggle {
  color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  margin: 0;
  padding: .25rem .75rem;
  background-color: #000;
}

@media screen and (min-width: 20rem) {
  body#toddler > main {
    display: flex;
  }
  body#toddler > main > section {
    width: 33%;
  }
}