/* Stylesheet for Doggiebox manual. */
/* arf! arf! */

@charset "utf-8";



/* common basis fonts for whole manual */
body {
	font-family: "geneva", "lucida grande", monaco, sans-serif;
	font-size: 12px;
	background: #f7f7f7;
	color: black;
	margin: 20px;	/* default margin, but set expressly so it can be negated in FOOTER. */
	padding-bottom: 30px;	/* compensate for fixed-position footer at bottom of page. */
}

a:link, a:visited { color: #1186BA; }



/********* page header and footer common to templates ***********/

footer, header {
	color: #ccc;
	clear: both;
	background: white;
	text-align: center;
	}
	
footer {
	height: 16px;
	position: fixed;
	bottom: 0; left: 0;
	width: 100%;
	padding: 10px;
	margin: 0;
	border-top: 12px solid #f7f7f7; /* same as body background; provide a bit of "invisible lip" */
}

header {
	height: 6px;
	margin: -20px;		/* pull out the margins to anchor to the sides of the doc like the header. */
	margin-bottom: 10px;	/* but provide some breathing room from end of body text proper */
	}

footer img, header img { /* compensate for the button positioning */
	vertical-align: middle;
	position: relative;
	top: -2px;
	}

footer a, header a {
	text-decoration: none;
	}



/***** temporary border markup to facilitate visualizing page breaks during editing *****/
article[data-base-filename] {
	border-top: 20px solid white;
	}


/********* TOC-specific stylings ***********/


#indexPageBody {
xbackground: url(images/doggie%20blurry.png) no-repeat top right;
	}

#indexPageTOCFloater {
	float: left;
	text-align: center;
	margin-right: 20px;
	margin-bottom: 60px;
	}
#indexPageTOCFloater #indexPageTOCBox {
	width: 35em;
	background: white;
	padding: 20px 20px 10px 20px;
	border: 3px solid #ddd;
	border-radius: 10px 10px 10px 10px;
	margin: 0;
	text-align: left;
	}

/* Suppress the otherwise funky treatment of headings, and show "Table of Contents" plainly. */
#indexPageTOCFloater h1 {
	margin: 0;
	text-align: center;
	}
#indexPageTOCFloater h1:before {
	content: none;
	}

/* Dress the various embedded lists in a visually-pleasing manner. */
#DOC_toc_list > ul {
	padding-left: 0;
	margin-top: 0;
	}

#DOC_toc_list li {
	list-style: none;
	font-family: helvetica, sans-serif;
	}

#DOC_toc_list > ul > li > ul {
	padding-left: 25px;
	}

#DOC_toc_list > ul > li {	/* H1-level LI */
	font-size: 17px;
	padding-top: 11px;
	}
#DOC_toc_list > ul > li dt:before {
	content: "▍";
	color: #F9FC4D;
	}

#DOC_toc_list > ul > li li {	/* H2-level LI */
	font-size: 14px;
	padding-top: 6px;
	}
#DOC_toc_list > ul > li li dt:before {
	content: "▎";
	color: #F9FC4D;
	}

#DOC_toc_list > ul > li li li { /* H3-level and beyond LI */
	font-size: 11px;
	padding-top: 2px;
	margin-left: -1em;
	}
#DOC_toc_list > ul > li li li dt:before {
	content: none;
	}

/* "Definition list" formatting. This gets us the "leading dots" effect. */
#DOC_toc_list dl {
	display: block;
	width: 100%;
	overflow: hidden;
	clear: both;
	margin: 0;
	background: url(images/dot.png) repeat-x right center;
	}
#DOC_toc_list dt {
	float: left;
	background: white;
	padding-right: 6px; /* breathing room beside dots */
	}
#DOC_toc_list dd {
	float: right;
	background: white;
	padding-left: 6px; /* breathing room beside dots */
	}

/* Link behaviour in the TOC lists. */
#DOC_toc_list li a:link,
#DOC_toc_list li a:visited {
	color: #a44;
	text-decoration: none;
	}
#DOC_toc_list a:hover {
	font-weight: bold;
	}



/*********** headings ***********/

h1, h2, h3, h4 {
	font-family: helvetica, sans-serif;
	color: #444;
	clear: all;
	}

h1 {
	font-size: 24px;
	margin-bottom: 14px;
	clear: both;
	}
h2 {
	font-size: 18px;
	margin-top: 24px;
	clear: both;
	}
h3 {
	font-size: 15px;
	}

h1, h2 {
	margin-left: -1em;
	}
h1:before, h2:before {
	content: "▉";
	color: #F9FC4D;
	}
/*◉◀
h1:after, h2:after {
	content: " ●";
	color: #F9FC4D;
	}
*/



/* An "aside" floating sidebar/callout. */
aside:before {		/* Slap a sort of embossed heading title above its body content. */
	font-family: helvetica;
	font-size: 26px;
	font-weight: bold;
	content: "tip"; /* the default heading title */
	position: relative;
	top: -27px;
	margin-bottom: -30px;
	display: block;
	color: #ddd;
	}
aside[title]:before {	/* if <aside title="foo"> then display "foo" instead. */
	content: attr(title);
	}
aside {
	color: #555;
	background: #F8FEE5;
	margin: 5px 0 5px 10px;
	border: 1px solid #ddd;
	border-radius: 2px 10px 2px 15px;
	padding: 10px;
	width: 50%;
	float: right;
	}

/* lists in the body - put a bit of space between each entry */
li { padding-top: 3pt; }


blockquote {
	background: #f0f0f0;
	font-size: 0.8em;
	xpadding: 1px 10px 1px 10px;
	padding: 6px 16px 6px 16px;
	xborder: 10px clear white;
	border-radius: 10px;
	}


/* for textual representations of main menu bar command text */
.menucmd {
	font-family: "lucida grande", sans-serif;
	font-weight: bold;
	font-size: 1.1em;
	padding: 1px 3px 1px 3px;
	color: #444;
	background: white;
	}

.buttoncmd {
	font-weight: bold;
	}
img.buttoncmd {
	vertical-align: middle;
	}


/* float this image to the right of the paragraph, with tasty margins on the inner edges */
.floatright {
	clear: right;
	float: right;
	margin: 10px 0 6px 6px;
	}


figure {
	text-align: center;
	min-width: 160px; /* facilitate a uniform width for nearby "pattern XXX selected.png" figures */
	}
figcaption {
	color: #777;
	font-size: 0.8em;
	}

em {
	xfont-style: oblique;
	font-style: normal;
	font-weight: bold;
	color: #a44;
	}