/* -----------------------------------------------------------*/
/*                         Structure                          */
/* -----------------------------------------------------------*/

body {
	margin: 0px;
	padding: 0px;
	background:#000000 url(../images/bg.png) repeat-x;
	background-position:0 40px;
	text-align: center;		/* IE braucht das, um den Inhalt zu zentrieren (das margin=auto aus #container funzt nicht) */
}


/* damit verschieben wir alles um 40 Punkte nach unten;
   außerdem werden Gesamthöhe und -breite festgelegt
*/
#container {
	position: relative;
	top: 80px;
	width: 800px;
	height: 600px;
	margin: 0px auto; /* auto sorgt für Zentrierung */
	padding: 0px;
	text-align: left; /* hebt "text-align:center" aus dem body wieder auf */
}

/* sorgt für die Schatten links und rechts. Die Positionierung erfolgt absolut,
   aber in Bezug auf das übergeordnete container-Element 
*/
#shadow_left {
	position:absolute;
	top:0px;
	left:-42px;
	width:42px;
	height:115px;
	background:url(../images/shadow_left.png) no-repeat;
}

#shadow_right {
	position:absolute;
	top:0px;
	left:800px;
	width:51px;
	height:114px;
	background:url(../images/shadow_right.png) no-repeat;
}


#pageHeader {
	position: relative;	/* in Bezug auf den container */
	top: 0px;
	left: 0px;
	height: 120px;
	width: 800px;  
	background:url(../images/header_bg.png);
 }

/* den Titel (mari furuya) haben wir schon im bg-image zu pageHeader. Hier sorgen
   wir nur noch dafür, dass der Link funktioniert. Die Positionierung der
   anklickbaren Region erfolgt in Bezug auf das übergeordnete pageHeader-Element.
*/
#pageHeader #title {
  	position: absolute;
 	bottom: 30px;
 	left: 10px;
	width: 220px;
	height: 40px;
	text-indent:-9999px;
	cursor:pointer;
	font-size:1px;
}

/* die Sprachwahl steht oben rechts im pageHeader */
#pageHeader #language {
	padding:10px;
	float:right;
	font-size: 12px;
}


#pageHeader #navigation {
	position: absolute;
	right: 10px;
	bottom: 25px;
	height: 40px;
	width: 440px;
	margin: 0px;
	padding:0px;
}

#pageHeader ul {
	list-style:none;
	margin:0px;
	padding:0px;
	float:right;
}

#pageHeader li {
	padding:0;
	margin:0 0 0 5px;
	text-indent:-9999px;
	float:left;
}


#navigation li a {
	height:40px;
	display:block;
	outline: none;
}

#navigation li.welcome_ja a {
	background:url(../images/navigation/welcome_ja.png) no-repeat;
	background-position: 0 -40px;
	width: 95px;
	height: 40px;
}

#navigation li.news_ja a {
	background:url(../images/navigation/news_ja.png) no-repeat;
	background-position: 0 -40px;
	width:67px;
	height: 40px;
}

#navigation li.letters_ja a {
	background:url(../images/navigation/letters_ja.png) no-repeat;
	background-position: 0 -40px;
	/*width:84px;*/
	width: 0px;
	margin: 0px;
}
#navigation li.contact_ja a {
	background:url(../images/navigation/contact_ja.png) no-repeat;
	background-position: 0 -40px;
	width:88px;
}
#navigation li.profile_ja a {
	background:url(../images/navigation/profile_ja.png) no-repeat;
	background-position: 0 -40px;
	width:79px;
}

#navigation li.welcome_ja a:hover,
#navigation li.news_ja a:hover,
#navigation li.letters_ja a:hover,
#navigation li.contact_ja a:hover,
#navigation li.profile_ja a:hover {
	background-position: 0 0px;
}

#navigation li.welcome_ja a.on,
#navigation li.news_ja a.on,
#navigation li.letters_ja a.on,
#navigation li.contact_ja a.on,
#navigation li.profile_ja a.on {
	background-position: 0 0px;
}

#navigation li.welcome_de a {
	background:url(../images/navigation/welcome_de.png) no-repeat;
	background-position: 0 -40px;
/*	width:122px; */
	width: 0px;
	height: 40px;
}

#navigation li.unterricht_de a {
	background:url(../images/navigation/unterricht_de.png) no-repeat;
	background-position: 0 -40px;
	width:108px;
}
#navigation li.contact_de a {
	background:url(../images/navigation/contact_de.png) no-repeat;
	background-position: 0 -40px;
	width:90px;
}
#navigation li.profile_de a {
	background:url(../images/navigation/profile_de.png) no-repeat;
	background-position: 0 -40px;
	width:70px;
}

#navigation li.welcome_de a:hover {
	background-position: 0 0px;
}

#navigation li.unterricht_de a:hover {
	background-position: 0 0px;
}

#navigation li.contact_de a:hover {
	background-position: 0 0px;
}

#navigation li.profile_de a:hover {
	background-position: 0 0px;
}

#navigation li.welcome_de a.on,
#navigation li.unterricht_de a.on,
#navigation li.contact_de a.on,
#navigation li.profile_de a.on {
	background-position: 0 0px;
}

#contents {
	position:absolute;
	top:120px;
	width: 800px;
	height: 480px;
	overflow: auto;
	background:url(../images/contents_bg.jpg) no-repeat;
}


/* use .narrowtext in combination with .wideinfo
   used for example on the front page
*/
#contents .narrowtext {
	position: relative;
	float:right;
	width:445px;
	padding-top:0px;
	padding-bottom:20px;
	padding-right:10px;
	height: 440px;
	overflow: auto;
	margin-right: 2px;
	outline: none;
}

#contents .wideinfo {
	position: absolute;
	float: left;
	width: 330px;
	padding-top:25px;
	text-align: center;
}

/* use .widetext in combination with .narrowinfo
   used for example on the diary-pages
*/
#contents .widetext {
	float:right;
	width:550px;
	padding-top:10px;
	padding-bottom:20px;
	padding-right:20px;
	height: 440px;
	overflow: auto;
}

#contents .narrowinfo {
	float: left;
	position: absolute;
	width: 190px;
	padding-top:25px;
	padding-left: 25px;
}


#footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 0px;
	padding-left: 5px;
	margin: 0px;
	
	font-size: 10px;
	color: black;
}




/* -----------------------------------------------------------*/
/*                         Appearence                         */
/* -----------------------------------------------------------*/

body {
	font-family: "Trebuchet MS", "ヒラギノ明朝 Pro W3";
}

a {
	color: rgb(51, 5, 59);
	text-decoration: none;
	}

a:hover {
	color: rgb(51, 5, 59);
	text-decoration: underline;
	}

#pageHeader #language a {
	font-size: 12px;
	color: black;
	text-decoration: none;
}


#contents #decoration img {
	border: 1px solid black;
}


#contents .widetext p, #contents .narrowtext p {
	font-size: 13px;
	line-height: 175%;
	margin-bottom: 0px;
	text-align: left;
}
#contents .widetext p + p, #contents .narrowtext p + p {
   text-indent:1em;
   margin-top:4px;
}


#contents .widetext p.noindent, #contents .narrowtext p.noindent {
	text-indent: 0;
}


#contents .widetext h3, #contents .narrowtext h3 {
	font-size: 14px;
}

#contents .widetext img, #contents .narrowtext img {
	padding: 0;
	max-width: 100%;
	border: 1px solid black;
}

#contents .narrowtext ul, #contents .widetext ul {
	list-style-image:url(../images/list.gif);
}

#contents .narrowtext ul li, #contents .widetext ul li {
	font-size: 13px;
	line-height: 175%;
}


/* -----------------------------------------------------------*/
/*                       Contact Form                         */
/* -----------------------------------------------------------*/
#contactform input {
	padding: 2px;
	margin: 5px 5px 1px 0;
	background: rgba(200, 200, 200, 0.7);
	border: none;
	}
	
#contactform .long {
	width: 170px;
}

#contactform .imaimage {
	background: transparent;
}
	
#contactform textarea {
	width: 98%;
	padding: 2px;
	margin: 5px 5px 1px 0;
	background: rgba(200, 200, 200, 0.7);
	border: none;
	}

#contactform #submit {
	float: right;
	margin: 5px 5px 1px 0;
	}

#contactform small {
	color: black;
	font-size: 12px;
}


/* -----------------------------------------------------------*/
/*                       Order Form                         */
/* -----------------------------------------------------------*/
#orderform input {
	padding: 2px;
	border: 1px solid transparent;
	background: rgba(200, 200, 200, 0.7);
	}

#orderform .long {
	width: 170px;
	}
	
#orderform .imaimage {
	background: transparent;
	}
	
#orderform textarea {
	width: 97%;
	padding: 2px;
	background: rgba(200, 200, 200, 0.7);
	border: none;
	}



/* -----------------------------------------------------------*/
/*                          Tables                            */
/* -----------------------------------------------------------*/
table.labeledlist {
			margin-top: 5px;
			width: 99%;
		}
		
		td.label {
			vertical-align: top;
			font-size: 13px;
			line-height: 175%;
			white-space:nowrap;
			padding-right: 8px;
			background: rgba(200, 200, 200, 0.1);
		}
		

		td.item {
			vertical-align: top;
			font-size: 13px;
			line-height: 175%;
			background: rgba(200, 200, 200, 0.05);
		}