/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* LAYOUT STYLES */ body { font-size: 15px; line-height: 1.5; background: #fafafa url(../images/body-bg.jpg) 0 0 repeat; font-family: 'Helvetica Neue', Helvetica, Arial, serif; font-weight: 400; color: #666; } a { color: #2879d0; } a:hover { color: #2268b2; } header { padding-top: 40px; padding-bottom: 40px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; background: #2e7bcf url(../images/header-bg.jpg) 0 0 repeat-x; border-bottom: solid 1px #275da1; } header h1 { letter-spacing: -1px; font-size: 72px; color: #fff; line-height: 1; margin-bottom: 0.2em; width: 540px; } header h2 { font-size: 26px; color: #9ddcff; font-weight: normal; line-height: 1.3; width: 540px; letter-spacing: 0; } .inner { position: relative; width: 940px; margin: 0 auto; } #content-wrapper { border-top: solid 1px #fff; padding-top: 30px; } #main-content { width: 690px; float: left; } #main-content img { max-width: 100%; } aside#sidebar { width: 200px; padding-left: 20px; min-height: 504px; float: right; background: transparent url(../images/sidebar-bg.jpg) 0 0 no-repeat; font-size: 12px; line-height: 1.3; } aside#sidebar p.repo-owner, aside#sidebar p.repo-owner a { font-weight: bold; } #downloads { margin-bottom: 40px; } a.button { width: 134px; height: 58px; line-height: 1.2; font-size: 23px; color: #fff; padding-left: 68px; padding-top: 22px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; } a.button small { display: block; font-size: 11px; } header a.button { position: absolute; right: 0; top: 0; background: transparent url(../images/github-button.png) 0 0 no-repeat; } aside a.button { width: 138px; padding-left: 64px; display: block; background: transparent url(../images/download-button.png) 0 0 no-repeat; margin-bottom: 20px; font-size: 21px; } code, pre { font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; color: #222; margin-bottom: 30px; font-size: 13px; } code { background-color: #f2f8fc; border: solid 1px #dbe7f3; padding: 0 3px; } pre { padding: 20px; background: #fff; text-shadow: none; overflow: auto; border: solid 1px #f2f2f2; } pre code { color: #2879d0; background-color: #fff; border: none; padding: 0; } ul, ol, dl { margin-bottom: 20px; } /* COMMON STYLES */ hr { height: 1px; line-height: 1px; margin-top: 1em; padding-bottom: 1em; border: none; background: transparent url('../images/hr.png') 0 0 no-repeat; } table { width: 100%; border: 1px solid #ebebeb; } th { font-weight: 500; } td { border: 1px solid #ebebeb; text-align: center; font-weight: 300; } form { background: #f2f2f2; padding: 20px; } /* GENERAL ELEMENT TYPE STYLES */ #main-content h1 { font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 2.8em; letter-spacing: -1px; color: #474747; } #main-content h1:before { content: "/"; color: #9ddcff; padding-right: 0.3em; margin-left: -0.9em; } #main-content h2 { font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 22px; font-weight: bold; margin-bottom: 8px; color: #474747; } #main-content h2:before { content: "//"; color: #9ddcff; padding-right: 0.3em; margin-left: -1.5em; } #main-content h3 { font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 18px; font-weight: bold; margin-top: 24px; margin-bottom: 8px; color: #474747; } #main-content h3:before { content: "///"; color: #9ddcff; padding-right: 0.3em; margin-left: -2em; } #main-content h4 { font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 15px; font-weight: bold; color: #474747; } h4:before { content: "////"; color: #9ddcff; padding-right: 0.3em; margin-left: -2.8em; } #main-content h5 { font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 14px; color: #474747; } h5:before { content: "/////"; color: #9ddcff; padding-right: 0.3em; margin-left: -3.2em; } #main-content h6 { font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: .8em; color: #474747; } h6:before { content: "//////"; color: #9ddcff; padding-right: 0.3em; margin-left: -3.7em; } p { margin-bottom: 20px; } a { text-decoration: none; } p a { font-weight: 400; } blockquote { font-size: 1.6em; border-left: 10px solid #e9e9e9; margin-bottom: 20px; padding: 0 0 0 30px; } ul { list-style: disc inside; padding-left: 20px; } ol { list-style: decimal inside; padding-left: 3px; } dl dd { font-style: italic; font-weight: 100; } footer { background: transparent url('../images/hr.png') 0 0 no-repeat; margin-top: 40px; padding-top: 20px; padding-bottom: 30px; font-size: 13px; color: #aaa; } footer a { color: #666; } footer a:hover { color: #444; } /* MISC */ .clearfix:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; } .clearfix {display: inline-block;} * html .clearfix {height: 1%;} .clearfix {display: block;} /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .inner { width: 740px; } header h1, header h2 { width: 340px; } header h1 { font-size: 60px; } header h2 { font-size: 30px; } #main-content { width: 490px; } #main-content h1:before, #main-content h2:before, #main-content h3:before, #main-content h4:before, #main-content h5:before, #main-content h6:before { content: none; padding-right: 0; margin-left: 0; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .inner { width: 93%; } header { padding: 20px 0; } header .inner { position: relative; } header h1, header h2 { width: 100%; } header h1 { font-size: 48px; } header h2 { font-size: 24px; } header a.button { background-image: none; width: auto; height: auto; display: inline-block; margin-top: 15px; padding: 5px 10px; position: relative; text-align: center; font-size: 13px; line-height: 1; background-color: #9ddcff; color: #2879d0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } header a.button small { font-size: 13px; display: inline; } #main-content, aside#sidebar { float: none; width: 100% ! important; } aside#sidebar { background-image: none; margin-top: 20px; border-top: solid 1px #ddd; padding: 20px 0; min-height: 0; } aside#sidebar a.button { display: none; } #main-content h1:before, #main-content h2:before, #main-content h3:before, #main-content h4:before, #main-content h5:before, #main-content h6:before { content: none; padding-right: 0; margin-left: 0; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {}