/* Basic CSS for interactives with iframes */
/* There are two widths of interactives
   - .w300 -- 300px wide: float to the right, have h2s and sans-serif text
   - .w660 -- 660px wide: no floats, h1s and serif text
   Also, if the 660px embedded or not it should have an extra class:
   - .landing is the permalink to the graphic
   - .embeded is added on the iframe
*/
.content {
margin:20px 0;
overflow:auto;
width: 100%;
}
#interactive {
font-family:"franklin-gothic-urw",Verdana,Geneva,sans-serif;
position:relative;
}
#embargoed {
margin: 25px 0;
background: #DF9797;
padding: 10px 15px;
font-size: 1.2em;
line-height: 153%;
color: #FFF;
}
#embargoed a {
color: #A02424;
text-decoration: underline;
}
/* 300 width */
	#interactive.w300 {
	width:300px;
	}
	#content #interactive.w300 {
	/* Does not apply to iframe */
	margin-left:20px;
	float:right;
	}
	.single #interactive.w300 h2 {
	font-family:"franklin-gothic-urw",Verdana,Geneva,sans-serif;
	font-weight: 600;
	font-size: 2.5em;
	margin-bottom: 10px;
	color:#333;
	}
	#interactive.w300 > p {
	font-style:italic;
	line-height:140%;
	font-size:1.3em;
	}
/* 660 width */
	#content #interactive.w660 {
	/* Does not apply to iframe */
	margin:0 auto 20px;
	clear:both;
	overflow: auto;
	}
	#interactive.w660 > p {
	font-size: 1.5em;
	line-height: 160%;
	color: #333;
	font-family:Georgia, "Times New Roman", Times, serif;
	}
	.iframe h1,
	#interactive.w660.embeded h1,
	#interactive.w660 h2 {
	font-family:"franklin-gothic-urw",Verdana,Geneva,sans-serif;
	font-weight: 600;
	font-size: 2em;
	color: #3C3C3C;
	text-transform: none;
	margin-bottom: 0;
	padding-bottom: 10px;
	}
	#interactive.embeded h3 {
	font-family: "franklin-gothic-urw",Verdana,Geneva,sans-serif;
	font-weight: 600;
	font-size: 1.5em;
	font-style:normal;
	}

body #interactive p.intro,
.iframe #interactive > p {
color: #555;
font-size: 1.4em;
font-family: "franklin-gothic-urw",Verdana,Geneva,sans-serif;
margin-bottom: 15px;
}
#interactive p.subtitle,
.interactive p.subtitle {
font-style: italic;
color: #757575;
}
#interactive p.source,
.interactive p.source {
color:#888;
font-size:.9rem;
margin-top:20px;
font-style:normal;
font-family:"franklin-gothic-urw",Verdana,Geneva,sans-serif;
}
/* Secondary Navigation */
#secondary-nav {
overflow: auto;
padding-left:0;
}
#secondary-nav div {
float: left;
font-size: 1.3em;
text-transform: uppercase;
padding: 8px 15px 5px 0;
text-align: center;
list-style: none;
border-radius: 10px;
color: #888;
line-height: 140%;
letter-spacing: 0.1em;
}
#secondary-nav ul {
padding-left: 0;
overflow: auto;
}
#secondary-nav li.active {
background: #F0F0E6;
}
#secondary-nav li {
list-style: none;
float: left;
margin-bottom: 10px;
font-weight: bold;
font-family: "franklin-gothic-urw",Verdana,Geneva,sans-serif;
text-transform: uppercase;
padding: 5px 9px;
text-align: center;
list-style: none;
cursor: pointer;
color: #888;
letter-spacing: 0.1em;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 1.4em;
}
#secondary-nav li:hover {
background:#f7f7ef;
}

/* iframe code */
.iframe #content {
margin-top:0;
padding-right: 0;
border-right: 0;
width: 100%;
}
.iframe.singular h1 {
margin-top:0;
}