/*
	このスタイルシートはgreyスキン（default Nucleus skin）のスタイルシートです。
	ここに、ページがどのように構築されるかがあります。
	
	サイトを別のデザインで使用したい場合は、スキンとテンプレートを編集して、自分のスタイルシートを定義してください。
	
	使用している要素の一覧：
	MAIN PAGE　（全体の基礎の部分）
		---------
		body
		  div.contents
		    h1 (site title)
		      h2 (date header)
		        h3 (item title)
		          div.itembody (item text)
		          span.iteminfo (time / author / editlink / amount of comments)
		  div.logo
		  div.menu
		    h1 (navigation, hidden link)
		      h2 (menu titles)
		
		DETAILED PAGE　（grey/fullテンプレートで使用する部分）
		-------------
		body
		  div.contents
		    h1 (site title)
		      h2 (item title)
		        div.itembody (item text)
		        div.iteminfo (item info)
		      h2 (comments)
		        h3 (commentor name)
	  	          div.commentbody
		      h2 (add comment)
		  div.logo
		  div.menu	
		    h1 (navigation, hidden link)
		      h2 (menu titles)

		OTHER PAGES　（複数箇所で設定しています。）
		-----------
		
		other pages are similar, having a .contents and a .menu part
*/
/*
	サイト全体のデザインを設定します。:
	フォント- verdana, arial or font from the sans-serif family
		verdana, arialのフォントで表示できない場合に備えて、汎用フォントファミリ名sans-serifを指定しておきます。
	文字の色- 黒(black,#000 or #000000) 
	背景の色- 白(white,#fff or #ffffff)
*/


body {
	font-family: verdana, arial, sans-serif;
	font-size: small;	
	background-color: #fff;
	color: #000;
}
/* 
	下記の定義は、ページがどのように見るか決めます。
	
	3つの領域があります。メニューとロゴ部分は絶対座標で指定しています。
	
	.contents: ページの主要な内容を含んでいます。
	.menu: メニューを備えた側面記事
	.logo: 側面記事上に表示されるロゴ

*/

/* ページの主要な内容部分 */
.contents {
   margin-left: 200px; 
   width: 500px; 
}

/* メニューを備えた側面記事と、その上に表示されるロゴ */
.logo {
	position: absolute;

	top: 5px;
	left: 10px;
}

.menu {
	position: absolute;

	top: 100px;
	left: 30px;
	width: 110px;

/* メニュー内で使用している文字の色とサイズ */
	color: #000000;
	font-size: small;	
}
/*
	使用している要素、クラス名について：メニューのヘッダー (.menu h2), ページタイトル (h1), 日付ヘッダー (.contents h2):
	- ページタイトルが中心に寄せられます。 ( .contents div)
	- メニューヘッダーは小さなフォントを使用します。(h2) 
	- 日付ヘッダーは大きいフォントを周囲に枠線を引いた中で使用します。
*/

h1 {
	text-align: right;
}

.menu h2 {
	font-size: small;
}

.contents h2 {
	background-color: grey;
	border: 1px solid #ccc;

	padding: 5px; 
	
	font-size: small;

	margin-bottom: 5px;
}
/* 
	アイテム、リストの設定(メインや、アイテム、アーカイブで使用)
	- アイテムのタイトル (h3 class="item")
	- アイテムの主要な部分(.itembody)
	- アイテム追加をしたメンバーの名前、コメントの量の表示(.iteminfo)	
	 .iteminfo 部分のリンク表示(.iteminfo a)
*/

/* アイテム */
h3.item {
	font-size: medium;
	margin: 0px;
	margin-top: 10px;
}

.itembody {	
	margin-top: 5px;	
	margin-bottom: 5px;
}

.iteminfo {	
	font-size: x-small;
	color: gray;
}

.iteminfo a {
	font-weight: bolder;
	color: #555;
	text-decoration: none;
}
/*
	コメント部分の設定(コメント、アイテムページで使用)
	- コメントを書いた方の名前(h3.comment)
	- コメント本文(.commentbody)
	- コメント部分の時間(.commentinfo) 
*/

/* コメント */
h3.comment {
	font-size: medium;
	margin-bottom: 10px;
}

.commentbody {
	text-align: justify;
}

.commentinfo {	
	font-size: x-small;
	color: gray;
}

/*
	アイテム追加画面にある[leftboxを追加]、[rightboxを追加]のボタンにより入力されたクラスのスタイル。
	
	文字は大きめ、横幅は20％、それぞれ線が左側、右側に入ります。
*/

.leftbox, .rightbox {
	margin: 3px;
	padding: 3px;
	font-size: larger;
	width: 20%;
}
.leftbox {
	float: left;
	border-right: 2px solid #ccc;	
}
.rightbox {
	float: right;
	border-left: 2px solid #ccc;	
}

/*
	その他の設定:
	- 画像の周りの線を表示しないようにする。(img)
	- CSSが何らかの理由で読み込まれなかった場合に適用される部分(通常は表には出てきません)(.skip)
	- アイテムやアーカイブリストで使用されています。リストスタイル無しの設定です。(<ul class="nobullets">)
	- 検索単語に黄色の背景色をつけます。(.highlight)
*/

img {
	border: none;
}

.skip {
	display: none;
}

ul.nobullets {
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
}

.highlight {
	background-color: yellow;
}