/**
 * John Hancock — FindTheAnswers.com Microsite
 *
 */
html { 
	background: #cccfd5 url("../img/bg/body.jpg") scroll repeat-x 0 0; 
	margin: 0;
	padding: 0;
	font: normal normal normal 12px/16px Arial, Helvetica, sans-serif;
	color: #666;
	}

body { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; }
h6 { 
	text-transform: uppercase;
	font-family:Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	font-weight: bold; 
	margin: 0 0 -2px 42px;
	}
a, a:hover { color: #566f8d; }
a img { border: none; }
p { margin: 1em 0 0; }
	
/* structure
 -------------------------------------------------------------------- */
#page { 
	width: 995px; 
	background: transparent url("../img/bg/page.jpg") scroll repeat-y 0 0; 
	margin: 0 auto;
	}
#wrapper { 
	background: transparent url("../img/bg/wrapper.jpg") scroll no-repeat; 
	width: 961px;	
	padding: 0 17px; 
	}
#page .stage { padding: 0 17px; }

#header { 
	background: transparent url("../img/header.gif") scroll no-repeat;
	height: 188px; 
	}
	
#navigation {
	background: transparent url("../img/bg/navigation.jpg") scroll no-repeat;
	height: 31px;
	}

#content { height: 842px; }
#content.index, #content.single-question { height: auto; }
	
.clear { clear: both; display: block; }

.columns { clear: both; }
.column.main { float: left; width: 516px; }
.column.sub  { float: right; width: 273px; }
.column.left, .column.right { float: left; width: 50%; }


/* header

 -------------------------------------------------------------------- */
#header { position: relative; }
#header h1 a { 
	text-indent: -9999px;
	outline: none;
	display: block; 
	position: absolute; 
	width: 570px; 
	height: 136px; 
	top: 20px; 
	left: 20px; 
	}
#header .presented a { 
	text-indent: -9999px; 
	outline: none;
	display: block; 
	position: absolute; 
	width: 161px; 
	height: 76px; 
	top: 32px; 
	left: 781px; 
	}


/* navigation
 -------------------------------------------------------------------- */
#navigation ul { list-style: none; margin: 0; padding: 5px 0 0; }

#navigation ul.save { float: right; }
#navigation ul.save li { float: left; }
#navigation li.share { margin-left: 46px; }
#navigation .share-twitter { margin-left: 11px; }
#navigation .share-facebook { margin-left: 12px; }
#navigation .share-email { margin-left: 15px; }

.page-header { float: left; margin-right: 25px; }
.page-title { margin-bottom: 6px; }

#sub-navigation { float: left; color: #fff; width: 500px; }
#sub-navigation li { 
	float: left; 
	border-left: 1px solid #fff; 
	line-height: 12px; 
	font-size: 11px; 
	padding-left: 7px;
	margin-left: 7px;
	margin-top: 4px;
	}
#sub-navigation li.first { margin-left: 0; border-left: none; }
#sub-navigation li a { color: #fff; text-decoration: none; }
#sub-navigation li.here a { text-decoration: underline; }

#sub-navigation2 { float: left; color: #fff; width: 400px; }
#sub-navigation2 li { 
	float: left; 
	border-left: 1px solid #fff; 
	line-height: 12px; 
	font-size: 11px; 
	padding-left: 7px;
	margin-left: 7px;
	margin-top: 4px;
	}
#sub-navigation2 li.first { margin-left: 0; border-left: none; }
#sub-navigation2 li a { color: #fff; text-decoration: none; }
#sub-navigation2 li.here a { text-decoration: underline; }

/* content
 -------------------------------------------------------------------- */
#content .stage { padding: 40px 49px 0 43px; }

.sub .side-panel { 
	background: transparent url("../img/bg/side-panel.gif") scroll repeat-y 0 0;
	line-height: 15px;
	}
#content .stage .side-panel .stage { padding: 10px 17px; }
.side-panel .begin {
	text-indent: -9999px;
	background: transparent url("") scroll no-repeat 0 0;
	height: 40px;
	display: block;
	}
.side-panel .end { 
	height: 9px;
	width: 273px;
	background: transparent url("../img/end.gif") scroll no-repeat 0 0; 
	display: block;
	line-height: 1px;
	font-size: 1px;
	}
.side-panel .begin.need-more-info { background-image: url("../img/headers/side-panel/need-more-info.jpg"); }
.side-panel .begin.finding-the-answers { background-image: url("../img/headers/side-panel/finding-the-answers.jpg"); }
.side-panel .begin.in-case-you-missed-it { background-image: url("../img/headers/side-panel/in-case-you-missed-it.jpg"); }
.side-panel .begin.additional-resources { background-image: url("../img/headers/side-panel/additional-resources.jpg"); }
.side-panel .begin.featuring-content-from { background-image: url("../img/headers/side-panel/featuring-content-from.jpg"); }
.side-panel .begin.we-want-to-hear { background-image: url("../img/headers/side-panel/we-want-to-hear.jpg"); }

.sub .side-panel .description { margin-top: .2em; }
.sub .side-panel .source { font-size: 11px; margin-top: 4px; }
.sub .side-panel .logo { margin-top: 4px; }
.sub .side-panel .more-info { font-weight: bold; color: #666; text-transform: uppercase; font-size: 11px; margin-top: .6em; }
.sub .side-panel .related-question { color: #666; }
.sub .side-panel .logos img { margin-top: 12px; }
.sub .side-panel .logos .right { text-align: right; }

	/* specific content */
	#content.index .stage { padding: 25px 16px 0 13px; }
	#content.index .main { width: 612px; padding-bottom: 10px; }
	#content.index .sub { padding-top: 15px; }
	.visit { margin-top: 40px; }
	p.browse-questions { margin-top: 1.3em; }
	
	/* homepage-specific: question */
	.question-and-answer { 
		width: 612px; 
		position: relative;
		background: transparent url("") scroll no-repeat 0 0px;
        background-image: url("../img/bg/homepage/answerOFF.jpg");
		height: 64px;
		}

	.question-and-answer .number { 
		font-size: 18px;
		font-weight:normal;
		padding: 22px 0 0 15px;
		margin-left: 5px;
		position: absolute;
		color: #11568B;
		}
	
	.question-and-answer .question { 
		font-size: 16px;
		font-weight:normal;
		line-height: 21px;
		width: 400px;
		margin-left: 55px;
		position: absolute;
		color: #11568B;
		padding: 9px 0 0 15px		
		}

/*	.question-and-answer .number, 	.question-and-answer .question,  a a:hover  */
	.question-and-answer:hover
		{background-image: url("../img/bg/homepage/answerON.jpg");}
	/* ie hover */
	.homeHover 
		{background-image: url("../img/bg/homepage/answerON.jpg");}
	
	/* question-answer specific */
	.single-question { font-size: 13px; }
	.single-question .question {
		margin: 0 0 20px -4px; 
		width: 551px; 
		height: 117px; 
		background: transparent url("") scroll no-repeat 0 0;
		background-image: url("../img/bg/question.jpg");
		position: relative;
		}

		.single-question .question .title, .single-question .question .title a, .single-question .question .title a:hover { 
		color: #fff; 
		font-size: 16px;
		font-weight: normal;
		line-height: 22px;
		}

	.single-question .question .title {
		padding: 17px 15px;
		margin-left: 48px;
		font-weight: bold;
		}
	
	.single-question .question .mark { position: absolute; top: 77px; left: 286px; }
	.single-question .question .num { position: absolute; top: 21px; left: 18px; font-weight: bold; font-size:16px; color:#fff}
	.single-question .visit { margin-top: 0; margin-bottom: 2em; }
	.single-question .sub { font-size: 11px; font-weight: bold; }
	.single-question .logo { margin-top: .5em; vertical-align: -1px; }
	
	.answers { width: 100%; margin-top: 0px; }
	.answers td { vertical-align: top; }
	.answers td .article-title { font-style: normal; font-size: 18px; }
	.answers td p { margin-top: 0.2em; }
	.answers .source { margin-top: 4px; }
	.answers .source .logo { margin-left: 22px; }
	.answers .interact { width: 268px; }
	.interact a { float: left; }
	.interact-twitter  { margin-left: 16px; }
	.interact-facebook { margin-left: 85px; }
	
	/* question-specific side-panel column sizes */
	.question-1 .left { width: 55%; }
	.question-1 .right { width: 42%; }
	.question-4 .left { width: 52%; }
	.question-4 .right { width: 48%; }
	
	/* typography */
	p.first { margin-top: 0; }
	.question-and-answer .question .long-question-5 { font-size: 0.95em; }
	.question-and-answer .question .long-question-9 { font-size: 0.84em; }

/* form */
form {
	margin: 10px;
}

form {
	background-color: #F2F3F5; /*E8EBEE */
	border: 1px solid #eee;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
	padding-top: 5px;			
}

form input[type=submit] {
	display: block;
	border: none;
	background: url(../img/buttons/submit.jpg);
	height: 38px;
	width: 106px;
	color: #888;
	font-size: 14px;
	
}

form label {
	display: block;
	margin: 0 0 5px 0;
	font-weight:bold;
}

form input[type=text], form select {
	display: block;
	margin: 0 0 15px 0;
	padding: 10px 5px;
	font: 14px/18px;
	color: #454545;
	width: 240px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px solid #e4e4e4;
}

form textarea {
	display: block;
	width: 440px;
	height: 50px;
	padding: 10px;
	margin: 0 0 20px 0;
	font: 14px/18px;
	color: #454545;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px solid #e4e4e4;
}

/* footer
 -------------------------------------------------------------------- */
#footer { 
	background: transparent url("../img/bg/footer.jpg") scroll no-repeat 0 0; color: #fff; font-size: 11px; 
	height: 31px;
	padding: 0 0 1.4em;
	}
#footer .stage { padding: 0 0 0 43px; }
#footer a { color: #fff; text-decoration: none; }
#footer ul { list-style: none; margin: 0; padding: 0; }
#footer li { 
	float: left; 
	padding-right: 1.5em; 
	border-right: 1px solid #fff; 
	margin: 9px 1.5em 0 0; 
	line-height: 13px;
	}
#footer li.copyright { border-right: none; }