/* アプリ全体の枠 */
#vxlApp{
    font-family:"Arial";
    background-color:#EFEFEF;
    border:solid #999999 1px;
    color:#000000;
    width:900px;
    height:500px;
    left:0px; top:0px;
    position:relative;
    box-sizing: content-box;
}

/* 各項目のタイトルバー の色など*/
div.titleBar{
    font-family:"Arial";
    background-color:#000000;
    border:solid #999999 1px;
    color:#FFFFFF;
    line-height:0px;
    font-size:12px;
    position:absolute;
    box-sizing: content-box;
}

div.contents{
    font-family:"Arial";
    background-color:#F6F6F6;
    border:solid #999999 1px;
    color:#000000;
    position:absolute;
    box-sizing: content-box;
}

div #imagePath_vxlApp{
    display:none;
}

div.text_vxlApp{
    font-size:15px;
}

div.distance_vxlApp,
div.height_vxlApp,
div.spl_vxlApp{
    font-size:16px;
}


p.p_vxlAppTitle{
    margin:12px 0px 0px 0px;
}
p.p_vxlApp{
    margin:5px 0px 0px 0px;
}

img.img_vxlApp{
    background-color:#F6F6F6;
}

/* ボタンの色など */
input[type="button"].item_vxlApp{
    font-family:"Arial";
    background-color:#000000;
    color:#FFFFFF;
    border:solid #999999 0px;
    text-align:center;
    padding:1px 1px;
}
input[type="button"]:hover.item_vxlApp{
    background-color:#999999;
    cursor:pointer;
    text-align:center;
    padding:1px 1px;
}
input[type="button"]:disabled.item_vxlApp{
    background-color:#cccccc;
    color:#FFFFFF;
}
input[type="button"]:disabled:hover.item_vxlApp{
    background-color:#cccccc;
    color:#FFFFFF;
    cursor:default;
}


input[type="text"].item_vxlApp{
    font-family:"Arial";
    height: 22px;
    -moz-appearance:textfield;
    box-sizing:border-box;
}

input[type="text"].item_vxlApp::-webkit-outer-spin-button,
input[type="text"].item_vxlApp::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

/* スピーカーの設定枠 */
#speakerFrame{
    position:absolute; left:5px; top:5px;
}

#speakerTitle{
    width:165px; height:25px;
    position:absolute; left:0px; top:0px;
}

#speaker{
    width:165px; height:150px;
    position:absolute; left:0px; top:25px;
    line-height:5px;
    font-size:12px;
}

#speakerModelTitle{
    position:absolute; left:0px; top:0px;
}
#speakerModel{
    position:absolute; left:7px; top:15px;
    width:155px;
    height:19px;
    font-size:11px;
    font-weight:bold;   
}
#speakerAngleTitle{
    position:absolute; left:0px; top:40px;
}
#speakerAngle{
    position:absolute; left:102px; top:55px;
    width:60px;
    height:19px;
}
#speakerHeightTitle{
    position:absolute; left:0px; top:80px;
}
#speakerHeight{
    position:absolute; left:102px; top:97px;
    width:40px;
    text-align:right;
    ime-mode:disabled;
}
#speakerHeightInc{
    position:absolute; left:142px; top:97px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}
#speakerHeightDec{
    position:absolute; left:142px; top:108px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}

#speakerHeightEnd{
    position:absolute; left:20px; top:125px;
    text-align:right;
    line-height:6px;
}

/* リスナーの設定枠 */
#audienceFrame{
    position:absolute; left:5px; top:185px;
}
#audienceTitle{
    width:165px; height:25px;
    position:absolute; left:0px; top:0px;
}
#audience{
    width:165px;  height:120px;
    position:absolute; left:0px; top:25px;
    line-height:5px;
    font-size:12px;
}


#audienceNearTitle{
    position:absolute; left:0px; top:0px;
}
#audienceNear{
    position:absolute; left:102px; top:15px;
    width:40px;
    text-align:right;
    ime-mode:disabled;
}
#audienceNearInc{
    position:absolute; left:142px; top:15px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}
#audienceNearDec{
    position:absolute; left:142px; top:26px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}


#audienceFarTitle{
    position:absolute; left:0px; top:40px;
}
#audienceFar{
    position:absolute; left:102px; top:55px;
    width:40px;
    text-align:right;
    ime-mode:disabled;
}
#audienceFarInc{
    position:absolute; left:142px; top:55px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}
#audienceFarDec{
    position:absolute; left:142px; top:66px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}

#audienceSPLTitle{
    position:absolute; left:0px; top:80px;
}
#audienceSPL{
    position:absolute; left:102px; top:95px;
    width:40px;
    text-align:right;
    ime-mode:disabled;
}
#audienceSPLInc{
    position:absolute; left:142px; top:95px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}
#audienceSPLDec{
    position:absolute; left:142px; top:106px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}


/* ユニットの枠 */
#unitFrame{
    position:absolute; left:485px; top:130px;
}
#unitTitle{
    position:absolute; left:10px; top:20px;  
}

#unitChangeButton{
    width:160px; height:40px;
    position:absolute; left:0px; top:0px;
    line-height:0px;
    border:solid #999999 0px;
    background-color:rgba(0,0,0,0);
}

#unitMeter{
    width:50px; height:25px;
    position:absolute; left:50px; top:5px;
    background-color:#000000;
}

#unitFeet{
    width:50px; height:25px;
    position:absolute; left:110px; top:5px;
    background-color:#cccccc;
}

/* レンジの枠 */
#rangeFrame{
    position:absolute; left:655px; top:130px;
}
#rangeTitle{
    position:absolute; left:10px; top:15px;  
}

#range{
    width:240px; height:40px;
    position:absolute; left:0px; top:0px;
    line-height:0px;
    border:solid #999999 0px;
    background-color:rgba(0,0,0,0);
}

#range20{
    width:50px; height:25px;
    position:absolute; left:65px; top:5px;
    background-color:#000000;
}

#range35{
    width:50px; height:25px;
    position:absolute; left:125px; top:5px;
    background-color:#cccccc;
}

#range50{
    width:50px; height:25px;
    position:absolute; left:185px; top:5px;
    background-color:#cccccc;
}

/* 距離減衰の計算結果表示の枠 */
#audienceAreaFrame{
    position:absolute; left:175px; top:5px;
}
#audienceAreaTitle{
    width:280px;    height:25px;
    position:absolute; left:0px; top:0px;  
}
#audienceArea {
    text-align:center;
    width:280px;    height:90px;
    position:absolute; left:0px; top:25px;
    line-height:5px;
}


#difference text{
    font-size:14px;
}

/* difference枠内のアイテム */
#textNear{
    width:65px; height:20px;
    position:absolute; left:65px; top:8px;
}
#textFar{
    width:65px; height:20px;
    position:absolute; left:205px; top:8px;
}
#textDis{
    width:55px; height:20px;
    text-align:right;   line-height:20px;
    position:absolute; left:5px; top:20px;
}
#textHeight{
    width:55px; height:40px;
    text-align:right;   line-height:20px;
    position:absolute; left:5px; top:40px;
}
#textSpl{
    width:55px; height:60px;
    text-align:right;   line-height:20px;
    position:absolute; left:5px; top:60px;
}

.distance_vxlApp{
    background-color:#d9ecf8;
    border:solid #999999 0px;
    width:67px; height:20px;
    text-align:center;  line-height:20px;
    border:solid #999999 1px;
    box-sizing:border-box;
}
.height_vxlApp{
    background-color:#d9ecf8;
    border:solid #999999 0px;
    width:67px; height:20px;
    text-align:center;  line-height:20px;
    border:solid #999999 1px;
    box-sizing:border-box;
}
.spl_vxlApp{
    background-color:#9bc3e7;
    border:solid #999999 0px;
    width:67px; height:20px;
    text-align:center;  line-height:20px;
    border:solid #999999 1px;
    box-sizing:border-box;
}

#distanceNear{
    position:absolute; left:65px; top:20px;
}
#distanceDiff{
    position:absolute; left:137px; top:20px;
    background-color:#F6F6F6 !important;
    border:solid #999999 0px;
}
#distanceFar{
    position:absolute; left:205px; top:20px;
}
#heightNear{
    position:absolute; left:65px; top:40px;
}
#heightFar{
    position:absolute; left:205px; top:40px;
}
#splNear{
    position:absolute; left:65px; top:60px;
}
#splDiff{
    position:absolute; left:137px; top:60px;
    background-color:#F6F6F6 !important;
    border:solid #999999 0px;
}
#splFar{
    position:absolute; left:205px; top:60px;
}
#arrow{
    background-color:#F6F6F6;
    width:73px; height:15px;
    position:absolute; left:132px; top:42px;
}


/* Spatial Pointの枠 */
#spatialSPLFrame{
    position:absolute; left:460px; top:5px;
}
#spatialSPLTitle{
    width:155px;    height:25px;
    position:absolute; left:0px; top:0px;  
}
#spatialSPL {
    text-align:center;
    width:155px;    height:90px;
    position:absolute; left:0px; top:25px;
    line-height:5px;
}


#spatialSPL text{
    font-size:14px;
}

/* Spatial Point枠内のアイテム */
#textPoint1{
    width:65px; height:10px;
    position:absolute; left:7px; top:8px;
    color:#cccccc;
}
#textPoint2{
    width:65px; height:10px;
    position:absolute; left:82px; top:8px;
    color:#cccccc;
}

#distancePoint1{
    position:absolute; left:7px; top:20px;
    background-color:#cccccc;
    color:#ffffff;
    border:solid #999999 1px;
}
#distancePoint2{
    position:absolute; left:82px; top:20px;
    background-color:#cccccc;
    color:#ffffff;
    border:solid #999999 1px;
}
#heightPoint1{
    position:absolute; left:7px; top:40px;
    background-color:#cccccc;
    color:#ffffff;
    border:solid #999999 1px;
}
#heightPoint2{
    position:absolute; left:82px; top:40px;
    background-color:#cccccc;
    color:#ffffff;
    border:solid #999999 1px;
}
#splPoint1{
    position:absolute; left:7px; top:60px;
    background-color:#cccccc;
    color:#ffffff;
    border:solid #999999 1px;
}
#splPoint2{
    position:absolute; left:82px; top:60px;
    background-color:#cccccc;
    color:#ffffff;
    border:solid #999999 1px;
}

/* 画像描画用の枠 */
#graphicsBack{
    width: 720px;
    height: 360px;
    position:absolute; left:175px; top:130px;
    overflow:auto;
    box-sizing: content-box;
}

#graphics{
    width:720px; height:360px;
    position:absolute; left:0px; top:0px;
    box-sizing: content-box;
}

#graphicsView{
    background-color:rgba(255, 255, 255, 0);
    border:solid #000000 0px;
    color:#000000;
    width:720px;
    height:360px;
    position:absolute; left:0px; top:0px;
    box-sizing: content-box;
    -webkit-tap-highlight-color:transparent;
}

#attenuationImageView{
    background-color:#ffffff;
    border:solid #000000 0px;
    color:#000000;
    width:651px;
    height:100px;
    position:absolute; left:35px; top:180px;
    box-sizing: content-box;
}

#audienceLineView{
    background-color:rgba(255, 255, 255, 0);
    border:solid #000000 0px;
    color:#000000;
    width:651px;
    height:100px;
    position:absolute; left:36px; top:180px;
    box-sizing: content-box;
}

#audienceView{
    background-color:rgba(255, 255, 255, 0);
    border:solid #000000 0px;
    color:#000000;
    width:651px;
    height:100px;
    position:absolute; left:36px; top:180px;
    box-sizing: content-box;
    -webkit-tap-highlight-color:transparent;
}

#differenceInSPLView{
    font-family:"Arial";
    background-color:rgba(255, 255, 255, 0);
    border:solid #00ff00 0px;
    color:#000000;
    width:720px;
    height:50px;
    position:absolute; left:0px; top:305px;
    box-sizing: content-box;
}


/* 警告文の枠 */
#cautionText{
    font-family:"Arial";
    font-size:12px;
    background-color:#EFEFEF;
    color:#ff0000;
    border:solid #999999 0px;
    text-align:left;
    width:280px;    height:60px;
    position:absolute; left:620px; top:5px;
    box-sizing: content-box;
    line-height:13px;
}


/* 凡例の図 */
#legendOfContourMap{
    background-color:#999999;
    color:#ff0000;
    width:275px;    height:55px;
    position:absolute; left:620px; top:65px;
    box-sizing: content-box;
}


/* クリックした位置の情報の枠 */
#spatialPointFrame{
    position:absolute; left:5px; top:335px;
}

#spatialPointTitle{
    width:165px; height:25px;
    position:absolute; left:0px; top:0px;
}

#spatialPointContents{
    width:165px; height:130px;
    position:absolute; left:0px; top:25px;
    line-height:5px;
    font-size:12px;
}

#spatialPointHR{
    width:156px; height:0px;
    position:absolute; left:4px; top:58px;
    border-top:1px solid #999999;
}


#spatialSPL1{
     position:absolute; left:5px;top:2px;
}

#spatialSPL2{
    position:absolute; left:5px;top:67px;
}


#spatialPoint1DistanceTitle{
    position:absolute; left:18px; top:22px;
    color:#cccccc;
}
#spatialPoint1Distance{
    position:absolute; left:20px; top:37px;
    width:40px;
    text-align:right;
    ime-mode:disabled;
}
#spatialPoint1DistanceInc{
    position:absolute; left:60px; top:37px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}
#spatialPoint1DistanceDec{
    position:absolute; left:60px; top:48px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}

#spatialPoint1HeightTitle{
    position:absolute; left:102px; top:22px;
    color:#cccccc;
}
#spatialPoint1Height{
    position:absolute; left:102px; top:37px;
    width:40px;
    text-align:right;
    ime-mode:disabled;
}
#spatialPoint1HeightInc{
    position:absolute; left:142px; top:37px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}
#spatialPoint1HeightDec{
    position:absolute; left:142px; top:48px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}



#spatialPoint2DistanceTitle{
    position:absolute; left:18px; top:87px;
    color:#cccccc;
}
#spatialPoint2Distance{
    position:absolute; left:20px; top:102px;
    width:40px;
    text-align:right;
    ime-mode:disabled;
}
#spatialPoint2DistanceInc{
    position:absolute; left:60px; top:102px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}
#spatialPoint2DistanceDec{
    position:absolute; left:60px; top:113px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}

#spatialPoint2HeightTitle{
    position:absolute; left:102px; top:87px;
    color:#cccccc;
}
#spatialPoint2Height{
    position:absolute; left:102px; top:102px;
    width:40px;
    text-align:right;
    ime-mode:disabled;
}
#spatialPoint2HeightInc{
    position:absolute; left:142px; top:102px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}
#spatialPoint2HeightDec{
    position:absolute; left:142px; top:113px;
    width:20px; height:11px;
    text-align:center;  font-size:xx-small;
}