/** * Reset some basic elements * * @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300); */ body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; } /** * Basic styling */ body { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.5; font-weight: 300; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; } /** * Set `margin-bottom` to maintain vertical rhythm */ h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; } /** * Images */ /*img { * max-width: 100%; * vertical-align: middle; * } */ /** * Lists */ ul, ol { margin-left: 30px; } li > ul, li > ol { margin-bottom: 0; } /** * Headings */ h1, h2, h3, h4, h5, h6 { font-weight: 300; } /** * Links */ a { color: #2a7ae2; text-decoration: none; } a:visited { color: #1756a9; } a:hover { color: #111; text-decoration: underline; } /** * Blockquotes */ blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; } blockquote > :last-child { margin-bottom: 0; } /** * Code formatting */ pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; } code { padding: 1px 5px; } pre { padding: 8px 12px; overflow-x: scroll; } pre > code { border: 0; padding-right: 0; padding-left: 0; } /** * Site header */ #logo-col img { margin-bottom: 15px; } #logo-col h1 { padding: 0; margin: 0; } #logo-col a { display: block; height: 46px; } #logo-col a span { display: none; } /* Splash gradient background */ #splash, .title { background: #3c6db3 !important; background: -moz-linear-gradient(90deg, #3c6db3 18%, #325691 99%); background: -webkit-linear-gradient(90deg, #3c6db3 18%, #325691 99%); background: -o-linear-gradient(90deg, #3c6db3 18%, #325691 99%); background: -ms-linear-gradient(90deg, #3c6db3 18%, #325691 99%); background: linear-gradient(180deg, #3c6db3 18%, #325691 99%); background-image: url("/static/img/titles/title_front.png") !important; background-size: cover !important; /* this is esentially h2 for the tile page, h1 otherwise */ } #splash h1, #splash h2, .title h1, .title h2 { font-family: "Open Sans Semibold"; text-shadow: 0px 3px 1px #253a66; color: white; font-size: 30px; } #splash p, .title p { color: white; } .title#start { background-image: url("/static/img/titles/title_start.png") !important; } .title#tools { background-image: url("/static/img/titles/title_tools.png") !important; } .title#tech { background-image: url("/static/img/titles/title_tech.png") !important; } .title#deploy { background-image: url("/static/img/titles/title_deploy.png") !important; background-position: right 20% !important; } .title { height: 180px; margin-bottom: 30px; } .title #page-title { padding-top: 20px; } .title img.img-circle { background-color: white; padding: 6px; width: 100px; margin-top: 30px; margin-right: 20px; float: left; } .title h1 { margin-top: 60px; } @media all and (min-width: 768px) { .title #page-description p { font-size: 14pt !important; height: 115px; display: table-cell !important; vertical-align: middle !important; padding-top: 35px; } } @media all and (max-width: 767px) { .title img.img-circle { padding: 3px; width: 50px; } .title h1 { margin-top: 40px; font-size: 1.8em; } .title #page-description p { font-size: 1em !important; height: 70px; display: table-cell !important; padding-top: 15px; } } #splash, .title, #header { margin-left: 0px !important; margin-right: 0px !important; width: 100% !important; } #splash { min-height: 370px; } /** * Site footer */ footer { margin-top: 80px; } .site-footer { border-top: 1px solid #e8e8e8; padding: 30px 0; } .footer-heading { font-size: 18px; margin-bottom: 15px; } .contact-list, .social-media-list { list-style: none; margin-left: 0; } .footer-col-wrapper { font-size: 15px; color: #828282; margin-left: -15px; } .footer-col { float: left; margin-bottom: 15px; padding-left: 15px; } .footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); } .footer-col-2 { width: -webkit-calc(20% - (30px / 2)); width: calc(20% - (30px / 2)); } .footer-col-3 { width: -webkit-calc(45% - (30px / 2)); width: calc(45% - (30px / 2)); } @media screen and (max-width: 800px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); } .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } } @media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } } .footer { background-color: #e6e6e6; color: #777; font-size: 13px; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 30px; font-family: "Open sans"; } .footer .widget-title { color: #8d8d8d; font-size: 17px; font-weight: bold; margin: 0 0 20px 0; text-transform: uppercase; } .footer .widget-body { color: #777; font-size: 13px; } .footer dd { line-height: 1.6; margin-left: 0; } .footer a { color: #000 !important; } /** * Page content */ .page-content { padding: 30px 0; } .page-heading { font-size: 20px; }