/* Bubble Navbar */
/* ============= */



/* ======  FIXED HEADER PANEL BOX for navbar and marquee ====== */	  
	  
#header-box  {
	position:fixed; top:0;
	clear:both;
	margin:0; padding:0;
	width:100%; height:auto;
	background-color:#191919;
	webkit-box-sizing: border-box;    
	-moz-box-sizing: border-box;    
	box-sizing: border-box;
	border:1px solid #8b0000;    /* (use layout main-wrap for bottom nav border */
	z-index:20;
	}
	


	
/* ======== MARQUEEE ========== */
/* (not used on most zarts pages) */
	
#marquee, #marquee ul, #marquee li {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
#marquee {
	position:relative; clear:both;
	margin:0; padding:0;
	height:auto; overflow:hidden;
	min-width:100%; width:100%;
	 background-color:#a9a9a9;
	z-index:30;
	 }
	 
#marquee ul {
	display:block;
	width:100%;
	margin-left:-2rem;
	margin:0; padding:0.2rem 0;
	}
#marquee li {
	display:inline-block;
	height:auto; width:auto;
	margin:0; padding:0 1.2rem 0 0;
	border-right:1px solid black;	
	}
	
#marquee li.mq-last {border-right:none; }

#marquee li a {
	height:auto; width:auto;	
	vertical-align:center;
	color:#e2e2e2;
	font-size:1rem;
	font-weight:600;
	font-family:Arial,Verdana,Calibri,"New Times Roman", sans;	
	}	
	
	
	
/*   END OF MARQUEE   */
	

/* ================ BUBBLE NAVBAR =================== */



#navbar,
#navbar ul,
#navbar ul li,
#navbar ul li a {
   position: relative;
   display: block;
   margin: 0; padding: 0;
   border: 0;
   list-style: none;
   line-height: 1;	   
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }


#navbar {
  position:relative; clear:both;
  width: 100%; height:auto;
  font-family: Helvetica, Arial, sans-serif;
  color: #e2e2e2; background:#191919;
  }
#navbar.align-right ul li {
  float: right;
  border-right: 0;
  border-left: 1px solid rgba(25, 25, 25, 0.22);
  }
  
 #navbar.align-right ul li a {
	  border-right: 0;
	  border-left: 1px solid rgba(25, 25, 25, 0.15);
	  }

#navbar ul {
  background: #191919;
  /* Old browsers */

  background: -moz-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
  background: -webkit-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
  background: -o-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
  background: -ms-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
  background: linear-gradient(to top, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
}
#navbar:after,
#navbar ul:after {
  content: "";
  display: block;
  clear: both;
/*  visibility: hidden;  / hides submenus */
  line-height: 0;
  height: 0;       /* bottom tabs bg */
  }

#navbar ul li {
  float: left;
  display: block;
  /* ??? width:interit */
  border-right: 1px solid #8b0000;  /* remove for za-last class */
  z-index: 1;
  }

#navbar ul li::after {
  content: "";
  width: 100%;
  height: 8px;          /* ??? change to rem */
  position: absolute;
  
 /* from z_nav  *
  top:0rem; bottom:9px;
  border-bottom:3px solid #708090
  border-top-left-radius: 50% 4px;
  border-top-right-radius: 50% 4px;   
??? */
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  z-index: 2;		/* ??? 20 in z_nav */
  bottom: 10px;     /* ??? */
	}
	
#navbar ul li a {
  display: block;
  padding: 10px 30px;    /* ??? z_nav 10 10 */
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
  color: #b0c4de;    /* ??? z_nav ffffff */
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 3;        /* ??? z_nav 30 */
}


#navbar ul li a:hover,
#navbar ul li.active a {
  color:#fff5ee; 
  font-weight:500;
  }
  
#navbar ul li:hover,
#navbar ul li.active {
  background: #1275ae;
  /* Old browsers */

  background: -moz-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);
  background: -webkit-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);
  background: -o-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);
  background: -ms-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);
  background: linear-gradient(to top, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);
  }
  
#navbar ul li:hover::after,
#navbar ul li.active::after {
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  }

#navbar ul li.inactive :hover,
#navbar ul li.inactive :hover::after,
#navbar ul li.inactive 
#navbar ul li.inactive a{
	color:#191919 !important;       /* ??? */
	background-color:#696969 !important;
	background-image:none !important;	
			/* ??? gradient omitted */
	}
	
/* add za page title  after list-items */
/* ??? added from z_nav */

#navbar ul li.za-last {
	float:right;
	margin:0 1rem -0.1rem 0; padding:0;
	text-decoration:none;
	}
	
#navbar ul li.za-last:hover,
#navbar ul li.za-last a {	
	font-size:0.9rem;
	font-style:italic;
	font-weight:500;
	text-transform:none;
	cursor:none;
	text-decoration:none;
	}
	
/* set local color background in page */

#navbar ul > li.bottom a[href="#FOOT"]:after {     /* to 'bottom of page' link */
	content:"\21e9 ";
	font-size:1.2rem;
	font-weight:800;
	min-width:1rem;
	}	
	
div#navbar ul li.za-last a {
	background-color:#e2e2e2;
	color:#191919;
	}

	
	
/* ========= Add Dropdowns-tabs ======= */
/* ??? added from z_nav */

#navbar ul ul {
	display: none;      /* hide the submenues */
	}

#navbar ul li:hover > ul {
		display: block;            /* reappear child ul of hovered li */

		}
	
#navbar ul ul {
	background:#2f4f4f;  	/* subtab background */
	opacity:0.9;
	min-width:100%;
	white-space:nowrap;
	margin:0; padding: 0;
	position: absolute; top: 100%;
	}
#navbar ul ul li {
	position: relative;
	float: none;
	background:transparent;			/* submenu container background */
	border:1px solid #b80000;
	}
#navbar ul ul li {border-top:none;}   /* & remove tops */
	
#navbar ul ul li:hover::after,
#navbar ul ul li.active::after {
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  }
 
 
 #navbar ul ul li a {
	font-size:0.7rem;
	padding: 10px 20px 10px 20px;     /* widen sutab text field */
	color: #e2e2e2;                         /* subtab text color */
	}
	
#navbar ul ul li a:hover {
	background: #4b545f;
	background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
	background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
	background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
	background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
	background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	}
#navbar ul ul ul {
	position: absolute; left: 100%; top:0;
	}


/* disappear links not used */	
#navbar ul li.off {display:none;}


/* ===============  */
/*end bubble navbar */
	
	
	
	
/* ======================= NAMEPLATE ============================ */

#nameplate {
	position:relative; 
	top:0rem; left:0;    /* Expose top of name plate from under fixed header-box */
	
	display:block; 
	width:100%; height:auto;
	margin:0; padding:0;     
	z-index:10;   /* must be > wrapper */
	}
#nameplate .nameplate-img {
	border-bottom:2px solid black;
	z-index:10;                      /*  lay above wrapper must be > 1 for subtabs to show */
	}

			   
/* ===================== */
/* end of Nameplate   */


/* FOOTER */

/* ==============  FOOTER ================= */

 div#footer  a{}					/* must come first in footer rules ??? */
 
div#footer {
	position:relative; clear:both;
	margin:0; padding:1.6rem 0;
	height:auto;
	width:100%;
	background-image:url("../za_images/za_setup/sunrise.jpg");
	background-color:#191919;
	background-repeat:no-repeat;
	color:#daa520;
	z-index:9;
	}
	 
#footer ul {
	display:inline-block;
	width:100%; height:auto;
	align:top;
	margin-top:0.2rem;
	}
	
#footer li {
	display:inline;
	margin-right:3.8rem;   /* list item seperation */
	color:#daa520; 
	}                  

#footer li a {	
	width:100%;           /* divide total by #of list items */
	margin:0; padding:0;
	color:#daa520;
	text-decoration:none; border:0;
	}
	
#footer li a.top:before {                   /* top of page link */
		content:"                                                    \21e7   top";
		white-space:pre;
		font-weight:800;
		}


/* ===================== READMORE NAVIGATION ====================== */

/* alt:after suffixing to anchored link:
     use this form for slugs -
	 <p class="slug alt" alt=" ('any suffix you want)">
		<a  href="link url here">any leading link text</a>
		</p>
*/

p.alt::after,
a.alt::after {	                      /* 'alt' class uses 'alt' attr as link text */
	display:inline;
	content:attr(alt);
	width:100%;
	margin:0; padding:1.4rem 0 1.5rem 0;
	font-size:0.9rem;
	font-family:Cambria, Georgia, "Palatino Linotype",Lucida, "Times New Roman", serif;
	white-space:pre;
	font-style:italic;
	text-align:right;				/* dflt right */
	text-decoration:none;      /*  turn off underline on 'after:' portion */
	color:#0033cc;
	}

p.alt,								 /* must have to surpress p.alt underline */
a.alt {
	text-decoration:none;
	padding:0.5rem 0 0.5rem 0;
	}   


	
a.more::after {
	
	display:block;
	content:"Read more ...   ";
	margin:0; padding:0.4rem 0 1.5rem 0;
	font-size:1.1rem;
	font-family:Cambria, Georgia, "Palatino Linotype",Lucida,
	"Lucida Grande",Times, "Times New Roman", serif;
	font-style:italic;
	text-align:right;
	color:#0033cc;
	}

			
a.readmore:link {
	color:#0033cc;
	text-decoration:underline;
	}

a.readmore:visited {
	color:#0033cc;
	text-decoration:underline;
	}
a.readmore:hover {
	color:#003333;
	text-decoration:underline;
	}

/* END READMORE NAV */


/* adjust on page jump position */

a[name]:target {
  padding-top: 5rem; 
  margin-top: -5rem;
}