@charset "utf-8";
/* CSS Document */

/*=======================================================*/
/*=======================================================*/

/* ----------------------------------------
Title : ほけん職人うえはら
URL : http://www.hoken-syokunin.jp/

Description : コーディングルール verx.x

Open : 
Modified : 

  ＊20120406 KONO:
    html要素の background-image を、indexページでのみ入れ替え（追加で読み込む CSS で上書き）したかった。
    ところが、ブラウザ側のキャッシュが働いた際に、一瞬だけ共通側の画像が表示されてしまう問題がでた。
    なので この共通側CSS内で、スニペット
     
    と If/EndIf で分岐させて対処する。

---------------------------------------- */

/* ----------------------------------------
主な階層構造
  ・header, footer, nav は、内側の section, aside でも使うので、
    CSS で扱いやすいように id も付与する。
  ・<h*>＋<p>… の固まりが、
     - RSS feed の１つに数えて良さそう
     - 件名＋本文 の１メッセージとして成立してそう
    なら、<article> で囲うとよい。
  ・<article> の集合や、
    「単に記事を章立て／小分けにしたいだけで、分離させちゃうと意味をなさない」
    ような場合は、<section> で囲うとよい。

<body>
  + <div id="container" class="clearfix">

    + <header id="header">
      + <div id="logo">
        + <h1>  (サイト=body の見出し ほけん職人うえはら を書く)
        + <img>  (ロゴ画像)
      + <nav id="headerNavi">
        + <ul><li>  (画面上部に設置する、補助的なナビ欄を書く)

    + <nav id="globalNavi">
        + <ul><li>  (サイト全体の移動に使う、主ナビ欄を書く)

    + <div id="visual">  (Flash類)

    + <div id="contentsWrapper" class="clearfix">

      // 単一記事ページの場合
      + <article id="primContent">
        + <header><h2>  (ページ＝primContent の見出し おおよそ  を書く)
        + <p> または <div> (ページ内の記事本文を書く)
          + <section> (記事本文を単純に章立てしたい場合は、<section> で小分けにする)
            + <h3>
            + <p> または <div>
          …
        + <footer><time>  (必要なら、記事の更新日時などを掲載する)

      // 複数記事を束ねたページ または 記事本文に続いてコメント欄などを追加する場合
      + <section id="primContent">
        + <header><h2> (このセクションの見出し 何についての固まりか)
        + <article>  (記事の固まり１ブロック分を表す)
          + <header><h3>  (記事のタイトル)
          + <p> (内容)
          + <footer> (必要なら、コメント投稿者名など)
          …この <article> ブロックを複数件

      + <aside id="secContent">

    + <footer id="footer">
      + <nav id="footerNavi">
        + <ul><li>
      + <address> (サイト運営者の住所・連絡先等)
      + <div><small>copyright表記</small></div>

---------------------------------------- */


/*=======================================================*/
/*=======================================================*/

/*--------------------------------*/
/* ==== サイトの共通設定 ==== */
/* ----- 初期包括ブロック ----- */
html {
  background-color : white;
  background-image : url("assets/images/bg_page_top.png");
  background-position : top;
  background-repeat : repeat-x;
}

body {
  background-image : url("assets/images/bg_page_bottom.png");
  background-position : bottom;
  background-repeat : repeat-x;
}

#container {
  /* background-image : url("assets/images/bg_fill_op90.png"); */
  background-repeat : repeat;
  background-color : transparent;
  margin : 0 auto;
  position : relative;
  z-index : 0;
}

#container #header {
  width : 960px;
  margin : 0 auto;
}

#container #footer {
  width : 960px;
  margin : 0 auto;
}

/* コンテナの影：IE6 では表示できない, IE7 は IE8.js/PngFix で表示可, IE8 は :before と何かしらの併用時のバグのため、別div建てないとダメ。 */
/* スマホ（Androidタブレット含む） の場合は、なぜか文字が滲む現象が発生するので、コメントアウトする。 */


  #container:before
, #container .ie8_container_bg_shadow  {
  /* background-image : url("assets/images/bg_shadow.png"); */
  background-position : 50% 0%;
  background-repeat   : repeat-y;
  position : fixed;
  display  : block;
  width    : 100%;
  height   : 100%;
  left     : 0px;
  top      : 0px;
  margin   : 0px auto;
  z-index  : -1;
  content  : " ";
}




/* ----- LINKS ----- */
a {
  color : #15468B;
  text-decoration : none;

  /* CSS3 リンク文字色をじわっと変色させる */
  -webkit-transition: color .2s ease-out;  
  -moz-transition: color .2s ease-out;  
  -o-transition: color .2s ease-out;  
  -ms-transition: color .2s ease-out;  
  transition: color .2s ease-out; 
}
a:link {
  color : #15468B;
}
a:visited {
  color : #15468B;
}
a:hover {
  color : #64EAD0;
}
a:active {
  color : #64EAD0;
}

header#header a {
  color : #D01F4B;
  text-decoration : none;
}
header#header a:link {
  color : #D01F4B;
}
header#header a:visited {
  color : #D01F4B;
}
header#header a:hover {
  color : #64EAD0;
}
header#header a:active {
  color : #64EAD0;
}

a.center{
  margin : 10px auto;
}
.pdf a{
  background-image: url(assets/images/ico_pdf.gif);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 25px;
}

footer#footer a {
}
footer#footer a:link {
}
footer#footer a:visited {
}
footer#footer a:hover {
}
footer#footer a:active {
}

/* ----- IMAGE ----- */
#primContent img{
  margin : 5px;
}
#googleMap IMG {
  padding : 0px !important;
   /* IE で GoogleMap マーカー画像が割れる問題の対策用。
      #contentsWrapper #primContent  .primBlock img の padding を打ち消す。 */
}

/* ----- TEXT FORMATTING ----- */
strong {
  font-weight : bold;
}
.strong {
  font-weight : bold;
  color : #F0630F;
  font-size : 120%;
  text-decoration : underline;
}
.caution {
  font-size : 90%;
  color : #4D4D4D;;
}


/*-- input,button --*/
button, input[type="button"], input[type="reset"], input[type="submit"] {
  padding : 0.25em 0.75em;
}


/*-- 右寄せ左寄せ --*/
.fLeft{
  float : left;
}
.fRight{
  float : right;
}
.tLeft{
  text-align : left;
}
.tRight{
  text-align : right;
}
.tCenter{
  text-align : center;
}


/*--------------------------------*/
/* ==== サイトの基本構造 ==== */
/* ---- ヘッダーブロック ---- */
header#header {
  background-image : url("assets/images/bg_header.png");
  background-repeat : repeat-x;
  height : 100px;
  overflow : hidden;
}

header#header #logo {
}

header#header #logo a {
  display : block;
}

header#header #logo h1 {
  display : none;
}

header#header #logo img {
  position : relative;
  left: 10px;
  top: 5px;
}

#header #headerNavi {
  margin-top : 15px;
}

/* ---- グローバルナビ ---- */
#globalNavi {
  background-color : transparent;
  background-image : url("assets/images/shade_vert_white.png");
  background-position : 0 -210px;
  clear : both;
  position : relative;
  height : 50px;
}

nav#globalNavi_inner {
  background-color : #ffffff;
  clear : both;
  position : relative;
  width : 960px;
  margin : 0 auto;
  height : 50px;
}

nav#globalNavi_inner ul {
}

nav#globalNavi_inner ul li {
  display : block;
  float   : left;
  height  :  50px;
  margin-left  :  2px;
}

/* ---- コンテンツブロック ---- */
#contentsWrapper {
  clear : both;
  width : 960px;
  margin : 0 auto;
  padding : 10px 20px 20px 20px;
}

#contentsWrapper #breadcrumbs {
  padding : 0px 1.5em;
}

#contentsWrapper #primContent {
  float : right;
  clear : both;
  margin : 10px auto;
  width : 710px;
}
#contentsWrapper #primContent .primBlock{
  width : 710px;
  float : right;
}
#contentsWrapper #primContent .faq{
  width : 540px;
  border : 1px solid #aaa;
  padding : 10px 20px 0 0;
}

#contentsWrapper #secContent {
  float : left;
  margin : 10px auto;
  width : 230px;
}

#contentsWrapper #secContent .localNavi{
  width : 230px;
  min-height : 260px;
  max-height : 550px;
  margin-top : 10px;
  background-image : url("assets/images/bg_localNavi_bottom.png");
  background-position : bottom;
  background-repeat : no-repeat;
}

#contentsWrapper #secContent .localNavi_inner{
  padding-top : 34px;
  padding-left : 10px;
  background-image : url("assets/images/bg_localNavi_top.png");
  background-position : top;
  background-repeat : no-repeat;
}

#contentsWrapper #secContent .localNavi ul{
  padding-bottom : 30px;
  margin: 20px 0;
  font-size : 110%;
}

#contentsWrapper #secContent .localNavi ul li{
  font-size : 110%;
  margin : 10px;
  padding-left : 20px;
  list-style-type : none;
  background-image : url("assets/images/listicon_localNavi.png");
  background-repeat : no-repeat;
}
#contentsWrapper #secContent .linkBlock{
  background-image : url("assets/images/bg_news.png");
  padding-bottom : 10px;
  border-radius : 1em 1em 1em 1em;
}
#contentsWrapper #secContent .pickupLink{
  width : 230px;
  margin : 10px 0px 30px 0px;
  padding-bottom : 30px;
  background-image : url("assets/images/bg_sec_pickup_bottom.png");
  background-position : center bottom;
  background-repeat : no-repeat;
}

#contentsWrapper #secContent .pickupLink_inner{
  padding-top : 60px;
  background-image : url("assets/images/bg_sec_pickup_top.png");
  background-position : top;
  background-repeat : no-repeat;
}
/* 見出し・リンク・フォントなどの共通設定 */
/* ----- HEADINGS ----- */
/* 
  ・基本的に HTML5 では、<h*>系タグはセクショニング要素内に配置する。
  ・h2, h3, h4 は使わず、すべて h1 でも可。
     - #header h1
     - article h1
     - article section h1
     - article section article h1
    のような。
*/
#contentsWrapper h1 {
  /* 今回は使わない */
}

#contentsWrapper h2 {
  height       : 40px;
  line-height  : 46px;
  color        : #3a3f33;
  font-weight  : bold;
  font-size    : 180%;
  padding      : 5px 5px 5px 28px;
  margin       : 10px 0px;
  letter-spacing : 0.1em;
  text-shadow : 1px 1px 1px #CCCCCC;
}

h2.about{
  background-image : url("assets/images/bg_h2_about.png");
}
h2.ins{
  background-image : url("assets/images/bg_h2_ins.png");
}
h2.recommend{
  background-image : url("assets/images/bg_h2_recommend.png");
}
h2.network{
  background-image : url("assets/images/bg_h2_network.png");
}
h2.service{
  background-image : url("assets/images/bg_h2_service.png");
}
h2.contact{
  background-image : url("assets/images/bg_h2_contact.png");
}
h2.special{
  background-image : url("assets/images/bg_h2_about.png");
}
h2.policy{
  background-image : url("assets/images/bg_h2_policy.png");
}
h2.privacypolicy{
  background-image : url("assets/images/bg_h2_privacypolicy.png");
}
h2.sitemap{
  background-image : url("assets/images/bg_h2_sitemap.png");
}

#contentsWrapper #primContent h3{
  font-size     : 150%;
  font-weight   : bold;
  color         : #4B533E;
  border-bottom : 1px solid #a3a3a3;
  margin-left   : 20px;
  margin-top    : 30px;
  margin-bottom : 20px;
  padding-left  : 30px;
  line-height   : 30px;
  background-image : url("assets/images/bg_h3.png");
  background-repeat : no-repeat;
}
#contentsWrapper #primContent_wide h3{
  font-size     : 150%;
  font-weight   : bold;
  color         : #4B533E;
  border-bottom : 1px solid #a3a3a3;
  margin-left   : 20px;
  margin-top    : 30px;
  margin-bottom : 20px;
  padding-left  : 30px;
  line-height   : 30px;
  background-image : url("assets/images/bg_h3.png");
  background-repeat : no-repeat;
}

#contentsWrapper #primContent h4 {
  font-size : 140%;
  font-weight: bold;
  margin : 10px;
  margin-left : 30px;
  padding : 7px;
  color  : #4B533E;
  background-image : url("assets/images/bg_h4.png");
  text-shadow: 1px 1px 3px #BFBFBF;
}
#contentsWrapper #primContent_wide h4 {
  font-size : 140%;
  font-weight: bold;
  margin : 10px;
  padding : 7px;
  color  : #4B533E;
  background-image : url("assets/images/bg_h4.png");
  text-shadow: 1px 1px 3px #BFBFBF;
}

#contentsWrapper #primContent h5 {
  font-size : 130%;
  font-weight: bold;
  color: #4B533E;
  margin: 20px 10px 10px 40px;
  border-bottom: 1px dotted #4B533E;
}
#contentsWrapper #primContent_wide h5 {
  font-size : 130%;
  font-weight: bold;
  color: #4B533E;
  margin: 20px 10px 10px 40px;
  border-bottom: 1px dotted #4B533E;
}

/* ---- content text body ---- */
#primContent .content {
  padding : 0px 12px 0px 24px;
}

/* ---- PARAGRAPH ---- */
#primContent p {
  padding : 10px;
  font-size : 120%;
  line-height : 1.7em;
  margin-left : 30px;
}
#primContent_wide p {
  padding : 10px;
  margin-left : 10px;
  font-size : 120%;
  line-height : 1.6em;
}
#primContent p.linkToTop {
  text-align : right;
}
#primContent_wide p.linkToTop {
  text-align : right;
}
#primContent p.case{
  font-size : 150%;
  margin-left : 0px;
}
#primContent p.name{
  font-size : 120%;
  margin-left : 70px;
  text-indent: -80px;
}
#primContent p.name2{
  font-size : 120%;
  margin-left : 110px;
  text-indent: -120px;
}
#primContent p.letter_title{
  font-size : 100%;
  margin: 0 0 10px 0;
  padding: 0px;
  font-weight: bold;
  border-bottom: 1px dotted navy;
}
#primContent p.pdf{
  font-size: 90%;
  text-align: right;
}

#primContent p.accent {
  padding : 10px;
  font-size : 150%;
  line-height : 1.6em;
  color : #D73D74;
  font-weight : bold;
}
.accent_s {
  color : navy;
  font-weight : bold;
}

/* ---- TABLE ---- */
#primContent table {
  border-spacing : 0px 0px;
  border : 3px solid #E5E5E5;
  border-collapse : collapse;
  color : #434343;
  font-size : 110%;
  margin : 20px 0px 40px 40px;
  width : 600px;
}

#primContent th {
  background-color : #f0fbe2;
  padding : 10px;
  padding-left : 20px;
  text-align : left;
  width : 35%;
  border-bottom : 1px dotted #033A44;
}

#primContent td {
  border-bottom : 1px dotted #033A44;
  padding : 10px;
}
#primContent table.noline {
  border-spacing : 0px 0px;
  border : none;
  border-collapse : collapse;
  color : #434343;
  font-size : 110%;
  margin : 20px 0px 40px 40px;
  width : 90%;
}
#primContent table.noline th{
  background-color : transparent;
  padding : 10px;
  padding-left : 20px;
  text-align : center;
  border-bottom : none;
  vertical-align: top;
}
#primContent table.noline td {
  border-bottom : none;
  padding : 20px;
  font-size : 120%;
  line-height : 1.6em;
  vertical-align: top;
}
#primContent .special01 table {
  border-spacing : 0px 0px;
  border : none;
  border-collapse : collapse;
  color : #434343;
  font-size : 110%;
  margin : 20px 0px 40px 40px;
  width : 90%;
}
#primContent .special01 th {
  border-bottom : none;
  vertical-align: top;
  background-color : transparent;
  text-align : right;
  width : 13%;
}
#primContent .special01 th.ohsawa{
}
#primContent .special01 tr.uehara{
  color : #128012;
}
#primContent .special01 td {
  border-bottom : none;
  vertical-align: top;
  line-height : 1.4em;
}
#primContent_wide table {
  margin : 0px auto 30px;
}
#primContent_wide table td{
}
#primContent_wide table td.bg_middle{
  background-image : url("assets/images/network/bg_table_network_M.png");
  background-repeat: no-repeat;
  background-position: center center;
  width : 320px;
  height : 330px;
}
#primContent_wide table td.bg_large{
  background-image : url("assets/images/network/bg_table_network_L.png");
  background-repeat: no-repeat;
  background-position: center center;
  width : 320px;
  height : 420px;
}

/* ---- LIST ---- */
#primContent ul {
  margin : 0 0 0 50px;
  font-size : 120%;
}
#primContent ul li {
  list-style-type : none;
  list-style-image : url("assets/images/listicon.png");
  margin-left : 10px;
  line-height: 1.5em;
  padding: 5px 0;
}
#primContent .service ul {
  margin: 10px 10px 50px 60px;
}
#primContent .service ul li {
}
#primContent_wide ul{
}
#primContent_wide ul li{
}
#primContent_wide ul li ul{
}
#primContent_wide ul li ul li{
}
#secContent .linkBlock ul {
  margin : 20px 0;
}
#secContent .linkBlock ul li {
  list-style-type : none;
  margin-top: 10px;
  margin-bottom: 30px;
}
#secContent .linkBlock ul li img{
  margin: 0px 5px;
}
#secContent .linkBlock .pickupLink ul {
  margin : 0;
}
#secContent .linkBlock .pickupLink ul li {
  list-style-type : none;
  margin : 5px auto;
}
#secContent .linkBlock .pickupLink ul li img{
}


#primContent ol {
  margin : 0 0 0 50px;
  font-size : 100%;
}
#primContent ol li {
  margin-left : 10px;
  line-height: 1.25em;
  padding: 5px 0;
}

/* ---- DEFINITION LIST ---- */
#primContent dl {
  margin : 10px;
  margin-left : 30px;
}
#primContent dt {
  font-weight: bold;
}
#primContent dd {
}


#primContent_wide dl {
  width : 270px;
  margin : 0 auto;
}
#primContent_wide dt {
  font-size : 140%;
  font-weight : bold;
  margin : 10px 10px 5px 10px;
  color : #282D20;
}
#primContent_wide dd {
  margin : 5px;
  font-size: 110%;
  line-height : 1.5em;
  font-weight: bold;
  color: #343434;
}
#primContent_wide dd.tel {
  margin : 5px 5px 10px 10px;
}

/* ---- 飾り用のdiv ---- */
div.boxblue{
  border: 3px double #C6D9F9;
  margin: 20px;
  padding: 10px;
}
div.boxgray{
  border : 1px dotted gray;
  margin : 0 auto;
  margin-bottom : 60px;
  width : 80%;
}
div.boxorange{
  border : 3px double #FABD00;
  margin : 10px;
  margin-left : 30px;
  padding : 10px;
}
/* スペシャルコンテンツ01「雑誌に紹介されました」 */
div.special01{
  border : 1px dotted gray;
  margin : 20px auto;
  width : 90%;
}
/* 植原さんイラストの顔が隠れないように記事の下にスペースを追加するためのdiv */
div.space{
  height : 150px;
}

/* ---- お申し込みはこちらボタン（を入れたdiv） ---- */
.applypost {
  background-color: #FFE6E2;
  margin: 0 auto;
  padding: 1em 0;
  width: 80%;
  -webkit-border-radius : 10px;
  -moz-border-radius : 10px;
  border-radius : 10px;
  background-image: url("assets/images/shade_ellipse_white.png");
  background-position: -400px -150px;
  background-repeat: no-repeat;
}


/* ---- フッターブロック ---- */
footer#footer {
  clear : both;
}

footer#footer .content {
  border-top: 1px dotted #ffffff;
}

footer#footer #copyright {
  display  : block;
  width    : 100%;
  height   : 30px;
  line-height : 16px;
  left     : 0px;
  bottom   : 0px;
  text-align  : center;
  color       : white;
  position : absolute;
}
#copyright small{
  font-size: 100%;
}

nav#footerNavi {
  height   : 45px;
  padding  : 8px;
  text-align : center;
  /* width    : 375px;
  margin   : 0 auto; */
}

nav#footerNavi ul {
  font-size : 110%;
  text-align : center;
}

nav#footerNavi ul li {
  margin  : 0 20px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/*=======================================================*/
/* ==== 各ページごとの指定  ==== */
/* ---- タイトル（日本語） page<Alias> ---- */

/* ---- 火災保険見直し　実例紹介 page<case> ---- */
.accent_h4{
  color: #f85151;
}

div.case_odd{
  background-image : url("assets/images/recommend/bg_case01.png");
  background-position : right;
  background-repeat : no-repeat;
}
div.case_even{
  background-image : url("assets/images/recommend/bg_case02.png");
  background-position : right;
  background-repeat : no-repeat;
}

#primContent dl.case_old{
  margin-left: 35px;
}
#primContent dl.case_old dt{
  font-size : 140%;
  padding : 5px 10px;
  color : #00589F;
  border-left: 5px solid;
}
#primContent dl.case_old dd{
  font-size : 120%;
  padding : 5px 20px;
  line-height: 1.6em;
}
#primContent dl.case_new{
  margin-left: 35px;
}
#primContent dl.case_new dt{
  font-size : 140%;
  padding : 5px 10px;
  color : #DD3E7B;
  border-left: 5px solid;
}
.case_new_dt{
  font-size: 80%;
  font-weight: normal;
}
#primContent dl.case_new dd{
  font-size : 120%;
  padding : 5px 20px;
  line-height: 1.6em;
}

.cost_diff{
  font-size   : 140%;
  font-weight : bold;
}
.cost_diff_plus{
  color : #00589F
}

/* ---- お客様への情報提供 page<service> ---- */
div.service{
  margin-bottom : 50px;
}
/* ---- スペシャルコンテンツ page<special> ---- */
#primContent .special01 table th{
  width:30px;
}
#primContent table.sp01{
  width: 360px;
  float: left;
}
#primContent table.sp02{
  width: 320px;
  float: right;
  margin: 0 40px 0 0;
}
#primContent .osawa{
  background-color: #575774;
  width: 200px;
  border: 1px solid gray;
  float: left;
  margin: 10px 0 0 60px;
}
#primContent .osawa p{
  font-size: 90%;
  margin:0;
  color:#fff;
}
/* ---- 勧誘方針 page<policy> ---- */

#primContent_wide ol {
  font-size: 120%;
  line-height: 1.6em;
}

#primContent_wide ol li {
  list-style-type : decimal;
  margin : 20px 10px 20px 40px;
}
#primContent_wide ol li.policy_slide {
  margin : 20px 10px 20px 250px;
}

/* ---- 個人情報保護方針 page<privacypolicy> ---- */
#primContent_wide .priv_slide{
  margin-left: 250px;
}
#primContent_wide dl.priv_contact{
  width: 680px;
  margin: 10px;
}
#primContent_wide dl.priv_contact dt{
  color : navy;
}
#primContent_wide dl.priv_contact dd{
  margin-left : 20px;
  font-size : 120%;
}

/* ---- サイトマップ page <sitemap> ---- */
#primContent .primBlock .sitemap{
  margin-left: 20px;
}
#primContent .sitemap ul {
  font-size : 13pt;
  margin : 10px 30px;
}
#primContent .sitemap ul li{
  margin : 10px;
  padding : 6px 0;
  list-style-image : url("assets/images/listicon_sitemap.png");
}

/*=======================================================*/
/* ---- メールフォームなど特定のパートのみの指定 ---- */
/*cfFormMailerのメールフォーム関連*/
.cfFM_error{
  color : #ff0000;
  font-weight : bold;
}
.require{
  color : red;
}
.cfFM_require{
  color : red;
}
.btnRequest{
  text-align: center;
  margin: 10px;
}

.cfForm{
  margin : 20px 0;
}

#primContent .cfForm table{
    width : 90%;
  }
  .cfForm table th{
    text-align : right;
    width : 30%;
    vertical-align : middle;
  }
  .cfForm table td{
    text-align : left;
    vertical-align : middle;
  }

  .cfForm textarea {
    width  : 25em;
    height : 10em;
  }

.cfFormComp {
  border : 1px solid gray;
  padding : 10px;
  margin : 30px auto;
}
#primContent .cfFormComp p{
  margin : 10px 25px;
  font-size : 120%;
}
#primContent .cfFormComp img{
  margin : 10px 60px;
}

#primContent .ssl_siteseal {
  width : 90%;
  margin-left  : auto;
  margin-right : auto;
}

/*店舗写真ギャラリーjQuery*/

#wrap{
  width: 550px;
  margin: 20px auto;
}
#contentsWrapper #primContent .primBlock .smallimage {
  background-color: #fff;
  border: 1px solid #CCC;
  padding: 3px;
  margin: 10px;
  vertical-align: top;
}
div#fancy_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #666;
  display: none;
  z-index: 30;
}
* html div#fancy_overlay {
  position: absolute;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
div#fancy_wrap {
  text-align: left;
}
div#fancy_loading {
  position: absolute;
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: none;
  overflow: hidden;
  background: transparent;
  z-index: 100;
}
div#fancy_loading div {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 480px;
  background: transparent url('assets/js/gallery/fancy_progress.png') no-repeat;
}
div#fancy_loading_overlay {
  position: absolute;
  background-color: #FFF;
  z-index: 30;
}
div#fancy_loading_icon {
  position: absolute;
  background: url('assets/js/gallery/fancy_loading.gif') no-repeat;
  z-index: 35;
  width: 16px;
  height: 16px;
}
div#fancy_outer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  padding: 18px 18px 33px 18px;
  margin: 0;
  overflow: hidden;
  background: transparent;
  display: none;
}
div#fancy_inner {
  position: relative;
  width:100%;
  height:100%;
  border: 1px solid #BBB;
  background: #FFF;
}
div#fancy_content {
  margin: 0;
  z-index: 100;
  position: absolute;
}
div#fancy_div {
  background: #000;
  color: #FFF;
  height: 100%;
  width: 100%;
  z-index: 100;
}
img#fancy_img {
  position: absolute;
  top: 0;
  left: 0;
  border:0;
  padding: 0;
  margin: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
}
div#fancy_close {
  position: absolute;
  top: -12px;
  right: -15px;
  height: 30px;
  width: 30px;
  background: url('assets/js/gallery/fancy_closebox.png') top left no-repeat;
  cursor: pointer;
  z-index: 181;
  display: none;
}
#fancy_frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
}
#fancy_ajax {
  width: 100%;
  height: 100%;
  overflow: auto;
}
a#fancy_left, a#fancy_right {
  position: absolute;
  bottom: 0px;
  height: 100%;
  width: 35%;
  cursor: pointer;
  z-index: 111;
  display: none;
/*  background-image : url(http:data:image/gif);base64,AAAA);*/
  background-image : url(data:image/gif);base64,AAAA);
  outline: none;
}
a#fancy_left {
  left: 0px;
}
a#fancy_right {
  right: 0px;
}
span.fancy_ico {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  z-index: 112;
  cursor: pointer;
  display: block;
}
span#fancy_left_ico {
  left: -9999px;
  background: transparent url('assets/js/gallery/fancy_left.png') no-repeat;
}
span#fancy_right_ico {
  right: -9999px;
  background: transparent url('assets/js/gallery/fancy_right.png') no-repeat;
}
a#fancy_left:hover {
  visibility: visible;
}
a#fancy_right:hover {
  visibility: visible;
}
a#fancy_left:hover span {
  left: 20px;
}
a#fancy_right:hover span {
  right: 20px;
}
.fancy_bigIframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
div#fancy_bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 70;
  border: 0;
  padding: 0;
  margin: 0;
}
div.fancy_bg {
  position: absolute;
  display: block;
  z-index: 70;
  border: 0;
  padding: 0;
  margin: 0;
}
div.fancy_bg_n {
  top: -18px;
  width: 100%;
  height: 18px;
  background: transparent url('assets/js/gallery/fancy_shadow_n.png') repeat-x;
}
div.fancy_bg_ne {
  top: -18px;
  right: -13px;
  width: 13px;
  height: 18px;
  background: transparent url('assets/js/gallery/fancy_shadow_ne.png') no-repeat;
}
div.fancy_bg_e {
  right: -13px;
  height: 100%;
  width: 13px;
  background: transparent url('assets/js/gallery/fancy_shadow_e.png') repeat-y;
}
div.fancy_bg_se {
  bottom: -18px;
  right: -13px;
  width: 13px;
  height: 18px;
  background: transparent url('assets/js/gallery/fancy_shadow_se.png') no-repeat;
}
div.fancy_bg_s {
  bottom: -18px;
  width: 100%;
  height: 18px;
  background: transparent url('assets/js/gallery/fancy_shadow_s.png') repeat-x;
}
div.fancy_bg_sw {
  bottom: -18px;
  left: -13px;
  width: 13px;
  height: 18px;
  background: transparent url('assets/js/gallery/fancy_shadow_sw.png') no-repeat;
}
div.fancy_bg_w {
  left: -13px;
  height: 100%;
  width: 13px;
  background: transparent url('assets/js/gallery/fancy_shadow_w.png') repeat-y;
}
div.fancy_bg_nw {
  top: -18px;
  left: -13px;
  width: 13px;
  height: 18px;
  background: transparent url('assets/js/gallery/fancy_shadow_nw.png') no-repeat;
}
div#fancy_title {
  position: absolute;
  bottom: -33px;
  left: 0;
  width: 100%;
  z-index: 100;
  display: none;
}
div#fancy_title div {
  color: #FFF;
  font: bold 16px Arial;
  padding: 5px;
}
div#fancy_title table {
  margin: 0 auto;
}
div#fancy_title table td {
  padding: 0;
  vertical-align: middle;
}
td#fancy_title_left {
  height: 32px;
  width: 15px;
  background: transparent url(assets/js/gallery/fancy_title_left.png) repeat-x;
}
td#fancy_title_main {
  height: 32px;
  background: transparent url(assets/js/gallery/fancy_title_main.png) repeat-x;
}
td#fancy_title_right {
  height: 32px;
  width: 15px;
  background: transparent url(assets/js/gallery/fancy_title_right.png) repeat-x;
}