*,
:after,
:before {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

body {
	font-family: Georgia, serif;
	font-size: 1rem;
	background-attachment:fixed;
	background-color: #fff;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem;
	border-bottom: 1px solid #ccc;
}

footer {
	/*
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	*/

	display: grid;
	grid-template-columns: repeat(3, 1fr);

	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #999;
}

footer > * {
	text-align: center;
	vertical-align: top;
	padding: 5px;
}
footer > *:first-child {
	text-align: left;
}
footer > *:last-child {
	text-align: right;
}

table {
	border-collapse:collapse;
}

a {
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

details.book-list {
	padding: 0;
	border-bottom: 1px solid #eee;

	background-color: #fff;
}
details.book-list summary {
	padding: 0.5rem 5px;
	outline: none;

	list-style: none; /* remove default arrow */
}
details.book-list summary:hover {
    background-color: #eee;
    cursor: pointer;
}
details.book-list summary::-webkit-details-marker {
	display: none; /* for Chrome (and other webkit ?) */
}
details.book-list[open] summary {
	background-color: #ccc;
}
details.book-list[open] summary:after {
	content: " (\2193)";
}
details.book-list > div {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
details.book-list > div > * {
	padding: 0.4rem;
}
details.book-list > div > a:hover {
	background-color: #ddd;
	text-decoration: none;
}

li {
	padding: 0.5rem 0;
}

.full_bible_book_name_list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.ayat {
	vertical-align:text-top;
	padding: 5px;
	border: 1px solid #ccc;
	color: #000;
	background-color: #fff;
}

.ayat_pilihan {
	vertical-align:text-top;
	padding: 5px;
	border: 1px solid #ccc;

	color: #000;
	background-color: #fff;
	background-image: linear-gradient(#02c6ff, #ffa4f8, #ffff99);
}

.cari_ayat {
	vertical-align:text-top;

	color: #000;
	background-color: #fff;
}

.cari_ayat:hover {
	vertical-align:text-top;

	color: #f00;
	background-color: #fff;
}

.top-ads-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	margin: 0.5rem 0;
	padding: 0;
	border: 1px solid #ccc;
}
.top-ads-container > * {
	display: block;
	text-align: center;
	height: 100%;
	padding: 5px;
	
	/*flex: 1 1 25%; /* flex-grow, flex-shrink and flex-basis */
}

.aligncenter {
	text-align: center;
}
.alignright {
	text-align: right;
}

.tabular_grid {
	column-gap: 0;
	row-gap: 0;
}
.tabular_grid > * {
	padding: 0.3rem;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.tabular_grid > a:hover {
	display: block;
	text-decoration: none;
	box-shadow: 1px 1px 5px #666;
}

.thinborder {
	border: 1px solid #ccc;
}
.pad5 {
	padding: 5px;
}
.pad10 {
	padding: 10px;
}

.container-verse-list {
	display: grid; 

	/* grid-template-columns: repeat(auto-fit, minmax(3.0rem, 1fr)); */
	/* use auto-fill instead of auto-fit, to make other chapters' verse list aligned */
	grid-template-columns: repeat(auto-fill, minmax(3.0rem, 1fr));
	grid-gap: 0px;
}
.container-verse-list > * {
	display: block;
	text-align: center;
	padding: 0.5rem 0;
}

.input_cari_ayat {
	width: 100%;
	padding: 5px;
}
.button_cari_ayat {
	padding: 6px 15px;
	border-radius: 3px;
	border-color: #4169e1;
	background-color: #00f;
	color: #fff;
	font-weight: bold;
}
.button_cari_ayat:hover {
	color: #ff0;
	border-radius: 5px;
}

.adsense_box {
	display: block;
	margin: auto auto;
	padding: 1rem 0;
	text-align: center;
}

.chapter-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(3.0rem, 1fr));

	margin: 0.5rem 0;
	border-top: 1px solid #ccc;
}
.chapter-list > * {
	padding: 5px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	text-align: center;
}
.chapter-list > a:hover {
	text-decoration: none;
	box-shadow: 1px 1px 4px #666;
}

.current-book-name {
	padding: 0.5rem 0;
	font-weight: bold;
	text-align: center;
}

.current-chapter-number {
	background-color: #ccc;
}
.pericope-full-width {
	grid-column: 1 / span 3;
	background-color: #000; 
	color: #fff;
}
.search-form-google {
	padding: 0;
	margin: 0.5rem 5px;
	border-bottom: 1px solid #ccc;
	border-radius: 8px;
}
.search-form-keywords {
	padding: 5px 0;
	margin: 0.5rem 5px;
	border-bottom: 1px solid #ccc;
	border-radius: 8px;
}

.welcome_introduction {
	padding: 0.5rem 5px;
	text-align: left;
}

.other-bible-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 10px;
}
.other-bible-links > * {
	text-decoration: none;
	padding: 5px 10px;
	border: 1px solid #aaa;
	border-radius: 10px;
	text-align: center;
}

.single-chapter-all-verses-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.single-chapter-all-verses-content > * {
	padding: 5px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.select-bible-translation {
	padding: 5px;
	font-family: sans-serif; /* to keep hangul same height in Chrome only */
}

.search-keywords-container-grid {
	display: grid;
	grid-template-columns: min-content minmax(100px, 1fr) minmax(100px, 1fr) max-content;
	grid-gap: 3px;
	padding: 5px;
}
.search-keywords-container-grid > * {
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

/* NOTE: all elements inside @media must already predefined above */ 
@media only screen and (max-width: 640px) {
	header {
		flex-flow: column nowrap;
	}

	footer {
		/* flex-flow: column nowrap; */
		grid-template-columns: 1fr;
	}

	footer > * {
		text-align: center !important;
	}

	
	.full_bible_book_name_list {
		flex-flow: column nowrap;
	}

	.search-keywords-container-grid {
		grid-template-columns: 1fr;
	}

	/* show only 2 translations instead of 3 */
	/* TODO: tested WORKING, but not ready to change lihatPasal yet 
	.single-chapter-all-verses-content {
		grid-template-columns: repeat(2, 1fr);
	}
	.single-chapter-all-verses-content > *:nth-child(3n) {
		display:none;
	}
	.pericope-full-width {
		grid-column: 1 / span 2;
	}
	*/
}