silverstripe-cms/css/ImageEditor/ImageEditor.css

*
{
    margin: 0;
    padding: 0;
}
a, a:visited
{
	text-decoration: none;
	width: 0;
	height: 0;
	position: absolute;
}

.clickBox
{   
    width: 7px;
    height: 7px;
    background-image: url(../../images/ImageEditor/clickBox.png);
    position: absolute;     
    overflow: hidden;
}
.leftUpperClickBox
{
    cursor: nw-resize;
}

.leftMiddleClickBox
{
    cursor: e-resize;
}

.leftLowerClickBox
{
    cursor: ne-resize;
}

.rightUpperClickBox
{
    cursor: ne-resize;
}

.rightMiddleClickBox
{
    cursor: w-resize;
}

.rightLowerClickBox
{
    cursor: nw-resize;
}

.upperMiddleClickBox
{
    cursor: n-resize;
}

.lowerMiddleClickBox
{
    cursor: n-resize;
}
.inline
{
    display: inline;
}
.displayNone
{
    display: none;
}

#imageContainer
{
    position: absolute;
}
#MenuBar
{
    height: 132px;
    background-image: url(../../images/ImageEditor/topLeft.png);
}
#TopLeft {
    float: left;
    width: 584px;
    height: 132px;
    background-image: url(../../images/ImageEditor/topLeft.png);
    display: inline;
}
#TopRight {
	position: absolute;
	width: 180px;
	height: 132px;
	background-image: url(../../images/ImageEditor/topRight.png);
}

#image
{
    display: block;
}
.floatLeft
{
    float: left;
}
#loadingIndicatorContainer
{
	position: absolute;
    top: -1000px;
    left: -1000px;
}
#loadingIndicatorContainer2
{
    position: absolute;
    top: -1000px;
    left: -1000px;
}

#fakeImg
{
    display: none;
}
#cropBox
{
    position: absolute;
    display: inline;
}
.greyBox
{
    background-color: black;
    position: absolute;
    opacity: .5;
    filter: alpha(opacity=50);
    overflow:hidden;
}
body
{
	height: 100%;
	width: 100%;
}
#Main
{
    position: absolute;
    border-color: black;
    border-style: solid;
    height: 95%;
    width: 99%;
    background-color: white;
}
#imageEditorContainer
{
    position: relative;
    top: 15px;
    left: 15px;
    overflow: auto;
    background-image: url(../../images/ImageEditor/back.png);
}
#Actions
{
    position: absolute;
    left: 10px;
    top: 38px;
    width: 211px;
    height: 73px;
    background-image: url(../../images/ImageEditor/c1.png);
}
#SaveText
{
    position: absolute;
    top: 40px;
    left: 13px;
}
#SaveIcon
{
    position: absolute;
    left: 33px; 
    top: 10px;
    width: 30px;
    height: 30px;
    background-image: url(../../images/ImageEditor/c1Save.png);
    cursor: hand;/* IE Hack, because <a> have 0 width/height.*/
}
#ExitText
{
    position: absolute;
    top: 40px;
    left: 95px;
}
#ExitIcon
{
    position: absolute;
    left: 97px; 
    top: 15px;
    width: 26px;
    height: 26px;
    background-image: url(../../images/ImageEditor/c1Exit.png);
    cursor: hand;/* IE Hack, because <a> have 0 width/height.*/
}
#UndoText
{
    position: absolute;
    top: 14px;
    left: 175px;
}
#UndoIcon
{
    position: absolute;
    left: 145px;
    top: 15px;
    width: 24px;
    height: 14px;
    background-image: url(../../images/ImageEditor/c1Undo.png);
    background-repeat: no-repeat;/* IE hack */
    cursor: hand;/* IE Hack, because <a> have 0 width/height.*/	
}
#RedoText
{
    position: absolute;
    top: 38px;
    left: 175px;
}
#RedoIcon
{
	position: absolute;
    left: 143px;
    top: 38px;
    width: 25px;
    height: 13px;
    background-image: url(../../images/ImageEditor/c1Redo.png);
    background-repeat: no-repeat;/* IE hack */
    cursor: hand;/* IE Hack, because <a> have width/height.*/    
}
#ActionsDescription
{
	position: absolute;
    top: 57px;
    left: 85px;
}
.menuText
{
    color: #6C889E;
    font-family: sans-serif;
    font-size: 13px;
}
#Functions
{
    position: absolute;
    left: 480px;
    top: 38px;
    height: 73px;
    width: 220px;
    background-image: url(../../images/ImageEditor/c2.png);
}
#RotateIcon
{
    position: absolute;
    left: 17px;
    top: 11px;
    height: 26px;
    width: 30px;	
    background-image: url(../../images/ImageEditor/c2Rotate.png);
    cursor: hand;/* IE Hack, because <a> have width/height.*/
}
#RotateText
{
    position: absolute;
    top: 39px;
    left: 15px;    	
}
#CropIcon
{
    position: absolute;
    left: 66px;
    top: 11px;
    height: 28px;
    width: 31px;    
    background-image: url(../../images/ImageEditor/c2Crop.png);
    cursor: hand;/* IE Hack, because <a> have width/height.*/
    	
}
#CropText
{
    position: absolute;
    top: 38px;
    left: 67px;	
}
#ImageWidthLabel
{
    position: absolute;
    top: 11px;
    left: 114px;
}
#ImageHeightLabel
{
    position: absolute;
    top: 33px;
    left: 114px;
}
#ImageWidth
{
    position: absolute;
    top: 14px;
    left: 157px;
    color: #7A7D80;
    font-size: 9px;
    	
}
#ImageHeight
{
	position: absolute;
    top: 36px;
    left: 157px;
	color: #7A7D80;
	font-size: 9px;
}
#FunctionsDescription
{
    position: absolute;
    top: 57px;
    left: 70px;
}

#TopRuler
{
	position: absolute;
	top: 38px;
	left: 720px;
	width: 106px;
	height: 73px;
	background-image: url(../../images/ImageEditor/c3.png);
}
#LeftRuler
{
    position: absolute;
    width: 15px;
    height: 100%;
    top: 147px;
    background-image: url(../../images/ImageEditor/leftRuler.png);
}
#Effects
{
    position: absolute;
    left: 240px;
    top: 38px;
    height: 73px;
    width: 220px;
    z-index: 1234;
    background-image: url(../../images/ImageEditor/c4.png);
}
#GreyscaleText
{
    position: absolute;
    top: 42px;
    left: 7px;
}
#SepiaText
{
    position: absolute;
    top: 42px;
    left: 70px;
}
#BlurText
{
    position: absolute;
    top: 42px;
    left: 125px;
}
#AdjustText
{
    position: absolute;
    top: 42px;
    left: 173px;
}
#AdjustMenu
{
	position: absolute;
	width: 211px;
	height: 74px;
	background-color: rgb(201, 229, 232);
	top: 60px;
	left: 5px;
	z-index: 1234;
	background-image: url(../../images/ImageEditor/c1.png);
}
#AdjustMenuDescription
{
    position: absolute;
    top: 57px;
    left: 85px;	
}
.sliderTrack
{
    width: 86px;
    height: 6px;
    left: 95px;
    position: absolute;
    background-image: url(../../images/ImageEditor/slider2.png);
}
.sliderTrackHandler
{
    width: 13px;
    height: 11px;
    top: -2px;
    cursor:move;
    background-image: url(../../images/ImageEditor/slider.png);
}
#AdjustMenuContrastSliderTrack
{
    top: 8px;
}
.effectDescription
{
    position: absolute;
	left: 15px;   
}
#AdjustMenuConstrastDescription
{
    top: 2px;
}
#AdjustMenuBrightnessSliderTrack
{
    top: 25px;
}
#AdjustMenuBrightnessDescription
{
    top: 22px;
}
#AdjustMenuGammaSliderTrack
{
    top: 42px;
}
#AdjustMenuGammaDescription
{
    top: 42px;
}
#EffectsDescription
{
    position: absolute;
    top: 58px;
    left: 90px; 	
}
#Filename p
{
    position: absolute;
    color: white;
    left: 20px;
    top: 7px;
    font-family: sans-serif;
    font-size: 14px;
}

#CurrentAction
{
    position: absolute;
    top: 38px;
    left: 479px;
    width: 106px;
    height: 73px;
    background-image: url(../../images/ImageEditor/c3.png);
}
#ApplyIcon
{
    position: absolute;
    left:59px;
    top: 14px;
    width: 24px;
    height: 23px;
    background-image: url(../../images/ImageEditor/c3Apply.png);
}
#ApplyText
{
    position: absolute;
    top: 39px;
    left: 57px; 
}

#CancelIcon
{
    position: absolute;
    left:18px;
    top: 13px;
    width: 26px;
    height: 25px;
    background-image: url(../../images/ImageEditor/c3Cancel.png);
}
#CancelText
{
    position: absolute;
    top: 39px;
    left: 12px; 
}
#CurrentActionDescription
{
	position: absolute;
    top: 57px;
    left: 12px;
}

/*
 * Status, Directly copied from cms_right.css
 */

#statusMessage {
    position: absolute;
    z-index: 500;
    bottom: 30px;
    left: 30px;
    text-align: left;
    padding: 1px 1px 1px 40px;
    
    font-size: 16px;
    font-weight: bold;  
    
    /* border: 1px solid #cc9; */
    color: #660;
    /* background-color: #F9F9E3; */
    margin: 2px;
}
#statusMessage.good {
    border-color: #9c9;
    color: #060;
    background: url(../../images/alert-good.gif) /*#E2F9E3*/ 7px no-repeat;
}
#statusMessage.bad {
    border-color: #c99;
    color: #c00;
    background: url(../../images/alert-bad.gif) #fff 7px no-repeat;
    max-height: 300px;
    overflow: auto;
}