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

html {
	box-sizing: border-box;
}

body {
	font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
	font-size: 1rem;
	/*background-image:url(images/pattern/3d_black_gray_soft.gif); */
	/*background-image: url(<?php echo $pattern_filename;	?>); */
	background-attachment:fixed;
	background-color: #fff;
	margin: 0 2px;
	padding: 0;
	line-height: 1.4;
}

header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}

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

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

footer > * {
	vertical-align: top;
	padding: 10px;
}

footer > *:last-child {
	text-align: right;
}

/* 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;
	}

	footer > * {
		text-align: center;
	}

	.full_bible_book_name_list {
		flex-flow: column nowrap;
	}
}

table {
	border-collapse:collapse;
}

a {
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

.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);
}

.link_ayat_random {
	color:#ff0000;
	text-decoration:none;
}

.link_ayat_random:hover {
	color:#ff0000;
	text-decoration:underline;
}

.cari_ayat {
	vertical-align:text-top;

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

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

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

.putih {
	color:#FFFFFF;
}

div#fb {
	text-align: right;
}

iframe#fb_like {
	text-align: right;
	float: right;
}

/* 20170224 : add floating AdSense on the right side */
.body_coloumns {
   width: 1150px; /* total width 3 columnds + margin + padding */
   height: 100%;
   margin: 0 auto; /* make content in center aligned */
}

.center_content {
   width: 1000px;
   height: 100%;
   position:static;
   margin: 0 auto; /* left and right gap */
}
.floating_right_wrapper {
   position: fixed;
   top: 5px; /* top gap */

   /* position from whole window LEFT 50% + margin left */
   left:50%;
   margin-left: 500px; /* should be 500px but add 5px as gap */

   width: 150px;
   /* background-color: blue; */
   /* HOW to make position: fixed ? */
}

.top-ads-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	margin: 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 */
}

.tbl_grid {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.tbl_grid td {
	margin: 0;
	padding: 5px;
	border: 1px solid #666;
	border-spacing: 10px;
	border-collapse:collapse;
}

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

.tabular_grid {
	column-gap: 0;
	row-gap: 0;
}
.tabular_grid > * {
	padding: 5px;
	border: 1px solid #ccc;
}

.thinborder {
	border: 1px solid #ccc;
}
.pad5 {
	padding: 5px;
}
.pad10 {
	padding: 10px;
}
/* .book_list > * {
	height: 5rem;
} */

.chapter_list_item {
	padding: 5px;
	border: 1px solid #ccc;
	text-align: center;
}

.input_cari_ayat {
	width: 100%;
}
.button_cari_ayat {
	padding: 6px 27px;
	border-radius: 3px;
	border-color: #3079ED;
	background-color: #4D90FE;
	color: #fff;
}

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

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