#naviArea {border:solid 0px red ; width:900px ;}
#naviArea .logo{float:left ;border:solid 0px blue ; margin:35px 0 0 0 ;}

#naviArea ul { width:600px; height:30px; list-style:none;padding:0px; margin:50px 20px 0 0 ;  border:solid 0px blue ; float:right;}
#naviArea li  { width:120px;  height:30px;  float:left; }

.navi-top a { display:block; width:100%; height:100%; background-image:url(../img/navi.png); background-position:0px 0px; background-repeat:no-repeat; text-indent:-1000em; text-decoration:none; }
.navi-top a:hover { background-image:url(../img/navi.png); background-position:0px -60px;}
.navi-top a:active { background-image:url(../img/navi.png); background-position:0px -30px;}
.navi-top-on a { display:block; width:100%; height:100%; background-image:url(../img/navi.png); background-position:0px -30px; background-repeat:no-repeat; text-indent:-1000em; text-decoration:none; }

.navi-about a { display:block; width:100%; height:100%; background-image:url(../img/navi.png); background-position:-120px 0px; background-repeat:no-repeat; text-indent:-1000em; text-decoration:none; }
.navi-about a:hover { background-image:url(../img/navi.png); background-position:-120px -60px;}
.navi-about a:active { background-image:url(../img/navi.png); background-position:-120px -30px;}
.navi-about-on a { display:block; width:100%; height:100%; background-image:url(../img/navi.png); background-position:-120px -30px; background-repeat:no-repeat; text-indent:-1000em; text-decoration:none; }

.navi-products a { display:block; width:100%; height:100%; background-image:url(../img/navi.png); background-position:-240px 0px; background-repeat:no-repeat; text-indent:-1000em; text-decoration:none; }
.navi-products a:hover { background-image:url(../img/navi.png); background-position:-240px -60px;}
.navi-products a:active { background-image:url(../img/navi.png); background-position:-240px -30px;}
.navi-products-on a { display:block; width:100%; height:100%; background-image:url(../img/navi.png); background-position:-240px -30px; background-repeat:no-repeat; text-indent:-1000em; text-decoration:none; }

.navi-howto a { display:block; width:100%; height:100%; background-image:url(../img/navi.png); background-position:-360px 0px; background-repeat:no-repeat; text-indent:-1000em; text-decoration:none; }
.navi-howto a:hover { background-image:url(../img/navi.png); background-position:-360px -60px;}
.navi-howto a:active { background-image:url(../img/navi.png); background-position:-360px -30px;}
.navi-howto-on a { display:block; width:100%; height:100%; background-image:url(../img/navi.png); background-position:-360px -30px; background-repeat:no-repeat; text-indent:-1000em; text-decoration:none; }

.navi-gallery a { display:block; width:100%; height:100%; background-image:url(../img/navi.png); background-position:-480px 0px; background-repeat:no-repeat; text-indent:-1000em; text-decoration:none; }
.navi-gallery a:hover { background-image:url(../img/navi.png); background-position:-480px -60px;}
.navi-gallery a:active { background-image:url(../img/navi.png); background-position:-480px -30px;}
.navi-gallery-on a { display:block; width:100%; height:100%; background-image:url(../img/navi.png); background-position:-480px -30px; background-repeat:no-repeat; text-indent:-1000em; text-decoration:none; }