/*
COLORS:
main_color:  #882FCB;
light_color: #F7F1FB;
*/

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Main */

html {
  box-sizing: border-box;
  font-family: "franklin-gothic-urw", "Helvetica Neue", "Helvetica";
  font-size: 62.5%;
}
* { box-sizing: inherit; }

.wrap { width: 96rem; margin: 0 auto; }

/* Typography */

h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; color: #999999; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 17px; }
p, li { font-size: 18px; color: #444444; line-height: 1.4; }
ul {list-style-type: circle; padding-left: 20px;}
li { margin-bottom: 30px; }

h1, h2, h3, h4, h5, h6, p, .spec-pair, code.hljs { margin-bottom: 30px; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; }

a { text-decoration: none; color: inherit; }

strong { font-weight: 500; }
em { font-style: italic; }

/* Code */

code { font-family: "source-code-pro", "Menlo", monospace; font-size: 1.3rem; white-space: pre; }
code.hljs { padding: 20px; border-radius: 4px; border: 1px solid #882FCB; line-height: 1.6; }
h1 > code, h2 > code, h3 > code, h4 > code, p > code { background: #882FCB; color: white; padding: 1px 6px; border-radius: 2px; margin: 2px; font-size: 15px; }


/* Components */
.button { color: #882fcb; border: 1px solid #882fcb; background: #f7f1fb; border-radius: 4px; padding: 8px 16px; font-size: 1.6rem; }
.button:hover { color: white; background: #882fcb; }
.button:active { margin-bottom: -1px; }

/* Navigation Bar */

.navigation { padding: 2rem; border-bottom: 1px solid #eee; margin-bottom: 4rem; }

.navigation > * { display: inline-block; vertical-align: middle; margin-right: 4rem; }

.navigation-logo {  }
.navigation-logotype h1 { font-size: 24px; margin-bottom: 5px; }
.navigation-logotype h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #999999; font-weight: 300; margin: 0; }

.navigation-list { margin-right: 6rem; padding: 0; font-size: 1.8rem; }
.navigation-list-item { display: inline-block; vertical-align: middle; margin: 0 40px 0 0; font-weight: 500; }
.navigation-list-item.is-active, .navigation-list-item:hover { color: #882FCB; }

.navigation-button { margin-right: 0; }

/* Pages */

.page { /*width: 840px;*/ padding-left: 60px; padding-right: 60px; }


/* Home page */
.home::after { display: block; content: ' '; clear: both; }
.home-intro { width: 52%; float: left; }
.home-intro p { font-size: 1.7rem; }
.home-intro-lead { font-size: 2.4rem !important; }
.home-preview { width: 40%; float: right; border-radius: 4px; border: 1px solid #882FCB; overflow: hidden; }
.home-preview-button {
  background-color: white;
  float: right;
  margin: 0.5rem 0.5rem 0 0;
  padding: 0.4rem 0.8rem;
  border-radius: 2px;
  font-size: 1.4rem; line-height: 1.4;
}
.home-preview code { margin-bottom: 0; font-size: 1.2rem; line-height: 1.5; border: none; border-radius: 0; }
.home-preview-heading { height: 40px; line-height: 40px; color: #882FCB; border-bottom: 1px solid; padding-left: 20px; background: #F7F1FB; font-size: 1.4rem;}

/* Specification page (generated HTML) */
.specification { width: 800px; padding-left: 80px; padding-right: 20px; }
.spec-pair { border-radius: 4px; border: 1px solid #882FCB; display: flex; display: -webkit-flex; display: -moz-flex; overflow: hidden; }
.spec-pair > .spec { display: inline-block; width: 100%; margin: 0; line-height: 1.4; background: white; }
.spec:first-child { border-right: 1px solid #882FCB; }
.spec:before { content: attr(spec-type); display: block; text-align: left; height: 40px; line-height: 40px; color: #882FCB; border-bottom: 1px solid; padding-left: 20px; background: #F7F1FB; font-size: 1.4rem; }
.spec code { margin: 0; border: none; }


/* Try it demo */
.try-source {
  width: 100%; padding: 2rem; border: none; outline: none;
  font-family: "source-code-pro", "Menlo", monospace; font-size: 1.3rem; white-space: pre;
}
.try-output.is-invalid { color: #c82829; }


/* Footer */
.footer {
  padding: 2rem; margin: 8rem 0 0.5rem; border-top: 1px solid #eee;
  font-size: 1.1rem; font-weight: 300; letter-spacing: 0.05rem; color: #999;
}
.footer-right { float: right; }
.footer a { color: #444; }
.footer a:hover { text-decoration: underline; }