/*************************************************************************************/
/*************************************************************************************/
/***                                                                               ***/
/***                              GRACE BAPTIST CHURCH                             ***/
/***                             Created by Dustin Beck                            ***/
/***                                  April 1, 2020                                ***/
/***                                                                               ***/
/*************************************************************************************/
/*************************************************************************************/

:root
{

	--color-soft-yellow:       #FFFFCC;
	--color-page-bg-blue:      #035FAA;
	--color-dk-blue-mtn-shdw:  #274663;
	--color-lt-gray:           #CCCCCC;
	--color-lt-blue-mtn-top:   #A0C3EC;
	--prim-font-size:          13px;
	--font-size-lg:            18px;
	--font-size-title:         20px;
	--gen-padding:             16px;
}


/********DEBUG*******************DEBUG*******************DEBUG*********************/

.db_debug_borderBlack
{
	border-style:        solid;
	border-width:        2px;
	border-color:        #000000;
}

.db_under_construction
{
	background-color:    var(--color-soft-yellow);
	color:               #000000;
	text-align:          center;
	font-weight:         bold;
}

/******** END DEBUG ********** END DEBUG ***********END DEBUG *********************/



/**************** BODY ****************/

body.db_pageBody
{
	background-image:    url('../gospel_image/wallpaper.jpg');
	background-color:    var(--color-page-bg-blue);
	background-repeat:   no-repeat;
	background-size:     contain;
	max-width:           1028px;                               /*max width of the page content...nothing to do with background*/
	margin:              auto;                                 /*centers the content on the page...nothing to do with background*/
}

.db_pageBody
{
	background-color:    #D0FEFF; /*blue side of white*/
}

.db_gen_border
{
	border-color:        #000000;
	border-style:        solid;
	border-width:        1px;
	font-size:           var(--prim-font-size);
	border-collapse:     collapse;
	padding:             3px;
}

.admin_login_container
{
	border-style:        solid;
	border-width:        2px;
	border-color:        #000000;
	width:               60%;
	margin:              auto;
	min-width:           200px;
	background-color:    #FDFFCC;
	padding-left:        24px;
	padding-right:       24px;
	padding-top:         24px;
	padding-bottom:      24px;
}

.admin_login_interior_header
{
	padding-top:         var(--gen-padding);
}

.admin_login_user_pass_section
{
	padding-top:         var(--gen-padding);
}

.admin_login_form_submit_section
{
	padding-top:         var(--gen-padding);
}

/************** END BODY **************/


/************** HYPERLINKS **************/
a:link.db_text_link 
{
	color:               ltgray; 
	text-decoration:     underline;
}

a:visited.db_text_link 
{
	color:               ltgray; 
	text-decoration:     underline;
}

a:hover.db_text_link 
{
	color:               ltgray;  
	text-decoration:     none;
}

a.w3-btn:hover      /* Nav bar menu hover */
{
	background-color:    var(--color-dk-blue-mtn-shdw);
	border-style:        solid;
	border-width:        2px;
	border-color:      	 var(--color-lt-blue-mtn-top);
	color:               var(--color-lt-blue-mtn-top);
}

a.w3-button:hover     /* Drop down menu hover */
{
	background-color:    var(--color-lt-blue-mtn-top)!important;
}

a:active.db_text_link 
{
	color:               ltgray; 
	text-decoration:     none;
}

/************ END HYPERLINKS ************/


/**************** GENERAL PURPOSE CLASSES ****************/
.db_center
{
	text-align:          center;
}

.db_quarter_width
{
	width:               25%;
}

.db_bold
{
	font-weight:         bold;
}

.db_italic
{
	font-style:          italic;
}

.db_bar_color
{
	border-top-color:    #60738A!important;   /* 5F748ALighter version blue from copyright row bar */
	border-bottom-color: #60738A!important;  /* 5F748ALighter version blue from copyright row bar */
}

input
{
	color:               #51657F;
}

/************* END GENERAL PURPOSE CLASSES ***************/


/**************** ROW 1:  INFO HEADER ****************/
.db_header_row1
{
	display:             inline-block;
	background-color:    var(--color-dk-blue-mtn-shdw);
	color:               var(--color-lt-gray);
	font-size:           var(--prim-font-size);
}

.db_header_row1_phone
{
	display:             inline-block;
	background-color:    #000000; /* black */
	color:               inherit; /* pulls from .db_header_row1 class */
}

.db_header_row1_addr
{
	display:             inline-block;
	background-color:    var(--color-dk-blue-mtn-shdw);
}

.db_header_row1_member
{
	display:             inline-block;
	background-color:    var(--color-dk-blue-mtn-shdw);
	color:               red;
	border-color:        red;
	border-width:        1px;
	border-style:        solid;
	padding-right:       var(--gen-padding);
	padding-left:        var(--gen-padding);
}

@media (max-width: 10000px)
{
	.db_smedia_header_row1
	{
		display:             inline-block;
		background-color:    #000000;
		color:               var(--color-lt-gray);
		text-align:          center;
		font-size:           var(--prim-font-size);
	}

	.db_hope_banner
	{
		width:               820px;  /*full width is 820px and height is 312px*/
	}

	.db_gospel_ill_IMG
	{
		width:               288px;
	}

	.db_gospel_spacer_horizontal
	{
		display:             inline;
	}

	.db_gospel_spacer_vertical
	{
		display:             none;
	}
}

@media (max-width: 1050px)
{
	.db_hope_banner
	{
		width:               620px;  /*full width is 820px and height is 312px*/
	}
}

@media (max-width: 830px)
{
	.db_gospel_ill_IMG
	{
		width:             260px;
	}
}

@media (max-width: 820px)
{
	.db_hope_banner
	{
		width:               520px;  /*full width is 820px and height is 312px*/
	}

	.db_gospel_ill_IMG
	{
		width:               220px;
	}

	.db_gospel_spacer_horizontal
	{
		display:             inline;
	}

	.db_gospel_spacer_vertical
	{
		display:             none;
	}

}

@media (max-width: 720px)
{
	.db_hope_banner
	{
		width:               470px;  /*full width is 820px and height is 312px*/
	}

	.db_gospel_ill_IMG
	{
		width:               220px;
	}

}

@media (max-width: 660px)
{
	.db_gospel_ill_IMG
	{
		width:               288px;
	}

	.db_gospel_spacer_horizontal
	{
		display:             none;
	}

	.db_gospel_spacer_vertical
	{
		display:             inline;
	}

}

@media (max-width: 610px)
{
	.db_smedia_header_row1
	{
		display:             inline-block; 
		background-color:    #000000;
		color:               var(--color-lt-gray); /* light grey */
		text-align:          left;
		padding-left:        var(--gen-padding);
		font-size:           var(--prim-font-size);
	}

	.db_hope_banner
	{
		width:               420px;  /*full width is 820px and height is 312px*/
	}

	.db_gospel_ill_IMG
	{
		width:               288px;
	}

	.db_gospel_spacer_horizontal
	{
		display:             none;
	}

	.db_gospel_spacer_vertical
	{
		display:             inline;
	}
}

@media (max-width: 450px)
{
	.db_hope_banner
	{
		width:               375px;  /*full width is 820px and height is 312px*/
	}

	.db_gospel_img_tears
	{
		width:             50%;
	}

	.db_gospel_ill_IMG
	{
		width:             240px;
	}

	.db_gospel_spacer_horizontal
	{
		display:             none;
	}

	.db_gospel_spacer_vertical
	{
		display:             inline;
	}

}

@media (max-width: 400px)
{
	.db_hope_banner
	{
		width:               325px;  /*full width is 820px and height is 312px*/
	}
	.db_gospel_img_tears
	{
		display:             none;
	}

}



/************** END ROW 1:  INFO HEADER **************/



/**************** ROW 2:  Church Logo / Navigation Bar ****************/
@media (max-width: 10000px)
{
	.db_header_row2
	{
		display:             inline-block;
		background-color:    var(--color-lt-blue-mtn-top); /* City-headframe picture:  light blue off top of mountains on left side */
	}

	.db_church_name_section_row2
	{
		text-align:          center;
		min-width:           378px;
	}

	h2.db_church_name_logo_row2
	{
		color:               #FFFFFF;
		text-shadow:         3px 2px 0 #444;  /* offset-x | offset-y | blur-radius | color */
		word-wrap:           none;
	}

	.db_nav_bar_row2
	{
		background-color:    #77A9E8; /* From top mountain on bottom right of page */
		width:               650px; /*remove for full width*/
		color:               #FFFFFF;
	}
	
	.db_gospel_img_tears
	{
		height:              250px;
		margin-top:          5px;
		margin-bottom:       5px;
		margin-left:         5px;
		margin-right:        5px;
	}
}

@media (max-width: 968px) /*was 875*/
{
	.db_header_row2
	{
		display:             inline-block;
		background-color:    var(--color-lt-blue-mtn-top);
		max-width:           968px; /*was 875px*/
	}

	.db_church_name_section_row2
	{
		display:             block;
		text-align:          center;
		width:               100%;
		height:              100px;
	}

	h2.db_church_name_logo_row2
	{
		color:               #FFFFFF;
		text-shadow:         3px 2px 0 #444;
		word-wrap:           none;
		text-align:          center;
	}

	.db_nav_bar_row2
	{
		display:             inline-block;
		background-color:    #77A9E8; /* From top mountain on bottom right of page */
		width:               100%;
		color:               #FFFFFF;
	}

	.db_gospel_img_tears
	{
		height:              200px;
		margin-top:          5px;
		margin-bottom:       5px;
		margin-left:         5px;
		margin-right:        5px;
	}
}

@media (max-width: 609px)
{
	.db_header_row2
	{
		display:             inline-block;
		background-color:    var(--color-lt-blue-mtn-top);
		max-width:           968px; /*was 875px*/
	}

	.db_church_name_section_row2
	{
		display:             block;
		text-align:          center;
		width:               100%;
		height:              100px;
	}

	h2.db_church_name_logo_row2
	{
		color:               #FFFFFF;
		text-shadow:         3px 2px 0 #444;
		word-wrap:           none;
		text-align:          center;
	}

	.db_nav_bar_row2
	{
		display:             block;
		background-color:    #77A9E8; /* From top mountain on bottom right of page */
		width:               100%;
		color:               #FFFFFF;
	}

	.db_gospel_img_tears
	{
		height:              150px;
		margin-top:          5px;
		margin-bottom:       5px;
		margin-left:         5px;
		margin-right:        5px;
	}	
}

.db_nav_dd_row2
{
	color:               #E79933; /* Same color as menu nav background */
	background-color:    var(--color-dk-blue-mtn-shdw);
	font-weight:         bold;
	color:               var(--color-lt-blue-mtn-top);
	border-style:        solid;
	border-radius:       25px;
	border-width:        2px;
	border-color:        var(--color-lt-blue-mtn-top); /* light blue from church name section */
	padding:             10px;
	box-shadow:          2px 2px 4px #888888, 5px 5px 4px #8888CF, 10px 10px 4px #888888; /*box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;*/
}

/************** END ROW 2:  Church Logo / Navigation Bar **************/



/**************** FOOTER ROW ****************/
@media (max-width: 10000px)
{
	.db_footer_section
	{
		display:             inline-block;
		width:               100%;
	}

	.db_footer
	{
		display:             float;
		color:               #8090A2; /* Lighter blue from copyright bar */
		font-size:           var(--prim-font-size);
		width:               25%; /* Even spacing of 25% for each of the four sections */
		min-width:           200px; /* Things start word wrapping badly if you go less than 200px */
		word-wrap:           break-word; /* This is only needed for content of the boxes, not the headers */
		clear:               both;
	}

}

@media (max-width: 805px)
{
	.db_footer_section
	{
		display:             block;
		width:               100%!important;
	}

	.db_footer
	{
		display:             block!important;
		color:               #8090A2; /* Lighter blue from copyright bar */
		font-size:           var(--prim-font-size)!important;
		width:               100%!important; /* Even spacing of 25% for each of the four sections */
		min-width:           200px!important; /* Things start word wrapping badly if you go less than 200px */
		word-wrap:           break-word!important; /* This is only needed for content of the boxes, not the headers */
		border-style:        none!important; /* Remove borders so no borders are showing for some boxes on the sides of the mobile screens */
	}

}

div .db_footer_headers
{
	display:             inherit;
	background-color:    #5F748A; /* Lighter version blue from copyright row bar */
	color:               var(--color-lt-gray);
	font-size:           16px;
	padding-left:        var(--gen-padding);
	padding-right:       var(--gen-padding);
	padding-bottom:      2px;
	padding-top:         2px;
	word-wrap:           none; /* Don't allow word wrap to happen */
	width:               100%;
}

/************** END FOOTER ROW **************/


/**************** COPYRIGHT ROW ****************/
.db_copyright_row
{
	display:             float;
	background-color:    var(--color-dk-blue-mtn-shdw); /* dark blue - pulled from mountain shadow of background image (mid-bottom right side) */
	color:               var(--color-lt-gray); /* light grey */
	border-width:        0px;
}

/**************** COPYRIGHT ROW ****************/



/*************************************************************************************/
/*************************************************************************************/
/***                                                                               ***/
/***                                  BODY SECTION                                 ***/
/***                                                                               ***/
/*************************************************************************************/
/*************************************************************************************/

.db_animation_zoom
{
	animation-delay:           1s;
	animation-direction:       alternate;
	animation-duration:        3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name:            db_animation_zoom; /*keyframes name value*/
}

.db_gospel_spacer_vertical
	{
		font-size:  10px;
	}

.db_gospel_top_info_content
{
	font-size:                 var(--font-size-lg);
	text-align:                left;
	font-weight:               normal;
}

.db_gospel_illustration
{
	width:                     100%;
	text-align:                center;
}

@media (max-width: 10000px)
{
	@keyframes db_animation_zoom
	{
		from {width: 40%;}
		to {width: 100%;}
	}

	.db_gospel_top_content
	{
		text-align:          center;
	}

	.db_gospel_resource_right_div
	{
		min-width:           275px;
		width:               20%;
		background-color:    #CBD1D9;
		border-style:        solid;
		border-color:        #2B4463;;
		border-width:        2px;
		font-weight:         bold;
		font-size:           15px;
	}

	.db_gospel_video_iframe
	{
		width:               500px; /*(MaxWithRC|10000=500px) (MaxWithRC|1035=425px) || Resource Center Visible on Right */
		height:              318px; /*(MaxWithRC|10000=318px) (MaxWithRC|1035=285px) || Resource Center Visible on Right */
	}

	.db_gospel_resource_div
	{
		display:             none;
	}

	.db_gospel_info_form_wide_div
	{
		display:             block;
		width:               80%;
		margin:              auto;
		font-weight:         normal;
		font-size:           14px;
		text-align:          center;
	}

	.db_gospel_info_form_mobile_div
	{
		display:             none;
	}
}

@media (max-width: 1035px)
{
	.db_gospel_video_iframe
	{
		width:               425px; /*(MaxWithRC|10000=500px) (MaxWithRC|1035=425px) || Resource Center Visible on Right */
		height:              285px; /*(MaxWithRC|10000=318px) (MaxWithRC|1035=285px) || Resource Center Visible on Right */
	}
}

@media (max-width: 950px)
{
	.db_gospel_top_content
	{
		width:               100%;
		text-align:          center;
	}

	.db_gospel_resource_right_div
	{
		display:             none; /*********************** Resource Center on top right TURNS OFF ***********************/
	}

	.db_gospel_video_iframe
	{
		width:               425px; /*(MaxWithRC|10000=500px) (MaxWithRC|1035=425px) || Resource Center TURNED OFF on Right */
		height:              285px; /*(MaxWithRC|10000=318px) (MaxWithRC|1035=285px) || Resource Center TURNED OFF on Right */
	}

	.db_gospel_resource_div
	{
		display:             block;
		background-color:    #CBD1D9; /*lightgreen;*/
		width:               60%;
		margin:              auto;
		border-style:        solid;
		border-color:        #2B4463; /*darkgreen;*/
		border-width:        2px;
		padding-top:         10px;
		padding-bottom:      16px;
		padding-left:        16px;
		padding-right:       16px;
		font-weight:         bold;
		font-size:           14px;
		text-align:          left;
	}
}

@media (max-width: 745px)
{
	.db_gospel_info_form_wide_div
	{
		display:             none;  /********************* TURN OFF wide form DIV *********************/
	}

	.db_gospel_info_form_mobile_div
	{
		display:             block;  /********************* TURN ON mobile form DIV *********************/
		width:               80%;
		margin:              auto;
		font-weight:         normal;
		font-size:           14px;
		text-align:          center;
	}

}

@media (max-width: 609px)
{
	@keyframes db_animation_zoom
	{
		from {width: 88%;}
		to {width: 100%;}
	}
}

@media (max-width: 600px)
{
	.db_gospel_video_iframe
	{
		width:               280px;
		height:              158px;
	}
}

.db_modal
{
	display:             block;
}

.db_modal_content
{
	min-height:          250px; 
	background-color:    #FFEFEE;
}

.db_modal_content_verse
{
	min-height:          250px;
	background-color:    rgb(222, 228, 222);
}

.db_modal_header
{
	padding-top:         10px; 
	padding-bottom:      5px; 
	color:               white; 
	background-color:    red; 
	font-weight:         bold;
	font-size:           var(--font-size-lg);
	width:               100%; 
	height:              100%;
}

.db_modal_header_verse
{
	padding-top:         10px; 
	padding-bottom:      5px; 
	color:               white; 
	background-color:    darkgreen; 
	font-weight:         bold;
	font-size:           var(--font-size-lg);
	width:               100%; 
	height:              100%;
}

.db_lvl_title
{
	font-weight:         bold;
	font-size:           var(--font-size-title);
}

.db_lvl_header
{
	font-weight:         bold;
	font-size:           16px;
}

.db_scripture_bulk_container
{
	background-color:    #EEDADA;
	padding-left:        var(--gen-padding);
	padding-right:       var(--gen-padding);
	padding-top:         8px;
	padding-bottom:      8px;
	width:               80%;
	margin:              auto;
}

.db_scripture_container
{
	display:             block;
	padding-top:         8px;
	padding-bottom:      8px;
	background-color:    #EEDADA;
	margin:              auto;
}

.db_scripture_ref
{
	color:               darkgreen;
	font-weight:         bold;
}

.db_scripture
{
	color:               green;
	font-style:          italic;
}

.db_list_header_item
{
	font-weight:         bold;
}

span.db_hover_link
{
	color:               gray;
	text-decoration:     underline;
}

.db_gospel_top_section
{
	width:               80%;
	margin:              auto;
	font-weight:         normal;
	font-size:           24px;
	text-align:          center;
}

span.db_gospel_resource_top_header
{
	font-weight:         bold;
	font-size:           15px;
	padding-top:         10px;
	padding-left:        10px;
	padding-right:       10px;
}

.db_gospel_resource_top_content
{
	font-weight:         normal;
	font-size:           var(--prim-font-size);
	padding-bottom:      10px;
	padding-left:        8px;
	padding-right:       8px;
	text-align:          left;
}

.db_gospel_info_desc_div
{
	background-color:    #294563;
	color:               #FFFFFF;
	width:               80%;
	margin:              auto;
	font-size:           var(--font-size-lg);
	font-weight:         bold;
	text-align:          center;
	padding-top:         16px;
	padding-bottom:      16px;
	padding-left:        16px;
	padding-right:       16px;
}

.db_gospel_form_table
{
	width:               80%;
	margin:              auto;
}

.db_submit_link_button
{
	background-color:        #2B4463;
	color:                   #FFFFFF;
	font-size:               14px;
	text-align:              center;
}

.db_td_input
{
	text-align:          left;
}

/************ BODY SECTION ************/