@charset "utf-8";

/*
 *		GALLERY STYLE SHEET
 */

*{margin: 0; padding: 0;}
img{border: 0; margin: 0; padding: 0;}
ul{list-style: none;}

.clear{clear: both;}

body{
	font-size: 13px;
	color: #FFF;
	background: url(../images/bg.gif) no-repeat #0033af;
}

div#container{
	width: 100%;
	height: 100%;
	min-width: 800px;
	min-height: 600px;
}

/****** HEADER AREA ******/
div#container div#header{
	position: relative;
	min-width: 800px;
	height: 80px;
}

div#container div#header h1 a{
	position: absolute;
	top: 23px;
	left: 25px;
	width: 313px;
	height: 23px;
	background: url(../images/logo.gif) no-repeat top left;
	text-indent: -1000em;
	overflow: hidden;
}
div#container div#header h1 a:hover{background: url(../images/logo.gif) no-repeat top right;}

div#container div#header h2 a{
	position: absolute;
	top: 40px;
	right: 54px;
	width: 145px;
	height: 13px;
	background: url(../images/logo_small.gif) no-repeat left top;
	text-indent: -1000em;
	overflow: hidden;
}
div#container div#header h2 a:hover{background: url(../images/logo_small.gif) no-repeat right top;}

/****** CONTENTS AREA ******/
div#container div#contents{
	position: relative;
	min-width: 800px;
}

div#container div#contents div#left{
	position: absolute;
	top: 0;
	left:25px;
	width: 160px;
}

/*----- GLOBAL MENU -----*/
div#contents div#left ul#global-menu{
	position: relative;
	top: 1px;
	left:16px;
	width: 144px;
	height: 144px;
}

div#contents div#left ul#global-menu li#m01 a{
	position: absolute;
	top: 0;
	left: 0;
	width: 144px;
	height: 16px;
	background: url(../images/gm01.gif) no-repeat left;
	text-indent: -1000em;
	overflow: hidden;
}
div#contents div#left ul#global-menu li#m01 a:hover{background: url(../images/gm01.gif) no-repeat right;}

div#contents div#left ul#global-menu li#m02 a{
	position: absolute;
	top: 20px;
	left: 0;
	width: 144px;
	height: 16px;
	background: url(../images/gm02.gif) no-repeat left;
	text-indent: -1000em;
	overflow: hidden;
}
div#contents div#left ul#global-menu li#m02 a:hover{background: url(../images/gm02.gif) no-repeat right;}

div#contents div#left ul#global-menu li#m03 a{
	position: absolute;
	top: 40px;
	left: 0;
	width: 144px;
	height: 30px;
	background: url(../images/gm03.gif) no-repeat left;
	text-indent: -1000em;
	overflow: hidden;
}
div#contents div#left ul#global-menu li#m03 a:hover{background: url(../images/gm03.gif) no-repeat right;}

div#contents div#left ul#global-menu li#m04 a{
	position: absolute;
	top: 74px;
	left: 0;
	width: 144px;
	height: 30px;
	background: url(../images/gm04.gif) no-repeat left;
	text-indent: -1000em;
	overflow: hidden;
}
div#contents div#left ul#global-menu li#m04 a:hover{background: url(../images/gm04.gif) no-repeat right;}

div#contents div#left ul#global-menu li#m05 a{
	position: absolute;
	top: 108px;
	left: 0;
	width: 144px;
	height: 16px;
	background: url(../images/gm05.gif) no-repeat left;
	text-indent: -1000em;
	overflow: hidden;
}
div#contents div#left ul#global-menu li#m05 a:hover{background: url(../images/gm05.gif) no-repeat right;}

div#contents div#left ul#global-menu li#m06 a{
	position: absolute;
	top: 128px;
	left: 0;
	width: 144px;
	height: 16px;
	background: url(../images/gm06.gif) no-repeat left;
	text-indent: -1000em;
	overflow: hidden;
}
div#contents div#left ul#global-menu li#m06 a:hover{background: url(../images/gm06.gif) no-repeat right;}

/*-- GM FISH AREA --*/
div#contents div#left ul#global-menu li#m07 a{
	position: absolute;
	top: 154px;
	left: 0;
	width: 144px;
	height: 16px;
	background: url(../images/gm07.gif) no-repeat left;
	text-indent: -1000em;
	overflow: hidden;
}
div#contents div#left ul#global-menu li#m07 a:hover{background: url(../images/gm07.gif) no-repeat right;}

div#contents div#left ul#global-menu li#m08 a{
	position: absolute;
	top: 174px;
	left: 0;
	width: 144px;
	height: 16px;
	background: url(../images/gm08.gif) no-repeat left;
	text-indent: -1000em;
	overflow: hidden;
}
div#contents div#left ul#global-menu li#m08 a:hover{background: url(../images/gm08.gif) no-repeat right;}

div#contents div#left ul#global-menu li#m09 a{
	position: absolute;
	top: 194px;
	left: 0;
	width: 144px;
	height: 16px;
	background: url(../images/gm09.gif) no-repeat left;
	text-indent: -1000em;
	overflow: hidden;
}
div#contents div#left ul#global-menu li#m09 a:hover{background: url(../images/gm09.gif) no-repeat right;}

div#contents div#left ul#global-menu li#m10 a{
	position: absolute;
	top: 214px;
	left: 0;
	width: 144px;
	height: 16px;
	background: url(../images/gm10.gif) no-repeat left;
	text-indent: -1000em;
	overflow: hidden;
}
div#contents div#left ul#global-menu li#m10 a:hover{background: url(../images/gm10.gif) no-repeat right;}

/*----- INDEX ABOUT BALI -----*/
div#contents div#left dl#about{
	position: relative;
	top: 90px;
	left: 16px;
	width: 144px;
	height: 500px;
}

div#contents div#left dl#about dt{
	position: absolute;
	top: 0;
	left: 0;
	width: 125px;
	height: 38px;
	background: url(../images/about.gif) no-repeat;
	text-indent: -1000em;
}

div#contents div#left dl#about dd{
	position: absolute;
	top: 38px;
	left: 0;
	width: 144px;
	height: 300px;
	line-height: 125%;
}

/*----- MAIN CONTENTS  -----*/
div#container div#contents ul#index-main,
div#container div#contents div#main{
	position: absolute;
	top: 0px;
	left: 210px;
	min-width: 600px;
}

/*----- CONTENTS HEADER COMMENT AREA -----*/
div#container div#contents div#main div.comment{
	width: 600px;
	height: auto;
	margin: 0px 0 0;
}


/*----- CONTENTS HEADER -----*/
div#container div#contents div#main h3#head01{
	width: 135px;
	height: 32px;
	margin: 2px 0 0 5px;
	background: url(../images/head01.gif) no-repeat;
	text-indent: -1000em;
}

div#container div#contents div#main h3#head02{
	width: 120px;
	height: 32px;
	margin: 2px 0 0 5px;
	background: url(../images/head02.gif) no-repeat;
	text-indent: -1000em;
}

div#container div#contents div#main h3#head03{
	width: 350px;
	height: 32px;
	margin: 2px 0 0 5px;
	background: url(../images/head03.gif) no-repeat;
	text-indent: -1000em;
}

div#container div#contents div#main h3#head04{
	width: 382px;
	height: 32px;
	margin: 2px 0 0 5px;
	background: url(../images/head04.gif) no-repeat;
	text-indent: -1000em;
}

div#container div#contents div#main h3#head05{
	width: 66px;
	height: 32px;
	margin: 2px 0 0 5px;
	background: url(../images/head05.gif) no-repeat;
	text-indent: -1000em;
}

div#container div#contents div#main h3#head06{
	width: 116px;
	height: 32px;
	margin: 2px 0 0 5px;
	background: url(../images/head06.gif) no-repeat;
	text-indent: -1000em;
}


div#container div#contents div#main p.comment{width: 600px; margin:10px 0;}

div#container div#contents div#main p.comment a{
	display: block;
	width: 64px;
	height: 12px;
	background: url(../images/btn_to.gif) no-repeat left;
	text-indent: -1000em;
	overflow: hidden;
}
div#container div#contents div#main p.comment a:hover{background: url(../images/btn_to.gif) no-repeat right;}

div#container div#contents ul#index-main li.pict{
	float: left;
	width: 50px;
	height: 38px;
	padding: 2px;
	margin: 1px;
}

/* PicSize 100x75 */
div#container div#contents div#main ul#pic-area li.pict{
	display: inline;
	float: left;
	width: 100px;
	height: 75px;
	padding: 3px;
	margin: 1px;
}

/* PicSize 70x53 */
div#container div#contents div#main ul#pic-area-m li.pict{
	display: inline;
	float: left;
	width: 70px;
	height: 53px;
	padding: 2px;
	margin: 1px;
}

/* PicSize 50x38 */
div#container div#contents div#main ul#pic-area-s li.pict{
	display: inline;
	float: left;
	width: 50px;
	height: 38px;
	padding: 2px;
	margin: 1px;
}

div#ddinfo{
	opacity:.9;
	-moz-opacity:.9;
	filter:alpha(opacity=90);
	height: 318px;
	position: absolute;
	width: 500px;
	top: -300px;
	right: 50px;
	color: #FFF;
	font-size: 12px;
}
div#ddinfo .infobox h3{font-size: 14px; margin: 0 0 5px;}
div#ddinfo .infobox{
	height: 260px;
	padding: 20px;
	background: url(../images/corner.gif) no-repeat bottom left #000;
}
div#ddinfo .infobox a{color: #FFF; font-weight: bold;}
div#ddinfo .infobox a:hover{color: #F0F;}


div#ddinfo table{
	width: 90%;
	margin: 20px auto 0;
}
div#ddinfo table caption{
	font-weight: bold;
	text-decoration: underline;
}
div#ddinfo table td{padding: 5px;}
div#ddinfo table td span{font-weight: bold;}


div#ddinfo ul li a:hover{
	text-decoration: underline;
}
div#ddinfo .expandbox {
	text-align: right;
	height: 20px;
	clear:both;
}
div#ddinfo .expandbox a{
	display: block;
	margin: 0 0 0 auto;
	width: 140px;
}



div#container address{
	position: absolute;
	bottom: 5px;
	right: 10px;
	font-style: normal;
}