@charset "utf-8";
/* CSS Document */
/** {
    user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }*/
#instruction_container
{
    width: 330px;
    position:absolute;
    top: 10px;
    left: 20px;
}
#instruction_container .p1
{
    font-family:Arial, sans-serif;
    font-size: 16px;
    color: #50504D;
    line-height: 1.3em;
    font-weight: bold;
    margin-bottom: 5px;
}
#instruction_container .p2
{
    font-family:Arial, sans-serif;
    font-size: 12px;
    color: #50504D;
    margin-top: 5px;
}
.graph
{
    width:500px;
    height:500px;
    margin:auto;
    position:absolute;
    top:35px;
    left:380px;
    font-family:Arial, Geneva, sans-serif;
    font-size:10pt;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.tickLabel
{
    margin-top: -5px;
}
.legendLabel
{
    font-size:12px;
}
.axisLabel
{
    position:absolute;
    color:#FFFFFF;
    font-size:9pt;
    text-align: center;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}
.rotated90
{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);

    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;

    /* Should be unset in IE9+ I think. */
    /*-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);*/
}
.rotatedneg90
{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;

    /* Should be unset in IE9+ I think. */
    /*-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/

}
.teal{ background-color:#007E8D; }
.navy{ background-color:#004669; }

.tooltip
{
    position: absolute;
    display: none;
    border: 1px solid #fdd;
    padding: 2px;
    background-color: #fee;
    opacity: 0.80;
}

/*.graph_title
{
    position: absolute;
    height: 20;
    font-size:13px;
    text-align:left;
    color:#666;
    left: 175px;
}*/
select
{
    border: 1px solid #a4a4a4;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10.5pt;
}
#source
{
    position: absolute;
    top:35px;
    left: 10px;
    width: 260px;
    height: 30px;
    border: 1px solid #96968C;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
#slider_holder_utility
{
    width: 320px;
    height: 110px;
    position:absolute;
    left:20px;
    top:245px;
    background-color:#E9E9E1;/*#DAE4FF;*/
    -moz-border-radius: 6px;
    border-radius: 6px;
}

#slider_holder_price
{
    width: 320px;
    height: 110px;
    position:absolute;
    left:20px;
    top:375px;
    /*border: solid #999 1px;*/
    background-color:#E9E9E1;/*#DAE4FF;*/
    -moz-border-radius: 6px;
    border-radius: 6px;
}

#slider_holder_select
{
    width: 320px;
    height: 70px;
    position:absolute;
    left:20px;
    top:150px;
    /*background-color:#e8d8e4;*/
    /*border: solid #999 1px;*/
}

#utilitySlider
{
    margin:auto;
    position:absolute;
    top:50px;
    left:20px;
    width:280px;
}
#priceSlider
{
    margin:auto;
    position:absolute;
    top:50px;
    left:20px;
    width:280px;
}

.slider_title
{
    width: 320px;
    height: 20px;
    left: 0px;
    top: 0px;
    margin-left: 10px;
    position:absolute;
    padding-top:5px;
    font-size:14px;
    text-align:left;
    /*background-color:#5A5A4B;*/
    /*border: solid #999 1px;*/
    color:#5A5A4B;
    font-weight:normal;
}

#slider_title_utility
{
    /*top: 270px;
    left:40px;*/
}
#slider_title_price
{
    /*top: 390px;
    left:40px;*/
}
#slider_title_select
{
    /*top: 150px;
    left:40px;*/
}

.img_btn
{
    position: absolute;
    border:0px;
    cursor:pointer;
    bottom: -15px;
}
.img_btn.disabled
{
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
    opacity: 0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity = 50);
    cursor:auto;
}

#btnClear
{
    top:500px;
    left:240px;
}

.clear_btn
{
    width:103px;
    height:36px;
    background-image:url("../assets/reset-btn.png");
    background-position: 0px 0px;
}
.clear_btn.hoverAction
{
    background-position: 0px -36px;
    background-position-y: -36px;
}

#source-line
{
    position:absolute;
    left:0px;
    /*top:560px;*/
    bottom: -5px;
    width:920px;
    height:30px;
    text-align:center;
    font-size:9px;
    color:#666;
    /*line-height: 1.2em;*/
}