/* ---------------------------------------------------------------------------- Typesetting for Gallup Web Applications Author: DJ Jahn Date: Dec 2013 Updated: May 2014 (EDavies) Scale: 16px @ 1:1.618 Body base: 16px default Ratio: http://en.wikipedia.org/wiki/Golden_ratio Reference: http://modularscale.com ----------------------------------------------------------------------------------------------------------------------------- Px Whole Px REM/EM @ 16 Small<768px Medium>768px Lrg>1792 Wall>? ============================================================================================================================= 67.7730 ...... 68 ........ 4.2500 ........ XX .................... XX ................ XX ................ H1 *54.9787 ...... 55 ........ 3.4375 ........ XX .................... XX ................ H1 ................ H2 41.8870 ...... 42 ........ 2.6250 ........ XX .................... H1 ................ H2 ................ XX +38.0000 ...... 38 ........ 2.3750 ........ XX .................... H2 ............... XX ................ H3 *34.0000 ...... 34 ........ 2.1250 ........ H1 .................... XX ................ H3 ................ H4 25.8880 ...... 26 ........ 1.6250 ........ XX .................... H3 ................ H4 ................ XX *23.0000 ...... 23 ........ 1.4375 ........ H2 .................... XX ................ XX ................ P,LI,LABEL,H5,H6 20.0000 ...... 20 ........ 1.2500 ........ H3 .................... H4 ................ P,LI,LABEL,H5,H6... XX +18.0000 ...... 18 ........ 1.1250 ........ H4 .................... XX ................ XX ................ XX 16.0000 ...... 16 ........ 1.0000 ........ P,LI,LABEL,H5,H6 ...... P,LI,LABEL,H5,H6... note............... note *13.0000 ...... 13 ........ 0.8125 ........ note .................. note .............. XX ................ XX 10.0000 ...... 10 ........ 0.6250 ........ XX .................... XX ................ XX ................ XX ============================================================================================================================= * = 1/2 Stop + = 1/4 Stop ------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- Box Model for Gallup Web Applications - use with typographic rhythm on a 24px element line Author: EH Davies Date: May 2014 ----------------------------------------------------------------------------------------------------------------------------- Px REM/EM @ 16 Usage ============================================================================================================================= 2 .......... 0.1250 4 .......... 0.2500 8 .......... 0.5000 12 .......... 0.7500 16 .......... 1.0000 24 .......... 1.5000 32 .......... 2.0000 56 .......... 3.5000 64 .......... 4.0000 481 ......... 30.0630 ........... 2 column display 640 ......... 40.0000 ........... responsive table, buttons float 768 ......... 48.0000 ........... 3 column display (Typography change - headers) 1280 ......... 80.0000 ........... 4 column display 1536 ......... 96.0000 ........... 5 column display 1792 ......... 112.000 ........... 6 column display (Typography change - all) 1920 ......... 120.000 ........... content max display width ============================================================================================================================= ------------------------------------------------------------------------------- */ /* Vertical Spacing ---------------------------------------------------------- */ p, h1, h2, h3, h4, h5, h6, .element, .buttons { margin-bottom: 24px; margin-bottom: 1.5rem; margin-top: 24px; margin-top: 1.5rem; vertical-align: text-bottom; } li { margin-bottom: 12px; margin-bottom: .75rem; margin-top: 12px; margin-top: .75rem; vertical-align: text-bottom; } /* General Formating --------------------------------------------------------- */ /* Uppercase */ h1, h2, h3, h6 { text-transform: uppercase; -webkit-font-smoothing: subpixel-antialiased; /* removing font-smoothing */ text-rendering: auto; /* optimize for speed */ } /* Bold */ h1, h2, h3, h4, h5, label, .label, .large { font-weight: bold; } /* Normal */ h6 { font-weight: normal; } /* Typographic Styles -------------------------------------------------------- */ p, li, label, th, td { font-size: 16px; /* IE Only */ font-size: 1rem; line-height: 1.5; /* (1 * 24) / 16 = 1.5 */ } h1 { font-size: 34px; /* IE Only */ font-size: 2.125rem; line-height: 1.2; /* UPPERCASE at 1.2 */ /*line-height: 1.4118; (2 * 24) / 34 = 1.41176... */ } h2 { font-size: 23px; /* IE Only */ font-size: 1.4375rem; line-height: 1.2; /* UPPERCASE at 1.2 */ /*line-height: 1.5652; (1.5 * 24) / 23 = 1.5652173... */ } h3 { font-size: 20px; /* IE Only */ font-size: 1.25rem; line-height: 1.2; /* UPPERCASE at 1.2 */ /*line-height: 1.2000; (1 * 24) / 20 = 1.2 */ } h4, .large { font-size: 18px; /* IE Only */ font-size: 1.125rem; line-height: 1.3333; /* UPPERCASE at 1.3333 */ /*line-height: 1.2000; (1 * 24) / 18 = 1.3333 */ } h5, h6 { font-size: 16px; /* IE Only */ font-size: 1rem; line-height: 1.5; /* (1 * 24) / 16 = 1.5 */ } .note, .field-validation-error, input[id$=CheckboxMarketingOptIn] ~ label { font-size: 13px; /* IE Only */ font-size: 0.8125rem; line-height: 1.84615385; /* (1 * 24) / 13 = 1.84615... */ } footer, footer p, footer li, footer label { font-size: 13px; /* IE Only */ font-size: 0.8125rem; line-height: 1.84615384; /* (1 * 24) / 13 = 1.84615 ... */ } .small { font-size: 10px; /* IE Only */ font-size: 0.625rem; line-height: 1.2; /* UPPERCASE at 1.2 */ /* (1 * 24) / 10 = 2.4... */ } .serif { font-family: Georgia, "Times New Roman", serif; } /* anchor tags ========================================================================== */ a { text-decoration: underline; color: #000000; } a:visited { color: #25282A; text-decoration: underline; } a:hover { text-decoration: none; } /*a:focus { outline: 1px dotted #7f8283; } :focus { outline-style: none; outline-color: transparent; }*/ /* 3 column (2 columns + news) start @768px ========================================================================== */ @media screen and (min-width: 48em) { /* Typographic Styles ========================================================================== */ h1 { font-size: 42px; /* IE Only */ font-size: 2.6250rem; line-height: 1.1429; /* (2 * 24) / 42 = 1.14285... */ } h2 { font-size: 38px; /* IE Only */ font-size: 2.3750rem; line-height: 1.2632; /* (2 * 24) / 38 = 1.263157... */ } h3 { font-size: 26px; /* IE Only */ font-size: 1.6250rem; line-height: 1.8462; /* (2 * 24) / 26 = 1.84615... */ } h4, .large { font-size: 20px; /* IE Only */ font-size: 1.2500rem; line-height: 1.2000; /* (1 * 24) / 20 = 1.2 */ } } /* 8 columns @2048px - current largest resolution ========================================================================== */ @media screen and (min-width: 128em) { /* Typographic Styles ========================================================================== */ p, li, label { font-size: 20px; /* IE Only */ font-size: 1.250rem; line-height: 1.8000; /* half-step (1.5 * 24) / 20 = 1.5 */ } td, th, textarea, select, .button a, input[type="button"], input[type="reset"], input[type="submit"] { font-size: 20px; /* IE Only */ font-size: 1.250rem; } h1 { font-size: 55px; /* IE Only */ font-size: 3.4375rem; line-height: 1.3090; /* (3 * 24) /55 = 1.309090... */ } h2 { font-size: 42px; /* IE Only */ font-size: 2.6250rem; line-height: 1.1429; /* (2 * 24) / 42 = 1.14285... */ } h3 { font-size: 34px; /* IE Only */ font-size: 2.1250rem; line-height: 1.4118; /* (2 * 24) / 34 = 1.41176... */ } h4 { font-size: 26px; /* IE Only */ font-size: 1.6250rem; line-height: 1.8462; /* (2 * 24) / 26 = 1.84615... */ } h5, h6 { font-size: 20px; /* IE Only */ font-size: 1.2500rem; line-height: 1.8000; /* half-step (1.5 * 24) / 20 = 1.5 */ } .input_hint, .input_error_message, .input_instructions { font-size: 13px; /* IE Only */ font-size: 0.8125rem; line-height: 1.8462; /* (1 * 24) / 13 = 1.84615... */ } .input_hint, .input_error_message { line-height: 1.2000; } }