/** * Box model adjustments * `border-box`... ALL THE THINGS - http://cbrac.co/RQrDL5 */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /** * 1. Force a vertical scrollbar - http://cbrac.co/163MspB * NOTE: Use `text-rendering` with caution - http://cbrac.co/SJt8p1 * NOTE: Avoid the webkit anti-aliasing trap - http://cbrac.co/TAdhbH * NOTE: IE for Windows Phone 8 ignores `-ms-text-size-adjust` if the * viewport tag is used - http://cbrac.co/1cFrAvl */ html { font-size: 100%; overflow-y: scroll; /* 1 */ min-height: 100%; } /** * 1. Inherits percentage declared on above as base `font-size` * 2. Unitless `line-height`, which acts as multiple of base `font-size` */ body { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 1em; /* 1 */ line-height: 1.5; /* 2 */ color: #444; } /* Page wrapper */ .wrapper { width: 90%; max-width: 800px; margin: 4em auto; text-align: center; } /* Icons */ .icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; fill: currentcolor; } /* Headings */ h1, h2, h3, h4, h5, h6 { color: #222; font-weight: 700; font-family: inherit; line-height: 1.333; text-rendering: optimizeLegibility; } /** * Modals ($modals) */ /* 1. Ensure this sits above everything when visible */ .change { position: absolute; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; } .change.is-visible { visibility: visible; } .change-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s; } .change.is-visible .change-overlay { opacity: 1; visibility: visible; transition-delay: 0s; } .change-wrapper { position: absolute; z-index: 9999; top: 6em; left: 50%; width: 32em; margin-left: -16em; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); } .change-transition { transition: all 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .change.is-visible .change-transition { transform: translateY(0); opacity: 1; } .change-header, .change-content { padding: 1em; } .change-header { position: relative; background-color: #fff; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06); border-bottom: 1px solid #e8e8e8; } .change-close { position: absolute; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; } .change-close:hover { color: #777; } .change-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .change-content > *:first-child { margin-top: 0; } .change-content > *:last-child { margin-bottom: 0; } /* 1. Ensure this sits above everything when visible */ .fix_surface { position: absolute; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; } .fix_surface.is-visible { visibility: visible; } .fix_surface-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s; } .fix_surface.is-visible .fix_surface-overlay { opacity: 1; visibility: visible; transition-delay: 0s; } .fix_surface-wrapper { position: absolute; z-index: 9999; top: 6em; left: 50%; width: 32em; margin-left: -16em; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); } .fix_surface-transition { transition: all 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .fix_surface.is-visible .fix_surface-transition { transform: translateY(0); opacity: 1; } .fix_surface-header, .fix_surface-content { padding: 1em; } .fix_surface-header { position: relative; background-color: #fff; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06); border-bottom: 1px solid #e8e8e8; } .fix_surface-close { position: absolute; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; } .fix_surface-close:hover { color: #777; } .fix_surface-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fix_surface-content > *:first-child { margin-top: 0; } .fix_surface-content > *:last-child { margin-bottom: 0; } /* 1. Ensure this sits above everything when visible */ .drill { position: absolute; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; } .drill.is-visible { visibility: visible; } .drill-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s; } .drill.is-visible .drill-overlay { opacity: 1; visibility: visible; transition-delay: 0s; } .drill-wrapper { position: absolute; z-index: 9999; top: 6em; left: 50%; width: 32em; margin-left: -16em; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); } .drill-transition { transition: all 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .drill.is-visible .drill-transition { transform: translateY(0); opacity: 1; } .drill-header, .drill-content { padding: 1em; } .drill-header { position: relative; background-color: #fff; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06); border-bottom: 1px solid #e8e8e8; } .drill-close { position: absolute; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; } .drill-close:hover { color: #777; } .drill-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .drill-content > *:first-child { margin-top: 0; } .drill-content > *:last-child { margin-bottom: 0; } /* 1. Ensure this sits above everything when visible */ .fix { position: absolute; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; } .fix.is-visible { visibility: visible; } .fix-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s; } .fix.is-visible .fix-overlay { opacity: 1; visibility: visible; transition-delay: 0s; } .fix-wrapper { position: absolute; z-index: 9999; top: 6em; left: 50%; width: 32em; margin-left: -16em; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); } .fix-transition { transition: all 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .fix.is-visible .fix-transition { transform: translateY(0); opacity: 1; } .fix-header, .fix-content { padding: 1em; } .fix-header { position: relative; background-color: #fff; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06); border-bottom: 1px solid #e8e8e8; } .fix-close { position: absolute; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; } .fix-close:hover { color: #777; } .fix-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fix-content > *:first-child { margin-top: 0; } .fix-content > *:last-child { margin-bottom: 0; } /* 1. Ensure this sits above everything when visible */ .G79 { position: absolute; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; } .G79.is-visible { visibility: visible; } .G79-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s; } .G79.is-visible .G79-overlay { opacity: 1; visibility: visible; transition-delay: 0s; } .G79-wrapper { position: absolute; z-index: 9999; top: 6em; left: 50%; width: 32em; margin-left: -16em; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); } .G79-transition { transition: all 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .G79.is-visible .G79-transition { transform: translateY(0); opacity: 1; } .G79-header, .G79-content { padding: 1em; } .G79-header { position: relative; background-color: #fff; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06); border-bottom: 1px solid #e8e8e8; } .G79-close { position: absolute; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; } .G79-close:hover { color: #777; } .G79-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .G79-content > *:first-child { margin-top: 0; } .G79-content > *:last-child { margin-bottom: 0; } /* 1. Ensure this sits above everything when visible */ .G65 { position: absolute; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; } .G65.is-visible { visibility: visible; } .G65-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s; } .G65.is-visible .G65-overlay { opacity: 1; visibility: visible; transition-delay: 0s; } .G65-wrapper { position: absolute; z-index: 9999; top: 6em; left: 50%; width: 32em; margin-left: -16em; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); } .G65-transition { transition: all 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .G65.is-visible .G65-transition { transform: translateY(0); opacity: 1; } .G65-header, .G65-content { padding: 1em; } .G65-header { position: relative; background-color: #fff; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06); border-bottom: 1px solid #e8e8e8; } .G65-close { position: absolute; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; } .G65-close:hover { color: #777; } .G65-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .G65-content > *:first-child { margin-top: 0; } .G65-content > *:last-child { margin-bottom: 0; } /* 1. Ensure this sits above everything when visible */ .G84 { position: absolute; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; } .G84.is-visible { visibility: visible; } .G84-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s; } .G84.is-visible .G84-overlay { opacity: 1; visibility: visible; transition-delay: 0s; } .G84-wrapper { position: absolute; z-index: 9999; top: 6em; left: 50%; width: 32em; margin-left: -16em; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); } .G84-transition { transition: all 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .G84.is-visible .G84-transition { transform: translateY(0); opacity: 1; } .G84-header, .G84-content { padding: 1em; } .G84-header { position: relative; background-color: #fff; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06); border-bottom: 1px solid #e8e8e8; } .G84-close { position: absolute; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; } .G84-close:hover { color: #777; } .G84-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .G84-content > *:first-child { margin-top: 0; } .G84-content > *:last-child { margin-bottom: 0; } /* 1. Ensure this sits above everything when visible */ .Cut { position: absolute; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; } .Cut.is-visible { visibility: visible; } .G84-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s; } .Cut.is-visible .Cut-overlay { opacity: 1; visibility: visible; transition-delay: 0s; } .Cut-wrapper { position: absolute; z-index: 9999; top: 6em; left: 50%; width: 32em; margin-left: -16em; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); } .Cut-transition { transition: all 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .Cut.is-visible .Cut-transition { transform: translateY(0); opacity: 1; } .Cut-header, .Cut-content { padding: 1em; } .Cut-header { position: relative; background-color: #fff; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06); border-bottom: 1px solid #e8e8e8; } .Cut-close { position: absolute; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; } .Cut-close:hover { color: #777; } .Cut-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .Cut-content > *:first-child { margin-top: 0; } .Cut-content > *:last-child { margin-bottom: 0; } /* 1. Ensure this sits above everything when visible */ .Milling { position: absolute; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; } .Milling.is-visible { visibility: visible; } .Milling-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s; } .Milling.is-visible .Milling-overlay { opacity: 1; visibility: visible; transition-delay: 0s; } .Milling-wrapper { position: absolute; z-index: 9999; top: 6em; left: 50%; width: 32em; margin-left: -16em; background-color: #fff; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); } .Milling-transition { transition: all 0.3s 0.12s; transform: translateY(-10%); opacity: 0; } .Milling.is-visible .Milling-transition { transform: translateY(0); opacity: 1; } .Milling-header, .Milling-content { padding: 1em; } .Milling-header { position: relative; background-color: #fff; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06); border-bottom: 1px solid #e8e8e8; } .Milling-close { position: absolute; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; } .Milling-close:hover { color: #777; } .Milling-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .Milling-content > *:first-child { margin-top: 0; } .Milling-content > *:last-child { margin-bottom: 0; }