/* Set theme variables here */ /* 400px */ /* 700px */ /* 900px */ /* 1300px */ /* * HTML5 Boilerplate * */ /* FONTS */ /* font-family:'Museo Slab W01 300'; font-family:'MuseoSlabW01-300Italic'; font-family:'Museo Slab W01 500'; font-family:'MuseoSlabW01-500Italic'; font-family:'Museo Slab W01 1000'; font-family:'Proxima N W01 Reg'; */ /* Helpers */ /* apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, button, input, select, textarea { color: #222; } body { font-size: 75%; } #main { clear: both; } @media (min-width: 43.75em) { #content #main-content { } } @media (min-width: 81.25em) { #content #main-content { width: 75%; float: left; padding: 0 5% 0 0; } } @media (min-width: 81.25em) { #content #comments { width: 25%; float: left; padding-top: 1em; } } footer { font-size: 1em; line-height: 1.125em; } /* HTML Styles */ body, caption, th, td, input, textarea, select, option, legend, fieldset { font-family: 'Roboto', helvetica, arial, sans-serif; } h1 { font-family: 'Roboto Slab', Georgia; font-weight: 700; color: #555; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); } #page > header h1 { font-family: 'Alfa Slab One', Georgia; } h2 { font-family: 'Roboto Slab', Georgia; font-weight: 700; color: #555; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); } h3 { font-family: 'Roboto Slab', Georgia; font-weight: 300; color: #555; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); } h4 { font-family: 'Roboto Slab', Georgia; font-weight: 300; color: #555; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); } .daterange { font-size: .875em; /* 14px / 16px = .875em */ } /* TYPOGRAPHY */ #page { font-size: 1em; /* equivalent to 16px */ line-height: 1.25; /* equivalent to 20px */ } @media (min-width: 43.75em) { #page { font-size: 1em; /* equivalent to 16px */ line-height: 1.375; /* equivalent to 22px */ } } p { padding-top: 0; } h1 { font-size: 2em; /* 2x body copy size = 32px */ letter-spacing: -1px; /* tighten up 'display type' headers on smaller displays */ line-height: 1.25; /* 45px / 36px */ margin-top: 0.9375em; /* (20px / 32px) * 1.5 */ margin-bottom: 0.3125em; /* (20px / 32px) * .5 */ } @media (min-width: 43.75em) { h1 { font-size: 2.5em; /* 2.5x body copy size = 40px */ letter-spacing: normal; line-height: 1.125; /* 45px / 40px */ margin-top: 0.73333334em; /* (22px / 45px) * 1.5 */ margin-bottom: 0.24444445em; /* (22px / 45px) * .5 */ } } @media (min-width: 56.25em) { h1 { font-size: 3em; /* 3x body copy size = 48px */ letter-spacing: normal; line-height: 1.05; /* keep to a multiple of the 20px line height and something more appropriate for display headings */ margin-top: 0.6875em; /* (22px / 48px) * 1.5 */ margin-bottom: 0.22916667em; /* (22px / 48px) * .5 */ } } .font-scale-inactive h1 { font-size: 3em; } h2 { font-size: 1.625em; /* 1.625x body copy size = 26px */ line-height: 1.15384615; /* 30px / 26px */ margin-top: 1.15384616em; /* (20px / 26px) * 1.5 */ margin-bottom: 0.38461539em; /* (20px / 26px) * .5 */ } @media (min-width: 43.75em) { h2 { font-size: 2em; /* 2x body copy size = 32px */ line-height: 1.25; margin-top: 1.03125em; /* (22px / 32px) * 1.5 */ margin-bottom: 0.34375em; /* (22px / 32px) * .5 */ } } @media (min-width: 56.25em) { h2 { font-size: 2.25em; /* 2.25x body copy size = 36px */ line-height: 1.25; margin-top: 1.03125em; /* (22px / 32px) * 1.5 */ margin-bottom: 0.34375em; /* (22px / 32px) * .5 */ } } .font-scale-inactive h2 { font-size: 2.25em; } h3 { font-size: 1.375em; /* 1.375x body copy size = 22px */ line-height: 1.13636364; /* 25px / 22px */ margin-top: 1.36363637em; /* (20px / 22px) * 1.5 */ margin-bottom: 0.45454546em; /* (20px / 22px) * .5 */ } @media (min-width: 43.75em) { h3 { font-size: 1.5em; /* 1.5x body copy size = 24px */ line-height: 1.25; margin-top: 1.37500001em; /* (22px / 24px) * 1.5 */ margin-bottom: 0.45833334em; /* (22px / 24px) * .5 */ } } @media (min-width: 56.25em) { h3 { font-size: 1.75em; /* 1.75x body copy size = 28px */ line-height: 1.25; margin-top: 1.37500001em; /* (22px / 24px) * 1.5 */ margin-bottom: 0.45833334em; /* (22px / 24px) * .5 */ } } .font-scale-inactive h3 { font-size: 1.75em; } h4 { font-size: 1.125em; /* 1.125x body copy size = 18px */ line-height: 1.11111111; margin-top: 1.66666667em; /* (20px / 18px) * 1.5 */ margin-bottom: 0.55555556em; /* (20px / 18px) * .5 */ } @media (min-width: 43.75em) { h4 { line-height: 1.22222222; /* (22px / 18px */ margin-top: 1.83333333em; /* (22px / 18px) * 1.5 */ margin-bottom: 0.61111111em; /* (22px / 18px) * .5 */ } } @media (min-width: 56.25em) { h4 { } } .font-scale-inactive h4 { font-size: 1.125em; } /* comments */ #comments h3 { margin-bottom: 0; } #comments .source { font-size: .75em; /* 12px / 16px */ line-height: 1.33333333em; /* 16px / 12px - set the line height back to body copy size */ color: #a1a1a1; display: block; margin-bottom: 0.83333334em; /* (20px / 12px) / 2: bring the title, comment closer together */ } /* Blockquote styles */ blockquote { width: 85%; margin-top: 1em; /* (20px / 20px) */ margin-bottom: 1em; /* (20px / 20px) * .5 */ font-size: 1.25em; /* 20px / 16px */ line-height: 1.25; /* 25px / 20px */ font-family: 'Roboto Slab', Georgia, "Times New Roman"; font-weight: 300; font-style: normal; position: relative; } @media (min-width: 43.75em) { blockquote { font-size: 1.5em; /* 24px / 16px = */ line-height: 1.45833333; /* 35px / 24px */ width: 50%; /* 17.5em (or half the max paragraph width) / 1.5 = 11.6666667 */ } } .font-scale-inactive blockquote { font-size: 1.5em; } @media (min-width: 43.75em) { blockquote.left { float: left; margin-top: 0.68750001em; /* ((22px / 24px) * 1.5): 1.37500001 - ((22px / 24px) * .75): 0.6875 - compensate for no margin collapse */ margin-bottom: 0.45833334em; /* (22px / 24px) * .5 */ padding-left: .5em; } } @media (min-width: 43.75em) { blockquote.right { float: right; margin-top: 0.68750001em; /* ((22px / 24px) * 1.5) / 2 - compensate for no margin collapse with paragraphy above */ margin-bottom: 0.45833334em; /* (22px / 24px) * .5 */ padding-right: 1em; } } /* floating labels */ h1 label, h2 label, h3 label, h4 label, blockquote label { font-size: 14px; position: absolute; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-weight: 300; background-color: rgba(255, 255, 255, 0.9); padding: 0.25em; -webkit-border-radius: 0.25em; -moz-border-radius: 0.25em; -ms-border-radius: 0.25em; -o-border-radius: 0.25em; border-radius: 0.25em; -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .button { font-size: 14px; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; text-decoration: none; font-weight: 500; color: #383838; background-color: #fefafa; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #ede9e9)); background-image: -webkit-linear-gradient(#ffffff, #ede9e9); background-image: -moz-linear-gradient(#ffffff, #ede9e9); background-image: -o-linear-gradient(#ffffff, #ede9e9); background-image: linear-gradient(#ffffff, #ede9e9); padding: 0.25em; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; -ms-border-radius: 0.5em; -o-border-radius: 0.5em; border-radius: 0.5em; -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .button:hover { background-color: #e4e1e1; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefafa), color-stop(100%, #cbc7c7)); background-image: -webkit-linear-gradient(#fefafa, #cbc7c7); background-image: -moz-linear-gradient(#fefafa, #cbc7c7); background-image: -o-linear-gradient(#fefafa, #cbc7c7); background-image: linear-gradient(#fefafa, #cbc7c7); } .toggle-scale { float: right; } .toggle-scale.on:after { content: ": on"; } .toggle-scale.off:after { content: ": off"; } h1 { position: relative; } h1 label { left: 0; top: -2em; } h1 label span:before { content: "2"; } @media (min-width: 43.75em) { h1 label span:before { content: "2.5"; } } @media (min-width: 56.25em) { h1 label span:before { content: "3"; } } .font-scale-inactive h1 label span:before { content: "3"; } h2 { position: relative; } h2 label { left: 0; top: -2em; } h2 label span:before { content: "1.625"; } @media (min-width: 43.75em) { h2 label span:before { content: "2"; } } @media (min-width: 56.25em) { h2 label span:before { content: "2.25"; } } .font-scale-inactive h2 label span:before { content: "2.25"; } h3 { position: relative; } h3 label { right: 0; top: -2em; } h3 label span:before { content: "1.375"; } @media (min-width: 43.75em) { h3 label span:before { content: "1.5"; } } @media (min-width: 56.25em) { h3 label span:before { content: "1.75"; } } .font-scale-inactive h3 label span:before { content: "1.75"; } h4 { position: relative; } h4 label { left: 0; top: -2em; } h4 label span:before { content: "1.125"; } @media (min-width: 43.75em) { h4 label span:before { content: "1.125"; } } @media (min-width: 56.25em) { h4 label span:before { content: "1.125"; } } .font-scale-inactive h4 label span:before { content: "1.125"; } blockquote { position: relative; } blockquote label { left: 0; top: -2em; } blockquote label span:before { content: "1.25"; } @media (min-width: 43.75em) { blockquote label span:before { content: "1.5"; } } .font-scale-inactive blockquote label span:before { content: "1.5"; } /* IE bits */ .lt-ie7 #page { font-size: 1em; /* IE6 Renders type REALLY big */ } .lt-ie9 #logo { margin-bottom: 0; padding-bottom: 1em; box-shadow: none; } .lt-ie8 nav ul.menu { background-color: #73271f; width: 100%; } .lt-ie8 nav ul.menu li { float: left; } .lt-ie8 footer ul.menu li { float: left; display: block; margin-top: 1em; } .lt-ie7 #content { padding: 1em 2.85714286%; } .lt-ie9 img { /* fix image bits for older IE */ height: auto !important; width: auto\9; /* IE 8 */ } /* the following media query is a fix for a bug in older iOS devices on rotation */ @media screen and (orientation: landscape) and (device-width: 320px) and (device-height: 480px) { body { width: 480px; } }