/* contactphone.css Created by Nancy Bond for Contact page for screens like phones 550 or smaller */

body { 
  background-color: #ebf4fe;   /* ebf4fe lighter 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;  /* was c8d5e1 Light Blue with gray undertones */    /* Very light baby blue */
	margin: auto;
	width:  480px;  /* was 480px */
}

header {
	text-align:  center;
	width:       100%;
	margin:      auto;
}

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

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

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

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

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

.navphone { /* This makes the nav header inline so that span can be used. */
 display: inline;
}

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

/* Header and top "I look forward to hearing ..." "Please email question ..." */
.center {
  display: inline;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

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

.tablerow {
	display: table-row;
}

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

/* Dark Blue bold: Mailing Address, Phone ... */
.boldwords {
  font-size:     105%;
  color:         #154275;
  line-height:   105%;
  text-align:    left;
  font-weight:   bold;
}

/* hdr1 is I look forward to hearing from you */
.hdr1 {
  font-size:     140%;
  color:         #004690;  /* Dark Blue color of S4C top image words */
  line-height:   160%;
  text-align:    center;
  font-weight:   bold;
}

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

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

/* Larger Blue italics: If you are a small non-profit group */
.smallslantc {
  font-size:     100%;
  color:         #0c2c50; /* Dark Blue from big to match bold paragraph words 154275 */
  line-height:   105%;
  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 NOT white */
  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;
}

/* LG DARK BLUE Link for NANCY BOND */
a.lgdarkbl:link, a.lgdarkbl:visited, a.lgdarkbl:active {
  font-size:     160%;
  color:         #004690;  /* Dark Blue color of S4C top image words */
  text-align:    center;
  vertical-align: middle;
  line-height:   160%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:   thin dotted #a2b8d0;  /* a2b8d0 A lighter and grayish blue  */
}

a.lgdarkbl:hover {
  color:            #2371c4;   /* Light Blue with gray undertones */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    none;  
}

/* Nancy Bond Creations Link at BOTTOM; Darkest Green Leaf and darker in Logo */
a.greenbtm:link, a.greenbtm:visited, a.greenbtm:active {
  font-size:     100%;
  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:     100%;
  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:     100%;
  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:     100%;
  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 #75828f;  /* Dark Gray */
}

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

/* Opening is MAIN Section */
#opening {
	background-color: #c8d5e1;  /* Light Blue with gray undertones */
	width: 100%;                 /* was 450px */
	margin: auto;
	padding: 0px 0px 0px 0px;
	text-align: center;
}

/* cell containing 1 row narrow and 1 row 2 columns: col1bluebird and col2mail */
#coltop2 {
    display: table-cell;
    background-color: #ebf4fe;  /* Lighter baby blue */
    padding: 0px 0px 0px 0px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

/* Table row I look forawrd to hearing ..." Both */
.narrow {
    display: table-cell;
    background-color: #ebf4fe;  /* Lighter baby blue */
    padding: 0px 10px 0px 10px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
    margin: auto;
}

.intro {
	display: none;
        margin: auto;
}

/* Table holds col1lbluebird and col2mail */
.introphone {
  display: table;
	background-color: #ebf4fe;  /* Lighter baby blue */
	width: 430px;         /* was 450px but caused bottom scroll issues */
	margin: auto;
	padding: 0px 6px 0px 4px;  /* top right bottom left */
	text-align: justify;
}

/* Column 1 - Picture: Bluebird on House ready to fledge */
.col1bluebird {
    display: table-cell;
    background-color: #ebf4fe;   /* Very light baby blue */
    padding: 0px 10px 0px 4px;  /* top right bottom left */
    vertical-align: middle;
    text-align: top;
}

/* Column 2 - Mailing Address, Phone, Time */
#col2mail {		/* Wording Mailing Address, Phone, Hours */
  display: table-cell;
  background-color: #ebf4fe;   /* Very light baby blue */
  font-size:   105%;
  color:       #1E5593;       /* Header blue */
  padding:     0px 6px 0px 0px;  /* top right bottom left */
  vertical-align: middle;
  text-align: left;
}

/* Email Address ... If you're a small group ... discount */
#col1includes {
    display: table-cell;
    max-width:   450px;
    font-size: 100%;
    background-color: #ebf4fe;   /* Very light baby blue */
    padding: 0px 15px 0px 15px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

/* Used to make dark line on Contact page of large screen. Hide from phone. */
.wide {			
    display: none;   /* Added display for contact page to show no line. */
	font-size:     90%;
	line-height:   10%;
	width: 100%;
	background-color: #0c2c50;  /* Dark Blue */
        margin: auto;
	padding: 0px 0px 0px 0px;  /* top right bottom left */
}

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

#closing {
	background-color: #d7dce2;  /* Light gray */
        width: 450px;
	margin: auto;
	padding: 0px 0px 0px 0px;
}

#colbtm1 {     /* Logo */
    display: table-cell;
    background-color: #d7dce2;  /* Light gray */
    padding: 0px 2px 0px 4px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   20%;
}

#colbtm2 {     /* T4C, NB Creations, Etsy */
    display: table-cell;
    background-color: #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%;            /* No semi colon. changed on aug 20 2024 */
}
#colbtm3 {     /* Facebook Youtube */
    display: none;
    background-color: #d7dce2;  /* Light gray */
    padding: 0px 5px 0px 4px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    line-height:   150%;
    width:   0%
}
#colbtm4 {     /* Address Email */
    display: none;
    background-color: #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: #d7dce2;  /* Light gray */
    padding: 3px 0px 0px 0px;  /* top right bottom left */
    vertical-align: middle;
    text-align: right;
    width:   20%;
}

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

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