player.css 13 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045
  1. body {
  2. font-family: 'Source Sans Pro', sans-serif;
  3. }
  4. h1 {
  5. text-align: center;
  6. }
  7. textarea,
  8. button {
  9. font-size: 14px;
  10. }
  11. textarea {
  12. box-sizing: border-box;
  13. font: 14px/1.25em Menlo, Monaco, 'Courier New', monospace;
  14. width: 100%;
  15. padding: 10px;
  16. max-width: 900px;
  17. height: 200px;
  18. }
  19. button {
  20. padding: 10px 50px;
  21. font-size: 20px;
  22. }
  23. label {
  24. display: block;
  25. }
  26. input[type=number] {
  27. width: 55px;
  28. }
  29. .text-center {
  30. text-align: center;
  31. }
  32. /* ============================================ */
  33. /* This file has a mobile-to-desktop breakpoint */
  34. /* ============================================ */
  35. @media screen and (max-width: 400px) {
  36. @-ms-viewport {
  37. width: 320px;
  38. }
  39. }
  40. .clear {
  41. clear: both;
  42. display: block;
  43. overflow: hidden;
  44. visibility: hidden;
  45. width: 0;
  46. height: 0;
  47. }
  48. .grid-container:before, .clearfix:before,
  49. .grid-container:after,
  50. .clearfix:after {
  51. content: ".";
  52. display: block;
  53. overflow: hidden;
  54. visibility: hidden;
  55. font-size: 0;
  56. line-height: 0;
  57. width: 0;
  58. height: 0;
  59. }
  60. .grid-container:after, .clearfix:after {
  61. clear: both;
  62. }
  63. .grid-container {
  64. margin-left: auto;
  65. margin-right: auto;
  66. max-width: 1200px;
  67. padding-left: 10px;
  68. padding-right: 10px;
  69. }
  70. .grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 {
  71. -moz-box-sizing: border-box;
  72. -webkit-box-sizing: border-box;
  73. box-sizing: border-box;
  74. padding-left: 10px;
  75. padding-right: 10px;
  76. }
  77. .grid-parent {
  78. padding-left: 0;
  79. padding-right: 0;
  80. }
  81. @media screen and (max-width: 767px) {
  82. .mobile-grid-100:before,
  83. .mobile-grid-100:after {
  84. content: ".";
  85. display: block;
  86. overflow: hidden;
  87. visibility: hidden;
  88. font-size: 0;
  89. line-height: 0;
  90. width: 0;
  91. height: 0;
  92. }
  93. .mobile-grid-100:after {
  94. clear: both;
  95. }
  96. .mobile-push-5, .mobile-pull-5, .mobile-push-10, .mobile-pull-10, .mobile-push-15, .mobile-pull-15, .mobile-push-20, .mobile-pull-20, .mobile-push-25, .mobile-pull-25, .mobile-push-30, .mobile-pull-30, .mobile-push-35, .mobile-pull-35, .mobile-push-40, .mobile-pull-40, .mobile-push-45, .mobile-pull-45, .mobile-push-50, .mobile-pull-50, .mobile-push-55, .mobile-pull-55, .mobile-push-60, .mobile-pull-60, .mobile-push-65, .mobile-pull-65, .mobile-push-70, .mobile-pull-70, .mobile-push-75, .mobile-pull-75, .mobile-push-80, .mobile-pull-80, .mobile-push-85, .mobile-pull-85, .mobile-push-90, .mobile-pull-90, .mobile-push-95, .mobile-pull-95, .mobile-push-33, .mobile-pull-33, .mobile-push-66, .mobile-pull-66 {
  97. position: relative;
  98. }
  99. .hide-on-mobile {
  100. display: none !important;
  101. }
  102. .mobile-grid-5 {
  103. float: left;
  104. width: 5%;
  105. }
  106. .mobile-prefix-5 {
  107. margin-left: 5%;
  108. }
  109. .mobile-suffix-5 {
  110. margin-right: 5%;
  111. }
  112. .mobile-push-5 {
  113. left: 5%;
  114. }
  115. .mobile-pull-5 {
  116. left: -5%;
  117. }
  118. .mobile-grid-10 {
  119. float: left;
  120. width: 10%;
  121. }
  122. .mobile-prefix-10 {
  123. margin-left: 10%;
  124. }
  125. .mobile-suffix-10 {
  126. margin-right: 10%;
  127. }
  128. .mobile-push-10 {
  129. left: 10%;
  130. }
  131. .mobile-pull-10 {
  132. left: -10%;
  133. }
  134. .mobile-grid-15 {
  135. float: left;
  136. width: 15%;
  137. }
  138. .mobile-prefix-15 {
  139. margin-left: 15%;
  140. }
  141. .mobile-suffix-15 {
  142. margin-right: 15%;
  143. }
  144. .mobile-push-15 {
  145. left: 15%;
  146. }
  147. .mobile-pull-15 {
  148. left: -15%;
  149. }
  150. .mobile-grid-20 {
  151. float: left;
  152. width: 20%;
  153. }
  154. .mobile-prefix-20 {
  155. margin-left: 20%;
  156. }
  157. .mobile-suffix-20 {
  158. margin-right: 20%;
  159. }
  160. .mobile-push-20 {
  161. left: 20%;
  162. }
  163. .mobile-pull-20 {
  164. left: -20%;
  165. }
  166. .mobile-grid-25 {
  167. float: left;
  168. width: 25%;
  169. }
  170. .mobile-prefix-25 {
  171. margin-left: 25%;
  172. }
  173. .mobile-suffix-25 {
  174. margin-right: 25%;
  175. }
  176. .mobile-push-25 {
  177. left: 25%;
  178. }
  179. .mobile-pull-25 {
  180. left: -25%;
  181. }
  182. .mobile-grid-30 {
  183. float: left;
  184. width: 30%;
  185. }
  186. .mobile-prefix-30 {
  187. margin-left: 30%;
  188. }
  189. .mobile-suffix-30 {
  190. margin-right: 30%;
  191. }
  192. .mobile-push-30 {
  193. left: 30%;
  194. }
  195. .mobile-pull-30 {
  196. left: -30%;
  197. }
  198. .mobile-grid-35 {
  199. float: left;
  200. width: 35%;
  201. }
  202. .mobile-prefix-35 {
  203. margin-left: 35%;
  204. }
  205. .mobile-suffix-35 {
  206. margin-right: 35%;
  207. }
  208. .mobile-push-35 {
  209. left: 35%;
  210. }
  211. .mobile-pull-35 {
  212. left: -35%;
  213. }
  214. .mobile-grid-40 {
  215. float: left;
  216. width: 40%;
  217. }
  218. .mobile-prefix-40 {
  219. margin-left: 40%;
  220. }
  221. .mobile-suffix-40 {
  222. margin-right: 40%;
  223. }
  224. .mobile-push-40 {
  225. left: 40%;
  226. }
  227. .mobile-pull-40 {
  228. left: -40%;
  229. }
  230. .mobile-grid-45 {
  231. float: left;
  232. width: 45%;
  233. }
  234. .mobile-prefix-45 {
  235. margin-left: 45%;
  236. }
  237. .mobile-suffix-45 {
  238. margin-right: 45%;
  239. }
  240. .mobile-push-45 {
  241. left: 45%;
  242. }
  243. .mobile-pull-45 {
  244. left: -45%;
  245. }
  246. .mobile-grid-50 {
  247. float: left;
  248. width: 50%;
  249. }
  250. .mobile-prefix-50 {
  251. margin-left: 50%;
  252. }
  253. .mobile-suffix-50 {
  254. margin-right: 50%;
  255. }
  256. .mobile-push-50 {
  257. left: 50%;
  258. }
  259. .mobile-pull-50 {
  260. left: -50%;
  261. }
  262. .mobile-grid-55 {
  263. float: left;
  264. width: 55%;
  265. }
  266. .mobile-prefix-55 {
  267. margin-left: 55%;
  268. }
  269. .mobile-suffix-55 {
  270. margin-right: 55%;
  271. }
  272. .mobile-push-55 {
  273. left: 55%;
  274. }
  275. .mobile-pull-55 {
  276. left: -55%;
  277. }
  278. .mobile-grid-60 {
  279. float: left;
  280. width: 60%;
  281. }
  282. .mobile-prefix-60 {
  283. margin-left: 60%;
  284. }
  285. .mobile-suffix-60 {
  286. margin-right: 60%;
  287. }
  288. .mobile-push-60 {
  289. left: 60%;
  290. }
  291. .mobile-pull-60 {
  292. left: -60%;
  293. }
  294. .mobile-grid-65 {
  295. float: left;
  296. width: 65%;
  297. }
  298. .mobile-prefix-65 {
  299. margin-left: 65%;
  300. }
  301. .mobile-suffix-65 {
  302. margin-right: 65%;
  303. }
  304. .mobile-push-65 {
  305. left: 65%;
  306. }
  307. .mobile-pull-65 {
  308. left: -65%;
  309. }
  310. .mobile-grid-70 {
  311. float: left;
  312. width: 70%;
  313. }
  314. .mobile-prefix-70 {
  315. margin-left: 70%;
  316. }
  317. .mobile-suffix-70 {
  318. margin-right: 70%;
  319. }
  320. .mobile-push-70 {
  321. left: 70%;
  322. }
  323. .mobile-pull-70 {
  324. left: -70%;
  325. }
  326. .mobile-grid-75 {
  327. float: left;
  328. width: 75%;
  329. }
  330. .mobile-prefix-75 {
  331. margin-left: 75%;
  332. }
  333. .mobile-suffix-75 {
  334. margin-right: 75%;
  335. }
  336. .mobile-push-75 {
  337. left: 75%;
  338. }
  339. .mobile-pull-75 {
  340. left: -75%;
  341. }
  342. .mobile-grid-80 {
  343. float: left;
  344. width: 80%;
  345. }
  346. .mobile-prefix-80 {
  347. margin-left: 80%;
  348. }
  349. .mobile-suffix-80 {
  350. margin-right: 80%;
  351. }
  352. .mobile-push-80 {
  353. left: 80%;
  354. }
  355. .mobile-pull-80 {
  356. left: -80%;
  357. }
  358. .mobile-grid-85 {
  359. float: left;
  360. width: 85%;
  361. }
  362. .mobile-prefix-85 {
  363. margin-left: 85%;
  364. }
  365. .mobile-suffix-85 {
  366. margin-right: 85%;
  367. }
  368. .mobile-push-85 {
  369. left: 85%;
  370. }
  371. .mobile-pull-85 {
  372. left: -85%;
  373. }
  374. .mobile-grid-90 {
  375. float: left;
  376. width: 90%;
  377. }
  378. .mobile-prefix-90 {
  379. margin-left: 90%;
  380. }
  381. .mobile-suffix-90 {
  382. margin-right: 90%;
  383. }
  384. .mobile-push-90 {
  385. left: 90%;
  386. }
  387. .mobile-pull-90 {
  388. left: -90%;
  389. }
  390. .mobile-grid-95 {
  391. float: left;
  392. width: 95%;
  393. }
  394. .mobile-prefix-95 {
  395. margin-left: 95%;
  396. }
  397. .mobile-suffix-95 {
  398. margin-right: 95%;
  399. }
  400. .mobile-push-95 {
  401. left: 95%;
  402. }
  403. .mobile-pull-95 {
  404. left: -95%;
  405. }
  406. .mobile-grid-33 {
  407. float: left;
  408. width: 33.33333%;
  409. }
  410. .mobile-prefix-33 {
  411. margin-left: 33.33333%;
  412. }
  413. .mobile-suffix-33 {
  414. margin-right: 33.33333%;
  415. }
  416. .mobile-push-33 {
  417. left: 33.33333%;
  418. }
  419. .mobile-pull-33 {
  420. left: -33.33333%;
  421. }
  422. .mobile-grid-66 {
  423. float: left;
  424. width: 66.66667%;
  425. }
  426. .mobile-prefix-66 {
  427. margin-left: 66.66667%;
  428. }
  429. .mobile-suffix-66 {
  430. margin-right: 66.66667%;
  431. }
  432. .mobile-push-66 {
  433. left: 66.66667%;
  434. }
  435. .mobile-pull-66 {
  436. left: -66.66667%;
  437. }
  438. .mobile-grid-100 {
  439. clear: both;
  440. width: 100%;
  441. }
  442. }
  443. @media screen and (min-width: 768px) {
  444. .grid-100:before,
  445. .grid-100:after {
  446. content: ".";
  447. display: block;
  448. overflow: hidden;
  449. visibility: hidden;
  450. font-size: 0;
  451. line-height: 0;
  452. width: 0;
  453. height: 0;
  454. }
  455. .grid-100:after {
  456. clear: both;
  457. }
  458. .push-5, .pull-5, .push-10, .pull-10, .push-15, .pull-15, .push-20, .pull-20, .push-25, .pull-25, .push-30, .pull-30, .push-35, .pull-35, .push-40, .pull-40, .push-45, .pull-45, .push-50, .pull-50, .push-55, .pull-55, .push-60, .pull-60, .push-65, .pull-65, .push-70, .pull-70, .push-75, .pull-75, .push-80, .pull-80, .push-85, .pull-85, .push-90, .pull-90, .push-95, .pull-95, .push-33, .pull-33, .push-66, .pull-66 {
  459. position: relative;
  460. }
  461. .hide-on-desktop {
  462. display: none !important;
  463. }
  464. .grid-5 {
  465. float: left;
  466. width: 5%;
  467. }
  468. .prefix-5 {
  469. margin-left: 5%;
  470. }
  471. .suffix-5 {
  472. margin-right: 5%;
  473. }
  474. .push-5 {
  475. left: 5%;
  476. }
  477. .pull-5 {
  478. left: -5%;
  479. }
  480. .grid-10 {
  481. float: left;
  482. width: 10%;
  483. }
  484. .prefix-10 {
  485. margin-left: 10%;
  486. }
  487. .suffix-10 {
  488. margin-right: 10%;
  489. }
  490. .push-10 {
  491. left: 10%;
  492. }
  493. .pull-10 {
  494. left: -10%;
  495. }
  496. .grid-15 {
  497. float: left;
  498. width: 15%;
  499. }
  500. .prefix-15 {
  501. margin-left: 15%;
  502. }
  503. .suffix-15 {
  504. margin-right: 15%;
  505. }
  506. .push-15 {
  507. left: 15%;
  508. }
  509. .pull-15 {
  510. left: -15%;
  511. }
  512. .grid-20 {
  513. float: left;
  514. width: 20%;
  515. }
  516. .prefix-20 {
  517. margin-left: 20%;
  518. }
  519. .suffix-20 {
  520. margin-right: 20%;
  521. }
  522. .push-20 {
  523. left: 20%;
  524. }
  525. .pull-20 {
  526. left: -20%;
  527. }
  528. .grid-25 {
  529. float: left;
  530. width: 25%;
  531. }
  532. .prefix-25 {
  533. margin-left: 25%;
  534. }
  535. .suffix-25 {
  536. margin-right: 25%;
  537. }
  538. .push-25 {
  539. left: 25%;
  540. }
  541. .pull-25 {
  542. left: -25%;
  543. }
  544. .grid-30 {
  545. float: left;
  546. width: 30%;
  547. }
  548. .prefix-30 {
  549. margin-left: 30%;
  550. }
  551. .suffix-30 {
  552. margin-right: 30%;
  553. }
  554. .push-30 {
  555. left: 30%;
  556. }
  557. .pull-30 {
  558. left: -30%;
  559. }
  560. .grid-35 {
  561. float: left;
  562. width: 35%;
  563. }
  564. .prefix-35 {
  565. margin-left: 35%;
  566. }
  567. .suffix-35 {
  568. margin-right: 35%;
  569. }
  570. .push-35 {
  571. left: 35%;
  572. }
  573. .pull-35 {
  574. left: -35%;
  575. }
  576. .grid-40 {
  577. float: left;
  578. width: 40%;
  579. }
  580. .prefix-40 {
  581. margin-left: 40%;
  582. }
  583. .suffix-40 {
  584. margin-right: 40%;
  585. }
  586. .push-40 {
  587. left: 40%;
  588. }
  589. .pull-40 {
  590. left: -40%;
  591. }
  592. .grid-45 {
  593. float: left;
  594. width: 45%;
  595. }
  596. .prefix-45 {
  597. margin-left: 45%;
  598. }
  599. .suffix-45 {
  600. margin-right: 45%;
  601. }
  602. .push-45 {
  603. left: 45%;
  604. }
  605. .pull-45 {
  606. left: -45%;
  607. }
  608. .grid-50 {
  609. float: left;
  610. width: 50%;
  611. }
  612. .prefix-50 {
  613. margin-left: 50%;
  614. }
  615. .suffix-50 {
  616. margin-right: 50%;
  617. }
  618. .push-50 {
  619. left: 50%;
  620. }
  621. .pull-50 {
  622. left: -50%;
  623. }
  624. .grid-55 {
  625. float: left;
  626. width: 55%;
  627. }
  628. .prefix-55 {
  629. margin-left: 55%;
  630. }
  631. .suffix-55 {
  632. margin-right: 55%;
  633. }
  634. .push-55 {
  635. left: 55%;
  636. }
  637. .pull-55 {
  638. left: -55%;
  639. }
  640. .grid-60 {
  641. float: left;
  642. width: 60%;
  643. }
  644. .prefix-60 {
  645. margin-left: 60%;
  646. }
  647. .suffix-60 {
  648. margin-right: 60%;
  649. }
  650. .push-60 {
  651. left: 60%;
  652. }
  653. .pull-60 {
  654. left: -60%;
  655. }
  656. .grid-65 {
  657. float: left;
  658. width: 65%;
  659. }
  660. .prefix-65 {
  661. margin-left: 65%;
  662. }
  663. .suffix-65 {
  664. margin-right: 65%;
  665. }
  666. .push-65 {
  667. left: 65%;
  668. }
  669. .pull-65 {
  670. left: -65%;
  671. }
  672. .grid-70 {
  673. float: left;
  674. width: 70%;
  675. }
  676. .prefix-70 {
  677. margin-left: 70%;
  678. }
  679. .suffix-70 {
  680. margin-right: 70%;
  681. }
  682. .push-70 {
  683. left: 70%;
  684. }
  685. .pull-70 {
  686. left: -70%;
  687. }
  688. .grid-75 {
  689. float: left;
  690. width: 75%;
  691. }
  692. .prefix-75 {
  693. margin-left: 75%;
  694. }
  695. .suffix-75 {
  696. margin-right: 75%;
  697. }
  698. .push-75 {
  699. left: 75%;
  700. }
  701. .pull-75 {
  702. left: -75%;
  703. }
  704. .grid-80 {
  705. float: left;
  706. width: 80%;
  707. }
  708. .prefix-80 {
  709. margin-left: 80%;
  710. }
  711. .suffix-80 {
  712. margin-right: 80%;
  713. }
  714. .push-80 {
  715. left: 80%;
  716. }
  717. .pull-80 {
  718. left: -80%;
  719. }
  720. .grid-85 {
  721. float: left;
  722. width: 85%;
  723. }
  724. .prefix-85 {
  725. margin-left: 85%;
  726. }
  727. .suffix-85 {
  728. margin-right: 85%;
  729. }
  730. .push-85 {
  731. left: 85%;
  732. }
  733. .pull-85 {
  734. left: -85%;
  735. }
  736. .grid-90 {
  737. float: left;
  738. width: 90%;
  739. }
  740. .prefix-90 {
  741. margin-left: 90%;
  742. }
  743. .suffix-90 {
  744. margin-right: 90%;
  745. }
  746. .push-90 {
  747. left: 90%;
  748. }
  749. .pull-90 {
  750. left: -90%;
  751. }
  752. .grid-95 {
  753. float: left;
  754. width: 95%;
  755. }
  756. .prefix-95 {
  757. margin-left: 95%;
  758. }
  759. .suffix-95 {
  760. margin-right: 95%;
  761. }
  762. .push-95 {
  763. left: 95%;
  764. }
  765. .pull-95 {
  766. left: -95%;
  767. }
  768. .grid-33 {
  769. float: left;
  770. width: 33.33333%;
  771. }
  772. .prefix-33 {
  773. margin-left: 33.33333%;
  774. }
  775. .suffix-33 {
  776. margin-right: 33.33333%;
  777. }
  778. .push-33 {
  779. left: 33.33333%;
  780. }
  781. .pull-33 {
  782. left: -33.33333%;
  783. }
  784. .grid-66 {
  785. float: left;
  786. width: 66.66667%;
  787. }
  788. .prefix-66 {
  789. margin-left: 66.66667%;
  790. }
  791. .suffix-66 {
  792. margin-right: 66.66667%;
  793. }
  794. .push-66 {
  795. left: 66.66667%;
  796. }
  797. .pull-66 {
  798. left: -66.66667%;
  799. }
  800. .grid-100 {
  801. clear: both;
  802. width: 100%;
  803. }
  804. }