/* -------------------------------------------- Maynard Base Page Styles -------------------------------------------- */ /* @font-face { font-family: 'Quattrocento'; font-style: normal; font-weight: 400; src: url('../quattrocento.woff') format('woff'); } */ @font-face { font-family: 'Quattrocento'; font-style: oblique; font-weight: 400; src: url('../quattrocento-italic.woff') format('woff'); } /* @font-face { font-family: 'Quattrocento'; font-style: normal; font-weight: 700; src: url('../quattrocento-bold.woff') format('woff'); } */ .print-only, .print-only * { display:none; font-size:18px; } @media print { .no-print, .no-print * { display:none !important; } .print-only, .print-only * { display:inline !important; } #content .index { padding-bottom:0 !important; margin-bottom:0 !important; } #content .page { padding-bottom:0 !important; margin-bottom:0 !important; border-left:none !important; width:95% !important; padding-left:10px !important; } #content article { border-radius:0 !important; box-shadow:none !important; } body { background-color:#FFF !important; } header hgroup h1 { font-size: 80px; text-transform: uppercase; text-shadow: 1px 1px 0 #fff; } } body { background: #FFFEFC; font-family: 'Quattrocento', serif; color: #000000; text-align: center; line-height:1.5; } h1,h2,h3,h4 {font-family: 'Quattrocento', serif;} h1, h2 { text-align: center; } a { color: #000000; text-decoration: none; font-family: 'Quattrocento', serif; font-weight:bold } a:hover { text-decoration: underline; } #container { width: 1200px; margin: 0 auto; padding: 20px 0; text-align: left; } header { overflow: hidden; clear: both; margin:auto; width:785px; } header hgroup { float: none; } header hgroup h1 { font-size: 40px; text-transform: uppercase; text-shadow: 1px 1px 0 #fff; } header hgroup h2 { font-size: 26px; text-shadow: 1px 1px 0 #fff; font-weight: normal; } header nav { float: none; margin: 24px 0 0 0; text-align: center; } header nav ul { margin: 0; padding: 10px; overflow: hidden; display: inline-block; } header nav ul li { list-style: none; float: left; display: inline; margin: 0; padding: 0; border-right: 1px solid #fff; border-bottom: 1px solid #fff; font-size: 18px; text-transform: uppercase; } header nav ul li:last-child { border: 0; } header nav ul li a { display: block; background: #e05c00; padding: 10px 16px; color: #fff; text-decoration: none; -webkit-transition-property: background; transition-property: background; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } header nav ul li a.current, header nav ul li a.current:hover { background: #999; cursor:default; } header nav ul li a:hover { text-decoration: none; background: #0ca8ed; } div#topsubnav { clear: both; padding: 10px 20px; font-size: 14px; } div#topsubnav nav ul { margin: 0 0 8px 0; padding: 0; } div#topsubnav nav ul li { list-style: none; display: inline; margin-right: 12px; } #banner { font-size: 18px; text-align:center; line-height: 1.4; border-bottom: 1px solid #383838; clear: both; margin-bottom: 30px; } #banner p { text-shadow: 1px 1px 0 #fff; } #content { width: 70%; margin:auto; } #content article { background: #fff; margin: auto; padding: 20px; -webkit-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3); box-shadow: 0 0 4px rgba(0,0,0,.3); } #content article h3 { font-size: 26px; margin-bottom: 12px; } #content article h3 span.date { font-size:16px; font-weight:normal; line-height:10px;color:#888;} #content article img { margin: 0 0 10px 10px; } #content article p { font-size: 16px; margin-bottom: 16px; } #content article p:last-child { margin-bottom: 0; } #content div.leftimage { width:150px; float:left; margin-right: 10px;} #content div.leftimagetext { width:620px; float:left; } #content div.coverimage { width:362px; float:left; margin-right: 30px;} #content div.coverimage a img { width:360px; height:444px;} #content div.coverimage.alt340 { width:342px; } #content div.coverimage.alt340 a img { width:340px; height:auto; } #content div.coverimage.alt296 { width:298px; } #content div.coverimage.alt296 a img { width:296px; height:auto; } #content p.front-page-separator-340 { font-size:1px; line-height:1px;padding:0; margin:0px 100px 15px 440px; border-bottom:1px dotted #555;} #content p.viewpulloutauthor-frontpage { margin-top:15px; } /* below are the poem index and page styles */ #content .containerdiv { overflow: hidden; width: 100%; } #content .index { float:left; width: 200px; padding-bottom:500em; margin-bottom:-500em; background-color:#efefef; } #content .index h3 { line-height:28px; padding-bottom:20px; font-weight:normal; } #content .index p { line-height:19px; margin-bottom:10px; } #content .index a.mainpagenav { color:#666;display:block; font-weight:normal;font-size:14px;border-bottom:1px dashed #ccc;padding-bottom:10px;margin-bottom:15px;padding-left:5px; } #content .index p a.title { color: #444; display:block; margin:0; padding:0; padding-left:5px; padding-right:5px; font-size:15px; } #content .index p a.author { color:#444; display:block; margin:0; padding:0; padding-left:5px; font-weight: normal; padding-right:5px; font-size:15px; } #content .index p.thisfile { font-weight:bold;background-color:#ccc; font-size:15px; padding-left:5px; } #content .index p span.thisfile {font-weight:bold;background-color:#ccc;font-size:15px;padding-left:5px; display:block; } #content .index p a.title:hover { background-color:#ccc; text-decoration:none; } #content .index p a.author:hover { background-color:#ddd; text-decoration:none; } #content .index p img { float:none; padding:0 0 3px 0; margin: 0px 5px; vertical-align:middle; width:20px;height:20px; opacity:0.8;} #content .page { float:left; width:535px; margin-right:-1px;border-left:2px dashed #ccc; padding-left:55px; padding-bottom:500em;margin-bottom:-500em; } #content .page p { line-height:22px; } #content .page p.epigraph { font-style:oblique;font-size:14px;line-height:20px; } #content .page .nav, #content .page .navbottom { margin-bottom:35px; padding: 0; border-bottom:1px solid #999; } #content .page .navbottom { border-bottom:none; border-top:1px solid #999; margin-top:70px; } #content .page .nav p.prev, #content .page .navbottom p.prev { margin:0; padding:0; float:left; width:30%; } #content .page .nav p.toc, #content .page .navbottom p.toc { display:none; margin:0; padding:0; float:left; width:38%; text-align:center;} #content .page .nav p.randomizer, #content .page .navbottom p.randomizer { margin:0; padding:0; float:left; width:38%; text-align:center;} #content .page .nav p.next, #content .page .navbottom p.next { margin:0; padding:0; float:right; width:30%; text-align:right; margin-right:5px;} #content .page .nav p.prev a, #content .page .navbottom p.prev a, #content .page .nav p.toc a, #content .page .navbottom p.toc a, #content .page .nav p.next a, #content .page .navbottom p.next a, #content .page .nav p.randomizer a, #content .page .navbottom p.randomizer a { font-weight:normal; } #content .page .nav p.prev a:hover, #content .page .navbottom p.prev a:hover, #content .page .nav p.toc a:hover, #content .page .navbottom p.toc a:hover, #content .page .nav p.next a:hover, #content .page .navbottom p.next a:hover, #content .page .nav p.randomizer a:hover, #content .page .navbottom p.randomizer a:hover { text-decoration:none; text-shadow:2px 2px 5px black; } #content .page span.invisible { color:#fff; } div.clear { clear:both; line-heigth:1px; font-size:1px; margin:0; padding:0; } #content .page p.poemtitle { font-size: 26px; margin-top:-5px;padding-bottom:0; line-height:30px; } #content .page p.poemauthor, #content .page a.poemauthor { font-weight:normal; font-size:18px; padding:0; margin-bottom:10px; border-bottom:none; color:#888; display:block; text-align:right; } #content .page a.poemauthor:hover { text-decoration:underline; } #content .page .poembody div.cover { float:right; } #content .page .poembody div.cover a { font-weight:normal; } #content .page .poembody div.cover a:hover { text-decoration:none; } #content .page .poembody div.cover p { margin:0; text-align:center; font-style:oblique; } #content .page .poembody .longlines p { margin:0; text-indent:-25px;padding-left:25px; } #content .page .poembody { -ms-touch-action: pan-y; } #content .page .poembody ol { font-size:16px; } #content .page .poembody ol li { margin-bottom:10px; } #content p.authorname { font-size:20px;border-bottom:1px solid black; } #content p.authorname a { text-decoration:none; cursor:default; } #content p.authorname a:hover { text-decoration:none; } #content p.authorbio a { font-weight:normal; border-bottom:1px dotted black; } #content p.authorbio a:hover { text-decoration:none; border-bottom:1px solid black; } #content div.audiocontainer { margin-top:5px; margin-bottom:10px; } #content div.audiocontainer { text-align:right; font-size:18px; } #content div.audiocontainer img { cursor:pointer;height:24px;width:24px;vertical-align:middle; float:right; margin:0 2px; padding: 0;opacity:0.5; } #content div.audiocontainer img:hover { opacity:1; } #content div.audiocontainer span#tracktime { padding:0; display:block; width:45px; float:right; color:#888; } #content div.audiocontainer div#sliderBox { float:right; width:60px; margin:0;padding:4px 0 0 0;font-size:1px;line-height:1px;height:20px; } #content div.videocontainer { text-align:center; margin-bottom:20px; } #content div.videocontainer video { width:500px; } div.mobilewarning { padding:5px;margin-bottom:10px; background-color:#ffc; display:none; } header hgroup h1 a:hover {text-decoration:none; color: #e05c00;} /* end of poem index and page styles */ #sidebar { float: left; width: 280px; } #sidebar aside { background: #fff; margin: 0 0 30px 0; padding: 20px; -webkit-border-radius: 20px; -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3); } #sidebar aside h4 { color: #333; font-size: 16px; margin-bottom: 4px; } #sidebar aside p { font-size: 13px; margin-bottom: 8px; } #sidebar aside p:last-child { margin: 0; } #sidebar aside ul { margin: 0; padding: 0; } #sidebar aside ul li { list-style: none; margin-bottom: 6px; } footer { clear: both; border-top: 1px solid #383838; padding: 10px 20px; font-size: 14px; } footer nav ul { margin: 0 0 8px 0; padding: 0; } footer nav ul li { list-style: none; display: inline; margin-right: 12px; } table.vol9no1 tr td { font-size:16px; line-height:22px; } table.vol9no1 tr td.right { text-align:right; } /* pullout styles for the views */ #content p.pulloutright { float:right;width:50%;font-size:26px;line-height:28px;padding-left:10px;border-left:4px solid black;margin-left:10px;margin-bottom:0; } #content p.pulloutleft { float:left;width:50%;font-size:26px;line-height:28px;padding-right:6px;border-right:4px solid black;margin-right:20px; margin-bottom:0; } /* the new archives page, with covers */ div.archivedissues div.archivecovers div { float:left; width:190px; margin:5px; } div.archivedissues div.archivecovers div p a img { width:150px; height:190px; border:1px solid black; box-shadow: 0px 0px 5px #fff; -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -ms-transition: all .25s linear; -o-transition: all .25s linear; transition: all .25s linear; } div.archivedissues div.archivecovers div p a:hover > img { box-shadow: 10px 10px 5px #888888; } div.archivedissues div.archivecovers div p a { color:#777; } div.archivedissues div.archivecovers div p a:hover { border:none; color:black; } /* partnters page */ div.partnerlist p { width:50%; float:left; } /* ads */ div img.pagetopad { border:1px solid black; margin-bottom:20px; } div.pagetopadmobile { display:none; } /* interview styling */ div.left { width:calc( 50% - 10px ); float:left; padding-right:10px;} div.right{ width:calc( 50% - 11px ); float:right; border-left:1px dashed #666; padding-left:10px; } #content article p.intersubhead { font-size:18px; text-decoration:underline; } #content article p.interquestion { font-style:oblique; } #content article p.interbiosubhead { font-size:18px; text-decoration:underline; text-align:center;font-weight:bold;} #content article p.interbio { font-size:14px; } #content article div.interimage { width:100%;text-align:center; } /* full size cover for Fall 2017 */ div#fullsizecover { position: absolute; top:2%; left: 2%; width:96%; border:4px solid black; } /* for Hiatus */ p.hiatus { font-size:26px !important; font-weight:bold; background-color:#777; color:white; margin-bottom:10px; text-align:center; padding:5px; } p.offlinemode { font-size:18px; }