/* 
	Styles for Obamacare Guide 
	Includes customization of Flexslider jQuery plugin
	PC  5/20/13
*/

/* ===========================================
   TWO-COL PAGE STRUCTURE
	 Not replacing #main with #news_pg yet. Changes too many styles. 
	 Declare 640px-wide content well here and then adjust for mobile 
	 in body#interior.mobile #main
==============================================*/

body#interior.obamacare #main {
	margin: 0;
	width: 640px;
}

body#interior.obamacare.tcrbody #main {
	width: 740px;
}

/* ===========================================
   TOOLS ICONS
==============================================*/

body.obamacare .print {
	padding-left: 20px;
	background: url(http://a.s.kqed.net/icon/icon-print-16x16.png) no-repeat;
}

body.obamacare .embed {
	padding-left: 20px;
	background: url(http://a.s.kqed.net/icon/icon-embed-16x16.png) no-repeat;
}

body.obamacare .permalink {
	padding-left: 20px;
	background: url(http://a.s.kqed.net/icon/icon-permalink-16x16.png) no-repeat;
}

body.obamacare .change-language {
	padding-left: 20px;
	background: url(http://a.s.kqed.net/templates/blue-arrow.gif) 2px 2px no-repeat;
}

/* ===========================================
   ARTICLE TOOLS
==============================================*/

body.obamacare .articleTools {
	margin-bottom: 20px;
	padding-bottom: 0.5em;
	border-bottom: 4px solid #939597;
	color: #fff;
}

body.obamacare .articleTools a:link,
body.obamacare .articleTools a:visited,
body.obamacare .articleTools span {
	color: #000 !important;
}

body.obamacare .articleTools h4 {
	display: inline-block;
}

body.obamacare .articleTools h4 a {
	display: block; 
	overflow: hidden;
	width: 102px;
	height: 16px; 
	background: url(http://a.s.kqed.net/img/news/logo-kqednews-white-102x16.png) no-repeat;
	text-align: left;
	text-indent: 200%; 
	white-space: nowrap; 
	direction: ltr; 
}

body.obamacare .articleTools .sharethis-container {
	width: auto; /* wider to accommodate Spanish labels and link to Spanish version */
	margin-top: 8px; /* KIP-1025: create horizontal space betwen share buttons and newsletter subscribe link on small screens. */
	margin-bottom: 0;
	text-align: right;
}

/*
body.obamacare .articleTools .print,
body.obamacare .articleTools .embed,
body.obamacare .articleTools .change-language,
body.obamacare .articleTools .subscribe {
	float: right;
	margin-left: 12px;
	padding-top: 1px;
	min-height: 15px;
	font: 11px Verdana;
}
*/

body.obamacare .link-group {
	float: right;
	margin-top: 8px;
	margin-left: 4px;
}

body.obamacare .link-group a {
	font: 11px/1.2 Verdana;
}

body.obamacare .articleTools .subscribe { /* KIP-1025: Link to newsletter sign-up. */
	/* margin-top: 8px; */
	padding-left: 14px;
	background: url(http://a.s.kqed.net/icon/blue-arrow-toggle.png) 0 1px no-repeat;
	background-size: 16px 150px;
}

body.obamacare .articleTools .print,
body.obamacare .articleTools .embed {
	display: none; /* Add back later - don't need for launch */
}

body.obamacare .articleTools .print {
	margin-left: 6px;
}

body.obamacare .articleTools .change-language {
	margin-left: 4px;
	padding-left: 16px;
}

body.obamacare .articleTools .print:hover,
body.obamacare .articleTools .embed:hover {
	text-decoration: none !important;
	opacity: 0.75;
}


/* ===========================================
   MASTHEAD
==============================================*/

body.obamacare #content #main h1 {
	margin-bottom: 20px;
	text-align: left;
}

body.obamacare #content #main img {
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

body.obamacare #content #main h1 img {
	/* max-width: 397px; */
	max-width: 100%;
}

body.obamacare h5 {
	margin-bottom: 1em;
	color: #939597;
	text-align: center;
	font-size: 1.1em;
	line-height: 1.3em;
}


/* ===========================================
   FLEXSLIDER
==============================================*/

.flexslider {
	margin-bottom: 15px;
	padding-bottom: 0.1em;
	border: 0;
	-webkit-border-radius: 0; 
	-moz-border-radius: 0; 
	-o-border-radius: 0; 
	border-radius: 0; 
	-webkit-box-shadow: none; 
	-moz-box-shadow: none; 
	-o-box-shadow: none; 
	box-shadow: none; 
}

.flex-viewport {
	margin: 20px 0 2em;
	padding-bottom: 2em;
	max-height: none;
	border-bottom: 2px solid #babcbe;
}


/* ===========================================
   CONTROLS
==============================================*/

/* Direction Nav */

.flex-direction-nav {
	text-align: center;
	/* *height: 0; */
}

.flex-direction-nav li {
	display: inline-block;
	margin-right: 2em;
}

.flex-direction-nav li:last-child {
	margin-right: 0;
}

.flex-direction-nav a { 
	position: relative; 
	top: auto;
	display: inline; 
	margin: 0; 
	width: auto; 
	height: auto;
	background: none; 
	text-indent: 0;
	font-weight: bold; 
	font-size: 1.1em;
	line-height: 1.3em; 
	opacity: 1; 
	cursor: pointer; 
	-webkit-transition: none;
}

.flex-direction-nav .flex-next {
	right: auto;
}

.flex-direction-nav .flex-prev {
	left: auto;
}

.flexslider:hover .flex-next { 
	right: auto;
	opacity: 1;
}

.flexslider:hover .flex-prev { 
	left: auto;
	opacity: 1;
}

.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
	opacity: 1;
}

.flex-direction-nav .flex-disabled {
	opacity: .3!important; 
	filter:alpha(opacity=30); 
	cursor: default;
}


/* Control Nav */

.nav-container {
	position: relative;
	top: 0;
	bottom: auto;
	padding: 0.6em 0 0;
	border-top: 2px solid #babcbe;
	border-bottom: 2px solid #babcbe;
}

.mobile-nav {
	display: none;
}

.flex-control-nav {
	position: relative;
	bottom: auto;
}

.flex-control-nav li {
	/* display: inline-block; */
	margin: 0 0.5em 0.6em 0;
	/* zoom: 1; */
	/* *display: inline; */ */
}

.flex-control-nav li:last-child {
	margin-right: 0;
}

.flex-control-paging li a {
	/* display: block; */
	padding: 0.5em 1em;
	width: auto; 
	height: auto; 
	border: none;
	-webkit-border-radius: 1em; 
	-moz-border-radius: 1em; 
	border-radius: 1em;
	background: #babcbe;
	box-shadow: none;
	/* box-shadow: inset 0 0 3px rgba(0,0,0,0.3); */
	color: #fff !important; 
	text-indent: 0;
	font-weight: bold; 
	font-size: 14px;
	line-height: 14px; 
	cursor: pointer; 
	-o-border-radius: 1em;
}

#interior #main .flex-control-paging li a:hover { 
	background: #939597; 
	text-decoration: none;
}

.flex-control-paging li a.flex-active { 
	background: #ec2029; 
	cursor: default; 
}

/* Back to the Top */

.link-top {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
}

.link-top a {
	padding-right: 0.8em;
	background: url(http://a.s.kqed.net/icon/blue-arrow-up-down.gif) 100% 0.3em no-repeat;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.3em;
}


/* ===========================================
   CONTENT
==============================================*/

body.obamacare #content #main .flexslider h2 {
	margin-bottom: 0.4em;
	color: #262421;
	text-transform: uppercase;
	font-weight: bold;
}

body.obamacare #content #main .flexslider h3 {
	margin-bottom: 1em;
	color: #939597;
	text-transform: none;
	word-spacing: 0;
	letter-spacing: 0;
	font-weight: bold;
	font-size: 1.3em;
	line-height: 1.2em;
}

body.obamacare #content #main .flexslider h4 {
	margin-bottom: 0.6em;
	color: #ec2029;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1em;
	line-height: 1.3em;
}

body.obamacare #content #main .flexslider h5 {
	margin-bottom: 0.2em;
	color: #000;
	text-align: left;
	font-weight: bold;
	font-size: 1em;
	line-height: 1.3em;
}

body.obamacare #content #main .flexslider h6 {
	margin-bottom: 0.2em;
	color: #ec2029;
	text-transform: none;
	word-spacing: 0;
	letter-spacing: 0;
	font-weight: bold;
	font-size: 1.3em;
}

body.obamacare .guideCredits {
	 margin-bottom: 40px;
	 color: #666;
}

/* Bullet Lists */

body.obamacare .bulleted-list {
	overflow: hidden;
	margin-bottom: 1.5em;
}

body.obamacare .bulleted-list li {
	margin-bottom: 0.5em;
	color: #000;
}

body.obamacare ul.bulleted-list li {
	padding-left: 0.8em;
	background: url(http://a.s.kqed.net/img/news/bullet-greyDisc-whiteBg.png) 0 0.45em no-repeat;
}

body.obamacare ol.bulleted-list li {
	margin-left: 1.4em;
	list-style: decimal;
}
*+html body.obamacare ol.bulleted-list li { margin-left: 2em; /* IE7 */ }


/* Tables (General) */

body.obamacare .flexslider table {
	margin: 0 auto 1.5em;
	max-width: 480px;
	border-top: 1px solid #bbb;
	color: #000;
	text-align: center;
}

body.obamacare .flexslider table tr {
	vertical-align: top;
}

body.obamacare .flexslider table th,
body.obamacare .flexslider table td {
	padding: 0.5em 1em;
	border-bottom: 1px solid #bbb;
	background-color: #dddee0;
}

body.obamacare .flexslider table thead th {
	background-color: #283a91;
	color: #fff;
	font-weight: bold;
	font-size: 0.9em;
	line-height: 1.3em;
	text-align: center;
}

body.obamacare .flexslider tbody tr:nth-child(2n) td,
body.obamacare .flexslider tbody tr:nth-child(2n) th {
	background-color: #c9ccd7;
}

/* Tables (Which Program) */

body.obamacare .flexslider table.which-program th {
	padding: 0.5em 2em;
}

/* Tables (Which Program) */

body.obamacare .flexslider .hd-table {
	text-align: center;
}

body.obamacare .flexslider table.example-rates {
	font-size: 1.1em;
	line-height: 1.4;
}

body.obamacare .flexslider table.example-rates em {
	color: green;
}

@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
	body.obamacare .flexslider table.example-rates {
		font-size: 11px;
		line-height: 1.5;
	}
}


/* Section-specific styles */

#main section {
	margin-bottom: 1.5em;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

body.obamacare #content #main .slides h4 {
	color: #ec2029;
	text-transform: uppercase;
}

body.obamacare #content #main section.introText p {

}

section.introText,
section.changes,
section.arguments {
	/* padding: 0 0 1em; */
	/* border-bottom: 1px solid #c3c3c1; */
}

#main section.introText {
	overflow: hidden;
	margin-bottom: 0.5em;
	padding-bottom: 0;
	border-bottom: 0;
}

#tab-intro section.introText {
	margin-bottom: 0;
}

/* iframes */

body.obamacare #content #main .slides iframe {
	display: block;
	max-width: 100% !important;
	margin-bottom: 1em;
}

/* Calculator */

.wrap-calculator {
	clear: both; 
	margin: 2em 0; 
	padding: 1em 0; 
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}


/* ===========================================
   INSET
==============================================*/

body.obamacare .inset-wrap {
	float: left;
	margin: 0 4% 1em 0;
	padding: 0 4% 0 0;
	width: 45%;
	border-right: 1px solid #c3c3c1;
	color: #666;
}

/* Image */

body.obamacare .inset-wrap .image-inset {
	float: none;
	margin: 0;
}

body.obamacare .inset-wrap .image img {
	width: 99%;
}

/* Things to Know */

body.obamacare .thingsToKnow {
	margin-top: 1em;
	padding-top: 1em;
	display: block;
	clear: left;
}

body.obamacare .aboutcandidate {
	margin-top: 1em;
	padding-top: 1em;
	display: block;
	clear: left;
}

body.obamacare .aboutcandidate p { 
	color: #000 !important;
	font-size: 1.05em !important;
	line-height: 1.6em !important;
}

body.obamacare .thingsToKnow p { 
	color: #666 !important;
	font-size: 1.30769em !important; /* 17px / 13px */
	line-height: 1.2353em !important; /* 21px / 17px */
}

body.obamacare .thingsToKnow .bulleted-list {
	margin-left: 0;
}

body.obamacare .bulleted-list li {
	color: #666;
	font-size: 1.05em; /* 12px / 13px */
	line-height: 1.4em;
}

/* Candidate Intro */

body.obamacare .candidateIntro {
}

body.obamacare .candidateIntro p { 
	color: #666 !important;
	font-size: 1.30769em !important; /* 17px / 13px */
	line-height: 1.2353em !important; /* 21px / 17px */
}



/* ===========================================
   CANDIDATE LEFT
==============================================*/

body.obamacare .candidateleft {
	float: left;
	margin: 0 4% 1em 0;
	padding: 0 4% 0 0;
	width: 45%;
	border-right: 1px solid #c3c3c1;
	color: #666;
}

body.obamacare .candidateleft img {
	padding-right:20px;
	padding-bottom:10px;
}

/* Image */

body.obamacare .candidateleft .image-inset {
	float: none;
	margin: 0;
}



/* ===========================================
   CANDIDATE RIGHT
==============================================*/

body.obamacare .candidateright {
	float: right;
	width: 45%;
	display: block;
}

/* Image */

body.obamacare .candidateright .image-inset {
	float: none;
	margin: 0;
}

body.obamacare .candidateright img {
	padding-right:20px;
	padding-bottom:10px;
}


/* Tools (Print, Embed, Permalink) */

body.obamacare .inset-wrap .tools {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid #c3c3c1;
}

body.obamacare .inset-wrap .tools .section {
	margin-bottom: 1em;
	padding-top: 2px 0 0 24px;
	min-height: 16px; /* display entire icon on intro tab */
}

body.obamacare .inset-wrap .tools a {
	margin-right: 1em !important;
}

body.obamacare #content #main .inset-wrap .tools h4 a {
	color: #262421;
}

body.obamacare #tab-intro .inset-wrap .tools a {
	text-transform: uppercase;
	font-weight: bold;
}

body.obamacare .inset-wrap .tools .bulleted-list {
	margin-bottom: 1em;
	margin-left: 0;
}

body.obamacare .inset-wrap .tools .bulleted-list li {
	margin-bottom: 0.2em;
}

body.obamacare .inset-wrap .tools a.selected {
	font-weight: bold;
}

body.obamacare .inset-wrap .embed textarea,
body.obamacare .inset-wrap .permalink input {
	display: none;
	padding: 2%;
	width: 92%;
}

body.obamacare .inset-wrap .embed textarea {
	padding: 2% 3%;
	height: 9em;
}

body.obamacare .inset-wrap .embed textarea.selected,
body.obamacare .inset-wrap .permalink input.selected {
	display: block;
}


/* ===========================================
   LINK TO COMMENTS
==============================================*/

.link-comment {
	margin-bottom: 40px;
	text-align: center;
}

.link-comment a {
	display: inline-block;
	padding: 0.5em 1em;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
	border: 1px solid #C3C3C1;
}

.link-comment a:after {
	content: "\00A0\000BB"; /* Insert a space and a right angled-quote */
}


/* ===========================================
   PRINTABLE VERSION
==============================================*/

body#interior.printVersion {
	background: none !important;
}

body#interior.printVersion #content {
	padding-top: 0;
	width: auto;
}

body#interior.printVersion #main {
	display: block;
	float: none;
	margin: 0 !important;
	padding: 0 !important;
	width: auto;
}

body#interior.printVersion .printAction {
	float: right;
	margin: 1em 20px 0 0 !important;
	padding-left: 20px;
	background: url(http://a.s.kqed.net/icon/icon-print-16x16.png) no-repeat;
	font-weight: bold;
	font-size: 1.1em;
}
body#interior.printVersion .printAction:hover {
	margin: 1em 20px 0 0 !important;
}

body.printVersion #content #main .flexslider h2,
body.printVersion #content #main .flexslider h3,
body.printVersion #content #main .flexslider h4,
body.printVersion #content #main .inset-wrap h4,
body.printVersion #content #main section.introText p,
body.printVersion .thingsToKnow .bulleted-list li {
	clear: left;
	color: #000;
}

body.printVersion #content #main h1,
body.printVersion h5 {
	text-align: left;
}

body.printVersion #content #main .flexslider h2 {
	margin-top: 2em;
	padding-top: 1em;
	border-top: 6px solid #000;
}

body.printVersion #content #main .flexslider h3 {
	page-break-before: always;
}

body.printVersion .flexslider {
	margin-top: 0;
	padding-top: 0;
	border: 0;
}

body.printVersion .inset-wrap {
	float: none;
	margin: 0 0 1.5em 0;
	padding: 0;
	width: auto;
	border-right: none;
	border-bottom: 1px solid #c3c3c1;
}

body.printVersion .inset-wrap .image,
body.printVersion .inset-wrap .tools,
body.printVersion .addlResources {
	display: none;
}

body.printVersion #content ul.bulleted-list {
	margin-left: 1.5em;
	list-style: disc;
}

body.printVersion #content ul.bulleted-list li {
	background: none;
	list-style: disc;
	margin-left: 1.5em;
	font-size: 1em;
	line-height: 1.3em;
}


/* ===========================================
   EMBEDDED VERSION
==============================================*/

body#interior.embeddedVersion {
	padding: 12px 20px 20px;
	background: none !important;
}

body#interior.embeddedVersion #content {
	padding-top: 0;
	width: auto;
	max-width: 960px;
}

body#interior.embeddedVersion #main,
body#interior.embeddedVersion.tcrbody #main {
	display: block;
	float: none;
	margin: 0 !important;
	padding: 0 !important;
	width: auto;
}


/* ===========================================
   MEDIA QUERIES
==============================================*/

/* For desktop, #main is set for 640px. For smaller screens, allow flexible width */
@media handheld, only screen and (max-width: 640px), only screen and (max-device-width: 640px) {

	body#interior.obamacare #main {
		width: auto;
	}
/*
	body.obamacare .articleTools .change-language {
		margin-top: -1px;
	}

	body.obamacare .articleTools .sharethis-container {
		clear: both;
	}
*/
}


/* At <500px, nav bar no longer fits all buttons in one row, so swap out for dropdown.
While we're at it, reposition inset above text at full-width. */

@media handheld, only screen and (max-width: 550px), only screen and (max-device-width: 550px) {

	body.obamacare .inset-wrap {
		float: none;
		width: auto;
		margin: 0 0 1.5em 0;
		padding: 0 0 1em;
		border-right: none;
		border-bottom: 1px solid #c3c3c1;
	}

		body.obamacare .candidateleft {
		float: none;
		width: auto;
		margin: 0 0 1.5em 0;
		padding: 0 0 1em;
		border-right: none;
		border-bottom: 1px solid #c3c3c1;
	}

		body.obamacare .candidateright {
		float: none;
		width: auto;
	}
	
	.inset-wrap .tools { /* Remove tools so doesn't look like end of text */
		display: none;
	}
	
	#content #main section.introText p {
		font-size: 1.266667em; /* 19px / 15px */
		line-height: 1.210253em; /* 23px / 19px */
		color: #666;
	}


	/* Dropdown Nav */

	.mobile-nav {
		display: block;
		text-align: center;
	}

	#content .nav-bu-menu {
		display: inline-block;
		width: 225px;
		margin-bottom: 0.6em;
		padding: 0.5em;
		font-size: 14px;
		line-height: 14px;
		font-weight: bold;
		color: #fff;
		-webkit-border-radius: 1em; 
		-moz-border-radius: 1em; 
		-o-border-radius: 1em; 
		border-radius: 1em;
		background: #ec2029 url(http://a.s.kqed.net/icon/arrow-white-yellow-18x60.png) 90% 12px  no-repeat;
		background-size: 9px 30px;
	}

	.flex-control-nav {
		display: none;
		width: 218px;
		margin: 0 auto 0.8em;
		background-color: #fff;
		border: 0;
	}
	
	.flex-control-nav li {
		display: block;
		margin-right: 0;
		margin-bottom: 1px;
	}

	.flex-control-nav li a {
		-webkit-border-radius: 0; 
		-moz-border-radius: 0; 
		-o-border-radius: 0; 		
	}
}

@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

/*	body.obamacare .articleTools {
		text-align: right;
	}

	body.obamacare .articleTools .subscribe {
		float: none !important;
	}
*/
}

@media handheld, only screen and (max-width: 320px), only screen and (max-device-width: 320px) {

	/* body.mobile .articleTools .sharethis-container {
		margin-top: -3px;
	} */

	body.mobile h5 {
		font-size: 0.8em;
	}

	body.mobile .inset-wrap .image img {
		width: 100%;
	}

	body.obamacare .link-group {
		margin-top: 0;
	}

}