body { padding:50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 300; } small { font-size:14px; } h1, h2, h3, h4, h5, h6 { color:#222; margin:0 0 20px; } p, ul, ol, table, pre, dl { margin:0 0 20px; } h1, h2, h3 { line-height:1.1; } h1 { font-size:28px; } h2 { color:#393939; } h3, h4, h5, h6 { color:#494949; } a { color:#39c; font-weight:400; text-decoration:none; } .wrapper { width:860px; margin:0 auto; } blockquote { border-left:1px solid #e5e5e5; margin:0; padding:0 0 0 20px; font-style:italic; } code, pre { font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; color:#333; font-size:14px; } pre { padding:8px 15px; background: #f8f8f8; border-radius:5px; border:1px solid #e5e5e5; overflow-x: auto; } table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:5px 10px; border-bottom:1px solid #e5e5e5; } dt { color:#444; font-weight:700; } th { color:#444; } img { max-width:100%; } header { width:270px; float:left; position:fixed; } strong { color:#222; font-weight:700; } section { width:500px; float:right; padding-bottom:50px; } hr { border:0; background:#e5e5e5; height:1px; margin:0 0 20px; } footer { width:270px; float:left; position:fixed; bottom:50px; } @media print, screen and (max-width: 960px) { div.wrapper { width:auto; margin:0; } header, section, footer { float:none; position:static; width:auto; } header { padding-right:320px; } section { border:1px solid #e5e5e5; border-width:1px 0; padding:20px 0; margin:0 0 20px; } header a small { display:inline; } } @media print, screen and (max-width: 720px) { body { word-wrap:break-word; } header { padding:0; } pre, code { word-wrap:normal; } } @media print, screen and (max-width: 480px) { body { padding:15px; } } @media print { body { padding:0.4in; font-size:12pt; color:#444; } }