html,body {
	background-color: #130908;
	font-family: Helvetica, Arial;
	height: 100%;
	color: #FFF;
}

/* Fonts for Title */
/*
@font-face {
	font-family: LithosPro;
	src: url("../fonts/lithospro/lithospro-black.woff") format("woff"),
		url("../fonts/lithospro/lithospro-black.ttf") format("truetype"),
		url("../fonts/lithospro/lithospro-black.svg") format("svg");
}
@font-face {
	font-family: SourceSansPro;
	src: url("../fonts/sourcesanspro/sourcesanspro-boldit.woff") format("woff"),
		url("../fonts/sourcesanspro/sourcesanspro-boldit.ttf") format("truetype"),
		url("../fonts/sourcesanspro/sourcesanspro-boldit.svg") format("svg");
}
*/
.header {
	background-color: #000;
	width: 100%;
	margin: 0, auto;
	overflow: hidden;
	text-align: center;
	color: #FFF;
}
.header_text1 {
	/* font-family: LithosPro; */
	text-decoration: none;
	color: #C7B299;
	letter-spacing: 3px;
}
.header_text2 {
	/* font-family: SourceSansPro; */
	text-decoration: italic;
	color: #FFF;
	font-size: 90%;
	letter-spacing: 2px;
}
.header_middle div {
	margin: 0 10px;
}
.header_menu {
	background: linear-gradient(#000, #130908);
	width: 100%;
	padding: 10px 0 10px 0;
	color: #FFF;
	z-index: 99;
}
/*
#container::before {
	position: fixed;
    content: ' ';
    display: block;
    width: 100vw;
    min-height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-size: cover;
    z-index: -10;
}
*/
#footer_outer {
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 0px;
	background-color: #130908;
	padding: 22px 0 18px 0;
	min-height: 40px;
}

.about_block {
	font-size: 1em;
}

/**************************/
/* CSS For Narrow Display */
/**************************/
@media (max-width: 759px) {
	html,body {
		min-width: 320px;
	}
	#container {
		background-size: cover;
		background-attachment: fixed;
		background-repeat: repeat-y;
		background-position: center center;
		background-image: url('../../images/bible_background3_mobile.jpg');
		width: 100vw;
	    min-height: 100vh;
	}
	.header_middle {
		margin: 20px auto 20px auto;
		font-size: 2em;
	}
	.header_menu {
		min-height: 30px;
		padding: 0px 0px 15px 0;
	}
	#header_menu_txt {
		display: block;
		text-align: right;
		padding: 0 0 .8em 0;
		font-size: .95em;
	}
	h1 {
		font-size: 2.4em;
		font-style: italic;
		color: #FFF;
	}
	h2 {
		font-size: 1.55em;
		line-height: 1.1em;
	}

	h2.seafoam {
		color: brown;
		font-size: 1.55em;
		line-height: 1.1em;
	}
	.menu_item {
		display: none;
	}
	#small_menu {
		display: block;
		float: left;
		text-align: left;

	}
	#small_menu ul {
		list-style: none;
	    width:220px;
		font-size: 1.2em;
	}
	#small_menu ul li ul li {
		text-align: left;
	}
	#change_platoon {
		margin-top: 10px;
	}
	.about_block {
		display: inline-block;
		margin: 10px 6px 10px 6px;
		text-align:center;
		font-size: .8em;
	}
	img.about_img {
		margin-bottom: 8px;
		width: 90px;
	}
	img.banner_img {
		width: 320px;
		margin-bottom: 10px;
	}
	#main_container {
		clear: both;
		margin: 0px 0 5px 0;
		padding-bottom: 70px;
		font-size: 1.1em;
		line-height: 1.2em;
		overflow: hidden;
	}
	#main_container_give {
		clear: both;
		padding-bottom: 70px;
		font-size: 1.1em;
		line-height: 1.2em;
		overflow: hidden;
	}
	.comment_col1 {display: none;}
	.reply_col1 {display: none;}
	img.comment_img {display: inline; width: 56px; margin: 0px 10px 10px 0; text-align: left}
	img.reply_img {display: inline; width: 42px; margin: 0px 4px 4px 0;}
	.mobile_hide, .mobile_hide2, .misc_notes {display: none;}
	.icon_row_td {padding-left: auto; padding-right: 0px; text-align: right;}
	.td_col1 {
		padding: 6px 5px 5px 0;
		text-align: left;
		font-size: 1.1em;
	}
	.td_col2 {
		width: auto;
		float:left;
		padding: 0 0px 10px 5px;
		text-align: left;
	}
	.td_wide {
		width: 100%;
		padding: 0 0px 5px 5px;
		text-align: left;
	}
	#message_right {
		margin-left:130px;
	}
	#message_left {
		width: 130px;
	}
	#message_left div {
		padding: 5px 5px 10px 5px;
	}
}


/************************/
/* CSS for med. display */
/************************/
@media (min-width: 570px) {
	#container {
		background-size: cover;
		background-attachment: fixed;
		background-repeat: repeat-y;
		background-position: center center;
		background-image: url('../../images/bible_background3_web.jpg');
		width: 100vw;
	    min-height: 100vh;
	}
	.header_middle {
		margin: 20px auto 20px auto;
		font-size: 2.5em;
	}
	#header_menu_txt {
		display: block;
		text-align: right;
		font-size: .95em;
	}
	h1 {
		font-size: 2.8em;
		font-style: italic;
	}
	h2 {
		font-size: 1.6em;
		line-height: 1.1em;
	}
	h2.seafoam {
		color: brown;
		font-size: 1.6em;
		line-height: 1.1em;
	}
	.menu_item {
		display: none;
	}
	#small_menu {
		display: block;
		float: left;
		text-align: left;
	}
	#small_menu ul {
		list-style: none;
	    width:220px;
		font-size: 1.2em;
	}
	#small_menu ul li ul li {
		text-align: left;
	}
	.about_block {
		display: inline-block;
		margin: 10px 8px 10px 8px;
		text-align:center
	}
	img.about_img {
		margin-bottom: 8px;
		width: 100px;
	}
	img.banner_img {
		width: 540px;
		margin-bottom: 10px;
	}
	#main_container {
		clear: both;
		margin: 0px 0 5px 0;
		padding-bottom: 70px;
		font-size: 1.1em;
		line-height: 1.2em;
		overflow: hidden;
	}
	#main_container_give {
		clear: both;
		padding-bottom: 70px;
		font-size: 1.2em;
		line-height: 1.2em;
		overflow: hidden;
	}
	.comment_col1 {display: none;}
	.reply_col1 {display: none;}
	img.comment_img {display: inline; width: 56px; margin: 0px 6px 6px 0;}
	img.reply_img {display: inline; width: 48px; margin: 0px 6px 6px 0;}
	.mobile_hide, .mobile_hide3 {display: none;}
	.mobile_hide2 {display: table-cell;}
	.icon_row_td {padding-left: auto; padding-right: 5px; text-align: right;}
	.misc_notes {display: inline}
	.td_col1 {
		width: 30%;
		float:left;
		padding: 10px 10px 10px 0;
		text-align: right;
		font-size: 1.1em;
	}
	.td_col2 {
		width: auto;
		float:left;
		padding: 2px 0px 8px 10px;
		text-align: left;
	}
	.td_wide {
		width: 98%;
		padding: 10px 0px 8px 0px;
		text-align: left;
	}
	#message_right {
		margin-left:175px;
	}
	#message_left {
		width: 175px;
	}
	#message_left div {
		padding: 5px 5px 10px 5px;
	}
}


/************************/
/* CSS for wide display */
/************************/
@media (min-width: 760px) {
	#container {
		background-size: cover;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url('../../images/bible_background2_web.jpg');
		width: 100vw;
	    min-height: 100vh;
	}
	.header_middle {
		margin: 20px auto 15px auto;
		font-size: 3em;
	}
	#header_menu_txt {
		text-align: right;
		font-size: 1.25em;
	}
	h1 {
		font-size: 3.2em;
		font-style: italic;
		/*
		text-shadow:
		  1px 1px 0 #000,
		 -1px -1px 0 #000,
		  1px -1px 0 #000,
		 -1px  1px 0 #000,
		  1px  1px 0 #000;
		*/
		color: #FFF;
	}
	h2 {
		font-size: 1.75em;
		line-height: 1.1em;
	}

	h2.seafoam {
		/* color: #468EA0; */
		color: brown;
		font-size: 1.75em;
		line-height: 1.1em;
	}
	#small_menu {
		display: none;
	}
	.menu_item {
		display: inline;
		margin: 0 14px 0 0;
	}
	.about_block {
		display: inline-block;
		margin: 12px 12px 12px 12px;
		text-align:center
	}
	img.about_img {
		margin-bottom: 8px;
		width: 100px;
	}
	#main_container {
		clear: both;
		margin: 0px 0 5px 0;
		padding-bottom: 70px;
		font-size: 1.2em;
		line-height: 1.3em;
		overflow: hidden;
	}
	#main_container_give {
		clear: both;
		padding-bottom: 70px;
		font-size: 1.1em;
		line-height: 1.2em;
		overflow: hidden;
	}
	.comment_col1 {display: block; width: 80px; float:left;}
	.reply_col1 {display: block; width: 56px; float:left;}
	img.comment_img {display: none;}
	img.reply_img {display: none;}
	.mobile_hide, .mobile_hide2, .mobile_hide3 {display: table-cell;}
	.icon_row_td {text-align: center; padding-left: 45%; padding-right: 20px;}
	.td_col1 {
		width: 30%;
		float:left;
		padding: 10px 10px 10px 0;
		text-align: right;
		font-size: 1.1em;
	}
	.td_col2 {
		width: 65%;
		float:left;
		padding: 2px 0px 8px 10px;
		text-align: left;
	}
	.td_wide {
		width: 98%;
		padding: 10px auto 8px auto;
		text-align: left;
	}
	#message_right {
		margin-left:220px;
	}
	#message_left {
		width: 220px;
	}
	#message_left div {
		padding: 5px 5px 10px 5px;
		white-space: nowrap;
	}
}


/*********************/
/* END Reponsive CSS */
/*********************/


/* Whole page container */
#container {
	margin: 0px auto;
	width: 100%;
	min-height: 100%;
	overflow: auto;
	position:relative;
}

.menu_item {
	white-space: nowrap;
}

.fixed {
  position: fixed;
  top:0; left:0;
  width: 100%;
}
a.menu {
	color: #FFF;
	text-decoration:underline;
}
a.menu:visited {
	text-decoration:underline;
	color: #FFF;
}
a.menu:hover {
	text-decoration:underline;
	font-weight: normal;
	opacity: .8;	  /* #D4EAF9 or #EEE or #6CF*/
}
a.menu_sel {
	color: #FFF;
	text-decoration:none;
	font-style: italic;
}
a.menu_sel:visited {
	text-decoration:none;
	color: #FFF;
	font-style: italic;
}
a.menu_sel:hover {
	text-decoration:none;
	font-weight: normal;
	opacity: .8;	  /* #D4EAF9 or #EEE or #6CF*/
	font-style: italic;
}


#header_menu_txt a:active{
	text-decoration:underline;
	font-weight: normal;
	color: #FFF;
}

#footer_outer a {
	color: #FFF;
	text-decoration:underline;
}

#footer_outer a:visited{
	text-decoration:underline;
	color: #FFF;
}

#footer_outer a:hover{
	text-decoration:underline;
	opacity: .85;
}

.clear {
  clear:both;
}

input select {
	font-size:1.1em
}

textarea {
	font-family: Helvetica, Arial;
	font-size: .9em
}

.light_red {
	color: #D65151;
}
.red_col1 {
	width: 40%;
	float:left;
	padding: 0 4px 10px 0;
	text-align: left;
	font-size: 1.0em;
	color: #D65151;
}
.red_col2 {
	width: 8%;
	float:left;
	padding: 0 0 10px 0;
	text-align: left;
	color: #000;
}
.red_col3 {
	width: 50%;
	float:left;
	padding: 0 0 10px 0;
	text-align: left;
}
.num {
	text-align: center;
}
.score_box {
	text-align: center;
	cursor: pointer;
}
.goal_name {
	cursor: pointer;
}

.entry_date1 { font-size: .75em; color: #0000AA}
.entry_date2 { font-size: .75em; color: #0000AA; margin-left: -2.3em}

dt {font-weight: bold; font-style: italic; margin-bottom: .4em; font-size: 1.1em; line-height: 1.1em;}
dd {margin-bottom: 24px;}

.comment_container {padding: 5px 0 20px 0; height: auto; overflow: hidden}
.comment_col2 {width: auto; overflow: hidden}
.comment_body {font-size: 0.9em; line-height: 1.15em; margin-bottom: 10px}

.reply_container { height: auto; overflow: hidden; padding: 5px 5px 6px 6px; 	border-left: 2px solid #777; background-color: #EAE4DD}
.reply_col2 {width: auto; overflow: hidden}

.no_wrap {white-space:nowrap;}

a.header_title:visited, a.header_title:link, a.header_title:hover, a.header_title:active{text-decoration: none;}
a.white:visited, a.white:active, a.white:link {color: white;}
a.white:hover {opacity: .85}

a.black:visited, a.black:active, a.black:link {color: #000;}
a.black:hover {color: #00C;}

a.black_plain:visited, a.black_plain:active, a.black_plain:link {color: #000; text-decoration: none;}
a.black_plain:hover {color: #00C;}

.blue {color: #00A}
a.blue:visited, a.blue:active, a.blue:link {color: #00A; text-decoration: none;}
a.blue:hover {color: #00F; text-decoration: underline;}
a.blue2:visited, a.blue2:active, a.blue2:link {color: #00C; text-decoration: underline;;}
a.blue2:hover {color: #00F; text-decoration: underline;}

.seafoam {color: brown;}
a.seafoam:visited, a.seafoam:active, a.seafoam:link {color: brown;}
a.seafoam:hover {color: #00f;}

a.red_link:visited, a.red_link:active, a.red_link:link {color: #A00;}
a.red_link:hover {color: #111; font-weight: bold;}

a.red_link2:visited, a.red_link2:active, a.red_link2:link {color: #A00;}
a.red_link2:hover {color: #A00; font-weight: bold;}

a.red_link3:visited, a.red_link3:active, a.red_link3:link {color: #A00;}
a.red_link3:hover {color: #111;}

a.inherit:visited, a.inherit:active, a.inherit:link {color:inherit;}
a.inherit:hover {color:inherit;}

.button {
    background: linear-gradient(#BBB, #333);
    border-radius: 16px;
    border:0px solid #F9F9F9;
    color: white;
    padding: 6px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.1em;
    margin: 4px;
    cursor: pointer;
    transition-duration: 0.2s;
}
.button:hover {
    opacity: 0.85;
}
.button_delete {
	background: linear-gradient(#FFAAAA, #CC0000);
}
.button_green {
	background: linear-gradient(#99CC99, #009900);
}

.break_word {
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.meter-wrap{
    position: relative;
	float: right;
}
.meter-wrap, .meter-value, .meter-text {
    /* The width and height of your image */
    width: 124px; height: 24px;
}
.meter-wrap, .meter-value {
    background: #aaa url(../../about/images/progress_bar4.png) top left no-repeat;
}
.meter-text {
    position: absolute;
    top:0; left:0;
    padding-top: 5px;
    color: #fff;
    text-align: center;
    width: 100%;
}
.icon, .inline_block {
	display: inline-block;
}
.note_display, .goal_description_span {
	cursor: pointer;
	font-style: italic;
	color: #00A;
}
.center {
	text-align: center;
}
.donation_block {
	margin: 25px auto 0 auto;
	max-width: 400px;
	text-align: center;
	color: #00AA00;
	font-weight: bold;
	font-size: 1.2em
}
.gift_frequency {
	display: block;
	float: left;
	margin: 0px 5px 20px 5px;
	padding: 10px 10px 10px 10px;
	border: 1px solid #333;
	text-align: center;
}
.frequency_unselected {
	background-color: #EFEFEF;
	color: #00BB00;
}
.frequency_selected {
	background-color: #00BB00;
	color: #EFEFEF;
}
.gift_amount{
	border: 2px solid #00AA00;
	background-color: #FFF;
	color: #00AA00;
	text-align: left;
	font-size: .9em;
	font-weight: 700;
}
.gift_name{
	border: 2px solid #00AA00;
	background-color: #FFF;
	color: #00AA00;
	text-align: left;
	font-size: .9em;
	font-weight: 700;
}
.state {
	max-width: 36px;
	max-height: 25px;
	color: #0000AA;
	font-size: 80%;
	cursor: pointer;
}
.state2 {
	max-width: 48px;
	max-height: 36px;
}
.submit_button {
	background-color: #FAA916;
	border-radius: 18px;
	color: #000;
	cursor: pointer;
	display: inline-block;
	font-family: yeseva-one, serif;
	white-space: nowrap;
	font-size: 1.2em;
	padding: 13px 20px 10px 20px;
	margin: 12px 5px 12px 5px;
}
.submit_button:hover {
	color: #666;
	cursor: pointer;
}
.encouragement_ratio {
	font-weight: bold;
	color: #009900;
}
.encouragement_ratio:hover {
	cursor: pointer;
}

/* Tooltip styling */
[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: default;
    padding: 4px;
}
[data-tooltip]:before {
	content: attr(data-tooltip);
	display: none;
    padding: 4px 8px;
    color: #333;
    position: absolute;
    left: 5px;
    top: 100%;
    white-space: nowrap;
    z-index: 99;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: -22px;
	margin-top: 10px
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin: 30px 0 0 -335px;
	width: 320px;
	white-space: pre-wrap;
	text-align: left;
}


/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}
/* End Tooltip styling */