/* body−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

body{
  background: #000000 url(stars_sky1.gif) repeat fixed;
  margin: 0px;
  padding: 0px;
  text-align: center;
}


img{
  border: 0px;
}


/* ページレイアウト−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

#layout{
  width: 750px;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
}


#left{
  float: left;
  width: 505px;
  margin: 0px 20px 0px 0px;
  padding: 0px;
}

/*　rightでは違う色を使いたいが、親要素のcontentsで色指定すると親要素の色指定が優先されるため
    個別に指定している　*/

#left a{
  color: #3cc;
}

#left a:hover{
  color: #9ff;
}


#right{
  float: right;
  width: 180px;
  margin: 0px;
  padding: 0px;
}


/* トップ画像−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

/* h1（h2も？）が最初の要素の場合、h1のマージン・パディングを共に0にしないと、それを含む
   ボックス上部に想定外の空白ができるブラウザ（主にIE以外）があるので注意すること */

h1{
  width: 750px;
  height: 120px;
  margin: 0px;
  padding: 0px;
  position: relative;
  text-align: left;
}

/* ↓６以前のＩＥは透過ＰＮＧに対応していない。ＧＩＦを使用するか、ＪＳで回避する */

h1 span{
  background: transparent url(header.gif) no-repeat left top;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* ↑positionプロパティのabsolute,relative属性は必須！ */


/* コンテンツ−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

#contents{
  width: 710px;
  font: 15px "Arial","Helvetica","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
  margin: 20px 20px 0px 20px;
  padding: 0px;
  text-align: left;
  line-height: 23px;
  color: #a9a9a9;  
}

#contents ul{
  list-style: none;
}


h2{
  font-size: 15px;
  color: #ccc;
  height: 25px;
  padding: 6px 0px 0px 15px;
  margin: 0px;
}

h2 span{
/*  display: none;*/
}


/* 更新履歴−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

#topics{
  width: 492px;
  margin: 0px;
  padding: 0px;
}

#topics h2{
/*  background: transparent url(history.gif) no-repeat top left;*/
  border: solid #999 1px;
  border-bottom: none;
  margin-bottom: 0px;
}

#topics_contents{
  background: url(stars_sky1.gif) repeat fixed;
  font-size: 13px;
  border: solid 1px;
  overflow: auto;
  width: 490px;
  height: 185px;
  margin-top: 0px;
}

#topics span.new{
  font-size: 12px;
  color: #fc0;
  font-weight: bold;
  margin-right: 4px;
}


.date{
  width: 75px;
  margin: 4px 8px 0px 2px;
  padding-left: 9px;
  float: left;
}


.news{
/* widthについては単純に合計で470pxになればよいというものではないようだ */
  width: 360px;
/* 75+8+2+9=94 を左マージンに取ると、右側が回り込み続ける */
  margin: 4px 0px 0px 94px;
}


/* 管理人挨拶−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

#greeting{
  border: solid #999 1px;
  width: 490px;
  margin-top: 50px;
}

#greeting h2{
/*  background: transparent url(greeting.gif) no-repeat top left;*/
  padding-bottom: 2px;
  border-bottom: solid #999 1px;
  margin-bottom: 10px;
}


/* ↓注意事項と共通 */

.comment{
  margin: 15px 20px 30px 20px;
}

.comment p.sign{
  text-align: right;
  margin-right: 20px;
}


/* 注意事項−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

#caution{
  color: #a9a9a9;
  border: solid #999 1px;
  width: 490px;
  margin-top: 50px;
}

#caution h2{
/*  background: transparent url(caution.gif) no-repeat top left;*/
  padding-bottom: 2px;
  border-bottom: solid #999 1px;
}



/* メニュー−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

#menubox{
  width: 180px;
  margin: 0px;
  padding: 0px;
  border: solid #999 1px;
}

#menubox h2{
/*  background: transparent url(contents.gif) no-repeat top left;*/
  padding-bottom: 2px;
  border-bottom: solid #999 1px;
}


#menulist{
  font-size: 13px;
  font-weight: bold;  
  margin: 0px;
  padding: 0px;
}


.menu{
  width: 180px;
  margin: 0px;
  border-bottom: solid #999 1px;
}

/*　.menuでheightを指定せずに、.menu aのline-heightで高さを決めてやるとdisplay: block;がうまくはたらく。
　　また、.menuと.menu aの両方でwidthを指定することも必要　*/

.menu a{
  background: transparent url(sankaku.gif) no-repeat left center;
  width: 180px;
  color: #ccc;
  display: block;
  line-height: 36px;
  text-indent: 17px;
  text-decoration: none;
}

.menu a:hover{
  background-color: #333;
  text-decoration: underline;
  color: #fff;
}


/* キーワード−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

#keyword{
  width: 180px;
  margin: 0px;
  padding: 0px;
  border: solid #999 1px;
  margin-top: 50px;
}

#keyword h2{
/*  background: transparent url(keyword.gif) no-repeat top left;*/
  padding-bottom: 2px;
  border-bottom: solid #999 1px;
}


#keywordlist{
  width: 180px;
  margin: 8px 0px 30px 0px;
  padding: 0px;
}

#keywordlist li{
  width: 162px;
  margin-top: 12px;
  margin-left: 9px;
}

#keywordlist li a{
  color: #a9a9a9;
  text-decoration: none;
  font-size: 13px;
}

#keywordlist li a:hover{
  color: #fff;
  text-decoration: underline;
}


/* カウンター−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

#counter{
  margin-top: 25px;
  text-align: right;
  clear: both;
}

/* フッター−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

#footer{
  text-align: center;
  margin: 10px 0px 0px 0px;
  clear: both;
}

#footer p{
  font-size: 12px;
  font-weight: bold;
}