@charset "utf-8";

/* This is ePub's container for the entire page. */
.body{
    width: 600px;
    margin: 0px auto;
}

.downloadAsPDF, .backToMediaKitHomeButton, .navButton, .wideButton, #cookie-policy, #footer-buttons, .ECFooterButton {
	display: none !important;
}

/* This gets rid of all underlines on any div wrapped in a link. */
div a{
	text-decoration: none;
}




/* Pagewide horizontal line used in several places on most pages. */
.lineBreak{
	width: 100%;
	height: 1px;
	margin: 20px auto;
	background-color: #d3d3d3;
}






/* These are all non-homepage section headers. */
.sectionHeader{
	margin: 40px auto 20px auto;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 32px;
	color: #333333 !important;
}

.subHeader{
	margin: 0px auto 15px auto;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 28px;
	font-weight: bold;
	color: #B03033 !important;
	line-height: 1.2;
}

.subSubHeader{
	margin: 0px auto 15px auto;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #B03033 !important;
	line-height: 1.2;
}






/* Used on all pages. This restricts content to half the page width, and becomes full page width on narrow screens. */
.halfWidthDiv{
	width: 95%;
	display: block;
	margin: 15px auto 40px auto;
	border-bottom: 1px solid #696969;
}

.halfWidthDiv img{
	max-width: 99%;
}


.audienceProfileSegment img {
	max-width: 150px;
}

/* Brand Awareness page only. This combines a few related divs to apply a background color. */
.ourPublication{
	max-width: 100%;
	padding: 15px 15px 50px 15px;
	background-color: #f6f6f6 !important;
}



/* Brand Awareness page only. These are the small dark gray divs, floated right, which contain some magazine stats. */
.statsContainer{
	display: block;
	margin: 10px 0px;
	padding: 20px 0px 10px 0px;
	background-color: #61646e !important;
	color: #ffffff !important;
	line-height: 1.4;
	max-width: 270px;
	float: none;
}


/* This is the big numer in the statsContainer. */
.statsNumber{
	display: inline-block;
	padding: 0px 15px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 32px;
	font-weight: bold;
	border-right: 1px solid #ffffff;;
}

.statsContainer p{
	display: inline-block;
	padding: 0px 15px;
	font-size: 14px;
	font-family: 'PT Serif', serif;
	width: 50%;
	text-align: left;
}

.statsContainer p a:link, .statsContainer p a:visited{
	color: #ffffff;
}



/* Brand Awareness page only. These are the stats at the bottom of the ourPublications div. */
.advertisingPerceptions{
	max-width: 100%;
	text-align: center;
}


.advertisingPerceptions p{
	display: inline-block;
	margin: 10px;
	max-width: 30%;
	font-family: 'PT Serif', serif;
	line-height: 1.2;
	vertical-align: top;
}


/* This is the big numer in the advertisingPerceptions div. */
.advertisingPerceptionsNumber{
	display: block;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: bold;
	font-size: 50px;
	color: #0f6fb1 !important;
}



/* Used on a couple of pages, this has an icon on the left, and a paragraph next to it. */
.imageBesideTextContainer{
	padding: 20px 0px;
	overflow: hidden;
}

/* This lets the paragraphs within float as a block next to the image without wrapping around the image. */
	.imageBesideTextContainer div{
		display: block;
		max-width: 90%;
	}


	.imageBesideTextContainer img{

		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		max-width: 50%;
		float: none;
	}



/* Content Marketing page only. This works only in addition to imageBesideTextContainer. It adds size limits to the images. */ 
.contentMarketing img{
	width: 125px;
}






/* Used on all pages. This just centers the image within. */
.imageContainer{
	text-align: center;
}

.imageContainer img{
	margin: 0px auto;
	max-width: 95%;
}



/* Used on several pages. This aligns the Continuing Education images. */
.continuingEducation{
	text-align: center;
}

.continuingEducation img{
	margin: 10px;
	max-height: 200px;
}

.continuingEducation a:link, .continuingEducation a:visited{
	text-decoration: none;
	border-bottom: none;
}

.continuingEducation a:hover{
	opacity: 0.7;
}




/* Used on several pages. This floats content to the right, and goes pagewide on narrow screens. */
.floatRight{
	width: 50%;
	margin: 8px 0px 8px 8px;
	float: right;
	text-align: center;
	overflow: hidden;
}
@media screen and (max-width: 700px){
    .floatRight{
		float: none;
		width: 80%;
		margin: 8px auto;
	}
}

.floatRight img{
	max-width: 100%;
	max-height: 250px;
}



@media screen and (max-width: 700px){
	.desktopOnly{
		display: none;
    }
}


.mobileOnly{
	display: none;
}
@media screen and (max-width: 700px){
	.mobileOnly{
		display: block;
    }
}





.ECFooterButton{
	display: inline-block;
	margin: 5px;
	padding: 12px 5px;
	background-color: #0080A3;
	cursor: pointer;
	text-align: center;
	line-height: 1.1;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	color: #ffffff;
	width: 200px;
}
.ECFooterButton:hover{
	background-color: #bf5429;
}

.BNPHeader{
	margin: 0px auto 15px auto;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.2;
}

.footerTextDiv{
	display: inline-block;
	margin: 20px 10px 0px 10px;
	vertical-align: top;
}
@media screen and (max-width: 700px){
    .footerTextDiv{
		display: block;
		margin: 10px;
	}
}

.addressDiv{
	width: 30%;
}
@media screen and (max-width: 700px){
    .addressDiv{
		width: 95%;
	}
}

.aboutDiv{
	width: 65%;
}
@media screen and (max-width: 700px){
    .aboutDiv{
		width: 95%;
	}
}





#footnotes{
	font-size: 12px;
	color: #696969 !important;
}





/* If your table overflows your page's width, this creates a sideways scroller under your table only, as opposed to your whole page. */ 
.tableContainer{
	margin: 0px auto;
	padding: 0px;
	overflow-x: auto;
}

/* Apply this class to your table's opening tag. No other elements within the table need classes or inline styles. */
.advertiseTable{
	max-width: 100%;
	margin: 15px auto;
	border-collapse: collapse;
	border: 2px solid #696969;	
}

/* This affects all table cells. The media queries below shrink the text and cell padding for narrow screens. */
.advertiseTable td{
	border: 1px solid #696969;
	padding: 6px;
	vertical-align: top;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 20px;
	color: #000000;
	line-height: 1.2;
	background-color: #ffffff;
	text-align: center;
}
@media screen and (max-width: 1000px){
	.advertiseTable td{
		font-size: 16px;
		padding: 4px;
    }
}

/* This makes the background color on every other row a different color, to make it easier to read. */
.advertiseTable tr:nth-child(odd) td{
	background-color: #eff3f5;
}

/* This affects only the column number in parentheses. */
.advertiseTable td:nth-child(1){
	text-align: left;
}

/* This affects only the row number in parentheses. In this case it makes the first row a header row. */
.advertiseTable tr:nth-child(1) td{
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: bold;
	background-color: #696969;
	color: #ffffff;
	vertical-align: middle;
	border: 1px solid #ffffff;
}





/* This affects only the column number in parentheses for the eBlast table. */
.eBlastTable td:nth-child(2), .eBlastTable td:nth-child(3){
	width: 80px;
}
@media screen and (max-width: 1000px){
	.eBlastTable td:nth-child(2), .eBlastTable td:nth-child(3){
		width: 50px;
    }
}