/* thespirit.css - Standard style sheet for thespiritmusic.net*/

/* Set defaults for all containers (must be explicit for some browsers) */

body, p, tr, td, th, div, blockquote, dl, ul, ol, img {
	font-family: Arial, Helvetica, Sans-serif;
	font-size: medium;
	color: #000000;
	margin: 0;
	border: 0;
	padding: 0;
}

body { 
	width: 800px; /* This is where the width of the active part of the page is defined */ 
	margin-top: 25px;	
	margin-bottom: 25px;	
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/background.jpg); 
}

/* --------- Header contains image banner, navigation and logo ----------- */

table { border-collapse: collapse; } /* No border/framing pixels for any tables by default */

/* --------------- Main body of text, contents, etc. ------------ */

.page { 

	clear: left;
	width: 800px;
	margin-bottom: .6em;
	font-size: .8em;
	color: #000000;
	background-image: url(../images/trans15.png);
}

.header { 
	margin-top: 0em;
	margin-bottom: 1em;
	background-image: url(../images/HeadAndTexture-800-500.png);
	background-repeat: no-repeat;

	padding-top: 360px; /* Define where text starts */
	height: 140px;		/* imageheight - padding-top (to ensure full image is displayed, but no more) */
	padding-left: 5em;
	padding-right: 15em;
	font-size: 1em;
	color: #000000;
}

.content { 
	width: 600px;
	padding-left: 5em;
	padding-right: 1em;
	padding-bottom: 2em;
	font-size: 1em;
	color: #000000;
}

.content a { color: #332222; text-decoration: underline; }
.content a:hover { color: #664444; text-decoration: underline; }

.content a.license { color: #333333; text-decoration: none; }
.content a.license:hover { color: #333333; text-decoration: underline; }

/* For a collection of pieces of music */

.collection { 

	width: 600px; 
	margin-bottom: 2.5em; 
	line-height: 1.75; 
}

.collection col.name { width: 20em; }
.collection col.time { width: 7em; }
.collection col.play { width: auto; }

.collection col.mp3 { width: 7em; }
.collection col.ogg { width: 7em; }
.collection col.wav { width: 7em; }

.collection td { font-size: .8em; 	color: #000000; vertical-align: center; }

.collection td.collectionname { font-size: 1.2em; padding-bottom: .5em; }
.collection td.description { padding-bottom: 1em; }
.collection td.trackname { padding-left: 3em; }
.collection td.totalplayingtime { padding-left: 3em; padding-top: 1.5em; padding-bottom: .5em; }
.collection td.copyright { color: #CCCCCC; padding-top: 1em; }
.collection td.copyright a { color: #DDDDDD; text-decoration: underline; }
.collection td.copyright a:hover { color: #FFFFFF; text-decoration: underline; }
.collection td.downloads { padding-top: 1em; padding-bottom: 0.5em; }
.collection td.downloads a { color: #EEEEEE; text-decoration: underline; }
.collection td.downloads a:hover { color: #FFFFFF; text-decoration: underline; }

.collection td.button { text-align: left; }
.collection td.button a { background-color: transparent; position: relative; bottom: -2px; /* Shift image down a bit to align with text */ }
.collection td.button a:hover img {	background-color: #FFFFFF; }

.translation { border-collapse: separate; padding-bottom: .5em; }
.translation td { vertical-align: top; padding-right: 1em; padding-bottom: 1em; font-size: .8em; }
.translation .spacer { height: 15px; }

/* For a table of links et al */

.contact { 

	width: 100%; 
	margin-bottom: 2.5em; 
	line-height: 1.75;
	background-image: url(../images/transparency25.png);
	border: 1px solid #222222;
}

.contact col.url { width: 25em; }
.contact col.description { width: 25em; }
.contact col.padding { width: auto; }

.contact td { vertical-align: bottom; padding-top: 1em; font-size: 0.8em; color: #EEEEEE; }

.contact td.url { color: #CCCCCC; }
.contact td.url a { color: #AAAAAA; text-decoration: underline; }
.contact td.url a:hover { color: #FFFFFF; text-decoration: underline; }

.contact td.description { }

.contact td.message { color: #DDDDDD; padding-top: 1.5em; padding-bottom: 1em; }