/* nancy.css Created by Nancy Bond for Stuff 4 Church Nancy Bond Info Page Large Screen and All Screens other than phone of 550 or less */

body { 
  background-color: #d3e5f9;   /* d3e5f9 lighter baby blue than above; cccdce medium gray; dadcdd Light gray; c8dff8 Light baby blue */
  background-image: linear-gradient(#1E5593,#d3e5f9);   /* from 1E5593 top banner blue to cccdce light gray of page; 7e7e7f darker gray */
  font-family:      Tahoma, Arial, sans-serif;
  font-size:        16px;
  margin:           auto;
}

@media only screen and (max-width: 900px) {
body {
    font-size: 13px;
  }
}

#pagerectangle {
	margin: auto;
	width:  100%;
}

header {
	width:       100%;
	margin:      auto;
}

.large {     /* This hides items like the small header picture. */
   display: none;
}

.center {
  display: inline;
  margin-left: auto;
  margin-right: auto;
}

/* For the links at top above header banner */
#navigation {
	background-color: #ffffff;  /* white with header blue words found at bottom called link.white */
	width: 100%;
	margin: auto;
	padding: 0px 0px 0px 0px;  /* top right bottom left */
	text-align: center;
}

#colnav1 {		/* FAQs */
    display: table-cell;
    padding: 2px 10px 4px 0px;  /* top right bottom left Made the left 0 so that it works correctly when downsizing. */
    vertical-align: middle;
    text-align: center;
    width:   12.3%
}
#colnava {		/* About */
    display: table-cell;
    padding: 2px 20px 4px 20px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   11.3%
}

#colnavb {		/* Preview */
    display: table-cell;
    padding: 2px 20px 4px 20px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   11.3%
}
#colnavc {		/* Order */
    display: table-cell;
    padding: 2px 20px 4px 20px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   11.3%
}
#colnavd {		/* Mysteries */
    display: table-cell;
    padding: 2px 20px 4px 20px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   11.3%
}

#colnave {		/* Minis */
    display: table-cell;
    padding: 2px 20px 4px 20px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   11.3%
}

#colnavf {		/* Christmas */
    display: table-cell;
    padding: 2px 0px 4px 20px;  /* top right bottom left Made the right 0 so that it works correctly when downsizing. */
    vertical-align: middle;
    text-align: center;
    width:   11.3%
}

#colnavg {		/* Contact */
    display: table-cell;
    padding: 2px 0px 4px 20px;  /* top right bottom left Made the right 0 so that it works correctly when downsizing. */
    vertical-align: middle;
    text-align: center;
    width:   12.3%
}

/* Responsive Top large header with bluebirds and Stuff 4 Church */
.img {
  width: 1920px;
  height: 280px;
  object-fit: cover;
}

/* Responsive image SCHEDULE */
.img1 {
  max-width: 100%;   /* width: 628px; */
  height: auto;     /* height: 286px; */
  object-fit: cover;
}

/* Responsive Accusation Card Row */
.img2 {
  max-width: 100%;   /* width: 635px; */
  height: auto;     /* height: 90px; */
  object-fit: cover;
}

/* Responsive Logo Stuff 4 Church in first closer column */
.img3 {
  max-width: 100%;   /* width: 200px; */
  height: auto;     /* height: 160px; */
  object-fit: cover;
}

/* Responsive Bluebird baby at bottom in 5th closer column */
.img4 {
  max-width: 100%;   /* width: 195px; */
  height: auto;     /* height: 156px; */
  object-fit: cover;
}

/* Responsive Facebook at bottom in 3rd closer column */
.img5 {
  max-width: 100%;   /* width: 120px; */
  height: auto;     /* height: 40px; */
  object-fit: cover;
}

/* Responsive email plus home mailing address at bottom in 3rd closer column */
.img6 {
  max-width: 100%;   /* width: 230px; */
  height: auto;     /* height: 134px; */
  object-fit: cover;
}

/* Responsive Theater 4 Church link at bottom in 2nd closer column */
.img7 {
  max-width: 100%;   /* width: 230px; */
  height: auto;     /* height: 64px; */
  object-fit: cover;
}

/* Responsive Nancy Bond Creations Link at bottom in 2nd closer column */
.img8 {
  max-width: 100%;   /* width: 230px; */
  height: auto;     /* height: 32px; */
  object-fit: cover;
}

/* Responsive Nancy's Etsy shop link at bottom in 2nd closer column */
.img9 {
  max-width: 100%;   /* width: 230px; */
  height: auto;     /* height: 28px; */
  object-fit: cover;
}

/* Responsive YouTube link at bottom in 3rd closer column */
.img10 {
  max-width: 100%;   /* width: 184px; */
  height: auto;     /* height: 68px; */
  object-fit: cover;
}

.hdr1 {     /* hdr1 is top "Tips and What to Expect when Hosting" */
  font-size:     180%;
  color:         #113b6c; /* 113b6c Extremely Dark; 154275 Dark Blue like Welcome at top */
  line-height:   130%;
  text-align:    center;
  font-weight:   bold;
}

.description {		   /* Black text of mystery description. */
  font-size:     110%;
  color:         #000000;
  line-height:   115%;
  text-align:    left;
  font-weight:   normal;
}

.big {			    /* Very Dark Blue paragraphs at top of page. */
  font-size:     115%;
  color:         #0c2c50; /* Dark Blue to match bold paragraph words 154275 */
  line-height:   120%;
  text-align:    left;
  font-weight:   normal;
}

.boldwordslt {	 /* Dark Blue bold paragraph words top "Create a Welcoming... */
  font-size:     105%;
  color:         #1E5593;  /* 1E5593 Header blue; 154275 Dark Blue */
  line-height:   110%;
  text-align:    left;
  font-weight:   bold;
}

.boldwordsdk {		 /* Darker Blue bold words top - every other - mtach diamond. */
  font-size:     105%;
  color:         #154275;  /* Dark Blue */
  line-height:   110%;
  text-align:    left;
  font-weight:   bold;
}

.smallslantb {		      /* Blue text italics. */
  font-size:     100%;
  color:         #0c2c50; /* Dark Blue from big to match bold paragraph words 154275 */
  line-height:   115%;
  text-align:    left;
  font-style:   italic;
}

/* Small Header BLUE Links - TOP page above Header - NO underline - Hover Black */
a.hdrbl:link, a.hdrbl:visited, a.hdrbl:active {
  font-size:     90%;
  color:         #1E5593;   /* Header Blue color */
  text-align:    center;
  vertical-align: middle;
  line-height:   1;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:   none;  
}

a.hdrbl:hover {
  color:            #000000;  /* Black */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    none;
}

/* Larger Header BLUE Links - PDF Link btm opening - Hover Blue */
a.openbl:link, a.openbl:visited, a.openbl:active {
  font-size:     95%;
  color:         #1E5593;   /* Header Blue color */
  text-align:    center;
  line-height:   120%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:   thin dotted #b1cded;  /* Faint blue of Header Blue 1e5593 */ 
}

a.openbl:hover {
  color:            #548bc9;  /* 548bc9 A bit lighter than header blue of wide 1e5593 */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    none;  
}

/* Nancy Bond Info link in box at bottom */
a.green:link, a.green:visited, a.green:active {
  font-size:     95%;
  color:         #4d7d1a;  /* Medium Green goes with Bright Neon type green */
  text-align:    center;
  line-height:   120%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:   thin dotted #a6ce7c;  /* Light Green */
}

a.green:hover {
  color:            #446223;  /* Slightly Darker Green than bright green above */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #446223;  
}

/* WHITE Links found at middle of page in Wide */
a.white:link, a.white:visited, a.white:active {
  font-size:     100%;
  color:         #ffffff;   /* white */
  text-align:    center;
  vertical-align: middle;
  line-height:   1;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:   none;  
}

a.white:hover {
  color:            #c8d5e1;   /* Light Blue with gray undertones */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #2f81de;  /* A bit lighter than header blue of wide 1e5593 */
}

/* LIGHT BLUE Links for FOOTER - Hover gray */
a.blue:link, a.blue:visited, a.blue:active {
  font-size:     100%;
  color:         #c8d5e1;   /* Light Blue with gray undertones */
  text-align:    left;
  line-height:   1.5;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #c8d5e1;  
}

a.blue:hover {
  color:            #ffffff;  /* White */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #75828f;  /* Dark Gray */
}

/* No line for image links like Logo and Facebook */
a.none:link, a.none:visited, a.none:hover, a.none:active {
    text-decoration: none;
    border-bottom:   none;
}

/* Opening is the entire section from left to right */
#opening {
	background-color: #ffffff;  /*ebf4fe Lighter baby blue */
	background-image: linear-gradient(#1E5593,#cccdce);   /* from 1E5593 top banner blue to cccdce light gray of page; 7e7e7f darker gray */
	width: 100%;
	margin: auto;
	padding: 0px 0px 0px 0px;  /* top right bottom left */
}

     /* Was For background image with marbled paper */
#backgroundtop {
	width: 100%;
	margin: auto;
	padding: 15px 0px 5px 0px;  /* top right bottom left */
	text-align: center;
}

/* ALL middle column of opening has header "Tips and What to Expect at the Event ..." */
#coltop2 {
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.85); /* White background with 85% opacity was ebf4fe baby blue */
    padding: 15px 0px 5px 4px;  /* top right bottom left Padding does shift a tiny bit to make bottom scroll but worth it.*/
    vertical-align: top;
    max-width: 1180px;
    border-style: ridge;
    border-width: 10px 5px 5px 5px; /* top right bottom left */
    border-color: #2360a4;  /* 2360a4 slightly lighter than banner blue; ecf2f8 extremely light blue */
}

              /* First table making row at top includes welcome */
.intro {
	display: table;
	border-spacing: 0px;
        margin: auto;
}

#welcome {	/* 1st ROW - Welcome */
    display: table-cell;
    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

#host {	/* 2nd Recruit a Friendly Host */
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.30); /* White background with 30% opacity */
    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

#schedule {	/* 3rd Row Mystery Event Schedule */
    display: table-cell;
    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

#schedpicture {	/* 3rd Row Mystery Event Schedule */
    display: table-cell;
    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

#buffet {	/* 3rd Row Mystery Event Schedule */
    display: table-cell;
    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

#playpresent {	/* 4th Play Presentation and Audience Involvement */
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.30); /* White background with 30% opacity */
    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

#clueless {	/* 5th Row Clueless Award */
    display: table-cell;
    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

#accusations {	/* 6th Audience Accusations */
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.30); /* White background with 30% opacity */
    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

#cardpicture {	/* 6.5 Row PICTURE Accusation Cards */
    display: table-cell;
    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

#winners {	/* 7th Row Recognize the Winners */
    display: table-cell;
    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

#thanks {	/* 8th Say Thanks */
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.30); /* White background with 30% opacity */
    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

#pdflink {	/* 9th Say Thanks */
    display: table-cell;

    font-size: 100%;
    padding: 0px 20px 0px 20px; /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

.tablecontents {
	display: table;
	border-spacing: 0px;
        margin: auto;
}

.tablerow {
	display: table-row;
}

     /* 6 columns for 6 links of Home, Preview, Copyright, Overview, Mysteries, Order */
.wide {			
	width: 100%;
	background-color: #1e5593;  /* Dark header blue; was c8dff8 Light baby blue */
        margin: auto;
	padding: 0px 0px 0px 0px;
	word-spacing: 15px;
}

#col00link {        /* Home */
    display: table-cell;
    background-color: #1e5593;  /* Dark header blue; was c8dff8 Light baby blue */
    padding: 0px 5px 2px 5px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
    width:   15%
}

#col0link {        /* Preview */
    display: table-cell;
    background-color: #1e5593;  /* Dark header blue; was c8dff8 Light baby blue */
    padding: 0px 0px 2px 5px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
    width:   17%
}

#col1link {        /* Copyright */
    display: table-cell;
    background-color: #1e5593;  /* Dark header blue; was c8dff8 Light baby blue */
    padding: 0px 5px 2px 0px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
    width:   18%
}
#col2link {        /* Overview */
    display: table-cell;
    background-color: #1e5593;  /* Dark header blue; was c8dff8 Light baby blue */
    padding: 0px 10px 2px 5px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
    width:   18%
}
#col3link {        /* Mysteries */
    display: table-cell;
    background-color: #1e5593;  /* Dark header blue; was c8dff8 Light baby blue */
    padding: 0px 0px 2px 10px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   16%
}

#col4link {        /* Order */
    display: table-cell;
    background-color: #1e5593;  /* Dark header blue; was c8dff8 Light baby blue */
    padding: 0px 0px 2px 0px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
    width:   15%
}

.parawidth {    /* One liner "3 Frequently Asked Questions"  */
	font-size:     130%;
	line-height:   100%;
	max-width: 1200px;
	color:  #154275;     /* 2b2929 Very Dark Gray; 154275 dark blue of Welcome; 462200 Brown Kidnapped */		
        margin: auto;
	padding: 25px 0px 5px 0px;
	text-align: center;
	font-weight:   bold;
}

#howtosection {
	width: 100%;
	margin: auto;
	padding: 0px 0px 0px 0px;  /* top right bottom left */
	text-align: justify;
        line-height:   1.5;
        font-weight:   bold;
}

.tablemysterybtm {    /* BTM section with 3 boxes */
	display: table;
	max-width: 1200px;
	margin: auto;
}

.hdr5 {                  /* hdr5 is headers at bottom of page */
  font-size:     140%;
  color:         #ffffff;
  line-height:   130%;
  text-align:    center;
  font-weight:   bold;
}

.headbtm1 {               /* Bluebird Color Blue head Section about "Why Bluebirds?" */
	display: table-cell;
	width: 29%;
	background-color: #3069AE;   /* 3069AE Bluebird Blue 154275 Dark Welcome Blue */
	margin: auto;
	padding: 10px 4px 10px 4px;     
	border:  1px solid #3069AE;  /* Need border to keep rows collapsed together + lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.headbtm0 {               /* space between */
	display: table-cell;
	width: 4%;
        margin: auto;
	padding: 10px 0px 10px 0px;     
	text-align: center;  /* This makes the header text centered. */
}

.headbtm00 {               /* space between */
	display: table-cell;
	width: 4%;
        margin: auto;
	padding: 10px 0px 10px 0px;     
	text-align: center;  /* This makes the header text centered. */
}

.headbtm2 {               /* Gray head Section "Why called Stuff 4 Church?" */
	display: table-cell;
	width: 29%;
	background-color: #8b8b8b;     /* 8b8b8b Medium Gray */ 
        margin: auto;
	padding: 10px 4px 10px 4px;     
	border:  1px solid #8b8b8b;  /* Need border to keep rows collapsed together + lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.headbtm3 {               /* Green head Section, "Why Psalm 1:1-3?" */
	display: table-cell;
	width: 29%;
	background-color: #539717;  /* 539717 Missing Greenbacks header green */
        margin: auto;
	padding: 10px 4px 10px 4px;     
	border:  1px solid #539717;  /* Need border to keep rows collapsed together + lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.bodybtm1 {		/* "Why Bluebirds?" */
    display: table-cell;
    background-color: #ebf4fe;   /* Extremely light Blue */
    padding: 5px 7px 5px 7px;
    vertical-align: top;
    text-align: justify;
    border-bottom:  3px solid #3069AE;   /* Bluebird Blue */
    border-left:  3px solid #3069AE;
    border-right: 3px solid #3069AE;
}

.bodybtm2 {		/* "Why called Stuff 4 Church?" */
    display: table-cell;
    background-color: #e7e6e6;        /* e7e6e6 Pale Gray */
    padding: 5px 7px 5px 7px;
    vertical-align: top;
    text-align: justify;
    border-bottom:  3px solid #8b8b8b;   /* 8b8b8b Medium Gray */
    border-left:  3px solid #8b8b8b;
    border-right: 3px solid #8b8b8b;
}
.bodybtm3 {		/* "Why Psalm 1:1-3?" */
    display: table-cell;
    background-color: #f9f8f7;  /* Yellowish White */
    padding: 5px 7px 5px 7px;
    vertical-align: top;
    text-align: justify;
    border-bottom:  3px solid #539717;   /* 539717 Missing Greenbacks header green */
    border-left:  3px solid #539717;
    border-right: 3px solid #539717;
}

    /* 5 columns at bottom in closing with logo, Web links, Facebook, YouTube, Address and Email, Baby Blue */
#enclosure {
	background-color: #dadcdd;  /*Light gray */
	width: 100%;
	margin: auto;
	padding: 7px 0px 0px 0px;   /* top right bottom left */
}

#closing {
	background-color: #dadcdd;  /*Old d7dce2 Light gray */
	max-width: 1300px;
	margin: auto;
	padding: 0px 0px 0px 0px;   /* top right bottom left */
}

#colbtm1 {   /* S4C Logo */
    display: table-cell;
    background-color: #dadcdd;  /* Light gray */
    padding: 0px 0px 0px 8px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   18%
}

#colbtm2 {    /* 3 sites - T4C, Creations, Etsy */
    display: table-cell;
    background-color: #dadcdd;  /* Light gray */
    padding: 0px 0px 0px 15px;  /* top right bottom left */
    vertical-align: middle;
    text-align: left;
    line-height:   .6;
    font-weight:   bold;
    width:   21%
}
#colbtm3 {    /* Facebook and Youtube */
    display: table-cell;
    background-color: #dadcdd;  /* Light gray */
    padding: 0px 0px 0px 30px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   18%
}
#colbtm4 {   /* Address and Email */
    display: table-cell;
    background-color: #dadcdd;  /*Old d7dce2 Light gray */
    padding: 0px 0px 0px 20px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   24%
}

#colbtm5 {     /* baby bluebird */
    display: table-cell;
    background-color: #dadcdd;  /* Light gray */
    padding: 0px 5px 0px 20px;  /* top right bottom left */
    vertical-align: middle;
    text-align: right;
    width:   19%
}

#enclosefoot {
	background-color: #55626d;  /*Dark gray */
	width: 100%;
	margin: auto;
	padding: 0px 0px 0px 0px;
}

footer {
  background-color: #55626d;      /* 1e5593 Was dark blue or d7dce2 light gray*/
  color:            #c8d5e1;  /* Light Blue with gray undertones */
  text-align:       center;
  padding:          10px 20px 10px 0px;  /* top right bottom left */
  margin:           auto;                       /* IMPORTANT. Auto made this footer centered. I accidentally had a 0 with no px. */
  font-size:        90%;
  max-width:        1200px;
  line-height:      1.1;
}

     /* Used in FOOTER */
.italicsmblue {
   font-size:     100%; 
   color:         #c8d5e1;  /* light blue */
   text-align:    center;
   line-height:   100%;
   font-style:    italic;
   line-height:   1.1;
}

a:link {
  color:            #154275; /* Dark Blue like Welcome at top */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #1E5593;
}

a:hover {
  color:            #ffffff;  /* white */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #ffffff;
}
a:visited {
  color:            #1E5593;  /* Slightly lighter Dark Blue Header Color */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #1E5593;
}