#wrapper {
    width: 705px;
    background: #fff;
    color: #000;
    margin: 0px auto; /*center for compliant browsers*/
    text-align: left; 
    border: 3px solid #E4FDD1;
    padding: 2px;
    }


ul#off {list-style-type:none; padding:0; margin:0; width:700px; height:120px; margin:0.5em auto; position:relative;}
ul#off li {display:block; width:100px; height:100px; margin:10px; position:relative; float:left;}
ul#off li.gap {margin-right:75px;}
ul#off a {display:block; width:0; height:0; text-decoration:none; position:absolute; left:0; top:0;}

ul#off a em {cursor:pointer; font-style:normal; font-weight:bold;}
ul#off a span {display:none;}

ul#off a em.hz {position:absolute; display:block; height:20px; width:75px; cursor:pointer; text-align:center; line-height:20px; color:#fff;}
ul#off a em.hzq {position:absolute; display:block; height:20px; width:50px; cursor:pointer; text-align:center; line-height:20px; color:#fff;}
ul#off a em.vtc {position:absolute; display:block; height:60px; width:25px; cursor:pointer; left:0; top:20px;}
ul#off a em.vtl {position:absolute; display:block; height:80px; width:25px; cursor:pointer; left:0; top:0;}
ul#off a em.vtp {position:absolute; display:block; height:40px; width:25px; cursor:pointer;}
ul#off a em.bk {position:absolute; display:block; height:25px; width:25px; cursor:pointer;}
ul#off a em.vtq {position:absolute; display:block; height:100px; width:25px; cursor:pointer; left:0; top:0;}


ul#off a em.toph {top:0; left:0;}
ul#off a em.midh {top:40px; left:0;}
ul#off a em.both {top:80px; left:0;}
ul#off a em.topr {top:0; left:50px;}
ul#off a em.topq {top:0; left:25px;}

ul#off a em.bktl {top:20px; left:0;}
ul#off a em.bktr {top:20px; left:50px;}
ul#off a em.bkbl {top:60px; left:0;}
ul#off a em.bkbr {top:60px; left:50px;}

.ggg em {background:#724a10;}
.aaa em {background:#e09222;}
.lll em {background:#697210;}
.eee em {background:#ff0000;}
.rrr em {background:#0000ff;}
.yyy em {background:#9933ff;}

ul#off a:hover {color:#c00; background:#ddd;}
ul#off a:hover em {background:#c6b69e; color:#724a10;}
ul#off a:hover span {display:block; width:75px; height:1px; font-size:3px; position:absolute; top:110px; left:0; border-top:5px dashed #c6b69e;}
ul#off a:active, ul#off a:focus {background:#eee;}
ul#off a:active em, ul#off a:focus em {background:#f0ca93; color:#000;}
ul#off a:active span, ul#off a:focus span {border-top:5px solid #f0ca93;}
      
#container {
    position:relative; 
    width:700px; 
    height:700px; 
    background:#fff no-repeat 75px 10px;
 margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0
    } 


#container ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    } 

#container a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:5px; 
    left:5px; 
    overflow:hidden; 
    background:#E4FDD1;
    }


#container a.gallery, #container a.gallery:visited {
    display:block; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:1px 2px 1px 2px; 
    text-align:left; 
    cursor:default;
    }


#container a.gallery:hover {
    border:1px solid #fff; 
    }



#container a.gallery:hover span {
    position:absolute; 
    width:410px; 
    height:408px; 
    top:320px; 
    left:75px; 
    color:#000; 
    background:#fff;
    }

#container a.gallery:hover img {
    border:1px solid #fff; 
    float:left; 
    margin-right:5px;
    }


#container a.slidea {
    background:url('kuvat/g_lapsellista1.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slidec {
    background:url('kuvat/g_lapsellista2.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slided {
    background:url('kuvat/g_lapsellista3.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slidee {
    background:url('kuvat/g_lapsellista4.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slidef {
    background:url('kuvat/g_lapsellista5.jpg'); 
    height:74px; 
    width:103px
    }
    
#container a.slideg {
    background:url('kuvat/g_lapsellista6.jpg'); 
    height:74px; 
    width:103px
    }

#container a.slideh {
    background:url('kuvat/g_lapsellista7.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slidei {
    background:url('kuvat/g_lapsellista8.jpg'); 
    height:85px; 
    width:58px
    }
#container a.slidej {
    background:url('kuvat/g_lapsellista9.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slidek {
    background:url('kuvat/g_lapsellista10.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slidel {
    background:url('kuvat/g_lapsellista11.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slidem {
    background:url('kuvat/g_lapsellista12.jpg'); 
    height:74px; 
    width:103px
    }
#container a.sliden {
    background:url('kuvat/g_lapsellista13.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slideo {
    background:url('kuvat/g_lapsellista14.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slidep {
    background:url('kuvat/g_lapsellista15.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slideq {
    background:url('kuvat/g_lapsellista16.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slider {
    background:url('kuvat/g_lapsellista17.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slides {
    background:url('kuvat/g_lapsellista18.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slidet {
    background:url('kuvat/g_lapsellista19.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slideu {
    background:url('kuvat/g_lapsellista20.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slidev {
    background:url('kuvat/g_lapsellista21.jpg'); 
    height:74px; 
    width:103px
    }
#container a.slidex {
    background:url('kuvat/g_lapsellista22.jpg'); 
    height:74px; 
    width:103px
    }



#container ul {
    width:690px; 
    height:410px;
    margin:5px; 
    float:center;
    }
#container li {
    float:left;
    }
#container a.slideb:hover img, #container a.slidei:hover img {
    float:center;
    }