.main-nav {
  list-style: none;
  line-height: 1;
  margin: 0; padding: 0;
  margin-bottom: 5px;
}

.main-nav ul {
  width: 98%;
  padding: 0 1% 10px 1%;
  margin: 0;
  list-style: none;
  line-height: 1;
}

 .main-nav .no-submenu {
  list-style-type: none;
  padding: 0 5px 0 5px;
 }

 .top-level {
  #border: 1px solid #000;
  list-style-type: none;
  padding: 0 5px 10px 5px;
 }
 
 .mini-nav .top-level {
  padding: 0;
 }

.top-title {
  font-size: 1.1em;	
  font-weight: bold;
}

.main-nav .top-level:hover .top-title {
}

.nav .top-level:hover .top-title {
	font-weight: bold;
}

.main-nav a, .main-nav {
  cursor: default;
  text-decoration: none;
  color: #6E99CE;
}

.main-nav a, .main-nav div {
  padding: 4px 3px;
}

.main-nav h1, .main-nav h2, .main-nav h6 {
	margin: 3px 0 0 0;
	padding: 0;
}

.nav-break {
	margin-top: 20px;
}

.main-nav .subtext {
  font-size: 1em;
  font-weight: normal;
}

.nav .subtext {
  font-size: .8em;
}

.main-nav .child a, .nav .child a, .nav .child div, .nav .child h1, .nav .child h2 {
  display: block;
}

.main-nav a:hover, .nav a:hover {
  color: #933;
  cursor: pointer;
  text-decoration: underline;
}

.main-nav .child li, .nav .child li {
  margin: 0;
  padding: 0;
}

.nav {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.nav a, .nav div, .nav h1, .nav h2 {
  cursor: default;
  display: inline;
  text-decoration: none;
  color: #6E99CE;
  padding: 4px 3px;
}

.nav ul {
  padding: 0 10px 10px 5px;
  margin: 0;
  list-style: none;
  line-height: 1;
}

.nav .no-submenu {
  float: left;
  list-style-type: none;
  padding: 0 5px 0 5px;
}

.nav .fake_dropdown, .blue_dropdown {
	padding: 7px 25px 7px 5px;
	color: #fff;
	font-weight: bold;
	background-color: #214a69;
	border-color: #214a69;
}

.blue_dropdown {
	margin: 1px;
}

.nav .fake_dropdown {
	vertical-align: bottom;
   display: block; 
   background-image: url("https://www.joyfulbelly.com/Ayurveda/images/down-triangle-white.png");
	background-repeat: no-repeat;
	background-position: right 2px center;
}

.main-nav .subheader {
	margin: 0;
	padding: 0;
}

.main-nav .subtitle {
 	margin: 0;
}

.nav-popup {
 display: inline-block;
 margin: 5px 0 10px 0;
 border: 1px solid gray;
 padding-right: 3px;
}

.nav-popup-state {
  display: none;
}

.nav-popup-target {
 display: none;
 opacity: 0;
 max-height: 0;
 font-size: 0;
 transition: .25s ease, visibility 0s, opacity 0.5s linear;
}

.nav-popup-state:checked ~  .nav-popup-wrap .nav-popup-target {
 display: block;
 opacity: 1;
 font-size: inherit;
 max-height: 999em;
}

.nav-popup-state:checked ~  .nav-popup-trigger {
 background-image: url("https://www.joyfulbelly.com/Ayurveda/images/up-triangle-black.png");
}

.nav-popup-state:checked ~  .nav-popup-trigger-blue {
 background-image: url("https://www.joyfulbelly.com/Ayurveda/images/up-triangle-white.png	");
}

.nav-popup-trigger, .nav-popup-trigger-blue {
 display: block;
 padding: 7px 25px 7px 5px;
 font-weight: bold;
 cursor: pointer;   
 background-image: url("https://www.joyfulbelly.com/Ayurveda/images/down-triangle-black.png");
 background-repeat: no-repeat;
 background-position: right 2px center;
}

.nav-popup-trigger-blue {
 background-color: #214a69;
 width: 92%;
 padding: 7px 6% 7px 2%;
 color: #ffffff;
 background-image: url("https://www.joyfulbelly.com/Ayurveda/images/down-triangle-white.png");
}

@media (min-width: 560px) {
	
 .top-level {
  	min-width: 75px;
 }

 .nav .top-level {
  float: left;
  width: 24%;
  min-width: 255px;
  margin: 5px 1% 0 0;
  list-style-type: none;
  padding: 0px;
 }

 .nav_to_block .top-level {
 	min-width: 155px;
 } 

 .nav .admin-nav {
 	width: auto;
 	min-width: 75px;	
 } 


 .nav-popup_appear {
 	display: none
 }
 
 .two_column .nav_mini_appear {
 	display: none;
 }

 .nav .child {
  width: 13em;
 }
 

}

@media (max-width: 560px) {
 .nav .child {
  width: 85%;
 }

 .nav-popup_appear {
 	display: inline;
 }

 .nav-popup_disappear {
 	display: none
 }

 .blue_dropdown, .dropdown_block {
	width: 100%;
 }
 
 .center_small {
 	text-align: center;
 }

 .nav-popup .top-level {
  float: left;
  width: 100%;
  margin: 5px 1% 0 0;
  list-style-type: none;
  padding: 0px;
 } 

 .nav_to_block .top-level {
  float: left;
  width: 100%;
  margin: 5px 1% 0 0;
  list-style-type: none;
  padding: 0px;
 } 

}

.nav .top-level:hover, .nav .top-level:focus, .nav .top-level:hover .fake_dropdown, .nav .top-level:focus .fake_dropdown {
 background-color: #c0dbf2;
 cursor: pointer;
 outline: none;
 border: 0;
}

.nav .child {
 position: absolute;
 margin-left: 10px;
 border: solid 1px #c0dbf2;
 padding: 5px;
 background-color: #fff;
 z-index: 100;

 visibility: hidden;
 transition: visibility 0.5s;
 opacity: 0;
}

.nav li:focus .child {
 visibility: visible;
 opacity: 1;
}

.nav_ad {
	padding: 5px;
	border: 3px solid #dddddd;
	margin: 0;
}

.nav_ad h2 {
 margin: 0;
 font-size: 1.2em;
 text-align: center;
 padding: 10px 0 10px 0;
}

.nav_ad .body, .nav_ad .body2 {
 padding: 5px;
}

.nav_ad .body2 {
 font-weight: bold;
 text-align: center;
}

.account_ad {
 display: inline-block; width: 150px; height: 175px;
 margin-right: 10px; margin-bottom: 10px; padding: 5px;
 font-size: 1.2em; line-height: 1em;
 color: #fff; text-decoration: none;
 vertical-align: middle;
 background-color: #6d9add; border-radius: 5px;
}

.account_ad img {
	height: 100px;
	display: block;
	margin: 10px;
}

.nav_ad_button {
	display: block;
	border-radius: 5px;
	background-color: #b8d100;
   background: rgba(0, 0, 0, 0.15);
	color: #fff;
	margin: 8px 8px 5px 8px;
	padding: 5px;
	text-align: center;
	text-decoration: none;
}

.bottom-overlay {
 position: relative;
}

.bottom-overlay img {
   position: relative; 
   width: 100%; /* for IE 6 */
}

.bottom-overlay h2 {
   position: absolute;
   top: 0px;
   width: 80%;
   font-size: 1em;
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.5);
   margin: 8%;
   text-align: center;
   padding: 2%;
}

.bottom-overlay span { 
   color: white; 
   font-weight: bold; 
}