article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1 } audio:not([controls]) { display: none; height: 0 } [hidden] { display: none } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% } html, button, input, select, textarea { font-family: sans-serif } body { margin: 0; padding: 2em; } a:focus { outline: thin dotted } a:active, a:hover { outline: 0 } h1 { font-size: 2em; margin: 0 0 0.67em } h2 { font-size: 1.5em; margin: 0 0 0.83em } h3 { font-size: 1.17em; margin: 0 0 1em } h4 { font-size: 1em; margin: 0 0 1.33em } h5 { font-size: 0.83em; margin: 0 0 1.67em } h6 { font-size: 0.75em; margin: 0 0 2.33em } abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: bold } blockquote { margin: 0 40px 1em } dfn { font-style: italic } mark { background: #ff0; color: #000 } p, pre { margin: 0 0 1em } code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word } q { quotes: none } q:before, q:after { content: ''; content: none } small { font-size: 75% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sup { top: -0.5em } sub { bottom: -0.25em } dl, menu, ol, ul { margin: 0 0 1em } dd { margin: 0 0 0 40px } menu, ol, ul { padding: 0 0 0 40px } nav ul, nav ol { list-style: none; list-style-image: none } img { border: 0; -ms-interpolation-mode: bicubic } svg:not(:root) { overflow: hidden } figure { margin: 0 } form { margin: 0 } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em } legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle } button, input { line-height: normal } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible } button[disabled], input[disabled] { cursor: default } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } textarea { overflow: auto; vertical-align: top } table { border-collapse: collapse; border-spacing: 0 } body { font: normal 16px/1.5 Arial, Helvetica, sans-serif; color: #333; background: #FFF } .media, .mediaBody { overflow: hidden; zoom: 1 } .mediaAside { float: left; display: inline; margin-right: 1em } .clearfix, .row { zoom: 1 } .clearfix:before, .row:before, .clearfix:after, .row:after { content: ""; display: table } .clearfix:after, .row:after { clear: both } h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: normal } h1 { font-size: 64px; text-align: center; font-family: "lato", Arial, Helvetica, sans-serif; margin: 0 0 40px } h2 { font-size: 40px; font-family: "lato", Arial, Helvetica, sans-serif; font-weight: 900; text-align: center; position: relative; z-index: 1 } h2 span { display: inline-block; padding: 20px; background: #FFF } h2:before { position: absolute; z-index: -1; top: 55%; left: 0; right: 0; border-top: 1px dashed #AAA; border-bottom: 1px dashed #F5F5F5; content: "" } h3 { font: bold 20px/1.2 Arial, Helvetica, sans-serif; margin: 0 0 20px } h4 { font: bold 16px/1.2 Arial, Helvetica, sans-serif } p { margin: 0 0 20px } a { color: #0C7AB9 } a:hover { color: #FFF; background: #0C7AB9; text-decoration: none } .container { width: 900px; margin: 0 auto } .masthead { padding: 20px 0; background: url(../img/banner.jpg) no-repeat center 0; margin-bottom: 60px } .masthead img { display: block; margin: 0 auto } .cta { text-align: center } .cta .button-primary { padding: 20px 40px; -webkit-box-sizing: border-bottom; -moz-box-sizing: border-bottom; box-sizing: border-bottom } .small { font-size: 12px; font-weight: normal } .footer { background: #13181F; color: #666; text-align: center; padding: 40px 0 } .footer a { color: #FFF; text-decoration: none } .footer i { margin-right: 4px } .featured-list { list-style: none; text-align: center; margin: 80px 0 0; padding: 0 } .featured-list li { display: inline-block; margin: 0 20px 20px } .featured-list li a { position: relative; display: block; color: #666 } .featured-list li a:before { content: ""; display: block; margin: 0 auto 5px } .featured-list li a:hover { background: none; color: #FFF } .featured-list .treehouse:before { background: url(../img/treehouse.png) no-repeat center bottom; width: 58px; height: 42px } .featured-list .webdev:before { background: url(../img/webdev.png) no-repeat center bottom; width: 103px; height: 42px } .block { margin-bottom: 60px } .mh-logo { font-family: "lato", Arial, Helvetica, sans-serif; font-weight: 900; text-transform: uppercase; font-size: 24px; text-align: center; color: #7A7C7C } .mh-logo .extension { text-transform: none } .feature { float: left; width: 47%; margin-bottom: 20px } .feature.alt { float: right } .feature .mediaAside { font-size: 32px; line-height: 1; margin: 0; width: 60px } .syntaxhighlighter .toolbar { display: none } .button-group { margin: 0; font-size: 0 } .button-primary { font-size: 16px; background: #0C7AB9; color: #FFF; display: inline-block; padding: 5px 20px; text-decoration: none; font-weight: bold; border-radius: 2px; margin: 0 5px 5px 0 } .button-primary:hover, .button-primary:focus { background: #0a6497; outline: none } .button-primary:focus { box-shadow: 0 0 10px #0f9ae9 } .button-primary:active { box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.25) } .button-primary.is-disabled { opacity: .5 } @media only screen and (max-width: 980px) { .container { width: 95% } .button { margin-bottom: 20px } } @media only screen and (max-width: 830px) { img { max-width: 100%; height: auto } .feature, .alt { float: none; width: 100% } } @media only screen and (max-width: 640px) { .mh-logo { font-size: 12.8px } h1 { font-size: 36px } h2 { font-size: 24px } }