@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  font-family: Open Sans;
  background-color: #16a085;
}

body #container {
  margin: 150px auto 50px auto;
  max-width: 60rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 2rem;
  background-color: #fff;
}

body #container a { color: #16a085; }

body #container header h1 {
  font-size: 2rem;
  margin-top: 0;
}

body #container header h1 .credits {
  float: right;
  margin-top: 0.6rem;
  font-size: 0.8rem;
}

body #container header h1 .credits a { text-decoration: none; }

body #container header h1 .credits a:hover { text-decoration: underline; }

body #container main h3 { margin-bottom: 0; }

body #container main h3 code {
  margin: 0 0.45rem;
  display: inline-block;
}

body #container main ul.demo-links {
  list-style: none;
  margin-top: 0;
}

body #container main ul.demo-links li {
  margin: 0.5rem 0 2rem -1rem;
  display: inline-block;
  width: 33%;
  vertical-align: top;
  padding: 0.25rem;
  font-size: 1.25rem;
}

body #container main ul.demo-links a.demo-link {
  display: inline;
  margin: 1px;
}

body #container main ul.demo-links a.demo-link:hover {
  border: 1px solid #16a085;
  margin: 0;
}

.cooltip {
  position: absolute;
  background-color: rgba(20, 20, 20, 0.85);
  color: #fff;
  padding: 0.5rem 0.7rem;
  display: none;
  font-size: 0.85rem;
}

.cooltip.direction-top { margin-top: -0.7rem; }

.cooltip.direction-top:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 0.4rem solid rgba(20, 20, 20, 0.85);
  border-right: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
  border-left: 0.4rem solid transparent;
  top: 100%;
 left: calc(50% - .4rem);
}

.cooltip.direction-right { margin-left: 0.7rem; }

.cooltip.direction-right:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 0.4rem solid transparent;
  border-right: 0.4rem solid rgba(20, 20, 20, 0.85);
  border-bottom: 0.4rem solid transparent;
  border-left: 0.4rem solid transparent;
 top: calc(50% - .4rem);
  right: 100%;
}

.cooltip.direction-bottom { margin-top: 0.7rem; }

.cooltip.direction-bottom:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-bottom: 0.4rem solid rgba(20, 20, 20, 0.85);
  border-left: 0.4rem solid transparent;
  bottom: 100%;
 left: calc(50% - .4rem);
}

.cooltip.direction-left { margin-left: -0.7rem; }

.cooltip.direction-left:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
  border-left: 0.4rem solid rgba(20, 20, 20, 0.85);
 top: calc(50% - .4rem);
  left: 100%;
}

.cooltip.direction-top.align-right:after, .cooltip.direction-bottom.align-right:after { left: 0.3rem; }

.cooltip.direction-top.align-left:after, .cooltip.direction-bottom.align-left:after {
  left: initial;
  right: 0.3rem;
}

.cooltip.direction-right.align-top:after, .cooltip.direction-left.align-top:after {
  top: initial;
  bottom: 0.3rem;
}

.cooltip.direction-right.align-bottom:after, .cooltip.direction-left.align-bottom:after { top: 0.3rem; }

/*# sourceMappingURL=cooltip.css.map */