/* CSS Document */

html {height: 100%;}

body {
margin:0 auto;
/*vlink:#333333;*/
height: 100%;
text-align:center;
}

/* start general layout */

#content{
position: relative;
min-height: 100%; 
background-color:#dddddd;
width:780px; 
text-align:center;
margin: 0px auto;
padding-top:15px;
border:1px solid #666666;
}
* html #content{height: 100%;}


.topNav {
text-align:center; padding:2px; padding-bottom:10px; border-bottom:1px solid #666666; margin-bottom:25px; width:auto;
}

.botNav {
text-align:center; padding:2px; padding-top:10px; border-top:1px solid #666666; margin-top:25px; width:auto;
}

/* end general layout */



/* start text styles */

a {
text-decoration:none;
}

.BlueLabel1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: bold; font-variant: normal; text-transform: none; color: #003399}

.blueNum
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: blue;
font-weight: bold;
}
.black9
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: black;
font-weight: bold;
}
.blue8
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: blue;
font-weight: bold;
}
.redNum
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: red;
font-weight: bold;
}

.yellLink
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
color: yellow;
font-weight: bold;
}

.smBlack
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: black;
font-weight: bold;
}

.smBlackpx
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: black;
font-weight: bold;
}

.smWhite
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: white;
font-weight: bold;
}

.tinyWhite
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
color: white;
font-weight: bold;
}

.tinyBlack
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
color: black;
font-weight: bold;
}

a.tinyBlack:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
color: red;
font-weight: bold;
text-decoration:none;
}

.tinyRed
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
color: red;
font-weight: bold;
}

.style1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #000000}
.style1 a:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: red}

.style2 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: black;}
.style2 a {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #0000cc;}
.style2 a:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #ff0000;}

.style3 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: italic; line-height: normal; font-weight: bold; font-variant: normal; padding:5px; color:#333333; background-color:#ffffff;}

.style4 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #000000}
.style4 a {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: darkblue}
.style4 a:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: red}


.style2darker {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: black}
.style2darker a {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #000099}
.style2darker a:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #cc0000}


h1 {
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 18px; 
font-style: normal; 
line-height: normal; 
font-weight: bold; 
font-variant: normal; 
color: #000000;
}

.titletext1 {
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 18px; 
font-style: normal; 
line-height: normal; 
font-weight: bold; 
font-variant: normal; 
color: #000000;
}

.titletext1_container {
background-color:#999999;
border:1px solid #666666;
}

.with_css_shadow {
border-right:2px solid #333333; 
border-bottom: 2px solid #333333;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px; 
font-style: italic; 
line-height: normal; 
font-weight: bold; 
font-variant: normal; 
color: darkblue;
text-decoration: none;
}

h3 {
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-style: normal; 
line-height: normal; 
font-weight: bold; 
font-variant: normal; 
color: #000000;
}

.linksTitle {
color:darkblue;
font-size:11px;
text-align:left;
font-weight:bold;
text-decoration:underline;
*/
}

.instruction_box {
background-color:#ffffff; text-align:left; width:600px; border: 1px solid #999999;
}


a.otherresources {
color:#333333;
text-decoration:none;
}
a.otherresources:hover {
color:red;
}

/* end text styles */



/* start table related styles */

table {
border:2px;
border-color:#666666;
margin-left: auto;
margin-right: auto;
}

.listenintervaltbl {
height:100px;
width:680px;
margin-left: auto;
margin-right: auto;
border:2px;
border-style: solid;
border-color:#999999;
padding-top:10px;
margin-top:15px;
}



.listenintervalsongstbl {
margin-left: auto;
margin-right: auto;
border:1px;
border-style: solid;
border-color:#666666;
width:680px;
background-color:#666666;
padding-bottom:5px;
}

/* end table related styles */


/* start misc spacings */

.titlestyle1 {
width:14px; 
height:47px;
}

.titleXylophoneText {
width:14px;
height:40px;
vertical-align:middle;
border-spacing:2px;
}

.titleXylophoneTextSmaller {
width:14px;
height:35px;
vertical-align:middle;
}

div.one 
{margin-left: 2%;}


.mode_example_space_above_flash_reminder {
margin-top:20px;
}


/* end misc spacings */


/* start misc */


.listenintervalimg {
width:182px; 
height:89px;
border:1px;
border-style: solid;
border-color:#666666; 
vertical-align: bottom;
}

img {
border:0px;
}


:active, :focus{
outline:none;
}

ul {
width:100%;
}

ul li{
color : #000000;
background-color : transparent;
display: inline;
width:25%;
}

ol {
margin-left:142px;
}

ol li {line-height:1.5em;text-align:left;}


.gobacksymbol {
font-size:13px;color:red;
}

.bk_darker {
/*background:url(musicbg10.gif);*/
/*background:url('musicbg10a.gif');*/
/*background-color:#eeeeee;*/
/*background-color:#777777;*/
background:url('grays2.gif');
background:url('gray_background_11.gif');
}


:active, :focus{
    outline:none;
}


/* start css shadow */
.out {
  display:block;
  background:#336699;
  border:1px solid #dddddd;
  position:relative;
  margin:0 auto;
  }
.in {
  text-align:left;
  background:#fff;
  border:1px solid #555555;
  position:relative;
  padding:5px;
  font-weight:normal;
  }
.ltin {
  left:-2px; /* change for thicker or thinner shadow */
  }
.tpin {
  top:-2px;  /* change for thicker or thinner shadow */
  }
.narrow {width:25em;} /* change for desired width */
/* start css shadow */


.radiostyle {
 	height:10px;
 	width:10px;
 	vertical-align:-2px;
}

.label_below {
line-height:12px;
font-weight:bold;
}

/* end misc */

/* start tooltips */
/* works in ie6: */
.hotspot {cursor:pointer;}
#tt {position:absolute; display:block; /*background:url(../images/tt_left.gif) top left no-repeat;*/}
#tttop {display:block; height:5px; margin-left:5px; /*background:url(../images/tt_top.gif) top right no-repeat;*/ overflow:hidden}
#ttcont {display:block; padding:5px; margin-left:5px; background:#ffffff; color:#000000; /*border-right:5px solid orange;*/ border:1px solid #999999; text-align:left;}
#ttbot {display:block; height:5px; margin-left:5px; /*background:url(../images/tt_bottom.gif) top right no-repeat;*/ overflow:hidden}

/* end tooltips */