html * {scroll-behavior: smooth;}

body {
	color: #333;
	background: rgb(246, 233, 209);
	font-family: "Gill Sans", "Gill Sans MT", Seravek, Calibri, system-ui, sans-serif;
	font-size: 1em;
	line-height: 1.2;
	padding: 0;
	margin: 1em 1em 1em 16em;
}

.bulletfont {font-family: -system-ui, -moz-bullet-font, Tahoma;}

body.Home h1,
body.Home p.mobile_header {color: #954;}
body.Gallery h1,
body.Gallery p.mobile_header {color: #969;}
body.Landscapes h1,
body.Landscapes p.mobile_header {color: #487;}
body.Ellicott_City h1,
body.Ellicott_City p.mobile_header {color: #28b;}
body.Still_Portraits h1,
body.Still_Portraits p.mobile_header {color: #c76;}
body.Sacred h1,
body.Sacred p.mobile_header {color: #859;} /* Same color as "Words on Art". */
body.Christmas h1,
body.Christmas p.mobile_header {color: #b44;}
body.St_Pauls h1,
body.St_Pauls p.mobile_header {color: #589;}
body.Healing_Art h1,
body.Healing_Art p.mobile_header {color: #d77;}
body.Originals_Prints_Cards h1,
body.Originals_Prints_Cards p.mobile_header {color: #486;}
	body.Originals_Prints_Cards h2 a::after {
		content: "\00A0\00A0\25B6\FE0F"; /* 0x00A0 = (Unicode) no-break space character; and 0x25B6 = (Unicode) right-pointing solid triangle; 0xFE0F = show preceding character as an icon/emoji (as opposed to a text character 0xFE0E). */
		font-size: .67em;
		font-style: normal;
	}
body.Words_on_Art h1,
body.Words_on_Art p.mobile_header {color: #859;} /* Same color as "Sacred". */
body.News h1,
body.News p.mobile_header {color: #b44;}
body.About h1,
body.About p.mobile_header {color: #56b;}
body.Contact h1,
body.Contact p.mobile_header {color: #e76;}

body p.mobile_header a {color: inherit;}

/* ========== FOR SCREEN READERS ========== */

a:focus {
	outline: 2px solid rgba(0, 51, 255, .5);
	outline-offset: 1px;
	background: #fbf4e7;
}

a:focus img {background: #fbf4e7;} /* For images with transparent backgrounds, such as the navbar logo. */

a.screen_reader_only {
	display: block;
	position: fixed;
	left: -10em;
	top: auto;
	width: auto;
	max-width: 18em;
	height: auto;
	overflow: hidden;
	padding: .4em 1em .5em;
	transition: all .5s ease-in-out;
}

a.screen_reader_only:focus {
	left: 2em;
	right: 2em;
	top: 1em;
	margin: auto;
	text-align: center;
	overflow: auto;
	z-index: 10000;
	background: #fbf4e7;
}



/* ========== SITE NAVIGATION ========== */

p.mobile_header {display: none;}

p.navbarhide, p.navbarshow {display: none;}

#navbar {
	display: block;
	position: fixed;
	width: 10em;
	height: auto;
	top: 1em;
	right: auto;
	bottom: 0;
	left: 1em;
	padding: 0 1em 0 2em; /* Left padding so there's room for the bullets of the bulleted lists. */
	overflow: visible;
	color: #876;
	background: rgba(246, 233, 209, .9);
}

#navbar:hover {overflow: auto;}

#navbar ul {
	margin: 1.5em 0;
	padding: 0;
}

#navbar ul ul {
	margin: 0 0 0 1.5em;
}

#navbar ul li {
	margin: .5em 0;
	list-style: none;
}

#navbar ul li.at {
	list-style: disc;
}

#navbar ul ul li.at {
	list-style: circle;
}

img#STA_navbar_logo {
	width: 10em;
	height: auto;
	margin-left: -1em;
}



/* ========== PAGE LAYOUT AREAS ========== */

div.runningtext, div#footer { /* to prevent excessive line lengths on large monitors. */
	max-width: 42em;
	margin: 0 auto;
}

div.Words_on_Art_index {max-width: 18em; margin: 3em auto; line-height: 1.5;}

div.Words_on_Art_index p {margin: 3em 0 1em 1em; text-indent: -1em;}

ol, ul { /* Deletes default pixel formatting and changes to em formatting. */
	margin: 0;
	padding: 0 0 0 3em;
}

ol li, ul li { /* Deletes default pixel formatting and changes to em formatting. */
	margin: 0;
	padding: 0;
}

ul.inline {margin: 1em auto; padding: 0 1.5em;}
ul.inline.max24em {max-width: 24em;}
ul.inline.max30em {max-width: 30em;}

ul.inline li {
	margin: 0;
	padding: 0;
	display: inline-block; /* Using display:inline cancels all the special styles that list items get with display:list-item; */
}

ul.inline li::before {content: '\A0 \2022 \A0 \A0';}

div#footer {
	font-size: .8em;
	padding: 3em 0; /* padding: clears floats better than margin: */
	clear: both;
}


/* ========== IMAGES, PART 1 of 2, SCREEN (desktop and laptop) DEVICES | ROLLOVER IMAGE NAMES/ICONS TO REVEAL FULL-SIZE IMAGES ========== */
/* This section creates a rollover effect on detail images to show the full-size images, but this is not effective for hand-held devices, which are coded for in the next section. */
/* .originals_prints_cards is for the "Originals, Prints, & Cards" page. */
/* NOTE: .gallery = ROLLOVER images, specifically:
1) "Gallery" page rollover images (normal+detail images), for example, <dl class="gallery">;
2) "Words on Art" pages rollover images (normal+detail images) for the title image at the top of each page, for example,
<p class="mobile-center"><span class="gallery floatleft"><a href...<img...<img ...>
3) "Words on Art" pages rollover images THAT INCLUDE CAPTIONS, for example:
<div class="gallery imgandcaption_right width150px mobilewidth837px"><a href ..><img ...><img ...><br>Lorem ipsum. */

.gallery blockquote {margin: 1em 0 1em 2em; padding: 0;}

.gallery dt {
	margin: 1em 0;
	clear: both;
	page-break-after: avoid;
}

.gallery dd {padding: 0; margin: 0 0 1em 180px;}

.gallery dd + dt::before { /* So there is space between each dl.gallery dt, and so each dl.gallery dt is automatically cleared from the one before it. */
	display: block;
	visibility: hidden;
	content: "\00A0"; /* 0x00A0 = (Unicode) no-break space character. A regular space character used alone would be ignored, so the tag would be considered empty and collapse. */
	margin: 1em 0;
	clear: both;
}

.gallery a:focus img {outline: 2px solid rgba(0, 51, 255, .5); outline-offset: 1px;} /* Allows outline to show around linked images that are floated or fixed position. */
.gallery a:focus img.imgfull {outline-offset: 0;}

.gallery a img.imgfull {
	display: block;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 1em;
	margin: auto 0;
/* The following items are transition starting points, defined differently for :hover. */
	opacity: 0;
	padding: 0;
	width: 0;
	height: 0;
	transition: all .3s ease-in-out;
}

.gallery a:focus img.imgfull, /* :focus is used "to ensure the same visual presentation is available when keyboard users navigate or 'tab' to the link" */
.gallery a:hover img.imgfull {
	background: #f5ebd9;
	z-index: 1; /* So a large image is not covered by the navbar. */
	opacity: 1;
	padding: 2.5em;
	width: auto;
	height: auto;
	box-shadow: rgba(0, 0, 0, .15) .1em .1em .7em;
	border-radius: .5em;
}

.gallery a.imgdetail + a.imgdetail {margin-top: 12px;} /* So 2 consecutive a.imgdetail images (two links, each around separate images) will be separated by a little space. For example, used for 'Living Jesus' icons on the 'Sacred' page. If line breaks (br elements) had been used to separate the a.imgdetail icons, the following dd element would have been lowered and aligned across from the second image instead of across from the first/top image. */

.gallery dt a.imgdetail {float: left;}

span.gallery {width: 162px;}
span.gallery.widthauto {width: auto;} /* For hovered images of various sizes on non-gallery pages. */
span.gallery img.imgdetail + img.imgdetail {margin-top: 12px;} /* To add a little space between images if more than one img.imgdetail is used. */

span.floatleft {
	float: left;
	margin: .25em 1em .5em 0; /* The bottom margin here should match that of dl.gallery dt so when both classes are used together, one doesn't override the other. */
}

span.floatright {
	float: right;
	margin: .25em 0 .5em 1em; /* The bottom margin here should match that of dl.gallery dt so when both classes are used together, one doesn't override the other. */
}

div.imgandcaption_left { /* Use in combination with .width##px for an image and caption floated left that's the width of the image. */
	float: left;
	margin: .25em 1.5em 1em 0;
}

div.imgandcaption_right { /* Use in combination with .width##px for an image and caption floated right that's the width of the image. */
	float: right;
	margin: .25em 0 1em 1.5em;
}

div.imgandcaption_center {margin: 2em auto 3em;} /* Use in combination with .width##px for a centered image and caption, and the caption will not exceed the width of the image.
For example, as was done at the top of the "About" and "Words on Art" pages:
<div class="imgandcaption_center width500px">
<p><img src=...><br><i>This image represents ...</p>
</div> */

div.imgandcaption_left,
div.imgandcaption_center,
div.imgandcaption_right {font-size: 1rem;} /* If an imgandcaption_[left/center/right] is floated from larger font-size text, the image caption will still be normal size. */

div.imgandcaption_left > *:first-child,
div.imgandcaption_right > *:first-child,
div.imgandcaption_center > *:first-child {margin-top: 0;}

div.imgandcaption_left img,
div.imgandcaption_right img,
div.imgandcaption_center img {margin: 0 0 .5em 0;} /* Adds space between an image and the caption beneath it. These images will be as wide as the div or span, so there won't be any text beside the image, and image and text baselines won't need to be aligned. */

.photo {border-radius: .5em;} /* Rounded corners in this style sheet are meant to be used for photographs, not artworks. */

/* Widths in pixels defined as needed, for use especially with div.imgandcaption_[left/center/right]. */
.width113px {width: 113px; height: auto; max-width: 100%;}
.width132px {width: 132px; height: auto; max-width: 100%;}
.width150px {width: 150px; height: auto; max-width: 100%;}
.width196px {width: 196px; height: auto; max-width: 100%;}
.width200px {width: 200px; height: auto; max-width: 100%;}
.width248px {width: 248px; height: auto; max-width: 100%;}
.width288px {width: 288px; height: auto; max-width: 100%;}
.width380px {width: 380px; height: auto; max-width: 100%;}
.width400px {width: 400px; height: auto; max-width: 100%;}
.width426px {width: 426px; height: auto; max-width: 100%;}
.width500px {width: 500px; height: auto; max-width: 100%;}
.width600px {width: 600px; height: auto; max-width: 100%;}
.width620px {width: 620px; height: auto; max-width: 100%;}
.width625px {width: 625px; height: auto; max-width: 100%;}

table.originals_prints_cards td {position: relative;} /* So position:fixed of td image can be relative to the table cell, not the browser window. */

table.originals_prints_cards td a.imgmicro {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 98%; /* Not to exceed 100%: if the image is placed outside of the table cell, it will disappear when the user tries to click on it for a larger view. */
	margin: auto;
	padding: 0;
	height: auto;
	width: auto;
	opacity: 0;
	background: rgb(246, 233, 209);
}

table.originals_prints_cards td a:focus.imgmicro, /* :focus is used "to ensure the same visual presentation is available when keyboard users navigate or 'tab' to the link" */
table.originals_prints_cards td:hover a.imgmicro {
	opacity: 1;
	height: auto;
	width: auto;
	z-index: 10000;
	transition: all .4s ease-in-out;
	outline: none;
	border: none;
}

table.originals_prints_cards td a.imgmicro img,
table.originals_prints_cards td a.imgmicro img {width: 0; height: 0;}

table.originals_prints_cards td a:focus.imgmicro img,
table.originals_prints_cards td:hover a.imgmicro img {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	padding: 2px;
	width: auto;
	height: auto;
	background: rgb(246, 233, 209);
}

table.originals_prints_cards td a:focus.imgmicro[href$="St_Pauls_Triptych_1of3.PNG"] img,
table.originals_prints_cards td:hover a.imgmicro[href$="St_Pauls_Triptych_1of3.PNG"] img,
table.originals_prints_cards td a:focus.imgmicro[href$="St_Pauls_Triptych_2of3.PNG"] img,
table.originals_prints_cards td:hover a.imgmicro[href$="St_Pauls_Triptych_2of3.PNG"] img,
table.originals_prints_cards td a:focus.imgmicro[href$="St_Pauls_Triptych_3of3.PNG"] img,
table.originals_prints_cards td:hover a.imgmicro[href$="St_Pauls_Triptych_3of3.PNG"] img {
	position: absolute;
	right: 100%;
}

table.originals_prints_cards td a:focus.imgmicro img {outline: 2px solid rgba(0, 51, 255, .5);}

table.originals_prints_cards tr>td:first-child,
table.originals_prints_cards tr>td:first-child+td {max-width: 15em;} /* Prevents long painting titles from stretching out the table width. Both td:first-child and td:first-child+td are used because the painting title can be in the first or second table cell of the row depending on whether or not the rowspan attribute has been used. */

/* The different sections of the "Originals, Prints, & Cards" page are incorporated into one table so that column widths are consistent from section to section. However, to keep the page from appearing to be one large table, there are no backgrounds or rules applied for each th h2 row which starts the sections, allowing each section to *appear* to be its own table. */
table.originals_prints_cards tbody tr {border: none;} /* Ensures that HTML code frame="hsides" doesn't override CSS with a rule at the table's top and bottom. */
table.originals_prints_cards tbody tr th {border: 1px solid #999;}
table.originals_prints_cards tbody tr:first-child th {border: none;}
table.originals_prints_cards tbody tr td {border: 1px solid #999;}

/* Light background color applied to every other row. Each th has no background color, and TBODY tags are used to force the first row after the th to start with a background color. */
/* table.originals_prints_cards tbody tr:nth-child(2n+3) {background: rgba(0, 0, 0, .03);} */

/* table section navigation */
th.nav_table_sections {vertical-align: top;}

th.nav_table_sections a {border: none;}
th.nav_table_sections a:not([href]) {color: #ccc;}

th.nav_table_sections ul {
	font-style: normal;
	margin: 0;
	padding: 0 0 .5em 0;
	list-style-type: none;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 25%;
}

th.nav_table_sections li {
	margin: 1.5em 0;
	padding: 0;
	text-align: center;
	line-height: 1;
}



/* ========== GENERAL TAGS AND CLASSES ========== */

sup, sub {line-height: 0;} /* Prevents superscripts and subscripts from increasing line height of the line on which they appear. */

img {border: none;}

img.middle {vertical-align: middle;}

img.width100pc, span.width100pc, div.width100pc {width: 100%;}
img.maxwidth100pc, span.maxwidth100pc, div.maxwidth100pc {max-width: 100%; height: auto;}
img.maxwidth40pc, span.maxwidth40pc, div.maxwidth40pc {max-width: 40%; height: auto;}
img.maxwidth30pc, span.maxwidth30pc, div.maxwidth30pc {max-width: 30%; height: auto;}

img[src$="St_Pauls_Triptych_1of3.PNG"],
img[src$="St_Pauls_Triptych_2of3.PNG"],
img[src$="St_Pauls_Triptych_3of3.PNG"] {
	width: 450px;
	height: auto;
}

/* horizontal rule as a single line */
hr {
	border: none;
	border-top: 1px solid #888;
}

/* horizontal rule that fades to left and right */
hr {
	border: none;
	height: 1px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
}

h1, h2, h3, h4, h5, h6 {font-weight: normal; clear: both; page-break-after: avoid;}

h1 {
	text-align: center;
	margin: 2em 0 1.1em;
	font-size: 2em;
	font-style: italic;
}

h2 {font-size: 1.5em; margin-top: 1.2em; margin-bottom: .67em; color: #456;}

h3 {font-size: 1.25em; color: #345;}
body.News h3 {font-style: italic; text-align: center; margin-top: 1.5em;}

h4 {font-size: 1.1em;}

h5 {font-size: .95em;}

h6 {font-size: .95em; font-style: italic;}

a {text-decoration: none;}
a:link {color: #44b;}
a:visited {color: #487;}
a:focus {color: #900; border-bottom: 1px solid #900;}
a:hover {color: #900; border-bottom: 1px solid #900;}
a.noborder, a.noborder:hover {border: none;} /* Use a.noborder with anchors around images where a border is not wanted, for example, around the navbar logo. When some browsers add a border to a hovered anchor and image, subsequent content is moved down, creating a 'jumping' effect. This rule prevents that. */
a:active {color: #c00;}

blockquote, q {quotes: none;}
blockquote::before, blockquote::after, q::before, q::after {content: ''; content: none;}
blockquote {margin: 1em 2em; padding: 0;}

dl.news_items {margin-top: 2em;}

dl.news_items > dt {margin: 1em 0 .67em; font-size: larger;}
dl.news_items > dd {margin: .75em 0 .75em 2em;}

dl.news_items > dd + dt::before,
dl.news_items::after {
	display: block;
	content: "* * *";
	letter-spacing: .1em;
	text-align: center;
	margin: 2.5em 0 1.5em;
	padding: 0;
	clear: both;
}

img[src*="_micro"] {min-width: inherit; max-width: inherit;} /* So _micro images don't size smaller when used in narrow tables/pages, like the "Words on Art" page. The _micro images are small enough already. */

dl.new_content dd {margin-top: 1em;}
dl.new_content dd img[src*="_micro"] {padding: 0 .5em 0 0;}

dl.translation dt {margin-bottom: 0;}
dl.translation dd {margin-top: 0;}

dt {margin: 1em 0 0; padding: 0;}
dd {margin: 0 0 1em 2em; padding: 0;}
dd+dd {margin: -.7em 0 1em 2em; padding: 0;}

ul.spaced li,
ol.spaced li { /* To add a little space around each list item, if needed. */
	margin-top: 1em;
	margin-bottom: 1em;
}

ul.nobullets {margin: 1em 0; padding: 0;}

ul.nobullets > li {
	list-style: none;
	margin: 1em 0 1em 2em;
	padding: 0;
}

ul.nobullets.outdent > li {
	margin-left: 3em;
	text-indent: -1.5em;
}

ul.specifications {
	margin: .75em 0 1em 2em;
	padding: 0;
}
ul.specifications.textcenter {margin-left: 0;} /* For example, on the index.html page. */


table.originals_prints_cards ul.specifications {
	margin-top: .25em;
	margin-bottom: 0;
}

ul.specifications li {
	margin: 0;
	padding: 0;
	font-size: .8rem;
	list-style: none;
}

body * div.close-up { /* Intended for large images that would otherwise extend beyond the page area. Shows a portion of the image at full size with a scroll bar to view the rest of the image. Each div.close-up should only hold one hi-resolution image, no text. */
	overflow: auto;
	max-width: 100%;
	max-height: 600px;
	margin: 0 -4px;
	padding: 4px;
	white-space: nowrap;
}

div.close-up > a::after { /* Makes div.close-up slightly wider so that :focus outline around anchor/image is not clipped by div.close-up. */
	content: "\00A0"; /* 0x00A0 = (Unicode) no-break space character. */
	display: inline-block;
}

div.close-up > a:focus {outline: none;}

p.attribution { /* For a hanging indent paragraph started with an em dash and a space. */
	text-indent: -1.2em;
	padding: 0 0 0 3.2em;
}

table {
	border: none; /* Only define borders around cells, not the table. Then a cell that's at the outside edge of a table with its borders turned off doesn't get a border drawn from a table border. */
	border-spacing: 0;
	border-collapse: collapse;
}

table.noborder, table.noborder th, table.noborder td {border: none;}

table.tablecenter { /* To center a table horizontally on the page. */
	margin: 1em auto;
}

table.cellpadding0 td {padding: 0 .5em 0 0;}

tr > th {vertical-align: middle;}
tr > td, [valign="top"] {vertical-align: top;}

/* Though td[align="..."] is deprecated, FWIW I left the code there for viewing without the stylesheet, and also applied class="textleft | textcenter | textright" for viewing with the stylesheet, in case these deprecated tags are no longer recognized by browsers later on. */
td[align="left"] {text-align: left;}
td[align="center"] {text-align: center;}
td[align="right"] {text-align: right;}

th {font-weight: normal; font-style: italic;}

td, th {
	border: 1px solid #999;
	padding: .3em .5em .4em;
	page-break-inside: avoid;
}

.larger_slightly {font-size: 1.1em;}

.texthighlighter {background: #ff9; padding: 0 0 0 .1em;} /* padding adds a little color to the start/left of the first letter, but this wasn't done for the end/right-hand side as it exaggerates spacing of any following punctuation. */
.textleft {text-align: left;}
.textcenter {text-align: center;}
.textright {text-align: right;}

.nowrap {white-space: nowrap;}

div.sidebar {
	float: right;
	width: 42%;
	padding: 0 1em 0 1.2em;
	margin: 0 0 .5em 1em;
	background: #fff;
	border: 1px solid #ccc1ad;
	border-radius: .3em;
}

.imgleft /* Use with the IMG tag. */
{float: left; margin: 1em 1em 1em 0;}

.imgright /* Use with the IMG tag. */
{float: right; margin: 1em 0 1em 1em;}

.top0 {margin-top: 0;} /* Add to a floated image, for example <img src="..." alt="" class="imgright top0">, when it's the first item in a paragraph and doesn't need extra space above it. */
.bottom0 {margin-bottom: 0;}

.clearleft {clear: left;}
.clearright {clear: right;}
.clearboth {clear: both;}



/* ========== IMAGES, PART 2 OF 2, HANDHELD (small mobile) DEVICES | SHOWING FULL-SIZE IMAGES WHILE HIDING DETAIL IMAGE ICONS and other adjustments ========== */
/* This section displays full-size images by default for hand-held devices (without a cursor) instead of viewing full-size images by hovering a cursor over a detail image, since handheld devices don't generally have a hover function. */

/*
only screen and (min-width: 1281px) Desktops
only screen and (min-width: 1025px) and (max-width: 1280px) Laptops, Desktops
only screen and (min-width: 768px) and (max-width: 1024px) Tablets, iPads
only screen and (min-width: 481px) and (max-width: 767px) Low Resolution Tablets
only screen and (min-width: 320px) and (max-width: 480px) Most of the Smartphones
*/

@media
print,
only screen and (max-width: 700px),
only screen and (max-device-width: 1170px),
handheld {
/* Use pixel measurements here. Don't use em units because the layout will change as the page is 'zoomed' in or out. */

html {text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none;} /* Keeps text from zooming on mobile devices when changing from portrait to landscape view. */

body {margin: 1.5em 3em 2em;}

h1 {margin-top: 1.25em;}

a.screen_reader_only:focus {left: 7em; right: 7em; margin: auto; text-align: center;}

.gallery a:focus img {outline: none;} /* The formatting for mobile devices doesn't need :focus outlines created for both anchors and their images because the images are not display:absolute away from the anchor. */

img {
	max-width: 100%;
	height: auto;
}

div.close-up a img {max-width: none; min-width: auto;}

div.close-up > a:focus img {
	outline: 2px solid rgba(0, 51, 255, .5);
	outline-offset: 1px;
}

blockquote {margin: 1em 1em; padding: 0;}

dl.new_content dd img[src*="_micro"] {padding: .5em 0; display: block;}

p.mobile_header {
	display: block;
	text-align: center;
	margin: 0 3.5em;
	font-style: italic;
	font-size: 1.05em;
	letter-spacing: .1em;
	word-spacing: .1em;
}

p.navbarhide, p.navbarshow {display: block;}

p.navbarshow {
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	padding: 1.25em 1.1em;
	text-align: center;
}

body.Home p.navbarshow {padding-top: .2em;} /* Adjusted spacing to include the word "Menu" on the Home page. */

p.navbarshow img[src$="navbarshow.PNG"] {
	width: 1.4em;
	padding: .3em .4em .7em;
}

p.navbarhide {text-align: right;}

p.navbarhide img[src$="navbarhide.PNG"] {
	width: .8em;
	height: .8em;
	padding: .5em;
	margin: -.5em -1.2em -1em 0;
}

#navbar {
	display: block;
	position: absolute;
	width: auto;
	height: auto;
	top: 0;
	right: auto;
	bottom: auto;
	left: 0;
	padding: 0 2em 1em;
	overflow: auto;
	color: #876;
	background: #f5ebd9;
	border: solid 1px #aaa;
	border-top: none;
	border-left: none;
	border-radius: 0 0 1em 0;
	box-shadow: rgba(0, 0, 0, .2) 0 .2em 1em;
	transition: all 1.5s ease-in-out;
}

#navbar:not(:target) {top: -150em;}

#navbar ul li {margin: 1.2em 0;} /* Separates navbar items a bit more for easy selection on touchscreen devices. */

div.runningtext, div#footer {max-width: none;} /* From the === PAGE LAYOUT AREAS === */

/* First, some code for the previous section on rollover images is reversed. */

.gallery dt {
	margin: 3em 0 .5em;
	clear: both;
	text-align: center;
}

.gallery dt::before {
	display: inline;
	visibility: hidden;
	content: "";
	margin: 0;
}

.gallery dd {padding: 0; margin: .5em 0;}

.gallery dd blockquote {text-align: left;}

.gallery dd,
.gallery dd ul.specifications {text-align: center;}
.gallery dd ul ul.specifications {text-align: left; margin-left: 2em;} /* For example, when .specifications are a subordinate bullet list, such as the three images of the St. Paul's Triptych on the St. Paul's Gallery page, the left justified format is preferred. */
.gallery dd ul.specifications {margin: 1em 0;}

/* The following two items maintain the left justified and indented text of .specifications in a table format, for example, in the St. Pauls triptych. */
.gallery dd table ul.specifications li {text-align: left;}
.gallery dd table ul.specifications {
	margin: 1em 0 1em 2em;
	padding: 0;
}

.mobile-center {text-align: center;}
.mobile-center.specifications,
.textcenter.specifications {margin-left: 0;}

h2 {text-align: center;}

.gallery dt a.imgdetail {
	float: none;
	display: inline-block;
}

/* *** */

/* Now define hover/focus AND non-hover/non-focus(blur) states. */

.gallery a:focus img.imgfull,
.gallery a:hover img.imgfull,
.gallery a img.imgfull {
	display: inline-block;
	position: static;
	vertical-align: middle;
	padding: 0;
	margin: 0 0 .4em 0; /* The .4em adds a little breathing space between images and their captions, if any, for example, on the "Words on Art" pages. */
	z-index: auto;
	width: auto;
	height: auto;
	opacity: 1;
	box-shadow: none;
	border-radius: 0;
}

/* Now define hover AND non-hover/non-focus(blur) states. */

table.originals_prints_cards td a:focus.imgmicro,
table.originals_prints_cards td:hover a.imgmicro,
table.originals_prints_cards td a.imgmicro {
	display: inline-block;
	position: static;
	padding: .5em 0; /* Adds a little breathing space between text and images. */
	margin: 0;
	padding: .5em 0;
	background: none;
	z-index: auto;
	opacity: 1;
}

table.originals_prints_cards td a.imgmicro img,
table.originals_prints_cards td a.imgmicro img {width: auto; height: auto;}

table.originals_prints_cards td a:focus.imgmicro img,
table.originals_prints_cards td:hover a.imgmicro img,
table.originals_prints_cards td a:focus.imgmicro[href$="St_Pauls_Triptych_1of3.PNG"] img,
table.originals_prints_cards td:hover a.imgmicro[href$="St_Pauls_Triptych_1of3.PNG"] img,
table.originals_prints_cards td a:focus.imgmicro[href$="St_Pauls_Triptych_2of3.PNG"] img,
table.originals_prints_cards td:hover a.imgmicro[href$="St_Pauls_Triptych_2of3.PNG"] img,
table.originals_prints_cards td a:focus.imgmicro[href$="St_Pauls_Triptych_3of3.PNG"] img,
table.originals_prints_cards td:hover a.imgmicro[href$="St_Pauls_Triptych_3of3.PNG"] img {
	display: inline-block;
	position: static;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	background: rgb(246, 233, 209);
}

span.gallery {display: block; margin: .5em 0; width: auto;}
span.floatright, span.floatleft {float: none;}
body.News span.floatleft {float: left;}

div.imgandcaption_left.mobilekeepsfloat {float: left; margin: .25em 1.5em 1em 0;}
div.imgandcaption_right.mobilekeepsfloat {float: right; margin: .25em 0 1em 1.5em;}

div.imgandcaption_left,
div.imgandcaption_right {
	float: none;
	margin: 2.5em auto;
}

/* .mobilewidth###px should match full size image widtn. This limits caption text to the same width as its image. */
.mobilewidth400px {width: 400px; height: auto; max-width: 100%;}
.mobilewidth450px {width: 450px; height: auto; max-width: 100%;}
.mobilewidth464px {width: 464px; height: auto; max-width: 100%;}
.mobilewidth500px {width: 500px; height: auto; max-width: 100%;}
.mobilewidth528px {width: 528px; height: auto; max-width: 100%;}
.mobilewidth600px {width: 600px; height: auto; max-width: 100%;}
.mobilewidth727px {width: 727px; height: auto; max-width: 100%;}
.mobilewidth837px {width: 837px; height: auto; max-width: 100%;}

/* Second, the detail images are hidden while keeping a.imgdetail and its full-size image. */

.gallery a.imgdetail img[src*="_detail."], .gallery a.imgdetail img[src*="_detail2."] {display: none;}
.gallery img.imgdetail {display: none;}

/* Third, allow title attributes of anchors (in "Words on Art" pages, for example) to show in text, since there's no cursor to hover and reveal them. */

a.reference::after {content: " [" attr(title) "]"; font-size: 85%;}

/* ... and a modification to the table format for the "Originals, Prints, & Cards" page. With the images now included within the table cells, the design seems a little better (imho) if some cell borders are eliminated (in this case, some vertical borders). */

table.originals_prints_cards tbody tr th {border: 1px solid #999;}
table.originals_prints_cards tbody tr:first-child th {border: none;}
table.originals_prints_cards colgroup + colgroup {border-left: 1px solid #999;} /* Draws vertical rules within the table, but not outside edges. */
table.originals_prints_cards tbody tr td {border: none;} /* Clears table td borders of previous formatting. */
table.originals_prints_cards tbody tr td {border-bottom: 1px solid #999;}
table.originals_prints_cards tbody tr td:first-child {border-left: 1px solid #999;} /* Cell at the left edge of the table. */
table.originals_prints_cards tbody tr td:last-child {border-right: 1px solid #999;} /* Cell at the right edge of the table. */

/* ... and to space out some links for ease of selection ... */

ul.spaced_mobile_only li,
ol.spaced_mobile_only li { /* To add a little space around a list of links, so they're easier to select on handheld devices. */
	margin-top: 1em;
	margin-bottom: 1em;
}

} /* end @media print, only screen and (max-width: 700px) ... */



@media print, only screen and (max-width: 500px) { /* Use pixel measurements here. Don't use em units because the layout will change as the page is 'zoomed' in or out. */

html {text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none;} /* Keeps text from zooming on mobile devices when changing from portrait to landscape view. */

body {margin: 1.5em 1.5em;}

} /* end @media print, only screen and (max-width: 500px) ... */



/* ========== PRINT-ONLY RULES ========== */

@media print {

body {
	background: #fff;
	color: #000;
	margin: 0;
	font-size: 11pt;
}

ul, ol, dd {page-break-before: avoid;}

h1, h2, h3, dt {page-break-after: avoid;}

h1 {margin-top: 0;}

p.navbarshow {display: none;}

td, th {page-break-inside: avoid;}

#navbar, #navbar:not(:target) {display: none;}

table.originals_prints_cards tbody tr th.nav_table_sections {width: 0; padding: 0; border: none;}
table.originals_prints_cards tbody tr th.nav_table_sections ul {display: none;}

} /* end @media print */



/* ========== PRINT PAGINATION ========== */

@page {orphans: 2; widows: 2;

} /* end @page */