/* ################================

トップページ用のCSS

（１）背景画像「じゃぐる」の設定
（２）一番外側の赤い枠線のテーブルの設定

================################ */



/* ########--------
（１）「じゃぐる」
属性：div
参照コード：b-ground
--------######## */


/* = 参照コードを定義 = */
DIV#b-ground{


/*　ＵＲＬ呼び出し　*/
background-image : url(img/layout/jugl4.gif);

/*　表示位置をページ右下に設定　*/
background-position:bottom right;

/*　繰り返し表示禁止を定義　*/
background-repeat:no-repeat;


/* = 終了の定義 = */
}



/* ########--------
（２）外側テーブル
属性：table
参照コード：top-out

＜※メモ＞
トップは、背景画像が「じゃぐる」と「黄色斜線」の２種類使われているが、
透明度を９０％にすることで、「黄色斜線」を打ち消し、
ぼんやりと「じゃぐる」だけをテーブルに透過させることができる。
というわけで、透明度については、基本的に改造の必要はないと思われる。
横幅は、今後のコンテンツの増加と共に、適宜調整する必要がある可能性もある。
--------######## */



/* = 参照コードの定義 = */
TABLE#top-out{


/* #### テーブル全体の設定 #### */
/* 横幅(ピクセル数指定) */
width:750px;

/* テーブル内部の背景色(16進法指定) */
background-color:#ffffff;

/* テーブル全体の不透明度
(※数値が低いほど透明になり、背景を透過する(定義域：0≦n≦100)) */
filter:Alpha(opacity=90);


/* #### 外枠の設定 #### */
/* 枠線の太さ(ピクセル数指定) */
border-width: 1px;

/* 枠線の種類(「solid」で直線) */
border-style:solid;

/* 枠線の色(16進法指定) */
border-color:#cc0033;


/* #### テーブル内の文法定義 #### */
/* テーブル内文章の行間スペース(百分率指定) */
line-height : 120%;

/* テーブル内文章の文字サイズ(百分率指定) */
font-size:100%;


/* = 終了の定義 = */
}



/* ########--------
（３）内側メインテーブル
属性：table
参照コード：sizing

＜※メモ＞
文字サイズを維持する以外の働きは持っていないので、いじる必要はない。
とりあえず内側テーブルに、「id="sizing"」を入れておけばOK。
--------######## */

table#sizing{
font-size:100%;
}



/* ########--------
（４）タイトルバー
属性：td
参照コード：tbar

＜※メモ＞
このタイトルバーは、09年5月現在、トップに３か所使われている。
背景色は、かつて「#cc3300」だったことも。
opacityが低いほど透明になる。(0〜100)
--------######## */

TD#tbar{
	background-color: #ee5533;       /* タイトルの背景色 */
	filter:Alpha(opacity=70);        /* タイトル全体の不透明度 */
       line-height : 165%;              /* 文字サイズに対する、背景の縦幅の割合 */
  font-size : medium;                   /* 文字サイズ */
  font-family : ＤＦ平成ゴシック体W5;   /* フォントを指定*/
  font-weight : bold;                   /* 太文字指定 */
}


/* ########--------
（５）バナーの外側の、灰色の枠
属性：table
参照コード：banner
＜※メモ＞
トップ左下のアレです。
--------######## */

TABLE#banner{
	border-width: 3px;     /* 境界線の太さ */
   	font-size:100%;        /* 文字サイズ */
	border-style:solid;    /* 境界線の形(solidで直線) */
	border-color:#cccccc;  /* 境界線の色 */
 }



/* ########--------
（６）区切り線のレパートリー
属性：hr
参照コード１：hr1
参照コード２：hr2
＜※メモ＞
hr1は、高さ2pxの直線。
hr2は、高さ2pxの点線。
線のスタイルは他に、double,dashed,groove,ridge,inset,outsetなどがあるが…
レイアウト上考慮して選んだので、変更しないのが無難。
--------######## */

HR#hr1{
      height:2;            /* 線の高さ */
      border-style:solid;  /* 線のスタイル */
      color:#ffcccc;       /* 線の色 */
}
HR#hr2{
      height:2;             /* 線の高さ */
      border-style:dotted;  /* 線のスタイル */
      color:#ff0000;        /* 線の色 */
}



/* ########--------
（Ｘ）ページの基本構造
※参照コード不要
--------######## */

BODY{
/* #### ページ全体の設定 #### */
  font-size:80%; /* 文字サイズ */
  color : black; /* 文字色 */
  background-color : white; /* 背景色 */
  background-attachment : fixed; /* 背景固定 */
  cursor : default;

/* #### スクロールバーのデザイン #### */
　scrollbar-face-color:#ffffff; /*スクロールバー本体の色*/
  scrollbar-highlight-color:#FFCCCC; /*スクロールバー左側（上）の影*/
  scrollbar-shadow-color:#FFCCCC; /*スクロールバー右側（上）の影*/
  scrollbar-3dlight-color:#FFCCCC; /*スクロールバーの左側（下）の影*/
  scrollbar-arrow-color:#ff7291; /*矢印の色*/
  scrollbar-track-color:#330000; /*背面の色*/
  
  background-image : url(../system/bgor.gif); /* 背景画像 */
}

/* #### リンク文字の設定 #### */
/* ＜※メモ＞オンマウス時のみ下線が現れるような仕様。 */

A:LINK{
	text-decoration:none;  /* 訪問前のリンクの文字の状態(noneで下線がない状態) */
	color:#0033ff;         /* 訪問前のリンクの文字色 */
}

A:VISITED{
	text-decoration:none;  /* 訪問後の文字の状態 */
	color:#009900;         /* 訪問後の文字色(かつては#003333) */
}

A:HOVER{
	text-decoration:underline;  /* オンマウスでの文字の状態(underlineで下線付き) */
	color:#ff9999;              /* オンマウスでの文字色 */
}