/* Typefaces */

@font-face {src:url('../fonts/OutputSans-Regular.eot');/* IE < 9 */
src:url('../fonts/OutputSans-Regular.eot?#') format("embedded-opentype"),/* IE 9 */
url('../fonts/OutputSans-Regular.woff') format("woff");
font-family:'Output Sans';font-style:normal;font-weight:normal;}

@font-face {src:url('../fonts/OutputSans-Italic.eot');/* IE < 9 */
src:url('../fonts/OutputSans-Italic.eot?#') format("embedded-opentype"),/* IE 9 */
url('../fonts/OutputSans-Italic.woff') format("woff");
font-family:'Output Sans';font-style:italic;font-weight:normal;}

@font-face {src:url('../fonts/OutputSans-Bold.eot');/* IE < 9 */
src:url('../fonts/OutputSans-Bold.eot?#') format("embedded-opentype"),/* IE 9 */
url('../fonts/OutputSans-Bold.woff') format("woff");
font-family:'Output Sans';font-style:normal;font-weight:bold;}

@font-face {src:url('../fonts/OutputSans-Black.eot');/* IE < 9 */
src: url('../fonts/OutputSans-Black.eot?#') format("embedded-opentype"),/* IE 9 */
url('../fonts/OutputSans-Black.woff') format("woff");
font-family:'Output Sans';font-style:normal;font-weight:900;}

/* ---- General ---- */

* {margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
html {-webkit-text-size-adjust:100%;}
body {background:#f1f1f3;font-family:'Output Sans',sans-serif;}

#playground a {color:#8d8d88;text-decoration:none;}  
:focus {outline:none;}

/* ---- Layout ---- */

#playground {background:#fff;font-size:16px;line-height:1.5;max-width:87em;margin:0 auto;position:relative;padding:32px 32px 64px 32px;min-height:100vh;}
#playground:after {content:'';display:block;clear:both;}
#text {
  float:left;
  -moz-column-count:4;-webkit-column-count:4;column-count:4;
  -moz-column-gap:0px;-webkit-column-gap:0px;column-gap:0px;
  clear:both;
  z-index:5555;
}

#text div.padding {padding-left:30px;}
#text p {position:relative;margin:0;}
#text p+p {text-indent:1.5em;} /* default */
  
/* ---- Controls ---- */

.controls {width:100%;font-size:13px;color:#8d8d88;float:left;margin-bottom:1.2em;position:relative;z-index:9999;}
.controls .left {float:left;width:100%;max-width:94%;}
.group {float:left;width:112px;margin:0 1.8em 1em 0;}
.subgroup {float:left;}
.group.right {font-size:12px;position:absolute;margin:0;width:100px;right:0;top:-1px;text-align:right;}
.group.right a {display:inline-block;padding:0 5px;border-radius:3px;border:1px solid #ddd;}
.group.right a+a {margin-left:.4em;}
.group.right a.selected {border-color:#1a1a11;color:#1a1a11!important;}
.group.exploration select {font-weight:bold;}
.group.exploration option:not(:checked) {font-weight:normal;}

/* ---- Inputs ---- */  

#playground label {float:left;width:100%;display:block;height:1.6em;font-size:13px;}

/* Select */
#playground input, #playground select {font-family:'Output Sans',sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:0;}
#playground input[type=checkbox] {margin:1.2em 0 0 1em;}
#playground select {height:19px;float:left;font-size:13px;width:100%;background:transparent;border:0;padding:1px 1.2em 0 0;border-radius:0;}
#playground select::-ms-expand {display:none;}
#playground .select {width:100%;float:left;position:relative;}
#playground .select:after {content:'';width:0;position:absolute;right:3px;top:7px;border-width:6px 4px;border-style:solid;pointer-events:none;border-color:#1a1a11 transparent transparent transparent;}

/* Button */
input[type=button] {cursor:pointer;opacity:.2;display:inline-block;width:19px;height:19px;color:#8d8d88;border:0;float:left;background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL4AAAAYCAQAAADuOI/lAAAAR0lEQVR4Ae3YMQIAEAgAQP//NKMZgO7sVEslhQa583in6yjK1e8AYNq5fqrqeO9oDRV/nGkHgMra72/HOwCE4XvB347iQywFjEAs/oPmjLwAAAAASUVORK5CYII=') no-repeat center center;background-size:95px 12px;} 
input[type=button]+input[type=button] {margin-left:.7em;}
input[type=button].selected {opacity:1;}

#fleft {background-position:1px center;}
#justify {background-position:-25px center;}
#center {background-position:-51px center;}
#fright {background-position:-77px center;}

/* Range */
input[type=range] {width:100%;-webkit-appearance:none;float:left;height:19px;position:relative;background:transparent;}
input[type=range]::-webkit-slider-runnable-track {width:100%;height:1px;cursor:pointer;background:#ddd;border-radius:0;border:0;}
input[type=range]::-webkit-slider-thumb {border:1px solid #8d8d88;height:14px;width:14px;border-radius:50px;background:#fff;cursor:pointer;-webkit-appearance:none;margin-top:-6px;}
input[type=range]::-webkit-slider-thumb:active,input[type=range]::-webkit-slider-thumb:hover {border-color:#1a1a11;}
input[type=range]::-moz-range-track {width:100%;height:1px;cursor:pointer;background:#ddd;border-radius:0;border:0;}
input[type=range]::-moz-range-thumb {border:1px solid #8d8d88;height:12px;width:12px;border-radius:50px;background:#fff;cursor:pointer;}
input[type=range]::-moz-range-thumb:active,input[type=range]::-moz-range-thumb:hover {border-color:#1a1a11;}
input::-moz-focus-outer {border: 0;}
@-moz-document url-prefix() {select {text-indent:-2px;}}
input[type=range]::-ms-track {width:100%;height:1px;cursor:pointer;background:#ddd;border:0;border-color:transparent;color:transparent;}
input[type=range]::-ms-fill-lower {background:#ddd;border:0;border-radius:0;}
input[type=range]::-ms-fill-upper {background:#ddd;border:0;border-radius:0;box-shadow:0 0 0 #1a1a11,0 0 0 #0d0d0d;}
input[type=range]::-ms-thumb {margin-top:-8px;border:1px solid #8d8d88;height:13px;width:13px;border-radius:50px;background:#fff;cursor:pointer;}
input[type=range]::-ms-thumb:active,input[type=range]::-ms-thumb:hover {border-color:#1a1a11;}
  
/* ---- Settings ---- */
  
p.mock span {color:#d1d1d1;background:#d1d1d1;}
p.mock span span {background:none;}

/* ---- Tooltips ---- */

a.tt {font-family:'Output Sans';cursor:default;z-index:6666;color:#ff7600!important;border:1px solid #ff7600; line-height:1.65;text-indent:0!important;font-size:13px!important;height:1.7em;width:1.7em;
background:#fff;display:block;position:absolute;top:.07em;left:-30px;text-align:center;border-radius:50px;}
a.indent, a.exdent, a.leading, a.graphic, a.rule, a.initial, a.drop, a.capitals, a.weight, a.margin {display:none;}
.indent a.indent, .exdent a.exdent, .leading a.leading, .graphic a.graphic, .rule a.rule, .initial a.initial, .drop a.drop, .capitals a.capitals, .weight a.weight, .margin a.margin {display:block;}

#tooltip {top:0;left:29px;font-size:14px!important;line-height:1.45;position:absolute;z-index:9999;background:#fff;color:#ff7600;border:1px solid #ffc899;
width:170px;padding:.55em .8em .5em .9em;text-indent:0;text-align:left!important;}

/* ---- Explorations ---- */

/* Typekit */
.ff-meta-web-pro #text p {font-size:1.03em;}
.ff-typestar-black-web #text p {}
.adobe-garamond-pro #text p {font-size:1.05em;}
.news-gothic-std #text p {}
.ff-tisa-sans-web-pro #text p {}
.courier-std #text p {}
.mislab-std #text p {}
.mr-eaves-modern #text p {font-size:1.04em;}
.alda #text p {font-style:italic;}

/* Google fonts */
.Alegreya #text p {font-size:1.085em;}
.Alegreya.Sans #text p {font-size:1.12em;}
.Fira.Sans {font-weight:300;}
.Georgia #text p {font-size:1.03em;}
.Source.Serif #text p {font-size:1.04em;}
.Source.Sans #text p {font-size:1.08em;}

.exdent a.tt {left:-62px;}
.exdent a.tt.special {top:5em;}

.leading a.tt.special {top:-1.2em;}

.graphic p {display:inline;}
.graphic p+p:before {font-weight:700;content:' ¶ ';margin-left:-.1em;}
.graphic p.mock:before {color:#d1d1d1;}
.graphic a.tt {top:-.1em;}

.rule p {position:relative;}
.rule p+p:before {content:'';position:absolute;top:-.55em;height:.25em;width:20%;background:#1a1a11;} 
.rule p+p.mock:before {background:#d1d1d1;}
.rule a.tt {top:-1.4em;}

.initial p:first-child .firstword {text-transform:uppercase;font-size:250%;line-height:1;margin-left:-.05em;background:#fff;display:inline-block;}

.drop p:first-child {text-indent:0!important;}
.drop .firstletter {font-weight:bold;float:left;font-size:7.25em;line-height:.92;margin:0 .04em -.2em -.07em;}

/* Typekit */
.ff-meta-web-pro .drop .firstletter {margin-top:-.1em;}
.ff-typestar-black-web .drop .firstletter {font-size:7.15em;margin-top:.04em;}
.adobe-garamond-pro .drop .firstletter {font-size:7.4em;}
.news-gothic-std .drop .firstletter {font-size:6.9em;}
.ff-tisa-sans-web-pro .drop .firstletter {margin-top:-.05em;}
.courier-std .drop .firstletter {font-size:8.9em;margin-top:-.14em;}
.mislab-std .drop .firstletter {font-size:7.8em;margin-top:-.07em;}
.mr-eaves-modern .drop .firstletter {font-size:8em;margin-top:-.08em;}
.alda .drop .firstletter {font-size:7.8em;margin:-.16em .05em 0em -.07em;}

/* Google fonts */
.Alegreya .drop .firstletter {font-size:7.7em;margin:-.07em .04em -.2em -.07em;}
.Alegreya.Sans .drop .firstletter {font-size:7.6em;margin:-.05em .04em -.2em -.07em;}
.Fira .drop .firstletter {font-size:7.3em;margin-top:.01em;}
.Noticia .drop .firstletter {font-size:7.55em;margin:-.11em .04em -.2em -.07em;}
.Source.Sans .drop .firstletter {font-size:7.53em;margin:-.1em .04em -.2em -.08em;}
.Source.Serif .drop .firstletter {font-size:7.4em;margin:-.03em .04em -.2em -.04em;}
.Georgia .drop .firstletter {font-size:7em;margin-top:-.04em;}
.Helvetica .drop .firstletter {font-size:7em;margin-top:-.04em;}

.capitals p {display:inline;}
.capitals .firstword {font-weight:bold;text-transform:uppercase;letter-spacing:0.03em;}
.capitals a.tt {top:-.1em;}

.weight p:first-line {font-weight:bold;}
.weight p:first-line a.tt {font-weight:normal!important;}
.weight a.tt {left:-62px;}

.margin p:first-child {text-indent:-4em!important;}
.margin p:nth-child(2n) {margin-right:4em!important;margin-left:0!important;}
.margin a.tt {left:-94px;}
.margin a.tt.special {left:-30px;}

/* ---- Grid ---- */

.grid {position:absolute;top:0;bottom:0;width:1px;background:#ffc899;z-index:0;}

.grid-1 #text {-moz-column-count:1;-webkit-column-count:1;column-count:1;}
.grid-2 #text {-moz-column-count:2;-webkit-column-count:2;column-count:2;}
.grid-3 #text {-moz-column-count:3;-webkit-column-count:3;column-count:3;}
.grid-4 #text {-moz-column-count:4;-webkit-column-count:4;column-count:4;}

.grid.g1 {left:62px;}
.grid.g2, .grid-4 .grid.g2 {left:calc(25% + 46px);}
.grid.g3, .grid-4 .grid.g3 {left:calc(50% + 30px);}
.grid.g4, .grid-4 .grid.g4 {right:calc(25% - 15px);}

.grid-3 .grid.g2 {left:calc(33% + 46px);}
.grid-3 .grid.g3 {left:auto;right:calc(33% - 17px);}
.grid-3 .grid.g4 {display:none!important;}

.grid-2 .grid.g2 {left:calc(50% + 30px);}
.grid-2 .grid.g3, .grid-2 .grid.g4 {display:none!important;}
.grid-1 .grid.g2, .grid-1 .grid.g3, .grid-1 .grid.g4 {display:none!important;}

/* ---- Media queries ---- */  

@media only screen and (max-width :1200px) {
  #text {-moz-column-count:3;-webkit-column-count:3;column-count:3;}
  .grid.g2, .grid-3 .grid.g2 {left:calc(33% + 45px);}
  .grid.g3, .grid-3 .grid.g3 {left:auto;right:calc(33% - 17px);}
  .grid-3 .grid.g4 {display:none;}
}

@media only screen and (max-width :865px) { 
  #text {-moz-column-count:2;-webkit-column-count:2;column-count:2;}
  .grid.g2, .grid-2 .grid.g2 {left:calc(50% + 30px);}
  .grid-2 .grid.g3, .grid-2 .grid.g4 {display:none;}
  /*.group.line {clear:both;}*/
  .controls .left {max-width:100%;}
}

@media only screen and (max-width :750px) {
  .group.line {clear:none;}
  .group.size, .group.exdent {clear:both;}
}

@media only screen and (max-width :540px) { 
  #text {-moz-column-count:1;-webkit-column-count:1;column-count:1;}
  #playground {padding:16px 16px 32px 16px;}
  #text {margin-top:24px;}
  #playground label {width:30%;}
  #playground label span, output {display:none;}
  input[type=range] {width:70%;}
  #playground select {padding-top:0;}
  input[type=range]::-webkit-slider-thumb {width:20px;height:20px;margin-top:-9px;}
  
  .controls {position:fixed;top:0;background:#fff;margin:0;top:0;right:0;left:0;padding:0 16px;box-shadow:0 0 4px rgba(0,0,0,.2);}
  .group {width:100%;margin:0 0 .7em 0;}
  .group.size, .group.line, .group.right, .group.columns, .group.indent, .group.exdent, .group.margin {display:none;}
  #playground .group.align label {display:none;}
  .group.align {width:auto;position:absolute;right:13px;top:53px;}
  #playground .group.align input+input {margin-left:.5em;}
  .group.typeface {width:100%;}
  .group.exploration {width:calc(100% + 32px);margin:0 0 .9em -16px;padding:.9em 13px .7em 16px;background:#1a1a11;}
  .group.exploration * {color:#fff;}
  #playground .exploration .select:after {border-top-color:#fff;}
  #playground .exploration .select {width:70%;margin-top:-0.5px;}
  #playground .typeface .select {width:35%;margin-top:-0.5px;}
  .grid-g1, .grid-1 .grid.g1 {left:46px;}
  .grid.g2, .grid.g3, .grid.g4 {display:none!important;}
}

@media only screen and (max-width :400px) {
  #playground {font-size:15px;}
  .weight a.tt {left:-60px;}
  .margin a.tt {left:-90px;}
}