/* CSS Document */


/* start general layout */
/* v2 */
html {height:100%; overflow:scroll;}

/* start v2 */
body { font-family:Arial, Helvetica, sans-serif; color:#333333; font-size:12px; }

#wrapper { /*width:760px;*/ width:875px; margin:0 auto; padding:0; }
/* orig header -- deeper */
/*#header { width:100%; height:150px; background-image:url(assets/images/header.gif); position:relative; }*/
#header { width:100%; height:115px; background-image:url(assets/images/header.gif); position:relative; background-repeat:no-repeat; }
#header .logo { float:left; }
/*#header .title { position:absolute; top:45px; left:25px; font-size:26px; color:#fff; font-weight:bold; }*/
#header .title { position:absolute; top:40px; left:25px; font-size:26px; color:#fff; font-weight:bold; }
#header .the { color:#a2dea2; }
#header .musical { color:#fef69c; }
#header .intervals { color:#F93; }
#header .tutor { color:#a1caf3; }
.copy { color:#111; font-size:12px; }
#headinfo { float:right; width:200px; margin:10px 5px 0 0; height:20px; padding:05px 0 10px 0; background:url(assets/images/headinfobg.gif) no-repeat; text-align:center; }
#headinfo a { color:#EFEFEF; }
#headinfo a:hover { color:#D2D2D2; border-bottom:1px solid #D2D2D2; }

/*
.logotext { float:left; width:200px; margin:55px 0 50px 30px; font-family:Trebuchet MS; font-size:22px; color:#FFFFFF; }
.logotext strong { color:#EFEFEF; }
.logotext2 { font-size:14px; }
*/

/*
#nav { width:100%; overflow:auto; padding:1px; margin:0; background-color:#D2D2D2; }
#nav ul { margin:0; padding:0; }
#nav ul li { float:left; list-style:none; padding:0; }
#nav ul li a { display:block; width:100px; height:15px; padding:8px 0; margin:0 1px 0 0; background-color:#EFEFEF; text-align:center; }
#nav ul li a:hover { background-color: #FFFFFF; color:#999999; }
*/

#content { width:100%; }

#left { float:left; width:20%; }
#left ul { /*margin: 0;*/ margin: 7px 0px 0px 0px; padding:0; }
#left ul li { list-style:none; margin:1px 0; padding:0; }
#left ul li a { display:block; width:140px; margin:0; padding:5px; color:#009; background-color:#E6E6E6; }
#left ul li a:hover { /*background-color:#FFCD59;*/ background-color:#fef69c; color:#009; text-decoration:none;}
#left ul li ul { margin: 0; padding:0; }
#left ul li ul li { list-style:none; margin:1px 0; padding:0; }
#left ul li ul li a { padding:5px; background-color:#EFEFEF; font-size:12px; }

#breadcrumb { float:left; width:80%; /*background-color:#EFEFEF;*/ background:#fff; /*height:15px;*/ /* just vertical space for now -- matches #left top margin above */height:7px; }

#right { float:left; width:80%; }
/*#right .postinfo { display:block; width:90%; margin:5px; padding:6px; background-color:#ffffff; border:1px solid #D4D4D4; }
#right p a { color:#FFCD59; font-weight:bold; text-decoration:underline; }*/

.clear { clear:both; }

#footer {
	width:875px;
	color:#999;
	clear:both;
	margin:0 auto;
	text-align:center;
	margin-top:30px;
	border-top:1px solid #999;
}
/* end v2 */
/* end general layout */



/* start text styles */
/* v2 */
a {
text-decoration:none;
color:#009;
}
/* v2 */
a:hover {
/*text-decoration:underline;*/
background:#ff9;
}

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

.blueNum
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: blue;
font-weight: bold;
}
.black9
{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: black;
font-weight: bold;
}

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

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


/* v2: */
.tinyBlack
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: black;
font-weight: bold;
}
/* v2: */
a.tinyBlack:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: red;
font-weight: bold;
text-decoration:none;
}

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

.style2 {  font-family: 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: 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: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #ff0000;}

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

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

/*
.style2darker {  font-family: 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: 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: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #cc0000}
*/

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

.titletext1 {
font-family: 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;
}

/* v2: */
h2 {
font-family: Arial, Helvetica, sans-serif; 
font-size: 16px; 
font-style: normal; 
font-weight: bold; 
color: #252525;
padding:0;
margin:0;
}

.mode_title {
	padding-left:30px;padding-top:15px;
}

h3 {
font-family: 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;
}

/* v2: */
.see_answers {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: bold; color: #252525; visibility:visible; margin-top:10px;}

.have_suggestions {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; color: #111111; visibility:visible; margin-top:10px;}

a.what_inspired {
text-decoration:none;
font-weight:bold;
font-style:italic;
}
a.what_inspired:hover {
/*text-decoration:underline;*/
font-weight:bold;
font-style:italic;
}
/* end text styles */



/* start table related styles */
/* start v2 */
table {
border:2px;
border-color:#666666;
margin-left: auto;
margin-right: auto;
border-collapse:collapse;
}

.listenintervaltbl {
height:100px;
width:700px;
margin-left: auto;
margin-right: auto;
/*
border:1px;
border-style: solid;
border-color:#999999;
*/
}

.listenintervalsongstbl {
margin-left: auto;
margin-right: auto;
/*
border:1px;
border-style: solid;
border-color:#666666;
*/
width:700px;
/*background-color:#fff;*/
border-bottom: 5px solid #aaa;
}

.listenintervalssongs_content {
font-weight:bold;margin-left:105px;margin-right:20px;text-align:left;
padding-top:20px;
}

/* end v2 */
/* end table related styles */


/* start misc spacings */


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;
margin-top:15px;
}

img {
border:0px;
}


:active, :focus{
outline:none;
}


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

.bk_darker {
background:url('grays2.gif');
background:url('gray_background_11.gif');
}


:active, :focus{
    outline:none;
}

.instruction_bk {
	background-color:#f5f5f5;
}


/* 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 */

/* v2 */
.radiostyle {
 	height:10px;
 	width:10px;
 	vertical-align:1px;
}

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

.play_mode {
border: 1px solid #999999; 
margin-top:15px;
position:relative;
}

.play_mode_item {
height:25px;
width:110px;
position:relative;
display:inline-block;
}

.play_mode_item span {
position:absolute;
top:5px;
left:10px;
}

.mode_onkeys {
position:absolute;
top:80px;
left:480px;
width:180px;
}

.mode_flash_link {
position:absolute;
top:160px;
left:480px;
width:180px;	
}




/* 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 */



/* not using curr: */

/*


.awesome{
background: #666 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 2px 8px 2px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}

.blue8
{
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: blue;
font-weight: bold;
}

.redNum
{
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: red;
font-weight: bold;
}

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

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

/*
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;}
*/

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

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

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

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

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