/* This is CSS classes for image zoom tool in style detail page */ 
    /* Controls the file used and displayed as the Cursor in zoomed image and the Border displayed around the Stock Item image container*/
    .MagicThumb {
       cursor: url(../Files/zoomin.cur), pointer;
       outline: none;
    }
    /* Controls the Border displayed around the Stock Item image */
    .MagicThumb img { 
        border: 1px solid #808080; 
        outline: none;
    }
    /* CSS class for small looking glass square under mouse on stock item image */
    /* Controls the Border and background/cover colour for the Zoom function on the Stock Item image */
    .MagicZoomPup {
   	   border: 1px solid #AAAAAA;
   	   background: #FFFFFF;
   	   cursor: hand;
    }
    /* CSS class for stock item image when the big zoomed image is being displayed */
    /* Controls the display of each of the components within a zoomed image */
    .MagicThumb-zoomed { 
       cursor: default; 
    }
    /* Controls the Border and background/cover colour for the Style Colour image */
    .StyleColourImage {
      border: 1px solid #CFCFCF;
      width: 46px;
      height: 59px; 
      vertical-align: middle;
      text-align: center;
    }
    /* Controls the font size and background/cover colour for the Style Colour image title*/
    .StyleColourImageCaption {
      font-weight: normal;
      font-size: 10px;
      text-align: center;
    }
.StyleColourImageCaption p {
   word-wrap:break-word;
   width:59px;
 }
    /* CSS class for right zoomed image container */
    /* Controls the Border displayed where the Zoomed image is displayed */ 
    .MagicZoomBigImageCont {
    	   border: 1px solid #91b817;;
    
  width:300px !important;  /* do not edit this line please */
  height:300px !important; /* do not edit this line please */
}
    /* CSS class for right zoomed image header */
    /* Controls the Heading panel Background, text font and Colour */
    .MagicZoomHeader {
   	   font: 10px Tahoma, Verdana, Arial, sans-serif;
   	   color: #FFF;;
   	   background: #91b817;;
   	   text-align: center !important; 
    }
    /* CSS class for the big image while zooming */
    .MagicThumb-image { 
       border: 1px solid #CCCCCC; 
       outline: none;
    }
    /* CSS class for the big zoomed image */
    .MagicThumb-image-zoomed { 
       cursor: url(../Files/zoomout.cur), pointer;
    }
    /* CSS class for the caption under the big zoomed image */
    .MagicThumb-caption {
       color: #333333;
       background-color: #F0F0F0;
       border: 1px solid #CCCCCC;
       border-top: none;
       font-family: Verdana, Helvetica;
       font-size: 11px;
       padding: 8px 16px;
    }
    /* CSS class for the control bar on top of the big zoomed image. Don't change these next 3 items */
    .MagicThumb-controlbar {
    	  display: block;
    	  height: 18px;
    }
    .MagicThumb-controlbar a {
    	  display: block;
    	  width: 18px;
    	  height: 18px;
    	  margin: 0px 1px;
    	  outline: none;
    	  float: left;
    	  overflow: hidden;
    }
    .MagicThumb-controlbar a span {
    	  display: block;
    	  width: 1000px;
    	  height: 1000px;
    	  background: transparent url(../Files/controlbar.png) no-repeat 0 0;
    	  outline: none;
    	  position: absolute;
    	  left: 0px;
    	  top: 0px;
    }
    /* CSS class for loading animation box */
    .MagicZoomLoading {
    	  text-align: center;
    	  background: #ffffff;
    	  color: #444;
    	  border: 1px solid #ccc;
    	  opacity: 0.8;
    	  padding: 3px 3px 3px 3px !important;
    	  display: none; /* do not edit this line please */
    }
    /* CSS class for gif image in the loading animation box */
    .MagicZoomLoading img {
    	  padding-top:	3px !important;
    }
    /* CSS class for the loading message box */
    .MagicThumb-loading {
    	  border: 1px solid #000000;
    	  background: #ffffff url(../Files/loader.gif) no-repeat 2px 50%;
    	  padding: 2px 2px 2px 22px;
    	  margin: 0;
    	  text-decoration: none;
    	  text-align: left;
    	  font-size: 8pt;
    	  font-family: sans-serif;
    } 
    
 /* Controls the zoomed image position if zoom-image-posotion property sets to custom at configuration */ 
#ImgStyle-big { 
/* 
   position:absolute;
   left:0px; 
   top:0px;
  width:0px; /* do not edit this line please */ 
  height:0px; /* do not edit this line please */ 
*/
}