body { font-family: verdana; font-size:12pt;
    background-color:#eeeeff; color:#0000ff;  }
  p { } 

  td { padding:4px; }

  #CanvasSolution {
    position: absolute; top: 10px; left:60px;
    text-align:center;color:#3333ff;
    background-color:#ffffff; }

  #CanvasProblem {
    position: absolute; top: 10px; left:312px;
    text-align:center;color:#3333ff;
    background-color:#ffffff; }

   a.mainpage:link, a.mainpage:visited, a.mainpage:hover, a.mainpage:active {
    border: 0; 
    color:#3333ff; 
    background: none;
    padding:0px;
    opacity:0.4;
    filter:Alpha(opacity=40);
    text-decoration: none; }
  a.mainpage:hover {
    opacity:1.0;
    filter:Alpha(opacity=100);
      color:#cc9999; }
  a.mainpage:active {
    opacity:1.0;
    filter:Alpha(opacity=100);
      color:#cc9999; }

   a:link, a:visited, a:hover, a:active {
    border: solid 1px #ccccff; background-color: #5555ff;
    color:#ffffff; //padding:5px;
    text-decoration: none; }
  a:hover {
    border: solid 1px #ffcccc;
    background-color: #0000ff;
    color:#ffcccc;
 }
  a:active {
    border: solid 2px #9999ff;
    background-color: #3333ff;
}

.boxed { position:relative; width:50px; height: 30px; padding:5px; 
  border: solid 1px #6666ff; }

//span.piece { float:left; width:20px; height: 20px; }

 .simbtn { cursor: pointer; 
	   border:solid 1px #9999ff; 
	   background-color: #ffdddd;
//    color: #ffdddd;
}
  .simbtn:hover {
//    background-color: #2222ff;
    color: #ffbbbb;
}
  .simbtn:active {
    border: solid 2px #9999ff;
//    background-color: #2222ff;
    color: #ffbbbb;
}
 
.boxedOut { width:50px; height: 30px;
  background-color: #111111; border:1px; border-color: #cccccc; }

    #SMTitle {
      position:absolute; top:30px; left:94px; margin: 0px;
      font-size:14pt; color:#cccccc; } 
    #JSurferProblem {
      position:absolute; top:100px; left:400px; margin: 0px; }
    #JSurferSolution {
      position:absolute; top:100px; left:94px; margin: 0px; }
    #ProblemText {
	color:#0000ff;
	position:absolute; top:235px; left:384px; margin: 0px; }
    #SolutionText {
	color:#0000ff;
	position:absolute; top:235px; left:130px; margin: 0px; }
    #InfoText {
	color:#0000ff;
	position:absolute; top:275px; left:40px; width:600px; margin: 0px; }

    #slider { position:absolute; top:370px; left:40px; margin: 0px; width:600px;
              color:#0000ff; padding:5px;
              background-color:#ffdddd; }
   #Equation { position:absolute; top:415px; left:40px; height:24px; margin: 0px;
border: solid 1px #ccccff; background-color: #ffdddd; color:#0000ff;
      padding:5px; width:600px; }
    #Timer { position:absolute; top:480px; left:40px; height:20px; width:600px;
padding:5px; margin: 0px; color:#0000ff; background-color:#ddddff;}
    #Navigation { position:absolute; top:530px; left:40px; height:20px; width:600px;
padding:5px; margin: 0px; color:#0000ff; background-color:#ddddff;}

    #Explanation { position:absolute; top:370px; left:400px; height:20px; margin: 0px;
                color:#cccccc; background-color:#333333; }

    #Original { position:absolute; top:80px; left:400px; }
    #YourCopy { position:absolute; top:80px; left:94px; }