docs/src/styles/grid.css
/* Grid */
* {
-moz-box-sizing: border-box;
box-sizing: border-box
}
body {
margin: 0
}
img {
max-width: 100%;
vertical-align: middle;
display: inline-block
}
.w-block {
display: block
}
.w-inline-block {
display: inline-block
}
.w-clearfix:before, .w-clearfix:after {
display: table;
content: '';
line-height: 0
}
.w-clearfix:after {
clear: both
}
.w-hidden {
display: none
}
.w-video {
width: 100%;
position: relative;
padding: 0
}
.w-video iframe, .w-video object, .w-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
h1, h2, h3, h4, h5, h6 {
margin: 0
}
blockquote {
margin: 0
}
fieldset {
padding: 0;
margin: 0;
border: 0
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
-webkit-appearance: button
}
.w-form {
margin: 0 0 15px
}
.w-form-done {
display: none;
padding: 10px;
background-color: #dbffd1
}
.w-form-done-show {
display: block
}
.w-form-fail {
display: none;
margin-top: 10px;
padding: 10px;
background-color: #ffdede
}
.w-form-fail-show {
display: block
}
.w-input {
display: block;
width: 100%;
height: 38px;
padding: 8px 12px;
margin-bottom: 10px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
}
.w-input:-moz-placeholder {
color: #999
}
.w-input::-moz-placeholder {
color: #999
}
.w-input:-ms-input-placeholder {
color: #999
}
.w-input::-webkit-input-placeholder {
color: #999
}
.w-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
}
.w-input[disabled], .w-input[readonly], fieldset[disabled] .w-input {
cursor: not-allowed;
background-color: #eee
}
textarea.w-input {
height: auto
}
.w-button {
display: inline-block;
padding: 12px;
background-color: black;
color: white;
border: 0;
line-height: inherit
}
.w-container {
margin-left: auto;
margin-right: auto;
max-width: 940px
}
.w-container:before, .w-container:after {
display: table;
content: '';
line-height: 0
}
.w-container:after {
clear: both
}
.w-container .w-row {
margin-left: -10px;
margin-right: -10px
}
.w-row:before, .w-row:after {
display: table;
content: '';
line-height: 0
}
.w-row:after {
clear: both
}
.w-row .w-row {
margin-left: 0;
margin-right: 0
}
.w-col {
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-left: 10px;
padding-right: 10px
}
.w-col .w-col {
padding-left: 0;
padding-right: 0
}
.w-col-1 {
width: 8.333333333333332%
}
.w-col-2 {
width: 16.666666666666664%
}
.w-col-3 {
width: 25%
}
.w-col-4 {
width: 33.33333333333333%
}
.w-col-5 {
width: 41.66666666666667%
}
.w-col-6 {
width: 50%
}
.w-col-7 {
width: 58.333333333333336%
}
.w-col-8 {
width: 66.66666666666666%
}
.w-col-9 {
width: 75%
}
.w-col-10 {
width: 83.33333333333334%
}
.w-col-11 {
width: 91.66666666666666%
}
.w-col-12 {
width: 100%
}
.w-col-push-1 {
left: 8.333333333333332%
}
.w-col-push-2 {
left: 16.666666666666664%
}
.w-col-push-3 {
left: 25%
}
.w-col-push-4 {
left: 33.33333333333333%
}
.w-col-push-5 {
left: 41.66666666666667%
}
.w-col-push-6 {
left: 50%
}
.w-col-push-7 {
left: 58.333333333333336%
}
.w-col-push-8 {
left: 66.66666666666666%
}
.w-col-push-9 {
left: 75%
}
.w-col-push-10 {
left: 83.33333333333334%
}
.w-col-push-11 {
left: 91.66666666666666%
}
.w-col-pull-1 {
right: 8.333333333333332%
}
.w-col-pull-2 {
right: 16.666666666666664%
}
.w-col-pull-3 {
right: 25%
}
.w-col-pull-4 {
right: 33.33333333333333%
}
.w-col-pull-5 {
right: 41.66666666666667%
}
.w-col-pull-6 {
right: 50%
}
.w-col-pull-7 {
right: 58.333333333333336%
}
.w-col-pull-8 {
right: 66.66666666666666%
}
.w-col-pull-9 {
right: 75%
}
.w-col-pull-10 {
right: 83.33333333333334%
}
.w-col-pull-11 {
right: 91.66666666666666%
}
.w-col-offset-1 {
margin-left: 8.333333333333332%
}
.w-col-offset-2 {
margin-left: 16.666666666666664%
}
.w-col-offset-3 {
margin-left: 25%
}
.w-col-offset-4 {
margin-left: 33.33333333333333%
}
.w-col-offset-5 {
margin-left: 41.66666666666667%
}
.w-col-offset-6 {
margin-left: 50%
}
.w-col-offset-7 {
margin-left: 58.333333333333336%
}
.w-col-offset-8 {
margin-left: 66.66666666666666%
}
.w-col-offset-9 {
margin-left: 75%
}
.w-col-offset-10 {
margin-left: 83.33333333333334%
}
.w-col-offset-11 {
margin-left: 91.66666666666666%
}
.w-hidden-main {
display: none !important
}
@media screen and (max-width: 991px) {
.w-container {
max-width: 728px
}
.w-hidden-main {
display: inherit !important
}
.w-hidden-medium {
display: none !important
}
.w-col-medium-1 {
width: 8.333333333333332%
}
.w-col-medium-2 {
width: 16.666666666666664%
}
.w-col-medium-3 {
width: 25%
}
.w-col-medium-4 {
width: 33.33333333333333%
}
.w-col-medium-5 {
width: 41.66666666666667%
}
.w-col-medium-6 {
width: 50%
}
.w-col-medium-7 {
width: 58.333333333333336%
}
.w-col-medium-8 {
width: 66.66666666666666%
}
.w-col-medium-9 {
width: 75%
}
.w-col-medium-10 {
width: 83.33333333333334%
}
.w-col-medium-11 {
width: 91.66666666666666%
}
.w-col-medium-12 {
width: 100%
}
.w-col-medium-push-1 {
left: 8.333333333333332%
}
.w-col-medium-push-2 {
left: 16.666666666666664%
}
.w-col-medium-push-3 {
left: 25%
}
.w-col-medium-push-4 {
left: 33.33333333333333%
}
.w-col-medium-push-5 {
left: 41.66666666666667%
}
.w-col-medium-push-6 {
left: 50%
}
.w-col-medium-push-7 {
left: 58.333333333333336%
}
.w-col-medium-push-8 {
left: 66.66666666666666%
}
.w-col-medium-push-9 {
left: 75%
}
.w-col-medium-push-10 {
left: 83.33333333333334%
}
.w-col-medium-push-11 {
left: 91.66666666666666%
}
.w-col-medium-pull-1 {
right: 8.333333333333332%
}
.w-col-medium-pull-2 {
right: 16.666666666666664%
}
.w-col-medium-pull-3 {
right: 25%
}
.w-col-medium-pull-4 {
right: 33.33333333333333%
}
.w-col-medium-pull-5 {
right: 41.66666666666667%
}
.w-col-medium-pull-6 {
right: 50%
}
.w-col-medium-pull-7 {
right: 58.333333333333336%
}
.w-col-medium-pull-8 {
right: 66.66666666666666%
}
.w-col-medium-pull-9 {
right: 75%
}
.w-col-medium-pull-10 {
right: 83.33333333333334%
}
.w-col-medium-pull-11 {
right: 91.66666666666666%
}
.w-col-medium-offset-1 {
margin-left: 8.333333333333332%
}
.w-col-medium-offset-2 {
margin-left: 16.666666666666664%
}
.w-col-medium-offset-3 {
margin-left: 25%
}
.w-col-medium-offset-4 {
margin-left: 33.33333333333333%
}
.w-col-medium-offset-5 {
margin-left: 41.66666666666667%
}
.w-col-medium-offset-6 {
margin-left: 50%
}
.w-col-medium-offset-7 {
margin-left: 58.333333333333336%
}
.w-col-medium-offset-8 {
margin-left: 66.66666666666666%
}
.w-col-medium-offset-9 {
margin-left: 75%
}
.w-col-medium-offset-10 {
margin-left: 83.33333333333334%
}
.w-col-medium-offset-11 {
margin-left: 91.66666666666666%
}
}
@media screen and (max-width: 767px) {
.w-hidden-main {
display: inherit !important
}
.w-hidden-medium {
display: inherit !important
}
.w-hidden-small {
display: none !important
}
.w-row, .w-container .w-row {
margin-left: 0;
margin-right: 0
}
.w-col {
width: 100%;
left: auto;
right: auto
}
.w-col-small-3 {
width: 25%
}
.w-col-small-4 {
width: 33.33333333333333%
}
.w-col-small-6 {
width: 50%
}
.w-col-small-push-1 {
left: 8.333333333333332%
}
.w-col-small-push-2 {
left: 16.666666666666664%
}
.w-col-small-push-3 {
left: 25%
}
.w-col-small-push-4 {
left: 33.33333333333333%
}
.w-col-small-push-5 {
left: 41.66666666666667%
}
.w-col-small-push-6 {
left: 50%
}
.w-col-small-push-7 {
left: 58.333333333333336%
}
.w-col-small-push-8 {
left: 66.66666666666666%
}
.w-col-small-push-9 {
left: 75%
}
.w-col-small-push-10 {
left: 83.33333333333334%
}
.w-col-small-push-11 {
left: 91.66666666666666%
}
.w-col-small-pull-1 {
right: 8.333333333333332%
}
.w-col-small-pull-2 {
right: 16.666666666666664%
}
.w-col-small-pull-3 {
right: 25%
}
.w-col-small-pull-4 {
right: 33.33333333333333%
}
.w-col-small-pull-5 {
right: 41.66666666666667%
}
.w-col-small-pull-6 {
right: 50%
}
.w-col-small-pull-7 {
right: 58.333333333333336%
}
.w-col-small-pull-8 {
right: 66.66666666666666%
}
.w-col-small-pull-9 {
right: 75%
}
.w-col-small-pull-10 {
right: 83.33333333333334%
}
.w-col-small-pull-11 {
right: 91.66666666666666%
}
.w-col-small-offset-1 {
margin-left: 8.333333333333332%
}
.w-col-small-offset-2 {
margin-left: 16.666666666666664%
}
.w-col-small-offset-3 {
margin-left: 25%
}
.w-col-small-offset-4 {
margin-left: 33.33333333333333%
}
.w-col-small-offset-5 {
margin-left: 41.66666666666667%
}
.w-col-small-offset-6 {
margin-left: 50%
}
.w-col-small-offset-7 {
margin-left: 58.333333333333336%
}
.w-col-small-offset-8 {
margin-left: 66.66666666666666%
}
.w-col-small-offset-9 {
margin-left: 75%
}
.w-col-small-offset-10 {
margin-left: 83.33333333333334%
}
.w-col-small-offset-11 {
margin-left: 91.66666666666666%
}
}
@media screen and (max-width: 479px) {
.w-container {
max-width: none
}
.w-hidden-main {
display: inherit !important
}
.w-hidden-medium {
display: inherit !important
}
.w-hidden-small {
display: inherit !important
}
.w-hidden-tiny {
display: none !important
}
.w-col {
width: 100%
}
.w-col-tiny-3 {
width: 25%
}
.w-col-tiny-4 {
width: 33.33333333333333%
}
.w-col-tiny-6 {
width: 50%
}
.w-col-tiny-push-1 {
left: 8.333333333333332%
}
.w-col-tiny-push-2 {
left: 16.666666666666664%
}
.w-col-tiny-push-3 {
left: 25%
}
.w-col-tiny-push-4 {
left: 33.33333333333333%
}
.w-col-tiny-push-5 {
left: 41.66666666666667%
}
.w-col-tiny-push-6 {
left: 50%
}
.w-col-tiny-push-7 {
left: 58.333333333333336%
}
.w-col-tiny-push-8 {
left: 66.66666666666666%
}
.w-col-tiny-push-9 {
left: 75%
}
.w-col-tiny-push-10 {
left: 83.33333333333334%
}
.w-col-tiny-push-11 {
left: 91.66666666666666%
}
.w-col-tiny-pull-1 {
right: 8.333333333333332%
}
.w-col-tiny-pull-2 {
right: 16.666666666666664%
}
.w-col-tiny-pull-3 {
right: 25%
}
.w-col-tiny-pull-4 {
right: 33.33333333333333%
}
.w-col-tiny-pull-5 {
right: 41.66666666666667%
}
.w-col-tiny-pull-6 {
right: 50%
}
.w-col-tiny-pull-7 {
right: 58.333333333333336%
}
.w-col-tiny-pull-8 {
right: 66.66666666666666%
}
.w-col-tiny-pull-9 {
right: 75%
}
.w-col-tiny-pull-10 {
right: 83.33333333333334%
}
.w-col-tiny-pull-11 {
right: 91.66666666666666%
}
.w-col-tiny-offset-1 {
margin-left: 8.333333333333332%
}
.w-col-tiny-offset-2 {
margin-left: 16.666666666666664%
}
.w-col-tiny-offset-3 {
margin-left: 25%
}
.w-col-tiny-offset-4 {
margin-left: 33.33333333333333%
}
.w-col-tiny-offset-5 {
margin-left: 41.66666666666667%
}
.w-col-tiny-offset-6 {
margin-left: 50%
}
.w-col-tiny-offset-7 {
margin-left: 58.333333333333336%
}
.w-col-tiny-offset-8 {
margin-left: 66.66666666666666%
}
.w-col-tiny-offset-9 {
margin-left: 75%
}
.w-col-tiny-offset-10 {
margin-left: 83.33333333333334%
}
.w-col-tiny-offset-11 {
margin-left: 91.66666666666666%
}
}