/* --- GENERAL: --- */

body 			{	margin:			5px;
				padding:		0;
				font-family:		arial, helvetica, sans-serif;
				font-size:		12pt;
				background-color:	hsl(30, 40%, 98%);	}

div			{	box-sizing:		border-box;		}

iframe			{	border-width:		0px;			}

a 			{	text-decoration:	none;			}
a:link			{	color:			hsl(206, 80%, 48%);	}
a:visited		{	color:			hsl(206, 90%, 38%);	}
a img			{	border:			0;			}

td			{	line-height:		1.5;			}

p			{	margin:			18pt auto;
				overflow:		hidden;			}

ul, ol			{	padding-left:		20px;			}

li			{	margin:			10px 0;			}

sup			{	line-height:		12pt;			}

form			{	margin:			0;			}

::placeholder		{ 	color:			hsl(0, 0%, 67%); 
				opacity:		1;			}

hr			{	border:			0;
				border-top:		3px solid hsl(213, 100%, 28%);
				border-radius:		2px;
				margin:			50px 0;			}

blockquote		{	background-color:	hsl(30, 14%, 97%);
				margin:			50px calc(10% - 30px);
				padding:		20px;
				border-radius:		15px;
				text-align:		left;
				clear:			both;
				overflow:		auto;			}


/* --- CONTENT: --- */

main			{	display:		block;
				text-align: 		center;
				max-width:		932px;
				width:			932px;
				min-width:		310px;
				margin:			5px auto;
				padding:		5px;
				box-sizing:		border-box;
				line-height: 		1.5;			}

.content		{	text-align:		center;			}

.content, article	{	background-color:	white;
				max-width:		922px;
				margin:			0 auto;
				padding:		15px 15px 50px;
				border:			4px solid hsl(213, 100%, 28%);
				border-radius:		15px;
				box-sizing:		border-box;
				overflow:		auto;			}


table.maintable { width: 100%; padding: 0; border-spacing: 0; background-color:	white; }
table.maintable > tbody > tr > td { background-color: white; padding: 0px; }
table.maintable > tbody > tr:nth-child(1n+2) > td { padding: 10px 0; }


/* Topic indexes */

.topic-header		{	font-size:		15pt;
				font-weight:		bold;
				background-color:	hsl(45, 95%, 70%);
				width:			90%;
				margin:			25px auto;
				padding:		10px;
				border-radius:		12px;
				box-sizing:		border-box;		}

.article-topics		{	max-width:		640px;
				margin:			0 auto;
				text-align:		center;			}

.article-topics
.topic-header		{	width:			100%;
				margin:			20px auto;		}

ul.topic-list		{	padding-left:		0;
				margin:			5px auto 40px;
				column-count:		2;
				column-width:		260px;			}

.topic-list li		{	display:		block;
				margin:			0px;
				padding:		10px 0px;		}

.topic-list li a	{	display:		block;
				width:			220px;
				margin:			2px auto;
				padding:		8px 12px;;
				background-color:	hsl(213, 55%, 43%);
				font-size:		14pt;
				text-align:		left;
				color:			white;
				border-radius:		15px;
				box-sizing:		border-box;
				border:			2px solid transparent;
				break-inside: 		avoid-column;		}

/* Article lists */

.article-list		{	text-align:		left;
				display:		table;
				margin:			0 auto;
				padding:		5px;
				max-width:		650px;			}

.article-list li	{	display:		block;
				margin:			0 0 20px;		}

.article-list li a	{	font-weight:		bold;
				font-size:		13pt;			}


/* Articles */

article 		{	padding:		15px 10% 50px;	/* legacy compatibility */
				padding:		15px calc(18% - 40px) 50px;
				text-align:		left;			}

h1			{	font-size:		22pt;
				font-weight:		normal;
				text-align:		center;
				margin:			50px auto 75px;
				line-height:		1.2;			}

.subtitle		{	font-size:		18pt;
				font-weight:		normal;
				margin:			10px auto 40px;
				line-height:		1.2;
				text-align:		center;
				display:		block;			}

.byline			{	text-align:		center;
				font-size:		13pt;
				font-weight:		bold;
				margin:			-50px auto 50px;	}

h2			{	font-size:		17pt;
				font-weight:		normal;
				margin:			20px 0;			}

h3			{	font-size:		14pt;
				font-weight:		bold;  
				margin:			10px 0;
				color:			hsl(0, 0%, 20%);	}
				
h4			{	font-size:		14pt;
				font-weight:		normal;
				margin:			10px 0;			}

h5			{	font-size:		12pt;
				font-weight:		bold;
				margin:			10px 0;
				color: 			hsl(0, 0%, 20%);	}

h6			{	font-size:		12pt;
				font-weight:		normal;
				margin:			10px 0;
				text-decoration:	underline;		}

/* sidebars */

.sidebar-left,
.sidebar-right		{	display:		inline-block;
				text-align:		center;
				white-space:		nowrap;
				color:			hsl(220, 100%, 28%);
				background-color:	hsl(47, 53%, 97%);
				font-size:		16pt;
				font-style:		italic;
				max-width:		380px;
				min-width:		300px;
				padding:		20px 15px;
				box-shadow: 		5px 5px 15px hsl(0, 0%, 63%);
				box-sizing:		border-box;
				overflow:		hidden;			}

.sidebar-left		{	float:			left;
				margin:			15px 40px 25px -60px;
				transform:		rotate(-2deg);		}
				
.sidebar-right		{	float:			right;
				margin:			15px -60px 25px 30px;
				transform:		rotate(2deg);		}

.sidebar-left::before,
.sidebar-right::before	{	content:		"\“";
				position:		relative;
				left:			-1px;
				top:			-2px;			}
.sidebar-left::after,
.sidebar-right::after	{	content:		"\”";
				position:		relative;
				left:			-2px;
				top:			-1px;			}

.sidebar-left::before,
.sidebar-left::after,
.sidebar-right::before,
.sidebar-right::after	{	font-family:		serif;
				font-weight:		bold;
				color:			hsl(206, 54%, 60%);
				font-size:		24pt;
				line-height:		10pt;
				vertical-align:		sub;			}

p.wrap			{	overflow:		visible;		}

/* tables */

.article-table		{	border:			2px solid hsl(220, 43%, 77%);
				border-collapse:	collapse;
				margin:			30px auto;		}

.article-table td	{	border:			2px solid hsl(220, 43%, 77%);
				padding:		10px;			}

.article-table th	{	border:			2px solid hsl(220, 43%, 77%);
				padding:		10px;
				text-align:		center;
				font-weight:		bold;			}

/* topic links */

.topic-tags		{	display:		table;
				list-style-type:	none;
				margin:			50px auto 0;
				padding:		0;
				text-align:		center;			}

.topic-tags li		{	display:		inline-block;
				margin:			10px;			}

.topic-tags a		{	display:		inline-block;
				color:			white !important;
				background-color:	hsl(213, 45%, 50%);
				padding:		4px 15px;
				border-radius:		50px;
				vertical-align:		middle;			}

a.section-link		{	font-size:		14pt;
				font-weight:		bold;
				text-align:		center;
				display:		block;
				max-width:		300px;
				margin:			50px auto 0;
				padding:		10px;
				border:			2px solid hsl(213, 45%, 50%);
				border-radius:		5px;			}

.section-link ~
.section-link		{	margin:			0 auto;			}

/* Shop Buttons */

.add-to-cart		{	background-color:	hsl(0, 47%, 47%);
				color:			white;
				font-size:		12pt;
				margin:			0 0 15px;
				padding:		6px 16px;
				border:			none;
				border-radius:		20px;
				cursor:			pointer;		}

.shop-nav-button	{	display:		inline-block;
				background-color:	hsl(213, 100%, 28%);
				color:			white !important;
				margin:			20px;
				padding:		5px 16px;
				border-radius:		20px;			}

/* Media Lists */

.media-list		{	padding:		0;			}

.media-list li		{	display:		inline-block;
				vertical-align:		top;
				text-align:		center;
				margin:			22px;			}

.media-list img		{	width:			150px;
				max-width:		90%;
				height:			auto;
				margin:			5px;
				vertical-align:		top;			}

.media-list img,
.book-cover		{	box-shadow: 		0px 0px 20px hsl(0, 0%, 80%);	}



/* --- HEADER: --- */

header			{	text-align: 		center;
				width: 			932px;
				max-width:		932px;
				min-width:		310px;
				margin:			10px auto;		}

/* Title bar */

.title-bar		{	display:		flex;
				justify-content:	space-between;
				align-items:		center;
				width:			100%;			}

.logo			{	width:			60px;
				display:		inline-block;		}
				
.logo-img		{	width:			44px;
				height:			80px;
				display:		block;
				margin:			0 auto;
				transition:		.5s;			}

.title			{	text-align:		center;
				display:		inline-block;
				width:			700px;
				flex-grow:		1;			}
				
.title a		{	display:		inline-block;
				width:			90%;
				max-width:		600px;
				margin:			0 auto;			}

.title-img		{	width: 			600px;
			 	max-width:		600px;
			 	height:			auto;
			 	margin:			0 auto;
			 	display:		block;
				transition:		.1s;			}

.title-mobile		{	text-align:		center;
				display:		none;			}

.title-img-mobile	{	width:			180px;
				height:			61px;
				margin:			0 auto;
				display:		block;
				margin:			0 auto;			}

.cart			{	width:			60px;
				display:		inline-block;		}

.cart-img		{	width:			36px;
				height:			36px;
				display:		block;
				margin:			0 auto 5px;
				transition:		.1s;			}


/* Menu bar */

nav			{	display:		flex;
				justify-content:	center;
				align-items:		center;
				width:			100%;
				margin:			5px auto;		}

.header-menu		{	display:		flex;
				flex-wrap:		wrap;
				flex-basis:		70%;
				justify-content:	center;
				align-items:		center;
				flex-grow:		1;			}


.header-menu ul,
.header-menu-section	{	display:		flex;
				margin:			0;
				padding:		0;
				justify-content:	center;
				align-items:		center;
				flex-grow:		1;
				list-style-type:	none;			}

.header-menu-section a	{	margin:			5px;			}

.header-menu li		{	display:		inline-block;
				flex-grow:		1;
				margin:			5px;			}
				
@media only screen {

.header-menu li		{	display:		flex;			}

}

.header-menu a		{	flex-grow:		1;
				height:			36px;
				line-height:		32px;
				padding:		0px 15px;
				border:			2px solid transparent;
				border-radius:		15px;
				font-size:		13pt;
				font-weight:		bold;
				text-decoration:	none;
				text-align:		center;
				display:		inline-block;
				box-sizing:		border-box;		}

.shop-page .shop-button, .articles-page .articles-button, .books-page .books-button, .counseling-page .counsel-button,
.gallery-page .art-button, .donate-page .donate-button	{ border: 2px solid black !important; } /* Current section button highlight */


/* Section colors */

.shop-page .content,
.shop-page article,
.shop-page hr		{	border-color:		hsl(355, 45%, 50%);	}
.shop-button		{	background-color:	hsl(355, 60%, 52%);		color:	white !important;	}

.articles-page .content,
.articles-page article,
.articles-page hr	{	border-color:		hsl(213, 50%, 40%);	}
.articles-button	{	background-color:	hsl(213, 65%, 38%);		color:	white !important;	}

.books-page .content,
.books-page article,
.books-page hr		{	border-color:		hsl(155, 35%, 35%);	}
.books-button		{	background-color:	hsl(155, 80%, 32%);		color:	white !important;	}

.counseling-page .content,
.counseling-page article,
.counseling-page hr	{	border-color:		hsl(310, 45%, 40%);	}
.counsel-button		{	background-color:	hsl(310, 50%, 42%);		color:	white !important;	}

.gallery-page .content,
.gallery-page article,
.gallery-page hr	{	border-color:		hsl(28, 80%, 55%);	}
.art-button		{	background-color:	hsl(28, 90%, 55%);		color:	white !important;	}

.donate-page .content,
.donate-page article,
.donate-page hr		{	border-color:		hsl(40, 85%, 75%);	}
.donate-button 		{	background-color:	hsl(42, 100%, 65%);		color:	black !important;	}

.general-page .content,
.general-page article,
.general-page hr	{	border-color:		hsl(213, 45%, 50%);	}


/* Search bar */

.search			{	min-width:		250px;
				background-color:	hsl(213, 50%, 50%);
				color:			white;
				flex-grow:		2;
				height:			36px;
				margin:			5px;

				border-radius:		15px;
				text-align:		center;
				display:		inline-block;
				box-sizing:		border-box;		}

.search-form 		{	margin:			5px 0 0;		}

.search-box		{	width:			70%;
				max-width:		300px;
				min-width:		100px;
				padding:		2px 10px;
				margin:			0 10px 0 5px;
				border:			none;
				border-radius:		4px;
				height:			24px;
				vertical-align:		middle;
				box-sizing:		border-box;
				color:			black;
				font-family:		arial, helvetica, sans-serif;
				font-size:		12pt;
				font-weight:		bold;			}

.search-box:focus	{	outline:		none;			}

.search-button		{	background-image:	url("https://www.naturalchild.org/images/header/search-button.png");
				height:			24px;
				width:			24px;
				background-size:	24px 24px;
				vertical-align:		middle;
				margin:			1px;
				cursor:			pointer;
				color:			transparent;
				background-color:	transparent;
				border:			none;
				transition:		.1s;			}


/* --- FOOTER: --- */

footer			{	width: 			930px;
				max-width:		930px;
				min-width:		310px;
				margin:			15px auto;
				text-align: 		center;
				clear:			both;			}

.share-buttons		{	margin:			0 auto 30px;
				font-weight:		bold;			}
.share-buttons a	{	margin:			5px;			}
.share-buttons img	{	width:			90px;			}

.footer-links 		{	margin:			30px auto;
				text-align:		center;
				max-width:		700px;			}

.footer-links a		{	display:		inline-block;
				margin:			5px;			}

.footer-links img	{	width:			300px;
				height:			100px;			}

.footer-menu		{	display:		inline-block;
				margin:			0;
				padding:		0;			}

.footer-menu li		 {	display:		inline-block;
				margin:			5px;
				padding:		0;			}

.footer-menu a		{	height:			36px;
				line-height:		36px;
				margin:			0;
				padding:		0 15px;
				border-radius:		15px;
				font-size:		13pt;
				font-weight:		bold;
				text-decoration:	none;
				text-align:		center;
				display:		inline-block;
				background-color:	hsl(213, 50%, 50%);
				color:			white !important;
				box-sizing:		border-box;		}

.footer-slogan		{	font-size:		18pt;
				margin:			30px 5px;		}

.footer-donate		{	font-size:		14pt;
				margin:			30px 5px;		}

.footer-copyright	{	font-size:		9pt;
				margin:			30px 5px;		}


/* --- CUSTOM STYLES: --- */

.center			{	text-align:		center;
				margin-left:		auto;
				margin-right:		auto;
				display:		block;			}

.nobr			{	white-space:		nowrap;			}

.float-left,
.float-left-large,
.float-left-small	{	float:			left;
				margin:			5px 15px 10px 1px;	}

.center-link		{	display:		table;
				margin:			20px auto;
				font-size:		16pt;			}

.short-quote		{	text-align:		center;
				max-width:		500px;
				margin:			30px auto;		}

.link-list		{	padding:		0;			}

.link-list li		{	display:		inline-block;
				margin:			10px 15px;
				font-weight:		bold;			}


/* --- HOVER EFFECTS: --- */

@media (hover: hover) {

a:hover			{	color:			hsl(0, 60%, 50%);	}

a.section-link:hover	{	border-color:		hsl(0, 60%, 50%);	}

.logo-img:hover		{	transform:		rotate(-8deg);		}

.title-img:hover	{	filter:			saturate(1.2);		}

.cart-img:hover		{	width:			40px;
				height:			40px;			}
				
.search-button:hover	{	width:			26px;
				height:			26px;
				background-size:	26px 26px;
				margin:			0;			}


.header-menu li a:hover,
.footer-menu li a:hover,
.topic-list li a:hover,
.topic-tags li a:hover,
.home-shop h2 a:hover,
.home-articles h2 a:hover,
.shop-nav-button:hover,
.add-to-cart:hover	{	box-shadow:		0 0 10px hsl(50, 100%, 65%);	}

/*a			{	display:		inline-block;		}
*/

}

@media (hover: none) {

a, input		{	-webkit-tap-highlight-color: transparent;		}

a:active		{	color:			hsl(0, 60%, 50%);		}

a.section-link:active	{	border-color:		hsl(0, 60%, 50%);		}

.logo-img:active	{	transform:		rotate(-8deg);			}

.title-img-mobile:active,
.title-img:active	{	filter:			saturate(1.2);			}

.cart-img:active	{	width:			40px;
				height:			40px;				}
				
.search-button:active	{	width:			26px;
				height:			26px;
				background-size:	26px 26px;
				margin:			0;				}

.header-menu li a:active,
.footer-menu li a:active,
.topic-list li a:active,
.topic-tags li a:active,
.home-shop h2 a:active,
.home-articles h2 a:active,
.shop-nav-button:active,
.add-to-cart:active	{	box-shadow:		0 0 10px hsl(50, 100%, 65%);	}

}