*{ margin:0;padding:0; }

html { height:100%; }

body {
height:100%;
background-color:#999999;
margin:0; 
padding:0; 
font-style:normal;
font-weight:normal;
font-size:0.9em;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HiraKakuPro-W3" , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
text-align:center;
text-indent:0pt;
color:black;
line-height:1.3em;
}

a:link {
color:#3333ff;
}

a:visited {
color:#006600;
}

a:active {
color:#ff9933;
}

/*boxes */

#wrap {
margin-right:auto;
margin-left:auto;
border:none;
width:740px; 
height:100%; /* IE6用 */
min-height:100%;
background-color:black;
border-right:1px solid black;
border-left:1px solid black;
text-align:left;
}

body > #wrap { 
height:auto;  /* IE6以外で高さを延ばす*/
}

.container {
margin-right:auto;
margin-left:auto;
border:none;
width:740px; 
background-color:white;
}


#inner {
border:none;
width:600px; 
height:100%;
min-height:100%;
background-color:white;
border:1px solid red; 
position: relative;
top: 0px;
left:70px;
}

#menu {
float:left;
width:175px;
height:350px;
margin-top:25px; 
margin-left:70px; 
padding:0; 
}

#main {
float:right;
width:352px;
height:352px;
margin-top:25px; 
margin-right:70px;
margin-bottom:25px; 
padding:0; 
}

#main2 {
float:right;
width:352px;
margin-top:25px; 
margin-right:70px;
margin-bottom:25px; 
padding:0; 
}

#footer {
margin-top:10px;
width:740px; 
min-height:30px; 
height:100px; 
clear:both;
}

#nav { 
width:90px;
height:100px;
margin:0; 
padding:0; 
margin-top:30px;
margin-left:20px;
}


.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* exlude MacIE5 \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* end MacIE5 */



/* --------------------------------
roll over
reference  http://www.stylish-style.com/csstec/basic/l-rollover6.html 
-------------------------------- */

ul#nav-rollover {
    list-style:none;
    width:100%;
	margin:0; 
padding:0; 
}

ul#nav-rollover li {
    list-style:none;
    float: left;
    height:25px;
}

ul#nav-rollover a{
    display:block;
    width:90px;
    height:25px;
	background-image:url(../hp-images/nav-image.gif);
}

#nav-rollover a span{display:none;} 

a#top  {
		 background-position: 0px 0px;
}

a:hover#top {
	    background-position: 90px 0px;
}

a#works {
    background-position: 0px -25px;
}

a:hover#works  {
	background-position: 90px  -25px;
}

a#profile {
    background-position: 0px -50px;
}

a:hover#profile {
    background-position: 90px -50px;
}

a#contact  {
    background-position: 0px -75px;
}

a:hover#contact  {
    background-position: 90px -75px;
}

a#blog {
    background-position: 0px -100px;
}

a:hover#blog {
    background-position: 90px -100px;
}

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

h1{ 
margin:50px 0 0 0;
padding:0px;
}

h2 { 
margin:50px 0 10px 15px;
padding:0px;
}

h2.top { 
margin:0;
padding:0px;
}

img { 
	vertical-align:bottom; 
	border:0px;
	}


#footer address {
	font-style:normal;
	color:#666666;
	text-align: right;
	margin-right:20px;
	font-size: 10px;
	letter-spacing:0.2em;
}
#footer address.monotype {
	font-family:monospace;
}

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

.thumbnail{
	padding: 0;
	float: left;
	margin: 3px;
	border:1px solid black;
	}

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

form {
font-size:0.9em;
padding-bottom:30px;
}

form p.coment {
  margin:0.8em 0 0 0;
  font-size:0.95em;
}

form p.coment2{

text-align:center;
  margin:0.8em auto 0 auto;
}

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

dl.profile {

  margin:0px 15px;

}

dl.profile dt {

  margin: 0;

  padding: 0.5em 0em 1em 1em;

font-weight:bolder;  

font-size:0.95em;
}

dl.profile dt.singleline {

  margin: 0;

 float: left;

padding: 0em 1em 0.1em 1em; 

}

dl.profile dd {

  padding: 0em 1em 1em 1em;
  border-bottom:dashed 1px #E2E2DF; 
  margin-bottom:1em;
  }

dl.profile dd.noneboer {
border-bottom:none; 
padding: 0em 1em 0em 1em;
}



dl.profile dd.note {
clear:left;
font-size:0.8em;

}

dl.profile ul {
margin-left:1em;
}

dl.profile p.year {
font-size:0.9em;
font-weight:bolder;
margin-top:0.3em;
}