@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:700,400');
@import url(https://fonts.googleapis.com/css?family=Bitter:400,700);
@font-face {
    font-family: 'viner_hand_itcregular';
    src: url('/font/viner_itc/vineritc-webfont.eot');
    src: url('/font/viner_itc/vineritc-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/viner_itc/vineritc-webfont.woff') format('woff'),
         url('/font/viner_itc/vineritc-webfont.ttf') format('truetype'),
         url('/font/viner_itc/vineritc-webfont.svg#viner_hand_itcregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html { padding: 0 0 0 0; margin: 0 0 0 0; font-family: 'Open sans'; font-weight: 400; 
	font-size: 16px; line-height: 1.6; text-align: left; color: black; background-color: #333333; }
	
body { padding: 0 0 0 0; margin: 0 0 0 0; background-color: white; }

.horz-constraint { margin-left: auto; margin-right: auto; 
	padding: 0 30px; }
.narrow { max-width: 580px; }
.wide { max-width: 880px; }

@media (max-width: 600px) { .horz-constraint { padding: 0 20px; }}
@media (max-width: 500px) { .horz-constraint { padding: 0 15px; }}
@media (max-width: 400px) { .horz-constraint { padding: 0 10px; }}

.header { background-color: white; }

.logo {
	margin: 0 auto;
	display: table;
	height: 60px;
}

.logo .left { display: table-cell; width: 10px; padding-right: 5px; }
.logo .left img { width: 60px; }
.logo .right { vertical-align: middle; padding-left: 5px; display: table-cell; width: 10px;  }
.logo, .logo a, .logo a:visited, .logo a:hover  {
	font-family: viner_hand_itcregular;
	font-size: 40px;
	color: black;
	text-decoration: none;	
}



.logo img {
	width: 100%;
}


p { margin: 20px 0; padding: 0; text-align: left; }


h1, h2, h3 { font-family: Merriweather; font-weight: 400; text-align: center; line-height: 1.35; }
h1, h2 { color: #990000; }
h1 { font-size: 35px; margin: 38px 0 24px 0; }
h2 { font-size: 26px; margin: 34px 0 28px 0; }
h3 { font-size: 20px; margin: 25px 0; }
h4 { font-weight: bold; text-align: center; }

a, a:hover, a:visited { text-decoration: none; color: #4060dd; }
a:hover { text-decoration: underline; }

.blockquote, blockquote { margin-left: 20px; margin-right: 20px; }

.article-blurb {
	margin: -6px 0 24px 0;
	font-size: 24px;
	font-weight: 400;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	color: black;
	line-height: 1.5;
	text-align: center;
}
.article-byline {
	font-weight: bold; text-align: center;
	margin: 25px 0;
}
.article-byline a { color: #000000; text-decoration: none; }
.article-byline a:visited { color: #000000; text-decoration: none; }
.article-byline a:hover { color: #4466cc; text-decoration: underline; }

.credit, .credit p { font-size: 14px; color: #808080; }

.credit {margin-top: 30px; }
.credit ~ .credit { margin-top: 20px; }

.bio, .bio p { font-style: italic; }
.publication-date, .publication-date p { font-style: italic; }


/*** SEARCH-BAR BEGIN ***/

.search-bar {
	display:table;
	width: 100%;
	height: 26px;
	margin: 0  0 0 0;
	padding: 0 0 0 0; 
	border:1px solid #aaaaaa; 
	border-radius: 3px; 
	background-color: #cccccc; 
}

.search-bar .cell-wrapper {
	display: table-cell;
	vertical-align: top;
	height: 26px;
	width: 100%;
}

.search-bar .cell-wrapper-input {
	padding-right: 0px;
}

.search-bar input {
	display: table-cell;
	vertical-align: top;
	height: 26px;
	width: 100%;
	/* border: 1px solid #aaaaaa; */
	background-color: white;
	padding: 1px 0 1px 5px;
	margin: 0 0 0 0;
	font-family: 'Open sans', sans-serif;
	font-size: 14px; 
	box-sizing: border-box;
	border-radius: 3px;
	border: none; 
	border-radius: 3px 0 0 3px;
}

.search-bar button {
	display: table-cell;
	vertical-align: top;
	height: 26px;
	width: 26px;
	margin: 0 0 0 0;
	padding: 4px;
	/* border: 1px solid #aaaaaa; */
	margin: 0 0 0 0;
	font-size: 1px;
	box-sizing: border-box;
	border-radius: 3px;
	cursor: pointer;
	background-color: #d9d9d9;
	border-radius: 0 3px 3px 0;  
	border: none; 
	border-left: 1px solid #cccccc;
}
/* background-color { #ffffff; } */
.search-bar button { background-color: #ffffff; border-left: none; }
/* .search-bar button:hover { background-color: #e9e9e9; } */
.search-bar svg {
	display: inline-block; 
	margin: 0 0 0 0; 
}

.search-bar svg g { stroke: #666666; }
.search-bar button:hover svg g { stroke: #9f9f9f; }



		/* .search-bar input { border: none; } */
		/* .search-bar .cell-wrapper-input { padding-right: 0; } */
		/* .search-bar input { border-radius: 3px 0 0 3px; } */
		/* .search-bar button { border-radius: 0 3px 3px 0;  border: none; border-left: 1px solid #cccccc; } */
		.search-bar { border:1px solid #bbbbbb; border-radius: 3px; }
	
/*** END OF SEARCH-BAR ***/

.disqus-wrapper { margin-top: 40px; margin-bottom: 20px; padding-top: 0px; border-top: solid 0px #aaaaaa; }

.footer { background-color: #333333; padding-top: 10px; padding-bottom: 10px; }
.footer p, .footer p a, .footer p a:hover, .footer p a:visited { color: #bbbbbb; text-align: center; text-decoration: none; }
.footer p a { color: #9999ff; }
.footer p a:hover { color: #9999ff; text-decoration: underline; }

.wide-img { margin: 36px auto 30px auto; max-width: 900px; } /* goes in constraint div */
.wide-img img { margin: 0 0; width: 100%; }

	.img-with-caption { margin: 30px auto; }
	.img-with-caption img { margin: 0 0 0 0; width: 100%; }
	.img-with-caption p { margin: -1px auto 0 auto; font-style: italic; text-align: center; }
	
	.img-width { max-width: 800px; }

	.side-by-side { display: table; margin: 35px 0; }
	.side-by-side > div { display: table-cell; width: 50%; vertical-align: top; }
	.side-by-side > div:first-child { padding-right: 10px; }

	.side-by-side > div:last-child { padding-left: 10px; }
	.side-by-side img { width: 100%; }
	
	.side-by-side.book { background-color: #f4f2e1; padding: 24px 24px; border: solid 1px #dddddd; }
	.side-by-side.book > div > p:nth-of-type(1) { font-family: 'Merriweather'; margin-top: 0; font-weight: bold; font-size: 20px; }
	.side-by-side.book > div > p:last-child { margin-bottom: 0; }
	.side-by-side.book img { position: relative; top: 8px; }
	.side-by-side.book a, side-by-side.book a:hover, side-by-side.book a:visited { color: black; text-decoration: none; }
	.side-by-side.book a:hover { text-decoration: underline; }
	
	.header-bottom { border-top: 1px solid black; border-bottom: none; margin: 0 0 0 0; }
	
	@media (max-width: 800px) { 
		.img-width, .wide-img { padding-left: 0; padding-right: 0; } /* add this to .horz-constraint */
	}
	
	@media (max-width: 740px) { /* HERE'S WHERE THE PANEL BOX LOSES ITS RIGHT AND LEFT EDGES */
		.main-panel {
			margin: 0 0 0 0;
			border-left: none;
			border-right: none;
			outline: none;
			padding-left: 0; padding-right: 0;
		}
		
		.main-panel-edge { display: block; }
	}
	
	@media (max-width: 600px )
	{
		.horz-constraint { padding: 0 20px; }
		.side-by-side { display: block; }
		.side-by-side > div { display: block; width: 100%; }
		.side-by-side > div:first-child { padding: 0 0 0 0; }
		.side-by-side > div:last-child { padding: 0 0 0 0; }
		.side-by-side.book > div > p:nth-child(1) { text-align: center; }
		.side-by-side.book > div > p:nth-child(2) { text-align: center; }
		.side-by-side.book > div > p:last-child { margin-bottom: 20px; }
		.side-by-side.book img { display: block; max-width: 300px; margin-left: auto; margin-right: auto; top: 0; }
		.img-width, .wide-img { padding-left: 0; padding-right: 0; } /* add this to .horz-constraint */
		.img-width p { padding: 0 10px 0 10px; }
	}
	
	@media (max-width: 500px )
	{
		.horz-constraint { padding: 0 16px; }
		.img-width, .wide-img { padding-left: 0; padding-right: 0; } /* add this to .horz-constraint */
	}
	
	@media (max-width: 400px )
	{
		.horz-constraint { padding: 0 8px; }
		.img-width, .wide-img { padding-left: 0; padding-right: 0; } /* add this to .horz-constraint */
	}
	
	/*  right panel */
	
.embedded {

	box-sizing: border-box;
	padding: 14px 14px;

	background-color: #f4f2e1;
	border-style: solid;
	border-width: 1px;
	border-color: #dddddd;
}
	
.right-panel {
	float: right;
	margin: 0px 0px 35px 45px;
	max-width: none;
	width:45%; 
	position: relative;
	top: 8px;
}

.right-panel img {
	border: 1px solid #dddddd;
	width: 100%;
}

.right-panel .caption {
	margin-top: 6px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 14px;
}

.right-panel .top-caption {
	margin-bottom: 12px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
}

@media (max-width: 620px) {
.right-panel {
	float: none;
	width: initial;
	max-width: 300px;
	margin: 0px auto 25px auto;
	top: 0;
}
}

/*  YOUTUBED */

.youtube-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin-top: 30px;
	margin-bottom: 30px;
}
.youtube-wrapper iframe {
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* START BOOK BOX */

.book-box { margin-top: 30px; margin-bottom: 30px; background-color: #f4f2e1; padding: 24px 24px; border: solid 1px #dddddd; }
.book-box > div:first-child { float: right; width: 46%; padding-left: 30px; padding-bottom: 30px; position: relative; top: 5px; }
.book-box > div:first-child img { width: 100%; }
.book-box > div:last-child > p:first-child { font-family: 'Merriweather'; font-size: 20px; margin-top: 0; }
.book-box > div:last-child > p:first-child a,
.book-box > div:last-child > p:first-child a:visited,
.book-box > div:last-child > p:first-child a:hover { font-family: 'Merriweather'; font-size: 20px; text-decoration: none; color: black; }
.book-box > div:last-child > p:first-child a:hover { text-decoration: underline; }
.book-box > div:last-child > p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
.book-box > div:first-child { top: 0; margin-bottom: 20px; padding-left: 0; padding-bottom: 0; margin-left: auto; margin-right: auto; float: none; width: 100%; max-width: 300px; }
.book-box > div:last-child > p:first-child { text-align: center; }
.book-box div:last-child > p:nth-child(2) { text-align: center; }
}

.book-box > div:first-child a:hover, .book-box > div:first-child a .free:hover { text-decoration: none; }

.book-box > div:first-child .free::after 
{
  content: "FREE";
  position: absolute;
  top: 38%;
  left:0;
  color: #dd0020;
  font-size: 38px;
  font-family: 'Open sans';
  font-weight: bold;
  background-color: #ffffff;
  width: calc(100% - 30px);
  text-align: center;
  border-top: 2px solid black; border-bottom: 2px solid black;
  margin-left: 30px;
}

@media (max-width: 600px) {
.book-box > div:first-child .free::after 
{
	width: 100%;
	margin-left: 0;
}
}


/* END BOOK BOX */

/* START BLOCKQUOTE */

blockquote, .blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 30px 20px;
  padding: 25px 20px 20px 20px;
}

@media (max-width: 600px) {
blockquote, .blockquote {	margin: 30px 0px; }
}

blockquote:before, .blockquote:before {
  color: #ccc;
  font-family: serif;
  font-weight: bold;
  content: '\201C';
  font-size: 70px;
  line-height: .5;
  margin-right: 0.15em;
  margin-left: -18px;


}

blockquote p, .blockquote p {
	margin-left: 20px;
}

blockquote p:first-child, .blockquote p:first-child {
  margin-top: -50px; 
}



blockquote p:last-child, .blockquote p:last-child { margin-bottom: 0; }

/* END BLOCKQUOTE */

.link-with-blurb {
	margin-bottom: 20px;
}

.link-with-blurb p {
	margin-bottom: 0; margin-top: 0;
}



.link-with-blurb > a, .link-with-blurb > *:first-child, .link-with-blurb > a:visited {
	display:block;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
}


.more-info-box .top {

	text-align: center;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #000000;
	color: #ffffff;
	padding: 6px 10px 7px 10px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	margin: 0 0 0 0;	
	border-style: solid;
	border-color: #000000;
	border-width: 1px 1px 0px 1px;
}

.more-info-box .bottom {

	background-color: #f4f2e1;
	color:#000000;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	margin-top: 0;
	padding: 7px 14px 11px 14px;
	border-style: solid;
	border-color: #e4e2d1;
	border-width: 0px 1px 1px 1px;
}

a .more-info-box .bottom:hover, .more-info-box .bottom:hover
{
	background-color: #fcfae9; /* #e4e2d1; */
	border-style: solid;
	border-color: #d4d2c1;
	border-width: 0px 1px 1px 1px;
}

.more-info-box a:hover
{
text-decoration: none;
}


		.dropcap:first-letter, .dropcap-3:first-letter
		{ 
			font-family: 'Bitter';
			font-weight: 400;
			margin-top: -33px;
    		font-size:565%;
			float: left;
    		margin-right:6px;
			/* padding-bottom: -40px; */
			margin-bottom: -40px;
		}
		
		.dropcap-2:first-letter
		{ 
			font-family: 'Bitter';
			font-weight: 400;
			margin-top: -18px;
    		font-size:345%;
			float: left;
    		margin-right:6px;
			margin-bottom: -30px;
		}		
		
.article-header-inside-page {
	margin: 0 auto 30px auto;
	
}

.article-header-inside-page * {
	font-size: 16px;
	margin: 0 0 0 0;
	text-align: center;
}

.article-header-inside-page h1 {

	font-size: 16px;
	font-weight: bold;
	color: #000000;
	font-family: Merriweather;
}


	.note { padding: 20px 0; border-top: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa; }
	.note, .note > p { font-size: 90%; }
	.note > p:first-child { margin-top: 0; }
	.note > p:last-child { margin-bottom: 0; }
	
.cite > p:last-child { text-align: right; }
.cite > p:last-child:before { content: "—"; }

.intro, .intro > p { font-style: italic; }
.normal { font-style: normal; }

.question { font-family: Merriweather; color: #990000; }

a.tn, a.tn:visited, a.tn:hover  { margin-left: 2px; font-size: 83%; text-decoration: none; padding: 0 3px; background-color: #909090; color: #ffffff; }
a.tn:hover { background-color: #4060ee; }

.smallcaps { font-size: 90%; text-transform: uppercase; }

	.verse { margin: 30px 0; }
	.verse p { padding-left: 22px; text-indent: -22px; line-height: 1.7; margin: 0 0; }
	.verse p.from { font-style: italic; margin: 10px 0 0 40px; }