/* christmasphone.css Created by Nancy Bond for Christmas page for screens like phones 650 or smaller */

body { 
  background-color: #dadcdd;   /*dadcdd light gray cccdce medium gray */
  background-image: linear-gradient(#2d2c2d,#b3b6b7,#dadcdd,#2d2c2d);   /* 491e4a dark purple; b3b6b7 medium light gray; dadcdd light gray; 2d2c2d Dark gray in purple family; */
  font-family:      Tahoma, Arial, sans-serif;
  font-size:        14px;
  width:  480px;  
  margin:           auto;
}

#pagerectangle {
	background-color: #ffffff;  /* white */
	margin: auto;
	width:  480px;  
}

header {
	background-color: #361337;  /* 361337 Darkest Purple; 491e4a Darker Purple; 81bb43 Ribbon Green; 39650c Darkest Green; */
	width: 100%;    /* max-width: 650px; */
	margin: auto;
	padding: 0px 0px 0px 0px;  /* top right bottom left */
	text-align: left;
        color: ffffff;
}

/* NOT USED Responsive Top Header Logo Theater 4 Church Phone */
.imgphone1 {
  max-width: 100%;  /* width: 480px; */
  height: auto;  /* height: 100px; */
  object-fit: cover;
}

/* For the links at top below header banner */
.toplinks {
	background-color: #361337;  /* 361337 Darkest Purple; 491e4a Darker Purple; 81bb43 Ribbon Green; 39650c Darkest Green; */
	width: 100%;    /* max-width: 650px; */
	margin: auto;
	padding: 0px 0px 0px 0px;  /* top right bottom left */
	text-align: center;
        color: ffffff;
}

#nava {
    display: table-cell;
    background-color: #361337;  /* 361337 Darkest Purple; 491e4a Darker Purple; 81bb43 Ribbon Green; */
    padding: 2px 15px 4px 10px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   14.3%
}

#navb {
    display: table-cell;
    background-color: #361337;  /* 361337 Darkest Purple; 491e4a Darker Purple; 81bb43 Ribbon Green */
    padding: 2px 15px 4px 20px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   14.3%
}
#navc {
    display: table-cell;
    background-color: #361337;  /* 361337 Darkest Purple; 491e4a Darker Purple; 81bb43 Ribbon Green */
    padding: 2px 15px 4px 20px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   16.6%
}
#navd {
    display: table-cell;
    background-color: #361337;  /* 361337 Darkest Purple; 491e4a Darker Purple; 81bb43 Ribbon Green */
    padding: 2px 15px 4px 20px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   14.3%
}

#nave {
    display: table-cell;
    background-color: #361337;  /* 361337 Darkest Purple; 491e4a Darker Purple; 81bb43 Ribbon Green */
    padding: 2px 15px 4px 20px;  /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    width:   14.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;
}

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


.center {
  display: inline;
  text-align: center;
  margin-left: 0 auto;
  margin-right: 0 auto;
}
                   /* Center the BLUE ribbon. */
.cntrimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

.big {			  /* Darkest Green almost black paragraphs at top of page. */
  font-size:     105%;
  color:       #131c09;  /* 131c09 Darkest Green almost black */
  line-height:   115%;
  text-align:    left;
  font-weight:   normal;
  text-align:    justify;
}

.boldwords {		  /* Dark Green bold paragraph words top of page. */
  font-size:     105%;
  color:         #4a830b;  /* 4a830b Darker Bright Green */
  line-height:   105%;
  text-align:    left;
  font-weight:   bold;
}

.bold {			  /* Bold, black Used This Gift of Love Music info */
  font-size:     100%;
  color:         #000000;
  line-height:   115%;
  text-align:    center;
  font-weight:   bold;
}
.boldlink {		  /* Hidden: Dark Purple link words at top of page like: Preview, How to Order, ... */
  font-size:     115%;
  color:         #422752;
  line-height:   110%;
  text-align:    center;
  font-weight:   bold;
}

#opening {
	background-color: #d0c3d0;  /* 491e4a darkest purple; d0c3d0 light grayish purple; cccdce a little darker gray; e8e8e8 light gray */
	background-image: linear-gradient(#491e4a,#d0c3d0);   /* from dark purple like above header to light grayish purple */
	width: 100%;                 /* was 450px */
	margin: auto;
	padding: 0px 0px 0px 0px;
	text-align: center;
}

 /* Padding around wording at top. */
.padded {     
	padding: 15px 2px 0px 2px;  /* top right bottom left */
}

/* Padding around wording in middle. */
.padding {
	padding: 0px 2px 0px 2px;  /* top right bottom left */
        text-align: center;
}

 /* Padding around logo at bottom. */
.padlogo {     
	padding: 0px 40px 0px 40px;  /* top right bottom left */
}


                   /* DELETE. Not seeing this one anymore. */
.intro {
	display: none;
        margin: auto;
}
                                      /* DELETE. Not seeing this one anymore. */
.introphone {
	background-color: #ffffff;  /* white */
	width: 100%;                 /* was 450px but caused bottom scroll issues */
	margin: auto;
	padding: 0px 6px 0px 4px;  /* top right bottom left */
	text-align: justify;
}

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

.tablerow {
	display: table-row;
}

.border {
	border:1px solid #54626b;  /* dark gray blue undertone */
}

#coltop2 {                           /* Main Information at top middle */
    display: table-cell;
    background-color: #ffffff;  /* white */
    padding: 0px 7px 0px 7px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
    max-width:   480px;
}

.col2picture {			/* HIDDEN FROM PHONE. Picture: Gift of Love */
  display: none;
    background-color: none; /* White from coltop2 */
    padding:    0px 0px 0px 5px;  /* top right bottom left */
  vertical-align: middle;
  text-align: center;
  font-size:   105%;
}

.col1picture {			/* HIDDEN FROM PHONE. 3 Pictures: Cookin Up Christmas, ribbon, angel Michael */
    display: none;
    background-color: none; /* White from coltop2 */
    padding: 0px 7px 0px 7px;  /* top right bottom left */
    vertical-align: middle;
    text-align: top;
}

           /* HIDDEN FROM LARGE SCREEN. Includes photo 320 wide of Cast This Gift of Love - within the same row so it's stacked. */
#col2phone {			/* Main Wording at top: Who uses these Christmas Plays? ... */
  display: table-cell;
  max-width:   480px;
  background-color: none; /* White from coltop2 */
  font-size:   105%;
  padding:     0px 7px 0px 7px;  /* top right bottom left */
  vertical-align: top;
  text-align: center;
}

#col1includes {		/* "How do I get a Free Preview?" */
    display: table-cell;
    max-width:   480px;
    font-size: 105%;
    padding: 0px 15px 0px 15px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

                                              /* 5 columns for the navigation links before descriptions */

.wide {			
	font-size:     90%;
	line-height:   10%;
	width: 100%;  /* max-width: 650px */
	background-color: #454444;  /* Dark Gray; was c8dff8 Light baby blue */
        margin: auto;
	padding: 0px 0px 0px 0px;  /* top right bottom left */
	text-align: center;
	word-spacing: 5px;
}

/* Bold, white Links for middle of page */
a.light:link, a.light:visited, a.light.hover, a.light: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;  
}

#col0link {
    display: table-cell;
    background-color: #454444;  /* Dark Gray */
    padding: 0px 18px 2px 5px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

#col1link {
    display: table-cell;
    background-color: #454444;  /* Dark Gray */
    padding: 0px 10px 2px 5px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

#col2link {
    display: table-cell;
    background-color: #454444;  /* Dark Gray */
    padding: 0px 10px 2px 5px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

#col3link {
    display: table-cell;
    background-color: #454444;  /* Dark Gray */
    padding: 0px 10px 2px 5px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
}

#col4link {
    display: table-cell;
    background-color: #454444;  /* Dark Gray */
    padding: 0px 5px 2px 5px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
}


.parawidth {		/* "My one Medium ..." changes size and padding for each screen. Font is dark brown */
	font-size:     110%;
	line-height:   100%;
	width: 450px;
	color:  #462200;   /* Dark Brown */	
        margin: auto;
	padding: 20px 0px 0px 0px;  /* top right bottom left */
	text-align: center;
	font-weight:   bold;
}

                           /* Start Mystery Descriptions */
.wording {
	background-color: #dadcdd;  /* dadcdd light gray; cccdce medium gray; c8d5e1 Light Blue with gray undertones */
	width: 450px;                 /* was 100% */
	margin: auto;
	padding: 0px 0px 0px 0px;
	text-align: justify;
}

                            /* Kidnapped First mystery description table ... */
.kidnapped2 {
    display: table-cell;
    background-color: ECF4E1; /* light green */
    padding: 0px 0px 0px 0px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
    width:   450px;
}

.headkidnapped {	/* Brown head Section, green border - Kidnapped. */
	display: table-cell;
	width: 450px;
	background-color: #462200;
        margin: auto;
	padding: 5px 9px 5px 10px;  /* IMP for lining up with bottom section. Aug 2024 top right bottom left */   
	border:  1px solid #462200;  /* Need this border to keep the rows collapsed together and lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.hdr1 {            /* hdr1 is top + 3rd lines mystery descrip hdr box. */
  font-size:     90%;
  color:         #ffffff;
  line-height:   100%;
  text-align:    center;
  font-weight:   normal;
}

.hdr2 {              /* hdr2 is 2nd line with title of mystery. */
  font-size:     120%;
  color:         #ffffff;
  line-height:   120%;
  text-align:    center;
  font-weight:   bold;
  font-style:    italic;
}

.rowdescription {	/* Description Kidnapped ... */
    display: table-cell;
    font-size:     105%;
    background-color: #CAAC86;    /*light brown */
    padding: 5px 10px 5px 10px;      /* top right bottom left */
    vertical-align: top;
    border-left:  3px solid #462200;
    border-right:  3px solid #462200;
    text-align:    justify;
}

.kidnappedbold {
  font-size:     105%;
  color:         #462200;    /* Bold, brown Synopsis */
  text-align:    left;
  line-height:   100%;
  font-weight:   bold;
}

/* Bold, green Links for Copyright, Preview and Order in Serengeti Table */
a.brown:link, a.brown:visited, a.brown.hover, a.brown:active {
  font-size:     90%;
  color:         #462200;    /* Bold, brown Synopsis */
  text-align:    left;
  line-height:   105%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #462200;
}

.description {	     /* Black text of mystery cast. */
  font-size:     100%;
  color:         #000000; 
  line-height:   105%;
  text-align:    center;
  font-weight:   normal;
}

tablemystery4phone {
	display: table;
	width: 450px;
	margin: auto;
}
.col1cast {	        /* Cast Kidnapped */
    display: table-cell;
    width: 450px;
    background-color: #CAAC86;    /*light brown */
    padding: 0px 5px 0px 10px;
    vertical-align: top;
    text-align: left;
    border-bottom:  3px solid #462200;  /* Dark brown like header */
    border-left:  3px solid #462200;  /* Dark brown like header */
    border-right:  3px solid #462200;  /* Dark brown like header */
}

.col2logo {	        /* Logo Kidnapped */
    display: table-cell;
    width: 450px;
    background-color: #CAAC86;    /*light brown */
    padding: 0px 10px 5px 10px;     /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    margin: auto;
}

.parawidth2 {	        /* One liner "3 mini mysteries ..." */
	font-size:     110%;
	line-height:   100%;
	width: 450px;
	color:  #2b2929;     /* 2b2929 Very Dark Gray */	
        margin: auto;
	padding: 20px 0px 0px 0px;  /* top right bottom left */
	text-align: center;
	font-weight:   bold;
}


                            /* The Cupcake Caper mystery description table ... */
.cupcake2 {
    display: table-cell;
    background-color: #F6BCDC;    /*light pink */
    padding: 0px 0px 0px 0px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
    width:   450px;
}

.headcupcake {	                  /* Pink head Section, The Cupcake Caper */
	display: table-cell;
	width: 450px;
	background-color: #E500A1;   /*Bright Pink header */
        margin: auto;
	padding: 5px 9px 5px 10px;  /* IMP for lining up with bottom section. Aug 2024 top right bottom left */   
	border:  1px solid #E500A1;  /* Need this border to keep the rows collapsed together and lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.cupcakebold {
  font-size:     105%;
  color:         #E500A1;   /*Bright Pink Synopsis */
  text-align:    left;
  line-height:   100%;
  font-weight:   bold;
}

/* Bold, green Links for Copyright, Preview and Order in Serengeti Table */
a.pink:link, a.pink:visited, a.pink.hover, a.pink:active {
  font-size:     90%;
  color:         #E500A1;   /*Bright Pink */
  text-align:    left;
  line-height:   105%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #E500A1;
}

tablemysterycakephone {
	display: table;
	width: 450px;
	margin: auto;
}

.rowdescriptiona {	/* Description The Cupcake Caper ... */
    display: table-cell;
    font-size:     105%;
    background-color: #F6BCDC;    /*light pink */
    padding: 5px 10px 5px 10px;      /* top right bottom left */
    vertical-align: top;
    border-left:  3px solid #E500A1;   /*Dark Pink header */
    border-right:  3px solid #E500A1;   /*Dark Pink header */
    text-align:    justify;
}

.descriptiona {	     /* Black text of mystery cast. */
  font-size:     100%;
  color:         #000000; 
  line-height:   105%;
  text-align:    center;
  font-weight:   normal;
}

.colacast {	        /* Cast The Cupcake Caper */
    display: table-cell;
    width: 450px;
    background-color: #F6BCDC;    /*light pink */
    padding: 0px 5px 0px 10px;
    vertical-align: top;
    text-align: left;
    border-bottom:  3px solid #E500A1;   /*Dark Pink header */
    border-left:  3px solid #E500A1;   /*Dark Pink header */
    border-right:  3px solid #E500A1;   /*Dark Pink header */
}

.colalogo {	        /* Logo The Cupcake Caper */
    display: table-cell;
    width: 450px;
    background-color: #F6BCDC;    /*light pink */
    padding: 0px 10px 5px 10px;     /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    margin: auto;
}
                      /*Starts The Surprise Party Bamboozle */
.party2 {
    display: table-cell;
    background-color: #B6CBE3;    /*light blue */
    padding: 0px 0px 0px 0px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
    width:   450px;
}

.headparty {	/* blue head Section, blue border - party. */
	display: table-cell;
	width: 450px;
	background-color: #2362AA;  /* Dark Blue Party */
        margin: auto;
	padding: 5px 9px 5px 10px;  /* IMP for lining up with bottom section. Aug 2024 top right bottom left */   
	border:  1px solid #462200;  /* Need this border to keep the rows collapsed together and lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.rowdescriptionb {	/* Description party ... */
    display: table-cell;
    font-size:     105%;
    background-color: #B6CBE3;    /*light blue */
    padding: 5px 10px 5px 10px;      /* top right bottom left */
    vertical-align: top;
    border-left:  3px solid #2362AA;  /* Dark Blue Party */
    border-right:  3px solid #2362AA;  /* Dark Blue Party */
    text-align:    justify;
}

.partybold {
  font-size:     105%;
  color:         #2362AA;  /* Dark Blue Party */
  text-align:    left;
  line-height:   100%;
  font-weight:   bold;
}

/* Bold, blue Links for Copyright, Preview and Order in party Table */
a.party:link, a.party:visited, a.party.hover, a.party:active {
  font-size:     90%;
  color:         #2362AA;  /* Dark Blue Party */
  text-align:    left;
  line-height:   105%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #2362AA;
}

.descriptionb {	     /* Black text of mystery cast. */
  font-size:     100%;
  color:         #000000; 
  line-height:   105%;
  text-align:    center;
  font-weight:   normal;
}

tablemysterypartyphone {
	display: table;
	width: 450px;
	margin: auto;
}
.colbcast {	        /* Cast party */
    display: table-cell;
    width: 450px;
    background-color: #B6CBE3;    /*light blue */
    padding: 0px 5px 0px 10px;
    vertical-align: top;
    text-align: left;
    border-bottom:  3px solid #2362AA;  /* Dark Blue Party */
    border-left:  3px solid #2362AA;  /* Dark Blue Party */
    border-right:  3px solid #2362AA;  /* Dark Blue Party */
}

.colblogo {	        /* Logo party */
    display: table-cell;
    width: 450px;
    background-color: #B6CBE3;    /*light blue */
    padding: 0px 10px 5px 10px;     /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    margin: auto;
}

                            /* Mystery Moolah mystery description table ... */
.moolah2 {
    display: table-cell;
    background-color: #D2EAB3;    /*light green */
    padding: 0px 0px 0px 0px;  /* top right bottom left */
    vertical-align: top;
    text-align: center;
    width:   450px;
}

.headmoolah {	                  /* Pink head Section, Mystery Moolah */
	display: table-cell;
	width: 450px;
	background-color: #82BA35;   /*Bright Green header */
        margin: auto;
	padding: 5px 9px 5px 10px;  /* IMP for lining up with bottom section. Aug 2024 top right bottom left */   
	border:  1px solid #82BA35;  /* Need this border to keep the rows collapsed together and lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.moolahbold {
  font-size:     105%;
  color:         #537c1c;   /*New darker than Bright Green header */
  text-align:    left;
  line-height:   100%;
  font-weight:   bold;
}

/* Bold, green Links for Copyright, Preview and Order in Mystery Moolah Table */
a.moolah:link, a.moolah:visited, a.moolah.hover, a.moolah:active {
  font-size:     90%;
  color:         #537c1c;   /*New darker than Bright Green header */
  text-align:    left;
  line-height:   105%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #82BA35;   /*Keeping lighter Bright Green header for lighter underline */
}

tablemysterymoolahphone {
	display: table;
	width: 450px;
	margin: auto;
}

.rowdescriptionc {	/* Description Mystery Moolah ... */
    display: table-cell;
    font-size:     105%;
    background-color: #D2EAB3;    /*light green */
    padding: 5px 10px 5px 10px;      /* top right bottom left */
    vertical-align: top;
    border-left:  3px solid #82BA35;   /*Bright Green header */
    border-right:  3px solid #82BA35;   /*Bright Green header */
    text-align:    justify;
}

.descriptionc {	     /* Black text of Mystery Moolah cast. */
  font-size:     100%;
  color:         #000000; 
  line-height:   105%;
  text-align:    center;
  font-weight:   normal;
}

.colccast {	        /* Cast Mystery Moolah */
    display: table-cell;
    width: 450px;
    background-color: #D2EAB3;    /*light green */
    padding: 0px 5px 0px 10px;
    vertical-align: top;
    text-align: left;
    border-bottom:  3px solid #82BA35;   /*Bright Green header */
    border-left:  3px solid #82BA35;   /*Bright Green header */
    border-right:  3px solid #82BA35;   /*Bright Green header */
}

.colclogo {	        /* Logo Mystery Moolah */
    display: table-cell;
    width: 450px;
    background-color: #D2EAB3;    /*light green */
    padding: 0px 10px 5px 10px;     /* top right bottom left */
    vertical-align: middle;
    text-align: center;
    margin: auto;
}

.smallfont {	     /* Black text of mystery cast smaller. */
  font-size:     85%;
  color:         #000000; 
  line-height:   95%;
  text-align:    left;
  font-weight:   normal;
}

.smallslant {	   /* Black italics. */
  font-size:     90%;
  color:         #000000;
  line-height:   105%;
  text-align:    left;
  font-style:   italic;
}

.smallslantw {	   /* White italics. */
  font-size:     90%;
  color:         #ffffff;
  line-height:   105%;
  text-align:    left;
  font-style:   italic;
}

.smallslantbig {	   /* Darkest Green almost black text italics. */
  font-size:     90%;
  color:         #131c09;  /* 131c09 Darkest Green almost black */
  line-height:   105%;
  text-align:    left;
  font-style:   italic;
}

.parawidth4 {              /* Small "Back to Top"  */
	font-size:     90%;
	line-height:   200%;
	width: 450px;
	color:  #000000;	
        margin: auto;
	padding: 0px 0px 0px 0px;
	text-align: right;
	font-weight:   bold;
}

/* Bold, white Link for Back to Top */
a.backtop:link, a.backtop:visited, a.backtop.hover, a.backtop:active {
  font-size:     100%;
  color:         #ffffff;   /*New darker than Bright Green header */
  text-align:    left;
  line-height:   105%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #ffffff;   /*Keeping lighter Bright Green header for lighter underline */
}

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

.tablehowtobtm {
	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;
}

.btmbold {		  /* Bold, bottom section */
  font-size:     90%;
  color:         #000000;
  line-height:   105%;
  font-weight:   bold;
}

/* Bold, black Links for Preview and Order Forms at bottom of page */
a.bottom:link, a.bottom:visited, a.bottom.hover, a.bottom:active {
  font-size:     90%;
  color:         #000000;
  line-height:   115%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #000000;
}

.headbtm1 {           /* Not Shown on Phone - BIBLE VERSES I John 4:9 and Luke 2:10,11 */
	display: none;
	width: 0%;
	background-color: #571c58;   /* 571c58 Darker purple from ribbon tone; 24004A Purple Cookin Up;  */
        margin: auto;
	padding: 0px 0px 0px 0px;     
	border:  1px solid #571c58;  /* 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;     
	border:  0px solid #dadcdd;  /* Need border to keep rows collapsed together + lines placed vertically correctly. */
	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;     
	border:  0px solid #dadcdd;  /* Need border to keep rows collapsed together + lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.headbtm2 {               /* GOLD head Section, border - PREVIEWS */
	display: table-cell;
	width: 45%;
	background-color: #c5b80b;  /* c5b80b Yellow Gold from ribbon tone; C09701 Gold My Superpower; 77c029 bright green; 8b8b8b Medium Gray */
        margin: auto;
	padding: 5px 3px 5px 3px;     
	border:  1px solid #c5b80b;  /* Need border to keep rows collapsed together + lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.headbtm3 {               /* GRAY head Section, border - ORDERS */
	display: table-cell;
	width: 45%;
	background-color: #382f38;  /* 382f38 Darkest Gray from Purple swirl; 610a0b Maroon Gift of Love; 8b8b8b dark gray; 539717 Missing Greenbacks header green */
        margin: auto;
	padding: 5px 3px 5px 3px;     
	border:  1px solid #382f38;  /* Need border to keep rows collapsed together + lines placed vertically correctly. */
	text-align: center;  /* This makes the header text centered. */
}

.bodybtm1 {		/* NOT ON PHONE - BIBLE VERSES I John 4:9 and Luke 2:10,11 */
    display: none;
    background-color: #f3e9f3;   /* f3e9f3 lightest purple of ribbon tone; F0E8F8 light purple */
    padding: 6px 8px 6px 8px;
    vertical-align: top;
    text-align: justify;
    border-bottom:  3px solid #571c58;   /* 571c58 Darker purple from ribbon tone; */
    border-left:  3px solid #571c58;
    border-right: 3px solid #571c58;
}

.bodybtm2 {		/* PREVIEW info */
    display: table-cell;
    background-color: #f8f6d3;  /* f8f6d3 Yellow Gold from ribbon tone */
    padding: 6px 8px 6px 8px;
    vertical-align: middle;
    text-align: justify;
    border-bottom:  3px solid #c5b80b;   /* c5b80b Yellow Gold from ribbon tone; C09701 Gold My Superpower; 77c029 bright green; 8b8b8b Medium Gray */
    border-left:  3px solid #c5b80b;
    border-right: 3px solid #c5b80b;
}
.bodybtm3 {		/* ORDER info */
    display: table-cell;
    background-color: #e8e7e8; /* e8e7e8 Very light Gray from Purple swirl; FEF5F5 Pale Maroon Gift of Love; e7e6e6 Pale Gray; eeebe4 Pale Green */
    padding: 6px 8px 6px 8px;
    vertical-align: middle;
    text-align: justify;
    border-bottom:  3px solid #382f38;   /* 382f38 Darkest Gray from Purple swirl; 610a0b Maroon Gift of Love; 8b8b8b dark gray; 539717 Missing Greenbacks header green */
    border-left:  3px solid #382f38;
    border-right: 3px solid #382f38;
}

/* Ribbons on the bottom adjust because of background */
#bottomimage {
	max-width: 480px;
	margin: auto;
	padding: 0px 0px 0px 0px;  /* top right bottom left */
	text-align: center;
}

#enclosure {
	display: table;
	background-color: #ffffff;  /* f3f4f4 very light gray; dadcdd lighter gray; d7dce2 a bit darker light gray */
	width: 100%;
	margin: auto;
	padding: 2px 0px 0px 0px; /* top right bottom left */
}

#closing {
	display: table-row;
	background-color: #ffffff;  /* ebf4fe Very light baby blue; c8dff8 Light baby blue; cccdce Medium gray; was d7dce2 Light gray */
	width: 100%;  /* max-width: 650px; */
	margin: auto;
	padding: 0px 0px 0px 0px;
}

#colbtm1 {
    display: table-cell;
    background-color: #ffffff;  /* 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: right;
    width:   33%
}

#colbtm2 {
    display: table-cell;
    background-color: #ffffff;  /* 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:   30%
}
#colbtm3 {
    display: none;
    background-color: #ffffff;  /* 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 {
    display: none;
    background-color: #ffffff;  /* 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 {
    display: table-cell;
    background-color: #ffffff;  /* ebf4fe Very light baby blue; c8dff8 Light baby blue; cccdce Medium gray; was d7dce2 Light gray */
    padding: 0px 10px 0px 0px;  /* top right bottom left */
    vertical-align: middle;
    text-align: left;
    width:   33%
}

#enclosefoot {
    display: table-contents;
	background-color: #2d2c2d;  /*2d2c2d Dark gray in purple family; was 55626d Dark gray */
	width: 100%;
	margin: auto;
	padding: 0px 0px 0px 0px;
}

footer {
  background-color: #2d2c2d;      /* 2d2c2d Dark gray in purple family; d7dce2 light gray*/
  color:            #ffffff;  /* White font */
  text-align:       center;
  padding:          5px 0px 5px 0px;  /* top right bottom left */
  margin:           auto;
  font-size:        90%;
  width:        100%;  /* max-width:        650px; */
  line-height:      1.5;
}

/* Bold, light blue Links for Footer of Stuff 4 Church */
a.blue:link, a.blue:visited, a.blue:hover, a.blue:active {
  font-size:     90%;
  color:         #2b5e9c;  /* 2b5e9c Darker bluebird blue; c8d5e1 Light Blue with gray undertones */
  text-align:    left;
  line-height:   105%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #2b5e9c;  /* 2b5e9c Darker bluebird blue */
}

/* White Links for Footer */
a.whitefoot:link, a.whitefoot:visited, a.whitefoot:hover, a.whitefoot:active {
  font-size:     90%;
  color:         #ffffff;  /* 2b5e9c Darker bluebird blue; c8d5e1 Light Blue with gray undertones */
  text-align:    left;
  line-height:   105%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #ffffff;  /* 2b5e9c Darker bluebird blue */
}

/* Darker Green Leaf and darker in Logo */
a.green:link, a.green:visited, a.green:hover, a.green:active {
  font-size:     105%;
  color:         #0b2f15;  /* Dark Green */
  text-align:    center;
  line-height:   115%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #0b2f15;  
}

/* Italics SMALLER Dark green Links like "More about Minis" */
a.darkgreen:link, a.darkgreen:visited, a.darkgreen.hover, a.darkgreen:active {
  font-size:     95%;
  color:         #42700d;  /* Darker Green */
  text-align:    left;
  line-height:   100%;
  font-style:   italic;
  text-decoration: none;
  border-bottom:    thin dotted #42700d;  
}

/* Darkest Green for Preview and Order links at top of page in Opening Area */
a.topgreen:link, a.topgreen:visited, a.topgreen:hover, a.topgreen:active {
  font-size:     100%;
  color:         #42700d;  /* Darker Green */
  text-align:    center;
  line-height:   115%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #42700d;  
}

/* Darkest Purple  */
a.darkpurple:link, a.darkpurple:visited, a.darkpurple:hover, a.darkpurple:active {
  font-size:     105%;
  color:         #5c1a5d;  /* Darker Purple */
  text-align:    center;
  line-height:   115%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #0b2f15;  
}

/* Darker Purple from Theater for Church Curtain */
a.purple:link, a.purple:visited, a.purple:hover, 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;  
}

/* Deep Aqua Blue from Peacock */
a.deepblue:link, a.deepblue:visited, a.deepblue:hover, 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;  
}


h1 {
   font-size:      110%;
   color:          #154275; /* Dark Blue like Welcome at top */
}

h2 {
   font-size:     100%; 
   color:         #285784;  /* Slightly lighter Dark Blue */
}

h3 {
   font-size:     100%; 
   color:         #4674a0;  /* Medium yet lightish Blue */
}

                  /* thick1 is used for headings in closing row but NOT on phone */
.thick1 {
   font-size:     90%; 
   color:         #474444;  /* Dark Gray */
   text-align:    center;
   line-height:   1.1;
   font-weight:   bold;
}

                  /* thick2 is used for heading of the body */
.thick2 {
   font-size:     110%; 
   color:         #154275;  /* Darker Welcome blue */
   text-align:    center;
   line-height:   1.1;
   font-weight:   bold;
}

                          /* Used in closing gray box for video and Email not link which are NOT on phone */
.italicsm {
   font-size:     100%; 
   color:         #ffffff;  /* was 474444 Dark Gray */
   text-align:    center;
   line-height:   100%;
   font-style:    italic;
}


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


a:link {
  color:            #000000;   /* Black */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #000000;
}

a:hover {
  color:            #ffffff;   /* White */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #ffffff;
}
a:visited {
  color:            #000000;   /* Black */
  font-weight:   bold;
  text-decoration:  none;
  border-bottom:    thin dotted #000000;
}