A:link
{
    COLOR: #637fEE
}
A:visited
{
    COLOR: #637fEE
}
A:hover
{
    COLOR: #ff6600
}
A:active
{
    COLOR: #ff9900
}

BODY
{
    FONT-SIZE: 10pt;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    FONT-FAMILY: Arial, sans-serif;
    BACKGROUND-COLOR: #000000;
    COLOR: #ffffff;
}


/* ST means SkinnyTable */
table.skinnytable
{
  margin: 1em 1em 1em 2em;
  background: #000000;
  border-collapse: collapse;
}
table.skinnytable th, table.skinnytable td
{
  border: 1px silver solid;
  padding: 0.2em;
}
table.skinnytable th
{
  background: #303040;
  text-align: left;
}
table.skinnytable caption
{
  margin-left: inherit;
  margin-right: inherit;
}


.imgBtnExIntervalComparison
{
	background-image:url("/images/ExIntervalComparison.gif");
	background-repeat:no-repeat;
}

.imgBtnExIntervalIdentification
{
	background-image:url("/images/ExIntervalIdentification.gif");
	background-repeat:no-repeat;
}

.imgBtnExChordIdentification
{
	background-image:url("/images/ExChordIdentification.gif");
	background-repeat:no-repeat;
}

.imgBtnExScaleIdentification
{
	background-image:url("/images/ExScaleIdentification.gif");
	background-repeat:no-repeat;
}

.imgBtnExPerfectPitch
{
	/*background-image:url("/images/ExScaleIdentification.gif");
	background-repeat:no-repeat;*/
}

/* The next class defines the train button in normal state, hover, active, and then red & green based on answer */

.TrainButton, a.TrainButton, a.TrainButton:link, a.TrainButton:visited
{
	background: url('/images/TrainButton.png') no-repeat top left;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	width: 224px;
	height: 44px;
	
	color: #FFFFFF;
	text-decoration: none;
	text-align:center;

	font-size: 1.1em;
}

a.TrainButton:hover
{
	background: url('/images/TrainButton.png') no-repeat top center;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	width: 224px;
	height: 44px;
	
	color: #FFCC80;
	text-decoration: none;
	text-align:center;

	font-size: 1.1em;
}

a.TrainButton:active
{
	background: url('/images/TrainButton.png') no-repeat top right;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	width: 224px;
	height: 44px;
	
	color: #FFFFFF;
	text-decoration: none;
	text-align:center;

	font-size: 1.1em;
}

.TrainButtonRed
{
	background: url('/images/TrainButton.png') no-repeat bottom right;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	width: 224px;
	height: 44px;
	
	color: #FFFFFF;
	text-decoration: none;
	text-align:center;

	font-size: 1.1em;
}

.TrainButtonGreen
{
	background: url('/images/TrainButton.png') no-repeat bottom left;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	width: 224px;
	height: 44px;
	
	color: #FFFFFF;
	text-decoration: none;
	text-align:center;

	font-size: 1.1em;
}