html { padding: 0px; margin: 0px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif !important; letter-spacing: 0; font-weight: 500; font-style: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga" on; color: black; font-size: 18px; line-height: 1.4; } /* body, html { margin: 15px; padding: 5px; font-family: "Lora", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size: 18px; } body { line-height: 2; color: #444; background: #fff; margin-left: auto; margin-right: auto; margin-bottom: 15px; min-height: 200px; } */ img { height:auto; max-width: 100%; } header { width: 100%; overflow: hidden; } .container { width: 95%; max-width: 650px; margin: 0 auto; position: relative; } strong { font-weight: 700; } h1 { font-family: "Lora", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 600; margin: 10px 0; line-height: 40px; color: #8b0000; /* darkred */ text-rendering: optimizelegibility; font-size: 50px; } h2 { font-family: "Lora", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 500; margin: 10px 0; line-height: 40px; color: #8b0000; /* darkred */; text-rendering: optimizelegibility; font-size: 36px; } h3 { font-family: "Lora", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 400; margin: 10px 0; line-height: 40px; color: #8b0000; /* darkred */; text-rendering: optimizelegibility; font-size: 24.5px; } h4 { font-family: "Lora", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; margin: 10px 0; line-height: 20px; color: inherit; text-rendering: optimizelegibility; font-size: 17.5px; } h5 { font-family: "Lora", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; margin: 10px 0; line-height: 20px; color: #8b0000; /* darkred */; text-rendering: optimizelegibility; font-size: 14px; } h6 { font-family: "Lora", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; margin: 10px 0; line-height: 20px; color: #8b0000; /* darkred */; text-rendering: optimizelegibility; font-size: 11.9px; } hr { background: #EEE; border: 0; height: 1px; margin: 40px 0 40px; } blockquote { margin: 1em 0; border-left: 3px solid #ccc; padding-left: 20px; text-align: left; } dt { font-weight: 700; } dd { padding: 0; margin: 0 0 25px 0; } a { -webkit-transition: all ease 150ms; -moz-transition: all ease 150ms; -o-transition: all ease 150ms; transition: all ease 150ms; text-decoration: none; color: #26abe2; } a:hover { text-decoration: underline; } a:active { color: #47b5e2; } pre { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; } code { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; } /* Header and Footer Styles */ .header { background-image: url('../images/header-bg.jpeg'); background-position: 50% 50% !important; background-size: cover; min-height: 173px; position: relative; overflow: hidden; } .header .overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.175); height: 100vh; } .header .logo { width: 100px; height: 100px; display: block; float: left; margin: 40px 20px 0px 20px; position: relative; } .header .logo img { width: 100%; height: 100%; } .header .inner { max-width: 1040px; margin-left: auto; margin-right: auto; position: relative; z-index: 100; } .header .promo { height: 140px; padding-top: 36px; padding-left: 20px; padding-right: 20px; } @media (max-width: 480px) { .header .promo { height: auto; padding-bottom: 10px; } } .header .promo .title { color: #fff; font-size: 40px; text-decoration: none; padding-top: 0px; padding-bottom: 0px; line-height: 1.2; --x-height-multiplier: 0.363; --baseline-multiplier: 0.157; letter-spacing: -.02em; font-weight: 700; font-style: normal; } .header .promo .subtitle { color: #fff; font-size: 24px; --x-height-multiplier: 0.363 !important; --baseline-multiplier: 0.157 !important; letter-spacing: -.02em !important; font-weight: 400; font-style: normal; } @media (max-width: 480px) { .header .promo .subtitle { clear: both; padding-top: 20px; font-size: 24px; } } .footer { height: 86px; font-size: 14px; } .footer:before, .footer:after { content: " "; display: table; } .footer:after { clear: both; } .footer .inner { padding-right: 20px; padding-left: 20px; margin-top: 10px; padding-bottom: 30px; margin-right: auto; margin-left: auto; max-width: 1040px; min-height: 35px; border-top: 1px solid rgba(0, 0, 0, 0.15); } .footer .inner:before, .footer .inner:after { content: " "; display: table; } .footer .inner:after { clear: both; } .footer .inner ul { padding-top: 10px; padding-bottom: 30px; margin-top: 10px; list-style: none; float: right; } .footer .inner ul li { float: left; border-radius: 0; box-shadow: none; height: auto; line-height: inherit; border-width: 0; padding: 0; vertical-align: baseline; color: rgba(0, 0, 0, 0.44); white-space: normal; text-align: left; } .footer .inner ul li a, .footer .inner ul li span { color: inherit; font-size: 16px; text-decoration: none; } .footer .inner ul li :after { display: block; float: right; content: '\2013'; border-color: #B5E4A7; color: #B5E4A7; padding-right: .45em; padding-left: .45em; } .footer .inner ul li.last :after { display: none; } .footer .inner .twitter { color: #000; } .footer .inner .twitter .ico { vertical-align: -3px; } /* Navigation Styles */ .navigation-container { padding-top: 8px; padding-bottom: 10px; } .navigation-container .inner { max-width: 1040px; margin-left: auto; margin-right: auto; padding-right: 20px; padding-left: 20px; position: relative; height: 45px; } .navigation-container .inner:before, .navigation-container .inner:after { content: " "; display: table; } .navigation-container .inner:after { clear: both; } .navigation-container .inner:after { position: absolute; content: ''; display: block; height: 1px; bottom: 0px; left: 20px; right: 20px; background-color: rgba(0, 0, 0, 0.15); } @media (max-width: 480px) { .navigation-container .inner { height: 90px; } } .navigation-container .navigation { float: left; width: 80%; position: relative; list-style: none; padding-bottom: 5px; } @media (max-width: 480px) { .navigation-container .navigation { width: 200px; float: left; } } .navigation-container .navigation .item { float: left; display: block; line-height: 40px; } .navigation-container .navigation .item a { display: block; float: left; margin-right: 22px; letter-spacing: .042em; font-weight: 600; font-size: 14px; text-transform: uppercase; color: rgba(0, 0, 0, 0.44); text-decoration: none; } .navigation-container .navigation .divider { float: left; display: block; border-left: 1px solid; border-color: #000; padding-left: 22px; margin-top: 9px; height: 20px; } .navigation-container .navigation .divider.last { border-left: 0px solid; } .nav-button { display: inline-block; padding-right: 10px; opacity: 0.5; } .nav-button:hover { opacity: 1; } .twitter-button, .search-slider, .nav-button-share { margin-top: 7px; margin-left: 10px; } @media (max-width: 480px) { .twitter-button, .search-slider, .nav-button-share { margin-left: 0px; } } .linkedin-button { border-color: red; } .facebook-button { border-color: green; } .twitter-button { border-color: blue; } @media only screen and (min-width: 680px) { nav, nav #menu { height: 60px; } nav li, nav a { float: left; } nav ul.toplinks { float: left; padding: 0; clear: none; } nav ul.toplinks li { margin: 0 0 0 10px; } nav #menu-toggle { display: none; } nav #menu { max-height: 9999px; clear: none; } } /* Content Styles */ .content-container { max-width: 1000px; } section { padding: 1em 0 3em; text-align: center; } .vibrant { background: #222; color: #fff; } nav:before, nav:after, header:before, header:after, section:before, section:after { content: " "; display: table; } nav:after, header:after, section:after { clear: both; } nav, header, section { *zoom: 1; } /* Form Styles */ input { display: block; line-height: 30px; margin: 0 auto; width: 100%; max-width: 400px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all linear 0.2s; -moz-transition: all linear 0.2s; -o-transition: all linear 0.2s; transition: all linear 0.2s; } input:focus { border-color: #007eb2; outline: 0; } .docs-nav { background-color: #f5f5f5; list-style: none; margin: 0 0 0 20px; padding: 15px 20px; font-size: 0.97em; } .docs-nav a { display: block; margin: 0 -20px; padding: 0 20px; text-decoration: none; border-right: 2px solid transparent; } @media only screen and (min-width: 400px) { } @media only screen and (min-width: 600px) { } @media only screen and (min-width: 960px) { .docs-nav { position: absolute; top: 0; width: 220px; -webkit-transition: top linear 50ms; -moz-transition: top linear 50ms; -o-transition: top linear 50ms; transition: top linear 50ms; } .docs-nav.fixed { position: fixed; top: 49px; width: 220px; } .docs-nav a:hover { background: #eee; } .docs-nav a:active, .docs-nav .active { background: #eee; border-right: 2px solid #ccc; } .docs-nav .separator { height: 20px; } .docs-content { padding-left: 310px; } header { padding: 4em 0 4em 0; } .container { max-width: 1000px; padding: 0 20px; } section { padding: 3em 0; text-align: left; } .centered { text-align: center; } input { display: inline-block; } }