API tools faq
paste
Advertisement
englishextra

elements.css

englishextra
Feb 21st, 2012
168
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.67 KB | None | 0 0
raw download clone embed print report
  1. /**
  2.  * this does not require a reset.css or normalize.css
  3.  * normally placed before
  4.  * don't use: font-size: larger/smaller; font-weight: bolder; filter:
  5.  *
  6.  * BODY FONT-SIZE 13PX
  7.  * http://riddle.pl/emcalc/
  8.  * -----------------------------------
  9.  * Pixels   EMs     Percent     Points
  10.  * 1px  0.077em
  11.  * 2px  0.154em
  12.  * 3px  0.231em
  13.  * 4px  0.308em
  14.  * 5px  0.385em
  15.  * 6px  0.462em     46.2%   5pt
  16.  * 7px  0.538em     53.8%   5pt
  17.  * 8px  0.615em     61.5%   6pt
  18.  * 9px  0.692em     69.2%   7pt
  19.  * 10px     0.769em     76.9%   8pt
  20.  * 11px     0.846em     84.6%   8pt
  21.  * 12px     0.923em     92.3%   9pt
  22.  * 13px     1em     100%    10pt
  23.  * 14px     1.077em     107.7%  11pt
  24.  * 15px     1.154em     115.4%  11pt
  25.  * 16px     1.231em     123.1%  12pt
  26.  * 17px     1.308em     130.8%  13pt
  27.  * 18px     1.385em     138.5%  14pt
  28.  * 19px     1.462em     146.2%  14pt
  29.  * 20px     1.538em     153.8%  15pt
  30.  * 21px     1.615em     161.5%  16pt
  31.  * 22px     1.692em     169.2%  17pt
  32.  * 23px     1.769em     176.9%  17pt
  33.  * 24px     1.846em     184.6%  18pt
  34.  * 25px 1.923em
  35.  * 28px 2.154em
  36.  * 29px 2.231em
  37.  * 32px 2.462em
  38.  * 36px 2.769em
  39.  * 37px 2.846em
  40.  * 38px 2.923em
  41.  * 39px 3.077em
  42.  * 40px 3em
  43.  * ----------------------------------
  44.  * MODULAR SCALE
  45.  * http://modularscale.com/scale/?px1=13&px2=11&ra1=1.5&ra2=0
  46.  * ----------------------
  47.  * 13px @ 1:1.5
  48.  * 11px @ 1:1.5
  49.  * ----------------------
  50.  * Pixels   Ems     % of 13
  51.  * 1,124.483    86.499  8,649.869
  52.  * 951.483  73.191  7,319.100
  53.  * 749.655  57.666  5,766.577
  54.  * 634.322  48.794  4,879.400
  55.  * 499.770  38.444  3,844.385
  56.  * 422.881  32.529  3,252.931
  57.  * 333.180  25.629  2,562.923
  58.  * 281.921  21.686  2,168.623
  59.  * 222.120  17.086  1,708.615
  60.  * 187.947  14.457  1,445.746
  61.  * 148.080  11.391  1,139.077
  62.  * 125.298  9.638   963.831
  63.  * 98.720   7.594   759.385
  64.  * 83.532   6.426   642.554
  65.  * 65.813   5.063   506.254
  66.  * 55.688   4.284   428.369
  67.  * 43.875   3.375   337.500
  68.  * 37.125   2.856   285.577
  69.  * 29.250   2.25    225.000
  70.  * 24.750   1.904   190.385
  71.  * 19.500   1.5     150.000
  72.  * 16.500   1.269   126.923
  73.  * 13.000   1   100.000
  74.  * 11.000   0.846   84.615
  75.  * 8.667    0.667   66.669
  76.  * 7.333    0.564   56.408
  77.  * 5.778    0.444   44.446
  78.  * 4.889    0.376   37.608
  79.  * 3.852    0.296   29.631
  80.  * 3.259    0.251   25.069
  81.  * 2.568    0.198   19.754
  82.  * 2.173    0.167   16.715
  83.  * 1.712    0.132   13.169
  84.  * 1.449    0.111   11.146
  85.  * 1.141    0.088   8.777
  86.  */
  87.  
  88.  
  89. a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
  90. body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div,
  91. dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3,
  92. h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend,
  93. li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt,
  94. ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table,
  95. tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp {
  96.     border: 0;
  97.     font-size: 100%;
  98.     margin: 0;
  99.     padding: 0;
  100. }
  101. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
  102. section, summary {
  103.     display: block;
  104. }
  105. html {
  106.     font: 100.01% sans-serif;
  107.     -ms-text-size-adjust: 100%;
  108.     -webkit-text-size-adjust: 100%;
  109. }
  110. body {
  111.     font: 13px/1.538 "Open Sans", "DejaVu Sans", sans-serif;
  112.     background: #fff;
  113.     color: #333;
  114. }
  115. html,
  116. body {
  117.     height: 100%;
  118. }
  119. [hidden] {
  120.     display: none;
  121. }
  122.  
  123.  
  124. /* ANCHORS */
  125. a {
  126.     color: #0066cd;
  127.     text-decoration: none;
  128. }
  129. a:active,
  130. a:hover {
  131.     outline: 0;
  132. }
  133. a:focus {
  134.     outline: thin dotted;
  135. }
  136. a:focus,
  137. a:hover {
  138.     color: #ce7b1f;
  139. }
  140. a:hover {
  141.     text-decoration: underline;
  142. }
  143.  
  144.  
  145. /* HEADINGS */
  146. h1 {
  147.     font-size: 284.6%;
  148.     /* line-height: 1.385; */
  149. }
  150. h1 img,
  151. h2 img,
  152. h3 img,
  153. h4 img,
  154. h5 img,
  155. h6 img {
  156.     margin: 0;
  157. }
  158. h1,
  159. h2,
  160. h3,
  161. h4,
  162. h5,
  163. h6 {
  164.     color: inherit;
  165.     font-weight: 600;
  166. }
  167. h2 {
  168.     font-size: 153.8%;
  169. }
  170. h3,
  171. h4,
  172. h5,
  173. h6 {
  174.     font-size: 130.8%;
  175. }
  176.  
  177.  
  178. /* IMAGES */
  179. img {
  180.     font-size: 0;
  181.     border: 0;
  182.     color: transparent;
  183.     vertical-align: middle;
  184.     -ms-interpolation-mode: bicubic;
  185. }
  186. svg:not(:root) {
  187.     overflow: hidden;
  188. }
  189. figure {
  190.     margin: 0;
  191. }
  192.  
  193.  
  194. /* AUDIO AND VIDEO */
  195. audio,
  196. canvas,
  197. video {
  198.     display: inline-block;
  199. }
  200. audio:not([controls]) {
  201.     display: none;
  202.     height: 0;
  203. }
  204.  
  205.  
  206. /* LISTS */
  207. dd,
  208. li {
  209.     margin-left: 2em;
  210. }
  211. dl dt {
  212.     font-size: 130.8%;
  213.     font-weight: 600;
  214. }
  215. dl,
  216. ul,
  217. ol {
  218.     margin-left: 0;
  219.     margin-right: 0;
  220.     margin-top: 0;
  221.     padding-left: 0;
  222. }
  223. li {
  224.     display: list-item;
  225. }
  226. ol {
  227.     list-style: decimal;
  228. }
  229. ul {
  230.     list-style: disc;
  231. }
  232. p {
  233.     font-weight: 400;
  234. }
  235.  
  236.  
  237. /* ADDRESS AND BLOCKQUOTE */
  238. address,
  239. blockquote {
  240.     font-style: italic;
  241.     font-weight: 400;
  242. }
  243. blockquote {
  244.     margin-left: 2em;
  245. }
  246.  
  247.  
  248. /* PRE AND SPAN */
  249. pre {
  250.     overflow: auto;
  251.     white-space: pre;
  252.     white-space: pre-wrap;
  253.     word-wrap: break-word;
  254. }
  255. pre,
  256. pre code {
  257.     border-radius: 3px;
  258.     -moz-border-radius: 3px;
  259.     -webkit-border-radius: 3px;
  260.     padding: 5px 7px;
  261. }
  262. pre,
  263. pre code,
  264. pre a {
  265.     font: 92.3% "Ubuntu Mono", "Consolas", "Menlo", "Monaco", "Lucida Console",
  266.     "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
  267.     "Courier New", monospace, serif;
  268. }
  269.  
  270.  
  271. /* INLINE TEXT FORMATTING */
  272. abbr,
  273. abbr[title],
  274. acronym {
  275.     border-bottom: 1px dotted #d1cfcf;
  276. }
  277. dfn {
  278.     font-style: italic;
  279. }
  280. em,
  281. i,
  282. cite,
  283. dfn {
  284.     font-style: italic;
  285.     font-weight: 400;
  286. }
  287. mark {
  288.     background: #f5f5f5;
  289.     color: inherit;
  290. }
  291. q {
  292.     quotes: "\201C" "\201D" "\2018" "\2019";
  293. }
  294. q:before,
  295. q:after {
  296.     content: "";
  297. }
  298. strong,
  299. b,
  300. dfn {
  301.     font-size: 123.1%;
  302.     font-weight: 600;
  303. }
  304. sub {
  305.     bottom: -.25em;
  306. }
  307. sub,
  308. sup {
  309.     line-height: 0;
  310.     position: relative;
  311.     vertical-align: baseline;
  312. }
  313. sub,
  314. sup,
  315. small {
  316.     font-size: 76.9%;
  317. }
  318. sup {
  319.     top: -.5em;
  320. }
  321. tt,
  322. kbd,
  323. samp {
  324.     font: 92.3% "Ubuntu Mono", "Consolas", "Menlo", "Monaco", "Lucida Console",
  325.     "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
  326.     "Courier New", monospace, serif;
  327. }
  328.  
  329.  
  330. /* TABLES */
  331. table {
  332.     border-collapse: collapse;
  333.     border-spacing: 0;
  334.     width: auto;
  335. }
  336. td table {
  337.     font-size: 100%;
  338.     margin-bottom: 0;
  339. }
  340. th,
  341. td {
  342.     border-collapse: collapse;
  343. }
  344. caption,
  345. th,
  346. td {
  347.     font-size: 92.3%;
  348.     font-weight: 400;
  349.     padding: 5px 7px;
  350.     text-align: left;
  351.     vertical-align: top;
  352. }
  353. caption,
  354. th,
  355. tfoot {
  356.     font-style: italic;
  357. }
  358.  
  359.  
  360. /* MARK-UP */
  361. hr {
  362.     border: 0 #D1CFCF solid;
  363.     border-top-width: 1px;
  364.     clear: both;
  365.     height: 0;
  366. }
  367.  
  368.  
  369. /* FORM */
  370. /**
  371.  * to have equal height for button, input, select:
  372.  * 1) box-sizing: border-box; (for buttons, text inputs, and select)
  373.  * 2) height: 31px; (for buttons and select)
  374.  * 3) line-height: inherit; (for buttons, text inputs, and select
  375.  * - maybe not needed)
  376.  * 4) padding: 3px 5px; (for buttons, text inputs, and select)
  377.  * 5) -webkit-appearance: none; (for select in Safari)
  378.  */
  379. button,
  380. html input[type="button"],
  381. input[type="reset"],
  382. input[type="submit"] {
  383.     cursor: pointer;
  384.     -webkit-appearance: button;
  385. }
  386. button,
  387. input,
  388. select {
  389.     box-sizing: border-box;
  390.     -moz-box-sizing: border-box;
  391.     -webkit-box-sizing: border-box;
  392.     line-height: inherit;
  393.     vertical-align: middle;
  394. }
  395. button,
  396. input,
  397. select,
  398. textarea {
  399.     margin: 0;
  400. }
  401. button,
  402. input[type="password"],
  403. input[type="text"],
  404. input[type="submit"],
  405. input[type="reset"],
  406. input[type="button"],
  407. input[type="file"] {
  408.     display: inline-block;
  409.     margin: 0 0 0 6px;
  410.     vertical-align: middle;
  411.     width: auto;
  412. }
  413. button,
  414. input[type="submit"],
  415. input[type="reset"],
  416. input[type="button"] {
  417.     background: #fcfcfc;
  418.     background: -moz-linear-gradient(top,rgba(252,252,252,1) 0%,
  419.     rgba(224,224,224,1) 100%);
  420.     background: -webkit-gradient(linear,left top,left bottom,
  421.     color-stop(0%,rgba(252,252,252,1)),color-stop(100%,rgba(224,224,224,1)));
  422.     background: -webkit-linear-gradient(top,rgba(252,252,252,1) 0%,
  423.     rgba(224,224,224,1) 100%);
  424.     background: -o-linear-gradient(top,rgba(252,252,252,1) 0%,
  425.     rgba(224,224,224,1) 100%);
  426.     background: -ms-linear-gradient(top,rgba(252,252,252,1) 0%,
  427.     rgba(224,224,224,1) 100%);
  428.     background: linear-gradient(top,rgba(252,252,252,1) 0%,
  429.     rgba(224,224,224,1) 100%);
  430.     color: inherit;
  431.     cursor: pointer;
  432.     display: inline-block;
  433.     left: 0;
  434.     overflow: visible;
  435.     position: relative;
  436.     text-decoration: none;
  437.     text-shadow: 0 1px 0 #fff;
  438.     top: 0;
  439.     vertical-align: middle;
  440.     width: auto;
  441.     zoom: 1;
  442. }
  443. button,
  444. input[type="submit"],
  445. input[type="reset"],
  446. input[type="button"],
  447. input[type="password"],
  448. input[type="text"],
  449. select {
  450.     height: 31px;
  451. }
  452. button,
  453. input[type="submit"],
  454. input[type="reset"],
  455. input[type="button"],
  456. input[type="password"],
  457. input[type="text"],
  458. select,
  459. textarea,
  460. fieldset,
  461. legend {
  462.     border: 1px solid #d1cfcf;
  463.     border-radius: 3px;
  464.     -moz-border-radius: 3px;
  465.     -webkit-border-radius: 3px;
  466.     padding: 3px 5px;
  467. }
  468. button::-moz-focus-inner,
  469. input::-moz-focus-inner {
  470.     border: 0;
  471.     padding: 0;
  472. }
  473. button:hover,
  474. input[type="submit"]:hover,
  475. input[type="reset"]:hover,
  476. input[type="button"]:hover {
  477.     background: #fcfcfc;
  478.     background: -moz-linear-gradient(top,rgba(252,252,252,1) 0%,
  479.     rgba(237,237,237,1) 100%);
  480.     background: -webkit-gradient(linear,left top,left bottom,
  481.     color-stop(0%,rgba(252,252,252,1)),color-stop(100%,rgba(237,237,237,1)));
  482.     background: -webkit-linear-gradient(top,rgba(252,252,252,1) 0%,
  483.     rgba(237,237,237,1) 100%);
  484.     background: -o-linear-gradient(top,rgba(252,252,252,1) 0%,
  485.     rgba(237,237,237,1) 100%);
  486.     background: -ms-linear-gradient(top,rgba(252,252,252,1) 0%,
  487.     rgba(237,237,237,1) 100%);
  488.     background: linear-gradient(top,rgba(252,252,252,1) 0%,
  489.     rgba(237,237,237,1) 100%);
  490. }
  491. button[disabled],
  492. input[disabled] {
  493.     cursor: default;
  494. }
  495. fieldset {
  496.     background: #f5f5f5;
  497.     border: 1px solid #d1cfcf;
  498.     left: 0;
  499.     margin-left: 0;
  500.     margin-right: 0;
  501.     margin-top: 0;
  502.     padding: 5px 7px;
  503.     position: relative;
  504.     top: 0;
  505. }
  506. fieldset p:last-child {
  507.     margin-bottom: 0;
  508. }
  509. fieldset,
  510. select,
  511. textarea,
  512. button,
  513. input {
  514.     font-family: inherit;
  515.     font-size: 100%;
  516.     font-weight: 400;
  517. }
  518. form {
  519.     margin: 0;
  520.     padding: 0;
  521. }
  522. input {
  523.     display: inline-block;
  524. }
  525. input::-moz-focus-inner {
  526.     border: 0;
  527. }
  528. input::-webkit-input-placeholder,
  529. input:-moz-placeholder {
  530.     color: #d1cfcf;
  531. }
  532. input[disabled="disabled"] {
  533.     background: #f5f5f5;
  534.     color: #999;
  535.     box-shadow: inset 0 1px 2px #ddd;
  536.     -moz-box-shadow: inset 0 0 2px #ddd;
  537.     -webkit-box-shadow: inset 0 1px 2px #ddd;
  538. }
  539. input[type="checkbox"],
  540. input[type="radio"] {
  541.     background: none;
  542.     border: 0;
  543.     display: inline-block;
  544.     margin: 0 0 0 6px;
  545.     padding: 0;
  546.     vertical-align: baseline;
  547.     width: auto;
  548.     box-sizing: border-box;
  549.     -moz-box-sizing: border-box;
  550.     -webkit-box-sizing: content-box;
  551. }
  552. input[type="file"] {
  553.     box-shadow: none;
  554.     -moz-box-shadow: none;
  555.     -webkit-box-shadow: none;
  556. }
  557. input[type="search"] {
  558.     box-sizing: content-box;
  559.     -moz-box-sizing: content-box;
  560.     -webkit-box-sizing: content-box;
  561.     -webkit-appearance: textfield;
  562. }
  563. input[type="search"]::-webkit-search-cancel-button,
  564. input[type="search"]::-webkit-search-decoration,
  565. select {
  566.     -webkit-appearance: none;
  567. }
  568. input[type="submit"] img,
  569. input[type="reset"] img,
  570. input[type="button"] img {
  571.     display: inline;
  572.     margin: 0;
  573.     padding: 0;
  574.     vertical-align: middle;
  575. }
  576. label {
  577.     display: inline-block;
  578.     font-size: 76.9%;
  579.     font-weight: 400;
  580.     margin-left: 6px;
  581.     margin-top: 0;
  582. }
  583. legend {
  584.     background: #f5f5f5;
  585.     border: 1px solid #d1cfcf;
  586.     font-family: inherit;
  587.     font-weight: 400;
  588.     margin-bottom: 0;
  589.     margin-top: 0;
  590.     padding: 3px 5px;
  591. }
  592. select,
  593. textarea {
  594.     display: inline-block;
  595.     width: auto;
  596. }
  597. textarea {
  598.     height: auto;
  599.     overflow: auto;
  600.     vertical-align: top;
  601. }
  602. textarea,
  603. input[type="text"],
  604. input[type="password"] {
  605.     background: #fff;
  606. }
  607. textarea:focus,
  608. select:focus,
  609. input[type="text"]:focus,
  610. input[type="password"]:focus {
  611.     border-color: #ce7b1f;
  612. }
  613.  
  614.  
  615. /* SHOULD BE AT THE BOTTOM */
  616. p, dl, h1, h2, h3, h4, h5, h6, hr, ol, ul, pre, pre code, table, address,
  617. fieldset, figure {
  618.     margin-bottom: 20px;
  619. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!