@font-face { font-family: 'Font_Arial'; src: url('gotham-light-webfont.woff2') format('woff2'), url('gotham-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Font_Arial'; src: url('../font/arial.eot'); src: url('../font/arial.eot') format('embedded-opentype'), url('../font/arial.woff2') format('woff2'), url('../font/arial.woff') format('woff'), url('../font/arial.ttf') format('truetype'), url('../font/arial.svg#arial') format('svg'); }
@font-face { font-family: 'Font_Arial_Bold'; src: url('../font/arial_bold.eot'); src: url('../font/arial_bold.eot') format('embedded-opentype'), url('../font/arial_bold.woff2') format('woff2'), url('../font/arial_bold.woff') format('woff'), url('../font/arial_bold.ttf') format('truetype'), url('../font/arial_bold.svg#arial_bold') format('svg'); }
@font-face { font-family: 'Font_Arial_Bold_Italic'; src: url('../font/arial_bold_italic.eot'); src: url('../font/arial_bold_italic.eot') format('embedded-opentype'), url('../font/arial_bold_italic.woff2') format('woff2'), url('../font/arial_bold_italic.woff') format('woff'), url('../font/arial_bold_italic.ttf') format('truetype'), url('../font/arial_bold_italic.svg#arial_bold_italic') format('svg'); }
@font-face { font-family: 'Font_Arial_Italic'; src: url('../font/arial_italic.eot'); src: url('../font/arial_italic.eot') format('embedded-opentype'), url('../font/arial_italic.woff2') format('woff2'), url('../font/arial_italic.woff') format('woff'), url('../font/arial_italic.ttf') format('truetype'), url('../font/arial_italic.svg#arial_italic') format('svg'); }
@font-face { font-family: 'Font_Brush_Script'; src: url('../font/brush_script.eot'); src: url('../font/brush_script.eot') format('embedded-opentype'), url('../font/brush_script.woff2') format('woff2'), url('../font/brush_script.woff') format('woff'), url('../font/brush_script.ttf') format('truetype'), url('../font/brush_script.svg#brush_script') format('svg'); }
@font-face { font-family: 'Font_Calibri'; src: url('../font/calibri.eot'); src: url('../font/calibri.eot') format('embedded-opentype'), url('../font/calibri.woff2') format('woff2'), url('../font/calibri.woff') format('woff'), url('../font/calibri.ttf') format('truetype'), url('../font/calibri.svg#calibri') format('svg'); }
@font-face { font-family: 'Font_Lucida_Handwriting'; src: url('../font/lucida_handwriting.eot'); src: url('../font/lucida_handwriting.eot') format('embedded-opentype'), url('../font/lucida_handwriting.woff2') format('woff2'), url('../font/lucida_handwriting.woff') format('woff'), url('../font/lucida_handwriting.ttf') format('truetype'), url('../font/lucida_handwriting.svg#lucida_handwriting') format('svg'); }
@font-face { font-family: 'Font_Minion_Pro'; src: url('../font/Minion_Pro.eot'); src: url('../font/Minion_Pro.eot') format('embedded-opentype'), url('../font/Minion_Pro.woff2') format('woff2'), url('../font/Minion_Pro.woff') format('woff'), url('../font/Minion_Pro.ttf') format('truetype'), url('../font/Minion_Pro.svg#Minion_Pro') format('svg'); }
@font-face { font-family: 'Font_Minion_Pro_Semibold'; src: url('../font/Minion_Pro_Semibold.eot'); src: url('../font/Minion_Pro_Semibold.eot') format('embedded-opentype'), url('../font/Minion_Pro_Semibold.woff2') format('woff2'), url('../font/Minion_Pro_Semibold.woff') format('woff'), url('../font/Minion_Pro_Semibold.ttf') format('truetype'), url('../font/Minion_Pro_Semibold.svg#Minion_Pro_Semibold') format('svg'); }
@font-face { font-family: 'Font_Shelley_Andante'; src: url('../font/shelley_andante_bt-webfont.woff2') format('woff2'), url('../font/shelley_andante_bt-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Font_Times_New_Roman'; src: url('../font/times_new_roman.eot'); src: url('../font/times_new_roman.eot') format('embedded-opentype'), url('../font/times_new_roman.woff2') format('woff2'), url('../font/times_new_roman.woff') format('woff'), url('../font/times_new_roman.ttf') format('truetype'), url('../font/times_new_roman.svg#times_new_roman') format('svg'); }

/* See https://stackoverflow.com/questions/47659664/flexbox-with-fixed-header-and-footer-and-scrollable-content */
html { margin: 0; padding: 0; height: 100%; font-family: "Font_Arial"; }
body { display: flex; flex-direction: column; height: 100%; width: 100%; margin: 0; }
header { width: inherit; height: max-content; overflow: hidden; }
main { flex: 1; overflow: auto; background-image: linear-gradient(to bottom, #BAC9E3,#004E97);  }
section { height: 100%; overflow: auto; width: 100%; }
footer { font-family: 'FONT_Arial'; font-size: 9pt; background-color: #FFF; text-align: center; color: #FFF; background: #004E97; width: 100%; padding-top: 5px; padding-bottom: 5px; }

a, input { outline: 0px; }
input[type=radio] { vertical-align: middle; position: relative; bottom: 2px; }
label { font-size: 12px; font-weight: bold; color: #004E97; text-align: center; }

#Masthead  { height: 160px; width: 100%; background-image: url(../images/logo_index.jpg); margin-top: 5px; margin-bottom: 5px; float: left; background-repeat: no-repeat; background-position: center center; }
#Masthead_Base { height: 10px; width: 100%; background-color: #004E97; float: left; }

#Menu_Header { font-size: 28px; color: #053D6F; text-align: center; width: 100%; margin-bottom: 30px; }

#Index_Menu_Container { width: 100%; height: max-content; padding-bottom: 20px; text-align: center; display: flex; flex-direction: row; justify-content: center; gap: 30px; }
	.Index_Icon_Container { width: max-content; height: 506px; margin-top: 20px; background-image: linear-gradient(to bottom, #004E97,#FFF); -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; behavior:url("border-radius.htc"); box-shadow: 2px 10px 15px #000; }
		.Icon_Label { width: 220px; height: max-content; min-height: 20px; font-size: 12pt; color: #FFF; background-color: #004E97; text-decoration: none; font-weight: bold; padding-left: 10px; padding-right: 10px; padding-top: 6px; padding-bottom: 5px; text-align: center; margin-left: auto; margin-right: auto; }
		#PC_Button,#BM_Button { width: 274px; height: 467px; background-color: #FFF; background-image: url(../images/icon_sprite_for_menus.jpg); background-position: 0px 0px; background-repeat: no-repeat; margin-left: auto; margin-right: auto; cursor: pointer; }
		#BM_Button { background-position: -274px 0px; }

.Page_Header { font-size: 18pt; color: #FFF; background-color: #004E97; font-weight: normal; text-align: center; padding-bottom: 5px; }

#Form_Header { font-size: 28px; color: #004E97; }
.Form_Header { font-size: 12px; font-weight: normal; color: #004E97; text-decoration: none; }
.Form_Header_Invalid { font-size: 12px; font-weight: normal; color: #FFF; background-color: #900; }
.Form_Notes_Italic { font-size: 10px; font-style: italic; font-weight: normal; color: #004E97; text-decoration: none; }
.Form_Text { font-size: 12px; font-weight: normal; color: #004E97; background-color: #FFF; border: 1px solid #BBB; text-decoration: none; height: 16px; }
.Reqd_Field { font-size: 9px; font-weight: normal; color: #004E97; text-decoration: none; }
.Form_Text_Info { font-size: 12px; font-weight: normal; color: #004E97; text-decoration: none; }
.Form_Text_Invalid { font-size: 12px; font-weight: normal; color: #004E97; text-decoration: none; background-color: #FCC; border: 1px solid #900; height: 16px; }
.Form_Select { font-size: 12px; font-weight: normal; color: #004E97; text-decoration: none; border: 1px solid #BBB; background-color: #FFF; height: 20px; }
.Form_Select_Invalid { font-size: 12px; font-weight: normal; color: #004E97; text-decoration: none; border: 1px solid #900; background-color: #FCC; height: 20px; }

#PDF_Preview_Prayer_Card  { height: 650px; width: 800px; margin-right: auto; margin-left: auto; padding-bottom: 20px; }
#Footer  { height: 57px; width: 1200px; background-image: url(../images/footer.jpg); background-repeat: no-repeat; background-position: left top; float: left; }

.Card_Quantity { font-size: 12px; font-weight: normal; color: #004E97; }
#quantity_menu { margin-top: -5px; margin-left: -5px; }
.Error_Message { font-size: 14px; font-weight: bold; color: #FFF; background-color: #900; background-color: red;}
.Image_Frame { border: 1px solid #000; }
.Links { font-size: 14px; font-weight: normal; color: #004E97; text-decoration: underline; }

#Order_Complete_Message_Container { width: 400px; height: max-content; padding-bottom: 10px; font-size: 14pt; margin-left: auto; margin-right: auto; margin-top: 100px; background-color: #FFF; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; behavior:url("border-radius.htc"); box-shadow: 2px 10px 15px #000; }
.Order_Complete_Header { width: inherit; font-size: 16pt; font-weight: bold; background-color: #004E97; color: #FFF; padding-top: 8px; padding-bottom: 8px; text-align: center; -moz-border-top-left-radius: 8px; -webkit-border-top-left-radius: 8px; -khtml-border-top-left-radius: 8px; border-top-left-radius: 8px; -moz-border-top-right-radius: 8px; -webkit-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px; behavior:url("border-radius.htc"); }
.Order_Number_Message { width: 90%; font-size: 14pt; font-weight: bold; margin-left: auto; margin-right: auto; height: auto; overflow: hidden; text-align: center; margin-top: 20px; margin-bottom: 20px; }
.Order_Email_Message { width: 90%; font-size: 12pt; margin-left: auto; margin-right: auto; height: auto; overflow: hidden; text-align: center; margin-top: 20px; margin-bottom: 20px; }
#Thanks_For_Order { font-size: 24px; color: #004E97; font-weight: bold; text-align: center; padding-top: 30px; padding-bottom: 60px; }
#Return_To_Home { text-align: center; padding-bottom: 15px; }

/* Image cropper */
#cropper_pc { position: absolute; top: 20px; left: 50%; width: 400px; height: 600px; max-width: 400px; max-height: 600px; margin-left: -200px; display: none; z-index: 1500; }
#cropper_bm { position: absolute; top: 20px; left: 50%; width: 265px; height: 265px; max-width: 265px; max-height: 265px; margin-left: -200px; display: none; z-index: 1500; }
#modal_shade { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #000; opacity: 75%; }
#cropper_button_container { width: 543px; display: flex; flex-direction: row; justify-content: center; gap: 10px; padding-top: 4px; padding-bottom: 4px; background-color: #004E97; }

#prayer_card_image_frame { z-index: 1300; }
#prayer_card_image_window { z-index: 1400; }
#Prayer_Card_Template_Container { width: max-content; height: max-content; padding: 10px; margin-top: 20px; margin-left: auto; margin-right: auto; background-color: #FFF; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; behavior:url("border-radius.htc"); box-shadow: 2px 10px 15px #000; }
.Prayer_Card_Template_Select_Header { font-size: 12pt; font-weight: normal; color: #FFF; background-color: #004E97; }
.Prayer_Card_Options_Header { font-size: 12pt; font-weight: normal; color: #FFF; background-color: #004E97; padding-top: 4px; padding-bottom: 4px; }

.Prayer_Card_WYSIWYG_QOH_1,.Prayer_Card_WYSIWYG_QOH_2,.Prayer_Card_WYSIWYG_QOH_Verse_Side { width: 274px; height: 467px; background-image: url(../images/prayer_card_template_wysiwyg_sprite.png); background-position: 0px 0px; background-repeat: no-repeat; border: 1px solid #000; }
.Prayer_Card_WYSIWYG_QOH_2 { background-position: -274px 0px; }
.Prayer_Card_WYSIWYG_QOH_Verse_Side { background-position: -548px 0px; overflow: hidden; height: 447px; padding-top: 20px; }
.Prayer_Card_WYSIWYG_QOH_Window { width: 221px; height: 413px; margin-left: 1px; margin-top: 27px; background-position: 0px 0px; background-repeat: no-repeat; }

/* Verse Side */
.prayer_card_name { font-family: 'Font_Shelley_Andante'; width: max-content; max-width: 225px; height: auto; line-height: 1.5; margin-left: auto; margin-right: auto; margin-bottom: 5px; display: block; }
.prayer_card_dates { font-family: 'Font_Minion_Pro'; width: max-content; max-width: 225px; height: auto; line-height: 1.5; margin-left: auto; margin-right: auto; margin-bottom: 5px; display: block; }
.prayer_card_verse_header { font-family: 'Font_Minion_Pro_Semibold'; font-style: italic; width: max-content; max-width: 225px; height: auto; line-height: 1.5; margin-left: auto; margin-right: auto; margin-bottom: 5px; display: block; }
.prayer_card_verse { font-family: 'Font_Minion_Pro'; width: max-content; max-width: 225px; height: auto; line-height: 1.5; margin-left: auto; margin-right: auto; }
#verse { width: 450px; height: 140px; }
.prayer_card_name:empty,.prayer_card_dates:empty,.prayer_card_verse_header:empty { margin: 0px; display: none; } 	/* Remove margin if div is empty */

/* Carousel - Prayer Card Thumbnail Selector */
#Thumbnail_Selector_Container { width: 100%; height: 120px; padding-left: 6px; }
#Thumbnail_Left_Arrow,#Thumbnail_Right_Arrow { width: 20px; height: 23px; margin-top: 50px; margin-left: 2px; margin-right: 1px; float: left; display: inline; cursor: pointer; background-image: url(../prayer_card_thumbnails/prayer_card_thumbnail_arrows.png); background-position: 0px 0px; background-repeat: no-repeat; }
#Thumbnail_Right_Arrow { margin-left: 2px; margin-right: 8px; background-position: 0px -23px; }
#Thumbnail_Carousel_Container { width: 576px; height: inherit; float: left; display: inline; padding-left: 4px; }

.Thumbnail_Image { width: 54px; height: 100px; border: 1px solid #000; margin-top: 10px; margin-left: 1px; margin-right: 0px; float: left; display: inline; cursor: pointer; }

/* BOOKMARKS */
#Bookmark_Template_Container { width: max-content; height: max-content; padding: 10px; margin-top: 20px; margin-left: auto; margin-right: auto; background-color: #FFF; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; behavior:url("border-radius.htc"); box-shadow: 2px 10px 15px #000; }
.Bookmark_WYSIWYG_QOH_1,.Bookmark_WYSIWYG_QOH_2,.Bookmark_WYSIWYG_QOH_Verse_Side,.Bookmark_WYSIWYG_QOH_Window,Bookmark_WYSIWYG_QOH_Verse_Side { width: 200px; height: 700px; margin-left: 1px; margin-top: 4px; background-image: url(../bookmark_templates/bookmark_template_wysiwyg_sprite.png); background-repeat: no-repeat; border: 1px solid #000; }
.Bookmark_WYSIWYG_QOH_2 { background-position: 0px 0px; }
.Bookmark_WYSIWYG_QOH_Verse_Side { background-position: -600px 0px; }
.Bookmark_WYSIWYG_QOH_Window { background-position: -400px 0px; }

#date_of_birth,#date_of_death { width: 80px; }
#ob_areacode, #ob_exchange, #areacode, #exchange, #cell_areacode, #cell_exchange, #fax_areacode, #fax_exchange, #pgr_areacode, #pgr_exchange, #hm_areacode, #hm_exchange { width: 32px; }
#ob_last4, #last4, #cell_last4, #fax_last4, #pgr_last4, #hm_last4 { width: 38px; }

iframe { padding-bottom: 20px; }

#cc_alert_container, #cc_please_wait_container { font-family: "Font_Myriad_Bold"; font-size: 18pt; position: absolute; top: 50%; margin-top: -95px; left: 50%; margin-left: -210px; width: 400px; min-height: 100px; height: auto; overflow: hidden; color: #053D6F; background-color: #E3DCEB; text-align: center; vertical-align: middle; padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; border: 1px solid #053D6F; border-radius: 5px; box-shadow: 2px 2px 5px #053D6F; }
.cc_alert_actions { font-family: "Font_Myriad_Bold"; font-size: 12pt; background-color: #053D6F; color: #FFF; width: 75px; height: 23px; padding-top: 2px; border-radius: 5px; margin-left: auto; margin-right: auto; cursor: pointer; border: 1px outset #053D6F; box-shadow: 1px 1px 3px #053D6F; }
#cc_confirm_actions_container { position: absolute; top: 25%; left: 50%; margin-left: -200px; width: 400px; max-width: 400px; height: auto; overflow: hidden; max-height: 350px; z-index: 5000; border: 1px outset #053D6F; box-shadow: 1px 1px 10px #053D6F; background-color: #FFF; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; behavior:url("border-radius.htc"); }
.cc_confirm_actions_header { font-size: 16pt; text-align: center; text-transform: uppercase; color: #FFF; padding: 8px; width: inherit; height: auto; overflow: hidden; background-color: #053D6F; font-weight: bold; }
.cc_confirm_actions_question { font-size: 14pt; text-align: center; color: #053D6F; padding: 8px; width: inherit; height: auto; overflow: hidden; background-color: #FFF; }
.cc_confirm_actions_button_container { width: inherit; height: auto; overflow: hidden; text-align: center; padding: 8px; background-color: #FFF; }
.cc_confirm_actions,.cc_confirm_archive { font-family: Font_Arial; font-size: 12pt; color: #FFF; width: auto; height: auto; overflow: hidden; background-color: #053D6F; padding-top: 2px; padding-left: 10px; padding-right: 10px; border-radius: 5px; margin-left: 5px; margin-right: 5px; float: left; display: inline; cursor: pointer; border: 1px outset #053D6F; box-shadow: 1px 1px 3px #053D6F; }
#cc_please_wait_container { display: none; } 
.spinner { position: relative; left: 50%; margin-left: -14px; height: 28px; width: 28px; animation: rotate 0.8s infinite linear; border: 8px solid #fff; border-right-color: transparent; border-radius: 50%; }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* PDF Link Page */
#Past_Orders_Lookup tr:nth-child(even) { background: #CCC; }
#Past_Orders_Lookup tr:nth-child(odd) { background: #FFF; }

.Past_Orders_Lookup_Header { font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; background-color: #0068B1; color: #FFF; }
.Past_Orders_Lookup_Cell {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #0068B1;
}