html>body { /* be nice to Opera */
}

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid rgb(115,122,217);
}
   
#container {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  background: rgb(224,237,197);
  background: rgb(67,203,194);
}

#header {
	color: white;
	text-align: left;
	padding: 0 0 0 0;
	width: 800px;
	margin: 0 auto;
	background: rgb(144,203,67); 
	border-bottom: 1px solid white; 
}

#titleText1 {
	font-size: 28px;
	color: white;
	padding: 0 0 0 5px;
	text-decoration: none;
	font-family: "Comic Sans MS", sans-serif;	
}

#titleText2 {
	font-size: 16px;
	margin: 0;
	padding: 0 0 0 5px;
	margin: 0 5px 0 0;
	color: white;
	font-family: arial, verdana, sans-serif;
}


#navContainer {
	border-bottom: 2px solid rgb(203,67,76); 
}

#navContainer .current { 
	text-decoration: underline; 
} 

.navTable {
	background-color: rgb(67,144,203);
	width: 100%;
	padding-left: 5%;
	text-decoration: none;
}

.navTable td {
	width: 20%;
	text-align: center;
	font-family: Arial,Helvetica,sans-serif;
}

.navTable td  a {
	color: white;
	text-decoration: none;
	font-weight: bold;
}

.navTable td a:hover { 
	background-color: white; /*rgb(192,192,192);*/  
	color: rgb(67,76,203); /* rgb(64,64,64); */
}

#sideBar {
	float: left;
	width: 200px;
}

#sideBarTitle {
	font-weight: bold;
	color: rgb(67,76,203);
/*text-align: center;*/
	padding-left: 40px;		/* TODO: fix temporary hack to align title w/ sidebar items*/
	padding-top: 14px;
}

.sideBarTable td a:hover {
	background-color: white;
	color: rgb(67,76,203);
}

.sideBarTable td {
	width: 20%;
	padding-left: 40px;
	text-align: left;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
}

.sideBarTable td  a{
	color: white;
	text-decoration: none;
	font-weight: bold;
}

.sideBarTable td a:hover {
	background-color: white;
	color: rgb(67,76,203);
}

#sideBar #sidebarCurrent {
	text-decoration: underline;
}

#sideBar ul {
	margin-left: 0px;
	font-size: 14px;
	font-weight: bold;
}

.sideBar td {
	width: 20%;
	text-align: left;
	padding-left: 40px;
	font-family: Arial,Helvetica,sans-serif;
}

.sideBar td  a{
	color: white;
	text-decoration: none;
	font-weight: bold;
}

.sideBar td a:hover {
	background-color: white;
	color: rgb(67,76,203);
}

#sideBar ul li{
	text-decoration: none;
	display: block; /*inline; -- not all items on own line with this, but gets rid of bullets for stupid IE*/
}

#sideBar ul li a {
	color: white;
	text-decoration: none;
/*	margin-left: 0;
	padding-left: 0;*/
}

#sideBar ul li a:hover {
	background: white;
	color: rgb(126,67,203); /*rgb(194,67,203); rgb(67,203,126);*/
	text-decoration: none;
}
#sideBar ul li a:visited {
	text-decoration: none;
}

#content {
  margin-left: 200px;
  background: rgb(224,237,197);
}

.missionTitle {
	font-family: "Comic Sans MS", arial, sans-serif;	
	font-size: 14;
	font-weight: bold;
}

.missionText {
	font-family: tahoma, arial, "Comic Sans MS", sans-serif;	
	font-size: 11;
}

.bioHeading {
	font-size: 16;
	font-weight: bold;
}

#contactText {
	/*text-align: center;*/
	/*width: 556px;  this works for Firefox & Opera, but not IE; when removed, there is a small gap on the righ in Firefox & Opera*/
	/*margin: 0px auto;*/
	padding-left: 292px;	
  padding-top: 15px;
	padding-bottom: 40px;
/*	margin-bottom: 400px; */	
}

#pageText {
	font-size: 14px;
	background: rgb(224,237,197);
/*	background: rgb(67,203,194); */	
}

#linksText {
	padding-top: 14px;
	padding-bottom: 10px;
	padding-left: 75px;
}

#bioText {
	padding-top: 14px;
	padding-bottom: 10px;
	padding-left: 15px;
}

.linksCategory {
	color: rgb(203,67,76);
	font-weight: bold;
	font-size: 16px;
}

#storyText {
	padding: 10px 10px 10px 10px;
}

.songButtonInLinks{
	font: 15px/1.5 "Comic Sans MS", "Comic Sans MS", "Comic Sans MS", "Comic Sans MS", sans-serif;
	color: purple;
	background-color: transparent; /*rgb(224,237,197);*/
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	text-decoration: underline;
	display: inline;
}

#discText {
	padding-top: 14px;
	padding-bottom: 10px;
	padding-left: 0px;
}
.discTable {
	width: 100%;
}

.discTable TR{
	text-align: center;
}

.photographCredit {
	font: 14px "Comic Sans MS",arial,sans-serif;
}

#cdTitle{
	color: rgb(203,67,76);
	font-size: 22px;
	font-weight: bold;
	padding-left: 0px;
	padding-bottom: 4px;
}

#cdTitleStories {
	text-align: center;
	color: rgb(203,67,76);
	font-size: 18px;
	font-weight: bold;
	padding-left: 0px;
	padding-bottom: 8px;
}

#cdTitleStories2 {
	text-align: center;
	color: rgb(203,67,76);
	font-size: 14px;
	padding-bottom: 8px;
}

/* this should work,, but it doesn't; kept border=1 in index.html, which works despite being deprecated; i need a D-R-I-N-K ... */
#homePageImage {
	border: 1;
}

.cdCoverImage {
	border: 3;
}

#songList {
	padding-left: 75px;
}

#songListFooter{
/*	text-align: center; */
	font-weight: bold;
	padding-left: 75px;
	padding-top: 15px;
	background: rgb(224,237,197);
}

.musicIcon {
	border: 0;	
}

#songLyrics {
	text-align: center;
	font-size: 16px;
	padding-top: 15px;
}

#songTitle {
	color: rgb(203,67,76);
	font-size: 18px;
	font-weight: bold;
}

#songLyricsFooter {
	font-weight: bold;
	padding-top: 10px;
	font-size: 18px;
	text-align: center;
}

.songAndIcon {
	display: block;
	text-align: left;
	margin: 0;
	padding: 0;
	text-indent: 0px;
}	
	
.songButton {
	font: 16px/1.5 "Comic Sans MS", sans-serif;
	color: #669933;
	background-color: transparent; /*rgb(224,237,197);*/
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	text-decoration: underline;
	display: inline;
	height: auto;
	width: auto;
	overflow: visible;		/* needed for silly IE to set width of button properly*/
}

#albumPhotos {
	padding-left: 15px;
}

.thumbImage {
	border: 1;	/* does not work */
	width: 158;	/* 79 x 120 */
	height: 240;
}

#largeImageView{
	width: 240px;
	height: 340px;
}

#footer {
	border-top: 2px solid rgb(203,67,76); 
	/*clear: both;*/
}

#footer .current { 
	text-decoration: underline; 
} 

.navTableFooter {
	background-color: rgb(173,217,115); /*rgb(201,230,163);*/
	width: 100%;
	padding-left: 5%;
	text-decoration: none;
}

.navTableFooter td {
	width: 20%;
	text-align: center;
	font-family: Arial,Helvetica,sans-serif;
}

.navTableFooter td  a {
	color: rgb(67,76,203); /* rgb(126,67,203);*/
	text-decoration: none;
	font-weight: bold;
	font-size: 12px;
}

.navTableFooter td a:hover { 
	background-color: rgb(67,144,203); /*rgb(192,192,192);*/  
	color: white; /*rgb(67,76,203); /* rgb(64,64,64); */
}