body {line-height:1.5em}
hr {clear:both}
h1 { font-family: sans-serif; font-size:200%; font-weight: bold; margin:0.5em 0; padding:0.5em; background-color:#ddf; border-left:1em solid rgba(0,0,0,0.3); border-radius:5px; line-height:1.2em}
h2 { font-family: sans-serif; font-size:100%; font-weight: bold; margin:0.5em 0}
h2.title { margin:0.5em 0; padding:0.5em; background-color:#def; border-left:1em solid #8cc; }
h3 { font-family: sans-serif; font-size:100%; font-weight: bold; margin:0.5em 0}
p { font-family:serif; font-size:100%; text-indent:1em; margin:0.5em 0; text-align:left; }
p.signature { text-indent:0em; text-align:right; margin-right:1em}
p.data {text-indent:0em; font-family:sans-serif; margin-left:0em}
img {width:100%}
.photo { width:100%; margin:5px 0; padding:0; text-align: center; font-family: serif; font-size: 90%; font-weight:bold; }
.photo img {margin:2px; box-shadow:1px 1px 1px 1px rgba(0,0,0,0.5);}
.photo p { text-indent:0; margin:0px 0.5em 0.5em 0.5em; line-height:1.2em; text-align:center}
.photo a { display:block; width:100%; height:100%; text-decoration:none; line-height:1.5em;}
.photo a:hover { background-color:rgba(0,0,0,0.2);}
.inline-photo { width:100%;line-height:1.5em; text-decoration:none; text-align:center;}
.inline-photo p { text-indent:0; margin:0px 0.5em 0.5em 0.5em; line-height:1.2em; text-align:center; font:sans-serif; font-weight:bold}
.inline-photo a { display:block; width:100%; height:100%; text-decoration:none; }
.inline-photo a:hover { background-color:rgba(0,0,0,0.2);}
.link-to-yamato {clear:both; text-align:left; margin: 1em; font-family:sans-serif; }
.text-area {width:auto; margin:0.5em;}
.text-area-full {width:auto; margin:0.5em;}
.photo-area {width:auto; margin:0.5em;}
.photo-area h1 {clear:both}
.photo-area h2 {clear:both}
.photo-area h3 {clear:both}
.section { clear:both}

@media (min-width:640px) {
	.photo img {width:98%; margin-top:2px; box-shadow:0px 0px 1px 1px rgba(0,0,0,0.3);}
	.inline-photo { margin:1em; width:50%;  float:right; clear:right}
}

@media (min-width:960px) {
	#wrapper {width: 960px; margin: 0 auto}
	.text-area-full {width:800px; margin:0.5em auto;}
	.text-area { clear:both; width:800px; margin:0.5em auto;}
	.photo-area {clear:both; width:800px; margin: 0.5em auto;}
	.photo { width:50%; float:left;}
}

@media (min-width:1280px) {
	/* 2 panes */
	#wrapper {width:100%; margin:0 }
	.text-area-full {width:90%; }
	.text-area {clear:left; float:left; margin-left:5%; margin-right:5%; width:45%;}
	.photo-area {clear:none; float:right; margin-top:1em; width:40%; margin-right:5%}
	.photo { max-width:400px;}
}

@media (min-width:1600px) {
	.text-area {margin-left:5%; margin-right:5%; width:40%;}
}
@media print {
	#wrapper {width: 960px; margin: 0 auto}
	.inline-photo { margin:1em; width:50%;  float:right; clear:right}
	.text-area {clear:both; width:800px; margin:0.5em auto;}
	.text-area-full {clear:both; width:800px; margin:0.5em auto;}
	.photo-area {clear:both; width:800px; margin: 0.5em auto;}
	.photo { width:50%; float:left;}
	.photo img {width:98%; margin-top:2px; box-shadow:0px 0px 1px 1px rgba(0,0,0,0.3);}
}

/* for old style */
.photo-list { clear:both; width:90%; margin-left:auto; margin-right:auto; overflow:hidden}
.photo-list .photo { margin:0}
td {text-align:center; font-size:80%}
td p { font-family:sans-serif; line-height:1.0em; text-align:center}