@charset "iso-8859-1";

/* css-reset, minimized */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126 + main
   License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,main,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* clear fix, minimized */
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.clearfix{display:inline-block}html[xmlns] .clearfix{display:block}* html .clearfix{height:1%}

/* content hidden from visual agents, still available to screen readers, search engines, etc - useful for sprites */
.screen-reader-text,.sprite span{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.screen-reader-text.focusable:active,.screen-reader-text.focusable:focus,.sprite span:active,.sprite span:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}

/* css-reset normalization */
html { height: 100%; }
body { font-size: 1em; line-height: 1.618em; }
h1,h2,h3,h4,h5,h6,p,small,table { padding-bottom: 1em; }
ol {
	list-style-type: decimal;
	margin-left: 2em;
}
ul {
	list-style-type: disc;
	margin-left: 1em;
}
li { padding-bottom: 0.5em; }
small { 	font-size: 0.8em; }
strong { font-weight: bold; }
em { font-style: italic; }
td { padding: 0.25em; }

/* Palette
 *
 * cfd0d2 nav grey
 * 7b7c7e dark grey
 * 555658 darker grey (footer links)
 * 00a1e4 light blue (some headers)
 * 00608a medium blue (other headers)
 * 003653 dark blue (most stuff)

 * ff9600 logo orange
 *
 * Fonts
 * font-family: 'Oswald', sans-serif;
 *
 */

/* template-specific modifiers */

body {
	font-family: 'Open Sans', sans-serif;
}

.sprite {
	background-image: url(../img/sprite.png);
	background-repeat: no-repeat;
	background-color: transparent;
	display: inline-block;
}

#frame {
	padding: 0 1.5em;
}
#top-frame {
	display: none;
	/* height: 82px; specific to ad height */
}

/*
#top-frame > div {
	margin: auto;
}

.banner iframe {
	margin: auto;
}
.banner > div {
	text-align: center;
}
*/

header h1 {
	padding: 0;
	float: left;
	width: 62.817551963%;
	/*padding: 0 5.888888888% 0 0 ;*/
	max-width: 364px;
}

#top-logo {
	width: 100%;
	height: auto;
}

#social {
	/*margin-left: 62.817551963%;*/
}

#social ul {
	font-size: 0; /* eliminate white space */
	line-height: 0;

	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline;
}

#social li {
	padding: 0;
	display: inline
}

#social .sprite {
	width: 38px;
	height: 46px;
	margin: 0 2% 2% 0;
	vertical-align: middle;
}

/* twitter is 0,0 */
#social .sprite.facebook { background-position: -114px 0; }
#social .sprite.pinterest { background-position: -38px 0; }
#social .sprite.gplus { background-position: -76px 0; }
#social .sprite.instagram { background-position: -176px 0; }

#search-container {
	display: none;
	white-space: nowrap;
	margin-left: 2%;
}
#search-form {
	display: inline-block;		/* problems with IE7 and earlier?  http://caniuse.com/inline-block */
	width: auto;
	border: 0.234375em solid #cfd0d2;
	border-radius: 0.3125em;
	padding: 0.75em 0.5em;
}
/*
#search-form * {
	display: inline;
}*/

#search-form form {
	height: 24px;
}

#search-form input.search-field {
	border: 0;
	width: 10em;
	margin: 0;
	height: 24px;
	padding: 0;
}

#search-form input.search-submit {
	background-color: transparent;
	border: 0;
	cursor: pointer;

	background-image: url(../img/sprite.png);
	background-repeat: no-repeat;
	background-color: transparent;

	background-position: -152px -21px;
	width: 26px;
	height: 24px;
}

header {
	padding-top: 1.875em;
	text-align: right;
}

header nav {
	float: right;
	display: block;
	width: 100%;
}

header nav a {
	color: #003653;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
}

header nav a:hover {
	color: #ff9600;
}

header nav > ul {
	padding: 0;
	margin: 0;
	list-style-type: none;

	width: 100%;
	display: table;		/* problems with IE7 and earlier */
	table-layout: auto;
}
header nav > ul > li {
	padding: 0;
	margin: 0;
	display: table-cell;
}

header nav .top {
	padding-bottom: 0.625em;
	margin-bottom: 0.625em;
	border-bottom: 0.234375em solid #cfd0d2;
}

header nav .top > li {
	text-transform: uppercase;
	font-weight: bold;
	text-align: left;
	font-size: 1.4em;
}
header nav .top > li + li + li {
	text-align: right;
}

header nav .bottom > li {
	border-right: 0.3125em solid #cfd0d2;
	text-align: left;
	font-size: 0.7em;
	line-height: 1em;
}

header nav .bottom > li + li {
	border-right: 0.3125em solid #cfd0d2;
	text-align: center;
}

header nav .bottom > li + li + li {
	border-right: 0.3125em solid #cfd0d2;
	text-align: center;
}

header nav .bottom > li + li + li + li {
	border-right: 0;
	text-align: right;
}

header nav .submenu {
	padding: 0.5em;
	margin: 0;
	list-style-type: none;

	width: auto;
	display: none;		/* problems with IE7 and earlier */

	position: absolute;
	background: white;
	border: 1px solid #cfd0d2;

	box-shadow: 0px 2px 2px rgba(0,0,0,0.4);

	z-index: 4;
}

header nav li:hover .submenu {
	display: block;
}

header nav .submenu.best { /* hack for now, want centered */
	margin-left: 2em;
}

header nav .submenu li {
	padding: 0;
	margin: 0;
	border: 0;

	text-transform: none;
	font-weight: normal;
	text-align: left;
	font-size: 1.0em;

	display: block;
}

header nav .top .submenu li {
	font-size: 0.714285714em; /* 1/1.4em */
}



main {
	padding: 1em 0;
}

main h1,
main h1 a,
main h1 a:visited
{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.4em;
	text-decoration: none;
	color: #003653;
	line-height: 1em;
}

main h1,
main h2.author
{
	font-family: 'Oswald', sans-serif;
	color: #003653;
	padding-bottom: 0.2em;
	line-height: 1em;
}

main h2,
main h2 a,
main h2 a:visited
{
	font-family: 'Oswald', sans-serif;
	/*color: black;*/
	color: #7b7c7e;
	font-weight: 300;
	text-decoration: none;
	line-height: 1em;
}

main h2.author {
	font-family: 'Oswald', sans-serif;
	color: #003653;
}

#breadcrumbs {
	font-size: 0.6em;
	padding-bottom: 1em;
}
#breadcrumbs a {
	color: #003653;
	font-weight: normal;
}

.articles .preamble {
	padding-bottom: 1em;
}

.articles .share 
{
	padding-bottom: 1em;
}

.articles .video_container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
	margin-bottom: 1em;
	background: black;
}
.articles .video_container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


article {
	padding: 1em 0;
	margin: 0 0 1em 0;
	border-bottom: 1px dotted black;
}

article.tiny {
	width: 200px;
	float: left;
	padding: 0 1em;
	margin: 0;
	border-bottom: 0;
	text-align: center;
}
article.tiny .detail {
	margin-top: 200px;
	padding-top: 0.8em;
}

.articles div.related {
	margin: 0 0 1em 0;
	border-bottom: 1px dotted black;
}


article img
{
	float: none;
	padding-right: 0;
	width: 100%;
	height: auto;
	padding-bottom: 2em;
}

article.tiny img
{
	float: left;
	padding-bottom: 0;
}

article.medium img
{
	display: block;
	padding: 0.5em 0;
}

article .detail {
	margin-left: 0;
	padding-left: 0;
}


article.medium h2 {
	font-weight: bold;
	font-size: 1.1em;
	padding-bottom: 0.1em;
}

article.small h2 {
	padding-bottom: 0.1em;
}

.meta {
	font-family: 'Oswald', sans-serif;
	color: #003653;
	font-weight: 300;
	padding-bottom: 1em;
}

.meta a {
	color: #003653;
	text-decoration: none;
	font-weight: normal;
}


article.medium .meta {
	font-weight: bold;
	font-size: 0.6em;
	padding-bottom: 0.6em;
}


article.small .meta {
	font-weight: bold;
	font-size: 0.6em;
	padding-bottom: 0.6em;
}

article .deck {
	font-style: italic;
	padding-bottom: 1em;
}

article .excerpt,
article .copy,
article nav
{
	padding-bottom: 1em;
}

article .keywords {
	font-size: 0.7em;
}

article a {
	color: #003653;
	font-weight: normal;
}

article div.more {
	text-align: right;
}

article a.more {
	font-size: 0.8em;
	text-decoration: none;
}

.otherarticles  {
	padding-bottom: 1em;
}
.otherarticles h3  {
	padding-bottom: 0;
}

.otherarticles .previous {
	float: left;
}
.otherarticles .next {
	text-align: right;
	float: right;
}

.pager {
	padding: 0;
	margin: 0;
	list-style-type: none;
	text-align: center;
}

.pager li {
	display: inline-block;
	margin-right: .7em;
	margin-bottom: .7em;
	text-align: center;

	padding: 0;

	border: 1px solid #7b7c7e;
	border-radius: .3em;
}

.pager li.linear {
	width: 3em;
}
.pager li.linear.custom {
	width: auto;
}

.pager .current {
	background: #cfd0d2;
}

.pager a {
	display: inline-block;
	padding: .3em;
	width: 2em;
	text-decoration: none;
	color: #003653;
}
.pager li.linear.custom a {
	width: auto;
}


aside > div {
	margin-bottom: .4em;
	padding: .6em;
}

aside .bordered {
	border: .2em solid #cfd0d2;
}

aside .centered {
	text-align: center;
}

#panel-1 > div,
#panel-2 > div,
#panel-3 > div
{
	margin: auto;
}

#twitter-feed > iframe
{
	margin: auto;
}

#most-popular-stories
{

}
#most-popular-stories h3
{
	font-family: 'Oswald', sans-serif;
	color: #00a1e4;
	font-weight: bold;
	font-size: 2.2em;
	line-height: 1em;
	padding-bottom: 0.2em;
	text-align: center;
}

#most-popular-stories ol {
	font-weight: bold;
}
#most-popular-stories a {
	color: black;
	text-decoration: none;
}

#due-date-calendar {
	text-align: center;
	border-top: none;
	padding-top: 0;

	min-width: 295px;
}

#due-date-calendar h3 {
	background: #003653;
	margin-left: -0.8em; /* 0.6 padding + 0.2 border */
	margin-right: -0.8em; /* 0.6 padding + 0.2 border */

	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

#due-date-calendar .sprite.duedate {
	background-position: 0 -46px;
	width: 303px;
	height: 43px;
}

#due-date-calendar .sprite.calendar {
	background-position: -152px 0;
	width: 20px;
	height: 21px;
	vertical-align: middle;
	margin-left: 0.6em;
}

#due-date-calendar .field_group {
	padding-bottom: 1em;
}

.bluebutton {
	border: none;
	background: #003653;
	color: white;
	border-radius: 0.3em;

	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	text-decoration: none;

	padding: 0.2em;
	cursor: pointer;

	display: inline-block;
}

#newsletter-signup {
	background: #ff9600;
	text-align: center;
}

#newsletter-signup a {
	text-decoration: none;
	color: #003653;
	font-family: 'Oswald', sans-serif;
	font-size: 1.2em;
	display: block;
}

#birth-plan {
	text-align: center;
	font-family: 'Oswald', sans-serif;
}

#birth-plan p {
	font-size: 1.6em;
	color: #00608a;
	line-height: 1em;
	padding-bottom: 0.2em;
}

#birth-plan h3 {
	color: #003653;
	font-size: 3em;
	line-height: 1em;
	padding-bottom: 0.2em;
}

#birth-plan p,
#birth-plan h3
{
	font-weight: bold;
	text-transform: uppercase;
}

#baby-names
{
	font-family: 'Oswald', sans-serif;
	text-align: center;
}
#baby-names h3
{
	font-weight: bold;
	font-size: 2.6em;
	line-height: 1em;
	padding-bottom: 0.2em;
}
#baby-names h3 a
{
	color: #00a1e4;
	text-decoration: none;
}
#baby-names p
{
	font-weight: 300;
	font-size: 1.15em;
	padding-bottom: 0;
}

#partners img {
	vertical-align: middle;
	display: inline-block;
	padding-right: 1em;
	padding-bottom: 1em;
}

footer p {
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: 0.2em solid #cfd0d2;
}

footer nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

footer nav ul li {
	display: inline-block;
	padding: 0 .3em;
}

footer nav a {
	font-family: 'Oswald', sans-serif;
	color: #555658;
	text-transform: uppercase;
}


/* page-specific */
.home main section {
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: 0.2em solid #cfd0d2;
}
.home main section.links {
	padding-bottom: 2em;
	margin-bottom: 0;
	border-bottom: 0;
}

.home main .bluebutton {
	float: right;
	margin-top: 0.5em;
	font-size: 0.8em;
}

.home .latest_stories ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.home .latest_stories img.teaser {
	display: none;
}

.home .latest_stories .detail img {
	width: 100%;
	height: auto;
}

.home .latest_stories .excerpt {
	padding-top: 1em;
	margin-top:1em;
	border-top: 1px dotted black;
}
.home .latest_stories h1 + .excerpt { /* first one */
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

.home .latest_stories h3 a {
	font-family: 'Oswald', sans-serif;
	color: black;
	text-decoration: none;
}

.home .featured img {
	width: 100%;
	height: auto;
}

.home .featured h2 {
	padding-bottom: 0.25em;
}
.home .featured h2 a {
	color: #003653;
	font-weight: bold;
	line-height: 1em;
	font-size: 1.2em;
	padding-bottom: 0.25em;
	text-decoration: none;
}

.home .featured.has_video {
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: 0.2em solid #cfd0d2;
}

.home .top_video h2 {
	color: #00a1e4;
	font-weight: bold;
	line-height: 1em;
	font-size: 1.2em;
	padding-bottom: 0.25em;
	text-decoration: none;
	text-align: center;
	width: auto;
}

.home .video_container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
	margin-bottom: 1em;
	background: black;
}
.home .video_container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.home .columned img {
	border: 0.2em solid #cfd0d2;
	float: left;
	margin: 0 1em 1em 0;
}

.home .columned h3 {
	padding-bottom: 0.2em;
	font-family: 'Oswald', sans-serif;
	color: #555658;
}

.home .columned h3 a {
	text-decoration: none;
	color: #555658;

	padding-bottom: 0.2em;
}

/*
24/16 = 5
38/16 = 7.9166666666666
30/16 = 6.25
22/16 = 4.5833333333333
*/

/* For small screen devices, like phones, held in landscape mode. */
@media all and (min-width: 30em) {
	header nav .bottom li {
		font-size: 0.9em;
	}

	#social li + li + li + li + li .sprite { margin: 0 0 2% 0; }
}

/* dunno what this is, but it's when there's enough space to show the search box beside the logo */
@media all and (min-width: 37em) {
	#search-container {
		display: inline;
	}


	.home .featured img {
		margin: 0;
		float: left;
		padding: 0 1em 1em 0;

		width: 50%;
		height: auto;
	}
}

/* Ten-inch tablets like the iPad (768×1024) held in portrait mode. */
@media all and (min-width: 54em) {
	header nav {
		font-size: 1.6em;
		padding-top: 1.6em;
		width: 17em; /* logo is ~24 em */
	}

	header nav .bottom li {
		font-size: 0.8em;
	}


	#main-wrapper {
		margin-right: -320px;
		float: left;
		width: 100%;
	}
	main {
		font-size: 1.6em;
		margin-right: 320px;
		padding-right: 2em;
	}

	main .pager {
		font-size: 0.625em; /* 1/1.6 */
	}

	aside {
		width: 320px;
		float: right;
		padding: 1.6em 0;
	}

	#partners img {
		padding-right: 0;
	}

	.home .latest_stories {
		border-bottom: none;
		margin-bottom: 0;
	}
	.home .latest_stories ul {
		position: relative;
		border: 0.2em solid #cfd0d2;
	}

	.home .latest_stories img.teaser {
		display: block;
		float: right;
		width: 16.2895928%;
		border-top: 0.2em solid #cfd0d2;
		border-left: 0.2em solid #cfd0d2;
	}
	.home .latest_stories .excerpt:first-child img.teaser {
		border-top: 0;
	}

	.home .latest_stories .excerpt {
		border: 0;
		padding: 0;
		margin: 0;
	}

	.home .latest_stories .detail {
		display: none;
		position: absolute;
		top: 0;
		background: white; /* hide first one behind */
		width: 82.71%; /* 83.7104072% - right border */
		height: 100%;
	}
	.home .latest_stories .excerpt .detail .frame {
		float: left;
		height: 100%;
		width: 50%;
		overflow: hidden;
		border-right: 0.2em solid #cfd0d2;
	}

	.home .latest_stories .detail img {
		height: 100%;
		width: auto;
	}

	.home .latest_stories .excerpt .detail .copy {
		margin-left: 50%;
		height: 96%;
		padding: 2%;
	}

	.home .latest_stories .excerpt .detail .copy div {
		font-size: 0.7em;
		font-weight: 300;
	}

	.home .latest_stories .excerpt.highlighted .detail {
		display: block;
	}
	.home .latest_stories .excerpt:hover .detail {
		display: block;
	}

	.home main section.feat_vid_container {
		padding-bottom: 0;
	}

	.home .featured.has_video {
		vertical-align: top;
		display: inline-block;
		width: 62%;
		padding-right: 3%;
		padding-bottom: 0;
		border-bottom: 0;
		border-right: 1px dotted black;
	}

	.home .top_video {
		vertical-align: top;
		display: inline-block;
		width: 33%;
	}

	.home .columned > div > div {
		width: 22%;
		padding-right: 3%;
		float: left;
	}

	.home .columned img {
		float: none;
		margin: 0 0 1em 0;
		width: 100%;
		height: auto;
	}

	.home .columned h3 {
		text-align: center;
	}

	.home .columned > div div div {
		font-size: 0.6em;
		text-align: left;
	}

}


/* Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, netbook, and desktop displays. */
@media all and (min-width: 64em) {
	#frame {
		padding: 0 3.875em;
	}

	#top-frame {
		display: block;
		text-align: center;
  		height: 165px;
		background: #dcddde url(../img/top-frame-bg.png) repeat-x left bottom;
	}

	#top-frame > div {
		padding-top: 30px;
	}

	header {
		padding-top: 2.75em;
	}

	header nav {
		padding-top: 1.65em;
		width: 18em;
	}

	article img
	{
		width: 220px;
		height: auto;
		float: left;
	}

	article .detail {
		margin-left: 220px;
		padding-left: 2em;
	}
	
	article.tiny .detail {
		margin-left: 0;
		padding-left: 0;
	}
	
	.articles article img
	{
		width: 200px;
	}
	
	.articles article.small .detail
	{
		margin-left: 200px;
	}
	
	.articles article.full img, 
	.articles article.medium img
	{
		margin-right: 1em;
		margin-bottom: 1em;
	}
	
	.articles article.full .detail,
	.articles article.medium .detail
	{
		margin-left: 0px;
		padding-left: 0px;
	}
		

	article.featured img
	{
		float: none;
		padding-right: 0;
		width: 100%;
		height: auto;
		padding-bottom: 2em;
	}
	article.featured .detail {
		margin-left: 0;
		padding-left: 0;
	}

}

@media all and (min-width: 75em) {
	#frame {
		padding: 0 5.875em;
	}
	header nav {
		width: 24em;
	}
}

/* GPT slots */
@media all and (min-width: 1px) {
	.banner.full {
		width: 320px;
		height: 50px;
	}
}
@media all and (min-width: 468px) {
	.banner.full {
		width: 468px;
		height: 60px;
	}
}
@media all and (min-width: 768px) {
	.banner.full {
		width: 768px;
		height: 90px;
	}
}
@media all and (min-width: 970px) {
	.banner.full {
		width: 970px;
		height: 90px;
	}
}


.bookLink {
	color: #fff;
	text-decoration: none;
	margin: 3px 5px;
	border: 1px solid rgb(0, 161, 228);
	padding: 4px;
	background-color: #ff8500;
	font-size: 10px;
	font-weight: normal;
	text-transform: uppercase;
}

/* From: Ethan Marcotte's Responsive Design
320 pixels	For small screen devices, like phones, held in portrait mode.
480 pixels	For small screen devices, like phones, held in landscape mode.
600 pixels	Smaller tablets, like the Amazon Kindle (600×800) and Barnes & Noble Nook (600×1024), held in portrait mode.
768 pixels	Ten-inch tablets like the iPad (768×1024) held in portrait mode.
1024 pixels	Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, netbook, and desktop displays.
1200 pixels	For widescreen displays, primarily laptop and desktop browsers.


http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
100% = 1 em ~= 16px ~= 14pt

20em	For small screen devices, like phones, held in portrait mode.
30em	For small screen devices, like phones, held in landscape mode.
37.5em	Smaller tablets, like the Amazon Kindle (600×800) and Barnes & Noble Nook (600×1024), held in portrait mode.
48em	Ten-inch tablets like the iPad (768×1024) held in portrait mode.
64em	Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, netbook, and desktop displays.
75em	For widescreen displays, primarily laptop and desktop browsers.
*/