/*
* @description: life insurance
* @author:Swing Chen 
* @update:Swing Chen (02-25-2013 17:00)
*/

/**Reset**/
body,ul,li {
	margin:0;
	padding:0;
	color: #444;
	list-style: none;
}
img {
	border:none;
} 
a {
	color: #0673ab;
	text-decoration:none;
}
a:hover {
	color:#f16306;
	text-decoration:underline;
}
label {
	cursor: default;
}
.title,.title h1 {
	font-size: 22px;
	font-weight: normal;
	line-height: 24px;
}
.title h1 { display:inline-block; }
h1, h2, h3, h4, h5, h6 {
	font-family: Verdana;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align:baseline;	
}
/*this class is set to clear the float of the item*/
.clear:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

.clear {
    display: inline-block;
}

* html .clear {
    height: 1%;
}

.clear {
    display: block;
}

.clear-left {
	clear: left;
}


.life-insurance-wrap {
	position: relative;
	margin: 20px auto;
	width: 970px;
}
/** Life Insurance**/
/*css set for round wrap*/
.round-wrap {
	margin: 15px 0 0 0;
	width: 100%;
	border: 1px solid #ccc;
	z-index: 1;
	border-radius:8px;  
	box-shadow: 5px 5px 5px #e1e1e1;
}
.round-wrap.green { border: 1px solid #c6dd8e }
.round-wrap.error { border: 2px solid #f00 }
.round-wrap h2 {
	padding-left: 8px;
	background: #f1f1f1;
	height: 48px;
	line-height: 48px;
	font-size: 18px;
	font-weight: normal;
	color: #78a600;
	border-radius: 8px 8px 0 0;
}

/*wrap set for tips*/
.tip-wrap {
	float: left;
	position: relative;
	width: 318px;
}
.tip {
	padding: 10px;
	width: 290px;
	background: #0296d5;
	line-height: 24px;
	color: #fff;
	border-radius: 0 0 0 8px;
}
.tip h3 {
	padding-bottom: 5px;
	line-height: 30px;
	border-bottom: 1px solid #00a2e8;
	font-size: 28px;
	font-weight: normal;
	white-space: nowrap;
}
.tip .content {
	padding-top: 5px; 
	height: 120px;
}

/*three position of the arrows for the tip*/
.tip-arrow {
	position: absolute;
	width: 19px;
	height: 25px;
}
.tip-arrow.init, .tip-arrow.right-top {
	left: 299px;
	top: 16px;
}
.tip-arrow.right-bottom {
	left: 299px;
	top: 153px;
}
.tip-arrow.down {
	left: 137px;
    bottom: -25px;
}

/*the right part set for the form to fill in*/
.form-wrap {
	float: left;
	margin: 10px 0 0 15px;
	width: 637px;
}
.form-wrap > li {
	float: left;
	margin: 10px 23px 0 0;
}
.form-wrap > li.date { 
	position: relative;
	margin: 10px 53px 0 0; 
}
.form-wrap > li.gender { margin-right: 31px; }
.form-wrap > li.smoking { margin-right: 0; }
.form-wrap > li.height { margin-right: 8px; }
.form-wrap > li.last-child { 
	float: right;
	width: 105px;
	height: 38px;
	margin-top: 34px;
}
.next-btn { 
	padding: 0;
	border: 0;
}
.form-wrap fieldset { float: left; }
.form-wrap > li label,.form-wrap > li legend {
	display: block;
	height: 24px;
	font-size: 16px;
}
/*special style for ehi-form*/
.form-wrap .date input { 
	width: 116px; 
}
.form-wrap .weight {
	float: left;
	width: 56px;
}
.form-wrap .weight-unit {
	float: left;
	margin: 9px 0 0 8px;
}
.form-wrap .height-wrap {
	float: left;
    margin-right: 7px;
    width: 86px;
}
.form-wrap .unit {
	float: left;
	margin: 9px 5px 0 0;
}

/*the wrap contains two round wrap for charts*/
.chart-wrap {
	padding-top: 20px;
	height: 320px;
}

/*the style of smaller round wrap */
.round-wrap.two {
	float: right;
	margin: 5px 0 0 0;
	width: 469px;
	height: 300px;
}
.round-wrap.two.left {
	float: left; 
}
.round-wrap.two h2 {
	height: 38px;
	line-height: 38px;
}
.round-wrap.two h2 span { float: left; }
.round-wrap.two em {
	display: block;
	margin: 10px auto;
	width: 400px;
	font-size: 16px;
	color: #797979;	
}

/*help icon*/
.help {
	float: right;
	cursor: pointer;
}

/*the wrap set for the help div to show when we click the help icon*/
.help-wrap {
	display: none;
	position: absolute;
	width: 422px;
	top: 337px;
	z-index: 10000;
}
.help-arrow {
	position: absolute;
	right: 28px;
	top: -10px;
	width: 24px;
	height: 11px;
	z-index: 99;
}
.help-arrow img { vertical-align: top; }
.close {
	position: absolute;
	right: -12px;
	top: -10px;
	z-index: 99;
	width: 24px;
	height: 24px;
	display: block;
	background: url(/ehealthinsurance/images_new/life-lead/close.png) no-repeat;
	text-indent: -9999px;
}
.help-content { position: relative; }

.help-text {
	padding: 20px;
	border: 1px solid #94cc63;
	background: #fff;
    color: #898b8c;
    z-index: 10;
    box-shadow: 0 5px 5px #e1e1e1;
}
.help-text h4 {
	padding-bottom: 10px;
	font-size: 16px;
}
/*position of the left help wrap */
.left.help-wrap { left: 70px; }

/*position of the right help wrap */
.right.help-wrap { right: -20px; }

.more {
	padding-top: 5px;
	line-height: 20px;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	color: #4ab7df;
}

.chart {
	position: relative;
	margin: 0 auto;
	width: 430px;
}

.diagram1,.diagram2 {
	position: relative;
	margin: 8px auto;
	border-bottom: 1px solid #a19c98;
	height: 165px;
}
/*the style of the row in the diagrame*/
.diagram1 .row,.diagram2 .row {
	position: absolute;
	bottom: 0;
	width: 31px;
	background: #0296d5;
}
.diagram2 .row {
	width: 11px;
}

/*the style set for every unit of the left chart*/
.bar1 { padding-left:41px; }
.bar1 li {
	float: left;
	margin: 0 26px 0 0;
	border: 1px solid #e3e3e3;
	width: 47px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	border-radius:5px; 
	cursor: pointer; 
}

/*the active style for the unit of the left chart*/
.bar1 li.active {
	position: relative;
	background: #deebc7;
	border: 1px solid #cde3ac;
}
.diagram1-arrow {
	position: absolute;
	top: -15px;
	left: 13px;
	width: 21px;
	height: 15px;
}
.diagram1-arrow img { vertical-align: top; }

/*the unit bar set for the right chart*/
.bar2 {
    position: relative;
}
.bar2 li {
	float: right;
	margin-top: 3px;
}
.bar2 li:first-child { float: left; }
.bar2 li.middle {
	position: absolute;
	top: -6px;
	left: 148px;
	width: 130px;
	height: 30px;
	line-height: 30px;
	background: #deebc7;
	border: 1px solid #c7e0a3;
	text-align: center;
	border-radius:3px;  

}

/*arrow set for the right chart*/
.diagram2-arrow {
	position: absolute;
	left: -10px;
}

/** Head line **/
/*the left part */
.logo-info {
	float: left;
	margin: 10px 0 0 10px;
	line-height: 16px;
	font-size: 12px;
}

/*the form part in the middle*/
.submit-form-wrap {
	float: left;
	padding: 86px 0 66px 0;
	width: 533px;
}
.submit-form-wrap > li {
	float: left;
	margin-right: 75px;
	height: 70px;
}
.submit-form-wrap > li label {
	font-size: 16px;
	margin-bottom: 0;
}
.submit-form-wrap > li input {
	width: 210px;
}

/*three types of input*/
.submit-form-wrap .city {
	margin-right: 74px; 
}
.submit-form-wrap .state { 
	width: 84px;
	margin-right: 0; 
}
.submit-form-wrap .normal { width: 107px; }
.submit-form-wrap .wide { width: 514px; }

/*two special position for form*/
.submit-form-wrap .middle { margin-right: 0; }
.submit-form-wrap .right {
	float: right;
	margin-right: 0;
}

/*error style for submit form*/
.error { color: #444; }
.error label,.error legend {
	font-weight: bold; 
 	color: #a40800;
}
.error .half label { 
	font-weight: normal;
	color: #444;
}
.error input {
	border: 1px solid #f9b8da;
	background: #fef3f9;
}
.error .chzn-container-single .chzn-single {
	background: #fef3f9;
	border-radius: 2px
}
/*the right part*/
.crumb {
	float: left;
	margin: 8px 0 0 20px;
	width: 173px;
	text-align: center;
}
.crumb span { 
	font-family: verdana;
    font-weight: bold;
	color: #414141;
}
.img {
	width: 173px;
	height: 81px;
}
.submit-btn {
	float: left;
	margin: 252px 0 10px 30px;
	width: 104px;
	height: 30px;
	border: none;
}

/*error style*/
.error-wrap {
	padding: 13px;
	border: 1px solid #f9bbdc;
	background: #fef3f9;
	font-weight: bold;
	margin-top: 10px;
}
.error-title {
	padding: 0 0 0 20px;
	background: url(/ehealthinsurance/images_new/life-lead/error_exclaim.gif) left center no-repeat;
	font-size: 16px;
	color: #444;
}
.error-wrap ul {
	margin: 5px 0 0 20px;
	padding: 0;
}
.error-wrap ul li {
	line-height: 22px;
	font-size: 14px;
	font-weight: normal;
	color: #6e0400;
}
.error-wrap ul li a {
	padding-right: 10px;
	font-weight: bold;
	color: #6e0400;
}

/*the wrap for question*/
.question-wrap { 
    width: 100%;
}
.question-wrap p { height: 226px; }
.question-wrap p.more { height: 20px; }

/*the three column of round wrap*/
.round-wrap.three {
	width: 314px;
	float: left;
	margin-left: 10px;
}
.round-wrap.three h2 { font-size: 16px; }
.round-wrap.three:first-child { margin-left: 0; }

.question-text {
	padding: 10px;
	line-height: 24px;
}


/**Congratulations**/
.round-content {
	font-size: 20px;
}
.congratulations-text { 
	float: left; 
	padding: 75px 0 0 55px;
	width: 567px;
}
.congratulations-text p {
	padding-bottom: 25px;
	line-height: 30px;
	text-align: center;
}
.congratulations-text div {
	margin: 0 auto;
	padding-left: 190px;
	width: 133px;
	font-size: 22px;
	font-weight: bold;
}
.congratulations-text div span {
	float: left;
	margin-left: -190px;
	font-weight: normal;
}
.round-wrap.congratulations {
	width: 946px;
	margin: 0 auto;
}
.round-wrap.congratulations h2 {
	font-size: 24px;
}

.congratulations-picinfo { 
	float: right;
	width: 284px;
	background: #f1f1f1;
	border-bottom-right-radius: 8px;
}
.congratulations-picinfo .pic {
	position: relative;
	margin: 0 auto;
	width: 200px;
	height: 300px;
	border: 1px solid #3f92bd;
}
.congratulations-picinfo .pic.person1 {
	background: url(/ehealthinsurance/images_new/life-lead/person1.jpg) no-repeat;
}
.congratulations-picinfo .pic.person2 {
	background: url(/ehealthinsurance/images_new/life-lead/person2.jpg) no-repeat;
}
.congratulations-picinfo .pic.person3 {
	background: url(/ehealthinsurance/images_new/life-lead/person3.jpg) no-repeat;
}
.congratulations-picinfo .pic.person4 {
	background: url(/ehealthinsurance/images_new/life-lead/person4.jpg) no-repeat;
}
.congratulations-picinfo .pic.person5 {
	background: url(/ehealthinsurance/images_new/life-lead/person5.jpg) no-repeat;
}
.congratulations-picinfo .pic p {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 30px;
	background: #fff;
	font: normal 20px/30px Verdana;
	text-align: center;
	color: #333;
	opacity: 0.7;
}
.congratulations-picinfo .info {
	padding-bottom: 8px;
	font-size: 16px;
	font-family: arial;
	line-height: 18px;
	text-align: center;
}
.congratulations-picinfo .info p:first-child {
	font-size: 18px; 
	padding-top: 10px;
}
.congratulations-picinfo .info p { padding-top: 5px; }
h3.sponsor-title {
	margin: 40px auto 0;
	padding-left: 10px;
	width: 1110px;
	height: 36px;
	background: #f0f0f0;
	font: normal 18px/36px Verdana;
	color: #666;
}
/*this class is set for the special radio style.*/
.greenery-form.radio {
	padding: 1px 0 0 0;
	margin: 6px 0 0 0;
	overflow: hidden;
}

.greenery-form.radio .half {
	float: left;
	position: relative;
	padding-left: 20px;
	width: 89px;
}
.greenery-form.radio .half:first-child {
	padding-left: 0;
}

/*Reset the style of ehiForm*/
.ehiInput { color: #444; }
.ehiRadio {
	width:87px;
	height:32px;
	background:url(/ehealthinsurance/js/ehm-form/ehm-radio-bg-sprite.png) 0 -32px no-repeat;
	z-index: 1;

}
.ehiRadio .ehiiRadio {
	display:block;
	width:87px;
	height:32px;
	background:url(/ehealthinsurance/js/ehm-form/ehm-radio-bg-sprite.png) 0 0 no-repeat;
}
.greenery-form.radio label {
    position: absolute;
    text-align: center;
    top: 0;
    left: 20px;
    width: 87px;
    z-index: 9999;
}
.greenery-form.radio .half:first-child label {
	left: 0;
}
.greenery-form input[type="text"] {
    padding: 5px 5px 5px 12px;	
    box-shadow: none;
}

.ui-datepicker-trigger {
	position: absolute;
	bottom: 3px;
	right: -40px;
}
/*reset check form*/
.chzn-container { font-size: 16px; }
.chzn-container-single .chzn-single {
	height: 30px;
    line-height: 30px;
    height: 28px\9;
    line-height: 28px\9;
    background: #fff;
	border: 1px solid #c5c6c7;
    border-radius: 2px;
    width: 77px;
}
 @media screen and (-webkit-min-device-pixel-ratio:0){ .chzn-container-single .chzn-single {
 	margin-top: 2px;
 	height: 29px;
    line-height: 29px;
} }  /*chrome and safari*/
.chzn-container-single .chzn-drop { 
	width: 85px; 
	border: 1px solid #c5c6c7;
    box-shadow: 0 0 0 #000;
}
.chzn-container-single .chzn-single div {
	width: 19px;
	right: 8px;
    top: 10px;
}
.chzn-container-single .chzn-single div b {
	background: url(/ehealthinsurance/js/ehm-form/select-down.png) no-repeat;
}

/*font style of no date in diagram */
.no-data {
	padding-top: 70px;
	font-weight: bold;
	color: #ff9900;
	text-align: center;
}
/*trust-bar-component*/
.trust-bar { 
	margin: 25px 0;
	height: 35px;
	overflow: hidden;
}
.trust-bar-component-wrap {
	position: relative;
}
.caroufredsel_wrapper {
	overflow: hidden;
}
.trust-bar-component-wrap ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.trust-bar-component-wrap li:first-child {
	float: left;
}
.trust-bar-component-wrap li {
	float: left;
	width: 870px;
}
.trust-bar-component-wrap.responsive {
	width: auto;
	margin-left: 0;
}
a.prev span, a.next span {
	display: none;
}
.pagination-wrap {
	overflow: hidden;
	float: left;
	margin: 10px 10px 0 0;
}
.pagination {
	text-align: center;
}
a.prev {			background-position: 0 -17px; margin-right:10px;}
a.prev:hover {		background-position: 0 -17px; }
a.prev.disabled {	background-position: 0 0 }
a.next {			background-position: -31px 0; margin-left:10px;}
a.next:hover {		background-position: -31px 0; }
a.next.disabled {	background-position: -31px -17px }
a.prev.disabled, a.next.disabled {
	cursor: default;
}
.pagination a,.pagination a.selected,.trust-bar-component span.female,.trust-bar-component span.male {
	background-image: url("/ehealthinsurance/images_new/life-lead/trust-bar-slieder-sprite.png");
	background-repeat: no-repeat;
}
.pagination a {
	background-position: -19px -28px;
	width: 17px;
	height: 17px;
	float:left;
	display: inline-block;
}
.pagination a.selected {
	background-position: 0 -28px;
	cursor: default;
}
.pagination a span {
	display: none;
}
.trust-bar-component h4 {
	float: left;
	font: normal 20px/36px Verdana;
	color: #666;
}
.trust-bar-component span {
	float: left;
	padding-left: 34px;
	font: normal 16px/36px Verdana;
	color: #006699;
}
.trust-bar-component span.female {
	background-position: 7px 6px;
}
.trust-bar-component span.male {
	background-position: 7px -43px;
}
.trust-bar-component .carieer-logo.first-child {
	margin-left: 28px;
}
.trust-bar-component .carieer-logo {
	margin-right: 42px;
}
.sponsorship-q213-wrap a.next {
   background-position: 0 -42px;
}
.sponsorship-q213-wrap a.prev {
   background-position: 0 0;
}