#userAvatarEditor_popupBlanket{
	display: block;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	z-index: 9999999;
	height: 100%;	
	overflow: hidden;
	margin:0;
	background: transparent url(img/userAvatar/blanket_bg.png);
}

#userAvatarEditor_popupBlanket:after{
	content: 'url(img/userAvatar/imageMaskGuides.png)';
}

#userAvatarEditor_popupWindow{	
	display: block;	
	width: 720px;	
	padding: 0;
	margin: 0 auto;
	background: #fff;
	position: fixed;
	left: 50%;
	top: 130px;
	margin-left: -360px;
	z-index: 99999999;
}

#userAvatarEditor_embedded{	
	display: block;	
	width: 720px;	
	padding: 0;
	margin: 0 auto;
	background: #fff;
	z-index: 99999999;
}

#userAvatarEditor_popupWindow #userAvatarEditor_popupCloseBtn{	
	position: relative;
	display: block;
	padding: 8px 12px;
	text-align: right;
	color: #ccc;
	background: #717171;
	z-index: 999999999;
	cursor: pointer;
	text-decoration: none;

}
#userAvatarEditor_popupWindow #userAvatarEditor_popupCloseBtn:hover,
#userAvatarEditor_popupWindow #userAvatarEditor_popupCloseBtn:focus
{	
	text-decoration: underline;
}

#userAvatarEditor_popupWindow #userAvatarEditor,
#userAvatarEditor_embedded #userAvatarEditor{
	display: block;
	position: relative;
	clear: both;
	overflow: hidden; /*hidden */
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #ccc;
}

#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel{
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	width: 48%;
}

#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel h2,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel h2{
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-weight: bold;
}

/** File upload progress classes **/
#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel .uploadProgressContainer,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel .uploadProgressContainer{
	display: none;
	position: relative;
	clear: both;
	margin: 10px 0;
	padding: 0;
	overflow: hidden;
}

#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel .uploadProgressContainer .progressMeter,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel .uploadProgressContainer .progressMeter {
	display: block;
	position: relative;
	clear:both;
	margin: 3px auto;
	padding: 2px;
	background: #fff;
	border: 1px solid #afafaf;
	height: 4px;
	border-radius: 4px;
	line-height: 0;
	overflow: hidden;
}

#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel .uploadProgressContainer .progressBar, 
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel .uploadProgressContainer .progressBar {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 0;
	overflow: hidden;
	background: #ccc;
	height: 100%;
	max-width: 100%;
	border-radius: 2px;
}

#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel .uploadProgressContainer .progressLabel,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel .uploadProgressContainer .progressLabel
{
	display: block;
	padding: 4px 0;
	text-align: center;
	font-style: italic;
	font-size: 90%;
}



#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel .uploadProgressContainer .preLoader,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel .uploadProgressContainer .preLoader{
	display: block;
	position: absolute;
	height: 40%;
	width: 50%;
	left: 25%;
	top: 30%;
	background: transparent url(img/userAvatar/saveProgressContainerBg.png);
	border-radius: 12px;
	color: #333;
	text-align: center;
	z-index: 400;
}

#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel .uploadProgressContainer .preLoader .loadingBar_empty,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel .uploadProgressContainer .preLoader .loadingBar_empty{
	display: block;
	position: relative;
	clear: both;
	width: 0%;
	height: 5%;
	background: transparent;
	margin-left: 25%;
	margin-top: 5%;
	border-radius: 5px;
}

#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel .uploadProgressContainer .preLoader .loadingBar,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel .uploadProgressContainer .preLoader .loadingBar{
	display: block;
	position: relative;
	clear: both;
	width: 50%;
	height: 5%;
	background: #333;
	margin-left: 25%;
	margin-top: 5%;
	border-radius: 5px;
}


#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel #fileUploadContainer,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel #fileUploadContainer{
	display: block;
	overflow: hidden;
	margin: 5px 0;
	padding: 12px 8px;
	background: #e7e7e7;
	border-radius: 5px;
}

#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel .fileUploadContainer .fileUploader,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel .fileUploadContainer .fileUploader{
	border: none;
}

#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel label,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel label{
	display: block;
	font-weight: bold;
	padding-bottom: 5px;
}
#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel .formHint,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel .formHint{
	font-weight: normal;
	font-style: italics;
	font-size: 90%;
	color: #999;
	padding-left: 10px;
}

#userAvatarEditor_popupWindow #userAvatarEditor .uploadPanel .buttonContainer,
#userAvatarEditor_embedded #userAvatarEditor .uploadPanel .buttonContainer{
	text-align: center;
	padding: 10px;
}


#userAvatarEditor_popupWindow #userAvatarEditor .editPanel,
#userAvatarEditor_embedded #userAvatarEditor .editPanel{
	display: block;
	margin-left: 52%;
	padding: 0;
	width: 48%;
	background: transparent url(img/userAvatar/grid_repeat.jpg) 0 0 repeat;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel #avatarImageContainer,
userAvatarEditor_embedded #userAvatarEditor .editPanel #avatarImageContainer{
	display: block;
	position: relative;
	background: transparent url(img/userAvatar/imageMaskGuides.png) 0 0 no-repeat !important;
	padding: 10px 0 0 0;
	width: 300px;
	height: 250px;
	margin: 0 auto;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMaskContainer,
#userAvatarEditor_embedded #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMaskContainer{
	display: block;
	position: relative;
	width: 224px;
	height: 224px;
	overflow: hidden; 
	margin: 0 0 0 48px;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel #avatarImageContainer #shapeGuide,
#userAvatarEditor_embedded #userAvatarEditor .editPanel #avatarImageContainer #shapeGuide{
	display: block;
	position: relative;
	height: 224px; 
	width: 166px; /* Width is 70% of height  - (heightVal / 100) X 70 */
	background: #fff;
	background-size: cover;
	overflow: hidden; 
	border-radius: 50% 50% 50% 50% / 40% 40% 60% 60% ; 
	z-index: 400 !important;
	margin: 0 auto;
}


#userAvatarEditor_popupWindow #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask,
#userAvatarEditor_embedded #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask{
	

	display: block;
	position: relative;
	width: 224px;
	height: 224px;
	overflow: hidden; 
	border: 1px solid #afafaf;
	background: #ccc;
	margin-left: -29px;
}




#userAvatarEditor_popupWindow #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask #avatarImage,
#userAvatarEditor_embedded #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask #avatarImage{
	display: block;
	position: absolute;
	z-index: 200;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask #avatarImage:hover,
#userAvatarEditor_embedded #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask #avatarImage:hover{
	cursor: url(img/icons/20/drag_20.png), auto;
}


#userAvatarEditor_popupWindow #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask .preLoader,
#userAvatarEditor_embedded #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask .preLoader
{
	display: block;
	position: absolute;
	height: 40%;
	width: 50%;
	left: 25%;
	top: 30%;
	background: transparent url(img/userAvatar/saveProgressContainerBg.png);
	border-radius: 12px;
	color: #333;
	text-align: center;
	z-index: 400;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask .preLoader .loadingBar_empty,
#userAvatarEditor_embedded #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask .preLoader .loadingBar_empty{
	display: block;
	position: relative;
	clear: both;
	width: 0%;
	height: 5%;
	background: transparent;
	margin-left: 25%;
	margin-top: 5%;
	border-radius: 5px;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask .preLoader .loadingBar,
#userAvatarEditor_embedded #userAvatarEditor .editPanel #avatarImageContainer #avatarImageMask .preLoader .loadingBar{
	display: block;
	position: relative;
	clear: both;
	width: 50%;
	height: 5%;
	background: #333;
	margin-left: 25%;
	margin-top: 5%;
	border-radius: 5px;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel #editControls,
#userAvatarEditor_embedded #userAvatarEditor .editPanel #editControls{
	margin: 0;
	padding: 0;
	display: none;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel .dragInstruction,
#userAvatarEditor_embedded #userAvatarEditor .editPanel .dragInstruction{
	background: transparent url(img/icons/20/drag_20.png) 20px 0 no-repeat;
	padding: 1px 0 4px 45px;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel .scaleSliderContainer,
#userAvatarEditor_embedded #userAvatarEditor .editPanel .scaleSliderContainer{
	display: block;
	position: relative;
	margin: 5px 0 10px 0;
	padding: 0;
	overflow: hidden;
	
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel .scaleSliderContainer:before,
#userAvatarEditor_embedded #userAvatarEditor .editPanel .scaleSliderContainer:before{
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
	left: 20px;
	top: 8px;
	content: "Zoom:";
	font-weight: bold;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider,
#userAvatarEditor_embedded #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider{
	display: block;
	position: relative;
	padding: 14px 0;
	width: 224px;
	top: 0;
	margin: 0 auto;
	margin-left: 65px;
	background: #e3e3e3;
	border-radius: 5px;
	overflow: hidden;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider:before,
#userAvatarEditor_embedded #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider:before{
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
	background: transparent url(img/userAvatar/scale_down.png) 50% 50% no-repeat;
	height: 100%;
	width: 24px;
	content: "";
	top: 0;
	left: 0;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider:after,
#userAvatarEditor_embedded #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider:after{
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
	background: transparent url(img/userAvatar/scale_up.png) 50% 50% no-repeat;
	height: 100%;
	width: 24px;
	content: "";
	top: 0;
	right: 0;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider #scaleSlideBar,
#userAvatarEditor_embedded #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider #scaleSlideBar
{
	display: block;
	clear: both;
	position: relative;
	height: 3px;
	background: #666;
	margin: 0 22px 0 22px;
	padding: 0;
	oveflow: hidden;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider #scaleSlideBar #scaleSlideHandle,
#userAvatarEditor_embedded #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider #scaleSlideBar #scaleSlideHandle
{
	position: absolute;
	top: -9px;
	left: 10px;
	padding: 0;
	background: #fff;
	overflow: hidden;
	border-radius: 12px;
	text-decoration: none;
	height: 20px;
	width: 18px;
	-moz-box-shadow: 0 0 5px -1px #1a1a1a;
	-webkit-box-shadow: 0 0 5px -1px #1a1a1a;
	box-shadow: 0 0 5px -1px #1a1a1a;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider #scaleSlideBar #scaleSlideHandle:after,
#userAvatarEditor_embedded #userAvatarEditor .editPanel .scaleSliderContainer #scaleSlider #scaleSlideBar #scaleSlideHandle:after
{
	position: absolute;
	top: 1px;
	left: 1px;
	padding: 0;
	background: #6F90CB;
	overflow: hidden;
	border-radius: 10px;
	text-decoration: none;
	height: 18px;
	width: 16px;
	content: "";
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel .buttonContainer,
#userAvatarEditor_embedded #userAvatarEditor .editPanel .buttonContainer{
	text-align: right;
	padding: 10px;
}

#userAvatarEditor_popupWindow #userAvatarEditor .editPanel #saveResults,
#userAvatarEditor_embedded #userAvatarEditor .editPanel #saveResults{
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding:0;
}