* {margin:0; padding:0}

#gallery {position:relative; width:620px; margin:50px auto; padding:10px; border:6px solid #fff; background:#AAA; float:left;}

#images {border:2px solid #9ac1c9; height:225px; background:#eef5f6; margin-bottom:20px}

#image {position:relative; width:615px; height:412px; padding:5px; border:2px solid #666; background:#FFF url(../images/loading.gif) center center no-repeat}

#image img {position:absolute; top:5px; left:5px}

#thumbwrapper {margin-top:30px; padding:5px 0; width:620px; height:58px; border:2px solid #666; background:#FFF; float:left;}

#thumbarea {position:relative; overflow:hidden; height:58px; width:620px; }

#thumbs {position:absolute; list-style:none; height:58px; width:50000px; border-right:5px solid #FFF}

#thumbs li {float:left; margin-right:5px; cursor:pointer}

.imgnav {position:absolute; height:412px; width:20%; z-index:100; width:20%; z-index:100; outline:none; cursor:pointer}

#previmg {left:0; background:url(../images/left.gif) left center no-repeat; border-left:5px solid transparent}

#previmg:hover {opacity:1; filter:alpha(opacity=100)}

#nextimg {right:0; background:url(../images/right.gif) right center no-repeat; border-right:5px solid transparent}

#nextimg:hover {opacity:1; filter:alpha(opacity=100)}

@media only screen and (max-width: 800px){
    #image{
        width: 90vw;
        height: 0;
        padding-bottom: 61%;
    }
    #image img{
        width: 90vw;
        height: 1;
    }
    #thumbwrapper{
        width: 92vw;
        height: 74px;
    }
    #thumbarea{
        width: 91vw;
        overflow-y: hidden;
        overflow-x: auto;
        height: 72px;
    }
    #previmg, #nextimg{
        height: 50vh;
    }
}