front-page.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614
  1. html, body, div, span, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. abbr, address, cite, code,
  4. del, dfn, em, img, ins, kbd, q, samp,
  5. small, strong, sub, sup, var,
  6. b, i,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, figcaption, figure,
  11. footer, header, hgroup, menu, nav, section, summary,
  12. time, mark, audio, video {
  13. margin:0;
  14. padding:0;
  15. border:0;
  16. outline:0;
  17. font-size:100%;
  18. vertical-align:baseline;
  19. background:transparent;
  20. }
  21. body {
  22. padding: 0;
  23. margin: 0;
  24. background: rgba(242, 242, 242, 0.7);
  25. color: #666;
  26. font-size: 12px;
  27. line-height: 18px;
  28. }
  29. .col-centered {
  30. float: none;
  31. margin: 0 auto;
  32. }
  33. h1, h2, h3, h4, h5, h6 {
  34. clear: both;
  35. font-weight: normal;
  36. }
  37. a img {
  38. border: none;
  39. }
  40. p {
  41. font-size: 14px;
  42. margin-bottom: 8px;
  43. }
  44. h2 {
  45. font-size: 16px;
  46. }
  47. h3 {
  48. font-size: 14px;
  49. }
  50. h4 {
  51. font-size: 13px;
  52. margin-bottom: 15px;
  53. }
  54. p.noindent {
  55. margin-bottom: 10px;
  56. text-indent : 0px;
  57. }
  58. a:link {
  59. color: #000;
  60. text-decoration: none;
  61. }
  62. a:visited {
  63. color: #000;
  64. text-decoration: none;
  65. }
  66. a:active,
  67. a:hover {
  68. color: #757576;
  69. text-decoration: none;
  70. }
  71. a:active, a:focus, input {
  72. outline: 0;
  73. outline-style:none;
  74. outline-width:0;
  75. }
  76. .screen-reader-text {
  77. position: absolute;
  78. left: -9000px;
  79. }
  80. .header {
  81. margin: 0 0 50px 0;
  82. }
  83. .container {
  84. margin: 0 auto;
  85. text-align: center;
  86. }
  87. .card .logo .svg {
  88. margin: 0 auto;
  89. }
  90. .card .content {
  91. margin: 100px auto;
  92. width:450px;
  93. background: #fff;
  94. padding: 70px 20px 40px;
  95. -webkit-animation-name: none;
  96. -webkit-animation-iteration-count: infinite;
  97. -webkit-animation-timing-function: linear;
  98. -webkit-animation-duration: 400s;
  99. border-top: 1px solid #fff;
  100. -webkit-box-shadow: 0px 3px 5px #cbcbcb;
  101. -moz-box-shadow: 0px 3px 5px #cbcbcb;
  102. box-shadow: 0px 3px 5px #cbcbcb;
  103. -webkit-border-radius: 4px;
  104. -moz-border-radius: 4px;
  105. border-radius: 4px;
  106. }
  107. .vcenter {
  108. display: inline-block;
  109. vertical-align: middle;
  110. float: none;
  111. }
  112. #icon {
  113. display: block;
  114. box-sizing: border-box;
  115. margin:0 0 -34px 50px;
  116. padding: 0;
  117. width:50px;
  118. height:50px;
  119. background: #FFF;
  120. }
  121. .card .search {
  122. margin: 10px;
  123. }
  124. .card-bottom {
  125. margin-top: 20px;
  126. }
  127. .bottom p {
  128. margin: 0;
  129. font-size: 14px;
  130. }
  131. .bottom a {
  132. color: #666;
  133. }
  134. .left-bottom {
  135. float: left;
  136. display: block;
  137. text-align: left;
  138. margin: 0px 0 0 50px;
  139. }
  140. .left-bottom p {
  141. font-size: 9px;
  142. }
  143. .right-bottom {
  144. margin: 0px 50px 0 0;
  145. text-align: right;
  146. font-size: 9px;
  147. }
  148. .right-bottom p {
  149. font-size: 9px;
  150. }
  151. .contact-info {
  152. font-size: 12px;
  153. }
  154. @-webkit-keyframes Rotation {
  155. from {-webkit-transform: rotate(0deg);}
  156. to {-webkit-transform: rotate(360deg);}
  157. }
  158. @media (max-width: 480px) {
  159. .card .content {
  160. margin: 50px auto;
  161. -webkit-animation-name: none;
  162. width:85%;
  163. }
  164. .header {
  165. margin: 0 0 55px 0;
  166. }
  167. #icon {
  168. display: inline;
  169. box-sizing: border-box;
  170. margin:0 0 0px 0px;
  171. padding: 0;
  172. width:50px;
  173. height:50px;
  174. background: #FFF;
  175. }
  176. }
  177. ul.messenger.messenger-fixed.messenger-on-top {
  178. top: 10px;
  179. }
  180. ul.messenger {
  181. margin: 0;
  182. padding: 0;
  183. }
  184. ul.messenger > li {
  185. list-style: none;
  186. margin: 0;
  187. padding: 0;
  188. }
  189. ul.messenger.messenger-empty {
  190. display: none;
  191. }
  192. ul.messenger .messenger-message {
  193. overflow: hidden;
  194. *zoom: 1;
  195. }
  196. ul.messenger .messenger-message.messenger-hidden {
  197. display: none;
  198. }
  199. ul.messenger .messenger-message .messenger-phrase, ul.messenger .messenger-message .messenger-actions a {
  200. padding-right: 5px;
  201. }
  202. ul.messenger .messenger-message .messenger-actions {
  203. float: right;
  204. }
  205. ul.messenger .messenger-message .messenger-actions a {
  206. cursor: pointer;
  207. text-decoration: underline;
  208. }
  209. ul.messenger .messenger-message ul, ul.messenger .messenger-message ol {
  210. margin: 10px 18px 0;
  211. }
  212. ul.messenger.messenger-fixed {
  213. position: fixed;
  214. z-index: 10000;
  215. }
  216. ul.messenger.messenger-fixed .messenger-message {
  217. min-width: 0;
  218. -webkit-box-sizing: border-box;
  219. -moz-box-sizing: border-box;
  220. box-sizing: border-box;
  221. }
  222. ul.messenger.messenger-fixed .message .messenger-actions {
  223. float: left;
  224. }
  225. ul.messenger.messenger-fixed.messenger-on-bottom {
  226. bottom: 20px;
  227. }
  228. ul.messenger.messenger-fixed.messenger-on-top.messenger-on-left, ul.messenger.messenger-fixed.messenger-on-bottom.messenger-on-left {
  229. left: 20px;
  230. margin-left: 0px;
  231. }
  232. ul.messenger.messenger-fixed.messenger-on-right, ul.messenger.messenger-fixed.messenger-on-left {
  233. width: 350px;
  234. }
  235. ul.messenger.messenger-fixed.messenger-on-right .messenger-actions, ul.messenger.messenger-fixed.messenger-on-left .messenger-actions {
  236. float: left;
  237. }
  238. ul.messenger .messenger-spinner {
  239. display: none;
  240. }
  241. @-webkit-keyframes ui-spinner-rotate-right {
  242. 0% {
  243. -webkit-transform: rotate(0deg);
  244. }
  245. 25% {
  246. -webkit-transform: rotate(180deg);
  247. }
  248. 50% {
  249. -webkit-transform: rotate(180deg);
  250. }
  251. 75% {
  252. -webkit-transform: rotate(360deg);
  253. }
  254. 100% {
  255. -webkit-transform: rotate(360deg);
  256. }
  257. }
  258. @-moz-keyframes ui-spinner-rotate-right {
  259. 0% {
  260. -moz-transform: rotate(0deg);
  261. }
  262. 25% {
  263. -moz-transform: rotate(180deg);
  264. }
  265. 50% {
  266. -moz-transform: rotate(180deg);
  267. }
  268. 75% {
  269. -moz-transform: rotate(360deg);
  270. }
  271. 100% {
  272. -moz-transform: rotate(360deg);
  273. }
  274. }
  275. @keyframes ui-spinner-rotate-right {
  276. 0% {
  277. transform: rotate(0deg);
  278. }
  279. 25% {
  280. transform: rotate(180deg);
  281. }
  282. 50% {
  283. transform: rotate(180deg);
  284. }
  285. 75% {
  286. transform: rotate(360deg);
  287. }
  288. 100% {
  289. transform: rotate(360deg);
  290. }
  291. }
  292. @keyframes ui-spinner-rotate-left {
  293. 0% {
  294. transform: rotate(0deg);
  295. }
  296. 25% {
  297. transform: rotate(0deg);
  298. }
  299. 50% {
  300. transform: rotate(180deg);
  301. }
  302. 75% {
  303. transform: rotate(180deg);
  304. }
  305. 100% {
  306. transform: rotate(360deg);
  307. }
  308. }
  309. @-moz-keyframes ui-spinner-rotate-left {
  310. 0% {
  311. -moz-transform: rotate(0deg);
  312. }
  313. 25% {
  314. -moz-transform: rotate(0deg);
  315. }
  316. 50% {
  317. -moz-transform: rotate(180deg);
  318. }
  319. 75% {
  320. -moz-transform: rotate(180deg);
  321. }
  322. 100% {
  323. -moz-transform: rotate(360deg);
  324. }
  325. }
  326. @-webkit-keyframes ui-spinner-rotate-left {
  327. 0% {
  328. -webkit-transform: rotate(0deg);
  329. }
  330. 25% {
  331. -webkit-transform: rotate(0deg);
  332. }
  333. 50% {
  334. -webkit-transform: rotate(180deg);
  335. }
  336. 75% {
  337. -webkit-transform: rotate(180deg);
  338. }
  339. 100% {
  340. -webkit-transform: rotate(360deg);
  341. }
  342. }
  343. .messenger-spinner {
  344. position: relative;
  345. border-radius: 100%;
  346. }
  347. ul.messenger.messenger-spinner-active .messenger-spinner .messenger-spinner {
  348. display: block;
  349. }
  350. .messenger-spinner .messenger-spinner-side {
  351. width: 50%;
  352. height: 100%;
  353. overflow: hidden;
  354. position: absolute;
  355. }
  356. .messenger-spinner .messenger-spinner-side .messenger-spinner-fill {
  357. border-radius: 999px;
  358. position: absolute;
  359. width: 100%;
  360. height: 100%;
  361. -webkit-animation-iteration-count: infinite;
  362. -moz-animation-iteration-count: infinite;
  363. -ms-animation-iteration-count: infinite;
  364. -o-animation-iteration-count: infinite;
  365. animation-iteration-count: infinite;
  366. -webkit-animation-timing-function: linear;
  367. -moz-animation-timing-function: linear;
  368. -ms-animation-timing-function: linear;
  369. -o-animation-timing-function: linear;
  370. animation-timing-function: linear;
  371. }
  372. .messenger-spinner .messenger-spinner-side-left {
  373. left: 0;
  374. }
  375. .messenger-spinner .messenger-spinner-side-left .messenger-spinner-fill {
  376. left: 100%;
  377. border-top-left-radius: 0;
  378. border-bottom-left-radius: 0;
  379. -webkit-animation-name: ui-spinner-rotate-left;
  380. -moz-animation-name: ui-spinner-rotate-left;
  381. -ms-animation-name: ui-spinner-rotate-left;
  382. -o-animation-name: ui-spinner-rotate-left;
  383. animation-name: ui-spinner-rotate-left;
  384. -webkit-transform-origin: 0 50%;
  385. -moz-transform-origin: 0 50%;
  386. -ms-transform-origin: 0 50%;
  387. -o-transform-origin: 0 50%;
  388. transform-origin: 0 50%;
  389. }
  390. .messenger-spinner .messenger-spinner-side-right {
  391. left: 50%;
  392. }
  393. .messenger-spinner .messenger-spinner-side-right .messenger-spinner-fill {
  394. left: -100%;
  395. border-top-right-radius: 0;
  396. border-bottom-right-radius: 0;
  397. -webkit-animation-name: ui-spinner-rotate-right;
  398. -moz-animation-name: ui-spinner-rotate-right;
  399. -ms-animation-name: ui-spinner-rotate-right;
  400. -o-animation-name: ui-spinner-rotate-right;
  401. animation-name: ui-spinner-rotate-right;
  402. -webkit-transform-origin: 100% 50%;
  403. -moz-transform-origin: 100% 50%;
  404. -ms-transform-origin: 100% 50%;
  405. -o-transform-origin: 100% 50%;
  406. transform-origin: 100% 50%;
  407. }
  408. ul.messenger-theme-flat {
  409. -webkit-border-radius: 4px;
  410. -moz-border-radius: 4px;
  411. -ms-border-radius: 4px;
  412. -o-border-radius: 4px;
  413. border-radius: 4px;
  414. -moz-user-select: none;
  415. -webkit-user-select: none;
  416. -o-user-select: none;
  417. user-select: none;
  418. background: #404040;
  419. }
  420. ul.messenger-theme-flat.messenger-empty {
  421. display: none;
  422. }
  423. ul.messenger-theme-flat .messenger-message {
  424. -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  425. -moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  426. box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  427. -webkit-border-radius: 0px;
  428. -moz-border-radius: 0px;
  429. -ms-border-radius: 0px;
  430. -o-border-radius: 0px;
  431. border-radius: 0px;
  432. position: relative;
  433. border: 0px;
  434. margin-bottom: 0px;
  435. font-size: 13px;
  436. background: transparent;
  437. color: #f0f0f0;
  438. font-weight: 500;
  439. padding: 10px 30px 13px 65px;
  440. }
  441. ul.messenger-theme-flat .messenger-message .messenger-close {
  442. position: absolute;
  443. top: 0px;
  444. right: 0px;
  445. color: #888888;
  446. opacity: 1;
  447. font-weight: bold;
  448. display: block;
  449. font-size: 20px;
  450. line-height: 20px;
  451. padding: 8px 10px 7px 7px;
  452. cursor: pointer;
  453. background: transparent;
  454. border: 0;
  455. -webkit-appearance: none;
  456. }
  457. ul.messenger-theme-flat .messenger-message .messenger-close:hover {
  458. color: #bbbbbb;
  459. }
  460. ul.messenger-theme-flat .messenger-message .messenger-close:active {
  461. color: #777777;
  462. }
  463. ul.messenger-theme-flat .messenger-message .messenger-actions {
  464. float: none;
  465. margin-top: 10px;
  466. }
  467. ul.messenger-theme-flat .messenger-message .messenger-actions a {
  468. -webkit-border-radius: 4px;
  469. -moz-border-radius: 4px;
  470. -ms-border-radius: 4px;
  471. -o-border-radius: 4px;
  472. border-radius: 4px;
  473. text-decoration: none;
  474. color: #aaaaaa;
  475. background: #2e2e2e;
  476. display: inline-block;
  477. padding: 10px;
  478. margin-right: 10px;
  479. padding: 4px 11px 6px;
  480. text-transform: capitalize;
  481. }
  482. ul.messenger-theme-flat .messenger-message .messenger-actions a:hover {
  483. color: #f0f0f0;
  484. background: #2e2e2e;
  485. }
  486. ul.messenger-theme-flat .messenger-message .messenger-actions a:active {
  487. background: #292929;
  488. color: #aaaaaa;
  489. }
  490. ul.messenger-theme-flat .messenger-message .messenger-actions .messenger-phrase {
  491. display: none;
  492. }
  493. ul.messenger-theme-flat .messenger-message .messenger-message-inner:before {
  494. -webkit-border-radius: 50%;
  495. -moz-border-radius: 50%;
  496. -ms-border-radius: 50%;
  497. -o-border-radius: 50%;
  498. border-radius: 50%;
  499. position: absolute;
  500. left: 17px;
  501. display: block;
  502. content: " ";
  503. top: 50%;
  504. margin-top: -8px;
  505. height: 13px;
  506. width: 13px;
  507. z-index: 20;
  508. }
  509. ul.messenger-theme-flat .messenger-message.alert-success .messenger-message-inner:before {
  510. background: #5fca4a;
  511. }
  512. ul.messenger-theme-flat .messenger-message.alert-info .messenger-message-inner:before {
  513. background: #61c4b8;
  514. }
  515. ul.messenger-theme-flat .messenger-message.alert-error .messenger-message-inner:before {
  516. background: #dd6a45;
  517. }
  518. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-soon .messenger-spinner {
  519. width: 32px;
  520. height: 32px;
  521. background: transparent;
  522. }
  523. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-soon .messenger-spinner .messenger-spinner-side .messenger-spinner-fill {
  524. background: #dd6a45;
  525. -webkit-animation-duration: 20s;
  526. -moz-animation-duration: 20s;
  527. -ms-animation-duration: 20s;
  528. -o-animation-duration: 20s;
  529. animation-duration: 20s;
  530. opacity: 1;
  531. }
  532. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-soon .messenger-spinner:after {
  533. content: "";
  534. background: #292929;
  535. position: absolute;
  536. width: 26px;
  537. height: 26px;
  538. border-radius: 50%;
  539. top: 3px;
  540. left: 3px;
  541. display: block;
  542. }
  543. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-later .messenger-spinner {
  544. width: 32px;
  545. height: 32px;
  546. background: transparent;
  547. }
  548. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-later .messenger-spinner .messenger-spinner-side .messenger-spinner-fill {
  549. background: #dd6a45;
  550. -webkit-animation-duration: 600s;
  551. -moz-animation-duration: 600s;
  552. -ms-animation-duration: 600s;
  553. -o-animation-duration: 600s;
  554. animation-duration: 600s;
  555. opacity: 1;
  556. }
  557. ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-later .messenger-spinner:after {
  558. content: "";
  559. background: #292929;
  560. position: absolute;
  561. width: 26px;
  562. height: 26px;
  563. border-radius: 50%;
  564. top: 3px;
  565. left: 3px;
  566. display: block;
  567. }
  568. ul.messenger-theme-flat .messenger-message-slot.messenger-last .messenger-message {
  569. -webkit-border-radius: 4px 4px 0px 0px;
  570. -moz-border-radius: 4px 4px 0px 0px;
  571. -ms-border-radius: 4px 4px 0px 0px;
  572. -o-border-radius: 4px 4px 0px 0px;
  573. border-radius: 4px 4px 0px 0px;
  574. -webkit-box-shadow: inset 48px 0px 0px #292929;
  575. -moz-box-shadow: inset 48px 0px 0px #292929;
  576. box-shadow: inset 48px 0px 0px #292929;
  577. }
  578. ul.messenger-theme-flat .messenger-message-slot.messenger-first .messenger-message {
  579. -webkit-border-radius: 0px 0px 4px 4px;
  580. -moz-border-radius: 0px 0px 4px 4px;
  581. -ms-border-radius: 0px 0px 4px 4px;
  582. -o-border-radius: 0px 0px 4px 4px;
  583. border-radius: 0px 0px 4px 4px;
  584. -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  585. -moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  586. box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
  587. }
  588. ul.messenger-theme-flat .messenger-message-slot.messenger-first.messenger-last .messenger-message {
  589. -webkit-border-radius: 4px;
  590. -moz-border-radius: 4px;
  591. -ms-border-radius: 4px;
  592. -o-border-radius: 4px;
  593. border-radius: 4px;
  594. -webkit-box-shadow: inset 48px 0px 0px #292929;
  595. -moz-box-shadow: inset 48px 0px 0px #292929;
  596. box-shadow: inset 48px 0px 0px #292929;
  597. }
  598. ul.messenger-theme-flat .messenger-spinner {
  599. display: block;
  600. position: absolute;
  601. left: 7px;
  602. top: 50%;
  603. margin-top: -18px;
  604. z-index: 999;
  605. height: 32px;
  606. width: 32px;
  607. z-index: 10;
  608. }