below is a copy of the default css file, I've bolded the places you might need to change:
/* Styles for PhotoEditor sample. */
.PhotoEditorSample
{
position: relative;
border: solid 1px #929292;
background-color: #7FA7E5;
background-image: url("../Images/BodyGradient.png");
background-position: bottom;
background-repeat:repeat-x;
top: 0px; left: 0px;
width: 870px;/* change this to 490px */
height: 575px;
}
.PhotoEditorSampleQualityMeter
{
position: absolute;
top: 500px; left: 270px;
}
.PhotoEditorSampleStatusPanel
{
position: absolute;
top: 4px; left: 847px;
}
.PhotoEditorSampleControlPanel
{
position: absolute;
top: -2px; left: -2px;
}
.PhotoEditorSampleCommandPanel
{
position: absolute;
top: 42px; left: 10px;
}
.PhotoEditorSampleImagePanel
{
position:absolute;
top: 42px; right: 10px;
}
.PhotoEditorButtons
{
position: absolute;
top: 500px; right: 20px;
width: 200px;
height: auto;
text-align: right;
}
.PhotoEditorRestoreButton, .PhotoEditorShowButton
{
visibility: inherit;
text-align: center;
width: 200px; height: 24px;
margin: 2px;
background-image: url("../Images/PhotoEditorButton.gif");
background-repeat: no-repeat;
background-color: Transparent;
color: #FFFFFF;
border: 0px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
font-weight: 700;
}
.PhotoEditorRestoreButton:disabled, .PhotoEditorShowButton:disabled
{
background: url( "../Images/PhotoEditorButtonDisabled.gif" ) no-repeat;
color: #555555;
}
notice that each section of the interface is absolutely positioned. if you change the width or height, you'll have to change the positions accordingly as well. just make the change in the css and then hit ctrl+f5 (refresh) in the browser and you should see the change immediately without the need to recompile
Nate