/*----------------------------
top
-----------------------------*/

/* @group top */

#top{
	margin: 10px auto 0 auto;
	padding: 0px;
	width: 905px;
	height:361px;
	background: url(../images/top/top_bg.jpg) no-repeat;
	display: block;
}

#top div#catch{
	margin: -15px auto 0 auto;
	text-align: center;
	position: absolute;
	width: 905px;
	z-index: 1;
}

#top div#child{
	margin: -2px 0 0 -8px;
	padding: 0px;
	position: absolute;
	z-index: 2;
}

#top div#crocodile{
	margin: 60px 0 0 620px;
	padding: 0px;
	position: absolute;
	z-index: 4;
}

#top div#hermit{
	margin: -40px 0 0 770px;
	padding: 0px;
	position: absolute;
	z-index: 3;
}

#top div#ttl{
	margin: 40px auto 0 auto;
	padding: 0px;
	width: 905px;
	text-align: center;
	z-index: 10;
	position: absolute;
}

/* @end */

/*----------------------------
navigation
-----------------------------*/
ul#navigation{
	width: 895px;
	margin: 27px auto 10px auto;
	padding: 7px 5px;
	list-style-type: none;
	text-align: center;
	height: 118px;
	background: url(../images/top/navi_bg.jpg) no-repeat;
}

ul#navigation li {	
	margin: 7px 5px 0 3px;
	padding: 0px;
	float: left;
}

ul#navigation li a{	
	display: block;
	width: 215px;
	height: 104px;
	text-decoration: none;
	text-indent: -9999px;
}

/*about*/
ul#navigation li.about a{
	background: url(../images/top/about.jpg) no-repeat;
}

ul#navigation li.about a:hover{
	background-position: 0px -104px;
	background
}


/*run*/
#navigation li.run a{
	background: url(../images/top/run.jpg) no-repeat;
}

ul#navigation li.run a:hover{
	background-position: 0px -104px;
}


/*computer*/
#navigation li.computer a{
	background: url(../images/top/computer.jpg) no-repeat;
}

ul#navigation li.computer a:hover{
	background-position: 0px -104px;
}


/*contact*/
#navigation li.contact a{
	background-image: url(../images/top/contact.jpg);
}

#navigation li.contact a:hover{
	background-position: 0px -104px;
}