@import url('http://fonts.googleapis.com/css?family=fredoka|Open+Sans:300,400,600');

* {
  box-sizing: border-box;
  font-size: 18px; font-family: 'calibri', sans-serif;
  font-weight: 300;
}

a {
  text-decoration: none;
  color: inherit;}
.dfltt {
  font-family: 'Times New Roman';
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  text-align: left;
  color: #000000;
}
p {
  font-size: 1.1em;
  margin-bottom: 2em;
}

body {
  width: 80%;
  min-width: 300px;
  max-width: 800px;
  margin: 1.5em auto;
  color: #333;
}

h1 {
  font-family: 'calibri', sans-serif;
  font-weight: 400;
  font-size: 1.25em; color: #F87217;
}

ul {
  list-style: none;
  padding: 0;
}

ul .inner {
  padding-left: 0.5em;
  overflow: hidden;
  display: none;
}

ul .inner.show {
  /*display: block;*/
}

ul li {
  margin: .5em 0;
}

ul li a.toggle {
 width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.5);
 color: #fefefe;
  padding: .75em;
  border-radius: 0.75em;
  transition: background .2s ease;
}

ul li a.toggle:hover {
  background: rgba(248, 114, 23, 1.0);
}

ul li a.taggle {
 width: 100%;
  display: block;
  background: rgba(48, 144, 199, 1.0);
 color: #fefefe;
  padding: .5em;
  border-radius: 0.75em;
  transition: background .2s ease;
}
ul li a.taggle:hover {
  background: rgba(48, 144, 199, 1.0);
}

ul li a.tiggle {
 width: 100%;
  display: block;
  background: rgba(209, 208, 206, 0.7);
 color: #000000;
  padding: .5em;
  border: 1px solid;  border-radius: 0.75em;
  transition: background .2s ease;
}
ul li a.tiggle:hover {
  background: rgba(48, 144, 199, 1.0);
}

ul li a.teggle {
 width: 100%;
  display: block;
  background: rgba(48, 144, 199, 1.0);
 color: #fefefe;
  padding: .25em;
  border-radius: 0.25em;
  transition: background .2s ease;
}
ul li a.teggle:hover {
  background: rgba(48, 144, 199, 1.0);
}