website stylesheet, 2018-10-14

website stylesheet, 2018-10-14

Basic styles.

Additional features for any HTML page.

Adjustments for different shapes and sizes of views.

# > colors

Background, text, and other colors defined together to ensure legibility.

*/
html
{background-color:#000;color:#cba}

body
{background-color:#520;color:#cba}

:link
,:visited
{color:#cc0}

:focus
{outline-color:#adf}

#page-title
{background-color:#adf;color:#520}

h1,h2,h3,h4
{color:#adf}

hr
{border-color:#adf}

blockquote
{border-color:#adf}

code
,kbd
,samp
,var
{background-color:#000;color:#cba}
/*

# > colors for navigation

*/
#site-link a
{background-color:#adf;color:#520}
/*

# > colors for named locations and their fragment links

*/
em.\#
{color:rgba(0,0,0,0)
;border-color:#adf}

h1>:target~em.\#
,h2>:target~em.\#
,h3>:target~em.\#
,h4>:target~em.\#
,.\#-vertical-list :target~em.\#
{background-color:#adf;color:#520}

.sample-list :target~em.\#
{background-color:#adf;color:#ccc}

[href].\#:focus~em.\#
,[href].\#:hover~em.\#
/*Hide the text.*/
{background-color:#cba;background-color:rgba(85,0,43,.25)
;color:#cba;color:rgba(0,0,0,0)
;border-color:#adf;border-color:rgba(85,0,43,.75)}
/*

# > colors for printing

*/
@media print
{

*
{background-color:transparent!important;color:black!important}

em.\#
{border-color:transparent}

hr
{border-color:black}

blockquote
{border-color:#000}

}
/*

# > everything else

Styles for placement, borders, spacing, etc. But never colors.

# > general content

Changing the font size from the web browser default affects the @media queries for responsive layouts. Unfortunately, only Safari treats "rem" properly by using the font size set for the <html> element, thereby responding properly during view resizing. Other web browsers treat "em" and "rem" the same for @media queries thereby preventing even a personal stylesheet from overriding the font size in the inaccessible user agent stylesheets of web browsers.

Therefore, leave at the default size and trust the person viewing the page to use the "View" menu, zooming, or font sizing buttons when desired. Some web browsers even save that setting per website.

*/
html
{font-size:1em
;line-height:1.2
;padding:0
;margin:0
;font-family:
-apple-system,"Avenir Next"/*Mac OS X+*/
,"Segoe UI",SegoeUI,"Lucida Sans"/*MS Windows+*/
,"Helvetica Neue"/*Mac OS X+*/
,"Arial","Helvetica",sans-serif/*any OS*/}

body
{max-width:44em/*text book width, or 2 columns*/
;padding:0 0 1em
;margin:0}

:focus
{outline-style:double
;outline-width:3px}

[href^="#"]
/*fragment links to locations within same page*/
{border-bottom-style:dashed;border-bottom-width:.15em
;text-decoration:none}

#page-title
/*left spacing matches body font-size*/
{font-size:1.25em;line-height:1.2
;padding:.4em .8em .2em;padding:.5rem 1rem .2em
;margin:0 0 1.33em;margin-bottom:2rem
;text-align:left}
/*

# > headings

*/
h1,h2,h3,h4
/*Positioned relative as a potential ancestor for named locations.*/
{position:relative
;clear:both
;font-weight:500}

body>h1
,body>h2
,body>h3
,body>h4
/*flush with left side is okay when without rem support*/
{margin-right:1rem;margin-left:1rem}

h1
{margin-top:2em;margin-bottom:.5em
;line-height:1
;text-align:center}

h1::before
{position:absolute;top:-.4em;right:-1rem;left:-1rem
;border-top-style:solid;border-width:.2em
;content:""}

h2
,h3
{padding-top:.1em;padding-bottom:.1em
;border-top-style:solid
;margin-top:2em;margin-bottom:.5em}

h2
{border-width:.2em
;font-variant:small-caps}

h2:first-child
{margin-top:0}

h3
{border-width:.1em}

h4
{margin-top:2em;margin-bottom:1em}

h1+h2
,h2+h3
,h2+h4
,h3+h4
{margin-top:1em}
/*

# > paragraphs

Paragraphs are no wider than the text in a book. Maintain two spaces after a sentence period and the occasional newline. Adjust superscript and subscript in order to prevent web browsers skewing the line spacing.

*/
p
{max-width:42em;margin:0;white-space:pre-wrap}
*+p
{margin-top:1em}

body>p
{margin-right:1em;margin-left:1em}

.phrase-br
/*Encapsulates a phrase, delaying its words from breaking apart.*/
{display:inline-block/*¡interferes with link styles!*/}

sup
/*Eliminate line spacing issues by positioning from the baseline.*/
{font-size:.8em;position:relative;bottom:.4em;vertical-align:baseline}

sub
/*Eliminate line spacing issues by positioning from the baseline.*/
{font-size:.8em;position:relative;bottom:-.2em;vertical-align:baseline}

pre
{margin:0
;font-family:Verdana,"PT Mono","Lucida Console","Courier",Monaco,monospace}

body>pre
{margin:0 1em}

blockquote
{padding:.25em 0 .25em .5em
;border-left-style:solid;border-left-width:.2em
;margin-right:0;margin-left:1em}

body>blockquote
{margin-right:1em;margin-left:2em}

code
,kbd
,var
{font-size:.8em
;padding:0 .1em
;outline-style:solid;outline-width:.1em
;margin-left:.1em;margin-right:.1em
;line-height:1
;font-family:Verdana,"PT Mono","Lucida Console","Courier",Monaco,monospace
;white-space:pre}

samp
{font-size:.8em
;font-family:"PT Mono","Lucida Console","Courier",Monaco,monospace}

tt
{font-size:.9em
;font-family:"PT Mono","Lucida Console","Courier",Monaco,monospace}

blockquote>code
{font-size:.9em
;white-space:normal}
/*

# > lists and lines

*/
dl
{margin:0}
*+dl
{margin-top:1em}

body>dl
{margin-right:1em;margin-left:1em}

dd+dt
{margin-top:.25em}

dd
{margin-left:1em}
dd+dd
{margin-top:.5em}

body>ol
{padding-left:1.5em;margin:1em 1em 0}

ol>li+li
{margin-top:1em}

ul
{padding-left:1.2em;margin:0}

body>ul
{margin-right:1em;margin-left:1em}

hr
{clear:both
;padding:0
;border-style:solid;border-width:.15em 0 0
;margin:.5em 0}

hr+p
{margin-top:.5em}
/*

# > fractions

A mixed fraction consists of a number followed by a nonbreaking space and then a mixed-fraction element with the numerator, a forward slash within a <span>, and the denominator within a <span>. The numerator and denominator are styled pretty much the same as <sup> and <sub>.

99 99/99
= 99 <span class="mixed-fraction">99</span><span>/</span><span>99</span>
= 99 99/99
*/
.fraction
,.mixed-fraction
/*the numerator*/
{font-size:.8em;position:relative;bottom:.4em
;margin-right:-.1em
;vertical-align:baseline}

.mixed-fraction
{margin-left:-0.25em}

.fraction+*
,.mixed-fraction+*
/*the forward slash*/
{font-style:italic}

.fraction+*+*
,.mixed-fraction+*+*
/*the denominator*/
{font-size:.8em;position:relative;bottom:-.2em;vertical-align:baseline}
/*

# > code-block class

*/
.code-block
{padding-bottom:1em
;margin-top:.5em;margin-bottom:.5em
;outline-style:solid;outline-width:.1em
;overflow-x:auto}

body>.code-block
{margin-right:1em;margin-left:1em}

.code-block>*
{display:inline-block
;padding:0 .2em .2em
;outline-style:none
;margin:.25em .25em 0}

.code-block>samp
{padding:.25em .25em .25em .5em
;border-left-style:solid;border-left-width:.25em}

.code-block>kbd+samp
{margin-top:0}
/*

# > navigation

A paragraph with id as "page-relations" has back-reference links for a page, returning to other pages that link to it. Always starts with "More in:", and always after all the content before the final navigation links. Links are on separate lines, each prepended with a <br> element. The link always has a relative path, never absolute.

<p id="page-relations">More in:
<br><a href="some-page.html">somewhere</a>
*/
#page-relations
{margin-top:3.5em;margin-left:1em;font-weight:600}

#page-relations>a
{display:inline-block;margin-top:.5em}

#page-relations>br
{display:none}
/*

The basic navigation for returning to the index or getting to the copyrights is always at the very end of the page. Always the same on every page, except the paths might need "../" prepended when a page is of a subdirectory. Paths are always relative.

<nav>
<p id="site-link"><a href="index.html" rel="start">begin</a></p>
</nav>
*/
#site-link
{position:absolute
;margin-top:1.5em;margin-left:0
;-webkit-text-size-adjust:none}

#site-link>a
{display:inline-block
;padding:.8em 2em 1em 1em
;border-radius:0 3em 3em 0
;margin-top:.5em
;font-weight:600}

#site-link>br
{display:none}
/*

# > named locations and their fragment links

Summary: A named location is displaced from its containing element, about the space of two lines of text beyond its top. A fragment link is displaced to the left of list items in vertical listings, and to the upper left corner of list items in horizontal listings. A named location is emphasized by displacing a separate <em> element. Classes: #; #-vertical-list; #-horizontal-list; #-sibling.

On the World Wide Web, an anchor <a> with a name in its id attribute is a named location within an HTML document. A link to a named location in an HTML document is the address to the document followed by an octothorpe "#" and then the name of the location. The "#" and named location in a link is sometimes referred to as a "fragment", and a link having a fragment as a "fragment link".

When following a fragment link, an HTML viewer (web browser) typically positions the document so the beginning of the anchor is at the very top of the view. This can give an initial impression that is the top of the document, as if there is nothing before. In contrast, typing the spacebar causes the view to scroll one full view (page) each time, as a feature of web browsers. Some web browsers will move approximately two lines worth of area at the very bottom of the view to the very top of the view, as an aid for fluidly reading text. (Though, it's inexact because it's the area that is positioned rather than the actual text.)

For a similar movement effect, always create a named location with an empty anchor element <a> and assign it the class named simply "#". It will be displaced approximately the spacing of two lines worth of text from the top of its containing element (having its position property other than "static").

<a id="a-name-of-sorts" class="#"></a>

# > fragment links

A named location is most useful when it is known, such as revealing a fragment link to it. While it is possible to make a named anchor and a fragment link as the same <a> element, they represent two different tasks and therefore are kept separate. This allows for displacing each differently. Regardless, a fragment link is classed with the same simple name "#".

A vertical listing, such as <ul> element, with the #-vertical-list class will position its list items as "relative" and position its fragment links to the left of each list item. This means the list-style property is set to "none" in order to have room for the fragment link. A horizontal listing (display:inline-block) with the #-horizontal-list class will position its fragment links in the upper left corner of list items.

A fragment link is hidden when it was inserted after its named anchor and the named anchor is current link destination. The fragment link contains the octothorpe symbol "#" as a mnemonic, because it is also used as the beginning of the fragment within the URL address of a fragment link.

<ul class="#-vertical-list">
<li>
<a id="a-name-of-sorts" class="#"></a>
<a href="#a-name-of-sorts" class="#">
#</a>
<p>

# > emphasizing named locations

Emphasis is a third task, and a third element. In order to emphasize the region around the named anchor or place a mark next to it, such as for a list item, insert after the named anchor an <em> element classed with "#" containing the single character ">". There can be many named locations in a row before a single em.# element, for multiple names of the same position or backwards compatibility with prior names. An em.# element can emphasize its containing element having its position property as anything other than "static".

While a fragment link for a named location is optional, the emphasis element would be inserted after the fragment link. In the following example the vertical listing will have an item emphasized when its named anchor is targeted by a fragment link.

<ul class="#-vertical-list">
<li>
<a id="a-name-of-sorts" class="#"></a>
<em class="#">
></em>
<p>

# > displacement techniques

A named anchor with the "#" class will be displaced according to its nearest positioned ancestor element, for example from the top of a positioned list for the non-positioned list item that has the named anchor. That would also affect the emphasis for the named anchor, for example the list for the list item would be emphasized instead of the list item itself.

The emphasis for any named anchor can be deferred to a sibling of the named anchor rather than the element containing both of them. Insert an em.# element into a #-sibling classed sibling element that is somewhere after its named anchor.

As implied, these techniques depend on the containing elements having their position property set to anything other than "static". Therefore, in the following example the named anchor will be displaced to the beginning of the list, the fragment link is displaced with respect to the paragraph sibling (within the list item itself), and the paragraph sibling is emphasized.

<ul class="#-vertical-list" style="position:relative">
<li style="position:static">
<a id="a-name-of-sorts" class="#"></a>
<p class="#-sibling"><a href="#a-name-of-sorts" class="#">
#</a><em class="#">></em>

# > styles for named locations and their fragment links

Unfortunately, simply positioning the anchor itself with its position property as "relative" does not change the targeted location in the document, even though the anchor will be moved. This is seemingly because an anchor is by default displayed as an inline element.

The obvious approach is to set a named anchor's display property to either "block" or "inline-block", and its position property as "relative". Another approach is instead to set the position of the named anchor as "absolute", and correlatively its containing element needs position set to anything other than "static".

*/
.\#-sibling
{position:relative}

.\#+p
/*No need for top margin because likely would've been first element.*/
{margin-top:0}

[id].\#
/*Named location.*/
{display:block
;position:absolute;top:-2em;top:-3rem}

[href].\#
,em.\#
/*Fragment link and emphasis.*/
{position:absolute
;font-size:.8em
;font-family:"PT Mono","Lucida Console","Courier",monospace
;line-height:1}

em.\#
/*Normally there is no emphasis.*/
{display:none
;pointer-events:none
;font-style:normal
;font-weight:bold}
/*
*/
h1>[href].\#
,h2>[href].\#
,h3>[href].\#
,h4>[href].\#
{left:-.9em;left:-1rem
;padding-top:.1em;padding-right:.2em
;border-style:dashed dashed dashed none
;border-width:1px
;text-decoration:none}

h1>:target~em.\#
,h2>:target~em.\#
,h3>:target~em.\#
,h4>:target~em.\#
{display:inline
;left:-.9em;left:-1rem
;padding-top:.1em;padding-right:.2em
;border-radius:0 1em 1em 0
;border-style:solid solid solid none
;border-width:1px}
/*
*/
ul.\#-vertical-list
{list-style:none
;padding-left:1em}

body>ul.\#-vertical-list
{margin-left:0}

.\#-vertical-list>*
{position:relative}

ul.\#-vertical-list>*+*
{margin-top:1.5em}

.\#-vertical-list ul.\#-vertical-list>:first-child
{margin-top:.5em}
.\#-vertical-list ul.\#-vertical-list>*+*
{margin-top:1em}

.\#-vertical-list [href].\#
/*Displace the fragment link to the left of the list item.*/
{top:1px;left:-1.25em
;padding-top:.1em;padding-right:.2em
;border-style:dashed dashed dashed none
;border-width:1px
;text-decoration:none}

.\#-vertical-list [href].\#:focus~em.\#
,.\#-vertical-list [href].\#:hover~em.\#
/*Highlight the list item.*/
{display:inline
;top:-.5em;right:-.5em;bottom:-.5em;left:-.5em;z-index:1
;border-radius:.5em
;border-style:solid
;border-width:.25em}

.\#-vertical-list [href].\#:focus~em.\#~*
,.\#-vertical-list [href].\#:hover~em.\#~*
/*Ensure everything after the emphasis appears on top of it.*/
{position:relative;z-index:1}

:target~[href].\#
,:target~.\#-sibling>[href].\#
/*Hide a fragment link when its named location is the current link destination.*/
{display:none}

.\#-vertical-list :target~em.\#
,.\#-vertical-list :target~.\#-sibling>em.\#
/*Show the emphasis in the same place as the fragment link was before it was hidden.*/
{display:inline
;position:absolute;top:1px;left:-1.25em
;padding:.1em .2em 0 .15em
;border-radius:0 1em 1em 0
;border-style:solid solid solid none
;border-width:1px}

ol.\#-vertical-list :target~em.\#
/*Displace the emphasis beyond numbers of an ordered list.*/
{left:-3.75em}

ol.\#-vertical-list :target~em.\#::before
/*No fallback symbol for no styles, so just decorative.*/
{content:">"}
/*
*/
.\#-horizontal-list>*
{display:inline-block
;position:relative}

.\#-horizontal-list [href].\#
/*Displace the fragment link to the upper left corner of the list item.*/
{top:0;left:0
;width:1em;height:1em
;padding:.125em 0 .125em .25em
;border-radius:0 0 1em 0
;border-style:dashed
;border-width:1px
;text-decoration:none}

.\#-horizontal-list :target~em.\#
,.\#-horizontal-list :target~.\#-sibling>em.\#
/*Emphasis for any target, perhaps within a sibling element.*/
{display:block
;top:0;left:0
;width:1em;height:1em
;padding:.125em 0 .125em .25em
;border-radius:0 0 1em 0
;border-style:solid
;border-width:1px}
/*

# > page additions

Summary: Narrow a list of items to a set of dated additions. Intended for items added some time later than the creation of the page. IDs: most-recent; additions_(hyphenated 8-digit date); page-additions. Attributes: data-additions—hyphenated 8-digit date; data-added—hyphenated 8-digit date.

A list of items can be narrowed to a set based on when they were added by hiding all items without the date of a targeted element. A message before the list is displayed indicating whether the set is the most recent additions or a set of earlier additions. A fragment link targets the most recent additions, and a link for the page itself reveals all list items again, both before the links of page relations near the bottom of the page.

Add links to new additions of a page (by their date, not as #most-recent) to an "Additions" page. These links will eventually be outdated by new additions, and will remain available there as a dated progress rather than cluttering the pages themselves.

# > preparing page additions

The fragment anchors and their dated <em> elements are first, then the list or lists, and then the links to the page additions. All three are expected on the same level, t.i. not encapsulated by other elements, however, other elements can be in between. All lists on the page are affected, and there is only one message displayed. Give a heading before a list the date of any items added to its list so the heading will be hidden/shown, too.

Elements with the following ids and attributes are before all the lists:

Optionally, a heading preceding a list of items on the same level can also have the same data-added attribute.

<h2 data-added="2017-11-05">...</h2>

The pair of anchor/<em> with the most recent date is immediately after the #most-recent fragment anchor, and any other pairs are later. The message comes from this stylesheet, with the date provided by the data-additions attribute from the page.

A page with a #page-additions element has the styles for its own dates, and reveals list items matching the data-added attribute. In the <style> element for the page are styles for counting the most recent items by date, and for hide/reveal of list items by date.

Here's the basic template for the styles in a page:

[data-added="2017-11-05"]/*most recent date*/
{counter-increment:list-items most-recent}

#most-recent:target~*>[data-added="2017-11-05"]/*most recent date*/
,#additions_2017-11-05:target~*>[data-added="2017-11-05"]
,#additions_2017-11-01:target~*>[data-added="2017-11-01"]
{position:relative;visibility:visible}

When adding new items, update the most recent date for the counter, update the most recent date for hide/reveal, and add a new selector for hide/reveal for the date.

The #page-additions element is a paragraph at the bottom of the page of lists, before the #page-relations element and navigation. It has a link for showing most recent additions (with the most recent date in its title) followed by a link for viewing all items.

<p><a href="#most-recent" title="Most recent additions, 2017-11-05"></a><br><a href="name-of-this-page.html" title="View all"></a>

Both links are empty because this is only a feature and might be unavailable in an HTML viewer. The links have titles for identifying their purpose on the off chance they are discovered anyway, and are also used from CSS as the text for the links.

# > notes about page additions

CSS counters will not work for elements with the property display:none, but they do work for displayed elements with the property visibility:hidden. The latter approach allows for a total count and a subcount for the "Most recent additions" link when an earlier set of additions is viewed. This is also important because tabbing to each link will conveniently skip hidden links, and hidden list items might have links.

# > styles for page additions

*/
#most-recent
,[id^="additions_"]
/*Position anchors at top of page.*/
{position:absolute;top:0}

[data-additions]
/*Nuke them from space.  It's the only way to be sure.*/
{display:none}
/*

Show date message in the data-additions element for the targeted set.

*/
#most-recent:target+*+[data-additions]
,:target+[data-additions]
{display:block;margin-top:1em;margin-right:.5em;margin-left:.5em}

:target+[data-additions]:before
{content:"Added on "attr(data-additions)"."}

#most-recent:target+*+[data-additions]:before
,#most-recent+:target+[data-additions]:before
{content:"Most recent additions as of "attr(data-additions)"."}
/*

Count all list items; hide all list items when a set is targeted. The CSS for counting and revealing a set for a page is in the page itself.

Note: While all list items on the page are affected, only the #-vertical-list lists are counted. If ever other lists are included on pages, then evaluate that new circumstance, maybe for a new stylesheet.

*/
body
{counter-reset:list-items most-recent}

.\#-vertical-list>*
,.\#-horizontal-list>*
{counter-increment:list-items}

.\#-vertical-list ul.\#-vertical-list>:first-child
/*skip counting the first list item in order to offset the list item containing it*/
{counter-increment:none}

#most-recent:target~*>li
,[id^="additions_"]:target~*>li
/*Move all list items out of the view when any set is targeted.
Also hide them in order to prevent selecting their links with tab selection.*/
{position:absolute;bottom:100%
;visibility:hidden}

/*Also hide headers.  Styles for revealing them are within the pages.*/
#most-recent:target~h2,[id^="additions_"]:target~h2
,#most-recent:target~h3,[id^="additions_"]:target~h3
,#most-recent:target~h4,[id^="additions_"]:target~h4
{display:none}
/*

Reveal/hide links in #page-additions element.

*/
#page-additions
{margin-top:3.5em;margin-left:1em
;white-space:normal
;font-weight:600}


/*Internet Explorer 8 (IE8) is without the :target selector for CSS.  IE8 does have @media, but not queries.  Prevent showing the links by using a @media with the innocuous query "min-width:0".*/
@media (min-width:0)
{
[href="#most-recent"]:before
/*create message for the link to most recent additions*/
{content:attr(title)" ("counter(most-recent)" of "counter(list-items)")"}
}


#most-recent:target~#page-additions>[href="#most-recent"]
,#most-recent:target~#page-additions>br
,#most-recent+:target~#page-additions>[href="#most-recent"]
,#most-recent+:target~#page-additions>br
/*Hide link to most recent additions when its set is targeted either as most recent or by its date.
Also eliminate the blank line between the links.*/
{display:none}

#page-additions>[title="View all"]:before
/*text for the link to view all items*/
{content:attr(title)}

#page-additions>[title="View all"]
/*normally the "View all" link is unnecessary*/
{display:none}

#most-recent:target~#page-additions>[title="View all"]
,[id^="additions_"]:target~#page-additions>[title="View all"]
/*reveal "View all" link when any set is targeted*/
{display:inline-block}

#most-recent+*~[id^="additions_"]:target~#page-additions>[title="View all"]
/*Extra space when most recent link is also shown.*/
{margin-top:1em}
/*

# > flexible page width

First, modify the defaults for the most minimum width, essentially for a single column of text.

*/
@media screen and (min-width:0)
{

#page-title
{font-size:1em
;padding-top:.25rem
;padding-right:.5rem
;padding-left:.5rem}

body>h1
,body>h2
,body>h3
,body>h4
{margin-right:.5rem;margin-left:.5rem}

body>p
,body>dl
,body>ul
{margin-right:.5em;margin-left:.5em}

body>blockquote
{margin-right:.5em;margin-left:1em}

body>.code-block
{margin-right:.5em;margin-left:.5em}

[id].\#
/*Named location.*/
{position:absolute;top:-1em;top:-1rem}

#page-additions
,#page-relations
{margin-left:.5rem}

#site-link>a
{padding-left:.5rem}

}
/*

Full width for text.

*/
@media screen and (min-width:43em)
{

#page-title
{padding-right:1rem;padding-left:1rem;text-align:left}

#most-recent:target+*+*
,[id^="additions_"]:target+*
{margin-right:1em;margin-left:1em}

body>h1
,body>h2
,body>h3
,body>h4
{margin-right:1rem;margin-left:1rem}

body>p
,body>dl
,body>ul
{margin-right:1em;margin-left:1em}

body>blockquote
{margin-right:1em;margin-left:2em}

body>.code-block
{margin-right:1em;margin-left:1em}

#page-additions
,#page-relations
{margin-left:1em}

#site-link>a
{padding-left:1em}

}
/*

Minimum width and height for a larger page title.

*/
@media screen and (min-height:36em) and (min-width:42em)
{

#page-title
{font-size:1.25em}

}
/*

"position:sticky" support for page title, except for single image pages because they are for full view of the image. Position named locations beyond twice the height of page title because the page title might wrap in very narrow views.

*/
@media screen and (min-height:27em)
{

#page-title
{position:-webkit-sticky;position:sticky
;top:0
;z-index:1/*important when other elements are positioned on page*/}

.single-image #page-title
{position:static}

[id].\#
/*Positioned a little more than double typical height of #page-title.*/
{position:absolute;top:-2em;top:-3rem}

}
/*

# > printing

*/
@media print
{

body
{font-size:14px;line-height:1.2;padding:0}

body>h1
,body>h2
,body>h3
,body>h4
,body>p
,body>dl
,body>ul
{margin-right:0;margin-left:0}

#page-title
{font-size:1.5em;padding:0}

h2
{font-size:1.3em}
/*
*/
#page-additions
,#page-relations
{margin-left:0}

#site-link
{position:static;margin-top:1em}

#site-link>a
{padding:0}

#site-link [rel*=start]:after
{content:" at http://l8l.info"}

}
/*

More in:
Stylesheet stylesheet