Skip to content

Instantly share code, notes, and snippets.

@alexvandesande
Created January 26, 2017 18:30
Show Gist options
  • Save alexvandesande/0fb524b9ba0a37ded1138a5009f162af to your computer and use it in GitHub Desktop.
Save alexvandesande/0fb524b9ba0a37ded1138a5009f162af to your computer and use it in GitHub Desktop.
Modified Dapp Styles for Swarm Markdown
::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