body { max-width: 720px; padding: 40px; margin: 0 auto; background: #f7f7f7; color: #333; font: 16px/1.4 Open Sans, Helvetica, Arial, sans-serif; } a { color: #069; text-decoration: none; } a:hover, a:focus, a:active { text-decoration: underline; } h1, h2 { line-height: 1.2; } p { margin: 0 0 1em; } /* structure */ .site-box { padding: 60px 60px 0; border: 1px solid #ccc; margin: 0 0 3em; background: #fff; text-align: center; } .site-footer { width: 75%; margin: 0 auto; } .logo { margin: 0 0 1.25em; font-size: 2.375em; color: #69a619; text-transform: lowercase; text-shadow: 1px 1px 0 #304d08; text-decoration: none; } .tagline { margin: 0 0 0.75em; font-size: 2.5em; } .description { color: #555; font-size: 1.25em; } /** * Calls to action */ .cta-option { position: relative; display: inline-block; /* IE6/7 inline-block hack */ *display: inline; *zoom: 1; margin: 1.5em 0.75em 0; vertical-align: bottom; } /** * Download button */ .btn-download { position: relative; display: inline-block; /* IE6/7 inline-block hack */ *display: inline; *zoom: 1; padding: 0.6em 1.25em; border: 1px solid #5e9612; margin: 0 0 10px; color: #fff; background: #69a619; border-radius: 4px; box-shadow: 0 2px 5px -2px #111, inset 0 2px 5px 0 rgba(255, 255, 255, 0.3); font-size: 1.5em; text-align: center; text-decoration: none; white-space: nowrap; } .btn-download:hover, .btn-download:focus, .btn-download:active { background: #6ead1a; text-decoration: none; } .btn-download:active { box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2); background: #5d9117; } /** * Alternative download button * * @extends .btn-download */ .btn-download-alt { border-color: #ccc; background: #eee; box-shadow: none; color: #666; font-size: 1.25em; } .btn-download-alt:hover, .btn-download-alt:focus, .btn-download-alt:active { background: #f5f5f5; } .btn-download-alt:active { background: #ddd; } /** * Share bar */ .share-bar { overflow: hidden; padding: 15px 30px; border-top: 1px solid #ddd; margin: 50px -60px 0; background: #eee; line-height: 28px; *zoom: 1; } .share-opt { float: left; height: 28px; margin: 0 15px 0 0; } .read-more { float: right; } /** * Utilities */ .txt-small { font-size: 0.75em; } .txt-large { font-size: 1.25em; } .txt-mute { color: #999; } @media screen and (max-width: 700px) { .read-more { float: none; display: block; margin: 0 0 1em; line-height: 1.2; } } @media screen and (max-width: 540px) { body { padding: 20px; font-size: 0.875em; } .site-box { padding: 30px 30px 0; } .cta-option { margin-left: 0; margin-right: 0; } .share-bar { margin-left: -30px; margin-right: -30px; text-align: center; } .share-opt { float: none; display: inline-block; margin: 0 1em 0.5em; } }