@charset "UTF-8";
body {margin: 0; padding: 0; background: #060606;}
#printarea{
	margin: 0 auto;
	width: 900px;
	height: 775px; /* header 100 + list 20 + main 620 + footer 35 = 775 */
	background: #ffffff;
	font: 12px serif;
}

/* HEADER 900x100 */
#header{
	width: auto; height: 100px;
	background: #060606;
	color: #ffffcc;
	overflow: hidden;
}

/* NAVIGATION LIST 900x20 */
#nav{
	width: auto; height:20px;
	margin: 0;
}
#nav ul{
	margin-top:0; margin-left:0;
	padding-bottom:3px; padding-top:3px; padding-left:0;
	text-align:center;
	background-color: #060606;
	width: 100%;
	line-height: 14px;
	color: #ccaa22;
	font-weight: bolder; font-stretch: narrower; font-style: oblique; letter-spacing: 1px;
}
#nav ul li{
	display: inline;
	margin:0px; padding:3px 0;
}
#nav ul li a{
	padding: 3px 20px;
	color: #ccaa22; text-decoration: none;
	border-right: 1px solid #dddddd;
}
#nav ul li a:hover{
	background-color: #7f7f7f; color: #ffff00; /* vaalea laatikko */ 
}
#nav #active{
	background-color: #b3b3b3; /* vaaleampi laatikko */
}
#nav #current{
	color: #060606;
}
/* MAIN 900x620(880x600) */
#main{
	clear: both; width: auto; height: 600px; padding: 10px;
	background: #ffffff; color: #333333;
	background-image: url("bg.jpg"); background-repeat: no-repeat;
}

/* FOOTER 900x35 */
#footer{
	width: auto; height: 15px; padding: 10px;
	background: #ccaa22;
	color: #dddddd;
	text-align: center;
}

/* for index */
#index-3 a span {display:none; }
#index-3 a {display:block; width:160px; height:120px; background-image:url(index-3.jpg); background-repeat:no-repeat;}
#index-3 a:hover { background-image:url(index-link3.jpg); background-repeat:no-repeat;}

#index-5 a span {display:none; }
#index-5 a {display:block; width:160px; height:120px; background-image:url(index-5.jpg); background-repeat:no-repeat;}
#index-5 a:hover { background-image:url(index-link5.jpg); background-repeat:no-repeat;}

#index-7 a span {display:none; }
#index-7 a {display:block; width:160px; height:120px; background-image:url(index-7.jpg); background-repeat:no-repeat;}
#index-7 a:hover { background-image:url(index-link7.jpg); background-repeat:no-repeat;}

#index-9 a span {display:none; }
#index-9 a {display:block; width:160px; height:120px; background-image:url(index-9.jpg); background-repeat:no-repeat;}
#index-9 a:hover { background-image:url(index-link9.jpg); background-repeat:no-repeat;}

/* for taide(gallery) */
#taide-3 a span {display: none; }
#taide-3 a {display:block; width:207px; height:60px; background-image:url(taide-3.jpg); background-repeat:no-repeat;}
#taide-3 a:hover { background-image:url(taide-link3.jpg); background-repeat:no-repeat;}

.hidden {display: none; }


/* END */