/* controls the div that contains the entire tab window; this is part of my xhtml */

#tabContainer {
	background: none;
	font-weight: normal;
	margin: 0 15px;
	font-size: 14px;
}

/* controls the div that contains the entire tab window; this is part of my xhtml */

#innerTabContainer {
	/* background: #ccc; */
}

/* controls the div that contains the entire tab content; appears to be dynamically added by js because I have no such div in my xhtml file */

#tabContainer .tab-wrapper 
{
	padding: 15px;
	margin: 0;
	border: 1px solid #eee;
	/* clear: both; */ /* is preventing .tab-wrapper and .tab-menu from touching like normal tabs */
	background: gray; /* tried background: #669999; */
	text-align: left;
}

/* controls the div that contains the tab links; appears to be dynamically added by js because I have no such div in my xhtml file */

#tabContainer .tab-menu 
{
	margin: 0;
	padding: 0;
	list-style: none;
	/* overflow: auto; */ /*causing a weird white box when activated */
	/* border: 1px green solid; */
	height: 32px;
}

/* controls the position of tab links within .tab-menu above; appears to be dynamically added by js because I have no such div in my xhtml file */

#tabContainer .tab-menu li
{
	margin: 0;
	margin-right: 10px;
	padding: 0;
	float: left;
	height: 32px;
	line-height: 20px; /* or 18px; creates space above the text in the tab */
	background: #ccc;
	/* overflow: hidden; */
	/* border: 1px yellow solid; */	
}

#tabContainer .tab-menu li span
{
	/* font-style: normal; prevents the tab text from being italicized */
}

/* controls the style of tab links within .tab-menu above; appears to be dynamically added by js because I have no such div in my xhtml file */

#tabContainer .tab-menu li a
{
	margin: 0;
	padding: 2px 14px 15px 14px;
	font-weight: normal;
	color: #330099;
	font-style: normal;
	/* border: 1px black solid; */
}

/* sets the hover and focus styles of tab links within .tab-menu above; appears to be dynamically added by js because I have no such div in my xhtml file */

#tabContainer .tab-menu li a:hover,
#tabContainer .tab-menu li a:focus
{
	color: gray;
	/* your effect here */
}

/* sets the style of the selected tab link; appears to be dynamically added by js because I have no such div in my xhtml file */

#tabContainer .tab-menu li.tab-selected a
{
	text-decoration: none;
	color: #FFF;
	background: gray;
	border: 1px solid #eee;
	border-bottom: none;
	/* your effect here */
}