/*  Color Styles */

body {
  color: black;
  background-color: white;
}

/*  Header */

#header {
  color: #cc99cc; 
  background-color: #CC99CC;
  border-bottom: 1px solid #666633;
}

#header h1{
  color: white;
  background: transparent;	
}

/* Top global nav */

.topnav {
  color: white;
  background-color: #666699;
  border-top: 1px solid #666633;
}

.topnav a:link {
  color: white;
  background-color: transparent;
}  

.topnav a:visited {
  color: #cccc99;
  background-color: transparent;
}

.topnav a:hover {
  color: #666699;
  background-color: white;  
}


/* Left Side Bar */

#side-bar {
  background-color: transparent;
  color: black;
  }

#side-bar div {
  border-bottom: 1px solid #666633;
}

#side-bar a:link{
  color: white;
  background-color: transparent;
}

#side-bar a:visited {
  color: #663333	;
  background-color: transparent;
}
#side-bar a:hover {
  color: white;
  background-color: #666699;
}
#side-bar ul {
border-bottom: 1px solid #666633;
}

#side-bar .sideBarText a:link {
  color: #333366;
  background-color: transparent;
}

#side-bar .sideBarText a:visited {
  color: white;
  background-color: transparent;
}

#side-bar .sideBarText a:hover {
  color: #663333;
  background-color: transparent;
}
/* ----- now highlight active tab based on body @class attribute ----- */

body.home #side-bar li#nav-home a, 
body.about #side-bar li#nav-about a,
body.web #side-bar li#nav-web a,
body.res #side-bar li#nav-res a, 
body.prof #side-bar li#nav-prof a, 
body.pubs #side-bar li#nav-pubs a, 
body.fun #side-bar li#nav-fun a
{
  background-color: #333366;
  color:#CC99CC;
  text-decoration: none;
}

/*  Main Content */

#main {
  color: black;
  background-color: white;
} 

#main a:link {
  color: #333366;
  background-color: transparent;
}

#main a:visited {
color: #663333;
background-color: transparent;
}

#main a:hover {
  color: white;
  background-color: #9999cc;
}

#main h2{
  color: black;
  /*background-color: #9999cc;*/
  border-bottom: 2px groove #9999cc;
  /*border-left: 2px solid black;*/
}

#main h3 {
  color: black;
  background-color: white;
}

#main h4 {
  color: #663333;
  background-color: white;
}

/* Footer */

#footer {
	color: black;
	background-color: white;
   border-top: 1px solid #666633;
}

#footer a:link {
  color: #333366;
  background-color: transparent;
}

#footer a:visited {
  color: #663333;
  background-color: transparent;
}

#footer a:hover {
  color: white;
  background-color: #333366;
}