/* Avatar customizer */
.fancybox-item.fancybox-close { position: absolute; top: -12px; left: -12px; }
#avatarcustomizer { position: relative; width: 768px; height: 500px; overflow: hidden; font-size: .8em; }
#avatarbuilder { width: 200px; height: 200px; background-color: #fff; position: absolute; left: 80px; top: 12px; z-index: 10; }
	#avatarbuilder img { position: absolute; top: 0; left: 0; width: 200px; height: 200px; }

#avatartoolboxcategories { width: 100%; height: 53px; background-color: #d2117c; position: absolute; left: 0; bottom: 0; }
	#avatartoolboxcategories ul { list-style-type: none; margin: 0; padding: 0 0 0 45px; position: absolute; left: 0; top: 0; }
	#avatartoolboxcategories a { display: block; height: 38px; background-color: #d2117c; font-family: 'CenturyGothic-Bold'; color: #fff; text-decoration: none; padding: 15px 0 0 0; text-align: center; }
	#avatartoolboxcategories a:hover { color: #424287; }
	#avatartoolboxcategories ul li { float: left; width: 240px; }
		#avatartoolboxcategories li a.active { background: transparent url('/widgets/assets/avatar/categories/tab_active.png') scroll no-repeat 0 -1px; color: #d2117c; }
			#avatartoolboxcategories li a span { display: block; }

#avatartoolbox { width: 612px; height: 92px; background-color: #fff; position: absolute; left: 0; bottom: 53px; padding: 0 78px; }
	#avatartoolbox a.prev, #avatartoolbox a.next { position: absolute; top: 0; display: block; width: 80px; height: 100%; background: transparent scroll no-repeat center center; color: #fff; }
		#avatartoolbox a.prev { left: 0; background-image: url('/widgets/assets/avatar/interface/btn_left.png'); }
		#avatartoolbox a.next { right: 0; background-image: url('/widgets/assets/avatar/interface/btn_right.png'); }
			#avatartoolbox a.prev.disabled, #avatartoolbox a.next.disabled { background-image: none; cursor: default; }
		#avatartoolbox a span { display: none; }
	#avatartoolbox ul { list-style-type: none; margin: 0; padding: 0; height: 100%; }
	#avatartoolbox ul li { display: block; height: 80px; float: left; }
	#avatartoolbox a { display: block; width: 80px; height: 80px; }
	#avatartoolbox img { width: 80px; height: 80px; }

#avatartoolboxcolors { width: 100%; height: 138px; background: #fff url('/widgets/assets/avatar/interface/toolbar_separator.png') scroll no-repeat 78px bottom; position: absolute; left: 0; top: 217px; }
	#avatartoolboxcolors div p { margin: 6px 0 0 80px; font-family: 'CenturyGothic-Bold'; color: #424287; }
	#avatartoolboxcolors div div { position: relative; height: 46px; margin: 0 78px; }
	#avatartoolboxcolors div.colorHolder { height: 40px; margin: 0; overflow: auto; }
		#avatartoolboxcolors #haircolors div.colorHolder { width: 415px; }
		#avatartoolboxcolors #skincolors div.colorHolder, #avatartoolboxcolors #eyecolors div.colorHolder { width: 660px; }
		#avatartoolboxcolors #shirtcolors div.colorHolder { width: 335px; }
	#fashioncolorspanel, #haircolorspanel { margin-top: 40px; }
	#avatartoolboxcolors ul { list-style-type: none; margin: 0; padding: 0; }
	#avatartoolboxcolors ul li { display: block; height: 33px; float: left; margin-left: 2px; }
	#avatartoolboxcolors a { display: block; background: none repeat scroll 0 0 #333; border: 1px solid #fff; border-radius: 5px; cursor: pointer; height: 33px; width: 33px; }
		#avatartoolboxcolors a.selected { border: 1px solid #000; }
		#avatartoolboxcolors a#hair-color1 { background-color: #fce6ab; }
		#avatartoolboxcolors a#hair-color2 { background-color: #fdb849; }
		#avatartoolboxcolors a#hair-color3 { background-color: #ed6e44; }
		#avatartoolboxcolors a#hair-color4 { background-color: #c97753; }
		#avatartoolboxcolors a#hair-color5 { background-color: #c22026; }
		#avatartoolboxcolors a#hair-color6 { background-color: #662a18; }
		#avatartoolboxcolors a#hair-color7 { background-color: #b177b3; }
		#avatartoolboxcolors a#hair-color8 { background-color: #b81f6c; }
		#avatartoolboxcolors a#hair-color9 { background-color: #182e4f; }
		#avatartoolboxcolors a#hair-color10 { background-color: #38222c; }

		#avatartoolboxcolors a#face-color1 { background: #d7a8ed; }
		#avatartoolboxcolors a#face-color2 { background: #7ec8de; }
		#avatartoolboxcolors a#face-color3 { background: #a7b8fd; }
		#avatartoolboxcolors a#face-color4 { background: #beb8c7; }
		#avatartoolboxcolors a#face-color5 { background: #7db2d5; }
		#avatartoolboxcolors a#face-color6 { background: #a9d1ff; }
		#avatartoolboxcolors a#face-color7 { background: #9e90bb; }
		#avatartoolboxcolors a#face-color8 { background: #702462; }
		#avatartoolboxcolors a#face-color9 { background: #a5c632; }
		#avatartoolboxcolors a#face-color10 { background: #68bf69; }
		#avatartoolboxcolors a#face-color11 { background: #4cb97a; }
		#avatartoolboxcolors a#face-color12 { background: #ba7339; }
		#avatartoolboxcolors a#face-color13 { background: #8f7354; }
		#avatartoolboxcolors a#face-color14 { background: #7d6130; }
		#avatartoolboxcolors a#face-color15 { background: #594337; }
		#avatartoolboxcolors a#face-color16 { background: #182e4f; }

		#avatartoolboxcolors a#skin-color1 { background: #f9dcc9; }
		#avatartoolboxcolors a#skin-color2 { background: #d9b390; }
		#avatartoolboxcolors a#skin-color3 { background: #f5c3a5; }
		#avatartoolboxcolors a#skin-color4 { background: #f9deaf; }
		#avatartoolboxcolors a#skin-color5 { background: #f6cd99; }
		#avatartoolboxcolors a#skin-color6 { background: #d59e6c; }
		#avatartoolboxcolors a#skin-color7 { background: #e0925a; }
		#avatartoolboxcolors a#skin-color8 { background: #ce8a4e; }
		#avatartoolboxcolors a#skin-color9 { background: #b9743d; }
		#avatartoolboxcolors a#skin-color10 { background: #bd8660; }
		#avatartoolboxcolors a#skin-color11 { background: #b17a53; }
		#avatartoolboxcolors a#skin-color12 { background: #b07244; }
		#avatartoolboxcolors a#skin-color13 { background: #8d6c4e; }
		#avatartoolboxcolors a#skin-color14 { background: #885634; }
		#avatartoolboxcolors a#skin-color15 { background: #724523; }
		#avatartoolboxcolors a#skin-color16 { background: #563729; }

		#avatartoolboxcolors a#shirt-color1 { background: #5fb2c5; }
		#avatartoolboxcolors a#shirt-color2 { background: #fbba63; }
		#avatartoolboxcolors a#shirt-color3 { background: #b35387; }
		#avatartoolboxcolors a#shirt-color4 { background: #d42027; }
		#avatartoolboxcolors a#shirt-color5 { background: #90888b; }
		#avatartoolboxcolors a#shirt-color6 { background: #89ca81; }
		#avatartoolboxcolors a#shirt-color7 { background: #63b7e6; }
		#avatartoolboxcolors a#shirt-color8 { background: #ee2a7b; }

#avataractions { width: 468px; height: 217px; padding-left: 300px; position: absolute; left: 0; top: 0; background: #b7b2e0 url('/widgets/assets/avatar/interface/bg_avatar_customizer_top.png') scroll no-repeat left top; }
	#avataractions p { font-size: 1.4em; font-family: 'CenturyGothic-Bold'; color: #424287; margin-top: 55px; text-align: center; margin-bottom: 18px; }
	#avataractions a { display: block; width: 165px; height: 25px; margin: 0 auto; color: #fff; font-family: 'CenturyGothic-Bold'; text-decoration: none; text-align: center; padding: .75em 0; background: transparent url('/widgets/assets/interface/btn_avatar_customizer_action.png') scroll no-repeat left top; background-size: 100% 80%; }
		#avataractions a:hover { color: #424287; }
		#avataractions a span { display: block; }
			#avataractions a span.longtext { font-size: .7em; }
	/*#avataractions p { margin-left: 325px; }*/
	#avataractions a#buttonDoOver { position: absolute; background: none; top: 17px; right: 25px; color: #d2117c; margin: 0; display: inline; padding: 0; width: auto; height: auto; text-decoration: underline; }
		#avataractions a#buttonDoOver:hover { color: #424287; }

/* Avatar customizer complete */
#avatarcustomizercomplete { background: transparent url('/widgets/assets/registration/bg_registration.png') scroll no-repeat left top; padding: 1px 232px; width: 320px; height: 499px; }
	#avatarcustomizercomplete h1 { margin: 175px 0 25px; text-align: center; }
	#avatarcustomizercomplete a { display: block; width: 270px; height: 25px; color: #fff; font-family: 'CenturyGothic-Bold'; text-decoration: none; margin: 5px auto; text-align: center; padding: 13px 15px; background: transparent url('/widgets/assets/interface/btn_avatar_customizer_action.png') scroll no-repeat left top; font-size: 1em; }
		#avatarcustomizercomplete a span { display: block; }

/* tablet */
@media (max-width: 1023px) {
	#avatarcustomizercomplete { padding: 1px 100px 0; background-image: url('/widgets/assets/registration/bg_registration_tablet.png'); }
}

/* mobile */
@media (max-width: 767px) {
	.fancybox-wrap:not(.cookie-pop-wrap) .fancybox-item.fancybox-close { position: absolute; top: 0px; left: 289px; background-image: url('/widgets/assets/interface/btn_close_lightbox.png'); }
	#avatarcustomizer { width: 320px; height: 455px; background-color: #b7b2e0; }
	#avatarbuilder { width: 118px; height: 118px; left: 10px; top: 61px; }
		#avatarbuilder img { width: 100%; height: 100%; }
	#avatartoolboxcolors { background-color: #fff; height: 145px; width: 100%; top: 193px; background: #fff url('/widgets/assets/avatar/interface/toolbar_separator_mobile.png') scroll no-repeat 20px bottom; }
		#avatartoolboxcolors div p { margin-left: 10px; }
		#avatartoolboxcolors div div { overflow: scroll; margin: 2px 8px; }
		#avatartoolboxcolors ul li { margin-left: 6px; }
	#avatartoolbox { background-color: #fff; height: 78px; width: 300px; bottom: 30px; padding: 10px 10px 0; }
		#avatartoolbox ul img { width: 60px; height: 60px; }
		#avatartoolbox a.prev, #avatartoolbox a.next { display: none !important; }
	#avatartoolboxcategories { height: 30px; width: 100%; }
		#avatartoolboxcategories ul { padding: 0 0 0 1px; }
		#avatartoolboxcategories a { height: 20px; padding: 3px 0 0 0; }
		#avatartoolboxcategories a:hover { color: #424287; }
		#avatartoolboxcategories ul li { float: left; width: 106px; }
		#avatartoolboxcategories li a.active { background: transparent url('/widgets/assets/avatar/categories/tab_active_mobile.png') scroll no-repeat 0 -1px; color: #d2117c; }
	#avataractions { background: none; height: 193px; width: 100%; }
		#avataractions p { font-size: 1.4em; font-family: 'CenturyGothic-Bold'; color: #424287; margin: 5px 0 50px 10px; }
		#avataractions a { width: 166px; height: 25px; padding: 6px 0; margin: 12px 0 0 143px; background-image: url('/widgets/assets/avatar/interface/btn_avatar_customizer_action_mobile.png'); }
		#avataractions a#buttonDoOver { top: 32px; right: auto; left: 10px; }

	#avatarcustomizercomplete { padding: 1px 0 0; width: 320px; height: 455px; background: #b7b2e0; }
}

/* swapping images for higher pixel ratio displays */
@media
only screen and ( -webkit-min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 768px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 768px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and ( min-resolution: 192dpi) and (min-width: 768px),
only screen and ( min-resolution: 2dppx) and (min-width: 768px) {
	#avatarcustomizercomplete { background-image: url('/widgets/assets/registration/bg_registration_tablet_hd.png'); background-size: 100% 100%; }
	.fancybox-item.fancybox-close { background-image: url('/widgets/assets/interface/btn_close_lightbox_hd.png'); background-size: 100% 100%; }
}

@media
only screen and ( -webkit-min-device-pixel-ratio: 2) and (max-width: 767px),
only screen and ( min--moz-device-pixel-ratio: 2) and (max-width: 767px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 767px),
only screen and ( min-device-pixel-ratio: 2) and (max-width: 767px),
only screen and ( min-resolution: 192dpi) and (max-width: 767px),
only screen and ( min-resolution: 2dppx) and (max-width: 767px) {
	.fancybox-item.fancybox-close { background-image: url('/widgets/assets/interface/btn_close_lightbox_hd.png'); background-size: 100% 100%; }
}