/* CSS Document used by Articles, Ledger, & ShortGuide */
@viewport {width: device-width; zoom: 1;}
body {margin-left:1em; max-width:920px; font-family:tahoma, sans-serif; background:url("../hexhamuntitled-13a.jpg"); background-size: 100%; background-attachment:fixed}
h1, h2, h5 {text-align:center; white-space:nowrap}
h1, h2, h4, h5 {-webkit-margin-after:0.1em}
h1, h2, h4 {-webkit-margin-before:0}
h1:before, h1:after {content:" "url(../triquetra1.png)" "}
i,em,footer {color:#722}
p {margin:0.5em 5px}
li,.box,p {margin:0.5em 1em; background:#eeF}
.sc, .csc {font-family:"Times New Roman",serif; font-variant:small-caps; font-size:16pt}
#na:not(*:root) {cursor:not-allowed}
/*img#na {cursor:default}
#na:not(area) {cursor:not-allowed}*/    
blockquote,tr {background:#FFc}
.al {float:left; margin-right:1em}
.ar {float:right; margin-left:1em; font-style:italic}
.right {text-align:right}
.r {padding-left:60%}
table.dates td:first-child {font-weight:bold}
table.images td+td, td+td+td, td+td+td+td {font-style:italic; font-size:smaller; text-align:center}
.centre {margin-left:auto; margin-right:auto; width:75%}
.ct, .csc {text-align:center}
.by {font-variant:small-caps}
.bs {font-variant:small-caps;font-weight:bold}
.small,.latin {font-size:90%}
.smaller, footer p:first-child,.ar {font-size:smaller}
.larger {font-size:larger}
.s, big {font-size:150%}
big:before {content:"\A0"}
ol {-webkit-margin-before:0.5em; -webkit-margin-after:0.5em; -webkit-padding-start:5px}
div.box {border:solid 1px blue; margin-bottom:400px; max-width:500px}
table, div.box {margin-left:auto; margin-right:auto}
button {margin:3px; font-size:15px; -webkit-appearance:none; border-color:blue; font-family:tahoma, sans-serif; border-radius:15px/60px; padding:1px 8px; transition: color 0.4s}
a {transition: color 0.4s}
a img {transition: opacity 0.4s}
a img:hover {opacity:0.6}
body:after {content:"Copyright \A9  2026 Hexham Abbey Heritage"; color:navy}
button#back {position:fixed; bottom:20px; left:0px;}
a:hover, button:hover {color:red; cursor:pointer}
.tip {position:relative; display:inline-block; border-bottom:2px dotted red; text-decoration:none; color:black}
.tip span {visibility:hidden; width:120px; background-color:red; color:#fff; text-align:center; border-radius:5px; padding:5px; position:absolute; z-index:1}
.tip:hover span {visibility:visible; bottom:100%; left:50%; margin-left:-90px}
.tip:active span {visibility:hidden}
area, .doit {display:block; position:fixed; top:5px; left:300px; font-size:20px;} 
.doit {position: fixed; top: 0; left: 300px; display: none;}
area:hover:after {background:rgba(0,0,0,.9); border-radius:5px; bottom:26px; color:#fff; content:attr(title); padding:5px 15px; z-index:98; }  
area:hover + div {display: block; background: rgba(0,0,0,.8); border-radius: 5px; color: #fff; padding: 5px 15px;}
area[href="javascript:;"] {cursor:default}
td, sc {vertical-align:top}
sup {vertical-align:text-top}
.n {font-variant:normal; font-size:smaller; font-weight:normal}
.tip2 {position:relative; display:inline-block; border-bottom:2px dotted blue; text-decoration:none; color:black}
.tip2 span {visibility:hidden; width:670px; background-color:blue; color:#fff; text-align:left; border-radius:5px; padding:5px; position:absolute; z-index:1}
.tip2:hover span {visibility:visible; bottom:10%; left:10%; margin-left:0px}
.tip2:active span {visibility:hidden}