Created
January 26, 2017 18:30
-
-
Save alexvandesande/0fb524b9ba0a37ded1138a5009f162af to your computer and use it in GitHub Desktop.
Modified Dapp Styles for Swarm Markdown
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ::selection { | |
| color: #fff; | |
| text-shadow: 0 0 0 | |
| } | |
| ::-moz-selection { | |
| color: #fff; | |
| text-shadow: 0 0 0 | |
| } | |
| ::-webkit-selection { | |
| color: #fff; | |
| text-shadow: 0 0 0 | |
| } | |
| html { | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| height: 100% | |
| } | |
| body { | |
| padding: 64px 96px; | |
| } | |
| .errorText { | |
| color: red; | |
| text-align: center | |
| } | |
| .errorText ul { | |
| list-style-type: none; | |
| padding: 0; | |
| margin: 0 | |
| } | |
| .errorText a { | |
| text-decoration: none; | |
| font-style: italic; | |
| color: red | |
| } | |
| ::selection { | |
| color: #fff; | |
| text-shadow: 0 0 0 | |
| } | |
| ::-moz-selection { | |
| color: #fff; | |
| text-shadow: 0 0 0 | |
| } | |
| ::-webkit-selection { | |
| color: #fff; | |
| text-shadow: 0 0 0 | |
| } | |
| html { | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| height: 100% | |
| } | |
| body { | |
| padding-top: 5em | |
| } | |
| .errorText { | |
| color: red; | |
| text-align: center | |
| } | |
| .errorText ul { | |
| list-style-type: none; | |
| padding: 0; | |
| margin: 0 | |
| } | |
| .errorText a { | |
| text-decoration: none; | |
| font-style: italic; | |
| color: red | |
| } | |
| @font-face { | |
| font-family: 'Simple-Line-Icons'; | |
| src: url('icons/Simple-Line-Icons.eot'); | |
| src: url('icons/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'), url('icons/Simple-Line-Icons.woff') format('woff'), url('icons/Simple-Line-Icons.ttf') format('truetype'), url('icons/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| /* Use the following CSS code if you want to use data attributes for inserting your icons */ | |
| [data-icon]:before { | |
| font-family: 'Simple-Line-Icons'; | |
| content: attr(data-icon); | |
| speak: none; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* Use the following CSS code if you want to have a class per icon */ | |
| /* | |
| Instead of a list of all class selectors, | |
| you can use the generic selector below, but it's slower: | |
| [class*="icon-"] { | |
| */ | |
| .icon-user-female, | |
| .icon-user-follow, | |
| .icon-user-following, | |
| .icon-user-unfollow, | |
| .icon-trophy, | |
| .icon-screen-smartphone, | |
| .icon-screen-desktop, | |
| .icon-plane, | |
| .icon-notebook, | |
| .icon-moustache, | |
| .icon-mouse, | |
| .icon-magnet, | |
| .icon-energy, | |
| .icon-emoticon-smile, | |
| .icon-disc, | |
| .icon-cursor-move, | |
| .icon-crop, | |
| .icon-credit-card, | |
| .icon-chemistry, | |
| .icon-user, | |
| .icon-speedometer, | |
| .icon-social-youtube, | |
| .icon-social-twitter, | |
| .icon-social-tumblr, | |
| .icon-social-facebook, | |
| .icon-social-dropbox, | |
| .icon-social-dribbble, | |
| .icon-shield, | |
| .icon-screen-tablet, | |
| .icon-magic-wand, | |
| .icon-hourglass, | |
| .icon-graduation, | |
| .icon-ghost, | |
| .icon-game-controller, | |
| .icon-fire, | |
| .icon-eyeglasses, | |
| .icon-envelope-open, | |
| .icon-envelope-letter, | |
| .icon-bell, | |
| .icon-badge, | |
| .icon-anchor, | |
| .icon-wallet, | |
| .icon-vector, | |
| .icon-speech, | |
| .icon-puzzle, | |
| .icon-printer, | |
| .icon-present, | |
| .icon-playlist, | |
| .icon-pin, | |
| .icon-picture, | |
| .icon-map, | |
| .icon-layers, | |
| .icon-handbag, | |
| .icon-globe-alt, | |
| .icon-globe, | |
| .icon-frame, | |
| .icon-folder-alt, | |
| .icon-film, | |
| .icon-feed, | |
| .icon-earphones-alt, | |
| .icon-earphones, | |
| .icon-drop, | |
| .icon-drawer, | |
| .icon-docs, | |
| .icon-directions, | |
| .icon-direction, | |
| .icon-diamond, | |
| .icon-cup, | |
| .icon-compass, | |
| .icon-call-out, | |
| .icon-call-in, | |
| .icon-call-end, | |
| .icon-calculator, | |
| .icon-bubbles, | |
| .icon-briefcase, | |
| .icon-book-open, | |
| .icon-basket-loaded, | |
| .icon-basket, | |
| .icon-bag, | |
| .icon-action-undo, | |
| .icon-action-redo, | |
| .icon-wrench, | |
| .icon-umbrella, | |
| .icon-trash, | |
| .icon-tag, | |
| .icon-support, | |
| .icon-size-fullscreen, | |
| .icon-size-actual, | |
| .icon-shuffle, | |
| .icon-share-alt, | |
| .icon-share, | |
| .icon-rocket, | |
| .icon-question, | |
| .icon-pie-chart, | |
| .icon-pencil, | |
| .icon-note, | |
| .icon-music-tone-alt, | |
| .icon-music-tone, | |
| .icon-microphone, | |
| .icon-loop, | |
| .icon-logout, | |
| .icon-login, | |
| .icon-list, | |
| .icon-like, | |
| .icon-home, | |
| .icon-grid, | |
| .icon-graph, | |
| .icon-equalizer, | |
| .icon-dislike, | |
| .icon-cursor, | |
| .icon-control-start, | |
| .icon-control-rewind, | |
| .icon-control-play, | |
| .icon-control-pause, | |
| .icon-control-forward, | |
| .icon-control-end, | |
| .icon-calendar, | |
| .icon-bulb, | |
| .icon-bar-chart, | |
| .icon-arrow-up, | |
| .icon-arrow-right, | |
| .icon-arrow-left, | |
| .icon-arrow-down, | |
| .icon-ban, | |
| .icon-bubble, | |
| .icon-camcorder, | |
| .icon-camera, | |
| .icon-check, | |
| .icon-clock, | |
| .icon-close, | |
| .icon-cloud-download, | |
| .icon-cloud-upload, | |
| .icon-doc, | |
| .icon-envelope, | |
| .icon-eye, | |
| .icon-flag, | |
| .icon-folder, | |
| .icon-heart, | |
| .icon-info, | |
| .icon-key, | |
| .icon-link, | |
| .icon-lock, | |
| .icon-lock-open, | |
| .icon-magnifier, | |
| .icon-magnifier-add, | |
| .icon-magnifier-remove, | |
| .icon-paper-clip, | |
| .icon-paper-plane, | |
| .icon-plus, | |
| .icon-pointer, | |
| .icon-power, | |
| .icon-refresh, | |
| .icon-reload, | |
| .icon-settings, | |
| .icon-star, | |
| .icon-symbol-female, | |
| .icon-symbol-male, | |
| .icon-target, | |
| .icon-volume-1, | |
| .icon-volume-2, | |
| .icon-volume-off, | |
| .icon-users { | |
| font-family: 'Simple-Line-Icons'; | |
| speak: none; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .icon-user-female:before { | |
| content: "\e000"; | |
| } | |
| .icon-user-follow:before { | |
| content: "\e002"; | |
| } | |
| .icon-user-following:before { | |
| content: "\e003"; | |
| } | |
| .icon-user-unfollow:before { | |
| content: "\e004"; | |
| } | |
| .icon-trophy:before { | |
| content: "\e006"; | |
| } | |
| .icon-screen-smartphone:before { | |
| content: "\e010"; | |
| } | |
| .icon-screen-desktop:before { | |
| content: "\e011"; | |
| } | |
| .icon-plane:before { | |
| content: "\e012"; | |
| } | |
| .icon-notebook:before { | |
| content: "\e013"; | |
| } | |
| .icon-moustache:before { | |
| content: "\e014"; | |
| } | |
| .icon-mouse:before { | |
| content: "\e015"; | |
| } | |
| .icon-magnet:before { | |
| content: "\e016"; | |
| } | |
| .icon-energy:before { | |
| content: "\e020"; | |
| } | |
| .icon-emoticon-smile:before { | |
| content: "\e021"; | |
| } | |
| .icon-disc:before { | |
| content: "\e022"; | |
| } | |
| .icon-cursor-move:before { | |
| content: "\e023"; | |
| } | |
| .icon-crop:before { | |
| content: "\e024"; | |
| } | |
| .icon-credit-card:before { | |
| content: "\e025"; | |
| } | |
| .icon-chemistry:before { | |
| content: "\e026"; | |
| } | |
| .icon-user:before { | |
| content: "\e005"; | |
| } | |
| .icon-speedometer:before { | |
| content: "\e007"; | |
| } | |
| .icon-social-youtube:before { | |
| content: "\e008"; | |
| } | |
| .icon-social-twitter:before { | |
| content: "\e009"; | |
| } | |
| .icon-social-tumblr:before { | |
| content: "\e00a"; | |
| } | |
| .icon-social-facebook:before { | |
| content: "\e00b"; | |
| } | |
| .icon-social-dropbox:before { | |
| content: "\e00c"; | |
| } | |
| .icon-social-dribbble:before { | |
| content: "\e00d"; | |
| } | |
| .icon-shield:before { | |
| content: "\e00e"; | |
| } | |
| .icon-screen-tablet:before { | |
| content: "\e00f"; | |
| } | |
| .icon-magic-wand:before { | |
| content: "\e017"; | |
| } | |
| .icon-hourglass:before { | |
| content: "\e018"; | |
| } | |
| .icon-graduation:before { | |
| content: "\e019"; | |
| } | |
| .icon-ghost:before { | |
| content: "\e01a"; | |
| } | |
| .icon-game-controller:before { | |
| content: "\e01b"; | |
| } | |
| .icon-fire:before { | |
| content: "\e01c"; | |
| } | |
| .icon-eyeglasses:before { | |
| content: "\e01d"; | |
| } | |
| .icon-envelope-open:before { | |
| content: "\e01e"; | |
| } | |
| .icon-envelope-letter:before { | |
| content: "\e01f"; | |
| } | |
| .icon-bell:before { | |
| content: "\e027"; | |
| } | |
| .icon-badge:before { | |
| content: "\e028"; | |
| } | |
| .icon-anchor:before { | |
| content: "\e029"; | |
| } | |
| .icon-wallet:before { | |
| content: "\e02a"; | |
| } | |
| .icon-vector:before { | |
| content: "\e02b"; | |
| } | |
| .icon-speech:before { | |
| content: "\e02c"; | |
| } | |
| .icon-puzzle:before { | |
| content: "\e02d"; | |
| } | |
| .icon-printer:before { | |
| content: "\e02e"; | |
| } | |
| .icon-present:before { | |
| content: "\e02f"; | |
| } | |
| .icon-playlist:before { | |
| content: "\e030"; | |
| } | |
| .icon-pin:before { | |
| content: "\e031"; | |
| } | |
| .icon-picture:before { | |
| content: "\e032"; | |
| } | |
| .icon-map:before { | |
| content: "\e033"; | |
| } | |
| .icon-layers:before { | |
| content: "\e034"; | |
| } | |
| .icon-handbag:before { | |
| content: "\e035"; | |
| } | |
| .icon-globe-alt:before { | |
| content: "\e036"; | |
| } | |
| .icon-globe:before { | |
| content: "\e037"; | |
| } | |
| .icon-frame:before { | |
| content: "\e038"; | |
| } | |
| .icon-folder-alt:before { | |
| content: "\e039"; | |
| } | |
| .icon-film:before { | |
| content: "\e03a"; | |
| } | |
| .icon-feed:before { | |
| content: "\e03b"; | |
| } | |
| .icon-earphones-alt:before { | |
| content: "\e03c"; | |
| } | |
| .icon-earphones:before { | |
| content: "\e03d"; | |
| } | |
| .icon-drop:before { | |
| content: "\e03e"; | |
| } | |
| .icon-drawer:before { | |
| content: "\e03f"; | |
| } | |
| .icon-docs:before { | |
| content: "\e040"; | |
| } | |
| .icon-directions:before { | |
| content: "\e041"; | |
| } | |
| .icon-direction:before { | |
| content: "\e042"; | |
| } | |
| .icon-diamond:before { | |
| content: "\e043"; | |
| } | |
| .icon-cup:before { | |
| content: "\e044"; | |
| } | |
| .icon-compass:before { | |
| content: "\e045"; | |
| } | |
| .icon-call-out:before { | |
| content: "\e046"; | |
| } | |
| .icon-call-in:before { | |
| content: "\e047"; | |
| } | |
| .icon-call-end:before { | |
| content: "\e048"; | |
| } | |
| .icon-calculator:before { | |
| content: "\e049"; | |
| } | |
| .icon-bubbles:before { | |
| content: "\e04a"; | |
| } | |
| .icon-briefcase:before { | |
| content: "\e04b"; | |
| } | |
| .icon-book-open:before { | |
| content: "\e04c"; | |
| } | |
| .icon-basket-loaded:before { | |
| content: "\e04d"; | |
| } | |
| .icon-basket:before { | |
| content: "\e04e"; | |
| } | |
| .icon-bag:before { | |
| content: "\e04f"; | |
| } | |
| .icon-action-undo:before { | |
| content: "\e050"; | |
| } | |
| .icon-action-redo:before { | |
| content: "\e051"; | |
| } | |
| .icon-wrench:before { | |
| content: "\e052"; | |
| } | |
| .icon-umbrella:before { | |
| content: "\e053"; | |
| } | |
| .icon-trash:before { | |
| content: "\e054"; | |
| } | |
| .icon-tag:before { | |
| content: "\e055"; | |
| } | |
| .icon-support:before { | |
| content: "\e056"; | |
| } | |
| .icon-size-fullscreen:before { | |
| content: "\e057"; | |
| } | |
| .icon-size-actual:before { | |
| content: "\e058"; | |
| } | |
| .icon-shuffle:before { | |
| content: "\e059"; | |
| } | |
| .icon-share-alt:before { | |
| content: "\e05a"; | |
| } | |
| .icon-share:before { | |
| content: "\e05b"; | |
| } | |
| .icon-rocket:before { | |
| content: "\e05c"; | |
| } | |
| .icon-question:before { | |
| content: "\e05d"; | |
| } | |
| .icon-pie-chart:before { | |
| content: "\e05e"; | |
| } | |
| .icon-pencil:before { | |
| content: "\e05f"; | |
| } | |
| .icon-note:before { | |
| content: "\e060"; | |
| } | |
| .icon-music-tone-alt:before { | |
| content: "\e061"; | |
| } | |
| .icon-music-tone:before { | |
| content: "\e062"; | |
| } | |
| .icon-microphone:before { | |
| content: "\e063"; | |
| } | |
| .icon-loop:before { | |
| content: "\e064"; | |
| } | |
| .icon-logout:before { | |
| content: "\e065"; | |
| } | |
| .icon-login:before { | |
| content: "\e066"; | |
| } | |
| .icon-list:before { | |
| content: "\e067"; | |
| } | |
| .icon-like:before { | |
| content: "\e068"; | |
| } | |
| .icon-home:before { | |
| content: "\e069"; | |
| } | |
| .icon-grid:before { | |
| content: "\e06a"; | |
| } | |
| .icon-graph:before { | |
| content: "\e06b"; | |
| } | |
| .icon-equalizer:before { | |
| content: "\e06c"; | |
| } | |
| .icon-dislike:before { | |
| content: "\e06d"; | |
| } | |
| .icon-cursor:before { | |
| content: "\e06e"; | |
| } | |
| .icon-control-start:before { | |
| content: "\e06f"; | |
| } | |
| .icon-control-rewind:before { | |
| content: "\e070"; | |
| } | |
| .icon-control-play:before { | |
| content: "\e071"; | |
| } | |
| .icon-control-pause:before { | |
| content: "\e072"; | |
| } | |
| .icon-control-forward:before { | |
| content: "\e073"; | |
| } | |
| .icon-control-end:before { | |
| content: "\e074"; | |
| } | |
| .icon-calendar:before { | |
| content: "\e075"; | |
| } | |
| .icon-bulb:before { | |
| content: "\e076"; | |
| } | |
| .icon-bar-chart:before { | |
| content: "\e077"; | |
| } | |
| .icon-arrow-up:before { | |
| content: "\e078"; | |
| } | |
| .icon-arrow-right:before { | |
| content: "\e079"; | |
| } | |
| .icon-arrow-left:before { | |
| content: "\e07a"; | |
| } | |
| .icon-arrow-down:before { | |
| content: "\e07b"; | |
| } | |
| .icon-ban:before { | |
| content: "\e07c"; | |
| } | |
| .icon-bubble:before { | |
| content: "\e07d"; | |
| } | |
| .icon-camcorder:before { | |
| content: "\e07e"; | |
| } | |
| .icon-camera:before { | |
| content: "\e07f"; | |
| } | |
| .icon-check:before { | |
| content: "\e080"; | |
| } | |
| .icon-clock:before { | |
| content: "\e081"; | |
| } | |
| .icon-close:before { | |
| content: "\e082"; | |
| } | |
| .icon-cloud-download:before { | |
| content: "\e083"; | |
| } | |
| .icon-cloud-upload:before { | |
| content: "\e084"; | |
| } | |
| .icon-doc:before { | |
| content: "\e085"; | |
| } | |
| .icon-envelope:before { | |
| content: "\e086"; | |
| } | |
| .icon-eye:before { | |
| content: "\e087"; | |
| } | |
| .icon-flag:before { | |
| content: "\e088"; | |
| } | |
| .icon-folder:before { | |
| content: "\e089"; | |
| } | |
| .icon-heart:before { | |
| content: "\e08a"; | |
| } | |
| .icon-info:before { | |
| content: "\e08b"; | |
| } | |
| .icon-key:before { | |
| content: "\e08c"; | |
| } | |
| .icon-link:before { | |
| content: "\e08d"; | |
| } | |
| .icon-lock:before { | |
| content: "\e08e"; | |
| } | |
| .icon-lock-open:before { | |
| content: "\e08f"; | |
| } | |
| .icon-magnifier:before { | |
| content: "\e090"; | |
| } | |
| .icon-magnifier-add:before { | |
| content: "\e091"; | |
| } | |
| .icon-magnifier-remove:before { | |
| content: "\e092"; | |
| } | |
| .icon-paper-clip:before { | |
| content: "\e093"; | |
| } | |
| .icon-paper-plane:before { | |
| content: "\e094"; | |
| } | |
| .icon-plus:before { | |
| content: "\e095"; | |
| } | |
| .icon-pointer:before { | |
| content: "\e096"; | |
| } | |
| .icon-power:before { | |
| content: "\e097"; | |
| } | |
| .icon-refresh:before { | |
| content: "\e098"; | |
| } | |
| .icon-reload:before { | |
| content: "\e099"; | |
| } | |
| .icon-settings:before { | |
| content: "\e09a"; | |
| } | |
| .icon-star:before { | |
| content: "\e09b"; | |
| } | |
| .icon-symbol-female:before { | |
| content: "\e09c"; | |
| } | |
| .icon-symbol-male:before { | |
| content: "\e09d"; | |
| } | |
| .icon-target:before { | |
| content: "\e09e"; | |
| } | |
| .icon-volume-1:before { | |
| content: "\e09f"; | |
| } | |
| .icon-volume-2:before { | |
| content: "\e0a0"; | |
| } | |
| .icon-volume-off:before { | |
| content: "\e0a1"; | |
| } | |
| .icon-users:before { | |
| content: "\e001"; | |
| } | |
| /*! normalize.css v1.1.2 | MIT License | git.io/normalize */ | |
| /* ========================================================================== | |
| HTML5 display definitions | |
| ========================================================================== */ | |
| /** | |
| * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. | |
| */ | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| /** | |
| * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. | |
| */ | |
| audio, | |
| canvas, | |
| video { | |
| display: inline-block; | |
| *display: inline; | |
| *zoom: 1; | |
| } | |
| /** | |
| * Prevent modern browsers from displaying `audio` without controls. | |
| * Remove excess height in iOS 5 devices. | |
| */ | |
| audio:not([controls]) { | |
| display: none; | |
| height: 0; | |
| } | |
| /** | |
| * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. | |
| * Known issue: no IE 6 support. | |
| */ | |
| [hidden] { | |
| display: none; | |
| } | |
| /* ========================================================================== | |
| Base | |
| ========================================================================== */ | |
| /** | |
| * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using | |
| * `em` units. | |
| * 2. Prevent iOS text size adjust after orientation change, without disabling | |
| * user zoom. | |
| */ | |
| html { | |
| font-size: 100%; | |
| /* 1 */ | |
| -ms-text-size-adjust: 100%; | |
| /* 2 */ | |
| -webkit-text-size-adjust: 100%; | |
| /* 2 */ | |
| } | |
| /** | |
| * Address `font-family` inconsistency between `textarea` and other form | |
| * elements. | |
| */ | |
| html, | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-family: sans-serif; | |
| } | |
| /** | |
| * Address margins handled incorrectly in IE 6/7. | |
| */ | |
| body { | |
| margin: 0; | |
| } | |
| /* ========================================================================== | |
| Links | |
| ========================================================================== */ | |
| /** | |
| * Address `outline` inconsistency between Chrome and other browsers. | |
| */ | |
| a:focus { | |
| outline: thin dotted; | |
| } | |
| /** | |
| * Improve readability when focused and also mouse hovered in all browsers. | |
| */ | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| /* ========================================================================== | |
| Typography | |
| ========================================================================== */ | |
| /** | |
| * Address font sizes and margins set differently in IE 6/7. | |
| * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, | |
| * and Chrome. | |
| */ | |
| h1 { | |
| font-size: 2em; | |
| margin: 0.67em 0; | |
| } | |
| h2 { | |
| font-size: 1.5em; | |
| margin: 0.83em 0; | |
| } | |
| h3 { | |
| font-size: 1.17em; | |
| margin: 1em 0; | |
| } | |
| h4 { | |
| font-size: 1em; | |
| margin: 1.33em 0; | |
| } | |
| h5 { | |
| font-size: 0.83em; | |
| margin: 1.67em 0; | |
| } | |
| h6 { | |
| font-size: 0.67em; | |
| margin: 2.33em 0; | |
| } | |
| /** | |
| * Address styling not present in IE 7/8/9, Safari 5, and Chrome. | |
| */ | |
| abbr[title] { | |
| border-bottom: 1px dotted; | |
| } | |
| /** | |
| * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. | |
| */ | |
| b, | |
| strong { | |
| font-weight: bold; | |
| } | |
| blockquote { | |
| margin: 1em 40px; | |
| } | |
| /** | |
| * Address styling not present in Safari 5 and Chrome. | |
| */ | |
| dfn { | |
| font-style: italic; | |
| } | |
| /** | |
| * Address differences between Firefox and other browsers. | |
| * Known issue: no IE 6/7 normalization. | |
| */ | |
| hr { | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 0; | |
| } | |
| /** | |
| * Address styling not present in IE 6/7/8/9. | |
| */ | |
| mark { | |
| background: #ff0; | |
| color: #000; | |
| } | |
| /** | |
| * Address margins set differently in IE 6/7. | |
| */ | |
| p, | |
| pre { | |
| margin: 1em 0; | |
| } | |
| /** | |
| * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. | |
| */ | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: monospace, serif; | |
| _font-family: 'courier new', monospace; | |
| font-size: 1em; | |
| } | |
| /** | |
| * Improve readability of pre-formatted text in all browsers. | |
| */ | |
| pre { | |
| white-space: pre; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| /** | |
| * Address CSS quotes not supported in IE 6/7. | |
| */ | |
| q { | |
| quotes: none; | |
| } | |
| /** | |
| * Address `quotes` property not supported in Safari 4. | |
| */ | |
| q:before, | |
| q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| /** | |
| * Address inconsistent and variable font size in all browsers. | |
| */ | |
| small { | |
| font-size: 80%; | |
| } | |
| /** | |
| * Prevent `sub` and `sup` affecting `line-height` in all browsers. | |
| */ | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| /* ========================================================================== | |
| Lists | |
| ========================================================================== */ | |
| /** | |
| * Address margins set differently in IE 6/7. | |
| */ | |
| dl, | |
| menu, | |
| ol, | |
| ul { | |
| margin: 1em 0; | |
| } | |
| dd { | |
| margin: 0 0 0 40px; | |
| } | |
| /** | |
| * Address paddings set differently in IE 6/7. | |
| */ | |
| menu, | |
| ol, | |
| ul { | |
| padding: 0 0 0 40px; | |
| } | |
| /** | |
| * Correct list images handled incorrectly in IE 7. | |
| */ | |
| nav ul, | |
| nav ol { | |
| list-style: none; | |
| list-style-image: none; | |
| } | |
| /* ========================================================================== | |
| Embedded content | |
| ========================================================================== */ | |
| /** | |
| * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. | |
| * 2. Improve image quality when scaled in IE 7. | |
| */ | |
| img { | |
| border: 0; | |
| /* 1 */ | |
| -ms-interpolation-mode: bicubic; | |
| /* 2 */ | |
| } | |
| /** | |
| * Correct overflow displayed oddly in IE 9. | |
| */ | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| /* ========================================================================== | |
| Figures | |
| ========================================================================== */ | |
| /** | |
| * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. | |
| */ | |
| figure { | |
| margin: 0; | |
| } | |
| /* ========================================================================== | |
| Forms | |
| ========================================================================== */ | |
| /** | |
| * Correct margin displayed oddly in IE 6/7. | |
| */ | |
| form { | |
| margin: 0; | |
| } | |
| /** | |
| * Define consistent border, margin, and padding. | |
| */ | |
| fieldset { | |
| border: 1px solid #c0c0c0; | |
| margin: 0 2px; | |
| padding: 0.35em 0.625em 0.75em; | |
| } | |
| /** | |
| * 1. Correct color not being inherited in IE 6/7/8/9. | |
| * 2. Correct text not wrapping in Firefox 3. | |
| * 3. Correct alignment displayed oddly in IE 6/7. | |
| */ | |
| legend { | |
| border: 0; | |
| /* 1 */ | |
| padding: 0; | |
| white-space: normal; | |
| /* 2 */ | |
| *margin-left: -7px; | |
| /* 3 */ | |
| } | |
| /** | |
| * 1. Correct font size not being inherited in all browsers. | |
| * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, | |
| * and Chrome. | |
| * 3. Improve appearance and consistency in all browsers. | |
| */ | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-size: 100%; | |
| /* 1 */ | |
| margin: 0; | |
| /* 2 */ | |
| vertical-align: baseline; | |
| /* 3 */ | |
| *vertical-align: middle; | |
| /* 3 */ | |
| } | |
| /** | |
| * Address Firefox 3+ setting `line-height` on `input` using `!important` in | |
| * the UA stylesheet. | |
| */ | |
| button, | |
| input { | |
| line-height: normal; | |
| } | |
| /** | |
| * Address inconsistent `text-transform` inheritance for `button` and `select`. | |
| * All other form control elements do not inherit `text-transform` values. | |
| * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. | |
| * Correct `select` style inheritance in Firefox 4+ and Opera. | |
| */ | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| /** | |
| * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | |
| * and `video` controls. | |
| * 2. Correct inability to style clickable `input` types in iOS. | |
| * 3. Improve usability and consistency of cursor style between image-type | |
| * `input` and others. | |
| * 4. Remove inner spacing in IE 7 without affecting normal text inputs. | |
| * Known issue: inner spacing remains in IE 6. | |
| */ | |
| button, | |
| html input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"] { | |
| -webkit-appearance: button; | |
| /* 2 */ | |
| cursor: pointer; | |
| /* 3 */ | |
| *overflow: visible; | |
| /* 4 */ | |
| } | |
| /** | |
| * Re-set default cursor for disabled elements. | |
| */ | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default; | |
| } | |
| /** | |
| * 1. Address box sizing set to content-box in IE 8/9. | |
| * 2. Remove excess padding in IE 8/9. | |
| * 3. Remove excess padding in IE 7. | |
| * Known issue: excess padding remains in IE 6. | |
| */ | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| box-sizing: border-box; | |
| /* 1 */ | |
| padding: 0; | |
| /* 2 */ | |
| *height: 13px; | |
| /* 3 */ | |
| *width: 13px; | |
| /* 3 */ | |
| } | |
| /** | |
| * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. | |
| * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome | |
| * (include `-moz` to future-proof). | |
| */ | |
| input[type="search"] { | |
| -webkit-appearance: textfield; | |
| /* 1 */ | |
| -moz-box-sizing: content-box; | |
| -webkit-box-sizing: content-box; | |
| /* 2 */ | |
| box-sizing: content-box; | |
| } | |
| /** | |
| * Remove inner padding and search cancel button in Safari 5 and Chrome | |
| * on OS X. | |
| */ | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| /** | |
| * Remove inner padding and border in Firefox 3+. | |
| */ | |
| button::-moz-focus-inner, | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| /** | |
| * 1. Remove default vertical scrollbar in IE 6/7/8/9. | |
| * 2. Improve readability and alignment in all browsers. | |
| */ | |
| textarea { | |
| overflow: auto; | |
| /* 1 */ | |
| vertical-align: top; | |
| /* 2 */ | |
| } | |
| /* ========================================================================== | |
| Tables | |
| ========================================================================== */ | |
| /** | |
| * Remove most spacing between table cells. | |
| */ | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| *, | |
| *:before, | |
| *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| html, | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-family: sans-serif; | |
| } | |
| body, | |
| form, | |
| fieldset, | |
| legend, | |
| input, | |
| select, | |
| textarea, | |
| button { | |
| margin: 0; | |
| } | |
| html { | |
| font-size: 100%; | |
| } | |
| .section { | |
| position: relative; | |
| } | |
| .container { | |
| max-width: 960px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| .container-full { | |
| max-width: 960px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .col { | |
| float: left; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| [class*="pull-"], | |
| [class*="push-"] { | |
| position: relative; | |
| } | |
| .no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .col-1 { | |
| width: 8.33333%; | |
| width: calc(100% / 12 * 1); | |
| width: -webkit-calc(100% / 12 * 1); | |
| width: -moz-calc(100% / 12 * 1); | |
| } | |
| .col-2 { | |
| width: 16.66667%; | |
| width: calc(100% / 12 * 2); | |
| width: -webkit-calc(100% / 12 * 2); | |
| width: -moz-calc(100% / 12 * 2); | |
| } | |
| .col-3, | |
| .col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .col-4, | |
| .col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .col-5 { | |
| width: 41.66665%; | |
| width: calc(100% / 12 * 5); | |
| width: -webkit-calc(100% / 12 * 5); | |
| width: -moz-calc(100% / 12 * 5); | |
| } | |
| .col-6, | |
| .col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .col-7 { | |
| width: 58.33333%; | |
| width: calc(100% / 12 * 7); | |
| width: -webkit-calc(100% / 12 * 7); | |
| width: -moz-calc(100% / 12 * 7); | |
| } | |
| .col-8 { | |
| width: 66.66666%; | |
| width: calc(100% / 12 * 8); | |
| width: -webkit-calc(100% / 12 * 8); | |
| width: -moz-calc(100% / 12 * 8); | |
| } | |
| .col-9, | |
| .col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .col-10 { | |
| width: 83.33333%; | |
| width: calc(100% / 12 * 10); | |
| width: -webkit-calc(100% / 12 * 10); | |
| width: -moz-calc(100% / 12 * 10); | |
| } | |
| .col-11 { | |
| width: 91.66666%; | |
| width: calc(100% / 12 * 11); | |
| width: -webkit-calc(100% / 12 * 11); | |
| width: -moz-calc(100% / 12 * 11); | |
| } | |
| .col-12 { | |
| width: 100%; | |
| } | |
| .push-1 { | |
| left: 8.33333%; | |
| left: calc(100% / 12 * 1); | |
| left: -webkit-calc(100% / 12 * 1); | |
| left: -moz-calc(100% / 12 * 1); | |
| } | |
| .pull-1 { | |
| left: -8.33333%; | |
| left: calc(-100% / 12 * 1); | |
| left: -webkit-calc(-100% / 12 * 1); | |
| left: -moz-calc(-100% / 12 * 1); | |
| } | |
| .push-2 { | |
| left: 16.66667%; | |
| left: calc(100% / 12 * 2); | |
| left: -webkit-calc(100% / 12 * 2); | |
| left: -moz-calc(100% / 12 * 2); | |
| } | |
| .pull-2 { | |
| left: -16.66667%; | |
| left: calc(-100% / 12 * 2); | |
| left: -webkit-calc(-100% / 12 * 2); | |
| left: -moz-calc(-100% / 12 * 2); | |
| } | |
| .push-3, | |
| .push-1-4 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .pull-3, | |
| .pull-1-4 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .push-4, | |
| .push-1-3 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .pull-4, | |
| .pull-1-3 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .push-5 { | |
| left: 41.66665%; | |
| left: calc(100% / 12 * 5); | |
| left: -webkit-calc(100% / 12 * 5); | |
| left: -moz-calc(100% / 12 * 5); | |
| } | |
| .pull-5 { | |
| left: -41.66665%; | |
| left: calc(-100% / 12 * 5); | |
| left: -webkit-calc(-100% / 12 * 5); | |
| left: -moz-calc(-100% / 12 * 5); | |
| } | |
| .push-6, | |
| .push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .pull-6, | |
| .pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .push-7 { | |
| left: 58.33333%; | |
| left: calc(100% / 12 * 7); | |
| left: -webkit-calc(100% / 12 * 7); | |
| left: -moz-calc(100% / 12 * 7); | |
| } | |
| .pull-7 { | |
| left: -58.33333%; | |
| left: calc(-100% / 12 * 7); | |
| left: -webkit-calc(-100% / 12 * 7); | |
| left: -moz-calc(-100% / 12 * 7); | |
| } | |
| .push-8 { | |
| left: 66.66666%; | |
| left: calc(100% / 12 * 8); | |
| left: -webkit-calc(100% / 12 * 8); | |
| left: -moz-calc(100% / 12 * 8); | |
| } | |
| .pull-8 { | |
| left: -66.66666%; | |
| left: calc(-100% / 12 * 8); | |
| left: -webkit-calc(-100% / 12 * 8); | |
| left: -moz-calc(-100% / 12 * 8); | |
| } | |
| .push-9, | |
| .push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .pull-9, | |
| .pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .push-10 { | |
| left: 83.33333%; | |
| left: calc(100% / 12 * 10); | |
| left: -webkit-calc(100% / 12 * 10); | |
| left: -moz-calc(100% / 12 * 10); | |
| } | |
| .pull-10 { | |
| left: -83.33333%; | |
| left: calc(-100% / 12 * 10); | |
| left: -webkit-calc(-100% / 12 * 10); | |
| left: -moz-calc(-100% / 12 * 10); | |
| } | |
| .push-11 { | |
| left: 91.66666%; | |
| left: calc(100% / 12 * 11); | |
| left: -webkit-calc(100% / 12 * 11); | |
| left: -moz-calc(100% / 12 * 11); | |
| } | |
| .pull-11 { | |
| left: -91.66666%; | |
| left: calc(-100% / 12 * 11); | |
| left: -webkit-calc(-100% / 12 * 11); | |
| left: -moz-calc(-100% / 12 * 11); | |
| } | |
| .row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .no-desktop { | |
| display: none; | |
| } | |
| .no-margin { | |
| margin: 0; | |
| } | |
| .no-padding { | |
| padding: 0; | |
| } | |
| @media only screen and (min-width: 660px) and (max-width: 959px) { | |
| .container, | |
| .tablet-container { | |
| max-width: 960px; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .container:first-child, | |
| .tablet-container:first-child { | |
| margin-left: auto; | |
| } | |
| .tablet-container-full { | |
| padding-left: 0; | |
| padding-right: 0; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .tablet-container-full:first-child { | |
| margin-left: auto; | |
| } | |
| .tablet-no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .tablet-col-1 { | |
| width: 8.33333%; | |
| width: calc(100% / 12 * 1); | |
| width: -webkit-calc(100% / 12 * 1); | |
| width: -moz-calc(100% / 12 * 1); | |
| } | |
| .tablet-col-2 { | |
| width: 16.66667%; | |
| width: calc(100% / 12 * 2); | |
| width: -webkit-calc(100% / 12 * 2); | |
| width: -moz-calc(100% / 12 * 2); | |
| } | |
| .tablet-col-3, | |
| .tablet-col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .tablet-col-4, | |
| .tablet-col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .tablet-col-5 { | |
| width: 41.66665%; | |
| width: calc(100% / 12 * 5); | |
| width: -webkit-calc(100% / 12 * 5); | |
| width: -moz-calc(100% / 12 * 5); | |
| } | |
| .tablet-col-6, | |
| .tablet-col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .tablet-col-7 { | |
| width: 58.33333%; | |
| width: calc(100% / 12 * 7); | |
| width: -webkit-calc(100% / 12 * 7); | |
| width: -moz-calc(100% / 12 * 7); | |
| } | |
| .tablet-col-8 { | |
| width: 66.66666%; | |
| width: calc(100% / 12 * 8); | |
| width: -webkit-calc(100% / 12 * 8); | |
| width: -moz-calc(100% / 12 * 8); | |
| } | |
| .tablet-col-9, | |
| .tablet-col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .tablet-col-10 { | |
| width: 83.33333%; | |
| width: calc(100% / 12 * 10); | |
| width: -webkit-calc(100% / 12 * 10); | |
| width: -moz-calc(100% / 12 * 10); | |
| } | |
| .tablet-col-11 { | |
| width: 91.66666%; | |
| width: calc(100% / 12 * 11); | |
| width: -webkit-calc(100% / 12 * 11); | |
| width: -moz-calc(100% / 12 * 11); | |
| } | |
| .tablet-col-12 { | |
| width: 100%; | |
| } | |
| .tablet-push-1 { | |
| left: 8.33333%; | |
| left: calc(100% / 12 * 1); | |
| left: -webkit-calc(100% / 12 * 1); | |
| left: -moz-calc(100% / 12 * 1); | |
| } | |
| .tablet-pull-1 { | |
| left: -8.33333%; | |
| left: calc(-100% / 12 * 1); | |
| left: -webkit-calc(-100% / 12 * 1); | |
| left: -moz-calc(-100% / 12 * 1); | |
| } | |
| .tablet-push-2 { | |
| left: 16.66667%; | |
| left: calc(100% / 12 * 2); | |
| left: -webkit-calc(100% / 12 * 2); | |
| left: -moz-calc(100% / 12 * 2); | |
| } | |
| .tablet-pull-2 { | |
| left: -16.66667%; | |
| left: calc(-100% / 12 * 2); | |
| left: -webkit-calc(-100% / 12 * 2); | |
| left: -moz-calc(-100% / 12 * 2); | |
| } | |
| .tablet-push-3, | |
| .tablet-push-1-4 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .tablet-pull-3, | |
| .tablet-pull-1-4 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .tablet-push-4, | |
| .tablet-push-1-3 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .tablet-pull-4, | |
| .tablet-pull-1-3 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .tablet-push-5 { | |
| left: 41.66665%; | |
| left: calc(100% / 12 * 5); | |
| left: -webkit-calc(100% / 12 * 5); | |
| left: -moz-calc(100% / 12 * 5); | |
| } | |
| .tablet-pull-5 { | |
| left: -41.66665%; | |
| left: calc(-100% / 12 * 5); | |
| left: -webkit-calc(-100% / 12 * 5); | |
| left: -moz-calc(-100% / 12 * 5); | |
| } | |
| .tablet-push-6, | |
| .tablet-push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .tablet-pull-6, | |
| .tablet-pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .tablet-push-7 { | |
| left: 58.33333%; | |
| left: calc(100% / 12 * 7); | |
| left: -webkit-calc(100% / 12 * 7); | |
| left: -moz-calc(100% / 12 * 7); | |
| } | |
| .tablet-pull-7 { | |
| left: -58.33333%; | |
| left: calc(-100% / 12 * 7); | |
| left: -webkit-calc(-100% / 12 * 7); | |
| left: -moz-calc(-100% / 12 * 7); | |
| } | |
| .tablet-push-8 { | |
| left: 66.66666%; | |
| left: calc(100% / 12 * 8); | |
| left: -webkit-calc(100% / 12 * 8); | |
| left: -moz-calc(100% / 12 * 8); | |
| } | |
| .tablet-pull-8 { | |
| left: -66.66666%; | |
| left: calc(-100% / 12 * 8); | |
| left: -webkit-calc(-100% / 12 * 8); | |
| left: -moz-calc(-100% / 12 * 8); | |
| } | |
| .tablet-push-9, | |
| .tablet-push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .tablet-pull-9, | |
| .tablet-pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .tablet-push-10 { | |
| left: 83.33333%; | |
| left: calc(100% / 12 * 10); | |
| left: -webkit-calc(100% / 12 * 10); | |
| left: -moz-calc(100% / 12 * 10); | |
| } | |
| .tablet-pull-10 { | |
| left: -83.33333%; | |
| left: calc(-100% / 12 * 10); | |
| left: -webkit-calc(-100% / 12 * 10); | |
| left: -moz-calc(-100% / 12 * 10); | |
| } | |
| .tablet-push-11 { | |
| left: 91.66666%; | |
| left: calc(100% / 12 * 11); | |
| left: -webkit-calc(100% / 12 * 11); | |
| left: -moz-calc(100% / 12 * 11); | |
| } | |
| .tablet-pull-11 { | |
| left: -91.66666%; | |
| left: calc(-100% / 12 * 11); | |
| left: -webkit-calc(-100% / 12 * 11); | |
| left: -moz-calc(-100% / 12 * 11); | |
| } | |
| .tablet-no-push, | |
| .tablet-no-pull { | |
| left: auto; | |
| } | |
| .tablet-row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .tablet-full { | |
| left: auto; | |
| clear: both; | |
| float: none; | |
| width: 100%; | |
| margin: 1em 0 0 0; | |
| display: block; | |
| } | |
| .tablet-full:first-child { | |
| margin-top: 0; | |
| } | |
| .tablet-text-left { | |
| text-align: left; | |
| } | |
| .tablet-text-right { | |
| text-align: right; | |
| } | |
| .tablet-text-center { | |
| text-align: center; | |
| } | |
| .tablet-left { | |
| float: left; | |
| } | |
| .tablet-right { | |
| float: right; | |
| } | |
| .tablet-no-float { | |
| float: none; | |
| } | |
| .tablet-no-margin { | |
| margin: 0; | |
| } | |
| .tablet-no-padding { | |
| padding: 0; | |
| } | |
| .no-tablet { | |
| display: none; | |
| } | |
| .show-tablet { | |
| display: block; | |
| } | |
| } | |
| @media only screen and (max-width: 659px) { | |
| .container, | |
| .mobile-container { | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .container:first-child, | |
| .mobile-container:first-child { | |
| margin-left: auto; | |
| } | |
| .mobile-container-full { | |
| padding-left: 0; | |
| padding-right: 0; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .mobile-container-full:first-child { | |
| margin-left: auto; | |
| } | |
| .mobile-no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .mobile-col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .mobile-col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .mobile-col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .mobile-col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .mobile-push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .mobile-pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .mobile-push-1-3 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .mobile-pull-1-3 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .mobile-push-1-4 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .mobile-pull-1-4 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .mobile-push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .mobile-pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .mobile-no-push, | |
| .mobile-no-pull { | |
| left: auto; | |
| } | |
| .mobile-row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .mobile-full { | |
| left: auto; | |
| clear: both; | |
| float: none; | |
| width: 100%; | |
| margin: 0.2em 0 0 0; | |
| display: block; | |
| } | |
| .mobile-full:first-child { | |
| margin-top: 0; | |
| } | |
| .mobile-text-left { | |
| text-align: left; | |
| } | |
| .mobile-text-right { | |
| text-align: right; | |
| } | |
| .mobile-text-center { | |
| text-align: center; | |
| } | |
| .mobile-left { | |
| float: left; | |
| } | |
| .mobile-right { | |
| float: right; | |
| } | |
| .mobile-no-float { | |
| float: none; | |
| } | |
| .mobile-no-margin { | |
| margin: 0; | |
| } | |
| .mobile-no-padding { | |
| padding: 0; | |
| } | |
| .no-mobile { | |
| display: none; | |
| } | |
| .show-mobile { | |
| display: block; | |
| } | |
| } | |
| @media print { | |
| * { | |
| background: transparent; | |
| } | |
| a, | |
| a:visited { | |
| text-decoration: underline; | |
| } | |
| abbr[title]:after { | |
| content: " (" attr(title) ")"; | |
| } | |
| pre, | |
| blockquote { | |
| border: 1px solid #999; | |
| page-break-inside: avoid; | |
| } | |
| thead { | |
| display: table-header-group; | |
| } | |
| tr, | |
| img { | |
| page-break-inside: avoid; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| @page { | |
| margin: 0.5cm; | |
| } | |
| p, | |
| h2, | |
| h3 { | |
| orphans: 3; | |
| widows: 3; | |
| } | |
| h2, | |
| h3 { | |
| page-break-after: avoid; | |
| } | |
| } | |
| @font-face { | |
| font-family: 'Source Sans Pro'; | |
| src: url('fonts/SourceSansPro-ExtraLight.otf'); | |
| font-weight: 100; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: 'Source Sans Pro'; | |
| src: url('fonts/SourceSansPro-ExtraLightIt.otf'); | |
| font-weight: 100; | |
| font-style: italic; | |
| } | |
| @font-face { | |
| font-family: 'Source Sans Pro'; | |
| src: url('fonts/SourceSansPro-Light.otf'); | |
| font-weight: 300; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: 'Source Sans Pro'; | |
| src: url('fonts/SourceSansPro-Regular.otf'); | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: 'Source Sans Pro'; | |
| src: url('fonts/SourceSansPro-Semibold.otf'); | |
| font-weight: 500; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: 'Source Sans Pro'; | |
| src: url('fonts/SourceSansPro-Bold.otf'); | |
| font-weight: 700; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: 'Montserrat'; | |
| src: url('fonts/Montserrat-Regular.otf'); | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| .dapp-clear-fix { | |
| clear: both; | |
| } | |
| .dapp-overflow { | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .dapp-shorten-text { | |
| display: inline-block; | |
| -o-text-overflow: ellipsis; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| max-width: 100%; | |
| } | |
| .dapp-button-reset { | |
| background: none; | |
| border: 0; | |
| padding: 0; | |
| margin: 0; | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| .dapp-button-reset:hover, | |
| .dapp-button-reset:focus { | |
| outline: 0; | |
| } | |
| .dapp-shadow-none { | |
| -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
| -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
| box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
| } | |
| .dapp-shadow-small { | |
| -webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3); | |
| -moz-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3); | |
| box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3); | |
| } | |
| .dapp-shadow-medium { | |
| -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); | |
| -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); | |
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .dapp-shadow-large { | |
| -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.3); | |
| -moz-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.3); | |
| box-shadow: 0 1px 16px rgba(0, 0, 0, 0.3); | |
| } | |
| .dapp-horizontal-menu, | |
| .dapp-vertical-menu { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .dapp-horizontal-menu li { | |
| display: inline-block; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .dapp-vertical-menu li { | |
| display: block; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .cubic-bezier { | |
| -webkit-transition-timing-function: cubic-bezier(0.15, 0.3, 0.1, 1); | |
| -moz-transition-timing-function: cubic-bezier(0.15, 0.3, 0.1, 1); | |
| -o-transition-timing-function: cubic-bezier(0.15, 0.3, 0.1, 1); | |
| transition-timing-function: cubic-bezier(0.15, 0.3, 0.1, 1); | |
| } | |
| .cubic-bezier.animate { | |
| -webkit-transition-timing-function: cubic-bezier(0.5, 0.1, 0.2, 1); | |
| -moz-transition-timing-function: cubic-bezier(0.5, 0.1, 0.2, 1); | |
| -o-transition-timing-function: cubic-bezier(0.5, 0.1, 0.2, 1); | |
| transition-timing-function: cubic-bezier(0.5, 0.1, 0.2, 1); | |
| } | |
| #dapp-form-helper-iframe { | |
| display: none; | |
| } | |
| /* PROGRESSBAR */ | |
| progress { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| height: 9.2px; | |
| margin: 4.6px; | |
| color: #0e73b8; | |
| } | |
| progress::-webkit-progress-bar { | |
| background-color: rgba(245, 244, 242, 0.9); | |
| border-radius: 2px; | |
| box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| progress::-moz-progress-bar { | |
| background-color: rgba(245, 244, 242, 0.9); | |
| border-radius: 2px; | |
| box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| progress::progress-bar { | |
| background-color: rgba(245, 244, 242, 0.9); | |
| border-radius: 2px; | |
| box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| progress::-webkit-progress-value { | |
| background-color: #0e73b8; | |
| opacity: 0.8; | |
| border-radius: 2px; | |
| } | |
| progress::-moz-progress-value { | |
| background-color: #0e73b8; | |
| opacity: 0.8; | |
| border-radius: 2px; | |
| } | |
| progress::progress-value { | |
| background-color: #0e73b8; | |
| opacity: 0.8; | |
| border-radius: 2px; | |
| } | |
| .dapp-progress { | |
| position: relative; | |
| width: 100%; | |
| height: 18.4px; | |
| border-bottom: 1px solid #0e73b8; | |
| } | |
| .dapp-progress > span { | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| line-height: 18.4px; | |
| text-align: center; | |
| font-size: 0.7em; | |
| } | |
| .dapp-progress .dapp-bar { | |
| height: 100%; | |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwZTczYjgiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNjYTdmMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=); | |
| background-image: -webkit-linear-gradient(bottom, #0e73b8 0%, #3ca7f0 100%); | |
| background-image: -moz-linear-gradient(bottom, #0e73b8 0%, #3ca7f0 100%); | |
| background-image: -o-linear-gradient(bottom, #0e73b8 0%, #3ca7f0 100%); | |
| background-image: linear-gradient(to top, #0e73b8 0%, #3ca7f0 100%); | |
| -webkit-transition: width 10400ms linear; | |
| -moz-transition: width 10400ms linear; | |
| -o-transition: width 10400ms linear; | |
| transition: width 10400ms linear; | |
| } | |
| .dapp-message { | |
| position: relative; | |
| max-width: 512px; | |
| margin: 48px 0; | |
| font-size: 1.5em; | |
| font-weight: 100; | |
| line-height: 27pt; | |
| } | |
| .dapp-count { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-align: center; | |
| -moz-box-align: center; | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 0; | |
| padding: 0 8px; | |
| color: #FAFAFA; | |
| font-weight: 100; | |
| zoom: 1; | |
| filter: alpha(opacity=70); | |
| -webkit-opacity: 0.7; | |
| -moz-opacity: 0.7; | |
| opacity: 0.7; | |
| -webkit-transition: opacity 400ms; | |
| -moz-transition: opacity 400ms; | |
| -o-transition: opacity 400ms; | |
| transition: opacity 400ms; | |
| } | |
| .dapp-count.animate { | |
| zoom: 1; | |
| filter: alpha(opacity=0); | |
| -webkit-opacity: 0; | |
| -moz-opacity: 0; | |
| opacity: 0; | |
| } | |
| .active .dapp-count { | |
| background-color: #f5f4f2; | |
| color: #9c9090; | |
| } | |
| .dapp-url-bar { | |
| display: block; | |
| text-align: center; | |
| width: 100%; | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-border-radius: 8px; | |
| -moz-border-radius: 8px; | |
| border-radius: 8px; | |
| } | |
| .dapp-account-list { | |
| list-style-type: none; | |
| overflow: auto; | |
| padding-left: 0; | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .dapp-account-list li { | |
| display: block; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .dapp-account-list li { | |
| padding: 4.6px 0; | |
| padding-left: 48px; | |
| min-height: 46px; | |
| position: relative; | |
| overflow: hidden; | |
| border-bottom: solid 1px #FAFAFA; | |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigwLDAsMCkiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y1ZjRmMiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=); | |
| background-image: -webkit-linear-gradient(bottom, transparent 0%, #f5f4f2 100%); | |
| background-image: -moz-linear-gradient(bottom, transparent 0%, #f5f4f2 100%); | |
| background-image: -o-linear-gradient(bottom, transparent 0%, #f5f4f2 100%); | |
| background-image: linear-gradient(to top, transparent 0%, #f5f4f2 100%); | |
| font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, Sans; | |
| } | |
| .dapp-account-list li.selected, | |
| .dapp-account-list li button.selected { | |
| background: #02A8F3; | |
| min-height: 36.8px; | |
| } | |
| .dapp-account-list li.selected:hover, | |
| .dapp-account-list li button.selected:hover, | |
| .dapp-account-list li.selected:focus, | |
| .dapp-account-list li button.selected:focus { | |
| background: #02A8F3; | |
| } | |
| .dapp-account-list li.selected h3, | |
| .dapp-account-list li button.selected h3, | |
| .dapp-account-list li.selected span, | |
| .dapp-account-list li button.selected span { | |
| color: #FAFAFA; | |
| text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0; | |
| } | |
| .dapp-account-list li.selected figure, | |
| .dapp-account-list li button.selected figure { | |
| position: absolute; | |
| color: #FAFAFA; | |
| right: 0; | |
| top: 0; | |
| font-size: 160%; | |
| z-index: 10; | |
| bottom: 0; | |
| text-align: center; | |
| padding-top: 4px; | |
| padding: 9px 10px; | |
| background: linear-gradient(to right, transparent, #02A8F3 50%); | |
| } | |
| .dapp-account-list li button { | |
| position: relative; | |
| display: block; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: 4.6px 0; | |
| padding-left: 48px; | |
| margin: -4.6px 0; | |
| margin-left: -48px; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 36.8px; | |
| font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, Sans; | |
| text-align: left; | |
| } | |
| .dapp-account-list li button:hover, | |
| .dapp-account-list li button:focus { | |
| background: #FAFAFA; | |
| border: 0; | |
| } | |
| .dapp-account-list li .dapp-identicon { | |
| position: absolute; | |
| top: 6.13333333px; | |
| left: 8px; | |
| } | |
| .dapp-account-list li h3 { | |
| display: inline-block; | |
| -o-text-overflow: ellipsis; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| max-width: 100%; | |
| display: block; | |
| padding: 0; | |
| margin: 0; | |
| color: #02A8F3; | |
| text-transform: none; | |
| font-weight: 400; | |
| font-size: 90%; | |
| text-shadow: #fff 0 1px 0; | |
| } | |
| .dapp-account-list li h3 + span { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| font-size: 75%; | |
| opacity: 0.5; | |
| color: #827a7a; | |
| } | |
| a, | |
| a:visited, | |
| button { | |
| text-decoration: none; | |
| color: #02A8F3; | |
| outline: 0; | |
| font-weight: 400; | |
| } | |
| a:hover, | |
| a:visited:hover, | |
| button:hover, | |
| a:focus, | |
| a:visited:focus, | |
| button:focus { | |
| outline: 0; | |
| } | |
| a:focus, | |
| a:visited:focus, | |
| button:focus { | |
| border-bottom: 1px dotted #02A8F3; | |
| } | |
| a:active, | |
| a:visited:active, | |
| button:active { | |
| -webkit-transform: scale(0.95); | |
| -moz-transform: scale(0.95); | |
| -o-transform: scale(0.95); | |
| -ms-transform: scale(0.95); | |
| transform: scale(0.95); | |
| border-bottom: 0; | |
| } | |
| button { | |
| background: none; | |
| border: 0; | |
| padding: 0; | |
| margin: 0; | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| font-weight: inherit; | |
| } | |
| button:hover, | |
| button:focus { | |
| outline: 0; | |
| } | |
| hr { | |
| border: 0; | |
| height: 0; | |
| margin: 32px 0; | |
| background-color: transparent; | |
| border-bottom: 1px solid #CCC6C6; | |
| } | |
| h1 { | |
| margin: 16px 0; | |
| margin-top: 48px; | |
| font-weight: 100; | |
| font-size: 2.2em; | |
| color: #827a7a; | |
| } | |
| h1 span { | |
| font-weight: 500; | |
| } | |
| h1 + h2 { | |
| margin-top: 0; | |
| } | |
| h1 strong { | |
| font-weight: 400; | |
| } | |
| h2 { | |
| display: inline-block; | |
| padding-bottom: 1px; | |
| font-weight: 500; | |
| font-size: 1.2em; | |
| text-transform: uppercase; | |
| color: #827a7a; | |
| font-weight: 600; | |
| } | |
| h2 + table { | |
| margin-top: 0; | |
| } | |
| h3 { | |
| margin: 16px 0; | |
| padding: 0; | |
| color: rgba(130, 122, 122, 0.7); | |
| text-transform: uppercase; | |
| font-weight: 500; | |
| font-size: 1em; | |
| } | |
| h4 { | |
| margin: 16px 0; | |
| padding: 0; | |
| color: rgba(130, 122, 122, 0.7); | |
| font-weight: 500; | |
| font-size: 1em; | |
| } | |
| pre, | |
| code { | |
| /* overflow-y: auto; */ | |
| /* overflow-x: hidden; */ | |
| -webkit-overflow-scrolling: touch; | |
| word-break: break-word; | |
| padding: 6.13333333px; | |
| background-color: #f5f4f2; | |
| font-size: 0.9em; | |
| text-align: left; | |
| line-height: 2 | |
| } | |
| table { | |
| width: 100%; | |
| margin: 16px 0; | |
| } | |
| table.dapp-zebra tbody tr:nth-child(odd) { | |
| background-color: rgba(204, 198, 198, 0.3); | |
| } | |
| table.dapp-zebra thead + tbody tr:nth-child(even) { | |
| background-color: rgba(204, 198, 198, 0.3); | |
| } | |
| table + h2, | |
| table + h3 { | |
| margin-top: 32px; | |
| } | |
| table td { | |
| padding: 12.26666667px 16px; | |
| } | |
| table td h2 { | |
| margin: 0; | |
| padding: 0; | |
| background-color: transparent; | |
| color: #827a7a; | |
| text-transform: none; | |
| font-style: normal; | |
| } | |
| table td p { | |
| padding-top: 8px; | |
| margin: 0; | |
| font-size: 0.9em; | |
| } | |
| table thead { | |
| background-color: #827a7a; | |
| color: #FAFAFA; | |
| text-transform: uppercase; | |
| } | |
| table tbody tr td span { | |
| display: inline-block; | |
| -o-text-overflow: ellipsis; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| max-width: 100%; | |
| } | |
| .dapp-input { | |
| border: 0; | |
| border-bottom: solid 2px #CCC6C6; | |
| background-color: #f5f4f2; | |
| color: #02A8F3; | |
| } | |
| .dapp-input::-webkit-input-placeholder { | |
| color: #CCC6C6; | |
| } | |
| .dapp-input:-moz-placeholder { | |
| color: #CCC6C6; | |
| } | |
| .dapp-input::-moz-placeholder { | |
| color: #CCC6C6; | |
| } | |
| .dapp-input:-ms-input-placeholder { | |
| color: #CCC6C6; | |
| } | |
| .dapp-input:disabled { | |
| color: #695e5e; | |
| } | |
| .dapp-input.dapp-tiny { | |
| font-size: 0.6em; | |
| border-bottom-width: 1px; | |
| } | |
| .dapp-input.dapp-small { | |
| font-size: 0.8em; | |
| } | |
| .dapp-input.dapp-large { | |
| font-size: 1.5em; | |
| } | |
| .dapp-input.dapp-error { | |
| color: #C20E25; | |
| background: rgba(194, 14, 37, 0.1); | |
| border-color: rgba(194, 14, 37, 0.15); | |
| } | |
| .dapp-address-input input { | |
| border: 0; | |
| border-bottom: solid 2px #CCC6C6; | |
| background-color: #f5f4f2; | |
| color: #02A8F3; | |
| } | |
| .dapp-address-input input::-webkit-input-placeholder { | |
| color: #CCC6C6; | |
| } | |
| .dapp-address-input input:-moz-placeholder { | |
| color: #CCC6C6; | |
| } | |
| .dapp-address-input input::-moz-placeholder { | |
| color: #CCC6C6; | |
| } | |
| .dapp-address-input input:-ms-input-placeholder { | |
| color: #CCC6C6; | |
| } | |
| .dapp-address-input input:disabled { | |
| color: #695e5e; | |
| } | |
| .dapp-address-input input.dapp-tiny { | |
| font-size: 0.6em; | |
| border-bottom-width: 1px; | |
| } | |
| .dapp-address-input input.dapp-small { | |
| font-size: 0.8em; | |
| } | |
| .dapp-address-input input.dapp-large { | |
| font-size: 1.5em; | |
| } | |
| .dapp-address-input input.dapp-error { | |
| color: #C20E25; | |
| background: rgba(194, 14, 37, 0.1); | |
| border-color: rgba(194, 14, 37, 0.15); | |
| } | |
| input, | |
| select, | |
| textarea { | |
| border: 0; | |
| border-bottom: solid 2px #CCC6C6; | |
| background-color: #f5f4f2; | |
| color: #02A8F3; | |
| display: inline-block; | |
| width: 300px; | |
| max-width: 100%; | |
| margin-top: 18.4px; | |
| padding: 6.13333333px 16px; | |
| padding-bottom: 4.08888889px; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-border-radius: 0; | |
| -moz-border-radius: 0; | |
| border-radius: 0; | |
| font-size: 1em; | |
| font-weight: 300; | |
| } | |
| input::-webkit-input-placeholder, | |
| select::-webkit-input-placeholder, | |
| textarea::-webkit-input-placeholder { | |
| color: #CCC6C6; | |
| } | |
| input:-moz-placeholder, | |
| select:-moz-placeholder, | |
| textarea:-moz-placeholder { | |
| color: #CCC6C6; | |
| } | |
| input::-moz-placeholder, | |
| select::-moz-placeholder, | |
| textarea::-moz-placeholder { | |
| color: #CCC6C6; | |
| } | |
| input:-ms-input-placeholder, | |
| select:-ms-input-placeholder, | |
| textarea:-ms-input-placeholder { | |
| color: #CCC6C6; | |
| } | |
| input:disabled, | |
| select:disabled, | |
| textarea:disabled { | |
| color: #695e5e; | |
| } | |
| input.dapp-tiny, | |
| select.dapp-tiny, | |
| textarea.dapp-tiny { | |
| font-size: 0.6em; | |
| border-bottom-width: 1px; | |
| } | |
| input.dapp-small, | |
| select.dapp-small, | |
| textarea.dapp-small { | |
| font-size: 0.8em; | |
| } | |
| input.dapp-large, | |
| select.dapp-large, | |
| textarea.dapp-large { | |
| font-size: 1.5em; | |
| } | |
| input.dapp-error, | |
| select.dapp-error, | |
| textarea.dapp-error { | |
| color: #C20E25; | |
| background: rgba(194, 14, 37, 0.1); | |
| border-color: rgba(194, 14, 37, 0.15); | |
| } | |
| input:focus, | |
| select:focus, | |
| textarea:focus { | |
| outline: 0; | |
| border-color: #02A8F3; | |
| } | |
| h1 + input, | |
| h1 + select, | |
| h1 + textarea, | |
| h2 + input, | |
| h2 + select, | |
| h2 + textarea, | |
| h3 + input, | |
| h3 + select, | |
| h3 + textarea { | |
| margin-top: 0; | |
| } | |
| :disabled { | |
| color: #695e5e; | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| display: inline-block; | |
| position: relative; | |
| margin: 0; | |
| outline: none !important; | |
| -webkit-appearance: none; | |
| width: auto; | |
| width: 24px; | |
| height: 24px; | |
| } | |
| input[type="checkbox"]::before, | |
| input[type="radio"]::before { | |
| content: ''; | |
| position: relative; | |
| top: 0; | |
| left: 0; | |
| display: block; | |
| background: #f5f4f2; | |
| border: 1px solid #f5f4f2; | |
| -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); | |
| box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2); | |
| width: 24px; | |
| height: 24px; | |
| } | |
| input[type="checkbox"]:focus::before, | |
| input[type="radio"]:focus::before { | |
| border-color: rgba(102, 145, 194, 0.4); | |
| } | |
| input[type="checkbox"]:disabled::before, | |
| input[type="radio"]:disabled::before { | |
| cursor: not-allowed; | |
| background-color: rgba(245, 244, 242, 0.8); | |
| border-color: #f5f4f2; | |
| } | |
| input[type="checkbox"]:after, | |
| input[type="radio"]:after { | |
| content: ''; | |
| display: inline-block; | |
| position: absolute; | |
| top: 6px; | |
| left: 6px; | |
| background: #02A8F3; | |
| -webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3); | |
| -moz-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3); | |
| box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3); | |
| width: 12px; | |
| height: 12px; | |
| -webkit-transition: -webkit-transform 400ms; | |
| -moz-transition: -moz-transform 400ms; | |
| -o-transition: -o-transform 400ms; | |
| transition: -webkit-transform 400ms,-moz-transform 400ms,-o-transform 400ms,transform 400ms; | |
| -webkit-transform: scale(0); | |
| -moz-transform: scale(0); | |
| -o-transform: scale(0); | |
| -ms-transform: scale(0); | |
| transform: scale(0); | |
| } | |
| input[type="checkbox"]:checked:after, | |
| input[type="radio"]:checked:after { | |
| -webkit-transform: scale(1); | |
| -moz-transform: scale(1); | |
| -o-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| input[type="checkbox"]:disabled:after, | |
| input[type="radio"]:disabled:after { | |
| background: rgba(102, 145, 194, 0.4); | |
| } | |
| input[type="radio"] { | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 50%; | |
| } | |
| input[type="radio"]:before { | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 50%; | |
| } | |
| input[type="radio"]:after { | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 50%; | |
| } | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| padding: 0; | |
| border: 0; | |
| background-color: transparent; | |
| } | |
| input[type="range"]::-webkit-slider-runnable-track { | |
| height: 5px; | |
| background-color: #CCC6C6; | |
| border: none; | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| border: none; | |
| height: 16px; | |
| width: 16px; | |
| border-radius: 50%; | |
| background-color: #695e5e; | |
| margin-top: -6px; | |
| } | |
| input[type="range"]:focus { | |
| outline: none; | |
| } | |
| input[type="range"]:focus::-webkit-slider-thumb { | |
| background-color: #02A8F3; | |
| } | |
| input[type="range"]::-moz-range-track { | |
| height: 5px; | |
| background-color: #CCC6C6; | |
| border: none; | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| -webkit-appearance: none; | |
| border: none; | |
| height: 16px; | |
| width: 16px; | |
| border-radius: 50%; | |
| background-color: #695e5e; | |
| margin-top: -4px; | |
| } | |
| input[type="range"]:focus { | |
| outline: none; | |
| } | |
| input[type="range"]:focus::-moz-range-thumb { | |
| background-color: #02A8F3; | |
| } | |
| label { | |
| font-weight: 300; | |
| } | |
| fieldset { | |
| border: 0; | |
| padding: 0; | |
| margin: 16px; | |
| } | |
| select { | |
| height: 45px; | |
| } | |
| body { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-direction: normal; | |
| -moz-box-direction: normal; | |
| -webkit-box-orient: vertical; | |
| -moz-box-orient: vertical; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| padding: 0; | |
| margin: 0; | |
| background-color: #FAFAFA; | |
| font: 100 16px 'Source Sans Pro', 'Helvetica Neue', arial, sans-serif; | |
| color: #111; | |
| padding: 64px 92px; | |
| } | |
| body.disable-scroll { | |
| overflow: hidden; | |
| } | |
| body.blur .dapp-flex-content, | |
| body.blur .dapp-footer, | |
| body.blur .dapp-header { | |
| -webkit-filter: blur(4px); | |
| -moz-filter: blur(4px); | |
| -ms-filter: blur(4px); | |
| filter: blur(4px); | |
| } | |
| .ethereum-dapp-url-bar-style-transparent .dapp-header { | |
| padding-top: 73.6px; | |
| } | |
| .dapp-grid { | |
| z-index: 999; | |
| background: #FFF url('dapp-styles/hex-grid-tile.png'); | |
| background-size: 64px 111px; | |
| position: absolute; | |
| min-height: 100%; | |
| left: 0; | |
| right: 0; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| } | |
| .dapp-container { | |
| display: block; | |
| position: relative; | |
| margin: 0 auto; | |
| max-width: 960px; | |
| } | |
| .dapp-header, | |
| .dapp-aside, | |
| .dapp-content, | |
| .dapp-footer { | |
| position: relative; | |
| padding: 12.26666667px 32px; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .dapp-header { | |
| height: 64px; | |
| margin-top: -5px; | |
| padding-top: 17.26666667px; | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjZTRkZWRlIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjbGVzc2hhdC1nZW5lcmF0ZWQpIiAvPjwvc3ZnPg==); | |
| background-image: -webkit-linear-gradient(top, #ffffff 0, #e4dede 90%); | |
| background-image: -moz-linear-gradient(top, #ffffff 0, #e4dede 90%); | |
| background-image: -o-linear-gradient(top, #ffffff 0, #e4dede 90%); | |
| background-image: linear-gradient(to bottom, #ffffff 0, #e4dede 90%); | |
| } | |
| .dapp-header.dapp-small { | |
| height: 18.4px; | |
| } | |
| .dapp-header.dapp-small nav li a i { | |
| zoom: 1; | |
| filter: alpha(opacity=0); | |
| -webkit-opacity: 0; | |
| -moz-opacity: 0; | |
| opacity: 0; | |
| } | |
| .dapp-header nav { | |
| position: absolute; | |
| bottom: 0; | |
| } | |
| .dapp-header nav ul { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .dapp-header nav ul li { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .dapp-header nav ul a { | |
| display: inline-block; | |
| padding: 6.13333333px 32px; | |
| text-align: center; | |
| border-bottom: 5px solid transparent; | |
| color: #4677af; | |
| } | |
| .dapp-header nav ul a:focus { | |
| border-color: #FAFAFA; | |
| } | |
| .dapp-header nav ul a.active { | |
| -webkit-transform-origin: 50% 100%; | |
| -moz-transform-origin: 50% 100%; | |
| -o-transform-origin: 50% 100%; | |
| -ms-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| color: #b7a6a6; | |
| border-bottom: 5px solid #FAFAFA; | |
| } | |
| .dapp-header nav ul a:active { | |
| border-bottom: transparent; | |
| } | |
| .dapp-header nav ul a i { | |
| font-size: 1.5em; | |
| -webkit-transition: opacity 200ms; | |
| -moz-transition: opacity 200ms; | |
| -o-transition: opacity 200ms; | |
| transition: opacity 200ms; | |
| } | |
| .dapp-header nav ul a span { | |
| display: block; | |
| text-transform: uppercase; | |
| font-weight: 400; | |
| } | |
| .dapp-footer { | |
| height: 96px; | |
| background-color: #111; | |
| } | |
| .dapp-flex-content { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-flex: 1; | |
| -moz-box-flex: 1; | |
| -webkit-flex: 1; | |
| -ms-flex: 1; | |
| flex: 1; | |
| } | |
| .dapp-content { | |
| -webkit-box-flex: 1; | |
| -moz-box-flex: 1; | |
| -webkit-flex: 1; | |
| -ms-flex: 1; | |
| flex: 1; | |
| background: #FAFAFA; | |
| } | |
| .dapp-content.dapp-has-header { | |
| padding-top: 156.8px; | |
| } | |
| .dapp-content .dapp-content-header { | |
| position: fixed; | |
| top: 0; | |
| width: 80%; | |
| min-height: 36.8px; | |
| padding: 12.26666667px 16px; | |
| margin-left: -32px; | |
| background: rgba(245, 244, 242, 0.8); | |
| z-index: 10; | |
| line-height: 36.8px; | |
| -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); | |
| -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); | |
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .dapp-aside { | |
| -webkit-box-flex: 0; | |
| -moz-box-flex: 0; | |
| -webkit-flex: 0 0 224px; | |
| -ms-flex: 0 0 224px; | |
| flex: 0 0 224px; | |
| padding-right: 0; | |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMGVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0NDQzZDNiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=); | |
| background-image: -webkit-linear-gradient(top, #f0eeee 0, #CCC6C6 100px); | |
| background-image: -moz-linear-gradient(top, #f0eeee 0, #CCC6C6 100px); | |
| background-image: -o-linear-gradient(top, #f0eeee 0, #CCC6C6 100px); | |
| background-image: linear-gradient(to bottom, #f0eeee 0, #CCC6C6 100px); | |
| -webkit-transition: flex 400ms; | |
| -moz-transition: flex 400ms; | |
| -o-transition: flex 400ms; | |
| transition: flex 400ms; | |
| } | |
| .dapp-aside nav ul { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| padding-top: 18.4px; | |
| } | |
| .dapp-aside nav ul li { | |
| display: block; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .dapp-aside nav ul li a, | |
| .dapp-aside nav ul li a:visited, | |
| .dapp-aside nav ul li button { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-align: center; | |
| -moz-box-align: center; | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| position: relative; | |
| min-height: 73.6px; | |
| max-height: 92px; | |
| padding: 12.26666667px 32px; | |
| padding-left: 10.66666667px; | |
| overflow: hidden; | |
| border-top: #b9b0b0 solid 1px; | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-border-radius: 3px 0 0 3px; | |
| -moz-border-radius: 3px 0 0 3px; | |
| border-radius: 3px 0 0 3px; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| color: #111; | |
| font-weight: 300; | |
| line-height: 20px; | |
| } | |
| .dapp-aside nav ul li a:active, | |
| .dapp-aside nav ul li a:visited:active, | |
| .dapp-aside nav ul li button:active { | |
| -webkit-transform-origin: 100% 50%; | |
| -moz-transform-origin: 100% 50%; | |
| -o-transform-origin: 100% 50%; | |
| -ms-transform-origin: 100% 50%; | |
| transform-origin: 100% 50%; | |
| -webkit-transform: scale(0.98); | |
| -moz-transform: scale(0.98); | |
| -o-transform: scale(0.98); | |
| -ms-transform: scale(0.98); | |
| transform: scale(0.98); | |
| } | |
| .dapp-aside nav ul li a > i, | |
| .dapp-aside nav ul li a:visited > i, | |
| .dapp-aside nav ul li button > i { | |
| margin-right: 4px; | |
| } | |
| .dapp-aside nav ul li a > span, | |
| .dapp-aside nav ul li a:visited > span, | |
| .dapp-aside nav ul li button > span { | |
| max-width: 115px; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .dapp-aside nav ul li .dapp-main-button { | |
| position: relative; | |
| width: 100%; | |
| margin-bottom: 73.6px; | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-border-radius: 3px 0 0 3px; | |
| -moz-border-radius: 3px 0 0 3px; | |
| border-radius: 3px 0 0 3px; | |
| background: #665F5F; | |
| color: #FAFAFA; | |
| border-top: none; | |
| } | |
| .dapp-aside nav ul li .dapp-main-button i { | |
| position: absolute; | |
| right: 8px; | |
| top: 27.6px; | |
| } | |
| .dapp-aside nav ul li.active a { | |
| background: #FAFAFA; | |
| border-top: none; | |
| color: #111; | |
| font-weight: 500; | |
| } | |
| .dapp-aside nav ul li:first-child a, | |
| .dapp-aside nav ul li.active + li > a, | |
| .dapp-aside nav ul li.dapp-main-button + li { | |
| border-top: 0; | |
| } | |
| .dapp-actionbar { | |
| z-index: 20; | |
| -webkit-box-flex: 0; | |
| -moz-box-flex: 0; | |
| -webkit-flex: 0 0 64px; | |
| -ms-flex: 0 0 64px; | |
| flex: 0 0 64px; | |
| background: #FAFAFA; | |
| } | |
| .dapp-actionbar nav ul { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .dapp-actionbar nav ul li { | |
| display: block; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .dapp-actionbar nav ul li { | |
| margin: 16px 0; | |
| color: #02A8F3; | |
| position: relative; | |
| overflow: hidden; | |
| text-align: center; | |
| -webkit-transition: height 400ms; | |
| -moz-transition: height 400ms; | |
| -o-transition: height 400ms; | |
| transition: height 400ms; | |
| } | |
| .dapp-actionbar nav ul li button, | |
| .dapp-actionbar nav ul li a, | |
| .dapp-actionbar nav ul li a:visited { | |
| background: none; | |
| border: 0; | |
| padding: 0; | |
| margin: 0; | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| display: inline-block; | |
| color: #111; | |
| color: #0e73b8; | |
| font-size: 0.8em; | |
| font-weight: 400; | |
| } | |
| .dapp-actionbar nav ul li button:hover, | |
| .dapp-actionbar nav ul li a:hover, | |
| .dapp-actionbar nav ul li a:visited:hover, | |
| .dapp-actionbar nav ul li button:focus, | |
| .dapp-actionbar nav ul li a:focus, | |
| .dapp-actionbar nav ul li a:visited:focus { | |
| outline: 0; | |
| } | |
| .dapp-actionbar nav ul li button:active, | |
| .dapp-actionbar nav ul li a:active, | |
| .dapp-actionbar nav ul li a:visited:active { | |
| -webkit-transform: scale(0.95); | |
| -moz-transform: scale(0.95); | |
| -o-transform: scale(0.95); | |
| -ms-transform: scale(0.95); | |
| transform: scale(0.95); | |
| } | |
| .dapp-actionbar nav ul li button:hover, | |
| .dapp-actionbar nav ul li a:hover, | |
| .dapp-actionbar nav ul li a:visited:hover { | |
| opacity: 0.9; | |
| } | |
| .dapp-actionbar nav ul li button i, | |
| .dapp-actionbar nav ul li a i, | |
| .dapp-actionbar nav ul li a:visited i { | |
| font-size: 2em; | |
| display: block; | |
| } | |
| .dapp-box { | |
| display: inline-block; | |
| float: left; | |
| width: 192px; | |
| height: 220.8px; | |
| padding-top: 18.4px; | |
| padding-left: 16px; | |
| padding-bottom: 9.2px; | |
| padding-right: 16px; | |
| margin-bottom: 9.2px; | |
| margin-right: 16px; | |
| background-color: #FAFAFA; | |
| -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); | |
| -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); | |
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .dapp-box h2 { | |
| margin: 0; | |
| padding: 0; | |
| background-color: transparent; | |
| color: #827a7a; | |
| font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, Sans; | |
| text-transform: none; | |
| font-size: 1.5em; | |
| font-weight: 100; | |
| } | |
| .dapp-modal-overlay { | |
| background: rgba(0, 0, 0, 0); | |
| } | |
| .dapp-modal-container { | |
| background: #FAFAFA; | |
| } | |
| .dapp-icon-button { | |
| background: none; | |
| border: 0; | |
| padding: 0; | |
| margin: 0; | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| display: inline-block; | |
| color: #111; | |
| } | |
| .dapp-icon-button:hover, | |
| .dapp-icon-button:focus { | |
| outline: 0; | |
| } | |
| .dapp-icon-button:active { | |
| -webkit-transform: scale(0.95); | |
| -moz-transform: scale(0.95); | |
| -o-transform: scale(0.95); | |
| -ms-transform: scale(0.95); | |
| transform: scale(0.95); | |
| } | |
| .dapp-icon-button:hover { | |
| opacity: 0.9; | |
| } | |
| .dapp-block-button, | |
| .dapp-block-button:visited { | |
| background: none; | |
| border: 0; | |
| padding: 0; | |
| margin: 0; | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 36.8px; | |
| min-width: 100px; | |
| padding: 4.6px 10.66666667px; | |
| background: #02A8F3; | |
| color: #FAFAFA; | |
| border-bottom: 3px solid #5484bb; | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-border-radius: 2px; | |
| -moz-border-radius: 2px; | |
| border-radius: 2px; | |
| display: inline-block; | |
| -o-text-overflow: ellipsis; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| max-width: 100%; | |
| font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, Sans; | |
| font-size: 1em; | |
| font-weight: 400; | |
| text-transform: uppercase; | |
| } | |
| .dapp-block-button:hover, | |
| .dapp-block-button:visited:hover, | |
| .dapp-block-button:focus, | |
| .dapp-block-button:visited:focus { | |
| outline: 0; | |
| } | |
| .dapp-block-button:focus, | |
| .dapp-block-button:visited:focus { | |
| border-bottom: 3px solid #5484bb; | |
| zoom: 1; | |
| filter: alpha(opacity=80); | |
| -webkit-opacity: 0.8; | |
| -moz-opacity: 0.8; | |
| opacity: 0.8; | |
| } | |
| .dapp-block-button:active, | |
| .dapp-block-button:visited:active { | |
| border-bottom-width: 3px; | |
| } | |
| .dapp-block-button i, | |
| .dapp-block-button:visited i { | |
| position: relative; | |
| top: 2px; | |
| } | |
| .dapp-tag-button { | |
| background: none; | |
| border: 0; | |
| padding: 0; | |
| margin: 0; | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| padding: 4.6px 8px; | |
| background: #CCC6C6; | |
| color: #111; | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| display: inline-block; | |
| -o-text-overflow: ellipsis; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| max-width: 100%; | |
| font-size: 0.7em; | |
| } | |
| .dapp-tag-button:hover, | |
| .dapp-tag-button:focus { | |
| outline: 0; | |
| } | |
| .dapp-tag-button.active { | |
| background: #02A8F3; | |
| color: #FAFAFA; | |
| } | |
| /* #### All small screens #### */ | |
| /* #### All small tablets screens #### */ | |
| /* #### All small phone screens landscape #### */ | |
| @media screen and (max-width: 576px) { | |
| aside.dapp-main { | |
| -webkit-box-flex: 0; | |
| -moz-box-flex: 0; | |
| -webkit-flex: 0 0 64px; | |
| -ms-flex: 0 0 64px; | |
| flex: 0 0 64px; | |
| } | |
| .dapp-actionbar { | |
| flex: 1 auto; | |
| } | |
| .dapp-actionbar nav ul { | |
| display: flex; | |
| } | |
| .dapp-actionbar nav ul li { | |
| flex: 1; | |
| } | |
| } | |
| /* #### All small phone screens porttrait #### */ | |
| /* #### Mobile Phones Portrait #### */ | |
| @media screen and (max-device-width: 480px) and (orientation: portrait) { | |
| body { | |
| font-size: 14px; | |
| } | |
| } | |
| /* #### Mobile Phones Landscape #### */ | |
| @media screen and (max-device-width: 640px) and (orientation: landscape) { | |
| body { | |
| font-size: 15px; | |
| } | |
| } | |
| /* #### Mobile Phones Portrait or Landscape #### */ | |
| /* #### iPhone 4+ Portrait or Landscape #### */ | |
| /* #### Tablets Portrait #### */ | |
| /* #### Tablets Landscape #### */ | |
| /* #### Desktops #### */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment