/* CSS Document */
@charset "utf-8";


/* Latest Update
   2012.10.31 write           */

/* author
   keiki ettyuu               */

/* ---------- MENU ---------- */
/*

    1. gloval setting
    2. wrapper setting
    3. header setting
    4. footer setting
    5. section setting
    6. rayermenu setting
    7. indexBox setting
    8. bookmarkBox setting
    9. 
    10. Image Preview Setting
    11. slider setting
    12. transition setting
    13. sizing setting
    14. toolbar setting
    15. glovalbtn setting
    999. clearfix

                              */
/* ---------- MENU ---------- */

/*----------------------------*/
/*  1. gloval setting         */
/*----------------------------*/
html{
    overflow: hidden;
}

html,body{
    width:100%;
    height:100%;
}

body{
    margin: 0;
    padding: 0;
}

/*----------------------------*/
/*  2. wrapper setting        */
/*----------------------------*/

#wrapper {
    max-width:none;
    min-width:1000px;
    
    width: 100%;
    height: 100%;
    position: absolute;
}

/*----------------------------*/
/*  3. header setting         */
/*----------------------------*/

header{
    max-width: none;
    min-width: 1000px;
    height: 60px;
    overflow: hidden;
    position: relative;
}

.wrapper_header{
    max-width:none;
    min-width:1000px;
    height:60px;
    /*position:absolute;*/
}

/*ヘッダー左カラム*/
.hdLcolumn{ 
    display:block;
    width:900px; /*726*/
    float:left;
    position:absolute;
}
.hdLcolumn a{
    width:46px;
    height:0;
    padding-top:46px;
    display:block;
    overflow:hidden;
    float:left;
    outline: none;
}

.hdLcolumn .gloupe{
    display: inline-block;
    margin: 0;
    padding: 0 17px 0 17px;
    float: left;
    margin: 7px 0 0;
}
.hdLcolumn .hgloupe{
    display: inline-block;
    margin: 0;
    padding: 0 17px 0 18px;
    float: left;
    margin: 7px 0 0;
}
.hdLcolumn .lgloupe{
    display: inline-block;
    margin: 0;
    padding: 0 18px 0 17px;
    float: left;
    margin: 7px 0 0;
}

/*アイコン基本設定*/
.hdLcolumn a.home{ width:48px; }
.hdLcolumn a.back{margin:0 0 0 11px; width:48px;}
.hdLcolumn a.bmList{ width:48px; }
.hdLcolumn a.bmAdd{margin:0 0 0 11px; width:67px;}
.hdLcolumn a.index{ width:47px; }
.hdLcolumn a.copy{ width:67px; }
.hdLcolumn a.memoDisplay{ width:68px;}
.hdLcolumn a.memoAdd{margin:0 0 0 11px; width:48px;}
.hdLcolumn a.marking{ width:97px; }
.hdLcolumn a.markingToolbar{margin:0 0 0 11px; }

.hdLcolumn a.home_device{ width:48px; }
.hdLcolumn a.back_device{margin:0 0 0 11px; width:48px;}
.hdLcolumn a.bmList_device{ width:48px; }
.hdLcolumn a.bmAdd_device{margin:0 0 0 11px; width:67px;}
.hdLcolumn a.index_device{ width:47px; }
.hdLcolumn a.copy_device{ width:67px; }
.hdLcolumn a.memoDisplay_device{ width:68px;}
.hdLcolumn a.memoAdd_device{margin:0 0 0 11px; width:48px;}
.hdLcolumn a.marking_device{ width:97px; }
.hdLcolumn a.markingToolbar_device{margin:0 0 0 11px; }

/*オンマウス時*/
.hdLcolumn a:hover.home{ width:48px; }
.hdLcolumn a:hover.back{ width:48px; }
.hdLcolumn a:hover.bmList{ width:48px; }
.hdLcolumn a:hover.bmAdd{ width:67px; }
.hdLcolumn a:hover.index{ width:47px; }
.hdLcolumn a:hover.copy{ width:67px; }
.hdLcolumn a:hover.memoDisplay{ width:68px; }
.hdLcolumn a:hover.memoAdd{ width:48px; }
.hdLcolumn a:hover.marking{ width:97px; }
.hdLcolumn a:hover.markingToolbar{}

/*リンクオフ時*/
#viewer .hdLcolumn a.home_off{ width:48px; }
#viewer .hdLcolumn a.back_off{margin:0 0 0 11px; width:48px;}
#viewer .hdLcolumn a.bmList_off{ width:48px; }
#viewer .hdLcolumn a.bmAdd_off{margin:0 0 0 11px; width:67px;}
#viewer .hdLcolumn a.index_off{ width:47px;}
#viewer .hdLcolumn a.copy_off{ width:67px;}
#viewer .hdLcolumn a.memoDisplay_off{ width:68px; }
#viewer .hdLcolumn a.memoAdd_off{margin:0 0 0 11px; width:48px; }
#viewer .hdLcolumn a.marking_off{ width:97px; }
#viewer .hdLcolumn a.markingToolbar_off{margin:0 0 0 11px; }

/*リンクオフ時*/
#viewer .hdLcolumn a.bmList_hover{ width:48px; }
#viewer .hdLcolumn a.bmAdd_hover{margin:0 0 0 11px; width:67px; }
#viewer .hdLcolumn a.index_hover{ width:47px; }
#viewer .hdLcolumn a.copy_hover{ width:67px; }
#viewer .hdLcolumn a.memoDisplay_hover{ width:68px; }
#viewer .hdLcolumn a.memoAdd_hover{margin:0 0 0 11px; width:48px; }
#viewer .hdLcolumn a.marking_hover{ width:97px; }
#viewer .hdLcolumn a.markingToolbar_hover{margin:0 0 0 11px; }

/*ヘッダー右カラム*/
.hdRcolumn{
    display:block;
    width:274px;
    height:60px;
    overflow:hidden;
    float:right;
    position:absolute;
    right:0;
}
.hdRcolumn input{    
    width: 215px;
    height: 28px;
    display: inline-block;
    float: left;
    margin: 15px 10px 0 0;
    padding-left: 29px;
}

.hdRcolumn .search{
    width:64px;
    height:19px;
    margin:18px 0 0;
    padding:7px 0 0;
    text-align:center;
    display:inline-block;
    float:left;
}
.hdRcolumn a:hover.search{

}

/*----------------------------*/
/*  4. footer setting         */
/*----------------------------*/

.footerTool{
    width:100%;
    height:60px;
    position:fixed;
    bottom: 0px;
    
}

.ftRcolumn_2 {
    width:75px;
    float:right;
    overflow:hidden;
}

.footer{
    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 0;
}

.ftinner{
    max-width:none;
    min-width:1000px;
    height:60px;
}

/*フッター左カラム*/
.ftLcolumn{
    width: 925px;
    float: left;
    overflow: hidden;/* padding-left:100px;*/
}

/*フッター右カラム*/
.ftRcolumn{
    width: 75px;
    float: right;
    overflow: hidden;
    height: 39px;
    margin-top: 14px;
}

/*----------------------------*/
/*  5. section setting        */
/*----------------------------*/

article{
    display:table;
    width:100%;
    min-height:100%;
    height:700px;
    max-width:none;
    min-width:800px;
    margin:0 auto 0;
}

section{

}


/*----------------------------*/
/*  5. markingBox setting     */
/*----------------------------*/

aside.markingBox {
    width:160px;
    display:block;
    position:fixed;
    left:250px;
    z-index: 1;
}
aside.markingBox .markingBoxHd {
    width: 155px;
    height: 25px;
    line-height: 25px;
    padding: 0 0 0 5px;
}
aside.markingBox .markingBoxHd .delete{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin:4px -11px 0 21px;
}
aside.markingBox .markingBoxHd .hidden_off{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin:4px 26px 0 -26px;
}
aside.markingBox .markingBoxHd .hidden_on{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin:4px 26px 0 -26px;
}
aside.markingBox .markingBoxBody_on{
    width:158px;
    height:339px;
    padding:15px 0 0;
}

aside.markingBox .markingBoxBody_off{
    width:158px;
    height:339px;
    padding:15px 0 0;
    display:none;
}
aside.markingBox ul{
    width:140px;
    margin:0 0 0 14px;
    padding:0 0 5px;
}
aside.markingBox ul li{
    width:60px;
    height:60px;
    display:block;
    float:left;
    margin:0 10px 10px 0;
}

/*キャンバスエリア*/
aside.markingBox .canvasArea {
    width:128px;
    height:128px;
    margin:0 auto 0;
    clear:both;
}

a.clearbtn{
    display:block;
    width:128px;
    text-align:center;
    margin:0px 0 10px 14px;
    padding:7px 0;
}

a.savebtn{
    display:block;
    width:128px;
    padding:7px 0;
    text-align:center;
    margin:0 0 10px 14px;
}

a.cancelbtn{
    display:block;
    width:128px;
    padding:7px 0;
    text-align:center;
    margin:0 0 0 14px;
}

a:hover.clearbtn{
    
}
a:hover.savebtn{  
}
a:hover.cancelbtn{
}

/*----------------------------*/
/*  6. rayermenu setting      */
/*----------------------------*/
.rayermenu1{
    display:none;
    width:236px;
    height:150px;
    /*position:relative;*/
    /*
    top:-63px;
    right:-138px;*/
    z-index: 101;
    margin-left: 10px;
    padding:15px 15px 13px;
}

.rayermenu1 ul{
    width:85px;
    height:120px;
    margin:0 21px 0 0;
    float:left;
}
.rayermenu1 ul li{
    display:block;
    width:85px;
    height:28px;
    margin:0 0 2px;
    padding:0;
    float:none;
}
.rayermenu1 ul li a {
    display:block;
    width:85px;
    height:28px;
    line-height:28px;
    vertical-align:middle;
    text-align:left;
    padding:0;
    margin:0 0 2px;
}
.rayermenu1 ul li a:hover {

}
.rayermenu1 ul li img {
    vertical-align:middle;
    line-height:28px;
}
.rayermenu1 ul li a span {
    display:block;
    width:35px;
    padding:0 0 0 10px;
    text-align:center;
    float:left;
}

.sizeXL {margin:0 0 0 5px;}
.sizeL {margin:0 0 0 7px;}
.sizeM {margin:0 0 0 9px;}
.sizeS {margin:0 0 0 10px;}

.rayermenu1 .popcolumnR {
    width:130px;
    float:left;
}
.rayermenu1 .popcolumnR .colorchip{
    width:40px;
    float:left;
    margin:0 10px 9px 0;
}
.rayermenu1 .popcolumnR .colorchip a{
    width:18px;
    height:18px;
    display:block;
}

.rayermenu1 .popcolumnR .colorchip a:hover{
    /*
    width:16px;
    height:16px;*/
}
.rayermenu1 .popcolumnR .colorchip .color01{

}
.rayermenu1 .popcolumnR .colorchip .color02{
 
}
.rayermenu1 .popcolumnR .colorchip .color03{
   
}
.rayermenu1 .popcolumnR .colorchip .color04{
  
}
.rayermenu1 .popcolumnR .colorchip .color05{
 
}
.rayermenu1 .popcolumnR .colorchip .color06{
  
}
.rayermenu1 .popcolumnR .colorchip .color07{
    
}
.rayermenu1 .popcolumnR .colorchip .color08{
   
}
.rayermenu1 div .canvasArea_s{
    width:78px;
    height:78px;
    display:block;
    float:left;
}
.rayermenu1 div .cancelbtn{
    clear:both;
    display:block;
    
    width:110px;
    
    padding:0;
    text-align:center;
    line-height:26px;
    margin:0;
    
    float: right;
}
.rayermenu1 div a:hover.cancelbtn{
   /* clear:both;*/
    display:block;
    width: 110px;
    padding:0;
    text-align:center;
    line-height:26px;
    margin:0;
}

.rayermenu1 div .okbtn{
    float :left;
    clear: none;
}
/*レイヤーメニュー2*/



/*レイヤーメニュー3*/

.rayermenu3{
    display: none;
    width:206px;
    height:150px;
    position:absolute;
    /*top:-63px;*/
    /*right:-138px;*/
    /*z-index:10;*/
    z-index:101;
    margin:0;
    padding:15px 15px 13px;
}

.rayermenu3 ul{
    width:85px;
    height:120px;
    margin:0 21px 0 0;
    float:left;
}
.rayermenu3 ul li{
    display:block;
    width:85px;
    height:28px;
    margin:0 0 2px;
    padding:0;
    float:none;
}
.rayermenu3 ul li a {
    display:block;
    width:85px;
    height:28px;
    line-height:28px;
    vertical-align:middle;
    text-align:left;
    padding:0;
    margin:0 0 2px;
}
.rayermenu3 ul li a:hover {

}
.rayermenu3 ul li img {
    vertical-align:middle;
    line-height:28px;
}
.rayermenu3 ul li a span {
    display:block;
    width:35px;
    padding:0 0 0 10px;
    text-align:center;
    float:left;
}
.sizeXL {margin:0 0 0 5px;}
.sizeL {margin:0 0 0 7px;}
.sizeM {margin:0 0 0 9px;}
.sizeS {margin:0 0 0 10px;}

.rayermenu3 .popcolumnR {
    width:100px;
    float:left
}

.rayermenu3 div .canvasArea_l{
    width:88px;
    height:88px;
    margin:0 0 9px;
    display:block;
    float:left;
}
.rayermenu3 div .cancelbtn{
    clear:both;
    display:block;
    width:98px;
    padding:0;
    text-align:center;
    line-height:26px;
    margin:0;
    
    float : right;
}
.rayermenu3 div a:hover.cancelbtn{
    /*clear:both;*/
    display:block;
    width:98px;
    padding:0;
    text-align:center;
    line-height:26px;
    margin:0;
}

.rayermenu3 div .okbtn{
    float :left;
    clear: none;
}
/*----------------------------*/
/*  7. indexBox setting       */
/*----------------------------*/
aside.indexBox {
    width:388px;
    height:388px;
    display:block;
    position:fixed;
    left:700px;
}
aside.indexBox .indexBoxHd {
    width:383px;
    height:25px;
    line-height:25px;
    padding:0 0 0 5px;
}
aside.indexBox .indexBoxHd .delete{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin: 4px 4px 0px 21px;
}
aside.indexBox .indexBoxHd .hidden_off{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin:4px 26px 0 -26px;
}
aside.indexBox .indexBoxHd .hidden_on{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin:4px 26px 0 -26px;
}
aside.indexBox .indexBoxBody_on{
    width:370px;
    height:362px;
    padding:5px 8px 0;
    overflow:auto;
    
}
aside.indexBox .indexBoxBody_off{
    width:408px;
    height:357px;
    padding:5px 0 0;
    display:none;
    overflow:auto;
}

aside.indexBox  #branch1 {
    padding-bottom:10px;
}
.indexBox ul{ margin:0;padding:0px 9px 0 9px;}
.indexBox ul li{line-height:1.5}
.indexBox ul li a{ 

}
.indexBox ul li a:hover{}

/*----------------------------*/
/*  8. bookmarkBox setting    */
/*----------------------------*/
aside.bookmarkBox {
    width:200px;
    height: 189px;
    display:block;
    position:fixed;
    top:280px;
    left:450px;
}
aside.bookmarkBox .bookmarkBoxHd {
    width:195px;
    height:25px;
    line-height:25px;
    padding:0 0 0 5px;
}
aside.bookmarkBox .bookmarkBoxHd .delete{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin: 4px 4px 0px 21px;
}
aside.bookmarkBox .bookmarkBoxHd .hidden_off{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin:4px 26px 0 -26px;
}
aside.bookmarkBox .bookmarkBoxHd .hidden_on{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin:4px 26px 0 -26px;
}
aside.bookmarkBox .bookmarkBoxBody_on{
    width:198px;
    height:163px;
    overflow:auto;
    vertical-align:middle;
}
aside.bookmarkBox .bookmarkBoxBody_off{
    width:198px;
    height:163px;
    display:none;
    overflow:auto;
}

aside.bookmarkBox li{
    padding:4px;
    overflow:hidden;
    line-height:15px;
    vertical-align:middle;
}
aside.bookmarkBox label{
    padding:4px;
    overflow:hidden;
    line-height:15px;
    vertical-align:middle;
}
aside.bookmarkBox div{
    padding:4px;
    overflow:hidden;
    line-height:15px;
    vertical-align:middle;
}
aside.bookmarkBox li .imgbox{

/*
    width:44px;
    height:43px;*/


    display:table-cell;
    float:left;
    margin:0 4px 0 0;

}

aside.bookmarkBox li .mdltext{
    display:table-cell;
    vertical-align:middle;
    layout-grid-line:120px;
    width:120px;
    height:43px;
}

aside.bookmarkBox .last{

}

/*----------------------------*/
/*  9.  Memo setting          */
/*----------------------------*/
aside.MemoIndexBox a:hover{
}

aside.MemoIndexBox {  
    width: 466px;
    display:block;
    position:absolute;
    /*left:700px;*/
}
aside.MemoIndexBox .indexBoxHd {
    width: 461px;
    height:25px;
    line-height:25px;
    padding:0 0 0 5px;
}
aside.MemoIndexBox .indexBoxHd .delete{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin:4px 2px 0 21px;
}
aside.MemoIndexBox .indexBoxHd .hidden_off{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin:4px 26px 0 -26px;
}
aside.MemoIndexBox .indexBoxHd .hidden_on{
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin:4px 26px 0 -26px;
}
aside.MemoIndexBox .indexBoxBody_on{
    height:357px;   
    width: 458px;
    padding: 3px;
    overflow:auto;
}
aside.MemoIndexBox .indexBoxBody_off{
    width:458px;
    height:357px;
    padding:5px 0 0;
    display:none;
    overflow:auto;
}
.indexBox ul li a:hover{}

.parentMemoDialogImportantCss{

}
.memoDialogImportantCss{
    height: 400px !important; 
    padding: 0!important; 
    overflow: hidden !important;
}

/*----------------------------*/
/*  10.Image preview setting  */
/*----------------------------*/
#slideWrapper
{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
.gallery-image
{
    width: 80%;
    margin: 0 auto;
    margin-top:1%;
    height: 65%;
    position: relative;
    overflow: hidden;
}
.slideshow-control
{
    width: 10%;
}
.gallery-thumb
{
    width: 100%;
    margin: 0 auto;
    margin-top: 2%;
    height: 20%;
}
#selector-img
{
    height: 100%;
    width: 80%;
    margin: 0 auto;
    position: relative;
    left: 20px;
}
#control-prev
{
    float: left;
}
#control-next
{    
    float: right;
    clear:none;
    position: relative;
    top: -100%;
}
.main-control
{
    width: 10%;
    height: 100%;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
#main-control-prev
{
    float: left;
    z-index: 1;
    position: relative;
}
#main-control-next
{
    float: right;
    clear:none;
    z-index: 1;
    position: relative;
    top: -100%;
}
.slideshow-control img
{
    height:50%;
    width: 50%;
    margin-top: 40%;
}
#control-prev img
{
    float:right;
}
#main-img
{
    height:100%;
    width: 100%;
    z-index: 0;
    position: relative;
}
.mainThumbnail
{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;        
    height: 100%;
    width: 100%;
    position: absolute;
    display: block;
}

.thumbnail
{
    width: 15%;
    height: 100%;
    padding: 2px;
    margin: 0% 1%;
    display: block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    float: left;
    clear: none;
    position: relative;
}
.first
{
    margin-left: 23px;
}

/*----------------------------*/
/*  11. slider setting        */
/*----------------------------*/

.slider {
    width: 497px;
    height: 41px;
    float: left;
    margin-top: 10px;
    /*margin-left: 10px;*/
}

.slider .sld01{
    display: table;
    width: 107px;
    height: 18px;
    padding: 1px 2px 1px 1px;
    float: left;
    margin: 12px 0 0 8px;
    text-align: center;
}

.slider .sld01 span{
    display: inline-block;
    margin: 2px 0 0 6px;
    vertical-align: baseline;
}

.slider .sld01 span input{
    border: none;
    width: 20px;
    line-height: 1;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
    /*text-align: right;*/
}

.slider .sld01 .move{
    width:21px;
    height:21px;
    display:block;
    float:right;
}
.slider .sld02{
    width: 28px;
    height: 28px;
    display: block;
    float: right;
    margin: 9px 20px 0 0;
}

/*----------------------------*/
/*  12. transition setting    */
/*----------------------------*/


.transition {
    width: 230px;
    height: 34px;
    padding: 4px;
    float: left;
    margin: 10px 0 0 2px;
}

/*ボタン設定*/
.transition a{
    height: 0;
    padding-top: 34px;
    display: block;
    overflow: hidden;
    float: left;
    outline: none;
    line-height: 1;
}

.transition .begin {
    width: 59px;
}
.transition a:hover.begin {
}
.transition .begin_off {
    width: 59px;
}
.transition .prev {
    width: 56px;

}
.transition a:hover.prev {

}
.transition .prev_off {
    width: 56px;
}
.transition .next {
    width: 56px;
}
.transition a:hover.next {
}
.transition .next_off {
    width: 56px;
}
.transition .last {
    width: 59px;
}
.transition a:hover.last {

}
.transition .last_off {
    width: 59px;

}

.transition .begin_device {width: 59px;}
.transition .prev_device {width: 56px;}
.transition .next_device { width: 56px;}
.transition .last_device {width: 59px;}

/*----------------------------*/
/*  13. sizing setting        */
/*----------------------------*/

.sizing {
    width:173px;
    height: 34px;
    padding: 4px;
    float: left;
    margin: 10px 0 0 2px;
}

/*ボタン設定*/
.sizing a{
    width: 173px;
    height: 0;
    padding-top: 34px;
    display: block;
    overflow: hidden;
    float: left;
    outline: none;
    line-height: 1;
}
.sizing .expansion {
    width: 56px;
}
.sizing a:hover.expansion {
}
.sizing .expansion_off {
    width: 56px;
}
.sizing .fit {
    width: 56px;
}
.sizing a:hover.fit {
}
.sizing .fit_off {
    width: 56px;
}
.sizing .reduction {
    width: 60px;
}
.sizing a:hover.reduction {
}
.sizing .reduction_off {
    width: 60px;
}

.sizing .expansion_device {width: 56px;}
.sizing .fit_device {width: 56px;}
.sizing .reduction_device {width: 60px;}
/*----------------------------*/
/*  14. toolbar setting       */
/*----------------------------*/

.toolbar {
    /* [disabled]width: 39px; */
    padding-top: 60px;
    display: block;
    overflow: hidden;
    /*margin-top: 15px;*/
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}

.toolbar_device {
    /* [disabled]width: 39px; */
   /*margin-top: 15px;*/
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    padding-top: 60px;
    display: block;
    overflow: hidden;
}

.toolbar_off {
    width: 60px;
    height: 0px;
    padding-top: 60px;
    display: block;
    overflow: hidden;
    font-size: 0;
    position: absolute;
    margin: -130px 0 0 10px;
}
a:hover.toolbar {
    
}

.toolbar_close {
    display: block;
    height: 39px;
    width: 39px;
    position: absolute;
    right: 25px;
    z-index: 1;
    /*bottom: 70px;*/
}

.toolbar_close_device {
    display: block;
    height: 39px;
    width: 39px;
    position: absolute;
    right: 25px;
    z-index: 1;
    /*bottom: 70px;*/
}
a.toolbar_close:hover {
background-position: 0 -39px;}
/*----------------------------*/
/*  15. glovalbtn setting     */
/*----------------------------*/
.gNextbtn {
    width: 54px;
    height: 0;
    padding-top: 72px;
    display: block;
    overflow: hidden;
    position: absolute;
    right: 20px;
    top: 50%;
    margin: -27px 0 0 0;
}

.gBackbtn {
    width: 50px;
    height: 0;
    padding-top: 72px;
    display: block;
    overflow: hidden;
    position: absolute;
    left: 20px;
    top: 50%;
    margin: -27px 0 0 0;
}
/*----------------------------*/
/*  16. Other Setting         */
/*----------------------------*/

/* slider bar [start]*/
.ui-slider-horizontal .ui-state-default {
  width: 300px;
  height: 140px;
  margin-left: -39px;
  top: -68px;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    top: 6px;
    right: 319px;
}
div .ui-slider-range, .ui-widget-header, .ui-slider-range-max {
    background: transparent;
}

.ui-slider .ui-slider-handle {width: 1.5em !important; height: 1.5em !important;}
.ui-slider-horizontal .ui-slider-handle { top: -.4em !important; margin-left: -.5em !important; }
.ui-widget-content { border: none !important; background: none !important;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 

}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { }
#slider_page{width: 350px;}
/* slider bar [end]*/

/* loading image [start]*/
#divImageLoading{
    left: 45%;
    top: 45%;
    position: fixed;    
    display: none;
    width:70px;
    height:70px; 
    z-index: 3;
}

#divImageLoading img{
    padding-left: 3px; 
    padding-top: 3px;
}
/* loading image [end]*/


/* navigate button [start]*/
#button_pre_canvas{
    position:absolute;
    z-index: 1;
}

#button_next_canvas{
    position:absolute;
    z-index: 1;
}

.nav {

}
/* navigate button [end]*/

/* dialog [start]*/
.web_dialog{
    padding-top:100px;
    display: none;
    position: fixed;
    width:60%;
    height:80%;
    left: 20%;
    top: 10%;
    padding: 0px;
    z-index: 102;
}

.web_dialog_overlay{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 101;
    display: none;
}

.align_right{   
    float:right;
    width:18px;
    height:18px;
}

.content_image_preview{
    padding-top: 10px;
}

.popuptext_web_dialog {    
    display: none;
    position: absolute;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-top: auto;    
    padding: 15px;
    z-index: 102;   
    z-index: 101;        
}       
   
.popuptext_arrow {
    display:none;
    z-index: 102;
    content: ' ';
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;                       
}
/* HOVER STYLES */
.pop-up-memo {
    display: none;
    position: absolute;
    width: 100px;
    padding: 10px;
    z-index: 101;
}
  
.pop-up-memo a:hover{
    
}

.check_marking{
    top:70px;
    left:20px;
    position:absolute;
}
/* dialog [end]*/

/* dialog confirm bgm [start]*/
#bgmConfirm 
{
    position: absolute;
    display: none;
}

.sectionDeleteConfirm .deletebtn a.ok_audio {
    position:relative;
    margin: 0 120px 0 0;
}
/* dialog confirm bgm [end]*/

/* Marking tool bar [start]*/
.pen_selected{
    width:60px;
    height:60px;
}

.pen_hover{
    width:60px;
    height:60px;
}

.pen_hover:hover{
    width:60px;
    height:60px;
}

.maker_selected{
    width:60px;
    height:60px;
}

.maker_hover{
    width:60px;
    height:60px;
}

.maker_hover:hover{
    width:60px;
    height:60px;
}

.eraser_selected{
    width:60px;
    height:60px;
}

.eraser_hover{
    width:60px;
    height:60px;
}

.eraser_hover:hover{
    width:60px;
    height:60px;
}

.pen_option_selected{
    width:60px;
    height:60px;
}

.pen_option_hover{
    width:60px;
    height:60px;
}

.pen_option_hover:hover{
    width:60px;
    height:60px;
}

.maker_option_selected{
    width:60px;
    height:60px;
}

.maker_option_hover{
    width:60px;
    height:60px;
}

.maker_option_hover:hover{
    width:60px;
    height:60px;
}

.eraser_option_selected{
    width:60px;
    height:60px;
}

.eraser_option_hover{
    width:60px;
    height:60px;
}

.eraser_option_hover:hover{
    width:60px;
    height:60px;
}

.toolbar_icon_on{

}

/* Marking tool bar [end]*/

/* Box Copy Text dialog [start]*/
#boxCopyText{
    display: none;
    width:400px;
    height:375px;
}

#boxCopyText h1{
    width:395px;
}

#boxCopyText ul{
    width:100%;
    height:93.4%;
    overflow: auto;
}
/* Box Copy Text dialog [end]*/

/* Box Copy Text dialog [start]*/
#boxAddMemo{
    display: none;
    height:180px;
}

#boxAddMemo ul{
    height:156px;
}

#boxAddMemo ul a{
    margin-left:35px;
}
/* Box Copy Text dialog [end]*/

/* Box Memo dialog [start]*/
#divDialogMemo{
    width:466px;
    height:389px;
    display:none;
    position: fixed;
}

/* Box Memo  dialog [end]*/

/* Box music dialog [start]*/
#dialog-contenttype-music{
    width:466px;
    height:389px;
    display:none; 
    position: absolute;
}
/* Box music dialog [end]*/

/* Box marking dialog [start]*/
#dlgMarking{
    display: none;
}

#dlgMarking h1 a.hidden_off{
    margin:4px 4px 0 -26px;
}

#dlgMarking h1 a.hidden_on{
    display: none;
    margin:4px 4px 0 -26px;
}
/* Box marking dialog [end]*/

/* Box eraser dialog [start]*/
#dlgGomu div:first-child{
    float: left; 
    display: block;
}

#dlgGomu ul{
    list-style: none;
}

#dlgGomu input[type='radio']{
    display: none;
}
/* Box eraser dialog [end]*/

/* Box maker dialog [start]*/

#dlgMaker input[type='radio']{
    display: none;
}
/* Box maker dialog [end]*/

/* Box pen dialog [start]*/

#dlgPen input[type='radio']{
    display: none;
}
/* Box pen dialog [end]*/

/* footer dialog [start]*/

#footer_toolbar_2 a{

}
/* common dialog [start]*/

#dialog h1{
    height:25px;
}

#dialog h1 img#btnClose{

}

/* common dialog [end]*/

/* Alert Content Dialog [Start] */
.sectionLimitAccess {
    width:420px !important;
    height: auto !important;
    display: none ;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;   
    z-index: 101 !important;
}

.sectionLimitAccess h1{
    margin:0 0 38px 0 !important;
    padding:0 !important;
    height:64px !important;
    line-height:62px !important;
    text-align:center !important;
}

.sectionLimitAccess p{
    text-align:center !important;
}

.sectionLimitAccess p.message{

}

.sectionLimitAccess p.message .error
{
    display:block !important;
    padding:15px 0 0 0 !important;
}
.sectionLimitAccess p.message .text
{
    padding:0 10px 0 0 !important;
    display:block !important;
    margin-bottom:15px !important;
}

.sectionLimitAccess p.message input
{
    width:200px !important;
    height:20px !important;
    padding:2px !important;
}
.sectionLimitAccess .deletebtn {
    width:325px !important;
    height:25px !important;
    line-height:25px !important;
    margin:30px auto !important;
    text-align:center !important;
}
.sectionLimitAccess .deletebtn a 
{
    margin-left:10px !important;
    width:85px !important;
    height:21px !important;    
    line-height:21px !important;
    text-align:center !important;
  
    display: inline-block !important;   
    padding: 2px 0 !important;
}
.sectionLimitAccess .deletebtn a:hover {

}
.sectionLimitAccess .deletebtn a:active {
    position:relative !important;
    top:1px !important;
}
.sectionLimitAccess .deletebtn a:not(:target) {

}
/* Alert Content Dialog [End] */
/*----------------------------*/
/*  999. clearfix             */
/*----------------------------*/

/*clearfix*/
.fix {
}
.fix:after {
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
}
.fix {
    zoom:1;
}
/*------------*/

.markingToolbar_off_hover
{

}
ul#divSearchResult li:hover{}
ul#divListBookmark li:hover{}

#control_screen_2{
    position: absolute; 
    z-index: 2; 
    bottom: 20px; 
    right:20px; 
    display:none
}

#powerTip{
    z-index: 999 !important;
}

span.error{
    
}

span.no-item{
    
}

.dialog-content-music{
    
}

.imagePreview-one{
    
}

.picker-choose-on{
    
}

.picker-choose-off{
    
}

