/* 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:active img{
    border: 2px solid red;
    }      
  #content {
    min-height: 480px;
    padding:0;
    text-align: center;
    position: relative;
  }     
    .screen800 #content {
      min-height: 350px;
    }    	
  #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;
    } 
  #panelL {
    float:left;
    width:49%;
    min-height: 540px;
    border-right: medium solid #ccc;
    text-align: left;
    margin:3px 2px 12px 3px;
    padding:3px 2px 16px 4px;
  }
    .screen800 #panelL {
      min-height: 404px;
    }     
  #panelR {
    float:left;
    width:47%;
    text-align: left;
    margin:3px 1px 12px -6px;
    padding:8px 2px 16px 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; 
    } 
    #xlverdiv {
      position: absolute;
      text-decoration: none;
      height: 40px;
      width: 390px;
      bottom:40px;
      left:40px;
      font-size:0.8em;  
    }
    .ie #xlverdiv {
      bottom: 36px; 
    } 

    #verdiv {
      position: absolute;
      text-decoration: none;
      height: 40px;
      width: 390px;
      bottom:40px;
      left:40px;
      font-size:0.8em;  
    }
    .ie #verdiv {
      bottom: 36px; 
    } 
       
    #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;
    }                     

    .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;
    } 
    .tight {
       margin-top: 0px;
    }
    #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; 
  }