/*
======================================================
general
======================================================
*/

*{padding:0px;margin:0px;}
html{height:100%;}
a:link{color:#666;}
a:visited{color:#666;}
a:active{color:#ccc}
a:hover{color:#ccc;} 
a{text-decoration:none;}


ul,li{list-style:none;text-align:center;}
body{height:100%;width:100%;font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", Helvetica, Arial, sans-serif;}
img{outline:none;border:none;}
#top-wrap{width:1002px;height:552px;margin:0px auto;position:relative;top:5%;text-align:left;}
#header{display:block;width:100%;min-height:10px;clear:both;}
#main{border:1px solid #666;height:500px;}
#footer{width:100%;clear:both;font-size:0.65em;margin:4px 0px;font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", Helvetica, Arial, sans-serif;color:#ccc;}

/*
======================================================
index page
======================================================
*/

.image-left,
.menu-wrap{
	float:left;
	display:block;
}
.menu-wrap{
	border-left:1px solid #999;
	width:499px;
	height:500px;
}
#menu{
	margin:174px 0px 85px;
}
#menu li{
	margin:30px 0px;
	height:15px;
}
#menu a{
	width:100px;
	height:15px;
	margin:0px auto;
	display:block;
	text-indent:-99999px;
}
#works a{
	background:url(img/works.gif) no-repeat;
}
#logs a{
	background:url(img/logs.gif) no-repeat;
}
#contact a{
	background:url(img/contact.gif) no-repeat;
}
.menu-wrap h1{
	width:100px;
	height:50px;
	display:block;
	text-indent:-99999px;
	background:url(img/mattsuo-logo.gif) no-repeat;
	margin:0px auto;
}


/*
======================================================
works
======================================================
*/

.theory,
.category-wrap{
	float:left;
	display:block;
}
.theory{
	width:50%;
	text-align:center;
	margin:250px auto 0;
}
.theory p{
	font-size:0.8em;
	color:#999;
	font-family:"Kozuka Gothic Pro","ヒラギノ角ゴ Pro W3", Helvetica, Arial, sans-serif;
}
.category-wrap{
	border-left:1px solid #666;
	width:499px;
	height:500px;
}
#category{
	margin:200px 0px;
	text-align:center;
}
#category li{
	margin:30px 0px;
	height:15px;
}
#category a{
	width:100px;
	height:15px;
	margin:0px auto;
	display:block;
	text-indent:-99999px;
}
#painting a{
	background:url(img/painting.gif) no-repeat;
}
#drawing a{
	background:url(img/drawing.gif) no-repeat;
}
#sculpture a{
	background:url(img/sculpture.gif) no-repeat;
}
#collection a{
	background:url(img/collection.gif) no-repeat;
}

/*
======================================================
works - contents
======================================================
*/

.work,
.index-wrap{
	float:left;
}
.work{
	width:498px;
	height:500px;
}
.work img{
	position:absolute;
	top:50%;
	left:50%;
	width:470px;
	height:470px;
	margin-top:-235px;
	margin-left:-485px;
	font-size:0.8em;
	color:#666666;
}
.index-wrap{
	border-left:1px solid #666;
	height:500px;
	width:499px;
}
#index{
	margin:175px 60px 130px 420px;
	text-align:center;
	font-size:0.8em;
}
#index li{
	display:block;
	margin:0px 0px 0px 0px;
	width:18px;
	height:18px;
	line-height:18px;
}
#index .active{
	background-color:#666;
	color:#fff;
}
#index .active a:visited{
	color:#fff;
}
#desc{
	margin:0px 15px;
	line-height:1.2em;
	font-size:0.6em;
	color:#666666;
}

/*
======================================================
logs - top
======================================================
*/

#cal-wrap,#month-wrap{
	float:left;	display:block; color:#666666
}
.clear{clear:both;}
#cal-wrap,#month-wrap p{
	font-family:"Kozuka Gothic Pro","ヒラギノ角ゴ Pro W3", Helvetica, Arial, sans-serif;
	font-size:0.9em;
	text-align:center;
	padding:10px;
}

#cal-wrap{
	border-right:1px solid #999;
	width:500px;
	height:300px;
	padding: 200px 0px 0px;
}
#calendar ul{
	width:147px;
	padding:0px 176px;
	font-family:"Kozuka Gothic Pro","ヒラギノ角ゴ Pro W3", Helvetica, Arial, sans-serif;
	font-size:0.9em;
}
#calendar ul li{
	float:left;
	width:15px;
	height:15px;
	border:3px solid #fff;
	line-height:15px;
	solid #FFFFFF;
}
#calendar .active {
	background-color:#666;
}
#calendar .active a:link {
	color:#fff;
}
#calendar .active a:visited{
	color:#fff;
}
#month-wrap{
	margin:80px 199px;
	width:100px;
	height:340px;
	text-align:center;
}
#month ul{
	font-family:"Kozuka Gothic Pro","ヒラギノ角ゴ Pro W3", Helvetica, Arial, sans-serif;
	font-size:0.8em;
}
#month ul li{
	height:1em;
	margin:10px 0px;
	line-height:1em;
}
#month .active{
	padding:1px 2px; /*space between outline of background-color and text*/
	font-weight:bold;
	color:#333333;
}


/*
======================================================
logs - contents
======================================================
*/

.log-image,
.log-contents{
	float:left;
}
.log-image{
	width:498px;
	height:500px;
}
.log-image img{
	position:absolute;
	top:50%;
	left:50%;
	width:470px;
	height:470px;
	margin-top:-235px;
	margin-left:-485px;
}
.log-contents{
	border-left:1px solid #666;
	width:499px;
	height:500px;
}
.log-contents p{
	margin:25px 0 0 25px;
	font-size:0.8em;
	color:#666;
}
#log{
	margin:100px 25px;
	height:220px;
	font-size:0.8em;
	color:#666;
}


/*
======================================================
contact page
======================================================
*/

#contact-image,
.navi-wrap{
	float:left;
	display:block;
}
.navi-wrap{
	width:50%;
	text-align:center;
}
.navi-wrap h1{
	width:100px;
	height:50px;
	display:block;
	text-indent:-99999px;
	background:url(img/mattsuo-logo.gif) no-repeat;
	margin:0px auto;
}
.navi-wrap p{
	font-size:0.8em;
	color:#999;
	margin:180px auto;
	font-family:"Kozuka Gothic Pro","ヒラギノ角ゴ Pro W3", Helvetica, Arial, sans-serif;
}