@font-face {
  font-family: 'gothic';
	src: url('../fonts/gothic/century_gothic.eot');
	src: url('../fonts/gothic/century_gothic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/gothic/century_gothic.woff') format('woff'),
		url('../fonts/gothic/century_gothic.ttf') format('truetype'),
		url('../fonts/gothic/century_gothic.svg#ArialMT') format('svg');
}
#loadInfo {
    position: absolute;
    width: 176px;
    height: 50px;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    font-size: 24px;
    text-align: center;
}
#main_cont{
        opacity: 0;
}

#slider
{
    width: 465px !important;
    top: 35px !important;
    position: absolute !important;
    left: 44px !important;	
	z-index:100003;

}

#slider-vertical
{
    width: 3px !important;
    top: 62px !important;
    position: absolute !important;
    left: 20px !important;
    height: 190px;
    z-index: 100003;
	/* -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg); */

}


#slider >span.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{

background:#e8e8e8 !important;
    width: 30px !important;
    height: 22px !important;
	    background-image: url(../images/p3DragBtn.png) !important;
//	margin-left:3px;
border:none !important;
border-radius: 0px !important;

}
#slider-vertical >ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
   background:#cacaca !important;
    width: 10px !important;
    height: 10px !important;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
	margin-left:-4px;
	//margin-top:2px;
    border-radius: 40px !important;
}
/* #slider-vertical >span.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{


} */

#slider-vertical >.ui-slider-vertical {
    width: .4em;
    height: 100px !important;
}

 #slider.ui-widget-content {
     border: 0px solid #dddddd !important; 
     background: transparent !important; 
    color: #333333;

}
 #slider-vertical>div.ui-widget-header {
    border: 1px solid #dddddd;
   background: #dddddd;
    color: #dddddd;
    font-weight: bold;
}
 #slider-vertical.ui-widget-content {
     border: 1px solid #cacaca !important; 
     background: #cacaca !important; 
    color: #333333;

}



body {
    overflow: hidden;
    font-family: 'gothic';
    margin: 0px;
    font-size: 16px;
}
#canvas{

display:none;
//z-index:100000;
position:absolute;top:0px;left:0px;right:0px;border:0px solid red;
background:rgba(0,0,0,0);
}
#txt_1{z-index:100000;}
#canvas:hover{//cursor:pointer}
#main_cont {
    height: 600px;
    width: 800px;
    background-color: #666666;
    border: 1px solid;
    position: relative;
	border:0px solid red;
}

#container {
    position: relative;
    width: 99%;
    background-color: #666666;
    height: 430px;
    top: 4px;
    border: 1px solid #909090;
    background-size: 100% 100%;
    background-image: url(../images/bg_img.png);
    
    overflow: hidden;
}

#header{
    width: 100%;
    height: 30px;
    background-image: url(../images/headeLine_bg.png);
    background-repeat: repeat-x;
}

.showData{
    width: 82px;
    height: 22px;
    position: absolute;
    top: 3px;
    left: 680px;
    background-image: url(../images/showData.png);
    background-repeat: no-repeat;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    font-size: 12px;
    cursor: pointer;
}

.showData:hover
{
    background-image: url(../images/showData_h.png);
   
}

#show_table{
    position: absolute;
    top: 25px;
    left: 437px;
    border: 1px solid #000;
    width: 360px;
    height: 160px;
    z-index: 10;
    display: none;
	z-index:100000000000;
}

.row1{    
    width: 100%;
    height: 30px;
    position: relative;
    background-image: url(../images/tableHeader1_line.png);
    background-repeat: repeat-x;
}

#TableTxt{    
    width: 92%;
    float: left;
    margin: 5px 0px 0px 10px;
    font-weight: bold;
}

#close{
    float: left;
    width: 15px;
    height: 17px;
    margin-top: 8px;
    background-image: url(../images/close_btn.png);
    background-repeat: no-repeat;
    cursor: pointer;
}

#close:hover{
    background-image: url(../images/close_btn_h.png);
    background-repeat: no-repeat;
}

.row2{
    background-color: #ffffff;
    height: 130px;
        padding-top: 14px;
}

.table{
    position: relative;
    width: 330px;
    height: 107px;
    top: 10px;
    left: 15px;
    border: 1px solid;
}

.row{
    float: left;
    width:100%;
    height:20px;
    border-bottom: 1px solid #e6e6e6;
    cursor: default;
}

.row:hover{
    background-color: #cedbef;
}

.row_head{
    position: relative;
    width: 100%;
    height: 15px;
    margin-top: 8px;
    border-bottom: 1px solid;
    cursor: default;
}

.col1{
    float: left;
    width:13%;
    height:20px; 
    font-size: 12px;
    text-indent: 5px;
    padding-top: 3px;
    border-right: 1px solid #e6e6e6;
}
.col2{
    float: left;
    width: 33%;
    height:20px; 
    font-size: 12px;
    text-indent: 5px;
    padding-top: 3px;
    border-right: 1px solid #e6e6e6;
}
.col3{
    float: left;
    width:53%;
    height:20px; 
    font-size: 12px;
    text-indent: 5px;
    padding-top: 3px;
}
.hcol1{
    float: left;
    width:13%;
    height:20px; 
    font-size: 12px;
    text-indent: 5px;
    padding-top: 3px;
    
}
.hcol2{
    float: left;
    width: 33%;
    height:20px; 
    font-size: 12px;
    text-indent: 5px;
    padding-top: 3px;
 
}
.hcol3{
    float: left;
    width: 53%;
    height:20px; 
    font-size: 12px;
    text-indent: 5px;
    padding-top: 3px;
}
.hcol{
    background-image: url(../images/tableHeader2_line.png);
    background-repeat: repeat-x;
    border-bottom: 1px solid;
    border-right: 1px solid;    
    margin-top: -7px;
    font-weight: bold;
}

.hcol:hover{
    background-image: url(../images/tableHeader2_line_h.png);
}



.all_pages
{
    position: absolute;
    top: 31px;
    height: 503px;
    width: 800px;
    overflow: hidden;
   /* border: 1px solid #fff;*/
}
.pages
{
    position: absolute;
    top: 31px;
    height: 503px;
    width: 800px;
    margin-top: -25px;
   /* border: 1px solid #fff;*/
}

#page_1,#page_2,#page_3,#page_4,#page_5
{
    display: none;
    left: 800px;
}




.heading
{
    position:relative;
    width: 99%;
    height: 30px;
    text-align: center;
    margin-top: 7px;
    font-size: 18px;
    font-weight: bold;
    /*border: 1px solid #fff;*/
    color:#fff;
}

#P1_img_1
{
    position:relative;
    width: 79%;
    height: 220px;
    background-image: url(../images/p1img_1.png);
        margin: 30px 0px 0px 150px;
    background-repeat: no-repeat;
   /* border: 1px solid #fff;*/
}

#P1content
{
    position:relative;
    width: 99%;
    height: 30px;
   /* border: 1px solid #fff;*/
    color:#fff;
}

.subhead
{
    position:relative;
    width: 99%;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    margin: 0px 0px 0px 22px;
    /* border: 1px solid #fff;*/
}

#previous_btn
{
    position:absolute;
    top:540px;
    left: 30px;
    width: 71px;
    height: 16px;
    font-size: 12px;
    text-align: center;
    padding: 3px 0px;
    background-image: url("../images/btn.png");
    cursor: pointer;
	background-size:100% 100%;
	
	z-index:100000000;
}

#next_btn
{
    position:absolute;
    top:540px;
    left: 690px;
    width: 71px;
    height: 16px;
    font-size: 12px;
    text-align: center;
    padding: 3px 0px;
    background-image: url("../images/btn.png");
	background-size:100% 100%;
    cursor: pointer;
	z-index:100000000;
}

#previous_btn:hover,#next_btn:hover
{
    background-image: url("../images/btn_h.png");
}

.list_1
{
    margin-top: -1px;
    line-height: 26px;
    font-size: 14px;
}




#P2_img_1
{
    float: left;
    width: 480px;
    height: 500px;
    margin: 0px 0px 0px 20px;
    background-image: url("../images/p2img_1.png");
    background-repeat: no-repeat;
}

#P2content
{
    float: left;
    margin: 110px 0px 0px 0px;
    width: 230px;
    border: 1px solid #000;
}

#P2sub_head
{
       position: relative;
    font-size: 14px;
    font-weight: bold;
    height: 19px;
    padding: 7px;
    border-bottom: 1px solid #000;
    background-color: #dddddd;
}
.P2txt
{
    position:relative;
    padding: 6px;
    color: #fff;
}

#txt_1
{
   font-size: 14px;
    font-weight: bold;
}

#txt_2
{
     font-size: 12px;
   
}

#txt_3
{
    font-size: 14px;
    font-weight: bold;
    color: #b2cfe3;
}

#P2txtBox_1
{
    width: 50px;
    border: none;
    margin: 3px 0px 0px 9px;
}


#P3_img_1
{
    position: relative;
    width: 640px;
    height: 260px;
    margin: 10px 0px 0px 20px;
    border: 1px solid;
}
#chartContainer
{
    position: relative;
    width: 780px;
    height: 330px;
    margin: 10px 0px 0px 5px;
    /*border: 1px solid;*/
}


#P3_drag
{
    position: absolute;
    top: 59px;
    left: 105px;
    width: 300px;
    height: 50px;
    /*border: 1px solid;*/
}

.P3_txt
{
    position: relative;
    color: #fff;
    font-size: 12px;
    margin: 5px;
}

#btn_1
{
    top: 30px;
    left: 5px;
    cursor: pointer;
	z-index:100003;
}

/*#btn_2
{
   
    top: 30px;
    left: 265px;
    cursor: pointer;
}*/

#drag_img
{   
    position: absolute;
    top: 38px;
    left: 40px;
    width: 210px;
    height: 5px;
    border: 1px solid #cbcbcb;
    background-color: #cbcbcb;
    opacity: 0;
}

.P3btn
{
    position: absolute;
    width:30px;
    height: 22px;
    background-image: url('../images/p3DragBtn.png');
	background-size:100% 100%;
}

.P3btn:hover
{
    background-image: url('../images/p3DragBtn_h.png');
}
/*
.drag_box
{
    position: absolute;
    width: 15px;
    height: 226px;
   // border: 1px solid;
    top: 60px;
    left: 7px;
}

#drag_line
{
    position: absolute;
    left: 5px;
    top:0px;
    width: 5px;
    height: 230px;
    background-image: url('../images/dragline.png');
    background-repeat: no-repeat;
}


#drag_point
{
    width: 14px;
    height: 14px;
    border-radius: 30px;
    background-image: url('../images/dragPoint.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 1px;
    z-index: 1;
    cursor: pointer;
}

#drag_point:hover
{
    background-image: url('../images/dragPoint_h.png');
}*/

.col_1
{
    float: left;
    width: 280px;
    height: 90px;
    
    margin: 0px 0px 0px 60px;
    color: #fff;
}
.col_2
{
        float: left;
    width: 390px;
    height: 90px;
    margin: 0px 0px 0px 60px;
    color: #fff;
}


.P3txt_1
{
    position: relative;
    top: 40px;
    left: -4px;
    font-size: 17px;
}

.P3TxtBox
{
    width: 60px;
    height: 17px;
    position: relative;
    outline: transparent;
    border: none;
	z-index:100000;
}
/*.P333TxtBox
{
    width: 60px;
    height: 17px;
    position: relative;
    outline: transparent;
    border: none;
}*/
#P3TxtBox_1,#P3TxtBox_3
{    
    top: 0px;
    left: 60px;    
}

#P3TxtBox_2
{
    top: 13px;
    left: 60px;
}
#P3TxtBox_4
{
    top: 13px;
    left: 80px;
}
.P3txt_2
{
    width: 90px;
    height: 1px;
    position: relative;
    top: 8px;
    left: 48px;
    background-color: #fff;
}
#P3txt_2
{
    width: 120px;
    height: 1px;
    position: relative;
    top: 8px;
    left: 48px;
    background-color: #fff;
}

.P3txt_3
{
    position: relative;
    top: -24px;
    left: 150px;
}

#P3txt_3
{
    position: relative;
        top: -24px;
    left: 176px;
}

.P3txt_4
{
    position: relative;
    width: 125px;
    height: 30px;
    top: -45px;
    left: 190px;
    color: #a1cfe3;
    font-weight: bold;
}
.P33txt_4
{
    position: relative;
    width: 175px;
    height: 30px;
    top: -45px;
        left: 216px;
    color: #a1cfe3;
    font-weight: bold;
}



.P3_res
{
        position: absolute;
    top: 467px;
    left: 270px;
    width: 470px;
}

.P3txt_9
{
    float: left;
    width: 145px;
    color: #fff;
}

.P3txt_10
{
    color: #a1cfe3;
    font-weight: bold;
}
.float
{
    float:left;
}

.P4img
{
    position: relative;
    width: 790px;
    height: 230px;
    border: 1px solid;
}
.P4tab1
{
    position: relative;
    width: 770px;
    height: 118px;
    margin: 15px 0px 0px 15px;
    border: 1px solid;
}
.P4tab2
{
    position: relative;
    width: 770px;
     height: 85px;
    margin: 5px 0px 0px 15px;
    border: 1px solid;
}
.P5tab2
{
    position: relative;
    width: 770px;
     height: 125px;
    margin: 5px 0px 0px 15px;
    border: 1px solid;
}

.P4row
{
    position: relative;
    width: 98.3%;
    height: 19px;
    font-size: 14px;
    font-weight: bold;
    padding: 6px;
    background-image: url(../images/headeLine_bg.png);
    background-repeat: repeat-x;
}
.P4txt1
{
    position: relative;
    font-size: 12px;
    margin: 8px 8px 16px 8px;
    color: #ffffff;
    width: 100%;
    clear: both;
}
.P4txt_1
{
    border: none;
    width: 70px;
}
.bold
{
    font-weight: bold;
}
.P4txt2
{
    float:left;       
    font-size: 12px;
    color: #ffffff;
    width: 100%
}

.P4txt_2
{
    float:left;       
    font-size: 12px;
    margin: 8px;
    color: #ffffff;
}
.P4txt_22
{
       float: left;
    font-size: 12px;
    font-weight: bold;
    margin: 0px 8px;
    color: #b2cfe3;
    width: 48%;
    height: 22px;    
}
.P4ly_Km_res
{
       float: left;
    font-size: 12px;
    font-weight: bold;
    margin: 0px 8px;
    color: #b2cfe3;
    width: 48%;
    height: 22px;    
}
.P4txt_23
{
         float: left;
    font-size: 12px;
    font-weight: bold;
    margin: 8px 0px 0px 8px;
    color: #b2cfe3;
    width: 37%;
    height: 22px; 
}

.P4fraction{
        float: left;
}
#P4ly_Km{
        float: left;
}
.P5fraction{
           float: left;
    margin: 5px;
}

.P4U
{
    text-align: center;
}
.P5U
{
    color:#fff;
    text-align: center;
    font-size: 12px;
}

.P4M,.P5M
{
    width: 52px;
    height: 1px;
    background-color: #ffffff;
    margin:2px;
}

.P5txt_22
{
    float: left;
    font-size: 12px;
    font-weight: bold;
        margin: 14px 8px;
    color: #b2cfe3;
    width: 68%;
    height: 22px;    
}

.P5equal_btn
{
    float: left;
    margin: 12px 5px 5px 5px;
    width: 69px;
    height: 20px;
    text-align: center;
    background-image: url("../images/btn.png");
    background-repeat: no-repeat; 
   cursor:pointer;	
}
.P5equal_btn:hover
{
    background-image: url("../images/btn.png");
    
}
#line1_grahpTxt1
{
        position: absolute;
    left: 390px;
    top: 274px;
    color: #ffffff;
    font-size: 14px;
}

#line1_grahpTxt2
{
       position: absolute;
    left: 520px;
    top: 152px;
    color: #ffffff;
    font-size: 14px;
}

::-webkit-input-placeholder {
      font-style: italic;
    font-size: 12px;
    
}
::-moz-input-placeholder {
      font-style: italic;
    font-size: 12px;
    
}
::-ms-input-placeholder {
      font-style: italic;
    font-size: 12px;
    
}



#slider1{
    width: 14px;
    height: 14px;
/*  border:1px solid;
    background-color:#ccc;*/
    margin-left:-4px;
    position:absolute;
    z-index: 100002;
    background-image: url('../images/dragPoint.png');
    background-repeat: no-repeat;
    border-radius: 30px;
    cursor: pointer;
}

#slider1{
    background-image: url('../images/dragPoint_h.png');
}

#container1{
position:absolute;
    left: 21px;
    top: 60px;
    z-index: 100000;
    width: 5px;
    height: 225px;
    background-image: url('../images/dragline.png');
    background-repeat: no-repeat;
}

#slider2{
    width: 30px;
    height: 22px;
    position:absolute;
    top: 0px;
    left: 203px;
    cursor: pointer;
    margin-left:-4px;   
    z-index: 100003;
    background-image: url('../images/p3DragBtn.png');
    background-repeat: no-repeat;   
    cursor: pointer;
}

#slider2{
    background-image: url('../images/p3DragBtn_h.png');
}

#container2{
    position: absolute;
    width: 252px;
    height: 22px;
    border: 1px solid;
    left: 44px;
    top: 29px;
    z-index: 100001;
   /* background-image: url(../images/p3DragBtn.png);
    background-repeat: no-repeat;*/
}

/*
#drag_point
{
    width: 14px;
    height: 14px;
    border-radius: 30px;
    background-image: url('../images/dragPoint.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 1px;
    z-index: 1;
    cursor: pointer;
}

*/