body>header {
	margin: -13pt -13pt 1em -13pt;
	padding: 0;
	position: relative;
	border-bottom: solid #e2e2e2 1px;
}
section.legalnotice {
	font-size: 0.85em;
}

body.home>header {
	background: transparent;
	color: #e2e2e2;
	border-bottom: none;
}

body.book>header .global, body.index>header .global, body.home>header .global {
	color: #fff;
}

body.index>header, body.home>header {
	color: #fff;
}

header, .education header, .collection header, .developers header, .tech header, .faq header, .book header, .tech-tools header, .tech-guides header {
	color: #fff;
	border-bottom: 0;
}
body.home>header h1 {
	top: 190px;
}
body>header h1, body.index>header h1, .education header h1, .collection header h1, .developers header h1, .tech header h1, .faq header h1 {
	position: absolute;
	left: 0;
	right: 0;
	top: 250px;
	margin: 0 auto !important;
	color: #fff;
}
@media screen and (max-width: 767px) {
	body>header h1, body.index>header h1, body.home>header h1, .education header h1, .collection header h1, .developers header h1, .tech header h1, .faq header h1 {
		top: 170px;
		font-size: 25px;
	}
}

<para>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</para>

<para>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</para>

<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>

<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>

html {
	background-color: #fff;
	color: #000;
}
body {
	background: #fff;
	font-family: 'Roboto', 'Helvetica', 'Helvetica Neue', sans-serif;
	font-weight: 300;
	font-size: 13pt;
	margin: 0;
	padding: 13pt;
}
p {
	margin: 1em 0;
	line-height: 1.4;
}
section {
	clear: left;
}
article>section {
	margin: 1em 0;
	border-top: solid #e2e2e2 0.1em;
}
body>section {
	margin: 1em 0;
	border-top: solid #e2e2e2 0.1em;
}
body>header+section, header+article > section:first-child {
	border-top: none transparent 0;
}
body > section, body > article, body > nav {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 960px;
}

html {
	background: inherit;
}
body {
	font-size: 11pt;
	margin: 1em 1cm;
	box-shadow: none;
}
.keep-together, summary {
	page-break-inside: avoid;
}
article>section, body>section {
	page-break-after: always;
	border-top: none;
	border-bottom: none;
}
article>section:last-child {
	page-break-after: avoid;
}
.screen-only {
	display: none;
}
p, li, dt, dd, tr {
	page-break-inside: avoid;
}
.refentry>header, .refentry>section, .refentry>article section {
	page-break-after: inherit !important;
}

<info>
	<title>First-level: Gotham Rounded Light (300) 3em</title>
	<subtitle>Subhead: Gotham Rounded Book (400) 1.875em</subtitle>
</info>
<chapter>
	<title>Second-level: Gotham Rounded Book (400) 1.875em</title>
	<subtitle>Subhead: Gotham Rounded Medium (500) 1.125em</subtitle>
</chapter>

<header>
	<h1>First-level: Gotham Rounded Light (300) 3em</h1>
	<h2>Subhead: Gotham Rounded Book (400) 1.875em</h2>
</header>
<article>
	<section>
		<h1>Second-level: Gotham Rounded Book (400) 1.875em</h1>
		<h2>Subhead: Gotham Rounded Medium (500) 1.125em</h2>
	</section>
</article>

h1, h2, h3, h4, h5, h6 {
	font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Gotham Rounded A', 'Gotham Rounded B', 'Gotham Rounded', sans-serif;
	font-style: normal;
	padding: 0;
	margin: 13pt 0;
	line-height: 1.2;
}
h2, h3, h4, h5, h6 {
	color: #636363;
}
h1 {
	font-size: 3em;
	font-weight: 300;
}
h2, section h1, body>nav h1 {
	font-size: 1.875em;
	font-weight: 400;
}
h3, section section h1, section h2 {
	font-size: 1.125em;
	font-weight: 500;
}
h4, section section section h1, section section h2, section h3 {
	font-size: 0.875em;
	font-weight: 700;
}
h5, h6, section section section section h1, section section section h2, section section h3, section h4 {
	font-size: 0.75em;
	font-weight: 700;
}
h5, h6, section section section section section h1, section section section section section h2, section section section section section h3, section section section section section h4  {
	text-transform: uppercase;
}

A common set of rules used for both ordered and un-ordered lists is shown below:

ol, ul, dl {
	margin: 1em 0;
}
ol ol, ul ul, ol ul, ul ol {
	margin: 0;
}
ol, ul {
	padding: 0 0 0 1.5em;
}
li {
	margin: 0.25em 0;
	position: relative;
	line-height: 1.4;
}
li p {
	margin: 0.25em 0;
}
li>*:first-child {
	margin-top: 0;
}
li>*:last-child {
	margin-bottom: 0;
}

Explicit horizontal rules are not supported in DocBook documents.

Horizontal rules are marked up using the <hr> element.

<hr>

hr {
	border: none;
	outline: none;
	border-bottom: solid #666666 0.1em;
	margin: 1em 0;
}

Code blocks are marked up as a <programlisting> element. The language attribute is used to indicate the language or syntax in use.

<programlisting language="c">/* The canonical sample program */

#include &lt;<filename class="headerfile">stdio.h</filename>&gt;

<type>int</type>
<function>main</function>(<type>int</type> <parameter>argc</parameter>, <type>char **</type><parameter>argv</parameter>)
{
    (<type>void</type>) <parameter>argc</parameter>;
    (<type>void</type>) <parameter>argv</parameter>;

    <function>puts</function>(<literal>"hello, world."</literal>);

    return <literal>0</literal>;
}
</programlisting>

Output blocks are marked up as a <screen> element.

<screen><prompt>sysop@host-10-47-63-1:~ $</prompt> <userinput>sudo apt-get install emacs23-nox</userinput>
<prompt>[sudo] password for sysop:</prompt> <userinput>[your password]</userinput>
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following extra packages will be installed:
  dbus emacs23-bin-common emacs23-common emacsen-common libasound2 libdbus-1-3
  libgpm2 liblockfile-bin liblockfile1 libsystemd-login0
Suggested packages:
  dbus-x11 emacs23-el emacs23-common-non-dfsg libasound2-plugins gpm
The following NEW packages will be installed:
  dbus emacs23-bin-common emacs23-common emacs23-nox emacsen-common libasound2
  libdbus-1-3 libgpm2 liblockfile-bin liblockfile1 libsystemd-login0
0 upgraded, 11 newly installed, 0 to remove and 4 not upgraded.
Need to get 23.2 MB of archives.
After this operation, 75.9 MB of additional disk space will be used.
<prompt>Do you want to continue [Y/n]?</prompt> <userinput>y</userinput></screen>

Code blocks are marked up as a <pre> element with a code class applied, containing a <code> element. A class should also be applied to the <pre> element indicating the language or syntax in use; classes applied to individual <span> elements within the block may be used for syntax highlighting.

The code sample above was produced with the following HTML:

<pre class="c code"><code><span class="comment">/* The canonical sample program */</span>

<span class="preproc">#include &lt;stdio.h&gt;</span>

<span class="type">int</span>
<span class="ident">main</span>(<span class="type">int</span> <span class="param">argc</span>, <span class="type">char</span> **<span class="param">argv</span>)
{
	(<span class="type">void</span>) <span class="param">argc</span>;
	(<span class="type">void</span>) <span class="param">argv</span>;

	<span class="ident">puts</span>(<span class="string">"hello, world."</span>);

	<span class="keyword">return</span> 0;
}
</code></pre>

Output blocks are marked up as a <pre> element with an output class applied, containing a <samp> element. Within the body of the output, the <kbd> element is used to indicate portions of user input.

The output sample above was produced with the following HTML:

<pre class="output"><samp>sysop@host-10-47-63-1:~ $ <kbd>sudo apt-get install emacs23-nox</kbd>
[sudo] password for sysop: <kbd>[your password]</kbd>
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following extra packages will be installed:
  dbus emacs23-bin-common emacs23-common emacsen-common libasound2 libdbus-1-3
  libgpm2 liblockfile-bin liblockfile1 libsystemd-login0
Suggested packages:
  dbus-x11 emacs23-el emacs23-common-non-dfsg libasound2-plugins gpm
The following NEW packages will be installed:
  dbus emacs23-bin-common emacs23-common emacs23-nox emacsen-common libasound2
  libdbus-1-3 libgpm2 liblockfile-bin liblockfile1 libsystemd-login0
0 upgraded, 11 newly installed, 0 to remove and 4 not upgraded.
Need to get 23.2 MB of archives.
After this operation, 75.9 MB of additional disk space will be used.
Do you want to continue [Y/n]? <kbd>y</kbd>
</samp></pre>

pre {
	margin: 1em;
	padding: 0.5em;
	box-shadow: 0 0 6px rgba(0,0,0,0.5);
	border-left: 0.5em solid #444;
	border-radius: 4px;
	line-height: 1.0;
	overflow: scroll;
}
pre.code {
	background: #002b36;
}
pre.output {
	background: #000;
}
pre > code, pre > samp {
	color: #93a1a1;
}
pre.output kbd {
	background: #404040;
	color: #fff;
}
pre.css.code { border-left-color: #2aa198; }
pre.html.code { border-left-color: #268bd2; }
pre.js.code { border-left-color: #2aa198; }
pre.c.code { border-left-color: #dc322f; }

pre.code .keyword { color: #268bd2; }
pre.code .type { color: #b58900; }
pre.code .ident { color: #2aa198; }
pre.code .param { font-weight: bold; }
pre.code .string, pre.code .number, pre.code .literal { color: #859900; }
pre.code .builtin { color: #cb4b16; }
pre.code .comment { color: #93a1a1; font-weight: italic; }
pre.code .preproc { color: #dc322f; font-style: italic; }

pre.code .css-el { color: #6c71c4; }

pre {
	page-break-inside: avoid;
}
pre.code, pre.output {
	box-shadow: none;
	margin: 1em 0;
	background: #fdf6e3;
	white-space: pre-wrap;
}
code {
	font-size: 8pt;
}
pre>code, pre>samp {
	color: #657b83;
}
pre.output kbd {
	background: #e6e6e6;
	color: #000;
}

<div class="table">
	<table class="numeric">
		<caption>iPlayer requests June-August 2012 (millions)</caption>
		<thead>
			<tr>
				<td colspan="2" class="empty"></td>
				<th scope="col">June</th>
				<th scope="col">July</th>
				<th scope="col">August</th>
			</tr>
		</thead>
		<tfoot>
			<th colspan="5">All figures from the <cite><a href="http://www.bbc.co.uk/mediacentre/latestnews/2012/iplayer-performance-jun-aug12.html">BBC iPlayer Performance Pack June to August 2012</a></cite></th>
		</tfoot>
		<tbody>
			<tr>
				<th class="rowgroup" scope="row" rowspan="2">By programme type</th>
				<th scope="row">TV requests</th>
				<td>125</td>
				<td>130</td>
				<td>151</td>
			</tr>
			<tr>
				<th scope="row">Radio requests</th>
				<td>42</td>
				<td>45</td>
				<td>46</td>
			</tr>
		</tbody>

		<tbody>
			<tr>
				<th class="rowgroup" scope="row" rowspan="7">By device type</th>
				<th scope="row">Internet TV</th>
				<td>3</td>
				<td>3</td>
				<td>3</td>
			</tr>
			<tr>
				<th scope="row">TV platform operators</th>
				<td>21</td>
				<td>21</td>
				<td>22</td>
			</tr>
			<tr>
				<th scope="row">Games consoles</th>
				<td>9</td>
				<td>9</td>
				<td>10</td>
			</tr>
			<tr>
				<th scope="row">Computers</th>
				<td>96</td>
				<td>103</td>
				<td>113</td>
			</tr>
			<tr>
				<th scope="row">Tablets</th>
				<td>13</td>
				<td>14</td>
				<td>17</td>
			</tr>
			<tr>
				<th scope="row">Mobile devices</th>
				<td>15</td>
				<td>17</td>
				<td>22</td>
			</tr>

			<tr>
				<th scope="row">Unknown</th>
				<td>9</td>
				<td>9</td>
				<td>10</td>
			</tr>
		</tbody>
	</table>
</div>

table, td, tr, th {
	border-collapse: collapse;
	border: solid #e6e6e6 1px;
}
div.table {
	overflow: scroll;
}
table {
	table-layout: fixed;
	margin: 1em 0;
	border-top: 0.5em solid #636363;
	caption-side: bottom;
}
td {
	vertical-align: middle;
	padding: 0.5em;
}
thead, tfoot {
	background: #e6e6e6;
}
th {
	font-weight: normal;
	vertical-align: middle;
	padding: 0.5em;
}
tbody > tr > th {
	text-align: left;
}
caption {
	font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Gotham Rounded A', 'Gotham Rounded B', 'Gotham Rounded', sans-serif;
	font-weight: normal;
	font-size: 0.85em;
	margin-bottom: 0.5em;
}
tfoot {
	font-size: 0.85em;
}
tfoot th {
	font-weight: 300;
}
table.numeric td, tbody.numeric td, tr.numeric td, td.numeric {
	text-align: right;
}

<figure>
	<img src="images/1571454020_49ccbe3a59_m.jpg" alt="Irish Rose">
	<figcaption>
		<i>Irish Rose</i><br>
		<small>Available for re-use under the terms of the <a href="http://creativecommons.org/licenses/by/2.0/" rel="license">Creative Commons Attribution 2.0 License</a> on <a href="http://www.flickr.com/photos/nevali/sets/72157605898888517">Flickr</a>.</small>
	</figcaption>
</figure>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>

<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>

figure {
	clear: right;
	float: right;
	display: inline-table;
	margin: 1em;
	padding: 0;
	border: solid #e6e6e6 1px;
	position: relative;
	page-break-inside: avoid;
	max-width: 30%;
	text-align: center;
	caption-side: bottom;
	box-sizing: border-box;
	vertical-align: top;
}
figure>*, figure img {
	display: block;
	max-width: 100%;
	box-sizing: border-box;
	width: 100%;
}
figure>figcaption {
	display: table-caption;
	width: auto; /* needed for Firefox */
	background: #e6e6e6;
	color: #000;
	margin: 0;
	font-size: 9pt;
	line-height: 1.5;
	padding: 0.25em 0.5em;
	font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Gotham Rounded A', 'Gotham Rounded B', sans-serif;
	font-weight: 300;
	text-align: center;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

figure.stacked {
	float: left;
	clear: none;
	max-width: 100%;
}
figure.full {
	float: none;
	clear: none;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
figure.half {
	float: none;
	max-width: 48%;
	margin-left: 1%;
	margin-right: 1%;
}
figure.half:nth-child(even) {
	clear: none;
}

figure.third {
	float: none;
	max-width: 30%;
	margin-left: 1%;
	margin-right: 1%;
}
figure.third:nth-child(3n+2), figure.third:nth-child(3n+3) {
	clear: none;
}

<note>
	<para>This is a <tag class="element">note</tag> call-out.</para>
</note>

<tip>
	<para>This is a <tag class="element">tip</tag> call-out.</para>
</tip>

<warning>
	<para>This is a <tag class="element">warning</tag> call-out.</para>
</warning>

<important>
	<para>This is an <tag class="element">important</tag> call-out.</para>
</important>

<caution>
	<para>This is a <tag class="element">caution</tag> call-out.</para>
</caution>

<aside class="info">
	This is an information call-out.
</aside>

<aside class="tip">
	This is a tip call-out.
</aside>

<aside class="warning">
	This is a warning call-out.
</aside>

<aside class="important">
	This is an important call-out.
</aside>

<aside class="caution">
	This is a caution call-out.
</aside>

aside.info, aside.tip, aside.important, aside.warning, aside.caution {
	margin: 1em;
	padding: 0.75em 0.5em 0.75em 3em;
	box-shadow: 0 0 6px rgba(0,0,0,0.5);
	border-left: 0.5em solid #444;
	border-radius: 4px;
	position: relative;
	line-height: 1.4;
}
aside.tip { border-left-color: #859900; }
aside.tip:before {
	background: #859900;
	content: 'i';
	font: italic normal 1em serif;
	position: absolute;
	left: 0.75em;
	top: 50%;
	width: 1.5em;
	height: 1.5em;
	margin-top: -0.75em;
	line-height: 1.5em;
	text-align: center;
	border-radius: 0.75em;
	color: #fff;
}
aside.info {
	border-left-color: #268bd2;
	overflow: scroll;
}
aside.info:before {
	background: #268bd2;
	content: 'i';
	font: italic normal 1em serif;
	position: absolute;
	left: 0.75em;
	top: 50%;
	width: 1.5em;
	height: 1.5em;
	margin-top: -0.75em;
	line-height: 1.5em;
	text-align: center;
	border-radius: 0.75em;
	color: #fff;
}
aside.warning { border-left-color: #b58900; }
aside.warning:before {
	background: #b58900;
	content: '!';
	font: normal bold 1em serif;
	position: absolute;
	left: 0.75em;
	top: 50%;
	width: 1.5em;
	height: 1.5em;
	margin-top: -0.75em;
	line-height: 1.5em;
	text-align: center;
	border-radius: 0.75em;
	color: #fff;
}
aside.important { border-left-color: #dc322f; }
aside.important:before {
	content: '!';
	font: normal normal 1em sans-serif;
	position: absolute;
	left: 0.75em;
	top: 50%;
	width: 1.5em;
	height: 1.5em;
	margin-top: -0.75em;
	line-height: 1.4em;
	text-align: center;
	background: #dc322f;
	border-radius: 0.75em;
	color: #fff;
}
aside.caution { border-left-color: #dc322f; }
aside.caution:before {
	content: '—';
	font: normal normal 1em sans-serif;
	position: absolute;
	left: 0.75em;
	top: 50%;
	width: 1.5em;
	height: 1.5em;
	margin-top: -0.75em;
	line-height: 1.4em;
	text-align: center;
	background: #dc322f;
	border-radius: 0.75em;
	color: #fff;
}
aside>p:first-child {
	margin-top: 0;
}
aside>p:last-child {
	margin-bottom: 0;
}

In DocBook documents, examples are marked up using the <example> element, optionally including a <title>.

<example>
  <title>Sample paragraph</title>
  <para>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</para>
</example>

In HTML documents, examples consist of an <aside> with a class of example. If the example has a title, then it is marked up as an <h1> with a class of example-title.

<aside class="example">
  <h1 class="example-title">Sample paragraph</h1>
  <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
</example>

aside.example {
	margin: 1em auto;
	padding: 1em;
	border: solid #e6e6e6 1px;
	position: relative;
	page-break-inside: avoid;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	_height: 1%;
	display: table;
	caption-side: bottom;
	width: 100%;
	box-sizing: border-box;
}
aside.example>h1.example-title {
	display: table-caption;
	background: #e6e6e6;
	color: #000;
	margin: 0;
	font-size: 9pt;
	line-height: 1.5;
	padding: 0.25em 0.5em;
	font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Gotham Rounded A', 'Gotham Rounded B', sans-serif;
	font-weight: 300;
	text-align: center;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}
aside.example:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
aside.example:before {
	content: 'Example';
	background: #e6e6e6;
	color: white;
	position: absolute;
	margin: -1px -1px 0 0;
	top: 0;
	right: 0;
	font-size: 9pt;
	line-height: 1.5;
	padding: 0 0.5em;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Gotham Rounded A', 'Gotham Rounded B', sans-serif;
	font-weight: 300;
	text-transform: lowercase;
}
aside.example:hover {
	border: solid #848484 1px;
}
aside.example:hover:before {
	background: #848484;
}
aside.example:hover>h1.example-title {
	background: #848484;
}

<para>
	Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
</para>
<blockquote>
	<para>
		The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.
	</para>
	<attribution><link xlink:href="http://www.blindtextgenerator.com/lorem-ipsum">Blind text generator</link>, 3rd January 2014</attribution>
</blockquote>

<p>
	Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
</p>
<blockquote>
	<p>
		The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.
	</p>
	<footer>
		<cite><a href="http://www.blindtextgenerator.com/lorem-ipsum">Blind text generator</a>, 3rd January 2014</cite>
	</footer>
</blockquote>

blockquote {
	margin: 1em 1em 1em 0;
	padding: 0 0 0 1em;
	border-left: 0.5em solid #e6e6e6;
	line-height: 1.4;
	color: #404040;
}

<p>
	Far far away, behind the word mountains<sup id="ref-mountains" class="footnote"><a href="#fn-mountains">1</a></sup>, far from the countries Vokalia and Consonantia, there live the blind texts.
</p>

<footer>
	<div class="footnotes">
		<ul>
			<li id="fn-mountains" class="footnote"><a href="#ref-mountains">1</a>: It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</li>
		</ul>
	</div>
</footer>

.footnote>a:link, .footnote>a:visited {
	color: #268bd2;
	text-decoration: none;
}
.footnote>a:hover, .footnote>a:active {
	color: #000;
}
.footnotes ul {
	list-style: none;
}

a:link {
	color: #a29f06;
}
a:visited {
	color: #ec7139;
}
a:hover, a:active {
	color: #e43744;
}

a:link, a:visited {
	color: #00f;
}
a[href^="#"] {
	color: inherit !important;
	text-decoration: inherit !important;
}

<para>Un-emphasised text</para>

<para><emphasis>Emphasised text</emphasis></para>

<para><emphasis role="strong">Strongly-emphasised text</emphasis></para>

The sample above was produced with the following HTML:

<p>Un-emphasised text</p>

<p><em>Emphasised text</em></p>

<p><strong>Strongly-emphasised text</strong></p>

em {
	font-style: italic;
}
strong {
	font-weight: 500;
}

DocBook documents use separate elements for (pronounceable) acronymns—<acronymn>—and other abbreviations—<abbrev>. There is no defined attribute or child element for conveying the expansion of the abbreviation.

<para>
	<abbrev>SSH<alt>Secure Shell</alt></abbrev> is a protocol for establishing encrypted
	connections between Internet or local network hosts. Connections may be
	established using <abbrev>IPv4<alt>Internet Protocol, version 4</alt></abbrev> or <abbrev>IPv6<alt>Internet Protocol, version 6</alt></abbrev>, and
	<abbrev>SSH</abbrev> clients and servers are available for many platforms,
	ranging from aged <abbrev>PCs</abbrev> running <acronym>DOS<alt>Microsoft's MS-DOS, and compatible equivalents, was the operating system shipped with most PCs prior to Windows 95’s release</alt></acronym>,
	through mobile phones, to supercomputers.
</para>

Abbreviations and acronyms are both marked up using the <abbr> in-line element; the title attribute is used to convey the expansion of the abbreviation.

The sample above was produced with the following HTML:

<p>
	<abbr title="Secure Shell">SSH</abbr> is a protocol for establishing encrypted
	connections between Internet or local network hosts. Connections may be
	established using <abbr title="Internet Protocol, version 4">IPv4</abbr> or
	<abbr title="Internet Protocol, version 6">IPv6</abbr>, and <abbr>SSH</abbr>
	clients and servers are available for many platforms, ranging from aged
	<abbr>PCs</abbr> running
	<abbr title="Microsoft's MS-DOS, and compatible equivalents, was the operating system shipped with most PCs prior to Windows 95’s release">DOS</abbr>,
	through mobile phones, to supercomputers.
</p>

abbr[title] {
	border-bottom: dotted #000 1px;
	cursor: help;
}

<para>
	The variable <varname>x</varname> denotes the horizontal coordinate in the plot. The formula in <code>calcplot()</code> is used to calculate the value based upon the supplied value of <varname>y</varname>: <code>return cos(2 * <varname>y</varname>);</code>
</para>
<para>
	To establish a <application>Secure Shell</application> (SSH) connection to a remote host, one types the <command>ssh</command> command at the shell prompt (typically ending with <prompt>$</prompt>). Alternatively, select the <menuchoice><shortcut><keycombo>Cmd+Shift+K</keycombo></shortcut><guimenu>Terminal</guimenu><guimenuitem>New Remote Connection…</guimenuitem></menuchoice> menu option.
</para>
<para>
	Once connected, the <phrase>Message of the Day</phrase> (stored in <filename>/etc/motd</filename>) is printed, and will typically indicate the version of the operating system running on the host you’ve connected to, such as <computeroutput>3.2.46-1 x86_64</computeroutput>.
</para>

<p>
	The variable <var>x</var> denotes the horizontal coordinate in the plot. The formula in <code>calcplot()</code> is used to calculate the value based upon the supplied value of <var>y</var>: <code>return cos(2 * <var>y</var>);</code>
</p>
<p>
	To establish a <cite>Secure Shell</cite> (SSH) connection to a remote host, one types the <kbd>ssh</kbd> command at the shell prompt (typically ending with <samp>$</samp>). Alternatively, select the <kbd><kbd><samp>Terminal</samp></kbd> → <kbd><samp>New Remote Connection…</samp></kbd></kbd> menu option.
</p>
<p>
	Once connected, the <cite>Message of the Day</cite> (stored in <code>/etc/motd</code>) is printed, and will typically indicate the version of the operating system running on the host you’ve connected to, such as <samp>3.2.46-1 x86_64</samp>.
</p>

code, samp {
	font-family: Inconsolata, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
	font-weight: normal;
}
var {
	font-family: Arapey, serif;
	font-weight: normal;
	font-size: 1em;
	font-style: italic;
	color: inherit;
}
kbd {
	font-family: inherit;
	font-weight: normal;
	font-size: 1em;
	font-style: italic;
	color: inherit;
}
code {
	color: #cb4b16;
}
samp {
	color: #586e75;
}
code var, kbd samp {
	font-family: inherit;
	color: inherit;
}
code var {
	font-weight: bold;
}