	
	#smallimg > div.cropControls{
		display: none !important;
	}

	html{
		background-image: url(bg.gif);
		overflow: hidden;
	}
	
	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	#container{
		width: 510px;
		height: 600px;
		display: block;
		margin: 0 auto;
		background-color: #f0f0f0;
		
		-webkit-box-shadow: 5px 5px 14px 0px rgba(163,163,163,1);
		-moz-box-shadow: 5px 5px 14px 0px rgba(163,163,163,1);
		box-shadow: 5px 5px 14px 0px rgba(163,163,163,1);
	}
	
	#title{
		text-align: center; 
		padding: 20px 0;
		background-color: pink;
	}
	
	#big, #small{margin-left: 55px}
	
	#olarge, #osmall{float: left; border: 1px solid #ccc}
	#olarge{margin: 100px 0 0 70px}
	#osmall{margin: 80px 0 0 131px;}
	
	#bigimg, #smallimg{background-image: url(transparent.png); position: relative; border:1px solid #ccc;}
	
	#bigimg{margin: 100px 0px 80px 0px; width:169px; height:127px;}
	#smallimg{margin:80px 61px; width:47px; height:47px;}
	
	#ms, #mr, #mb, #mn {background-image: url(transparent.png);position: relative; border:1px solid #ccc;}
	#ms{width:84px; height:84px;}
	#mr{width:213px; height:213px;}
	#mb{width:722px; height:240px;}
	#mn{width:722px; height:952px;margin-top: -500px;}
	
	/* DO NOT CHANGE FROM HERE ( unless u know what u are doing) */
	.cropImgWrapper{
		cursor: -webkit-grab;
		cursor: grab;
	}
	.cropImgWrapper:active{
		cursor: -webkit-grabbing;
		cursor: grabbing;
	}
	
	.cropImgUpload{
		z-index:99999;
		position:absolute;
		height:28px;
		display:block;
		top: -30px;
		right: -2px;
		font-family:sans-serif;
		width:20px;
		height:20px;
		text-align:center;
		line-height:20px;
		color:#FFF;
	}
	
	.cropControls{
		z-index:999;
		position:absolute;
		height:30px;
		display:block;
		/* top: -31px; */
		top: -1px;
		right: -1px;
		font-family:sans-serif;
		/*background-color:rgba(0,0,0,0.35);*/
		width: 30px;
		height: 240px;
		left: -35px;
		top: -28px;
	}
	
	#smallimg > div.cropControls{
		top: -68px;
	}
	
	.cropControls i{
		display:block;
		float:left;
		margin:0;
		cursor:pointer;
		background-image:url('../img/cropperIcons.png');	
		width:30px;
		height:30px;
		text-align:center;
		line-height:20px;
		color:#FFF;
		font-size:13px;
		font-weight: bold;
		font-style: normal;
		
	}
	
	.cropControls i:hover{ background-color:#d8e697;  }
	
	.cropControls i.cropControlZoomMuchIn{ background-position:0px 0px;}
	.cropControls i.cropControlZoomIn{ background-position:-30px 0px; }
	.cropControls i.cropControlZoomOut{ background-position:-60px 0px; }
	.cropControls i.cropControlZoomMuchOut{ background-position:-90px 0px; }
	.cropControls i.cropControlRotateLeft{ background-position:-210px 0px; }
	.cropControls i.cropControlRotateRight{ background-position:-240px 0px; }
	.cropControls i.cropControlCrop{ background-position:-120px 0px;}
	.cropControls i.cropControlUpload{ background-position:-150px 0px;}
	.cropControls i.cropControlReset{ background-position:-180px 0px;}
	.cropControls i.cropControlRemoveCroppedImage{ background-position:-180px 0px;}
	
	.cropControls i:last-child{
		margin-right:none;
	}
	
	#croppicModal{
		position:fixed;
		width:100%;
		height:100%;
		top: 0;
		left: 0;
		display:block;
		background:rgba(0,0,0,0.8);
		z-index: 10000;
	}
	
	
	/*
	*		PRELOADER 
	*		With courtesy of : http://cssload.net/
	*/
	
	.bubblingG {
		text-align: center;
		width:80px;
		height:50px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -18px auto auto -40px;
		z-index:99999;
	}

	.bubblingG span {
		display: inline-block;
		vertical-align: middle;
		width: 10px;
		height: 10px;
		margin: 25px auto;
		background: #FFF;
		box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
		-moz-border-radius: 50px;
		-moz-animation: bubblingG 1s infinite alternate;
		-webkit-border-radius: 50px;
		-webkit-animation: bubblingG 1s infinite alternate;
		-ms-border-radius: 50px;
		-ms-animation: bubblingG 1s infinite alternate;
		-o-border-radius: 50px;
		-o-animation: bubblingG 1s infinite alternate;
		border-radius: 50px;
		animation: bubblingG 1s infinite alternate;
		
	}

	#bubblingG_1 {
		-moz-animation-delay: 0s;
		-webkit-animation-delay: 0s;
		-ms-animation-delay: 0s;
		-o-animation-delay: 0s;
		animation-delay: 0s;
	}

	#bubblingG_2 {
		-moz-animation-delay: 0.3s;
		-webkit-animation-delay: 0.3s;
		-ms-animation-delay: 0.3s;
		-o-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}

	#bubblingG_3 {
		-moz-animation-delay: 0.6s;
		-webkit-animation-delay: 0.6s;
		-ms-animation-delay: 0.6s;
		-o-animation-delay: 0.6s;
		animation-delay: 0.6s;
	}

	@-moz-keyframes bubblingG {
		0% {
			width: 10px;
			height: 10px;
			background-color:#FFF;
			-moz-transform: translateY(0);
		}

		100% {
			width: 24px;
			height: 24px;
			background-color:#FFF;
			-moz-transform: translateY(-21px);
		}

	}

	@-webkit-keyframes bubblingG {
		0% {
			width: 10px;
			height: 10px;
			background-color:#FFF;
			-webkit-transform: translateY(0);
		}

		100% {
			width: 24px;
			height: 24px;
			background-color:#FFF;
			-webkit-transform: translateY(-21px);
		}

	}

	@-ms-keyframes bubblingG {
		0% {
			width: 10px;
			height: 10px;
			background-color:#FFF;
			-ms-transform: translateY(0);
		}

		100% {
			width: 24px;
			height: 24px;
			background-color:#FFF;
			-ms-transform: translateY(-21px);
		}

	}

	@-o-keyframes bubblingG {
		0% {
			width: 10px;
			height: 10px;
			background-color:#FFF;
			-o-transform: translateY(0);
		}

		100% {
			width: 24px;
			height: 24px;
			background-color:#FFF;
			-o-transform: translateY(-21px);
		}

	}

	@keyframes bubblingG {
		0% {
			width: 10px;
			height: 10px;
			background-color:#FFF;
			transform: translateY(0);
		}

		100% {
			width: 24px;
			height: 24px;
			background-color:#FFF;
			transform: translateY(-21px);
		}

	}
	
	
	/* some reset stlyes */
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
