/* ------------------------------------------------ craigmod.com CSS — pretttty, pretttty, pretttty fugly. Last updated: Sept, 2014 TYPE ==== SANS: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif SERIF: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif via El Typo Kito RANDOM REDS FOR NO REASON ========================= F04C2F - darker EE573C - light cc092f - orig D1361B FYI === Pantone 186c : #cc092f ------------------------------------------------ */ /* CSS RESET ---------------------------- */ body,div,figure,figcaption,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,menu,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,strong,th,var { font-style:normal; font-weight:normal; } code { font-family: Courier, monospace; } strong { font-weight: bold; font-style: inherit; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } /*a { color: #CC092F; text-decoration: none; transition: color 0.3s ease; } a:hover { color: #000; border-bottom: 0px solid #CC092F; }*/ a { color: inherit; text-decoration: none; transition: color 0.2s ease; border: 0; box-shadow: inset 0 -2px 0 #ff718c; } a:hover { color: #ff718c; box-shadow: inset 0 -2px 0 #ff718c; } figure a { box-shadow: none; } figure a:hover { box-shadow: none; } em { font-style: italic; } .small { font-size: .6em; } .sc { font-size: .85em; text-transform: uppercase; letter-spacing: 1px; } ::selection { background: #ffff66; /* WebKit/Blink Browsers */ } /* Turn on the stuff that should be on */ p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .noborder { border: 0px; } hr { border: 0; border-top: 1px solid #ddd; margin-bottom: 2em; } .sans { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; } input[type=email] { -webkit-appearance: none; } /* GENERAL ---------------------------- */ body { background-color: #fff; color: #333; font-size: 62.5%; /* -- Sets 1em to equal 10px or let's just pretend it does -----------------------*/ font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; font-style: normal; font-weight: 400; -webkit-font-smoothing: antialiased; } body.japanese { font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, 'メイリオ', Helvetica, Arial, sans-serif; } body.japanese h1, body.japanese h2, body.japanese h3, body.japanese h4, body.japanese h5 { font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, 'メイリオ', Helvetica, Arial, sans-serif; font-weight: normal; } h1, h2, h3, h4, h5 { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; font-style: normal; font-weight: 500; } body.ja header h1 { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif !important; font-weight: normal !important; } p, li, blockquote { font-size: 1.8em; line-height: 1.5em; } p { margin-bottom: 1em; } .fourcol p, .fourcol li, .fourcol blockquote { font-size: 1.5em; } body.ja { font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, 'メイリオ', Helvetica, Arial, sans-serif; } .ja p, .ja li, .ja blockquote { font-size: 1.5em; line-height: 1.6em; } .ja h1, h1.ja, .ja h2, h2.ja, .ja h3, h3.ja, .ja h4, h4.ja .ja h5, h5.ja {font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, 'メイリオ', Helvetica, Arial, sans-serif !important; font-weight: bold; } span.ja { font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, 'メイリオ', Helvetica, Arial, sans-serif; font-size: .85em; } sup { height: 0; line-height: 1; bottom: 1em; font-size: .7em; color: #666; font-weight: bold; } sup a { padding: 3px; box-shadow: none; -webkit-transition-property: color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } sup a:hover { border: 0; } .mobileonly { display: none !important; } .desktoponly { } #blackOut { background-color: #000; opacity: 0; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 200; transition:opacity 500ms; } #ZoomBox { border: 0px solid #000; } /* MAST HEAD -------------------------------- */ header { float: left; width: 100%; border-bottom: 0px dotted #ddd; border-top: 1px solid #000; padding-bottom: 40px; padding-top: 30px; margin-bottom: 30px; background: transparent url(/images/bg-header-1140-2.png) bottom center no-repeat; } nav { font-size: 1.2em; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #ddd; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } #home { float: left;} nav a { color: #999; padding: 15px 15px; border: 0; box-shadow: none; display: inline-block; -webkit-transition-property: color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } nav a:nth-child(1) { margin-left: -10px; } nav a:hover { border: 0; box-shadow: none; color: #000; } nav .newblock { margin-left: 40px; display: inline; } /* BREADCRUMBS (don't really exist anymore but should keep anyway) -------------------------------- */ #breadcrumbs { float: left; margin-bottom: 40px; } #breadcrumbs ul { float: left; display: inline; } #breadcrumbs ul li { float: left; display: inline; font-size: 1.1em; line-height: 1em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; margin-right: 5px; } #breadcrumbs ul li span { color: #999; } #breadcrumbs ul li a { text-transform: uppercase; letter-spacing: 1px; } #kindle_essay { float: right; } /* HOME INDEX ---------------------------------------- */ body#index h2 { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", helvetica, sans-serif; font-size: 2.8em; margin-bottom: 1em; color: #000; text-shadow: 1px 1px 0px #f7f7f7; margin-top: 0; } body#index h2 span { font-size: .7em; vertical-align: baseline; } body#index h2 a:hover { background: transparent; border-radius: 0; } #top_intro { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; margin-bottom: 5em; padding-bottom: 6em; margin-top: 1em; border-bottom: 1px solid #efefef; } #top_intro h1 { font-size: 3.5em; line-height: 1.2em; letter-spacing: -1px; margin-bottom: 15px; font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; } #top_intro p { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", helvetica, sans-serif; font-size: 1.9em; line-height: 1.6em; margin-bottom: .2em; } #top_intro h1 a { box-shadow: inset 0 -3px 0 #ff718c; } /* #top_intro a { transition: color .3s ease; } #top_intro a:hover { color: #000; border: 0; } */ #top_intro a { box-shadow: inset 0 -2px 0 #ff718c; } #top_intro .solar { text-align: center; margin-top: 0px; } #top_intro .solar img { width: 80%; border-radius: 50%; margin-top: 20px; border: 3px solid #000; } #top_intro .hello { margin-top: 25px; } .sputnik { margin-top: -40px; text-align: center; } #top_intro .solar svg{ opacity: .8; width: 150px; } #top_intro .sputnik svg { opacity: 1; width: 100px; } #top_intro h5 { margin-top: .5em; padding-top: .5em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif !important; font-weight: bold; margin-bottom: .3em; color: #666; font-size: 1.9em; } .topblock { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; margin-bottom: 5em; padding-bottom: 5em; margin-top: 1em; border-bottom: 1px solid #efefef; } .topblock p { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; font-size: 2.4em !important; line-height: 1.5em; margin: 0; letter-spacing: 0px; } .topblock a { box-shadow: inset 0 -3px 0 #ff718c; } /*.topblock a { transition: color .3s ease; } .topblock a:hover { color: #000; border: 0; }*/ #about_page .ja h1 { font-weight: bold; } #about_page .topblock.ja p { font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, 'メイリオ', Helvetica, Arial, sans-serif; font-size: 1.8em !important; letter-spacing: 0px; line-height: 1.7em;} .featuredhome { margin-bottom: 3em; } .featuredhome .sevencol { margin-bottom: 0em; } .featuredhome .featuredimg { border: 1px solid #efefef; float: right; width: 120px; margin-right: -20px; margin-bottom: 2em; height: 100px; border-radius: 5px; } body#index .featuredhome h2 { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; font-weight: bold; margin-bottom: .5em; font-size: 2.5em; color: #333; } .featuredhome h3 { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; font-size: 3.2em; padding-top: 2px; line-height: 1em; } .featuredhome h4 { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; font-size: 1.6em; font-style: italic; } .featuredhome h5 { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; font-size: 2.4em; font-weight: bold; } .featuredhome cite { display: inline-block; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; border-top: 1px solid #efefef; padding-top: 1em; margin-top: 1em; font-size: 1.4em; } .featuredhome p { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; font-size: 1.8em; margin-bottom: .5em; } /* SPUTNIK INDEX ---------------------------------------- */ #journal_list { margin-top: 40px; margin-bottom: 100px; } #journal_list h2 { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; font-size: 4em; font-weight: bold; } #journal_list h3 { font-size: 1.8em; font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; font-weight: normal; margin-bottom: 0; line-height: 1.1em; } #journal_list li.japanese h3 { font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, 'メイリオ', Helvetica, Arial, sans-serif; font-size: 1.5em } #journal_list li h3 a { color: #333; border: 0; -webkit-transition-property: color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } #journal_list li h3 a:hover { border: 0; } #journal_list h4 { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; font-style: italic; } #journal_list li.japanese h4 { font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, 'メイリオ', Helvetica, Arial, sans-serif; font-size: .9em; font-style: normal; } #journal_list h4 span { display: none; } #journal_list ul { margin-bottom: 30px;} #journal_list li { margin-bottom: 20px; } #journal_list li.journal h3:before { margin-left: -1.8em; content: '★ '; padding-right: .5em; color: #f7f7f7; text-shadow: 1px 1px 0px #ddd; -webkit-transition-property: color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } #journal_list li.journal:hover h3:before { color: #000; } #journal_list li span.date { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; font-size: .65em; font-weight: bold; color: #999; text-transform: uppercase; letter-spacing: 1px; } #journal_list li span.summary p { font-size: 1em; margin-bottom: .5em; margin-left: 0em; font-style: italic; } #journal_list li a { color: #000; display: block; box-shadow: none; } #journal_list li a em { color: #bbb; } #journal_list li a:hover { color: #d12d41; } /* SATELLITE ---------------------------------------- */ #satellite hr { border-top: 3px solid #efefef; margin-bottom: 5em; margin-top: 5em; width: 20%; } #satellite p, #satellite li { font-size: 2em; line-height: 1.5em; color: #333; } #satellite.japanese p, #satellite.japanese li { font-size: 1.6em; line-height: 1.7em; color: #333; } #satellite #satellite_body p { margin-bottom: 1em; text-indent: 0em; } #satellite #satellite_body p:first-child { text-indent: 0; } #satellite #satellite_body .firstchunk>p:first-of-type:first-letter { float: left; font-size: 107px; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; padding-top: 0px; padding-right: 7px; line-height: 77px; -webkit-font-smoothing: subpixel-antialiased; font-style: normal; font-weight: bold; } #satellite #satellite_body>p:first-of-type:first-line { text-transform: uppercase; } #satellite #satellite_body #satellite_footer p { text-indent: 0; margin-bottom: 1em;} #satellite #satellite_body hr+p, #satellite #satellite_body h3+p, #satellite #satellite_body h4+p, #satellite #satellite_body h5+p { text-indent: 0; } #satellite ul { margin-bottom: 1.4em;} #satellite_body ul li { margin-left: 2em; list-style: circle; list-style-position: outside; } #satellite_body ol { margin-bottom: 1.4em; } #satellite_body ol li { list-style: decimal; list-style-position: outside; margin-left: 2em; } #satellite_body a img { float: left; } #satellite_body iframe { margin: 2em auto !important; margin-bottom: 5em !important; } #satellite_body .fb-like iframe { margin: 0 !important; opacity: .3; transition:opacity 500ms; } #satellite_body .fb-like iframe:hover { opacity: 1; } #satellite iframe, #satellite object { width: 100%; max-width: 100%; } #satellite ol.footnotes, #satellite .footnotes ol { font-size: .75em; line-height: 1.5em; font-family: "ff-meta-web-pro-1", "ff-meta-web-pro-2", Helvetica, Arial, sans-serif; color: #666; margin-bottom: 10px; } #satellite ol.footnotes li, #satellite .footnotes ol li { list-style: decimal; margin-bottom: 1em; margin-left: 1em; } #satellite .footnotes hr { display: none; } #satellite .footnotes { margin-bottom: 5em; } #satellite_footer { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; color: #333; border-top: 3px double #efefef; padding-top: 2em; margin-top: 5em; } #satellite #satellite_footer h3 { font-size: 1.6em; font-weight: bold; margin-bottom: 10px; } #satellite_footer p { font-size: 1.5em; margin-bottom: .5em; } #satellite_footer img { float: left; border: 2px solid #000; margin-right: 20px; width: 100px; border-radius: 50%; } #satellite #copyright_links p { font-size: 1.1em; } /*#satellite .big_picture { z-index: -100; position: relative; margin-top: -44px; width: 100%; min-width: 1180px; }*/ #satellite .big_picture { z-index: -100; position: relative; margin-top: -44px; width: 100%; min-width: 1024px; } #satellite .big_picture img { min-width: 100%; } #satellite .pull_up { margin-top: -100px; padding-top: 20px; z-index: 100; } #satellite .pull_up .title .sevencol { padding-left: 30px; padding-right: 30px; margin-left: -30px; } #satellite .pull_up .sevencol { background-color: #fff; } #satellite figure { padding-top: 20px; padding-bottom: 20px; margin-bottom: 2em; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; } #satellite figure img { width: 100%; float: none; } #satellite figure figcaption, #satellite figure figcaption h4 { font-size: 1.2em; line-height: 1.2em; margin-top: .5em; text-align: center; font-weight: normal; text-transform: none; letter-spacing: 0px; color: #555; font-family: "ff-meta-web-pro-1", "ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } #satellite figure figcaption .meta { text-transform: none; font-weight: normal; } #satellite figure.sixcol, #satellite figure.fourcol { border: 0; } #satellite blockquote { font-size: inherit; font-style: normal; padding-left: 2em; border-left: 5px solid #efefef; margin: 2em 0; } #satellite blockquote cite { font-size: inherit; } #satellite .imagecredit { float: right; margin-top: -45px; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; font-size: 1.2em; color: #999; } #satellite .imagecredit a { color: inherit; transition: color 0.3s ease; } #satellite .imagecredit a:hover { color: #333; border: none; } #satellite .title { text-align: left; padding-bottom: 4em; padding-top: 5em; border-radius: 3px; border-bottom: 1px solid #efefef; margin-bottom: 5em;} #satellite .title h3 { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; font-style: italic; font-size: 1.8em; letter-spacing: 0px; line-height: 1.1em; margin-top: -10px; margin-bottom: 15px; } #satellite.japanese h3 { font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, 'メイリオ', Helvetica, Arial, sans-serif; font-size: 2em; font-style: normal; letter-spacing: 0px; margin-top: 15px; } #satellite h2 { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; font-size: 5em; line-height: 1em; letter-spacing: -1px; font-weight: normal; margin-bottom: .3em; } #satellite.japanese h2 { font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, 'メイリオ', Helvetica, Arial, sans-serif; font-size: 4em; letter-spacing: 0px; font-weight: bold;} /*#satellite h2 { font-family: "kepler-std-extended-display-1", "kepler-std-extended-display-2", "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, Times, serif; font-size: 5.2em; line-height: 1em; letter-spacing: 0px; font-weight: 300; margin-bottom: .3em; }*/ #satellite_body h3 { font-size: 2.4em; margin-top: 1em; font-weight: bold; } #satellite h4 { font-size: 2.4em; margin-top: 1em; font-weight: bold; } #satellite h5 { font-size: 1.4em; margin-bottom: .5em; padding-top: 2em; margin-top: 2em; border-top: 1px solid #efefef; font-weight: bold; text-transform: uppercase; } #satellite cite { float: left; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; font-size: 1.25em; margin-top: 0em; padding-top: 1em; padding-bottom: 0em; border-top: 1px solid #efefef; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1em; font-weight: bold; color: #cfcfcf; } #satellite cite a { color: #aaa; transition: color 0.3s ease; } #satellite cite a:hover { color: #CC092F; border: none; } /* LEICA Q */ #satellite.leica_q article { margin-top: -270px; z-index: 20; position: relative; } #satellite.leica_q article .container { margin-top: -250px; z-index: 5000; } #satellite.leica_q .title { color: #fff; padding-bottom: 100px; text-align: center; border-bottom: 0;} #satellite.leica_q .title a { color: #aaa; } #satellite.leica_q .title a:hover { color: #fff; } #satellite.leica_q .title h2 { font-size: 7em; line-height: .7em; } #satellite.leica_q .title h3 { font-size: 2.5em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; font-style: normal;} #satellite.leica_q .pullout { background-color: #f7f7f7; border: 1px solid #efefef; border-radius: 3px; } #satellite.leica_q .pullout p { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; font-size: 1.8em; padding-left: 20px; padding-right: 20px; } #satellite.leica_q .pullout h4 { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; text-align: center; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } #satellite .inline_big_picture { display: inline-block; width: 100%; max-width: 3000px; } #satellite.leica_q .big_picture { min-height: 300px; background-color: #fff;} #satellite.leica_q figcaption a { padding: 0px 5px; background-color: #efefef; border-radius: 3px; transition: background-color .3s ease; line-height: 2em; font-weight: normal; } #satellite.leica_q figcaption a:hover { background-color: #f7f7f7; } #satellite.leica_q .recommended h2 { font-size: 4em; text-align: center; } #satellite code.mobi { font-size: .7em; line-height: 1em; } #satellite .satellite_info { text-align: right; margin-top: 100px; opacity: .3; } #satellite .satellite_info:hover { opacity: 1; } #satellite .satellite_info h4 { font-size: 1.6em; } #satellite .satellite_info p { font-size: 1.4em; line-height: 1.3em; } #satellite .satellite_info a:hover { border: 0; } .sputnikred { margin-top: 5em; margin-bottom: 0em; } .sputnikred svg { width: 40px; height: 40px; } #satellite .other { opacity: 1; } #satellite .other:hover { opacity: 1; } .readnext { text-align: center; margin-bottom: 2em; padding-bottom: 4em; border-bottom: 1px solid #efefef; } .fullarchive .readnext { padding-bottom: 5em; margin-bottom: 6em; margin-top: 2em; } #satellite .readnext { margin-top: 5em; padding-top: 5em; margin-bottom: 5em; text-align: center; border-top: 1px solid #efefef; border-bottom: 0; } .readnext h2 { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; margin-bottom: 1em; font-size: 2.5em; } .readnext h3, #satellite .readnext h3 { margin-bottom: .5em; font-size: 2.8em; font-weight: bold; } .fullarchive .readnext h3 { margin-bottom: 1em; } .readnext h4, #satellite .readnext h4 { font-size: 2.4em; line-height: 1em; margin-top: .5em; font-weight: bold; margin-bottom: 0; text-transform: none; } .readnext h5, #satellite .readnext h5 { font-weight: normal; font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; font-style: italic; border: none; font-size: 1.4em; margin-top: 0; padding-top: .3em; margin-bottom: .5em; text-transform: none; } .readnext a, #satellite .readnext a { color: inherit; transition: color .3s ease; } .readnext a:hover, #satellite .readnext a:hover { color: #ff718c; } .readnext a img:hover, #satellite .readnext a img:hover { border: none; } .readnext .threecol:last-child, #satellite .readnext .threecol:last-child { padding-right: 0; margin-right: 0; } .readnext .featuredimg, #satellite .readnext .featuredimg { width: 100%; height: 150px; border-radius: 5px; border: 1px solid #efefef; } .sharethis { text-align: center; padding-top: 2em; } .sharethis a { border: none; box-shadow: none; } .sharethis .twittershare, .sharethis .facebookshare { width: 35px; height: 35px; margin: 0px 3px; display: inline-block; background-color: #efefef; border-radius: 3px; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } .sharethis .twittershare:hover, .sharethis .facebookshare:hover { background-color: #333; } /* 404 NOT FOUND ---------------------------------------- */ #error h3 { text-align: center; line-height: 1.3em; font-size: 4.2em; font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; font-weight: normal; margin-bottom: 2em; margin-top: 1em; } /* PROJECT PAGES (sort of deprecated but google still knows — shudder) --------------------------------------------------------------------- */ #project .left_title { text-align: right; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } #project .left_title h2 { font-size: 3.2em; line-height: 1.1em; font-weight: normal; } #project .left_title h3 { padding: 10px 0px; margin: 10px 0px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-transform: uppercase; letter-spacing: 1px; font-size: 1.2em; font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif } #project .left_title h4 { font-size: 1.2em; font-weight: bold; margin-bottom: 5px; } #project .left_title .entry_date { font-size: 1.4em; margin-bottom: 30px; } #project .left_title .related_entries, #project .left_title .item_meta { margin-bottom: 30px; } #project .left_title .related_entries ul li, #project .left_title .item_meta ul li { font-size: 1.2em; } #project .top_description { margin-top: 10px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 3px double #eee; } #project .top_description h3 { font-size: 1.8em; margin-bottom: 5px; } #project .top_description p { font-size: 1.5em; } #project .top_description ul li { font-size: 1.5em; list-style: circle; margin-left: 20px; margin-bottom: .5em; } #project .top_description blockquote { font-size: 1em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } #project .top_description blockquote p { font-size: 1.5em; margin-left: 20px; margin-right: 20px; color: #666; } #project .row.item { margin-bottom: 30px; } #project .description p { font-size: 1.5em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } #project .description blockquote { font-size: 1em; } #project .description blockquote p { margin-left: 10px; font-style: italic; } /* GENERAL PAGES (About, Speaking, etc) ---------------------------------------- */ body.general article h1 { font-size: 3em; font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; } body.general article h1 span { font-size: .5em; } body.general article h2 { font-size: 2.4em; font-weight: bold; color: #333; margin-bottom: .5em; } body.general article h3 { font-size: 2.4em; font-weight: bold; } body.general article h4 { font-size: 2em; font-weight: bold; } body.general article hr { border-top: 2px solid #ddd; width: 20%; } body.general article ul { list-style: circle; margin-left: 2.5em; list-style-position: outside; margin-bottom: 2.4em; } body.general article .metabio { text-align: center; font-size: .8em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; margin-top: 10px; } body.general article .metabio a { color: #666; box-shadow: inset 0 -1px 0 #ff718c; } body.general article .metabio a:hover { color: #CC092F; } body.general article .metabio ul { margin-left: 0; list-style: none; margin-bottom: 3em;} body.general article p, body.general li, body.general blockquote { font-size: 1.8em; } .profileimage a { border: 0; box-shadow: none !important; } .profileimage img { width: 80%; border-radius: 50%; border: 3px solid #000; margin-bottom: 2em; } .prepost { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; font-weight: bold; font-size: .9em; letter-spacing: 1px; } .speaking h2 { font-size: 2.2em; margin-bottom: .5em; font-weight: bold; } .speaking h3 { line-height: 1em; } .speaking .year { margin-bottom: .5em; padding-bottom: .2em; } .speaking .videos { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 3px double #eee; } .speaking .videos p { font-size: 1.3em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } .speaking .videos h3 { font-size: 1.4em; font-weight: bold; } .speaking .videos iframe, .speaking .booking iframe, .speaking .videos object { width: 90%; max-width: 90%; border: 2px solid #ddd; padding: 5px; background-color: #efefef; margin-top: 5px; margin-bottom: 10px; } .speaking .previous { border-top: 0px solid #ddd; padding-top: 20px; margin-top: 20px;} .speaking .upcoming p, .speaking .previous p { font-size: .85em; } /*.speaking .upcoming h1 { font-size: 2.2em; font-weight: bold; line-height: 1.2em; margin-bottom: 1em; }*/ .speaking .upcoming h1 { font-size: 3em; margin-bottom: 10px; font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", Georgia, Times, serif; } .speaking .previous li.year h3 { font-weight: normal; border-bottom: 1px dotted #ddd; padding-bottom: 10px; font-weight: bold; } .speaking .info p, .speaking .booking p { font-size: 1.3em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } body.general ul li ul li { font-size: inherit; } /* FOOTER MENU (also kinda deprecated) --------------------------- */ #footer_menu { margin-top: 30px; border-top: 1px solid #efefef; padding-top: 40px; padding-bottom: 40px; } #footer_menu h4 { font-size: 1em; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #333; padding-bottom: 3px; margin-bottom: 5px; font-weight: bold; } #footer_menu h4 a { color: #000; } #footer_menu p { font-size: 1.2em; line-height: 1.4em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; margin-top: 5px; } #footer_menu ul li { font-size: 1.2em; line-height: 1.4em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } #footer_menu ul li a { display: block; border-top: 1px solid transparent; border-bottom: 1px solid transparent; -webkit-transition-property: border; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } #footer_menu ul li.selected a { border-top: 1px solid #CC092F; border-bottom: 1px solid #CC092F; color: #000; } #footer_menu ul li.selected a:hover { border-top: 1px solid #000; border-bottom: 1px solid #000; background-color: #efefef; } #footer_menu ul li a:hover { border-top: 1px solid #000; border-bottom: 1px solid #000; color: #000; } #footer_menu a.aboutimg img { border: 2px solid #ddd; margin-left: -1px; float:left; margin-bottom: 10px; } #footer_menu a.aboutimg:hover img { border: 2px solid #aaa; } /* FOOTER ---------------------- */ footer { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; font-weight: bold; border-top: 1px solid #efefef; padding-top: 40px; margin-top: 20px; padding-bottom: 40px; border-bottom: 0px solid #000; } footer p { font-size: 1.1em; margin-bottom: 1em; text-transform: uppercase; letter-spacing: 1px; color: #777 !important; } footer a { transition: color 0.3s ease; box-shadow: none; border: 0; color: #777; padding: 10px 0px; } footer a:hover { border: 0; color: #000; box-shadow: none; } #copyright_links { float: right; text-align: right; margin-right: 10px; } /* MAILING LIST ---------------------- */ body#roden_explorers_page { background: url(/images/roden_explorers/bg-explorers.jpg) no-repeat center center fixed; background-size: cover; } .explorers header a { color: #ddd !important; text-shadow: 1px 1px 0px #000; } .explorers header a:hover { color: #aaa !important; } .explorers .other_links { display: none; } .explorers footer p { color: #fff; } .explorers footer { border-top: 1px solid #999; } .roden_list { min-height: 500px; } .roden_list p { color: #fff; display: inline; line-height: 1.7em; text-shadow: 1px 1px 0px #000; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } .roden_list h2 { font-size: 3.6em; color: #fff; font-weight: normal; text-shadow: 1px 1px 0px #000; margin-bottom: 15px; } .roden_list form { margin-bottom: 40px; height: 50px; } .roden_list #subForm input[type=email] { width: 300px; background-color: #fff; border: 2px solid #666; box-shadow: 0px 1px 10px #000; height: 31px; margin-top: 2px; margin-right: 5px; } .roden_list #thanks { } .roden_list #thanks p { color: #ddd; font-size: 1.8em; font-weight: normal; } #rodensignup { height: 600px; background: transparent url(/images/roden_explorers/bg-explorers.jpg) center center no-repeat; background-size: cover; text-align: center; margin-top: 6em; padding-top: 20em; /*padding-left: 0; padding-right: 0;*/ } #rodensignup p { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; color: #fff; line-height: 1.7em; text-shadow: 1px 1px 0px #000; padding: 0em; display: inline; } #rodensignup p a { color: inherit; font-weight: bold; } #rodensignup h3 { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; color: #fff; text-shadow: 1px 1px 0px #000; font-size: 3.4em; margin-bottom: 1em; } #rodensignup form { margin-bottom: 15px; height: 50px; } #rodensignup #subForm input[type=email] { width: 300px; background-color: #fff; opacity: .7; color: #000; border: 1px solid #efefef; background-color: #efefef; height: 31px; margin-top: 2px; margin-right: 5px; } #rodensignup #subForm button { margin-top: -7px; } #subForm input[type=email], #subForm2 input[type=email] { padding: 4px 10px; width: 300px; margin-right: 5px; font-size: 1.6em; color: #666; border-radius: 5px; border: 2px solid #efefef; outline: none; -webkit-transition-property: background-color, border; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; display: inline; float: left; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } #subForm input[type=email]:hover, #subForm2 input[type=email]:hover { border: 2px solid #ddd; } #subForm input[type=email]:focus, #subForm2 input[type=email]:focus { background-color: #f7f7f7; border: 2px solid #ddd; } #subForm button, #subForm2 button { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } #rodensignup #subForm input[type=email] { float: none; } #thanks p { font-weight: bold; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; } /* BUTTONS ---------------------- */ .flat_button { display: inline-block; padding: 10px 15px; margin-top: 3px; margin-bottom: 0; font-size: 1.7em; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; color: #ddd; text-shadow: 0 0px 1px rgba(0, 0, 0, 0.50); background-color: #005fcc; border: 0; border-radius: 3px; font-weight: bold; transition: all 0.2s ease; } .flat_button:hover, .flat_button:active { background-color: #0064cc; color: #fff; } /* ===================================== ===================================== ===================================== ===================================== ===================================== FOR TINY WINDOW PEOPLE ---------------------------- */ @media handheld, only screen and (max-width: 768px) { body { font-size: 55% !important; -webkit-text-size-adjust: none; } .mobileonly { display: inline-block !important; } .desktoponly { display: none !important; } .row, body, .container { width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } /* Feb 2016: We removed .row .sixcol and .fourcol so we can have side-by-side things even on mobile But then had to add them back for about pages and other similar sections and add the rules below these to work for articles. */ .row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol { width: auto; float: none; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; } article .row .fourcol { width: 30.75%; float: left; margin-right: 3.8%; padding: 0px; } article .row .sixcol { width: 48%; float: left; margin-right: 3.8%; padding: 0px; } article .row .last { margin-right: 0px; } /* END article / special row rules */ .flat_button { font-size: 2.0em; font-weight: normal; } header { text-align: center; background-color: transparent; background-image: none; border-bottom: 1px solid #efefef; padding-bottom: 20px; padding-top: 20px;} nav { font-size: 1.3em; } nav a:nth-child(2) { margin-left: 0; } nav a { padding: 3px 10px; } nav.threecol { padding-bottom: 2em; } nav .newblock { display: none; margin: 0; width: 100%; float: left; clear: both; padding-top: .5em; } #breadcrumbs { display: none; } #top_intro { text-align: center; border-bottom: 1px solid #efefef; } #top_intro p { font-size: 2em; } #top_intro h5 { text-align: center; font-size: 1.6em; margin-top: 1em; } #top_intro .solar img { width: 70%; } #top_intro .hello { margin-top: 10px; } .featuredhome { text-align: left; margin-bottom: 5em; } .featuredhome .featuredimg { margin-right: 10px; width: 70px; height: 63px; float: left; margin-bottom: 2em; } .featuredhome h3 { font-size: 2.9em; padding-top: 0; margin-top: 0px; } .featuredhome h4 { line-height: 1.2em; margin-bottom: 10px; } .featuredhome cite { } .profileimage { text-align: center; } .profileimage img { border-radius: 50%; width: 60%; } /* LEICA Q */ #satellite.leica_q article .container { margin-top: -10px; } #satellite.leica_q article { margin-top: -150px; } #satellite.leica_q .title { color: #fff; background-color: #111; padding-bottom: 1em; padding-top: 4em; text-align: center; border-bottom: 1px solid #efefef; } #satellite.leica_q .title a { color: #aaa; } #satellite.leica_q .title a:hover { color: #000; } #satellite.leica_q .title h2 { font-size: 6em; line-height: .7em; } #satellite.leica_q .title h3 { font-size: 2.5em; } #satellite.leica_q .pullout p { padding-left: 0px; padding-right: 0px; } #satellite.leica_q .pullout h4 { padding-left: 0px; padding-right: 0px; } #satellite.leica_q .pullout { display: inline-block; } #satellite.leica_q .big_picture { min-height: 100px; } #satellite .big_picture { margin-top: -30px; } #satellite p, #satellite li { line-height: 1.4em; } #satellite ul li { margin-left: 1em; } #satellite #satellite_body .firstchunk>p:first-of-type:first-letter { font-size: 85px; line-height: 60px; } #satellite hr { margin-bottom: 3em; margin-top: 3em; } #satellite .imagecredit { float: none; margin-top: -25px; display: block; margin-bottom: 3em; } #satellite .title { text-align: center; padding-bottom: 3em; padding-top: 3em; border-bottom: 1px solid #efefef; margin-bottom: 5em;} #satellite cite { float: none; display: block; } #satellite_footer { text-align: center; margin-bottom: 50px; } #satellite_footer p { font-size: 1.5em; } #satellite_body #satellite_footer a img { float: none; margin-right: 0; margin-bottom: 15px; width: 120px; } #satellite #footer_menu { display: none; } #satellite .big_picture { z-index: -100; position: relative; min-width: 0px; } #satellite .pull_up { margin-top: 0px; padding-top: 0px; } #satellite .pull_up .sevencol { background-color: #fff; } #satellite .pull_up .title .sevencol { padding-left: 20px; padding-right: 20px; margin-left: 0px; } #satellite figure { padding-bottom: 10px; } #satellite figure img { float: none; } #satellite figure figcaption { margin-bottom: 10px; font-size: 1.2em; line-height: 1.2em; } .sputnik { margin-top: -20px; } #top_intro .sputnik svg { width: 100px; height: 150px; } .sputnikred { text-align: center; margin-top: 15em; margin-bottom: 0em; } .sputnikred svg { width: 100px; height: 100px; } #project .left_title { text-align: center; } #satellite ol.footnotes li { margin-left: 20px; } #comments { display: none; } /* Fuck comments — what a drain on ones soul */ #footer_menu { text-align: center; } #footer_menu p { font-size: 1.8em; } #footer_menu h4 { font-size: 1.6em; letter-spacing: 0; font-weight: normal; border-bottom: 1px dotted #ddd;} #footer_menu ul { margin-bottom: 3em; } #footer_menu ul li { font-size: 1.4em; margin-bottom: .5em; } footer { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; text-align: center; } footer #copyright_links { box-sizing: border-box; float: none; width: 100%; text-align: center; } #satellite footer #copyright_links p { font-size: 1.3em; } body.general article .metabio { font-size: 1em; border-bottom: 1px solid #efefef; margin-bottom: 5em; padding-bottom: 2em; } body.general article h1 { text-align: center; line-height: 1em; } .general .topblock p { font-size: 3.5em !important; display: inline; margin-right: 3px; line-height: 1.2em; color: #484848; letter-spacing: -1px; } .explorers { text-align: center; } .explorers header { border-bottom: 1px solid #999; } .explorers h2 { font-size: 3.5em !important; font-weight: normal; } .roden_list #subForm { width: 100%; margin-bottom: 40px; } .roden_list #subForm input[type=email], #subForm2 input[type=email] { width: 92%; margin-bottom: 5px; } .roden_list p { margin-top: 40px; width: 100%; } .roden_list form { height: 80px; } #subForm2 input[type=email] { float: none; margin-bottom: 5px; background-color: #f7f7f7; border-color: #f7f7f7; } #rodensignup { height: 300px; padding-top: 5em; } #rodensignup p { font-size: 1.7em; line-height: 1.6em; } #rodensignup h3 { font-size: 2.4em; } #rodensignup #subForm button { margin-top: 5px; } #rodensignup form { margin-bottom: 60px; } #rodensignup #subForm input[type=email] { width: 94%; margin-bottom: 5px; } #journal_list h2 { text-align: center; margin-bottom: 1em; } /* ARTICLES ------------------------- */ #coccyx .titles { background-image: none !important; } #coccyx .titles h1 { left: 0px !important; padding-top: 120px !important; width: 100% !important; float: none; text-align: center; background: transparent url(/images/journal/coccyx/hack_illustration.png) center top no-repeat !important; } #coccyx .titles h2 { float: none !important; left: 0px !important; width: 100% !important; text-align: center !important; } #coccyx .titles cite { float: none !important; left: 0px !important; width: 100% !important; text-align: center !important; } #digital_physical .contents, #coccyx .contents { display: none; } .figwrap { float: none; width: 100%; } figure.sixcol, figure.twelvecol, figure.fourcol, figure.threecol, figure.twocol { padding: 0 !important; } figure a { width: 100%; box-shadow: none; } figure a img { width: 100%; } .csstwocolwrap { -webkit-column-count: 1 !important; column-count: 1; } #referenced ol li { font-size: 1.6em !important; } .fullarchive .readnext { margin-top: 1em; margin-bottom: 5em; padding-bottom: 5em;} .fullarchive .readnext h3 { font-weight: bold; font-size: 3.8em; margin-bottom: 1em; } .readnext h4, #satellite .readnext h4 { font-size: 3.2em; text-transform: none; font-weight: bold; margin-top: .1em;} .readnext h5, #satellite .readnext h5 { font-size: 1.6em; margin-bottom: 2em;} .readnext .threecol:last-child, #satellite .readnext .threecol:last-child { padding-right: 20px;} .readnext .threecol, #satellite .readnext .threecol { margin-bottom: 3em; } .speaking .info p, .speaking .booking p { font-size: 1.8em; } } @media print { #rodensignup { display: none; } .readnext { display: none; } footer { display: none; } header { display: none; } .row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol { width: 65%; margin: 0 auto; float: none; } #satellite p, #satellite li { font-size: 1.9em; } a { box-shadow: none; } a[href]:after { content: " (" attr(href) ")"; } } /* ===================================== ===================================== ===================================== ===================================== ===================================== */