article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, time { display: block; } html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } ::-moz-selection { background: #fd7; color: #000; text-shadow: none; } ::selection { background: #fd7; color: #000; text-shadow: none; } a:hover, a:active { outline: 0; } ul, ol { margin: 0; padding: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .sans, .fancy-font { font-family: 'Droid Sans', sans-serif; } .mono { font-family: 'Droid Sans Mono', monospace; } figure { position: relative; } figure img, figure object, figure embed, figure video { max-width: 100%; display: block; } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 24px; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .small { font-size: 12px; } .normal { font-size: 14px; } .large { font-size: 18px; } .huge { font-size: 24px; } .massive { font-size: 36px; } .gigantic { font-size: 48px; } body { font-size: 14px; line-height: 24px; background: #ffffff; color: #404040; font-family: 'Droid Sans', sans-serif; } .title { line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; } h1 { line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; font-size: 24px; margin: 0 0 36px 0; } h2 { line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; font-size: 18px; margin: 48px 0 24px; } h3 { line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; font-size: 14px; margin: 36px 0 24px; text-transform: uppercase; color: #999999; } h4, h5, h6 { line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; font-size: 14px; margin: 24px 0; font-weight: 400; } b, strong { font-weight: 700; } .wrapper { padding: 0 0.75em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } a { color: #4ecdc4; text-decoration: none; -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear; transition: all 0.25s linear; } a:hover { color: #113e3a; text-decoration: underline; } header { border-width: 0 0 2px; -moz-border-image: url('../images/2px.png') 0 0 2 repeat; -webkit-border-image: url('../images/2px.png') 0 0 2 repeat; -o-border-image: url('../images/2px.png') 0 0 2 repeat; border-image: url('../images/2px.png') 0 0 2 repeat; background-color: #48535f; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#556270), to(#48535f)); background-image: -moz-linear-gradient(top, #556270, #48535f); background-image: -ms-linear-gradient(top, #556270, #48535f); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #556270), color-stop(100%, #48535f)); background-image: -webkit-linear-gradient(top, #556270, #48535f); background-image: -o-linear-gradient(top, #556270, #48535f); background-image: linear-gradient(top, #556270, #48535f); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#556270', endColorstr='#48535f', GradientType=0); padding: 48px 5.555555555555555%; margin-bottom: 48px; } header h1 { margin: 0; } header a { text-decoration: none; color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 0 #b3b3b3, 0 2px 0 #999999, 0 3px 0 #808080, 0 4px 0 #666666, 0 5px 0 #4d4d4d, 0 6px 0 #333333, 0px 7px 0 #1a1a1a, 0 8px 7px #0d0d0d; } header a:hover { color: #ffffff; text-decoration: none; } footer { border-width: 20px 0 0; -moz-border-image: url('../images/pages.png') 20 0 0 repeat; -webkit-border-image: url('../images/pages.png') 20 0 0 repeat; -o-border-image: url('../images/pages.png') 20 0 0 repeat; border-image: url('../images/pages.png') 20 0 0 repeat; padding: 48px 5.555555555555555% 24px; margin-top: 96px; color: rgba(0, 0, 0, 0.6); } .pages { margin-bottom: 24px; } .nav li { list-style: none; display: inline; padding-right: 10px; } p[role="contentinfo"] { margin-top: 12px; font-size: 12px; } .content { margin: 0 5.555555555555555%; } .meta { background: #f2f2f2; padding-top: 24px; padding-bottom: 24px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } time { font-size: 12px; text-transform: uppercase; } .tags li { display: inline; list-style: none; } blockquote, code, .post ul, .post ol, p { margin: 0 0 24px 0; } blockquote { margin-left: -12px; border-left: 6px solid #4ecdc4; padding-left: 6px; } code { display: block; background: #262626; -webkit-box-shadow: inset 0 0 10px #000000; -moz-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; padding: 24px; color: #ffffff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; font-family: 'Droid Sans Mono', monospace; margin-left: -24px; } .post ul li { list-style-image: url('../images/bullet.png'); } .main + .main { margin-top: 96px; } .archive li { list-style: none; } .archive a { display: block; padding: 12px 0; border-bottom: 1px dotted #cccccc; } .archive a:hover { text-decoration: none; } .archive time { display: inline; color: #666666; } @media screen and (min-width: 45em) { header .wrapper { width: 75%; float: right; } .meta, .pages { width: 25%; float: left; text-align: right; } .pages { padding-top: 52px; } .meta { background: #ffffff; padding-top: 60px; } .meta time { margin-bottom: 24px; } .post, .copy, .main { width: 75%; float: right; } .tags li { display: block; } .tags a:hover, .nav a:hover { padding-right: 6px; } .tags a:hover:after, .nav a:hover:after, .more:hover:after { content: "\2192 "; } .nav li { display: block; padding-right: 0; } .archive time { display: block; width: 25%; float: left; } } @media screen and (min-width: 55.5em) { .post p, .post blockquote, .post ul, .post ol { width: 66.66666666666667%; } .main { width: 50%; float: none; margin-left: 25%; } } @media screen and (min-width: 61.5em) { .meta, .pages { width: 12.5%; } .pages { padding-top: 0; } .meta { padding-top: 60px; } } @media screen and (min-width: 117em) { body { font-size: 18px; } header { margin-bottom: 96px; } footer { margin-top: 144px; } h1 { font-size: 48px; margin-bottom: 48px; } h2, header .huge { font-size: 36px; } h2 { margin-top: 72px; } h3 { font-size: 24px; margin-top: 72px; } h4, h5, h6 { font-size: 18px; margin-top: 48px; } .meta, .pages { width: 18.75%; padding-left: 6.25%; } .meta { padding-top: 96px; } .post, .copy { width: 75%; } .post { padding-right: 12.5%; } .post ul { margin-bottom: 0; } .post li { margin-bottom: 24px; } code { font-size: 36px; line-height: 1.5; } .post p, .post blockquote, .post ul, .post ol { width: 60%; } } @media screen and (min-width: 130em) { body { max-width: 160em; } } @media print { * { background: transparent !important; box-shadow: none !important; color: black !important; filter: none !important; -ms-filter: none !important; text-shadow: none !important; } @page { margin: 0.5cm; } a, a:visited { color: #000000 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } a[href^="javascript:"]:after, a[href^="#"]:after, .ir a:after { content: ""; } abbr[title]:after { content: " (" attr(title) ")"; } body { font-size: 12pt; } blockquote, pre { page-break-inside: avoid; } blockquote, pre { margin-left: 0.5cm; border-left: 0.2cm solid #999; padding-left: 0.2cm; } code, pre { font: 10pt Courier, monospace; } h1 { font-size: 18pt; } h2, h3 { page-break-after: avoid; font-size: 16pt; } h2, h3, p { orphans: 3; widows: 3; } img { max-width: 100% !important; } img, tr { page-break-inside: avoid; } thead { display: table-header-group; } }