├── .browserslistrc ├── .editorconfig ├── .eslintrc ├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .markdownlint.json ├── .remove-tag.txt ├── .travis.yml ├── CHANGELOG.md ├── GitHub-Personal-Access-Tokens.url ├── LICENSE.md ├── README.md ├── cdn └── normalize │ └── 5.0.0 │ └── css │ ├── normalize.min.css │ └── normalize.min.css.map ├── component.json ├── css ├── 16pixels.css ├── 16pixels.min.css └── 16pixels.min.css.map ├── favicon.ico ├── gulpfile.js ├── img ├── 16pixels-logo-36D7B7-935x230.png └── 640x360.png ├── index.html ├── index.js ├── package.json └── scss └── 16pixels.scss /.browserslistrc: -------------------------------------------------------------------------------- 1 | defaults 2 | not IE 11 3 | maintained node versions 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*.{html,shtml,php,inc,tpl,js,json,css,scss,xml,svg,txt,md}] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | # Matches multiple files with brace expansion notation 13 | # Set default charset 14 | [*.{html,shtml,php,inc,json,tpl,txt,md}] 15 | charset = utf-8 16 | 17 | # 4 space indentation 18 | [*.{html,shtml,php,inc,tpl,js,json,css,scss,xml,svg,txt,md}] 19 | indent_style = tab 20 | indent_size = 4 21 | 22 | [*.md] 23 | insert_final_newline = false 24 | trim_trailing_whitespace = false 25 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | // http://eslint.org/docs/rules/ 3 | 4 | "env": { 5 | "browser": false, // browser global variables. 6 | "node": false, // Node.js global variables and Node.js-specific rules. 7 | "amd": false, // defines require() and define() as global variables as per the amd spec. 8 | "mocha": false, // adds all of the Mocha testing global variables. 9 | "jasmine": false, // adds all of the Jasmine testing global variables for version 1.3 and 2.0. 10 | "phantomjs": false, // phantomjs global variables. 11 | "jquery": false, // jquery global variables. 12 | "prototypejs": false, // prototypejs global variables. 13 | "shelljs": false, // shelljs global variables. 14 | }, 15 | 16 | "globals": { 17 | // e.g. "angular": true 18 | }, 19 | 20 | "plugins": [ 21 | // e.g. "react" (must run `npm install eslint-plugin-react` first) 22 | ], 23 | 24 | "rules": { 25 | ////////// Possible Errors ////////// 26 | 27 | "no-comma-dangle": 0, // disallow trailing commas in object literals 28 | "no-cond-assign": 0, // disallow assignment in conditional expressions 29 | "no-console": 0, // disallow use of console (off by default in the node environment) 30 | "no-constant-condition": 0, // disallow use of constant expressions in conditions 31 | "no-control-regex": 0, // disallow control characters in regular expressions 32 | "no-debugger": 0, // disallow use of debugger 33 | "no-dupe-keys": 0, // disallow duplicate keys when creating object literals 34 | "no-empty": 0, // disallow empty statements 35 | "no-empty-class": 0, // disallow the use of empty character classes in regular expressions 36 | "no-ex-assign": 0, // disallow assigning to the exception in a catch block 37 | "no-extra-boolean-cast": 0, // disallow double-negation boolean casts in a boolean context 38 | "no-extra-parens": 0, // disallow unnecessary parentheses (off by default) 39 | "no-extra-semi": 0, // disallow unnecessary semicolons 40 | "no-func-assign": 0, // disallow overwriting functions written as function declarations 41 | "no-inner-declarations": 0, // disallow function or variable declarations in nested blocks 42 | "no-invalid-regexp": 0, // disallow invalid regular expression strings in the RegExp constructor 43 | "no-irregular-whitespace": 0, // disallow irregular whitespace outside of strings and comments 44 | "no-negated-in-lhs": 0, // disallow negation of the left operand of an in expression 45 | "no-obj-calls": 0, // disallow the use of object properties of the global object (Math and JSON) as functions 46 | "no-regex-spaces": 0, // disallow multiple spaces in a regular expression literal 47 | "no-reserved-keys": 0, // disallow reserved words being used as object literal keys (off by default) 48 | "no-sparse-arrays": 0, // disallow sparse arrays 49 | "no-unreachable": 0, // disallow unreachable statements after a return, throw, continue, or break statement 50 | "use-isnan": 0, // disallow comparisons with the value NaN 51 | "valid-jsdoc": 0, // Ensure JSDoc comments are valid (off by default) 52 | "valid-typeof": 0, // Ensure that the results of typeof are compared against a valid string 53 | 54 | ////////// Best Practices ////////// 55 | 56 | "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default) 57 | "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default) 58 | "consistent-return": 0, // require return statements to either always or never specify values 59 | "curly": 0, // specify curly brace conventions for all control statements 60 | "default-case": 0, // require default case in switch statements (off by default) 61 | "dot-notation": 0, // encourages use of dot notation whenever possible 62 | "eqeqeq": 0, // require the use of === and !== 63 | "guard-for-in": 0, // make sure for-in loops have an if statement (off by default) 64 | "no-alert": 0, // disallow the use of alert, confirm, and prompt 65 | "no-caller": 0, // disallow use of arguments.caller or arguments.callee 66 | "no-div-regex": 0, // disallow division operators explicitly at beginning of regular expression (off by default) 67 | "no-else-return": 0, // disallow else after a return in an if (off by default) 68 | "no-empty-label": 0, // disallow use of labels for anything other then loops and switches 69 | "no-eq-null": 0, // disallow comparisons to null without a type-checking operator (off by default) 70 | "no-eval": 0, // disallow use of eval() 71 | "no-extend-native": 0, // disallow adding to native types 72 | "no-extra-bind": 0, // disallow unnecessary function binding 73 | "no-fallthrough": 0, // disallow fallthrough of case statements 74 | "no-floating-decimal": 0, // disallow the use of leading or trailing decimal points in numeric literals (off by default) 75 | "no-implied-eval": 0, // disallow use of eval()-like methods 76 | "no-iterator": 0, // disallow usage of __iterator__ property 77 | "no-labels": 0, // disallow use of labeled statements 78 | "no-lone-blocks": 0, // disallow unnecessary nested blocks 79 | "no-loop-func": 0, // disallow creation of functions within loops 80 | "no-multi-spaces": 0, // disallow use of multiple spaces 81 | "no-multi-str": 0, // disallow use of multiline strings 82 | "no-native-reassign": 0, // disallow reassignments of native objects 83 | "no-new": 0, // disallow use of new operator when not part of the assignment or comparison 84 | "no-new-func": 0, // disallow use of new operator for Function object 85 | "no-new-wrappers": 0, // disallows creating new instances of String, Number, and Boolean 86 | "no-octal": 0, // disallow use of octal literals 87 | "no-octal-escape": 0, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251"; 88 | "no-process-env": 0, // disallow use of process.env (off by default) 89 | "no-proto": 0, // disallow usage of __proto__ property 90 | "no-redeclare": 0, // disallow declaring the same variable more then once 91 | "no-return-assign": 0, // disallow use of assignment in return statement 92 | "no-script-url": 0, // disallow use of javascript: urls. 93 | "no-self-compare": 0, // disallow comparisons where both sides are exactly the same (off by default) 94 | "no-sequences": 0, // disallow use of comma operator 95 | "no-unused-expressions": 0, // disallow usage of expressions in statement position 96 | "no-void": 0, // disallow use of void operator (off by default) 97 | "no-warning-comments": 0, // disallow usage of configurable warning terms in comments, e.g. TODO or FIXME (off by default) 98 | "no-with": 0, // disallow use of the with statement 99 | "radix": 0, // require use of the second argument for parseInt() (off by default) 100 | "vars-on-top": 0, // requires to declare all vars on top of their containing scope (off by default) 101 | "wrap-iife": 0, // require immediate function invocation to be wrapped in parentheses (off by default) 102 | "yoda": 0, // require or disallow Yoda conditions 103 | 104 | ////////// Strict Mode ////////// 105 | 106 | "global-strict": 0, // (deprecated) require or disallow the "use strict" pragma in the global scope (off by default in the node environment) 107 | "no-extra-strict": 0, // (deprecated) disallow unnecessary use of "use strict"; when already in strict mode 108 | "strict": 0, // controls location of Use Strict Directives 109 | 110 | ////////// Variables ////////// 111 | 112 | "no-catch-shadow": 0, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment) 113 | "no-delete-var": 0, // disallow deletion of variables 114 | "no-label-var": 0, // disallow labels that share a name with a variable 115 | "no-shadow": 0, // disallow declaration of variables already declared in the outer scope 116 | "no-shadow-restricted-names": 0, // disallow shadowing of names such as arguments 117 | "no-undef": 0, // disallow use of undeclared variables unless mentioned in a /*global */ block 118 | "no-undef-init": 0, // disallow use of undefined when initializing variables 119 | "no-undefined": 0, // disallow use of undefined variable (off by default) 120 | "no-unused-vars": 0, // disallow declaration of variables that are not used in the code 121 | "no-use-before-define": 0, // disallow use of variables before they are defined 122 | 123 | ////////// Node.js ////////// 124 | 125 | "handle-callback-err": 0, // enforces error handling in callbacks (off by default) (on by default in the node environment) 126 | "no-mixed-requires": 0, // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment) 127 | "no-new-require": 0, // disallow use of new operator with the require function (off by default) (on by default in the node environment) 128 | "no-path-concat": 0, // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment) 129 | "no-process-exit": 0, // disallow process.exit() (on by default in the node environment) 130 | "no-restricted-modules": 0, // restrict usage of specified node modules (off by default) 131 | "no-sync": 0, // disallow use of synchronous methods (off by default) 132 | 133 | ////////// Stylistic Issues ////////// 134 | 135 | "brace-style": 0, // enforce one true brace style (off by default) 136 | "camelcase": 0, // require camel case names 137 | "comma-spacing": 0, // enforce spacing before and after comma 138 | "comma-style": 0, // enforce one true comma style (off by default) 139 | "consistent-this": 0, // enforces consistent naming when capturing the current execution context (off by default) 140 | "eol-last": 0, // enforce newline at the end of file, with no multiple empty lines 141 | "func-names": 0, // require function expressions to have a name (off by default) 142 | "func-style": 0, // enforces use of function declarations or expressions (off by default) 143 | "key-spacing": 0, // enforces spacing between keys and values in object literal properties 144 | "max-nested-callbacks": 0, // specify the maximum depth callbacks can be nested (off by default) 145 | "new-cap": 0, // require a capital letter for constructors 146 | "new-parens": 0, // disallow the omission of parentheses when invoking a constructor with no arguments 147 | "no-array-constructor": 0, // disallow use of the Array constructor 148 | "no-inline-comments": 0, // disallow comments inline after code (off by default) 149 | "no-lonely-if": 0, // disallow if as the only statement in an else block (off by default) 150 | "no-mixed-spaces-and-tabs": 0, // disallow mixed spaces and tabs for indentation 151 | "no-multiple-empty-lines": 0, // disallow multiple empty lines (off by default) 152 | "no-nested-ternary": 0, // disallow nested ternary expressions (off by default) 153 | "no-new-object": 0, // disallow use of the Object constructor 154 | "no-space-before-semi": 0, // disallow space before semicolon 155 | "no-spaced-func": 0, // disallow space between function identifier and application 156 | "no-ternary": 0, // disallow the use of ternary operators (off by default) 157 | "no-trailing-spaces": 0, // disallow trailing whitespace at the end of lines 158 | "no-underscore-dangle": 0, // disallow dangling underscores in identifiers 159 | "no-wrap-func": 0, // disallow wrapping of non-IIFE statements in parens 160 | "one-var": 0, // allow just one var statement per function (off by default) 161 | "operator-assignment": 0, // require assignment operator shorthand where possible or prohibit it entirely (off by default) 162 | "padded-blocks": 0, // enforce padding within blocks (off by default) 163 | "quote-props": 0, // require quotes around object literal property names (off by default) 164 | "quotes": 0, // specify whether double or single quotes should be used 165 | "semi": 0, // require or disallow use of semicolons instead of ASI 166 | "sort-vars": 0, // sort variables within the same declaration block (off by default) 167 | "space-after-function-name": 0, // require a space after function names (off by default) 168 | "space-after-keywords": 0, // require a space after certain keywords (off by default) 169 | "space-before-blocks": 0, // require or disallow space before blocks (off by default) 170 | "space-in-brackets": 0, // require or disallow spaces inside brackets (off by default) 171 | "space-in-parens": 0, // require or disallow spaces inside parentheses (off by default) 172 | "space-infix-ops": 0, // require spaces around operators 173 | "space-return-throw-case": 0, // require a space after return, throw, and case 174 | "space-unary-ops": 0, // Require or disallow spaces before/after unary operators (words on by default, nonwords off by default) 175 | "spaced-line-comment": 0, // require or disallow a space immediately following the // in a line comment (off by default) 176 | "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default) 177 | 178 | ////////// ECMAScript 6 ////////// 179 | 180 | "no-var": 0, // require let or const instead of var (off by default) 181 | "generator-star": 0, // enforce the position of the * in generator functions (off by default) 182 | 183 | ////////// Legacy ////////// 184 | 185 | "max-depth": 0, // specify the maximum depth that blocks can be nested (off by default) 186 | "max-len": 0, // specify the maximum length of a line in your program (off by default) 187 | "max-params": 0, // limits the number of parameters that can be used in the function declaration. (off by default) 188 | "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default) 189 | "no-bitwise": 0, // disallow use of bitwise operators (off by default) 190 | "no-plusplus": 0 // disallow use of unary operators, ++ and -- (off by default) 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Thanks for helping out! 😇 2 | 3 | ### Raising an issue 4 | 5 | * Make sure the issue hasn't been raised yet 6 | 7 | * Include **screenshots** and animated GIFs in your issue whenever possible 8 | 9 | * Tag your issue accordingly: 10 | * is it a **Bug**, a **Feature**, a **Question**, or do you need **Help**? 11 | * if it's a bug, is it a **Browser Bug** (only happens in one browser)? 12 | 13 | ### Submitting a Pull Request 14 | 15 | * Include **screenshots** and animated GIFs in your pull request whenever possible 16 | 17 | * Use the **present** tense ("Add feature" not "Added feature") 18 | 19 | * Use the **imperative** mood ("Move cursor to..." not "Moves cursor to...") 20 | 21 | * Limit the first line to 72 characters or fewer 22 | 23 | * Reference issues and pull requests liberally 24 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### PLEASE READ THE FOLLOWING INSTRUCTIONS 2 | 3 | Tag your issue accordingly: 4 | 5 | * is it a bug/feature/question or do you need help? 6 | 7 | * if it's a bug, is it a browser bug? 8 | 9 | Thanks for helping out! 10 | 11 | Please remove any unused content (including these instructions) before submitting your issue. 12 | 13 | ### Checklist 14 | 15 | * [ ] My **browser** is: 16 | 17 | * [ ] I'm using version [x.x.x] 18 | 19 | * [ ] I am sure this issue is **not a duplicate**? 20 | 21 | ### Description 22 | 23 | _[Description of the bug, enhancement, or question]_ 24 | 25 | ### Steps to Reproduce 26 | 27 | 1. _[First Step]_ 28 | 2. _[Second Step]_ 29 | 3. _[and so on...]_ 30 | 31 | ### Expected behavior 32 | 33 | _[What you expected to happen]_ 34 | 35 | ### Actual behavior 36 | 37 | _[What actually happened]_ 38 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### PLEASE READ THE FOLLOWING INSTRUCTIONS 2 | 3 | Thanks for helping out! 😇 4 | 5 | * Pull the latest `master` branch 6 | 7 | * If your PR fixes an issue, reference that issue 8 | 9 | * If your PR has lots of commits, **rebase** first 10 | 11 | Please remove any unused content (including these instructions) before submitting your issue. 12 | 13 | ### Pull Request 14 | 15 | Fixes # 16 | 17 | Changes proposed: 18 | 19 | * [ ] Add 20 | 21 | * [ ] Fix 22 | 23 | * [ ] Remove 24 | 25 | * [ ] Update 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.bat 2 | *.sh 3 | *.zip 4 | .*.md 5 | koala-config.json 6 | node_modules/ 7 | package-lock.json 8 | -------------------------------------------------------------------------------- /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "default": true, 3 | "MD003": { 4 | "style": "atx" 5 | }, 6 | "MD007": { 7 | "indent": 4 8 | }, 9 | "MD025": { 10 | "front_matter_title": "false" 11 | }, 12 | "MD033": { 13 | "allowed_elements": ["figure", 14 | "video"] 15 | }, 16 | "MD013": { 17 | "line_length": 80 18 | }, 19 | "MD010": false, 20 | "whitespace": false 21 | } 22 | -------------------------------------------------------------------------------- /.remove-tag.txt: -------------------------------------------------------------------------------- 1 | git tag -d v0.1.10 2 | git push origin :refs/tags/v0.1.10 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - stable 4 | notifications: 5 | email: 6 | on_failure: always # default: always 7 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # HEAD 2 | 3 | ## 0.1.11 (February 4, 2017) 4 | 5 | * Merged some rules. 6 | 7 | * Changed some colors. 8 | 9 | ## 0.1.4 (April 19, 2015) 10 | 11 | * Removed unnecessary rules used for gridpak users. 12 | 13 | * Added rules for previously uncovered input element types. 14 | 15 | * Changed appearance of form elements. 16 | 17 | ## 0.1.5 (April 29, 2015) 18 | 19 | * Changed font stacks for pre code, and .phonetic. 20 | 21 | * Changed form elements outline and background colors to neutrals 22 | 23 | * Fixed PRE, HR, DETAILS, SMALL. 24 | 25 | * Fixed headings font sizes based on 16px/12pt base font size. -------------------------------------------------------------------------------- /GitHub-Personal-Access-Tokens.url: -------------------------------------------------------------------------------- 1 | [InternetShortcut] 2 | URL=https://github.com/settings/tokens 3 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | 3 | Copyright (c) 2006-2016 Serguei Shimansky, 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 16pixels 2 | 3 | **16pixels.css** is a set of CSS rules to ensure consistent 16 pixels based typography. Pixels are used for font sizes and line heights, as well as for paddings and margins. Can be used as typography normalizer. No dependencies. Wrap your HTML content with class **.col** and you are done. 4 | 5 | [![npm](https://img.shields.io/npm/v/16pixels.svg)](https://www.npmjs.com/package/16pixels) 6 | [![Codacy Badge](https://app.codacy.com/project/badge/Grade/0de605fc9397497895508d26e3bdbae2)](https://www.codacy.com/manual/englishextra/16pixels/dashboard?utm_source=github.com&utm_medium=referral&utm_content=englishextra/16pixels&utm_campaign=Badge_Grade) 7 | [![CDNJS](https://img.shields.io/cdnjs/v/16pixels.svg)](https://cdnjs.com/libraries/16pixels) 8 | [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/16pixels/badge)](https://www.jsdelivr.com/package/npm/16pixels) 9 | 10 | ![16pixels](https://github.com/englishextra/16pixels/raw/master/img/16pixels-logo-36D7B7-935x230.png) 11 | 12 | ## npm Install 13 | 14 | `npm install 16pixels` 15 | 16 | ## Usage 17 | 18 | ```html 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |

Heading 1

32 | 33 |

34 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 35 |

36 |
37 | 38 | 39 | ``` 40 | 41 | ## License 42 | 43 | Available under [MIT license](https://opensource.org/licenses/MIT). 44 | -------------------------------------------------------------------------------- /cdn/normalize/5.0.0/css/normalize.min.css: -------------------------------------------------------------------------------- 1 | button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */ -------------------------------------------------------------------------------- /cdn/normalize/5.0.0/css/normalize.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["normalize.css"],"names":[],"mappings":"AA2QA,OA3LA,GA4LA,MACE,SAAqB,QAxDvB,MAkOA,OA1FA,SAvIA,MAwIE,QAAS,aADX,SA/JA,IACA,IAgKE,eAA2B,SAnV7B,KACE,YAAa,WACb,YAAqG,KACrG,qBAAsH,KACtH,yBAAkI,KAUpI,KACE,OAAQ,EAwYD,MAjYT,QACA,MAgYA,QA/XA,OACA,OACA,IACA,QACE,QAAS,MAQX,GACE,UAAW,IACX,OAAQ,MAAO,EAWjB,WACA,OACA,KACE,QAAoB,MAOtB,OACE,OAAQ,IAAI,KAQd,GACE,WAAY,YACZ,OAAmB,EAuErB,KACA,IA/DA,IAgEA,KA/DE,YAAa,UAAW,UACxB,UAAsB,IAWxB,EACE,iBAAkB,YAClB,6BAAyC,QAQ3C,SACA,QACE,cAAe,EAQjB,YACE,cAAe,KACf,gBAA4B,UAC5B,gBAAoC,UAAU,OAOhD,EACA,OAUE,YAAa,OAmBf,IACE,WAAY,OAOd,KACE,iBAAkB,KAClB,MAAO,KAOT,MACE,UAAW,IAQb,IACA,IACE,UAAW,IACX,YAAa,EACb,SAAU,SAIZ,IACE,OAAQ,OAGV,IACE,IAAK,MAmBP,sBACE,QAAS,KACT,OAAQ,EAOV,IACE,aAAc,KAOhB,eACE,SAAU,OAWZ,OACA,MACA,SACA,OACA,SACE,YAAa,WACb,UAAsB,KACtB,YAAgC,KAChC,OAAmC,EAQrC,OACA,OASA,OACA,OACE,eAA2B,KAY7B,cAFsB,cADtB,OACA,mBAGE,mBAAoB,OAQtB,gCACA,+BACA,gCAHA,yBAIE,aAAc,KACd,QAAS,EAQX,6BACA,4BACA,6BAHA,sBAIE,QAAoB,WAAP,OAAJ,IAOX,SACE,OAAQ,IAAI,MAAM,OAClB,OAAQ,EAAE,IACV,QAAS,MAAO,OAAQ,MAU1B,OACE,WAAY,WACZ,MAAkB,QAClB,QAA4B,MAC5B,UAAsC,KACtC,QAA4C,EAC5C,YAAwD,OAQ1D,UASA,SACE,SAAU,KAQZ,gBACA,aACE,WAAY,WACZ,QAAoB,EAOtB,yCACA,yCACE,OAAQ,KAQV,cACE,mBAAoB,UACpB,eAA2B,KAO7B,4CACA,yCACE,mBAAoB,KAQtB,6BACE,mBAAoB,OACpB,KAAiB,QAoBnB,QACE,QAAS,UA6BX,SAXA,SACE,QAAS"} -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "16pixels", 3 | "repo": "englishextra/16pixels", 4 | "version": "0.1.13", 5 | "styles": ["css/16pixels.css"], 6 | "author": "englishextra", 7 | "license": "(MIT)" 8 | } 9 | -------------------------------------------------------------------------------- /css/16pixels.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * 16pixels v0.1.9 3 | * @see {@link https://github.com/englishextra/16pixels} 4 | * set html font to 16px, and body to 16px 5 | * line height should be the closest multiple of 4 6 | */ 7 | html { 8 | font-size: 16px; 9 | line-height: 24px; 10 | } 11 | 12 | body { 13 | font-size: 16px; 14 | line-height: 24px; 15 | } 16 | 17 | .col div, 18 | .col span, 19 | .col applet, 20 | .col object, 21 | .col iframe, 22 | .col h1, 23 | .col h2, 24 | .col h3, 25 | .col h4, 26 | .col h5, 27 | .col h6, 28 | .col p, 29 | .col blockquote, 30 | .col pre, 31 | .col a, 32 | .col abbr, 33 | .col acronym, 34 | .col address, 35 | .col big, 36 | .col cite, 37 | .col code, 38 | .col del, 39 | .col dfn, 40 | .col em, 41 | .col img, 42 | .col ins, 43 | .col kbd, 44 | .col q, 45 | .col s, 46 | .col samp, 47 | .col small, 48 | .col strike, 49 | .col strong, 50 | .col sub, 51 | .col sup, 52 | .col tt, 53 | .col var, 54 | .col b, 55 | .col u, 56 | .col i, 57 | .col center, 58 | .col dl, 59 | .col dt, 60 | .col dd, 61 | .col ol, 62 | .col ul, 63 | .col details, 64 | .col li, 65 | .col fieldset, 66 | .col form, 67 | .col label, 68 | .col legend, 69 | .col table, 70 | .col caption, 71 | .col tbody, 72 | .col tfoot, 73 | .col thead, 74 | .col tr, 75 | .col th, 76 | .col td, 77 | .col article, 78 | .col aside, 79 | .col canvas, 80 | .col embed, 81 | .col figure, 82 | .col figcaption, 83 | .col footer, 84 | .col header, 85 | .col hgroup, 86 | .col menu, 87 | .col nav, 88 | .col output, 89 | .col ruby, 90 | .col section, 91 | .col summary, 92 | .col time, 93 | .col mark, 94 | .col audio, 95 | .col video { 96 | font-size: 100%; 97 | font: inherit; 98 | border: 0; 99 | vertical-align: baseline; 100 | margin: 0; 101 | padding: 0; 102 | } 103 | 104 | .col sub, 105 | .col sup { 106 | font-size: 75%; 107 | line-height: 0; 108 | position: relative; 109 | } 110 | 111 | .col sup { 112 | top: -0.5em; 113 | } 114 | 115 | .col sub { 116 | bottom: -0.25em; 117 | } 118 | 119 | .col blockquote, 120 | .col q { 121 | quotes: none; 122 | } 123 | 124 | .col blockquote:before, 125 | .col blockquote:after, 126 | .col q:before, 127 | .col q:after { 128 | content: ""; 129 | content: none; 130 | } 131 | 132 | .col a { 133 | text-decoration: none; 134 | -webkit-tap-highlight-color: transparent; 135 | outline: none; 136 | } 137 | 138 | .col h1 a, 139 | .col h2 a, 140 | .col h3 a, 141 | .col h4 a, 142 | .col h5 a, 143 | .col h6 a { 144 | font-weight: inherit; 145 | } 146 | 147 | .col address, 148 | .col p.address { 149 | font-size: 14px; 150 | line-height: 20px; 151 | margin-right: 0; 152 | } 153 | 154 | .col p.blockquote { 155 | margin-right: 0; 156 | } 157 | 158 | .col h1 { 159 | font-size: 39px; 160 | line-height: 48px; 161 | padding: 0; 162 | } 163 | 164 | .col h2 { 165 | font-size: 25px; 166 | line-height: 32px; 167 | padding: 0; 168 | } 169 | 170 | .col h3 { 171 | font-size: 20px; 172 | line-height: 24px; 173 | padding: 0; 174 | } 175 | 176 | .col h4 { 177 | font-size: 16px; 178 | line-height: 20px; 179 | padding: 0; 180 | } 181 | 182 | .col h5 { 183 | font-size: 16px; 184 | line-height: 20px; 185 | text-transform: uppercase; 186 | padding: 0; 187 | } 188 | 189 | .col h6 { 190 | font-size: 16px; 191 | line-height: 20px; 192 | text-decoration: underline; 193 | padding: 0; 194 | } 195 | 196 | .col caption, 197 | .col label, 198 | .col p.smaller, 199 | .col table td, 200 | .col table th, 201 | .col pre, 202 | .col pre code { 203 | font-size: 14px; 204 | line-height: 20px; 205 | } 206 | 207 | .col p.larger, 208 | .col blockquote { 209 | font-size: 18px; 210 | line-height: 28px; 211 | } 212 | 213 | .col p, 214 | .col p.blockquote, 215 | .col dl dt, 216 | .col dl dd, 217 | .col ul li, 218 | .col ol li { 219 | font-size: inherit; 220 | line-height: inherit; 221 | } 222 | 223 | .col ul { 224 | list-style: disc outside; 225 | } 226 | 227 | .col ol { 228 | list-style: decimal inside; 229 | } 230 | 231 | .col pre { 232 | font-size: inherit; 233 | line-height: inherit; 234 | white-space: pre; 235 | white-space: pre-wrap; 236 | word-wrap: inherit; 237 | overflow: -moz-scrollbars-horizontal; 238 | overflow-x: auto; 239 | border: 0; 240 | -webkit-box-shadow: none; 241 | box-shadow: none; 242 | -moz-tab-size: 4; 243 | -o-tab-size: 4; 244 | tab-size: 4; 245 | padding: 16px 20px; 246 | } 247 | 248 | .col pre code { 249 | text-shadow: none; 250 | } 251 | 252 | .col pre a { 253 | text-decoration: none; 254 | -webkit-tap-highlight-color: transparent; 255 | outline: none; 256 | } 257 | 258 | .col table { 259 | width: auto; 260 | border-collapse: collapse; 261 | border-spacing: 0; 262 | } 263 | 264 | .col caption, 265 | .col table th, 266 | .col table td { 267 | text-align: left; 268 | } 269 | 270 | .col table td, 271 | .col table th { 272 | padding: 7px 12px 7px 12px; 273 | vertical-align: top; 274 | } 275 | 276 | .col img { 277 | border: 0; 278 | vertical-align: bottom; 279 | padding: 0; 280 | } 281 | 282 | .col input[type^="text"], 283 | .col input[type^="search"], 284 | .col input[type^="email"], 285 | .col input[type^="url"], 286 | .col input[type^="password"], 287 | .col input[type^="tel"], 288 | .col input[type^="color"], 289 | .col input[type^="number"], 290 | .col input[type^="date"], 291 | .col input[type^="month"], 292 | .col input[type^="week"], 293 | .col input[type^="time"], 294 | .col input[type^="datetime"], 295 | .col input[type^="datetime-local"], 296 | .col select, 297 | .col textarea { 298 | font-size: 14px; 299 | line-height: 20px; 300 | -webkit-box-sizing: border-box; 301 | box-sizing: border-box; 302 | vertical-align: baseline; 303 | -webkit-tap-highlight-color: transparent; 304 | outline: none; 305 | padding: 0 8px; 306 | } 307 | 308 | .col select { 309 | padding: 0 0 0 4px; 310 | } 311 | 312 | .col optgroup { 313 | margin: 4px; 314 | padding-left: 4px; 315 | } 316 | 317 | .col input[type="color"] { 318 | padding: 0; 319 | } 320 | 321 | .col button, 322 | .col input[type="button"], 323 | .col input[type="reset"], 324 | .col input[type="submit"], 325 | .col input[type^="text"], 326 | .col input[type^="search"], 327 | .col input[type^="email"], 328 | .col input[type^="url"], 329 | .col input[type^="password"], 330 | .col input[type^="tel"], 331 | .col input[type^="color"], 332 | .col input[type^="number"], 333 | .col input[type^="date"], 334 | .col input[type^="month"], 335 | .col input[type^="week"], 336 | .col input[type^="time"], 337 | .col input[type^="datetime"], 338 | .col input[type^="datetime-local"], 339 | .col select { 340 | height: 36px; 341 | } 342 | 343 | .col button, 344 | .col input[type="button"], 345 | .col input[type="reset"], 346 | .col input[type="submit"] { 347 | font-size: 14px; 348 | line-height: 20px; 349 | -webkit-box-sizing: border-box; 350 | box-sizing: border-box; 351 | vertical-align: baseline; 352 | -webkit-tap-highlight-color: transparent; 353 | outline: none; 354 | cursor: pointer; 355 | padding: 0 8px; 356 | } 357 | 358 | .col label { 359 | display: block; 360 | margin-bottom: 4px; 361 | } 362 | 363 | .col textarea { 364 | width: 95%; 365 | } 366 | 367 | .col ul, 368 | .col ol, 369 | .col dl { 370 | margin-left: auto; 371 | } 372 | 373 | .col dl dd:before { 374 | content: "\2014\00a0"; 375 | } 376 | 377 | .col address, 378 | .col p.address, 379 | .col p.blockquote, 380 | .col dl dd, 381 | .col blockquote { 382 | margin-left: 24px; 383 | } 384 | 385 | .col ol { 386 | padding-left: 24px; 387 | } 388 | 389 | .col .indent { 390 | text-indent: 24px; 391 | } 392 | 393 | .col ul { 394 | padding-left: 40px; 395 | } 396 | 397 | .col td ul { 398 | margin-top: 0; 399 | } 400 | 401 | .col td ul li { 402 | font-size: inherit; 403 | line-height: inherit; 404 | } 405 | 406 | .col td ol { 407 | margin-top: 0; 408 | } 409 | 410 | .col td ol li { 411 | font-size: inherit; 412 | line-height: inherit; 413 | } 414 | 415 | .col.textcenter address, 416 | .col.textcenter p.address, 417 | .col.textcenter dd, 418 | .col.textcenter pre, 419 | .col.textcenter blockquote, 420 | .col.textcenter p.blockquote { 421 | margin-left: 0; 422 | } 423 | 424 | .col img, 425 | .col input, 426 | .col ol li, 427 | .col select, 428 | .col textarea, 429 | .col ul li, 430 | .col table td ol, 431 | .col table td ul, 432 | .col table td dl { 433 | margin: 0; 434 | } 435 | 436 | .col address, 437 | .col p.address, 438 | .col p.blockquote, 439 | .col h1, 440 | .col h2, 441 | .col h3, 442 | .col h4, 443 | .col h5, 444 | .col h6, 445 | .col blockquote, 446 | .col caption, 447 | .col dl, 448 | .col dl dd, 449 | .col figcaption, 450 | .col figure, 451 | .col ol, 452 | .col p, 453 | .col pre, 454 | .col table, 455 | .col ul, 456 | .col details { 457 | margin-top: 0; 458 | } 459 | 460 | .col h2 + div, 461 | .col h2 + p, 462 | .col h2 + table, 463 | .col h3 + div, 464 | .col h3 + p, 465 | .col h3 + table, 466 | .col h4 + div, 467 | .col h4 + p, 468 | .col h4 + table, 469 | .col h5 + div, 470 | .col h5 + p, 471 | .col h5 + table, 472 | .col h6 + div, 473 | .col h6 + p, 474 | .col h6 + table { 475 | margin-top: 8px; 476 | } 477 | 478 | .col address:first-child, 479 | .col div + address, 480 | .col h1 + blockquote, 481 | .col h1 + div, 482 | .col h1 + hr, 483 | .col h1 + div.hr, 484 | .col h1 + dl, 485 | .col h1 + ol, 486 | .col h1 + p, 487 | .col h1 + pre, 488 | .col h1 + table, 489 | .col h1 + ul, 490 | .col h1 + details, 491 | .col h2 + blockquote, 492 | .col h2 + dl, 493 | .col h2 + h3, 494 | .col h2 + ol, 495 | .col h2 + pre, 496 | .col h2 + ul, 497 | .col h2 + details, 498 | .col h3 + blockquote, 499 | .col h3 + dl, 500 | .col h3 + h4, 501 | .col h3 + ol, 502 | .col h3 + pre, 503 | .col h3 + ul, 504 | .col h3 + details, 505 | .col h4 + blockquote, 506 | .col h4 + dl, 507 | .col h4 + h3, 508 | .col h4 + h5, 509 | .col h4 + ol, 510 | .col h4 + pre, 511 | .col h4 + ul, 512 | .col h4 + details, 513 | .col h5 + blockquote, 514 | .col h5 + dl, 515 | .col h5 + h6, 516 | .col h5 + h2, 517 | .col h5 + ol, 518 | .col h5 + pre, 519 | .col h5 + ul, 520 | .col h5 + details, 521 | .col h6 + blockquote, 522 | .col h6 + dl, 523 | .col h6 + ol, 524 | .col h6 + pre, 525 | .col h6 + ul, 526 | .col h6 + details, 527 | .col p + address, 528 | .col p + p, 529 | .col p.address, 530 | .col p.blockquote, 531 | .col pre + address, 532 | .col table + address, 533 | .col table + p.address, 534 | .col table + p.blockquote { 535 | margin-top: 24px; 536 | } 537 | 538 | .col blockquote + blockquote, 539 | .col blockquote + dl, 540 | .col blockquote + h1, 541 | .col blockquote + h2, 542 | .col blockquote + h3, 543 | .col blockquote + h4, 544 | .col blockquote + h5, 545 | .col blockquote + h6, 546 | .col blockquote + ol, 547 | .col blockquote + p, 548 | .col blockquote + pre, 549 | .col blockquote + table, 550 | .col blockquote + ul, 551 | .col blockquote + details, 552 | .col div + blockquote, 553 | .col div + dl, 554 | .col div + h1, 555 | .col div + h2, 556 | .col div + h3, 557 | .col div + h4, 558 | .col div + h5, 559 | .col div + h6, 560 | .col div + ol, 561 | .col div + p, 562 | .col div + pre, 563 | .col div + table, 564 | .col div + ul, 565 | .col div + details, 566 | .col dl + blockquote, 567 | .col dl + dl, 568 | .col dl + h1, 569 | .col dl + h2, 570 | .col dl + h3, 571 | .col dl + h4, 572 | .col dl + h5, 573 | .col dl + h6, 574 | .col dl + ol, 575 | .col dl + p, 576 | .col dl + pre, 577 | .col dl + table, 578 | .col dl + ul, 579 | .col dl + details, 580 | .col ol + blockquote, 581 | .col ol + dl, 582 | .col ol + h1, 583 | .col ol + h2, 584 | .col ol + h3, 585 | .col ol + h4, 586 | .col ol + h5, 587 | .col ol + h6, 588 | .col ol + ol, 589 | .col ol + p, 590 | .col ol + pre, 591 | .col ol + table, 592 | .col ol + ul, 593 | .col ol + details, 594 | .col p + blockquote, 595 | .col p + dl, 596 | .col p + figcaption, 597 | .col p + figure, 598 | .col p + h1, 599 | .col p + h2, 600 | .col p + h3, 601 | .col p + h4, 602 | .col p + h5, 603 | .col p + h6, 604 | .col p + ol, 605 | .col p + pre, 606 | .col p + table, 607 | .col p + ul, 608 | .col p + details, 609 | .col pre + blockquote, 610 | .col pre + dl, 611 | .col pre + h1, 612 | .col pre + h2, 613 | .col pre + h3, 614 | .col pre + h4, 615 | .col pre + h5, 616 | .col pre + h6, 617 | .col pre + ol, 618 | .col pre + p, 619 | .col pre + pre, 620 | .col pre + table, 621 | .col pre + ul, 622 | .col pre + details, 623 | .col table + blockquote, 624 | .col table + dl, 625 | .col table + h1, 626 | .col table + h2, 627 | .col table + h3, 628 | .col table + h4, 629 | .col table + h5, 630 | .col table + h6, 631 | .col table + ol, 632 | .col table + p, 633 | .col table + pre, 634 | .col table + table, 635 | .col table + ul, 636 | .col table + details, 637 | .col ul + blockquote, 638 | .col ul + dl, 639 | .col ul + h1, 640 | .col ul + h2, 641 | .col ul + h3, 642 | .col ul + h4, 643 | .col ul + h5, 644 | .col ul + h6, 645 | .col ul + ol, 646 | .col ul + p, 647 | .col ul + pre, 648 | .col ul + table, 649 | .col ul + ul, 650 | .col ul + details, 651 | .col details + blockquote, 652 | .col details + dl, 653 | .col details + h1, 654 | .col details + h2, 655 | .col details + h3, 656 | .col details + h4, 657 | .col details + h5, 658 | .col details + h6, 659 | .col details + ol, 660 | .col details + p, 661 | .col details + pre, 662 | .col details + table, 663 | .col details + ul, 664 | .col details + details, 665 | .col h1:first-child, 666 | .col h2:first-child, 667 | .col h3:first-child, 668 | .col h4:first-child, 669 | .col h5:first-child, 670 | .col h6:first-child, 671 | .col p:first-child, 672 | .col dl:first-child, 673 | .col ul:first-child, 674 | .col details:first-child, 675 | .col ol:first-child, 676 | .col blockquote:first-child, 677 | .col pre:first-child, 678 | .col table:first-child, 679 | .col figcaption:first-child, 680 | .col figure:first-child { 681 | margin-top: 24px; 682 | } 683 | 684 | .col dl dd, 685 | .col address:first-of-type, 686 | .col p.address:first-of-type, 687 | .col address:last-child, 688 | .col p.address:last-child, 689 | .col p.blockquote:first-of-type, 690 | .col p.blockquote:last-child, 691 | .col p:last-child, 692 | .col dl:last-child, 693 | .col ul:last-child, 694 | .col details:last-child, 695 | .col ol:last-child, 696 | .col blockquote:last-child, 697 | .col pre:last-child, 698 | .col table:first-of-type, 699 | .col table:last-child, 700 | .col figcaption:last-child, 701 | .col figure:last-child { 702 | margin-bottom: 0; 703 | } 704 | 705 | .col address, 706 | .col blockquote, 707 | .col dl, 708 | .col figcaption, 709 | .col figure, 710 | .col ol, 711 | .col pre, 712 | .col ul, 713 | .col details { 714 | margin-bottom: 24px; 715 | } 716 | 717 | .col blockquote + p, 718 | .col div + p, 719 | .col dl + p, 720 | .col h1 + p, 721 | .col h2 + p, 722 | .col h3 + p, 723 | .col h4 + p, 724 | .col h5 + p, 725 | .col h6 + p, 726 | .col ol + p, 727 | .col p + p, 728 | .col pre + p, 729 | .col table + p, 730 | .col ul + p, 731 | .col details + p { 732 | margin-bottom: 16px; 733 | } 734 | 735 | .col .textleft { 736 | text-align: left; 737 | } 738 | 739 | .col .textright { 740 | text-align: right; 741 | } 742 | 743 | .col .textcenter { 744 | text-align: center; 745 | } 746 | 747 | .col .larger { 748 | font-size: larger; 749 | } 750 | 751 | .col small, 752 | .col .smaller { 753 | font-size: smaller; 754 | } 755 | 756 | .col hr, 757 | .col .hr { 758 | height: 1px; 759 | padding: 0; 760 | margin: 24px 0 23px 0; 761 | } 762 | 763 | /** 764 | * font weights 765 | */ 766 | 767 | .col h2, 768 | .col h4, 769 | .col h5, 770 | .col h6, 771 | .col address, 772 | .col p, 773 | .col p.address, 774 | .col p.blockquote, 775 | .col dl dd, 776 | .col ul li, 777 | .col ol li, 778 | .col table td, 779 | .col caption, 780 | .col input[type^="text"], 781 | .col input[type^="search"], 782 | .col input[type^="email"], 783 | .col input[type^="url"], 784 | .col input[type^="password"], 785 | .col input[type^="tel"], 786 | .col input[type^="color"], 787 | .col input[type^="number"], 788 | .col input[type^="date"], 789 | .col input[type^="month"], 790 | .col input[type^="week"], 791 | .col input[type^="time"], 792 | .col input[type^="datetime"], 793 | .col input[type^="datetime-local"], 794 | .col select, 795 | .col textarea, 796 | .col label { 797 | font-weight: normal; 798 | } 799 | 800 | .col h1 { 801 | font-weight: normal; 802 | } 803 | 804 | .col h4, 805 | .col table th, 806 | .col dl dt, 807 | .col button, 808 | .col input[type="button"], 809 | .col input[type="reset"], 810 | .col input[type="submit"], 811 | .col b, 812 | .col strong, 813 | .col .bolder, 814 | .col .highlight { 815 | font-weight: bolder; 816 | } 817 | 818 | /** 819 | * font styles 820 | */ 821 | 822 | .col address, 823 | .col p.address, 824 | .col p.blockquote, 825 | .col blockquote, 826 | .col caption, 827 | .col label, 828 | .col i, 829 | .col em, 830 | .col .italic { 831 | font-style: italic; 832 | } 833 | 834 | .col optgroup { 835 | font-style: normal; 836 | } 837 | 838 | /** 839 | * font families 840 | */ 841 | 842 | .col body { 843 | font-family: "Segoe UI", "Segoe WP", "HelveticaNeue", "Roboto", 844 | "Source Sans Pro", "Open Sans", "Exo2", "Fira Sans", sans-serif; 845 | } 846 | 847 | /* .col h1 { 848 | font-family: "Segoe UI", "Segoe WP", "HelveticaNeue-Light", "Source Sans Pro", "Open Sans", "Exo2", "Fira Sans", sans-serif-light, sans-serif; 849 | } */ 850 | 851 | .col pre, 852 | .col pre code { 853 | font-family: "Consolas", "Monaco", "Droid Sans Mono", "Inconsolata", 854 | "Source Code Pro", monospace; 855 | } 856 | 857 | .col select { 858 | font-family: sans-serif; 859 | } 860 | 861 | .col button, 862 | .col input[type="button"], 863 | .col input[type="reset"], 864 | .col input[type="submit"], 865 | .col input[type^="text"], 866 | .col input[type^="search"], 867 | .col input[type^="email"], 868 | .col input[type^="url"], 869 | .col input[type^="password"], 870 | .col input[type^="tel"], 871 | .col input[type^="color"], 872 | .col input[type^="number"], 873 | .col input[type^="date"], 874 | .col input[type^="month"], 875 | .col input[type^="week"], 876 | .col input[type^="time"], 877 | .col input[type^="datetime"], 878 | .col input[type^="datetime-local"], 879 | .col textarea, 880 | .col caption, 881 | .col table th, 882 | .col table td { 883 | font-family: inherit; 884 | } 885 | 886 | .col .phonetic { 887 | font-family: "Roboto Mono", "Consolas", "Monaco", "Droid Sans Mono", 888 | "Inconsolata", "Source Code Pro", monospace; 889 | } 890 | 891 | /** 892 | * colors 893 | */ 894 | 895 | .col a { 896 | color: #3585d8; 897 | } 898 | 899 | .col a:focus, 900 | .col a:hover, 901 | .col a:active { 902 | color: #3585d8; 903 | } 904 | 905 | .col h1, 906 | .col h2, 907 | .col h3, 908 | .col h4, 909 | .col h5, 910 | .col h6, 911 | .col h1 a, 912 | .col h2 a, 913 | .col h3 a, 914 | .col h4 a, 915 | .col h5 a, 916 | .col h6 a, 917 | .col pre code, 918 | .col pre a, 919 | .col caption, 920 | .col table td, 921 | .col table th a, 922 | .col input[type^="text"], 923 | .col input[type^="search"], 924 | .col input[type^="email"], 925 | .col input[type^="url"], 926 | .col input[type^="password"], 927 | .col input[type^="tel"], 928 | .col input[type^="color"], 929 | .col input[type^="number"], 930 | .col input[type^="date"], 931 | .col input[type^="month"], 932 | .col input[type^="week"], 933 | .col input[type^="time"], 934 | .col input[type^="datetime"], 935 | .col input[type^="datetime-local"], 936 | .col textarea, 937 | .col select, 938 | .col input[type^="text"]:focus, 939 | .col input[type^="search"]:focus, 940 | .col input[type^="email"]:focus, 941 | .col input[type^="url"]:focus, 942 | .col input[type^="password"]:focus, 943 | .col input[type^="tel"]:focus, 944 | .col input[type^="color"]:focus, 945 | .col input[type^="number"]:focus, 946 | .col input[type^="date"]:focus, 947 | .col input[type^="month"]:focus, 948 | .col input[type^="week"]:focus, 949 | .col input[type^="time"]:focus, 950 | .col input[type^="datetime"]:focus, 951 | .col input[type^="datetime-local"]:focus, 952 | .col textarea:focus, 953 | .col select:focus, 954 | .col input[type^="text"]:active, 955 | .col input[type^="search"]:active, 956 | .col input[type^="email"]:active, 957 | .col input[type^="url"]:active, 958 | .col input[type^="password"]:active, 959 | .col input[type^="tel"]:active, 960 | .col input[type^="color"]:active, 961 | .col input[type^="number"]:active, 962 | .col input[type^="date"]:active, 963 | .col input[type^="month"]:active, 964 | .col input[type^="week"]:active, 965 | .col input[type^="time"]:active, 966 | .col input[type^="datetime"]:active, 967 | .col input[type^="datetime-local"]:active, 968 | .col textarea:active, 969 | .col select:active { 970 | color: inherit; 971 | } 972 | 973 | .col pre { 974 | color: inherit; 975 | background-color: #f3f3f3; 976 | } 977 | 978 | .col pre a:focus, 979 | .col pre a:hover, 980 | .col pre a:active { 981 | color: inherit; 982 | } 983 | 984 | .col select, 985 | .col input[type^="text"], 986 | .col input[type^="search"], 987 | .col input[type^="email"], 988 | .col input[type^="url"], 989 | .col input[type^="password"], 990 | .col input[type^="tel"], 991 | .col input[type^="color"], 992 | .col input[type^="number"], 993 | .col input[type^="date"], 994 | .col input[type^="month"], 995 | .col input[type^="week"], 996 | .col input[type^="time"], 997 | .col input[type^="datetime"], 998 | .col input[type^="datetime-local"], 999 | .col textarea { 1000 | background-color: #FFFFFF; 1001 | border: 1px solid #c3c3c3; 1002 | } 1003 | 1004 | .col button:focus, 1005 | .col input[type="button"]:focus, 1006 | .col input[type="reset"]:focus, 1007 | .col input[type="submit"]:focus, 1008 | .col button:hover, 1009 | .col input[type="button"]:hover, 1010 | .col input[type="reset"]:hover, 1011 | .col input[type="submit"]:hover, 1012 | .col button:active, 1013 | .col input[type="button"]:active, 1014 | .col input[type="reset"]:active, 1015 | .col input[type="submit"]:active { 1016 | color: #FFFFFF; 1017 | background-color: #5f5f5f; 1018 | border: 1px solid #5f5f5f; 1019 | } 1020 | 1021 | .col button, 1022 | .col input[type="button"], 1023 | .col input[type="reset"], 1024 | .col input[type="submit"] { 1025 | color: #FFFFFF; 1026 | background-color: #373737; 1027 | border: 1px solid #373737; 1028 | } 1029 | 1030 | .col select:focus, 1031 | .col select:hover, 1032 | .col input[type^="text"]:focus, 1033 | .col input[type^="search"]:focus, 1034 | .col input[type^="email"]:focus, 1035 | .col input[type^="url"]:focus, 1036 | .col input[type^="password"]:focus, 1037 | .col input[type^="tel"]:focus, 1038 | .col input[type^="color"]:focus, 1039 | .col input[type^="number"]:focus, 1040 | .col input[type^="date"]:focus, 1041 | .col input[type^="month"]:focus, 1042 | .col input[type^="week"]:focus, 1043 | .col input[type^="time"]:focus, 1044 | .col input[type^="datetime"]:focus, 1045 | .col input[type^="datetime-local"]:focus, 1046 | .col textarea:focus, 1047 | .col select:active, 1048 | .col input[type^="text"]:active, 1049 | .col input[type^="search"]:active, 1050 | .col input[type^="email"]:active, 1051 | .col input[type^="url"]:active, 1052 | .col input[type^="password"]:active, 1053 | .col input[type^="tel"]:active, 1054 | .col input[type^="color"]:active, 1055 | .col input[type^="number"]:active, 1056 | .col input[type^="date"]:active, 1057 | .col input[type^="month"]:active, 1058 | .col input[type^="week"]:active, 1059 | .col input[type^="time"]:active, 1060 | .col input[type^="datetime"]:active, 1061 | .col input[type^="datetime-local"]:active, 1062 | .col textarea:active { 1063 | background-color: #f3f3f3; 1064 | border: 1px solid #c3c3c3; 1065 | } 1066 | 1067 | .col select:disabled, 1068 | .col input[type^="text"]:disabled, 1069 | .col input[type^="search"]:disabled, 1070 | .col input[type^="email"]:disabled, 1071 | .col input[type^="url"]:disabled, 1072 | .col input[type^="password"]:disabled, 1073 | .col input[type^="tel"]:disabled, 1074 | .col input[type^="color"]:disabled, 1075 | .col input[type^="number"]:disabled, 1076 | .col input[type^="date"]:disabled, 1077 | .col input[type^="month"]:disabled, 1078 | .col input[type^="week"]:disabled, 1079 | .col input[type^="time"]:disabled, 1080 | .col input[type^="datetime"]:disabled, 1081 | .col input[type^="datetime-local"]:disabled, 1082 | .col textarea:disabled { 1083 | background-color: #d5d5d5; 1084 | border-color: #d5d5d5; 1085 | } 1086 | 1087 | .col button:disabled, 1088 | .col input[type="button"]:disabled, 1089 | .col input[type="reset"]:disabled, 1090 | .col input[type="submit"]:disabled { 1091 | background-color: #d5d5d5; 1092 | border-color: #d5d5d5; 1093 | } 1094 | 1095 | .col table { 1096 | border: none; 1097 | border-top-width: 1px; 1098 | border-top-style: solid; 1099 | border-top-color: #c3c3c3; 1100 | border-right-width: 1px; 1101 | border-right-style: solid; 1102 | border-right-color: #c3c3c3; 1103 | border-left-width: 1px; 1104 | border-left-style: solid; 1105 | border-left-color: #c3c3c3; 1106 | } 1107 | 1108 | .col table th { 1109 | border: none; 1110 | border-bottom-width: 1px; 1111 | border-bottom-style: solid; 1112 | border-bottom-color: #c3c3c3; 1113 | } 1114 | 1115 | .col table td { 1116 | border: none; 1117 | border-bottom-width: 1px; 1118 | border-bottom-style: solid; 1119 | border-bottom-color: #c3c3c3; 1120 | } 1121 | 1122 | .col img { 1123 | background-color: inherit; 1124 | border: 0; 1125 | } 1126 | 1127 | .col hr, 1128 | .col .hr { 1129 | background-color: #c3c3c3; 1130 | border: 0; 1131 | } 1132 | 1133 | .col .highlight { 1134 | color: #d93d3d; 1135 | } 1136 | -------------------------------------------------------------------------------- /css/16pixels.min.css: -------------------------------------------------------------------------------- 1 | html{font-size:16px;line-height:24px}body{font-size:16px;line-height:24px}.col a,.col abbr,.col acronym,.col address,.col applet,.col article,.col aside,.col audio,.col b,.col big,.col blockquote,.col canvas,.col caption,.col center,.col cite,.col code,.col dd,.col del,.col details,.col dfn,.col div,.col dl,.col dt,.col em,.col embed,.col fieldset,.col figcaption,.col figure,.col footer,.col form,.col h1,.col h2,.col h3,.col h4,.col h5,.col h6,.col header,.col hgroup,.col i,.col iframe,.col img,.col ins,.col kbd,.col label,.col legend,.col li,.col mark,.col menu,.col nav,.col object,.col ol,.col output,.col p,.col pre,.col q,.col ruby,.col s,.col samp,.col section,.col small,.col span,.col strike,.col strong,.col sub,.col summary,.col sup,.col table,.col tbody,.col td,.col tfoot,.col th,.col thead,.col time,.col tr,.col tt,.col u,.col ul,.col var,.col video{font-size:100%;font:inherit;border:0;vertical-align:baseline;margin:0;padding:0}.col sub,.col sup{font-size:75%;line-height:0;position:relative}.col sup{top:-.5em}.col sub{bottom:-.25em}.col blockquote,.col q{quotes:none}.col blockquote:after,.col blockquote:before,.col q:after,.col q:before{content:"";content:none}.col a{text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0}.col h1 a,.col h2 a,.col h3 a,.col h4 a,.col h5 a,.col h6 a{font-weight:inherit}.col address,.col p.address{font-size:14px;line-height:20px;margin-right:0}.col p.blockquote{margin-right:0}.col h1{font-size:39px;line-height:48px;padding:0}.col h2{font-size:25px;line-height:32px;padding:0}.col h3{font-size:20px;line-height:24px;padding:0}.col h4{font-size:16px;line-height:20px;padding:0}.col h5{font-size:16px;line-height:20px;text-transform:uppercase;padding:0}.col h6{font-size:16px;line-height:20px;text-decoration:underline;padding:0}.col caption,.col label,.col p.smaller,.col pre,.col pre code,.col table td,.col table th{font-size:14px;line-height:20px}.col blockquote,.col p.larger{font-size:18px;line-height:28px}.col dl dd,.col dl dt,.col ol li,.col p,.col p.blockquote,.col ul li{font-size:inherit;line-height:inherit}.col ul{list-style:disc outside}.col ol{list-style:decimal inside}.col pre{font-size:inherit;line-height:inherit;white-space:pre;white-space:pre-wrap;word-wrap:inherit;overflow:-moz-scrollbars-horizontal;overflow-x:auto;border:0;-webkit-box-shadow:none;box-shadow:none;-moz-tab-size:4;-o-tab-size:4;tab-size:4;padding:16px 20px}.col pre code{text-shadow:none}.col pre a{text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0}.col table{width:auto;border-collapse:collapse;border-spacing:0}.col caption,.col table td,.col table th{text-align:left}.col table td,.col table th{padding:7px 12px 7px 12px;vertical-align:top}.col img{border:0;vertical-align:bottom;padding:0}.col input[type^=color],.col input[type^=date],.col input[type^=datetime-local],.col input[type^=datetime],.col input[type^=email],.col input[type^=month],.col input[type^=number],.col input[type^=password],.col input[type^=search],.col input[type^=tel],.col input[type^=text],.col input[type^=time],.col input[type^=url],.col input[type^=week],.col select,.col textarea{font-size:14px;line-height:20px;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline;-webkit-tap-highlight-color:transparent;outline:0;padding:0 8px}.col select{padding:0 0 0 4px}.col optgroup{margin:4px;padding-left:4px}.col input[type=color]{padding:0}.col button,.col input[type=button],.col input[type=reset],.col input[type=submit],.col input[type^=color],.col input[type^=date],.col input[type^=datetime-local],.col input[type^=datetime],.col input[type^=email],.col input[type^=month],.col input[type^=number],.col input[type^=password],.col input[type^=search],.col input[type^=tel],.col input[type^=text],.col input[type^=time],.col input[type^=url],.col input[type^=week],.col select{height:36px}.col button,.col input[type=button],.col input[type=reset],.col input[type=submit]{font-size:14px;line-height:20px;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline;-webkit-tap-highlight-color:transparent;outline:0;cursor:pointer;padding:0 8px}.col label{display:block;margin-bottom:4px}.col textarea{width:95%}.col dl,.col ol,.col ul{margin-left:auto}.col dl dd:before{content:"\2014\00a0"}.col address,.col blockquote,.col dl dd,.col p.address,.col p.blockquote{margin-left:24px}.col ol{padding-left:24px}.col .indent{text-indent:24px}.col ul{padding-left:40px}.col td ul{margin-top:0}.col td ul li{font-size:inherit;line-height:inherit}.col td ol{margin-top:0}.col td ol li{font-size:inherit;line-height:inherit}.col.textcenter address,.col.textcenter blockquote,.col.textcenter dd,.col.textcenter p.address,.col.textcenter p.blockquote,.col.textcenter pre{margin-left:0}.col img,.col input,.col ol li,.col select,.col table td dl,.col table td ol,.col table td ul,.col textarea,.col ul li{margin:0}.col address,.col blockquote,.col caption,.col details,.col dl,.col dl dd,.col figcaption,.col figure,.col h1,.col h2,.col h3,.col h4,.col h5,.col h6,.col ol,.col p,.col p.address,.col p.blockquote,.col pre,.col table,.col ul{margin-top:0}.col h2+div,.col h2+p,.col h2+table,.col h3+div,.col h3+p,.col h3+table,.col h4+div,.col h4+p,.col h4+table,.col h5+div,.col h5+p,.col h5+table,.col h6+div,.col h6+p,.col h6+table{margin-top:8px}.col address:first-child,.col div+address,.col h1+blockquote,.col h1+details,.col h1+div,.col h1+div.hr,.col h1+dl,.col h1+hr,.col h1+ol,.col h1+p,.col h1+pre,.col h1+table,.col h1+ul,.col h2+blockquote,.col h2+details,.col h2+dl,.col h2+h3,.col h2+ol,.col h2+pre,.col h2+ul,.col h3+blockquote,.col h3+details,.col h3+dl,.col h3+h4,.col h3+ol,.col h3+pre,.col h3+ul,.col h4+blockquote,.col h4+details,.col h4+dl,.col h4+h3,.col h4+h5,.col h4+ol,.col h4+pre,.col h4+ul,.col h5+blockquote,.col h5+details,.col h5+dl,.col h5+h2,.col h5+h6,.col h5+ol,.col h5+pre,.col h5+ul,.col h6+blockquote,.col h6+details,.col h6+dl,.col h6+ol,.col h6+pre,.col h6+ul,.col p+address,.col p+p,.col p.address,.col p.blockquote,.col pre+address,.col table+address,.col table+p.address,.col table+p.blockquote{margin-top:24px}.col blockquote+blockquote,.col blockquote+details,.col blockquote+dl,.col blockquote+h1,.col blockquote+h2,.col blockquote+h3,.col blockquote+h4,.col blockquote+h5,.col blockquote+h6,.col blockquote+ol,.col blockquote+p,.col blockquote+pre,.col blockquote+table,.col blockquote+ul,.col blockquote:first-child,.col details+blockquote,.col details+details,.col details+dl,.col details+h1,.col details+h2,.col details+h3,.col details+h4,.col details+h5,.col details+h6,.col details+ol,.col details+p,.col details+pre,.col details+table,.col details+ul,.col details:first-child,.col div+blockquote,.col div+details,.col div+dl,.col div+h1,.col div+h2,.col div+h3,.col div+h4,.col div+h5,.col div+h6,.col div+ol,.col div+p,.col div+pre,.col div+table,.col div+ul,.col dl+blockquote,.col dl+details,.col dl+dl,.col dl+h1,.col dl+h2,.col dl+h3,.col dl+h4,.col dl+h5,.col dl+h6,.col dl+ol,.col dl+p,.col dl+pre,.col dl+table,.col dl+ul,.col dl:first-child,.col figcaption:first-child,.col figure:first-child,.col h1:first-child,.col h2:first-child,.col h3:first-child,.col h4:first-child,.col h5:first-child,.col h6:first-child,.col ol+blockquote,.col ol+details,.col ol+dl,.col ol+h1,.col ol+h2,.col ol+h3,.col ol+h4,.col ol+h5,.col ol+h6,.col ol+ol,.col ol+p,.col ol+pre,.col ol+table,.col ol+ul,.col ol:first-child,.col p+blockquote,.col p+details,.col p+dl,.col p+figcaption,.col p+figure,.col p+h1,.col p+h2,.col p+h3,.col p+h4,.col p+h5,.col p+h6,.col p+ol,.col p+pre,.col p+table,.col p+ul,.col p:first-child,.col pre+blockquote,.col pre+details,.col pre+dl,.col pre+h1,.col pre+h2,.col pre+h3,.col pre+h4,.col pre+h5,.col pre+h6,.col pre+ol,.col pre+p,.col pre+pre,.col pre+table,.col pre+ul,.col pre:first-child,.col table+blockquote,.col table+details,.col table+dl,.col table+h1,.col table+h2,.col table+h3,.col table+h4,.col table+h5,.col table+h6,.col table+ol,.col table+p,.col table+pre,.col table+table,.col table+ul,.col table:first-child,.col ul+blockquote,.col ul+details,.col ul+dl,.col ul+h1,.col ul+h2,.col ul+h3,.col ul+h4,.col ul+h5,.col ul+h6,.col ul+ol,.col ul+p,.col ul+pre,.col ul+table,.col ul+ul,.col ul:first-child{margin-top:24px}.col address:first-of-type,.col address:last-child,.col blockquote:last-child,.col details:last-child,.col dl dd,.col dl:last-child,.col figcaption:last-child,.col figure:last-child,.col ol:last-child,.col p.address:first-of-type,.col p.address:last-child,.col p.blockquote:first-of-type,.col p.blockquote:last-child,.col p:last-child,.col pre:last-child,.col table:first-of-type,.col table:last-child,.col ul:last-child{margin-bottom:0}.col address,.col blockquote,.col details,.col dl,.col figcaption,.col figure,.col ol,.col pre,.col ul{margin-bottom:24px}.col blockquote+p,.col details+p,.col div+p,.col dl+p,.col h1+p,.col h2+p,.col h3+p,.col h4+p,.col h5+p,.col h6+p,.col ol+p,.col p+p,.col pre+p,.col table+p,.col ul+p{margin-bottom:16px}.col .textleft{text-align:left}.col .textright{text-align:right}.col .textcenter{text-align:center}.col .larger{font-size:larger}.col .smaller,.col small{font-size:smaller}.col .hr,.col hr{height:1px;padding:0;margin:24px 0 23px 0}.col address,.col caption,.col dl dd,.col h2,.col h4,.col h5,.col h6,.col input[type^=color],.col input[type^=date],.col input[type^=datetime-local],.col input[type^=datetime],.col input[type^=email],.col input[type^=month],.col input[type^=number],.col input[type^=password],.col input[type^=search],.col input[type^=tel],.col input[type^=text],.col input[type^=time],.col input[type^=url],.col input[type^=week],.col label,.col ol li,.col p,.col p.address,.col p.blockquote,.col select,.col table td,.col textarea,.col ul li{font-weight:400}.col h1{font-weight:400}.col .bolder,.col .highlight,.col b,.col button,.col dl dt,.col h4,.col input[type=button],.col input[type=reset],.col input[type=submit],.col strong,.col table th{font-weight:bolder}.col .italic,.col address,.col blockquote,.col caption,.col em,.col i,.col label,.col p.address,.col p.blockquote{font-style:italic}.col optgroup{font-style:normal}.col body{font-family:"Segoe UI","Segoe WP",HelveticaNeue,Roboto,"Source Sans Pro","Open Sans",Exo2,"Fira Sans",sans-serif}.col pre,.col pre code{font-family:Consolas,Monaco,"Droid Sans Mono",Inconsolata,"Source Code Pro",monospace}.col select{font-family:sans-serif}.col button,.col caption,.col input[type=button],.col input[type=reset],.col input[type=submit],.col input[type^=color],.col input[type^=date],.col input[type^=datetime-local],.col input[type^=datetime],.col input[type^=email],.col input[type^=month],.col input[type^=number],.col input[type^=password],.col input[type^=search],.col input[type^=tel],.col input[type^=text],.col input[type^=time],.col input[type^=url],.col input[type^=week],.col table td,.col table th,.col textarea{font-family:inherit}.col .phonetic{font-family:"Roboto Mono",Consolas,Monaco,"Droid Sans Mono",Inconsolata,"Source Code Pro",monospace}.col a{color:#3585d8}.col a:active,.col a:focus,.col a:hover{color:#3585d8}.col caption,.col h1,.col h1 a,.col h2,.col h2 a,.col h3,.col h3 a,.col h4,.col h4 a,.col h5,.col h5 a,.col h6,.col h6 a,.col input[type^=color],.col input[type^=color]:active,.col input[type^=color]:focus,.col input[type^=date],.col input[type^=date]:active,.col input[type^=date]:focus,.col input[type^=datetime-local],.col input[type^=datetime-local]:active,.col input[type^=datetime-local]:focus,.col input[type^=datetime],.col input[type^=datetime]:active,.col input[type^=datetime]:focus,.col input[type^=email],.col input[type^=email]:active,.col input[type^=email]:focus,.col input[type^=month],.col input[type^=month]:active,.col input[type^=month]:focus,.col input[type^=number],.col input[type^=number]:active,.col input[type^=number]:focus,.col input[type^=password],.col input[type^=password]:active,.col input[type^=password]:focus,.col input[type^=search],.col input[type^=search]:active,.col input[type^=search]:focus,.col input[type^=tel],.col input[type^=tel]:active,.col input[type^=tel]:focus,.col input[type^=text],.col input[type^=text]:active,.col input[type^=text]:focus,.col input[type^=time],.col input[type^=time]:active,.col input[type^=time]:focus,.col input[type^=url],.col input[type^=url]:active,.col input[type^=url]:focus,.col input[type^=week],.col input[type^=week]:active,.col input[type^=week]:focus,.col pre a,.col pre code,.col select,.col select:active,.col select:focus,.col table td,.col table th a,.col textarea,.col textarea:active,.col textarea:focus{color:inherit}.col pre{color:inherit;background-color:#f3f3f3}.col pre a:active,.col pre a:focus,.col pre a:hover{color:inherit}.col input[type^=color],.col input[type^=date],.col input[type^=datetime-local],.col input[type^=datetime],.col input[type^=email],.col input[type^=month],.col input[type^=number],.col input[type^=password],.col input[type^=search],.col input[type^=tel],.col input[type^=text],.col input[type^=time],.col input[type^=url],.col input[type^=week],.col select,.col textarea{background-color:#fff;border:1px solid #c3c3c3}.col button:active,.col button:focus,.col button:hover,.col input[type=button]:active,.col input[type=button]:focus,.col input[type=button]:hover,.col input[type=reset]:active,.col input[type=reset]:focus,.col input[type=reset]:hover,.col input[type=submit]:active,.col input[type=submit]:focus,.col input[type=submit]:hover{color:#fff;background-color:#5f5f5f;border:1px solid #5f5f5f}.col button,.col input[type=button],.col input[type=reset],.col input[type=submit]{color:#fff;background-color:#373737;border:1px solid #373737}.col input[type^=color]:active,.col input[type^=color]:focus,.col input[type^=date]:active,.col input[type^=date]:focus,.col input[type^=datetime-local]:active,.col input[type^=datetime-local]:focus,.col input[type^=datetime]:active,.col input[type^=datetime]:focus,.col input[type^=email]:active,.col input[type^=email]:focus,.col input[type^=month]:active,.col input[type^=month]:focus,.col input[type^=number]:active,.col input[type^=number]:focus,.col input[type^=password]:active,.col input[type^=password]:focus,.col input[type^=search]:active,.col input[type^=search]:focus,.col input[type^=tel]:active,.col input[type^=tel]:focus,.col input[type^=text]:active,.col input[type^=text]:focus,.col input[type^=time]:active,.col input[type^=time]:focus,.col input[type^=url]:active,.col input[type^=url]:focus,.col input[type^=week]:active,.col input[type^=week]:focus,.col select:active,.col select:focus,.col select:hover,.col textarea:active,.col textarea:focus{background-color:#f3f3f3;border:1px solid #c3c3c3}.col input[type^=color]:disabled,.col input[type^=date]:disabled,.col input[type^=datetime-local]:disabled,.col input[type^=datetime]:disabled,.col input[type^=email]:disabled,.col input[type^=month]:disabled,.col input[type^=number]:disabled,.col input[type^=password]:disabled,.col input[type^=search]:disabled,.col input[type^=tel]:disabled,.col input[type^=text]:disabled,.col input[type^=time]:disabled,.col input[type^=url]:disabled,.col input[type^=week]:disabled,.col select:disabled,.col textarea:disabled{background-color:#d5d5d5;border-color:#d5d5d5}.col button:disabled,.col input[type=button]:disabled,.col input[type=reset]:disabled,.col input[type=submit]:disabled{background-color:#d5d5d5;border-color:#d5d5d5}.col table{border:none;border-top-width:1px;border-top-style:solid;border-top-color:#c3c3c3;border-right-width:1px;border-right-style:solid;border-right-color:#c3c3c3;border-left-width:1px;border-left-style:solid;border-left-color:#c3c3c3}.col table th{border:none;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#c3c3c3}.col table td{border:none;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#c3c3c3}.col img{background-color:inherit;border:0}.col .hr,.col hr{background-color:#c3c3c3;border:0}.col .highlight{color:#d93d3d} 2 | /*# sourceMappingURL=16pixels.min.css.map */ 3 | -------------------------------------------------------------------------------- /css/16pixels.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["16pixels.scss","16pixels.min.css","16pixels.css"],"names":[],"mappings":"AAOA,KCAC,UDCA,KCAA,YDCA,KCED,KACC,UDEA,KCDA,YAAa,KAiBd,OACA,UACA,aACA,aAfA,YA0DA,aACA,WAgBA,WAxCA,OAnBA,SANA,gBAkDA,YATA,aAbA,YArBA,UACA,UAuBA,QAtBA,SAyBA,aAxBA,SAtBA,SAyCA,QACA,QAnBA,QAwCA,WAfA,cAiBA,gBADA,YAEA,YAjBA,UA5CA,QACA,QACA,QACA,QACA,QACA,QAyDA,YACA,YA7BA,OAnCA,YAoBA,SACA,SACA,SAwBA,WACA,YAJA,QA6BA,UAPA,UACA,SAnEA,YAyCA,QA2BA,YA5DA,OAEA,SAcA,OA6CA,UA5CA,OACA,UA4CA,aA3CA,WA7BA,UA8BA,YACA,YACA,SAyCA,aAxCA,SAkBA,WAEA,WAKA,QAJA,WAGA,QAFA,WAmBA,UAlBA,QAtBA,QAGA,OAOA,QATA,SA0CA,WACC,UDGS,KCFT,KDGA,QCFA,ODGA,ECFA,eDGU,SCFV,OAAQ,EDKT,QAAA,ECDA,SACA,SACC,UAAW,IDMZ,YAAA,ECJC,SDKA,SCFD,SACC,IAAK,MAGN,SACC,OAAQ,OAGT,gBACA,OACC,ODQA,KCJD,sBDQA,uBCNA,aADA,cAEC,QAAS,GDWV,QAAA,KCPA,OACC,gBAAiB,KACjB,4BAA6B,YAC7B,QDUA,ECPD,UACA,UACA,UACA,UACA,UDaA,UCXC,YDYA,QCTD,aACA,eACC,UDaU,KCZV,YAAa,KDed,aAAA,ECXA,kBACC,aAAc,EAGf,QACC,UDeU,KCdV,YAAa,KDiBd,QAAA,ECbA,QACC,UAAW,KDkBZ,YAAA,KChBC,QDiBA,ECdD,QACC,UAAW,KDmBZ,YAAA,KCjBC,QDkBA,ECfD,QACC,UAAW,KDoBZ,YAAA,KClBC,QAAS,EAGV,QACC,UAAW,KACX,YAAa,KACb,eDmBe,UClBf,QDmBA,EChBD,QACC,UDoBA,KCnBA,YDoBA,KCnBA,gBAAiB,UDsBlB,QAAA,EClBA,aACA,WACA,eAGA,SDuBA,cCzBA,cACA,cAGC,UDsBA,KCrBA,YAAa,KD4Bd,gBCzBA,cAEC,UDwBA,KCvBA,YDwBA,KClBD,WADA,WAGA,WALA,OACA,kBAGA,WAEC,UDuBA,QCtBA,YDsBA,QCnBD,QDuBA,WAAA,KAAA,QAIA,QCtBC,WDuBA,QAAA,OCpBD,SDyBA,UAAA,QCvBC,YDwBW,QCvBX,YDwBA,ICvBA,YDwBA,SCvBA,UAAW,QD0BZ,SAAA,2BCxBC,WAAY,KACZ,OAAQ,EACR,mBDyBgB,KCxBhB,WAAY,KD2Bb,cAAA,ECzBC,YAAa,EACb,SD0BA,ECzBA,QD0BA,KAAA,KCvBD,cACC,YD2BA,KAID,WC3BC,gBAAiB,KACjB,4BAA6B,YAC7B,QAAS,EAGV,WACC,MAAO,KACP,gBAAiB,SACjB,eAAgB,EAGjB,aAEA,cADA,cAEC,WAAY,KAGb,cACA,cACC,QD2BA,IAAA,KAAA,IAAA,KC1BA,eD2BA,ICxBD,SD6BA,OAAA,EC3BC,eD4BA,OC3BA,QAAS,EASV,wBAEA,uBAKA,iCADA,2BDoBA,wBCvBA,wBAFA,yBAHA,2BAHA,yBDmCA,sBCpCA,uBAWA,uBARA,sBAOA,uBAIA,YACA,cACC,UAAW,KACX,YAAa,KACb,mBAAoB,WACpB,WAAY,WACZ,eAAgB,SAChB,4BAA6B,YAC7B,QAAS,EACT,QAAS,EAAE,IDmCZ,YC/BC,QAAS,EAAE,EAAE,EAAE,IAGhB,cACC,ODgCA,IC/BA,aDgCA,IC7BD,uBACC,QD+BA,EC5BD,YDiCA,wBC/BA,uBACA,wBAOA,wBAEA,uBAKA,iCDmCA,2BC9CA,wBD0CA,wBCrCA,yBD+BA,2BAJA,yBC7BA,sBALA,uBAWA,uBARA,sBAOA,uBAIA,YACC,OAAQ,KAGT,YDsCA,wBCpCA,uBACA,wBDuCA,UAAA,KCrCC,YDsCA,KCrCA,mBAAoB,WDwCrB,WAAA,WCtCC,eDuCA,SCtCA,4BAA6B,YDyC9B,QAAA,ECvCC,ODwCA,QCvCA,QAAS,EAAE,IAGZ,WACC,QAAS,MD2CV,cAAA,IAIA,cC1CC,MD2CA,ICtCD,QADA,QD2CA,QCzCC,YAAa,KAGd,kBACC,QAAS,aAGV,aAIA,gBADA,WAFA,eACA,kBAGC,YAAa,KAGd,QD+CA,aAAA,KC3CA,aACC,YAAa,KAGd,QACC,aAAc,KAGf,WACC,WAAY,EAGb,cACC,UAAW,QACX,YAAa,QAGd,WACC,WD8CA,EC3CD,cACC,UAAW,QACX,YAAa,QAGd,wBAIA,2BAFA,mBADA,0BAIA,6BAFA,oBAGC,YAAa,EAGd,SACA,WDiDA,WC/CA,YAKA,iBAFA,iBACA,iBAHA,cACA,WAIC,OAAQ,EAGT,aASA,gBACA,aAUA,aATA,QACA,WACA,gBACA,YAXA,QACA,QACA,QACA,QACA,QACA,QAOA,QACA,OAfA,eACA,kBAeA,SACA,WACA,QAEC,WAAY,EAGb,YACA,UACA,cACA,YACA,UACA,cACA,YACA,UACA,cACA,YACA,UACA,cACA,YACA,UACA,cACC,WAAY,IAGb,yBACA,iBACA,mBAUA,gBATA,YAEA,eACA,WAFA,WDoDA,WChDA,UACA,YACA,cACA,WAEA,mBAMA,gBALA,WACA,WACA,WACA,YACA,WAEA,mBAMA,gBALA,WACA,WACA,WACA,YACA,WAEA,mBAOA,gBANA,WACA,WACA,WACA,WACA,YACA,WAEA,mBAOA,gBANA,WAEA,WADA,WAEA,WACA,YACA,WAEA,mBAKA,gBAJA,WACA,WACA,YACA,WAEA,eACA,SACA,eACA,kBACA,iBACA,mBACA,qBACA,wBACC,WAAY,KAGb,2BAaA,wBAZA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,kBACA,oBACA,sBACA,mBA8HA,4BAzBA,wBAaA,qBAZA,gBACA,gBACA,gBACA,gBACA,gBACA,gBACA,gBACA,gBACA,eDqDA,iBCnDA,mBACA,gBAWA,yBA1HA,oBAaA,iBAZA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,WACA,aACA,eACA,YAEA,mBAaA,gBAZA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,UACA,YACA,cACA,WA8FA,oBAOA,4BACA,wBAfA,oBACA,oBACA,oBACA,oBACA,oBACA,oBA1FA,mBAaA,gBAZA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,UACA,YACA,cACA,WAmFA,oBAjFA,kBAcA,eAbA,UACA,kBACA,cACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WACA,aACA,UAgEA,mBA9DA,oBAaA,iBAZA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,WACA,aACA,eACA,YAwDA,qBAtDA,sBAaA,mBAZA,cACA,cACA,cACA,cACA,cACA,cDmDA,cCjDA,cACA,aACA,eACA,iBACA,cDgGA,uBC9FA,mBDgEA,gBC/DA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,UACA,YACA,cACA,WAwBA,oBD8DA,WAAA,KClDA,2BD0DA,wBC/CA,2BDwDA,wBAbA,WC/CA,mBDmEA,2BC1DA,uBANA,mBATA,6BAEA,0BACA,gCD0DA,6BCxDA,kBAMA,oBACA,yBACA,sBANA,mBASC,cCLC,EDQF,aACA,gBAOA,aANA,QACA,gBACA,YACA,QACA,SACA,QAEC,cAAe,KAGhB,kBAcA,eAbA,WACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,SACA,WACA,aACA,UAEC,cAAe,KDgEhB,eC5DC,WD6DA,KC1DD,gBACC,WAAY,MAGb,iBACC,WAAY,OAGb,aACC,UAAW,OAIZ,cD8DA,WC7DC,UCLC,QDSF,SADA,QAEC,OAAQ,IACR,QAAS,EACT,OAAQ,KAAK,EAAE,KAAK,EAUrB,aAQA,aDgEA,WC5EA,QACA,QDmEA,QCjEA,QAgBA,wBAEA,uBAKA,iCADA,2BD4DA,wBC/DA,wBAFA,yBAHA,2BAHA,yBD2EA,sBC5EA,uBAWA,uBARA,sBAOA,uBAMA,WAnBA,WD8DA,OClEA,eACA,kBAoBA,YDqDA,cCpDA,cAnBA,WAqBC,YAAa,IAGd,QACC,YAAa,IAYd,aACA,gBAHA,OAJA,YADA,WAFA,QAIA,wBDyEA,uBCvEA,wBD2EA,YChFA,cDoFA,YAAA,OC5DA,aARA,aAGA,gBACA,aAGA,QADA,OADA,WAJA,eD6EA,kBCrEC,WAAY,OAGb,cACC,WAAY,OAMb,UACC,YAAa,UAAU,CAAE,UAAU,CAAE,aAAe,CAAE,MAAQ,CAC7D,iBAAiB,CAAE,WAAW,CAAE,IAAM,CAAE,WAAW,CAAE,WAMvD,SACA,cACC,YAAa,QAAU,CAAE,MAAQ,CAAE,iBAAiB,CAAE,WAAa,CAClE,iBAAiB,CAAE,UAGrB,YACC,YAAa,WAGd,YAmBA,aAlBA,wBACA,uBACA,wBAOA,wBAEA,uBAKA,iCADA,2BAVA,wBAOA,wBAFA,yBAHA,2BAHA,yBAIA,sBALA,uBAWA,uBARA,sBAOA,uBAOA,cADA,cAFA,cAIC,YAAa,QAGd,eACC,YAAa,aAAa,CAAE,QAAU,CAAE,MAAQ,CAAE,iBAAiB,CAClE,WAAa,CAAE,iBAAiB,CAAE,UAMpC,OACC,MD6EA,QCxED,cAFA,aACA,aAEC,MAAO,QAiBR,aAdA,QAMA,UALA,QAMA,UALA,QAMA,UALA,QAMA,UALA,QAMA,UALA,QAMA,UAYA,wBAgCA,+BAhBA,8BAdA,uBAgCA,8BDkEA,6BC7FA,iCAgCA,wCAhBA,uCAjBA,2BAgCA,kCAhBA,iCA1BA,wBAgCA,+BAhBA,8BATA,wBAgCA,+BAhBA,8BAlBA,yBAgCA,gCAhBA,+BAnBA,2BAgCA,kCAhBA,iCAnBA,yBAgCA,gCAhBA,+BAZA,sBAgCA,6BAhBA,4BD2DA,uBChDA,8BDiEA,6BCtFA,uBAgCA,8BAhBA,6BAxBA,sBAgCA,6BAhBA,4BATA,uBAgCA,8BAhBA,6BA9BA,WADA,cAoBA,YAgCA,mBAhBA,kBAjCA,cACA,gBAeA,cAgCA,qBAhBA,oBAkBC,MAAO,QAGR,SACC,MAAO,QACP,iBAAkB,QAKnB,kBAFA,iBACA,iBAEC,MAAO,QAUR,wBAEA,uBAKA,iCADA,2BAVA,wBAOA,wBAFA,yBAHA,2BAHA,yBAIA,sBALA,uBAWA,uBARA,sBAOA,uBAXA,YAeA,cACC,iBAAkB,KDqFnB,OAAA,IAAA,MAAA,QCzEA,mBARA,kBDyFA,kBChFA,+BARA,8BAIA,8BAKA,8BARA,6BAIA,6BAKA,+BARA,8BAIA,8BAKC,MDqFA,KCpFA,iBDqFA,QCpFA,ODqFA,IAAA,MAAA,QClFD,YACA,wBACA,uBACA,wBACC,MAAO,KDwFR,iBAAA,QCtFC,ODuFA,IAAA,MAAY,QC5Db,+BAhBA,8BAkBA,8BAhBA,6BAqBA,wCAhBA,uCAeA,kCAhBA,iCAMA,+BAhBA,8BAuBA,+BD0EA,8BC5EA,gCAhBA,+BAaA,kCDyEA,iCC5EA,gCAhBA,+BAoBA,6BAhBA,4BAWA,8BDwEA,6BC7DA,8BAhBA,6BAQA,6BAhBA,4BAuBA,8BAhBA,6BAKA,mBAjBA,kBACA,kBA+BA,qBAhBA,oBAiBC,iBAAkB,QAClB,OAAQ,IAAI,MAAM,QAUnB,iCAEA,gCAKA,0CADA,oCAVA,iCAOA,iCAFA,kCAHA,oCAHA,kCAIA,+BALA,gCAWA,gCARA,+BAOA,gCAXA,qBAeA,uBACC,iBAAkB,QAClB,aAAc,QAGf,qBACA,iCACA,gCACA,iCACC,iBAAkB,QAClB,aAAc,QAGf,WACC,OAAQ,KACR,iBAAkB,IAClB,iBAAkB,MAClB,iBAAkB,QAClB,mBAAoB,IACpB,mBAAoB,MACpB,mBAAoB,QACpB,kBAAmB,IACnB,kBAAmB,MACnB,kBAAmB,QAGpB,cACC,OAAQ,KACR,oBAAqB,IACrB,oBAAqB,MACrB,oBAAqB,QAGtB,cACC,OAAQ,KACR,oBAAqB,IACrB,oBAAqB,MACrB,oBAAqB,QAGtB,SACC,iBAAkB,QAClB,OAAQ,EAIT,SADA,QAEC,iBAAkB,QAClB,OAAQ,EAGT,gBACC,MAAO","file":"16pixels.min.css","sourcesContent":["/*!\n * 16pixels v0.1.9\n * @see {@link https://github.com/englishextra/16pixels}\n * set html font to 16px, and body to 16px\n * line height should be the closest multiple of 4\n */\n\nhtml {\n\tfont-size: 16px;\n\tline-height: 24px;\n}\n\nbody {\n\tfont-size: 16px;\n\tline-height: 24px;\n}\n\n.col div,\n.col span,\n.col applet,\n.col object,\n.col iframe,\n.col h1,\n.col h2,\n.col h3,\n.col h4,\n.col h5,\n.col h6,\n.col p,\n.col blockquote,\n.col pre,\n.col a,\n.col abbr,\n.col acronym,\n.col address,\n.col big,\n.col cite,\n.col code,\n.col del,\n.col dfn,\n.col em,\n.col img,\n.col ins,\n.col kbd,\n.col q,\n.col s,\n.col samp,\n.col small,\n.col strike,\n.col strong,\n.col sub,\n.col sup,\n.col tt,\n.col var,\n.col b,\n.col u,\n.col i,\n.col center,\n.col dl,\n.col dt,\n.col dd,\n.col ol,\n.col ul,\n.col details,\n.col li,\n.col fieldset,\n.col form,\n.col label,\n.col legend,\n.col table,\n.col caption,\n.col tbody,\n.col tfoot,\n.col thead,\n.col tr,\n.col th,\n.col td,\n.col article,\n.col aside,\n.col canvas,\n.col embed,\n.col figure,\n.col figcaption,\n.col footer,\n.col header,\n.col hgroup,\n.col menu,\n.col nav,\n.col output,\n.col ruby,\n.col section,\n.col summary,\n.col time,\n.col mark,\n.col audio,\n.col video {\n\tfont-size: 100%;\n\tfont: inherit;\n\tborder: 0;\n\tvertical-align: baseline;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.col sub,\n.col sup {\n\tfont-size: 75%;\n\tline-height: 0;\n\tposition: relative;\n}\n\n.col sup {\n\ttop: -0.5em;\n}\n\n.col sub {\n\tbottom: -0.25em;\n}\n\n.col blockquote,\n.col q {\n\tquotes: none;\n}\n\n.col blockquote:before,\n.col blockquote:after,\n.col q:before,\n.col q:after {\n\tcontent: \"\";\n\tcontent: none;\n}\n\n.col a {\n\ttext-decoration: none;\n\t-webkit-tap-highlight-color: transparent;\n\toutline: none;\n}\n\n.col h1 a,\n.col h2 a,\n.col h3 a,\n.col h4 a,\n.col h5 a,\n.col h6 a {\n\tfont-weight: inherit;\n}\n\n.col address,\n.col p.address {\n\tfont-size: 14px;\n\tline-height: 20px;\n\tmargin-right: 0;\n}\n\n.col p.blockquote {\n\tmargin-right: 0;\n}\n\n.col h1 {\n\tfont-size: 39px;\n\tline-height: 48px;\n\tpadding: 0;\n}\n\n.col h2 {\n\tfont-size: 25px;\n\tline-height: 32px;\n\tpadding: 0;\n}\n\n.col h3 {\n\tfont-size: 20px;\n\tline-height: 24px;\n\tpadding: 0;\n}\n\n.col h4 {\n\tfont-size: 16px;\n\tline-height: 20px;\n\tpadding: 0;\n}\n\n.col h5 {\n\tfont-size: 16px;\n\tline-height: 20px;\n\ttext-transform: uppercase;\n\tpadding: 0;\n}\n\n.col h6 {\n\tfont-size: 16px;\n\tline-height: 20px;\n\ttext-decoration: underline;\n\tpadding: 0;\n}\n\n.col caption,\n.col label,\n.col p.smaller,\n.col table td,\n.col table th,\n.col pre,\n.col pre code {\n\tfont-size: 14px;\n\tline-height: 20px;\n}\n\n.col p.larger,\n.col blockquote {\n\tfont-size: 18px;\n\tline-height: 28px;\n}\n\n.col p,\n.col p.blockquote,\n.col dl dt,\n.col dl dd,\n.col ul li,\n.col ol li {\n\tfont-size: inherit;\n\tline-height: inherit;\n}\n\n.col ul {\n\tlist-style: disc outside;\n}\n\n.col ol {\n\tlist-style: decimal inside;\n}\n\n.col pre {\n\tfont-size: inherit;\n\tline-height: inherit;\n\twhite-space: pre;\n\twhite-space: pre-wrap;\n\tword-wrap: inherit;\n\toverflow: -moz-scrollbars-horizontal;\n\toverflow-x: auto;\n\tborder: 0;\n\tbox-shadow: none;\n\ttab-size: 4;\n\tpadding: 16px 20px;\n}\n\n.col pre code {\n\ttext-shadow: none;\n}\n\n.col pre a {\n\ttext-decoration: none;\n\t-webkit-tap-highlight-color: transparent;\n\toutline: none;\n}\n\n.col table {\n\twidth: auto;\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}\n\n.col caption,\n.col table th,\n.col table td {\n\ttext-align: left;\n}\n\n.col table td,\n.col table th {\n\tpadding: 7px 12px 7px 12px;\n\tvertical-align: top;\n}\n\n.col img {\n\tborder: 0;\n\tvertical-align: bottom;\n\tpadding: 0;\n}\n\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col select,\n.col textarea {\n\tfont-size: 14px;\n\tline-height: 20px;\n\tbox-sizing: border-box;\n\tvertical-align: baseline;\n\t-webkit-tap-highlight-color: transparent;\n\toutline: none;\n\tpadding: 0 8px;\n}\n\n.col select {\n\tpadding: 0 0 0 4px;\n}\n\n.col optgroup {\n\tmargin: 4px;\n\tpadding-left: 4px;\n}\n\n.col input[type=\"color\"] {\n\tpadding: 0;\n}\n\n.col button,\n.col input[type=\"button\"],\n.col input[type=\"reset\"],\n.col input[type=\"submit\"],\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col select {\n\theight: 36px;\n}\n\n.col button,\n.col input[type=\"button\"],\n.col input[type=\"reset\"],\n.col input[type=\"submit\"] {\n\tfont-size: 14px;\n\tline-height: 20px;\n\tbox-sizing: border-box;\n\tvertical-align: baseline;\n\t-webkit-tap-highlight-color: transparent;\n\toutline: none;\n\tcursor: pointer;\n\tpadding: 0 8px;\n}\n\n.col label {\n\tdisplay: block;\n\tmargin-bottom: 4px;\n}\n\n.col textarea {\n\twidth: 95%;\n}\n\n.col ul,\n.col ol,\n.col dl {\n\tmargin-left: auto;\n}\n\n.col dl dd:before {\n\tcontent: \"\\2014\\00a0\";\n}\n\n.col address,\n.col p.address,\n.col p.blockquote,\n.col dl dd,\n.col blockquote {\n\tmargin-left: 24px;\n}\n\n.col ol {\n\tpadding-left: 24px;\n}\n\n.col .indent {\n\ttext-indent: 24px;\n}\n\n.col ul {\n\tpadding-left: 40px;\n}\n\n.col td ul {\n\tmargin-top: 0 /* !important */;\n}\n\n.col td ul li {\n\tfont-size: inherit /* !important */;\n\tline-height: inherit /* !important */;\n}\n\n.col td ol {\n\tmargin-top: 0 /* !important */;\n}\n\n.col td ol li {\n\tfont-size: inherit /* !important */;\n\tline-height: inherit /* !important */;\n}\n\n.col.textcenter address,\n.col.textcenter p.address,\n.col.textcenter dd,\n.col.textcenter pre,\n.col.textcenter blockquote,\n.col.textcenter p.blockquote {\n\tmargin-left: 0;\n}\n\n.col img,\n.col input,\n.col ol li,\n.col select,\n.col textarea,\n.col ul li,\n.col table td ol,\n.col table td ul,\n.col table td dl {\n\tmargin: 0;\n}\n\n.col address,\n.col p.address,\n.col p.blockquote,\n.col h1,\n.col h2,\n.col h3,\n.col h4,\n.col h5,\n.col h6,\n.col blockquote,\n.col caption,\n.col dl,\n.col dl dd,\n.col figcaption,\n.col figure,\n.col ol,\n.col p,\n.col pre,\n.col table,\n.col ul,\n.col details {\n\tmargin-top: 0;\n}\n\n.col h2 + div,\n.col h2 + p,\n.col h2 + table,\n.col h3 + div,\n.col h3 + p,\n.col h3 + table,\n.col h4 + div,\n.col h4 + p,\n.col h4 + table,\n.col h5 + div,\n.col h5 + p,\n.col h5 + table,\n.col h6 + div,\n.col h6 + p,\n.col h6 + table {\n\tmargin-top: 8px;\n}\n\n.col address:first-child,\n.col div + address,\n.col h1 + blockquote,\n.col h1 + div,\n.col h1 + hr,\n.col h1 + div.hr,\n.col h1 + dl,\n.col h1 + ol,\n.col h1 + p,\n.col h1 + pre,\n.col h1 + table,\n.col h1 + ul,\n.col h1 + details,\n.col h2 + blockquote,\n.col h2 + dl,\n.col h2 + h3,\n.col h2 + ol,\n.col h2 + pre,\n.col h2 + ul,\n.col h2 + details,\n.col h3 + blockquote,\n.col h3 + dl,\n.col h3 + h4,\n.col h3 + ol,\n.col h3 + pre,\n.col h3 + ul,\n.col h3 + details,\n.col h4 + blockquote,\n.col h4 + dl,\n.col h4 + h3,\n.col h4 + h5,\n.col h4 + ol,\n.col h4 + pre,\n.col h4 + ul,\n.col h4 + details,\n.col h5 + blockquote,\n.col h5 + dl,\n.col h5 + h6,\n.col h5 + h2,\n.col h5 + ol,\n.col h5 + pre,\n.col h5 + ul,\n.col h5 + details,\n.col h6 + blockquote,\n.col h6 + dl,\n.col h6 + ol,\n.col h6 + pre,\n.col h6 + ul,\n.col h6 + details,\n.col p + address,\n.col p + p,\n.col p.address,\n.col p.blockquote,\n.col pre + address,\n.col table + address,\n.col table + p.address,\n.col table + p.blockquote {\n\tmargin-top: 24px;\n}\n\n.col blockquote + blockquote,\n.col blockquote + dl,\n.col blockquote + h1,\n.col blockquote + h2,\n.col blockquote + h3,\n.col blockquote + h4,\n.col blockquote + h5,\n.col blockquote + h6,\n.col blockquote + ol,\n.col blockquote + p,\n.col blockquote + pre,\n.col blockquote + table,\n.col blockquote + ul,\n.col blockquote + details,\n.col div + blockquote,\n.col div + dl,\n.col div + h1,\n.col div + h2,\n.col div + h3,\n.col div + h4,\n.col div + h5,\n.col div + h6,\n.col div + ol,\n.col div + p,\n.col div + pre,\n.col div + table,\n.col div + ul,\n.col div + details,\n.col dl + blockquote,\n.col dl + dl,\n.col dl + h1,\n.col dl + h2,\n.col dl + h3,\n.col dl + h4,\n.col dl + h5,\n.col dl + h6,\n.col dl + ol,\n.col dl + p,\n.col dl + pre,\n.col dl + table,\n.col dl + ul,\n.col dl + details,\n.col ol + blockquote,\n.col ol + dl,\n.col ol + h1,\n.col ol + h2,\n.col ol + h3,\n.col ol + h4,\n.col ol + h5,\n.col ol + h6,\n.col ol + ol,\n.col ol + p,\n.col ol + pre,\n.col ol + table,\n.col ol + ul,\n.col ol + details,\n.col p + blockquote,\n.col p + dl,\n.col p + figcaption,\n.col p + figure,\n.col p + h1,\n.col p + h2,\n.col p + h3,\n.col p + h4,\n.col p + h5,\n.col p + h6,\n.col p + ol,\n.col p + pre,\n.col p + table,\n.col p + ul,\n.col p + details,\n.col pre + blockquote,\n.col pre + dl,\n.col pre + h1,\n.col pre + h2,\n.col pre + h3,\n.col pre + h4,\n.col pre + h5,\n.col pre + h6,\n.col pre + ol,\n.col pre + p,\n.col pre + pre,\n.col pre + table,\n.col pre + ul,\n.col pre + details,\n.col table + blockquote,\n.col table + dl,\n.col table + h1,\n.col table + h2,\n.col table + h3,\n.col table + h4,\n.col table + h5,\n.col table + h6,\n.col table + ol,\n.col table + p,\n.col table + pre,\n.col table + table,\n.col table + ul,\n.col table + details,\n.col ul + blockquote,\n.col ul + dl,\n.col ul + h1,\n.col ul + h2,\n.col ul + h3,\n.col ul + h4,\n.col ul + h5,\n.col ul + h6,\n.col ul + ol,\n.col ul + p,\n.col ul + pre,\n.col ul + table,\n.col ul + ul,\n.col ul + details,\n.col details + blockquote,\n.col details + dl,\n.col details + h1,\n.col details + h2,\n.col details + h3,\n.col details + h4,\n.col details + h5,\n.col details + h6,\n.col details + ol,\n.col details + p,\n.col details + pre,\n.col details + table,\n.col details + ul,\n.col details + details,\n.col h1:first-child,\n.col h2:first-child,\n.col h3:first-child,\n.col h4:first-child,\n.col h5:first-child,\n.col h6:first-child,\n.col p:first-child,\n.col dl:first-child,\n.col ul:first-child,\n.col details:first-child,\n.col ol:first-child,\n.col blockquote:first-child,\n.col pre:first-child,\n.col table:first-child,\n.col figcaption:first-child,\n.col figure:first-child {\n\tmargin-top: 24px;\n}\n\n.col dl dd,\n.col address:first-of-type,\n.col p.address:first-of-type,\n.col address:last-child,\n.col p.address:last-child,\n.col p.blockquote:first-of-type,\n.col p.blockquote:last-child,\n.col p:last-child,\n.col dl:last-child,\n.col ul:last-child,\n.col details:last-child,\n.col ol:last-child,\n.col blockquote:last-child,\n.col pre:last-child,\n.col table:first-of-type,\n.col table:last-child,\n.col figcaption:last-child,\n.col figure:last-child {\n\tmargin-bottom: 0;\n}\n\n.col address,\n.col blockquote,\n.col dl,\n.col figcaption,\n.col figure,\n.col ol,\n.col pre,\n.col ul,\n.col details {\n\tmargin-bottom: 24px;\n}\n\n.col blockquote + p,\n.col div + p,\n.col dl + p,\n.col h1 + p,\n.col h2 + p,\n.col h3 + p,\n.col h4 + p,\n.col h5 + p,\n.col h6 + p,\n.col ol + p,\n.col p + p,\n.col pre + p,\n.col table + p,\n.col ul + p,\n.col details + p {\n\tmargin-bottom: 16px;\n}\n\n.col .textleft {\n\ttext-align: left;\n}\n\n.col .textright {\n\ttext-align: right;\n}\n\n.col .textcenter {\n\ttext-align: center;\n}\n\n.col .larger {\n\tfont-size: larger;\n}\n\n.col small,\n.col .smaller {\n\tfont-size: smaller;\n}\n\n.col hr,\n.col .hr {\n\theight: 1px;\n\tpadding: 0;\n\tmargin: 24px 0 23px 0;\n}\n\n/**\n * font weights\n */\n\n.col h2,\n.col h4,\n.col h5,\n.col h6,\n.col address,\n.col p,\n.col p.address,\n.col p.blockquote,\n.col dl dd,\n.col ul li,\n.col ol li,\n.col table td,\n.col caption,\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col select,\n.col textarea,\n.col label {\n\tfont-weight: normal;\n}\n\n.col h1 {\n\tfont-weight: normal;\n}\n\n.col h4,\n.col table th,\n.col dl dt,\n.col button,\n.col input[type=\"button\"],\n.col input[type=\"reset\"],\n.col input[type=\"submit\"],\n.col b,\n.col strong,\n.col .bolder,\n.col .highlight {\n\tfont-weight: bolder;\n}\n\n/**\n * font styles\n */\n\n.col address,\n.col p.address,\n.col p.blockquote,\n.col blockquote,\n.col caption,\n.col label,\n.col i,\n.col em,\n.col .italic {\n\tfont-style: italic;\n}\n\n.col optgroup {\n\tfont-style: normal;\n}\n\n/**\n * font families\n */\n\n.col body {\n\tfont-family: \"Segoe UI\", \"Segoe WP\", \"HelveticaNeue\", \"Roboto\", \"Source Sans Pro\", \"Open Sans\", \"Exo2\", \"Fira Sans\", sans-serif;\n}\n\n/* .col h1 {\n\tfont-family: \"Segoe UI\", \"Segoe WP\", \"HelveticaNeue-Light\", \"Source Sans Pro\", \"Open Sans\", \"Exo2\", \"Fira Sans\", sans-serif-light, sans-serif;\n} */\n\n.col pre,\n.col pre code {\n\tfont-family: \"Consolas\", \"Monaco\", \"Droid Sans Mono\", \"Inconsolata\", \"Source Code Pro\", monospace;\n}\n\n.col select {\n\tfont-family: sans-serif;\n}\n\n.col button,\n.col input[type=\"button\"],\n.col input[type=\"reset\"],\n.col input[type=\"submit\"],\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col textarea,\n.col caption,\n.col table th,\n.col table td {\n\tfont-family: inherit;\n}\n\n.col .phonetic {\n\tfont-family: \"Roboto Mono\", \"Consolas\", \"Monaco\", \"Droid Sans Mono\", \"Inconsolata\", \"Source Code Pro\", monospace;\n}\n\n/**\n * colors\n */\n\n.col a {\n\tcolor: #3585D8;\n}\n\n.col a:focus,\n.col a:hover,\n.col a:active {\n\tcolor: #3585D8;\n}\n\n.col h1,\n.col h2,\n.col h3,\n.col h4,\n.col h5,\n.col h6,\n.col h1 a,\n.col h2 a,\n.col h3 a,\n.col h4 a,\n.col h5 a,\n.col h6 a,\n.col pre code,\n.col pre a,\n.col caption,\n.col table td,\n.col table th a,\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col textarea,\n.col select,\n.col input[type^=\"text\"]:focus,\n.col input[type^=\"search\"]:focus,\n.col input[type^=\"email\"]:focus,\n.col input[type^=\"url\"]:focus,\n.col input[type^=\"password\"]:focus,\n.col input[type^=\"tel\"]:focus,\n.col input[type^=\"color\"]:focus,\n.col input[type^=\"number\"]:focus,\n.col input[type^=\"date\"]:focus,\n.col input[type^=\"month\"]:focus,\n.col input[type^=\"week\"]:focus,\n.col input[type^=\"time\"]:focus,\n.col input[type^=\"datetime\"]:focus,\n.col input[type^=\"datetime-local\"]:focus,\n.col textarea:focus,\n.col select:focus,\n.col input[type^=\"text\"]:active,\n.col input[type^=\"search\"]:active,\n.col input[type^=\"email\"]:active,\n.col input[type^=\"url\"]:active,\n.col input[type^=\"password\"]:active,\n.col input[type^=\"tel\"]:active,\n.col input[type^=\"color\"]:active,\n.col input[type^=\"number\"]:active,\n.col input[type^=\"date\"]:active,\n.col input[type^=\"month\"]:active,\n.col input[type^=\"week\"]:active,\n.col input[type^=\"time\"]:active,\n.col input[type^=\"datetime\"]:active,\n.col input[type^=\"datetime-local\"]:active,\n.col textarea:active,\n.col select:active {\n\tcolor: inherit;\n}\n\n.col pre {\n\tcolor: inherit;\n\tbackground-color: #F3F3F3;\n}\n\n.col pre a:focus,\n.col pre a:hover,\n.col pre a:active {\n\tcolor: inherit;\n}\n\n.col select,\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col textarea {\n\tbackground-color: #FFFFFF;\n\tborder: 1px solid #C3C3C3;\n}\n\n.col button:focus,\n.col input[type=\"button\"]:focus,\n.col input[type=\"reset\"]:focus,\n.col input[type=\"submit\"]:focus,\n.col button:hover,\n.col input[type=\"button\"]:hover,\n.col input[type=\"reset\"]:hover,\n.col input[type=\"submit\"]:hover,\n.col button:active,\n.col input[type=\"button\"]:active,\n.col input[type=\"reset\"]:active,\n.col input[type=\"submit\"]:active {\n\tcolor: #FFFFFF;\n\tbackground-color: #5F5F5F;\n\tborder: 1px solid #5F5F5F;\n}\n\n.col button,\n.col input[type=\"button\"],\n.col input[type=\"reset\"],\n.col input[type=\"submit\"] {\n\tcolor: #FFFFFF;\n\tbackground-color: #373737;\n\tborder: 1px solid #373737;\n}\n\n.col select:focus,\n.col select:hover,\n.col input[type^=\"text\"]:focus,\n.col input[type^=\"search\"]:focus,\n.col input[type^=\"email\"]:focus,\n.col input[type^=\"url\"]:focus,\n.col input[type^=\"password\"]:focus,\n.col input[type^=\"tel\"]:focus,\n.col input[type^=\"color\"]:focus,\n.col input[type^=\"number\"]:focus,\n.col input[type^=\"date\"]:focus,\n.col input[type^=\"month\"]:focus,\n.col input[type^=\"week\"]:focus,\n.col input[type^=\"time\"]:focus,\n.col input[type^=\"datetime\"]:focus,\n.col input[type^=\"datetime-local\"]:focus,\n.col textarea:focus,\n.col select:active,\n.col input[type^=\"text\"]:active,\n.col input[type^=\"search\"]:active,\n.col input[type^=\"email\"]:active,\n.col input[type^=\"url\"]:active,\n.col input[type^=\"password\"]:active,\n.col input[type^=\"tel\"]:active,\n.col input[type^=\"color\"]:active,\n.col input[type^=\"number\"]:active,\n.col input[type^=\"date\"]:active,\n.col input[type^=\"month\"]:active,\n.col input[type^=\"week\"]:active,\n.col input[type^=\"time\"]:active,\n.col input[type^=\"datetime\"]:active,\n.col input[type^=\"datetime-local\"]:active,\n.col textarea:active {\n\tbackground-color: #F3F3F3;\n\tborder: 1px solid #C3C3C3;\n}\n\n.col select:disabled,\n.col input[type^=\"text\"]:disabled,\n.col input[type^=\"search\"]:disabled,\n.col input[type^=\"email\"]:disabled,\n.col input[type^=\"url\"]:disabled,\n.col input[type^=\"password\"]:disabled,\n.col input[type^=\"tel\"]:disabled,\n.col input[type^=\"color\"]:disabled,\n.col input[type^=\"number\"]:disabled,\n.col input[type^=\"date\"]:disabled,\n.col input[type^=\"month\"]:disabled,\n.col input[type^=\"week\"]:disabled,\n.col input[type^=\"time\"]:disabled,\n.col input[type^=\"datetime\"]:disabled,\n.col input[type^=\"datetime-local\"]:disabled,\n.col textarea:disabled {\n\tbackground-color: #D5D5D5;\n\tborder-color: #D5D5D5;\n}\n\n.col button:disabled,\n.col input[type=\"button\"]:disabled,\n.col input[type=\"reset\"]:disabled,\n.col input[type=\"submit\"]:disabled {\n\tbackground-color: #D5D5D5;\n\tborder-color: #D5D5D5;\n}\n\n.col table {\n\tborder: none;\n\tborder-top-width: 1px;\n\tborder-top-style: solid;\n\tborder-top-color: #C3C3C3;\n\tborder-right-width: 1px;\n\tborder-right-style: solid;\n\tborder-right-color: #C3C3C3;\n\tborder-left-width: 1px;\n\tborder-left-style: solid;\n\tborder-left-color: #C3C3C3;\n}\n\n.col table th {\n\tborder: none;\n\tborder-bottom-width: 1px;\n\tborder-bottom-style: solid;\n\tborder-bottom-color: #C3C3C3;\n}\n\n.col table td {\n\tborder: none;\n\tborder-bottom-width: 1px;\n\tborder-bottom-style: solid;\n\tborder-bottom-color: #C3C3C3;\n}\n\n.col img {\n\tbackground-color: inherit;\n\tborder: 0;\n}\n\n.col hr,\n.col .hr {\n\tbackground-color: #C3C3C3;\n\tborder: 0;\n}\n\n.col .highlight {\n\tcolor: #D93D3D;\n}\n","html{font-size:16px;line-height:24px}body{font-size:16px;line-height:24px}.col a,.col abbr,.col acronym,.col address,.col applet,.col article,.col aside,.col audio,.col b,.col big,.col blockquote,.col canvas,.col caption,.col center,.col cite,.col code,.col dd,.col del,.col details,.col dfn,.col div,.col dl,.col dt,.col em,.col embed,.col fieldset,.col figcaption,.col figure,.col footer,.col form,.col h1,.col h2,.col h3,.col h4,.col h5,.col h6,.col header,.col hgroup,.col i,.col iframe,.col img,.col ins,.col kbd,.col label,.col legend,.col li,.col mark,.col menu,.col nav,.col object,.col ol,.col output,.col p,.col pre,.col q,.col ruby,.col s,.col samp,.col section,.col small,.col span,.col strike,.col strong,.col sub,.col summary,.col sup,.col table,.col tbody,.col td,.col tfoot,.col th,.col thead,.col time,.col tr,.col tt,.col u,.col ul,.col var,.col video{font-size:100%;font:inherit;border:0;vertical-align:baseline;margin:0;padding:0}.col sub,.col sup{font-size:75%;line-height:0;position:relative}.col sup{top:-.5em}.col sub{bottom:-.25em}.col blockquote,.col q{quotes:none}.col blockquote:after,.col blockquote:before,.col q:after,.col q:before{content:\"\";content:none}.col a{text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0}.col h1 a,.col h2 a,.col h3 a,.col h4 a,.col h5 a,.col h6 a{font-weight:inherit}.col address,.col p.address{font-size:14px;line-height:20px;margin-right:0}.col p.blockquote{margin-right:0}.col h1{font-size:39px;line-height:48px;padding:0}.col h2{font-size:25px;line-height:32px;padding:0}.col h3{font-size:20px;line-height:24px;padding:0}.col h4{font-size:16px;line-height:20px;padding:0}.col h5{font-size:16px;line-height:20px;text-transform:uppercase;padding:0}.col h6{font-size:16px;line-height:20px;text-decoration:underline;padding:0}.col caption,.col label,.col p.smaller,.col pre,.col pre code,.col table td,.col table th{font-size:14px;line-height:20px}.col blockquote,.col p.larger{font-size:18px;line-height:28px}.col dl dd,.col dl dt,.col ol li,.col p,.col p.blockquote,.col ul li{font-size:inherit;line-height:inherit}.col ul{list-style:disc outside}.col ol{list-style:decimal inside}.col pre{font-size:inherit;line-height:inherit;white-space:pre;white-space:pre-wrap;word-wrap:inherit;overflow:-moz-scrollbars-horizontal;overflow-x:auto;border:0;-webkit-box-shadow:none;box-shadow:none;-moz-tab-size:4;-o-tab-size:4;tab-size:4;padding:16px 20px}.col pre code{text-shadow:none}.col pre a{text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0}.col table{width:auto;border-collapse:collapse;border-spacing:0}.col caption,.col table td,.col table th{text-align:left}.col table td,.col table th{padding:7px 12px 7px 12px;vertical-align:top}.col img{border:0;vertical-align:bottom;padding:0}.col input[type^=color],.col input[type^=date],.col input[type^=datetime-local],.col input[type^=datetime],.col input[type^=email],.col input[type^=month],.col input[type^=number],.col input[type^=password],.col input[type^=\"search\"],.col input[type^=tel],.col input[type^=\"text\"],.col input[type^=time],.col input[type^=url],.col input[type^=week],.col select,.col textarea{font-size:14px;line-height:20px;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline;-webkit-tap-highlight-color:transparent;outline:0;padding:0 8px}.col select{padding:0 0 0 4px}.col optgroup{margin:4px;padding-left:4px}.col input[type=color]{padding:0}.col button,.col input[type=button],.col input[type=reset],.col input[type=submit],.col input[type^=color],.col input[type^=date],.col input[type^=datetime-local],.col input[type^=datetime],.col input[type^=email],.col input[type^=month],.col input[type^=number],.col input[type^=password],.col input[type^=\"search\"],.col input[type^=tel],.col input[type^=\"text\"],.col input[type^=time],.col input[type^=url],.col input[type^=week],.col select{height:36px}.col button,.col input[type=button],.col input[type=reset],.col input[type=submit]{font-size:14px;line-height:20px;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline;-webkit-tap-highlight-color:transparent;outline:0;cursor:pointer;padding:0 8px}.col label{display:block;margin-bottom:4px}.col textarea{width:95%}.col dl,.col ol,.col ul{margin-left:auto}.col dl dd:before{content:\"\\2014\\00a0\"}.col address,.col blockquote,.col dl dd,.col p.address,.col p.blockquote{margin-left:24px}.col ol{padding-left:24px}.col .indent{text-indent:24px}.col ul{padding-left:40px}.col td ul{margin-top:0}.col td ul li{font-size:inherit;line-height:inherit}.col td ol{margin-top:0}.col td ol li{font-size:inherit;line-height:inherit}.col.textcenter address,.col.textcenter blockquote,.col.textcenter dd,.col.textcenter p.address,.col.textcenter p.blockquote,.col.textcenter pre{margin-left:0}.col img,.col input,.col ol li,.col select,.col table td dl,.col table td ol,.col table td ul,.col textarea,.col ul li{margin:0}.col address,.col blockquote,.col caption,.col details,.col dl,.col dl dd,.col figcaption,.col figure,.col h1,.col h2,.col h3,.col h4,.col h5,.col h6,.col ol,.col p,.col p.address,.col p.blockquote,.col pre,.col table,.col ul{margin-top:0}.col h2+div,.col h2+p,.col h2+table,.col h3+div,.col h3+p,.col h3+table,.col h4+div,.col h4+p,.col h4+table,.col h5+div,.col h5+p,.col h5+table,.col h6+div,.col h6+p,.col h6+table{margin-top:8px}.col address:first-child,.col div+address,.col h1+blockquote,.col h1+details,.col h1+div,.col h1+div.hr,.col h1+dl,.col h1+hr,.col h1+ol,.col h1+p,.col h1+pre,.col h1+table,.col h1+ul,.col h2+blockquote,.col h2+details,.col h2+dl,.col h2+h3,.col h2+ol,.col h2+pre,.col h2+ul,.col h3+blockquote,.col h3+details,.col h3+dl,.col h3+h4,.col h3+ol,.col h3+pre,.col h3+ul,.col h4+blockquote,.col h4+details,.col h4+dl,.col h4+h3,.col h4+h5,.col h4+ol,.col h4+pre,.col h4+ul,.col h5+blockquote,.col h5+details,.col h5+dl,.col h5+h2,.col h5+h6,.col h5+ol,.col h5+pre,.col h5+ul,.col h6+blockquote,.col h6+details,.col h6+dl,.col h6+ol,.col h6+pre,.col h6+ul,.col p+address,.col p+p,.col p.address,.col p.blockquote,.col pre+address,.col table+address,.col table+p.address,.col table+p.blockquote{margin-top:24px}.col blockquote+blockquote,.col blockquote+details,.col blockquote+dl,.col blockquote+h1,.col blockquote+h2,.col blockquote+h3,.col blockquote+h4,.col blockquote+h5,.col blockquote+h6,.col blockquote+ol,.col blockquote+p,.col blockquote+pre,.col blockquote+table,.col blockquote+ul,.col blockquote:first-child,.col details+blockquote,.col details+details,.col details+dl,.col details+h1,.col details+h2,.col details+h3,.col details+h4,.col details+h5,.col details+h6,.col details+ol,.col details+p,.col details+pre,.col details+table,.col details+ul,.col details:first-child,.col div+blockquote,.col div+details,.col div+dl,.col div+h1,.col div+h2,.col div+h3,.col div+h4,.col div+h5,.col div+h6,.col div+ol,.col div+p,.col div+pre,.col div+table,.col div+ul,.col dl+blockquote,.col dl+details,.col dl+dl,.col dl+h1,.col dl+h2,.col dl+h3,.col dl+h4,.col dl+h5,.col dl+h6,.col dl+ol,.col dl+p,.col dl+pre,.col dl+table,.col dl+ul,.col dl:first-child,.col figcaption:first-child,.col figure:first-child,.col h1:first-child,.col h2:first-child,.col h3:first-child,.col h4:first-child,.col h5:first-child,.col h6:first-child,.col ol+blockquote,.col ol+details,.col ol+dl,.col ol+h1,.col ol+h2,.col ol+h3,.col ol+h4,.col ol+h5,.col ol+h6,.col ol+ol,.col ol+p,.col ol+pre,.col ol+table,.col ol+ul,.col ol:first-child,.col p+blockquote,.col p+details,.col p+dl,.col p+figcaption,.col p+figure,.col p+h1,.col p+h2,.col p+h3,.col p+h4,.col p+h5,.col p+h6,.col p+ol,.col p+pre,.col p+table,.col p+ul,.col p:first-child,.col pre+blockquote,.col pre+details,.col pre+dl,.col pre+h1,.col pre+h2,.col pre+h3,.col pre+h4,.col pre+h5,.col pre+h6,.col pre+ol,.col pre+p,.col pre+pre,.col pre+table,.col pre+ul,.col pre:first-child,.col table+blockquote,.col table+details,.col table+dl,.col table+h1,.col table+h2,.col table+h3,.col table+h4,.col table+h5,.col table+h6,.col table+ol,.col table+p,.col table+pre,.col table+table,.col table+ul,.col table:first-child,.col ul+blockquote,.col ul+details,.col ul+dl,.col ul+h1,.col ul+h2,.col ul+h3,.col ul+h4,.col ul+h5,.col ul+h6,.col ul+ol,.col ul+p,.col ul+pre,.col ul+table,.col ul+ul,.col ul:first-child{margin-top:24px}.col address:first-of-type,.col address:last-child,.col blockquote:last-child,.col details:last-child,.col dl dd,.col dl:last-child,.col figcaption:last-child,.col figure:last-child,.col ol:last-child,.col p.address:first-of-type,.col p.address:last-child,.col p.blockquote:first-of-type,.col p.blockquote:last-child,.col p:last-child,.col pre:last-child,.col table:first-of-type,.col table:last-child,.col ul:last-child{margin-bottom:0}.col address,.col blockquote,.col details,.col dl,.col figcaption,.col figure,.col ol,.col pre,.col ul{margin-bottom:24px}.col blockquote+p,.col details+p,.col div+p,.col dl+p,.col h1+p,.col h2+p,.col h3+p,.col h4+p,.col h5+p,.col h6+p,.col ol+p,.col p+p,.col pre+p,.col table+p,.col ul+p{margin-bottom:16px}.col .textleft{text-align:left}.col .textright{text-align:right}.col .textcenter{text-align:center}.col .larger{font-size:larger}.col .smaller,.col small{font-size:smaller}.col .hr,.col hr{height:1px;padding:0;margin:24px 0 23px 0}.col address,.col caption,.col dl dd,.col h2,.col h4,.col h5,.col h6,.col input[type^=color],.col input[type^=date],.col input[type^=datetime-local],.col input[type^=datetime],.col input[type^=email],.col input[type^=month],.col input[type^=number],.col input[type^=password],.col input[type^=\"search\"],.col input[type^=tel],.col input[type^=\"text\"],.col input[type^=time],.col input[type^=url],.col input[type^=week],.col label,.col ol li,.col p,.col p.address,.col p.blockquote,.col select,.col table td,.col textarea,.col ul li{font-weight:400}.col h1{font-weight:400}.col .bolder,.col .highlight,.col b,.col button,.col dl dt,.col h4,.col input[type=button],.col input[type=reset],.col input[type=submit],.col strong,.col table th{font-weight:bolder}.col .italic,.col address,.col blockquote,.col caption,.col em,.col i,.col label,.col p.address,.col p.blockquote{font-style:italic}.col optgroup{font-style:normal}.col body{font-family:\"Segoe UI\",\"Segoe WP\",HelveticaNeue,Roboto,\"Source Sans Pro\",\"Open Sans\",Exo2,\"Fira Sans\",sans-serif}.col pre,.col pre code{font-family:Consolas,Monaco,\"Droid Sans Mono\",Inconsolata,\"Source Code Pro\",monospace}.col select{font-family:sans-serif}.col button,.col caption,.col input[type=button],.col input[type=reset],.col input[type=submit],.col input[type^=color],.col input[type^=date],.col input[type^=datetime-local],.col input[type^=datetime],.col input[type^=email],.col input[type^=month],.col input[type^=number],.col input[type^=password],.col input[type^=\"search\"],.col input[type^=tel],.col input[type^=\"text\"],.col input[type^=time],.col input[type^=url],.col input[type^=week],.col table td,.col table th,.col textarea{font-family:inherit}.col .phonetic{font-family:\"Roboto Mono\",Consolas,Monaco,\"Droid Sans Mono\",Inconsolata,\"Source Code Pro\",monospace}.col a{color:#3585d8}.col a:active,.col a:focus,.col a:hover{color:#3585d8}.col caption,.col h1,.col h1 a,.col h2,.col h2 a,.col h3,.col h3 a,.col h4,.col h4 a,.col h5,.col h5 a,.col h6,.col h6 a,.col input[type^=color],.col input[type^=color]:active,.col input[type^=color]:focus,.col input[type^=date],.col input[type^=date]:active,.col input[type^=date]:focus,.col input[type^=datetime-local],.col input[type^=datetime-local]:active,.col input[type^=datetime-local]:focus,.col input[type^=datetime],.col input[type^=datetime]:active,.col input[type^=datetime]:focus,.col input[type^=email],.col input[type^=email]:active,.col input[type^=email]:focus,.col input[type^=month],.col input[type^=month]:active,.col input[type^=month]:focus,.col input[type^=number],.col input[type^=number]:active,.col input[type^=number]:focus,.col input[type^=password],.col input[type^=password]:active,.col input[type^=password]:focus,.col input[type^=\"search\"],.col input[type^=\"search\"]:active,.col input[type^=\"search\"]:focus,.col input[type^=tel],.col input[type^=tel]:active,.col input[type^=tel]:focus,.col input[type^=\"text\"],.col input[type^=\"text\"]:active,.col input[type^=\"text\"]:focus,.col input[type^=time],.col input[type^=time]:active,.col input[type^=time]:focus,.col input[type^=url],.col input[type^=url]:active,.col input[type^=url]:focus,.col input[type^=week],.col input[type^=week]:active,.col input[type^=week]:focus,.col pre a,.col pre code,.col select,.col select:active,.col select:focus,.col table td,.col table th a,.col textarea,.col textarea:active,.col textarea:focus{color:inherit}.col pre{color:inherit;background-color:#f3f3f3}.col pre a:active,.col pre a:focus,.col pre a:hover{color:inherit}.col input[type^=color],.col input[type^=date],.col input[type^=datetime-local],.col input[type^=datetime],.col input[type^=email],.col input[type^=month],.col input[type^=number],.col input[type^=password],.col input[type^=\"search\"],.col input[type^=tel],.col input[type^=\"text\"],.col input[type^=time],.col input[type^=url],.col input[type^=week],.col select,.col textarea{background-color:#fff;border:1px solid #c3c3c3}.col button:active,.col button:focus,.col button:hover,.col input[type=button]:active,.col input[type=button]:focus,.col input[type=button]:hover,.col input[type=reset]:active,.col input[type=reset]:focus,.col input[type=reset]:hover,.col input[type=submit]:active,.col input[type=submit]:focus,.col input[type=submit]:hover{color:#fff;background-color:#5f5f5f;border:1px solid #5f5f5f}.col button,.col input[type=button],.col input[type=reset],.col input[type=submit]{color:#fff;background-color:#373737;border:1px solid #373737}.col input[type^=color]:active,.col input[type^=color]:focus,.col input[type^=date]:active,.col input[type^=date]:focus,.col input[type^=datetime-local]:active,.col input[type^=datetime-local]:focus,.col input[type^=datetime]:active,.col input[type^=datetime]:focus,.col input[type^=email]:active,.col input[type^=email]:focus,.col input[type^=month]:active,.col input[type^=month]:focus,.col input[type^=number]:active,.col input[type^=number]:focus,.col input[type^=password]:active,.col input[type^=password]:focus,.col input[type^=\"search\"]:active,.col input[type^=\"search\"]:focus,.col input[type^=tel]:active,.col input[type^=tel]:focus,.col input[type^=\"text\"]:active,.col input[type^=\"text\"]:focus,.col input[type^=time]:active,.col input[type^=time]:focus,.col input[type^=url]:active,.col input[type^=url]:focus,.col input[type^=week]:active,.col input[type^=week]:focus,.col select:active,.col select:focus,.col select:hover,.col textarea:active,.col textarea:focus{background-color:#f3f3f3;border:1px solid #c3c3c3}.col input[type^=color]:disabled,.col input[type^=date]:disabled,.col input[type^=datetime-local]:disabled,.col input[type^=datetime]:disabled,.col input[type^=email]:disabled,.col input[type^=month]:disabled,.col input[type^=number]:disabled,.col input[type^=password]:disabled,.col input[type^=\"search\"]:disabled,.col input[type^=tel]:disabled,.col input[type^=\"text\"]:disabled,.col input[type^=time]:disabled,.col input[type^=url]:disabled,.col input[type^=week]:disabled,.col select:disabled,.col textarea:disabled{background-color:#d5d5d5;border-color:#d5d5d5}.col button:disabled,.col input[type=button]:disabled,.col input[type=reset]:disabled,.col input[type=submit]:disabled{background-color:#d5d5d5;border-color:#d5d5d5}.col table{border:none;border-top-width:1px;border-top-style:solid;border-top-color:#c3c3c3;border-right-width:1px;border-right-style:solid;border-right-color:#c3c3c3;border-left-width:1px;border-left-style:solid;border-left-color:#c3c3c3}.col table th{border:none;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#c3c3c3}.col table td{border:none;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#c3c3c3}.col img{background-color:inherit;border:0}.col .hr,.col hr{background-color:#c3c3c3;border:0}.col .highlight{color:#d93d3d}\n/*# sourceMappingURL=16pixels.min.css.map */\n","/*!\n * 16pixels v0.1.9\n * @see {@link https://github.com/englishextra/16pixels}\n * set html font to 16px, and body to 16px\n * line height should be the closest multiple of 4\n */\nhtml {\n font-size: 16px;\n line-height: 24px; }\n\nbody {\n font-size: 16px;\n line-height: 24px; }\n\n.col div,\n.col span,\n.col applet,\n.col object,\n.col iframe,\n.col h1,\n.col h2,\n.col h3,\n.col h4,\n.col h5,\n.col h6,\n.col p,\n.col blockquote,\n.col pre,\n.col a,\n.col abbr,\n.col acronym,\n.col address,\n.col big,\n.col cite,\n.col code,\n.col del,\n.col dfn,\n.col em,\n.col img,\n.col ins,\n.col kbd,\n.col q,\n.col s,\n.col samp,\n.col small,\n.col strike,\n.col strong,\n.col sub,\n.col sup,\n.col tt,\n.col var,\n.col b,\n.col u,\n.col i,\n.col center,\n.col dl,\n.col dt,\n.col dd,\n.col ol,\n.col ul,\n.col details,\n.col li,\n.col fieldset,\n.col form,\n.col label,\n.col legend,\n.col table,\n.col caption,\n.col tbody,\n.col tfoot,\n.col thead,\n.col tr,\n.col th,\n.col td,\n.col article,\n.col aside,\n.col canvas,\n.col embed,\n.col figure,\n.col figcaption,\n.col footer,\n.col header,\n.col hgroup,\n.col menu,\n.col nav,\n.col output,\n.col ruby,\n.col section,\n.col summary,\n.col time,\n.col mark,\n.col audio,\n.col video {\n font-size: 100%;\n font: inherit;\n border: 0;\n vertical-align: baseline;\n margin: 0;\n padding: 0; }\n\n.col sub,\n.col sup {\n font-size: 75%;\n line-height: 0;\n position: relative; }\n\n.col sup {\n top: -0.5em; }\n\n.col sub {\n bottom: -0.25em; }\n\n.col blockquote,\n.col q {\n quotes: none; }\n\n.col blockquote:before,\n.col blockquote:after,\n.col q:before,\n.col q:after {\n content: \"\";\n content: none; }\n\n.col a {\n text-decoration: none;\n -webkit-tap-highlight-color: transparent;\n outline: none; }\n\n.col h1 a,\n.col h2 a,\n.col h3 a,\n.col h4 a,\n.col h5 a,\n.col h6 a {\n font-weight: inherit; }\n\n.col address,\n.col p.address {\n font-size: 14px;\n line-height: 20px;\n margin-right: 0; }\n\n.col p.blockquote {\n margin-right: 0; }\n\n.col h1 {\n font-size: 39px;\n line-height: 48px;\n padding: 0; }\n\n.col h2 {\n font-size: 25px;\n line-height: 32px;\n padding: 0; }\n\n.col h3 {\n font-size: 20px;\n line-height: 24px;\n padding: 0; }\n\n.col h4 {\n font-size: 16px;\n line-height: 20px;\n padding: 0; }\n\n.col h5 {\n font-size: 16px;\n line-height: 20px;\n text-transform: uppercase;\n padding: 0; }\n\n.col h6 {\n font-size: 16px;\n line-height: 20px;\n text-decoration: underline;\n padding: 0; }\n\n.col caption,\n.col label,\n.col p.smaller,\n.col table td,\n.col table th,\n.col pre,\n.col pre code {\n font-size: 14px;\n line-height: 20px; }\n\n.col p.larger,\n.col blockquote {\n font-size: 18px;\n line-height: 28px; }\n\n.col p,\n.col p.blockquote,\n.col dl dt,\n.col dl dd,\n.col ul li,\n.col ol li {\n font-size: inherit;\n line-height: inherit; }\n\n.col ul {\n list-style: disc outside; }\n\n.col ol {\n list-style: decimal inside; }\n\n.col pre {\n font-size: inherit;\n line-height: inherit;\n white-space: pre;\n white-space: pre-wrap;\n word-wrap: inherit;\n overflow: -moz-scrollbars-horizontal;\n overflow-x: auto;\n border: 0;\n box-shadow: none;\n tab-size: 4;\n padding: 16px 20px; }\n\n.col pre code {\n text-shadow: none; }\n\n.col pre a {\n text-decoration: none;\n -webkit-tap-highlight-color: transparent;\n outline: none; }\n\n.col table {\n width: auto;\n border-collapse: collapse;\n border-spacing: 0; }\n\n.col caption,\n.col table th,\n.col table td {\n text-align: left; }\n\n.col table td,\n.col table th {\n padding: 7px 12px 7px 12px;\n vertical-align: top; }\n\n.col img {\n border: 0;\n vertical-align: bottom;\n padding: 0; }\n\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col select,\n.col textarea {\n font-size: 14px;\n line-height: 20px;\n box-sizing: border-box;\n vertical-align: baseline;\n -webkit-tap-highlight-color: transparent;\n outline: none;\n padding: 0 8px; }\n\n.col select {\n padding: 0 0 0 4px; }\n\n.col optgroup {\n margin: 4px;\n padding-left: 4px; }\n\n.col input[type=\"color\"] {\n padding: 0; }\n\n.col button,\n.col input[type=\"button\"],\n.col input[type=\"reset\"],\n.col input[type=\"submit\"],\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col select {\n height: 36px; }\n\n.col button,\n.col input[type=\"button\"],\n.col input[type=\"reset\"],\n.col input[type=\"submit\"] {\n font-size: 14px;\n line-height: 20px;\n box-sizing: border-box;\n vertical-align: baseline;\n -webkit-tap-highlight-color: transparent;\n outline: none;\n cursor: pointer;\n padding: 0 8px; }\n\n.col label {\n display: block;\n margin-bottom: 4px; }\n\n.col textarea {\n width: 95%; }\n\n.col ul,\n.col ol,\n.col dl {\n margin-left: auto; }\n\n.col dl dd:before {\n content: \"\\2014\\00a0\"; }\n\n.col address,\n.col p.address,\n.col p.blockquote,\n.col dl dd,\n.col blockquote {\n margin-left: 24px; }\n\n.col ol {\n padding-left: 24px; }\n\n.col .indent {\n text-indent: 24px; }\n\n.col ul {\n padding-left: 40px; }\n\n.col td ul {\n margin-top: 0; }\n\n.col td ul li {\n font-size: inherit;\n line-height: inherit; }\n\n.col td ol {\n margin-top: 0; }\n\n.col td ol li {\n font-size: inherit;\n line-height: inherit; }\n\n.col.textcenter address,\n.col.textcenter p.address,\n.col.textcenter dd,\n.col.textcenter pre,\n.col.textcenter blockquote,\n.col.textcenter p.blockquote {\n margin-left: 0; }\n\n.col img,\n.col input,\n.col ol li,\n.col select,\n.col textarea,\n.col ul li,\n.col table td ol,\n.col table td ul,\n.col table td dl {\n margin: 0; }\n\n.col address,\n.col p.address,\n.col p.blockquote,\n.col h1,\n.col h2,\n.col h3,\n.col h4,\n.col h5,\n.col h6,\n.col blockquote,\n.col caption,\n.col dl,\n.col dl dd,\n.col figcaption,\n.col figure,\n.col ol,\n.col p,\n.col pre,\n.col table,\n.col ul,\n.col details {\n margin-top: 0; }\n\n.col h2 + div,\n.col h2 + p,\n.col h2 + table,\n.col h3 + div,\n.col h3 + p,\n.col h3 + table,\n.col h4 + div,\n.col h4 + p,\n.col h4 + table,\n.col h5 + div,\n.col h5 + p,\n.col h5 + table,\n.col h6 + div,\n.col h6 + p,\n.col h6 + table {\n margin-top: 8px; }\n\n.col address:first-child,\n.col div + address,\n.col h1 + blockquote,\n.col h1 + div,\n.col h1 + hr,\n.col h1 + div.hr,\n.col h1 + dl,\n.col h1 + ol,\n.col h1 + p,\n.col h1 + pre,\n.col h1 + table,\n.col h1 + ul,\n.col h1 + details,\n.col h2 + blockquote,\n.col h2 + dl,\n.col h2 + h3,\n.col h2 + ol,\n.col h2 + pre,\n.col h2 + ul,\n.col h2 + details,\n.col h3 + blockquote,\n.col h3 + dl,\n.col h3 + h4,\n.col h3 + ol,\n.col h3 + pre,\n.col h3 + ul,\n.col h3 + details,\n.col h4 + blockquote,\n.col h4 + dl,\n.col h4 + h3,\n.col h4 + h5,\n.col h4 + ol,\n.col h4 + pre,\n.col h4 + ul,\n.col h4 + details,\n.col h5 + blockquote,\n.col h5 + dl,\n.col h5 + h6,\n.col h5 + h2,\n.col h5 + ol,\n.col h5 + pre,\n.col h5 + ul,\n.col h5 + details,\n.col h6 + blockquote,\n.col h6 + dl,\n.col h6 + ol,\n.col h6 + pre,\n.col h6 + ul,\n.col h6 + details,\n.col p + address,\n.col p + p,\n.col p.address,\n.col p.blockquote,\n.col pre + address,\n.col table + address,\n.col table + p.address,\n.col table + p.blockquote {\n margin-top: 24px; }\n\n.col blockquote + blockquote,\n.col blockquote + dl,\n.col blockquote + h1,\n.col blockquote + h2,\n.col blockquote + h3,\n.col blockquote + h4,\n.col blockquote + h5,\n.col blockquote + h6,\n.col blockquote + ol,\n.col blockquote + p,\n.col blockquote + pre,\n.col blockquote + table,\n.col blockquote + ul,\n.col blockquote + details,\n.col div + blockquote,\n.col div + dl,\n.col div + h1,\n.col div + h2,\n.col div + h3,\n.col div + h4,\n.col div + h5,\n.col div + h6,\n.col div + ol,\n.col div + p,\n.col div + pre,\n.col div + table,\n.col div + ul,\n.col div + details,\n.col dl + blockquote,\n.col dl + dl,\n.col dl + h1,\n.col dl + h2,\n.col dl + h3,\n.col dl + h4,\n.col dl + h5,\n.col dl + h6,\n.col dl + ol,\n.col dl + p,\n.col dl + pre,\n.col dl + table,\n.col dl + ul,\n.col dl + details,\n.col ol + blockquote,\n.col ol + dl,\n.col ol + h1,\n.col ol + h2,\n.col ol + h3,\n.col ol + h4,\n.col ol + h5,\n.col ol + h6,\n.col ol + ol,\n.col ol + p,\n.col ol + pre,\n.col ol + table,\n.col ol + ul,\n.col ol + details,\n.col p + blockquote,\n.col p + dl,\n.col p + figcaption,\n.col p + figure,\n.col p + h1,\n.col p + h2,\n.col p + h3,\n.col p + h4,\n.col p + h5,\n.col p + h6,\n.col p + ol,\n.col p + pre,\n.col p + table,\n.col p + ul,\n.col p + details,\n.col pre + blockquote,\n.col pre + dl,\n.col pre + h1,\n.col pre + h2,\n.col pre + h3,\n.col pre + h4,\n.col pre + h5,\n.col pre + h6,\n.col pre + ol,\n.col pre + p,\n.col pre + pre,\n.col pre + table,\n.col pre + ul,\n.col pre + details,\n.col table + blockquote,\n.col table + dl,\n.col table + h1,\n.col table + h2,\n.col table + h3,\n.col table + h4,\n.col table + h5,\n.col table + h6,\n.col table + ol,\n.col table + p,\n.col table + pre,\n.col table + table,\n.col table + ul,\n.col table + details,\n.col ul + blockquote,\n.col ul + dl,\n.col ul + h1,\n.col ul + h2,\n.col ul + h3,\n.col ul + h4,\n.col ul + h5,\n.col ul + h6,\n.col ul + ol,\n.col ul + p,\n.col ul + pre,\n.col ul + table,\n.col ul + ul,\n.col ul + details,\n.col details + blockquote,\n.col details + dl,\n.col details + h1,\n.col details + h2,\n.col details + h3,\n.col details + h4,\n.col details + h5,\n.col details + h6,\n.col details + ol,\n.col details + p,\n.col details + pre,\n.col details + table,\n.col details + ul,\n.col details + details,\n.col h1:first-child,\n.col h2:first-child,\n.col h3:first-child,\n.col h4:first-child,\n.col h5:first-child,\n.col h6:first-child,\n.col p:first-child,\n.col dl:first-child,\n.col ul:first-child,\n.col details:first-child,\n.col ol:first-child,\n.col blockquote:first-child,\n.col pre:first-child,\n.col table:first-child,\n.col figcaption:first-child,\n.col figure:first-child {\n margin-top: 24px; }\n\n.col dl dd,\n.col address:first-of-type,\n.col p.address:first-of-type,\n.col address:last-child,\n.col p.address:last-child,\n.col p.blockquote:first-of-type,\n.col p.blockquote:last-child,\n.col p:last-child,\n.col dl:last-child,\n.col ul:last-child,\n.col details:last-child,\n.col ol:last-child,\n.col blockquote:last-child,\n.col pre:last-child,\n.col table:first-of-type,\n.col table:last-child,\n.col figcaption:last-child,\n.col figure:last-child {\n margin-bottom: 0; }\n\n.col address,\n.col blockquote,\n.col dl,\n.col figcaption,\n.col figure,\n.col ol,\n.col pre,\n.col ul,\n.col details {\n margin-bottom: 24px; }\n\n.col blockquote + p,\n.col div + p,\n.col dl + p,\n.col h1 + p,\n.col h2 + p,\n.col h3 + p,\n.col h4 + p,\n.col h5 + p,\n.col h6 + p,\n.col ol + p,\n.col p + p,\n.col pre + p,\n.col table + p,\n.col ul + p,\n.col details + p {\n margin-bottom: 16px; }\n\n.col .textleft {\n text-align: left; }\n\n.col .textright {\n text-align: right; }\n\n.col .textcenter {\n text-align: center; }\n\n.col .larger {\n font-size: larger; }\n\n.col small,\n.col .smaller {\n font-size: smaller; }\n\n.col hr,\n.col .hr {\n height: 1px;\n padding: 0;\n margin: 24px 0 23px 0; }\n\n/**\n * font weights\n */\n.col h2,\n.col h4,\n.col h5,\n.col h6,\n.col address,\n.col p,\n.col p.address,\n.col p.blockquote,\n.col dl dd,\n.col ul li,\n.col ol li,\n.col table td,\n.col caption,\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col select,\n.col textarea,\n.col label {\n font-weight: normal; }\n\n.col h1 {\n font-weight: normal; }\n\n.col h4,\n.col table th,\n.col dl dt,\n.col button,\n.col input[type=\"button\"],\n.col input[type=\"reset\"],\n.col input[type=\"submit\"],\n.col b,\n.col strong,\n.col .bolder,\n.col .highlight {\n font-weight: bolder; }\n\n/**\n * font styles\n */\n.col address,\n.col p.address,\n.col p.blockquote,\n.col blockquote,\n.col caption,\n.col label,\n.col i,\n.col em,\n.col .italic {\n font-style: italic; }\n\n.col optgroup {\n font-style: normal; }\n\n/**\n * font families\n */\n.col body {\n font-family: \"Segoe UI\", \"Segoe WP\", \"HelveticaNeue\", \"Roboto\", \"Source Sans Pro\", \"Open Sans\", \"Exo2\", \"Fira Sans\", sans-serif; }\n\n/* .col h1 {\n\tfont-family: \"Segoe UI\", \"Segoe WP\", \"HelveticaNeue-Light\", \"Source Sans Pro\", \"Open Sans\", \"Exo2\", \"Fira Sans\", sans-serif-light, sans-serif;\n} */\n.col pre,\n.col pre code {\n font-family: \"Consolas\", \"Monaco\", \"Droid Sans Mono\", \"Inconsolata\", \"Source Code Pro\", monospace; }\n\n.col select {\n font-family: sans-serif; }\n\n.col button,\n.col input[type=\"button\"],\n.col input[type=\"reset\"],\n.col input[type=\"submit\"],\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col textarea,\n.col caption,\n.col table th,\n.col table td {\n font-family: inherit; }\n\n.col .phonetic {\n font-family: \"Roboto Mono\", \"Consolas\", \"Monaco\", \"Droid Sans Mono\", \"Inconsolata\", \"Source Code Pro\", monospace; }\n\n/**\n * colors\n */\n.col a {\n color: #3585D8; }\n\n.col a:focus,\n.col a:hover,\n.col a:active {\n color: #3585D8; }\n\n.col h1,\n.col h2,\n.col h3,\n.col h4,\n.col h5,\n.col h6,\n.col h1 a,\n.col h2 a,\n.col h3 a,\n.col h4 a,\n.col h5 a,\n.col h6 a,\n.col pre code,\n.col pre a,\n.col caption,\n.col table td,\n.col table th a,\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col textarea,\n.col select,\n.col input[type^=\"text\"]:focus,\n.col input[type^=\"search\"]:focus,\n.col input[type^=\"email\"]:focus,\n.col input[type^=\"url\"]:focus,\n.col input[type^=\"password\"]:focus,\n.col input[type^=\"tel\"]:focus,\n.col input[type^=\"color\"]:focus,\n.col input[type^=\"number\"]:focus,\n.col input[type^=\"date\"]:focus,\n.col input[type^=\"month\"]:focus,\n.col input[type^=\"week\"]:focus,\n.col input[type^=\"time\"]:focus,\n.col input[type^=\"datetime\"]:focus,\n.col input[type^=\"datetime-local\"]:focus,\n.col textarea:focus,\n.col select:focus,\n.col input[type^=\"text\"]:active,\n.col input[type^=\"search\"]:active,\n.col input[type^=\"email\"]:active,\n.col input[type^=\"url\"]:active,\n.col input[type^=\"password\"]:active,\n.col input[type^=\"tel\"]:active,\n.col input[type^=\"color\"]:active,\n.col input[type^=\"number\"]:active,\n.col input[type^=\"date\"]:active,\n.col input[type^=\"month\"]:active,\n.col input[type^=\"week\"]:active,\n.col input[type^=\"time\"]:active,\n.col input[type^=\"datetime\"]:active,\n.col input[type^=\"datetime-local\"]:active,\n.col textarea:active,\n.col select:active {\n color: inherit; }\n\n.col pre {\n color: inherit;\n background-color: #F3F3F3; }\n\n.col pre a:focus,\n.col pre a:hover,\n.col pre a:active {\n color: inherit; }\n\n.col select,\n.col input[type^=\"text\"],\n.col input[type^=\"search\"],\n.col input[type^=\"email\"],\n.col input[type^=\"url\"],\n.col input[type^=\"password\"],\n.col input[type^=\"tel\"],\n.col input[type^=\"color\"],\n.col input[type^=\"number\"],\n.col input[type^=\"date\"],\n.col input[type^=\"month\"],\n.col input[type^=\"week\"],\n.col input[type^=\"time\"],\n.col input[type^=\"datetime\"],\n.col input[type^=\"datetime-local\"],\n.col textarea {\n background-color: #FFFFFF;\n border: 1px solid #C3C3C3; }\n\n.col button:focus,\n.col input[type=\"button\"]:focus,\n.col input[type=\"reset\"]:focus,\n.col input[type=\"submit\"]:focus,\n.col button:hover,\n.col input[type=\"button\"]:hover,\n.col input[type=\"reset\"]:hover,\n.col input[type=\"submit\"]:hover,\n.col button:active,\n.col input[type=\"button\"]:active,\n.col input[type=\"reset\"]:active,\n.col input[type=\"submit\"]:active {\n color: #FFFFFF;\n background-color: #5F5F5F;\n border: 1px solid #5F5F5F; }\n\n.col button,\n.col input[type=\"button\"],\n.col input[type=\"reset\"],\n.col input[type=\"submit\"] {\n color: #FFFFFF;\n background-color: #373737;\n border: 1px solid #373737; }\n\n.col select:focus,\n.col select:hover,\n.col input[type^=\"text\"]:focus,\n.col input[type^=\"search\"]:focus,\n.col input[type^=\"email\"]:focus,\n.col input[type^=\"url\"]:focus,\n.col input[type^=\"password\"]:focus,\n.col input[type^=\"tel\"]:focus,\n.col input[type^=\"color\"]:focus,\n.col input[type^=\"number\"]:focus,\n.col input[type^=\"date\"]:focus,\n.col input[type^=\"month\"]:focus,\n.col input[type^=\"week\"]:focus,\n.col input[type^=\"time\"]:focus,\n.col input[type^=\"datetime\"]:focus,\n.col input[type^=\"datetime-local\"]:focus,\n.col textarea:focus,\n.col select:active,\n.col input[type^=\"text\"]:active,\n.col input[type^=\"search\"]:active,\n.col input[type^=\"email\"]:active,\n.col input[type^=\"url\"]:active,\n.col input[type^=\"password\"]:active,\n.col input[type^=\"tel\"]:active,\n.col input[type^=\"color\"]:active,\n.col input[type^=\"number\"]:active,\n.col input[type^=\"date\"]:active,\n.col input[type^=\"month\"]:active,\n.col input[type^=\"week\"]:active,\n.col input[type^=\"time\"]:active,\n.col input[type^=\"datetime\"]:active,\n.col input[type^=\"datetime-local\"]:active,\n.col textarea:active {\n background-color: #F3F3F3;\n border: 1px solid #C3C3C3; }\n\n.col select:disabled,\n.col input[type^=\"text\"]:disabled,\n.col input[type^=\"search\"]:disabled,\n.col input[type^=\"email\"]:disabled,\n.col input[type^=\"url\"]:disabled,\n.col input[type^=\"password\"]:disabled,\n.col input[type^=\"tel\"]:disabled,\n.col input[type^=\"color\"]:disabled,\n.col input[type^=\"number\"]:disabled,\n.col input[type^=\"date\"]:disabled,\n.col input[type^=\"month\"]:disabled,\n.col input[type^=\"week\"]:disabled,\n.col input[type^=\"time\"]:disabled,\n.col input[type^=\"datetime\"]:disabled,\n.col input[type^=\"datetime-local\"]:disabled,\n.col textarea:disabled {\n background-color: #D5D5D5;\n border-color: #D5D5D5; }\n\n.col button:disabled,\n.col input[type=\"button\"]:disabled,\n.col input[type=\"reset\"]:disabled,\n.col input[type=\"submit\"]:disabled {\n background-color: #D5D5D5;\n border-color: #D5D5D5; }\n\n.col table {\n border: none;\n border-top-width: 1px;\n border-top-style: solid;\n border-top-color: #C3C3C3;\n border-right-width: 1px;\n border-right-style: solid;\n border-right-color: #C3C3C3;\n border-left-width: 1px;\n border-left-style: solid;\n border-left-color: #C3C3C3; }\n\n.col table th {\n border: none;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: #C3C3C3; }\n\n.col table td {\n border: none;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: #C3C3C3; }\n\n.col img {\n background-color: inherit;\n border: 0; }\n\n.col hr,\n.col .hr {\n background-color: #C3C3C3;\n border: 0; }\n\n.col .highlight {\n color: #D93D3D; }\n"]} -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/englishextra/16pixels/8dc238ffda306a48e6d6d8a9649f14f5035213e5/favicon.ico -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /*global require */ 2 | 3 | /*! 4 | * @see {@link https://github.com/mildrenben/surface/blob/master/gulpfile.js} 5 | * @see {@link https://www.webstoemp.com/blog/gulp-setup/} 6 | * @see {@link https://gulpjs.com/plugins/blackList.json} 7 | * @see {@link https://hackernoon.com/how-to-automate-all-the-things-with-gulp-b21a3fc96885} 8 | * @see {@link https://stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-complete-did-you-forget-to-signal-async} 9 | * @see {@link https://zzz.buzz/2016/11/19/gulp-4-0-upgrade-guide/} 10 | * @see {@link https://blog.khophi.co/migrate-gulp-4-complete-example/} 11 | * @see {@link https://www.joezimjs.com/javascript/complete-guide-upgrading-gulp-4/} 12 | * @see {@link https://codeburst.io/switching-to-gulp-4-0-271ae63530c0} 13 | */ 14 | 15 | var gulp = require("gulp"); 16 | var plumber = require("gulp-plumber"); 17 | var sass = require("gulp-sass"); 18 | var minifyCss = require("gulp-clean-css"); 19 | var cleanCssOptions = { 20 | level: { 21 | 1: { 22 | specialComments: 0 23 | } 24 | } 25 | }; 26 | var sourcemaps = require("gulp-sourcemaps"); 27 | var rename = require("gulp-rename"); 28 | 29 | var browserSync = require("browser-sync").create(); 30 | var reload = browserSync.reload; 31 | 32 | /*! 33 | * @see {@link https://github.com/browserslist/browserslist/issues/386#issuecomment-567709502} 34 | */ 35 | var autoprefixer = require("gulp-autoprefixer"); 36 | 37 | /*! 38 | * @see {@link https://github.com/beautify-web/js-beautify} 39 | * a JSON-formatted file indicated by the --config parameter 40 | * a .jsbeautifyrc file containing JSON data at any level of the filesystem above $PWD 41 | * using external config may cause 42 | * failure to find it 43 | * if the input/output files reside higher 44 | * than the config file itself 45 | */ 46 | 47 | /* var beautify = require("gulp-jsbeautifier"); */ 48 | var beautifyOptions; 49 | beautifyOptions = { 50 | /* "config": ".jsbeautifyrc", */ 51 | "editorconfig": false, 52 | "indent_size": 4, 53 | "indent_char": "\t", 54 | "indent_with_tabs": true, 55 | "eol": "\n", 56 | "end_with_newline": true, 57 | "indent_level": 0, 58 | "preserve_newlines": true, 59 | "max_preserve_newlines": 10, 60 | "html": { 61 | "indent_inner_html": true, 62 | "indent_scripts": false, 63 | "js": {}, 64 | "css": {} 65 | }, 66 | "css": { 67 | "newline_between_rules": true 68 | }, 69 | "js": { 70 | "space_in_paren": false, 71 | "space_in_empty_paren": false, 72 | "jslint_happy": false, 73 | "space_after_anon_function": true, 74 | "space_after_named_function": false, 75 | "brace_style": "collapse", 76 | "unindent_chained_methods": false, 77 | "break_chained_methods": true, 78 | "keep_array_indentation": true, 79 | "unescape_strings": false, 80 | "wrap_line_length": 0, 81 | "e4x": false, 82 | "comma_first": false, 83 | "operator_position": "before-newline" 84 | } 85 | }; 86 | 87 | /*! 88 | * @see {@link https://prettier.io/docs/en/options.html} 89 | * using external config may cause 90 | * failure to find it 91 | * if the input/output files reside higher 92 | * than the config file itself 93 | */ 94 | var prettier = require("gulp-prettier"); 95 | var prettierOptions; 96 | prettierOptions = { 97 | /* "config": ".prettierrc", */ 98 | "tabWidth": 4, 99 | "useTabs": true, 100 | "endOfLine": "lf", 101 | "printWidth:": 0 102 | }; 103 | 104 | var stripDebug = require("gulp-strip-debug"); 105 | 106 | /*! 107 | * @see {@link https://github.com/sasstools/sass-lint/blob/master/docs/sass-lint.yml} 108 | * @see {@link https://codebeautify.org/yaml-to-json-xml-csv} 109 | */ 110 | var csslint = require("gulp-sass-lint"); 111 | var csslintOptions; 112 | var csslintOptions = { 113 | "options": { 114 | "max-warnings": 50 115 | }, 116 | "rules": { 117 | "border-zero": 0, 118 | "brace-style": 0, 119 | "class-name-format": 0, 120 | "clean-import-paths": 0, 121 | "empty-args": 0, 122 | "empty-line-between-blocks": 0, 123 | "extends-before-declarations": 0, 124 | "extends-before-mixins": 0, 125 | "final-newline": 0, 126 | "force-attribute-nesting": 0, 127 | "force-element-nesting": 0, 128 | "force-pseudo-nesting": 0, 129 | "function-name-format": 0, 130 | "hex-length": 0, 131 | "hex-notation": 0, 132 | "indentation": 0, 133 | "leading-zero": 0, 134 | "mixin-name-format": 0, 135 | "mixins-before-declarations": 0, 136 | "nesting-depth": 0, 137 | "no-color-keywords": 0, 138 | "no-color-literals": 0, 139 | "no-css-comments": 0, 140 | "no-debug": 0, 141 | "no-duplicate-properties": 0, 142 | "no-empty-rulesets": 0, 143 | "no-extends": 0, 144 | "no-ids": 0, 145 | "no-important": 0, 146 | "no-invalid-hex": 0, 147 | "no-mergeable-selectors": 0, 148 | "no-misspelled-properties": 0, 149 | "no-qualifying-elements": 0, 150 | "no-trailing-zero": 0, 151 | "no-transition-all": 0, 152 | "no-url-protocols": 0, 153 | "no-vendor-prefixes": 0, 154 | "no-warn": 0, 155 | "one-declaration-per-line": 0, 156 | "placeholder-in-extend": 0, 157 | "placeholder-name-format": 0, 158 | "property-sort-order": 0, 159 | "pseudo-element": 0, 160 | "quotes": 0, 161 | "shorthand-values": 0, 162 | "single-line-per-selector": 0, 163 | "space-after-bang": 0, 164 | "space-after-colon": 0, 165 | "space-after-comma": 0, 166 | "space-around-operator": 0, 167 | "space-before-bang": 0, 168 | "space-before-brace": 0, 169 | "space-before-colon": 0, 170 | "space-between-parens": 0, 171 | "trailing-semicolon": 0, 172 | "url-quotes": 0, 173 | "variable-for-property": 0, 174 | "variable-name-format": 0, 175 | "zero-unit": 0 176 | } 177 | }; 178 | 179 | var options = { 180 | libbundle: { 181 | scss: "./scss/*.scss", 182 | css: "./css" 183 | }, 184 | }; 185 | 186 | gulp.task("compile-libbundle-css", function () { 187 | return gulp.src(options.libbundle.scss) 188 | .pipe(plumber()) 189 | .pipe(sourcemaps.init()) 190 | .pipe(sass({ 191 | errLogToConsole: true 192 | })) 193 | .pipe(autoprefixer()) 194 | .pipe(prettier(prettierOptions)) 195 | /* .pipe(beautify(beautifyOptions)) */ 196 | .pipe(gulp.dest(options.libbundle.css)) 197 | .pipe(rename(function (path) { 198 | path.basename += ".min"; 199 | })) 200 | .pipe(minifyCss(cleanCssOptions)) 201 | .pipe(sourcemaps.write(".")) 202 | .pipe(gulp.dest(options.libbundle.css)) 203 | .pipe(plumber.stop()); 204 | }); 205 | 206 | gulp.task("lint-libbundle-css", function () { 207 | return gulp.src(options.libbundle.scss) 208 | .pipe(csslint(csslintOptions)) 209 | .pipe(csslint.format()) 210 | .pipe(csslint.failOnError()); 211 | }); 212 | 213 | /*! 214 | * @see {@link https://browsersync.io/docs/gulp} 215 | */ 216 | gulp.task("browser-sync", gulp.series(gulp.parallel( 217 | "lint-libbundle-css"), function watchChanges() { 218 | 219 | browserSync.init({ 220 | server: "./" 221 | }); 222 | 223 | gulp.watch("./*.html").on("change", reload); 224 | gulp.watch("./css/*.css").on("change", reload); 225 | gulp.watch("./scss/*.scss", gulp.parallel("compile-libbundle-css")).on("change", reload); 226 | })); 227 | 228 | gulp.task("default", gulp.task("browser-sync")); 229 | -------------------------------------------------------------------------------- /img/16pixels-logo-36D7B7-935x230.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/englishextra/16pixels/8dc238ffda306a48e6d6d8a9649f14f5035213e5/img/16pixels-logo-36D7B7-935x230.png -------------------------------------------------------------------------------- /img/640x360.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/englishextra/16pixels/8dc238ffda306a48e6d6d8a9649f14f5035213e5/img/640x360.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/englishextra/16pixels/8dc238ffda306a48e6d6d8a9649f14f5035213e5/index.html -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /*jslint node: true */ 2 | 3 | /*jslint esversion: 6 */ 4 | 5 | /*! 6 | * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy 7 | * https://www.electronjs.org/docs/tutorial/security 8 | */ 9 | const electron = require("electron"); 10 | const app = electron.app; /* a life cycle module */ 11 | const BrowserWindow = electron.BrowserWindow; /* a browser window module */ 12 | const path = require("path"); 13 | /* a global link */ 14 | 15 | /* the window will close once the JS object is cleared */ 16 | var mainWindow = null; 17 | /* check if all the app’s windows are closed and shut down the app */ 18 | app.on("window-all-closed", function () { 19 | /* in OS X stay active until Cmd + Q is pressed */ 20 | if (process.platform !== "darwin") { 21 | app.quit(); 22 | } 23 | }); 24 | /* called when Electron inits and is ready to create a browser window */ 25 | app.on("ready", function () { 26 | /* create the window */ 27 | 28 | /* https://github.com/electron/electron/blob/master/docs/api/browser-window.md */ 29 | 30 | /* https://electronjs.org/docs/tutorial/security */ 31 | mainWindow = new BrowserWindow({ 32 | webPreferences: { 33 | contextIsolation: false, 34 | worldSafeExecuteJavaScript: true, 35 | nodeIntegration: true 36 | }, 37 | width: 1080, 38 | height: 688, 39 | icon: "favicon.ico", 40 | title: "16pixels Demo Page" 41 | }); 42 | /* load index.html */ 43 | mainWindow.loadURL(path.join("file://", __dirname, "/index.html")); 44 | /* open DevTools. */ 45 | 46 | /* mainWindow.webContents.openDevTools(); */ 47 | 48 | /* gets executed when window close event is generated */ 49 | mainWindow.on("closed", function () { 50 | /* remove the link to the window */ 51 | mainWindow = null; 52 | }); 53 | /* https://stackoverflow.com/questions/48854265/why-do-i-see-an-electron-security-warning-after-updating-my-electron-project-t */ 54 | process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = "1"; 55 | }); 56 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "16pixels", 3 | "version": "0.1.14", 4 | "description": "16pixels.css is a set of CSS rules to ensure consistent 16 pixels based typography. Pixels are used for font sizes and line heights, as well as for paddings and margins. Can be used as typography normalizer. No dependencies. Wrap your HTML content with class .col and you are done.", 5 | "keywords": [ 6 | "16pixels", 7 | "typeface", 8 | "font", 9 | "css", 10 | "grid", 11 | "typography" 12 | ], 13 | "main": "css/16pixels.css", 14 | "style": "css/16pixels.css", 15 | "files": [ 16 | "index.html", 17 | "css/16pixels.css" 18 | ], 19 | "filename": "css/16pixels.css", 20 | "autoupdate": { 21 | "source": "git", 22 | "target": "git://github.com/englishextra/16pixels.git", 23 | "fileMap": [{ 24 | "basePath": "", 25 | "files": [ 26 | "css/16pixels*" 27 | ] 28 | }] 29 | }, 30 | "repository": { 31 | "type": "git", 32 | "url": "git://github.com/englishextra/16pixels.git" 33 | }, 34 | "dependencies": {}, 35 | "devDependencies": { 36 | "browser-sync": "^2.26.13", 37 | "gulp": "^4.0.2", 38 | "gulp-autoprefixer": "^7.0.1", 39 | "gulp-clean-css": "^4.3.0", 40 | "gulp-cli": "^2.3.0", 41 | "gulp-plumber": "^1.2.1", 42 | "gulp-prettier": "^3.0.0", 43 | "gulp-rename": "^2.0.0", 44 | "gulp-sass": "^4.0.2", 45 | "gulp-sass-lint": "^1.4.0", 46 | "gulp-sourcemaps": "^3.0.0", 47 | "gulp-strip-debug": "^3.0.0" 48 | }, 49 | "engines": { 50 | "npm": ">=7.x" 51 | }, 52 | "scripts": { 53 | "test": "gulp lint-libbundle-css" 54 | }, 55 | "email": "englishextra@mail.ru", 56 | "url": "https://github.com/englishextra/16pixels/issues", 57 | "maintainers": [ 58 | { 59 | "name": "Serguei Shimansky", 60 | "email": "englishextra@mail.ru", 61 | "url": "https://github.com/englishextra" 62 | } 63 | ], 64 | "author": { 65 | "name": "englishextra", 66 | "email": "englishextra@mail.ru", 67 | "url": "https://github.com/englishextra" 68 | }, 69 | "license": "(MIT)" 70 | } 71 | -------------------------------------------------------------------------------- /scss/16pixels.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * 16pixels v0.1.9 3 | * @see {@link https://github.com/englishextra/16pixels} 4 | * set html font to 16px, and body to 16px 5 | * line height should be the closest multiple of 4 6 | */ 7 | 8 | html { 9 | font-size: 16px; 10 | line-height: 24px; 11 | } 12 | 13 | body { 14 | font-size: 16px; 15 | line-height: 24px; 16 | } 17 | 18 | .col div, 19 | .col span, 20 | .col applet, 21 | .col object, 22 | .col iframe, 23 | .col h1, 24 | .col h2, 25 | .col h3, 26 | .col h4, 27 | .col h5, 28 | .col h6, 29 | .col p, 30 | .col blockquote, 31 | .col pre, 32 | .col a, 33 | .col abbr, 34 | .col acronym, 35 | .col address, 36 | .col big, 37 | .col cite, 38 | .col code, 39 | .col del, 40 | .col dfn, 41 | .col em, 42 | .col img, 43 | .col ins, 44 | .col kbd, 45 | .col q, 46 | .col s, 47 | .col samp, 48 | .col small, 49 | .col strike, 50 | .col strong, 51 | .col sub, 52 | .col sup, 53 | .col tt, 54 | .col var, 55 | .col b, 56 | .col u, 57 | .col i, 58 | .col center, 59 | .col dl, 60 | .col dt, 61 | .col dd, 62 | .col ol, 63 | .col ul, 64 | .col details, 65 | .col li, 66 | .col fieldset, 67 | .col form, 68 | .col label, 69 | .col legend, 70 | .col table, 71 | .col caption, 72 | .col tbody, 73 | .col tfoot, 74 | .col thead, 75 | .col tr, 76 | .col th, 77 | .col td, 78 | .col article, 79 | .col aside, 80 | .col canvas, 81 | .col embed, 82 | .col figure, 83 | .col figcaption, 84 | .col footer, 85 | .col header, 86 | .col hgroup, 87 | .col menu, 88 | .col nav, 89 | .col output, 90 | .col ruby, 91 | .col section, 92 | .col summary, 93 | .col time, 94 | .col mark, 95 | .col audio, 96 | .col video { 97 | font-size: 100%; 98 | font: inherit; 99 | border: 0; 100 | vertical-align: baseline; 101 | margin: 0; 102 | padding: 0; 103 | } 104 | 105 | .col sub, 106 | .col sup { 107 | font-size: 75%; 108 | line-height: 0; 109 | position: relative; 110 | } 111 | 112 | .col sup { 113 | top: -0.5em; 114 | } 115 | 116 | .col sub { 117 | bottom: -0.25em; 118 | } 119 | 120 | .col blockquote, 121 | .col q { 122 | quotes: none; 123 | } 124 | 125 | .col blockquote:before, 126 | .col blockquote:after, 127 | .col q:before, 128 | .col q:after { 129 | content: ""; 130 | content: none; 131 | } 132 | 133 | .col a { 134 | text-decoration: none; 135 | -webkit-tap-highlight-color: transparent; 136 | outline: none; 137 | } 138 | 139 | .col h1 a, 140 | .col h2 a, 141 | .col h3 a, 142 | .col h4 a, 143 | .col h5 a, 144 | .col h6 a { 145 | font-weight: inherit; 146 | } 147 | 148 | .col address, 149 | .col p.address { 150 | font-size: 14px; 151 | line-height: 20px; 152 | margin-right: 0; 153 | } 154 | 155 | .col p.blockquote { 156 | margin-right: 0; 157 | } 158 | 159 | .col h1 { 160 | font-size: 39px; 161 | line-height: 48px; 162 | padding: 0; 163 | } 164 | 165 | .col h2 { 166 | font-size: 25px; 167 | line-height: 32px; 168 | padding: 0; 169 | } 170 | 171 | .col h3 { 172 | font-size: 20px; 173 | line-height: 24px; 174 | padding: 0; 175 | } 176 | 177 | .col h4 { 178 | font-size: 16px; 179 | line-height: 20px; 180 | padding: 0; 181 | } 182 | 183 | .col h5 { 184 | font-size: 16px; 185 | line-height: 20px; 186 | text-transform: uppercase; 187 | padding: 0; 188 | } 189 | 190 | .col h6 { 191 | font-size: 16px; 192 | line-height: 20px; 193 | text-decoration: underline; 194 | padding: 0; 195 | } 196 | 197 | .col caption, 198 | .col label, 199 | .col p.smaller, 200 | .col table td, 201 | .col table th, 202 | .col pre, 203 | .col pre code { 204 | font-size: 14px; 205 | line-height: 20px; 206 | } 207 | 208 | .col p.larger, 209 | .col blockquote { 210 | font-size: 18px; 211 | line-height: 28px; 212 | } 213 | 214 | .col p, 215 | .col p.blockquote, 216 | .col dl dt, 217 | .col dl dd, 218 | .col ul li, 219 | .col ol li { 220 | font-size: inherit; 221 | line-height: inherit; 222 | } 223 | 224 | .col ul { 225 | list-style: disc outside; 226 | } 227 | 228 | .col ol { 229 | list-style: decimal inside; 230 | } 231 | 232 | .col pre { 233 | font-size: inherit; 234 | line-height: inherit; 235 | white-space: pre; 236 | white-space: pre-wrap; 237 | word-wrap: inherit; 238 | overflow: -moz-scrollbars-horizontal; 239 | overflow-x: auto; 240 | border: 0; 241 | box-shadow: none; 242 | tab-size: 4; 243 | padding: 16px 20px; 244 | } 245 | 246 | .col pre code { 247 | text-shadow: none; 248 | } 249 | 250 | .col pre a { 251 | text-decoration: none; 252 | -webkit-tap-highlight-color: transparent; 253 | outline: none; 254 | } 255 | 256 | .col table { 257 | width: auto; 258 | border-collapse: collapse; 259 | border-spacing: 0; 260 | } 261 | 262 | .col caption, 263 | .col table th, 264 | .col table td { 265 | text-align: left; 266 | } 267 | 268 | .col table td, 269 | .col table th { 270 | padding: 7px 12px 7px 12px; 271 | vertical-align: top; 272 | } 273 | 274 | .col img { 275 | border: 0; 276 | vertical-align: bottom; 277 | padding: 0; 278 | } 279 | 280 | .col input[type^="text"], 281 | .col input[type^="search"], 282 | .col input[type^="email"], 283 | .col input[type^="url"], 284 | .col input[type^="password"], 285 | .col input[type^="tel"], 286 | .col input[type^="color"], 287 | .col input[type^="number"], 288 | .col input[type^="date"], 289 | .col input[type^="month"], 290 | .col input[type^="week"], 291 | .col input[type^="time"], 292 | .col input[type^="datetime"], 293 | .col input[type^="datetime-local"], 294 | .col select, 295 | .col textarea { 296 | font-size: 14px; 297 | line-height: 20px; 298 | box-sizing: border-box; 299 | vertical-align: baseline; 300 | -webkit-tap-highlight-color: transparent; 301 | outline: none; 302 | padding: 0 8px; 303 | } 304 | 305 | .col select { 306 | padding: 0 0 0 4px; 307 | } 308 | 309 | .col optgroup { 310 | margin: 4px; 311 | padding-left: 4px; 312 | } 313 | 314 | .col input[type="color"] { 315 | padding: 0; 316 | } 317 | 318 | .col button, 319 | .col input[type="button"], 320 | .col input[type="reset"], 321 | .col input[type="submit"], 322 | .col input[type^="text"], 323 | .col input[type^="search"], 324 | .col input[type^="email"], 325 | .col input[type^="url"], 326 | .col input[type^="password"], 327 | .col input[type^="tel"], 328 | .col input[type^="color"], 329 | .col input[type^="number"], 330 | .col input[type^="date"], 331 | .col input[type^="month"], 332 | .col input[type^="week"], 333 | .col input[type^="time"], 334 | .col input[type^="datetime"], 335 | .col input[type^="datetime-local"], 336 | .col select { 337 | height: 36px; 338 | } 339 | 340 | .col button, 341 | .col input[type="button"], 342 | .col input[type="reset"], 343 | .col input[type="submit"] { 344 | font-size: 14px; 345 | line-height: 20px; 346 | box-sizing: border-box; 347 | vertical-align: baseline; 348 | -webkit-tap-highlight-color: transparent; 349 | outline: none; 350 | cursor: pointer; 351 | padding: 0 8px; 352 | } 353 | 354 | .col label { 355 | display: block; 356 | margin-bottom: 4px; 357 | } 358 | 359 | .col textarea { 360 | width: 95%; 361 | } 362 | 363 | .col ul, 364 | .col ol, 365 | .col dl { 366 | margin-left: auto; 367 | } 368 | 369 | .col dl dd:before { 370 | content: "\2014\00a0"; 371 | } 372 | 373 | .col address, 374 | .col p.address, 375 | .col p.blockquote, 376 | .col dl dd, 377 | .col blockquote { 378 | margin-left: 24px; 379 | } 380 | 381 | .col ol { 382 | padding-left: 24px; 383 | } 384 | 385 | .col .indent { 386 | text-indent: 24px; 387 | } 388 | 389 | .col ul { 390 | padding-left: 40px; 391 | } 392 | 393 | .col td ul { 394 | margin-top: 0 /* !important */; 395 | } 396 | 397 | .col td ul li { 398 | font-size: inherit /* !important */; 399 | line-height: inherit /* !important */; 400 | } 401 | 402 | .col td ol { 403 | margin-top: 0 /* !important */; 404 | } 405 | 406 | .col td ol li { 407 | font-size: inherit /* !important */; 408 | line-height: inherit /* !important */; 409 | } 410 | 411 | .col.textcenter address, 412 | .col.textcenter p.address, 413 | .col.textcenter dd, 414 | .col.textcenter pre, 415 | .col.textcenter blockquote, 416 | .col.textcenter p.blockquote { 417 | margin-left: 0; 418 | } 419 | 420 | .col img, 421 | .col input, 422 | .col ol li, 423 | .col select, 424 | .col textarea, 425 | .col ul li, 426 | .col table td ol, 427 | .col table td ul, 428 | .col table td dl { 429 | margin: 0; 430 | } 431 | 432 | .col address, 433 | .col p.address, 434 | .col p.blockquote, 435 | .col h1, 436 | .col h2, 437 | .col h3, 438 | .col h4, 439 | .col h5, 440 | .col h6, 441 | .col blockquote, 442 | .col caption, 443 | .col dl, 444 | .col dl dd, 445 | .col figcaption, 446 | .col figure, 447 | .col ol, 448 | .col p, 449 | .col pre, 450 | .col table, 451 | .col ul, 452 | .col details { 453 | margin-top: 0; 454 | } 455 | 456 | .col h2 + div, 457 | .col h2 + p, 458 | .col h2 + table, 459 | .col h3 + div, 460 | .col h3 + p, 461 | .col h3 + table, 462 | .col h4 + div, 463 | .col h4 + p, 464 | .col h4 + table, 465 | .col h5 + div, 466 | .col h5 + p, 467 | .col h5 + table, 468 | .col h6 + div, 469 | .col h6 + p, 470 | .col h6 + table { 471 | margin-top: 8px; 472 | } 473 | 474 | .col address:first-child, 475 | .col div + address, 476 | .col h1 + blockquote, 477 | .col h1 + div, 478 | .col h1 + hr, 479 | .col h1 + div.hr, 480 | .col h1 + dl, 481 | .col h1 + ol, 482 | .col h1 + p, 483 | .col h1 + pre, 484 | .col h1 + table, 485 | .col h1 + ul, 486 | .col h1 + details, 487 | .col h2 + blockquote, 488 | .col h2 + dl, 489 | .col h2 + h3, 490 | .col h2 + ol, 491 | .col h2 + pre, 492 | .col h2 + ul, 493 | .col h2 + details, 494 | .col h3 + blockquote, 495 | .col h3 + dl, 496 | .col h3 + h4, 497 | .col h3 + ol, 498 | .col h3 + pre, 499 | .col h3 + ul, 500 | .col h3 + details, 501 | .col h4 + blockquote, 502 | .col h4 + dl, 503 | .col h4 + h3, 504 | .col h4 + h5, 505 | .col h4 + ol, 506 | .col h4 + pre, 507 | .col h4 + ul, 508 | .col h4 + details, 509 | .col h5 + blockquote, 510 | .col h5 + dl, 511 | .col h5 + h6, 512 | .col h5 + h2, 513 | .col h5 + ol, 514 | .col h5 + pre, 515 | .col h5 + ul, 516 | .col h5 + details, 517 | .col h6 + blockquote, 518 | .col h6 + dl, 519 | .col h6 + ol, 520 | .col h6 + pre, 521 | .col h6 + ul, 522 | .col h6 + details, 523 | .col p + address, 524 | .col p + p, 525 | .col p.address, 526 | .col p.blockquote, 527 | .col pre + address, 528 | .col table + address, 529 | .col table + p.address, 530 | .col table + p.blockquote { 531 | margin-top: 24px; 532 | } 533 | 534 | .col blockquote + blockquote, 535 | .col blockquote + dl, 536 | .col blockquote + h1, 537 | .col blockquote + h2, 538 | .col blockquote + h3, 539 | .col blockquote + h4, 540 | .col blockquote + h5, 541 | .col blockquote + h6, 542 | .col blockquote + ol, 543 | .col blockquote + p, 544 | .col blockquote + pre, 545 | .col blockquote + table, 546 | .col blockquote + ul, 547 | .col blockquote + details, 548 | .col div + blockquote, 549 | .col div + dl, 550 | .col div + h1, 551 | .col div + h2, 552 | .col div + h3, 553 | .col div + h4, 554 | .col div + h5, 555 | .col div + h6, 556 | .col div + ol, 557 | .col div + p, 558 | .col div + pre, 559 | .col div + table, 560 | .col div + ul, 561 | .col div + details, 562 | .col dl + blockquote, 563 | .col dl + dl, 564 | .col dl + h1, 565 | .col dl + h2, 566 | .col dl + h3, 567 | .col dl + h4, 568 | .col dl + h5, 569 | .col dl + h6, 570 | .col dl + ol, 571 | .col dl + p, 572 | .col dl + pre, 573 | .col dl + table, 574 | .col dl + ul, 575 | .col dl + details, 576 | .col ol + blockquote, 577 | .col ol + dl, 578 | .col ol + h1, 579 | .col ol + h2, 580 | .col ol + h3, 581 | .col ol + h4, 582 | .col ol + h5, 583 | .col ol + h6, 584 | .col ol + ol, 585 | .col ol + p, 586 | .col ol + pre, 587 | .col ol + table, 588 | .col ol + ul, 589 | .col ol + details, 590 | .col p + blockquote, 591 | .col p + dl, 592 | .col p + figcaption, 593 | .col p + figure, 594 | .col p + h1, 595 | .col p + h2, 596 | .col p + h3, 597 | .col p + h4, 598 | .col p + h5, 599 | .col p + h6, 600 | .col p + ol, 601 | .col p + pre, 602 | .col p + table, 603 | .col p + ul, 604 | .col p + details, 605 | .col pre + blockquote, 606 | .col pre + dl, 607 | .col pre + h1, 608 | .col pre + h2, 609 | .col pre + h3, 610 | .col pre + h4, 611 | .col pre + h5, 612 | .col pre + h6, 613 | .col pre + ol, 614 | .col pre + p, 615 | .col pre + pre, 616 | .col pre + table, 617 | .col pre + ul, 618 | .col pre + details, 619 | .col table + blockquote, 620 | .col table + dl, 621 | .col table + h1, 622 | .col table + h2, 623 | .col table + h3, 624 | .col table + h4, 625 | .col table + h5, 626 | .col table + h6, 627 | .col table + ol, 628 | .col table + p, 629 | .col table + pre, 630 | .col table + table, 631 | .col table + ul, 632 | .col table + details, 633 | .col ul + blockquote, 634 | .col ul + dl, 635 | .col ul + h1, 636 | .col ul + h2, 637 | .col ul + h3, 638 | .col ul + h4, 639 | .col ul + h5, 640 | .col ul + h6, 641 | .col ul + ol, 642 | .col ul + p, 643 | .col ul + pre, 644 | .col ul + table, 645 | .col ul + ul, 646 | .col ul + details, 647 | .col details + blockquote, 648 | .col details + dl, 649 | .col details + h1, 650 | .col details + h2, 651 | .col details + h3, 652 | .col details + h4, 653 | .col details + h5, 654 | .col details + h6, 655 | .col details + ol, 656 | .col details + p, 657 | .col details + pre, 658 | .col details + table, 659 | .col details + ul, 660 | .col details + details, 661 | .col h1:first-child, 662 | .col h2:first-child, 663 | .col h3:first-child, 664 | .col h4:first-child, 665 | .col h5:first-child, 666 | .col h6:first-child, 667 | .col p:first-child, 668 | .col dl:first-child, 669 | .col ul:first-child, 670 | .col details:first-child, 671 | .col ol:first-child, 672 | .col blockquote:first-child, 673 | .col pre:first-child, 674 | .col table:first-child, 675 | .col figcaption:first-child, 676 | .col figure:first-child { 677 | margin-top: 24px; 678 | } 679 | 680 | .col dl dd, 681 | .col address:first-of-type, 682 | .col p.address:first-of-type, 683 | .col address:last-child, 684 | .col p.address:last-child, 685 | .col p.blockquote:first-of-type, 686 | .col p.blockquote:last-child, 687 | .col p:last-child, 688 | .col dl:last-child, 689 | .col ul:last-child, 690 | .col details:last-child, 691 | .col ol:last-child, 692 | .col blockquote:last-child, 693 | .col pre:last-child, 694 | .col table:first-of-type, 695 | .col table:last-child, 696 | .col figcaption:last-child, 697 | .col figure:last-child { 698 | margin-bottom: 0; 699 | } 700 | 701 | .col address, 702 | .col blockquote, 703 | .col dl, 704 | .col figcaption, 705 | .col figure, 706 | .col ol, 707 | .col pre, 708 | .col ul, 709 | .col details { 710 | margin-bottom: 24px; 711 | } 712 | 713 | .col blockquote + p, 714 | .col div + p, 715 | .col dl + p, 716 | .col h1 + p, 717 | .col h2 + p, 718 | .col h3 + p, 719 | .col h4 + p, 720 | .col h5 + p, 721 | .col h6 + p, 722 | .col ol + p, 723 | .col p + p, 724 | .col pre + p, 725 | .col table + p, 726 | .col ul + p, 727 | .col details + p { 728 | margin-bottom: 16px; 729 | } 730 | 731 | .col .textleft { 732 | text-align: left; 733 | } 734 | 735 | .col .textright { 736 | text-align: right; 737 | } 738 | 739 | .col .textcenter { 740 | text-align: center; 741 | } 742 | 743 | .col .larger { 744 | font-size: larger; 745 | } 746 | 747 | .col small, 748 | .col .smaller { 749 | font-size: smaller; 750 | } 751 | 752 | .col hr, 753 | .col .hr { 754 | height: 1px; 755 | padding: 0; 756 | margin: 24px 0 23px 0; 757 | } 758 | 759 | /** 760 | * font weights 761 | */ 762 | 763 | .col h2, 764 | .col h4, 765 | .col h5, 766 | .col h6, 767 | .col address, 768 | .col p, 769 | .col p.address, 770 | .col p.blockquote, 771 | .col dl dd, 772 | .col ul li, 773 | .col ol li, 774 | .col table td, 775 | .col caption, 776 | .col input[type^="text"], 777 | .col input[type^="search"], 778 | .col input[type^="email"], 779 | .col input[type^="url"], 780 | .col input[type^="password"], 781 | .col input[type^="tel"], 782 | .col input[type^="color"], 783 | .col input[type^="number"], 784 | .col input[type^="date"], 785 | .col input[type^="month"], 786 | .col input[type^="week"], 787 | .col input[type^="time"], 788 | .col input[type^="datetime"], 789 | .col input[type^="datetime-local"], 790 | .col select, 791 | .col textarea, 792 | .col label { 793 | font-weight: normal; 794 | } 795 | 796 | .col h1 { 797 | font-weight: normal; 798 | } 799 | 800 | .col h4, 801 | .col table th, 802 | .col dl dt, 803 | .col button, 804 | .col input[type="button"], 805 | .col input[type="reset"], 806 | .col input[type="submit"], 807 | .col b, 808 | .col strong, 809 | .col .bolder, 810 | .col .highlight { 811 | font-weight: bolder; 812 | } 813 | 814 | /** 815 | * font styles 816 | */ 817 | 818 | .col address, 819 | .col p.address, 820 | .col p.blockquote, 821 | .col blockquote, 822 | .col caption, 823 | .col label, 824 | .col i, 825 | .col em, 826 | .col .italic { 827 | font-style: italic; 828 | } 829 | 830 | .col optgroup { 831 | font-style: normal; 832 | } 833 | 834 | /** 835 | * font families 836 | */ 837 | 838 | .col body { 839 | font-family: "Segoe UI", "Segoe WP", "HelveticaNeue", "Roboto", "Source Sans Pro", "Open Sans", "Exo2", "Fira Sans", sans-serif; 840 | } 841 | 842 | /* .col h1 { 843 | font-family: "Segoe UI", "Segoe WP", "HelveticaNeue-Light", "Source Sans Pro", "Open Sans", "Exo2", "Fira Sans", sans-serif-light, sans-serif; 844 | } */ 845 | 846 | .col pre, 847 | .col pre code { 848 | font-family: "Consolas", "Monaco", "Droid Sans Mono", "Inconsolata", "Source Code Pro", monospace; 849 | } 850 | 851 | .col select { 852 | font-family: sans-serif; 853 | } 854 | 855 | .col button, 856 | .col input[type="button"], 857 | .col input[type="reset"], 858 | .col input[type="submit"], 859 | .col input[type^="text"], 860 | .col input[type^="search"], 861 | .col input[type^="email"], 862 | .col input[type^="url"], 863 | .col input[type^="password"], 864 | .col input[type^="tel"], 865 | .col input[type^="color"], 866 | .col input[type^="number"], 867 | .col input[type^="date"], 868 | .col input[type^="month"], 869 | .col input[type^="week"], 870 | .col input[type^="time"], 871 | .col input[type^="datetime"], 872 | .col input[type^="datetime-local"], 873 | .col textarea, 874 | .col caption, 875 | .col table th, 876 | .col table td { 877 | font-family: inherit; 878 | } 879 | 880 | .col .phonetic { 881 | font-family: "Roboto Mono", "Consolas", "Monaco", "Droid Sans Mono", "Inconsolata", "Source Code Pro", monospace; 882 | } 883 | 884 | /** 885 | * colors 886 | */ 887 | 888 | .col a { 889 | color: #3585D8; 890 | } 891 | 892 | .col a:focus, 893 | .col a:hover, 894 | .col a:active { 895 | color: #3585D8; 896 | } 897 | 898 | .col h1, 899 | .col h2, 900 | .col h3, 901 | .col h4, 902 | .col h5, 903 | .col h6, 904 | .col h1 a, 905 | .col h2 a, 906 | .col h3 a, 907 | .col h4 a, 908 | .col h5 a, 909 | .col h6 a, 910 | .col pre code, 911 | .col pre a, 912 | .col caption, 913 | .col table td, 914 | .col table th a, 915 | .col input[type^="text"], 916 | .col input[type^="search"], 917 | .col input[type^="email"], 918 | .col input[type^="url"], 919 | .col input[type^="password"], 920 | .col input[type^="tel"], 921 | .col input[type^="color"], 922 | .col input[type^="number"], 923 | .col input[type^="date"], 924 | .col input[type^="month"], 925 | .col input[type^="week"], 926 | .col input[type^="time"], 927 | .col input[type^="datetime"], 928 | .col input[type^="datetime-local"], 929 | .col textarea, 930 | .col select, 931 | .col input[type^="text"]:focus, 932 | .col input[type^="search"]:focus, 933 | .col input[type^="email"]:focus, 934 | .col input[type^="url"]:focus, 935 | .col input[type^="password"]:focus, 936 | .col input[type^="tel"]:focus, 937 | .col input[type^="color"]:focus, 938 | .col input[type^="number"]:focus, 939 | .col input[type^="date"]:focus, 940 | .col input[type^="month"]:focus, 941 | .col input[type^="week"]:focus, 942 | .col input[type^="time"]:focus, 943 | .col input[type^="datetime"]:focus, 944 | .col input[type^="datetime-local"]:focus, 945 | .col textarea:focus, 946 | .col select:focus, 947 | .col input[type^="text"]:active, 948 | .col input[type^="search"]:active, 949 | .col input[type^="email"]:active, 950 | .col input[type^="url"]:active, 951 | .col input[type^="password"]:active, 952 | .col input[type^="tel"]:active, 953 | .col input[type^="color"]:active, 954 | .col input[type^="number"]:active, 955 | .col input[type^="date"]:active, 956 | .col input[type^="month"]:active, 957 | .col input[type^="week"]:active, 958 | .col input[type^="time"]:active, 959 | .col input[type^="datetime"]:active, 960 | .col input[type^="datetime-local"]:active, 961 | .col textarea:active, 962 | .col select:active { 963 | color: inherit; 964 | } 965 | 966 | .col pre { 967 | color: inherit; 968 | background-color: #F3F3F3; 969 | } 970 | 971 | .col pre a:focus, 972 | .col pre a:hover, 973 | .col pre a:active { 974 | color: inherit; 975 | } 976 | 977 | .col select, 978 | .col input[type^="text"], 979 | .col input[type^="search"], 980 | .col input[type^="email"], 981 | .col input[type^="url"], 982 | .col input[type^="password"], 983 | .col input[type^="tel"], 984 | .col input[type^="color"], 985 | .col input[type^="number"], 986 | .col input[type^="date"], 987 | .col input[type^="month"], 988 | .col input[type^="week"], 989 | .col input[type^="time"], 990 | .col input[type^="datetime"], 991 | .col input[type^="datetime-local"], 992 | .col textarea { 993 | background-color: #FFFFFF; 994 | border: 1px solid #C3C3C3; 995 | } 996 | 997 | .col button:focus, 998 | .col input[type="button"]:focus, 999 | .col input[type="reset"]:focus, 1000 | .col input[type="submit"]:focus, 1001 | .col button:hover, 1002 | .col input[type="button"]:hover, 1003 | .col input[type="reset"]:hover, 1004 | .col input[type="submit"]:hover, 1005 | .col button:active, 1006 | .col input[type="button"]:active, 1007 | .col input[type="reset"]:active, 1008 | .col input[type="submit"]:active { 1009 | color: #FFFFFF; 1010 | background-color: #5F5F5F; 1011 | border: 1px solid #5F5F5F; 1012 | } 1013 | 1014 | .col button, 1015 | .col input[type="button"], 1016 | .col input[type="reset"], 1017 | .col input[type="submit"] { 1018 | color: #FFFFFF; 1019 | background-color: #373737; 1020 | border: 1px solid #373737; 1021 | } 1022 | 1023 | .col select:focus, 1024 | .col select:hover, 1025 | .col input[type^="text"]:focus, 1026 | .col input[type^="search"]:focus, 1027 | .col input[type^="email"]:focus, 1028 | .col input[type^="url"]:focus, 1029 | .col input[type^="password"]:focus, 1030 | .col input[type^="tel"]:focus, 1031 | .col input[type^="color"]:focus, 1032 | .col input[type^="number"]:focus, 1033 | .col input[type^="date"]:focus, 1034 | .col input[type^="month"]:focus, 1035 | .col input[type^="week"]:focus, 1036 | .col input[type^="time"]:focus, 1037 | .col input[type^="datetime"]:focus, 1038 | .col input[type^="datetime-local"]:focus, 1039 | .col textarea:focus, 1040 | .col select:active, 1041 | .col input[type^="text"]:active, 1042 | .col input[type^="search"]:active, 1043 | .col input[type^="email"]:active, 1044 | .col input[type^="url"]:active, 1045 | .col input[type^="password"]:active, 1046 | .col input[type^="tel"]:active, 1047 | .col input[type^="color"]:active, 1048 | .col input[type^="number"]:active, 1049 | .col input[type^="date"]:active, 1050 | .col input[type^="month"]:active, 1051 | .col input[type^="week"]:active, 1052 | .col input[type^="time"]:active, 1053 | .col input[type^="datetime"]:active, 1054 | .col input[type^="datetime-local"]:active, 1055 | .col textarea:active { 1056 | background-color: #F3F3F3; 1057 | border: 1px solid #C3C3C3; 1058 | } 1059 | 1060 | .col select:disabled, 1061 | .col input[type^="text"]:disabled, 1062 | .col input[type^="search"]:disabled, 1063 | .col input[type^="email"]:disabled, 1064 | .col input[type^="url"]:disabled, 1065 | .col input[type^="password"]:disabled, 1066 | .col input[type^="tel"]:disabled, 1067 | .col input[type^="color"]:disabled, 1068 | .col input[type^="number"]:disabled, 1069 | .col input[type^="date"]:disabled, 1070 | .col input[type^="month"]:disabled, 1071 | .col input[type^="week"]:disabled, 1072 | .col input[type^="time"]:disabled, 1073 | .col input[type^="datetime"]:disabled, 1074 | .col input[type^="datetime-local"]:disabled, 1075 | .col textarea:disabled { 1076 | background-color: #D5D5D5; 1077 | border-color: #D5D5D5; 1078 | } 1079 | 1080 | .col button:disabled, 1081 | .col input[type="button"]:disabled, 1082 | .col input[type="reset"]:disabled, 1083 | .col input[type="submit"]:disabled { 1084 | background-color: #D5D5D5; 1085 | border-color: #D5D5D5; 1086 | } 1087 | 1088 | .col table { 1089 | border: none; 1090 | border-top-width: 1px; 1091 | border-top-style: solid; 1092 | border-top-color: #C3C3C3; 1093 | border-right-width: 1px; 1094 | border-right-style: solid; 1095 | border-right-color: #C3C3C3; 1096 | border-left-width: 1px; 1097 | border-left-style: solid; 1098 | border-left-color: #C3C3C3; 1099 | } 1100 | 1101 | .col table th { 1102 | border: none; 1103 | border-bottom-width: 1px; 1104 | border-bottom-style: solid; 1105 | border-bottom-color: #C3C3C3; 1106 | } 1107 | 1108 | .col table td { 1109 | border: none; 1110 | border-bottom-width: 1px; 1111 | border-bottom-style: solid; 1112 | border-bottom-color: #C3C3C3; 1113 | } 1114 | 1115 | .col img { 1116 | background-color: inherit; 1117 | border: 0; 1118 | } 1119 | 1120 | .col hr, 1121 | .col .hr { 1122 | background-color: #C3C3C3; 1123 | border: 0; 1124 | } 1125 | 1126 | .col .highlight { 1127 | color: #D93D3D; 1128 | } 1129 | --------------------------------------------------------------------------------