/* Start Auto-Generated */
/* !!! THIS BLOCK HAS BEEN AUTO-GENERATED. CHANGES WILL BE OVERWRITTEN !!! */
/* End Auto-Generated */
/*adjusting text size on ot*/
#openingText p.otdisclaimer {
    font-size: 12pt;
    line-height: 20px;
}
#main-body {
    height: 100%;
    overflow: auto;
}

body#index-page #main-body #openingText {
  width: 100%;
  max-width: 650px;
}

/*Remove About Button:*/
#cpanel .nav ul li#li-btn-about {
    display: none;
}
/*Matching single dropdown to meganav*/
#cpanel .nav li ul.submenu li a {
font-size:inherit;
line-height:inherit;
}
/*fixing search overlap*/
#search-view #search-head #keywords  {
    width: 290px;
}
/*Fixing Meganav Hover*/
#cpanel .nav li div.megamenu ul li a:hover {
    background-color:#1f4a6b;
}
/*Drop down Borders*/
#cpanel li div.megamenu, #cpanel li ul.submenu {
	-webkit-border-radius: none;
	-moz-border-radius: none;
	border-radius: none;
	border: none;
	-webkit-box-shadow: none;    
-moz-box-shadow: none;
box-shadow:none;
}

/*adding scroll to fix overlap*/
Body.body #main-body-border {  
overflow-y: auto;
}

/* Opening text BG:  White */
#main-body-border #opening-text-main {  
background: hsla(0, 100%, 100%, .7);
}
h1{font-family:"Merriweather", sans-serif;}
#city-logo { max-height: 225px;}
#main-body #openingText p {margin-bottom: 15px;}


button#commentsCTA {
    padding: 40px 2px;
    text-orientation: upright;
    writing-mode: vertical-rl;
}

button#commentsCTA div {
    text-orientation: sideways;
    writing-mode: horizontal-tb;
}

body#Quick-Tables-page div.textPage:not([hidden]) {
    display: flex;
    width: 80% !important;
}

#doc-view ul.autotab-toc li a {
  font-size: 12pt;
  font-family: Merriweather;
  color: #37424a;
}

#cpanel li {
  z-index: 4;
}


@media (max-width: 1000px) {
    body#Search-page div#cpanel .nav ul#nav1, body#Search-page div#cpanel .nav-icon-label {
        position: relative;
    }
	
	body#Search-page div#cpanel .nav-icon-label {
		top: 0;
	}
	
	body#Search-page div#main-body-border, body#Search-page div#main-body-border div#main-body {
		position: relative;
		z-index: 1;
}

}

/*@media (max-width: 450px) {
  div#cpanel #btn-archives .nav-icon-label {
  font-size: 6vw;
}
}
*/

@media (max-width: 1000px) {
    div#autotabs-container div.autotab-page {
        overflow: scroll;
    }
  #TopDiv {
    position: fixed;
}
}

#search-view div#search-pagenav a {
  color: black;
}

#search-view #search-pagenav a.active {
  color: #11507e;
  text-decoration: none;
  font-weight: bold;
}

/*adjusting autotab lists*/
#autotabs-container #doc-view ul.autotab-toc li {
    list-style-type: disc;
    color: black;
}
/*styling links in OText*/
#openingText a {
    color: #37424A;
    font-weight: bold;
    text-decoration: none;
}
   #openingText a:hover {color:#0098DB;}

/*Design change for Otherpage (right now just the commenting page)*/

    #otherpage .comments  > div{
   margin: 5% 15%;
   padding:50px 100px;
    background:#f9f9f9;
    border-radius:4px;
   border: 1px solid #888;
   }
   div#otherpage div.comments {
       background: white;
       padding: 25px 75px;
   }
   body:has(div.comments) div#otherpage {
       background: url(https://online.encodeplus.com/regs/sandiego-ca/media/images/roads_grey_light.jpg);
       padding: 100px 17%;
   }
/*adding button to HP*/#openingText 
   a.nav-btn.hp:hover {
       background: #37424A;
   }
   #openingText a.nav-btn.hp {
       background-color: #0098DB;
       color: white;
       padding: 15px 25px;
       border-radius: 5px;
   }
   p:has(a.nav-btn.hp) {
       text-align: center;
       padding-top: 10px;
       padding-bottom: 10px;
   }
#cpanel li div.megamenu .inner{
column-count:1;
}
#cpanel li div.megamenu ul {
    display: block;
    column-count: 2;
}

/*VO just messing around in mobile menu styles*/
#cpanel li div.megamenu ul ul {
    margin: 0;
    padding: 0;
    column-count: 1;
}
@media (max-width: 2250px) {
    body#View-page #cpanel .nav .megamenu ul a.nav-icon, body#View-page #cpanel .nav .megamenu ul span.nav-icon {line-height: 1.02; font-size: 12pt;}
}

    /*fixing hovers*/
#cpanel .nav ul li:hover a div span, #cpanel .nav div.megamenu ul li:hover, #cpanel .nav-icon.nav-selected div span, #index-page #cpanel .nav li ul.submenu li:hover a {
    border-bottom: 2px solid #fcd900;
@media (max-width: 1570px) {border-color:transparent;}
}
#cpanel .nav div.megamenu ul li, #cpanel .nav div.megamenu ul li:has(li:hover), #index-page #cpanel .nav li ul.submenu li a {
    border-bottom: 2px transparent solid;
     padding:8px;
      @media (max-width: 1570px){padding:0;}
}
#cpanel .nav li div.megamenu ul li a:hover {
    background-color: transparent;
}
@media (max-width: 2250px) {
    body#View-page #cpanel li div.megamenu {
       column-count: 1;
    }
}



  /* San Diego has many nav items — switch to hamburger earlier than the default 1000px */
  @media all and (max-width: 1200px) {
      #cpanel {
          display: none;
      }
      .show #cpanel {
          display: block;
          top: 50px;
          width: 100%;
          position: absolute;
          z-index: 2;   /* was -1 in ui.css — fixes menu appearing behind content */
          left: 0;
      }
      #showmenu-btn {
          display: block;
      }
      #cpanel-showmenu {
          display: block;
      }
  }

 /*View Page Mobile Menu — View-page switches to mobile nav at 2250px; all other pages switch at 1200px (see ui.css @media max-width:1200px)*/
@media (max-width: 2250px) {
    body#View-page #TopInnerDiv {
        display: block;
    }

    body#View-page #cpanel, body#View-page #showmenu-btn i {
        display: none;
    }

    body#View-page #mobmenu-container, body#View-page #mobmenu-container button#showmenu-btn {
        display: block;
    }

    body#View-page .show #showmenu-btn i {
        display: inline-block;
        padding: 0 20px;
    }

    body#View-page .show #cpanel {
        overflow: auto;
        height: calc(100vh - 50px);
        display: block;
        top: 50px;
        width: 100%;
        position: absolute;
        z-index: 2; /* was -1 in ui.css — fixes menu appearing behind content */
        left: 0;
    }

    body#View-page #cpanel.show .nav ul#nav1 {
        width: 100%;
    }

    body#View-page #cpanel .nav ul#nav1 {
        width: 100%;
        left: 0;
        top: 0;
        display: block;
    }

    body#View-page .justify #cpanel .nav ul#nav1 {
        display: block;
    }

    body#View-page #cpanel .nav ul li {
        width: auto;
        display: block;
        background-color: #fff;
    }

    body#View-page #cpanel .nav {
        padding: 0;
    }

    body#View-page #cpanel .nav-icon-label {
        background: none;
    }

    body#View-page div#cpanel .nav .nav-icon {
        margin: 0;
        height: 74px;
        line-height: 100%;
    }

    body#View-page #cpanel .nav #nav1.show .nav-icon {
        margin: 0;
        height: 38px;
    }

    body#View-page #cpanel #nav1.show li {
        display: block;
        background: #0f5978;
        margin: auto;
        width: 100%;
        padding: 4px 0;
        border-top: hsla(210, 30%, 60%, 1) 1px solid;
    }

    body#View-page div#cpanel .nav-icon-label {
        margin-top: 10px;
        /*line-height: 1.1;*/
        text-align: right;
        width: auto;
        display: inline-block;
        position: static;
        padding: 0;
        /*font-size: 30px;*/
        margin: 30px 10px 0 0;
        float: right;
    }

    body#View-page #cpanel-showmenu {
        display: block;
        padding: 2px;
    }

    body#View-page #cpanel .nav #li-btn-logo a span {
        display: block;
        font-size: 18px;
        top: 12px;
    }

    body#View-page #cpanel .nav #li-btn-logo, body#View-page #cpanel .nav #li-logo {
        position: static;
        display: none;
    }

    body#View-page #cpanel li ul.submenu {
        position: static;
        box-shadow: none;
        border: none;
        padding: 6px 0 0 0;
        background: none;
    }

    body#View-page #cpanel .nav li ul.submenu li a {
        min-height: 50px;
        text-align: right;
        vertical-align: middle;
        font-size: 18px;
        line-height: 50px;
        white-space: normal;
    }

    body#View-page #cpanel li div.megamenu {
        border: none;
        box-shadow: none;
        position: static;
        width: 100%;
        padding: 0;
        border-radius: 0;
    }

    body#View-page #cpanel li div.megamenu .inner {
        flex-direction: column;
        columns: auto;
    }

    body#View-page #cpanel li div.megamenu ul {
        display: block;
        width: auto;
        padding: 0;
    }

    body#View-page #cpanel li div.megamenu ul ul {
        display: none;
    }

    body#View-page #cpanel li div.megamenu ul ul li.mobile-viewlink {
        display: block;
    }

    body#View-page #cpanel .nav li div.megamenu ul li span.mobile {
        cursor: pointer;
    }

    body#View-page #cpanel .nav li div.megamenu ul li span.mobile:hover {
        background-color: rgba(0, 0, 0, .1);
    }

    body#View-page #cpanel li div.megamenu ul a.mobile, body#View-page #cpanel li div.megamenu ul span.mobile {
        display: block;
    }

    body#View-page #cpanel li div.megamenu a.mobile {
        display: none;
    }

    body#View-page #cpanel .nav .megamenu ul li {
        background-color: #fff;
    }

    body#View-page #cpanel .nav .megamenu ul a, body#View-page #cpanel .nav .megamenu ul span {
        display: none;
    }

    body#View-page #cpanel .nav .megamenu ul a.nav-icon, body#View-page #cpanel .nav .megamenu ul span.nav-icon {
        text-align: right;
        line-height: 50px;
        height: 50px;
        font-size: 18px;
        margin: 0;
        padding: 4px 24px 0 0;
        border-bottom: none;
    }

    body#View-page #cpanel .nav .megamenu ul a.nav-icon.submenu-parent, body#View-page #cpanel .nav .megamenu ul span.nav-icon.submenu-parent {
        border-bottom: none;
    }

    body#View-page #cpanel .nav .megamenu ul ul a.nav-icon {
        margin: 0;
        display: block;
    }

    body#View-page #cpanel .nav .megamenu ul a.submenu-parent::after, body#View-page #cpanel .nav .megamenu ul span.submenu-parent::after {
        font-family: "FontAwesome";
        font-weight: 900;
        content: "\f107";
        position: relative;
        top: 0;
        left: 6px;
    }
}

/*Opening Text alignment on smaller screens*/
@media screen and (max-width: 1400px) {
    #main-body-border #opening-text-main {
        margin: 0 auto;
    }

    div#main-body-inner div#video-container {
        margin-top: 50px;
    }
}



#doc-view #pageControls div.pageControls_inner.breadCrumbs .breadCrumbs {
   /* width: 760px;
    left: calc(20% + max(0px, (60% - 760px) / 2));
    right: auto; */
    margin: 0 auto;
}

/*Mobile nav label resizing*/
@media (max-width: 1200px) {
    div#cpanel .nav-icon-label {
      font-size: 20px;
    }
}


/*Prevent view page horizontal scroll*/
#doc-view #thePage-wrap {
  width: 100% !important;
}

@media (max-width: 450px) {
    button#commentsCTA:has(#commentForm) {
        /* ui.css's mobile rule (left:26px) exists to sit this button to the
           right of the collapsed TOC sidebar (.toc-collapsed #left-sidebar
           is width:26px !important, position:fixed, z-index:2 — it visually
           covers anything under it). Keep that same 26px offset here rather
           than left:0, and shrink the width by the same amount so the right
           edge still lands exactly at the viewport edge. */
        /* +1px over the sidebar's own 26px covers its border-right:1px,
           which isn't included in that 26px so the boxes would otherwise
           share a 1px sliver. */
        left: 27px !important;
        width: calc(100% - 27px) !important;
        /* button#commentsCTA (above) sets writing-mode:vertical-rl
           unconditionally, for the collapsed vertical "COMMENTS" tab. Left in
           effect once expanded, it interacts badly with this calc()-based
           width — #commentForm ends up laid out ~40-70px to the left of the
           button's own box (confirmed live: left:-42px against the button's
           left:27px), which the overflow:hidden above then clips, showing as
           the panel's own content being cut off on the left. Reset it here
           for the expanded state so the form lays out normally. */
        writing-mode: horizontal-tb !important;
        /* commentsForm.aspx's Cancel/Submit row is position:absolute with a
           hardcoded width:410px, sized for the old 430px desktop panel. Its
           containing block is this button (not #commentForm, which already
           has overflow:hidden but isn't positioned), so on narrow screens it
           escapes past the button's right edge and forces page-wide
           horizontal scroll. Clipping it here, on the actual containing
           block, keeps it contained without needing to touch commentsForm.aspx. */
        overflow: hidden;
    }
}