main.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690
  1. /*
  2. * HTML5 Boilerplate
  3. *
  4. * What follows is the result of much research on cross-browser styling.
  5. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
  6. * Kroc Camen, and the H5BP dev community and team.
  7. */
  8. html,
  9. body {
  10. height: 100%;
  11. font-family: 'Helvetica Neue', 'Microsoft Yahei', Arial, sans-serif;
  12. font-size: 16;
  13. }
  14. input,
  15. select,
  16. textarea {
  17. font-family: 'Helvetica Neue', 'Microsoft Yahei', Arial, sans-serif;
  18. }
  19. html,
  20. body {
  21. height: 100%;
  22. }
  23. ul {
  24. list-style: none;
  25. }
  26. a {
  27. text-decoration: none;
  28. }
  29. /*! normalize.css v1.1.2 | MIT License | git.io/normalize */
  30. /* ==========================================================================
  31. HTML5 display definitions
  32. ========================================================================== */
  33. /**
  34. * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
  35. */
  36. article,
  37. aside,
  38. details,
  39. figcaption,
  40. figure,
  41. footer,
  42. header,
  43. hgroup,
  44. main,
  45. nav,
  46. section,
  47. summary {
  48. display: block;
  49. }
  50. /**
  51. * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
  52. */
  53. audio,
  54. canvas,
  55. video {
  56. display: inline-block;
  57. *display: inline;
  58. *zoom: 1;
  59. }
  60. /**
  61. * Prevent modern browsers from displaying `audio` without controls.
  62. * Remove excess height in iOS 5 devices.
  63. */
  64. audio:not([controls]) {
  65. display: none;
  66. height: 0;
  67. }
  68. /**
  69. * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
  70. * Known issue: no IE 6 support.
  71. */
  72. [hidden] {
  73. display: none;
  74. }
  75. /* ==========================================================================
  76. Base
  77. ========================================================================== */
  78. /**
  79. * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
  80. * `em` units.
  81. * 2. Prevent iOS text size adjust after orientation change, without disabling
  82. * user zoom.
  83. */
  84. html {
  85. font-size: 100%;
  86. /* 1 */
  87. -ms-text-size-adjust: 100%;
  88. /* 2 */
  89. -webkit-text-size-adjust: 100%;
  90. /* 2 */
  91. }
  92. /**
  93. * Address `font-family` inconsistency between `textarea` and other form
  94. * elements.
  95. */
  96. html,
  97. button,
  98. input,
  99. select,
  100. textarea {
  101. font-family: 'Helvetica Neue', 'Microsoft Yahei', Arial, sans-serif;
  102. }
  103. /**
  104. * Address margins handled incorrectly in IE 6/7.
  105. */
  106. body {
  107. margin: 0;
  108. }
  109. /* ==========================================================================
  110. Links
  111. ========================================================================== */
  112. /**
  113. * Address `outline` inconsistency between Chrome and other browsers.
  114. */
  115. a:focus {
  116. outline: thin dotted;
  117. }
  118. /**
  119. * Improve readability when focused and also mouse hovered in all browsers.
  120. */
  121. a:active,
  122. a:hover {
  123. outline: 0;
  124. }
  125. /* ==========================================================================
  126. Typography
  127. ========================================================================== */
  128. /**
  129. * Address font sizes and margins set differently in IE 6/7.
  130. * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
  131. * and Chrome.
  132. */
  133. h1 {
  134. font-size: 2em;
  135. margin: 0.67em 0;
  136. }
  137. h2 {
  138. font-size: 1.5em;
  139. margin: 0.83em 0;
  140. }
  141. h3 {
  142. font-size: 1.17em;
  143. margin: 1em 0;
  144. }
  145. h4 {
  146. font-size: 1em;
  147. margin: 1.33em 0;
  148. }
  149. h5 {
  150. font-size: 0.83em;
  151. margin: 1.67em 0;
  152. }
  153. h6 {
  154. font-size: 0.67em;
  155. margin: 2.33em 0;
  156. }
  157. h1,
  158. h2,
  159. h3,
  160. h4,
  161. h5,
  162. h6 {
  163. font-family: 'Helvetica Neue', 'Microsoft Yahei', Arial, 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
  164. }
  165. /**
  166. * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
  167. */
  168. abbr[title] {
  169. border-bottom: 1px dotted;
  170. }
  171. /**
  172. * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
  173. */
  174. b,
  175. strong {
  176. font-weight: bold;
  177. }
  178. blockquote {
  179. margin: 1em 40px;
  180. }
  181. /**
  182. * Address styling not present in Safari 5 and Chrome.
  183. */
  184. dfn {
  185. font-style: italic;
  186. }
  187. /**
  188. * Address differences between Firefox and other browsers.
  189. * Known issue: no IE 6/7 normalization.
  190. */
  191. hr {
  192. -moz-box-sizing: content-box;
  193. box-sizing: content-box;
  194. height: 0;
  195. }
  196. /**
  197. * Address styling not present in IE 6/7/8/9.
  198. */
  199. mark {
  200. background: #ff0;
  201. color: #000;
  202. }
  203. /**
  204. * Address margins set differently in IE 6/7.
  205. */
  206. p,
  207. pre {
  208. margin: 1em 0;
  209. }
  210. /**
  211. * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
  212. */
  213. code,
  214. kbd,
  215. pre,
  216. samp {
  217. font-family: monospace, serif;
  218. _font-family: 'courier new', monospace;
  219. font-size: 1em;
  220. }
  221. /**
  222. * Improve readability of pre-formatted text in all browsers.
  223. */
  224. pre {
  225. white-space: pre;
  226. white-space: pre-wrap;
  227. word-wrap: break-word;
  228. }
  229. /**
  230. * Address CSS quotes not supported in IE 6/7.
  231. */
  232. q {
  233. quotes: none;
  234. }
  235. /**
  236. * Address `quotes` property not supported in Safari 4.
  237. */
  238. q:before,
  239. q:after {
  240. content: '';
  241. content: none;
  242. }
  243. /**
  244. * Address inconsistent and variable font size in all browsers.
  245. */
  246. small {
  247. font-size: 80%;
  248. }
  249. /**
  250. * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  251. */
  252. sub,
  253. sup {
  254. font-size: 75%;
  255. line-height: 0;
  256. position: relative;
  257. vertical-align: baseline;
  258. }
  259. sup {
  260. top: -0.5em;
  261. }
  262. sub {
  263. bottom: -0.25em;
  264. }
  265. /* ==========================================================================
  266. Lists
  267. ========================================================================== */
  268. /**
  269. * Address margins set differently in IE 6/7.
  270. */
  271. dl,
  272. menu,
  273. ol,
  274. ul {
  275. margin: 1em 0;
  276. }
  277. dd {
  278. margin: 0 0 0 40px;
  279. }
  280. /**
  281. * Address paddings set differently in IE 6/7.
  282. */
  283. menu,
  284. ol,
  285. ul {
  286. padding: 0 0 0 40px;
  287. }
  288. /**
  289. * Correct list images handled incorrectly in IE 7.
  290. */
  291. nav ul,
  292. nav ol {
  293. list-style: none;
  294. list-style-image: none;
  295. }
  296. /* ==========================================================================
  297. Embedded content
  298. ========================================================================== */
  299. /**
  300. * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
  301. * 2. Improve image quality when scaled in IE 7.
  302. */
  303. img {
  304. border: 0;
  305. /* 1 */
  306. -ms-interpolation-mode: bicubic;
  307. /* 2 */
  308. }
  309. /**
  310. * Correct overflow displayed oddly in IE 9.
  311. */
  312. svg:not(:root) {
  313. overflow: hidden;
  314. }
  315. /* ==========================================================================
  316. Figures
  317. ========================================================================== */
  318. /**
  319. * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
  320. */
  321. figure {
  322. margin: 0;
  323. }
  324. /* ==========================================================================
  325. Forms
  326. ========================================================================== */
  327. /**
  328. * Correct margin displayed oddly in IE 6/7.
  329. */
  330. form {
  331. margin: 0;
  332. }
  333. /**
  334. * Define consistent border, margin, and padding.
  335. */
  336. fieldset {
  337. border: 1px solid #c0c0c0;
  338. margin: 0 2px;
  339. padding: 0.35em 0.625em 0.75em;
  340. }
  341. /**
  342. * 1. Correct color not being inherited in IE 6/7/8/9.
  343. * 2. Correct text not wrapping in Firefox 3.
  344. * 3. Correct alignment displayed oddly in IE 6/7.
  345. */
  346. legend {
  347. border: 0;
  348. /* 1 */
  349. padding: 0;
  350. white-space: normal;
  351. /* 2 */
  352. *margin-left: -7px;
  353. /* 3 */
  354. }
  355. /**
  356. * 1. Correct font size not being inherited in all browsers.
  357. * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
  358. * and Chrome.
  359. * 3. Improve appearance and consistency in all browsers.
  360. */
  361. button,
  362. input,
  363. select,
  364. textarea {
  365. font-size: 100%;
  366. /* 1 */
  367. margin: 0;
  368. /* 2 */
  369. vertical-align: baseline;
  370. /* 3 */
  371. *vertical-align: middle;
  372. /* 3 */
  373. }
  374. /**
  375. * Address Firefox 3+ setting `line-height` on `input` using `!important` in
  376. * the UA stylesheet.
  377. */
  378. button,
  379. input {
  380. line-height: normal;
  381. }
  382. /**
  383. * Address inconsistent `text-transform` inheritance for `button` and `select`.
  384. * All other form control elements do not inherit `text-transform` values.
  385. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
  386. * Correct `select` style inheritance in Firefox 4+ and Opera.
  387. */
  388. button,
  389. select {
  390. text-transform: none;
  391. }
  392. /**
  393. * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  394. * and `video` controls.
  395. * 2. Correct inability to style clickable `input` types in iOS.
  396. * 3. Improve usability and consistency of cursor style between image-type
  397. * `input` and others.
  398. * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
  399. * Known issue: inner spacing remains in IE 6.
  400. */
  401. button,
  402. html input[type="button"],
  403. input[type="reset"],
  404. input[type="submit"] {
  405. -webkit-appearance: button;
  406. /* 2 */
  407. cursor: pointer;
  408. /* 3 */
  409. *overflow: visible;
  410. /* 4 */
  411. }
  412. /**
  413. * Re-set default cursor for disabled elements.
  414. */
  415. button[disabled],
  416. html input[disabled] {
  417. cursor: default;
  418. }
  419. /**
  420. * 1. Address box sizing set to content-box in IE 8/9.
  421. * 2. Remove excess padding in IE 8/9.
  422. * 3. Remove excess padding in IE 7.
  423. * Known issue: excess padding remains in IE 6.
  424. */
  425. input[type="checkbox"],
  426. input[type="radio"] {
  427. box-sizing: border-box;
  428. /* 1 */
  429. padding: 0;
  430. /* 2 */
  431. *height: 13px;
  432. /* 3 */
  433. *width: 13px;
  434. /* 3 */
  435. }
  436. /**
  437. * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
  438. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
  439. * (include `-moz` to future-proof).
  440. */
  441. input[type="search"] {
  442. -webkit-appearance: textfield;
  443. /* 1 */
  444. -moz-box-sizing: content-box;
  445. -webkit-box-sizing: content-box;
  446. /* 2 */
  447. box-sizing: content-box;
  448. }
  449. /**
  450. * Remove inner padding and search cancel button in Safari 5 and Chrome
  451. * on OS X.
  452. */
  453. input[type="search"]::-webkit-search-cancel-button,
  454. input[type="search"]::-webkit-search-decoration {
  455. -webkit-appearance: none;
  456. }
  457. /**
  458. * Remove inner padding and border in Firefox 3+.
  459. */
  460. button::-moz-focus-inner,
  461. input::-moz-focus-inner {
  462. border: 0;
  463. padding: 0;
  464. }
  465. /**
  466. * 1. Remove default vertical scrollbar in IE 6/7/8/9.
  467. * 2. Improve readability and alignment in all browsers.
  468. */
  469. textarea {
  470. overflow: auto;
  471. /* 1 */
  472. vertical-align: top;
  473. /* 2 */
  474. }
  475. /* ==========================================================================
  476. Tables
  477. ========================================================================== */
  478. /**
  479. * Remove most spacing between table cells.
  480. */
  481. table {
  482. border-collapse: collapse;
  483. border-spacing: 0;
  484. }
  485. /* ==========================================================================
  486. Base styles: opinionated defaults
  487. ========================================================================== */
  488. html,
  489. button,
  490. input,
  491. select,
  492. textarea {
  493. color: #222;
  494. }
  495. body {
  496. font-size: 1em;
  497. line-height: 1.4;
  498. }
  499. /*
  500. * Remove text-shadow in selection highlight: h5bp.com/i
  501. * These selection rule sets have to be separate.
  502. * Customize the background color to match your design.
  503. */
  504. ::-moz-selection {
  505. background: #b3d4fc;
  506. text-shadow: none;
  507. }
  508. ::selection {
  509. background: #b3d4fc;
  510. text-shadow: none;
  511. }
  512. /*
  513. * A better looking default horizontal rule
  514. */
  515. hr {
  516. display: block;
  517. height: 1px;
  518. border: 0;
  519. border-top: 1px solid #ccc;
  520. margin: 1em 0;
  521. padding: 0;
  522. }
  523. /*
  524. * Remove the gap between images, videos, audio and canvas and the bottom of
  525. * their containers: h5bp.com/i/440
  526. */
  527. audio,
  528. canvas,
  529. img,
  530. video {
  531. vertical-align: middle;
  532. }
  533. /*
  534. * Remove default fieldset styles.
  535. */
  536. fieldset {
  537. border: 0;
  538. margin: 0;
  539. padding: 0;
  540. }
  541. /*
  542. * Allow only vertical resizing of textareas.
  543. */
  544. textarea {
  545. resize: vertical;
  546. }
  547. /* ==========================================================================
  548. Browse Happy prompt
  549. ========================================================================== */
  550. /* ==========================================================================
  551. Helper classes
  552. ========================================================================== */
  553. .dis-box {
  554. display: box;
  555. display: -moz-box;
  556. display: -webkit-box;
  557. }
  558. /*
  559. * Image replacement
  560. */
  561. .ir {
  562. background-color: transparent;
  563. border: 0;
  564. overflow: hidden;
  565. /* IE 6/7 fallback */
  566. *text-indent: -9999px;
  567. }
  568. .ir:before {
  569. content: "";
  570. display: block;
  571. width: 0;
  572. height: 150%;
  573. }
  574. /*
  575. * Hide from both screenreaders and browsers: h5bp.com/u
  576. */
  577. .show {
  578. display: block !important;
  579. visibility: visible;
  580. }
  581. .hidden {
  582. display: none !important;
  583. visibility: hidden;
  584. }
  585. /*
  586. * Hide only visually, but have it available for screenreaders: h5bp.com/v
  587. */
  588. .visuallyhidden {
  589. border: 0;
  590. clip: rect(0 0 0 0);
  591. height: 1px;
  592. margin: -1px;
  593. overflow: hidden;
  594. padding: 0;
  595. position: absolute;
  596. width: 1px;
  597. }
  598. /*
  599. * Extends the .visuallyhidden class to allow the element to be focusable
  600. * when navigated to via the keyboard: h5bp.com/p
  601. */
  602. .visuallyhidden.focusable:active,
  603. .visuallyhidden.focusable:focus {
  604. clip: auto;
  605. height: auto;
  606. margin: 0;
  607. overflow: visible;
  608. position: static;
  609. width: auto;
  610. }
  611. /*
  612. * Hide visually and from screenreaders, but maintain layout
  613. */
  614. .invisible {
  615. visibility: hidden;
  616. }
  617. /*
  618. * Clearfix: contain floats
  619. *
  620. * For modern browsers
  621. * 1. The space content is one way to avoid an Opera bug when the
  622. * `contenteditable` attribute is included anywhere else in the document.
  623. * Otherwise it causes space to appear at the top and bottom of elements
  624. * that receive the `clearfix` class.
  625. * 2. The use of `table` rather than `block` is only necessary if using
  626. * `:before` to contain the top-margins of child elements.
  627. */
  628. .clearfix:before,
  629. .clearfix:after {
  630. content: " ";
  631. /* 1 */
  632. display: table;
  633. /* 2 */
  634. }
  635. .clearfix:after {
  636. clear: both;
  637. }
  638. /*
  639. * For IE 6/7 only
  640. * Include this rule to trigger hasLayout and contain floats.
  641. */
  642. .clearfix {
  643. *zoom: 1;
  644. }
  645. /* ==========================================================================
  646. EXAMPLE Media Queries for Responsive Design.
  647. These examples override the primary ('mobile first') styles.
  648. Modify as content requires.
  649. ========================================================================== */
  650. /* ==========================================================================
  651. Print styles.
  652. Inlined to avoid required HTTP connection: h5bp.com/r
  653. ========================================================================== */
  654. /* ==========================================================================
  655. Author's custom styles
  656. ========================================================================== */
  657. canvas {
  658. width: 100%;
  659. height: 100%;
  660. }
  661. .mubu {
  662. width: 100%;
  663. height: 100%;
  664. }
  665. #loading {
  666. display: none;
  667. position: absolute;
  668. top: 0px;
  669. left: 0px;
  670. width: 100%;
  671. height: 100%;
  672. }
  673. #loading .text {
  674. position: absolute;
  675. top: 50%;
  676. left: 50%;
  677. width: 200px;
  678. height: 40px;
  679. margin: -20px 0px 0px -100px;
  680. text-align: center;
  681. }
  682. @media (min-width: 1024px) {
  683. /* Style adjustments for viewports that meet the condition */
  684. .mubu {
  685. width: 640px;
  686. height: auto;
  687. margin: 0 auto;
  688. padding: 0px;
  689. }
  690. }