
.SncPFV {
    z-index: 0;
    position: relative;
    background-color: black;
    color: black;
    font-size: 12px;
}

.SncPFV ul {
    clear: both; /* required for IE7 */
    list-style-type: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.SncPFV > .monitor {
    z-index: 1;
    position: absolute;
    background-color: black;
}

.rtl .SncPFV > .monitor > div {
    left: auto;
    /* [BugFix] アラビア語で画像サイズのアスペクト比がモニタサイズのそれと異なる場合に表示がずれる不具合の修正 */
    /* right: 80px; */
}

.rtl .areazoom {
    right: 0px;
}

.SncPFV > .frame {
    z-index: 2;
    position: absolute;
}
/**** 枠を作る各DIVは、W=H=100%を前提にRight,Bottomの位置を決めるのでSpriteだとJS制御になる。よってとりあえず非Spriteで実装 ***/
.SncPFV > .frame > div {
    position: absolute;
    width: 100%;
    height :100%;
}
.SncPFV > .frame > div.left {
    background: url(img/l.png) repeat-y left top;
    left: -4px;
}
.SncPFV > .frame > div.right {
    background: url(img/r.png) repeat-y right top;
    right: -4px;
}
.SncPFV > .frame > div.top {
    background: url(img/t.png) repeat-x top;
    top: -4px;
}
.SncPFV > .frame > div.bottom {
    background: url(img/b.png) repeat-x bottom;
    bottom: -30px;
}
.SncPFV > .frame > div.topleft {
    background: url(img/tl.png) no-repeat left top;
    top: -4px;
    left: -4px;
}
.SncPFV > .frame > div.topright {
    background: url(img/tr.png) no-repeat right top;
    top: -4px;
    right: -4px;
}
.SncPFV > .frame > div.bottomleft {
    background: url(img/bl.png) no-repeat left bottom;
    bottom: -30px;
    left: -4px;
}
.SncPFV > .frame > div.bottomright {
    background: url(img/br.png) no-repeat right bottom;
    bottom: -30px;
    right: -4px;
}

.pausescreen {
    z-index: 3;
    position: absolute;
    background-color: black;
    -moz-opacity:0.5;
    opacity:0.5;
    filter: alpha(opacity=50);
    background: black url(img/loading.gif) no-repeat center center;
    cursor: default;
}
.pausescreen.prepared {
    background-image: url(img/start.png);
    cursor: pointer;
}


.areazoom {
    z-index: 3;
    position: absolute;
}


.SncPFV > .cbuttons {
    z-index: 2;
    position: absolute;
}

.SncPFV > .cbuttons > ul {
    position: absolute;
    bottom: -26px;
    left: 0;
}
.SncPFV > .cbuttons > ul > li.cbtn {
    cursor: pointer;
    background-image: url(img/sprite.png);
    background-repeat : no-repeat ;
    width : 20px ;
    height : 20px ;
    float: left;
    position: relative;
    margin-right: 2px;
}
.SncPFV > .cbuttons > ul > li.cbtn.disabled,
.SncPFV > .cbuttons > ul > li.cbtn.disabled:hover,
.SncPFV > .cbuttons > ul > li.cbtn.disabled:active {
    cursor: default;
}
.menubutton {
    background-position : -636px top ;
}
.menubutton:hover {
    background-position : -676px top ;
}
/*
.menubutton:active {
    background-position : -656px top ;
}
*/
.playbutton {
    background-position : -364px top ;
}
.playbutton:hover {
    background-position : -324px top ;
}
.playbutton:active {
    background-position : -304px top ;
}
.playbutton.pause {
    background-position : -404px top ;
}
.playbutton.pause:hover {
    background-position : -384px top ;
}
.playbutton.pause:active {
    background-position : -424px top ;
}
.triggerbutton {
    background-position : -504px top ;
}
.triggerbutton:hover {
    background-position : -464px top ;
}
.triggerbutton:active {
    background-position : -444px top ;
}
.triggerbutton.disabled,
.triggerbutton.disabled:hover,
.triggerbutton.disabled:active {
    background-position : -484px top ;
}
.presetbutton {
    background-position : -584px top ;
}
.presetbutton:hover {
    background-position : -544px top ;
}
/*
.presetbutton:active {
    background-position : -524px top ;
}
*/
.presetbutton.disabled,
.presetbutton.disabled:hover,
.presetbutton.disabled:active {
    background-position : -564px top ;
}
.capturebutton {
    background-position : -60px top ;
}
.capturebutton:hover {
    background-position : -20px top ;
}
.capturebutton:active {
    background-position : -40px top ;
}
.capturebutton.disabled,
.capturebutton.disabled:hover,
.capturebutton.disabled:active {
    background-position : left top ;
}
.volumebutton {
    background-position : -744px top ;
}
.volumebutton:hover {
    background-position : -784px top ;
}
.volumebutton:active {
    background-position : -804px top ;
}
.volumebutton.disabled,
.volumebutton.disabled:hover,
.volumebutton.disabled:active {
    background-position : -764px top ;
}
.exptzbutton {
    background-position : -80px top ;
}
.exptzbutton:hover {
    background-position : -120px top ;
}
.exptzbutton:active {
    background-position : -100px top ;
}
.exptzbutton.disabled,
.exptzbutton.disabled:hover,
.exptzbutton.disabled:active {
    background-position : -140px top ;
}



ul.menu {
    z-index: 9;
    position: relative;
    top: 20px;
}
ul.menu,
ul.menu ul {
    display: none;
    border: solid 1px #999999;
    background: white;
    zoom: 1; /* Clearfix for IE */
}
ul.menu > li {
    position: relative;
    line-height: 20px;
    padding: 4px;
    cursor: pointer;
}
ul.menu > li > .indicator {
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 0;
    width : 10px ;
    height : 10px ;
    background-position : -736px top ;
}
ul.menu li:hover,
li.activemenu {
    background-color: #3366ff;
    color: white;
}
ul.menu > li:hover > .indicator,
ul.menu > li.activemenu > .indicator {
    background-position : -746px top ;
}
ul.submenu {
    z-index: 10;
    position: absolute;
    top: -3px;
}
ul.submenu > li {
    color: black;
}
ul.submenu > li > .indicator {
    visibility: hidden;
}
ul.submenu > li.selected > .indicator {
    visibility: visible;
}
ul.submenu > li.selected > .indicator {
    display: inline-block;
    position: absolute;
    left: 2px;
    top: 8px;
    width : 10px ;
    height : 10px ;
    background-position : -716px top ;
}
ul.submenu > li.selected:hover > .indicator {
    background-position : -726px top ;
}
ul.submenu > li > span {
    margin-left: 10px;
}
.rtl ul.submenu > li > span {
    margin-left: auto;
    margin-right: 10px;
}
ul.menu li.disabled,
ul.menu li.disabled:hover {
    cursor: default;
    color: silver;
    background-color: white;
}
ul.menu li.disabled .indicator {
    visibility: hidden;
}

.presetmenu > li,
.presetmenu .preset-name span {
    line-height: 24px;
}
.presetmenu .thumbnail {
    display: inline-block;
    width: 32px;
    height: 24px;
    background-position : -604px top ;
    position: absolute;
    left: 2px;
}
.presetmenu .preset-group .thumbnail {
    display: none;
}
.presetmenu .preset-name span {
    position: relative;
    left: 34px;
}
.presetmenu .preset-group,
ul.menu.presetmenu li.disabled:hover {
    color: #336699;
    font-style: italic;
    font-weight: bolder;
    font-size: smaller;
}

/* under building */
.SncPFV.building > * {
    visibility: hidden;
}
.SncPFV.building > .pausescreen {
    visibility: visible;
    -moz-opacity:1;
    opacity:1;
    filter: alpha(opacity=100);
    cursor: default;
}
.SncPFV.building > .frame {
    visibility: visible;
}


.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}  /* for IE7/Mac */


/* using sprite.png */
.menu .indicator,
.presetmenu .thumbnail {
    background-image: url(img/sprite.png);
    background-repeat : no-repeat ;
}
    



/* ptz toolbar */
.ptz-toolbar {
    position: absolute;
    z-index: 3;
    display: block;
}

.rtl .ptz-toolbar {
    right: 0px;
}

.ptz-toolbar .icon {
    background-image: url(img/sprite.png);
    background-repeat : no-repeat ;
    width : 13px ;
    height : 13px ;
    position: absolute;
    cursor: pointer;
}
.ptz-toolbar .icon.bg {
    opacity: 0.5;
    -moz-opacity:0.5;
    filter: alpha(opacity=50);
}
/*--- filename : ptz-up.png ---*/
.ptz-toolbar .icon.up {
    background-position : -756px top ;
    left: 13px;
}
/*--- filename : ptz-up_h.png ---*/
.ptz-toolbar .icon.up:hover {
    background-position : -769px top ;
}
/*--- filename : ptz-left.png ---*/
.ptz-toolbar .icon.left {
    background-position : -782px top ;
    top: 6px;
    left: 0px;
}
/*--- filename : ptz-left_h.png ---*/
.ptz-toolbar .icon.left:hover {
    background-position : -795px top ;
}
/*--- filename : ptz-down.png ---*/
.ptz-toolbar .icon.down {
    background-position : -808px top ;
    top: 13px;
    left: 13px;
}
/*--- filename : ptz-down_h.png ---*/
.ptz-toolbar .icon.down:hover {
    background-position : -821px top ;
}
/*--- filename : ptz-right.png ---*/
.ptz-toolbar .icon.right {
    background-position : -834px top ;
    top: 6px;
    left: 26px;
}
/*--- filename : ptz-right_h.png ---*/
.ptz-toolbar .icon.right:hover {
    background-position : -847px top ;
}
/*--- filename : ptz-tele.png ---*/
.ptz-toolbar .icon.tele {
    background-position : -860px top ;
    top: 6px;
    left: 39px;
}
/*--- filename : ptz-tele_h.png ---*/
.ptz-toolbar .icon.tele:hover {
    background-position : -873px top ;
}
/*--- filename : ptz-wide.png ---*/
.ptz-toolbar .icon.wide {
    background-position : -886px top ;
    top: 6px;
    left: 52px;
}
/*--- filename : ptz-wide_h.png ---*/
.ptz-toolbar .icon.wide:hover {
    background-position : -899px top ;
}
/*--- filename : ptz-bg.png ---*/
.ptz-toolbar .icon.bg {
    background-position : -912px top ;
}
