*/
/* default */
.vpg-spp, .vpg-spp > div{ box-sizing:border-box; position:relative; display:block; margin:0; padding:0; background:transparent; pointer-events:none; }
.vpg-spp{ overflow:hidden; width:100%; height:100%; opacity:1; transition:width 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990), height 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990), opacity 0.25s ease-in-out; }
.vpg-spp.x-closed{ width:1%; opacity:0; }
.vpg-spp .vpicn{ transform:scale(0.6); }
.dev-touch .vpg-spp .vpicn,
.xp-f .vpg-spp .vpicn{ transform:scale(0.8); }
/* control bar */
.vpg-spp > .x-ctrls{ overflow:hidden; position:absolute; top:0; left:auto; right:5px; bottom:0; width:30px; height:auto; background-color:#222; box-shadow:0 0 5px rgba(0,0,0,.5); pointer-events:auto; cursor:pointer; }
.vpg-spp > .x-ctrls > .vpicn{ pointer-events:auto; cursor:pointer; }
.vpg-spp > .x-ctrls.h{ background-color:#505050; }
.xp-f .vpg-spp > .x-ctrls{ right:0px; box-shadow:none; }
.xp-f .vpg-spp > .x-ctrls,
.dev-touch .vpg-spp > .x-ctrls{ width:40px; }
/* contents */
.vpg-spp > .x-cont{ overflow:hidden; width:auto; height:100%; margin:0 35px 0 0; background-color:#3f3f3f; pointer-events:auto; transition:opacity 0.25s ease-in-out; }
.vpg-spp.x-closed > .x-cont{ opacity:0; }
.vpg-spp > .x-cont > .x-items{ width:auto; height:100%; overflow-x:hidden; overflow-y:auto; pointer-events:auto; }
.dev-touch .vpg-spp > .x-cont{ margin:0 45px 0 0; }
.xp-f .vpg-spp > .x-cont{ margin:0 40px 0 0; }
/* sound items */
.vpg-spp .x-items .x-itm{ overflow:hidden; position:relative; height:30px; margin:0px 2px 2px 2px; padding:0; background-color:transparent; }
.vpg-spp .x-items .x-itm > .vpicn{ position:absolute; top:0; left:0; transform-origin:0px 0px; }
.vpg-spp .x-items .x-itm > p{ overflow:hidden; margin:0 0 0 30px; padding:0 10px 0 0; color:#222; font-size:12px; line-height:30px; text-overflow:ellipsis; white-space:nowrap; }
.vpg-spp .x-items .x-itm:first-child{ margin-top:2px; }
.vpg-spp .x-items .x-itm.x-title{ height:35px; }
.vpg-spp .x-items .x-itm.x-title > .x-muteicn.vpicn{ position:absolute; top:0; right:0; left:auto; transform-origin:100% 0px; transform:scale(0.7); cursor:pointer; }
.vpg-spp .x-items .x-itm.x-title > .x-stopicn.vpicn{ position:absolute; top:0; right:35px; left:auto; transform-origin:100% 0px; transform:scale(0.7); cursor:pointer; }
.vpg-spp .x-items .x-itm.x-title > p{ overflow:hidden; margin:0 35px 0 0; padding:0 0 0 10px; color:#fff; font-size:12px; line-height:35px; text-overflow:ellipsis; white-space:nowrap; }
.vpg-spp .x-items .x-itm.x-lib{ color:#fff; font-size:12px; line-height:30px; padding:0 10px; text-overflow:ellipsis; white-space:nowrap; }
.vpg-spp .x-items .x-itm.x-snd{ cursor:pointer; background-color:#f0f0f0; border-radius:3px; }
.vpg-spp .x-items .x-itm.x-snd.h{ background-color:#ccc; }
.vpg-spp .x-items .x-itm.x-is-play,
.vpg-spp .x-items .x-itm.x-is-pause{ background-color:#4a4a4a; animation:k-vpg-spp-itm 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate; }
.vpg-spp .x-items .x-itm.x-is-play > p,
.vpg-spp .x-items .x-itm.x-is-pause > p{ color:#fff; }
.xp-f .vpg-spp .x-items .x-itm,
.dev-touch .vpg-spp .x-items .x-itm{ height:40px; }
.xp-f .vpg-spp .x-items .x-itm > p,
.dev-touch .vpg-spp .x-items .x-itm > p{ height:40px; line-height:40px; margin:0 0 0 40px; }
.xp-f .vpg-spp .x-items .x-itm.x-title,
.dev-touch .vpg-spp .x-items .x-itm.x-title{ height:40px; }
.xp-f .vpg-spp .x-items .x-itm.x-title > p,
.dev-touch .vpg-spp .x-items .x-itm.x-title > p{ height:40px; line-height:40px; margin:0 40px 0 0; font-size:15px; }
.xp-f .vpg-spp .x-items .x-itm.x-title > .x-muteicn.vpicn,
.dev-touch .vpg-spp .x-items .x-itm.x-title > .x-muteicn.vpicn,
.xp-f .vpg-spp .x-items .x-itm.x-title > .x-stopicn.vpicn,
.dev-touch .vpg-spp .x-items .x-itm.x-title > .x-stopicn.vpicn{ transform:scale(0.8); }
@keyframes k-vpg-spp-itm { to { background-color:#777; } }
/* ------------------------------------------------------------------
(plugin) Media Slider
Parent layer : containers.overlay
*/
/*
*/
.vpg-msldr-mask{ pointer-events:auto; cursor:pointer; z-index:50; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,.55); }
.vpg-msldr{ pointer-events:auto; overflow:visible; z-index:51; position:absolute; top:50%; left:50%; right:auto; bottom:auto; width:50px; height:50px; background-color:#222; box-sizing:border-box; border-width:1px 0; border-style:solid none; border-color:#000; }
.vpg-msldr-title{ width:100%; height:25px; z-index:52; overflow:hidden; font-size:10pt; line-height:25px; color:#fff; text-shadow:0 0 1px #000; text-overflow:ellipsis; white-space:nowrap; }
.vpg-msldr-slider{ position:absolute; z-index:52; top:50%; left:0; right:auto; bottom:auto; width:15%; max-width:100px; height:150px; margin:-75px 0 0 0; pointer-events:auto; cursor:pointer; opacity:0.9; transition:opacity 0.5s ease-in-out; }
.vpg-msldr-slider.x-left{ left:0; right:auto; background:transparent url(../imgs/vp.mdslider.l.png) no-repeat left center; background-size:contain; }
.vpg-msldr-slider.x-right{ left:auto; right:0; background:transparent url(../imgs/vp.mdslider.r.png) no-repeat right center; background-size:contain; }
.vpg-msldr-slider.x-disabled{ opacity:0.25!important; cursor:default!important; }
.vpg-msldr .vpg-msldr-backtxt{
position:absolute; top:auto; left:50%; right:auto; bottom:-40px; overflow:hidden; opacity:1; text-align:center; pointer-events:none; box-shadow:0 0 10px rgba(255,255,255,.8);
width:140px; height:23px; line-height:23px; margin:0 0 0 -75px; padding:0 0 0 28px; background:#000; color:#fff; border-radius:4px;
font-size:12px; text-shadow:0 1px 1px #000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vpg-msldr .vpg-msldr-backtxt .vpicn{ transform:scale(0.46); position:absolute; top:0; left:0; }
.vpr-mob .vpg-msldr-slider{ height:80px; margin:-40px 0 0 0; }
.vpg-msldr > .x-base{ overflow:visible; position:relative; margin:0; padding:0; transition:margin-left 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000); background-color:#222; }
.vpg-msldr > .x-base > .x-media{
float:left; overflow:visible; position:relative; margin:0; padding:0;
box-sizing:border-box;
background-color:transparent; background-image:none; background-color:transparent; background-repeat:no-repeat; background-position:center center; background-size:cover;
transition:opacity 0.75s ease-in-out; opacity:0.25;
}
.vpg-msldr > .x-base > .x-media.x-selected{ opacity:1; }
.vpg-msldr > .x-base > .x-media > .x-title{ position:absolute; top:0px; left:50%; right:auto; bottom:auto; width:auto; height:auto; max-width:85%; height:auto; overflow:hidden; margin:0; padding:0; opacity:0; opacity:0; transition:opacity 0.5s ease-in-out; }
.vpg-msldr > .x-base > .x-media > .x-title p{ margin:0 0 10px 0; padding:0 10px; height:23px; line-height:23px; color:#222; font-size:12px; font-weight:700; text-shadow:0 1px 1px #fff; background:rgba(255,255,255,.8); box-shadow:0 1px 5px rgba(0,0,0,.8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:2px; }
.vpg-msldr > .x-base > .x-media.x-selected > .x-title{ opacity:1; }
.vpg-msldr > .x-base > .x-media > .x-desc{ position:absolute; top:auto; left:0; right:0; bottom:0; width:100%; height:auto; max-height:35%; overflow-x:hidden; overflow-y:auto; margin:0; padding:0; background:rgba(0,0,0,.65); opacity:0; transition:opacity 0.5s ease-in-out; }
.vpg-msldr > .x-base > .x-media > .x-desc p{ margin:0; padding:12px; color:#f9f9f9; line-height:1.4em; font-size:9pt; text-shadow:0 0 1px #000; }
.vpg-msldr > .x-base > .x-media.x-selected > .x-desc{ opacity:1; }
.vpr-mob .vpg-msldr .x-title p{ font-size:8pt!important; }
.vpr-mob .vpg-msldr .x-desc p{ font-size:8pt!important; }
/* ------------------------------------------------------------------
(plugin) Media Box
Parent layer : containers.overlay
*/
.vpg-mbox-mask{ position:absolute; z-index:1; top:0; left:0; right:0; bottom:0; width:100%; height:100%; margin:0; padding:0; background:rgba(0,0,0,.7); opacity:1; pointer-events:auto; cursor:pointer; transition:opacity 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vpg-mbox-mask.x-disable{ opacity:0; pointer-events:none; cursor:default; }
.vpg-mbox-prog{
display:block; opacity:1; z-index:2; pointer-events:none; position:absolute; top:50%; left:50%; right:auto; bottom:auto; width:40px; height:40px; margin:-20px 0 0 -20px;
background:transparent url(../imgs/vp.prog02.png) no-repeat 0px 0px; background-size:400px 40px;
animation: k-vpg-mbox-prog 0.5s steps(9) infinite; transform-origin:50% 50% 0; transform:scale(1);
transition:opacity 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpg-mbox-prog.x-disable{ display:none; opacity:0; }
@keyframes k-vpg-mbox-prog { to { background-position:-360px 0px; } }
.vpg-mbox{ position:absolute; z-index:3; top:0; left:0; right:0; bottom:0; width:100%; height:100%; margin:0; padding:0; background:transparent; pointer-events:none; }
.vpg-mbox > .x-bs{ position:relative; overflow:hidden; width:100%; height:100%; margin:0; padding:0; }
.vpg-mbox .x-mitem{
position:relative; z-index:1; width:100%; height:100%; box-sizing:content-box; background-position:center center; background-repeat:no-repeat; background-color:transparent;
opacity:0; transition:opacity 0.33s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpg-mbox .x-mitem.x-show{ opacity:1; }
.vpg-mbox .x-mitem .x-closelabel{ position:absolute; z-index:2; overflow:hidden; top:auto; left:10px; right:auto; bottom:10px; width:35px; height:35px; background-color:transparent; pointer-events:none; }
.vpg-mbox .x-mitem .x-closelabel .vpicn{ pointer-events:none; transform:scale(0.7); transform-origin:0px 0px; }
.vpg-mbox .x-mitem .x-closer{ position:absolute; z-index:2; overflow:hidden; top:-35px; left:0; right:auto; bottom:auto; width:35px; height:35px; background-color:#fdfdfd; pointer-events:none; }
.vpg-mbox .x-mitem .x-closer .vpicn{ pointer-events:none; transform:scale(0.7); transform-origin:0px 0px; }
/* (mode = full) */
.vpg-mbox .x-mitem.layout-full{ pointer-events:none; overflow:hidden; }
.vpg-mbox .x-mitem.layout-full video{
position:absolute; z-index:1; overflow:hidden; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto;
transform:translate(-50%, -50%); pointer-events:none; background-color:transparent; opacity:0; transition:opacity 1.2s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpg-mbox .x-mitem.layout-full video.x-show{ opacity:1; }
.vpg-mbox .x-mitem.layout-full .x-blackfx{ position:absolute; z-index:2; overflow:hidden; top:0;left:0;right:0;bottom:0; width:100%;height:100%; background:transparent url(../imgs/movie_over_blackline1pix.png) repeat left top; pointer-events:none; }
.vpg-mbox .x-mitem.layout-full .x-whitefx{ position:absolute; z-index:2; overflow:hidden; top:0;left:0;right:0;bottom:0; width:100%;height:100%; background:transparent url(../imgs/movie_over_whiteline1pix.png) repeat left top; pointer-events:none; }
/* (mode = box) */
.vpg-mbox .x-mitem.layout-box{ position:absolute; overflow:hidden; top:50%; left:50%; pointer-events:none; background-color:#222; }
.vpg-mbox .x-mitem.layout-box > .x-bs{ position:relative; overflow:hidden; width:100%; height:100%; margin:0; padding:0; pointer-events:none; }
.vpg-mbox .x-mitem.layout-box > .x-bs .x-m-hdr{ position:absolute; z-index:2; overflow:hidden; top:0; left:0; right:0; bottom:auto; width:100%; height:35px; margin:0; padding:0; pointer-events:none; }
.vpg-mbox .x-mitem.layout-box > .x-bs .x-m-hdr .vpicn{ position:absolute; top:0; left:0; transform:scale(0.7); transform-origin:0px 0px; pointer-events:none; }
.vpg-mbox .x-mitem.layout-box > .x-bs .x-m-hdr p{ margin:0; padding:0 10px 0 35px; font-size:13px; line-height:35px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vpg-mbox .x-mitem.layout-box > .x-bs .x-m-vtr{ position:absolute; z-index:1; overflow:hidden; top:35px; left:0; right:0; bottom:0; width:100%; margin:0; padding:0; pointer-events:auto; background-position:center center; background-repeat:no-repeat; }
.vpg-mbox .x-mitem.layout-box > .x-bs .x-m-vtr video{ position:relative; width:100%; height:100%; margin:0; pointer-events:auto; background-color:transparent; opacity:1; }
.vpg-mbox .x-mitem.layout-box > .x-bs .x-m-pic{ position:absolute; z-index:1; overflow:hidden; top:35px; left:0; right:0; bottom:0; width:100%; margin:0; padding:0; pointer-events:auto; background-position:center center; background-repeat:no-repeat; }
.vpg-mbox .x-mitem.layout-box > .x-bs .x-m-pic p{ position:absolute; display:block; top:auto; left:0; right:0; bottom:0; background:rgba(0,0,0,.7); color:#fdfdfd; padding:15px; margin:0; font-size:12px; line-height:1.35em; pointer-events:none; }
.vpg-mbox .x-mitem.layout-box > .x-bs .x-m-pic p.x-hide{ display:none; }
.vpg-mbox .x-mitem.layout-box > .x-bs .x-m-pic.x-has-desc{ cursor:pointer; }
/* (mode = window) */
.vpg-mbox .x-mitem.layout-window{ position:absolute; overflow:hidden; background-color:transparent; }
.xp-f .vpg-mbox .x-mitem .x-closelabel{ bottom:60px; }
/* ------------------------------------------------------------------
(plugin) Media Viewer
Parent layer : containers.overlay
*/
/*
*/
.vpg-mview-mask{ pointer-events:auto; cursor:pointer; z-index:50; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,.8); }
.vp-mview{ pointer-events:none; overflow:hidden; z-index:51; position:absolute; top:50%; left:50%; right:auto; bottom:auto; width:50px; height:50px; background-color:transparent; box-sizing:border-box; }
.vp-mview > .x-title{ width:100%; height:25px; overflow:hidden; font-size:10pt; line-height:25px; color:#fff; text-shadow:0 0 1px #000; text-overflow:ellipsis; white-space:nowrap; }
.vp-mview > .x-base{
pointer-events:auto; cursor:pointer; overflow:hidden; z-index:52; position:absolute; top:0; left:0; right:0; bottom:0; margin:0; padding:0;
background-color:transparent; box-sizing:border-box; border:1px solid #fff;
transition-property:box-shadow; transition-delay:0s; transition-duration:0.3s; transition-timing-function:linear;
}
.vp-mview.x-showed > .x-base{ box-shadow:0 1px 12px #000; }
/* Media DOM-Base */
.vp-mview > .x-base .x-media{ pointer-events:auto; overflow:hidden; position:relative; width:100%; height:100%; margin:0; padding:0; }
/* (media DOM) Picture */
.vp-mview > .x-base .x-picture{
cursor:pointer;
background-color:#000; background-image:none; background-color:transparent; background-repeat:no-repeat; background-position:center center; background-size:cover;
opacity:0; transform:scale(1.1);
transition-property:opacity, transform; transition-delay:0s; transition-duration:0.2s; transition-timing-function:linear;
}
.vp-mview.x-showed > .x-base .x-picture{ opacity:1; transform:scale(1); }
/* Description */
.vp-mview > .x-base .x-picture .x-desc{
position:absolute; display:none; overflow-x:hidden; overflow-y:auto; width:100%; height:auto; min-height:20px; max-height:25%; top:auto; left:0; right:0; bottom:0; background:rgba(0,0,0,.8);
}
.vp-mview.x-showed > .x-base .x-picture .x-desc{ display:block; }
.vp-mview > .x-base .x-picture .x-desc p{ margin:0; padding:10px; line-height:1.5em; font-size:9pt; color:#fff; }
/* (media DOM ) Video */
.vp-mview > .x-base .x-video{ opacity:0; background-color:#000; transition-property:box-shadow; transition-delay:0s; transition-duration:0.3s; transition-timing-function:linear; }
.vp-mview.x-showed > .x-base .x-video{ opacity:1; }
.vp-mview > .x-base .x-video video{ width:100%; height:100%; position:relative; pointer-events:auto; margin:0; padding:0; }
/* Description */
.vp-mview > .x-base .x-video .x-desc{
position:absolute; display:none; overflow-x:hidden; overflow-y:auto; width:100%; height:auto; min-height:20px; max-height:25%; top:auto; left:0; right:0; bottom:0; background:rgba(0,0,0,.8);
}
.vp-mview.x-showed > .x-base .x-video .x-desc{ display:block; }
.vp-mview > .x-base .x-video .x-desc p{ margin:0; padding:10px; line-height:1.5em; font-size:9pt; color:#fff; }
/* ------------------------------------------------------------------
(plugin) Navi Header
Parent layer : containers.basiccanvas
*/
.vp-nvh{
float:left; display:block; overflow:hidden; position:relative; pointer-events:auto; background:rgba(0,0,0,.35); width:auto; max-width:100%; height:40px; margin:0; padding:0; opacity:1; white-space:nowrap;
transition:margin-top 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990), opacity 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vp-nvh.x-close{ opacity:0; margin-top:-40px; }
.vp-nvh .vpicn{ transform:scale(0.8); }
.vp-nvh .vpicn.h{ background-color:#142f4d; }
.vpr-mob .vp-nvh{ width:100%; height:50px; }
.vpr-mob .vp-nvh.x-close{ margin-top:-50px; }
.vpr-mob .vp-nvh .vpicn{ transform:scale(1); }
/* (open) buttons */
.vp-nvh .x-ham{ position:absolute; top:0; left:0; width:50px; height:50px; pointer-events:auto; cursor:pointer; transform-origin:0px 0px; }
/* (close) opener */
.vp-nvh-opener{
position:absolute; top:0; left:0; width:50px; height:50px; margin:0; padding:0; background-color:rgba(0,0,0,.5); opacity:1;
pointer-events:auto; cursor:pointer; transform-origin:0px 0px; transform:scale(0.7);
transition:margin-top 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990), opacity 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990), background-color 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vp-nvh-opener.h{ background-color:#142f4d; }
.vp-nvh-opener.x-hideopener{ opacity:0; margin-top:-35px; }
.dev-touch .vp-nvh-opener{ transform:scale(0.8); }
.dev-touch .vp-nvh-opener.x-hideopener{ margin-top:-40px; }
.vpr-mob .vp-nvh-opener{ transform:scale(1); }
.vpr-mob .vp-nvh-opener.x-hideopener{ margin-top:-50px; }
/* (icons) */
.vp-nvh .x-icons{ position:relative; overflow:hidden; float:left; width:auto; height:40px; margin:0 0 0 40px; }
.vp-nvh .x-icons .vpicn{ float:left; margin:0; padding:0; margin-right:-10px; transition:background-color 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vp-nvh .x-icons .vpicn.h{ background-color:#142f4d; }
.vp-nvh .x-icons .vpicn.x-disabled{ opacity:0.35; pointer-events:none; }
.vpr-mob .vp-nvh .x-icons{ height:50px; margin:0 0 0 50px; }
.vpr-mob .vp-nvh .x-icons .vpicn{ margin-right:0; }
.vpr-mob .vp-nvh .x-icons .vpicn.x-hide-mobile{ display:none; }
/* (menu) */
.vp-nvmnu{
pointer-events:auto;
float:left; position:relative; overflow-x:hidden; overflow-y:auto; width:auto; min-width:10px; height:auto; min-height:10px; max-height:100%; background:#fff;
box-shadow:5px 5px 10px rgba(0,0,0,.35); opacity:1; transition:margin-right 0.5s ease-in-out, opacity 0.2s ease-in-out;
}
.vp-nvmnu.x-close{ opacity:0; margin-right:100%; }
.vp-nvmnu .vp-menus{ position:relative; overflow:hidden; width:auto; margin:10px 10px; }
.vp-nvmnu .vp-menus > .x-itm{ position:relative; overflow:hidden; pointer-events:auto; cursor:pointer; width:auto; max-width:100%; height:35px; }
.vp-nvmnu .vp-menus > .x-itm .vpicn{ position:absolute; top:0; left:0; transform-origin:0px 0px; transform:scale(0.7); }
.vp-nvmnu .vp-menus > .x-itm p{ margin:0; padding:0 10px 0 35px; height:35px; line-height:35px; color:#555; font-size:12px; }
.vp-nvmnu .vp-menus > .x-itm.h:not(.x-disabled){ background-color:#142f4d; }
.vp-nvmnu .vp-menus > .x-itm.h:not(.x-disabled) p{ color:#fff; }
.vp-nvmnu .vp-menus > .x-itm.h:not(.x-disabled) .vpicn{ background-image:url(../imgs/vp.iconset.png?r=161020); }
.vp-nvmnu .vp-menus > .x-itm.x-disabled{ opacity:0.5; pointer-events:auto; cursor:default; }
.vp-nvmnu .vp-menus > .x-separator{ position:relative; width:100%; height:1px; background:#ddd; }
.vpr-mob .vp-nvmnu{ float:none; width:100%; min-width:none; height:100%; min-height:none; box-shadow:none; }
.dev-touch .vp-nvmnu .vp-menus > .x-itm{ height:40px; }
.dev-touch .vp-nvmnu .vp-menus > .x-itm .vpicn{ transform:scale(0.8); }
.dev-touch .vp-nvmnu .vp-menus > .x-itm p{ padding:0 10px 0 40px; height:40px; line-height:40px; }
.vpr-mob .vp-nvmnu .vp-menus > .x-itm{ height:50px; }
.vpr-mob .vp-nvmnu .vp-menus > .x-itm .vpicn{ transform:scale(1); }
.vpr-mob .vp-nvmnu .vp-menus > .x-itm p{ padding:0 10px 0 50px; height:50px; line-height:50px; }
/* (title) */
.vpr-nvt{
float:right; display:block; overflow:hidden; position:relative; pointer-events:auto; white-space:nowrap;
background:rgba(0,0,0,.5); width:auto; max-width:400px; min-width:35px; height:30px; margin:0; padding:0; border-radius:4px 0 0 4px;
transition:all 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpr-nvt p{
overflow:hidden; min-width:25px; height:30px; line-height:30px; color:#fff; font-size:12px; text-shadow:0 1px 0px #000;
margin:0; padding:0 10px; text-overflow:ellipsis; white-space:nowrap; transition:margin 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpr-nvt p.x-multiline{ line-height:12px; font-size:10px; padding:3px 10px 0 10px; }
.xp-f .vpr-nvt{ width:40%; max-width:40%; border-radius:0px 0px; float:left; background-color:transparent; }
.xp-f .vpr-nvt p{ font-size:10px; }
/* full */
.vpg-fpv-container{
z-index:9999; pointer-events:auto; position:fixed; overflow:hidden; top:0; left:0; right:0; bottom:0;
width:100%; height:100%; background:rgba(0,0,0,.6); margin:0; padding:0;
}
.vpg-fpv-container .vpg-fpv-base{ overflow:hidden; position:relative; width:100%; height:100%; margin:0; padding:0; }
.vpg-fpv-container .vpg-fpv-base .vpg-fpv-box{ overflow:hidden; position:absolute; background:#000; top:50%; left:0; right:0; width:100%; height:auto; min-height:80px; margin:-40px 0 0 0; text-align:center; }
.vpg-fpv-container .x-vpg-t{ display:block; float:center; height:auto; line-height:1.2em; margin:0; padding:10px 10px 0 10px; text-align:center; color:#fdfdfd; }
.vpg-fpv-container .x-vpg-btn{
display:inline-block; overflow:hidden; position:relative; width:auto; max-width:45%; height:auto; margin:12px; padding:10px; text-align:center;
border-radius:4px;
font-size:9pt; line-height:1.2em; color:#fff; pointer-events:auto; cursor:pointer;
}
.vpg-fpv-container .x-vpg-yes{ background:#da0000; color:#fff; }
.vpg-fpv-container .x-vpg-yes.h{ background:#ff3030; }
.vpg-fpv-container .x-vpg-no{ background:#f0f0f0; color:#222; }
.vpg-fpv-container .x-vpg-no.h{ background:#fff; }
/* ------------------------------------------------------------------
(plugin) Locator
*/
.vpg-lor-base{ position:relative; overflow:hidden; width:100%; height:100%; margin:0; padding:0; }
.vpg-lor .vpicn{ transform:scale(0.7); }
.vpg-lor div{ position:relative; overflow:hidden; margin:0; padding:0; }
.vpg-lor{ position:absolute; overflow:visible; top:0; left:0; width:100%; height:100%; pointer-events:auto; transition:all 0.6s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
/* opener */
.vpg-lor .x-opener{ position:absolute; top:0; left:-35px; width:35px; height:35px; margin:0; background-color:#222; box-shadow:0 0 5px rgba(0,0,0,.25); pointer-events:auto; cursor:pointer; transition:all 0.6s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vpg-lor.x-closed .x-opener{ top:50%; height:60px; margin:-30px 0 0 0; }
.vpg-lor .x-opener.h{ background-color:#606060; }
.vpg-lor .x-opener .vpicn{ position:absolute; top:50%; left:0; margin-top:-25px; transform-origin:0 50%; }
.vpg-lor .x-opener.x-disabled{ opacity:0; pointer-events:none; }
/* spot list container */
.vpg-lor .x-listbox{ width:100%; height:100%; overflow-x:hidden; overflow-y:auto; padding:0; box-sizing:border-box; }
.vpg-lor .x-listbox > .x-list{ height:auto; margin:0 5px 0 5px; transition:all 0.2s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
/* (Dynamic spot) */
.vpg-lor .x-listbox > .x-list > .x-itm{ height:auto; margin:0; border-bottom:1px dotted #e0e0e0; background:#fdfdfd; opacity:1; pointer-events:auto; cursor:pointer; transition:opacity 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vpg-lor .x-listbox > .x-list > .x-itm p{ color:#555; font-size:11px; height:25px; line-height:25px; margin:0 30px 0 0; padding:0 0 0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vpg-lor .x-listbox > .x-list > .x-itm p.x-multiline{ height:38px; line-height:15px; padding:6px 0 0 8px; }
.vpg-lor .x-listbox > .x-list > .x-itm .vpicn{ position:absolute; top:0; left:auto; right:0; transform-origin:100% 0px; transform:scale(0.5); }
.vpg-lor .x-listbox > .x-list > .x-itm.h{ background-color:#eaeaea; }
.vpg-lor .x-listbox > .x-list > .x-itm.h .vpicn{ background-color:#efefef; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-move .vpicn{ background-color:#dd3131; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-move.h .vpicn{ background-color:#f56161; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-move p{ color:#ca0000; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-contents .vpicn{ background-color:#1c6ba8; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-contents.h .vpicn{ background-color:#2881c6; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-media .vpicn{ background-color:#098480; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-media.h .vpicn{ background-color:#1ca8a3; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-media.x-media-video .vpicn{ background-color:#e87400; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-media.x-media-video.h .vpicn{ background-color:#ff962e; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-media.x-media-sound .vpicn{ background-color:#006094; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-media.x-media-sound.h .vpicn{ background-color:#1a89c4; }
/* (Fix list) */
.vpg-lor .x-listbox > .x-list > .x-itm.x-fix.x-here{ animation:k-lor-fixhere 0.5s ease 0s infinite alternate; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-fix.x-here p{ color:#fff; }
@keyframes k-lor-fixhere{ 0%{ background-color:#fe4a4a; } 100%{ background-color:#da0000; } }
.vpg-lor .x-listbox > .x-list.x-disabled > .x-itm{ pointer-events:none; opacity:0; cursor:default; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-incloser{ display:none; background:#222; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-incloser p{ color:#fff; font-size:12px; }
/* direction buttons */
.vpg-lor .x-listbox > .x-list > .x-itm.x-drc{ height:33px; background-color:#555; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-drc .x-drcitm{ pointer-events:auto; cursor:pointer; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-drc .x-drcitm.x-lft{ width:33%; height:100%; float:left; background-color:#fdfdfd; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-drc .x-drcitm.x-ctr{ width:34%; height:100%; float:left; background-color:#fdfdfd; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-drc .x-drcitm.x-rht{ width:33%; height:100%; float:right; background-color:#fdfdfd; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-drc .x-drcitm.x-lft.h{ background-color:#e0e0e0; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-drc .x-drcitm.x-ctr.h{ background-color:#e0e0e0; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-drc .x-drcitm.x-rht.h{ background-color:#e0e0e0; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-drc .x-drcitm.x-disabled{ opacity:0.2; pointer-events:none; cursor:default; }
.vpg-lor .x-listbox > .x-list > .x-itm.x-drc .vpicn{ position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; transform-origin:50% 50%; }
/* Wide-view button */
.vpg-lor-widev .vpicn{ transform:scale(0.7); }
.dev-touch .vpg-lor-widev .vpicn,
.xp-f .vpg-lor-widev .vpicn{ transform:scale(0.8); }
.vpg-lor-widev{
position:absolute; overflow:hidden; opacity:0; display:none; top:auto; left:50%; right:auto; bottom:60px; width:60px; height:40px; margin:0 0 0 -30px;
background:#222; border-radius:2px; pointer-events:auto; cursor:pointer; box-sizing:border-box;
}
.vpg-lor-widev.h{ background:#da0000; }
.vpg-lor-widev .vpicn{ position:absolute; top:50%; left:50%; width:50px; height:50px; margin:-25px 0 0 -25px; padding:0; transform-origin:50% 50%; }
/* ------------------------------------------------------------------
(plugin) guidetext
*/
/* VR overview */
.vpg-gdt .vpicn{ transform:scale(0.7); }
.dev-touch .vpg-gdt .vpicn,
.xp-f .vpg-gdt .vpicn{ transform:scale(0.8); }
.vpg-gdt .vpanim{ transform:scale(0.7); }
.dev-touch .vpg-gdt .vpanim,
.xp-f .vpg-gdt .vpanim{ transform:scale(0.8); }
.vpg-gdt div{ position:relative; overflow:hidden; margin:0; padding:0; }
.vpg-gdt{
position:absolute; top:35px; left:0; right:auto; bottom:0; width:100%; pointer-events:auto;
transition:margin-left 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990), opacity 0.25s ease-in-out;
}
.vpg-gdt.x-closed{ margin-left:-100%; pointer-events:none; }
/* (opener) 開いた状態 */
.vpg-gdt .x-opener{
position:absolute; top:auto; left:0px; right:0px; bottom:100%; width:35px; height:35px; background-color:#000; pointer-events:auto; cursor:pointer;
transition:all 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990); overflow:hidden; white-space:nowrap;
}
.vpg-gdt .x-opener.h{ background-color:#606060; }
.vpg-gdt .x-opener .vpicn{ display:block; position:absolute; top:0; left:0; transform-origin:0px 0px; }
.vpg-gdt .x-opener .vpanim{ display:none; position:absolute; top:0; left:0; transform-origin:0px 0px; }
.vpg-gdt .x-opener p{ color:#fff; width:auto; max-width:140px; height:35px; margin:0; padding:0 10px 0 35px; text-align:right; font-size:11px; line-height:35px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 無効な状態 */
.vpg-gdt .x-opener.x-disabled{ animation:none; opacity:0; pointer-events:none; cursor:default; }
.vpg-gdt .x-opener.x-disabled .vpicn{ display:none; }
.vpg-gdt .x-opener.x-disabled .vpanim{ display:none; }
/* 閉じた状態 */
.vpg-gdt.x-closed .x-opener{ left:100%; right:-35px; bottom:0%; margin:5px; width:175px; border-radius:5px; background:#fff; box-shadow:0 0 5px rgba(0,0,0,.55); }
.vpg-gdt.x-closed .x-opener .vpicn{ display:none; }
.vpg-gdt.x-closed .x-opener .vpanim.ia1{ display:block; }
.vpg-gdt.x-closed .x-opener .vpanim.ia1-w{ display:none; }
.vpg-gdt.x-closed .x-opener p{ color:#222; }
.vpr-dsk .vpg-gdt.x-closed .x-opener{ background-color:#f07609; box-shadow:0 0 6px rgba(0,0,0,.8); }
.vpr-dsk .vpg-gdt.x-closed .x-opener p{ color:#fff; }
.vpr-dsk .vpg-gdt.x-closed .x-opener .vpanim.ia1{ display:none; }
.vpr-dsk .vpg-gdt.x-closed .x-opener .vpanim.ia1-w{ display:block; }
.vpg-gdt .x-cont{ position:absolute; overflow-x:hidden; overflow-y:auto; top:0; left:0; right:0; bottom:34px; margin:0; background-color:#fff; box-sizing:border-box; border:1px solid #222; }
.vpg-gdt .x-cont > .vpg-doc{ padding:12px; }
.vpg-gdt.x-nolinks .x-cont{ bottom:0px; }
.vpg-gdt .x-links{ position:absolute; overflow-x:auto; overflow-y:hidden; top:auto; left:0; right:0; bottom:0; margin:0; padding:0; width:100%; height:35px; background:#222; border:1px solid #222; box-sizing:border-box; white-space:nowrap; }
.vpg-gdt .x-links > a{ display:inline-block; overflow:hidden; position:relative; margin:0; padding:0; width:auto; min-width:33px; height:33px; background-color:#da0000; pointer-events:auto; cursor:pointer; text-decoration:none; }
.vpg-gdt .x-links > a.h{ background-color:#606060; }
.vpg-gdt .x-links > a > .vpicn{ position:absolute; top:0; left:0; transform-origin:0px 0px; transform:scale(0.66); }
.vpg-gdt .x-links > a > p{ width:auto; height:33px; margin:0 12px 0 33px; padding:0; color:#fff; font-size:11px; line-height:33px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vpg-gdt .x-links > a > p.x-multiline{ line-height:16.5px; font-size:10px; }
.vpg-gdt.x-nolinks .x-links{ display:none; }
.dev-touch .vpg-gdt,
.xp-f .vpg-gdt{ top:40px; }
.dev-touch .vpg-gdt .x-opener{ width:40px; height:40px; }
.xp-f .vpg-gdt .x-opener{ width:100%; height:40px; border-radius:0px; }
.dev-touch .vpg-gdt.x-closed .x-opener,
.xp-f .vpg-gdt.x-closed .x-opener{ width:40px; height:40px; box-shadow:0 0 8px rgba(0,0,0,.8); }
.xp-f .vpg-gdt.x-closed .x-opener{ border-radius:2px; }
.dev-touch .vpg-gdt.x-closed .x-opener,
.xp-f .vpg-gdt.x-closed .x-opener{ right:-40px; }
.dev-touch .vpg-gdt .x-opener p,
.xp-f .vpg-gdt .x-opener p{ height:40px; line-height:40px; padding:0 10px 0 40px; font-size:12px; }
.xp-f .vpg-gdt .x-opener p{ text-align:left; }
.xp-f .vpg-gdt.x-closed .x-opener p{ display:none; }
.xp-f .vpg-gdt .x-cont{ background-color:#fff; }
/* ------------------------------------------------------------------
(plugin) sidecontentbox
*/
/* VR overview */
.vpg-scbx .vpicn{ transform:scale(0.7); }
.dev-touch .vpg-scbx .vpicn,
.xp-f .vpg-scbx .vpicn{ transform:scale(0.8); }
.vpg-scbx div{ position:relative; overflow:hidden; margin:0; padding:0; }
.vpg-scbx{
position:absolute; top:35px; left:0; right:auto; bottom:0; width:100%; max-width:300px; pointer-events:auto;
transition:margin-left 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990), opacity 0.25s ease-in-out;
}
.vpg-scbx.x-closed{ margin-left:-100%; pointer-events:none; }
.vpg-scbx.x-wide{ max-width:none; }
/* (opener) 開いた状態 */
.vpg-scbx .x-clsr{
position:absolute; top:auto; left:0px; right:0px; bottom:100%; width:100%; height:35px; background-color:#000; pointer-events:auto; cursor:pointer;
transition:all 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990); overflow:hidden; white-space:nowrap;
}
.vpg-scbx .x-clsr.h{ background-color:#606060; }
.vpg-scbx .x-clsr .vpicn{ display:block; position:absolute; top:0; left:0; transform-origin:0px 0px; }
.vpg-scbx .x-clsr p{
position:absolute; top:0; left:40px; right:10px; bottom:0; margin:0; padding:0;
height:35px; line-height:35px; font-size:11px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vpg-scbx .x-cont{ position:absolute; overflow-x:hidden; overflow-y:auto; top:0; left:0; right:0; bottom:34px; margin:0; background-color:#fff; box-sizing:border-box; border:1px solid #222; }
.vpg-scbx .x-cont > .vpg-doc{ padding:12px; }
.vpg-scbx.x-nolinks .x-cont{ bottom:0px; }
.vpg-scbx .x-links{ position:absolute; overflow-x:auto; overflow-y:hidden; top:auto; left:0; right:0; bottom:0; margin:0; padding:0; width:100%; height:35px; background:#222; border:1px solid #222; box-sizing:border-box; white-space:nowrap; }
.vpg-scbx .x-links > a{ display:inline-block; overflow:hidden; position:relative; margin:0; padding:0; width:auto; min-width:33px; height:33px; background-color:#da0000; pointer-events:auto; cursor:pointer; text-decoration:none; }
.vpg-scbx .x-links > a.h{ background-color:#606060; }
.vpg-scbx .x-links > a > .vpicn{ position:absolute; top:0; left:0; transform-origin:0px 0px; transform:scale(0.66); }
.vpg-scbx .x-links > a > p{ width:auto; height:33px; margin:0 12px 0 33px; padding:0; color:#fff; font-size:11px; line-height:33px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vpg-scbx .x-links > a > p.x-multiline{ line-height:16.5px; font-size:10px; }
.vpg-scbx.x-nolinks .x-links{ display:none; }
.dev-touch .vpg-scbx{ top:40px; }
.xp-f .vpg-scbx{ top:40px; max-width:none; }
.dev-touch .vpg-scbx .x-clsr{ height:40px; }
.xp-f .vpg-scbx .x-clsr{ height:40px; border-radius:0px; }
.dev-touch .vpg-scbx .x-clsr p,
.xp-f .vpg-scbx .x-clsr p{ height:40px; line-height:40px; font-size:12px; left:50px; }
.xp-f .vpg-scbx .x-cont{ background-color:#fff; }
/* ------------------------------------------------------------------
(plugin) Locale Panel
*/
/* default */
.vpg-locp, .vpg-locp > div{ box-sizing:border-box; position:relative; display:block; margin:0; padding:0; background:transparent; pointer-events:none; }
.vpg-locp{
overflow:hidden; position:absolute; top:10px; right:10px; bottom:10px; left:10px; opacity:1; transform-origin:50% 50%; transform:scale(1.0); box-shadow:0 2px 5px rgba(0,0,0,.5);
transition:transform 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990), height 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990), opacity 0.25s ease-in-out;
}
.vpg-locp.x-closed{ transform:scale(0.5); opacity:0; }
.vpg-locp .vpicn{ transform:scale(0.6); }
.dev-touch .vpg-locp .vpicn,
.xp-f .vpg-locp .vpicn{ transform:scale(0.8); }
.xp-f .vpg-locp{ position:relative; top:0; right:0; bottom:0; left:0; width:100%; height:100%; box-shadow:none; }
/* control bar */
.vpg-locp > .x-ctrls{ overflow:hidden; position:absolute; top:0; left:auto; right:0; bottom:0; width:30px; height:auto; background-color:#222; pointer-events:auto; cursor:pointer; }
.vpg-locp > .x-ctrls > .vpicn{ pointer-events:auto; cursor:pointer; }
.vpg-locp > .x-ctrls.h{ background-color:#505050; }
.xp-f .vpg-locp > .x-ctrls,
.dev-touch .vpg-locp > .x-ctrls{ width:40px; }
/* content */
.vpg-locp > .x-cont{ overflow:hidden; width:auto; height:100%; margin:0 30px 0 0; background-color:#f5f5f5; pointer-events:auto; border:1px solid #222; }
.vpg-locp > .x-cont > .x-items{ width:auto; height:100%; overflow-x:hidden; overflow-y:auto; pointer-events:auto; }
.xp-f .vpg-locp > .x-cont,
.dev-touch .vpg-locp > .x-cont{ margin:0 40px 0 0; }
.vpg-locp .x-items .x-itm{ overflow:hidden; position:relative; height:30px; margin:0; padding:0; background-color:transparent; }
.vpg-locp .x-items .x-itm > .vpicn{ position:absolute; top:0; right:0; transform-origin:100% 0px; }
.vpg-locp .x-items .x-itm > p{ overflow:hidden; margin:0 30px 0 0; padding:0 10px; font-size:12px; line-height:30px; text-overflow:ellipsis; white-space:nowrap; }
.vpg-locp .x-items .x-itm:first-child{ margin-top:2px; }
.vpg-locp .x-items .x-itm.x-title{ height:35px; margin:0; background:#505050; }
.vpg-locp .x-items .x-itm.x-title > p{ overflow:hidden; margin:0 0 0 0; padding:0 0 0 10px; color:#fff; line-height:35px; text-overflow:ellipsis; white-space:nowrap; }
.vpg-locp .x-items .x-itm.x-lng{ cursor:pointer; border-bottom:1px solid #ddd; }
.vpg-locp .x-items .x-itm.x-lng > p{ color:#555; }
.vpg-locp .x-items .x-itm.x-lng.h{ background-color:#aaa; }
.vpg-locp .x-items .x-itm.x-selected > p{ color:#000; }
.xp-f .vpg-locp .x-items .x-itm,
.dev-touch .vpg-locp .x-items .x-itm{ height:40px; }
.xp-f .vpg-locp .x-items .x-itm > p,
.dev-touch .vpg-locp .x-items .x-itm > p{ line-height:40px; font-size:15px; }
/* ------------------------------------------------------------------
(plugin) Share Box
*/
/* default */
.vpg-srbx, .vpg-srbx > div{ box-sizing:border-box; position:relative; display:block; margin:0; padding:0; background:transparent; pointer-events:none; }
.vpg-srbx{
overflow:hidden; position:absolute; top:10px; right:10px; bottom:10px; left:10px; opacity:1; transform-origin:50% 50%; transform:scale(1.0); box-shadow:0 2px 5px rgba(0,0,0,.5);
transition:transform 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990), height 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990), opacity 0.25s ease-in-out;
}
.vpg-srbx.x-closed{ transform:scale(0.5); opacity:0; }
.vpg-srbx .vpicn{ transform:scale(0.6); }
.dev-touch .vpg-srbx .vpicn,
.xp-f .vpg-srbx .vpicn{ transform:scale(0.8); }
.xp-f .vpg-srbx{ position:relative; top:0; right:0; bottom:0; left:0; width:100%; height:100%; box-shadow:none; }
/* control bar */
.vpg-srbx > .x-ctrls{ overflow:hidden; position:absolute; top:0; left:auto; right:0; bottom:0; width:30px; height:auto; background-color:#222; pointer-events:auto; cursor:pointer; }
.vpg-srbx > .x-ctrls > .vpicn{ pointer-events:auto; cursor:pointer; }
.vpg-srbx > .x-ctrls.h{ background-color:#505050; }
.xp-f .vpg-srbx > .x-ctrls,
.dev-touch .vpg-srbx > .x-ctrls{ width:40px; }
/* content */
.vpg-srbx > .x-cont{ overflow:hidden; width:auto; height:100%; margin:0 30px 0 0; background-color:#f5f5f5; pointer-events:auto; border:1px solid #222; }
.vpg-srbx > .x-cont > .x-items{ width:auto; height:100%; overflow-x:hidden; overflow-y:auto; pointer-events:auto; }
.xp-f .vpg-srbx > .x-cont,
.dev-touch .vpg-srbx > .x-cont{ margin:0 40px 0 0; }
.vpg-srbx .x-items .x-itm{ overflow:hidden; position:relative; height:30px; margin:0; padding:0; background-color:transparent; }
.vpg-srbx .x-items .x-itm > .vpicn{ position:absolute; top:0; left:0; transform-origin:0px 0px; }
.vpg-srbx .x-items .x-itm > p{ overflow:hidden; margin:0; padding:0 10px 0 35px; font-size:12px; line-height:30px; text-overflow:ellipsis; white-space:nowrap; }
.vpg-srbx .x-items .x-itm:first-child{ margin-top:2px; }
.vpg-srbx .x-items .x-itm.x-title{ height:35px; margin:0; background:#505050; }
.vpg-srbx .x-items .x-itm.x-title > p{ overflow:hidden; margin:0 0 0 0; padding:0 0 0 10px; color:#fff; line-height:35px; text-overflow:ellipsis; white-space:nowrap; }
.vpg-srbx .x-items .x-itm.x-switch{ cursor:pointer; margin:0; background:#aaa; }
.vpg-srbx .x-items .x-itm.x-switch > .vpicn{ position:absolute; top:0; left:auto; right:0; transform-origin:100% 0px; }
.vpg-srbx .x-items .x-itm.x-switch > p{ overflow:hidden; margin:0; padding:0 35px 0 10px; color:#fdfdfd; text-shadow:0 1px 3px #000; text-overflow:ellipsis; white-space:nowrap; }
.vpg-srbx .x-items .x-itm.x-switch.x-active{ background-color:#eee; }
.vpg-srbx .x-items .x-itm.x-switch.x-active > p{ color:#222; text-shadow:none; }
.vpg-srbx .x-items .x-itm.x-switch.h{ background-color:#ddd; }
.vpg-srbx .x-items .x-itm.x-switch.h > p{ color:#555; text-shadow:none; }
.vpg-srbx .x-items .x-itm.x-lng{ cursor:pointer; border-bottom:1px solid #ddd; }
.vpg-srbx .x-items .x-itm.x-lng > p{ color:#555; }
.vpg-srbx .x-items .x-itm.x-lng.h{ background-color:#aaa; }
.xp-f .vpg-srbx .x-items .x-itm,
.dev-touch .vpg-srbx .x-items .x-itm{ height:40px; }
.xp-f .vpg-srbx .x-items .x-itm > p,
.dev-touch .vpg-srbx .x-items .x-itm > p{ line-height:40px; font-size:15px; padding:0 10px 0 45px; }
.xp-f .vpg-srbx .x-items .x-itm.x-title > p,
.dev-touch .vpg-srbx .x-items .x-itm.x-title > p{ line-height:40px; font-size:15px; padding:0 45px 0 10px; }
.xp-f .vpg-srbx .x-items .x-itm.x-switch > p,
.dev-touch .vpg-srbx .x-items .x-itm.x-switch > p{ line-height:40px; font-size:15px; padding:0 45px 0 10px; }
/* ------------------------------------------------------------------
(plugin) User Guide
*/
/* VR overview */
.vpg-usgd .vpicn{ transform:scale(0.7); }
.dev-touch .vpg-usgd .vpicn,
.xp-f .vpg-usgd .vpicn{ transform:scale(0.8); }
.vpg-usgd .vpanim{ transform:scale(0.7); }
.dev-touch .vpg-usgd .vpanim,
.xp-f .vpg-usgd .vpanim{ transform:scale(0.8); }
.vpg-usgd div{ position:relative; overflow:hidden; padding:0; }
.vpg-usgd{
position:relative; overflow:hidden; display:table; margin:0 auto; width:100%; max-width:480px; height:100%;
transform:scale(1); opacity:1;
transition:transform 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990), opacity 0.25s ease-in-out;
}
.vpg-usgd.x-closed{ transform:scale(0.5); opacity:0; }
.vpg-usgd > .x-base{ position:absolute; display:block; top:10px; left:10px; right:10px; bottom:10px; background:#fefefe; pointer-events:auto; border-radius:7px; box-shadow:0 0 10px rgba(0,0,0,.5); }
.vpg-usgd > .x-base .x-header{ position:absolute; overflow:hidden; top:0; left:0; width:100%; height:35px; margin:0; pointer-events:auto; cursor:pointer; }
.vpg-usgd > .x-base .x-header .vpicn{ display:block; position:absolute; top:0; left:auto; right:0; transform-origin:100% 0px; }
.vpg-usgd > .x-base .x-header p{ margin:0 35px 0 10px; padding:0; line-height:35px; font-size:12px; color:#222; }
.vpg-usgd > .x-base .x-footer{ position:absolute; overflow:hidden; top:auto; left:0; bottom:0; width:100%; height:40px; margin:0; background:#eaeaea; border-top:1px solid #ccc; pointer-events:auto; cursor:pointer; }
.vpg-usgd > .x-base .x-footer .vpicn{ display:block; position:absolute; top:0; left:50%; right:0; transform-origin:100% 0px; margin-left:-30px; }
.vpg-usgd > .x-base .x-footer.h{ background-color:#ddd; }
.vpg-usgd > .x-base .x-cont{ position:absolute; overflow-x:hidden; overflow-y:auto; top:35px; left:0; right:0; bottom:41px; margin:0; background-color:#fefefe; box-sizing:border-box; }
.vpg-usgd > .x-base .x-cont > .x-ldr{ position:relative; overflow:hidden; width:100%; height:100%; background:#fefefe; pointer-events:auto; transition:opacity 0.25s ease-in-out; }
.vpg-usgd > .x-base .x-cont > .vpg-doc{ padding:12px; }
/*
.dev-touch .vpg-usgd,
.xp-f .vpg-usgd{ top:40px; }
.dev-touch .vpg-usgd .x-opener{ width:40px; height:40px; border-radius:0px; }
.xp-f .vpg-usgd .x-opener{ width:100%; height:40px; border-radius:0px; }
.dev-touch .vpg-usgd.x-closed .x-opener,
.xp-f .vpg-usgd.x-closed .x-opener{ width:180px; height:40px; margin:0; box-shadow:0 0 8px rgba(0,0,0,.8); }
.dev-touch .vpg-usgd.x-closed .x-opener,
.xp-f .vpg-usgd.x-closed .x-opener{ right:-40px; }
.dev-touch .vpg-usgd .x-opener p,
.xp-f .vpg-usgd .x-opener p{ height:40px; line-height:40px; padding:0 10px 0 40px; font-size:12px; }
.xp-f .vpg-usgd .x-opener p{ text-align:left; }
.xp-f .vpg-usgd.x-closed .x-opener p{ text-align:right; }
.xp-f .vpg-usgd .x-cont{ background-color:#fff; }
*/
/* ------------------------------------------------------------------
(plugin) Tab footer
*/
.vgp-tabft{ position:absolute; overflow:hidden; width:auto; height:100%; top:auto; left:0px; right:0px; bottom:0px; }
.vgp-tabft .x-panel{ position:relative; overflow-x:auto; overflow-y:hidden; width:100%; height:100%; margin:0; padding:0; }
.vgp-tabft .x-panel.x-hide{ display:none; }
.vgp-tabft .x-panel > table{ table-layout:fixed; border-collapse:separate; border-spacing:5px; empty-cells:show; width:auto; max-width:999999px; height:100%; margin:0; }
.vgp-tabft .x-panel > table tbody tr,
.vgp-tabft .x-panel > table tbody td{ position:relative; margin:0; padding:0; overflow:hidden; white-space:nowrap; }
.vgp-tabft .x-panel > table tbody td.x-itm{ border:1px solid #222; }
.vgp-tabft .x-panel > table tbody td.x-itm .x-art{
position:relative; overflow:hidden; width:180px; height:100%; margin:0;
background-position:center center; background-size:cover; background-repeat:no-repeat; pointer-events:auto; cursor:pointer;
transition: opacity 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990);
opacity:0.7;
}
.vgp-tabft .x-panel > table tbody td.x-itm p{
position:absolute; top:auto; left:0; right:0; bottom:0; margin:0; padding:32px 6px 5px 6px; overflow:hidden; height:auto; color:#fff; font-size:10px;
text-overflow:ellipsis; white-space:nowrap; pointer-events:none; user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none;
background-image: -moz-linear-gradient(top, transparent, #000000);
background-image: -ms-linear-gradient(top, transparent, #000000);
background-image: -o-linear-gradient(top, transparent, #000000);
background-image: -webkit-linear-gradient(top, transparent, #000000);
background-image: linear-gradient(top, transparent, #000000);
}
.vgp-tabft .x-panel > table tbody td.x-itm.h{ border-color:#da0000; }
.vgp-tabft .x-panel > table tbody td.x-itm.h .x-art{ opacity:1; animation:k-tabft-sel 0.5s ease 0s infinite alternate; }
.vgp-tabft .x-panel > table tbody td.x-itm.x-selected{ border-color:#fff!important; }
.vgp-tabft .x-panel > table tbody td.x-itm.x-selected .x-art{ opacity:1; animation:k-tabft-sel 0.5s ease 0s infinite alternate; }
.vgp-tabft .x-panel > table tbody td.x-itm.x-hide{ display:none; opacity:0; }
@keyframes k-tabft-sel{ 0%{ opacity:0.8; } 100%{ opacity:1; } }
.vgp-tabft .x-panel::-webkit-scrollbar{ overflow:hidden; width:7px; background:#efefef; border-radius:3px; }
.vgp-tabft .x-panel::-webkit-scrollbar:horizontal{ height:5px; }
.vgp-tabft .x-panel::-webkit-scrollbar-button{ display:none; }
.vgp-tabft .x-panel::-webkit-scrollbar-piece{ background:#ddd; }
.vgp-tabft .x-panel::-webkit-scrollbar-piece:start{ background:#ddd; }
.vgp-tabft .x-panel::-webkit-scrollbar-thumb{ overflow:hidden; background:#c0c0c0; border:1px solid #efefef; margin:1px; border-radius:3px; }
.vgp-tabft .x-panel::-webkit-scrollbar-corner{ overflow:hidden; background:#333; border-radius:3px; }
/* mobile */
.vpr-mob .vgp-tabft{ height:80px; }
.vpr-mob .vgp-tabft .x-panel > table tbody td.x-itm{ width:80px; }
.vpr-mob .vgp-tabft .x-panel > table tbody td.x-itm .x-art{ width:70px; }
.vpr-mob .vgp-tabft .x-panel > table tbody td.x-itm p{ font-size:8px; }
table.vgp-tbfl .vpicn{ transform:scale(0.6); }
.dev-touch table.vgp-tbfl .vpicn,
.xp-f table.vgp-tbfl .vpicn{ transform:scale(0.6); }
table.vgp-tbfl{
position:absolute; top:0; left:auto; right:0; bottom:auto;
table-layout:fixed; border-collapse:collapse; border-spacing:0; empty-cells:show; width:auto; max-width:999999px; height:auto; margin:0;
}
table.vgp-tbfl tbody tr,
table.vgp-tbfl tbody td{ position:relative; margin:0; padding:0; overflow:hidden; white-space:nowrap; }
table.vgp-tbfl tbody td > .x-lbl{
display:block; position:relative; overflow:hidden; margin:5px; padding:0 30px 0 15px; pointer-events:auto; cursor:pointer;
height:30px; font-size:12px; line-height:30px; background:#fff; color:#222; border-radius:4px; box-shadow:0 0 5px rgba(0,0,0,.8);
text-overflow:ellipsis; white-space:nowrap; user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none;
transition:all 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
table.vgp-tbfl tbody td .vpicn{ position:absolute; top:0; left:auto; right:0px; bottom:auto; transform-origin:100% 0px; }
table.vgp-tbfl tbody td.x-opened > .x-lbl{ margin:10px 5px 5px 5px; background:#da2020; color:#fff; border-radius:4px 4px 0 0; }
.xp-f table.vgp-tbfl{ top:31px; }
.xp-f table.vgp-tbfl tbody td > .x-lbl{ background:#fefefe; color:#222; }
.xp-f table.vgp-tbfl tbody td.x-opened > .x-lbl{ margin:10px 5px 5px 5px; background:#222; color:#fff; box-shadow:0 0 5px #fff; }
/* ------------------------------------------------------------------
(plugin) Sidepanel
*/
.vpg-spanel{ position:absolute; overflow:hidden; transition-property:all; transition-delay:0s; transition-duration:0.35s; transition-timing-function:ease-in-out; }
/* ------------------------------------------------------------------
(plugin) VR List Panel
*/
.vgp-vrlp{ position:relative; overflow:hidden; width:100%; height:100%; margin:0; padding:0; }
.vgp-vrlp .x-panel{ position:relative; overflow-x:auto; overflow-y:hidden; width:100%; height:100%; margin:0; padding:0; }
.vgp-vrlp .x-panel.x-hide{ display:none; }
.vgp-vrlp .x-panel > table{ table-layout:fixed; border-collapse:separate; border-spacing:5px; empty-cells:show; width:auto; max-width:999999px; height:100%; min-height:100%; margin:0; }
.vgp-vrlp .x-panel > table tbody tr,
.vgp-vrlp .x-panel > table tbody td{ position:relative; margin:0; padding:0; overflow:hidden; white-space:nowrap; min-height:100%; }
.vgp-vrlp .x-panel > table tbody td.x-itm{ width:150px; height:100%; border:1px solid #222; }
.vgp-vrlp .x-panel > table tbody td.x-itm .x-art{
position:relative; z-index:2; overflow:hidden; display:block; width:150px; height:100%; margin:0;
background-position:center center; background-size:cover; background-repeat:no-repeat; pointer-events:auto; cursor:pointer;
transition: opacity 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990);
opacity:0.7;
}
.vgp-vrlp .x-panel > table tbody td.x-itm p{
position:absolute; z-index:3; top:auto; left:0; right:0; bottom:0; margin:0; padding:32px 6px 5px 6px; overflow:hidden; height:auto; color:#fff; font-size:10px;
text-overflow:ellipsis; white-space:nowrap; pointer-events:none; user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none;
background-image: -moz-linear-gradient(top, transparent, #000000);
background-image: -ms-linear-gradient(top, transparent, #000000);
background-image: -o-linear-gradient(top, transparent, #000000);
background-image: -webkit-linear-gradient(top, transparent, #000000);
background-image: linear-gradient(top, transparent, #000000);
}
.vgp-vrlp .x-panel > table tbody td.x-itm.h{ border-color:#da0000; }
.vgp-vrlp .x-panel > table tbody td.x-itm.h .x-art{ opacity:1; animation:k-vrlp-sel 0.5s ease 0s infinite alternate; }
.vgp-vrlp .x-panel > table tbody td.x-itm.x-selected{ border-color:#fff!important; }
.vgp-vrlp .x-panel > table tbody td.x-itm.x-selected .x-art{ opacity:1; animation:k-vrlp-sel 0.5s ease 0s infinite alternate; }
.vgp-vrlp .x-panel > table tbody td.x-itm.x-hide{ display:none; opacity:0; }
@keyframes k-vrlp-sel{ 0%{ opacity:0.8; } 100%{ opacity:1; } }
.vgp-vrlp .x-panel::-webkit-scrollbar{ overflow:hidden; width:7px; background:#efefef; border-radius:3px; }
.vgp-vrlp .x-panel::-webkit-scrollbar:horizontal{ height:5px; }
.vgp-vrlp .x-panel::-webkit-scrollbar-button{ display:none; }
.vgp-vrlp .x-panel::-webkit-scrollbar-piece{ background:#ddd; }
.vgp-vrlp .x-panel::-webkit-scrollbar-piece:start{ background:#ddd; }
.vgp-vrlp .x-panel::-webkit-scrollbar-thumb{ overflow:hidden; background:#c0c0c0; border:1px solid #efefef; margin:1px; border-radius:3px; }
.vgp-vrlp .x-panel::-webkit-scrollbar-corner{ overflow:hidden; background:#333; border-radius:3px; }
/* mobile */
.vpr-mob .vgp-vrlp .x-panel > table tbody td.x-itm{ width:125px; }
.vpr-mob .vgp-vrlp .x-panel > table tbody td.x-itm .x-art{ width:115px; }
.vpr-mob .vgp-vrlp .x-panel > table tbody td.x-itm p{ font-size:8px; }
/* ------------------------------------------------------------------
(plugin) Flat Control
*/
.vgp-fcb-btb .vpicn,
.vgp-fcb-ltb .vpicn,
.vgp-fcb-rtb .vpicn{ transform:scale(0.6); }
table.vgp-fcb-btb,
table.vgp-fcb-ltb,
table.vgp-fcb-rtb{ transition:opacity 0.25s ease-in-out; }
/* Bottom-Table */
table.vgp-fcb-btb{
position:absolute; top:auto; left:auto; right:15px; bottom:0;
table-layout:fixed; border-collapse:collapse; border-spacing:0; empty-cells:show; width:auto; max-width:999999px; height:auto; margin:0;
}
table.vgp-fcb-btb tbody tr, table.vgp-fcb-btb tbody td{ position:relative; margin:0; padding:0; overflow:hidden; white-space:nowrap; }
/* Left-Table */
table.vgp-fcb-ltb{
position:absolute; top:auto; left:0px; right:auto; bottom:55px;
table-layout:fixed; border-collapse:collapse; border-spacing:0; empty-cells:show; width:auto; max-width:999999px; height:auto; margin:0;
}
table.vgp-fcb-ltb tbody tr, table.vgp-fcb-ltb tbody td{ position:relative; margin:0; padding:0; overflow:hidden; white-space:nowrap; }
/* Right-Table */
table.vgp-fcb-rtb{
position:absolute; top:auto; left:auto; right:0px; bottom:55px;
table-layout:fixed; border-collapse:collapse; border-spacing:0; empty-cells:show; width:auto; max-width:999999px; height:auto; margin:0;
}
table.vgp-fcb-rtb tbody tr, table.vgp-fcb-rtb tbody td{ position:relative; margin:0; padding:0; overflow:hidden; white-space:nowrap; }
/* Table-In-Table */
table.x-intb{
position:relative; overflow:hidden; table-layout:fixed; border-collapse:collapse; border-spacing:0; empty-cells:show;
width:auto; max-width:999999px; height:auto; margin:0 10px 15px 0; box-shadow:0 1px 5px rgba(0,0,0,.35); border-radius:2px;
transition:all 0.35s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
table.vgp-fcb-btb table.x-intb{ margin:0 10px 15px 0; }
table.vgp-fcb-rtb table.x-intb{ margin:0 20px 10px 0; }
table.vgp-fcb-ltb table.x-intb{ margin:0 0 10px 20px; }
table.vgp-fcb-btb table.x-intb.x-nomargin-row{ /* 下のマージンを無くす */ margin:15px 10px 0px 0; border-radius:3px 3px 0 0; }
table.vgp-fcb-rtb table.x-intb.x-nomargin-right{ /* 右のマージンを無くす */margin:0 0px 10px 20px; border-radius:3px 0 0 3px; }
table.vgp-fcb-ltb table.x-intb.x-nomargin-left{ /* 左のマージンを無くす */margin:0 20px 10px 0px; border-radius:0 3px 3px 0; }
table.x-intb tbody tr,
table.x-intb tbody td{ position:relative; margin:0; padding:0; overflow:hidden; white-space:nowrap; }
table.x-intb tbody td.x-separator > div{ margin-left:1px; } /* アイテムの左にセパレータを設ける場合 */
/* cbtn : ボタンのみ */
table.x-intb tbody td > .x-cbtn{
display:block; position:relative; overflow:hidden; margin:0; padding:0; pointer-events:auto; cursor:pointer;
width:auto; min-width:30px; height:30px; background:#222;
transition:all 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
table.x-intb tbody td > .x-cbtn .vpicn{ position:absolute; top:0; left:0; transform-origin:0px 0px; opacity:0.6; }
table.x-intb tbody td > .x-cbtn.h{ background-color:#3f3f3f; }
table.x-intb tbody td > .x-cbtn.h .vpicn{ opacity:1; }
/* txtbtn : テキスト入りボタン */
table.x-intb tbody td > .x-txtbtn{
display:block; position:relative; overflow:hidden; margin:0; padding:0; pointer-events:auto; cursor:pointer;
width:auto; min-width:30px; height:30px; background:#222;
transition:all 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
table.x-intb tbody td > .x-txtbtn > p{
display:block; position:relative; overflow:hidden; margin:0; padding:0 30px 0 15px;
width:auto; height:30px; background:transparent;
font-size:12px; line-height:30px; color:#ccc; text-overflow:ellipsis; white-space:nowrap; user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none;
transition:color 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
table.x-intb tbody td > .x-txtbtn .vpicn{ position:absolute; top:0; left:auto; right:0px; bottom:auto; transform-origin:100% 0px; opacity:0.6; }
table.x-intb tbody td > .x-txtbtn.h{ background-color:#3f3f3f; }
table.x-intb tbody td > .x-txtbtn.h p{ color:#fff!important; }
table.x-intb tbody td > .x-txtbtn.h .vpicn{ opacity:1; }
table.vgp-fcb-btb.x-disabled *,
table.vgp-fcb-rtb.x-disabled *,
table.vgp-fcb-ltb.x-disabled *{ pointer-events:none!important; user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; }
/* ------------------------------------------------------------------
(plugin) Local maps
*/
/* グローバルマップボタン */
.vpg-lmap-sticker{
position:absolute; overflow:hidden; z-index:2; top:auto; left:50%; right:auto; bottom:10px; width:150px; height:35px; margin:0 0 0 -75px;
background-color:#fff; box-shadow:0 1px 5px rgba(0,0,0,.75); border-radius:5px; pointer-events:auto; cursor:pointer;
transition:background-color 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpg-lmap-sticker.h{ background-color:#ddd; }
.vpg-lmap-sticker > .vpicn{ position:absolute; top:0; left:0; width:50px; height:50px; transform-origin:0px 0px; transform:scale(0.7); }
.vpg-lmap-sticker > p{ overflow:hidden; text-align:right; margin:0; padding:0 10px 0 35px; line-height:35px; color:#222; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
/* Common */
.vpg-lmap .vpicn{ transform:scale(0.7); }
.dev-touch .vpg-lmap .vpicn,
.xp-f .vpg-lmap .vpicn{ transform:scale(0.8); }
.vpg-lmap{ position:absolute; margin:10px; box-shadow:0 0 5px rgba(0,0,0,.5); width:40%; max-width:800px; height:70%; max-height:400px;
transform-origin:50% 50%;
transition:
transform 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990),
width 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990),
height 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990),
opacity 0.25s ease-in-out;
}
.vpg-lmap.x-closed{ transform:scale(0.5); opacity:0; }
.vpg-lmap.x-wideview{ top:0; left:0; width:70%; max-width:1200px; height:100%; max-height:700px; }
.xp-f .vpg-lmap,
.xp-f .vpg-lmap.x-wideview{ width:100%; max-width:100%; height:100%; max-height:100%; margin:0; box-shadow:none; }
.vpg-lmap > .x-hdr{ position:absolute; overflow:visible; top:0; left:0; right:0; height:35px; pointer-events:auto;
background: #fff; /* Old browsers */
}
.vpg-lmap > .x-hdr > .x-screen{ position:absolute; top:0; right:0; width:50px; height:50px; transform-origin:100% 0px; cursor:pointer; border-left:1px solid #ddd; }
.vpg-lmap > .x-hdr > .x-screen.h{ background-color:#ddd; }
.vpg-lmap > .x-hdr > .x-closer{ position:absolute; top:0; right:-50px; width:50px; height:50px; background-color:#fff; transform-origin:0px 0px; cursor:pointer; box-shadow:0 0 5px rgba(0,0,0,.5); }
.vpg-lmap > .x-hdr > .x-closer.h{ background-color:#ddd; }
.vpg-lmap > .x-hdr > p{ overflow:hidden; margin:0; padding:0 35px 0 10px; color:#222; line-height:35px; height:35px; text-overflow:ellipsis; white-space:nowrap; }
.dev-touch .vpg-lmap > .x-hdr,
.xp-f .vpg-lmap > .x-hdr{ height:40px; }
.dev-touch .vpg-lmap > .x-hdr > p,
.xp-f .vpg-lmap > .x-hdr > p{ padding:0 40px 0 10px; line-height:40px; height:40px; }
.xp-f .vpg-lmap > .x-hdr > .x-screen{ display:none; }
.xp-f .vpg-lmap > .x-hdr > .x-closer{ right:0px; transform-origin:100% 0px; }
/* maprow */
.vpg-lmap > .x-maprow{ position:absolute; overflow:hidden; z-index:1; top:35px; left:0; right:150px; bottom:0;
border-width:0px 1px 1px 1px; border-style:none solid solid solid; border-color:#fff; background-color:rgba(0,0,0,.6); box-shadow:0 0 10px #000 inset; box-sizing:border-box; pointer-events:auto;
transition:height 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpg-lmap > .x-maprow > .x-mapimg{ position:absolute; z-index:1; overflow:hidden; pointer-events:auto; margin:0; padding:0; opacity:1; transition:opacity 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990), transform 0.33s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vpg-lmap > .x-maprow > .x-mapimg img{ position:absolute; z-index:1; top:0; left:0; right:0; bottom:0; width:100%; height:100%; margin:0; }
.vpg-lmap > .x-maprow > .x-mapimg .x-spot{ position:absolute; z-index:2; display:block; overflow:hidden; pointer-events:auto; cursor:pointer; }
.vpg-lmap > .x-maprow > .x-mapimg .x-spot.x-here{ animation:k-lmap-mapspot 0.5s ease 0s infinite alternate; }
.vpg-lmap > .x-maprow > .x-mapimg.x-disabled{ opacity:0; pointer-events:none; cursor:default; }
@keyframes k-lmap-mapspot{ 0%{ margin-top:0px; } 100%{ margin-top:-10px; } }
.vpg-lmap > .x-maprow > .x-gmap{ position:absolute; z-index:1; overflow:hidden; top:0; left:0; width:100%; height:100%; pointer-events:auto; margin:0; padding:0; opacity:1; transition:opacity 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990), transform 0.33s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vpg-lmap > .x-maprow > .x-gmap > .x-bs{ position:relative; overflow:hidden; width:100%; height:100%; margin:0; padding:0; }
.vpg-lmap > .x-maprow > .x-gmap.x-disabled{ opacity:0; pointer-events:none; cursor:default; }
.vpg-lmap-gmap-here{ animation:k-lmap-mapspot 0.5s ease 0s infinite alternate; }
.dev-touch .x-maprow,
.xp-f .x-maprow{ top:40px; }
.xp-f .x-maprow{ background-color:#555; }
.vpg-lmap.x-wideview > .x-maprow{ right:210px; }
.vpg-lmap.x-submap-closed > .x-maprow{ right:0; }
/* submaps */
.vpg-lmap > .x-submaps{ position:absolute; overflow-x:hidden; overflow-y:auto; z-index:1; top:35px; left:auto; right:0; bottom:0px; width:150px;
border-width:0px 1px 1px 0px; border-style:none solid solid none; border-color:#fff; background-color:rgba(0,0,0,.5); box-sizing:border-box; pointer-events:auto;
}
.vpg-lmap > .x-submaps.x-closed{ display:none; }
.vpg-lmap > .x-submaps > .x-hdr{ position:relative; overflow:hidden; width:100%; height:25px; pointer-events:auto; background-color:#666; }
.vpg-lmap > .x-submaps > .x-hdr > p{ position:relative; overflow:hidden; height:25px; font-size:11px; line-height:25px; margin:0 10px 0 10px; padding:0; color:#fafafa; }
.vpg-lmap.x-wideview > .x-submaps{ width:210px; }
.vpg-lmap.x-submap-closed > .x-submaps{ display:none; width:1px; }
.vpg-lmap > .x-submaps > .x-itm{ position:relative; overflow:hidden; width:100%; height:30px; pointer-events:auto; cursor:pointer; box-sizing:border-box; border-top:1px solid #ccc; background:#fafafa; }
.vpg-lmap > .x-submaps > .x-itm.h{ background:#e0e0e0; }
.vpg-lmap > .x-submaps > .x-itm > .vpicn{ position:absolute; top:0; left:0; width:50px; height:50px; transform-origin:0px 0px; transform:scale(0.6); }
.vpg-lmap > .x-submaps > .x-itm > p{ position:relative; overflow:hidden; height:30px; font-size:11px; line-height:30px; margin:0; padding:0 5px 0 30px; color:#222; text-overflow:ellipsis; white-space:nowrap; }
.vpg-lmap > .x-submaps.x-closed > .x-itm{ display:none; }
.dev-touch .vpg-lmap > .x-submaps,
.xp-f .vpg-lmap > .x-submaps{ top:40px; }
.dev-touch .vpg-lmap > .x-submaps > .x-itm,
.xp-f .vpg-lmap > .x-submaps > .x-itm{ height:40px; }
.dev-touch .vpg-lmap > .x-submaps > .x-itm > .vpicn,
.xp-f .vpg-lmap > .x-submaps > .x-itm > .vpicn{ transform:scale(0.8); }
.dev-touch .vpg-lmap > .x-submaps > .x-itm > p,
.xp-f .vpg-lmap > .x-submaps > .x-itm > p{ height:40px; line-height:40px; padding:0 10px 0 40px; }
.xp-f .vpg-lmap > .x-submaps > .x-itm > .vpicn{ display:none; }
.xp-f .vpg-lmap > .x-submaps > .x-itm > p{ padding:0 10px; font-size:12px; }
/* 前マップへ移動ボタン */
.vpg-lmap > .x-maprow > .x-btn-prev{
position:absolute; z-index:3; overflow:hidden; top:50%; left:5px; right:auto; bottom:auto; background-color:#fff; box-shadow:0 2px 5px rgba(0,0,0,.75); border-radius:3px;
width:50px; height:50px; margin:-25px 0 0 0; transform-origin:0px 50%; pointer-events:auto; cursor:pointer; transition:opacity 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpg-lmap > .x-maprow > .x-btn-prev.h{ background-color:#fff5d8; }
.vpg-lmap > .x-maprow > .x-btn-prev.x-disabled{ opacity:0; pointer-events:none; }
.vpg-lmap > .x-maprow > .x-btn-next{
position:absolute; z-index:3; overflow:hidden; top:50%; left:auto; right:5px; bottom:auto; background-color:#fff; box-shadow:0 2px 5px rgba(0,0,0,.75); border-radius:3px;
width:50px; height:50px; margin:-25px 0 0 0; transform-origin:100% 50%; pointer-events:auto; cursor:pointer; transition:opacity 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpg-lmap > .x-maprow > .x-btn-next.h{ background-color:#fff5d8; }
.vpg-lmap > .x-maprow > .x-btn-next.x-disabled{ opacity:0; pointer-events:none; }
/* サブマップトグル */
.vpg-lmap > .x-maprow > .x-btn-smap{
position:absolute; z-index:3; overflow:hidden; top:5px; left:auto; right:5px; bottom:auto; background-color:#fff; box-shadow:0 2px 5px rgba(0,0,0,.75); border-radius:3px;
width:50px; height:50px; transform-origin:100% 0px; pointer-events:auto; cursor:pointer; transition:opacity 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpg-lmap > .x-maprow > .x-btn-smap.h{ background-color:#fff5d8; }
.vpg-lmap > .x-maprow > .x-btn-smap.x-disabled{ opacity:0; pointer-events:none; }
/* 拡大縮小ボタン */
.vpg-lmap > .x-maprow > .x-zoomer{
position:absolute; z-index:3; overflow:hidden; top:auto; left:auto; right:5px; bottom:5px; background-color:#fff; box-shadow:0 2px 5px rgba(0,0,0,.75); border-radius:3px;
width:50px; height:50px; transform-origin:100% 100%; pointer-events:auto; cursor:pointer; transition:opacity 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpg-lmap > .x-maprow > .x-zoomer.h{ background-color:#fff5d8; }
.vpg-lmap > .x-maprow > .x-zoomer.x-disabled{ opacity:0; pointer-events:none; }
/* 広域マップへ戻るボタン */
.vpg-lmap > .x-maprow .x-rtn{ position:absolute; z-index:5; overflow:hidden; top:auto; left:3px; right:auto; bottom:3px; height:35px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.75); border-radius:3px; pointer-events:auto; cursor:pointer; transition:all 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vpg-lmap > .x-maprow .x-rtn.h{ background-color:#fff5d8; }
.vpg-lmap > .x-maprow .x-rtn > .vpicn{ position:absolute; top:0; left:0; width:50px; height:50px; transform-origin:0px 0px; }
.vpg-lmap > .x-maprow .x-rtn > p{ overflow:hidden; margin:0 0 0 0; padding:0 10px 0 35px; color:#222; font-size:11px; line-height:35px; height:35px; text-overflow:ellipsis; white-space:nowrap; }
.vpg-lmap > .x-maprow .x-rtn.x-disabled{ opacity:0!important; pointer-events:none; cursor:default; }
.dev-touch .vpg-lmap > .x-maprow > .x-rtn,
.xp-f .vpg-lmap > .x-maprow > .x-rtn{ left:5px; bottom:5px; height:40px; }
.dev-touch .vpg-lmap > .x-maprow .x-rtn > p,
.xp-f .vpg-lmap > .x-maprow .x-rtn > p{ padding:0 10px 0 40px; line-height:40px; height:40px; }
/* マップがない場合のメッセージDOM */
.vpg-lmap > .x-maprow > .x-nomapicn{ position:absolute; overflow:hidden; top:50%; left:0; right:0; width:100%; height:60px; margin:-27px 0 0 0; opacity:0.5; }
.vpg-lmap > .x-maprow > .x-nomapicn > .vpicn{ position:absolute; top:0; left:50%; width:50px; height:50px; margin:0 0 0 -25px; transform-origin:50% 0; }
.vpg-lmap > .x-maprow > .x-nomapicn > p{ margin:35px 10px 0 10px; padding:0; height:30px; line-height:30px; text-align:center; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ------------------------------------------------------------------
(plugin) Tour control
*/
.vpg-tcn-base{ position:absolute; top:3px; left:3px; right:3px; bottom:3px; overflow:hidden; margin:0; padding:0; }
.vpg-tcn div{ position:relative; overflow:hidden; margin:0; padding:0; }
.vpg-tcn .vpicn{ opacity:0.9; }
.vpg-tcn{ position:relative; overflow:hidden; margin:0; padding:0; pointer-events:auto; width:100%; height:100%; background:#222; box-shadow:0 0 3px #000 inset; } /* transition:all 0.6s cubic-bezier(0.000, 0.000, 0.020, 0.990); */
.vpg-tcn-mtx{ position:absolute; z-index:2; overflow:hidden; top:50px; left:-1px; right:auto; bottom:50px; width:100%; max-width:150px; margin:0; pointer-events:none; background:transparent; }
.vpg-tcn-mtx table{ position:relative; width:100%; height:auto; border-collapse:collapse; margin:0; }
.vpg-tcn-mtx table td,th{ border:1px solid rgba(0,0,0,.8); font-size:10px; text-align:center; padding:3px; }
.vpg-tcn-mtx table th{ font-weight:700; background:rgba(255,255,255,.7); color:#222; }
.vpg-tcn-mtx table td{ background:rgba(0,0,0,.4); color:#fff; }
.vpg-tcn-mtx table tr.x-actv td{ background:rgba(13,148,65,.7); color:#fff; }
.vpg-tcn-mtx table tr.x-done td{ background:rgba(148,116,13,.7); color:#fff; }
/* Section Guide Bar */
.vpg-tcn-secbar{ position:absolute; z-index:20; top:0; left:0; right:0; bottom:auto; overflow:hidden; margin:0; padding:0; background:transparent; pointer-events:none; text-align:center; transition:margin-top 0.25s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vpg-tcn-secbar > div{ display:inline-block; position:relative; overflow:hidden; width:auto; margin:0 auto 15px auto; padding:0; background:#f7b90c; border-radius:0 0 5px 5px; box-shadow:0 0 15px rgba(0,0,0,.75); pointer-events:auto; }
.vpg-tcn-secbar p{ height:25px; line-height:25px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.vpg-tcn-secbar .x-tt{ min-width:50px; max-width:300px; margin:0; padding:0 10px; font-size:15px; color:#222; text-align:left; }
.vpg-tcn-secbar.x-disabled{ margin-top:-50px; }
.vpg-tcn .xc-logo{ position:absolute; top:0; left:0; pointer-events:none; transform-origin:0px 0px; transform:scale(0.4); }
/* Section controler */
.vpg-tcn .xc-sbx{ position:absolute; overflow:hidden; top:0; left:auto; right:0; width:340px; height:40px; margin:0; }
.vpg-tcn .xc-sbx .xc-icn{ /* 40x40 */ width:50px; height:50px; cursor:pointer; transform:scale(0.8); transform-origin:0px 0px; }
.vpg-tcn .xc-sbx .xc-icn.h{ background-color:#3a3a3a; box-shadow:0 0 8px rgba(255,255,255,0.2) inset; }
.vpg-tcn .xc-sbx .xc-icn.x-prvs-stop{ position:absolute; top:0; left:100px; right:auto; }
.vpg-tcn .xc-sbx .xc-icn.x-next-stop{ position:absolute; top:0; left:140px; right:auto; }
.vpg-tcn .xc-sbx .xc-icn.x-replay{ position:absolute; top:0; left:180px; right:auto; }
.vpg-tcn .xc-sbx .xc-icn.x-prvs{ position:absolute; top:0; left:220px; right:auto; }
.vpg-tcn .xc-sbx .xc-icn.x-play{ position:absolute; top:0; left:260px; right:auto; }
.vpg-tcn .xc-sbx .xc-icn.x-next{ position:absolute; top:0; left:300px; right:auto; }
.vpg-tcn .xc-sbx .xc-icn.x-disabled{ opacity:0.25; pointer-events:none; } /* 無効状態 */
.vpg-tcn .xc-sbx .xc-cnt{ position:absolute; overflow:hidden; top:0; left:0; width:100px; height:40px; pointer-events:none; }
.vpg-tcn .xc-sbx .xc-cnt p{
position:relative; width:65px; height:30px; margin:5px; padding:0 0 0 25px; line-height:30px; text-align:center; font-size:16px; font-weight:700; color:#333;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background-color:rgba(92,166,35,1); border-radius:2px; box-shadow:0 0 8px rgba(0,0,0,0.2) inset;
transition:background-color 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpg-tcn .xc-sbx .xc-cnt .vpicn{ position:absolute; top:5px; left:5px; width:50px; height:50px; pointer-events:none; transform:scale(0.6); transform-origin:0px 0px; }
.vpg-tcn .xc-sbx .xc-cnt.x-disabled{ opacity:0.25; } /* 無効状態 */
.vpg-tcn .xc-sbx .xc-cnt.x-disabled p{ background-color:#555; color:#ddd; } /* 無効状態 */
.vpg-tcn .xc-sbx .xc-cnt.x-active p{ color:#fdfdfd; background-color:rgba(255,129,25,1); } /* 再生中 */
/* Phase controler */
.vpg-tcn .xc-pbx{ position:absolute; overflow:hidden; top:0; left:50%; width:190px; height:40px; margin:0 0 0 -95px; }
.vpg-tcn .xc-pbx .xc-phs{ /* 35x35 */ position:absolute; cursor:pointer; width:50px; height:50px; transform:scale(0.7); transform-origin:0px 0px; transition:opacity 0.6s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vpg-tcn .xc-pbx .xc-phs.h{ background-color:#3a3a3a; box-shadow:0 0 8px rgba(255,255,255,0.2) inset; }
.vpg-tcn .xc-pbx .xc-phs.x-power{ top:0; left:0px; right:auto; }
.vpg-tcn .xc-pbx .xc-phs.x-prvs{ top:0; left:120px; right:auto; }
.vpg-tcn .xc-pbx .xc-phs.x-next{ top:0; left:155px; right:auto; }
.vpg-tcn .xc-pbx .xc-phs.x-disabled{ opacity:0.25; pointer-events:none; } /* 無効状態 */
.vpg-tcn .xc-pbx .xc-cnt{ position:absolute; overflow:hidden; top:0; left:35px; width:85px; height:35px; pointer-events:none; }
.vpg-tcn .xc-pbx .xc-cnt p{
position:relative; width:45px; height:25px; margin:5px; padding:0 0 0 30px; line-height:25px; text-align:center; font-size:12px; font-weight:700; color:#ddd;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background-color:#404040; border-radius:2px; box-shadow:0 0 8px rgba(255,255,255,0.2) inset;
transition:background-color 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990);
}
.vpg-tcn .xc-pbx .xc-cnt .vpicn{ position:absolute; top:5px; left:5px; width:50px; height:50px; pointer-events:none; transform:scale(0.5); transform-origin:0px 0px; }
.vpg-tcn .xc-pbx .xc-cnt.x-disabled{ opacity:0.25; } /* 無効状態 */
.vpg-tcn .xc-pbx .xc-cnt.x-disabled p{ background-color:#555; color:#ddd; } /* 無効状態 */
.vpg-tcn .xc-pbx .xc-bar{ position:absolute; overflow:hidden; top:36.5px; left:0; width:200px; height:2px; background-color:#404040; pointer-events:none; }
.vpg-tcn .xc-pbx .xc-bar .x-bar{ position:relative; width:1%; height:100%; background-color:#668f46; transition:width 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vpg-tcn .xc-pbx .xc-bar.x-disabled{ background-color:#222; }
.vpg-tcn .xc-pbx .xc-bar.x-disabled .x-bar{ background-color:#555; }
.vpg-tcn .xc-pbx .xc-bar.x-active .x-bar{ background-color:rgba(255,129,25,1); }
/* ------------------------------------------------------------------
(plugin) Touch and Go
*/
.vpg-tdg .vpicn{ transform:scale(0.8); }
.vpg-tdg div{ margin:0; padding:0; }
.vpg-tdg{ position:absolute; overflow:hidden; top:0; left:50%; width:300px; height:107px; margin:0 0 0 -150px; padding:0; background:transparent; pointer-events:none; }
.vpg-tdg > .x-bs{ position:relative; overflow:hidden; width:100%; height:100%; pointer-events:none; }
.vpg-tdg .x-tg-hdr{ position:absolute; z-index:2; top:0; left:50%; width:20px; height:50px; margin:0 0 0 -10px; background:transparent url(../imgs/vp_touchgo_h_b.png) no-repeat center top; background-size:20px 40px; pointer-events:none; }
.vpg-tdg .x-tg{ position:absolute; z-index:1; top:40px; left:25px; right:25px; bottom:25px; margin:0; box-shadow:0 1px 15px 5px rgba(0,0,0,.9); pointer-events:auto; background:#fdfdfd; border-radius:3px; }
.vpg-tdg .x-tg .x-icn-cancel{ position:absolute; top:1px; left:1px; right:auto; transform-origin:0px 0px; cursor:pointer; border-radius:2px 0 0 2px; }
.vpg-tdg .x-tg .x-icn-cancel.h{ background-color:#ccc; }
.vpg-tdg .x-tg .x-golabel{ position:absolute; top:1px; left:41px; right:1px; bottom:1px; background:#ea0000; overflow:hidden; border-radius:0 2px 2px 0; cursor:pointer; }
.vpg-tdg .x-tg .x-golabel.h{ background-color:#ff0000; }
.vpg-tdg .x-tg .x-golabel .x-icn-go{ position:absolute; top:0; left:auto; right:0; transform-origin:100% 0px; transform:scale(0.8); }
.vpg-tdg .x-tg .x-golabel p{
/* 128x30 */
position:absolute; top:5px; left:10px; right:40px; bottom:0px; font-size:12px; font-weight:400; line-height:30px; color:#fdfdfd; margin:0; padding:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vpg-tdg .x-tg .x-golabel p.x-multiline{ line-height:15px; }
/* ------------------------------------------------------------------
(plugin) Time-Shift-Controler
*/
.vpg-tscc div{ margin:0; padding:0; }
.vpg-tscc .vpicn{ transform:scale(0.7); }
.vpg-tscc{
position:absolute; z-index:4; overflow:hidden; top:auto; left:50%; right:auto; bottom:110px; width:70px; height:35px; padding:0; pointer-events:none;
transform-origin:50% 50%; transform:scale(1.25);
}
.vpg-tscc.x-hide{ display:none; }
.vpg-tscc.x2{ width:70px; margin:0 0 0 -35px; }
.vpg-tscc.x3{ width:105px; margin:0 0 0 -52.5px; }
.vpg-tscc .x-tsc{ position:relative; overflow:hidden; float:left; width:35px; height:35px; margin:0; padding:0; pointer-events:auto; cursor:pointer; }
.vpg-tscc .x-tsc .x-icn-base{ position:absolute; z-index:1; top:0; left:0; width:50px; height:50px; pointer-events:none; }
.vpg-tscc .x-tsc .x-icn-deactive{ position:absolute; z-index:2; top:0; left:0; width:50px; height:50px; pointer-events:none; opacity:0.7; transition:opacity 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vpg-tscc .x-tsc .x-icn-active{ position:absolute; z-index:3; top:0; left:0; width:50px; height:50px; pointer-events:none; opacity:0; transition:opacity 0.5s cubic-bezier(0.000, 0.000, 0.020, 0.990); }
.vpg-tscc .x-tsc.x-active .x-icn-deactive{ position:absolute; z-index:2; top:0; left:0; width:50px; height:50px; pointer-events:none; opacity:0; }
.vpg-tscc .x-tsc.x-active .x-icn-active{ position:absolute; z-index:3; top:0; left:0; width:50px; height:50px; pointer-events:none; opacity:1; }
.vpr-mob .vpg-tscc{ transform:scale(1); }