/* Styles für Beispieldateien */

/* HTML Elements general */

* {
  box-sizing: border-box; /* soll gut für grid-view sein, das ich derzeit nicht verwende 18-06 */
  font-family: Verdana, Arial, sans-serif;
  font-size: 100%;
  line-height: 140%;
  margin: 0;
  padding: 0;
}

*:focus {
  background-color: yellow;
  color: black;
}

*[title] { /* unterstreicht alle HTML-Elemente mit einem TITLE-Attribut */
  border-bottom: black dotted 1px;
  cursor: help;
}

/* Ende HTML Elements general */

/* Regions */

header {
  background-color: #DDD;
  padding: 3ex 15%;
}

#logo {
  background-color: transparent;
  text-align: right;
}

#logo a {
  color: darkred;
  font-size: 125%;
  font-weight: bold;
  padding: 1ex;
}

#logo a:link, #logo a:visited {
  background-color: transparent;
  text-decoration: none;
}

#logo a:hover, #logo a:focus {
  background-color: yellow;
  color: black;
  text-decoration: underline;
}

main {
background-color: transparent;
  margin: 1ex 15%;
}

aside {
background-color: transparent;
  border-top: solid 5px darkred;
  margin: 2ex 1em 1ex 0;
  padding: 1.6ex 15%;
}

/* Ende Regions */

/* HTML Elements individual */

a code {
  font-weight: bold;
}

address {
  font-style: normal;
}

code, code strong {
  font-family: Courier, monospace;
  font-size: 2.0ex;
}

code em {
  font-style: italic;
}

details summary {
  background-color: #DDD;
  color: darkblue;
  cursor: pointer;
  font-size: 125%;
  font-weight: normal;
  margin: .5ex 0;
}

details summary:hover {
  text-decoration: underline;
}

main h1 {
  font-size: 200%;
  margin: 1.6ex 0 .5ex 0;
}

main h2 {
  border-top: solid #DDD 5px;
  font-size: 160%;
  margin: 0.8ex 0 0.8ex 0;
  padding-top: .63ex;
}

main h3 {
  font-size: 125%;
  margin: .5ex 0;
}

main h4 {
  font-size: 100%;
  margin: .8ex 0 .8ex 1.6em;
}

main h5 {
  font-size: 100%;
  margin: .5ex 0 .5ex 2.5em;
  font-style: italic;
}

main h6 {
  font-size: 100%;
  margin: .5ex 0 .5ex 2.5em;
  font-weight: normal;
}

main img {
width: 100%; /* for responsive */
max-width: 100%; height: auto; /* for responsive? */
}

input[readonly] {
  cursor: not-allowed;
}

main ol, main ul {
  background-color: transparent;
  padding: 1ex 1.6em;
}

main p {
  border-bottom: transparent solid 1px; /* damit z.B. Unterlinien für .term nicht stören */
  margin-bottom: 1ex;
}

/* Ende HTML Elements individual */

/* Classes */

.codeSnippet {
  background-color: transparent;
  border-left: dashed darkred 2px;
  font-family: Courier, monospace;
  font-size: 2.0ex;
  margin: 1.6ex 0;
  padding-left: .63em;
}

.codeSnippet em, .codeSnippet strong {
  font-family: Courier, monospace;
  font-size: 2.0ex;
}

.col1 { /* einspaltig*/
  clear: left;
}

.example {
  border: dashed 2px darkred;
  margin: 1ex 0;
  padding: 1ex .8em;
}

.imgLeft {
  float: left;
  width:25%;
}

.gallery  {
  background-color: transparent;
  margin: 1ex .5em;
  padding: 0;
}

.gallery ul {
background-color: transparent;
margin: 0em;
padding: 0;
}

.gallery li {
  background-color: transparent;
  display: inline;
  float: left;
  list-style-type: none;
  margin: .5ex 1em .5ex 0;
  padding: .1ex .1em;
  text-align: center;
}

.gallery a:link, .gallery a:visited  {
  background-color: #DDD;
  color: darkblue;
  text-decoration: none;
}

.gallery a p:focus, .gallery a p:hover {
  background-color: yellow;
  color: black;
  text-decoration: underline;
}

.gallery a img {
  border: blue solid 2px;
  margin: 0;
  width: 8em;
}

.gallery a p {
background-color: #DDD;
  margin: 0;
  padding: 0;
  width: 8em;
}

.left {
  float: left;
  width: 48%;
}

.right {
  margin-left: 50%;
}

.linklist {
  background-color: transparent;
  margin: 0 1em 1.6ex 0;
}

.linklist ul {
  background-color: transparent;
}

.linklist li {
  background-color: transparent;
  list-style-type: none;
  margin-bottom: .6ex;
}

.linklist a {
  display: block;
  text-decoration: none;
} 

.linklist a:link {
  background-color: transparent;
  border-bottom: darkred solid 1px;
  color: darkred;
}

.linklist a:visited {
  background-color: transparent;
  border-bottom: #666 solid 1px;
  color: #666;
}

.linklist a:hover {
  background-color: #DDD;
  border-bottom: black solid 1px;
  color: black
}

.linklist a:focus {
  background-color: yellow;
  border-bottom: black dotted 1px;
  color: black;
}

.sr-only {
  position: absolute;
  left: -1000em;
}

.textRight {
  margin-left: 27%;
}

/* Ende Classes */