/* TECHNICAL GUIDE MEDIA QUERIES Version 1.1.3 ======================= MEDIA & SUPPORT QUERIES ======================= Dropcaps */ @media only screen and (max-device-width: 750px) { p.dropcap::first-letter { initial-letter: 2; -webkit-initial-letter: 2; font-weight: normal; } } /* DIVISIONAL BRANDING */ @media amzn-kf8 { .banner_pelican { padding-left: 2.2em; } } @media amzn-et { .banner_penguin, .banner_pelican, .banner_puffin, .banner_ladybird { background-size: contain; } .banner_pelican { padding: 30px 10px 30px 3.5em; background-color: #FFF; /* Fixes ET background positioning issue */ } } /* SIDEBAR ADAPTIVE MEDIA QUERIES, SIDEBAR ET and KiOS FIXES */ @media screen and (max-width: 512px), amzn-et, amzn-kf8 and (device-height:1024px) and (device-width: 758px), amzn-kf8 and (device-height: 768px) and (device-width: 1024px) { .sidebar_wrapper { float: none; font-size: 0.85em; margin-bottom: 1em; padding: 0px; text-align: left; width: 100%; } .sidebar_wrapper p { text-align: left; } .sidebar_wrapper h1, .sidebar_wrapper h2, .sidebar_wrapper h3, .sidebar_wrapper h4, .sidebar_wrapper h5 { text-align: left; } .sidebar_wrapper .stacked_image { width: 33.3%; /* Divide width of sidebar by the number of child images, in this example, 3 images. Works best with 3 to 5 square-aspect images. */ } h1 + .sidebar_wrapper, h2 + .sidebar_wrapper, h3 + .sidebar_wrapper, h4 + .sidebar_wrapper { margin-top: 2em; } .maincontent_wrapper { clear: both; float: none; padding: 0px; width: 100%; } .bordered_sidebar_content { border: 0; padding: 0; } } /* VERTICAL CENTERING */ @supports (display: flex) { .cover_image, .image_full, .image_full_caption, .brand_logo_solo, .vertical_center { height: 100%; height: 100vh; margin-top: 0px !important; page-break-after: always; page-break-before: always; text-align: center; display: -webkit-flex; display: flex; align-items: center; flex-direction: column; justify-content: center; } .brand_logo_solo img, .vertical_center figure { margin-top: -60px; } } /* OPTIONAL SCALING THUMBNAILS [OPTIONAL / EXPERIMENTAL] Adds scaling animation to Thumbnail TOC Grid for desktop and web. */ .chapter_toc a:hover img, .chapter_toc a:focus img, .chapter_toc a:active img { -webkit-animation: scaleThumb 0.2s; animation: scaleThumb 0.2s; -webkit-transform: translate3d(0, 0, 0); /* Force hardware acceleration */ } @-webkit-keyframes scaleThumb { 0%, 100% {width: 100%;} 50% {width: 85%;} } @keyframes scaleThumb { 0%, 100% {width: 100%;} 50% {width: 85%;} } /* KINDLE-SPECIFIC */ @media not amzn-kf8 { .kf8_only { display: none; } } @media amzn-kf8 { .epub3_only { display: none; } } @media amzn-kf8 { /* KF8 NIGHT-MODE FIX FOR HYPERLINKS */ .toc_level1 a, .toc_level1 a:visited { border-bottom: none; color: #0066ff; text-decoration: none; } .toc_level2 a, .toc_level2 a:visited { border-bottom: none; color: #0066ff; text-decoration: none; } } /* THUMBNAIL TOC GRID FOR KINDLE ET */ @media amzn-et { div.chapter_toc { display: none; } h2.chapter_toc_header { display: none; } }