/*
html5doctor.com Reset Stylesheet v1.6.1
@rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body { line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

body {
	font: 14px/18px 'Work Sans', sans-serif;
	color: #01c;
  background-color: #fffff9;
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
}

main {
	padding: 25px;
  margin: 25px;
	width: 570px;
  z-index: 2;
  position: relative;
  border-radius: 4px;
  transition: all 0.5s;
}

main:hover {
  background: #fffff9;
}

#stage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

#canvas {
  width: 100%;
  height: 100%;
  cursor: -webkit-grab;
  cursor: grab;
}

#canvas:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

section {
	border-top: 		1px solid rgba(0,17,204,0.2);
	border-bottom:	1px solid rgba(0,17,204,0.2);
	padding: 17px 0;
	margin: 18px 0;
}

h1, h2, h3, h4,
strong, b {
  font-weight: 600;
}

header p {
  margin-top: 8px;
}

dt, dd {
  margin-bottom: 8px;
}

dt {
	margin-top: 20px;
	font-weight: 600;
}

dt:first-child {
	margin-top: 0px;
}

dd a:first-child {
  font-weight: bold;
}

dd.inline {
	display: inline;
}

dd.inline::after {
	content: '\a0\b7';
	opacity: 0.2;
}

dd.no-dot::after {
	content: ''; !important;
}

.mono {
	color: transparent;
	text-shadow: 0 0 0 rgba(0,17,204,0.2);
}

.flip {
	display: inline-block;
	transform: scaleX(-1);
}

a {
	text-decoration: none;
  border-bottom: 1px solid rgba(0,17,204,0.2);
	padding: 0 1px;
	color: #01c;
  transition: all 0.2s;
}

a.with-icon { border-bottom: 0 none; }

a.with-icon span {
  text-decoration: none;
  border-bottom: 1px solid rgba(0,17,204,0.2);
}

a.with-icon:hover,
a.with-icon:active,
a.with-icon:focus { background: transparent; }

a.with-icon:hover span,
a.with-icon:active span,
a.with-icon:focus span,
a:hover,
a:active,
a:focus {
	background: #01c;
  color: #fffff9;
  outline: none;
}

a i { color: #01c; }

::selection {
  color: #fffff9;
	background: #01c;
  text-shadow: none;
}
::-moz-selection {
  color: #fffff9;
	background: #01c;
  text-shadow: none;
}

@media screen and (max-width: 480px) {
  main {
  	padding: 15px 20px;
    margin: 0;
  	width: auto;
  }
  main:hover {
    background: transparent;
  }
}

@media screen and (max-width: 380px) {
 br { display: none; }
}