/* common */


/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

[ ピエット ]   by mor 20070225

TYPE: 右カラム

○リキッドもいいかも！ 
○画像が少ないから、軽い！ 
○パーツごとに色分けされているので、カスタマイズが楽しい！

				   …というコンセプトにて。

○色：  白#fcfcfc  黄#dedf00  赤#dd0141 青#4795bf 灰#aaa
        黒#222   区切り線 #ccc


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

※修正20070322 :  6週目のカレンダー表示に対応しました。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */




/*
-------------------------------------------------------------------
 初期化
------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
}


h1, h2, h3 {
  font-size :100%;
}



/*
==============================================================================================
●bodyに関する定義：
============================================================================================== */

body {
  background: #222 ;
  color: #222;
  font-size: 10pt;
  line-height:1.5em;
  letter-spacing: 0.1em;
  font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Osaka", "Helvetica","Arial";
}




/*
==============================================================================================
●レイアウトDIVに関する定義：
right か center か container のどれが一番（縦方向に）大きくなるかはわからない。
そのため、どれであっても右カラムの境界線が画面下まで伸びるよう、BGを置いている。
============================================================================================== */
#container {
  background : #4795bf url(http://s.asablo.jp/css/common2r/piet/bg-border-2r.gif) repeat-y right bottom ;  /* -- カラム下をBGで補完 -- */
  margin : 0;
  padding : 0;
  width : 100%;
}


#head {
  background : #dd0141;
  border-bottom : solid 5px #222;
  height : 95px;
  width : 100%;
}


#center {
  background : #4795bf url(http://s.asablo.jp/css/common2r/piet/bg-border-2r.gif) repeat-y right bottom ;  /* -- カラム下をBGで補完 -- */
  border: none;
  float : left;
  margin-right : -250px;     /* -- rightの幅の分、引いておく -- */
  width : 100%;
}


#main {
  margin-right:250px;
  margin-left: 0px;
  margin-top: 0;
}


#right {
  background: #fcfcfc;
  border-left:solid 5px #222;
  float: right;
  margin-top:-100px;
  padding: 0;
  width: 245px;              /* -- rightの幅は、245+5 -- */
}


#footer {
  background: url(http://s.asablo.jp/css/common2r/piet/bg-footer-2r.gif) left repeat-y #dedf00;
  border-top:solid 5px #222;
  clear: both;
  float:none;
  height:50px;
  width: 100%;
}




/*
==============================================================================================
●レイアウトに関するクラスの定義： 未定義
============================================================================================== */
.sidebar {
}




/*
==============================================================================================
●文字関係の初期設定
============================================================================================== */
a {
  color : #222;
  border-bottom : 1px dashed #222;
  text-decoration : none;
}


a:hover {
  color : #fff;
  background : #222;
  text-decoration : none;
}


#head h1 {
  font-size : 100%;
  font-weight : normal;
  padding-left : 40px;
  padding-top : 20px;
}


pre {
  border : 1px dashed #ccc;
  margin : 1em;
  padding : 1em;
}


blockquote {
  border : 1px solid #ccc;
  margin : 1em;
  padding : 1em;
}


p {
}




/*
==============================================================================================
●次・前のボタン：
#navi-top は、absolute で ボディに対して配置している。
============================================================================================== */
#navi-top {
  background:#fcfcfc;
  font-size:80%;
  padding-right:5px;
  width:125px;
  position: absolute;
  right:250px;
  top:100px;
}


#navi-bottom {
  clear:right;
  float:right;
  font-size:80%;
  padding-right:5px;
  height:50px;
  width:125px;
}


.navi {
  text-align: right;
  width: 100%;
}




/*
==============================================================================================
●メッセージの定義：
各メッセージとも、下のボーダーだけが黒線となっている。
============================================================================================== */
.msg {
  background-color : #fcfcfc;
  border-bottom : solid 5px #222;
  padding : 20px 0 20px;     /* --★メッセージBOXの上下の余白 -- */
  width:100%;
}


.msg-title {
  color : #222;
  font-weight : normal;     /* --★メッセージタイトルは、太字やめる -- */
  font-size : 100%;
  padding-bottom : 10px;
  padding-left : 40px;
}


.msg-date {
  color : #aaa;
}


.msg-pict{
  float : right;
  margin-left : 10px;
  padding-bottom : 20px;
}


.msg-body {
  background-color: #fcfcfc;
  font-size:  100%;
  padding : 0 40px 10px;          /* -- ★メッセージ本文の横の余白  -- */
}


.msg-footer {
  clear : right;
  color : #aaa;
  font-size : 80%;
  margin-right : 40px;
  text-align : right;
}




/*
==============================================================================================
●ブログパーツ：mod
============================================================================================== */
/*
-------------------------------------------------------------------
 すべてのmodの定義
------------------------------------------------------------------- */
.mod{
  border-bottom : #222 solid 5px;

}


.mod-caption {
  color : #222;
  font-size : 100%;
  font-weight : normal;     /* --★パーツタイトルは、太字やめる -- */
  padding-bottom : 5px;
}


.mod-text {
  font-size : 80%;
  color : #222;
  text-align : left;
}


.mod ul li {
  font-size : 80%;
  list-style-type : none;
  padding-left : 1.3em;
}


/*
-------------------------------------------------------------------
 各パーツの背景色：
------------------------------------------------------------------- */
/*
----------------------------
 バックナンバー：赤＆BGで白
---------------------------- */
.mod-backno {
  background : url(http://s.asablo.jp/css/common2r/piet/bg-mod-white2-2r.gif)  repeat-y right   #dd0141;
  padding : 5px 20px;
}

/*
----------------------------
 カレンダー：青
▲▼▲▼20070321修正しました：青のみに変更（枠の絵をカット）
---------------------------- */
.mod-calendar{
  background :  #4795bf;    /*--▲▼▲▼20070321修正しました:背景画像をカット--*/
  height : 195px;	    /*--▲▼▲▼20070321修正しました:190から195に--*/
  position: relative;
}


/*
----------------------------
 カテゴリー：青＆BGで白
---------------------------- */
.mod-category{
  background :  url(http://s.asablo.jp/css/common2r/piet/bg-mod-white-2r.gif) right repeat-y #4795bf;
  padding : 5px 20px;
}


/*
----------------------------
 このブログについて ： 白 
---------------------------- */
.mod-description{
  background : #fcfcfc;
  padding : 5px 20px;
}


/*
----------------------------
 ログイン： 白 
---------------------------- */
.mod-login-button{           /* -- ログインだけは、下のボーダーを消す  -- */
  background : #fcfcfc;
  border-bottom: none;
  padding : 5px 20px;
}


/*
----------------------------
 トラックバック ： 白
---------------------------- */
.mod-trackback{
  background : #fcfcfc;
  padding : 5px 20px;
}


/*
----------------------------
 コメント ： 赤 
---------------------------- */
.mod-comment{
  background : #dd0141;
  padding : 5px 20px;
}


/*
----------------------------
 MAILPIA ： 黄色
---------------------------- */
.mod-mailpia-button{
  background : #dedf00;
  font-size : 80%;
  padding : 5px 20px;
}


/*
----------------------------
 メッセージ ：  白
---------------------------- */
.mod-message{
  background : #fcfcfc;
  padding : 5px 20px;
}


/*
----------------------------
 最近の記事 ： 黄色
---------------------------- */
.mod-recent-articles{
  background : #dedf00;
  padding : 5px 20px;
}

/*
----------------------------
 RSS ： 白＆BGで赤
---------------------------- */
.mod-rss-button{
  background : url(http://s.asablo.jp/css/common2r/piet/bg-mod-red-2r.gif) right repeat-y #fcfcfc;
  padding : 5px 20px;
}



/*
-------------------------------------------------------------------
 カレンダーの定義：separateにして、背景色でボーダーを描く。
 ※ collapseだと、z-index の影響により、ボーダーの描画がおかしくなる
　　ため。
 ※ 右カラム版では、z-indexは使っていないが、同様にseparateで行う。
------------------------------------------------------------------- */
.calendar {
  background : #222;
  border-collapse : separate;
  border-bottom:3px solid #222; /*--▲▼▲▼200703211追加しました--*/
  border-right:3px solid #222;   /*--▲▼▲▼200703211追加しました--*/
  font-size : 80%;
  height : 160px;
  text-align : center;
  width : 180px;
  border-spacing : 2px;
  position : absolute;       /* -- 位置指定で背景にあわせる  -- */
  left : -2px;
  top: -2px;			/*--▲▼▲▼20070321修正しました：上寄せに変更--*/
}


.calendar-title {
  background : #fff;
  color : #222;
  font-weight : normal;      /* --★太字やめる -- */
  line-height : 1.8;
  text-align : center;
  vertical-align : top;
}


.calendar-sun-name {
  background : #dd0141;
  color : #222;
  text-align : center;
}
.calendar-wday-name {
  background : #dedf00;
  color : #222;
  text-align : center;
}
.calendar-sat-name {
  background : #4795bf;
  color: #222;
  text-align : center;
}
.calendar-cell {
  background : #fcfcfc;
  color : #222;
  text-align : center;
}




/*
==============================================================================================
 フッタ画像の定義：
============================================================================================== */
p#footer a {
  border : none;
}


p#footer a:hover {
  border : none;
}


#footer img {
  border : none;
  margin-left : 41px;
  margin-top : 8px;
}




/*
==============================================================================================
 コメントの定義：
============================================================================================== */
h2.comment-caption {         /* --『コメント』ってやつ -- */
  background : #dd0141;
  border-bottom : 5px solid #222;
  border-left : 5px solid #222;
  clear : right;
  float : right;
  font-size : 100%;
  font-weight : normal;     /* --★太字やめる -- */
  padding : 5px 5px 5px 20px;
  width : 455px;
}


.comment-title {             /* --コメントのタイトル（名前-日付）-- */
  background : #fcfcfc;
  border-left : 5px solid #222;
  clear:right;
  color: #aaa;
  float:right;
  font-size: 80%;
  font-weight : normal;      /* --★太字やめ -- */
  padding : 5px 5px 5px 20px;
  width : 455px;
}


.comment-body {              /* -- コメント本文 -- */
  background : #fcfcfc;
  border-bottom : 1px solid #ccc;
  border-left : 5px solid #222;
  clear : right;
  float : right;
  font-size : 80%;
  padding : 5px 5px 5px 20px;
  width : 455px;
}


.comment-form {              /* -- 『コメントをどうぞ』から下 -- */
  background: #fcfcfc;
  border-bottom : 5px solid #222;
  border-left : 5px solid #222;
  clear : right;
  float : right;
  font-size : 100%;
  padding : 5px 20px 5px 25px;
  width : 435px;
}


p.comment-caption{           /* -- コメントをどうぞ -- */
  color : #222;
  font-weight : normal;      /* -- ★太字やめる -- */
  font-size : 100%;
  padding-bottom : 10px;
  padding-top : 10px;
}


.comment-form p{             /* -- 説明文『メールアドレスとURLの～』 -- */
  color : #222;
  font-size : 80%;
  padding-bottom : 10px;
}


.comment-form textarea {     /* -- コメント入力のテキストボックス -- */
  height : 80px;
  font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Osaka", "Helvetica","Arial";
  font-size : 10pt;
  width : 430px;
}


.comment-form form p {       /* --フォームの中のテキスト：『名前』とか -- */
  padding-top:5px;
}


.comment-form form p input{  /* -- 入力窓 -- */
  display : block;
  margin-bottom : 5px;
}


.comment-form form p br {    /* -- brを削除 -- */
  display: none;
}




/*
-------------------------------------------------------------------
 トラックバックの定義：
------------------------------------------------------------------- */
.tb-caption {
  clear : right;
  font-weight : normal;     /* --★TBタイトルは、太字やめる -- */
  font-size : 100%;
  padding : 5px 40px 5px 40px;
}


.tb-url {
  font-size : 80%;
  padding : 5px 40px 10px 40px;
}


.tb-title {
  font-weight : normal;     /* --★TBタイトルは、太字やめる -- */
  font-size : 100%;
  padding : 5px 40px 5px 40px;
}


.tb-body {
  font-size : 80%;
  padding : 5px 40px 10px 40px;
}








/*
==============================================================================================
 未使用：
============================================================================================== */
.comments{
}
.navi-prev {
}
.navi-next {
}


/* end of stylesheet */