/* Customize the label (the container) */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-top: 3px;    /* around control */
    margin-bottom: 3px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: -5px;
    left: 0;
    height: 20px;
    width: 20px;
    /*background-color: #aaa;*/
    background-color: rgba(254, 226, 121, 1.0);
    border-color: black;
    border-width: 1px 3px 3px 1px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    /*background-color: #ccc;*/
    background-color: rgba(254, 212, 87, 1.0);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    /*background-color: #2196F3;*/
    background-color: rgba(254, 212, 87, 1.0);

}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#tscanvas {
    margin: 0px;
    padding: 5px;
    background: #ffffff;
    border: thin inset #aaaaaa;
    position: absolute;
}

.tscanvas {
    margin: 0px;
    padding: 0px;
    background: #ffffff;
    width: 800;
    height: 440;
}

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
/*#mapcanvas { height: 100% }*/

.mapcanvasholder {
    width: 250px;
    height: 250px;
    margin: 0px;
    top-padding: 0px;
    background: #ffffff;
    border: thin inset #aaaaaa;
    float: right;
    position: absolute;
    left: 825px;
    top: 50px;
}
.mapholder {
    margin: 0px;
    top-padding: 0px;
    background: #ffffff;
    border: thin inset #aaaaaa;
}

.readout {
    /*margin-top: 10px;*/
    margin-left: 70px;
    color: black;
    color: black;
}

.readout h2 {
    font-size: 0.8em;         /*  ems are based upon the default font size of the page? */
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

#symboldisplay {
    margin-top: 10px;
    margin-left: 15px;
    color: black;
}

.canvascontainer {
    position: relative;
}

.mapcontainer {
    margin-top: 25px;
    margin-left: 10px;
    position: relative;
}

.closeiconcontainer {
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/X_up.png');
}

.upscaleiconcontainer {
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/Upscale_up.png');
}

.downscaleiconcontainer {
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/Downscale_up.png');
}

.pvpupscaleiconcontainer {
    padding-top: 15px;
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/Upscale_up.png');
}

.pvpdownscaleiconcontainer {
    padding-top: 15px;
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/Downscale_up.png');
}

.bwupscaleiconcontainer {
    padding-top: 15px;
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/Upscale_up.png');
}

.bwdownscaleiconcontainer {
    padding-top: 15px;
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/Downscale_up.png');
}

.closepvpiconcontainer {
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/X_up.png');
}

.closemapiconcontainer {
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/X_up.png');
}

.exporticoncontainer {
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/Export_up.png');
}
#btnbarcont {
    text-align:right;
}

#zoombtnbarcont {
    text-align:left;
    position: relative;
    left: 30px;
    top: 20px;
}

.editpropsiconcontainer {
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/EditProps_up.png');
}

.exportpvpiconcontainer {
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/Export_up.png');
}

.exportsrciconcontainer {
    width: 22px;
    height: 22px;
    display:inline-block;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('mooreddataplotter/images/Source_up.png');
}

.exportpvpsrciconcontainer {
     width: 22px;
     height: 22px;
     display:inline-block;
     cursor:pointer;
     background-repeat: no-repeat;
     background-image: url('mooreddataplotter/images/Source_up.png');
 }

.penciliconcontainer {
    width: 22px;
    height: 22px;
    cursor:pointer;
    background-repeat: no-repeat;
    background-image: url('../mooreddataplotter/images/edit_pencil.png');
}

.penciliconcontainer:hover {
    background-image: url('../mooreddataplotter/images/edit_pencil_hover.png');
}

#instructions {
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    font-size: .8em;         /*  ems are based upon the default font size of the page? */
    padding: 10px;
}

#WOADiv {
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    padding: 10px;
}

#yWidgetsContainer p {
    text-align: right;
}

#ypvpWidgetsContainer p {
    text-align: right;
}

.titleWidgetsContainer p {
    text-align: right;
}

.bwtitleWidgetsContainer p {
    text-align: right;
}

#yBtnsContainer {
    text-align: center;
    padding: 0px 10px 10px 10px;
}

.buttons {
    width: 90%;
    /*table-layout: fixed;*/
    border-collapse: collapse;
    text-align: right;
    padding: 0px 10px 10px 10px;
    /*background-color: red;*/
}

.buttons button {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
}

#yAxisTitleDiv {
    background: #838383;
    border: thin solid rgba(0, 0, 0, 0.6);
    height: 30px;
    padding: 0px 0px 0px 0px;  /*top,right, bottom, left*/
    vertical-align:middle;
}

#yAxisTitleDiv h3 {
    /*vertical-align:text-top;*/
}

#yMin {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#yMax {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#yInc {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#ypvpMin {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#ypvpMax {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#ypvpInc {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#xpvpInc {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#xInc {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#ySpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#ypvpSpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#xpvpSpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

.tIncSpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 1.05em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#secyWidgetsContainer p {
    text-align: right;
    font-size: 0.9em;
}

#fullSeriesWidgetsContainer p {
    text-align: right;
}

.yrangecontrols td {
    height: 10;
}

.yrangecheckboxes td {
    height: 10;
}

.xaxiscontrols td {
    height: 10;
}

#secyBtnsContainer {
    text-align: center;
    padding: 0px 10px 10px 10px;
}

#secyMin {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#secyMax {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#secyInc {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#secySpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

.textFldStyle {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

.textFldStylesmaller {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.5em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#yMinFull {
}

#yMaxFull {
}

#YIncFull {
}

#ySpinnerFull {
}

#prelimSymSizeSpinnerES {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#finalSymSizeSpinnerES {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#prelimSymSizeSpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#finalSymSizeSpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#prelimlineWeightSpinnerES {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#finallineWeightSpinnerES {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#prelimLineWeightSpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#finalLineWeightSpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#dataCursorSymSizeSpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#labelAngleSpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#labelFontSizeSpinner {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#finallegendES {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#prelimlegendES {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#xMin {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#xMax {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#tpvpMin {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#tpvpMax {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#xpvpMin {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#xpvpMax {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#xMinFull {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#xMaxFull {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#xMinMap {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#xMaxMap {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:right;
}

#SelectTimeUnits {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:left;
    width: 120px;
    height: 32px;
}
/*.overflow { height: 100px; }*/

#setDecrement {
    color: rgba(65, 65, 220, 1.0);
    font-size: 1.05em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
}

#resetMapTimeRange {
    color: rgba(65, 65, 220, 1.0);
    font-size: 1.05em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
}

.maptyperadios {
    float:right;
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
}

.labelstyperadios {
    float:right;
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
}


#resetXTimeRange {
    color: rgba(65, 65, 220, 1.0);
    font-size: 1.05em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
}

#setXDecrement {
    color: rgba(65, 65, 220, 1.0);
    font-size: 1.05em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
}

#SelectXTimeUnits {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:left;
    width: 120px;
    height: 32px;
}

#SelectListXTimeUnits {
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    text-align:left;
    width: 120px;
    height: 32px;
}

.VertCentered {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

/*Containers for various controls*/
#xWidgetsContainer p {
    text-align: right;
    font-size: 0.9em;
}

#listWidgetsContainer p {
    text-align: right;
    font-size: 0.9em;
}

#tableWidgetsContainer p {
    text-align: right;
    font-size: 0.9em;
}

#tpvpWidgetsContainer p {
    text-align: right;
    font-size: 0.9em;
}

#tpvpWidgetsContainer {
    vertical-align:top;
}

/*Containers for various controls*/
#xpvpWidgetsContainer p {
    text-align: right;
    font-size: 0.9em;
}

#mapWidgetsContainer p {
    text-align: right;
    font-size: 0.9em;
}

#xWidgetsContainerFull p {
    float: left;
    font-size: 0.9em;
}

#otherWidgetsContainerFull p {
    float: left;
    font-size: 0.9em;
}

#xBtnsContainer {
    text-align: center;
    padding: 0px 10px 10px 10px;
}

/*These define classes for the date text fields*/
/*TODO: can these be condensed to one class?*/
#xMin .redBG {    /* defines a psuedo class .title  */
    color: rgba(255, 0, 0, 0.8);
}

#xMax .redBG {    /* defines a psuedo class .title  */
    color: rgba(255, 0, 0, 0.8);
}

#xMinFull .redBG {    /* defines a psuedo class .title  */
    color: rgba(255, 0, 0, 0.8);
}

#xMaxFull .redBG {    /* defines a psuedo class .title  */
    color: rgba(255, 0, 0, 0.8);
}

input[type=checkbox] {
    display:none;
}

/*Primary Y Axis Config Dialog*/
#yAxisConfigDialog {
    display: none;
}

#yAxisConfigDialog h3 {
    color: white;
    background: #838383;
}

#yAxisConfigDialog h2 {        /* override h2 (heading 2) style */
    font-weight: normal;
}

#yAxisConfigDialog .title {    /* defines a psuedo class .title  */
    font-size: 1em;         /*  ems are based upon the default font size of the page? */
    color: rgba(255, 255, 255, 0.6);
}

#yAxisConfigDialog p {         /* <p> is paragraph tag--this overrides the style of these tags in this div*/
    margin: 10px;
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
}

#ypvpAxisConfigDialog {
    display: none;
}

#ypvpAxisConfigDialog h3 {
    color: white;
    background: #838383;
}

#ypvpAxisConfigDialog h2 {        /* override h2 (heading 2) style */
    font-weight: normal;
}

#ypvpAxisConfigDialog .title {    /* defines a psuedo class .title  */
    font-size: 1em;         /*  ems are based upon the default font size of the page? */
    color: rgba(255, 255, 255, 0.6);
}

#ypvpAxisConfigDialog p {         /* <p> is paragraph tag--this overrides the style of these tags in this div*/
    margin: 10px;
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
}

#plotTitleConfigDialog{
    display: none;
}

#bwPlotTitleConfigDialog{
    display: none;
}

#plotTitleConfigDialog p {         /* <p> is paragraph tag--this overrides the style of these tags in this div*/
    margin: 10px;
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
}

#plotTitleConfigDialog .title {    /* defines a psuedo class .title  */
    font-size: 1em;         /*  ems are based upon the default font size of the page? */
    color: rgba(255, 255, 255, 0.6);
}

/*#yCheckContainer .ui-btn {*/
    /*color: rgba(65, 65, 220, 1.0);*/
    /*font-size: 12pt;*/
    /*font-family: Droid Sans, Arial, Helvetica, sans-serif; *//* fallback list */
/*}*/

/*Container for the Y Grid buttons*/
#yCheckContainer p {
    text-align: right;
    float:right;
    /*color: rgba(65, 65, 220, 1.0);*/
    /*font-size: 12pt;*/
    /*font-family: Droid Sans, Arial, Helvetica, sans-serif; *//* fallback list */
}

#xCheckContainer p {
    text-align: right;
    float:right;
}

#ypvpCheckContainer p {
    text-align: right;
    float:right;
    /*color: rgba(65, 65, 220, 1.0);*/
    /*font-size: 12pt;*/
    /*font-family: Droid Sans, Arial, Helvetica, sans-serif; *//* fallback list */
}

/*Secondary Y Axis Config Style*/
#secyAxisConfigDialog h3 {
    color: white;
    background: #838383;
}

#secyAxisConfigDialog h2 {        /* override h2 (heading 2) style */
    font-weight: normal;
}

#secyAxisConfigDialog .title {    /* defines a psuedo class .title  */
    font-size: 1em;         /*  ems are based upon the default font size of the page? */
    color: rgba(255, 255, 255, 0.6);
}

#secyAxisConfigDialog p {         /* <p> is paragraph tag--this overrides the style of these tags in this div*/
    margin: 10px;
    color: rgba(65, 65, 220, 1.0);
    font-size: 0.9em;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
}

/*Y Grid Checkbox container in the Sec Y Config dialog*/
/*#secyCheckContainer .ui-btn {*/
    /*color: rgba(65, 65, 220, 1.0);*/
    /*font-size: 20pt;*/
    /*font-family: Palatino, Arial, Helvetica, sans-serif; *//* fallback list */
/*}*/

#secyCheckContainer p {
    text-align: right;
    float:right;
    /*color: rgba(65, 65, 220, 1.0);*/
    /*font-size: 12pt;*/
    /*font-family: Palatino, Arial, Helvetica, sans-serif; *//* fallback list */
}

/*Unused*/
/*#seriesCheckContainer .ui-btn {*/
    /*color: rgba(65, 65, 220, 1.0);*/
    /*font-size: 12pt;*/
    /*font-family: Palatino, Arial, Helvetica, sans-serif; *//* fallback list */
/*}*/

/*#seriesCheckContainer p {*/
    /*text-align: right;*/
    /*color: rgba(65, 65, 220, 1.0);*/
    /*font-size: 12pt;*/
    /*font-family: Palatino, Arial, Helvetica, sans-serif; *//* fallback list */
/*}*/

/*These two styles apply to the Apply All button in the Time Axis config dialog*/
/*#applyAllCheckContainer p {*/
    /*text-align: right;*/
    /*color: rgba(65, 65, 220, 1.0);*/
    /*font-size: 12pt;*/
    /*font-family: Palatino, Arial, Helvetica, sans-serif; *//**//* fallback list */
/*}*/

#applyAllCheckContainer .ui-btn {
    /*color: rgba(65, 65, 220, 1.0);*/
    /*font-size: 12pt;*/
    /*font-family: Palatino, Arial, Helvetica, sans-serif; *//* fallback list */
}

#secyAxisConfigDialog {
    display: none;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    /* horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow) */
    display: none;
    color: rgba(65, 65, 220, 1.0);
    transition: opacity 0.25s linear;
    float: right;
}

#xAxisConfigDialog {
    display: none;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    /* horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow) */
    display: none;
    color: rgba(65, 65, 220, 1.0);
    transition: opacity 0.25s linear;
    float: right;
}

#pvpXAxisConfigDialog {
    display: none;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    /* horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow) */
    display: none;
    color: rgba(65, 65, 220, 1.0);
    transition: opacity 0.25s linear;
    float: right;
}

#mapConfigDialog {
    display: none;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    /* horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow) */
    display: none;
    color: rgba(65, 65, 220, 1.0);
    transition: opacity 0.25s linear;
    float: right;
}

#prelimSeriesWidgetContainerES {
    /*padding: 5px 0px 5px 5px;*/
    float:left;
    /*text-align: left;*/
    color: rgba(65, 65, 220, 1.0);
}

#prelimSeriesWidgetContainerES p {
    text-align: right;
    font-size: 0.9em;            /* text size of parameter and symbol chooser headers */
}

#finalSeriesWidgetContainerES {
    /*padding: 5px 0px 5px 5px;*/
    float:left;
    /*text-align: left;*/
    color: rgba(65, 65, 220, 1.0);
}

#finalSeriesWidgetContainerES p {
    text-align: right;
    font-size: 0.9em;            /* text size of parameter and symbol chooser headers */
}

#prelimDataSeriesWidgetContainer {
    /*padding: 5px 0px 5px 5px;*/
    float:left;
    /*text-align: left;*/
    color: rgba(65, 65, 220, 1.0);
    overflow: hidden;
}

#prelimDataSeriesWidgetContainer p {
    font-size: 0.9em;
    text-align: right;
}

#finalDataSeriesWidgetContainer {
    /*padding: 5px 0px 5px 5px;*/
    float:left;
    /*text-align: left;*/
    color: rgba(65, 65, 220, 1.0);
    overflow: hidden;
}

#finalDataSeriesWidgetContainer p {
    font-size: 0.9em;
    text-align: right;
}

#dataCursorWidgetContainer {
    /*padding: 5px 0px 5px 5px;*/
    float: left;
    /*text-align: left;*/
    color: rgba(65, 65, 220, 1.0);
    overflow: hidden;
}

#dataCursorWidgetContainer p {
    font-size: 0.9em;
    text-align: right;
}

#seriesConfigDialog {
    padding: 0px 0px 0px 0px;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    display: none;
    color: black;
    transition: opacity 0.25s linear;
    float: left;
    overflow: auto; /* add this to contain floated children */
}

#seriesConfigDialog h3 {
    color: white;
    background: #838383;
}



#seriesOrderDialog {
    padding: 0px 0px 0px 0px;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    display: none;
    color: black;
    transition: opacity 0.25s linear;
    float: left;
    overflow: auto; /* add this to contain floated children */
}

#seriesOrderDialog h3 {
    color: white;
    background: #838383;
}

#draghandle {
    background-color: gray;
    width: 101%;
    top: 50%;
    margin-top: -7px;
    margin-left: -7px;
    margin-right: -2px;
    height: 25px;
    padding-top: 7px;
    padding-left: 10px;
    font-weight: bold;
    font-size: 1em;
    color: #ffffff;
    font-family: Helvetica, Palatino, Arial, sans-serif; /* fallback list */
}

#windowsOrderDialog {
    padding: 0px 0px 0px 0px;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    display: none;
    color: black;
    transition: opacity 0.25s linear;
    float: left;
    overflow: hidden;
    background-color: rgba(254,235,181,255);
    margin-top:18px;

    position: fixed;
    width: 26vw;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    border: 2px solid grey;
    padding: 6px;
}

#mainmenu {
    position: fixed;
    width: 50vw;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    border: 6px solid grey;
    padding: 4px;
}

#windowsOrderDialog h3 {
    color: white;
    background: #838383;
    position: fixed;
    bottom:0px;
    left:0px;
}

.invisible {
    visibility: hidden;
    position: absolute;
    top: -9999px;
}

.visible {
    visibility: visible;
    position: static;
}

#fullSeriesConfigDialog {
    padding: 0px 0px 0px 0px;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    display: none;
    color: black;
    transition: opacity 0.25s linear;
    float: left;
    overflow: auto; /* add this to contain floated children */
    z-index: 99999;
}

#fullSeriesConfigDialog h3 {
    color: white;
    background: #838383;
}

#globalStyleConfigDialog {
    padding: 10px 0px 0px 0px;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    display: none;
    color: black;
    transition: opacity 0.25s linear;
    float: left;
    overflow: auto; /* add this to contain floated children */
    z-index: 99999;
}

#globalStyleConfigDialog h3 {
    color: white;
    background: #838383;
}


.ui-dialog-title {
    font-size:14px !important;
}
/* make the TH (table headers) elements pretty */
thead.fixedHeader th {
    background: #c8c8c8;
    border-left: 1px solid #c8c8c8;
    border-right: 1px solid #c8c8c8;
    border-top: 1px solid #c8c8c8;
    font-weight: bold;
    font-size: .9em;            /* text size of parameter and symbol chooser headers */
    color: #ffffff;
    font-family: Helvetica, Palatino, Arial, sans-serif; /* fallback list */
    padding: 4px 3px;
    text-align: left
}

/* make the TH (table headers) elements pretty */
thead.blackfixedHeader th {
    background: #c8c8c8;
    border-left: 1px solid #c8c8c8;
    border-right: 1px solid #c8c8c8;
    border-top: 1px solid #c8c8c8;
    font-weight: bold;
    font-size: .8em;            /* text size of parameter and symbol chooser headers */
    color: #000000;
    font-family: Helvetica, Palatino, Arial, sans-serif; /* fallback list */
    padding: 4px 3px;
    text-align: left
}


/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent {
    display: block;
    height: 150px;
    overflow: auto;
    table-layout: fixed;
    font-family: Helvetica, Palatino, Arial, sans-serif; /* fallback list */
    font-size: 0.8em;     /* This setting controls the size of text in parameter chooser tables*/
    width: 100%;           /* this controls wisth of table */
}

html>body tbody.scrollSearchResultsContent {
    display: block;
    height: 386px;
    overflow: auto;
    table-layout: fixed;
    font-family: Helvetica, Palatino, Arial, sans-serif; /* fallback list */
    font-size: 0.8em;     /* This setting controls the size of text in parameter chooser tables*/
    width: 100%;           /* this controls wisth of table */
}
html>body tbody.scrollContent2 {
    display: block;
    /*height: 210px;*/
    overflow: auto;
    table-layout: fixed;
    font-family: Helvetica, Palatino, Arial, sans-serif; /* fallback list */
    font-size: 0.8em;     /* This setting controls the size of text in parameter chooser tables*/
    width: 100%;           /* this controls wisth of table */
}


/* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body thead.blackfixedHeader th {
    /*width: 100px*/
}

#prelimSymTableContainerES {
    padding: 15px 30px 0px 15px;
    /*padding-top: 10;*/
    /*padding-right: 50;*/
    float:left;
}

#seriesTableContainer {
    padding: 15px 30px 0px 15px;
    /*padding-top: 10;*/
    /*padding-right: 50;*/
    float:left;
}

#windowsTableContainer {
    padding: 15px 30px 0px 15px;
    /*padding-top: 10;*/
    /*padding-right: 50;*/
    float:left;
}

#finalSymTableContainerES {
    padding: 15px 30px 0px 15px;
    /*padding-top: 10;*/
    /*padding-right: 50;*/
    float:left;
}

#prelimSymTableContainer {
    padding: 5px 30px 0px 15px;
    /*padding-top: 10;*/
    /*padding-right: 50;*/
    float:left;
}


#dataCursorSymTableContainer {
    padding: 5px 30px 0px 15px;
    width: 100px;
    /*padding-top: 10;*/
    /*padding-right: 50;*/
    float:left;
}

#finalSymTableContainer {
    padding: 5px 30px 0px 15px;
    /*padding-top: 10;*/
    /*padding-right: 50;*/
    float:left;
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
    background: #FFF;
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top: 1px solid #DDD;
    padding: 2px 3px 3px 4px;
    width: 50px;
}

tbody.scrollContent tr.alternateRow td {
    background: #EEE;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #CCC;
    border-top: 1px solid #DDD;
    padding: 2px 3px 3px 4px;
    width: 60px
}
.demoPanel {
    float: left;
}

    /*.ui-button.ui .ui-icon.leftZoomBtn {*/
        /*width: 32;*/
        /*height: 32;*/
    /*}*/

    /*.ui-button.ui-state-hover .ui-icon.you-own-cusom-class {*/
    /*background-image: url(your-path-to-highlighted-image-file.png);*/
    /*width: your-icon-width;*/
    /*height: your-icon-height;*/
    /*}*/
    .ui-mag-icon {
        background-image: url('../mooreddataplotter/images/zoom_mag.png') !important;
    }

    .ui-loupe-icon {
        background-image: url('../mooreddataplotter/images/loupe.png') !important;
    }

    .ui-sort-icon {
        background-image: url('../mooreddataplotter/images/sort.png') !important;
    }

    .ui-nextzoom-icon {
        background-image: url('../mooreddataplotter/images/arrow_right.png') !important;
    }

    .ui-prevzoom-icon {
        background-image: url('../mooreddataplotter/images/arrow_left.png') !important;
    }

    .ui-domainzoom-icon {
        background-image: url('../mooreddataplotter/images/arrow_expand.png') !important;
    }


#toolbarcont {
    margin-left: 0px;
    text-align: center;
    width: 600px;
}

#plotNewBWPlotDialog {
    padding: 15px 0px 0px 0px;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    display: none;
    color: black;
    transition: opacity 0.25s linear;
    float: left;
    overflow: auto; /* add this to contain floated children */
}

#plotNewSeriesDialog {
    padding: 15px 0px 0px 0px;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    display: none;
    color: black;
    transition: opacity 0.25s linear;
    float: left;
    overflow: auto; /* add this to contain floated children */
}

/*.ParamChooser {*/
    /*padding: 15px 30px 0px 5px;*/
    /*padding-top: 10;*/
    /*padding-right: 50;*/
    /*float:left;*/
    /*font-family: Droid Sans, Arial, Helvetica, sans-serif; *//* fallback list */
    /*font-size: 1.0em;*/
/*}*/

.PvPParamChooser {
    padding: 0px 10px 0px 0px;
    /*padding-top: 10;*/
    /*padding-right: 50;*/
    float:left;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    font-size: 1.0em;
}

.detailOne {
    color: rgba(65, 65, 220, 1.0);
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    padding: 0px 0px 0px 0px;
    font-size: 0.9em;
    float:right;
}

.detailThree {
    color: rgba(65, 65, 220, 1.0);
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    padding: 0px 20px 0px 0px;
    font-size: 0.9em;
    float:right;
}

#genAxisTable {
    color: rgba(65, 65, 220, 1.0);
    float:right;
}

#genAxisTable td {
    float:right;
}
            #swatchTable {
                color: rgba(65, 65, 220, 1.0);
                float:right;
            }

            #swatchTable td {
                float:right;
            }

#spvpwatchTable {
    color: rgba(65, 65, 220, 1.0);
    float:right;
}

#pvpswatchTable td {
    float:right;
}


#plotTitle {
                color: rgba(65, 65, 220, 1.0);
                text-align:right;
                font-size: 0.9em;
            }

            #plotTitleEdit {
                color: rgba(65, 65, 220, 1.0);
                text-align:right;
                font-size: 0.9em;
            }

#bwplotTitleEdit {
    color: rgba(65, 65, 220, 1.0);
    text-align:right;
    font-size: 0.9em;
}

            #axisTitle {
                color: rgba(65, 65, 220, 1.0);
                text-align:right;
                font-size: 0.9em;
            }
            #genYLbl {
                color: rgba(65, 65, 220, 1.0);
                text-align:right;
                font-size: 0.9em;

            }
            #genYUnits {
                color: rgba(65, 65, 220, 1.0);
                text-align:right;
                font-size: 0.9em;

            }

            #accordion {
                display: none;
            }

            #accordion2 {
                display: none;
            }

            #accordion3 {
            }

            #loading h1 {
                font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
                text-align: center;
            }
            /*this contains the map and filter controls*/
            #browsingMapCanvasContainer {
                width: 600px;
                height: 440px;
                margin: 0px;
                padding: 0px;
                display:inline-block;
            }

            #browsingMapCanvas {
                width: 410px;
                height: 460px;
                margin-left: 10px;
                padding: 0px;
                background: #ffffff;
                /*border: thin inset #aaaaaa;*/
                display: inline-block;
                vertical-align: top;
            }

            #timefiltercontrols {
                font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
                font-size: 0.8em;
                display: inline-block;
                vertical-align: top;
                padding-top: 10px;
                padding-left: 10px;
            }

            #filereadout {
                padding-top: 15px;
                display: inline-block;
                vertical-align: top;
            }
            #tabs {
                display: inline-block;
                vertical-align: top;
            }
            /*.ui-tabs {*/
                /*width:43%;*/
            /*}*/

            #distcanvas {
                margin: 0px;
                padding: 0px;
                background: #ffffff;
                border: thin inset #aaaaaa;
            }
            #tabs {
                padding: 0px;
                background: none;
                border-width: 0px;
                margin-top: 0.6em;
                font-size: 80%;
            }
            #tabs .ui-tabs-nav {
                padding-left: 0px;
                background: transparent;
                border-width: 0px 0px 1px 0px;
                -moz-border-radius: 0px;
                -webkit-border-radius: 0px;
                border-radius: 0px;
            }
            #tabs .ui-tabs-panel {
                background: #f5f3e5 url(https://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top;
                border-width: 0px 1px 1px 1px;
            }

.tab1 { margin-left: 10px; }
.tab2 { margin-left: 20px; }
.tab3 { margin-left: 30px; }
.tab4 { margin-left: 40px; }



#PvPDialog {
    display: none;
}

#PvPDialogTop {
    padding-top: 10px;
    padding-left: 5px;
    width: 750px;
    cursor:default;
}

#EditPvPDialogTop {
    padding-top: 10px;
    padding-left: 5px;
    width: 800px;
    cursor:default;
}

.ParamChooser {
    padding: 0px 0px 0px 0px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    /*padding-top: 10;*/
    /*padding-right: 50;*/
    float:left;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    font-size: .8em;
    cursor:default;
}

/* Reset overflow value to hidden for all non-IE browsers. */
/* selects the body tag inside the html object and then styles*/
html>body div.pvpSymTableContainer {
    overflow: hidden;
    width: 100px
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.symTableContainer table {
    width: 100px
}

#symFS {
    width: 218px;
}

.fieldsettext {
    color: rgba(65, 65, 220, 1.0);
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    /*padding: 5px 10px 5px 0px;*/
    font-size: 0.9em;
}

#editsymFS {
    width: 218px;
}

#finalStyle {
    width: 340px;
    margin-top: 10px;
}

#finalStyleRT {
    width: 340px;
    margin-top: 10px;
}

#prelimStyle {
    width: 340px;
    margin-top: 10px;
}

#dataSymStyle {
    width: 325px;
    margin-top: 10px;
}

#prelimStyleRT {
    width: 340px;
    margin-top: 10px;
}

#pvpTopWidgetContainer p {
    text-align: right;
    margin:0.4em;
}

#editpvpTopWidgetContainer p {
    text-align: right;
    margin:0.4em;
}

#editotherOptions {
    /*float: left;*/
    padding-top: 10px;
    padding-bottom: 5px;
}

#axesRanges {
    display:inline;
    white-space: nowrap;
}

#editAxesRanges {
    display:inline;
    white-space: nowrap;
}

#xAxisRange {
    vertical-align:top;
}

#xAxisRange p {
    text-align:right;
}

#editXAxisRange {
    vertical-align:top;
}

#editXAxisRange p {
    text-align:right;
}

#yAxisRange {
    vertical-align:top;
}

#yAxisRange p {
    text-align:right;
}

#editYAxisRange {
    vertical-align:top;
}

#editYAxisRange p {
    text-align:right;
}

#tpvpAxisRange {
     vertical-align:top;
 }

#tpvpAxisRange p {
    text-align:right;
}

.centereddiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}


.myoutercontainer { position:relative }
.myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }

.isInlineBlock {
    display:inline-block;
}

.nativeButton {
    font-size: 0.8em;
}

/*.small-button {*/
     /*font-size: 1em !important;*/
 /*}*/

a.back-to-top {
    display: none;
    width: 60px;
    height: 60px;
    text-indent: -9999px;
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
    background: #27AE61 url("../mooreddataplotter/images/up-arrow.png") no-repeat center 43%;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

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

.xsortcheckbox {
    background-image: url(../mooreddataplotter/images/sort.png); /* 20x x 20px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 20px;           /* make this the size of your image */
    width: 20px;
    padding-left: 10px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    display:inline-block;
    margin-left:90px;
}

.listsortcheckbox {
    background-image: url(../mooreddataplotter/images/sort.png); /* 20x x 20px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 20px;           /* make this the size of your image */
    width: 20px;
    padding-left: 10px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    display:inline-block;
    margin-left:90px;
}

/*.xsortcheckbox:hover {*/
    /*background-image: url('images/sort_hover.png');*/
/*}*/

.ysortcheckbox {
     background-image: url(../mooreddataplotter/images/sort.png); /* 20x x 20px */
     background-color: transparent; /* make the button transparent */
     background-repeat: no-repeat;  /* make the background image appear only once */
     background-position: 0px 0px;  /* equivalent to 'top left' */
     border: none;           /* assuming we don't want any borders */
     cursor: pointer;        /* make the cursor like hovering over an <a> element */
     height: 20px;           /* make this the size of your image */
     width: 20px;
     padding-left: 10px;     /* make text start to the right of the image */
     vertical-align: middle; /* align the text vertically centered */
     display:inline-block;
     margin-left:90px;
 }

/*.ysortcheckbox:hover {*/
    /*background-image: url('images/sort_hover.png');*/
/*}*/

.listparamtable_badge {
    background-image: url(../mooreddataplotter/images/search_active.png); /* 20x x 20px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    height: 16px;           /* make this the size of your image */
    width: 16px;
    padding-left: 10px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    display:inline-block;
    /*display:none;*/
    margin-left:0px;
}

.ypvpparamtable_badge {
    background-image: url(../mooreddataplotter/images/search_active.png); /* 20x x 20px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    height: 16px;           /* make this the size of your image */
    width: 16px;
    padding-left: 10px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    display:inline-block;
    /*display:none;*/
    margin-left:0px;
}
.xpvpparamtable_badge {
    background-image: url(../mooreddataplotter/images/search_active.png); /* 20x x 20px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    height: 16px;           /* make this the size of your image */
    width: 16px;
    padding-left: 10px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    display:inline-block;
    /*display:none;*/
    margin-left:0px;
}

.primaryysortcheckbox {
    background-image: url(../mooreddataplotter/images/sort.png); /* 20x x 20px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 20px;           /* make this the size of your image */
    width: 20px;
    padding-left: 10px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    display:inline-block;
    margin-left:125px;
}


.yparamtable_badge {
    background-image: url(../mooreddataplotter/images/search_active.png); /* 20x x 20px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    height: 16px;           /* make this the size of your image */
    width: 16px;
    padding-left: 10px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    display:inline-block;
    margin-left:0px;
}

.secondaryysortcheckbox {
    background-image: url(../mooreddataplotter/images/sort.png); /* 20x x 20px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 20px;           /* make this the size of your image */
    width: 20px;
    padding-left: 10px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    display:inline-block;
    margin-left:110px;
}

.ysecparamtable_badge {
    background-image: url(../mooreddataplotter/images/search_active.png); /* 20x x 20px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    height: 16px;           /* make this the size of your image */
    width: 16px;
    padding-left: 10px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    display:inline-block;
    margin-left:0px;
}

.bwsortcheckbox {
    background-image: url(../mooreddataplotter/images/sort.png); /* 20x x 20px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 20px;           /* make this the size of your image */
    width: 20px;
    padding-left: 10px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    display:inline-block;
    margin-left:110px;
}

.bwparamtable_badge {
    background-image: url(../mooreddataplotter/images/search_active.png); /* 20x x 20px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    height: 16px;           /* make this the size of your image */
    width: 16px;
    padding-left: 10px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    display:inline-block;
    margin-left:0px;
}

.fieldhasfocus {
    box-shadow: 0px 0px 8px rgba(30, 20, 255, 0.7);
}

.sortchecked {
    background-image: url(../mooreddataplotter/images/sort_hover.png); /* 20x x 20px */
}

.compactBtn {
    font-weight:normal;
    font-size: 0.7em;
}

.Box {
    display: flex; /* or inline-flex */
}

.Intro {
    position: relative;
    left: 65px;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    font-size: .8em;
}

.Legend {
    /*display : inline-block;*/
    position: relative;
    left: 65px;
    /*top: 500px;*/
    /*margin-right: 300;*/
    /*padding-left: 30px;*/
    padding-left: 10px;
    border-style: solid;
    border-color: #333333;
    border-width: 2px;
    width: 400px;
    height: 50px;
    font-family: Droid Sans, Arial, Helvetica, sans-serif; /* fallback list */
    font-size: .8em;
}

.Legend p {
      /*display : inline-block;*/
      position: relative;
      top: -10px;
  }

.DataTable, .DataTable th, .DataTable td {
    border: 1px solid black;
}

.DoneButton {
    position: absolute;
    left:10px;
    top:10px;
}

#resize {
    resize:horizontal;
    overflow:auto;
    border:1px silver solid;
    width:320px;
    margin:0 auto;
}