body{display:block;padding:0 1em 1em}.design-patterns-section{padding-top:.25em}.design-patterns-menu{margin:0 auto;max-width:62em;padding:2em 0}.design-patterns-menu ol{padding:0 0 0 2em}.design-patterns-heading{padding-top:1em}.information code{color:#333}.is-inview{position:relative}.is-inview:before{background-color:rgba(0,102,255,.25);border-radius:.25em;content:"";height:1.5em;left:-2em;position:absolute;width:1.5em;z-index:2001}body.darkmode .is-inview:before{background-color:rgba(247,198,0,.25)}.design-patterns-color{border:1px solid #ccc;display:block;height:3em;margin:1em 0;position:relative}.design-patterns-color:after{background-color:hsla(0,0%,100%,.66);font-family:Menlo,Consolas,Monaco,monospace;padding:1px .2307692308em;position:absolute;top:.6923076923em}body.darkmode .design-patterns-color{border-color:#7f8388}body.darkmode .design-patterns-color:after{background-color:rgba(0,0,0,.66)}.design-patterns-color-text{background:#333}.design-patterns-color-text:after{content:"#333333"}.design-patterns-color-text-footnote{background:#585858}.design-patterns-color-text-footnote:after{content:"#585858"}.design-patterns-color-gradient-from{background:#eee}.design-patterns-color-gradient-from:after{content:"#eeeeee"}.design-patterns-color-gradient-to{background:#ddd}.design-patterns-color-gradient-to:after{content:"#dddddd"}.design-patterns-color-border-extra-dark{background:#afafaf}.design-patterns-color-border-extra-dark:after{content:"#afafaf"}.design-patterns-color-border-dark{background:#bebebe}.design-patterns-color-border-dark:after{content:"#bebebe"}.design-patterns-color-border{background:#ccc}.design-patterns-color-border:after{content:"#cccccc"}.design-patterns-color-border-light{background:#d0d0d0}.design-patterns-color-border-light:after{content:"#d0d0d0"}.design-patterns-color-border-extra-light{background:#d3d3d3}.design-patterns-color-border-extra-light:after{content:"lightgray"}.design-patterns-color-link{background:#004cbf}.design-patterns-color-link:after{content:"#004cbf"}.design-patterns-color-link-hover{background:#06f}.design-patterns-color-link-hover:after{content:"#0066ff"}.design-patterns-color-link-focus{background:#06f}.design-patterns-color-link-focus:after{content:"#0066ff"}.design-patterns-color-link-selecting{background:#cce0ff}.design-patterns-color-link-selecting:after{content:"#cce0ff"}.design-patterns-color-link-selected{background:#e6f0ff}.design-patterns-color-link-selected:after{content:"#e6f0ff"}.design-patterns-color-background{background:#fff}.design-patterns-color-background:after{content:"#ffffff"}.design-patterns-color-background-box{background:#f7f7f7}.design-patterns-color-background-box:after{content:"#f7f7f7"}.design-patterns-color-highlight-box{background:#fff9e1}.design-patterns-color-highlight-box:after{content:"#fff9e1"}.design-patterns-color-strong-highlight-box{background:#ffefaf}.design-patterns-color-strong-highlight-box:after{content:"#ffefaf"}.design-patterns-color-accent-gradient-from{background:#ffda44}.design-patterns-color-accent-gradient-from:after{content:"#ffda44"}.design-patterns-color-accent-gradient-to{background:#f7c600}.design-patterns-color-accent-gradient-to:after{content:"#f7c600"}.design-patterns-color-success-text{background:#238c23}.design-patterns-color-success-text:after{content:"#238c23"}.design-patterns-color-success-background{background:#dff0d8}.design-patterns-color-success-background:after{content:"#dff0d8"}.design-patterns-color-warning-text{background:#c88800}.design-patterns-color-warning-text:after{content:"#c88800"}.design-patterns-color-warning-background{background:#f8eedc}.design-patterns-color-warning-background:after{content:"#f8eedc"}.design-patterns-color-error-text{background:#ac261d}.design-patterns-color-error-text:after{content:"#ac261d"}.design-patterns-color-error-background{background:#f2dede}.design-patterns-color-error-background:after{content:"#f2dede"}.design-patterns-color-info-text{background:#3a87ad}.design-patterns-color-info-text:after{content:"#3a87ad"}.design-patterns-color-info-background{background:#e7f6fc}.design-patterns-color-info-background:after{content:"#e7f6fc"}body.darkmode .design-patterns-color-text{background:#ced4da}body.darkmode .design-patterns-color-text:after{content:"#ced4da"}body.darkmode .design-patterns-color-text-footnote{background:#c9d1d9}body.darkmode .design-patterns-color-text-footnote:after{content:"#c9d1d9"}body.darkmode .design-patterns-color-gradient-from{background:#4b5158}body.darkmode .design-patterns-color-gradient-from:after{content:"#4b5158"}body.darkmode .design-patterns-color-gradient-to{background:#575d63}body.darkmode .design-patterns-color-gradient-to:after{content:"#575d63"}body.darkmode .design-patterns-color-border-extra-dark{background:#0e1011}body.darkmode .design-patterns-color-border-extra-dark:after{content:"#0e1011"}body.darkmode .design-patterns-color-border-dark{background:#30373d}body.darkmode .design-patterns-color-border-dark:after{content:"#30373d"}body.darkmode .design-patterns-color-border{background:#7f8388}body.darkmode .design-patterns-color-border:after{content:"#7f8388"}body.darkmode .design-patterns-color-border-light{background:#676c72}body.darkmode .design-patterns-color-border-light:after{content:"#676c72"}body.darkmode .design-patterns-color-border-extra-light{background:#4f555b}body.darkmode .design-patterns-color-border-extra-light:after{content:"#4f555b"}body.darkmode .design-patterns-color-link{background:#9cd7ff}body.darkmode .design-patterns-color-link:after{content:"#9cd7ff"}body.darkmode .design-patterns-color-link-hover{background:#bde4ff}body.darkmode .design-patterns-color-link-hover:after{content:"#bde4ff"}body.darkmode .design-patterns-color-link-focus{background:#f7c600}body.darkmode .design-patterns-color-link-focus:after{content:"#f7c600"}body.darkmode .design-patterns-color-link-selecting{background:#1b2f48}body.darkmode .design-patterns-color-link-selecting:after{content:"#1b2f48"}body.darkmode .design-patterns-color-link-selected{background:#1c3456}body.darkmode .design-patterns-color-link-selected:after{content:"#1c3456"}body.darkmode .design-patterns-color-background{background:#373e45}body.darkmode .design-patterns-color-background:after{content:"#373e45"}body.darkmode .design-patterns-color-background-box{background:#2f353b}body.darkmode .design-patterns-color-background-box:after{content:"#2f353b"}body.darkmode .design-patterns-color-highlight-box{background:#59563d}body.darkmode .design-patterns-color-highlight-box:after{content:"#59563d"}body.darkmode .design-patterns-color-strong-highlight-box{background:#ac9840}body.darkmode .design-patterns-color-strong-highlight-box:after{content:"#ac9840"}body.darkmode .design-patterns-color-accent-gradient-from{background:#ffda44}body.darkmode .design-patterns-color-accent-gradient-from:after{content:"#ffda44"}body.darkmode .design-patterns-color-accent-gradient-to{background:#f7c600}body.darkmode .design-patterns-color-accent-gradient-to:after{content:"#f7c600"}body.darkmode .design-patterns-color-success-text{background:#6c3}body.darkmode .design-patterns-color-success-text:after{content:"#66cc33"}body.darkmode .design-patterns-color-success-background{background:#2a4125}body.darkmode .design-patterns-color-success-background:after{content:"#2a4125"}body.darkmode .design-patterns-color-warning-text{background:#ffbe3c}body.darkmode .design-patterns-color-warning-text:after{content:"#ffbe3c"}body.darkmode .design-patterns-color-warning-background{background:#484123}body.darkmode .design-patterns-color-warning-background:after{content:"#484123"}body.darkmode .design-patterns-color-error-text{background:#ff3382}body.darkmode .design-patterns-color-error-text:after{content:"#ff3382"}body.darkmode .design-patterns-color-error-background{background:#47232a}body.darkmode .design-patterns-color-error-background:after{content:"#47232a"}body.darkmode .design-patterns-color-info-text{background:#4af}body.darkmode .design-patterns-color-info-text:after{content:"#44aaff"}body.darkmode .design-patterns-color-info-background{background:#0e304a}body.darkmode .design-patterns-color-info-background:after{content:"#0e304a"}.design-patterns-box{background:rgba(0,0,0,.33);margin-top:0;padding:1em}.jquery-ui-icons li{cursor:pointer;float:left;list-style:none;margin:2px;padding:4px 0;position:relative}[dir=rtl] .jquery-ui-icons li{float:right}.jquery-ui-icons .ui-icon{float:left;margin:0 4px}[dir=rtl] .jquery-ui-icons .ui-icon{float:right}.jquery-ui-slider-vertical span{float:left;height:120px;margin:15px}[dir=rtl] .jquery-ui-slider-vertical span{float:right}.ui-menu{width:150px}.ui-menu:not(.jquery-ui-menu){position:absolute;z-index:1000}.design-patterns-section h1 span,h2 span{font-size:1rem;font-weight:400}@media (min-width:47em){body{padding:0 2em 1em}}@media (min-width:61.25em){body{padding:0 4% 1em}.design-patterns-menu{background-color:#f7f7f7;border-right:1px solid #ccc;bottom:0;box-shadow:inset -.25em 0 .25em -.25em rgba(0,0,0,.2);box-sizing:border-box;left:0;overflow-x:hidden;overflow-y:auto;padding:2em 2%;position:fixed;top:0;width:27%;z-index:2000}body.darkmode .design-patterns-menu{background-color:#2f353b;border-right-color:#0e1011}.design-patterns-content{margin-left:28%}.design-patterns-content-container{margin:0 auto;max-width:80em}}