html
{
    overflow: visible;
    -ms-content-zooming: none;
}
body
{
    background: white;
    overflow: visible;
    color: Black;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
    font-family: helvetica;
    font-size: 10pt;
}
#imageViewerDiv
{
    border: 1px solid #000000;
    background-color: #7F7F7F;
}
#topbar
{
    background: silver;
    top: 0px;
    left: 0px;
    height: 36px;
    width: 100%; /*min-width:800px;*/
    text-align: center; /*display: none;*/
}

#resultsControlDiv
{
    top: 30%;
    width: 400px;
    height: 500px;
}

#resultsTextArea
{
    width: 100%;
    height: 100%;
    font-family: helvetica;
    font-size: 10pt;
}

#overlay
{
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 3000;
    margin: 0px auto;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    background: #000;
}
.controlsDivR
{
    z-index: 5000;
    border: 1px solid;
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -150px; /* css3 drop shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* css3 border radius */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: block;
    visibility: hidden; /*background:#0A0A0A;*/
    background-image: url(../Images/background.png);
}

.controlsResultDiv
{
    padding: 1px;
    position: absolute;
    width: 100%;
    text-align: center;
}

.controlsOKDiv
{
    padding: 1px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

.controlsContentDiv
{
    position: absolute;
    top: 50px;
    width: 98%;
    height: 400px;
}

.topbarDiv
{
    padding: 1px;
}
.topbarLabel
{
    color: Black;
}
#imageLoadOverlay
{
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 7000;
    margin: 0px auto;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    background: #000;
}
#imageLoadDiv
{
    visibility: hidden;
    z-index: 8000;
    border: 1px solid;
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -150px; /* css3 drop shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* css3 border radius */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #0A0A0A;
    text-align: center;
}

#imageSelectOverlayDiv
{
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 3000;
    margin: 0px auto;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    background: #000;
}
#imageLoadOverlayDiv
{
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 7000;
    margin: 0px auto;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    background: #000;
}
#loadingText
{
    color: white;
    font-size: 1.2em;
}
#progressBar
{
    top: 30%;
    width: 220px;
    height: 70px;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.ui-progressbar
{
    visibility: hidden;
    position: relative;
}
.progress-label
{
    left: 12%;
    top: 36%;
    font-size: 16px;
    font-weight: bold;
    visibility: hidden;
    position: absolute;
    text-shadow: 1px 1px 0 #33ACDB;
}
#imageLoadDiv1 .ui-widget-content
{
    border: 1px solid #33ACDB;
}
#imageLoadDiv1
{
    visibility: hidden;
    z-index: 8000;
    border: 1px solid;
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -150px; /* css3 drop shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* css3 border radius */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #0A0A0A;
    text-align: center;
}





.ToolBar
{
    background-color: Gray;
    border-top: 1px solid black;
    position: relative;
}

.ToolBar div
{
    margin-left: 5px;
}

.ToolBarButton
{
    display: block;
    width: 50px;
    height: 50px;
    margin-right: 5px;
}

.toolbargroup
{
    float: left;
    border-right: 1px solid #C0C0C0;
}

.toolBarItem
{
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    cursor: pointer;
    display: block;
    height: 50px;
    width: 50px;
    float: left;
}

.toolBarItemB
{
    /*margin-right:2px;    margin-top:2px;    margin-bottom:2px;*/
    cursor: pointer;
    display: block;
    height: 25px;
    width: 25px;
    float: left;
    text-align: center;
    vertical-align: middle;
}

.imageLabelDiv
{
    text-align: center;
    clear: both;
    height: 30px;
    padding: 4px;
    vertical-align: middle;
    font-weight: bold;
}

.FirstPage
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/navigate_beginning.png);
}

.FirstPageB
{
    display: block;
    width: 25px;
    height: 25px; /*background:url(../Images/24x24/navigate_beginning.png);*/
}

.PreviousPage
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/navigate_left.png);
}

.PreviousPageB
{
    display: block;
    width: 25px;
    height: 25px;
    background: url(../Images/24x24/navigate_left.png);
}

.NextPage
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/navigate_right.png);
}

.NextPageB
{
    display: block;
    width: 25px;
    height: 25px;
    background: url(../Images/24x24/navigate_right.png);
}

.LastPage
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/navigate_end.png);
}

.LastPageB
{
    display: block;
    width: 25px;
    height: 25px;
    background: url(../Images/24x24/navigate_end.png);
}

.PrintImages
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/printer.png);
}

.SelectAll
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/notebook_preferences.png);
}

.ClearSelections
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/notebook_delete.png);
}

.AddToCart
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/shopping_cart_add.png);
}

.PurchaseCart
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/shopping_cart.png);
}

.SelectMode
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -350px -102px;
}

.SelectMode:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -350px -306px;
}

.Tools
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -50px -51px;
}
.Tools:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -50px -255px;
}

.Annotations
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px 0;
}
.Annotations:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px -204px;
}


.PreviousImage
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px -102px;
}
.PreviousImage:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px -306px;
}

.NextImage
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -400px -51px;
}
.NextImage:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -400px -255px;
}


.Pan
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -300px -102px;
}
.Pan:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -300px -306px;
}

.Zoom
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -350px 0;
}
.Zoom:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -350px -204px;
}

.Magnify
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -150px -153px;
}
.Magnify:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -250px -153px;
}

.WindowLevel
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px -51px;
}
.DisabelWindowLevel
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px -357px;
}
.WindowLevel:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px -255px;
}

.Stack
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -250px -51px;
}
.DisableStack
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -250px -357px;
}
.Stack:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -250px -255px;
}

.RotateClock
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -400px 0;
}
.RotateClock:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -400px -204px;
}

.RotateCounterClock
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -50px -153px;
}
.RotateCounterClock:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -50px -357px;
}

.Invert
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -850px -204px;
}
.Invert:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -850px -255px;
}

.Flip
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) 0 0;
}
.Flip:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) 0 -204px;
}

.Reverse
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) 0 -102px;
}
.Reverse:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) 0 -306px;
}

.FitImage
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -50px 0;
}
.FitImage:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -50px -205px;
}

.OneToOne
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -100px -102px;
}
.OneToOne:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -100px -306px;
}

.ZoomIn
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -250px 0;
}
.ZoomIn:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -250px -204px;
}

.ZoomOut
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -300px 0;
}
.ZoomOut:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -300px -204px;
}


.ToggleTags
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -100px -51px;
}
.ToggleTags:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -100px -255px;
}

.ShowDicom
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -150px 0;
}
.ShowDicom:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -150px -204px;
}

.Select
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) 0 -51px;
}
.DisableSelect
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -150px -408px;
}

.Select:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) 0 -255px;
}

.Arrow
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -400px -102px;
}

.About
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheetorig.png) -450px -204px;
}

.About:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheetorig.png) -450px -255px;
}

.DisableArrow
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -50px -408px;
}
.Arrow:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheetorig.png) -400px -306px;
}

.Rectangle
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -50px -102px;
}
.DisableRectangle
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -100px -408px;
}
.Rectangle:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -50px -306px;
}

.Ellipse
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -100px 0;
}
.DisableEllipse
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -300px -357px;
}
.Ellipse:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -100px -204px;
}

.Text
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -150px -51px;
}
.DisableText
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -400px -357px;
}
.Text:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -150px -255px;
}

.Highlight
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -350px -102px;
}
.DisableHighlight
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) 0 -408px;
}
.Highlight:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -350px -306px;
}

.Ruler
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -350px -51px;
}
.DisableRuler
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -350px -357px;
}
.Ruler:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -350px -255px;
}

.PolyRuler
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -250px -102px;
}
.DisablePolyRuler
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -150px -357px;
}
.PolyRuler:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -250px -306px;
}

.Protractor
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -150px -102px;
}
.DisableProtractor
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -100px -357px;
}
.Protractor:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -150px -306px;
}

.DeleteAnn
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -100px -153px;
}

.DeleteAnn:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px -153px;
}
.DisableDeleteAnn
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px -408px;
}

.CalibrateRulerAnn
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -300px -153px;
}
.CalibrateRulerAnn:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -350px -153px;
}
.DisableCalibrateRulerAnn
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -250px -408px;
}

.Save
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -450px 0;
}
.Save:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -450px -153px;
}
.DisabledSave
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -450px -357px;
}

.SaveAnn
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -450px 0;
}
.SaveAnn:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -450px -153px;
}
.DisabledSaveAnn
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -450px -357px;
}

.OpenFile
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -450px -51px;
}
.OpenFile:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -400px -153px;
}
.OpenFileAnn
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -400px -408px;
}

.CloseButton
{
    display: block;
    right: 0;
    z-index: 100;
    width: 25px;
    height: 27px;
    background: url(../Images/sprite-sheet.png) -312px -422px;
}
.ScaleToGray
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px -51px;
}
.ScaleToGray:hover
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px -255px;
}
.DisabledScaleToGray
{
    display: block;
    width: 50px;
    height: 50px;
    background: url(../Images/sprite-sheet.png) -200px -357px;
}

.hide
{
    display: none;
}

#Content input, #settingsControlsDiv input
{
    box-sizing: content-box !important;
}

.above-tool-bar
{
    background-color: #f5f5f5;
    padding-top:2px;
}
.above-tool-bar{ padding-bottom:2px;}
    .above-tool-bar span
    {
        vertical-align: bottom;
        height:100%;
        color: #428bca;
        font-family:Arial, Verdana, Tahoma;
        font-size:9pt;
        line-height:normal;
    }
     .above-tool-bar input, .above-tool-bar label
    {
        vertical-align: bottom;
        height:100%;
    }
    
    #footer a
    {
        cursor:pointer;
    }