*, *:before, *:after {
-webkit-box-sizing: border-box; /* content-box; */
   -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
        box-sizing: border-box;
}

body {
  background-color: white;
  margin: 0;
/*  font-family:Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI",  Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  */
}

/* sam */  
ul.header {
	display:table;
	font-size:0.9em;
	text-align: center;
	width: 100%;
	list-style:none;
	margin: 0;
	padding: 0.5em 0 0.5em 1em;
	border-top: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
  background-color: white;
}
ul.header	li {
	display: table-cell;
	vertical-align: middle;
	text-align:left;
}
ul.header	li:nth-child(1) {
  width: 8em;
  min-width: 8em;
}
ul.header	li:nth-child(2) {
	width: 14em;
}
ul.header	li:nth-child(3) {
	width: 20em;
	display: block;
}
ul.header	li:nth-child(4) {
	margin-right: 2em;
	text-align: right;
}
ul.header	li:nth-child(5) {
	width:40px;
}
ul.header	li div{
  display: inline-block;
	vertical-align: middle;
  padding:0 1em 0 0;
}
.book_line {
	white-space: nowrap; /* 改行を半角スペースに置き換える */
  overflow: hidden; /* はみだした部分を削除する */
  text-overflow: ellipsis; /* 末尾に「…」を付加する */
  margin: 0;
  padding: 0;
/*  width: 150px;*/
  width: 16em;
}
.book_title {
	white-space: nowrap; /* 改行を半角スペースに置き換える */
  overflow: hidden; /* はみだした部分を削除する */
  text-overflow: ellipsis; /* 末尾に「…」を付加する */
  margin: 0;
  padding: 0;
/*  width: 250px;*/
  max-width: 20em;
}
ul.header div.cmd{
  width:2em;
}

ul.header div.cmd{
  font-size: 1.3em;
  color: darkgrey;
  font-family:WebHostingHub-Glyphs;
}
ul.header div.cmd:hover:before{
  color: #64B0EA;
}
ul.header div.cmd:hover{
  cursor: pointer;
}
ul.header div[name="pager"]:hover{
  color: #64B0EA;
  cursor: pointer;
}

ul.header div.book_title:before{
  font-size: 1.3em;
  color: darkgrey;
  content:'\f64f';
  font-family:WebHostingHub-Glyphs;
  color: #gray;
}
ul.header div.book_title:hover{
  cursor: pointer;
  color: #64B0EA;
}

ul.header div.cmd[name="pageback"]:before{
  content:"\f198";
}
ul.header div.cmd[name="pageforward"]:before{
  font-family:WebHostingHub-Glyphs;
  content:"\f197";
}
ul.header div.cmd[name="viewmode"]:before{
  content:"\f280";
}
#book_about table td {
  vertical-align: top;
}

ul.header div[name='tools_show']{
  font-size: 1.3em;
  color: darkgrey;
  width:1.5em;
}
ul.header div[name='tools_show']:before{
  font-family:WebHostingHub-Glyphs;
  content: "\f110";
}
ul.header div[name='tools_show']:hover:before {
  color: #64B0EA;
}
ul.header div[name='pager']{
  font-size: 1.3em;
  color: darkgrey;
}
/*
ul.header div[name='pager']:hover:before{
  color: grey;
}
*/

div._book_block {
  background-color: whitesmoke;
  margin: 0;
  border-bottom:1px solid lightgray;
  padding: 0.5em;
}
  

input[type="file"][action='change_input_image'] {
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  width:0;
  right: 0;
  top: 0;
  cursor: pointer;
}
  
#EM_PX {
    margin: 0;
    padding: 0;
    width: 1px;
    height: 1em;
    visibility: hidden;
}
.fix_pencil {
  background-color: azure;
  width: 360 px;
  height: 180 px; 
  padding: 12 px;
  border: 1 px solid #aaa;
  -webkit-writing-mode: vertical-rl;  
}
/*
#wrapper .cont_overlay{
  z-index: 102;
  position: absolute;
  width:100%;
  height:100%;
}
div#wrapper,
*/
div#cont_wrapper{
  width:100%;
  height:100%;
}

div._dtplay{
  width:100%;
  height:100%;
  z-index:99;
  position: absolute;
}

#cont_wrapper{
  position: relative;
}

._container {
  background-color: transparent;
  border: solid 1px lightgray;  
/* selectできないようにする  
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
*/
  counter-reset: my-badass-counter;
  width:0;
  height:0;
  margin: auto;
  position: relative;
/*  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;*/
}
._wrd_cont {
  background-color: transparent;
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:94%;
  height:96%;
  margin:0 auto;
}
#cont_wrapper.edit_mode div._word {
/* selectできないようにする  */
  user-select: none; /* CSS3 */
  -moz-user-select: none; /* Firefox */
  -webkit-user-select: none; /* Safari、Chromeなど */
  -ms-user-select: none; /* IE10かららしい */
}
#cont_wrapper.view_mode div._word {
/* selectできないようにする  */
  user-select: auto; /* CSS3 */
  -moz-user-select: auto; /* Firefox */
  -webkit-user-select: auto; /* Safari、Chromeなど */
  -ms-user-select: auto; /* IE10かららしい */
}
._container ._numbering,
._container ._bullets{
  padding:0.4em 0 0 1.4em;
}
._container ._numbering:before {
	content: counter(my-badass-counter);
	counter-increment: my-badass-counter;
	position: absolute;
	left: 0.3em;
	top: 0.3em;
  font: bold 1em Sans-Serif;
}
._container ._bullets:before {
	content: '・';
	position: absolute;
	left: 0.3em;
	top: 0.3em;
  font: bold 1em Sans-Serif;
}
._newAnchor {
  position:  absolute;
  background: transparent;
  border:1px dotted black;
}
._anchor {
  margin:0;padding:0;
  position:  absolute;
/*  z-index: 1999;  */
  z-index: 2001;
}
._select_aux{
  border:1px dashed black; /*dodgerblue; */
  position:  absolute;
  background: transparent;
}


._frame{
  margin:0;
  padding:1px;
  border-width:1px;
  border: 1px dotted black;
  background-color: transparent;
  background-repeat: no-repeat;
/*  background-color: aqua;  */
}


.header.view_mode div.tools_show,
.header.view_mode div.viewmode{
  display: none;
}

#cont_wrapper.view_mode ._select_aux{
  border-color:transparent;
}
#cont_wrapper.edit_mode ._ctr{
  border: 1px dotted black;
}

._ctr{
  margin:0;
  padding:0;
  position:absolute;
  background: transparent;
  background-repeat: no-repeat;
  resize:none;
  word-wrap:break-word;
}
._square {
/*  margin:0;padding:0;
  background-color:azure;
  */
/*  border: 1px solid; */
  /*-webkit-writing-mode: vertical-rl;*/
}
._editor {
/*  -webkit-writing-mode: vertical-rl;*/
/*  margin:0;padding:0;
  background-color:white;
  */
  resize:none;
}

._pencil {
/*  margin:0;padding:0;
  background-color:azure;
  */
  /*-webkit-writing-mode: vertical-rl;*/
}
._wordframe {
  z-index: 100;
  position:absolute;
  background-color: transparent;
  outline:0;
  padding:1em;
/*  width:"800px";
  height:"600px";
  */
}
._wordframe_static {
  z-index: 101;
  position:absolute;
  background-color: transparent;
  outline:0;
  padding:1em;
}

body._word {
  margin:0;
  cursor:text;
  background-color: transparent;
  outline:0;
  position: relative;
}


._word a:not([href]) {
  text-decoration:none;
  color:black;
  overflow:visible;
  position: relative;
}
._word:not(.view_mode) a:not([href]):before{
  content: " \f21d ";
  font-family:WebHostingHub-Glyphs;
  font-size:7px;
  vertical-align:super;
  color:dodgerblue;
  position: absolute;
  right: 0.6em;
  top: -1.2em;
}
._word:not(.view_mode) a:not([href]):after{
  content: '  'attr(name);
  font-size:7px;
  vertical-align:super;
  color:dodgerblue;
  position: absolute;
  top: -1em;
}
._word img {
  margin:1em;
  border: solid 1px lightgray;
}
._word figure {
  text-align: center;
  display: table;
  width: 100%;*/ /* minimum width */
  *width: auto; /* for IE7 and below */
  margin:0 auto;
}
._word figure>img,
._word figure>figcaption{
  text-align: center;
/*  display: table-row;*/
}
._word ._iframe_wrapper {
  position: relative;
  width: 80%;
  border: solid 1px lightgray;
}
._word figure ._iframe_wrapper {
  margin: auto;
}
._word ._iframe_wrapper:before {
    content:"";
    display: block;
    padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}
._word ._iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

._word hr{
  height: 1px;
  color:lightgray;
  background-color: gray;
  margin:0.5em auto;
}

._word ._hr{
  height: 2px;
  width:100%;
  position: absolute;
  margin-top:-0.8em;
}

._word.view_mode [cmd_hide="yes"] {
  display:none;
}

/*<span class='_iwap'><span class='_i'></span></span>*/

._word * {
  line-height:1.7em;
  word-wrap: break-word;
}
._word{
	color:#444;
  font-size:11.5pt; /*'10.5pt';*/
  font-family:Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

._word span._iwap{
  font-family:Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

._word p, ._word p span {
  font-family:"Times New Roman","游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
}

._word i:before{
  font-size: 1em;
}
._word i{
/*  vertical-align: middle;*/
  margin-top: 0.2em;
  display: inline-block;
}

._word span._iwrap{
  margin: 0;
  padding: 0;
/*  display: inline-block;*/
}
div._checker {
  display:none;
}

div._hidden {
   width: 0px;
   height: 0px;
   overflow: hidden;
}


#cont_wrapper div[t_cmd],
#cont_wrapper div[b_cmd],
#cont_wrapper span[b_cmd]{
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

div[t_cmd]:hover{
  cursor: pointer;
}
#cont_wrapper div[bt_cmd]:hover,
#cont_wrapper div[b_cmd]:hover,
#cont_wrapper span[b_cmd]:hover{
  cursor: pointer;
  color: dodgerblue;
}
#cont_wrapper div[bt_cmd],
#cont_wrapper div[bt_cmd]:before,
#cont_wrapper div[bt_cmd]:hover:after {
-moz-transition-property: background-color, content;
-webkit-transition-property: background-color, content;
-o-transition-property: background-color, content;
-ms-transition-property: background-color, content;

-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
-ms-transition-duration:1s;
}

#cont_wrapper div[bt_cmd]:hover:after{
  display: inline;
  width:20em;
  text-align: right;
  line-height: 1.2em;
  position:absolute;
  font-size:1em;
  right:0;
  bottom:-2em;
  color:red;
  Opacity:0.9;
}
#cont_wrapper div._ctr[bt_cmd]:before{
  text-align: center;
  vertical-align:middle;
  height: 100%;
  padding-top:0.5em;
  display: inline-block;
}

#cont_wrapper div[bt_cmd][mode="view"]:before,
#cont_wrapper div[bt_cmd]:before{
  content: "レッツトライ！";
  font-size:0.8em;
}
#cont_wrapper div[bt_cmd][mode="view"]:hover:after,
#cont_wrapper div[bt_cmd]:hover:after{
  content: "問題解答にチャレンジしますか？";
}

#cont_wrapper div[bt_cmd][mode="play"]{
/*  content: "解答中"; */
  background-color: #f88;
  Opacity:0.9;
  font-weight: 700;
}
#cont_wrapper div[bt_cmd][mode="play"]:before{
  content: "現在解答中";
}
#cont_wrapper div[bt_cmd][mode="play"]:hover:before{
  transition-duration: 1s;
  content: "解答終了！";
  font-weight: 400;
}
#cont_wrapper div[bt_cmd][mode="play"]:hover:after{
  content: "解答を終了しますか？";
  font-weight: 400;
}
#cont_wrapper div[bt_cmd][mode="playend"]{
  background-color: #fb7;
}
#cont_wrapper div[bt_cmd][mode="playend"]:before{
  content: "採点する！";
  font-size:0.9em;
}
#cont_wrapper div[bt_cmd][mode="playend"]:hover:after{
  content: "採点して答合わせしますか？";
}
#cont_wrapper div[bt_cmd][mode="score"]{
/*  content: "解答中";*/
  background-color: #fb7;
  font-weight: 700;
}
#cont_wrapper div[bt_cmd][mode="score"]:before{
  content: "再チャレンジ";
  font-size:0.9em;
  font-weight: 400;
}
#cont_wrapper div[bt_cmd][mode="score"]:hover:after{
  content: "再度、問題解答にチャレンジしますか？";
  font-weight: 400;
}

#book_play table[name="score_list"] th,
#book_play table[name="score_list"] td{
  white-space:nowrap;
}

#book_play table[name="score_list"] th:nth-child(1),
#book_play table[name="score_list"] td:nth-child(1){
  width:35%;
}
#book_play table[name="score_list"] th:nth-child(2),
#book_play table[name="score_list"] td:nth-child(2){
  text-aligin:left;
  width:35%;
}

#book_play table[name="score_list"] th:nth-child(3),
#book_play table[name="score_list"] th:nth-child(4){
  width:15%;
}
#book_play table[name="score_list"] td:nth-child(3),
#book_play table[name="score_list"] td:nth-child(4){
  text-align: right;
  width:15%;
}
#book_play table[name="score_list"]  tbody > tr._select {
  background-color: lightblue;
}

/*
#book_play table{
  margin:1em 0;
  font-size: 10pt;
}
#book_play table th{
  background-color: #eee;
}
#book_play table tr {
  text-align: left;
  border-bottom: dotted 1px gray;
}
#book_play table td{
  padding: 0.5em;
}
#book_play table th{
  text-align: left;
}
*/
#book_play table th:nth-child(1),
#book_play table td:nth-child(1){
  width:5em;
}
#book_play table th:nth-child(2),
#book_play table td:nth-child(2){
  width:20em;
}
#book_play table th:nth-child(3),
#book_play table td:nth-child(3){
  width:10em;
}
#book_play div[name="answer_table"] {
  width:35em;
  height:300px; 
  position: relative;
}
#book_play table tr {
width: 100%;
display: inline-table;
}

#book_play table{
}
#book_play table tbody{
  overflow-y: scroll;
  height: 200px;
  width: 100%;
  position: absolute;
}


/* チェックされた時のスタイル */
._word div._score {
  display: none;
}
._word._score div._score {
  display: inline-block;
  color:red;
  Opacity:0.7;
  padding:0 1em;
  margin:0 1em;
}
._word._score div._score>table {
  border-top: double red;
  border-bottom: double red;
}
._word._score div._score table td:nth-child(3),
._word._score div._score table td:nth-child(4){
  text-align: right;
}

._word._score div._score span:nth-child(1) {
  font-size:4em;
}
._word._score div._score span:nth-child(2) {
  font-size:1.5em;
}
._word._score div._score span:nth-child(1):after {
  content: '点 ／ ';
}
._word._score div._score span:nth-child(2):after {
  content: '点';
}

/* クリックするまで分からないようにする。
._word._score label.correct {
  border-bottom: dotted 1px red;
	color:red;
  position: relative;
}
._word._score label.incorrect {
  border-bottom: dotted 1px blue;
  position: relative;
}
*/
._word label {
  font-weight: 400;
  display: inline;
}
._word label:hover{
  cursor: pointer;
}
._word._score label.correct {
  position: relative;
}
._word._score label.incorrect {
  position: relative;
}
._word._score input:checked + label{
  border-bottom: dotted 1px red;
	color:red;
}

/*
._word._score label.correct input:checked:before {
		position:absolute;
		content: "\f1bc";
    font-family:WebHostingHub-Glyphs;
		font-size:3em;
		margin-top: -0.3em;
		color:red;
		Opacity:0.2;
}
*/
._word._score label.correct input:checked ~ span:after {
		position:absolute;
		content: "\f1bc";/*"\f10c";*/ /*"\f1db";*/ 
    font-family:WebHostingHub-Glyphs;
    /*font-family: FontAwesome;*/
		font-size:2.5em;
    top:-0.1em;
    left:-0.3em;
		color:red;
		Opacity:0.2;
}
/*
._word._score label.incorrect input:checked:before {
		position:absolute;
		content: "\00d7";
    font-family:WebHostingHub-Glyphs;
		font-size:3em;
		margin-top: -0.3em;
		color:red;
		Opacity:0.2;
}
*/
._word._score label.incorrect input:checked ~ span:after{
		position:absolute;
		content: "\00d7"; /*"\f00d";*/
    font-family:WebHostingHub-Glyphs;
    /*font-family: FontAwesome;*/
		font-size:2.5em;
    top:-0.1em;
    left:-0.3em;
		color:red;
		Opacity:0.2;
}
/******
._word._score label input:checked:before {
		position:absolute;
		content: "\00d7";
    font-family:WebHostingHub-Glyphs;
		font-size:3em;
		margin-top: -0.3em;
		color:red;
		Opacity:0.2;
}
*/
._word._score label.correct input:checked:after {
		position:absolute;
		content: attr(point)"点";
		font-size:1em;
    right:0;
    bottom:-1.2em;
		color:red;
		Opacity:0.4;
}
._word._score label.incorrect input:checked:after {
		position:absolute;
		content: attr(point)"点";
		font-size:1em;
    right:0;
    bottom:-1.2em;
		color:red;
		Opacity:0.4;
}
/*******
._word._score label input:checked:after {
		position:absolute;
		content: attr(point)"点";
		font-size:1em;
    right:0;
    bottom:-1.2em;
		color:red;
		Opacity:0.4;
}
*/
/**/
body._word span[b_cmd]:before,
#cont_wrapper.edit_mode span[b_cmd]:before{
  position: absolute;
  font-family:WebHostingHub-Glyphs;
  color: rgba(128,128,128,0.5);
  margin-top:-1em;
}
#cont_wrapper.edit_mode div[b_cmd]:before{
  position: absolute;
  font-family:WebHostingHub-Glyphs;
  color: rgba(128,128,128,0.5);
  margin-top:-2em;
}
body._word span[b_cmd="pagefirst"]:before,
#cont_wrapper.edit_mode span[b_cmd="pagefirst"]:before,
#cont_wrapper.edit_mode div[b_cmd="pagefirst"]:before{
  content: "\f47e";
}
body._word span[b_cmd="pageback"]:before,
#cont_wrapper.edit_mode span[b_cmd="pageback"]:before,
#cont_wrapper.edit_mode div[b_cmd="pageback"]:before{
  content: "\f198";
}
body._word span[b_cmd="pageforward"]:before,
#cont_wrapper.edit_mode span[b_cmd="pageforward"]:before,
#cont_wrapper.edit_mode div[b_cmd="pageforward"]:before{
  font-family:WebHostingHub-Glyphs;
  content: "\f197";
}
body._word span[b_cmd="pagegoto"]:before,
#cont_wrapper.edit_mode span[b_cmd="pagegoto"]:before,
#cont_wrapper.edit_mode div[b_cmd="pagegoto"]:before{
  font-family:sans-serif;
  color: rgba(128,128,128,0.5);
  content: 'goto >'attr(page)'page';
}
body._word span[b_cmd="historyback"]:before,
#cont_wrapper.edit_mode span[b_cmd="historyback"]:before,
#cont_wrapper.edit_mode div[b_cmd="historyback"]:before{
  content: "\f305";
}

#cont_wrapper.edit_mode div[b_area]:before{
  position: absolute;
  color: rgba(128,128,128,0.5);
  margin-top:-2em;
  content: attr(b_area);
}

#cont_wrapper.edit_mode textarea._editor._vertical{
  background-color: rgba(240,240,240,0.5);
}
div._editor._vertical,
div._pencil._vertical {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* dropdown-sub */

/*
ul.dropdown-menu {
  padding: 0;
}
  */
.dropdown-sub {
  position: relative;
  min-width: 120px;
}
@media all and (-ms-high-contrast:none){/* IE11 */
  *::-ms-backdrop, 
  .bookList,
  .bookList>*.dropdown-sub {
    padding:5px 4px 2px 4px;
    text-wrap:none;
  }  
}

.dropdown-sub>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-sub:hover>.dropdown-menu {
  display: block;
}
div.dropdown-sub>div.dropdown-menu {
/*  min-width: 150px;*/
}
/*
.bookPopup div.dropdown-sub>div.dropdown-menu div{
  text-wrap:none;
  display: block;
}
*/
.dropdown-sub:after {
    display: block;
    content: " ";
    float: right;
    width: 1.5em;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-left: 5px;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-sub:hover>div:after {
    border-left-color: #fff;
}

.dropdown-sub.pull-left {
    float: none;
}
.dropdown-sub.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
.div.plain {
  left:-3px;
  top:3px;
  padding: 0;
  border: none;
  background-color:white;
}
/*
.bookButton {float:left; width:24px; height:24px; margin:1px 0 1px 0; background: url('images/buttons.gif')}
*/
.bookDisabled {opacity:0.3; filter:alpha(opacity=30)}
.bookDivider {float:left; width:1px; height:23px; margin:1px 0 1px 0; background:#CCC}
.bookPopup:not(.bookPrompt)>div:hover,
.dropdown-menu:not(.plain)>div:hover {
  background-color:#e6e6e6;
  cursor: pointer;
}
.bookPopup {border:solid 1px #999; background-color:white; color:#333333; position:absolute; font:10pt Arial,Verdana; cursor:default; z-index:10000;}
.bookList div:not(.plain) {
  padding:2px 4px 2px 4px;
  text-wrap:none;
}
.bookList p,
.bookList h1,
.bookList h2,
.bookList h3,
.bookList h4,
.bookList h5,
.bookList h6,
.bookList font {padding:0; margin:0; background-color:Transparent}
.bookColor {width:259px; padding:1px 0 0 1px; font-size: 6px;left:0;top:4px;}
.bookColor div[type='tran'] {border:solid 1px; border-color:aqua;}
.bookColor div[type='sep'] {border-left:solid 1px white;}
.bookColor div {float:left; width:15px; height:15px; margin:0 1px 1px 0}
.bookColor div {
  transition: transform 0.2s linear 0;
}
.bookColor div:hover {
  transform: scale(1.8);
  border: 1px solid black;
}
.bookColor.bookIcon {width:213px; padding:1px 0 0 1px; font-size: 6px;left:0;top:4px;}
.bookColor.bookIcon div[type='tran'] {border:solid 1px; border-color:aqua;}
.bookColor.bookIcon div[type='sep'] {border-left:solid 1px white;}
.bookColor.bookIcon div {float:left; width:20px; height:20px; margin:0 1px 1px 0}
.bookColor.bookIcon div {
  transition: transform 0.2s linear 0;
  background-color: white;
}
.bookColor.bookIcon div:hover {
  transform: scale(2);
  padding:0.3em 0.1em;
  display: block;
  text-align: center;
  border: 1px solid #64B0EA;
  background-color: white;
}
.bookColor.bookIcon i:before{
  font-size:1.7em;
}

/*    -moz-transition: -moz-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;*/
/*  border:solid 1px; border-color: white black black white;*/
/*    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -o-transform: scale(1.6);
    -ms-transform: scale(1.6);*/
.bookPrompt {background-color:#F6F7F9; padding:1em; font-size:0.9em;}
.bookPrompt>input {font:1em Arial,Verdana;margin:0.3em 0;}
.bookPrompt>div {margin-top:0.5em;float: right;} */
.bookPrompt textarea {font:1em Arial,Verdana; width:300px;margin:0.5em 0;}
.bookMsg {background-color:#FDFCEE; width:200px; padding:4px; font-size:8.5pt}

/*
.bookPrompt {
  overflow: hidden;
}
*/
/************************************/
.toolbar div.btn {
  padding:auto 0;
/*  font-size: 0.9em;*/
  width:3em; /*32pt;*/
  height: 2.5em; /*32pt;*/
  vertical-align: middle;
}
.toolbar div.btn:before{
  font-family:WebHostingHub-Glyphs;
}

/*.btn[type='main']:before{
  font-family:WebHostingHub-Glyphs;
}
.btn[type='page']:before{
  font-family:WebHostingHub-Glyphs;
}
.btn[type='frame']:before{
  font-family:WebHostingHub-Glyphs;
}
.btn[type='text']:before{
  font-family:WebHostingHub-Glyphs;
}
*/  
.btn[name='pointer']:before{
  content: "\f0dc";
}
.btn[name='ibeam']:before{
  content: "\f5d4"; /* "\f040"; */
}
.btn[name='editor']:before{
  content: "\f47c";
}
.btn[name='square']:before{
  content:'\25ad';
}
.btn[name='book_new']:before{
  content:'\f4a1';
}
.btn[name='book_saveas']:before{
  content:'\f11b';
}
.btn[name='book_save']:before{
  content:'\f47a';
}
.btn[name='layers']:before{
  content:'\f1ca';
}
.btn[name='papersize']:before{
  content:'\f1a6';
}
.btn[name='viewmode']:before{
  content:'\f280';
}
  
.btn[name='insert_frame']:before{
  content:'\f0d5';
}
.btn[name='addcmd']:before{
  content:'\f0dd';
}

.btn[name='trash']:before{
  content:'\f0ce';
}

.btn[name='pageback']:before{
  content:'\f198';
}
.btn[name='pagepause']:before{
  content:'\f186';
}
.btn[name='pageforward']:before{
  content:'\f197';
}
.btn[name='pagegoto']:before{
  content:'\f182';
}
.btn[name='pageinsert']:before{
  content:'\f225';
}
.btn[name='pageplus']:before{
  content:'\002b';
}
.btn[name='pagetrash']:before{
  content:'\f0c7';
}

.btn[name='border']:before{
  /*content:'\f4e1';*/
  content:'\f204 _';
}
.btn[name='image_edit']:before,
.btn[name='insertImage']:before{
  content: "\22b7";
}
.btn[name='padding']:before{
  content:'\f1ed';
}
.btn[name='vertical']:before{
  font-family:Arical;
  content:'|||';
}
.btn[name='removeformat']:before{
  content:'\f1b1';
}

.btn[name='font']:before{
  content: "\f7ef";
}
.btn[name='bold']:before{
  content: "\f1f4";
}
.btn[name='italic']:before{
  content: "\f1f5";
}
.btn[name='underline']:before{
  content: "\f1f6";
} 
.btn[name='styles']:before{
/*  font-family:  Sans-Serif;
  font-weight: 700;*/
  content: "\f4e8";
}
.btn[name='fontsize']:before{
  content: "\f1f8"; /* "\f034"; */
}
.btn[name='type_color']:before{
  content: "\f7ed";
}
.btn[name='font_color']:before{
  content: "\f7ed";
}
.btn[name='line_height']:before{
  content: "\f1c0"; 
}
.btn[name='justify']:before{
  content: "\f1d7";
}
.btn[name='alignleft']:before{
  content: "\f1d7";
}
.btn[name='center']:before{
  content: "\f1d9";
}
.btn[name='alignright']:before{
  content: "\f1d8";
}
.btn[name='justifyfull']:before{
  content: "\f1da";
}
.btn[name='dotlist']:before{
  content: "\f4c2";
}
.btn[name='numberlist']:before{
  content: "\f4c3";
}
.btn[name='indent']:before{
  content: "\f4c5"; 
}
.btn[name='outdent']:before{
  content: "\f4c4"; 
}
.btn[name='bullets']:before{
  content: "\f4c2";
}
.btn[name='numbering']:before{
  content: "\f4c3";
}
.btn[name='formatBlock']:before{
  content: "\f068";
}
.btn[name='link']:before{
  content: "\f022";
}
.btn[name='icon']:before{
  content: "\f1c6";
  font-size: 1.1em;
}


span[br_type]:before{
  display: inline-block;
  content: " ";
  height:0.5em;
}
span[br_type='solid']:before{
  width:30px;
  margin:0 0.5em 0.4em 0;
  border-bottom: solid 1px black;
}
span[br_type='double']:before{
  width:40px;
  margin:0 0.5em 0.4em 0;
  border-bottom: double 3px black;
}  
span[br_type='groove']:before{
  width:40px;
  margin:0 0.5em 0.4em 0;
  border-bottom:groove 5px #cccccc;
}  
span[br_type='ridge']:before{
  width:40px;
  margin:0 0.5em 0.4em 0;
  border-bottom: ridge 5px #cccccc;
}  
span[br_type='inset']:before{
  width:30px;
  margin:0 0.5em 0 0;
  border: inset 5px #cccccc;
}  
span[br_type='outset']:before{
  width:30px;
  margin:0 0.5em 0 0;
  border: outset 5px #cccccc;
}  
span[br_type='dashed']:before{
  width:40px;
  margin:0 0.5em 0.4em 0;
  border-bottom: dashed 1px black;
}  
span[br_type='dotted']:before{
  width:40px;
  margin:0 0.5em 0.4em 0;
  border-bottom: dotted 1px black;
}

span[fs='6pt'] {font-size: '6pt';}
span[fs='7pt'] {font-size: '7pt';}
span[fs='8pt'] {font-size: '8pt';}
span[fs='9pt'] {font-size: '9pt';}
span[fs='10pt'] {font-size: '10pt';}
span[fs='10.5pt'] {font-size: '10.5pt';}
span[fs='11pt'] {font-size: '11pt';}
span[fs='12pt'] {font-size: '12pt';}
span[fs='13pt'] {font-size: '13pt';}
span[fs='14pt'] {font-size: '14pt';}
span[fs='15pt'] {font-size: '15pt';}
span[fs='16pt'] {font-size: '16pt';color:red;}
span[fs='17pt'] {font-size: '17pt';}
span[fs='18pt'] {font-size: '18pt';}

span[fs_type]:before{
  display: inline-block;
  width:50px;
}
span[fs_type='fs_6']:before{
  content: "6pt";
  font-size:6pt;
}
span[fs_type='fs_7']:before{
  content: "7pt";
  font-size:7pt;
}
span[fs_type='fs_8']:before{
  content: "8pt";
  font-size:8pt;
}
span[fs_type='fs_8']:before{
  content: "8pt";
  font-size:8pt;
}
span[fs_type='fs_9']:before{
  content: "9pt";
  font-size:9pt;
}
span[fs_type='fs_10']:before{
  content: "10pt";
  font-size:10pt;
}
span[fs_type='fs_10.5']:before{
  content: "10.5pt";
  font-size:10.5pt;
}
span[fs_type='fs_11']:before{
  content: "11pt";
  font-size:11pt;
}
span[fs_type='fs_12']:before{
  content: "12pt";
  font-size:12pt;
}
span[fs_type='fs_13']:before{
  content: "13pt";
  font-size:13pt;
}
span[fs_type='fs_13']:before{
  content: "13pt";
  font-size:13pt;
}
span[fs_type='fs_14']:before{
  content: "14pt";
  font-size:14pt;
}
span[fs_type='fs_15']:before{
  content: "15pt";
  font-size:15pt;
}
span[fs_type='fs_16']:before{
  display: block;
  content: "16pt";
  font-size:16pt;
}
span[fs_type='fs_17']:before{
  display: block;
  content: "17pt";
  font-size:17pt;
}
span[fs_type='fs_18']:before{
  display: block;
  content: "18pt";
  font-size:18pt;
}

/** form **/
/* my form */
.my_form_book {
  max-width: 500px;
	margin: 0;
}

.my_form_book div.col{
	margin: 0;
}

.my_form_book label{
	font-weight: normal;
}
.my_form_book >table ul,
.my_form_book >ul{
  /*:not(.dropdown-menu){*/
	list-style:none;
	display:table;
	padding:0;
	width: 100%;
  margin-bottom: 0;
}
.my_form_book >ul{
  margin-bottom: 0.2em;
}
.my_form_book >table ul>li,
.my_form_book >ul> li{
	display: table-cell;
	vertical-align: middle;
/*	font-size:0.9em;*/
}
.my_form_book >table ul>li:first-child{
	min-width: 6em;
}
.my_form_book >ul>li:first-child{
	min-width: 6em;
	max-width: 12em;
	width: 20%;
}

div.btn-group button,
/*
div.input-group input,
div.input-group textarea,
*/
div.col.pull-right a.btn{
/*  font-size: 1.1em;*/
  padding: 10px;
}

div.input-group>span{
  font-size: 1.0em;
  height: 2em;
}

.coverimg {
/*	width: 160px;
	height: 200px;
  */
  width:6em;
	height: 8em;
	margin-right:1em;
	margin-bottom: 10px;
	border: 1px darkgray solid;
	overflow: hidden;
  background-size: 100% 100%;
  text-align: center;
	font-size: 1.5em;
}
#book_saveas .coverimg:hover:before {
  color: rgba(29,94,199,0.8);
  content: "クリック->ブックアイコン登録";
}
#book_saveas li[name="_ac_detail"] label[name="ac"]{
  display: inline-block;
  width:8em;
}

.add_library,
.do_share{
  color: #64B0EA;
  cursor: pointer;
}

.add_library:hover,
.do_share:hover {
  color: dodgerblue;
  font-weight: 700;
}
.add_library:before{
  content: "自分のライブラリに追加する";
}
.do_share:before{
  content: "シェア投稿する";
}
/**************/
/* 表示文字の装飾 */
div._tooltip{
  display: inline-block;
}
div._tooltip:after{
  padding: 0 0.1em;
  content: '?';
  font-size: 0.9em;
  font-weight: 700;
  vertical-align: super;
  color: #F8A;
/*  border-bottom: 1px dotted #F8A;*/
}
div._tooltip div {
  display: none;
}
div._tooltip:hover {
  position:relative;
  color: #333;
}
div._tooltip:hover > div {
  font-size: 0.9em;
/*  text-indent:1em;*/
  display: inline-block;
  position:absolute;
  left:1em;
  top:1.5em;
  width:24em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 1em;
  padding: 0.7em;
  z-index: 5000;
  background-color: mistyrose;
}
div._tooltip:hover > div:after {
  content:''; 
  display:block; 
  position:absolute;
  height:0; 
  width:0; 
  left: 16px;
  top: -10px;
  margin-top: -9px;
  border:13px transparent solid; 
  border-right-width:0; 
  border-left-color:mistyrose; 
  transform:rotate(270deg);
  -webkit-transform:rotate(270deg);
  -o-transform:rotate(270deg);
  z-index:100;
}
/* →に出す
div._tooltip:hover > div {
  font-size: 0.9em;
  display: inline-block;
  position:absolute;
  right:-22em;
  top:-2em;
  width:20em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 1em;
  padding: 0.7em;
  z-index: 5000;
  background-color: lavenderblush;
}
div._tooltip:hover > div:after {
  content:''; 
  display:block; 
  position:absolute;
  height:0; 
  width:0; 
  left: -13px;
  top: 16px;
  margin-top: -9px;
  border:13px transparent solid; 
  border-right-width:0; 
  border-left-color:lavenderblush; 
  transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  z-index:100;
}
*/