/* Constulation generic styles */
a{outline:none;}
#state{
	width:945px;
	min-height:486px;
	margin:20px auto;
	}
#currentState {
	height:486px;
	background: url(../images/shiseido_bg.png) no-repeat top left;
	text-align:left;
	overflow:hidden;
	position:relative;
}
#consultation-wrapper{
	height:486px;
}
.savedConsultations {overflow: auto;}
#consultation-wrapper .left,
#consultation-wrapper .right{
	float:left;
}
#consultation-wrapper .right{
	width:415px;
	padding-left:25px;
	padding-top:25px;
}
#consultation-wrapper .right p{
	margin-bottom:1.2em;
	font-family:Arial, Helvetica, sans;
	color:#7e7e85;
	font-size:18px;
	line-height:22px;
	text-align:left;
}
#consultation-wrapper .right ul{
	margin-bottom:20px;
}
#consultation-wrapper .right li{
	font-size:14px;
	color:#7e7e85;
}

#consultation-wrapper h2 {
	padding-top:20px;
	color:#a62a3f;
	font-size:24px;
}
#consultation-wrapper .right .login-register {
	padding-top: 20px;
	font-size:14px;
}
#consultation-wrapper .right .login-register a {color:#a62a3f;}
#sidebar-holder{
	width:500px;
}

/* Consultation page-specific styles */
.welcome .left,
.personalInfo .left {
	background: url(../images/woman_1.png) no-repeat -120px 0;
	border-bottom-left-radius:10px;
	width:423px;
	height:486px;
	margin-left:0px;
}
.yesOrNo .left{
	background: url(../images/woman_2.jpg) no-repeat right bottom;
}
.yesOrNo #consultation-questions,
.main-concern #consultation-questions,
.targeted-concern #consultation-questions {
	margin-top:50px;
}
#consultation-wrapper.concerns{
	background: url(../images/woman_3.jpg) no-repeat 180px 1px;
}
#consultation-wrapper.main-concern{
	background: url(../images/woman_3.jpg) no-repeat 180px 1px;
}
#consultation-wrapper.targeted-concern{
	background: url(../images/woman_4.jpg) no-repeat 180px 1px;
}
#consultation-wrapper.eye-concern{
	background: url(../images/woman_5.jpg) no-repeat 177px 1px;
}

div #consultation-sidebar {
	width: 179px;
	height:485px;
	margin:0 0 0 1px;
	background-color: #f2f1f1;
	-moz-box-shadow: 8px 0 10px #AAAAAA;
	-webkit-box-shadow: 8px 0 10px #AAAAAA;
	box-shadow: 8px 0 10px #AAAAAA;
	z-index:99;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;

	-webkit-transition: all 400ms linear;
	-moz-transition: all 400ms linear;

	position:relative;
	z-index:999;
}
div #skin-type {
	border-top-left-radius:10px;
}
div #accordion {
	font-size:11px;
	width: 179px;
	padding:0;
	margin:0;
	border:0;
}
div #accordion h3 a {
	border-top: 1px solid #e1e0e0;
	padding:8px 0px 3px;
	color: #b85063;
	width: 179px;
	border-bottom:0;
	margin-bottom:0;
}
div #accordion div {
	padding:0;
	margin:0;
	border:0;
}
div #accordion .desc {
	padding:0 10px;
	width:159px;
}

.options {
	xxposition: absolute;
	xxvisibility: hidden;
}

#didyouknow {
	padding:8px;
	width:160px;
}
#didyouknow p {
	padding:1px;
	font-size:12px;
	line-height: 16px;
	width:160px;
	color: #5c5c5f;
}

/* form elements */
#consultation-wrapper div.form-input input {
-moz-box-shadow: inset 2px 2px 1px #b6b6b6;
-webkit-box-shadow: inset 2px 2px 1px#b6b6b6;
box-shadow: inner 2px 2px 1px #b6b6b6;
background: #e3e3e3;
border-box:0;
border:0;
line-height:20px;
padding:3px 7px 1px;
margin:2px 0;
font-family:Arial, Helvetica, sans;
color:#7e7e85;
font-size:18px;
margin-top: -3px;
}
#consultation-wrapper div.form-input input[type="checkbox"],
#consultation-wrapper div.form-input input[type="radio"] {
	background:none;
}
.personalInfo div.form-input input{
	margin-top: 0px !important;
}
#consultation-wrapper div.form-input  {
	line-height:20px;
	font-family:Arial, Helvetica, sans;
	color:#7e7e85;
	font-size:18px;
	margin-bottom:0.7em;
	-webkit-transition: all 300s linear;
	-moz-transition: all 300ms linear;
}
#consultation-wrapper div.form-input select {
color:#7e7e85;
font-size:14px;
width:150px;
}

div.form-input label{
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
}
.error div.form-input label{
	color:#A62A3F;
}
#error-output{
	color:#A62A3F;
	text-align:right;
	padding:8px 25px 0 0;
	height: 1em;
	float:left;
	width:390px;
	clear:both;
}
.personalInfo #error-output{
	text-align:left;
}
a.all-above{
	text-decoration:underline;
}


/* buttons */
#consultation-wrapper button {
	background: #eee;
	background: -moz-linear-gradient(top, #fff 0%, #ccc 100%);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
	border: 1px solid #75757c !important;
	border-bottom: 1px solid #000;
	-moz-border-radius: 8px !important;
	-webkit-border-radius: 8px !important;
	border-radius: 2px;
	color: #75757c;
	text-align:center !important;
	font-size: 16px !important;
	line-height: 1;
	padding: 7px 0px;
	width:200px;
	text-shadow: 0 1px 0 #eee;
	-moz-box-shadow: 1px 1px 1px #888;
	-webkit-box-shadow: 1px 1px 1px#888;
	box-shadow: 0 0 1px #888;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;

}
#consultation-wrapper button:hover {
	color: #FFF;
	 background: #ddd;
	 background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
	 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#bbb));
	 border: 1px solid #bbb;
	 border-bottom: 1px solid #999;
	 cursor: pointer;
	 text-shadow: 0 1px 0 #AAA;
}
#consultation-wrapper button:active {
	 border: 1px solid #aaa;
	 border-bottom: 1px solid #888;
	 -moz-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
	 -webkit-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
	 box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
}

div.actions{
	position:absolute;
	width:415px;
	bottom:20px;
	right:10px;
}
#consultation-wrapper div.actions button{
	width:110px;
}
div.actions #next{
	float:right;
	margin-right:20px;
}
div.actions #prev{
	float:left;
}
#consultation-wrapper .edit{
	float:right;
	margin:0 30px;
	width:100px;
}

/* results page */

.results strong{
	color:#9d1c32;
}
#consultation-wrapper.results .thanks{
	font-size:22px;
}
#consultation-wrapper.results .right {
	width:645px;
}
.results .left{
	background: url(../images/woman-results.jpg) no-repeat 1px 1px;
	width:275px;
	height:486px;
}
.results div.actions{
	width:645px;
}
.results div.actions #next{
	width:190px;
}

/* jQuery UI - Accordion */

#accordion p{
	color:white;
	font-size:12px;
	font-family:Arial;
	margin-bottom:5px;
}
#accordion h3 a{
	text-indent:-999em;
	background-position:10px center;
	background-repeat:no-repeat;
	display:block;
	padding:5px;
	height:20px;
}

#skin-type .ui-state-default a{
	background-image: url(../images/h3_skin_type.png);
	-moz-border-radius-topleft: 8px;
}
#skin-type .ui-state-active a{
	background-image: url(../images/h3_skin_type_expanded.png);
	border:none;
}
#skin-type .ui-state-active, #skin-type .ui-state-default {
	border-top-left-radius: 10px;
}
#skin-concerns .ui-state-default a{
	background-image: url(../images/h3_skin_concerns.png);
	height:40px;
}
#skin-concerns .ui-state-active a{
	background-image: url(../images/h3_skin_concerns_expanded.png);
	height:40px;
}
#targeted-concerns .ui-state-default a{
	background-image: url(../images/h3_targeted_concerns.png);
	height:40px;
}
#targeted-concerns .ui-state-active a{
	background-image: url(../images/h3_targeted_concerns_expanded.png);
	height:40px;
}

#eye-concerns .ui-state-default a{
	background-image: url(../images/h3_eye_concerns.png);
	height:40px;
}
#eye-concerns .ui-state-active a{
	background-image: url(../images/h3_eye_concerns_expanded.png);
	height:40px;
}


.ui-state-default{
	background:#f2f1f1;
}
.ui-state-active,
.ui-accordion-content-active {
	background:#b85063;
	color:white;
}
.ui-accordion{
	width:179px;
}
.ui-accordion .ui-accordion-header .ui-icon{
	right:.5em;
	top:18px;
	left:auto;
}
.disabled .ui-icon{display:none;}

/* slider */
#slider-wrapper .ui-slider{
	height:232px;
}
.ui-slider-horizontal .ui-slider-handle{
	background:url(../images/slider-handle.png) top left no-repeat;
	width:39px;
	height:18px;
	margin-left:-19px;
	top:183px;
	outline:none;
	cursor:pointer;
	border:0;
}
#slider-wrapper{
	width:400px;
	height:232px;
	background:url(../images/slider.png) bottom left no-repeat;
	position:relative;
}
#slider-lit{
	width:0;
	height:232px;
	background:url(../images/slider-lit.png) bottom left no-repeat;
	position:absolute;
}
.ui-slider{
	border:0;
	background:0;
}
/* results page */

html.ie8 #grid,
html.ie7 #grid,
html.ie6 #grid {
	border: 1px solid #dedede;
}

#results-wrapper {
	width: 945px;
	text-align: left;
}
#results-wrapper .left, #results-wrapper .right {
	float: left;
}
#topleft {
	width: 450px;
	text-align:left;
	margin: 0 0 20px 0;
}
#topright {
	width: 400px;
	margin-left:75px;
	color: #464646;
}
#topright p {
	font-size: 13px;
	margin: 0;
	padding: 10px 0;
}
#topright h3 {
	font-size: 20px;
	font-weight: normal;
	color: #9d1c32 /*#b85063*/;
	padding: 10px 0 0;
	margin: 0;
}
#topright h4 {
	font-weight: normal;
	font-size: 18px;
	padding: 5px 0 0;
	margin: 0;
}
#topright p strong {
	color: #9d1c32 /*#b85063*/;
	font-weight: bold;
	font-size: 12px;
}
#topright .button {
	padding: 2px 0;
	margin: 0;
}
#topright span {
	margin-right: 25px;
}

ul.tabs {
	position: relative;
	top: -40px;
	clear: right;
	width: 676px;
}

ul.tabs li {
	height: 39px;
	float: left;
}
#results-wrapper ul.tabs li a {
	text-transform: uppercase;
	padding: 10px 20px 12px;
	height: 17px;
	float: left;
	color: #959595;
}
ul.tabs li.ui-state-active a {
	color: #911a2e;
	background-color: #fff;
	-moz-box-shadow: -3px -3px 3px 0px #dedede, 3px -3px 3px 0px #dedede;
	-webkit-box-shadow: -3px -3px 3px 0px #dedede, 3px -3px 3px 0px #dedede;
	box-shadow: -3px -3px 3px 0px #dedede, 3px -3px 3px 0px #dedede;
	border-top: 1px solid #dedede;
	border-left: 1px solid #dedede;
	border-right: 1px solid #dedede;
	font-weight: bold;
	z-index: 999;
}
#grid {
	width: 676px;
	margin: 40px 5px;
	/*padding: 0 10px;*/
	-moz-box-shadow: 0 0 3px 3px #dedede;
	-webkit-box-shadow: 0 0 3px 3px#dedede;
	box-shadow: 0 0 3px 3px #dedede;
	text-align: center;
}
#grid h3 {
	clear: left;
	padding: 0 5px;
	margin: 0px 0px 0px 10px;
	position: relative;
	top: -15px;
	text-align: left;
}

.products ul {
	list-style: none;
	text-align: center;
	overflow: visible;
}
.products ul li {
	float: left;
	width: 200px;
	height: 180px;
	padding: 10px 10px 60px;
	overflow: visible;
	margin-bottom:30px;
}
.arrow_right_daytime {
	background: url(../images/results/arrow.png) no-repeat right center;
	overflow: visible;
}
.arrow_right_daynight {
	background: url(../images/results/arrow.png) no-repeat 230px 120px/*, url(../images/results/daytime_nighttime.png) no-repeat 190px 70px*/;
	overflow: visible;
}
.arrow_left_daytime {
	background: url(../images/results/arrow.png) no-repeat left center;
	overflow: visible;
}
.arrow_left_daynight {
	background: url(../images/results/arrow.png) no-repeat 20px 120px/*, url(../images/results/daytime_nighttime.png) no-repeat 190px 70px*/;
	overflow: visible;
}
.arrow_right_night {
	background: url(../images/results/arrow.png) no-repeat right center;
	overflow: visible;
}
.arrow_right_daynight {
	background: url(../images/results/arrow.png) no-repeat right center;
	overflow: visible;
}
.arrow_left_night {
	background: url(../images/results/arrow.png) no-repeat left center;
	overflow: visible;
}
.arrow_left_daynight {
	background: url(../images/results/arrow.png) no-repeat left center;
	overflow: visible;
}
.plus {
	background: url(../images/results/plus.png) no-repeat 230px 120px;
	overflow: visible;
}
/*.no_arrow_night {
	background: url(../images/results/night.png) no-repeat 190px 70px;
	overflow: visible;
}*/
.products ul li .title,
.products ul li .title a {
	text-decoration: underline;
	line-height: 15px;
	color: #000000;
}
.products ul li p strong {
	color: #b85063;
}
.grid_title {
	display: block;
	margin: 0 auto;
	padding: 0 0 10px;
}

#skintype {
	width: 245px;
	margin-left: 10px;
	margin-top:7px;
	border: 1px solid #d8d6d6;
	border-top: 0;
	text-align: center;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-topleft: 8px;
	line-height: 16px;
	padding-bottom: 25px;
}
#skintype h3 {
	background-color: #a7dce7;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-topleft: 8px;
	text-align: left;
	padding: 8px 0px 5px 12px;
	position: relative;
	border: 1px solid #9bd0da;
	border-bottom: 0;
}
#skintype{text-align:left;}
#skintype p {
	padding: 6px 15px;
}
#skintype p.red {
	color: #9f2036;
}
#skintype .big{
	font-size:17px;
}
#skintype p strong {
	color: #e5ac5b;
	font-weight: bold;
}
.hr {
	width: 673px;
	margin: 0 auto;
	padding-bottom: 38px;
}

/* glows! */
#sidebar-holder{
	position:relative;
}
.face-glow{
	width:320px;
	height:485px;
	position:absolute;
	top:0;
	right:0;
}
#glow-cheek{
	background: transparent url(../images/woman_2_over_1.jpg) bottom right no-repeat;
}
#glow-tzone{
	background:transparent url(../images/woman_2_over_2.jpg) bottom right no-repeat;
}
#glow-cheek2{
	background:transparent url(../images/woman_4_over_1.jpg) bottom right no-repeat;
	z-index:50;
	width:320px;
}
#glow-oiliness{
	background:transparent url(../images/woman_4_over_4.jpg) bottom right no-repeat;
	width:320px;
}
#glow-mouth{
	background:transparent url(../images/woman_4_over_3.jpg) bottom right no-repeat;
	width:320px;
}
#glow-eyes{
	background:transparent url(../images/woman_4_over_2.jpg) bottom right no-repeat;
	width:320px;
}
#glow-eyeConcern{
	background:transparent url(../images/woman_5_over_1.jpg) right 1px no-repeat;
	width:310px;
}


#print-frame{
	width:1px;
	height:1px;
	border:0;
}

/* email */
#email-form{
	-moz-box-shadow: 0 0 5px #AAAAAA;
	-webkit-box-shadow: 0 0 5px #AAAAAA;
	box-shadow: 0 0 5px #AAAAAA;
	padding:8px;
	border:1px solid #AAA;
	background:white url(../images/results/email_icon.png) 8px 9px no-repeat;
	position:absolute;
	width:400px;
	display:block;
	left:-9px;
	top:-9px;
}
#email-form form{
	margin-left:50px;
}
#email-form input{
	width:250px;
	float:left;
	padding:4px;
}
#email-form input.error{
	border:1px solid red;
}
#email-form button{
	background:url(../images/results/btn-submit.png) top left repeat-x;
	color:white;
	padding:5px 8px;
	float:right;
	margin-right:5px;
}
#email-form span{
	padding-left:40px;
	display:block;
	padding-bottom:7px;
	padding-top:5px;
}
#sharing-wrapper{
	position:relative;
	margin-top:10px;
}

#email-form a.close-btn{
	display:block;
	width:25px;
	height:25px;
	background:url(../images/results/btn-close.png) top left no-repeat;
	position:absolute;
	top:-12px;
	right:-12px;
	z-index:2222;
}

/* save result */
#save-form .login {
  width: auto;
  background: none;
}
#save-form.skincareConsultation{
	-moz-box-shadow: 0 0 5px #AAAAAA;
	-webkit-box-shadow: 0 0 5px #AAAAAA;
	box-shadow: 0 0 5px #AAAAAA;
	padding:8px;
	border:1px solid #AAA;
	background:white url(../images/results/email_icon.png) 8px 9px no-repeat;
	position:absolute;
	width:400px;
	display:block;
	left:-9px;
	top:-9px;
	display: none;
}

#save-form.skincareConsultation span{
	padding-left:40px;
	display:block;
	padding-bottom:7px;
	padding-top:5px;
}

#save-form.skincareConsultation a.close-btn{
	display:block;
	width:25px;
	height:25px;
	background:url(../images/results/btn-close.png) top left no-repeat;
	position:absolute;
	top:-12px;
	right:-12px;
	z-index:2222;
}

.skincareConsultation #save-results span{
  color: #909090;
  display: inline-block;
  margin-left: 6px;
  margin-right: 0;
  padding-top: 5px;
  text-shadow: 0 0 #909090;
  vertical-align: top;
}
#main p a {
	color:#a62a3f;
	text-decoration: underline;
}
#main p a:hover {text-decoration: none;}