@charset "UTF-8";

@import url(http://fonts.googleapis.com/css?family=Lora);

/************************************************************************

Index

1. Global Parts

	Header
	
	Contents
	
	Title

2. Navigation

3. Footer

4. Top content

	Photo
	
	Text

5. Prifile content

6. Story content

7. Family content

************************************************************************/

/************************************************************************

1. global parts

************************************************************************/

*{
	margin:0px;
	padding:0px;

	color:none;
	}

li{
	list-style:none;
}

body {
	text-align:left;

	font-family: Arial, Helvetica, sans-serif, Tahoma, Geneva, sans-serif;
	font-size: 12px;
}

#bodywrap{
	width:1155px;
}

/******************************

Header

******************************/

/*
#backgroundwrap{
	width:955px;
	height:600px;
	background:url(../img/bg_1.jpg) no-repeat left;
}
*/

#naviallwrap{
	float:left;
	overflow: hidden;

	width: 240px;
	height: 315px;
}

#navigation{
	z-index: 9998;

	width:240px;
	margin:0;

	background:url(../img/navi_bg.gif) no-repeat left top;

/*	height:315px;*/
	height: 260px;
/*	overflow: hidden;*/
	position: absolute;
}

#navigation2{
	position: absolute;

	overflow: hidden;

	width:240px;
	height:315px;
	margin:0;

	background:url(../img/navi_bg_off.gif) no-repeat left;
}

#logo{
	width: 101px;
	height: 18px;
	margin: 40px 0 0 40px;
	border-style:none;
	background:url(../img/logo.gif) no-repeat left;
}

#naviwrap{
	width: auto;
	margin: 74px 0 0 40px;
/*	overflow: hidden;*/
}

#navi1{
	display: block;
	overflow: hidden;

	width: 160px;
	height: 16px;
	margin: 2px 0 0 0;

	border-style:none;
}

#navi1 a{
	display: block;

	width: 160px;
	height: 16px;

	border-style:none;
	background:url(../img/navi01_on.gif) no-repeat 0px 0px;
}

#navi1 a:hover img{
	opacity: 0.0;
	border-style:none;

	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}

#navi2{
	display: block;
	overflow: hidden;

	width: 160px;
	height: 16px;
	margin: 2px 0 0 0;

	border-style:none;
	background:url(../img/navi02_on.gif) no-repeat 0px 0px;
}

#navi2 a{
	display: block;

	width: 160px;
	height: 16px;

	border-style:none;
	background:url(../img/navi02_on.gif) no-repeat 0px 0px;
}
#navi2 a:hover img{
	opacity: 0.0;
	border-style:none;

	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}
#navi3{
	display: block;
	overflow: hidden;

	width: 160px;
	height: 16px;
	margin: 2px 0 0 0;

	border-style:none;
}

#navi3 a{
	display: block;

	width: 160px;
	height: 16px;

	border-style:none;
	background:url(../img/navi03_on.gif) no-repeat 0px 0px;
}

#navi3 a:hover img{
	opacity: 0.0;
	border-style:none;

	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}

#navi4{
	display: block;
	overflow: hidden;

	width: 160px;
	height: 16px;
	margin: 2px 0 0 0;

	border-style:none;
}

#navi4 a{
	display: block;

	width: 160px;
	height: 16px;

	border-style:none;
	background:url(../img/navi04_on.gif) no-repeat 0px 0px;
}

#navi4 a:hover img{
	opacity: 0.0;
	border-style:none;

	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}

#navi5{
	display: block;
	overflow: hidden;

	width: 160px;
	height: 16px;
	margin: 2px 0 0 0;

	border-style:none;
}

#navi5 a{
	display: block;

	width: 160px;
	height: 16px;

	border-style:none;
	background:url(../img/navi05_on.gif) no-repeat 0px 0px;
}

#navi5 a:hover img{
	opacity: 0.0;
	border-style:none;

	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}

#navi6{
	display: block;
	overflow: hidden;

	width: 160px;
	height: 16px;

	border-style:none;
}

#navi6 a{
	display: block;

	width: 160px;
	height: 16px;

	border-style:none;
	background:url(../img/navi06_on.gif) no-repeat 0px 0px;
}

#navi6 a:hover img{
	opacity: 0.0;
	border-style:none;

	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}

#navi2012ss{
	display: block;
	overflow: hidden;

	width: 160px;
	height: 16px;

	border-style:none;
}

#navi2012ss a{
	display: block;

	width: 160px;
	height: 16px;

	border-style:none;
	background:url(../img/navi2012ss_on.gif) no-repeat 0px 0px;
}

#navi2012ss a:hover img{
	opacity: 0.0;
	border-style:none;

	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}

#navi2013ss{
	display: block;
	overflow: hidden;

	width: 160px;
	height: 16px;

	border-style:none;
}

#navi2013ss a{
	display: block;

	width: 160px;
	height: 16px;

	border-style:none;
	background:url(../img/navi2013ss_on.gif) no-repeat 0px 0px;
}

#navi2013ss a:hover img{
	opacity: 0.0;
	border-style:none;

	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}



#navi201213aw{
	display: block;
	overflow: hidden;

	width: 160px;
	height: 16px;

	border-style:none;
}

#navi201213aw a{
	display: block;

	width: 160px;
	height: 16px;

	border-style:none;
	background:url(../img/navi201213aw_on.gif) no-repeat 0px 0px;
}

#navi201213aw a:hover img{
	opacity: 0.0;
	border-style:none;

	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}




img.bg {
  /* Set up positioning */
  position: fixed;
  /* またはabsolute; */
  top: 0;
  left: 0;

  float: left;
  overflow: hidden;

  /* Set up proportionate scaling */
  width: 100%;
  min-width: 1024px;
  height: auto;

  /* Set rules to fill background */
  min-height: 100%;
  border-style:none;
}

#container {
  position: relative;
}


/******************************

Biography

******************************/


#biowrap {
	float: left;
	overflow: hidden;

	width: 480px;
	height: ;
	margin: 132px 0 0 160px;
}

#biowrap .text{
	padding: 0 0 15px 0;

	color: #000000;

	font-family: Arial, Helvetica, sans-serif, Tahoma, Geneva, sans-serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.5em;
}

#biowrap .text a:link{
	text-decoration:none;

	color: #000000;
}

#biowrap .text a:visited{
	text-decoration:none;

	color: #000000;
}

#biowrap .text a:hover{
	text-decoration:none;

	color: #DCDDDE;
}

#biowrap .text a:active{
	text-decoration:none;

	color: #DCDDDE;
}

#biowrap .pic{
	clear: both;
	overflow: hidden;

	width: 196px;
	height: 150px;
	margin: 0 0 20px 0;

	background:url(../img/profile.jpg) no-repeat left;
}

#biowrap p {
	padding: 0 0 15px 0;

	color: #000000;

	font-family: Arial, Helvetica, sans-serif, Tahoma, Geneva, sans-serif;
	font-size: 13px;
	line-height: 1.5em;
}

#biowrap p a:link{
	text-decoration:none;

	color: #000000;
}

#biowrap p a:visited{
	text-decoration:none;

	color: #000000;
}

#biowrap p a:hover{
	text-decoration:none;

	color: #DCDDDE;
}

#biowrap p a:active{
	text-decoration:none;

	color: #000000;
}



/******************************

Collection

******************************/


#colwrap {
	float: left;
	overflow: hidden;

	width: 675px;
	height: auto;
}

#colwrap #left{
	float: left;
	overflow: hidden;

	width: 160px;
	height: 560px;
}

#colwrap #left .leftarrow{
	display:block;
	float: left;
	overflow: hidden;

	width: 24px;
	height: 34px;
	margin: 260px 68px 0 68px;
}

#colwrap #left .leftarrow a{
	display:block;

	width: 24px;
	height: 34px;

	background:url(../img/arrowl02.gif) no-repeat 0px 0px;
}

#colwrap #left .leftarrow a:hover img{
	opacity: 0.0;

	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}

#colwrap #left p{
	margin: 510px 0 0 65px;

	color: #000000;

	font-family: Arial, Helvetica, sans-serif, Tahoma, Geneva, sans-serif;
	font-size: 10px;
	line-height: 1.5em;
}

#colwrap #center{
	float: left;
	overflow: hidden;

	width: 416px;
	height: 700px;
	margin: 40px 0 0 0;
}

#colwrap #right{
	float: left;
	overflow: hidden;

	width: 92px;
	height: 560px;
}

#colwrap #right .rightarrow{
	display:block;
	float: left;
	overflow: hidden;

	width: 24px;
	height: 34px;
	margin: 260px 0 0 68px;
}

#colwrap #right .rightarrow a{
	display:block;

	width: 24px;
	height: 34px;

	background:url(../img/arrowr02.gif) no-repeat 0px 0px;
}

#colwrap #right .rightarrow a:hover img{
	opacity: 0.0;

	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}



#headerwrap {
	width:590px;
	height:auto;

	text-align:left;
	background:;
}

img{
	border-style:none;
}

a img{
	border-style:none;
}


/************************************************************************

3. Footer

************************************************************************/

#footer{
	clear:both;

	width: 240px;
}

#footer p{
	width:410px;

	text-align:justify;	
	letter-spacing:0.025em;

	color:#4D4D4D;

	font-size:9px;
	line-height:20px;
}

#footer .registration {	
	position: fixed; 
	bottom: 10px; 
	left: 10px;
 
	color:#4D4D4D;

	font-size:9px;
	line-height:1.5em; 
} 

.bgmaximage{
	position:fixed !important;

	display:none;

	font-family: Arial, Helvetica, sans-serif, Tahoma, Geneva, sans-serif;
}

#maincontent {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 0;

  width: 100%;
}

.loader {
  position:absolute;
  z-index:9999;
  top:49%;
  left:49%;

  width:39px;
  height:39px;
}

.no_border {
    border-style:none;
}

/******************************

Biography

******************************/


#newswrap {
	float: left;
	overflow: hidden;

	width: 480px;
	height: auto;
	margin: 132px 0 0 160px;
}

#newswrap .text{
	padding: 0 0 15px 0;

	color: #000000;

	font-family: Arial, Helvetica, sans-serif, Tahoma, Geneva, sans-serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.5em;
}

#newswrap .text a:link{
	text-decoration:none;

	color: #000000;
}

#newswrap .text a:visited{
	text-decoration:none;

	color: #000000;
}

#newswrap .text a:hover{
	text-decoration:none;

	color: #DCDDDE;
}

#newswrap .text a:active{
	text-decoration:none;

	color: #DCDDDE;
}

#newswrap p {
	padding: 0 0 10px 0;

	color: #000000;

	font-family: Arial, Helvetica, sans-serif, Tahoma, Geneva, sans-serif;
	font-size: 13px;
	line-height: 1.5em;
}

#newswrap p a:link{
	text-decoration:none;

	color: #000000;
}

#newswrap p a:visited{
	text-decoration:none;

	color: #000000;
}

#newswrap p a:hover{
	text-decoration:none;

	color: #DCDDDE;
}

#newswrap p a:active{
	text-decoration:none;

	color: #000000;
}

#newswrap .newsimg{
	clear: both;
	overflow: hidden;

	width: 250px;
	height: 300;
	margin: 5px 0 20px 48px;

	background:url(../img/news01.jpg) no-repeat left;
}

#newswrap .boarder01{
	clear: both;

	width: 250px;
	height: 1px;
	margin: 0 0 50px 48px;

	background-color: #000000;
}

#newswrap .newsimg02{
	clear: both;
	overflow: hidden;

	width: 400px;
	height: 300;
	margin: 5px 0 20px 48px;

	background:url(../img/news01.jpg) no-repeat left;
}

#newswrap .boarder02{
	clear: both;

	width: 400px;
	height: 1px;
	margin: 0 0 50px 48px;

	background-color: #000000;
}

/* **************** CSS MENU **************** */

/* Some stylesheet reset */
#cssmenu > ul {
	margin: 0;
	padding: 0;

	list-style: none;

	vertical-align: baseline;

	line-height: 1;
}

/* The container */
#cssmenu > ul{
	position: relative;

	display: block;

	width: 160px;
}

	/* The list elements which contain the links */
	#cssmenu > ul li {
		position: relative;

		display: block;

		width: 160px;
		margin: 0;
		padding: 0;
	}

		/* General link styling */
		#cssmenu > ul li a {
			position: relative;

			width: 160px;
			margin: 0;

			cursor: pointer;
			text-decoration: none;
			text-transform: uppercase;
			letter-spacing: 2px;

			color: #000;

			font-size: 11px;
			line-height: 12px;

			/* Layout */
			display: block;
/*			border-top: 1px dotted #fff;*/
/*			border-bottom: 1px dotted #d9d9d9;*/
			padding: 5px 0px 4px 4px;

			/* Typography */
			font-family:  'Lora', serif !important;
			font-weight: normal;
			/* Background & effects */
			background: #f4f7f6;
		}
		#cssmenu > ul li:nth-child(2) a {
			width: 196px;
		}
		/* Rounded corners for the first link of the menu/submenus */
		#cssmenu > ul li:first-child > a {
			border-top: 0;
		}

		/* Rounded corners for the last link of the menu/submenus */
		#cssmenu > ul li:last-child > a {
			border-bottom: 0;
		}


		/* The hover state of the menu/submenu links */
		#cssmenu > ul li a:hover, #cssmenu > ul li:hover > a {
			color: #fff;
			border-color: transparent;
			background: #d5d5d5;
		}

		/* The arrow indicating a submenu */
		/*#cssmenu > ul .has-sub > a::after {
			content: '';
			position: absolute;
			top: 5px;
			right: 5px;
			width: 0px;
			height: 0px;
			z-index: 10000;

			/* Creating the arrow using borders *!/
			border: 4px solid transparent;
			border-left: 4px solid #000; 
		}

		/* The same arrow, but with a darker color, to create the shadow effect *!/
		#cssmenu > ul .has-sub > a::before {
			content: '';
			position: absolute;
			top: 5px;
			right: 5px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders *!/
			border: 4px solid transparent;
			border-left: 4px solid #fff;
		}

		/* Changing the color of the arrow on hover *!/
		#cssmenu > ul li > a:hover::after, #cssmenu > ul li:hover > a::after {
			border-left: 4px solid #fff;
		}

		#cssmenu > ul li > a:hover::before, #cssmenu > ul li:hover > a::before {
			border-left: 4px solid rgba(0, 0, 0, .25);
		}*/

	
		/* THE SUBMENUS */
		#cssmenu > ul ul {
			position: absolute;
			top: -9999px;
			left: 150px;

			padding-left: 49px;

			-moz-transition: opacity .3s ease-in;
			-ms-transition: opacity .3s ease-in;
			-o-transition: opacity .3s ease-in;

			opacity: 0;

			/* The fade effect, created using an opacity transition */
			-webkit-transition: opacity .3s ease-in;
		}
		#cssmenu ul * li a {
			width: 180px;

			letter-spacing: 1px;

			background: #f4f7f6;
		}
		#cssmenu * ul ul {
			padding-left: 49px;
		}
		#cssmenu ul ul * li {
			width: 100px !important;
		}
		#cssmenu ul ul * li a{
		width: 100px !important;		}
		/* Showing the submenu when the user is hovering the parent link */
		#cssmenu > ul li:hover > ul {
			top: 0px;

			opacity: 1;
		}



#top{
	background:;
	vertical-align: middle;	
	text-align: center;

}

#toplogo{
	width: 252px;
	height: 45px;
	display: block;
	vertical-align: middle;	
	margin-top: 300px;		
	margin-left: auto;	
	margin-right: auto;	
	border-style:none;
	background:url(../img/top_logo.gif) no-repeat left;
}