/* 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に関する定義：
left か center か container のどれが一番（縦方向に）大きくなるかはわからない。
そのため、どれであっても左カラムの境界線が画面下まで伸びるよう、BGを置いている。
============================================================================================== */
#container {
  background: url(http://s.asablo.jp/css/common2l/piet/bg-white-2l.gif) repeat-y left bottom  #4795bf  ;  /* -- カラム下をBGで補完 -- */
  margin : 0;
  padding : 0;
  width : 100%;
}


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


#left {
  background: #fcfcfc;
  border-right:solid 5px #222;
  float: left;
  margin-top:-100px;
  margin-right: -250px;
  padding: 0;
  width: 245px;              /* -- rightの幅は、245+5 -- */
  position : relative;       /* -- main に対して上になるようZを設定 -- */
  z-index:2;
}


#center {
  background: url(http://s.asablo.jp/css/common2l/piet/bg-white-2l.gif) repeat-y left #4795bf;   /* -- カラム下をBGで補完  -- */
  float : left;
  width : 100%;
}


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


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




/*
==============================================================================================
●レイアウトに関するクラスの定義： 未定義
============================================================================================== */
.sidebar *{
  position : relative;       /* -- left 内の要素は、leftよりもさらに上になるようZを設定 -- */
  z-index : 4;
}




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


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


#head h1 {
  font-size : 250%;
  font-weight : normal;
  margin-left:250px;         /* -- leftの幅の分、スペースを確保 -- */
  padding-left : 40px;
  padding-top : 20px;
  padding-bottom : 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 : 125%;
  padding-right : 5px;
  width : 125px;
  position : absolute;
  right : 0;
  top : 100px;
}


#navi-bottom {
  clear : right;
  float : right;
  font-size : 125%;
  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;
}


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


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


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


/*
----------------------------
 このブログについて ： 白 
---------------------------- */
.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/common2l/piet/bg-mod-red-2l.gif) right repeat-y #fcfcfc;
  padding : 5px 20px;
}



/*
-------------------------------------------------------------------
 カレンダーの定義：separateにして、背景色でボーダーを描く。
 ※ collapseだと、z-index の影響により、ボーダーの描画がおかしくなる
　　ため。
------------------------------------------------------------------- */
.calendar {
  background : #222;
  border-collapse : separate;
  border-bottom:3px solid #222; /*--▲▼▲▼200703211追加しました--*/
  border-left:3px solid #222;   /*--▲▼▲▼200703211追加しました--*/
  border-spacing : 2px;
  font-size : 80%;
  height : 160px;
  text-align : center;
  width : 180px;
  position : absolute;       /* -- 位置指定で背景にあわせる  -- */
  left : 67px;
  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 {
  text-align : right;
}


p#footer a {
  border : none;
}


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


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




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


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


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


.comment-form {              /* -- 『コメントをどうぞ』から下 -- */
  background : #fcfcfc;
  border-bottom : 5px solid #222;
  border-right : 5px solid #222;
  clear : 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 {
  text-align : right;
  font-weight : normal;     /* --★太字やめる -- */
  font-size : 100%;
  padding : 5px 40px 5px 40px;
}


.tb-url {
  text-align : right;
  font-size : 80%;
  padding : 5px 40px 20px 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 */