@import url(http://fonts.googleapis.com/css?family=Lato|Roboto+Slab:300&subset=latin,latin-ext);*{margin:0;padding:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body>header{background-color:#abc;padding:0 2em}body>header>nav{height:2.6em;margin:0 auto;max-width:50em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}body>header>nav>menu{margin:auto 0}body>header>nav>menu>menuitem{font-family:Lato,sans-serif;font-size:.8rem;letter-spacing:1px}body>header>nav>menu>menuitem a{color:inherit;text-decoration:none}body>header>nav>menu>menuitem a:hover{text-decoration:underline}body>header>nav>menu>menuitem+menuitem{margin-left:.8em}body>footer{text-align:center;padding:0 2em}body>footer>section{margin:3em auto 2.5em;max-width:50em;border-top:1px solid #ccc;padding-top:.5em}body>footer>section p{color:#999;font-size:.7em}body{font-family:'Roboto Slab',serif;font-weight:300}body>section{padding:0 2em}body>section>article{margin:0 auto;max-width:50em}body>section>article p,body>section>article td{line-height:1.4em;word-spacing:.08em}body>section>article p{margin:.7em 0}h1{font-family:Lato,sans-serif;font-size:2em;font-weight:400;margin:1.5em 0 0;text-align:center}h2{font-family:Lato,sans-serif;font-size:1.3em;font-weight:400;margin:3em 0 1em;text-align:center}h1+h2{margin-top:1.4em}h1,h2{word-spacing:.12em}.sandbox{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:2em 0}.mockup-page-column{width:40%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:1.5em}.mockup-page-column .mockup-page{box-shadow:0 0 5px 0 #999;font-family:serif;font-size:.8em;margin:auto}.css-column{width:40%}.css-column pre{font-size:.9em;overflow:auto}.css-column input[type=range]{width:5em;position:relative;top:.5em}.css-column .css-code{display:inline-block;width:19em}nav{margin:2em 0 1em;text-align:center}nav button{padding:.4em 1.4em}body#index section a{color:#69f;text-decoration:none}body#index section a:hover{text-decoration:underline}body#index section td{padding:.6em 1em;text-align:left;vertical-align:top}body#index section td:first-child{text-align:right;white-space:nowrap}body#flex .mockup-page{padding:1.5em}body#flex .mockup-page .container{background-color:#ffebcc;border:1px solid #ccc;min-height:25em}body#flex .mockup-page .child{border:1px solid #999;padding:.2em .4em;text-align:center}body#flex .mockup-page .child:nth-child(1){background-color:#a3a3ff}body#flex .mockup-page .child:nth-child(2){background-color:#adadff}body#flex .mockup-page .child:nth-child(3){background-color:#b8b8ff}body#flex .mockup-page .child:nth-child(4){background-color:#c2c2ff}body#flex .mockup-page .child:nth-child(5){background-color:#ccf}body#flex .mockup-page .child:nth-child(6){background-color:#d6d6ff}body#flex .mockup-page .child:nth-child(7){background-color:#e0e0ff}body#side-by-side-blocks .mockup-page{padding:.01em}body#side-by-side-blocks .mockup-page section{border:1px solid #ccc;margin:.4em;padding:.2em .4em}body#ul-and-li-margins-and-padding .mockup-page{height:25em;padding:2em}body#ul-and-li-margins-and-padding .mockup-page aside{border:1px solid #999;font-family:monospace;margin-top:.6em;margin-bottom:.6em;padding:.4em;vertical-align:middle}body#ul-and-li-margins-and-padding .css-column .css-code{width:15em}