div.main:after { content: ''; display: table; clear: both; }

body { background: #f2f2f2; color: #444444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0px; text-rendering: optimizeLegibility; }

a { color: #3a8bbb; text-decoration: none; }
a:hover { color: #1e6189; }

ol, ul { list-style: none; padding-left: 0; margin: 0; }

article ul { list-style: disc; padding-left: 25px; margin: auto; }
article img { max-width: 100%; }

header.site-header { background: #333333; color: rgba(255, 255, 255, 0.49804); }
header.site-header nav { margin: 0 auto; padding: 20px 10px; vertical-align: baseline; width: 970px; }
header.site-header a, header.site-header a:visited { color: rgba(255, 255, 255, 0.5); display: inline-block; font-size: 18px; font-weight: bold; vertical-align: baseline; }
header.site-header a.logo { float: left; border-right: 1px solid rgba(255, 255, 255, 0.11765); margin-right: 10px; padding-right: 10px; }

div.main { margin: 40px auto; width: 970px; }
div.main div.page-content { background: #ffffff; border-radius: 10px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08); float: left; padding: 10px 40px; width: 642px; }
div.main ul#markdown-toc { margin: 30px 0 0 0; overflow: hidden; }
div.main ul#markdown-toc > li { margin: 0 0 10px 0; font-size: 20px; list-style: none; }
div.main ul#markdown-toc > li a { display: block; font-weight: bold; }
div.main ul#markdown-toc > li ul { margin: 10px 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #eee; }
div.main ul#markdown-toc > li ul li { font-size: 15px; line-height: 1.5; list-style: none; }
div.main ul#markdown-toc > li li a { display: block; margin: 0 20px 10px 0; font-weight: normal; }
div.main h1 { clear: both; margin: 30px 0 0 0; padding: 20px 0 0 0; font-size: 30px; font-weight: 500; line-height: 1.3; color: #ea4c89; border-top: 3px solid #ddd; }
div.main h1:first-of-type { padding: 0; border: none; }
div.main h2 { clear: both; margin: 40px 0 0 0; padding: 40px 0 20px 0; font-size: 20px; font-weight: bold; line-height: 1.3; border-top: 1px solid #eee; }
div.main h1 + h2 { margin: 20px 0 0 0; padding-top: 0; border: none; }
div.main p { margin: 0 0 20px 0; font-size: 16px; line-height: 1.5; color: #777777; }
div.main ul { margin-bottom: 20px; }
div.main ul li { margin: 0 0 5px 0; font-size: 16px; line-height: 1.5; color: #777777; }
div.main iframe { margin: 0 0 20px 0; }
div.main a { font-weight: 500; }
div.main img.fig { float: right; margin: 5px 0 30px 30px; border-radius: 3px; }
div.main img.fig + br { display: none; }
div.main aside.sidebar { color: #777777; float: right; font-size: 14px; width: 220px; }
div.main aside.sidebar h3 { font-weight: normal; }
div.main aside.sidebar h3 span { color: #444444; font-weight: bold; }
div.main aside.sidebar img.help-icon { border-radius: 6px; float: left; margin: 4px 10px 0 0; width: 50px; }
div.main aside.sidebar p { padding: 0 0 20px 0; font-size: 13px; line-height: 1.5; border-bottom: 1px solid #ddd; }
div.main aside.sidebar ul.connect a { display: block; font-size: 14px; line-height: 24px; padding: 6px 0; color: #777777; }
div.main aside.sidebar ul.connect a:hover { color: #444444; }
div.main aside.sidebar ul.connect img { float: left; border-radius: 50%; margin-right: 6px; width: 24px; opacity: .72; }
div.main aside.sidebar ul.connect a:hover img { opacity: .51; }

footer.site-footer { background: #ffffff; color: #777777; clear: both; font-size: 14px; }
footer.site-footer .inner { margin: 0 auto; padding: 30px 0; width: 970px; }

/* responsive video wrapper */
.video-wrapper { position: relative; padding-bottom: 55.46875%; height: 0; margin-bottom: 20px; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media screen and (max-width: 1000px) { div.main { width: auto; }
  div.main ul#markdown-toc { padding: 0; }
  div.main img.fig { float: none; display: block; margin-left: 0; }
  div.main div.page-content { float: none; width: 100%; box-sizing: border-box; padding: 10px 20px; }
  div.main aside.sidebar { float: none; width: 100%; box-sizing: border-box; padding: 0 20px; }
  header.site-header nav { width: auto; padding: 20px; }
  footer.site-footer .inner { width: auto; padding: 30px 20px; } }