article, figcaption, figure, footer, header, nav, section, time { display: block; } html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-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; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } ol, ul { 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; } figure { margin: 0 0 24px 0; position: relative; } figure img, figure object, figure embed, figure video { display: block; height: auto; max-width: 100%; } figcaption { color: #999999; margin-top: 24px; } .video-container { height: 0; margin-bottom: 24px; padding-bottom: 56.25%; padding-top: 30px; position: relative; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .sans, .fancy-font { font-family: 'Droid Sans', sans-serif; } .mono { font-family: 'Droid Sans Mono', monospace; } .small { font-size: 12px; } .normal { font-size: 14px; } .large { font-size: 18px; } .huge { font-size: 24px; } .massive { font-size: 36px; } .gigantic { font-size: 48px; } .title { line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; } body { background: #ffffff; color: #404040; line-height: 24px; font-size: 14px; font-family: 'Droid Sans', sans-serif; } a { color: #1d73bb; text-decoration: none; } a:hover { color: #02060a; text-decoration: underline; } h1 { font-size: 24px; margin: 0 0 36px 0; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; } h2 { font-size: 18px; margin: 48px 0 24px; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; } h3 { color: #999999; margin: 36px 0 24px; font-size: 14px; text-transform: uppercase; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; } h4, h5, h6 { font-weight: 400; margin: 24px 0; font-size: 14px; line-height: 1; font-family: 'Droid Sans', sans-serif; font-weight: 700; } b, strong { font-weight: 700; } blockquote { border-left: 6px solid #1d73bb; margin-left: -12px; padding-left: 6px; } pre { 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; color: #ffffff; margin-left: -24px; font-family: 'Droid Sans Mono', monospace; padding: 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; } .post ul li { list-style-image: url('../images/bullet.png'); } .archive li { list-style: none; } .archive a { border-bottom: 1px dotted #cccccc; display: block; padding: 12px 0; -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear; transition: all 0.25s linear; } .archive a:hover { background-color: #f2f2f2; text-decoration: none; } .archive time { color: #666666; display: inline; padding-left: 12px; } .tabmenu li { list-style-type: none; } .tabmenu li a { border: 1px solid #1d73bb; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: block; float: left; padding: 12px 0; text-align: center; width: 50%; } .tabmenu li a:hover { text-decoration: none; } .tabmenu li:last-child a { border-left: none; } .ui-tabs-hide { display: none; } .tabmenu li a:hover, .ui-tabs-selected a, .ui-tabs-selected a { background-color: #f2f2f2; } .btn { color: #ffffff; background-color: #556270; border: none; -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); padding: 8px 14px 10px; position: relative; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); -webkit-user-select: none; } .btn:hover { color: #ffffff; text-decoration: none; } .btn:active { -webkit-box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9); -moz-box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9); box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9); position: relative; top: 3px; } .btn:active:after { content: ""; background: #ffffff; bottom: -1px; height: 3px; left: 0; position: absolute; width: 100%; } .tag li { list-style: none; margin-bottom: 3px; } .tag a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; color: #000000; background-color: #ddedfa; display: block; margin-left: 20px; padding: 0 10px 0 12px; position: relative; font-size: 12px; } .tag a:hover { background-color: #85bdec; text-decoration: none; } .tag a:before { content: ""; border-color: transparent #ddedfa transparent transparent; border-style: solid; border-width: 12px 12px 12px 0; float: left; height: 0; left: -12px; position: absolute; top: 0; width: 0; } .tag a:after { content: ""; background: #ffffff; -webkit-box-shadow: -1px -1px 2px #000000; -moz-box-shadow: -1px -1px 2px #000000; box-shadow: -1px -1px 2px #000000; float: left; height: 4px; left: 0; position: absolute; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; top: 10px; width: 4px; } .tag a:hover:before { border-color: transparent #85bdec transparent transparent; } .tag-1 a { width: 100%; } .tag-2 a { width: 90%; } .tag-3 a { width: 80%; } .tag-4 a { width: 70%; } .tag-5 a { width: 60%; } .tag-6 a { width: 50%; } .tag-7 a { width: 40%; } .tag-8 a { width: 30%; } 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); margin-bottom: 48px; padding: 24px 5.555555555555555%; } header h1 { margin: 0; } header a { color: rgba(255, 255, 255, 0.8); text-decoration: none; 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; color: rgba(0, 0, 0, 0.6); margin-top: 96px; padding: 48px 5.555555555555555% 24px; } .nav { margin-bottom: 24px; } .nav li { list-style: none; display: inline; padding-right: 10px; } .nav a { -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear; transition: all 0.25s linear; } p[role="contentinfo"] { font-size: 12px; } .social { margin-bottom: 24px; } .social li { list-style: none; display: inline; padding-right: 12px; } .icon { margin-right: 2px; vertical-align: -3px; } .social a[href*='behance.net']:before { content: url('../images/icons/behance.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='delicious.com']:before { content: url('../images/icons/delicious.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='facebook.com']:before { content: url('../images/icons/facebook.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='flickr.com']:before { content: url('../images/icons/flickr.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='forrst.com']:before { content: url('../images/icons/forrst.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='github.com']:before { content: url('../images/icons/github.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='plus.google.com']:before { content: url('../images/icons/google_plus.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='last.fm']:before { content: url('../images/icons/lastfm.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='linkedin.com']:before { content: url('../images/icons/linkedin.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='quora.com']:before { content: url('../images/icons/quora.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='rss.xml']:before { content: url('../images/icons/rss.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='stackoverflow.com']:before { content: url('../images/icons/stackoverflow.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='twitter.com']:before { content: url('../images/icons/twitter.png'); margin-right: 2px; vertical-align: -3px; } .social a[href*='youtube.com']:before { content: url('../images/icons/youtube.png'); margin-right: 2px; vertical-align: -3px; } .wrapper { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0 0.75em; } .content { margin: 0 5.555555555555555%; } .meta { background: #fafafa; margin-top: 48px; padding-bottom: 24px; padding-top: 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; } .meta time { font-weight: 700; margin-left: 20px; margin-bottom: 24px; } .tag li { display: block; float: left; width: 50%; } blockquote, pre .post ul, .post ol, p, .archive { margin: 0 0 24px 0; } .main + .main { margin-top: 96px; } @media screen and (min-width: 45em) { header .wrapper { float: right; width: 75%; } .meta, .pages { float: left; text-align: right; width: 25%; } .meta { background: #ffffff; margin-top: 0; padding-top: 60px; } .meta time { margin-bottom: 24px; margin-left: 0; font-weight: 400; } .post, .copy, .main { float: right; width: 75%; } .tag li { float: none; width: 100%; } .nav a:hover { padding-right: 6px; } .nav a:hover:after { content: "\2192 "; } .nav li { display: block; padding-right: 0; } .archive time { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: block; float: left; width: 25%; } } @media screen and (min-width: 55.5em) { pre, .post > p, .post blockquote, .post ul, .post ol { width: 66.66666666666667%; } .main { float: none; margin-left: 25%; width: 50%; } } @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 { padding-left: 6.25%; width: 18.75%; } .meta { padding-top: 96px; } .post, .copy { width: 75%; } .post { padding-right: 12.5%; } .post ul { margin-bottom: 0; } .post li { margin-bottom: 24px; } code, .codehilite { font-size: 36px; } pre, .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; } } .c { color: #757575; } /* Comment */ .err { color: #fa4753; } /* Error */ .k { color: #6bc5d9; } /* Keyword */ .l { color: #514986; } /* Literal */ .n { color: #f8f8f2; } /* Name */ .o { color: #f92672; } /* Operator */ .p { color: #f8f8f2; } /* Punctuation */ .cm { color: #757575; } /* Comment.Multiline */ .cp { color: #757575; } /* Comment.Preproc */ .c1 { color: #757575; } /* Comment.Single */ .cs { color: #757575; } /* Comment.Special */ /* Generic.Emph */ /* Generic.Strong */ .kc { color: #6bc5d9; } /* Keyword.Constant */ .kd { color: #6bc5d9; } /* Keyword.Declaration */ .kn { color: #f92672; } /* Keyword.Namespace */ .kp { color: #6bc5d9; } /* Keyword.Pseudo */ .kr { color: #6bc5d9; } /* Keyword.Reserved */ .kt { color: #6bc5d9; } /* Keyword.Type */ .ld { color: #f4e07c; } /* Literal.Date */ .m { color: #514986; } /* Literal.Number */ .s { color: #f4e07c; } /* Literal.String */ .na { color: #9cc52c; } /* Name.Attribute */ .nb { color: #f8f8f2; } /* Name.Builtin */ .nc { color: #9cc52c; } /* Name.Class */ .no { color: #6bc5d9; } /* Name.Constant */ .nd { color: #9cc52c; } /* Name.Decorator */ .ni { color: #f8f8f2; } /* Name.Entity */ .ne { color: #9cc52c; } /* Name.Exception */ .nf { color: #9cc52c; } /* Name.Function */ .nl { color: #f8f8f2; } /* Name.Label */ .nn { color: #f8f8f2; } /* Name.Namespace */ .nx { color: #9cc52c; } /* Name.Other */ .py { color: #f8f8f2; } /* Name.Property */ .nt { color: #f92672; } /* Name.Tag */ .nv { color: #f8f8f2; } /* Name.Variable */ .ow { color: #f92672; } /* Operator.Word */ .w { color: #f8f8f2; } /* Text.Whitespace */ .mf { color: #514986; } /* Literal.Number.Float */ .mh { color: #514986; } /* Literal.Number.Hex */ .mi { color: #514986; } /* Literal.Number.Integer */ .mo { color: #514986; } /* Literal.Number.Oct */ .sb { color: #f4e07c; } /* Literal.String.Backtick */ .sc { color: #f4e07c; } /* Literal.String.Char */ .sd { color: #f4e07c; } /* Literal.String.Doc */ .s2 { color: #f4e07c; } /* Literal.String.Double */ .se { color: #514986; } /* Literal.String.Escape */ .sh { color: #f4e07c; } /* Literal.String.Heredoc */ .si { color: #f4e07c; } /* Literal.String.Interpol */ .sx { color: #f4e07c; } /* Literal.String.Other */ .sr { color: #f4e07c; } /* Literal.String.Regex */ .s1 { color: #f4e07c; } /* Literal.String.Single */ .ss { color: #f4e07c; } /* Literal.String.Symbol */ .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */ .vc { color: #f8f8f2; } /* Name.Variable.Class */ .vg { color: #f8f8f2; } /* Name.Variable.Global */ .vi { color: #f8f8f2; } /* Name.Variable.Instance */ .il { color: #514986; } /* Literal.Number.Integer.Long */