@charset "Shift_JIS";

/*
注意書きみたいなもの

このCSSファイルのプロパティについて
header部分、footer部分、body部分、div.image-wrapperについては、
ページ全般に渡る基本的なレイアウトを規定している重要な部分なので、
基本的に注意して編集して下さい。

それ以外については単なるデフォルトの設定と思って下さい。つまり、
 各ページ特有のプロパティを使用、または各ページ特有のプロパティの設定
をしなければこのファイルのプロパティが使われる、くらいに思って下さい。

大まかな順番。
1.各種デフォルトの設定。
2.body部分
3.div.image-wrapper
4.header部分
5.footer部分。
6.過去の遺物
となっています。

ページの構造
通常のページは下のようにheader、body、footerの三段に分かれている。
これを頭に入れておくと分かりやすいと思う。

<div id="header">
ナビゲーション部分。
</div>

<div id="MainBody">
<div id="maincontents">
チャートなどの実際のコンテンツ。
</div>
</div>

<div id="footer">
コピーライトの表記
</div>

その他のCSSについて
いくつか分かれていますが、以下のCSSファイルについて見てもらえれば結構です。
ファイルの場所ですが、全てcssというディレクトリにまとめています。
TopPage.css
ロゴがあるページ(/index.html)とトップページ(/main.html)

mail-magazine.css
メールマガジンのページ。

event.css
イベントページ
AboutUs-Link.css  
ABOUT USのページと各支部へののリンクのページ

link.css
ちょっと分かりにくいけど、フリーペーパーのページ。

sw.css
スタッフ募集のページ。ここは実験用のCSSも兼ねているので
スタンドアローンで使用。

chart.css
チャートがあるページ。なので、トップページとpast chartのページで使われている。


header.css
header部分のレイアウトを規定している。

 */

/*ここからが肝心の各種プロパティです。*/

/*
/* ここからはデフォルトの設定。
各要素のmarginとpaddingを0にしている。  */
*{
  padding:0;
  margin :0;
}
/* アンカー要素のテキストの見栄え。 */
A:link      {
	color: #0000FF;
	text-decoration: none;
}
A:visited   {
	color: #6600cc;
	text-decoration: none;
}
A:hover     {
	color: #FF4500 ;
	text-decoration: underline;
}
h1,h2,h3,p
{ 
  margin-right: 10px;
  margin-left : 20px;
}
h1,h2,h3
{
  margin-top:10px;
  margin-bottom: 10px;
}

p
{
  margin-right: 30px;
}
/* 見出しのフォントサイズ */
 h1 , h2
	{
	font-size: 16px;
	}

/* リスト一般 */
ul,ol {
	list-style: none;
	margin-bottom: 13px;
}
li {
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
}
/* 強調一般 */
strong,em {
	font-weight: normal;
	font-style: normal;
}
/* フォント一般の設定と余白 */
body{
  font-size: 12px;
  color: #696969;
  font-family:  "ヒラギノ角ゴ Pro W3", osaka, "ＭＳ Ｐゴシック", sans-serif;
  background: #FFFFFF;
  line-height: 1.3;
  padding-top:2%;
        /* いらないかな？
        padding-bottom:2%;*/
        padding-left:1%;
}
/* フォーム部分 */
label {
	margin-top: 5px;
	margin-bottom: 5px;
	width: auto;
	display: block;
}
div#form {
	
}
li#enquet label,li#enquet2 label {
	display:inline;
	width: auto;
}
/*水平線について */
hr {
     /* mac ie除けここから \*/
	width: 520px;
        border-top: solid 1px #999;/*ここまで */
	border-left: none;
	border-right: none;
	border-bottom: none;
	height: 1px;
	color: #999;
	background-color: #FFFFFF;
	margin-top: 10px;
	margin-bottom: 30px;
	margin-left:20px;
        margin-right:20px;
}

/* ほとんど使っていないので気にする必要なし。 */
dt.title {
	font-size: 16px;
	font-weight: bold;
	margin-left: 20px;
	margin-top: 10px;
}
dd.text {
	margin-left: 20px;
	width: auto;
	margin-right: 25px;
}
/*一応汎用定義リスト要素。今のところお詫びと訂正に使用している。
ぐらい。汎用として使いにくい場合はお詫びと訂正を削除して
定義し直すか、IDを振るなりしてください。*/

dt{
	margin-left:20px;
	font-weight:bold;
}
dd{
	margin-left:20px;
	width:500px;
}
/* 
body部分
maincontens直下にの更新履歴やチャートなどコンテンツが入る。
marginは左右のタイルの分空けている。
 */
div#maincontents
	{
	width:560px;
	margin-right: 50px;
	margin-left: 50px;
	padding: 20px 0px;
	}
/* 左右のハバとタイル。ちなみにdiv#maincontentsを合わせて二重になっている 
のは、タイル表示のためと、WinIEのバグ対策。
*/
div#MainBody {
	padding: 0px 0px 15px;
	width: 660px;
	background: url(../picture/back.gif) repeat-y 0px 0px; /* 左右のタイルを表示させる */
  }

/*左に写真、右側にアーティスト名、紹介文またはライブレポートという
レイアウトに関する設定。一応写真のサイズは200pxを標準にしています。
200px以外の写真を使う場合は新しく設定を作ってください。例えば、
div,image-wrapper img#hoge{width:xxx:px;}またはdiv.image-wrapper img.w150{width:150px;}
といった感じです。画像のサイズはそろえていた方が奇麗なのでできれば揃えてください

あと、div.image-wrapper > imgとあるのはWinIEでのバグ対策。
こうすることで、Geckoなど標準に準拠したブラウザに悪影響を与えずに、
WinIE依存のコードを書くことができる。からくりは簡単でWinIEは
子供セレクタ(body > divのようなの)を読み込まないから。

最後に<div class="image-wrapper">hogehoge</div>を使用しているのは
PICK UPのページとイベントページ、トップページのPICK UPの部分。
*/

div.image-wrapper img{
	display:block;
	width: 200px;
	margin: 15px 15px 15px 5px;
	float:left;
}
div.image-wrapper > img{margin-left: 20px;}
div.image-wrapper p{
	width:305px;	
	float:left;
	margin:0 !important;
}
div.image-wrapper > p{width:310px;}
div.image-wrapper h3, div.image-wrapper  h2 
        {
          padding: 0;
          margin:0;
          font-size: 12px;
}
div.image-wrapper p.photo-credit{ 
  float:left;
  width:220px;
  padding-left:20px;
 }
div.image-wrapper p.photo-credit img{ 
  margin-bottom:0;
  float:none;
 }
.clearleft{
	clear: left;
	display:block;
}
/*IEでの見栄え調整のためのリスト。*/
div.image-wrapper ul ,div.image-wrapper li
         { 
           margin:0;
           padding-left:5px;
          
           width:100%;
}
div.image-wrapper ul{
     padding-bottom:15px;
}
div.image-wrapper li
         {
           padding-bottom:20px;
    }		

/*header部分*/
div#header {
	width: 660px;
	background-image: url(../picture/back.gif);
	height: 100px;
}
div#header li{
	height:20px;
	float: left;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
        text-indent:-9999px;
}
div#Navigation span{ 
	display:none;
}
div#header li a{
	display:block;
	text-decoration: none;
	height:20px;
	}
li#Top a{
	width:200px;
}
li#Top{
	width:200px;
	background: url(../picture/head/top.gif)  ;
}
li#Top a:hover, li#Top a:focus{
	background: url(../picture/head/top.gif) 0 -20px;
}
li#Intetview{
	width:220px;
	background: url(../picture/head/interview.gif) ;																				
}
li#Intetview a:hover, li#Intetview a:focus{
	background: url(../picture/head/interview.gif) 0 -20px;																				
}
li#Intetview a{
	width:220px;																
}
li#AboutUs{
	width:260px;
	background: url(../picture/head/aboutus.gif) ;
}
li#AboutUs a:hover,li#AboutUs a:focus{
	background: url(../picture/head/aboutus.gif) 0 -20px;
}
li#AboutUs a{
	width:260px;
}
li#Radio{
	width:160px;
	background: url(../picture/head/radio.gif) ;
}
li#Radio a:hover,li#Radio a:focus{
	background: url(../picture/head/radio.gif) 0 -20px;
}
li#Radio a{
	width:160px;
}
li#Freepaper{
	width:240px;
	background: url(../picture/head/freepaper.gif) ;
}
li#Freepaper a:hover,li#Freepaper a:focus{
	background: url(../picture/head/freepaper.gif) 0 -20px;
}
li#Freepaper a{
	width:240px;
}
li#bbs{
	width:180px;
	background: url(../picture/head/bbs.gif) ;
}
li#bbs a:hover,li#bbs a:focus{
	background: url(../picture/head/bbs.gif) 0 -20px;
}
li#bbs a{
	width:180px;
}
li#MailMagazine{
	width:300px;
	background: url(../picture/head/m-maga.gif)  ;
}
li#MailMagazine a:hover,li#MailMagazine a:focus{
	background: url(../picture/head/m-maga.gif) 0 -20px;
}
li#MailMagazine a{
	width:300px;
}
li#Link{
	width:120px;
	background: url(../picture/head/link.gif)  ;
}
li#Link a:hover,li#Link a:focus{
	background: url(../picture/head/link.gif) 0 -20px ;
}
li#Link a{
	width:120px;
}
li#Event{
	width:200px;
	background: url(../picture/head/event.gif) ;
}
li#Event a:hover,li#Event a:focus{
	background: url(../picture/head/event.gif) 0 -20px;
}
li#Event a{
	width:200px;
}
li#mailus{
	width:220px;
	background: url(../picture/head/mailus.gif)  ;
}
li#mailus a:hover,li#mailus a:focus{
	background: url(../picture/head/mailus.gif) 0 -20px;
}
li#mailus a{
	width:220px;
}
div#Navigation ul {
	margin: 0px 0px 0px 140px;
	padding: 0px;
	width: 420px;
}
div#Navigation {
	background-image: url(../picture/head/head4.jpg);
	margin-left: 50px;
	margin-right: 50px;
	height: 100px;
	width: 560px;
}

/* footer部分。最後のコピーライト */
div#footer {
	height: 40px;
	width: 660px;
	background: url(../picture/back.gif) repeat-y 0px 0px;
}
/*  最後のコピーライト の画像*/
div#footer img {
	margin: 0px 50px;
	height: 40px;
	width: 560px;
}

/*過去の遺物。気にする必要なし。  */
table#Navigation {
	margin-right: 50px;
	margin-left: 50px;
	width: 560px;
	height: 100px;
	border: none;
}
table#Navigation img {
	border: none;	
}
table#Navigation td{
	vertical-align: top;
	width: 420px;
}
table#Navigation td#logo{
	width: 140px;
}

/* 一部のページにしか使っていない。 */
div#MainBody img#footer {
	margin-left: 50px;
	margin-right: 50px;
	height: 40px;
	width: 560px;
}