.pin{
/*min-height:550px;*/
position:relative;
background:#fff;
text-align:center;
}

.toolbar
{
padding:10px 0;
background:#fcfcfc;  
border:1px solid #eee;
}

.preview{
border:10px solid #f2f2f2;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

#crop_panel{
margin-top:10px;
display: none;
}

.img_preview{
text-align:center; 
margin-top:20px; 
border-top:1px solid #e7e7e7; 

background:#f7f7f7;"
}

.imgField {
display:none;
}   

.attrib{
font:normal 9px tahoma;
color:#bbb;
margin-right:10px;
}

.header{
margin:0;
padding:0;	
font:normal 13px verdana;
margin-top:20px;
color:#ccc;
}

#wait{
position:absolute;
display:none;
top:45%;
left:42%;
background: url(/css/i2picture/loading.gif) no-repeat scroll 0 0 transparent;
width:128px;
height:100px;
z-index: 2000;
}

.icons { display:block;background: url(/css/i2picture/icons.png) no-repeat;}
.picture { display:block;width: 16px; height: 16px; background-position: 0 -112px; }
.redo { display:block;width: 16px; height: 16px; background-position: 0 -160px; }
.undo { display:block;width: 16px; height: 16px; background-position: 0 -224px; }
.rotate { display:block;width: 16px; height: 16px; background-position: 0 -240px; }
.zoomout { display:block;width: 16px; height: 16px; background-position: 0 -256px; }
.zoomin { display:block;width: 16px; height: 16px; background-position: 0 -272px; }
.fliph { display:block;width: 16px; height: 16px; background-position: 0 -288px; }
.flipv { display:block;width: 16px; height: 16px; background-position: 0 -304px; }
.crop { display:block;width: 16px; height: 16px; background-position: 0 -320px; }
.cropno { display:block;width: 16px; height: 16px; background-position: 0 -336px; }
.cropyes { display:block;width: 16px; height: 16px; background-position: 0 -352px; }

.filters { display:block;background: url(/css/i2picture/sprite_filters.jpg) no-repeat;}
.blur{ display:block; background-position: 0 0; width: 150px; height: 150px; } 
.contrast{ display:block; background-position: 0 -151px; width: 150px; height: 150px; } 
.displace{ display:block; background-position: 0 -302px; width: 150px; height: 150px; } 
.dither{ display:block; background-position: 0 -453px; width: 150px; height: 150px; } 
.emboss{ display:block; background-position: 0 -604px; width: 150px; height: 150px; } 
.equalize{ display:block; background-position: 0 -755px; width: 150px; height: 150px; } 
.explode{ display:block; background-position: 0 -906px; width: 150px; height: 150px; } 
.grayscale{ display:block; background-position: 0 -1057px; width: 150px; height: 150px; } 
.implode{ display:block; background-position: 0 -1208px; width: 150px; height: 150px; } 
.median{ display:block; background-position: 0 -1359px; width: 150px; height: 150px; } 
.sharpen{ display:block; background-position: 0 -1510px; width: 150px; height: 150px; } 
.sin{ display:block; background-position: 0 -1661px; width: 150px; height: 150px; } 
.solarize{ display:block; background-position: 0 -1812px; width: 150px; height: 150px; } 
.swirl{ display:block; background-position: 0 -1963px; width: 150px; height: 150px; } 
.water_color{ display:block; background-position: 0 -2114px; width: 150px; height: 150px; } 
.cartoon{ display:block; background-position: 0 -2265px; width: 150px; height: 150px; } 


.frames { display:block;background: url(/css/i2picture/sprite_frames.jpg) no-repeat;}
.bevel_smooth{ display:block; background-position: 0 0; width: 150px; height: 150px; } 
.bevel_texture{ display:block; background-position: 0 -151px; width: 150px; height: 150px; } 
.border_frame{ display:block; background-position: 0 -302px; width: 150px; height: 150px; } 
.bump{ display:block; background-position: 0 -453px; width: 150px; height: 150px; } 
.circle{ display:block; background-position: 0 -604px; width: 150px; height: 150px; } 
.dent{ display:block; background-position: 0 -755px; width: 150px; height: 150px; } 
.fading_rounded_corners{ display:block; background-position: 0 -906px; width: 150px; height: 150px; } 
.fading_vignette{ display:block; background-position: 0 -1057px; width: 150px; height: 150px; } 
.groove{ display:block; background-position: 0 -1208px; width: 150px; height: 150px; } 
.light_shadow{ display:block; background-position: 0 -1359px; width: 150px; height: 150px; } 
.padded{ display:block; background-position: 0 -1510px; width: 150px; height: 150px; } 
.raised_frame{ display:block; background-position: 0 -1661px; width: 150px; height: 150px; } 
.rotated_polaroid{ display:block; background-position: 0 -1812px; width: 150px; height: 150px; } 
.rounded_corners{ display:block; background-position: 0 -1963px; width: 150px; height: 150px; } 
.rounded_torn{ display:block; background-position: -151px 0; width: 150px; height: 150px; } 
.solid_shadow{ display:block; background-position: -151px -151px; width: 150px; height: 150px; } 
.thick_black{ display:block; background-position: -151px -302px; width: 150px; height: 150px; } 
.triangle{ display:block; background-position: -151px -453px; width: 150px; height: 150px; } 
.upright_polaroid{ display:block; background-position: -151px -604px; width: 150px; height: 150px; } 
.wooden{ display:block; background-position: -151px -755px; width: 150px; height: 150px; } 

.montage { display:block;background: url(/css/i2picture/sprite_montage.jpg?34) no-repeat;}
.golden_frame{ display:block; background-position: 0 0px; width: 300px; height: 180px; } 
.film_frame{ display:block; background-position: 0 -180px; width: 300px; height: 180px; } 
.wooden_heart{ display:block; background-position: 0 -360px; width: 300px; height: 180px; }
.hollow_pink_heart{ display:block; background-position: 0 -540px; width: 300px; height: 180px; } 
.vintage_photo{ display:block; background-position: 0 -720px; width: 300px; height: 180px; } 
.snowman_frame{ display:block; background-position: 0 -900px; width: 300px; height: 180px; } 
.coffee_photo{ display:block; background-position: 0 -1080px; width: 300px; height: 180px; } 
.sand_heart{ display:block; background-position: 0 -1260px; width: 300px; height: 180px; } 
.hollow_red_heart{ display:block; background-position: 0 -1440px; width: 300px; height: 180px; } 
.cappuccino_cup_photo{ display:block; background-position: 0 -1620px; width: 300px; height: 180px; } 
.full_moon{ display:block; background-position: 0 -1800px; width: 300px; height: 180px; } 
.vanilla_icecream{ display:block; background-position: 0 -1980px; width: 300px; height: 180px; } 
.birthday_cake{ display:block; background-position: 0 -2160px; width: 300px; height: 180px; } 
.glassball{ display:block; background-position: 0 -2340px; width: 300px; height: 180px; } 
.sea{ display:block; background-position: 0 -2520px; width: 300px; height: 180px; } 
.shell{ display:block; background-position: 0 -2700px; width: 300px; height: 180px; } 
.apple{ display:block; background-position: 0 -2880px; width: 300px; height: 180px; } 
.christmas_tree{ display:block; background-position: 0 -3060px; width: 300px; height: 180px; } 
.necklace{ display:block; background-position: 0 -3240px; width: 300px; height: 180px; } 
.aurora{ display:block; background-position: 0 -3420px; width: 300px; height: 180px; } 
.smoke{ display:block; background-position: 0 -3600px; width: 300px; height: 180px; } 
.snow{ display:block; background-position: 0 -3780px; width: 300px; height: 180px; } 
.flower{ display:block; background-position: 0 -3960px; width: 300px; height: 180px; } 
.winter{ display:block; background-position: 0 -4140px; width: 300px; height: 180px; } 
.scary{ display:block; background-position: 0 -4320px; width: 300px; height: 180px; } 
.ripple{ display:block; background-position: 0 -4500px; width: 300px; height: 180px; } 

/* Crop Image */
#imageResult {
  background-color: #f7f7f7;
  overflow: hidden;
  width: 100%;
  text-align: center;  
}

#imageResult {
  min-height: 200px;
  max-height: 466px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  #imageResult {
    /*min-height: 466px;*/
  }
}

#imageResult > img {
  max-width: 100%;
}
/* End Crop Image */