@charset "utf-8";
/* CSS Document */

body  {
	font-size: 100%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	background-color: #e2e9f5;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
}
:lang(en), :lang(fi), :lang(hu) {
	font-family: "Times New Roman", Times, serif;
}
.twoColHybRtHdr #container { 
	width: 85%;
	background: #FFFFFF;
	margin: 0 auto;
	/* border: 1px solid #000000; */
	border-left: solid 1px #e2e9f5;
	border-right: solid 1px #e2e9f5;
	text-align: left;
	background-image: url(./images/side_blue.jpg);
	background-repeat: repeat-y;
	background-position: right top;
/*	width: 780px; */
	overflow: hidden;
} 

@media print {
	.twoColHybRtHdr #container {
		width: 100%;
	}
}

.twoColHybRtHdr #header { 
	background-color: #a7c1df; /* #dddddd */
	padding: 0;
	background-image: url(./images/siipi2.jpg);
	background-position: right top;
	height: 200px;
	/* border-bottom: solid 3px #c1caf2; */
} 
.twoColHybRtHdr #header #header_inner {
	padding-top: 95px;
}
.twoColHybRtHdr #header h1 {
	margin: 0 10px; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */
	padding: 10px 0;
	font-size: 1.75em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /* 'Trebuchet MS', Helvetica, sans-serif; */
}
.twoColHybRtHdr #header h1 a {
	color: #FFFFFF; /* for siipi2.jpg */
	/* color: #00000; */ /* for siipi.jpg */
	font-weight: normal; /* for siipi2.jpg */
	text-decoration: none;
}
.twoColHybRtHdr #header p {
	margin: 0 10px;
	margin-top: 3px;
	font-size: 0.825em;
	font-family: "Times New Roman", Times, serif; /* English */
}
.twoColHybRtHdr #utility{
	font-size: 70%;
	position: absolute;
	top: 5px;
	right: 7.5%;
	margin: 0;
	padding: 0px 3px;
	/* color: #333333; */ /* for siipi.jpg */
	color: #FFFFFF; /* for siipi2.jpg */
	text-align: right;
}
.twoColHybRtHdr #utility a:link, .twoColHybRtHdr #utility a:visited, .twoColHybRtHdr #utility a:hover {
	text-decoration: underline; /* for siipi2.jpg */
	/* text-decoration: none; */ /* for siipi.jpg */
	color: #FFFFFF; /* for siipi2.jpg */
}

@media print {
	.twoColHybRtHdr #header {
		height: 100px;
	}
	.twoColHybRtHdr #header #header_inner {
		padding-top: 5px;
	}
	.twoColHybRtHdr #utility {
		right: 0;
	}
}

#nav {
	font-size: 0.75em;
	width: auto;
	height: 30px;
	background-color: #ffffff;
	color: #000000;
	border-bottom: solid 1px #e2e9f5;
	background-image:url(images/side_blue.jpg);
	background-position: right;
	background-repeat: repeat-y;
}

#nav ul {
	margin: 0;
	padding: 0;
}

#nav li {
	list-style-type: none;
	float: left;
}

#nav li a {
	display: block;
	width: 80px;
	line-height: 30px;
	color: #000000;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	border: solid 1px #e2e9f5; /* #aaaaaa; */
	border-right: solid 1px #a7c1df; /* #aaaaaa; */
}

#nav li a:hover {
	background-color: #a7c1df;
	color: #ffffff;
	font-weight: bold;
	border: solid 0.5px #e2e9f5;
}

#nav li.toMain {
	list-style-type: none;
	float: left;
}

#nav li.toMain a {
	display: block;
	width: 100px;
	line-height: 30px;
	background-color: #a61b4b;
	border-right: solid 1px #e2e9f5; /* #aaaaaa; */
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	font-family: "Courier New", Courier, mono;
}

#nav li.toMain a:hover {
	background-color: #a7c1df;
	color: #a61b4b; /* #ffffff; */
	font-weight: bold;
	border: solid 1px #a61b4b; /* #aaaaaa; */
}

@media print {
	#nav {
		display: none;
	}
}

/* #sidebar1 に関するヒント：
1. 単位は相対単位であるため、サイドバーで余白を使用することは回避してください。標準に準拠したブラウザでは、余白は全体の幅に追加されるため、実際の幅が不特定の幅になります。 
2. サイドバーの値の単位として em が使用されているので、その幅が初期設定のテキストサイズに応じて変化することに注意してください。
3. 「.twoColHybRtHdr #sidebar1 p」ルールで見られるように、div の端と div に含まれるエレメントの間のスペースは、エレメントに左マージンと右マージンを適用することによって設定できます。
*/
.twoColHybRtHdr #sidebar1 {
	float: right; 
	width: 230px; /* 12em; */ 
	/* background-color: #EBEBEB; */
	/* background-image: url(./images/side_blue.png); */
	padding: 15px 0; /* 上余白と下余白により、この div 内に視覚的なスペースが設定されます */
}

.twoColHybRtHdr #sidebar1 #skipToMainContent {
	display: none;
}

@media aural {
	.twoColHybRtHdr #sidebar1 #skipToMainContent { display: block; }
}

.twoColHybRtHdr #sidebar1 h3, .twoColHybRtHdr #sidebar1 p {
	margin-left: 10px;
	margin-right: 10px;
	font-size: 0.75em;
	color: #9e8274;
}
.twoColHybRtHdr #sidebar1 p {
	text-align: justify;
	text-indent: 1em;
}
.twoColHybRtHdr #sidebar1 .relatedLinks li {
	margin-bottom: 0;
	list-style-type: none;
	line-height: 0;
	border-bottom: solid 1px #e3e9f5;
}
.twoColHybRtHdr #sidebar1 .relatedLinks li a {
	display: block;
	line-height: 30px;
	padding-left: 30px;
	background-image: url(./images/menu_pink.jpg);
	background-repeat: no-repeat;
	color: #000000;
	font-size: 0.75em;
	text-decoration: none;
}
.twoColHybRtHdr #sidebar1 .relatedLinks li a:hover {
	background-position: 0 -40px;
}
.twoColHybRtHdr #sidebar1 .relatedLinks ul {
	margin: 0;
	padding: 0;
}
.twoColHybRtHdr #sidebar1 .relatedLinks h3 {
	background-color: #a7c1df; /* #8CA2CE; #ffb394; */
	padding: 5px 10px;
	margin: 0px;
	margin-bottom: 0;
	border-bottom: solid 1px #ffffff;
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	font-size: 0.75em;
	color: #ffffff;
}

.twoColHybRtHdr #sidebar1 #sectionLinks li {
	margin-bottom: 0;
	list-style-type: none;
	line-height: 0;
	border-bottom: solid 1px #e3e9f5;
}
.twoColHybRtHdr #sidebar1 #sectionLinks li a {
	display: block;
	line-height: 30px;
	padding-left: 30px;
	background-image: url(./images/menu_blue.jpg);
	background-repeat: no-repeat;
	color: #000000;
	font-size: 0.75em;
	text-decoration: none;
}
.twoColHybRtHdr #sidebar1 #sectionLinks li a:hover {
	background-position: 0 -40px;
}
.twoColHybRtHdr #sidebar1 #sectionLinks ul {
	margin: 0;
	padding: 0;
}
.twoColHybRtHdr #sidebar1 #sectionLinks h3 {
	background-color: #a7c1df;
	padding: 5px 10px;
	margin: 0px;
	margin-bottom: 0;
	border-bottom: solid 1px #ffffff;
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	font-size: 0.75em;
	color: #ffffff;
}

/* tabindex のためのダミーの a */
/*
.twoColHybRtHdr #sidebar1 .relatedLinks h3 + a, .twoColHybRtHdr #sidebar1 #sectionLinks h3 + a {
	color: #ffffff;
}
/*

/* .twoColHybRtHdr #sidebar1 #sectionLinks */
#siteNav {
	display: none; /* override if necessary */
}

@media print {
	.twoColHybRtHdr #sidebar1 {
		display: none; 
	}
}

/* #mainContent に関するヒント：
1. #mainContent と #sidebar1 の間のスペースは、#mainContent div の右マージンによって設定されます。#sidebar1 div に含まれるコンテンツの量に関係なく、#sidebar1 div のスペースは維持されます。#sidebar1 のコンテンツが終了した後のスペースに #mainContent div のテキストを挿入するには、この右マージンを削除します。
2. #mainContent div の幅より広いエレメントが #mainContent div 内に配置されると、フローティングエレメントの落下（フローティング状態ではない #mainContent 領域がサイドバーの下に配置されること）が発生する可能性があります。ハイブリッドレイアウトの場合（全体の幅の単位はパーセント、サイドバーの単位は em）、使用可能な幅を正確に計算できない場合があります。ユーザーのテキストサイズが平均よりも大きい場合、#sidebar1 div が広くなるため、#mainContent div のスペースが狭くなります。クライアントが Contribute を使用してコンテンツを追加する予定である場合は、この制限に注意してください。
3. 下の Internet Explorer の条件分岐コメントでは、#mainContent に「hasLayout」を設定するのにズームプロパティが使用されます。これにより、いくつかの IE 固有のバグを回避できます。
*/
.twoColHybRtHdr #mainContent {
	margin: 0 230px 0 10px; /* 13em */
	padding-right: 20px;
	padding-bottom: 5px;
}
.twoColHybRtHdr #mainContent #breadCrumb {
	font-size: 0.825em;
	padding: 5px 0px 5px 0px;
}
.twoColHybRtHdr #mainContent #skipToContents {
	font-size: 0.825em;
	padding: 5px 0 5px 0;
	float: right;
	display: none;
}

@media aural {
	.twoColHybRtHdr #mainContent #skipToContents { display: block; }
}

.twoColHybRtHdr #mainContent #pageName {
	margin: 0px;
	padding: 5px 0px 10px 0px;
}
.twoColHybRtHdr #mainContent h2 {
	margin: 0px;
	padding: 0px;
	font-size: 1.2em;
	font-weight: bold;
}
.twoColHybRtHdr #mainContent h3 {
	font-size: 1em;
	margin: 0 0 8px 0;
	padding: 0 0 0 30px;
	background-image: url(./images/midashi_blue.gif);
	background-repeat: no-repeat;
	line-height: 52px;
	font-weight: normal;
}
.twoColHybRtHdr #mainContent .mtext {
	font-size: 0.875em;
	line-height: 1.5;
	/* font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif */
}
.twoColHybRtHdr #mainContent .mtext p {
	margin: 0;
	margin-bottom: 10px;
	text-align: justify;
}
.twoColHybRtHdr #mainContent .linkBack {
	font-size: 80%;
	color: #666666;
	text-align: right;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 0;
}

/*
@media print {
	.twoColHybRtHdr #mainContent {
        overflow: visible !important;
	}
}
*/

.twoColHybRtHdr #footer { 
	padding: 0 10px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
	background-color: #a7c1df;
	background-image: url(./images/side_blue2.jpg);
	background-repeat: repeat-y;
	background-position: right top;
} 
.twoColHybRtHdr #footer address {
	margin: 0;
	padding: 5px 0;
	color: #000000;
	font-size: 0.825em;
	font-style: normal;
	font-family: "Courier New", Courier, monospace;
}

@media print {
	.mtext a:link:after {
		content: "[" attr(href) "]";
		font-size: 90%;
		font-family: "Courier New", Courier, monospace;
	}
	.mtext a:visited:after {
		content: "[" attr(href) "]";
		font-size: 90%;
		font-family: "Courier New", Courier, monospace;
	}
	.twoColHybRtHdr #mainContent {
		margin: 0 10px 0 10px; /* 230px */
	}
}

/* 再使用できる各種クラス */
.fltrt { /* このクラスは、ページ上でフローティングエレメントを右側に配置するのに使用できます。プローティングエレメントは、ページ上でその横に配置されるエレメントの前に配置される必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスは、ページ上でフローティングエレメントを左側に配置するのに使用できます */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.date {
	text-align: right;
	font-size: 80%;
	color: #9e8274;
}
span.data {
	color: #333333;
	background-color: #e2e9f5;
	font-size: 80%;
	font-family: "Courier New", Courier, monospace;
	padding: 0px 5px 0px 5px;
}
span.nc_note {
	font-weight:bold;
	color:#9e8274;
}
span#tooltip1, span#tooltip2, span#tooltip3 {
	display: block;
	width: 150px;
	font-size:80%;
	background-color:#9e8274;
	color:#000000;
	padding:2px;
	margin-bottom:1px;
}
span#side_B {
	color:#FFFFFF;
	font-size:80%;
	font-variant:small-caps;
}
h4 {
	font-size: 100%;
	font-weight: bold;
}
.feature {
	border: solid 1px #9e8274;
	padding: 5px 10px;
}
.note {
	font-size: 85%;
	color:#9e8274;
}
div.explanation {
	background-color: #e2e9f5;
	/* background-image:url(images/nav_back.jpg); */
	margin-left: 15px;
	padding: 5px;
}
.mtext h4 {
	margin: 10px 0px 5px 0px;
	padding: 0px;
}
.mtext p { text-indent: 1em }
div.explanation2 {
	background-color: #cd7d8c;
	color: #000000;
	margin-left: 15px;
	padding: 5px;
}
@media print {
    * { overflow: visible !important; } /* Firefox 印刷不具合対策 */
}
h3#latest + p, h2#pageName + p { /* 直後の p */
	margin: 5px 0px 10px 0px;
	padding: 0px;
	font-size: 75%;
}
h3.withIntro + p { /* 直後の p */
	margin: 5px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 75%;
	border: solid 1px #9e8274;
	padding: 5px 10px;
}
.phonetic { font-family: 'Charis SIL', 'Doulos SIL', 'DejaVu Sans', 'Code2000', 'Hiragino Kaku Gothic Pro', 'Matrix Unicode', 'Lucida Sans Unicode', sans-serif; }
a.feed-list {
	padding-left: 17px;
	background: url("./images/28.png") no-repeat 0 50%;
}

.up {
	padding-left: 29px;
	background: url("./images/upicon_a7c1df.gif") no-repeat 0 50%;
}
.new {
	padding-left: 29px;
	background: url("./images/newicon_a7c1df.gif") no-repeat 0 50%;
}
code { font-family:'Courier New', Courier, monospace }