html{
  overflow:hidden;
}

body {
  padding:0px;
  margin:0px;
  font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  color: #000000;
}
img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-interpolation-mode: bicubic;	/* for IE7 */
}

/* Currently unused. For future. */
#header {
  background-color: gray;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height:40px;
  z-index:200;
  overflow:hidden;
  background-color:gray;
  padding:0px;
}

#mainarea {
  background-color: #eeeeee;
  position: absolute;
  left: 0px;
  top: 0px;
  width:100%;
  overflow:hidden;
  background-image: url("../skinimage/bg.gif");
  background-position: 0px 0px;
}
#normallayer {
  position: absolute;
  top: 0px;
  left: 0px;
}
#bookborderlayer {
  position: absolute;
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
}
#booklayer {
  position: absolute;
  top: 0px;
  left: 0px;
}
#linklayer {
  position: absolute;
  top: 0px;
  left: 0px;
}
#centerborderlayer {
  position: absolute;
  top: 0px;
  left: 0px;
}
#bookmarklayer {
  position: absolute;
  top: 0px;
  left: 0px;
}
#bookmarklayer .bookmarktab {
  position: absolute;
  background-color: blue;
  opacity: 0.3;
  filter:alpha(Opacity=30);
  cursor:pointer;
}
#bookmarklayer .bookmarktab p {
  color: white;
  font-size: 12px;
  margin: 0px 10px;
}

#zoomlayer {
  position: absolute;
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
}
#zoomedscrolllayer img {
  position: absolute;
}
.bookborder .top {
  position: absolute;
  background-image: url("../skinimage/book/layout_top.gif");
  overflow:hidden;
}
.bookborder .lefttop {
  position: absolute;
  background-image: url("../skinimage/book/layout_lefttop.gif");
  overflow:hidden;
}
.bookborder .left {
  position: absolute;
  background-image: url("../skinimage/book/layout_left.gif");
  overflow:hidden;
}
.bookborder .leftbottom {
  position: absolute;
  background-image: url("../skinimage/book/layout_leftbottom.gif");
  overflow:hidden;
}
.bookborder .righttop {
  position: absolute;
  background-image: url("../skinimage/book/layout_righttop.gif");
  overflow:hidden;
}
.bookborder .right {
  position: absolute;
  background-image: url("../skinimage/book/layout_right.gif");
  overflow:hidden;
}
.bookborder .rightbottom {
  position: absolute;
  background-image: url("../skinimage/book/layout_rightbottom.gif");
  overflow:hidden;
}
.bookborder .bottom {
  position: absolute;
  background-image: url("../skinimage/book/layout_bottom.gif");
  overflow:hidden;
}

#copy_and_paste_layer {
  position: absolute;
  top: 0px;
  left: 0px;
}

#windowlayer {
  position: absolute;
  top: 0px;
  left: 0px;
}

#sidebar {
  position: absolute;
  top: 0px;
  display:none;
  height:100%;
}
#sidebar .sidebarbg {
  position: absolute;
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
  background-color: white;
  opacity: 0.8;
  filter:alpha(Opacity=80);
}
#sidebar .contentarea {
  position: absolute;
  left: 0px;
  width:100%;
  overflow-y: auto;
  font-size:12px;
}
#sidebar .footerarea {
  position: absolute;
  top: 0px;
  left: 0px;
  width:100%;
  text-align:right;
}
#sidebar .toc_icon_div {
  float:left;
  height:18px;
}
#sidebar .toc_text_div {
  margin-left:34px;
}
#sidebar .toc_text_div span {
  cursor:pointer;
  line-height:16px;
}

/* for tree index */
#sidebar #treeindex {
  padding-top: 10px;
}
#sidebar #treeindex ul {
  list-style:none;
  margin: 0px;
  padding: 0px;
}
#sidebar #treeindex li {
  margin:3px 0 3px 5px;
}
#sidebar #treeindex .folder {
  padding:0 0 0 18px;
  background:url(../skinimage/sidebar/folder.gif)  no-repeat left top;
}
#sidebar #treeindex .leaf {
  padding:0 0 0 18px;
  background:url(../skinimage/sidebar/book.gif)  no-repeat left top;
}
#sidebar #treeindex .children_container {
  padding-left: 10px;
}

#controlbar {
  position: absolute;
  top:-100px;		/* チラつき防止のため、最初は画面外に出しておく */
  width: 100%;
  height:51px;		/* 操作バーの高さはここで指定 */
  background-color: #cccccc;
  overflow:hidden;
  background-image: url("../skinimage/bar/bg-2.jpg");
  background-position: 0px 0px;
  background-repeat: repeat-x;
}
#controlbar img {
  vertical-align:bottom;
}
#controlbar .page {
  font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  font-size: 12pt;
  font-style: normal;
  font-weight: bold;
}
#controlbar .cell {
  float: left;
}


/*ページ移動のボタン調整*/
#controlbar .pagebtn{ vertical-align:top; position:relative; top:2px;}
.PageRoll{ position:relative; bottom:2px;}
*html .PageRoll{ position:relative; bottom:1px;} /* IE6用 */
*:first-child + html .PageRoll{ position:relative; bottom:1px;} /* IE7用 */


.JSWindowTitle {
}
.JSWindowTitleText {
  font-size:12px;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  padding-left:5px;
  cursor:default;
}
.JSWindowTitleBGLeft {
  background-image: url("../skinimage/window/wintitle_left.gif");
  background-position: 0px 0px;
}
.JSWindowTitleBGCenter {
  background-image: url("../skinimage/window/wintitle.gif");
  background-position: 0px 0px;
}
.JSWindowTitleBGRight {
  background-image: url("../skinimage/window/wintitle_right.gif");
  background-position: 0px 0px;
}
.JSWindowTitleCloseBtn {
  background-image: url("../skinimage/window/win_close.gif");
  width:12px;
  height:12px;
  background-position: 2px 2px;
  background-repeat: no-repeat;
  cursor:pointer;
}
.JSWindowTitleCloseBtn.RO {
  background-image: url("../skinimage/window/win_close_ro.gif");
}

.JSWindowBody {
  background-color:gray;
}
.JSWindowClientArea {
  background-color:#eeeeee;
  overflow:hidden;
}


.modal_bglayer {
  background-color: gray;
  opacity: 0.5;
}
.modal_container {
  background-color: rgba(102, 102, 102, 0.8);
  overflow: hidden;
}

.modal_container .client_area {
  margin: 20px;
  overflow: hidden;
}
.modal_container .window_title {
  font-size: 20px;
  font-weight: bold;
  color: white;
}
.modal_container .image_list {
  width: 100%;
  /* 高さはJSで計算 */
  text-align:center;
  overflow:hidden;
}
.modal_container .footer {
  height: 50px;
}
.modal_container .footer .pagination {
  text-align: center;
  color: #eeeeee;
}
.modal_container .footer .pagination span.link a {
  font-weight: bold;
  color: rgb(255, 255, 153);
}
.modal_container .footer .pagination span.link a:hover {
  background-color: #888844;
}
.modal_container .footer .pagination span.disabled_link {
  cursor: default;
  color: #ffffff;
  font-weight: bold;
}
.modal_container .footer .buttons {
  text-align: right;
}
.modal_container .footer img.button {
  cursor: pointer;
}

.cell_container {
  width: 45%;
  height: 49%;
  box-sizing: border-box;
  padding: 15px;
  overflow: hidden;
  display: inline-block;
}

.modal_image_cell {
  /* サイズはJSで指定 */
  margin: auto;	/* centering */
  box-sizing: border-box;
  padding: 10px;
  background-color: white;
  position: relative;	/* .modal_image_cell_textの親にする */
  cursor: pointer;
}
.modal_image_cell:hover {
  background-color: #eeeeee;
}
.modal_image_cell_image {
  /* テキスト部分をあけた高さをJSで指定 */
  position: relative;	/* 画像の中央寄せ用 */
}
.modal_image_cell_image img {
  /* 画像サイズ自動調整。親でheightの指定が必要 */
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  /* 中央寄せ */
  position: absolute;  
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  margin: auto;
}
.modal_image_cell_text {
  position: absolute;
  display: block;
  width: auto;
  bottom: 0;  /* 下寄せ */
  left: 0;
  right: 0;	/* 幅も左右一杯まで */
  font-weight: bold;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
}