/******************************************************************************
 * Cascading Style Sheet, klavierverein.css, Written 2009-02-08 by Holiutschi, K.
 * http://klavierverein.org/klavierverein.css
 * Charset: utf-8
 * Last updated: <2010-08-29 17:42:01 JST>
 *****************************************************************************/

body {
	font-size: 100%; /*12px;*/
	font-family: sans-serif; /* Gothic like font */
	font-weight: normal;
	font-style : normal;
	color: black;

	/* background picture */
	background-attachment: fixed;
	background-color: #fdfdfd;
	/* background-color: #B0C4DE; */
	/*background-image: url("./back.jpg");*/
	/*background-repeat: repeat; */

/*
	margin-top  : 5px;
	margin-left : 5px;
	margin-right: 5px;
	margin-right: 5px;
	padding-top   :  5px;
	padding-left  : 20px;
	padding-right : 20px;
	padding-bottom:  5px;
*/
}


/*-------------------------------------------------------*/
/* Design */
#title {
	/*position: fixed;*/
	float: top;
	width: 750px;

	padding-top   : 0px;
	padding-left  : 0px;
	padding-right : 0px;
	padding-bottom: 0px;

	border-top   :  0px;
	border-left  :  0px;
	border-right :  0px;
	border-bottom:  0px;

	margin-top   : 20px;
	margin-left  : auto;
	margin-right : auto;
	margin-bottom: 20px;
}

#body {
	width: 730px;
	min-height: 300px;	/* For enough size that is not piled up with menu and footer */
	border-top   : 5px;
	border-left  : 5px;
	border-right : 5px;
	border-bottom: 5px;

	margin-top   :  0px;
	margin-left  : auto;
	margin-right : auto;
	margin-bottom: 20px;
}

#menu {
	width: 200px;
	float: left;

	/*position: fixed;*/
	top   : 70px;
	left  : auto;
	right : auto;
	bottom: auto;

	color: #000000;
	background-color: #ffffe0;	/*lightyellow;*/
	border: 2px dotted #f4C090;
	text-justify: inter-ideograph; /*distribute-all-lines;*/

	padding-top   : 10px;
	padding-left  :  0px;
	padding-right :  0px;
	padding-bottom: 10px;

/* border difinition make impossible to display broken-line
	border-top   : 0px;
	border-left  : 0px;
	border-right : 0px;
	border-bottom: 0px;
*/
	margin-top   :  0px;
	margin-left  :  auto;
	margin-right :  auto;
	margin-bottom: 20px;
}

#contents {
	width: 510px;
	float: right;

	padding-top   : 0px;
	padding-left  : 0px;
	padding-right : 0px;
	padding-bottom: 0px;

	border-top   :  0px;
	border-left  :  0px;
	border-right :  0px;
	border-bottom:  0px;

	margin-top   : 0px;
	margin-left  : 0px;
	margin-right : 0px;
	margin-bottom: 0px;
}

#footer {
	clear: both;
	width: 750px;

	padding-top   : 0px;
	padding-left  : 0px;
	padding-right : 0px;
	padding-bottom: 0px;

	border-top   :  0px;
	border-left  :  0px;
	border-right :  0px;
	border-bottom:  0px;

	margin-top   : 20px;
	margin-left  : auto;
	margin-right : auto;
	margin-bottom: 20px;
}

/*-------------------------------------------------------*/
/* Anchor */
a {
	font-weight: normal;
	/*text-decoration: none;*/
	text-decoration: underline;
	padding-bottom: 0px;
	padding-top   : 0px;
	padding-left  : 0px;
	padding-right : 0px;
	border-top   : 1px;
	border-bottom: 1px;
}

a:link {
	color: #191970
}
a:visited {
	color: #660099
}
a:hover {
	color: #000057;
	background-color: #a0a0f7;
	border-top   : 1px solid #000057;
	border-left  : 0px;
	border-right : 0px;
	border-bottom: 1px solid #000057;
}
a:active {
	color: #ffffff;
	background-color: #440077;
	border-top   : 1px solid #ffffff;
	border-left  : 0px;
	border-right : 0px;
	border-bottom: 1px solid #ffffff;
}

/**** for MENU ****/
.menu_item {
	display: block;
	width: 160px;

	padding-top   : 0px;
	padding-left  : 0px;
	padding-right : 0px;
	padding-bottom: 0px;

	border-top   : 0px;
	border-left  : 0px;
	border-right : 0px;
	border-bottom: 0px;

	margin-top   : 1px;
	margin-left  : auto;
	margin-right : auto;
	margin-bottom: 1px;

	color: #992222;
}

a.menu_item:hover {
	color: #000057;
	background-color: #ffff99;

	padding-top   : 0px;
	padding-left  : 0px;
	padding-right : 0px;
	padding-bottom: 0px;

	border-top   : 0px;
	border-left  : 0px;
	border-right : 0px;
	border-bottom: 0px;

	margin-top   : 1px;
	margin-left  : auto;
	margin-right : auto;
	margin-bottom: 1px;
}

a.menu_item:active {
	color: #2222ff;
	background-color: #ffdd44;

	padding-top   : 0px;
	padding-left  : 0px;
	padding-right : 0px;
	padding-bottom: 0px;

	border-top   : 0px;
	border-left  : 0px;
	border-right : 0px;
	border-bottom: 0px;

	margin-top   : 1px;
	margin-left  : auto;
	margin-right : auto;
	margin-bottom: 1px;
}


a.menu_item:visited {
	color: #550055;
}


kbd { text-decoration: underline; }


/*-------------------------------------------------------*/
h1 {
	font-size: 180%;
	font-weight: bold;
	font-style: normal;
	font-family: sans-serif;
	padding-top   : 3px;
	padding-left  : 0px;
	padding-right : 0px;
	padding-bottom: 3px;
	border-top   : 5px;
	border-left  : 5px;
	border-right : 5px;
	border-bottom: 0px;
	margin-top   : 10px;
	margin-left  :  5px;
	margin-right :  5px;
	margin-bottom: 10px;
	text-align: center;
	background: #dddd00;
}

h2 {
	font-size: 120%;
	font-weight: bold;
	font-style: normal;
	font-family: sans-serif;
	padding-bottom: 0px;
	border-top   : 5px;
	border-left  : 5px;
	border-right : 5px;
	border-bottom: 0px;
	margin-top   : 5px;
	margin-left  : 5px;
	margin-right : 5px;
	margin-bottom: 3px;
}

/* h2 class */
h2.cmn { 
	/* margin-top:30px; */
	border-bottom: solid 2px #eeff00;
	border-left: solid 12px #eeff00;
	padding-left: 3px;
}



h3 {
	font-size: 100%;
	font-weight: bold;
	font-style: normal;
	font-family: sans-serif;
	padding-bottom: 0px;
	border-top   : 5px;
	border-left  : 5px;
	border-right : 5px;
	border-bottom: 0px;
	margin-top   : 5px;
	margin-left  : 5px;
	margin-right : 5px;
	margin-bottom: 3px;
}

h4 {
	font-size: 100%;
	font-weight: bold;
	font-style: italic;
	font-family: sans-serif;
	padding-bottom: 0px;
	border-top   : 5px;
	border-left  : 5px;
	border-right : 5px;
	border-bottom: 0px;
	margin-top   : 5px;
	margin-left  : 5px;
	margin-right : 5px;
	margin-bottom: 3px;
}



/*-------------------------------------------------------*/
/* list */

/*-------------------------------------------------------*/


big {font-size: 120%}
small {font-size: 85%}

strong {
	font-weight: bold;
	font-style: normal;
}
em {
	font-weight: normal;
	font-style: italic;
}

.mono {
	font-family: monospace;
	font-weight: normal;
	font-style : normal;
}


.center { text-align:center; }
.right  { text-align:right; }



hr {
	width: 100%;
	border-collapse: collapse;
	border-top   : solid 1px #959595;
	border-bottom: solid 1px #959595;
	border-left  : solid 1px #959595;
	border-right : solid 1px #959595;

	padding-top:    0px;
	padding-left:   0px;
	padding-right:  0px;
	padding-bottom: 0px;

	margin-top:    5px;
	margin-left:   auto;
	margin-right:  auto;
	margin-bottom: 5px;


	background-color: #626262;
}


img {
	border: 0;
}



p {
	text-indent: 1em;
}



/*-----------------------------------------------------------------*/
div.sub-contents {
	max-width: 480px;

	padding-top   : 0px;
	padding-left  : 0px;
	padding-right : 0px;
	padding-bottom: 0px;

	border-top   :  0px;
	border-left  :  0px;
	border-right :  0px;
	border-bottom:  0px;

	margin-top   : 20px;
	margin-left  : auto;
	margin-right : auto;
	margin-bottom: 20px;
}

/*-----------------------------------------------------------------*/
table.cmn {
	border-collapse: collapse;
	border-top   : solid 2px #404040;
	border-bottom: solid 2px #404040;
	border-left  : solid 2px #404040;
	border-right : solid 2px #404040;

	margin-top   : 20px;
	margin-left  :  0px;
	margin-right :  0px;
	margin-bottom: 20px;

	empty-cells: show;
	caption-side: top;
}

thead.cmn{
	border-collapse: collapse;
	border-top   : solid 2px #404040;
	border-bottom: solid 2px #404040;
	border-left  : solid 2px #404040;
	border-right : solid 2px #404040;
}

caption.cmn {
	font-weight: bold;
	font-style : normal;
	caption-side: top;
}

tfoot.cmn {
	border-collapse: collapse;
	border-top   : solid 2px #404040;
	border-bottom: solid 2px #404040;
	border-left  : solid 2px #404040;
	border-right : solid 2px #404040;
}

tbody.cmn {
	border-collapse: collapse;
	border-top   : solid 2px #404040;
	border-bottom: solid 2px #404040;
	border-left  : solid 2px #404040;
	border-right : solid 2px #404040;
	empty-cells: show;
}


tr.cmn {
	border-collapse: collapse;
	border-top   : solid 1px #404040;
	border-bottom: solid 1px #404040;
	border-left  : solid 1px #404040;
	border-right : solid 1px #404040;
}


th.cmn {
	text-align: center;
	padding-top   : 2px;
	padding-left  : 5px;
	padding-right : 5px;
	padding-bottom: 2px;
	border-collapse: collapse;
	border-top   : solid 1px #404040;
	border-bottom: solid 1px #404040;
	border-left  : solid 1px #404040;
	border-right : solid 1px #404040;
	background-color: #cdcdcd;
}

td.cmn {
	text-align: center;
	padding-top   : 2px;
	padding-left  : 5px;
	padding-right : 5px;
	padding-bottom: 2px;
	border-collapse: collapse;
	border-top   : solid 1px #404040;
	border-bottom: solid 1px #404040;
	border-left  : solid 1px #404040;
	border-right : solid 1px #404040;
	background-color: #ffffff;
}



.topics {
	top   : auto;
	left  : auto;
	right : auto;
	bottom: auto;


	width: 400px;
	float: bottom;	/*center;*/

	background-color: #ffffe0;	/*lightyellow;*/
	border: 2px dotted #f4C090;
	text-justify: inter-ideograph; /*distribute-all-lines;*/


	padding-top   : 10px;
	padding-left  : 20px;
	padding-right : 20px;
	padding-bottom: 10px;

	margin-top   : 10px;
	margin-left  :  auto;
	margin-right :  auto;
	margin-bottom: 20px;

	text-align: center;
}

/*-----------------------------------------------------------------*/

.copyright {
	text-align: center;
	font-weight: normal;
	font-style:  italic;
}