/* flypage */
	#tryon-display-header{ display: block;  width: 229px; height: 10px; margin: 0; background:url(/store/images/tryon-display-top.jpg) no-repeat; width: 227px; height: 10px; }
	#tryon-display-left{ float: left;  width: 9px; height: 302px; margin: 0; background:url(/store/images/tryon-display-left.jpg) repeat-y }
	#tryon-display-right{ float: left; width: 18px; height: 302px; margin: 0; background:url(/store/images/tryon-display-right-sm.jpg) repeat-y }
	#tryon-display-bottom{ display: block;  width: 229px; height: 15px; margin: 0; background:url(/store/images/tryon-display-bottom.jpg) no-repeat; width: 227px; height: 15px }

	#tryon-display-container{ margin: 0px; width: 229px }
	#tryon-display-magnify{ position:absolute; top: 1px; 
right: 3px; cursor: pointer }
	#tryonDisplayInnerFrame{ float: left; border: 1px solid; padding: 0; background: white; margin: 0; overflow:hidden; width: 200px; height: 300px }

.larger{ font-size: 14px !important }

html body div a.no-line{ text-transform: uppercase; font: Arial !important; font-weight: bold !important; font-size: 9.5pt !important; text-decoration: none !important }
html body div a.no-line:hover{ text-decoration: underline !important; }

#tryon-popup-header{ height: 40px; width: 100%; margin: 0;  
	background: #066993;
	background: -webkit-linear-gradient(top, #066993, #054864);
	background: -moz-linear-gradient(top, #066993, #054864);
	background: -o-linear-gradient(top, #066993, #054864);
	color: white;
	font-weight: bold;
}

/* This version of the header is present on the adjust step */
#tryon-popup-header.absolute{ 	position: absolute; top: 0; left: 0; z-index:1;  }

#tryon-popup-header-left{ margin: 0; padding: 0;position: absolute; top: 8px; left: 10px;}
#tryon-popup-header-close{  margin: 0; padding: 0;cursor: pointer; position: absolute; right: 10px; top: 8px;}

#tryon-popup-body{ margin: auto; border-left: 10px solid #054864; border-right: 10px solid #054864; border-bottom: 10px solid #054864; }
#tryon-popup-body.absolute{ position: absolute; top: 40px; clear: both; width: 780px; }
#tryon-popup-body.static{ clear: both; text-align: center }

#tryon-popup-image-container{ float: left; margin: 0px; padding: 0px; padding-left: 6px; padding-top: 6px; }

#tryonToolInnerFrame{ display: block; float: left;	border: 1px solid; padding: 0; background: white; margin: 0; overflow:hidden }

#tryon-popup-step-content{ float: right; width: 367px; margin: 0px; z-index: 99999; }
html body #tryon-popup-step-content.adjust{ width: 374px !important }
#tryon-popup-step-content-header{ margin: 0; width: 100% }
.underHeader{ padding: 20px 0 0 }
div.header-wrapper{ background: url('/img/tryon/header-bg.png') no-repeat top left; width: 350px; height: 57px; text-align: left; padding: 0; margin: 0 auto 4px; background-color: white; }
#tryon-step-number{ float: left; height: 25px; padding: 18px 3px 0 0; font-size: 1em; font-weight: bold; color: white; margin-left: 10px }
html.ie #tryon-step-number{ height: 30px }
#tryon-step-description{ float: left; font-size: 1.2em; font-weight: bold; color: black; padding: 19px 0 0 12px }

div.gender-selection{ position: relative; float: left; text-align: center; margin-top: 25px; margin-right: 10px; }
div.gender-selection.first{ margin-left: 45px !important; }
div.gender-selection > *{ cursor: pointer }
div.gender-selection img{ width: 170px; border: none }

div.button div.label{ cursor: pointer }

/* Step 1 */
#hideupload{ height: 375px; width: 250px; position: absolute; top: 64px; left: 60px; z-index: -1000 }
#uploadimage{ margin: auto; height: 375px; width: 250px; border: none }
#hideright{ z-index: -1000; position: absolute; top: 60px; right: 24px; margin: 0px; width: 430px; }
#uploadexamples{ margin: 54px 0 0 27px; width: 100% }
#uploadexamples img{ margin: auto; width: 362px; height: 184px; border: none }
#fileupload{ width: 90%; margin: auto; text-align: left }

/* Step 2 */
#crop-hints {background: url('/img/tryon/Step2/Step2Move2b.png') no-repeat top left; background-color: #EEE; width: 320px; height: 200px; margin: 30px auto 0}
	/* Text div */
	#crop-hints div{ float: right; font-size: 18px; line-height: 26px; width: 120px; padding: 20px 0 0 }
	#previous-step-container{ position:absolute;  bottom: 19px; right: 280px; margin: 4px; }

	#crop-button{ position: absolute; bottom: 10px; right: 0; width: 200px; height: 56px; }
	#crop-button.higher{ bottom: auto; top: 415px; right: 100px }
	/* Button background */
	#crop-button input{ position: absolute; top: 0; left: 0; border: none; width: 200px }
	#buttonLabel{ font-size: 13px; font-weight: bold; position: absolute; left: 51px; top: 20px; cursor: pointer }

/* Step 3 */
#continue-button{width: 260px; height: 80px; position: absolute; bottom: 110px; right: 62px }
#continue-button .label{ position: absolute; top: 30px; left: 69px; cursor: pointer; font-size: 25px }
#previous-link-div{ position:absolute; bottom: 10px; right: 300px; margin: 4px }

/* Step 4 */
	#up-arrow{ margin: 0 0 0 4px }
	#up-arrow.ie-arrow{ margin: 0 !important }
	img.arrow{ width: 30px }

	#rotate-container{ float: left; margin: 44px 0 0 30px; width: 120px; text-align: center; }
	html body	#rotate-container.ie{ margin-top: 40px !important }

	.rotate-arrow{ float: left; margin: 0; width: 40px }
	.tint-input{ display: none }

	#tint-options-container{ text-align: center; font-size: 1.2em; font-weight: bold; margin: 20px 0 0 }
	#tint-options{ background: url(/img/tryon/Step4/Step4Shades-embossed.png) no-repeat top left; width: 321px; height: 82px; position: relative; margin: 0 auto; top: 10px;}
	div.tint-button{z-index: 3; position: absolute; width: 25px; height: 41px; cursor: pointer; top: 17px; border: 1px solid grey; }
	#clear-tint-button{ left: 24px; background: #fff; }
	#yellow-tint-button{ left: 59px; background: #fffd72; }
	#orange-tint-button{ left: 94px; background: #e03919; }
	#rose-tint-button{ left: 129px; background: #cb6769; }
	#blue-tint-button{ left: 164px; background: #2674ea; }
	#g15-tint-button{ left: 199px; background: #395950; }
	#grey-tint-button{ left: 234px; background: #333; }
	#brown-tint-button{ left: 269px; background: #795642; }
	
	#save-button{ position: absolute; bottom: 71px; right: 67px }
	#savephoto{ width: 225px }
	#save-button div.label{ position: absolute; top: 23px; left: 71px; font-size: 1.8em }
	
	#share-page #page{ display: block; float: left; border: none; padding: 0; background: white; overflow:hidden; background-repeat: no-repeat; width: 402px; height: 662px; }
	
/* Share Page */
	#product-info{ float: left; margin: 220px 20px 0; font-size: 1.4em; width: 373px }
	#tryon-share-image{ display: block; float: left; margin: 40px 20px 80px 15%; border: none; width: 402px; height: 662px }
	#product-image{ width: 360px; margin: 0 0 20px }

#tryon-popup-body #white_overlay{
	position: absolute;
	top: 40px;
	left: 10px;
	width: 100%;
	height: 100%;
	background-color: white;
	z-index:10002;
}

#tryon-popup-body #white_overlay.fade{ 
	-moz-opacity: .6;
	opacity: .6;
	filter: alpha(opacity=60);
}
#loader-image{ position: absolute; top: 155px; left: 340px; border: 0 }
#error_display{ position: absolute; z-index: 10003; width: 500px; top: 165px; left: 140px; padding: 20px; border: 2px solid red; background: RGB(255,255,204) }
#error_display h3{ color: red; margin: 0 0 20px; text-align: center;  padding: 0 }
#error_display a.close{ display: block; float: right }

#upload-overlay{ cursor: pointer; position: absolute; top: 240px; left: 86px; width: 192px; height: 42px; 
background: url('/img/tryon/upload-button.png') top left }
#upload-overlay.hover{background: url('/img/tryon/upload-button-hover.png')}
#uploadButton{ 
	cursor: pointer !important;
 	-moz-opacity: .01;
	opacity:.01;
	filter: alpha(opacity=1);	
	width: 190px; font-size: 40px; overflow: hidden;
	display: none;
}
#image_preload{display:none}
#image_loader{position: relative; top: 150px; margin: auto; width: 100px;display: block}
#picture{
  width: 205px;
  height: 270px;
  background: url('/img/tryon/model_face.png') no-repeat top left;
  position: relative;
  border: 1px solid #CCC;
  left: 70px;
}
.pupil{
  position: absolute;
}
.crop, .pupil{
  width: 12px;
  height: 12px
}
#left_pupil{top: 100px;left: 200px}		
#right_pupil{left: 400px}		
#cursor{height: 15px;width: 15px;position: absolute}	
#pd_help{
  position: absolute;
  background: white;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;                                           
  -o-border-radius: 8px;
  padding: 15px;
  width: 500px;
  height: 400px;
  top: 122px;
  left: 147px;
  border: 2px solid lightblue;
}
#pd_wrap {
  width: 500px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: static;
}
#pd_wrap a.close{
 font-weight: bold;
 color: #C00;
 position: absolute; 
 right: 50px;
 padding: 0 0 10px 0;
 font-size: 1.2em;
}
#enter_pd{
  margin: 10px 19px 15px 15px; 
  width: 92%; 
  background-color: lightblue; 
  border-radius: 8px; 
  float: right;
  border: 1px solid #ADB4E6
}
#enter_pd p { padding: 10px; margin: 0; font-size: 14px; line-height: 16px;}
#hideImage{float: right; font-size: 12px;}
#replayImage{float: left; font-size: 12px;}
#picture_links{width: 205px; position: relative; left: 70px}
#contentHolder{ position: absolute;background: #fff; width: 820px;padding: 0;margin: 0;display: none;}
div.start-over{
  bottom: 10px;
  right: 380px;
  position: absolute
}

#shareFrame{width: 100%; height: 100%;overflow: hidden; border: 0;}
#previous-link{ text-decoration: underline; cursor: pointer; font-size: 12px;}
#editPhoto{ background: url("/img/tryon/smart-shapes-bg.jpg") top left repeat-y; position: relative; left: -2px;  }
#editPhoto > div { padding: 4px 0; height: 7px; }
.photoLink{margin: 0; width: 100px; }
#editPhoto .photoLink a {font-size: 11px; text-decoration: none; color: #012c7a}
#editPhoto .photoLink a:hover{text-decoration: underline;}
.blueGlow{
        -ms-box-shadow:  0px 0px 30px rgba(57, 50, 233, 1);
        -o-box-shadow:  0px 0px 30px rgba(57, 50, 233, 1);
        -moz-box-shadow:  0px 0px 30px rgba(57, 50, 233, 1);
        -webkit-box-shado':  0px 0px 30px rgba(57, 50, 233, 1);
        box-shadow: 0px 0px 30px rgba(57, 50, 233, 1);
}
a.shiny-blue {
  background-color: #066993;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #066993), color-stop(50%, #376fe0), color-stop(50%, #055677), color-stop(100%, #054864));
  background-image: -webkit-linear-gradient(top, #066993 0%, #376fe0 50%, #055677 50%, #054864 100%);
  background-image: -moz-linear-gradient(top, #066993 0%, #376fe0 50%, #055677 50%, #054864 100%);
  background-image: -ms-linear-gradient(top, #066993 0%, #376fe0 50%, #055677 50%, #054864 100%);
  background-image: -o-linear-gradient(top, #066993 0%, #376fe0 50%, #055677 50%, #054864 100%);
  background-image: linear-gradient(top, #066993 0%, #376fe0 50%, #055677 50%, #054864 100%);
  border-top: 1px solid #1f58cc;
  border-right: 1px solid #1b4db3;
  border-bottom: 1px solid #174299;
  border-left: 1px solid #1b4db3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
  box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
  color: #fff;
  font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 7px 0;
  text-shadow: 0 -1px 1px #1a5ad9;
  width: 200px;
  margin: 5px auto;
  display: block;
  text-decoration: none;
  text-align: center; }
  a.shiny-blue:hover {
    background-color: #5d89e8;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5d89e8), color-stop(50%, #2261e0), color-stop(50%, #044bd9), color-stop(100%, #0d53de));
    background-image: -webkit-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -moz-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -ms-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -o-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    cursor: pointer; }

#contentHolder{
	border: 1px solid #FEC900;
}
h1.startHead{
	font-size: 26px;
	line-height: 26px;
	padding: 40px 0 0 0;
}
a.shiny-blue.top{
	margin-top: 0;
}
#tryon-display-container {
	position: relative;
}
#tryon-display-magnify {
	right: 28px;
}
a.maint {
  text-decoration: none;
  font-size: 12px;
}
a.maint.left{
  float: left;
}
a.maint.right{
  float: right;
}