@import"https://fonts.googleapis.com/css?family=Open+Sans&display=swap";*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.is-vishidden{position:absolute !important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px, 1px, 1px, 1px)}#patternlab-html,#patternlab-body{margin:0;padding:0;background:#ddd;-webkit-text-size-adjust:100%}.sg-header{background:#000;color:#fff;font-family:"HelveticaNeue","Helvetica","Arial",sans-serif;text-transform:uppercase;position:fixed;top:0;left:0;z-index:4;width:100%}.sg-header ul{padding:0;margin:0;list-style:none}.sg-header a{font-size:70%;color:gray;text-decoration:none;line-height:1;padding:1em .7em;transition:background .1s ease-out;transition:color .1s ease-out}.sg-header a:hover,.sg-header a:focus,.sg-header a.active{color:#fff;background:#222}.sg-nav-toggle{display:inline-block;position:relative;text-transform:uppercase;z-index:2}@media all and (min-width: 42em){.sg-nav-toggle{display:none}}@media all and (max-width: 42em){.sg-nav-container{overflow:hidden;max-height:0;transition:max-height .1s ease-out}.sg-nav-container.active{max-height:50em}}.sg-nav{z-index:1;margin:0;padding:0;list-style:none}.sg-nav>li{cursor:pointer}@media all and (min-width: 42em){.sg-nav>li{border-bottom:0;float:left;position:relative}.sg-nav>li>ol{position:absolute;top:2em;left:0}}.sg-nav a{display:block}.sg-acc-handle:after{content:"▼";color:rgba(255,255,255,.25);display:inline-block;font-size:7px;position:relative;top:-1px;right:-2px;transition:all .1s ease-out}@media all and (min-width: 42em){.sg-acc-handle:after{float:none}}.sg-acc-handle:hover:after,.sg-acc-handle:focus:after{color:gray}.sg-acc-handle.active{color:#fff;background:#222}.sg-acc-handle.active:after{top:-2px;color:gray;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sg-acc-panel{overflow:hidden;max-height:0;margin:0;padding:0;list-style:none;min-width:10em;transition:max-height .1s ease-out}.sg-acc-panel li{background:#222}.sg-acc-panel li:last-child{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.sg-acc-panel li:last-child a{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.sg-acc-panel a{display:block}.sg-acc-panel.active{max-height:120em;overflow:auto}.sg-acc-panel.sg-right{position:absolute;left:auto;right:0}.sg-sub-nav{list-style:none}.sg-sub-nav a{text-transform:none;padding-left:1rem}.sg-controls{border:0;position:absolute;top:0;right:0;z-index:2}.sg-control>li{float:left}.sg-size{width:135px}@media all and (min-width: 42em){.sg-size{width:auto}}.sg-current-size{font-size:70%;color:gray;padding:.85em .7em}@media all and (min-width: 53em){.sg-current-size{float:left}}#sg-form{margin:0;border:0;padding:0}.sg-input{margin:-2px 0 0 0;padding:.1em;border:0;border-radius:3px;background:#000;color:gray;width:25px;text-align:right;transition:all .1s ease-out}.sg-input:hover{color:#fff;background:#222}.sg-input:active,.sg-input:focus{outline:0;background:gray;color:#fff}@media all and (min-width: 42em){.sg-input{width:35px}.sg-input.sg-size-px{width:30px}}.sg-size-options{display:none}.sg-size-options a{display:block}@media all and (min-width: 53em){.sg-size-options{display:block;float:left;position:static}.sg-size-options>li{float:left}}.sg-tools-toggle{font-size:70%;background:#000;color:gray;text-decoration:none;line-height:1;border:0;cursor:pointer;padding:.9em .7em .6em}.sg-tools-toggle:after{display:none;content:""}.sg-find{position:relative}.twitter-typeahead{width:100%}.typeahead{border:0;background:#222;color:gray;width:100%;right:0;padding:.8em;text-transform:lowercase}.typeahead:focus{background:gray;color:#fff}.tt-input{background:gray;color:#fff;text-transform:uppercase}.tt-input:focus{text-transform:lowercase}.tt-hint{text-transform:lowercase;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.tt-dropdown-menu{text-transform:lowercase;background-color:gray;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.tt-suggestion{color:#eee;font-size:75%;padding:.8em}.tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.tt-suggestion p{margin:0}.sg-pattern-state{text-transform:none !important}.sg-pattern-state:before{content:"•";margin-right:4px;font-size:18px;vertical-align:bottom;display:inline-block;text-decoration:none}.sg-pattern-lineage .sg-pattern-state:before{font-size:12px}#sg-patterns .sg-pattern-state:before{font-size:14px}#sg-patterns .sg-pattern-state{color:#666}.sg-nav .sg-pattern-state:before{margin-top:-4px;margin-bottom:0;margin-left:-4px;height:20px;display:block;float:left}.inprogress:before{color:#ff4136 !important}.inreview:before{color:#fc0 !important}.complete:before{color:#2ecc40 !important}#sg-vp-wrap{text-align:center;width:100%;position:fixed;top:2em;bottom:0;left:0;right:0;z-index:0}#sg-cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:col-resize}#sg-gen-container{height:100%;position:relative;text-align:center;margin:0 auto;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden}#sg-gen-container.hay-mode{transition:all 40s linear}#sg-viewport{position:absolute;height:100%;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff}#sg-viewport.hay-mode{transition:all 40s linear}#sg-rightpull-container{width:14px;float:right;margin:0;height:100%;cursor:col-resize}#sg-rightpull{margin:0;width:100%;height:100%;background:#c2c2c2;transition:background .1s ease-out}#sg-rightpull:hover{background:gray}#sg-rightpull:active{cursor:col-resize;background:#666}.vp-animate{transition:width .8s ease-out}.sg-pattern{margin-bottom:2em;position:relative;clear:both}.sg-pattern-head{position:relative;padding:.5rem 0 0;line-height:1.3;font-size:90%;color:gray}.sg-pattern-head:empty{padding:0}.sg-pattern-title{font-family:"HelveticaNeue","Helvetica","Arial",sans-serif !important;font-size:.85rem !important;line-height:1 !important;font-weight:bold !important;margin:0 !important;padding:0 !important;text-transform:capitalize !important}.sg-pattern-title a{display:inline-block;padding:1em 0 .3rem;color:gray !important;text-decoration:none;cursor:pointer;font-weight:bold}.sg-pattern-title a:hover,.sg-pattern-title a:focus{color:#000 !important}.sg-pattern-title .sg-pattern-state{font-size:80%;font-weight:normal;color:#ccc}.sg-pattern-extra-toggle{font-size:9px;position:absolute;bottom:-1px;right:0;z-index:1;padding:.65em;line-height:1;color:gray;font-weight:normal;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;transition:background .1s ease-out}.sg-pattern-extra-toggle span{display:inline-block}.sg-pattern-extra-toggle:hover,.sg-pattern-extra-toggle:focus,.sg-pattern-extra-toggle.active{background:#eee;color:#000}.sg-pattern-extra-toggle.active{border-bottom-color:#eee}.sg-pattern-extra-toggle.active span{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sg-pattern-extra{background:#eee;border-top:1px solid #ddd;margin-bottom:1em;overflow:hidden;max-height:1px;transition:all .1s ease-out}.sg-pattern-extra a{text-decoration:underline;color:#222}.sg-pattern-extra a:hover,.sg-pattern-extra a:focus{color:gray}.sg-pattern-extra.active{border:1px solid #ddd;border-radius:6px;border-top-right-radius:0;max-height:50em}@media all and (min-width: 42em){.sg-pattern-extra-inner{display:flex;align-items:stretch;width:100%;flex:1 1 auto}}.sg-pattern-extra-info{padding:.5rem .5rem 0;line-height:1.4;font-size:90%;color:gray;overflow:auto;-webkit-overflow-scrolling:touch}.sg-pattern-extra-info:empty{padding:0}@media all and (min-width: 42em){.sg-pattern-extra-info{padding:1em;width:40%}}.sg-pattern-desc{margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid #ccc}.sg-pattern-desc p:last-child{margin:0}.sg-pattern-lineage{font-size:90%;font-style:italic}.sg-pattern-extra-code{display:flex;flex-direction:column;font-size:90%;padding:.5rem;flex:1 1 auto}.sg-pattern-extra-code pre{overflow:scroll !important;-webkit-overflow-scrolling:touch;padding:0 .5rem .5rem !important;margin:0 !important;line-height:1 !important;flex:1 1 auto;border-radius:0 6px 6px 6px !important;position:absolute;top:0;bottom:0;left:0;right:0}.sg-pattern-extra-code code{display:block;tab-size:2 !important}@media all and (min-width: 42em){.sg-pattern-extra-code{width:60%;padding:1em}}.sg-pattern-category{margin-top:6rem;font:"HelveticaNeue","Helvetica","Arial",sans-serif !important}.sg-pattern-category:first-of-type{margin-top:2rem}.sg-pattern-category-title{font-size:1.4rem !important;color:#222 !important;margin:0 0 .2rem;text-transform:capitalize}.sg-pattern-category-title a{transition:color .1s ease-out}.sg-pattern-category-body{font-size:80%;line-height:1.3}.sg-pattern-category-body:empty{display:none}.language-markup code[class*=language-],.language-markup pre[class*=language-]{white-space:pre-wrap}@media all and (min-width: 42em){.language-markup code[class*=language-],.language-markup pre[class*=language-]{white-space:pre}}.sg-tabs{flex:1 1 auto;width:100%;display:flex;flex-direction:column;font:"HelveticaNeue","Helvetica","Arial",sans-serif !important}.sg-tabs-list{overflow:hidden;position:relative;bottom:-1px;list-style:none;margin:0;padding:0}.sg-tabs-list li{float:left;margin-right:3px}.sg-tabs-list a{display:block;font-size:90%;font-weight:bold;line-height:1;padding:.5em 1em;background:#eee;border:1px solid #ccc;border-bottom:0;color:gray;border-top-right-radius:6px;border-top-left-radius:6px;text-decoration:none;text-transform:capitalize}.sg-tabs-list a:hover{color:#222}.sg-tab-title-active a{background:#f5f2f0;color:#222}.sg-tab-title-active a:hover,.sg-tab-title-active a:focus{color:#222}.sg-tabs-content{flex:1 1 auto;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:0 6px 6px 6px;overflow:hidden}.sg-tabs-panel{display:none;display:flex;flex-direction:column;flex:1 1 auto;position:relative;min-height:12em}@media all and (min-width: 42em){.sg-tabs-panel{min-height:7em}}.sg-modal{font-family:"HelveticaNeue","Helvetica","Arial",sans-serif;line-height:1.4;font-size:90%;background:#000;color:#ccc;position:fixed;top:auto;bottom:0;left:0;z-index:2;width:100%;height:50%;display:flex;flex-direction:column}.sg-modal.anim-ready{transition:bottom .3s ease-out}.sg-modal .sg-pattern-breadcrumb{font-size:70%;color:gray;margin-bottom:.5rem}.sg-modal .sg-pattern-head{margin-bottom:.5rem}.sg-modal .sg-pattern-title{font-size:1.4rem !important;color:#eee}.sg-modal .sg-pattern-extra{flex:1 1 auto;max-height:none;padding:0}.sg-modal .sg-pattern-extra.active{max-height:none}.sg-modal .sg-pattern-extra-info a{color:#ccc}.sg-modal .sg-pattern-extra-info a:hover,.sg-modal .sg-pattern-extra-info a:focus{color:#eee}.sg-modal .sg-pattern-desc{border-bottom-color:gray}.sg-modal .sg-annotations{border-top-color:gray}.sg-modal .sg-tabs-content{border:0}.sg-modal-close-btn{font-size:70%;background:#000;color:gray;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.9em .7em .1em;text-transform:uppercase;text-decoration:none;cursor:pointer;position:absolute;right:0;top:1rem;transition:all .1s ease-out}.sg-modal.active .sg-modal-close-btn{top:-1.5rem}.sg-modal-close-btn:hover,.sg-modal-close-btn:focus{background:#222;color:#eee}.sg-modal-content{display:flex;flex:1 1 auto;flex-direction:column;overflow-y:auto;overflow-x:hidden}.sg-modal-content-inner{display:flex;flex:1 1 auto;flex-direction:column}.has-annotation{cursor:help !important;box-shadow:0 0 10px gray}.has-annotation a,.has-annotation input{cursor:help !important}.has-annotation:hover{box-shadow:0 0 10px #000}.has-annotation.active{box-shadow:inset 0 0 20px gray}.annotation-tip{display:block;position:absolute;margin-top:-10px !important;margin-left:-10px !important;width:25px !important;height:25px !important;border-radius:13px !important;text-align:center !important;background:#444 !important;color:#fff !important;font-weight:bold !important;font-size:16px !important;z-index:100}.sg-annotations{margin:1rem 0;border-top:1px solid #ddd;padding-top:.5rem}.sg-annotations-title{font-size:1rem !important;margin:0 0 .5rem}.sg-annotations-list{padding:0;margin:0;list-style:none;counter-reset:the-count}.sg-annotations-list>li{position:relative;padding-left:1.5rem;margin-bottom:1rem;border-radius:6px;transition:background .1s ease}.sg-annotations-list>li:before{content:counter(the-count);counter-increment:the-count;font-size:85%;display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;padding:2px;text-align:center;background:#ccc;color:#222;position:absolute;top:1px;left:0}.sg-annotations-list>li.active{background:rgba(255,255,255,.15)}.sg-annotations-list-title{display:inline;font-size:100%}.sg-annotations-list-title:after{content:"—"}#sg-comments-container{max-width:60em;margin:0 auto}.sg-comment-container{padding-bottom:2em;margin-bottom:1em;border-bottom:1px solid rgba(255,255,255,.25)}.sg-comment-container p:last-child{margin-bottom:0}.sg-comment-container h2{margin-bottom:.25em}.c-color{display:flex}.c-color__item{padding:10px;border:1px solid gray;margin-right:20px}.c-color__swatch{content:"";display:block;width:150px;height:150px;margin-bottom:10px}.sg-nav>li:first-child{border-left:1px solid rgba(255,255,255,.4)}.sg-nav>li:last-child{display:none}.sg-main{max-width:1400px;padding:20px;margin-left:auto;margin-right:auto}.sg-header{background-image:url("/archived-assets/29760a54af.png");background-position:8px center;background-repeat:no-repeat;background-size:58px 15px;background-color:#3a4043;font-family:"Open Sans",sans-serif;padding-left:75px}.sg-header a{color:#fff}.sg-header a.active{background-color:#222628}.sg-header a:hover{background-color:#141617}.sg-acc-panel li{background-color:#222628;margin-bottom:-1px}.sg-current-size{color:#fff}.sg-acc-handle:after{color:rgba(255,255,255,.5)}.sg-acc-handle.active{background-color:#222628}.sg-current-size .sg-input{background-color:#0b0c0c;color:#fff;margin-left:4px;margin-right:4px;width:auto;max-width:35px;text-align:center}.typeahead.tt-input{background-color:#141617 !important;color:#fff}.sg-tools-toggle{background-color:#3a4043}.sg-tools-toggle path{fill:#fff}.sg-subtype>*{text-transform:uppercase;letter-spacing:.06em;opacity:.5;font-size:24px}.sg-pattern .sg-pattern-example>*{position:relative;opacity:1;visibility:visible}.sg-pattern .sg-pattern-example>svg{width:50px;height:50px}.sg-pattern .sg-pattern-example>svg path{fill:#3a4043}.sg-size{width:auto}