/* Hard reset -------------------------------------------------- */ html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, audio, video { padding: 0; margin: 0; border: 0; } /* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */ html { -webkit-text-size-adjust: 100%; } /* Base styles -------------------------------------------------- */ body { position: fixed; top: 0; right: 0; bottom: 0; left: 0; font: 14px/1.25 "Helvetica Neue", sans-serif; color: #000; background-color: #fff; } /* Universal link styling */ a { color: #007aff; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */ } /* Wrapper to be used around all content not in .bar-title and .bar-tab */ .content { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; background-color: #efeff4; -webkit-transition-property: top, bottom; transition-property: top, bottom; -webkit-transition-duration: .2s, .2s; transition-duration: .2s, .2s; -webkit-transition-timing-function: linear, linear; transition-timing-function: linear, linear; -webkit-overflow-scrolling: touch; } /* Hack to force all relatively and absolutely positioned elements still render while scrolling Note: This is a bug for "-webkit-overflow-scrolling: touch" */ .content > * { -webkit-transform: translateZ(0px); transform: translateZ(0px); } /* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */ .content-padded { padding: 10px; } /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. Note: For these to work, content must come after both bars in the markup */ .bar-title ~ .content { padding-top: 44px; } .bar-tab ~ .content { padding-bottom: 51px; } .bar-header-secondary ~ .content { padding-top: 88px; }