/*
	
	stylesheet for video display
	
	markup: Han-earl Park
	copyright buster & friends' d'da
	updated: cork, august 2007
	
	
	mods:
	
	the most useful and simplest parameters to modify are fonts and colors.
	
	in addition to the hyperlink colors (e.g. a:link), the following have been defined:
		
		background_color
		background_gray_color
		background_gray_hc_color		(high contrast version of above)
		
		foreground_color
		foreground_hc_color		(high contrast version of above)
	
	and the following fonts:
		
		heading_font
		body_font
	
	
	note_1	for debugging, set div's border-width to 1px, but watch out....
	
	note_2	logically, margin-top should be set on table, but some browsers reder the caption in the
					wrong place. Thus we set caption's padding-top (not margin-top) instead.
	
	note_3	body's margin-top should be 128px, but we set div#background's padding-top (not margin-top)
					to 128px; to accommodate the background image.
	
	note_4	despite better support for CSS, it turns out to be almost difficult to get a table to span
					100% width while retaining left and right margins reliably across different layout engines.
					Thus we resort to div.tablecontainer.
	
	
	changes for io:
	
	io_1	text-transform chaged.
	
	io_2	remove h1 span and h1 span#amp, redeploy h1 span, and otherwise tweak h1.
	
	io_3	change font for footer.
	
	io_4	change heading (h2, h3, h4, caption and thead) sizes/styles.
	
	io_5	secondary background image.
	
	io_6	make text inside lists bold.
	
	io_7	make footer bold.
	
	io_8	whole buncha stuff to get the icon positioned next to h1.
*/


/*
	potentially useful properties:
	
	max-width, opacity
	
*/


/* for debugging purposes */

div {
	margin: 0px;
	border: 0px;
	padding: 0px;

	border-width: 0px;	/* if set to 1px, see note_1 */
	border-color: black;
	border-style: solid;
}





/*

	overall document look

*/

body {
	margin-left: 128px;
	margin-right: 128px;
	margin-top: 0px;		/* see note_3 */
	margin-bottom: 64px;

	color: #f0f0f0;		/* foreground_color */
	background-color: #000000;		/* background_color */

	background-position: top center;		/* io_5 */
	background-attachment: fixed;		/* io_5 */

	font-family: Palatino, "Palatino Linotype", "URW Palladio", "Book Antiqua", serif;		/* body_font */
	font-size: small;
}

body#about {		/* io_5 */
	background-image: url(../images/background_0.png);
}

body#sounds {		/* io_5 */
	background-image: url(../images/background_1.png);
}

body#wares {		/* io_5 */
	background-image: url(../images/background_2.png);
}

body#blog {		/* io_5 */
	background-image: url(../images/background_3.png);
}

body#friends {		/* io_5 */
	background-image: url(../images/background_4.png);
}

div#background {
	padding-top: 128px;		/* see note_3 */		/* io_8  */

	min-width: 680px;

	background-image: url(../images/background_photo.png);		/* relative to .css file */
	background-repeat: no-repeat;
	background-position: top center;
}

div#page {
}



/* links */

a:link {
	color: #a8a8ff;
	text-decoration: none;
}

a:visited {
	color: #b090ff;
	text-decoration: none;
}

a:hover {
	color: #ffffff;
	text-decoration: underline;
}

a:active {
	color: #000000;
	text-decoration: underline;
}



/* images */

img {
	margin: 0px;
	border: 0px;
	padding: 0px;
}



/* headings */

div#header {
	margin: 0px;
	margin-bottom: 0px;		/* io_2  used to be 86px */		/* io_8  use padding-bottom instead */

	padding-bottom: 150px;		/* io_8 */
}

div#h1_icon {		/* io_8  */
	text-align: right;

	width: 30%;

	float: left;
}

div#h1_icon img {		/* io_8  */
	margin-right: 9px;

	width:64px;
	height:64px;

	vertical-align:-24px;
}

div#h1_text {		/* io_8  */
	 width: 70%;
	 float: left;
}

h1 {
	margin: 0px;
	border: 0px;
	padding: 1px;		/* io_2  */
	padding-left: 6px;		/* io_8  */
	padding-top: 8px;		/* io_2  */

	color: #ffffff;		/* foreground_hc_color */

	font-family: "Courier New", Courier, monospace;		/* heading_font */
	font-size: 200%;
	line-height: 100%;
	text-transform: none;		/* io_1 */
	font-weight: normal;
	letter-spacing: 0.4em;
	text-align:left;		/* io_8  */

	display:block;		/* io_8  */
}

h1 span {		/* io_2  */
	font-family: Palatino, "Palatino Linotype", "URW Palladio", "Book Antiqua", serif;		/* body_font */
	font-style: italic;
	font-weight: normal;
	font-size: 60%;
	text-transform: none;		/* io_1 */
	letter-spacing: 0em;
}

/* h1 span {		/* io_2  */
/* 	font-family: Palatino, "Palatino Linotype", "URW Palladio", "Book Antiqua", serif;		/* body_font */
/* 	font-style: italic; */
/* 	vertical-align: middle; */
/* } */

/* h1 span#amp {		/* io_2  */
/* 	font-size: 400%; */
/* 	color: #8080a0;		/* background_gray_hc_color */
/* } */

h2 {
	margin: 0px;
	margin-top: 0px;
	margin-bottom: 0.5em;
	border: 0px;
	padding: 0px;

	font-family: "Courier New", Courier, monospace;		/* heading_font */
	font-size: 160%;
	text-transform: lowercase;		/* io_1 */
	font-weight: bold;		/* io_4 */
	text-align: center;

	line-height: 100%;
}

h3 {
	margin: 0px;
	margin-top: 4em;
	margin-bottom: 0.8em;
	border: 0px;
	padding: 0px;

	font-family: "Courier New", Courier, monospace;		/* heading_font */
	font-size: 100%;
	text-transform: lowercase;		/* io_1 */
	font-weight: bold;		/* io_4 */
	text-align: center;

	line-height: 100%;
}

h3.first {
	margin-top: 0px;
}

h4 {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 1em;
	margin-bottom: 0.2em;
	border: 0px;
	padding: 0px;

	font-family: Palatino, "Palatino Linotype", "URW Palladio", "Book Antiqua", serif;		/* body_font */
	font-size: small;
	text-transform: lowercase;
	font-size: 100%;
	font-weight: bold;
	text-align: center;

	line-height: 100%;
}

h4.first {
	margin-top: 0px;
}



/* paragraphs */

p {
	margin: 0px;
	border: 0px;
	padding: 0px;

	font-family: Palatino, "Palatino Linotype", "URW Palladio", "Book Antiqua", serif;		/* body_font */
	text-align: justify;
	text-indent: 1em;

	line-height: 120%;		/* just a little more room */
}

p.first {
	text-indent: 0px;
}



/* blockquote */

blockquote {
	margin-left: 2em;
	margin-right: 2em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;

	border: 0px;
	padding: 0px;

	font-size: 85%;
	color: #ffffff;		/* foreground_hc_color */
}

blockquote p.reference {
	margin-top: 0.5em;
	text-align: right;
}



/* lists */

ul {
	margin: 0px;
	border: 0px;
	padding: 0px;

	list-style: none;
}

li {
	margin: 0px;
	border: 0px;
	padding: 0px;

	font-family: "Courier New", Courier, monospace;		/* heading_font */
	font-size: 100%;
	font-weight: bold;		/* io_6 */

	background-color: #202020;		/* background_gray_color */
}

li a {
	margin: 0px;
	border: 0px;
	padding: 0px;

	display: block;
}

li a:hover {
	color: #000000;		/* background_color */
	background-color: #8080a0;		/* background_gray_hc_color */

	text-decoration: none;
}



/* tables */

table {
	margin: 0px;
	border: 0px;
	padding: 0px;

	width: 100%;		/* note_4 */
	table-layout: fixed;

	border-collapse: separate;	/* these two lines are equivalent to 'cellspacing="1"' */
	border-spacing: 1px;

	background-color: #202020;		/* background_gray_color */
}

caption {		/* identical to h3 */
	margin: 0px;
	border: 0px;
	padding: 0px;

	font-family: "Courier New", Courier, monospace;		/* heading_font */
	font-size: 100%;
	text-transform: lowercase;		/* io_1 */
	font-weight: bold;		/* io_4 */
	text-align: center
}

thead {
	margin: 0px;
	border: 0px;
	padding: 0px;

	background-color: #202020;		/* background_gray_color */
}

th {		/* similar to h4 */
	margin: 0px;
	border: 0px;
	padding: 0px;

	font-family: Palatino, "Palatino Linotype", "URW Palladio", "Book Antiqua", serif;		/* body_font */
	font-size: small;
	font-size: 100%;
	font-weight: bold;
	text-align: left;
	vertical-align: bottom;
}

tbody {
	margin: 0px;
	border: 0px;
	padding: 0px;

	text-align: left;
	vertical-align: top;

	background-color: #000000;		/* background_color */
}

td {
	margin: 0px;
	border: 0px;
	padding: 0px;
}





/*

	left column: main navigation

*/

div#main_nav {
	margin-top: 48px;
	margin-bottom: 128px;

	width: 20%;
	min-width: 136px;

	text-align: center;

	float: left;
}



div#main_nav ul {
}

div#main_nav li {
	margin-top: 1px;
	margin-right: 1em;

	font-size: 100%;
}

div#main_nav li span {		/* for inactive "links" (i.e. the current page) */
	display: block;
	padding-top: 3px;
	padding-bottom: 1px;

	border: 0px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-color: #8080a0;		/* background_gray_hc_color */
	border-style: solid;

	font-weight: bolder;		/* io_6 */
	text-align: center;

	color: #8080a0;		/* background_gray_hc_color */
	background-color: #000000;		/* background_color */
}

div#main_nav li a {
	display: block;
	padding-top: 4px;
	padding-bottom: 2px;

	text-align: center;
}

div#main_nav li.super {		/* for "superdirectory" */
	margin-right: 2em;
	margin-bottom: 8px;
}


div#main_nav li.sub {		/* for inactive subdirectory "links" */
	margin-left: 1em;
}





/*

	center column: body

*/

div#mainbody {
	margin-top: 12px;
	margin-bottom: 128px;

	width: 55%;		/* note_1 - set to 54% or 55% depending... */

	float: left;
}

div#mainbody p {
	margin-left: 1em;
	margin-right: 1em;
}



/* table (list) of contents */

div#mainbody ul {
	margin-top: 2em;
	margin-bottom: 2em;
}

div#mainbody li {
	margin-top: 1px;		/* prettier than setting border-top-width */
	margin-left: 1em;
	margin-right: 1em;

	font-family: "Courier New", Courier, monospace;		/* heading_font */
	font-size: 90%;
}

div#mainbody li a {
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 5px;
	padding-bottom: 2px;

	text-align: center;

	display: block;
}



/* upcoming performances, etc. */

div#mainbody div.tablecontainer {		/* note_4 margins logically should be set in table, but... */
	margin-left:1em;
	margin-right:1em;
}

div#mainbody table {
	margin-top: 0px;		/* note_2 logically margin-top should be set here not in caption */
	margin-bottom: 2em;
	margin-left: 0px;			/* note_4 left margin set in div.tablecontainer instead */
	margin-right: 0px;		/* note_4 right margin set in div.tablecontainer instead */

	border-bottom-width: 16px;	/* little strip at the bottom */
	border-color: #202020;		/* background_gray_color */
	border-style: solid;
}

div#mainbody caption {
	padding-top: 4em;	/* note_2 logically margin-top should be set in table */
	padding-bottom: 0.4em;
}

div#mainbody th {
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 6px;
	padding-bottom: 0px;
}

div#mainbody th.date {
	width: 25%;
}

div#mainbody th.venue {
	width: 25%;
}

div#mainbody th.time {
	width: 15%;
}

div#mainbody th.details {
	width: 35%;
}

div#mainbody th.details-time {
	width: 50%;
}

div#mainbody tbody {
	font-family: Palatino, "Palatino Linotype", "URW Palladio", "Book Antiqua", serif;		/* body_font */
	font-size: 85%;
}

div#mainbody td {
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 4px;
	padding-bottom: 2px;
}



/* linked resources and downloadable items */

div#mainbody table.links {
	border: 0px;	/* no strip at the bottom */

	background-color: #000000;		/* background_color */
}

div#mainbody table.links tbody {
	font-size: 90%;
}

div#mainbody table.links td {
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 4px;
	padding-bottom: 2px;

	width: 65%;

	text-align: left;
	vertical-align: text-bottom;
}

div#mainbody table.links td.item {
	padding: 0px;

	width: 35%;

	font-family: "Courier New", Courier, monospace;		/* heading_font */
	font-weight: bold;		/* io_6 */
}

div#mainbody table.links td.item a {
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 4px;
	padding-bottom: 2px;

	text-align: right;

	background-color: #202020;		/* background_gray_color */

	display: block;
}

div#mainbody table.links td.item a:hover {
	color: #000000;		/* background_color */
	background-color: #8080a0;		/* background_gray_hc_color */

	text-decoration: none;
}






/*

	right column: side box

*/

div#rightbox {
	margin-top: 0px;
	margin-bottom: 128px;

	width: 25%;
	min-width: 170px;

	font-size: 90%;
	color: #ffffff;		/* foreground_hc_color */

	float: right;
}



div#rightbox h3 {
	margin-top: 1em;
	margin-bottom: 3px;

	text-align: left;
}

div#rightbox h3.first {
	margin-top: 0px;
}



div#rightbox p {
	margin-left: 1em;

	text-align: left;
}

div#rightbox div.news p {
	margin-left: 2em;
	margin-top: 4px;

	text-indent: -1em;
}

div#rightbox div.news p.first {
	margin-top: 0px;
}



/* project list */

div#rightbox ul {
	margin-top: 1px;
	margin-bottom: 3px;
}

div#rightbox li {
	margin-top: 1px;
	margin-left: 1em;

	font-family: "Courier New", Courier, monospace;		/* heading_font */
	font-size: 90%;
	text-align: left;
}

div#rightbox li a {
	padding-left: 4px;
	padding-right: 2px;
	padding-top: 3px;
	padding-bottom: 1px;
}





/*

	footer

*/

div#footer {
	clear: both;

	font-size: 85%;
	font-weight: bold;		/* io_7 */
	color: #ffffff;		/* foreground_hc_color */
}

div#badges div {
	width: 25%;

	text-align: center;

	float: left;
}

div#copyright {
	padding-top: 1em;	/* margin-top doesn't work with some browsers */
	padding-bottom: 2.5em;

	width: 50%;

	clear: both;
	float: left;
}

div#copyright p {
	margin: 0px;

	font-family: "Courier New", Courier, monospace;		/* heading_font */		/* io_3 */
	text-align: center;
	text-transform: lowercase;
	text-indent: 0px;
}

div#update {
	padding-top: 1em;	/* margin-top doesn't work with some browsers */
	padding-bottom: 2.5em;

	width: 50%;

	float: right;
}

div#update p {
	margin: 0px;
	margin-bottom: 0.5em;

	font-family: "Courier New", Courier, monospace;		/* heading_font */		/* io_3 */
	text-align: center;
	text-transform: lowercase;
	text-indent: 0px;
}