@charset "utf-8";

/* $Id: programming.css 1510 2016-01-01 08:35:48Z stephane $
 * "Stéphane Charette" <stephanecharette@gmail.com>
 * http://www.ccoderun.ca/
 */

body
{
	background-color:		#ddeeff;
	background:				url('/background_swirl.jpg');
	background-size:		cover;
	background-attachment:	fixed;
	color: #006; }
}

h1
{
	font-size:			130%;
	font-weight:		700;
}

h2, h3, h4, h5
{
	font-size:			130%;
	font-weight:		400;
}

table
{
	border-collapse:	collapse;
}

th, td
{
	padding:			0.5em;
	background-color:	#eef8ff
}

/*
 * thing we see at the top of the page
 */

.article_head
{
	background:		rgba(255,255,255,0.75);
	padding-left:	1em;
	padding-bottom: 1em;
	border:			1px solid black;
}

.article_head li
{
	list-style: none;
}

.article_head .date
{
	float:			right;
	padding-right: 	0.5em;
}

.article_head .name
{
	font-variant:	small-caps;
	font-size:		200%;
	font-weight:	900;
}

.article_head .src
{
	font-size: 80%;
	padding-left: 1.1em;
}

.article_head .src:before
{
	content:	"Attachment: ";
}


/*
 * things we see at the bottom of the page
 */

.article_footer
{
	margin-top:			1em;
	margin-bottom:		1em;
	padding:			1em;
	background:			rgba(255,255,255,0.75);
	border:				1px solid black;
	font-size:			75%;
}

.article_footer .copyright
{
	float:				right;
}


/*
 * existing styles we need to modify for the article
 */

.article
{
	/* indent the entire article */
	border:			1px solid black;
	color:			black;
	margin:			2em;
	padding:		1em;
	text-align:		justify;
	background:		rgba(255,255,255,0.75);
}

.article h1, .article h2, .article h3, .article h4, .article h5
{
	margin-left:	-0.5em; /* ...except for headers, which must be moved back a little bit */
}

.article li
{
	list-style:		square;
	padding-bottom:	0.5em;		/* increase space between sequential list items */
}

.article img
{
	margin:			0.5em;
	border: 		1px solid black;
}

/*
 * styles we're creating from scratch for the article
 */
.article .sourcecode
{
	white-space:		pre;		/* pre-formated text (source code) */
	overflow:			auto;		/* seems to scroll only when necessary */
	width:				85%;		/* ensure the box ends before the edge of the browser */
	position:			relative;	/* change to relative since we need to push it left */
	left:				2em;		/* indent it left the same as <ul> or <ol> */
	margin-top:			0.5em;
	padding-left:		1em;
	padding-right:		1em;
	border:				1px solid black;
	background-color:	white;
	font-family:		"Courier New", "Monospace", "Courier";
}

.article .fixed
{
	font-family:		"Courier New", "Monospace", "Courier";
}

.pre_text
{
	white-space:		pre;		/* pre-formated text (source code) */
	font-family:		"Courier New", "Monospace", "Courier";
}

.article .highlight
{
	background-color:	yellow;
}

.article .update
{
	padding-top:		0.5em;
	padding-bottom:		0.5em;
	background-color:	#f0ffd0;
	display:			table;
}

.article .update:before
{
	content:			"UPDATE: ";
}

.article .todo
{
	background-color:	red;
}

.article .todo:before
{
	content:			"TODO: ";
}

.article .comment
{
	font-style:		italic;
	font-size:		90%;
	margin-left:	4em;
}

.article .links
{
	vertical-align:	super;
	font-size:		80%;
}


.yellow_highlight
{
	background-color:	yellow;
}

.outlined_block
{
	display:			inline-block;
	border:				1px solid black;
	text-align:			center;
	width:				220px;
	height:				220px;
	padding:			0;
	margin:				0.2em;
	margin-bottom:		0.4em;
	background-color:	#eef8ff
}

.outlined_block img
{
	display:		block;
	margin:			auto;
	border: 		none;
}

.article table tr td img
{
	border: 		none;
}

.table_with_border table, .table_with_border tr, .table_with_border th, .table_with_border td
{
	border:				1px solid black;
	border-collapse:	collapse;

}

.table_with_border th
{
	text-align:		center;
}