.ol, .or, .ul, .ur, .bl, .br, .hl, .hr {
    background-repeat: no-repeat;
    border: 1px  solid transparent;   
    padding: 0;
    margin: 0;
    line-height: 0;
    cursor: crosshair; 
    position: absolute;
    cursor: crosshair;
    background-color: transparent;        
    font-size:0;


}
 
 .ol {
    background-image: url(images/ol_b.gif);
    width: 60px;
    height: 130px;
    background-size: 100%;
    left: 110px;
    top: 170px;
 }
    
 .or {
    background-image: url(images/or_b.gif);
    background-size: 100%;
    width: 60px;
    height: 130px;
    left: 290px;
    top: 170px;
 }
 
 .bl {
    background-image: url(images/bl_b.gif);
    background-size: 100%;
    width: 73px;
    height: 88px;
    left: 153px;
    top: 320px;
 }
 .br {
    background-image: url(images/br_b.gif);
    background-size: 100%;
    width: 78px;
    height: 90px;
    left: 230px;
    top: 320px;
 }
 .hl { 
    background-image: url(images/hl_b.gif);
    background-size: 100%;
    width: 79px;
    height: 80px;
    left: 595px;
    top: 350px;
 }
 .hr { 
    background-image: url(images/hr_b.gif);
    background-size: 100%;
    width: 79px;
    height: 80px;
    left: 677px;
    top: 350px;
 }
 .ul { 
    background-image: url(images/ul_b.gif);
    background-size: 100%;
    width: 80px;
    height: 120px;
    left: 150px;
    top: 440px;
 }
 .ur { 
    background-image: url(images/ur_b.gif);
    background-size: 100%;
    width: 80px;
    height: 120px;
    left: 235px;
    top: 440px;
 }
 
 .ol:hover {
    background-image: url(images/ol_y.gif);
  border:1px dashed black;   
  color: #E1C403;
 }
    
 .or:hover {
    background-image: url(images/or_y.gif);
  border:1px dashed black;     
  color: #E1C403;
 }
 
 .bl:hover {
    background-image: url(images/bl_y.gif);
  border:1px dashed black;    
  color: #E1C403; 
 }
 .br:hover {
    background-image: url(images/br_y.gif);
  border:1px dashed black;    
  color: #E1C403; 
 }
 .hl:hover { 
    background-image: url(images/hl_y.gif);
  border:1px dashed black;  
  color: #E1C403;   
 }
 .hr:hover { 
    background-image: url(images/hr_y.gif);
  border:1px dashed black;    
  color: #E1C403; 
 }
 .ul:hover { 
    background-image: url(images/ul_y.gif);
  border:1px dashed black;  
  color: #E1C403;   
 }
 .ur:hover { 
    background-image: url(images/ur_y.gif);
  border:1px dashed black;    
  color: #E1C403; 
 }
 
  .ol_r {
    background-image: url(images/ol_r.gif);
    color: #C70808;
 }
    
 .or_r {
    background-image: url(images/or_r.gif);
    color: #C70808;
 }
 
 .bl_r {
    background-image: url(images/bl_r.gif);
    color: #C70808;
 }
 .br_r {
    background-image: url(images/br_r.gif);
    color: #C70808;
 }
 .hl_r { 
    background-image: url(images/hl_r.gif);
    color: #C70808;
 }
 .hr_r { 
    background-image: url(images/hr_r.gif);
    color: #C70808;
 }
 .ul_r { 
    background-image: url(images/ul_r.gif);
    color: #C70808;
 }
 .ur_r { 
    background-image: url(images/ur_r.gif);
    color: #C70808;
 }
 
 
  .ol_g {
    background-image: url(images/ol_g.gif);
    color: #2AE619;
 }
    
 .or_g {
    background-image: url(images/or_g.gif);
    color: #2AE619;
 }
 
 .bl_g {
    background-image: url(images/bl_g.gif);
    color: #2AE619;
 }
 .br_g {
    background-image: url(images/br_g.gif);
    color: #2AE619;
 }
 .hl_g { 
    background-image: url(images/hl_g.gif);
    color: #2AE619;
 }
 .hr_g { 
    background-image: url(images/hr_g.gif);
    color: #2AE619;
 }
 .ul_g { 
    background-image: url(images/ul_g.gif);
    color: #2AE619;
 }
 .ur_g { 
    background-image: url(images/ur_g.gif);
    color: #2AE619;
 }
 
 
  .ol_p {
    background-image: url(images/ol_p.gif);
    color: #F700FF;
 }
    
 .or_p {
    background-image: url(images/or_p.gif);
    color: #F700FF;
 }
 
 .bl_p {
    background-image: url(images/bl_p.gif);
    color: #F700FF;
 }
 .br_p {
    background-image: url(images/br_p.gif);
    color: #F700FF;
 }
 .hl_p { 
    background-image: url(images/hl_p.gif);
    color: #F700FF;
 }
 .hr_p { 
    background-image: url(images/hr_p.gif);
    color: #F700FF;
 }
 .ul_p { 
    background-image: url(images/ul_p.gif);
    color: #F700FF;
 }
 .ur_p { 
    background-image: url(images/ur_p.gif);
    color: #F700FF;
 }
 
 #last {
    background-color: #C70808;
    text-align: right;
    margin: 5px;
    padding: 15px;
 }
 #next {
    background-color: #2AE619;
    text-align: right;
    margin: 5px;
    padding: 15px;
 }