@charset "utf-8";
/*
///
/// index.css ----- shirofotoのindex.html用のCSS[#v08060102]
///
/// Copyright (C) 2008, azan workshop
/// #v08052401  matt    New
/// #v08052501  matt    任意サイズ、アスペクト比の画像対応
/// #v08052502  matt    リンクボタンの対応
/// #v08053101  matt    構成のブラッシュアップ
/// #v08060101  matt    キャプション対応
/// #v08060102  matt    画像ロードの関数化と自動更新
///
/// ・このHTML構成では、ブラウザの互換モードでないと期待通り
/// 　にレイアウト表示されない。
/// 　　‐標準モードでは、コンテンツはブラウザの上下中央に
/// 　　　表示されない
/// 　　‐互換モードにするには、DOCTYPE宣言からURLを除く
///
/// ・#v08053101まではAboutなどのボタンの<a>タグに対して
/// 　position : absolute; と位置の指定をしていたが、
/// 　この方法ではIE 5.0でリンクが有効にならないことが判明。
/// 　#v08053101では外側を<div>で囲って、それに対して設定する
/// 　ことで対処
///
/// ・動作確認環境
/// 　　‐Windows版   IE 5.0、5.5、6.0、7.0
/// 　　‐Windows版   Firefox 2.0
/// 　　‐Macintosh版 Safari 3.1
/// 　　‐Macintosh版 Firefox 2.0
///
*/
@media all {
  
  body {
    margin              : 0;
    padding             : 0;
    background-color    : #cccccc;
    /*     background-image    : url(background.png);

      背景のPNG画像の背景色は#ccccccだが、background-colorを
      #ccccccにしても色が合わない。
      そのため、同じ背景色の1pxのPNG画像をbackground-imageと
      して並べておく。
    */
  }
  
  table.Background {
    margin              : 0;
    padding             : 0;
    width               : 100%;
    height              : 100%;
  }
  
  table.Background td {
    text-align          : center;   /* IE用に必要 */
  }
  
  div.Content {
    position            : relative;
    margin              : auto;
    height              :  768px;
    width               : 1024px;
    /*
      ここでheightとwidthを指定しないと、Safariで写真フレーム
      の位置がずれてしまうことに注意
    */
  }
  
  div.Frame {
    position            : absolute;
    top                 : 0;
    left                : 0;
    /* 
      このtopとleftの設定を除くとSafariでちらつく。
      ただし、縦長の画像であれば、これを設定してもちらつく
    */
  }
  
  img.Frame {
    visibility          : hidden;
  }
  
  img.Photo {
    position            : absolute;
    visibility          : hidden;
    /* 
      hiddenにしておくと、画像ファイルが存在しないときに
      エラーアイコンが表示されないというメリットもある。
      画像ファイルが存在しないときに、説明画像を表示する
      というアイデアもある
    */
  }
  
  img.Button {
    border              : none;
  }
  
  /*
  div.Foto {
    position            : absolute;
    top                 : 157px;
    left                : 708px;
  }
  */
  
    div.Foto {
    position            : absolute;
    top                 : 145px;
    left                : 690px;
  }
  
    div.info {
    position            : absolute;
    top                 : 182px;
    left                : 732px;
  }
  
  div.About {
    position            : absolute;
    top                 : 225px;
    left                : 767px;
  }
  
  /* add #v08060101 */
  iframe.Caption {
    display             : none;
  }
  
  div.Caption {
    display             : none;
    margin              : 0 12px;
    /* 
    背景を白くするかどうかは好み
    background-color    : #ffffff;
    */
    text-align          : left;
    font-size           : 0.9em;
    line-height         : 1.4em;
  }
  /* end #v08060101 */
  
  /* add #v08060102 */
  div.Option {
    position            : absolute;
    top                 : 740px;
    left                : 2px;
    color               : gray;
    font-size           : 0.9em;
  }
  /* end #v08060102 */
}