hughbris/dl.quotes.html

## dl.quotes.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ" lang="en-NZ">  <!-- brah! -->
<head>
	<title>Third-party attributed blockquote list</title>

	<style type="text/css">
		/* <![CDATA[ */
			dl.quotes {
				margin: 1em 0;
				padding: 0;
				/* border-bottom: 1px solid #999; */
			}

			dl.quotes .speech {
				margin-top: 0;
			}

			dl.quotes dt {
				clear: left;
				float: left;
				margin: 0;
				padding: 0.2em;
				/* border-top: 1px solid #999; */
				font-weight: bold;
				text-align: right;
				font-size: larger;
				width: 10%;
			}

			dl.quotes dt.even {
				float: right;
				text-align: left;
				clear: left;
			}

			dl.quotes dt,
			dl.quotes dd {
				margin-top: 1em;
			}

			dl.quotes dd {
				float: left;
				width: 83%;
				margin: 0;
				padding: 0.2em;
			}

			dl.quotes dd blockquote.speech {
				margin-left: 3em;
			}

			dl.quotes dd.even {
				float: right;
			}

			dl.quotes dd.even blockquote.speech {
				margin-left: 1em;
			}

			/* speech bubbles adapted from .. */
			/* ------------------------------------------
			PURE CSS SPEECH BUBBLES
			by Nicolas Gallagher
			- http://nicolasgallagher.com/pure-css-speech-bubbles/

			Created: 02 March 2010
			Version: 1.2 (03 March 2011)

			Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
			------------------------------------------ */
			/* THE TRIANGLE
			------------------------------------------------------------------------------------------------------------------------------- */

			.speech {
				position: relative;
				padding: 0 1.2em;
				margin: 1em 0 3em 3em;
				border: 5px solid #5a8f00;
				/* background: #fff; */
				border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
			}

			.speech.third-party {
				font-style: italic;
				border-color: #5a8f00;
			}

			.even .speech {
				margin-right: 3em;
			}

			.speech.third-party:before {
				border-color: transparent #5a8f00;
			}

			.speech:before {
				content: "";
				position: absolute;
				bottom: auto;
				left: -30px;
				border-width: 15px 30px 15px 0;
				border-style: solid;
				border-color: #5a8f00 transparent;
				display: block;
				width: 0;
				top: 10px;
			}

			.even .speech:before {
				left: auto;
				right: -30px;
				border-width: 15px 0 15px 30px;
			}

			.speech.third-party:after {
				border-color: transparent #fff;
			}

			.speech:after {
				top: 16px;
				content: "";
				position: absolute;
				bottom: auto;
				left: -21px;
				border-width: 9px 21px 9px 0;
				border-style: solid;
				border-color: #fff transparent;
				display: block;
				width: 0;
			}

			.even .speech:after {
				left: auto;
				right: -21px;
				border-width: 9px 0 9px 21px;
			}

			/* next line not needed, similar styles may be defined elsewhere in your stylesheet */
			/* ***** */		blockquote { margin-left: 3em; } p { padding: 0; } body { font: 13px/1.5 sans-serif; }	/* ***** */
		/* ]]> */
	</style>

</head>
<body>

	<dl class="quotes">
		<dt>123 corp</dt>
		<dd>
			<blockquote class="speech third-party">
				<p>Ipsum lorem is the order ofthe day, it can even conceivably be used as placeholder blockquote text. But you already knew that, you're one step ahead. I can't fool you. I don't get up early enough in the morning. Who does? What's wrong with those people? They are different, I'll give them that. Possibly human, it's debatable. Should debatable have an 'e' after the 't'?</p>
			</blockquote>
		</dd>
		<dt class="even">ABC corp</dt>
		<dd class="even">
			<blockquote class="speech third-party">
				<p>At ABC corp, we have a better policy about the way you quote us. It's complicated: ipsum lorem, there we go again! Repeat ourselves incessantly. Over and over. Repeating. <em>Ad nauseam</em>. It's our policy. Did we say that? Two to go.</p>
			</blockquote>
		</dd>
		<dt>789 org</dt>
		<dd>
			<blockquote class="speech third-party" cite="http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css">
				<p>Some declarations use longhand notation so that it can be clearly explained what specific properties or values do and what their relationship is to other properties or values in creating the effect.</p>
				<p>Should you want to set a background colour on a containing element certain types of bubble effect may require you to include these style declarations.</p>
			</blockquote>
		</dd>
		<dt class="even">XYZ org</dt>
		<dd class="even">
			<blockquote class="speech third-party">
				<p>I'm going in. It's not going to be pretty. You were warned. You had the chance. I did tell you. You chose not to listen. It was your choice. There's absolutely no point getting upset now. The die has been cast. These things happen. We need to gather ourselves. Pitch in together and deal with it. The task is not insiginificant. There's value in co-ordinating. This is not a love song.</p>
			</blockquote>
		</dd>
		<dt>Rubbery consortium</dt>
		<dd>
			<blockquote class="speech third-party">
				<p>Bounce bounce bounce, everybody bounce bounce bounce. Come and do the bounce. Bounce bounce bounce, everybody bounce bounce bounce. Come and do the bounce. Bounce bounce bounce, everybody bounce bounce bounce. Come and do the bounce. Bounce bounce bounce, everybody bounce bounce bounce. Come and do the bounce. Bounce bounce bounce, everybody bounce bounce bounce. Come and do the bounce.</p>
			</blockquote>
		</dd>
	</dl>

</body>
</html>
	<?xml version="1.0" encoding="utf-8" ?>
	<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
	>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ" lang="en-NZ"> <!-- brah! -->
	<head>
	<title>Third-party attributed blockquote list</title>

	<style type="text/css">
	/* <![CDATA[ */
	dl.quotes {
	margin: 1em 0;
	padding: 0;
	/* border-bottom: 1px solid #999; */
	}

	dl.quotes .speech {
	margin-top: 0;
	}

	dl.quotes dt {
	clear: left;
	float: left;
	margin: 0;
	padding: 0.2em;
	/* border-top: 1px solid #999; */
	font-weight: bold;
	text-align: right;
	font-size: larger;
	width: 10%;
	}

	dl.quotes dt.even {
	float: right;
	text-align: left;
	clear: left;
	}

	dl.quotes dt,
	dl.quotes dd {
	margin-top: 1em;
	}

	dl.quotes dd {
	float: left;
	width: 83%;
	margin: 0;
	padding: 0.2em;
	}

	dl.quotes dd blockquote.speech {
	margin-left: 3em;
	}

	dl.quotes dd.even {
	float: right;
	}

	dl.quotes dd.even blockquote.speech {
	margin-left: 1em;
	}

	/* speech bubbles adapted from .. */
	/* ------------------------------------------
	PURE CSS SPEECH BUBBLES
	by Nicolas Gallagher
	- http://nicolasgallagher.com/pure-css-speech-bubbles/

	Created: 02 March 2010
	Version: 1.2 (03 March 2011)

	Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
	------------------------------------------ */
	/* THE TRIANGLE
	------------------------------------------------------------------------------------------------------------------------------- */

	.speech {
	position: relative;
	padding: 0 1.2em;
	margin: 1em 0 3em 3em;
	border: 5px solid #5a8f00;
	/* background: #fff; */
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
	}

	.speech.third-party {
	font-style: italic;
	border-color: #5a8f00;
	}

	.even .speech {
	margin-right: 3em;
	}

	.speech.third-party:before {
	border-color: transparent #5a8f00;
	}

	.speech:before {
	content: "";
	position: absolute;
	bottom: auto;
	left: -30px;
	border-width: 15px 30px 15px 0;
	border-style: solid;
	border-color: #5a8f00 transparent;
	display: block;
	width: 0;
	top: 10px;
	}

	.even .speech:before {
	left: auto;
	right: -30px;
	border-width: 15px 0 15px 30px;
	}

	.speech.third-party:after {
	border-color: transparent #fff;
	}

	.speech:after {
	top: 16px;
	content: "";
	position: absolute;
	bottom: auto;
	left: -21px;
	border-width: 9px 21px 9px 0;
	border-style: solid;
	border-color: #fff transparent;
	display: block;
	width: 0;
	}

	.even .speech:after {
	left: auto;
	right: -21px;
	border-width: 9px 0 9px 21px;
	}

	/* next line not needed, similar styles may be defined elsewhere in your stylesheet */
	/* ***** / blockquote { margin-left: 3em; } p { padding: 0; } body { font: 13px/1.5 sans-serif; } / ***** */
	/* ]]> */
	</style>

	</head>
	<body>

	<dl class="quotes">
	<dt>123 corp</dt>
	<dd>
	<blockquote class="speech third-party">
	<p>Ipsum lorem is the order ofthe day, it can even conceivably be used as placeholder blockquote text. But you already knew that, you're one step ahead. I can't fool you. I don't get up early enough in the morning. Who does? What's wrong with those people? They are different, I'll give them that. Possibly human, it's debatable. Should debatable have an 'e' after the 't'?</p>
	</blockquote>
	</dd>
	<dt class="even">ABC corp</dt>
	<dd class="even">
	<blockquote class="speech third-party">
	<p>At ABC corp, we have a better policy about the way you quote us. It's complicated: ipsum lorem, there we go again! Repeat ourselves incessantly. Over and over. Repeating. <em>Ad nauseam</em>. It's our policy. Did we say that? Two to go.</p>
	</blockquote>
	</dd>
	<dt>789 org</dt>
	<dd>
	<blockquote class="speech third-party" cite="http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css">
	<p>Some declarations use longhand notation so that it can be clearly explained what specific properties or values do and what their relationship is to other properties or values in creating the effect.</p>
	<p>Should you want to set a background colour on a containing element certain types of bubble effect may require you to include these style declarations.</p>
	</blockquote>
	</dd>
	<dt class="even">XYZ org</dt>
	<dd class="even">
	<blockquote class="speech third-party">
	<p>I'm going in. It's not going to be pretty. You were warned. You had the chance. I did tell you. You chose not to listen. It was your choice. There's absolutely no point getting upset now. The die has been cast. These things happen. We need to gather ourselves. Pitch in together and deal with it. The task is not insiginificant. There's value in co-ordinating. This is not a love song.</p>
	</blockquote>
	</dd>
	<dt>Rubbery consortium</dt>
	<dd>
	<blockquote class="speech third-party">
	<p>Bounce bounce bounce, everybody bounce bounce bounce. Come and do the bounce. Bounce bounce bounce, everybody bounce bounce bounce. Come and do the bounce. Bounce bounce bounce, everybody bounce bounce bounce. Come and do the bounce. Bounce bounce bounce, everybody bounce bounce bounce. Come and do the bounce. Bounce bounce bounce, everybody bounce bounce bounce. Come and do the bounce.</p>
	</blockquote>
	</dd>
	</dl>

	</body>
	</html>