/*
 * General style definitions.
 *
 * For some reason, specifying multiple classes when "display: flex" is
 * in use doesn't seem to work. Instead, nesting seems to work o.k.
 *
 *   Doesn't work:
 *     <div class="center border">
 *     ...
 *     </div>
 *   Does work:
 *     <div class="center">
 *       <div class="border">
 *       ...
 *       </div>
 *     </div>
 */

body {
  background-color:#8BD0E5
}

/* Flex container for centering. */
.center {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
}
div.border {
  border: 3px solid gray;
  padding-left: 20px;
  padding-right: 20px;
}
div.margin50 {
  margin-left:50px;
  margin-right:50px;
}
div.margin100 {
  margin-left: 100px;
  margin-right: 100px;
}
div.margin200 {
  margin-left: 200px;
  margin-right: 200px;
}
div.margin350 {
  margin-left: 350px;
  margin-right: 350px;
}

/* Tutorials */
div.tutorial-margin-top {
  margin-top:50px;
}
div.tutorial-caption {
  width:425px;
  text-align:left;
}

/* Buttons */
img.button-margin {
  margin:15px;
}
button.clear {
  background: transparent;
  border: 0px;
}

/* Images */
img.size-medium {
  width:240px;
  height:150px;
}
img.size-large {
  width:480px;
  height:300px;
}
img.image-margin {
  margin:15px;
}