/*! skeleton-framework | 1.1.1 | MIT | 2/25/2017 */ /* Table of contents - Base Styles - Grid - Typography - Links - Buttons - Forms - Lists - Code - Tables - Spacing - Utilities - Clearing - Media Queries */ html { font-size: 1em; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { background-color: #fff; font-size: 1rem; line-height: 1.6rem; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; } .container { margin-right: auto; margin-left: auto; width: 100%; max-width: 1200px; padding-left: 0.5rem; padding-right: 0.5rem; } .container-fluid { margin-right: auto; margin-left: auto; width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } .row { margin-left: -0.5rem; margin-right: -0.5rem; } .row::before, .row::after { content: ' '; display: table; } .row::after { clear: both; } [class*='column'] { float: left; width: 100%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .xs-one[class*='column'] { width: 8.3333333333%; } .xs-two[class*='column'] { width: 16.6666666666%; } .xs-three[class*='column'], .xs-one-quarter[class*='column'] { width: 24.9999999999%; } .xs-four[class*='column'], .xs-one-third[class*='column'] { width: 33.3333333332%; } .xs-five[class*='column'] { width: 41.6666666665%; } .xs-six[class*='column'], .xs-one-half[class*='column'] { width: 49.9999999998%; } .xs-seven[class*='column'] { width: 58.3333333331%; } .xs-eight[class*='column'], .xs-two-thirds[class*='column'] { width: 66.6666666664%; } .xs-nine[class*='column'] { width: 74.9999999997%; } .xs-ten[class*='column'] { width: 83.333333333%; } .xs-eleven[class*='column'] { width: 91.6666666663%; } .xs-twelve[class*='column'] { width: 99.9999999996%; } [class*='xs-'][class*='column'] ~ [class*='xs-'][class*='column'] { margin-top: 0; } @media screen and (min-width: 560px) { [class*='column'] ~ [class*='column'] { margin-top: 0; } .one[class*='column'] { width: 8.3333333333%; } .two[class*='column'] { width: 16.6666666666%; } .three[class*='column'], .one-quarter[class*='column'] { width: 24.9999999999%; } .four[class*='column'], .one-third[class*='column'] { width: 33.3333333332%; } .five[class*='column'] { width: 41.6666666665%; } .six[class*='column'], .one-half[class*='column'] { width: 49.9999999998%; } .seven[class*='column'] { width: 58.3333333331%; } .eight[class*='column'], .two-thirds[class*='column'] { width: 66.6666666664%; } .nine[class*='column'] { width: 74.9999999997%; } .ten[class*='column'] { width: 83.333333333%; } .eleven[class*='column'] { width: 91.6666666663%; } .twelve[class*='column'] { width: 99.9999999996%; } .offset-by-one[class*='column'] { margin-left: 8.3333333333%; } .offset-by-two[class*='column'] { margin-left: 16.6666666666%; } .offset-by-three[class*='column'], .offset-by-one-quarter[class*='column'] { margin-left: 24.9999999999%; } .offset-by-four[class*='column'], .offset-by-one-third[class*='column'] { margin-left: 33.3333333332%; } .offset-by-five[class*='column'] { margin-left: 41.6666666665%; } .offset-by-six[class*='column'], .offset-by-one-half[class*='column'] { margin-left: 49.9999999998%; } .offset-by-seven[class*='column'] { margin-left: 58.3333333331%; } .offset-by-eight[class*='column'], .offset-by-two-thirds[class*='column'] { margin-left: 66.6666666664%; } .offset-by-nine[class*='column'] { margin-left: 74.9999999997%; } .offset-by-ten[class*='column'] { margin-left: 83.333333333%; } .offset-by-eleven[class*='column'] { margin-left: 91.6666666663%; } .sm-one[class*='column'] { width: 8.3333333333%; } .sm-two[class*='column'] { width: 16.6666666666%; } .sm-three[class*='column'], .sm-one-quarter[class*='column'] { width: 24.9999999999%; } .sm-four[class*='column'], .sm-one-third[class*='column'] { width: 33.3333333332%; } .sm-five[class*='column'] { width: 41.6666666665%; } .sm-six[class*='column'], .sm-one-half[class*='column'] { width: 49.9999999998%; } .sm-seven[class*='column'] { width: 58.3333333331%; } .sm-eight[class*='column'], .sm-two-thirds[class*='column'] { width: 66.6666666664%; } .sm-nine[class*='column'] { width: 74.9999999997%; } .sm-ten[class*='column'] { width: 83.333333333%; } .sm-eleven[class*='column'] { width: 91.6666666663%; } .sm-twelve[class*='column'] { width: 99.9999999996%; } .sm-offset-by-zero[class*='column'] { margin-left: 0; } .sm-offset-by-one[class*='column'] { margin-left: 8.3333333333%; } .sm-offset-by-two[class*='column'] { margin-left: 16.6666666666%; } .sm-offset-by-three[class*='column'], .sm-offset-by-one-quarter[class*='column'] { margin-left: 24.9999999999%; } .sm-offset-by-four[class*='column'], .sm-offset-by-one-third[class*='column'] { margin-left: 33.3333333332%; } .sm-offset-by-five[class*='column'] { margin-left: 41.6666666665%; } .sm-offset-by-six[class*='column'], .sm-offset-by-one-half[class*='column'] { margin-left: 49.9999999998%; } .sm-offset-by-seven[class*='column'] { margin-left: 58.3333333331%; } .sm-offset-by-eight[class*='column'], .sm-offset-by-two-thirds[class*='column'] { margin-left: 66.6666666664%; } .sm-offset-by-nine[class*='column'] { margin-left: 74.9999999997%; } .sm-offset-by-ten[class*='column'] { margin-left: 83.333333333%; } .sm-offset-by-eleven[class*='column'] { margin-left: 91.6666666663%; } } @media screen and (min-width: 720px) { .md-one[class*='column'] { width: 8.3333333333%; } .md-two[class*='column'] { width: 16.6666666666%; } .md-three[class*='column'], .md-one-quarter[class*='column'] { width: 24.9999999999%; } .md-four[class*='column'], .md-one-third[class*='column'] { width: 33.3333333332%; } .md-five[class*='column'] { width: 41.6666666665%; } .md-six[class*='column'], .md-one-half[class*='column'] { width: 49.9999999998%; } .md-seven[class*='column'] { width: 58.3333333331%; } .md-eight[class*='column'], .md-two-thirds[class*='column'] { width: 66.6666666664%; } .md-nine[class*='column'] { width: 74.9999999997%; } .md-ten[class*='column'] { width: 83.333333333%; } .md-eleven[class*='column'] { width: 91.6666666663%; } .md-twelve[class*='column'] { width: 99.9999999996%; } .md-offset-by-zero[class*='column'] { margin-left: 0; } .md-offset-by-one[class*='column'] { margin-left: 8.3333333333%; } .md-offset-by-two[class*='column'] { margin-left: 16.6666666666%; } .md-offset-by-three[class*='column'], .md-offset-by-one-quarter[class*='column'] { margin-left: 24.9999999999%; } .md-offset-by-four[class*='column'], .md-offset-by-one-third[class*='column'] { margin-left: 33.3333333332%; } .md-offset-by-five[class*='column'] { margin-left: 41.6666666665%; } .md-offset-by-six[class*='column'], .md-offset-by-one-half[class*='column'] { margin-left: 49.9999999998%; } .md-offset-by-seven[class*='column'] { margin-left: 58.3333333331%; } .md-offset-by-eight[class*='column'], .md-offset-by-two-thirds[class*='column'] { margin-left: 66.6666666664%; } .md-offset-by-nine[class*='column'] { margin-left: 74.9999999997%; } .md-offset-by-ten[class*='column'] { margin-left: 83.333333333%; } .md-offset-by-eleven[class*='column'] { margin-left: 91.6666666663%; } } @media screen and (min-width: 960px) { .lg-one[class*='column'] { width: 8.3333333333%; } .lg-two[class*='column'] { width: 16.6666666666%; } .lg-three[class*='column'], .lg-one-quarter[class*='column'] { width: 24.9999999999%; } .lg-four[class*='column'], .lg-one-third[class*='column'] { width: 33.3333333332%; } .lg-five[class*='column'] { width: 41.6666666665%; } .lg-six[class*='column'], .lg-one-half[class*='column'] { width: 49.9999999998%; } .lg-seven[class*='column'] { width: 58.3333333331%; } .lg-eight[class*='column'], .lg-two-thirds[class*='column'] { width: 66.6666666664%; } .lg-nine[class*='column'] { width: 74.9999999997%; } .lg-ten[class*='column'] { width: 83.333333333%; } .lg-eleven[class*='column'] { width: 91.6666666663%; } .lg-twelve[class*='column'] { width: 99.9999999996%; } .lg-offset-by-zero[class*='column'] { margin-left: 0; } .lg-offset-by-one[class*='column'] { margin-left: 8.3333333333% } .lg-offset-by-two[class*='column'] { margin-left: 16.6666666666% } .lg-offset-by-three[class*='column'], .lg-offset-by-one-quarter[class*='column'] { margin-left: 24.9999999999%; } .lg-offset-by-four[class*='column'], .lg-offset-by-one-third[class*='column'] { margin-left: 33.3333333332%; } .lg-offset-by-five[class*='column'] { margin-left: 41.6666666665%; } .lg-offset-by-six[class*='column'], .lg-offset-by-one-half[class*='column'] { margin-left: 49.9999999998%; } .lg-offset-by-seven[class*='column'] { margin-left: 58.3333333331%; } .lg-offset-by-eight[class*='column'], .lg-offset-by-two-thirds[class*='column'] { margin-left: 66.6666666664%; } .lg-offset-by-nine[class*='column'] { margin-left: 74.9999999997%; } .lg-offset-by-ten[class*='column'] { margin-left: 83.333333333%; } .lg-offset-by-eleven[class*='column'] { margin-left: 91.6666666663%; } } /* Base Typo */ h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; font-weight: 300; } h1, h2, h3 { margin-top: 2rem; } h4, h5, h6 { margin-top: 1.5rem; } h1 { font-size: 3.6rem; line-height: 1.2; letter-spacing: -0.1rem; } h2 { font-size: 3.0rem; line-height: 1.25; letter-spacing: -0.1rem; } h3 { font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.1rem; } h4 { font-size: 1.8rem; line-height: 1.35; letter-spacing: -0.08rem; } h5 { font-size: 1.5rem; line-height: 1.5; letter-spacing: -0.05rem; } h6 { font-size: 1.2rem; line-height: 1.6; letter-spacing: 0; } /* Larger than phablet */ @media (min-width: 560px) { h1 { font-size: 3.6rem; } h2 { font-size: 3.0rem; } h3 { font-size: 2.4rem; } h4 { font-size: 1.8rem; } h5 { font-size: 1.5rem; } h6 { font-size: 1.2rem; } } /* Links */ a { color: #1EAEDB; } a:hover { color: #0FA0CE; } /* Colors */ .text-primary { color: #1EAEDB } .text-success { color: #2ecc71 } .text-danger { color: #e74c3c } .button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; height: 2.5rem; padding: 0 1.9rem; color: #555; text-align: center; font-size: 0.7rem; font-weight: 600; line-height: 2.5rem; letter-spacing: 0.1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #BBB; cursor: pointer; -webkit-transition: border 0.2s; transition: border 0.2s; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #333; border-color: #888; outline: 0; } .button:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { color: #222; border-color: #222; } .button:disabled, .button:disabled:hover, button[disabled], .button[disabled], .button-primary[disabled], .button-success[disabled], .button-danger[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] { border: 1px solid #E3E3E3; color: #888; cursor: not-allowed; } .button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { border: 1px solid #33C3F0; color: #FFF; background-color: #33C3F0; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF; background-color: #1EAEDB; border-color: #1EAEDB; } .button.button-primary:active, button.button-primary:active, input[type="submit"].button-primary:active, input[type="reset"].button-primary:active, input[type="button"].button-primary:active { color: #FFF; background-color: #157b9b; border-color: #157b9b; } .button.button-primary:disabled, button.button-primary:disabled, input[type="submit"].button-primary:disabled, input[type="reset"].button-primary:disabled, input[type="button"].button-primary:disabled { color: #FFF; cursor: not-allowed; background-color: #7CD9F8; border-color: #7CD9F8; } .button.button-success, button.button-success, input[type="submit"].button-success, input[type="reset"].button-success, input[type="button"].button-success { border: 1px solid #2ecc71; color: #FFF; background-color: #2ecc71; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .button.button-success:hover, button.button-success:hover, input[type="submit"].button-success:hover, input[type="reset"].button-success:hover, input[type="button"].button-success:hover, .button.button-success:focus, button.button-success:focus, input[type="submit"].button-success:focus, input[type="reset"].button-success:focus, input[type="button"].button-success:focus { color: #FFF; background-color: #27ae60; border-color: #27ae60; } .button.button-success:active, button.button-success:active, input[type="submit"].button-success:active, input[type="reset"].button-success:active, input[type="button"].button-success:active { color: #FFF; background-color: #2ecc71; border-color: #2ecc71; } .button.button-success:disabled, button.button-success:disabled, input[type="submit"].button-success:disabled, input[type="reset"].button-success:disabled, input[type="button"].button-success:disabled { color: #FFF; cursor: not-allowed; background-color: #82e3aa; border-color: #82e3aa; } .button.button-danger, button.button-danger, input[type="submit"].button-danger, input[type="reset"].button-danger, input[type="button"].button-danger { border: 1px solid #e74c3c; color: #FFF; background-color: #e74c3c; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .button.button-danger:hover, button.button-danger:hover, input[type="submit"].button-danger:hover, input[type="reset"].button-danger:hover, input[type="button"].button-danger:hover, .button.button-danger:focus, button.button-danger:focus, input[type="submit"].button-danger:focus, input[type="reset"].button-danger:focus, input[type="button"].button-danger:focus { color: #FFF; background-color: #c0392b; border-color: #c0392b; } .button.button-danger:active, button.button-danger:active, input[type="submit"].button-danger:active, input[type="reset"].button-danger:active, input[type="button"].button-danger:active { color: #FFF; background-color: #e74c3c; border-color: #e74c3c; } .button.button-danger:disabled, button.button-danger:disabled, input[type="submit"].button-danger:disabled, input[type="reset"].button-danger:disabled, input[type="button"].button-danger:disabled { color: #FFF; cursor: not-allowed; background-color: #ee8377; border-color: #ee8377; } input[type="email"], input[type="number"], input[type="date"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { padding: 0.4rem 0.6rem; background-color: #FFF; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; -webkit-transition: border 0.2s; transition: border 0.2s; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], select:not([size]), textarea:not([rows]) { height: 2.5rem; } /* Removes awkward default styles on some inputs for iOS */ input[type="email"], input[type="number"], input[type="date"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], input[type="button"], input[type="submit"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { min-height: 4rem; padding-top: 0.4rem; padding-bottom: 0.4rem; resize: vertical; } input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #33C3F0; outline: 0; } .has-error, .has-error:focus { border: 1px solid #e74c3c !important; outline: 0; } .has-success, .has-success:focus { border: 1px solid #2ecc71 !important; outline: 0; } label, legend { display: block; margin-bottom: 0.5rem; font-weight: 600; } fieldset { padding: 0; border-width: 0; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-body { display: inline-block; margin-left: 0.5rem; font-weight: normal; } ul { list-style: circle inside; } ol { list-style: decimal inside; } ol, ul { padding-left: 0; margin-top: 0; } ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; } li { margin-bottom: 1rem; } .list-inline > li { display: inline-block; padding-right: .2rem; padding-left: .2rem; margin-bottom: .5rem; } /* Cards */ .card { border: 1px solid #E1E1E1; padding: 10px 25px; border-radius: 4px; box-shadow: 1px 1px 1px #E1E1E1; min-height: 160px; margin-bottom: 1rem; } .card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card p { margin-bottom:1.2rem; } a.card { display: block; color: #757575; text-decoration: none; -webkit-transition: color .3s, border-color .3s, -webkit-transform .3s; transition: color .3s, border-color .3s, -webkit-transform .3s; transition: color .3s, transform .3s, border-color .3s; transition: color .3s, transform .3s, border-color .3s, -webkit-transform .3s; } a.card:hover, a.card:active { color: black; border-color: #8A8A8A; -webkit-transform: translateX(-2px) translateY(-2px); transform: translateX(-2px) translateY(-2px); } code { padding: 0.2rem 0.5rem; margin: 0 0.2rem; font-size: 90%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; } pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; overflow-x: auto; } @media (max-width: 560px) { pre > code { white-space: nowrap; } } .alert { width: 100%; border-radius: 4px; border: 1px solid #000; color: #000; background-color: #FFF; padding: 10px 15px; } .alert.alert-primary { border: 1px solid #33C3F0; color: #FFF; background-color: #33C3F0; } .alert.alert-success { border: 1px solid #2ecc71; color: #FFF; background-color: #2ecc71; } .alert.alert-danger { border: 1px solid #e74c3c; color: #FFF; background-color: #e74c3c; } .table-responsive { overflow-x: auto; } .table-responsive th, .table-responsive td { white-space: nowrap; } table { border-collapse: collapse; -webkit-overflow-scrolling: touch; } th, td { padding: 0.75rem 1rem; } th { text-align: left; } td { border-bottom: 1px solid #E1E1E1; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } tr th { border-bottom: 1px solid #000; } @media (min-width: 560px) { th:first-child, td:first-child { padding-left: 1rem; } } button, .button { margin-bottom: 1rem; } input, textarea, select, fieldset, pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 1rem; } p { margin-top: 0; } .alert { margin-bottom: 1rem; } .u-full-width { width: 100%; } .u-max-full-width { max-width: 100%; } /* Floats */ .u-pull-right { float: right; } .u-pull-left { float: left; } .u-cf { content: ""; display: table; clear: both; } /* Positioning */ .u-center-block { display: block; margin-left: auto; margin-right: auto; } /** * Note: * * Nest this class inside something with `position: relative` to have * your element centered relative to its containing element. * * Use this class without nesting it to have your element centered relative * to the viewport. */ .u-center-abs { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } /* Type */ .u-text-center { text-align: center !important; } .u-text-right { text-align: right !important; } .u-text-left { text-align: left !important; } .u-text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } /* Peek a boo */ .u-hide { display: none !important; } .u-show { display: block !important; } .u-invisible { visibility: hidden !important; } .u-visible { visibility: visible !important; } /* Misc */ .u-img-responsive { display: block; max-width: 100%; height: auto; } /* Misc */ hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1; } /* Clearing */ .container:after, .row:after { content: ""; display: table; clear: both; } /***** * Media Queries * * Note: The best way to structure the use of media queries is to create the * queries near the relevant code. For example, if you wanted to change the * styles for buttons on small devices, paste the mobile query code up in the * buttons section and style it there. *****/ @media (min-width: 400px) { /* Larger than mobile */ } @media (min-width: 560px) { /* Larger than phablet (also point when grid becomes active) */ } @media (min-width: 720px) { /* Larger than tablet */ } @media (min-width: 960px) { /* Larger than desktop */ } @media (min-width: 1200px) { /* Larger than Desktop HD */ }