/* Style sheet */

@font-face {
  font-family: "Lobster";
  src: url('fonts/Lobster/Lobster-Regular.ttf') format('truetype');
}

@font-face {
  font-family: "Roboto";
  src:
  url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-Black.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-LightItalic.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-Light.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype'),
  url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
}

body {
  font-family: "Roboto";
  width: 80%;
  margin: auto;
}

h1 { font-family: "Lobster"; }

p { color: #444; }

a { text-decoration: none; }

button {
  margin: 4px 4px;
  padding: 10px;
  background-color: #3BAD5F;
  color: #fff;
  border-radius: 10px;
  border: 0;
  font-family: "Roboto";
  font-size: 120%;
  /* box-shadow: offset x, offset y, blur radius, color */
  box-shadow: 4px 4px  5px #888;
}

button:hover { color: #000; }
button:active { box-shadow: none; }

/*.text { position: relative; }*/

#sample {
  font-size: 200%;
  padding: 12px;
  /*background-color: #eee;*/
  border: thin #ededed;
  display: block;
  clear: both;
  margin-bottom: 0px;
  font-family: "Lobster";
  line-height: 1em;
}

.blue { color: blue; }
.red { color: red; }
.green { color: green; }
.black { color: black; }
.shadow {
  color: white;
  text-shadow: 1px 1px 20px #000;
}


.bold { font-weight: bold; }
.italic { font-style: italic; }
.small-caps { font-variant: small-caps; }


.app {
  background-color: #eee;
  padding: 1em;
  border-radius: 20px;
  margin-bottom: 10px;
}
.text, .controls {
  float: left;
}
.text {
  vertical-align: top;
  width: 25%;
  min-width: 14em;
  padding-right: 4px;
}
.contols {
  width: auto;
  padding-left: 4px;
}

.switches {
  clear: both;
}