body, button
|
margin: 0;
|
button, input, select, textarea
|
font-family: inherit;
|
img
|
max-width: 100%;
|
svg
|
max-height: 100%;
|
body
|
font-family: 'Helvetica Neue',Helvetica,sans-serif; line-height: 1.5; font-size: 100%;
|
h1, h2, h3, h4, h5, h6
|
font-family: 'Helvetica Neue',Helvetica,sans-serif; font-weight: 700; line-height: 1.25; margin-top: 1em; margin-bottom: .5em;
|
dl, ol, p, ul
|
font-size: 1rem; margin-top: 0; margin-bottom: 1rem;
|
ol, ul
|
padding-left: 2rem;
|
code, pre, samp
|
font-family: 'Source Code Pro',Consolas,monospace; font-size: inherit;
|
pre
|
margin-top: 0; margin-bottom: 1rem; overflow-x: scroll;
|
hr
|
margin-top: 2rem; margin-bottom: 2rem;
|
blockquote
|
margin-top: 2rem; margin-bottom: 2rem; margin-left: 0; padding-left: 1rem; padding-right: 1rem;
|
blockquote, blockquote p
|
font-size: 1.25rem; font-style: italic;
|
.h1, h1
|
font-size: 2rem;
|
.h2, h2
|
font-size: 1.5rem;
|
.h3, h3
|
font-size: 1.25rem;
|
.h4, h4
|
font-size: 1rem;
|
.h5, h5
|
font-size: .875rem;
|
.h6, h6
|
font-size: .75rem;
|
.list-reset
|
list-style: none; padding-left: 0;
|
fieldset, input, select, textarea
|
font-size: 1rem; margin-top: 0; margin-bottom: .5rem;
|
input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week]
|
box-sizing: border-box; height: 2.25rem; padding: .5rem; vertical-align: middle; -webkit-appearance: none;
|
select
|
box-sizing: border-box; line-height: 1.75; padding: .5rem;
|
select:not([multiple])
|
height: 2.25rem; vertical-align: middle;
|
textarea
|
box-sizing: border-box; line-height: 1.75; padding: .5rem;
|
.fieldset-reset
|
padding: 0; margin-left: 0; margin-right: 0; border: 0;
|
.fieldset-reset legend
|
padding: 0;
|
.button, button
|
font-size: inherit; font-weight: 700; text-decoration: none; cursor: pointer; display: inline-block; box-sizing: border-box; line-height: 1.125rem; padding: .5rem 1rem; margin: 0; height: auto; border: 1px solid transparent; vertical-align: middle; -webkit-appearance: none;
|
::-moz-focus-inner
|
border: 0; padding: 0;
|
.button:hover
|
text-decoration: none;
|
table
|
border-collapse: collapse; border-spacing: 0; max-width: 100%; width: 100%;
|
th
|
text-align: left; font-weight: 700;
|
td, th
|
padding: .25rem 1rem; line-height: inherit;
|
th
|
vertical-align: bottom;
|
td
|
vertical-align: top;
|
.inline
|
display: inline;
|
.block
|
display: block;
|
.inline-block
|
display: inline-block;
|
.overflow-hidden
|
overflow: hidden;
|
.overflow-scroll
|
overflow: scroll;
|
.overflow-auto
|
overflow: auto;
|
.clearfix:after, .clearfix:before
|
content: " "; display: table;
|
.clearfix:after
|
clear: both;
|
.left
|
float: left;
|
.right
|
float: right;
|
.fit
|
max-width: 100%;
|
.half-width
|
width: 50%;
|
.full-width
|
width: 100%;
|
.bold
|
font-weight: 700;
|
.regular
|
font-weight: 400;
|
.italic
|
font-style: italic;
|
.caps
|
text-transform: uppercase; letter-spacing: .2em;
|
.left-align
|
text-align: left;
|
.center
|
text-align: center;
|
.right-align
|
text-align: right;
|
.justify
|
text-align: justify;
|
.nowrap
|
white-space: nowrap;
|
.m0
|
margin: 0;
|
.mt0
|
margin-top: 0;
|
.mr0
|
margin-right: 0;
|
.mb0
|
margin-bottom: 0;
|
.ml0
|
margin-left: 0;
|
.m1
|
margin: .5rem;
|
.mt1
|
margin-top: .5rem;
|
.mr1
|
margin-right: .5rem;
|
.mb1
|
margin-bottom: .5rem;
|
.ml1
|
margin-left: .5rem;
|
.m2
|
margin: 1rem;
|
.mt2
|
margin-top: 1rem;
|
.mr2
|
margin-right: 1rem;
|
.mb2
|
margin-bottom: 1rem;
|
.ml2
|
margin-left: 1rem;
|
.m3
|
margin: 2rem;
|
.mt3
|
margin-top: 2rem;
|
.mr3
|
margin-right: 2rem;
|
.mb3
|
margin-bottom: 2rem;
|
.ml3
|
margin-left: 2rem;
|
.m4
|
margin: 4rem;
|
.mt4
|
margin-top: 4rem;
|
.mr4
|
margin-right: 4rem;
|
.mb4
|
margin-bottom: 4rem;
|
.ml4
|
margin-left: 4rem;
|
.mxn1
|
margin-left: -.5rem; margin-right: -.5rem;
|
.mxn2
|
margin-left: -1rem; margin-right: -1rem;
|
.mxn3
|
margin-left: -2rem; margin-right: -2rem;
|
.mxn4
|
margin-left: -4rem; margin-right: -4rem;
|
.mx-auto
|
margin-left: auto; margin-right: auto;
|
.p1
|
padding: .5rem;
|
.py1
|
padding-top: .5rem; padding-bottom: .5rem;
|
.px1
|
padding-left: .5rem; padding-right: .5rem;
|
.p2
|
padding: 1rem;
|
.py2
|
padding-top: 1rem; padding-bottom: 1rem;
|
.px2
|
padding-left: 1rem; padding-right: 1rem;
|
.p3
|
padding: 2rem;
|
.py3
|
padding-top: 2rem; padding-bottom: 2rem;
|
.px3
|
padding-left: 2rem; padding-right: 2rem;
|
.p4
|
padding: 4rem;
|
.py4
|
padding-top: 4rem; padding-bottom: 4rem;
|
.px4
|
padding-left: 4rem; padding-right: 4rem;
|
.display-none, .lg-show, .md-show, .sm-show
|
display: none!important;
|
.sm-show
|
(min-width:40em)
display: block!important;
|
.md-show
|
(min-width:52em)
display: block!important;
|
.lg-show
|
(min-width:64em)
display: block!important;
|
.sm-hide
|
(min-width:40em)
display: none!important;
|
.md-hide
|
(min-width:52em)
display: none!important;
|
.lg-hide
|
(min-width:64em)
display: none!important;
|
.hide
|
position: absolute!important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px);
|
.relative
|
position: relative;
|
.absolute
|
position: absolute;
|
.fixed
|
position: fixed;
|
.top-0
|
top: 0;
|
.right-0
|
right: 0;
|
.bottom-0
|
bottom: 0;
|
.left-0
|
left: 0;
|
.z1
|
z-index: 1;
|
.z2
|
z-index: 2;
|
.z3
|
z-index: 3;
|
.z4
|
z-index: 4;
|
.absolute-center
|
top: 0; right: 0; bottom: 0; left: 0; margin: auto; display: table;
|
.container
|
max-width: 64em; margin-left: auto; margin-right: auto;
|
.col
|
float: left; box-sizing: border-box;
|
.col-right
|
float: right; box-sizing: border-box;
|
.col-1
|
width: 8.333333333333332%;
|
.col-2
|
width: 16.666666666666664%;
|
.col-3
|
width: 25%;
|
.col-4
|
width: 33.33333333333333%;
|
.col-5
|
width: 41.66666666666667%;
|
.col-6
|
width: 50%;
|
.col-7
|
width: 58.333333333333336%;
|
.col-8
|
width: 66.66666666666666%;
|
.col-9
|
width: 75%;
|
.col-10
|
width: 83.33333333333334%;
|
.col-11
|
width: 91.66666666666666%;
|
.col-12
|
width: 100%;
|
.sm-col
|
(min-width:40em)
float: left; box-sizing: border-box;
|
.sm-col-right
|
(min-width:40em)
float: right; box-sizing: border-box;
|
.sm-col-1
|
(min-width:40em)
width: 8.333333333333332%;
|
.sm-col-2
|
(min-width:40em)
width: 16.666666666666664%;
|
.sm-col-3
|
(min-width:40em)
width: 25%;
|
.sm-col-4
|
(min-width:40em)
width: 33.33333333333333%;
|
.sm-col-5
|
(min-width:40em)
width: 41.66666666666667%;
|
.sm-col-6
|
(min-width:40em)
width: 50%;
|
.sm-col-7
|
(min-width:40em)
width: 58.333333333333336%;
|
.sm-col-8
|
(min-width:40em)
width: 66.66666666666666%;
|
.sm-col-9
|
(min-width:40em)
width: 75%;
|
.sm-col-10
|
(min-width:40em)
width: 83.33333333333334%;
|
.sm-col-11
|
(min-width:40em)
width: 91.66666666666666%;
|
.sm-col-12
|
(min-width:40em)
width: 100%;
|
.md-col
|
(min-width:52em)
float: left; box-sizing: border-box;
|
.md-col-right
|
(min-width:52em)
float: right; box-sizing: border-box;
|
.md-col-1
|
(min-width:52em)
width: 8.333333333333332%;
|
.md-col-2
|
(min-width:52em)
width: 16.666666666666664%;
|
.md-col-3
|
(min-width:52em)
width: 25%;
|
.md-col-4
|
(min-width:52em)
width: 33.33333333333333%;
|
.md-col-5
|
(min-width:52em)
width: 41.66666666666667%;
|
.md-col-6
|
(min-width:52em)
width: 50%;
|
.md-col-7
|
(min-width:52em)
width: 58.333333333333336%;
|
.md-col-8
|
(min-width:52em)
width: 66.66666666666666%;
|
.md-col-9
|
(min-width:52em)
width: 75%;
|
.md-col-10
|
(min-width:52em)
width: 83.33333333333334%;
|
.md-col-11
|
(min-width:52em)
width: 91.66666666666666%;
|
.md-col-12
|
(min-width:52em)
width: 100%;
|
.lg-col
|
(min-width:64em)
float: left; box-sizing: border-box;
|
.lg-col-right
|
(min-width:64em)
float: right; box-sizing: border-box;
|
.lg-col-1
|
(min-width:64em)
width: 8.333333333333332%;
|
.lg-col-2
|
(min-width:64em)
width: 16.666666666666664%;
|
.lg-col-3
|
(min-width:64em)
width: 25%;
|
.lg-col-4
|
(min-width:64em)
width: 33.33333333333333%;
|
.lg-col-5
|
(min-width:64em)
width: 41.66666666666667%;
|
.lg-col-6
|
(min-width:64em)
width: 50%;
|
.lg-col-7
|
(min-width:64em)
width: 58.333333333333336%;
|
.lg-col-8
|
(min-width:64em)
width: 66.66666666666666%;
|
.lg-col-9
|
(min-width:64em)
width: 75%;
|
.lg-col-10
|
(min-width:64em)
width: 83.33333333333334%;
|
.lg-col-11
|
(min-width:64em)
width: 91.66666666666666%;
|
.lg-col-12
|
(min-width:64em)
width: 100%;
|
.table
|
display: table; width: 100%;
|
.table-cell
|
display: table-cell; vertical-align: middle;
|
.table-fixed
|
table-layout: fixed;
|
.sm-table
|
(min-width:40em)
display: table; width: 100%;
|
.sm-table-cell
|
(min-width:40em)
display: table-cell; vertical-align: middle;
|
.md-table
|
(min-width:52em)
display: table; width: 100%;
|
.md-table-cell
|
(min-width:52em)
display: table-cell; vertical-align: middle;
|
.lg-table
|
(min-width:64em)
display: table; width: 100%;
|
.lg-table-cell
|
(min-width:64em)
display: table-cell; vertical-align: middle;
|
body
|
color: #333; background-color: #fff;
|
a
|
color: #0076df; text-decoration: none;
|
a:hover
|
text-decoration: underline;
|
code, pre
|
background-color: #eee; border-radius: 3px;
|
hr
|
border: 0; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc;
|
.field-light
|
background-color: #fff; -webkit-transition: box-shadow .2s ease; transition: box-shadow .2s ease; border-style: solid; border-width: 1px; border-color: #ccc; border-radius: 3px;
|
.field-light:focus
|
outline: 0; border-color: #0076df; box-shadow: 0 0 2px rgba(0,118,223,.5);
|
.field-light:disabled
|
color: #777; background-color: rgba(0,0,0,.125);
|
.field-light:read-only:not(select)
|
background-color: rgba(0,0,0,.125);
|
.field-light:invalid
|
border-color: #ff4919;
|
.field-light.is-success
|
border-color: #00df3f;
|
.field-light.is-warning
|
border-color: #ffcf00;
|
.field-light.is-error
|
border-color: #ff4919;
|
.checkbox-light, .radio-light
|
-webkit-transition: box-shadow .2s ease; transition: box-shadow .2s ease;
|
.radio-light
|
border-radius: 50%;
|
.checkbox-light:focus, .radio-light:focus
|
outline: 0; box-shadow: 0 0 2px rgba(0,118,223,.5);
|
.field-dark
|
color: #fff; background-color: rgba(0,0,0,.25); border: 1px solid rgba(0,0,0,.0625); border-radius: 3px;
|
.field-dark::-webkit-input-placeholder
|
color: rgba(255,255,255,.75);
|
.field-dark::-moz-placeholder
|
color: rgba(255,255,255,.75);
|
.field-dark:-ms-input-placeholder
|
color: rgba(255,255,255,.75);
|
.field-dark::placeholder
|
color: rgba(255,255,255,.75);
|
.field-dark:focus
|
outline: 0; border: 1px solid rgba(255,255,255,.5);
|
.field-dark:read-only:not(select)
|
background-color: rgba(255,255,255,.25);
|
.field-dark:invalid
|
border-color: #ff4919;
|
.field-dark.is-success
|
border-color: #00df3f;
|
.field-dark.is-warning
|
border-color: #ffcf00;
|
.field-dark.is-error
|
border-color: #ff4919;
|
.table-light td, .table-light th
|
border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc;
|
.button-light-gray
|
color: #333; background-color: #ccc; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow,background-color; transition-property: box-shadow,background-color;
|
.button-light-gray:hover
|
opacity: .875;
|
.button-light-gray:active, .button-light-gray:is-active
|
box-shadow: inset 0 0 0 32px rgba(0,0,0,.125),inset 0 2px 3px 0 rgba(0,0,0,.25);
|
.button-light-gray:focus
|
outline: 0; box-shadow: 0 0 0 2px white,0 0 1px 4px rgba(0,118,223,.5);
|
.button-light-gray.is-disabled, .button-light-gray:disabled
|
opacity: .5;
|
.button-blue
|
color: #fff; background-color: #0076df; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow,background-color; transition-property: box-shadow,background-color;
|
.button-blue:hover
|
opacity: .875;
|
.button-blue.is-active, .button-blue:active
|
box-shadow: inset 0 0 0 32px rgba(0,0,0,.125),inset 0 2px 3px 0 rgba(0,0,0,.25);
|
.button-blue:focus
|
outline: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.5),0 0 1px 4px rgba(0,118,223,.5);
|
.button-blue.is-disabled, .button-blue:disabled
|
opacity: .5;
|
.button-blue-outline
|
line-height: 1rem; color: #0076df; background-color: transparent; border-radius: 3px; border: 2px solid #0076df; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow,background-color; transition-property: box-shadow,background-color;
|
.button-blue-outline.is-active, .button-blue-outline:hover
|
color: #fff; background-color: #0076df;
|
.button-blue-outline:active
|
box-shadow: inset 0 3px 3px 0 rgba(0,0,0,.25);
|
.button-blue-outline:focus
|
outline: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.5),0 0 1px 4px rgba(0,118,223,.5);
|
.button-blue-outline.is-disabled, .button-blue-outline:disabled
|
color: #0076df; background-color: transparent; opacity: .5;
|
.button-gray
|
color: #fff; background-color: #777; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow,background-color; transition-property: box-shadow,background-color;
|
.button-gray:hover
|
opacity: .875;
|
.button-gray:active, .button-gray:is-active
|
box-shadow: inset 0 0 0 32px rgba(0,0,0,.125),inset 0 2px 3px 0 rgba(0,0,0,.25);
|
.button-gray:focus
|
outline: 0; box-shadow: 0 0 0 2px white,0 0 1px 4px rgba(0,118,223,.5);
|
.button-gray.is-disabled, .button-gray:disabled
|
opacity: .5;
|
.button-red
|
color: #fff; background-color: #ff4919; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow,background-color; transition-property: box-shadow,background-color;
|
.button-red:hover
|
opacity: .875;
|
.button-red.is-active, .button-red:active
|
box-shadow: inset 0 0 0 32px rgba(0,0,0,.125),inset 0 2px 3px 0 rgba(0,0,0,.25);
|
.button-red:focus
|
outline: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.5),0 0 1px 4px rgba(255,73,25,.5);
|
.button-red.is-disabled, .button-red:disabled
|
opacity: .5;
|
.button-nav-light:hover
|
background-color: rgba(0,0,0,.0625);
|
.button-nav-light.is-active, .button-nav-light:active
|
color: #333;
|
.button-nav-dark
|
color: #fff;
|
.button-nav-dark.is-active, .button-nav-dark:active, .button-nav-dark:hover
|
background-color: rgba(0,0,0,.125);
|
.button-nav-tab
|
margin-bottom: -1px; border-radius: 3px 3px 0 0; border-bottom: 1px solid #ccc;
|
.button-nav-tab:hover
|
background-color: rgba(0,0,0,.0625);
|
.button-nav-tab.is-active
|
background-color: #fff; border-bottom: 1px solid #fff; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;
|
.dark-gray
|
color: #333;
|
.white
|
color: #fff;
|
.blue
|
color: #0076df;
|
.mid-gray
|
color: #777;
|
.light-gray
|
color: #ccc;
|
.lighter-gray
|
color: #eee;
|
.red
|
color: #ff4919;
|
.green
|
color: #00df3f;
|
.yellow
|
color: #ffcf00;
|
.bg-dark-gray
|
background-color: #333;
|
.bg-white
|
background-color: #fff;
|
.bg-blue
|
background-color: #0076df;
|
.bg-mid-gray
|
background-color: #777;
|
.bg-light-gray
|
background-color: #ccc;
|
.bg-lighter-gray
|
background-color: #eee;
|
.bg-red
|
background-color: #ff4919;
|
.bg-green
|
background-color: #00df3f;
|
.bg-yellow
|
background-color: #ffcf00;
|
.bg-darken-1
|
background-color: rgba(0,0,0,.0625);
|
.bg-darken-2
|
background-color: rgba(0,0,0,.125);
|
.bg-darken-3
|
background-color: rgba(0,0,0,.25);
|
.bg-darken-4
|
background-color: rgba(0,0,0,.5);
|
.border
|
border-style: solid; border-width: 1px; border-color: #ccc;
|
.border-top
|
border-top-style: solid; border-top-width: 1px; border-top-color: #ccc;
|
.border-right
|
border-right-style: solid; border-right-width: 1px; border-right-color: #ccc;
|
.border-bottom
|
border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc;
|
.border-left
|
border-left-style: solid; border-left-width: 1px; border-left-color: #ccc;
|
.rounded
|
border-radius: 3px;
|
.circle
|
border-radius: 50%;
|
.rounded-top
|
border-radius: 3px 3px 0 0;
|
.rounded-right
|
border-radius: 0 3px 3px 0;
|
.rounded-bottom
|
border-radius: 0 0 3px 3px;
|
.rounded-left
|
border-radius: 3px 0 0 3px;
|
.not-rounded
|
border-radius: 0;
|