demo.css

@import url(//fonts.googleapis.com/css?family=Open+Sans:300,700);.group{zoom:1;clear:both}.group:before,.group:after{content:"";display:table}.group:after{clear:both}*{box-sizing:border-box}body{margin:0;font-family:"Open Sans", sans-serif;font-weight:300;padding-top:72px;font-size:80%;line-height:1.2em}body.open{padding-top:225px}@media only screen and (min-width: 600px){body{padding-top:140px}body.open{padding-top:140px}}@media only screen and (min-width: 800px){body{font-size:100%;padding-top:155px}body.open{padding-top:155px}}@media only screen and (min-width: 1024px){body{padding-top:80px}body.open{padding-top:80px}}header{zoom:1;clear:both;position:fixed;z-index:100;top:0;left:0;right:0;background:white;padding:10px;border-bottom:3px solid black}header:before,header:after{content:"";display:table}header:after{clear:both}@media only screen and (min-width: 600px){header{padding:10px 20px}}header button{position:absolute;right:10px;top:30px;font-size:20px;line-height:20px;background:transparent;border:0}header button:focus{outline:none}@media only screen and (min-width: 600px){header button{display:none}}header a.clipboard{margin-left:5px;display:none;cursor:pointer;opacity:.5}header a.clipboard:hover{opacity:1}header .more{display:none}body.open header .more{display:block}@media only screen and (min-width: 600px){header .more{display:block}}h4{font-size:.6em;line-height:1.2em;letter-spacing:0.5px;text-transform:uppercase;color:#999;padding:3px 0;margin:0}code{color:black;font-size:1.3em;line-height:2em}code a{color:black}.quiet{color:#aaa}.book-list{padding:4px 0}.book-list select{font-family:"Open Sans", sans-serif;font-weight:300;background:white;border:2px solid #444;font-size:1.1em;line-height:1.3em;padding:10px 0;max-width:100%}@media only screen and (min-width: 600px){.book-list{float:left;width:50%;padding:8px 0}.book-list select{max-width:92%}}@media only screen and (min-width: 1024px){.book-list{width:20%}}.book-usage{padding:4px 0}@media only screen and (min-width: 600px){.book-usage{float:left;width:50%;padding:8px 0}.book-usage.sass{clear:left}}@media only screen and (min-width: 1024px){.book-usage{width:30%}.book-usage.hex-code{float:right;width:20%}.book-usage.sass{clear:none}}.color-selected{float:right;margin:8px 0;height:50px;width:50px;border:3px solid black}@media only screen and (min-width: 600px){.color-selected{position:absolute;right:13px;top:10px;width:80px;height:80px}}@media only screen and (min-width: 1024px){.color-selected{width:50px;height:50px}}.book-viewer{min-height:480px}.book-viewer h4{background:#575d5f;padding:30px 30px 15px;margin:0;font-weight:700;font-size:14px;clear:both}.swatch{padding:20px;text-align:center;overflow:hidden;cursor:pointer;z-index:0;padding:40px 0;float:left;width:50%}.swatch span{display:inline-block;white-space:nowrap;font-size:11px;padding:5px;background-color:rgba(255,255,255,0.4);color:rgba(0,0,0,0.6);box-shadow:2px 2px 8px rgba(0,0,0,0.3)}.swatch span span{background-color:transparent;box-shadow:none;display:block;font-weight:bold}.swatch.selected{box-shadow:inset 5px 5px 25px rgba(0,0,0,0.2)}.swatch.selected span{background-color:rgba(255,255,255,0.9);color:black}.swatch.selected span span{background-color:transparent}@media only screen and (min-width: 600px){.swatch{padding:50px 0;width:33.33%}.swatch span{font-size:14px}}@media only screen and (min-width: 768px){.swatch{width:25%}}@media only screen and (min-width: 1024px){.swatch{width:20%}}@media only screen and (min-width: 1150px){.swatch{width:16.6666%}}.disclaimer{zoom:1;clear:both;border-top:3px solid black;padding:20px}.disclaimer:before,.disclaimer:after{content:"";display:table}.disclaimer:after{clear:both}.disclaimer .column{padding:6px 0}@media only screen and (min-width: 600px){.disclaimer .column{float:left}.disclaimer .column.powered{width:30%;margin-right:5%}.disclaimer .column.fine{width:65%}}.disclaimer .powered code{cursor:pointer}.disclaimer .powered code a{text-decoration:none;font-size:1.8em;cursor:pointer}.disclaimer .powered code a:hover{color:#009033}.disclaimer p{padding:4px 0 12px;margin:0}.disclaimer p.small{font-size:.8em;line-height:1.4em}.disclaimer p a{color:#666}.disclaimer p a:hover{color:#009033}
/*# sourceMappingURL=demo.css.map */