/** * Minimal UI sass, minimal-ui.susielu.com * Created by Susie Lu, www.susielu.com * */ /* ----Settings---- */ /* Grid */ /* Font */ /* UI */ /* Colors */ /* Set your primary color */ /* Graph colors */ /* ----Grid----*/ /* Using Andrzej Osmialowski's 1140px (12 column) grid: http://www.1140px.com/ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; margin: 0; padding: 0; } article, aside, figure, figure img, figcaption, hgroup, footer, header, nav, section, video, object { display: block; } a img { border: 0; } figure { position: relative; } figure img { width: 100%; } .container { margin: 0 auto; padding: 0; position: relative; width: 1140px; } .row { margin-bottom: 20px; } .column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12 { display: inline; float: left; margin-left: 10px; margin-right: 10px; } .container .left-margin { margin-left: 0; } .container .right-margin { margin-right: 0; } .container .column1 { width: 75px; } .container .column2 { width: 170px; } .container .column3 { width: 265px; } .container .column4 { width: 360px; } .container .column5 { width: 455px; } .container .column6 { width: 550px; } .container .column7 { width: 645px; } .container .column8 { width: 740px; } .container .column9 { width: 835px; } .container .column10 { width: 930px; } .container .column11 { width: 1025px; } .container .column12 { width: 1120px; } .container .prefix1 { margin-left: 105px; } .container .prefix2 { margin-left: 200px; } .container .prefix3 { margin-left: 295px; } .container .prefix4 { margin-left: 390px; } .container .prefix5 { margin-left: 485px; } .container .prefix6 { margin-left: 580px; } .container .prefix7 { margin-left: 675px; } .container .prefix8 { margin-left: 770px; } .container .prefix9 { margin-left: 865px; } .container .prefix10 { margin-left: 960px; } .container .prefix11 { margin-left: 1055px; } @media only screen and (min-width: 960px) and (max-width: 1160px) { .container { width: 960px; } .container .column1 { width: 60px; } .container .column2 { width: 140px; } .container .column3 { width: 220px; } .container .column4 { width: 300px; } .container .column5 { width: 380px; } .container .column6 { width: 460px; } .container .column7 { width: 540px; } .container .column8 { width: 620px; } .container .column9 { width: 700px; } .container .column10 { width: 780px; } .container .column11 { width: 860px; } .container .column12 { width: 940px; } .container .prefix1 { margin-left: 90px; } .container .prefix2 { margin-left: 170px; } .container .prefix3 { margin-left: 250px; } .container .prefix4 { margin-left: 330px; } .container .prefix5 { margin-left: 410px; } .container .prefix6 { margin-left: 490px; } .container .prefix7 { margin-left: 570px; } .container .prefix8 { margin-left: 650px; } .container .prefix9 { margin-left: 730px; } .container .prefix10 { margin-left: 810px; } .container .prefix11 { margin-left: 890px; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .container, .container16 { width: 768px; } .container .column1 { width: 44px; } .container .column2 { width: 108px; } .container .column3 { width: 172px; } .container .column4 { width: 236px; } .container .column5 { width: 300px; } .container .column6 { width: 364px; } .container .column7 { width: 428px; } .container .column8 { width: 492px; } .container .column9 { width: 556px; } .container .column10 { width: 620px; } .container .column11 { width: 684px; } .container .column12 { width: 748px; } .container .prefix1 { margin-left: 74px; } .container .prefix2 { margin-left: 138px; } .container .prefix3 { margin-left: 202px; } .container .prefix4 { margin-left: 266px; } .container .prefix5 { margin-left: 330px; } .container .prefix6 { margin-left: 394px; } .container .prefix7 { margin-left: 458px; } .container .prefix8 { margin-left: 522px; } .container .prefix9 { margin-left: 586px; } .container .prefix10 { margin-left: 650px; } .container .prefix11 { margin-left: 714px; } } @media only screen and (max-width: 767px) { .container, .container16 { width: 300px; } .container .column1, .container .column2, .container .column3, .container .column4, .container .column5, .container .column6, .container .column7, .container .column8, .container .column9, .container .column10, .container .column11, .container .column12 { margin: 0 0 20px 0; width: 300px; } .container .prefix1, .container .prefix2, .container .prefix3, .container .prefix4, .container .prefix5, .container .prefix6, .container .prefix7, .container .prefix8, .container .prefix9, .container .prefix10, .container .prefix11 { padding-left: 0; } .row { margin: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .container, .container16 { width: 420px; } .container .column1, .container .column2, .container .column3, .container .column4, .container .column5, .container .column6, .container .column7, .container .column8, .container .column9, .container .column10, .container .column11, .container .column12 { margin: 0 0 20px 0; width: 420px; } .container .prefix1, .container .prefix2, .container .prefix3, .container .prefix4, .container .prefix5, .container .prefix6, .container .prefix7, .container .prefix8, .container .prefix9, .container .prefix10, .container .prefix11 { padding-left: 0; } .row { margin: 0; } } .clearfix:before, .clearfix:after, .row:before, .row:after, .container:before, .container:after { content: '.'; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0; } /* http://sonspring.com/journal/clearing-floats */ .clear { clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0; } .row:after, .clearfix:after, .container:after { clear: both; } /* For IE7. Move this to separate file when you notice some problems */ .row, .clearfix { zoom: 1; } img, object, embed { max-width: 100%; } img { height: auto; } /* ----Fonts---- */ body { font-family: "Cardo", "Palatino Linotype", "Book Antiqua", Palatino, serif; color: #444; font-size: 18px; line-height: 1.5; } h1, h2, h3, h4, h5, h6, button, select, input, textarea, nav, .nav, svg text { font-family: "Montserrat", Avenir Next, Arial, Helvetica, sans-serif; } h1 { font-size: 38px; } h2 { font-size: 30px; } h3 { font-size: 22px; } code { font-family: Courier; color: #999; } /* ----UI styles---- */ /* Tags */ html { overflow-y: scroll; } h1, h2 { padding-top: 30px; padding-bottom: 15px; } h3, h4, h5, h6 { padding-top: 15px; padding-bottom: 15px; } header, footer { padding-top: 30px; padding-bottom: 30px; } small { font-size: 12px; } section { padding-bottom: 30px; } p { margin-bottom: 1em; margin-top: 5px; line-height: 1.8; } a { color: #11AAB0; text-decoration: none; font-weight: 700; } .bg-dark a { color: #64C4C8; } a:hover { color: #64C4C8; } .bg-dark a:hover { color: #11AAB0; } hr { border: 0; border-top: 1px solid #E4E4E4; margin-top: 30px; margin-bottom: 30px; } ul { margin-left: 40px; margin-bottom: 20px; } pre { background: #f5f5f5; border: 2px solid #E4E4E4; padding: 10px 15px 10px 15px; font-size: 14px; word-wrap: break-word; } .bg-dark code { color: #E4E4E4; } pre code { color: #444; } blockquote { margin-top: 10px; margin-bottom: 10px; padding: 0px 20px; border-left: 3px solid #E4E4E4; } /* Navigation Bar */ .nav { border-bottom: 1px solid #E4E4E4; border-top: 1px solid #E4E4E4; padding-top: 15px; } .nav a { text-decoration: none; padding: 5px 15px 5px 10px; margin-left: 0; margin-bottom: 10px; color: #444; font-size: 18px; white-space: nowrap; font-weight: 400; display: inline-block; } .nav a:hover { color: #11AAB0; } .nav a:not(:last-child) { border-right: 2px solid #E4E4E4; } .nav.nav-box { border-top: none; } .nav.nav-box a { border: 2px solid #E4E4E4; margin-right: 5px; background: #E4E4E4; } .nav.nav-box a:hover { border: 2px solid #11AAB0; } .nav.nav-small { padding-top: 0px; padding-bottom: 0px; margin-bottom: 10px; } .nav.nav-small a { border: none; font-size: 14px; padding: 12px 15px 5px 10px; } /* Forms */ textarea, button, option, optgroup, fieldset, label { vertical-align: middle; margin-bottom: 5px; } label { margin-right: 15px; } /* Tables */ table { border-spacing: 0px; } table thead th { border-bottom: 2px solid #999; } table thead th:not(:last-child), table tbody td:not(:last-child) { border-right: 1px solid #999; } table th, table td { padding: 7px 10px; } table tbody tr:not(:last-child) td { border-bottom: 1px solid #999; } table.light { color: #fff; } table.light thead th { border-bottom: 2px solid #fff; } table.light thead th:not(:last-child), table.light tbody td:not(:last-child) { border-right: 1px solid #fff; } table.light tbody tr:not(:last-child) td { border-bottom: 1px solid #fff; } /* Tags */ .tag { background: #E4E4E4; font-size: 12px; padding: 3px 5px 3px 5px; border: 1px solid #999; border-radius: 10px; } /* Backgrounds */ .bg-dark { background: #444; color: #fff; } .bg-light { background: #EFEFEF; color: #444; } .bg-grey-light { background: #EFEFEF; } .bg-grey { background: #E4E4E4; } .bg-grey-med-dark { background: #999; } .bg-grey-dark { background: #444; } .bg-denim { background: #30465C; } .bg-denim-light { background: #4E7091; } .bg-blue { background: #3360B2; } .bg-blue-light { background: #5A87DA; } .bg-teal { background: #11AAB0; } .bg-teal-light { background: #64C4C8; } .bg-green { background: #3EAB65; } .bg-green-light { background: #7CC295; } .bg-yellow { background: #ECB72D; } .bg-yellow-light { background: #F4CB63; } .bg-red { background: #E55F47; } .bg-red-light { background: #ED8977; } /* Colors */ .cl-grey-light { color: #EFEFEF; } .cl-grey { color: #E4E4E4; } .cl-grey-med-dark { color: #999; } .cl-grey-dark { color: #444; } .cl-denim { color: #30465C; } .cl-denim-light { color: #4E7091; } .cl-blue { color: #3360B2; } .cl-blue-light { color: #5A87DA; } .cl-teal { color: #11AAB0; } .cl-teal-light { color: #64C4C8; } .cl-green { color: #3EAB65; } .cl-green-light { color: #7CC295; } .cl-yellow { color: #ECB72D; } .cl-yellow-light { color: #F4CB63; } .cl-red { color: #E55F47; } .cl-red-light { color: #ED8977; } /* Buttons */ button, input[type="submit"], select, option, .btn { font-size: 14px; background: none; border: 2px solid #11AAB0; padding: 7px; color: #11AAB0; margin-right: 20px; outline: none; border-radius: 0px; -webkit-appearance: none; -webkit-border-radius: 0px; } .btn:hover, input[type="submit"]:hover { background: #64C4C8; color: #fff; } select, .btn.btn-active { background: #11AAB0; color: #fff; } .btn.btn-active:hover { border: 2px solid #64C4C8; } /* Alignment */ .fl-right { float: right; } .fl-left { float: left; } /* Text formatting */ .txt-center { text-align: center; text-anchor: middle; } .txt-left { text-align: left; text-anchor: start; } .txt-right { text-align: right; text-anchor: end; } .txt-subtitle { text-transform: uppercase; font-size: 12px; } .txt-white { color: #fff; } /*# sourceMappingURL=minimal-ui.css.map */