/*********************
共通項目カスケード設定群

2005.07.11 By Kimiya Kitani. (text-shadowをh1,h2,h3タグに導入）

共通デフォルト設定は先頭に[.]をつける

特徴：
 pタグは段落とブロック要素の両面を持たせるため，一行空行をあけないようにした。
 (margin:0; を指定）

http://jigsaw.w3.org/css-validator/で検証済み (CSS2)
**********************

/***********************
***** デフォルト設定 *****
************************
/* ボディ設定 
   とりあえず背景は白を標準としよう 
*/
body{
 background-color: #ffffff;
 border: 0;
}

/* リンクに下線をいれない */
a { text-decoration:none; }

/* テーブルのマージン設定 */
/* デフォルトでは線なしとし，class="solid"で枠線ありに変更。まとめて変更は
   id="solid"で枠線ありとする。
*/
table{
  margin-top:	auto;
  margin-left:	auto;
  margin-right:	auto;
  line-height:	17px;
  width: 85%;
  border-collapse: separate;
  empty-cells: show;
  border: none;
}
caption { caption-side: top; }
td{ 
 text-align: left;
 border: 0 none gray;
 vertical-align: top;
}

/* borderなし */
img { border-style: none; }


/* 強調するってことは若干文字は大きめだよね。 */
strong{
  font-size: 120%;
}

/**
  強調するやつだけど，ブラウザによっては太文字にしてくれない。
　strongよか弱い強調。だけれどもstrongタグもこのemに統合される
　という話も聞くので，積極的にemを使うべきかな？ 2004.05.01
**/
em{
  font-size: 100%;
  font-weight: bold;
}

/** floatしたやつを解除するため **/
hr{ clear: both; width: 100%;}

/* とりあえず左に寄せる指定をしておく */
div{ text-align: left; }
span{ text-align: left; }
p{ text-align: left; margin:0; text-indent: 1em; }
dd{ text-indent: 0em;}
dt{ text-indent: 0em;}



/* まっヘッダ要素はセンタリングしておこう */
caption{ text-align: center; }
th{  text-align: center; }
h1{  text-align: center; font-size: 160%; margin-top: 0;  text-shadow: #000000 3px 3px 3px; }
h2{  text-align: center; font-size: 140%; margin-top: -1em;   text-shadow: #000000 3px 3px 3px; }
h3{  text-align: center; font-size: 120%;   text-shadow: #000000 2px 2px 2px; }
h4{  text-align: center; font-size: 100%; }
h5{  text-align: center; font-size: 80%;  }
h6{  text-align: center; font-size: 60%;  }

/* ページのオーナー情報を載せる場合 */
address{ text-align: right; }

/* dtタグ間の縦幅を若干とろう。*/
dt{ padding-top:0.2em; padding-bottom:0.2em; }

/* プログラムソースとか */
pre{
  border: solid silver 2px;
  text-align: left;
}



/* 数字指定のアウトラインの場合，各項目はアンダーラインをつけることにしよう */
/*ol li{ text-decoration: underline; }*/

/* アウトラインにレベルをつけよう  2006.9.15*/
ul li.level2{ margin-left: 2em; }
ol li.level2{ margin-left: 2em; }

/** プレゼンテーション用に生き残っているsmall, big。これをとりあえずstrong
*** などの替わりに使っていく予定
**/
big{
  font-weight: bold;  
}

/*******************
****** 共有設定 ******
********************
.document{ text-align : left; }

.justify{
  text-align: justify;
  text-justify: auto;
}

.text-center{
  text-align: center;
}



/***************************************************/
/*****************下記からはカスタム設定 **************/
/***************************************************/

/*******************
***** リンク関連 *****
********************
/* リンクにマウスポインタを合わせた時の色指定 */
/* リンクに下線を入れる */
a:link    { color:blue; }
a:visited { color: purple; }
a:hover   { color:red;  text-decoration:underline; }

/************************
**** インライン要素関連 ****
*************************
/*
  <center>を表す代わりに用いる
*/
p.center{ text-align: center; margin:0; }
span.center{ text-align: center; }
td.center{ text-align: center; vertical-align: middle;}
td.left{ text-align: left; vertical-align: middle;}

/** &nbsp;の代わりです〜 **/
span.space { margin-left: 1em;}

/** Tabなんてあると便利ですね。4文字分です 2004.04.17 **/
span.tab { margin-left: 4ex;}

/** 注意すべき部分。とりあえず赤にしておく **/
span.attention { color: #ff0000; }

/** むちゃくちゃ注意すべき部分。とりあえず赤＋文字サイズ大！ **/
span.very_attention { color: #ff0000; font-size: 120%;}

/** 強調する場合 **/
span.strong{
  font-size: 100%;
  font-weight: bold;
}
span.very_strong{
  font-size: 120%;
  font-weight: bold;
}

dt.strong{
  font-size: 120%; 
  font-weight: bold;
}


/** [左マージン] - [縦マージン] **/
td.left-top{ text-align: left; vertical-align: top;}
td.left-center{ text-align: left; vertical-align: middle;}
td.left-bottom{ text-align: left; vertical-align: bottom;}
td.right-top{ text-align: right; vertical-align: top;}
td.right-center{ text-align: right; vertical-align: middle;}
td.right-bottom{ text-align: right; vertical-align: bottom;}
td.center-top{ text-align: center; vertical-align: top;}
td.center-center{ text-align: center; vertical-align: middle;}
td.center-bottom{ text-align: center; vertical-align: bottom;}

td.solid {
 border: 1px solid gray;
 text-align: center; 
}

/** <small></small> or <font size="-1"></font>の代わり **/
/*dd.small{ text-size: 50%; }*/

/**********************
**** ブロック要素関連 ****
***********************
/*
   <div class=".text-center">でもいいんだけど直感的に
   <div class="center">を使いたいよねーー。<p>も同様。
   デフォルトはleftにしておこう。
*/
div.center{ text-align: center; }
div.right{ text-align: right; }

/** ブロック単位での&nbsp;を考える。**/
div.space { margin-left: 1em;}

/** ブロック単位でのTab（4文字分）を考える。2004.04.17 **/
div.tab { margin-left: 4ex;}

/** Tableタグをやめるには？ **/
/** 実験段階 **/
/** <table border=0 width=80%>をとりあえず想定> **/
div.table {
	border-style: none;
	margin-left: 10%;
	margin-right: 10%;
}

/** <small>の代わりです。 **/
div.small{
  font-size: 90%;
}


/**********   <center>の代わり ************
  <table>というブロックをセンタリングさせるためには下記のように
　左右の幅を自動化すればよい。IEなんかはdivやpタグに対して，
  text-align: center;を指定するといけるみたいだけどこれはインラ
　イン要素に使うべきもの。
******************************************/
table.center{ 
  margin-left:  auto;
  margin-right: auto;
}

/** 2004.08.14 幅指定 **/
td.tiny { width: 10%; }
td.small{ width: 20%; }

th.tiny { width: 10%; }
th.small{ width: 20%; }

/**********   <center>の代わり ************
 ホームページのタイトル色を継続するためのクラス群
******************************************/

h2.travel {
  border-style: outset;
  background-color: #ee88ee;
  border-color: #ee88ee;
  width: 90%;
  margin-left: auto;
  margin-right: auto;

}