/* foundation overrides */
iframe {
    width: 100% !important;
}
.wrap {
	max-width: 1128px !important;
	margin: 0 auto;	
}
.row {
	max-width: 100%;	
}
.top-bar .name h1 a {
  padding: 0;
}

@media ( min-width: 1160px) {
  .widen-row {
    margin-left: -15px;
    margin-right: -15px;
  }
}

@media ( min-width: 1150px ) {
  .hide-for-desktop {
    display: none !important; 
  }
}
/* remove printing on href links */
a[href]:after {
    content: none; }

abbr[title]:after {
    content: none; }

.noPrint { 
    display: none; 
} 

/* ucsf banner */
#ucsf-banner-nav {
  height: 40px;
  overflow: hidden;
  font-family: "Helvetica Neue", "arial", sans-serif;
  background: #052049; }
  #ucsf-banner-nav.no-logo .top-header-container ul.menu li.first {
    background: none;
    text-indent: 0%;
    padding-left: 0;
  }

  #ucsf-banner-nav .top-header-container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1230px; }
    #ucsf-banner-nav .top-header-container ul.menu {
      padding: 0;
      margin: 0; }
      #ucsf-banner-nav .top-header-container ul.menu li.first {
        display: inline-block;
        float: left;
        padding: 12px 0px 12px 58px;
        }
        @media (max-width: 600px) {
          #ucsf-banner-nav .top-header-container ul.menu li.first {
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden; } }
      #ucsf-banner-nav .top-header-container ul.menu li {
        display: inline-block;
        float: right;
        font-size: 14px;
        padding: 12px 10px 12px; }
        @media (max-width: 830px) {
          #ucsf-banner-nav .top-header-container ul.menu li {
            display: none; } }
        @media (max-width: 600px) {
          #ucsf-banner-nav .top-header-container ul.menu li {
            display: none; } }
        #ucsf-banner-nav .top-header-container ul.menu li a {
          text-decoration: none;
          color: #fff; }
        #ucsf-banner-nav .top-header-container ul.menu li a:hover {
          text-decoration: underline;}

/* Colors */

#ucsf-banner-nav.arial {
    font-family: arial,sans-serif;
}

#ucsf-banner-nav.teal {
    background: #18a3ac;
}

#ucsf-banner-nav.green {
    background: #90bd31;
}

#ucsf-banner-nav.light-blue {
    background: #178ccb;
}

#ucsf-banner-nav.orange {
    background: #f48024;
}

#ucsf-banner-nav.grey {
    background: #b4b9bf;
}

#ucsf-banner-nav.purple {
    background: #716fb2;
}

#ucsf-banner-nav.red {
    background: #ec1848;
}

#ucsf-banner-nav.yellow {
    background: #ffdd00;
}

#ucsf-banner-nav.white {
    background: #ffffff;
}

#ucsf-banner-nav.yellow a,#ucsf-banner-nav.white a {
    color: #000000;
}

/* nav */
nav {
	padding-left: 10px;	
}

#search_social {
	text-align: right;	
	padding: 15px 15px 0px 15px;
}
#search_social i,
#search_social input {
	float: right;	
  margin-bottom: 0px;
}

#search_social i {
	color: white;
	margin: 0px 5px;	
  background-color: #7B7979;
  width: 20px;
  height: 20px;
  font-size: 14px;
  text-align: center;
  padding-top: 3px;
}
#search_social i:hover {
  background-color: #007CBE;
}

#search_social input[type=text] {
  border: 2px solid #DDE2E8;
  box-shadow: none;
	width: 140px;
	height: 30px;
  box-sizing: border-box;
  margin-right: 20px;
  top: 0;
}


/* main_nav */

#main_nav.top-bar {
	background-color: white;
	height: 70px; 
}
#main_nav.top-bar.expanded {
  height: auto;
}

#main_nav.top-bar .title-area {
  height: 70px;
}
#main_nav.top-bar.expanded .title-area {
  background-color: transparent; 
}



#main_nav.top-bar.expanded .top-bar-section li {
  width: auto;
/*  padding-right: 15px;  */
}
#main_nav.top-bar.expanded .top-bar-section li.longer,
#main_nav.top-bar.expanded .top-bar-section li.medium,
#main_nav.top-bar.expanded .top-bar-section li.shorter, 
#main_nav.top-bar.expanded .top-bar-section li.veryshort {
	width: auto;	
}

#main_nav.top-bar .top-bar-section li a:hover {
	font-weight: bold;	
}

#main_nav.top-bar .menu-icon a span::after {
  color: #052049 !important;
  box-shadow: 0 0 0 1px #052049,
    0 7px 0 1px #052049, 
    0 14px 0 1px #052049;
}

/* sub menu */
#main_nav.top-bar .top-bar-section {
  margin-top: 10px;
}
#main_nav.top-bar .top-bar-section li a {
  font-size: 15px;
  text-align: left;
  color:  #052049;

  background-color: #DFE0E0;
}

#main_nav.top-bar .top-bar-section ul.dropdown li a {
  /* submenu look */
  background-color: #DDE2E9 !important;
  color: black;
  padding: 10px 30px 10px 10px !important;
}

#main_nav.top-bar .top-bar-section ul.dropdown li a.parent-link,
#main_nav.top-bar .top-bar-section ul.dropdown li.back a {
  /* parent menu look */
  padding-left: 10px;
  background-color: #DFE0E0;
  color: #178ccb;
}

.top-bar-section ul li {
  background-color: white;
}

/* blue arrow on drop down */
.top-bar-section .has-dropdown > a:after {
  border-color: transparent transparent transparent #052049;
}

/* desktop view */
@media ( min-width: 1150px ) {
  .top-bar-section .right li .dropdown {
    right: auto;
    left: 0;
  }
  
  .top-bar-section .right li:last-child .dropdown {
    right: 0;
    left: auto;
  }
  
  #main_nav.top-bar .top-bar-section li a {
    font-size: 14px;
    padding-bottom: 10px;
  }
  #main_nav.top-bar .top-bar-section li a:hover {
    background-color: #DDE2E9;
  }
  
  /* don't display down arrow for desktop menu */
  .top-bar-section .has-dropdown > a:after {
    border-color: black transparent transparent transparent;
    display: none;
  }
  .top-bar-section .has-dropdown > a {
    padding-right: 10px !important;
  }
  
  #main_nav.top-bar .top-bar-section li {
	max-width: 240px;
  }
  
  
  
  #main_nav.top-bar .top-bar-section li.veryshort {
	 max-width: 105px;	
  }
  #main_nav.top-bar .top-bar-section li.shorter {
	 max-width: 115px;	
  }
  #main_nav.top-bar .top-bar-section li.medium {
	 max-width: 125px;	
  }
  #main_nav.top-bar .top-bar-section li.longer {
	 max-width: 150px;	
  }
  #main_nav.top-bar .top-bar-section li a {
    text-align: center;
    height: 48px;
    color: black;
    padding-top: 10px;
    background-color: white;
  }  
  
  #main_nav.top-bar .top-bar-section li a {
    line-height: 18px;
    color: black;
    background-color: white;
  }
  #main_nav.top-bar .top-bar-section ul.dropdown li {
    min-width: 220px;
  }
  #main_nav.top-bar .top-bar-section ul.dropdown li a {
    background-color: white;
    text-align: left;
    padding-bottom: 5px;
	height: auto;
  }
  
  #main_nav.top-bar .top-bar-section li a {
    text-align: left;
  }

  img.right {
	float: right;
	margin: 10px 0 10px 10px;
  }

}

/* mobile search icon */
#main_nav.top-bar .mobile-search-icon {
  display: none;
}
@media ( max-width: 40.0625em ) {
#main_nav.top-bar .mobile-search-icon {
  display: inline-block;
  position: absolute;
  right: 50px;
  top: 20px;
  height: 34px;
  width: 34px;
}
}


#main_nav.top-bar .mobile-search-icon a {
  color: #052049;
}

/* search drop */
#search-drop {
  display: none;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 200px;
  background-color: white;
}

        
        
/* slider */
.main-slider {
  max-width: 745px;
  
}

.slidecontainer {
	position: relative;
	height: 448px; 
}
@media ( max-width: 600px ) {
.slidecontainer {
	height: 250px;
}
}
.slideimage {
	width: 745px;
	height: 448px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.slidecontainer h2,
.slidecontainer h2 a {
	color: #052049;	
    font-size: 1.1em;
}

.slidepanel {
   display: block;   
}
.slidepanel h2 {
    font-size: 1em;
 }
 
@media ( min-width: 320px ) {
.slidepanel { 
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
	/* top: 150px; this must be dynamically adjusted */
	color: #052049;
	box-sizing: border-box;
	padding: 10px 10px 0 10px;
	background-color: rgba(255,255,255, 0.8);
}

/* nav arrows */
.slick-prev, .slick-next {
  width: 40px;
  height: 40px;
  z-index: 10;
  background-color: rgba(0,0,0,.2);

}
.slick-prev:before, .slick-next:before {
    color: white !important;
}
.slick-next {
  right: 15px;
}
.slick-prev {
  left: 15px;
}
.slick-prev:before, .slick-next:before { font-family: FontAwesome; font-size: 40px; color: #0A5684; }   
.slick-prev:before { content: "\f053"; }
.slick-next:before { content: "\f054"; }
}

@media ( min-width: 40.0625em ) {
  .slidepanel {
    width: 70%;
    padding: 10px 20px 30px 20px;
  }
  .slidepanel h2 {
    font-size: 1.3em;
  }

/* nav arrows */
.slick-prev, .slick-next {
  width: 40px;
  height: 40px;
  z-index: 10;
  background-color: rgba(0,0,0,.2);

}
.slick-prev:before, .slick-next:before {
    color: white !important;
}
.slick-next {
  right: 15px;
}
.slick-prev {
  left: 15px;
}
.slick-prev:before, .slick-next:before { font-family: FontAwesome; font-size: 40px; color: #0A5684; }   
.slick-prev:before { content: "\f053"; }
.slick-next:before { content: "\f054"; }
}

/* slider read more */
.slidereadmore {
	border: 1px solid white;
	padding: 10px 15px;
	background-color: #178ccb;
	color: white;
	text-decoration: none;
}
.slidereadmore:hover {
	color: white;
	background-color: #178ccb;	
}

/* slick dots */
.slick-dots {
  visibility: hidden;
}
@media ( min-width: 40.0625em ) {
  .slick-dots {
    visibility: visible;
  }
}
.slick-dots {
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding-left: 15px;
}
.slick-dots li {
  float: left;  
}
.slick-dots li button:before {
  content: "";  
  border: 2px solid #052049;
  width: 10px;
  height: 10px;
}
.slick-dots li.slick-active button:before {
  background-color: #052049;
  border: 2px solid #052049;
}

/* green_panel */
#main-feature {
  position: relative;
}
#green-panel {
  display: none;
}
@media (min-width: 1020px) {
  #green-panel {
    display: block;
  }
}

#green-panel {
    background-color: #90bd31;
    color: white;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    padding: 50px 20px 20px 775px;
    height: 448px;
    overflow: auto;
    ransform: translateY(-50%);
}
#green-panel h2 {
  color: white;
}

/* facts-and-tips */
#facttip-first a,
#green-panel a {
  color: white;
  font-weight: bold;
}

#facttip-first a:hover,
#green-panel a:hover {
  text-decoration: underline;
}

#green-panel a:hover {
  text-decoration: underline;
}

#green-panel img {
    padding-bottom: 10px;
    padding-top: 10px;
}

/* stories and news panels */
.features-box {
  height: 360px;
  overflow: auto;
  position: relative;
  margin: 0 0 20px 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.features-box h3 {
  font-size: 16px;
  padding: 10px 20px;
  color: white;
  margin: 0;
  background-color: #178ccb;
}

.features-panel {
  background-color: rgba(255,255,255,0.8);
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
}
.features-panel h4,
.features-panel h4 a {
  color: #052049;
  font-size: 16px;
  font-weight: normal;
}

/* quicklink box */
.quicklinks-box {
  height: auto;
  position: relative;
  margin: 0 0 20px 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.quicklinks-box h3 {
  font-size: 16px;
  padding: 10px 20px;
  color: white;
  margin: 0;
  background-color: #178ccb;
}

/* quick links */
#quicklinks h3,
#left-quicklinks h3 {
  background-color: #716fb2; 
}
#quicklinks {
  background-color: #E1E3E6;
  position: relative;
  margin: 0 0 20px 0;
  padding: 0 0;
  min-height: 360px;
}
#quicklinks ul,
#left-quicklinks ul {
  margin: 20px;
  padding: 0 0 15px 0;
  list-style: none;
}
#quicklinks ul li 
#left-quicklinks ul li {
  margin: 0;
  padding: 0;
}
#left-quicklinks {
  background-color: #E1E3E6;
  position: relative;
  margin: 0 0 20px 0;
  padding: 0 0;
  min-height: auto;
}

/* Highlights */
#highlight-first,
#highlight-second,
#highlight-third {
  margin-bottom: 40px;
  height: 200px;
  overflow: hidden;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.serif-heading {
  font-family: granjon, Georgia, TimesNewRoman, 'Times New Roman', Times, serif;
  margin-bottom: 3px;
}

.serif-divider {
  margin: 5px 0 20px 0;
}

#highlight-first iframe,
#highlight-second iframe,
#highlight-third iframe {
    width: 100%;
    height: 250px;
}

.highlight-panel {  
  background-color: rgba(255,255,255,0.8);
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 5px 0px 10px;
  font-size: 13px;
}
.highlight-panel p, 
.highlight-panel p {
  color: #052049;
  font-size: 13px;
  font-weight: normal;
}
.highlight-panel a {
  font-weight: bold;
}
.highlight-panel h4,
.highlight-panel h4 a {
  color: #052049;
  font-size: 16px;
  font-weight: normal;
}

/* fact and tip */
#facttip-first {
    min-height: 408px;
}

#facttip-first,
#facttip-second {
   color: white;
}

#facttip-first h5 ,
#facttip-second h5 {
  font-size: 1.5em;
  color: white;
  font-weight: normal;
}

#facttip-first {
  background-color: #90bd31; 
}
#facttip-second {
  background-color: #f48024; 
}

#facttip-first,
#facttip-second {
   margin-bottom: 20px;
   padding: 20px 20px 20px 30px;
}
#facttip-first a {
  color: #FFFFFF;
  text-decoration: underline;
}
#facttip-first a:hover {
  text-decoration: none;
}

/* list serv */
#listserv {
  background-color: #716fb2;
  padding: 30px 50px 20px 50px;
  margin-bottom: 50px;
  min-height: 408px;
}
#listserv input[type=submit] {
  background-color: white;
  color: #716fb2;
  vertical-align: -150px;
}
#listserv input[type=submit]:hover,
#listserv input[type=submit]:active {
  background-color: #716fb2;
  color: white;
}

#listserv input {
  border: 1px solid white;
  box-shadow: none;
  margin: 0 0;
}
#listserv p {
  color: #FFFFFF;
}

/* feedback */
.button {
  background-color: #716fb2;
  color: #FFFFFF;
  text-align: center;
  padding: 20px 50px 20px 50px;
/*  margin-top: 50px;    */
  width: 100%;
}
.button:hover,
.button:active,
.button:focus {
  background-color: #FFFFFF;
  color: #716fb2;
  border: 1px solid #716fb2;
}

/* events */
/* featured events widget */
#featured-events {
/*  border-top: 1px solid #052049;  */
  margin-bottom: 30px;
}
#featured-events hr {
  margin-top: 0;
  margin-bottom: 0;
}
ul#lwe {
	margin: 0;
	padding: 0;
}
/* event title */
.lwn a {
}

/* date & time */
.lwn0 {
}

/* description */
.lwd {
}  

/* location */
.lwl { 
} 

/* place name */
.lwl a { 
} 
@media (min-width: 60.0625em) {
  
  ul#lwe {
     margin-bottom: 0;  
  }
  
  ul#lwe li {
    float: left;
    width: 33.33%;
    border-bottom: 0px !important;
    border-right: 1px dotted gray;
  } 
  
                       
}

/* affiliates */
#affiliates ul li {
  text-align: center;
  vertical-align: middle;
  height: 100px;
}
#affiliates ul li img {
  vertical-align: middle;
}

/* footer */
footer {
  background-color: #052049;
  color: #CDD2DB;
}

footer a {
  color: #CDD2DB;
}
footer a:hover {
  color: white;
}

#footer-wrap {
  max-width: 1160px;
  margin: 0px auto;
  padding: 30px 20px 50px 20px; 
}
footer nav ul {
  list-style: none;
}
footer nav ul li {
  float: left;
  width: auto;
  text-align: left;
  padding-left: 15px;
  padding-right: 10px;
}
footer nav ul li.longer,
footer nav ul li.medium,
footer nav ul li.shorter, 
footer nav ul li.veryshort {
    width: auto;	
}
footer nav ul li.veryshort {
    max-width: 100px;	
}
footer nav ul li.shorter {
    max-width: 120px;	
}
footer nav ul li.medium {
	max-width: 150px;	
}
footer nav ul li.longer {
    max-width: 170px;	
}
footer nav ul li a {
  color: #CDD2DB;
  font-size: 15px;
  padding: 0;
}
footer nav ul li a:hover {
  color: white;
}


footer i {
	color: #B4B9BF;
	margin: 0px 5px;
  float: right;
}
footer input[type=text] {
	border: 2px solid #b4b9bf;
	width: 100px;
	height: 20px;
}
footer .footer-search,
footer .footer-social {
  float: right;
  margin-left: 30px;
}

@media ( max-width: 850px ) {
footer nav,
footer .footer-submit_on_enter,
footer .footer-social {
  display: none;
}
}

@media ( max-width :  40.0625em ) {
  #footer-about {
    text-align: left !important;
    margin-bottom: 20px;
  }
}

/* mobile marquee */
#mobile-marquee {
  background-color: #90bd31;
  font-size: 2em;
  color: white;
  margin: -30px 0 30px 0;
  padding: 10px 0px 20px 20px;
  
}
#mobile-button-bar > a {
  padding: 8px 10px;
  width: 120px;
  margin-left: 15px;
}
#mobile-button-bar #story-btn {
  background-color: #716fb2;
}
#mobile-button-bar #story-btn:hover {
  background-color: #5B5992;
}

/* secondary page */

#main-content {
  padding-top: 20px;
}

@media ( min-width: 900px) {
#social-icons {
  float: right !important;
}
}
#social-icons i {
  margin-left: 10px;
  text-align: center;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #7B7979;
  color: white;
  padding-top: 8px;
}
#social-icons i:hover {
    background-color: #007CBE;
}

.sidebar-heading {
  font-family: granjon, Georgia, TimesNewRoman, 'Times New Roman', Times, serif;
  margin-bottom: 3px;
  font-size: 22px;
}

/* left menu */
.left-sidebar nav {
  background-color: #90bd31;
  padding: 20px 0;
  margin-bottom: 30px;
}
.left-sidebar nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  
}
.left-sidebar nav ul li {
  margin: 0;
  padding: 0;
}
.left-sidebar nav ul li a {
  color: white;
  padding: 8px 15px 8px 30px;
  display: block;
  }
.left-sidebar nav ul li a:hover {
  color: #CFEBBD;
  background-color: #7DAE25;
}
.left-sidebar nav ul li a.selected {
  color: #CFEBBD;
  background-color: #7DAE25;
}

.sidebar-list {
  padding: 0;
  margin: 0 0 30px 0;
  list-style: none;
}
.sidebar-list li {
  padding: 0;
  margin: 0;
  border-bottom: 1px dotted gray;
}
.sidebar-list li a {
  color: black;
  padding: 3px 0px;
  display: block;
  font-size: 0.9em;
}
.sidebar-list li a:hover {
  background-color: #eee;
}

.back-to-top {
  width: 200px;
  margin: 20px auto;
  color: #008CBA;
  background-color: white;
  border: 1px solid #008CBA;
}

#mobile-side-nav {
  background-color: #90bd31;
  padding: 0;
  margin-bottom: 20px;
}

#mobile-side-nav a {
  color: white;
  background-color: #90bd31;
  display: block;
  padding: 5px 0 5px 15px;
}
#mobile-side-nav > a::after {
  font-family: FontAwesome; 
  content: "\f107";
  float: right;
  margin-right: 15px;
}

#mobile-side-nav a:hover {
  background-color: #7DAE25;
}
#mobile-side-nav ul {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  
}
#mobile-side-nav ul li {
  margin: 0;
  padding: 0;
}
#mobile-side-nav ul li a {
  padding-left: 30px;
}


/* list view */
.list-box {
  height: 220px;
  overflow: auto;
  position: relative;
  margin: 0 0 20px 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* pagnination */
ul.pagination li a {
  border: 2px solid #2199e8;
  border-radius: 3px;
  background-color: white;
  color: #2199e8;
}
ul.pagination li.current {
  background-color: transparent;
}
ul.pagination li.current a {
  background-color: #2199e8;
  color: white;
}

/* rss-icon */
.rss-right {
	position: absolute;
	right: 15px;
	top: 15px;	
}

/* sticky header */
@media ( min-width: 851px ) {
  #sticky-header {
    position: fixed; 
    width: 100%;
    z-index: 99;
    background-color: white;
  }
  .sticky-shadow {
    box-shadow: 0px 1px 50px #5E5E5E;
  }
  .main-content {
    padding-top: 155px;
  }
  
  /* scoll snap */
  body {
    scroll-snap-destination: 0px 155px;
    scroll-snap-type: proximity;
  }
  #main-feature {
    scroll-snap-coordinate: 0% 100%;
  }
}

/*	MISC
-----------------------*/
img.bodyImage {
	border:#829840 4px solid;
	margin:10px 30px 10px 0px;
}

img.bodyImageRight {
	border:#829840 4px solid;
	margin:10px 0px 10px 15px;
}

/*	News RSS Feeds
-----------------------*/

#news-rssfeeds ul {
    margin-left: 0;
}

#news-rssfeeds ul li {
    display: block;
    list-style: none;
    border-bottom: 1px dotted gray;
    padding: 8px 0 8px 0;
}

#news-rssfeeds ul li a {
    color: gray;
    line-height: 1.2;
}