/* nancyphone.css Created by Nancy Bond for Nancy Bond Info for screens like phones 550 or smaller */

body { 
  background-color: #a2afbb;   /* a2afbb light bluish gray; ebf4fe Very light baby blue; dadcdd light gray; cccdce medium gray */
  font-family:      Tahoma, Arial, sans-serif;
  font-size:        14px;
  margin:           auto;
  width:  480px;
}

#pagerectangle {
	background-color: #ebf4fe;  /* ebf4fe Very light baby blue; was c8d5e1 Light Blue with gray undertones */
	margin: auto;
	width:  480px;  /* was 480px */
}

header {
	width:       100%;
	margin:      auto;
	background-color: #1f5593;  /* 0d2847 extremely dark blue; b8d6f8 med blue; 1f5593 Top Banner Blue Color to Match */
}

/* For the links at top below header banner */
.toplinks {
	background-color: #ffffff;  /* White */
	width: 100%;    /* max-width: 650px; */
	margin: auto;
	padding: 0px 0px 0px 0px;  /* top right bottom left */
	text-align: center;
	border-bottom:1px solid #c1d7ef;  /* A faint blue */
}

#nav1 {			/* Home */
    display: table-cell;
    padding: 2px 15px 4px 10px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   11%
}

#nava {			/* Preview */
    display: table-cell;
    padding: 2px 12px 4px 10px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   12.3%
}

#navb {			/* Order */
    display: table-cell;
    padding: 2px 15px 4px 15px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   12.3%
}
#navc {			/* Mysteries */
    display: table-cell;
    padding: 2px 15px 4px 15px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   15.6%
}
#navd {			/* Minis */
    display: table-cell;
    padding: 2px 12px 4px 15px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   12.3%
}

#nave {			/* Christmas */
    display: table-cell;
    padding: 2px 15px 4px 15px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   12.3%
}

.navphone {     /* Makes nav HEADER inline so span can be used. */
 display: inline;
}

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

.center {   /* Used for HEADER */
  display: inline;
  text-align: center;
}

.tablecontents {
	display: table;
        margin: auto;
}

.tablerow {
	display: table-row;
}

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

.big {	  /* Blue paragraphs at top of page. */
  font-size:     105%;
  color:       #0c2c50;       /* 0c2c50 Very Dark Blue 54626b */
  line-height:   115%;
  text-align:    left;
  font-weight:   normal;
  text-align:    justify;
}

.description {	    /* Black text of BOTTOM boxes S4C and Psalms. */
  font-size:     100%;
  color:         #000000; 
  line-height:   105%;
  text-align:    center;
  font-weight:   normal;
}

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

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

.boldwordslt {  /* Dark Blue bold header words - every other - match diamond. */
  font-size:     105%;
  color:         #1E5593;  /* 1E5593 Header blue; 154275 Dark Blue */
  line-height:   105%;
  text-align:    left;
  font-weight:   bold;
}

/* Small Header BLUE Links - TOP page below 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 - Underline - Hover Blue */
a.openbl:link, a.openbl:visited, a.openbl:active {
  font-size:     100%;
  color:         #1E5593;   /* Header Blue color */
  text-align:    center;
  vertical-align: middle;
  line-height:   1;
  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;
}

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

/* Nancy Bond Info link in box at bottom */
a.green:link, a.green:visited, a.green:active {
  font-size:     105%;
  color:         #4d7d1a;  /* Medium Green goes with Bright Neon type green */
  text-align:    center;
  line-height:   115%;
  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;
}

/* Nancy Bond Creations Link at BOTTOM; Darkest Green Leaf and darker in Logo */
a.greenbtm:link, a.greenbtm:visited, a.greenbtm:active {
  font-size:     90%;
  color:         #246c2d;   /* Darkest Green and darker Leaf in Logo */
  text-align:    center;
  line-height:   105%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #3ba749;  
}

a.greenbtm:hover {
  color:            #639270;  /* Light Green */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #639270;
}

/* Darker Purple from Theater for Church Curtain */
a.purple:link, a.purple:visited, a.purple:active {
  font-size:     90%;
  color:         #420441;   /* Darker Purple from Theater for Church Curtain 5f015e is curtain color */
  text-align:    center;
  line-height:   105%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #420441;  
}

a.purple:hover {
  color:            #735773;  /* Light Purple */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #735773;
}

/* Deep Aqua Blue from Peacock */
a.deepblue:link, a.deepblue:visited, a.deepblue:active {
  font-size:     90%;
  color:         #185764;   /* Deep Aqua Blue from Peacock */
  text-align:    center;
  line-height:   105%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #185764;  
}

a.deepblue:hover {
  color:            #447c88;  /* Light Aqua Blue */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #447c88;
}

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

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

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

/* background-image: linear-gradient(#f4f8fd,#ebf4fe,#d2e5f9); ebf4fe very light blue; c8dff8 light; d2e5f9 lightest; f4f8fd lighter */

#opening {
	background-color: #f9fcff;  /* f9fcff Almost white lt blue; ebf4fe lt baby blue; 8d5e1 Lt Blue gray undertones */
	width: 100%;                 /* was 450px */
	margin: auto;
	padding: 0px 0px 0px 0px;
}

/* ALL middle column of opening has header "Tips and What to Expect at the Event ..." */
#coltop2 {
    display: table-cell;
    padding: 15px 0px 10px 0px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;   /* Centers heading */
}

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

#welcome {		/* 1st ROW - Welcome */
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.20); /* White background with 20% opacity */
    max-width:   450px;
    font-size: 100%;
    padding: 0px 15px 0px 15px;  /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

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

#schedule {	/* 3rd Row Mystery Event Schedule */
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.30); /* White background with 30% opacity */
    max-width:   450px;
    font-size: 100%;
    padding: 0px 15px 0px 15px;  /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

#schedpicture {	/* 3rd Row Mystery Event Schedule */
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.30); /* White background with 30% opacity */
    max-width:   450px;
    font-size: 100%;
    padding: 0px 15px 0px 15px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

#buffet {	/* 3rd Row Mystery Event Schedule */
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.30); /* White background with 30% opacity */
    max-width:   450px;
    font-size: 100%;
    padding: 0px 15px 0px 15px;  /* 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.60); /* White background with 60% opacity */
    max-width:   450px;
    font-size: 100%;
    padding: 0px 15px 0px 15px;  /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

#clueless {	/* 5th Row Clueless Award */
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.30); /* White background with 30% opacity */
    max-width:   450px;
    font-size: 100%;
    padding: 0px 15px 0px 15px;  /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

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

#cardpicture {	/* 6.5 Row PICTURE Accusation Cards */
    display: table-cell;

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

#winners {	/* 7th Row Recognize the Winners */
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.30); /* White background with 30% opacity */
    max-width:   450px;
    font-size: 100%;
    padding: 0px 15px 0px 15px;  /* top right bottom left */
    vertical-align: top;
    text-align: left;
}

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

/* 5 columns for 5 links of Preview, Copyright, Overview, Mysteries, Order */
.wide {			
	font-size:     90%;
	line-height:   10%;
	max-width: 550px;
	background-color: #1e5593;  /* Dark header blue; was c8dff8 Light baby blue */
        margin: auto;
	padding: 0px 0px 0px 0px;  /* top right bottom left */
	text-align: center;
}

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

#col0link {        /* Guidelines PDF */
    display: table-cell;
    background-color: #1e5593;  /* Dark header blue; was c8dff8 Light baby blue */
    padding: 0px 10px 2px 3px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

#col1link {        /* Copyright PDF */
    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;
}
#col2link {        /* Overview PDF */
    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;
}
#col3link {        /* Mysteries */
    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;
}

#col4link {        /* Contact */
    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;
}

.parawidth {		/* "Frequently Asked Questions" */
	font-size: 110%;
	line-height: 100%;
	max-width: 550px;
	color:  #0c2c50;     /* 0c2c50 Very Dark blue; 2b2929 Very Dark Gray; 154275 dark blue of Welcome */	
        margin: auto;
	padding: 20px 0px 0px 0px;  /* top right bottom left */
	text-align: center;
	font-weight:   bold;
}

#howtosection {  
	width: 100%;   /* was 450px */
	margin: auto;
	padding: 0px 0px 20px 0px;  /* top right bottom left */
	text-align: justify;
}

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

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

.headbtm1 {               /* Not Shown on Phone - bluebird info */
	display: none;
	width: 0%;
        margin: auto;
	padding: 0px 0px 0px 0px;     
	border:  1px solid #7f3779;  /* Need border to keep rows collapsed together + lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.headbtm00 {               /* space before boxes */
	display: none;
	width: 0%;
        margin: auto;
	padding: 0px 0px 0px 0px;     
	text-align: center;  /* This makes the header text centered. */
}

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

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

.headbtm3 {               /* Green head Section, Bible Verse Psalm 1:1-3 */
	display: table-cell;
	width: 45%;
	background-color: #77c029;  /* Green */
        margin: auto;
	padding: 5px 3px 5px 3px;     
	border:  1px solid #77c029;  /* Need border to keep rows collapsed together + lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.bodybtm1 {		/* not shown: bluebird info */
    display: none;
    background-color: #c5abc2;
    padding: 6px 8px 6px 8px;
    vertical-align: top;
    text-align: justify;
    border-bottom:  3px solid #7f3779;
    border-left:  3px solid #7f3779;
    border-right: 3px solid #7f3779;
}

.bodybtm2 {		/* Why Stuff 4 Church? */
    display: table-cell;
    background-color: #ebf4fe;   /* Extremely light Blue */
    padding: 6px 8px 6px 8px;
    vertical-align: middle;
    text-align: justify;
    border-bottom:  3px solid #3069AE;  /* 3069AE Bluebird Blue */
    border-left:  3px solid #3069AE;
    border-right: 3px solid #3069AE;
}
.bodybtm3 {		/* Why Ps 1:1-3? */
    display: table-cell;
    background-color: #f9f8f7;  /* Yellowish White */
    padding: 6px 8px 6px 8px;
    vertical-align: middle;
    text-align: justify;
    border-bottom:  3px solid #77c029;  /* Bright Green */
    border-left:  3px solid #77c029;  /* Bright Green */
    border-right: 3px solid #77c029;  /* Bright Green */
}

#enclosure {
	background-color: #ebf4fe;  /* Very light baby blue; c8dff8 Light baby blue; cccdce Medium gray; was d7dce2 Light gray */
	width: 480px;
	margin: auto;
	padding: 6px 0px 0px 0px; /* top right bottom left */
}

#closing {
	background-color: #ebf4fe;  /* Very light baby blue; c8dff8 Light baby blue; cccdce Medium gray; was d7dce2 Light gray */
	width: 450px;
	margin: auto;
	padding: 0px 0px 0px 0px;
}

#colbtm1 {   /* S4C Logo */
    display: table-cell;
    background-color: #ebf4fe;  /* Very light baby blue; c8dff8 Light baby blue; cccdce Medium gray; was d7dce2 Light gray */
    padding: 0px 2px 0px 4px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   20%
}

#colbtm2 {   /* T4C, Creations, Etsy Links */
    display: table-cell;
    background-color: #ebf4fe;  /* Very light baby blue; c8dff8 Light baby blue; cccdce Medium gray; was d7dce2 Light gray */
    padding: 0px 5px 0px 5px;  /* top right bottom left */
    text-align: center;
    line-height:   200%;
    font-weight:   bold;
    vertical-align: middle;
    width:   60%
}
#colbtm3 {   /* NOT SHOWN: Facebook and YouTube */
    display: none;
    background-color: #ebf4fe;  /* Very light baby blue; c8dff8 Light baby blue; cccdce Medium gray; was d7dce2 Light gray */
    padding: 0px 5px 0px 4px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    line-height:   150%;
    width:   0%
}
#colbtm4 {     /* NOT SHOWN: Address and Email */
    display: none;
    background-color: #ebf4fe;  /* Very light baby blue; c8dff8 Light baby blue; cccdce Medium gray; was d7dce2 Light gray */
    padding: 0px 0px 0px 0px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

#colbtm5 {   /* Baby Bluebird */
    display: table-cell;
    background-color: #ebf4fe;  /* Very light baby blue; c8dff8 Light baby blue; cccdce Medium gray; was d7dce2 Light gray */
    padding: 0px 0px 0px 0px;  /* top right bottom left */
    vertical-align: middle;
    text-align: right;
    width:   20%
}

#enclosefoot {
	background-color: #223a51;  /* Dark blue */
	width: 480px;
	margin: auto;
	padding: 0px 0px 0px 0px; /* top right bottom left */
}

footer {
  background-color: #223a51;
  color:            #c8d5e1;   /* Light Blue with gray undertones */
  text-align:       center;
  padding:          5px 0px 3px 0px;  /* top right bottom left */
  margin:           auto;
  font-size:        90%;
  max-width: 480px;
  line-height:      1.5;
}

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

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

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