duktape/website/style-content.css

/*
 *  Content CSS rules.
 *
 *  The 'content' class can be applied to any element which wants to get
 *  styling for "main content".
 */

/*
 *  Common headings, text styles etc
 */

.content .main-title {
	font-size: 24pt;
	margin: 0 0 2ex 0;
	color: #000000;
	text-shadow: 1px 1px 1px #777777;
	filter: dropshadow(color=#777777, offx=1, offy=1);
}
@media print {
	.content .main-title {
		font-size: 21pt;
		text-shadow: none;
		filter: none;
	}
}

.content h1 {
	font-size: 21pt;
	margin: 4ex 0 1ex 0;
	padding: 0 0 1ex; 0;
	border-bottom: 1px solid #eeeeee;
}
@media print {
	.content h1 {
		font-size: 16pt;
	}
}

.content h1 a {
	color: #000000;
	text-decoration: none;
}
.content h1 a:visited {
	color: #000000;
	text-decoration: none;
}
.content h1 a:hover {
	color: #222266;
	text-decoration: none;
}

.content h2 {
	font-size: 18pt;
	margin: 2ex 0 1ex 0;
	color: #6666ff;
}
@media print {
	.content h2 {
		font-size: 13pt;
	}
}

.content h3 {
	font-size: 14pt;
	font-weight: bold;
	margin: 2.5ex 0 0.5ex 0;
	color: #000000;
}
@media print {
	.content h3 {
		font-size: 12pt;
	}
}

.content p {
	font-size: 12pt;
	margin: 2ex 0 1ex 0;
	line-height: 1.4;
}
@media print {
	.content p {
		font-size: 10pt;
	}
}

.content tt,
.content code,
.content samp {
	font-family: 'Droid Sans Mono', sans-serif;
}
@media print {
	.content tt,
	.content code,
	.content samp {
	}
}

.content b {
	font-size: 12pt;
	font-weight: 700;
}
@media print {
	.content b {
		font-size: 10pt;
	}
}

.content ul {
}

.content ul li {
	margin: 1ex 0 1ex 2em;
	/* list-style: disc; */
	list-style: circle;
	list-style-position: outside;
	line-height: 1.4;
}

/* Special style for tag lists.  Disable link text-shadow because it
 * causes layout sizes when hovering over the links (apparently the
 * shadow somehow changes the item's size at least from multi-column
 * layout perspective).  Because of no text-shadow, the link hover is
 * not as visible, so add a faint background and a darker color.
 */
ul.taglist {
	-moz-column-count:4; /* Firefox */
	-webkit-column-count:4; /* Safari and Chrome */
	column-count:4;
	font-size: 10pt;
}
ul.taglist li {
	margin: 0.25ex 0 0.25ex 2em;
	list-style: none;
	line-height: 1.2;
}
ul.taglist li a {
	text-decoration: none;
}
ul.taglist li a:hover {
	/* Remove text-shadow and filter from .content a:hover rule */
	background-color: #eeeeff;
	color: #000088;
	text-decoration: underline;
	text-shadow: none;
	filter: none;
}

@media screen and (max-width:800px) {
	.taglist {
		-moz-column-count:1; /* Firefox */
		-webkit-column-count:1; /* Safari and Chrome */
		column-count:1;
	}
}

/* special styling for breakdowns (additive to base ul / ul li style) */
ul.breakdown {
	margin: 2ex 0 2ex 2em;  /* additional indent */
}

ul.breakdown li {
	list-style: none;
	padding: 0.5ex 2ex 1ex 2ex;
	/*background: #f8f8f8;*/
	border: 2px solid #eeeeee;
	border-radius: 10px;
	margin: 1ex 0 1ex 0;
}
@media screen and (max-width:800px) {
	ul.breakdown {
		margin: 2ex 0 2ex 0;  /* remove indent */
	}
}

.content pre {
	overflow: auto;
	font-family: monospace;
	font-size: 10pt;
	font-weight: 400;
	line-height: 1.5;
	background: #eeeeee;
	border: 2px dashed #cccccc;
	padding: 1.5ex;
	margin: 2ex 2em 2ex 0ex;
}
@media print {
	.content pre {
		overflow: visible;
		font-family: monospace;
		font-size: 10pt;
		font-weight: 400;
		page-break-inside: avoid;
	}
}

/* narrow layout: smaller preformatted text (tends to be quite wide) */
@media screen and (max-width:800px) {
	.content pre {
		font-size: 10pt;
	}
}

/* generated manually with buildimages.py */
@media screen {
	.content pre.c-code {
		background: #eeeeee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAUCAYAAABroNZJAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90HBRMMIRk2ywgAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAnUlEQVQ4y+3TIW5CcRDE4ckTCFDcoKKYXgGDAd8L9Bi9Rz1XKElTFAmeA6BJEMUiCBVUfBX8X4IilFcHY1bNLzs72eSuWxKGeMcXDthhhc9zvuoE8JZklmSbZJCkk+QxyWuS9iUbvDjqo0mMRYH0m0D2BdK9xl/9RyE1ZFnmU5M4zQ9bV1xAY/TQwgOeMf8LaIQJNvjBN9aY3tDP/QKrO4MiF+jAygAAAABJRU5ErkJggg==) no-repeat right top;
	}
	.content pre.ecmascript-code {
		background: #eeeeee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAUCAYAAAAA5FpZAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90HBRMME9HhmogAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACKUlEQVRYw+3XvWtUQRQF8KzZoBEjfhBExY9KTBAVRIRAQE2lhVqJBokiWAgW9oJ/g4WVoKRRRBF7jSJJjI2gCHYSTCT4gXaJGiX52dyFx/LMvn3JLgrvdHPemfvunJm5M9PSUqBAgQIFChQoUOAfhkCj/1Ou/OxvglKpVCqmo/ZkZfWqXJjb3LEvyzGbu3AXH/ELb3E6uS1xAeOYxRscxRVMYQYj6E6JfTn6z0X8G+hIfN+MQXyI2J9wB7115ncSY5iurM60kpLQD0ScWbzDmerVXVdZyirEfnzHJPqwEl24XZXgQ6yPgVXwAOtwKtpjKfGvohsrcD501xPfnwV3AsuxEf0YrjO/l9iL1oU8SOjHsA1bMBrcodz13wKo0g0FfbxGnJ3Rbk/hypjHbI2cWqPfRIKbDq4XpZQ+WfPbl2XRJfQ9Ca4nuKeLNjyDbiaka2sMqJzCtdUY3Hbci1Iwl+g3l9CMJPgZvMI1bKozv7Y6DV+V4DqC+9pMw9dkjVMHNxz0pSgXbdW62NK3omQkMZI3v0UY/q0Zhj8J6bEGGF4pF+3R3lPDoNWJ82A6b35LVFLmG2X4AfzAexyOGr0Dg0tg+Iug+9GJRykrfCgOzM7YAUdC8jhvfhkNH8XWqkOzL6GbCq5rSQ/N0O6OWvsZv9OuXTkN78Jz/MQELqYYfhD38SWuaJO4iQ1588to+Fm8jhvQOAaqdOfiitqU12rx3G/kw6dAYfh/hT9Hv5t3lMuhdwAAAABJRU5ErkJggg==) no-repeat right top;
	}
	.content pre.coffeescript-code {
	}
}

/*
 *  Table
 */

/* containing div.table-wrap ensures table overflow works cleanly */
/* http://stackoverflow.com/questions/1648622/tables-overflowing-with-css-in-firefox */
.content .table-wrap {
	overflow: auto;
}
@media print {
	.content .table-wrap {
		overflow: visible;
	}
}

.content table {
	margin: 2ex 1em 2ex 1em;
	border: none;
}

.content table tr {
}

.content table tr.header th {
	padding-bottom: 1ex;
}

.content table tr.header {
	border-bottom: 1px solid #cccccc;
}

.content table th {
	padding: 0.75ex 0.75em 0.75ex 0.75em;
	text-align: left;
	font-weight: 700;
}

.content table td {
	padding: 0.75ex 0.75em 0.75ex 0.75em;
	text-align: left;
}

.content a {
	text-decoration: none;
	color: #4444ff;
}

.content a:visited {
	color: #4444ff;
}

.content a:hover {
	text-decoration: underline;
	color: #222266;
	text-shadow: 0px 0px 10px #7777ff;
	filter: dropshadow(color=#9999ff, offx=1, offy=1);
}

/*
 *  Stack
 */

.content .stack-wrapper {
	display: block;
}

/* narrow layout: smaller font */
@media screen and (max-width:800px) {
	.content .stack-wrapper {
		font-size: 10pt;
	}
}

/* .arrow and .arrow .text have invisible borders, shadows, etc, to keep
 * them aligned
 */
.content .stack-wrapper .arrow {
	display: inline-block;  /* for "shrink-to-fit" */
	overflow: auto;  /* clear fix */
	width: auto;
	background: #ffffff;
	margin: 1ex 0.1em 1ex 0.1em;
	border: 2px solid #ffffff;
	border-radius: 10px;
	box-shadow: 3px 3px 5px #ffffff;
	padding: 1ex 0.1em 1ex 0.1em;
	vertical-align: middle;
}

.content .stack-wrapper .arrow b {
	float: left;
	min-width: 1.25em;
	background: #ffffff;
	margin: 0.1ex 0.1em 0.1ex 0.1em;
	border: 1px solid #ffffff;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #ffffff;
	padding: 0;
	vertical-align: middle;
	text-align: center;
	font-size: 24pt;
}

.content .stack-wrapper .stack {
	display: inline-block;  /* for "shrink-to-fit" */
	overflow: auto;  /* clear fix */
	width: auto;
	background: #eeeeee;
	margin: 1ex 0px 1ex 0px;
	border: 2px solid #888888;
	border-radius: 10px;
	box-shadow: 3px 3px 5px #bbbbbb;
	padding: 1ex 1em 1ex 1em;
	vertical-align: middle;
}

.content .stack-wrapper .stack .elem {
	float: left;
	min-width: 1.25em;
	background: #cccccc;
	margin: 0.1ex 0.1em 0.1ex 0.1em;
	border: 1px solid #888888;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #bbbbbb;
	padding: 0.5ex 0.5em 0.5ex 0.5em;
	vertical-align: middle;
	text-align: center;
}

.content .stack-wrapper .stack .ellipsis {
	width: 2em;
	text-align: center;
}

.content .stack-wrapper .stack .active {
	background: #ffffff;
}

.content .stack-wrapper .stack .referred {
	background: #dddddd;
}

.content .stack-wrapper .stack .ghost {
	border-style: dashed;
	background: #eeeeee;
	color: #666666;
	box-shadow: none;
}

/* orthogonal */
.content .stack-wrapper .stack .literal {
	font-family: monospace;
	font-size: 12pt;
}

.content .stack-wrapper .stack .cap {
	display: none;
}

.content .stack-wrapper .stack-comment {
	float: right;
	margin: 0.1ex 0.3em 0.1ex 2em;
	padding-top: 3ex;
	width: 20em;
	color: #888888;
}

/*
 *  Callouts
 */

.content .tip {
	border: 2px solid #eeeeee;
	background: #ffffff;
	color: #000000;
	padding: 1.5ex;
	margin: 2ex 2em 2ex 0ex;
	line-height: 1.4;
}
.content .tip:before {
	content: "TIP: ";
	font-weight: 700;
}

.content .note {
	border: 2px solid #eeeeee;
	background: #ffffff;
	color: #000000;
	padding: 1.5ex;
	margin: 2ex 2em 2ex 0ex;
	line-height: 1.4;
}
.content .note:before {
	content: "NOTE: ";
	font-weight: 700;
}

.content .fixme {
	border: 2px solid red;
	background: #000000;
	color: #ffffff;
	padding: 1.5ex;
	margin: 2ex 2em 2ex 0ex;
	line-height: 1.4;
}
.content .fixme:before {
	content: "FIXME: ";
	font-weight: 700;
}

/*
 *  Section sign link
 */

.content .sectiontitle a.sectionlink {
	color: #ffffff;
}
.content .sectiontitle:hover a.sectionlink {
	color: #8888ff;
}
@media print {
	.content .sectiontitle .sectionlink {
		display: none;
	}
}