/*
http://u-tx.net - Computing Pages. By Francesc Hervada-Sala, 2009-2010.
CSS2 style sheet adapted from design
"Untitled_Song" by Michelle Beloshitsky
courtesy of OSWD http://www.oswd.org/

Differences to original design:
- Original: table layout. Here: CSS layout.
- Original: 2-column screen layout. Here: 2-column screen layout + 1-column print layout.
- The page is here narrower and colors were changed.
- Some letter and paragraph appearance changes.
- Header H1 used not just for sitewide title. Headers H4 to H6 supported.
- Some dropped tags (e.g. <small>), some added tags (e.g. <blockquote>)
- Icons added (square bullets, external links).
*/

/* general settings */
@import url("fonts/lmroman.css");

body
{
	background-color: white;
	color: black;
	font-family:'LatinModernRoman10Regular','Times New Roman',serif;
	font-size:12pt;
	text-align:justify;
}

h1, h2, h3, h4, h5, h6 { text-align:left; }
h1 { font-size: 20pt; }
h2 { font-size: 17pt; }
h3 { font-size: 16pt; }
h4 { font-size: 15pt; }
h5 { font-size: 14pt; }
h6 { font-size: 13pt; }

/* null this values for clear and portable design*/
body, h1, h2, h3, h4, h5, h6, ol, ul, li, p
{
	margin:0;
	padding:0;
}
img
{
 	border:0;
}

/* no bold headers */
h1,h2,h3,h4,h5,h6
{
	font-weight: normal;
}

hr
{
	height: 1px;
	border-width: 0;
	background-color: #0000CC;
	margin: 0;
	text-align: left;
}

a[href$=".zip"] {
	background: url(img/zip.jpeg) right center no-repeat;
	padding-right: 18px;
}
a[href$=".pdf"] {
	background: url(img/pdf.jpeg) right center no-repeat;
	padding-right: 18px;
}

/* Block Layout */

@media screen
{
	body
	{
		/*position:absolute;*/
	}
	.content
	{
		margin-left:50px;
		max-width: 640px;
		min-width: 100px;
	}
	.subcontent /* right sidebar */
	{
		position:	absolute;
		left:		720px;
		top:		0;
		bottom:		0;
		max-width: 200px;
	}
	.header
	{
 		/*margin-right:	420px;*/
	}
	.header h1
	{
		margin-left: 0.3em;
	}
	.header p
	{
		margin-left:0.5em;
	}
	div.operation /* print & mail buttons */
	{
		width:40px;
		margin-right:25px;
		margin-top:25px;
		margin-bottom:20px;
		padding:0;
		vertical-align:middle;
	}
	.footer
	{
		border-top: solid #e0e0e0 1px;
		max-width: 640px;
		min-width: 100px;
	}
	a.external {
		background: url(img/linkexternal.gif) left center no-repeat;
		padding-left: 14px;
		padding-right: 0;
	}
	a { color:black; }
	a:link { color:gray; }
	a:active,a:hover { color:black; background-color:#f0f0f0; }
	span.more.short { display:inline; }
	span.more.long { display:none; }

	.splitcontent .left {
		float:left;
		border-right:dashed #e0e0e0 1px;
		padding-right:1em;
		margin-right:1em;
	}
	.splitcontent .right {
		float:left;
	}
}
@media print
{
	.header
	{
		border-bottom: solid silver 1px;
	}
	.header hr
	{
		display: none;
	}
	.subcontent /* at the bottom with divider line */
	{
		margin-top: 2em;
		padding-top: 0.2em;
		border-top: solid #e0e0e0 1px;
	}
	div.operation, .navigation, .videoCanvas
	{
		display:	none;
	}
	a
	{
		text-decoration:none;
		color:black;
	}
	a.external:after,
	a.download:after
	{
		content: " [" attr(href) "]";
		font-style: verdana,sans serif;
		font-size: 10pt;
	}
	a.external.url:after { content: ""; }
	a { color:black; }
	span.more.short { display:none; }
	span.more.long { display:inline; }
}


/* Header */

.header
{
	margin-bottom:0;
	font-style: italic;
}

.header h1
{
 	margin-top:0.3em;
	letter-spacing: 0.1em;
}

.header a
{
	color: black;
	font-style: inherit;
	text-decoration:none;
}

.header  hr
{
 	height: 0.15em;
 	width: 400px;
	margin: 0;
}

/* Main Content */

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6
{
	margin-top: 1.2em;
	margin-bottom: 0.6em;
}

.content h1
{
	letter-spacing: 0.3em;
	font-variant:small-caps;
}
.content .subtitle
{
	font-variant:normal;
	font-style:italic;
	font-size:100%;
	margin-top: 0;
	margin-bottom: 1em;
}

.content h2
{
	letter-spacing: 0.08em;
}
.article .content h2 {
	border-bottom:solid #f0f0f0 3px;
}

.content ol, .content ul, .content ol, .content ul
{
	margin-left: 2em;
}

/* Subcontent */

.subcontent
{
	font-size: smaller;
}

.subcontent ul, .subcontent ol, .subcontent ul, .subcontent li, .subcontent hr
{
	margin-left: 1em;
}

.subcontent h1, .subcontent h2, .subcontent h3, .subcontent h4, .subcontent h5, .subcontent h6
{
	margin-top: 0.6em;
}

.subcontent li
{
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}

/* Footer */
.footer
{
	margin-top: 3em;
	padding-top: 0.2em;
	font-size: smaller;
	color: gray;
}
.footer p
{
	margin-left:1em;
	margin-right:1em;
}

.footer a
{
	color: gray;
}


/* paragraph appearance */

p
{
	margin-bottom: 0.4em;
	margin-top: 0.2em;
}
.subcontent p
{
	margin-top: 1em;
}

ul
{
	list-style-type: square;
}

em
{
	text-decoration:none;
	font-style: normal;
	letter-spacing: 0.2em;
}

blockquote
{
	background-color:#fafafa;
	margin-left: 1em;
	margin-right: 1em;
	padding:0.4em;
}

pre, code
{
	font-family:courier,monospace;
	font-size:11pt;
	white-space:pre;
}
.content h2 code, .content h3 code
{
	font-size: 14pt;
}

.rev { font-size: 70%; }

pre
{
	padding:1em;
	background-color:#fafafa;
	width:400px;
	overflow:visible;
}

table.navigation
{
	background-color:#e7e7e7;
	margin-top:0.5em;
	padding:0.25cm ;
}

img.left {
	float:left;
	margin-right:1em;
}
img.right {
	float:right;
	margin-left:1em;
}
div.signature {
	text-align: right;
	margin-top: 1em;
	margin-bottom: 1em;
}
div.signature p {
	margin: 0;
}

span.selected
{
	color:#CCCCCC;
	font-weight:bold;
}

.postdata
{
	color:gray;
	font-size:smaller;
}

table.navigation a:link,
table.navigation a:active,
table.navigation a:visited
{
	text-decoration: none;
	color: black;
}
table.navigation a:hover
{
	text-decoration: none;
	color: white;
	background-color: #FFFFFF;
}
table.navigation th
{
	color:#333333;

	font-style: italic;
	font-weight: normal;
	vertical-align: top;
	text-align: right;
}
table.navigation ul
{
	margin: 0px;
	padding: 0px;
	white-space: normal;
}
table.navigation ul li
{
	margin: 0px;
	padding: 0px;
	display: inline;
	list-style-type: none;
}
span.navigation a.inactive
{
	font-style:italic;
}
.subcontent h1
{
	margin-top:1em;
}

.subcontent h1,
.subcontent h2,
.subcontent h3,
.subcontent h4
{
	display:list-item;
	list-style-type: none;
	list-style-position:inside;
}

.subcontent .toc
{
	border-bottom: solid #f0f0f0 2px;
	padding-bottom: 1em;
}

.subcontent .toc h2,
.subcontent .toc h3,
.subcontent .toc h4
{
	list-style-image: url(img/bullet-square.gif);
}
.subcontent .toc h1,
.subcontent .cat h2,
.subcontent .cat h3
{
	list-style-image: url(img/page.gif);
}
.subcontent h1
{
	margin-left: 0em;
	font-size: 13pt;
}
.subcontent .toc h2,
.subcontent .cat h2
{
	margin-left: 0.5em;
	font-size: 12pt;
}
.subcontent .toc h3,
.subcontent .cat h3
{
	margin-left: 1em;
	font-size: 12pt;
}
.subcontent .toc h4,
.subcontent .cat h4
{
	margin-left: 1.5em;
	font-size: 12pt;
}