/* -------------------------------------------- Viewport less than 1200px Stylesheet -------------------------------------------- */ @media (max-width: 1200px) { #container { width: 960px; } #content { width: 700px; } #sidebar { width: 240px; } header { width: 720px; } header hgroup h1 { font-size: 32px; } header hgroup h2 { font-size: 18px; } header nav { margin-top: 18px; } header nav ul li { font-size: 16px; } #banner { margin-bottom: 20px; } #content article { margin-bottom: 12px; } #content article h3 { font-size: 18px; } #content article p { font-size: 14px; } ol.interlist { font-size: 14px !important; } #content .index { width: 150px; } #content .index h3 { line-height:22px; padding-bottom:15px; font-weight:normal; } #content .index p { line-height:17px; } #content .index p a.title { font-size:13px; } #content .index p a.author { font-size:13px; } #content .index p.thisfile { font-size:13px; } #content .index p span.thisfile { font-size:13px; } #content .page { width:450px; } #content .page p { line-height:18px; } #content .page p.poemauthor, #content .page a.poemauthor { font-size:17px; } #content .page p.epigraph { font-size:13px;line-height:18px; } #content .page .poembody ol { font-size:14px; } #content .page .poembody ol li { margin-bottom:10px; } #sidebar aside { margin-bottom: 12px; } #content div.leftimagetext { width:490px; } #content div.videocontainer video { width:400px; } table.vol9no1 tr td { font-size:14px; line-height:18px; } #content p.pulloutright, #content p.pulloutleft { font-size:22px;line-height:24px; } div img.pagetopad { width:75%; } div.interview5pictures { width:400px !important; } } /* -------------------------------------------- Viewport iPad Stylesheet : Landscape -------------------------------------------- */ /* Desktop preview, replace query with below @media (max-width: 1024px) { } */ @media (max-device-width: 1024px) and (orientation: landscape) { #container { width: 768px; } #content { width: 540px; } #sidebar { width: 208px; } header { margin-bottom: 12px; width: 75%; } header hgroup { margin-bottom: 12px; } header nav { float: none; clear: both; } header nav ul { width: 100%; } header nav ul li { font-size: 14px; width: 191px; text-align: center; } header nav ul li:last-child { width: 192px; } #banner { margin-bottom: 18px; } #content article img { float: none; margin: 0 0 10px 0; width: 100%; height:100%; } #content .index { width: 130px; } #content .page { width:345px; padding-left:20px; } #content .index p.thisfile { font-size:12px; } #content .index p a.title { font-size: 12px; } #content .index p a.author { font-size: 12px; } #content .page .poembody ol { font-size:12px; } #content .page .poembody ol li { margin-bottom:10px; } ol.interlist { font-size: 12px !important; } #content article .containerdiv .page p.poemtitle { font-size: 20px; } #content article .containerdiv .page p { font-size: 12px; } #content div.leftimagetext { width:340px; } #content p.audiobuttons span { padding:5px 0; font-size:18px; margin-top:2px; } #content p.audiobuttons img.volbtn { display: none; } #content div.audiocontainer div#sliderBox { display:none; } #content .index p img { padding:0 0 4px 0; margin: 0 0 4px 5px; } } /* -------------------------------------------- Viewport iPad Stylesheet : Portrait -------------------------------------------- */ /* Desktop preview, replace query with below @media (max-width: 768px) { } */ @media (max-device-width: 1024px) and (orientation: portrait) { #container { width: 600px; } #content { float: none; width: 600px; margin: 0 0 12px 0; } #sidebar { float: none; width: 600px; } header { margin-bottom: 12px; width: 75%; } header hgroup { margin-bottom: 12px; } header nav { float: none; clear: both; } header nav ul { width: 100%; } header nav ul li { font-size: 14px; width: 149px; text-align: center; } header nav ul li:last-child { width: 150px; } #banner { margin-bottom: 18px; } #content article { padding: 20px; } #content article img { float: none; margin: 0 0 10px 0; width: 100%; height: 100%; } #sidebar aside { background: #A79F91; color: #fff; float: left; width: 250px; min-height: 170px; margin-right: 20px; padding: 20px; } #sidebar aside:last-child { margin: 0; } #content .index { width: 130px; } #content .page { width:395px; padding-left:30px; } #content div.leftimagetext { width:400px; } #content p.audiobuttons span { padding:4px 0; margin-top:2px; } #content p.audiobuttons img.volbtn { display: none; } #content div.audiocontainer div#sliderBox { display:none; } #content .index p img { padding:0 0 4px 0; margin: 0 0 4px 5px; } } /* -------------------------------------------- Viewport Mobile -------------------------------------------- */ @media (max-width: 600px) { #container, #content { float: none; width: inherit; min-width:250px; } #content { margin: 0; } #sidebar, #banner { display: none; } header { margin: 12px auto; text-align: center; width: 65%;} header hgroup { width: 100%; margin-bottom: 12px; } header hgroup h1 { font-size: 24px; } header hgroup h2 { font-size: 14px; } header nav { float: none; clear: both; } header nav ul { width: 100%; } header nav ul li { float: left; display: block; width: 49%; font-size: 12px; text-align: left; border-bottom: 1px solid #fff; text-align:center; } header nav ul li:last-child { width: 49%; border-bottom: 0; } header nav ul li a { padding: 5px; font-weight:normal; } #content article { padding: 10px; -webkit-border-radius: 0; border-radius:0; } #content article h3 { font-size: 16px; } #content article p { font-size: 12px; } ol.interlist { font-size: 12px !important; } #content article img { display: none; } #content div.coverimage { width:100%;} #content div.coverimage a img { width:100%; height:100%; display:inline; } #content div.coverimage.alt340 { width:100%; } #content div.coverimage.alt340 a img { width:100%; height:auto; } #content article img.introCover { display: inline; width:150px; height:185px; } #content p.front-page-separator-340 { font-size:1px; line-height:1px;padding:0; margin:0px 50px 15px 50px; border-bottom:1px dotted #555;} #content article img.showMobile { display: inline; } #content article div.poembody div.cover { padding:5px; margin-left:10px; } #content p.pulloutright, #content p.pulloutleft { font-size:18px;line-height:22px; } #sidebar aside { background: #A79F91; color: #fff; float: left; width: 250px; min-height: 170px; margin-right: 20px; padding: 20px; } #sidebar aside:last-child { margin: 0; } footer { padding: 10px; font-size: 12px; } #content .page .nav p.randomizer, #content .page .navbottom p.randomizer { display:none; } #content .page .nav p.toc, #content .page .navbottom p.toc { display:inline; } #content .index { display: none; } #content .page { width:96%; border:none; padding-left:5px; } #content .page p { line-height:17px; } #content .page p.poemtitle { font-size: 20px; margin-top:-5px;padding-bottom:0; line-height:26px; } /* for the mobile table of contents page */ #content .page p a.title { display:block;font-size:18px; } #content .page p a.author { font-size:16px; } #content .page .poembody ol { font-size:12px; } #content .page .poembody ol li { margin-bottom:10px; } div.mobilewarning { display:block; } div.leftimage { display:none; } #content div.leftimagetext { width:100%; float:none; } #content article h3 span.date { font-size:12px; font-weight:normal; line-height:10px;color:#888;} #content div.audiocontainer div#sliderBox { display:none; } #content div.audiocontainer img { display:inline; } #content div.videocontainer video { width:300px; } div.partnerlist p { width:100%; float:none; } div.pagetopad { display:none; } div.pagetopadmobile { display:block; } div img.pagetopad { width:100%; } div.hideonmobile { display:none; } #content article p.intersubhead { font-size:14px; } #content article p.interbio { font-size:12px; } div.left { width:100%; padding:0; } div.right{ width:100%; padding:0; border:none; border-top:1px solid black; padding-top:10px; } #content article div.interimage img { display:inline; } } /* -------------------------------------------- Widescreen Displays -------------------------------------------- */ @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { }