/* Style Sheet for piil.org */
/* Robert Piil */

body {
	background-color: Gray;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #626262;
	margin: 0px;
	padding: 0px;
	min-width: 400px;
	position: relative;
}
/* main content */
#content {
	margin: 0px 0px 20px 10px;
	width: 70%;
	float: left;
	padding: 0px;
	text-align: justify;
	background-color: #FFFFCC;
}
#content p {
	line-height: 1.3em;
	margin: 0px;
	padding: 5px 40px 10px 10px;
	word-spacing: 0.3em;
	}
	
#content pre {
	line-height: 1.3em;
	margin: 0px;
	padding: 5px 40px 10px 10px;
	word-spacing: 0.3em;
	font-family: "Courier New", Courier, monospace;
	font-size: 1.2em;
}
#content ul { line-height: 1.3em; word-spacing: 0.3em; padding-right: 40px; }
#content p:first-letter { font-weight: bold; }
#content h2 + p { padding-top: 10px; }
#content > h2:first-child { border-top-width: 0px; }

/* links */
a:link, #content a:visited {
	text-decoration: none;
	color: #990033;
	font-weight: bolder;
}
a:hover {
	border-style: solid;
	border-color: #990033;
	border-width: 1px 0px;
	font-weight: bolder;
}
a:active { 
	text-decoration: line-through;
	font-weight: bolder;
}
/* header styles */
h1 {
	background-image: url(output.jpg);
	background-repeat: no-repeat;
	background-color: #990000;
	line-height: 84px;
	background-position: right;
	color: white;
	text-transform: capitalize;
	font-size: 36px;
	margin-top: 0px;
	padding-left: 20px;
	letter-spacing: 0.1em;
	font-family: Georgia, Minion Web, Palatino, Book Antiqua, Utopia, Times New Roman, serif;
}
h1 span {
	color: Silver;
	font-size: 70%;
	line-height: 70%;
	text-transform: none;
	margin-left: 15px;
	letter-spacing: 0em;
	font-family: Georgia, Minion Web, Palatino, Book Antiqua, Utopia, Times New Roman, serif;
	font-style: italic;
}


h2 {
	background-color: #990000;
	color: White;
	clear: left;
	position: relative;
	font-size: 18px;
	line-height: 24px;
	padding: 2px 5px;
	margin: 0px;
	border-top: 20px solid #FFFFCC;
	border-bottom: 2px solid #FFFFCC;
	letter-spacing: 0.1em;
}
h3 {
	background-color: #FFFF99;
	clear: left;
	color: #990033;
	padding: 2px 5px;
	font-size: 14px;
	border-style: dotted;
	border-width: 1px 0px;
	border-color: #990033;
}
h4 {
	background-color: #FFFFCC;
	clear: left;
	color: #990033;
	padding: 2px 5px;
	font-size: 12px;
	font-weight: bold;
}

/* menutop */
#menutop {
	float: right;
	width: 25%;
	margin: 0px 5px;
	background-color: #FFFFCC;
}
#menutop h2:first-child { margin: 0px; border-top: 0px; }
#menutop img { display:none; }
#menutop ul { margin: 0px 10px; padding: 5px 0px 10px 0px; list-style: none; border-bottom: 1px solid #990033; }
#menutop ul li { padding: 2px 3px; }
#menutop a:link, #menutop a:visited {
	color: #990033;
	font-weight: bold;
	text-decoration: none;
}
#menutop a:hover {
	border-style: solid;
	border-color: #990033;
	; border-width: 1px 0px;
}
#menutop a:active { text-decoration: line-through; }
#menutop a[accesskey]:after { content: " [" attr(accesskey) "]"; float: right; font-weight: normal; }
/* menuleft */
#menuleft { float: right; width: 25%; margin: 0px 5px; background-color: #6E7F91; padding: 10px 0px; background-image: url(../images/whitecorner.png); background-repeat: no-repeat; background-position: right bottom; color: white; }
#menuleft ul { margin: 0px 10px; padding: 0px; list-style: none; }
#menuleft li { padding: 1px 0px; }
#menuleft dl { margin-left: 10px; }
#menuleft dt { padding: 2px 0px; }
#menuleft a:link, #menuleft a:visited { color: white; text-decoration:none;}
#menuleft a:hover { border-style: solid; border-color:white; border-width: 1px 0px; }
#menuleft a:active { text-decoration: line-through; }
/* images */
img { border: none; }
img.left {
	float: left;
	margin: 8px 10px 5px 5px;
	display: block;
	border: thin solid Black;
}
img.right { float: right; margin: 0px 0px 5px 10px; display: block; border: thin solid Black;}
img.center {
	float: none;
	position: absolute;
	left: 50%;
	margin: 0px 0px 5px 10px;
	display: block;
	border: thin solid Black;
}

img.scale { margin-right: 10px; display: inline; max-width: 50%; cursor: crosshair; }
img.scale:active { max-width: 100%; }
/* lists */
dl { margin-left: 10px; }
dt { font-weight: bold; }
dd { padding: 5px 0px; margin-left: 0px; }
/* copyright stuff */
p#copyright { background-color: #ECECEC; clear: both;  }
p#copyright span { font-style: italic; float: right; }
/* various styles */
abbr, acronym { cursor: help; }
span.super { vertical-align: super; font-size: 0.6em; }
blockquote { font-style: italic; }
/* generated content */
h2[id]:hover:after, h3[id]:hover:after { content: " #" attr(id); color: #DCDCDC; font-size: 80%; float: right; margin-right: 15px; }
h3[id]:hover:after { color: inherit; }
/* ====== STYLES FOR SPECIFIC PAGES ====== */
/* accesskeytable */
#accesskeytable { width: 200px; display:table; table-layout:fixed; margin-left: 10px;}
#accesskeytable td { border: 1px black solid; border-collapse: collapse; padding-left: 10px;}
#accesskeytable tr:first-child td { font-weight: bold; background-color: #2E5476; color: white; }
#accesskeytable td + td { text-align: center; }
/* contact information */
img.contact { content: "\006D \0065 \0040 \006D \0061 \0072 \006B \0073 \0063 \0068 \0065 \006E \006B \002E \0063 \006F \006D"; font-size: 1.5em; margin: 0px auto 10px auto; display: block; text-align:center; }
/* styles on Music pages */
span.style { color: gray; font-style: normal; font-size: 0.9em; float: right; padding-right: 10px;}
#content p.column { float: left; border-right: 1px dotted black; width: 55%; padding-right: 10px; margin-right: 10px; }
#content p.column img { float: right; margin: 0px 0px 0px 1em; padding: 0px 0px 0.5em 0.5em; background-color: transparent; border-style: solid; border-color: black; border-width: 0px 0px 1px 1px; width: 50%; max-width: 200px; }
#content p.column + p { padding-top: 0px; }
/* albums */
.albumlist { padding: 10px 10px; }
.albumlist img { width: 25%; padding: 5px 5px 5px 5px; margin: 0px; border-style: dotted; border-color: black; border-width: 0px 0px 1px 1px; display: block; float: left; }
/* table of content */
dl.toc {display: block; width: auto; margin-right: 2%;}
dl.toc dt { border-bottom: 1px dotted black; padding: 2px 5px; }
dl.toc dd { margin: 0px; padding: 0px; }
dl.toc dd dl {margin-top: 0px; margin-bottom: 10px; padding: 10px 0px 0px 0px; border-left: 1px dotted black; }
dl.toc a:after {content: attr(title); font-weight: normal; color: black; float: right; margin-left: 10px; font-style: italic; font-size: 0.9em; text-decoration: none; }
/* links page */
dl.links {display: block; float: left; width: 45%; }
dl.links dt { display: block; color: #2E5476; }
dl.links dd { display: block; margin-bottom: 10px; border-bottom: 1px dotted black;}

.centerpic {
	text-align: center;
}