/* ======================================================= JOURNAL STYLES ======================================================= */ /* GENERAL ------------------------------------------------------- */ article h2 { font-size: 2.8em; line-height: 1.1em; margin-top: 1.75em; margin-bottom: 1em; font-weight: normal; font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, Times, serif; font-style: normal; } article h3 { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; font-size: 2.2em; line-height: 1.1em; font-weight: normal; margin-bottom: .25em;} article h2 a, article h3 a { color: inherit; border: 0px; } blockquote { margin-left: 3em; font-style: italic; margin-bottom: 1em; color: #777; } article .sc { font-size: .85em; text-transform: uppercase; letter-spacing: 1px; } article sup { height: 0; line-height: 1; bottom: 1em; } article sup a { color: #aaa; } article hr { border: 0; border-top: 1px dotted #ddd; border-bottom: 1px dotted #fff; margin: 50px auto; width: 50%; } article ul { margin-bottom: 1.8em; } article ol li { list-style: decimal; list-style-position: outside; margin-left: 1.5em; } article ul li { list-style: circle; list-style-position: outside; margin-left: 1.5em; } #digital_physical, #coccyx { margin-top: 10em; } #digital_physical .titles { margin-bottom: 50px; background-size: 100%; background: transparent url(/journal/images/digital_physical/h1-background-instagram.jpg) top left no-repeat; min-height: 800px; } #digital_physical .titles h1 { position: relative; display: block; left: 50px; top: 200px; width: 331px; height: 290px; text-indent: 100%; overflow: hidden; white-space: nowrap; background-size: 100%; background: transparent url(/journal/images/digital_physical/h1-the_digital_physical2.png) top left no-repeat; } #digital_physical .titles cite { clear: both; float: left; font-size: 1.4em; text-shadow: 1px 1px 0px #000; left: 112px; position: relative; top: 200px; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; color: #fff; } #digital_physical .titles cite a:hover { border: none; color: #fff; } #digital_physical .contents_wrap, #coccyx .contents_wrap { border: 3px solid #ddd; background-color: #f7f7f7; padding: 20px 0px; box-shadow: 0px 3px 7px #eee; } #digital_physical .contents, #coccyx .contents { float: right; } #digital_physical .contents h3, #coccyx .contents h3 { margin-left: 20px; margin-right: 20px; margin-bottom: .5em; padding-bottom: .5em; font-size: 1.6em; font-weight: bold; border-bottom: 1px solid #ddd; } #digital_physical .contents ol li, #coccyx .contents ol li { margin-left: 20px; margin-right: 20px; margin-bottom: .5em; list-style: none; list-style-position: inside; font-size: 1.4em; } #digital_physical .contents ol li a, #coccyx .contents ol li a { display: block; border-bottom: 1px solid transparent; } #coccyx .titles { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; margin-bottom: 50px; background-size: 100%; background: transparent url(/journal/images/hack_the_cover/h1-coccyxofcodex-notext.png) top left no-repeat; min-height: 550px; } #coccyx .titles h1 { clear: both; float: left; width: 350px; left: 60%; position: relative; top: 200px; font-size: 7em; line-height: .85em; color: #333; letter-spacing: -.07em; border-bottom: 1px solid #999; padding-bottom: 20px; margin-bottom: 15px; background: transparent url(/journal/images/hack_the_cover/hack_illustration.png) right top no-repeat; } #coccyx .titles h2 { clear: both; font-style: normal; text-transform: uppercase; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; float: left; width: 350px; left: 60%; position: relative; top: 200px; font-size: 1.4em; line-height: .85em; color: #333; margin-bottom: 10px; } #coccyx .titles cite { clear: both; float: left; font-size: 1.4em; left: 60%; position: relative; top: 200px; color: #999; } #coccyx .titles cite a { color: #000; } #platforming { margin-top: 5em; } #platforming .titles { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; margin-bottom: 5em; } #platforming .titles .imagenav { background: transparent url(/journal/images/platforming_books/digital_banner-huge.jpg) center top no-repeat; background-size: 100%; } .bluedots { opacity: 0; -webkit-transition-property: opacity; -webkit-transition-duration: 0.7s; } .imagenav:hover .bluedots { opacity: 1; transition-property: opacity; transition-duration: 0.3s; } .imagenav .jumpwrap { position: relative; top: -590px; width: 100%; } .imagenav .webjump, .imagenav .ibooksjump, .imagenav .kindlejump { opacity: 0; -webkit-transition-property: opacity; -webkit-transition-duration: 0.7s; position: relative; } .imagenav .webjump { width: 680px; height: 390px; top: 0px; left: 230px; } .imagenav .ibooksjump { width: 310px; height: 355px; top: 172px; left: 173px; } .imagenav .kindlejump { width: 360px; height: 290px; top: 217px; left: 715px; } .imagenav .webjump:hover, .imagenav .ibooksjump:hover, .imagenav .kindlejump:hover { opacity: 1; cursor: pointer; } .imagenav a { color: #000; display: block; line-height: 30px; font-size: 1.7em; height: 30px; text-decoration: none; border: 0; font-weight: bold; } .imagenav a span { margin-left: 30px; background-color: rgba(200,200,200,0.8); padding-left: 10px; padding-right: 10px; box-shadow: 0px 1px 3px rgba(100, 100, 100, 0.5);} #platforming .titles h1 { text-align: center; padding-top: 30px; font-size: 7em; line-height: .85em; color: #333; letter-spacing: -.07em; padding-bottom: 20px; margin-bottom: 15px; } #platforming .titles h2 { text-align: center; text-transform: uppercase; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; font-style: normal; font-size: 1.4em; line-height: .85em; color: #333; margin-bottom: 10px; } #platforming .titles cite { float: left; text-align: center; width: 100%; margin-bottom: 70px; font-size: 1.4em; color: #999; text-shadow: 0px 0px 10px #fff; } #platforming .titles cite a { color: #000; text-shadow: 0px 0px 3px #fff; } /* #platforming .titles { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; margin-bottom: 50px; background-size: 100%; background: transparent url(/images/journal/platforming/digital_banner-huge.png) top left no-repeat; min-height: 800px; } #platforming .titles h1 { clear: both; float: right; width: 350px; margin-right: 5%; padding-top: 70px; font-size: 7em; line-height: .85em; color: #333; letter-spacing: -.07em; border-bottom: 1px solid #999; padding-bottom: 20px; margin-bottom: 15px; } #platforming .titles h2 { clear: both; float: right; width: 350px; margin-right: 5%; text-transform: uppercase; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; font-style: normal; font-size: 1.4em; line-height: .85em; color: #333; margin-bottom: 10px; } */ #platforming #ronnotes { background-color: #f7f7f7; border-radius: 15px; padding-top: 30px; padding-bottom: 30px; margin-bottom: 3.4em; font-size: .9em;} #ronnotes h3 { text-shadow: 1px 1px 0px #fff; font-weight: bold; } #ronnotes h4 { font-size: 1.8em; margin-bottom:.25em; font-weight: bold; text-shadow: 1px 1px 0px #fff; color: #333; } #ronnotes .slidetoggler h4 { text-align: center; text-transform: uppercase; border-top: 1px solid #bbb; margin-top: 10px; padding-top: 30px; text-shadow: 1px 1px 0px #fff; } #ronnotes .slidetoggler:hover { cursor: pointer; } #ronnotes .slidetoggler:hover h4 { color: #fff; text-shadow: 1px 1px 0px #000, 2px 2px 0px #000, 3px 3px 0px #000, 4px 4px 0px #000, 5px 5px 0px #000, -1px -1px 0px #bbb; cursor: pointer; } #ronnotes .slideme { display: none; margin-top: 40px; } #platforming .purchase { text-align: center; } #platforming .purchase h3 { font-weight: normal; } #platforming .purchase h4 { font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, Times, serif; font-style: normal; text-transform: uppercase; letter-spacing: 1px; font-size: 1.2em; } #platforming a:hover img { text-decoration: none; border: 0px; } #platforming .bottombuy { border-top: 0px solid #666; border-bottom: 0px solid #666; padding-top: 10px; } #platforming .bottombuy h3 { text-align: center; font-size: 1.6em; } aside { width: 100%; padding-bottom: .5em; padding-top: .5em; border-top: 3px double #ddd; border-bottom: 3px double #ddd; color: #666; line-height: 1.4em; font-size: 2.4em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; } aside.pull { margin-left: -30%; margin-top: .2em; margin-bottom: .5em; } /* SUBCOMPACT PUBLISHING ------------------------------------------------------- */ #subcompact { background-color: #f7f7f7; } #subcompact blockquote.opening { font-size: 2em; text-align: center; border-top: 3px double #ddd; padding-top: 2em; border-bottom: 3px double #ddd; padding-bottom: 2em; margin-bottom: 10em; } #subcompact blockquote { font-size: inherit; text-shadow: 1px 1px 0px #fff; } #subcompact article .title h1 { font-size: 5.2em; line-height: 1.1em; margin-bottom: .2em; letter-spacing: -1px; text-shadow: 1px 1px 0px #fff; margin-top: 50px; } #subcompact article .title h2 { font-size: 1.4em; color: #999; text-transform: uppercase; text-shadow: 1px 1px 0px #fff; } #subcompact article .title cite { font-size: 1.4em; display: block; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; } #subcompact article .title img { margin-top: 50px; margin-bottom: 50px; } #subcompact .title { text-align: center; margin-bottom: 100px; padding-bottom: 100px; border-bottom: 1px solid #ddd; box-shadow: 0px 1px 0px #fff; } #subcompact.ja .title { margin-bottom: 20px; padding-bottom: 20px; } #subcompact.ja article .title a:hover { border: 0; } #subcompact.ja article .title img.amazondekau { opacity: 0.7; } #subcompact.ja article .title img.amazondekau:hover { opacity: 1; } #subcompact blockquote cite { display: block; font-size: .85em; } #subcompact ol { margin-bottom: 2em; margin-left: 1em; } #subcompact .pullimage { float: left; margin-left: -170px; margin-top: 30px; margin-bottom: 20px; } #subcompact .pullimage img { border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } #subcompact .followup { font-size: .8em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; border-top: 1px solid #ddd; padding-top: 40px; margin-top: 40px; } #subcompact #toc { -webkit-transition-property: opacity; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; border-radius: 10px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background: #dbdbdb url(/journal/images/subcompact_publishing/bg-noise.png) top left; box-shadow: 0px 2px 8px #eee; z-index: 400; } #subcompact #toc:hover { opacity: 1.0 !important; } #subcompact #toc.stick { opacity: 0.1; } #subcompact #toc h5 { font-size: 2em; padding: 10px; padding-bottom: 0; font-weight: bold; margin-left: 10px; text-shadow: 1px 1px 0px #fff; } #subcompact #toc ol { background: #cdcdcd url(/journal/images/subcompact_publishing/bg-noise.png) top left; padding: 10px 10px 10px 20px; border-top: 1px solid #efefef; margin-left: 0; border-bottom: 1px solid #efefef; margin-top: 10px; margin-bottom: 35px; box-shadow: 0px 1px 0px #efefef; } #subcompact #toc ol li { font-size: 1.4em; color: #999; } #subcompact #toc ol li a { display: block; color: #666; padding: 5px; -webkit-transition-property: color, background-color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } #subcompact #toc ol li a:hover { border: 0; background: #efefef url(/journal/images/subcompact_publishing/bg-noise.png) top left; border-radius: 5px; color: #000; } /* PHOTOGRAPHY HELLO ------------------------------------------------------- */ #photography_hello { background-color: #fdfdfd; } #photography_hello a#hellobar-open, #photography_hello a#hellobar-open:link, #photography_hello a#hellobar-open:visited { display: none; } #photography_hello .black { display: none; background-color: #111111; background-image: url(/journal/images/the_future_of_photography_is_software/nebulaebg.jpg); background-size: cover; background-position: center center; } #photography_hello .black #logo_mast h1 a { color: #333333; -webkit-transition-property: color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } #photography_hello .black #logo_mast h1 a:hover { color: #bbbbbb; } #photography_hello .black header { background: none; border-bottom: 1px solid #333333; } #photography_hello .black nav { color: #333333; } #photography_hello .black nav a { color: #333333; } #photography_hello .black nav a:hover { color: #c1c5da; } #photography_hello .black #breadcrumbs ul li a { color: #333333; -webkit-transition-property: color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } #photography_hello .black #breadcrumbs ul li a:hover { color: #c1c5da; border: none; } #photography_hello .black #breadcrumbs ul li span { color: #666666; } #photography_hello p, #photography_hello li, #photography_hello blockquote { font-size: 2em; line-height: 1.5em; } #photography_hello p { margin-bottom: 1.5em; } #photography_hello #footer_menu p, #photography_hello #copyright_links p { font-size: 1.3em; } #photography_hello article h2 { margin-top: 1em; } #photography_hello blockquote.opening { font-size: 2em; text-align: center; padding-top: 2em; padding-bottom: 2em; margin-bottom: 5em; margin-left: 0;} #photography_hello blockquote { font-size: inherit; border-left: 4px solid #ddd; padding-left: 2em; text-shadow: 1px 1px 0px #fff; color: #333333; } #photography_hello .title h1 { font-size: 5.2em; line-height: 1.1em; margin-bottom: .2em; letter-spacing: -1px; text-shadow: 1px 1px 0px #fff; margin-top: 50px; } #photography_hello .title h2 { font-size: 1.4em; letter-spacing: 1px; color: #999; text-transform: uppercase; text-shadow: 1px 1px 0px #fff; } #photography_hello .title cite { font-size: 1.4em; display: block; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; } #photography_hello .title .photo_frame { margin-top: 50px; margin-bottom: 50px; } #photography_hello .title { text-align: center; padding-bottom: 100px; } #photography_hello.ja .title { margin-bottom: 20px; padding-bottom: 20px; } #photography_hello.ja article .title a:hover { border: 0; } #photography_hello blockquote cite { display: block; font-size: .85em; } #photography_hello ol { margin-bottom: 2em; margin-left: 1em; } #photography_hello .pullimage { float: left; margin-left: -170px; margin-top: 30px; margin-bottom: 20px; } #photography_hello .pullimage img { border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } #photography_hello .pullimage a img { border:none; } #photography_hello .fullbleed { background-image: url("/journal/images/the_future_of_photography_is_software/nagano_light.jpg"); background-size: cover; background-position: center center; background-color: #e7e7e7; min-width: 1140px; width: 100%; height: 900px; padding-top: 0px; margin-bottom: 60px; position: relative; } #photography_hello .fullbleed .titleblock { background-color: rgba(0,0,0,0.3); padding: 30px 0; } #photography_hello .fullbleed .titleblock nav { text-shadow: 1px 1px 0px #000; margin-top: 10px; } #photography_hello .fullbleed .titleblock nav a:hover { color: #fff; } #photography_hello .fullbleed.title h1 { font-size: 5em; color: #fff; text-shadow: none; } #photography_hello .fullbleed.title h2 { color: #dddddd; text-shadow: 1px 1px 0px #000; font-size: 1.6em; } #photography_hello .fullbleed.title cite { color: #dddddd; text-shadow: 1px 1px 0px #000; font-size: 1.6em;} #photography_hello .fullbleed.title cite a { color: #999999; -webkit-transition-property: color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } #photography_hello .fullbleed.title cite a:hover { color: #ffffff; border-bottom: none; } #photography_hello .fullbleed h5 { position: absolute; -moz-box-sizing:border-box; box-sizing: border-box; bottom: 0px; right: 0px; font-size: 1.4em; padding: 10px 20px 10px 20px; color: #ffffff; text-align: right; background-color: rgba(0,0,0,0.4); } #photography_hello .followup { font-size: .8em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; border-top: 1px solid #ddd; padding-top: 40px; margin-top: 40px; } #photography_hello .photo_frame figcaption { font-size: 1em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; color: #666666; } #photography_hello .photo_frame img { border: 3px solid #ddd; box-shadow: 0px 1px 2px #ddd; box-sizing: border-box; -moz-box-sizing:border-box; height: auto; min-height: 200px; width: 100%; max-width: 100%; } #photography_hello .photo_frame a { -moz-box-sizing:border-box; box-sizing: border-box; } #photography_hello .photo_frame a img { border:none; } #photography_hello #abouttheauthor h3 { font-weight: bold; } @media only screen and (min-width: 768px) { #photography_hello .mobile { display: none; } } @media handheld, only screen and (max-width: 767px), only screen and (max-device-width: 767px), only screen and (device-width: 768px) { #photography_hello p { font-size: 2em !important; line-height: 1.5em !important; } #photography_hello li { font-size: 2em !important; line-height: 1.5em !important; } #photography_hello blockquote { margin-left: 1.5em; } #photography_hello .fullbleed { display: none; } #photography_hello .mobile { display: inline; } } /* Hi: Narrative mapping the world ------------------------------------------------------- */ #hi { background-color: #f7f7f7; } #hi blockquote.opening { font-size: 2em; text-align: center; border-top: 3px double #ddd; padding-top: 2em; border-bottom: 3px double #ddd; padding-bottom: 2em; margin-bottom: 10em; margin-left: 4em; } #hi blockquote { font-size: inherit; text-shadow: 1px 1px 0px #fff; } #hi article .title h1 { font-size: 5.2em; line-height: 1.1em; margin-bottom: .2em; letter-spacing: -1px; text-shadow: 1px 1px 0px #fff; margin-top: 50px; } #hi article .title h2 { font-size: 1.4em; color: #999; text-transform: uppercase; letter-spacing: 1px; line-height: 1.5em; text-shadow: 1px 1px 0px #fff; } #hi article .title cite { font-size: 1.4em; display: block; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; } #hi article .title img { margin-top: 50px; margin-bottom: 50px; } #hi .title { text-align: center; margin-bottom: 100px; border-bottom: 1px solid #ddd; box-shadow: 0px 1px 0px #fff; } #hi blockquote cite { display: block; font-size: .85em; } #hi ol { margin-bottom: 2em; margin-left: 1em; } #hi .pullimage { float: left; margin-left: -170px; margin-top: 30px; margin-bottom: 20px; } #hi .pullimage img { border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } #hi .followup { font-size: .8em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; border-top: 1px solid #ddd; padding-top: 40px; margin-top: 40px; } #hi #toc { -webkit-transition-property: opacity; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; border-radius: 10px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background: #dbdbdb url(/journal/images/subcompact_publishing/bg-noise.png) top left; box-shadow: 0px 2px 8px #eee; z-index: 400; } #hi #toc:hover { opacity: 1.0 !important; } #hi #toc.stick { opacity: 0.1; } #hi #toc h5 { font-size: 2em; padding: 10px; padding-bottom: 0; font-weight: bold; margin-left: 10px; text-shadow: 1px 1px 0px #fff; } #hi #toc ol { background: #cdcdcd url(/journal/images/subcompact_publishing/bg-noise.png) top left; padding: 10px 10px 10px 20px; border-top: 1px solid #efefef; margin-left: 0; border-bottom: 1px solid #efefef; margin-top: 10px; margin-bottom: 35px; box-shadow: 0px 1px 0px #efefef; } #hi #toc ol li { font-size: 1.4em; color: #999; } #hi #toc ol li a { display: block; color: #666; padding: 5px; -webkit-transition-property: color, background-color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; } #hi #toc ol li a:hover { border: 0; background: #efefef url(/journal/images/subcompact_publishing/bg-noise.png) top left; border-radius: 5px; color: #000; } /* FIGURES (IMAGES) ------------------------------------------------------- */ figure { width: 100%; margin-bottom: 1em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; color: #fff; } figure.pull { margin-left: -30%; margin-top: 1em; } figure img { float: left; border: 2px solid #ddd; } figure a img { border: none; } figure a { float: left; border: 3px double #ddd; -webkit-transition-property: border; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; box-shadow: 0px 1px 5px #ddd; } figure a:hover { border: 3px solid #c00; } figure a.download { border: 0px; opacity: .3; } figure a.download:hover { opacity: 1; } figure figcaption { width: 100%; padding-bottom: .5em; font-size: 1.1em; text-align: right; color: #000; text-transform: uppercase; letter-spacing: 1px; margin-right: .5em; } figure h5 { color: #666; font-size: 1em; text-transform: uppercase; letter-spacing: 0px; font-weight: bold; } .figwrap { float: left; } figure figcaption { font-weight: bold; color: #999; text-shadow: 1px 1px 0px #fff; } figure figcaption a { float: none; border: none; box-shadow: none; } figure figcaption a:hover { border: none; } /* KINDLE ------------------------------------------------------- */ #kindle { margin-top: 40px; padding-top: 20px; border-top: 1px solid #efefef; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #efefef; } #kindle a { display: block; border-bottom: 1px solid #fff; } div.kindle { margin-top: 40px; margin-bottom: 40px; padding-top: 40px; padding-bottom: 40px; border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; } div.kindle a { display: block; border-bottom: 1px solid transparent; } #booksmentioned { margin-top: 40px; padding-top: 20px; border-top: 2px solid #ddd; margin-bottom: 40px; } /* REFERENCED ------------------------------------------------------- */ #referenced { margin-bottom: 20px; } #referenced h5 { font-size: 2.4em; margin-bottom: .5em; } #referenced ol li { font-size: 1.4em; line-height: 1.4em; margin-bottom: 1.4em; list-style: decimal; list-style-position: outside; margin-left: 30px; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; color: #333; } .csstwocolwrap { width: 100%; -webkit-column-count: 2; -webkit-column-gap: 20px; -moz-column-count: 2; -moz-column-gap: 20px; } #referenced ol.footnotes { width: 97%; -webkit-column-count: 2; -webkit-column-gap: 20px; -moz-column-count: 2; -moz-column-gap: 20px; } #abouttheauthor { font-size: .8em; } @media handheld, only screen and (max-width: 767px), only screen and (max-device-width: 767px), only screen and (device-width: 768px) { #platforming .titles .imagenav .jumpwrap { display: none; } #subcompact blockquote.opening { margin-left: 0; margin-bottom: 5em; } #subcompact .pullimage { max-width: 120px; float: left; margin-right: 10px; margin-left: 0; padding-left: 0; } #subcompact #toc { display: none; } #referenced ol.footnotes { width: 97%; -webkit-column-count: 1; -webkit-column-gap: 0px; -moz-column-count: 1; -moz-column-gap: 0px; } #hi blockquote.opening { margin-left: 0; } } /* ================================================ */ /* DARK MODE ====================================== */ /* ================================================ */ @media (prefers-color-scheme: dark) { #photography_hello { background-color: #222; } #photography_hello blockquote { font-size: inherit; border-left: 4px solid #ddd; padding-left: 2em; text-shadow: none; color: #fff; } #photography_hello .title h1 { text-shadow: none; } #photography_hello .photo_frame img { border: 3px solid #000; box-shadow: none; } #photography_hello figure figcaption { color: #fff; text-shadow: none; } #photography_hello figure a { border: 1px solid #000; box-shadow: none; } #photography_hello #referenced ol li { color: #efefef; } #photography_hello .title h2 { font-size: 1.4em; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",Helvetica,Arial,sans-serif; line-height: 1.4em; letter-spacing: 1px; color: #efefef; text-transform: uppercase; text-shadow: none; } }