/* nav bar */

html {
   --navbar-height: calc(0.9em + 20px); /* 90% font size + 2 px top and bottom on sitename + 8px top and bottom around whole line */
}

#headerbar {
   background-color: #fff;;
   height: var(--navbar-height);
   position: relative;
	border-bottom: 1px solid var(--alt-dark-color);;
   /*width: 10000px;
   overflow-x: hidden;
   overflow-y: hidden;*/
}

#headerbar.expanded {
   overflow: visible;
}

#crosssitenavigation {
	/* font-size: 25px;*/
   line-height: 1.4;
   font-family: Kreon;
   background-color: #fff;;
}

#crosssitenavigation .navitem {
   float: left;
	height: 4.5em;
	padding: 8px 5px 24px 6px;
	vertical-align: top;
	cursor: pointer;
	box-sizing: border-box;
   margin-right: 1.5em;
}

#crosssitenavigation .navitem a {
	display: inline-flex;
   gap: 0.1em;
}
#crosssitenavigation .navitem a:hover {
   background-color: unset;
}
#crosssitenavigation .navitem .iconspace {
   width: 1.3em;
   flex-shrink: 0;
}
#crosssitenavigation .navitem .iconspace img {
   width: auto;
   height: 1em;
   max-width: 1.3em;
   vertical-align: top;
}
#crosssitenavigation .navitem .textspace {
}


#crosssitenavigation .navitem .sitename  {
    padding:0;
    line-height:1;
    margin:0;
    background-color:transparent;
    color: #000;
    font-size: 90%;
    padding:2px 3px;
    font-weight: 400;
}
/*
#crosssitenavigation .navcountainer .navitem a:hover .sitename  {
   text-decoration: underline;
}
#crosssitenavigation .navcontainer.expanded .navitem a:hover .sitename  {
   text-decoration: none;
}*/

#crosssitenavigation .navitem.current .sitename {
   background-color: #ddddddbb;
   border-radius: 4px;
   width: max-content;
}

#crosssitenavigation .expanded .navitem.current .sitename {
   background-color: unset;
}

#crosssitenavigation .navitem p {
   font-size: 90%;
   line-height: 1.3;
   /* opacity: 0.7;*/
}

#headerbar  a:hover, #aboutleftcol a:hover {
	text-decoration:none;
}

/* Spacing for descriptions based on whether there's a logo icon as well */

#headerbar #navitem_lawbore .sitedesc {
  
}


/* Some learnmore changes are here, but
 overrides for future lawyer blog are in
 the future lawyer wordpress theme instead 
 */


#crosssitenavigation p {padding:0; margin:0;}
#logoholder {
	float:left;
	text-align:left;
	padding-top:22px;
	margin-right:30px;
}

#crosssitenavigation .sitename + p.sitedesc {
    color: #000;
    font-weight: 300;
    padding-top: 1px;
    visibility: hidden;
    max-width: 9em;
    margin-left: 3px; /* align with padded title */
}

#crosssitenavigation .expanded .sitename + p.sitedesc {
   visibility: visible;
}



#mobilefriendly {display: block;
    position: absolute;
    right: 10px;
    top: 25px;
}


/* grey-tinted background for mouse hover only (on mobile nohoverstyles is added to #navcontainer) */
#navcontainer.expanded .navitem:hover .textspace{
   background: rgba(0,0,0,0.1);	 
}


#navcontainer.expanded.nohoverstyles .navitem:hover .textspace{
   background: transparent !important;
}

#navcontainer.expanded .navitem.current:hover .sitename {
   background-color: transparent !important; /* no site highlight on hover*/
}


/* Per-item widths and spacing for navitems to improve closed look */

#navcontainer #navitem_lawbore {
   width: 9.5em;
   margin-right: 0;
}

#navcontainer #navitem_events {
   width: 8.5em;
   margin-right: 0;
}

#navcontainer #navitem_blog {
   width: 10em;
   margin-right: 0;
}

#navcontainer #navitem_hub {
   width: 7em;
   margin-right: 0.3em;
}

#navcontainer #navitem_learnmore {
   width: 7em;
   margin-right: 1.3em;
}

#navcontainer #navitem_tldr, #navcontainer #navitem_tldr .sitedesc {
   width: 7em;
   margin-right: 0;
}

/* And some further adjustments based on how many items are fitten in the top row ...*/

#navcontainer.has_2_hidden #navitem_learnmore {
   width: 9.5em; /* make learnmore line up with lawbore in this case */
   margin-right: 0.5em;
}


#navcontainer.has_3_hidden .navitems,
#navcontainer.has_4_hidden .navitems,
#navcontainer.has_5_hidden .navitems {
   display: grid;
   grid-template-rows: 1fr 1fr;
   grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
}

#navcontainer.has_3_hidden .navitem, 
#navcontainer.has_4_hidden .navitem,
#navcontainer.has_5_hidden .navitem {
   width: auto !important;
   margin-right: 0 !important;
}


#navcontainer #more_indicator {
    position: absolute;
    right: 25px;
    right: var(--main-side-gutter);
    top: 10px;
    font-size: 90%;
    line-height: 1;
    font-weight: bold;
    opacity: 0;
}

#navcontainer.has_1_hidden #more_indicator,
#navcontainer.has_2_hidden #more_indicator,
#navcontainer.has_3_hidden #more_indicator,
#navcontainer.has_4_hidden #more_indicator,
#navcontainer.has_5_hidden #more_indicator{
   opacity: 1;
   transition: 0.3s linear;
}

#navcontainer.expanded #more_indicator {
   display: none;
}


#navcontainer {
	margin: auto;
	position: absolute;
	z-index: 666;
	padding: 0 calc(var(--main-side-gutter) - 8px); 
	box-sizing: border-box;
	border-radius: 0 0 3px 3px;
   width: 100%;
   height: var(--navbar-height);
   overflow: hidden;
}

#navcontainer.expanded {
   box-shadow: 1px 6px 8px 3px rgba(0,0,0,0.2);
   z-index: 9999;
   height: auto;
}



#navcontainer.expanded a:focus {
   outline-color: #666 !important ;
}


#navcontainer.expanded {
   background-color: #fff;
    color: #222;
}


#navcontainer .navitem.navextra {
   visibility: hidden;
}

#navcontainer.expanded .navitem.navextra {
   visibility: visible;
}


#navcontainer.expanded a .sitename  {color: #008293}





#navcontainer .navcaption {
	border-top: 1px solid #eee;
   font-size: 75%;
   border-bottom:0;
	line-height: 1.2;
	font-weight: 600;
   padding: 3px 0 4px 2.4em;
	margin-top: 0;
	margin-bottom: 0;
	color: #666;
	background-color: #fff;
	visibility: hidden;
	width: 98%;
   text-align: left;
   clear: both;
}

#navcontainer.expanded .navcaption {
   visibility: visible;
}