/* CSS Document */
	html,body {
		margin:0;
		padding:0;
		color:#000;
		background:#ffff99;
	}
	.ie html {
  	 overflow-y: scroll;
  }
	body {
		padding:6px 10px 10px 10px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		text-align: center;
		background-color: #ffff99;
	}
    .screen800 body {
      padding:4px;
    }  	
    #menu {
      margin:0;
      position: absolute;
      height: 32px;
      width: 100%;
      bottom:2px;
      left:2px;
      /*border: 2px solid red;*/
      text-align: center;
    }  
    .ie #menu {
      bottom:-2px;
      height: 28px;
    }
    #menu a {      
      text-decoration: none;
    }	
    .aimg img{
      margin-top:1px;
      border: 2px solid #fff;
    }
    .aimg:hover img{
    border: 2px solid navy;
    }
    
    .aimg:hover{
    color: red; /* irrelevant definition to overcome IE bug */
    }    
    .a2img img{
      margin-top:0px;
      border: 2px solid #ccc;
    }
    .ie .a2img img {
      margin-top:8px;
    }
    .a2img:hover img{
    border: 2px solid red;
    }  
    .a2img:hover{
    color: red; /* irrelevant definition to overcome IE bug */
    }
    .a2img:focus img{
    border: 2px solid red;
    } 
    .a2img:active img{
    border: 2px solid red;
    }    
    .afocus {
      font-size:1.05em;
      font-weight:600;    
    }
    .afocus:hover {
      color:red;
    }
    .afocus:focus {
      color:green;
    }
    .afocus:active {
      color:green;
    }     

    #content {
      min-height: 480px;
      padding:0;
      text-align: center;
      position: relative;
    }     
    .screen800 #content {
      min-height: 350px;
    }    	

    #panelL {
      float:left;
      width:49%;
      min-height: 540px;
      border-right: medium solid #ccc;
      text-align: left;
      margin:3px 2px 10px 3px;
      padding:3px 2px 6px 4px;
    }
    .screen800 #panelL {
      min-height: 404px;
    }     
    #panelR {
      float:left;
      width:47%;
      text-align: left;
      margin:3px 1px 10px -6px;
      padding:8px 2px 10px 6px;
      border-left: medium solid #ccc;     
    }
    #panelC {
      width:55%;
      margin: 10px auto;
      padding:8px 2px 10px 2px;      
      text-align: left;
    }      

    #logoBot {
      position: absolute;
      text-decoration: none;
      height: 21px;
      width: 152px;
      top: 4px;
      left:5px;   
    }
    .ie #logoBot {
      top: 20px; 
    } 
    #logoTop {
      position: absolute;
      text-decoration: none;
      height: 21px;
      width: 152px;
      top: 6px;
      right:2px;   
    }  
    #fsound {
      position: absolute;
      text-decoration: none;
      height: 18px;
      width: 180px;
      top: 16px;
      right:10px;
      font-size:10px; 
      color:#999;  /* #ccc #999 #666 */ 
    }   
    .ie #fsound {
      top: 28px;
    }
    #wrapper {
      min-height: 550px;
      width:80%;
      min-width: 762px;
      max-width: 1100px;      
      padding:0;
      margin: 0 auto;
      text-align: center;
      position: relative;
      border: 4px double blue;
      background:#fff;
    } 
    .screen800 #wrapper {
      min-height: 420px;
    }                       

    .startpicL {
      position: absolute;
      width: 148px;
      top: 25px;
      left:1px;   
    } 
    .startpicR {
      position: absolute;
      width: 148px;
      top: 190px;
      right:10px;   
    }    	
    .dashed {
      padding:3px;
      margin:2px;
      border: thin dashed #ccc;
    }
    .cf {
      clear: both;
      margin:0;
      padding:0;
    } 
    h1 {
      margin: 12px 0px 0px 0px;
      font-size:1.4em;
      font-weight:600;
      font-family:arial, helvetica, sans-serif;
      color:#000;      
    }
    .screen800 h1 {
      font-size:1.2em;
    }     
    h3 {
      margin: 4px 0px 0px 0px;
    }
    h4 {
      margin: 4px 0px 0px 0px;
    } 
    .bigbold {
      font-size:1.1em;
      font-weight:600;    
    }       
    ul {
      margin-top: 0px;
    }                   
    ol {
      margin-top: 20px;
    } 
    #instr {
      position: relative;
      width: 336px;
      padding:4px;
      margin-top: 25px;
      text-align: left;
      background-color: #ffff99; /*#ffff33 */
      border: 4px solid #ffff99;  
      color:black;
      overflow: auto;
    }   
    #toppanel {
      position: absolute;
      height: 250px;
      width: 100%;
      top: 5px;
      left:1px;
      text-align: center;     
    }
    #keybpict {
      width:762px;
      height:245px;
      margin: 0 auto;
      position: relative;
    }
    #practice {
      position: absolute;
      height: 42px;
      width: 86px;
      top: 250px;
      left:340px; 
    }   

  /* tooltip will display on :hover event */  
  .tool {
    position: relative;
  } 
  .tip {
    display:none;
  }
  span.tool:hover span.tip {
    display: block;
    z-index: 100;
    position: absolute;
    top: 1.5em;
    left: 0;
    width: auto;
    line-height: 1.2em;
    padding: 3px 7px 4px 6px;
    border: 1px solid #336;
    background-color: #f7f7ee;
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    text-align: left;
  }
  
  span.tool::after {
    padding-left: 2px;            
    content: url(../images/comment.gif);
  }
  .tipfont {
    color:red;
    font-style: italic;
  }
  .popInstr {
      text-align: left;
  } 
  .imgLeft {
     float:left;
  }  
  .msgFont {
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal; 
    font-style:italic; 
  }
  .highlight {
    background-color:#ffff99;
    color:red;
    font-size: 1.05em;
    font-weight: 500;
  }