/* CSS Document */
html, body, form, fieldset {
        margin: 0;
        padding: 0;
        font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}

@media only screen and (max-width: 450px) {
  html, body {
    overflow-x: hidden;
  }
}



#content h1,#content h2,#content h3,#content h4,#content h5,#content h6,#content pre,
#content blockquote,#content ul,#content ol,#content dl, address {
        margin: 1.2em 0 0.6em 0;
        padding: 0;
}

#content p {
	margin: 0 0 1em 0;
}

#content h4 {
	margin-bottom: 0.2em;
}

#content h1.top { margin-top: 0px;}

#content li,#content dd,#content blockquote {
        margin-left: 1em;
}
form label {
        cursor: pointer;
}
fieldset {
        border: none;
}

a {
	outline: none;
}

#content dl.classes {
	margin-bottom: 20px;
	font-size: 13px;
	float: left;
}

dt {
	font-weight: bold;
	float: left;
	width: 100px; 
	clear: left; 
	padding-bottom: 7px;
}

#content #main_col dl.classes dt a {
	color: #666666;
}

#content #main_col dl.classes dt a {
	text-decoration: none;
}

dd {
	float: left;
	width: 335px;
	padding-bottom: 7px;
}
dd em {
	display: block;
	margin-bottom: 7px;
}

#content #main_col p.indentl { margin-left: 50px; margin-top: -0.7em}

#content #main_col em.bold { 
	font-style: normal;
	font-weight: bold;
}

body {
	background: url(https://yogawithhannah.com/images/body_bg.png) repeat-x top;
	text-align: center;
}

#wrapper {
	margin: 26px auto 0px auto;
  text-align: left;
  width: 880px;
	overflow: visible;
  position: relative;
}
.showYogi {
	background: url(https://yogawithhannah.com/images/yogi_outline.jpg) no-repeat  520px bottom;
	background-attachment: scroll;
}

#nav_logo {
	position: absolute;
	z-index: 25;
	top: 0px;
	left: -15px;
}

#main_nav {
	position: relative;
	height: 29px;
	width: 850px;
	background: url(https://yogawithhannah.com/images/nav_bar_long.jpg) no-repeat top left;
	padding: 7px 10px 7px 0px;
	top: 34px;
	left: 32px;
	overflow: hidden;
}

#main_nav ul {
	padding: 0;
  margin: 0 0 0 102px;
}

@media only screen and (max-width: 767px) {
  #wrapper {
    width: 100%;
  }
  #main_nav {
    width: 100%;
  }
  #main_nav ul {
    display: none;
  }
}


/* Mobile Menu */

@media only screen and (max-width: 350px) {
  #wrapper #signup {
    left: 130px!important;
  }
  #wrapper #sub_col .social {
    width: 95%!important;
  }

  #wrapper #content #main_col {
    margin-right: 20px!important;
  }
  #wrapper .formText {
    width: 70%;
  }
  #wrapper #contact_name,
  #wrapper #contact_email,
  #wrapper #contact_message
  {
    width: 80%;
  }

  #main_col #galleries {
    width: 350px!important;
    margin-left: -30px!important;
  }

  #main_col #tabbed {
    width:350px!important;
    margin-left: -39px!important;
  }

  #wrapper input#contact_send {
    margin-left: 5px!important;
  }


}

@media only screen and (min-width: 768px) {
  #mobile_nav {
    display: none;
  }
}

@media only screen and (max-width: 450px)
 {

  #wrapper #content #main_col h1#links {
    background-size: 420px;
    width: 100%;
  }

  /* mobile galleries */
  .tabbed, #galleries {
    width: 100%!important;
    margin-left: -20px!important;
  }

  #main_col .tabbed li {
    padding: 0!important;
    margin: 0!important;
  }

  #main_col .tabbed li a {
    padding: 5px 10px;
  }

  #footer_holder #footer {
    width: 100%!important;
  }

  #footer_holder #footer ul {
    margin-bottom: 25px;
  }

  #footer_holder #footer ul li a {
    margin-right: 15px;
    margin-left: 15px;
  }  

  #wrapper #sub_col {
    margin-bottom: 30px;
    width: 100%;
  }

  #wrapper #sub_col #quote {
    background-size: 450px;
  }

  #wrapper #sub_col #quote img {
    width: 100%;
  }

  #wrapper #sub_col .social {
    width: 80%;
    margin: auto;
  }

  #nav_logo {
    left: -3px;
  }
  /* Sign Up Bar */
  #signup {
    left: 170px!important;
    height: 100px!important;
    background-size: 220px 60px!important;
  }
  #signup #question p {
    width: 100%;
  }
  #signup #question form input {
    top: 20px;
    left: 6px;
  }
  #signup #question form input:last-child {
    left: 160px;
  }

  #menu_bar {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    height: 100%;
    margin-bottom: 60px;
  }
  
  #wrapper #headertext {
    float: left;
  }
  
  #mobile_nav {
    padding-top: 39px;
  }
  
  #menuToggle {
    display: block;
    top: 38px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }
  
  #menuToggle input {
    top: 36px;
    display: block;
    position: absolute;
    width: 40px;
    height: 27px;
    right: 20px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;  
  }
  
  #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(0, 0);
    background: #fff;
  }
  
  #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  
  #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, 0);
  }
  
  #menuToggle input:checked ~ ul {
    transform: none;
  }
  
  #menuToggle .line {
    right: 30px;
    top: 4px;
    margin: auto 0 auto auto;
    display: block;
    width: 28px;
    height: 3px;
    background: #fff;
    margin-bottom: 5px;
    position: relative;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
  }
  
  #menuToggle .line:first-child {
    transform-origin: 0% 0%;
  }
  
  #menuToggle .line:nth-last-child(2) {
    transform-origin: 0% 100%;
  }
  
  #menuToggle ul {
    background-color: #78c37b;
    z-index: 99;
    position: absolute;
    width: 100vw;
    left: 50%; 
    top: 78%;
    padding: 0 50px;
    margin: 0;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  
  #menuToggle ul li {
    padding: 10px 0;
    font-size: 1.5em;
    color: #fff;
    text-decoration: none;
    list-style: none;
    display: block;
  }
  
  #menuToggle ul li a {
    background: none!important;
    color: #fff;
    text-decoration: none;
    list-style: none;
  }
  
  .overlay {
    opacity: 0.2;
  }
 }










/* Don't apply padding here (offsetWidth will differ in IE)
If you need padding add it to the child anchor */
#main_nav ul li {
	float: left;
	list-style: none;
}

#main_nav ul li a {
	text-indent: -500em;
	z-index: 10;
	display: block;
	float: left;
	height: 23px;
	position: relative;
	overflow: hidden;
	padding: 0px 5px;
}
#nav_home a {
	width: 48px;
	background: url(https://yogawithhannah.com/images/nav_home.png) no-repeat center !important;
	background: url(https://yogawithhannah.com/images/nav_home.gif) no-repeat center; // ie!
}

#nav_me a {
	width: 78px;
	background: url(https://yogawithhannah.com/images/nav_me.png) no-repeat center !important;
	background: url(https://yogawithhannah.com/images/nav_me.gif) no-repeat center; // ie!
}

#nav_classes a {
	width: 60px;
	background: url(https://yogawithhannah.com/images/nav_classes.png) no-repeat center !important;
	background: url(https://yogawithhannah.com/images/nav_classes.gif) no-repeat center; // ie!
}

#nav_timetable a {
	width: 85px;
	background: url(https://yogawithhannah.com/images/nav_timetable.png) no-repeat center !important;
	background: url(https://yogawithhannah.com/images/nav_timetable.gif) no-repeat center; // ie!
}

#nav_contact a {
	width: 89px;
	background: url(https://yogawithhannah.com/images/nav_contact.png) no-repeat center !important;
	background: url(https://yogawithhannah.com/images/nav_contact.gif) no-repeat center; // ie!
}

#nav_resources a {
	width: 80px;
	background: url(https://yogawithhannah.com/images/nav_resources.png) no-repeat center !important;
	background: url(https://yogawithhannah.com/images/nav_resources.gif) no-repeat center; // ie!
}

#nav_gallery a {
	width: 60px;
	background: url(https://yogawithhannah.com/images/nav_gallery.png) no-repeat center !important;
	background: url(https://yogawithhannah.com/images/nav_gallery.gif) no-repeat center; // ie!
}

#nav_faq a {
	width: 39px;
	background: url(https://yogawithhannah.com/images/nav_faq.png) no-repeat center !important;
	background: url(https://yogawithhannah.com/images/nav_faq.gif) no-repeat center; // ie!
}

#nav_ethics a {
	width: 53px;
	background: url(https://yogawithhannah.com/images/nav_ethics.png) no-repeat center !important;
	background: url(https://yogawithhannah.com/images/nav_ethics.gif) no-repeat center; // ie!
}

#nav_diet a {
	width: 39px;
	background: url(https://yogawithhannah.com/images/nav_diet.png) no-repeat center !important;
	background: url(https://yogawithhannah.com/images/nav_diet.gif) no-repeat center; // ie!
}

#nav_links a {
	width: 47px;
	background: url(https://yogawithhannah.com/images/nav_links.png) no-repeat center !important;
	background: url(https://yogawithhannah.com/images/nav_links.gif) no-repeat center; // ie!
}


#menu_bar {
	position: relative;
	height: 90px;
}
#main_nav li.background {
	background: url(https://yogawithhannah.com/images/navbg_right.png) no-repeat top right !important;
	background: url(https://yogawithhannah.com/images/navbg_right.gif) no-repeat top right;
	z-index: 8;
	position: absolute;
	visibility: hidden;
}
  
#main_nav .background .left {
	background: url(https://yogawithhannah.com/images/navbg_left.png) no-repeat top left !important;
	background: url(https://yogawithhannah.com/images/navbg_left.gif) no-repeat top left;
	height: 23px;
	margin-right: 11px;
}

#headertext {
	margin: 0px 30px 10px 0px;
	float: right;
	height: 62px;
	width: 227px;
	background: url(https://yogawithhannah.com/images/header_text.jpg) no-repeat left top;
	text-indent: -5000px;
	display:block;
	clear: both;
}

/* footer code */
#footer_holder {
	clear: both;
	background-color: #ffdfea;
	border-top: 1px solid #d29bac;
	color: #d29bac;
	text-align:center;
	margin-bottom: 0px;
}

#footer {
	width: 930px;
	margin: 0px auto;
	text-align: center;
	font-size: 14px;
	padding: 10px 0px;
	font-family: "Times New Roman", Times, serif;
}

#footer ul {
	margin: 0px;
	padding: 0px;
	
}
#footer ul li {
	display: inline;
	list-style: none;
	
}
#footer ul li a {
	color: #d29bac;
	font-size: 16px;
	margin-left: 10px;
	margin-right: 10px;
	text-decoration: none;
}
#footer ul li a:hover {
	text-decoration: underline;
}

#footer #chakras img {
	margin: 10px 30px;
}

#footer #chakras img.dblue_chakra {
	margin-top: 5px;
}

#footer #chakras img.purple_chakra {
	margin-top: 16px;
}

.clear {
	clear: both;
	height: 0px;
}

table {
	margin-bottom: 15px;
	font-size: 13px;
}

table tr td {
	padding: 3px 10px 3px 0px;
	vertical-align: top;
}

table  tr.headings  td {
	font-weight: bold;
	
}

table tr td.days {
	color: #2da954;
	font-weight: bold;
	
}

table  tr.newday  td {
	border-top: 1px solid #DDDDDD;
}

.specialClass { color:#e15b61}

/* Main content code */
#content {
	clear: both;
	color: #666666;
}

#content #main_col p, #content #main_col a {
	font-size: 14px;
	line-height: 1.5em;
}

#content #main_col h1 {
	color: #2da954;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	position:relative;
	background: url(https://yogawithhannah.com/images/h1_normal_bg.gif) no-repeat left bottom;
	left: -43px;
	font-size: 18px;
	padding-left: 45px;
}
#content #main_col h2 {
	font-size: 18px;
	color: #2da954;
	border-bottom: 1px solid #E0E0E0;
	border-top: 1px solid #E0E0E0;
}
#content #main_col h3 {
	font-size: 16px;
	color: #78c37b;
}

#content #main_col h3.grey {
	color: #666666;
}
#content #main_col h4 {
	font-size: 14px;
}

#main_col h1 + p:first-letter, p.dropcap:first-letter {
	color: #DDD;
	font-size: 2.5em;
	float:left;
	vertical-align: top;
	margin: .24em .2em 0 0;
}

#content #main_col ul {
	margin-left: 15px;
}

#content #main_col span.green{
	color: #78c37b;
}
#content #main_col a {
	text-decoration:none;
	color: #78c37b;
}
#content #main_col a:hover {
	text-decoration: underline;
}
#main_col {
	clear:both;
	float: left;
	margin-right: 30px;
	margin-left: 50px;
	margin-bottom: 25px;
	display: inline;
  position: relative;
}

@media only screen and (min-width: 768px) {
  #main_col {
    width: 450px;
  }
}


#sub_col {
	clear:right;
	float: left;
	width: 310px;
	display: inline;
	margin-top: 28px;
	margin-bottom: 380px;
	
}

/* news styles */

#news div.newsarticle {
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
	color: #666666;
	border-top: 1px solid #D3D3D3;
	
}

#news div.newsarticle div.calendar {
	height: 45px;
	width: 40px;
	background: url(https://yogawithhannah.com/images/calendar.gif) no-repeat left top;
	position: absolute;
	margin: 0px;
}
#news div.newsarticle div.calendar p.month{
	text-align: center;
	color: #FFFFFF;
	font-size:12px;
	margin: 5px auto 0px 1px;
}
#news div.newsarticle div.calendar p.day{
	text-align: center;
	color: #000000;
	font-size:13px;
	font-weight:bold;
	margin: 5px auto 0px 1px;
}
#news div.newsarticle div.newstext {
	margin-left: 60px;
	font-size:11px;
}

#news div.newsarticle div.newstext h2 {
	margin-top: 0px; 
	margin-bottom: 5px;
}
#news div.newsarticle div.newstext p {
	margin-top: 0px;
	margin-bottom: 2px;
}	
#news div.newsarticle a {
	font-size: 11px;
	text-decoration:none;
	color: #78c37b;
}
#news div.newsarticle a:hover {
	text-decoration: underline;
}
#news div.newsarticle a.readmore {
	margin-left: 170px;
}

#grey_lotus {
	text-align: center;
	margin-bottom: 20px;
}

/* Quote styles */
#quote {
	margin: 20px 0px;
	background: url(https://yogawithhannah.com/images/quotebox_bg.gif) repeat-y left;
	position: relative;
}
#quote #quote_bottom {
	position: relative;
	top: 3px;	
}

#quote #quotetext blockquote {
	color: #666666;
	text-align: center;
	font-size: 13px;
	font-style:italic;
	margin: 5px 12px;
} 
#quote #quotetext cite {
	text-align: right;
	margin: 10px 60px 0px 20px;
	color: #666666;
	font-style: normal;
	display: block;
	font-size: 14px;
}
/* Page Headings */
#content #main_col h1#introduction {
	height: 45px;
	background: url(https://yogawithhannah.com/images/h1_introduction.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col h1#about_me {
	height: 45px;
	background: url(https://yogawithhannah.com/images/h1_about_me.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col h1#yin_yoga {
	height: 51px;
	background: url(https://yogawithhannah.com/images/h1_yin_yoga.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col h1#yin_yang {
	height: 51px;
	background: url(https://yogawithhannah.com/images/h1_yin_yang.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col h1#lessons {
	height: 45px;
	background: url(https://yogawithhannah.com/images/h1_lessons.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col h1#lesson_prep {
	height: 45px;
	clear: left;
	background: url(https://yogawithhannah.com/images/h1_lesson_prep.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col h1#contact_me {
	height: 45px;
	background: url(https://yogawithhannah.com/images/h1_contact_me.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col h1#faq {
	height: 45px;
	background: url(https://yogawithhannah.com/images/h1_faq.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col h1#ethics {
	height: 45px;
	background: url(https://yogawithhannah.com/images/h1_ethics.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col h1#diet {
	height: 45px;
	background: url(https://yogawithhannah.com/images/h1_diet.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col h1#links {
	height: 45px;
	background: url(https://yogawithhannah.com/images/h1_links.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col h1#gallery {
	height: 51px;
	background: url(https://yogawithhannah.com/images/h1_gallery.gif) no-repeat left top;
	text-indent: -5000px;
}
#content #main_col p.indent { 
	margin-left: 16px;
	margin-right: 18px;
	font-style: italic;
	font-size: 13px;
}

/* Contact form styles */
fieldset {
	border: none;
	width: 337px;
}
div.form_q label {
	float: left;
	clear: left;
	display: inline;
}

div.form_q {
	margin-bottom: 10px;
	padding: 5px;
	
}
div.form_q label {
	width: 60px;
	
}
span.error {
	color: red;
	visibility: hidden;
}

div.form_q input, div.form_q textarea {
	border: 1px solid #CCCCCC;
	width: 240px;
	padding-left: 5px;
	padding-right: 5px;
}
div.form_q textarea {
	padding-top: 5px;
	padding-bottom: 5px;
}
div.form_q.active {
	background-color: #FEFDFC;
}
div.form_q.active input, div.form_q.active textarea{
	border: 1px solid #97CEFB;
}
input.button {
	background-color: #FFFFFF;	
	border: 1px solid #CCCCCC;
}

input#contact_send {
	margin-left: 67px;
}

#errorMessages {
	background-color: #f5f4c9; 
	border-top: 1px solid #CC6600; 
	margin-bottom: 15px; 
	border-bottom: 1px solid #CC6600; 
	display:none; 
	padding: 5px 20px 10px 20px;
	width: 370px;
}
#errorMessages ol {
	margin: 0px 20px;
}

/* Gallery style */

#content #main_col.gallery div.gallery_section a {
	padding: 5px; 
	border: 1px solid #CCCCCC;
	margin: 10px 10px;
	height: 150px;
	display: block;
	float: left;
	display: inline;
}

#content #main_col.gallery div.gallery_section a:hover {
	border: 1px solid #97CEFB;
}
#content #main_col.gallery div.gallery_section a img {
	border: none;
	width: 110px;
	height: 150px;
}

#content #main_col ul.tabbed { list-style:none; margin: 0px 0px 10px 10px;  padding: 0px; border-bottom: 1px solid #CCCCCC; display: inline; float: left; width: 405px; }
#content #main_col ul.tabbed li { float: left; display: block; padding: 3px 5px; margin: 0px 11px; text-align: center; border: 1px solid #CCCCCC; position: relative; top: 1px; z-index: 10 }
#content #main_col ul.tabbed li.selected { border-bottom-color: #FFFFFF;}
#content #main_col ul.tabbed li a { font-size: 13px; height: auto; border: none; color: #999999; text-decoration:none}
#content #main_col ul.tabbed li.selected a, #content #main_col ul.tabbed li a:hover { color: #78c37b !important; text-decoration: none;}
#content #main_col #galleries { position: relative; clear: left; float: left; width: 450px; overflow: hidden; }
#content #main_col .gallery_section { clear: left; float: left;  }
#ayurvedapics { display: none; opacity:0;}
#yogapics { display: none; opacity:0;}
#malta09 { display: none; opacity:0;}

/*  =signup  */

#signup * { margin:0px; }
#signup { position:absolute; width: 296px; height:41px; background: url('https://www.yogawithhannah.com/images/email_bg.gif') left top no-repeat; top: 70px; left: 253px}
#signup p {width: 115px;  position: absolute; top: 4px; left: 7px; color: #FFFFFF; font-size: 11px;}
#signup input { position: absolute; top: 4px; left: 116px;  width: 138px; border: 1px solid #e3b26d; color: #666666; font-size: 10px; padding-left:4px;}
#signup input#submit { top: 4px; left: 259px; height:14px; width: 19px; padding-left: none; }
#signup.sending input, #signup.sending p  { display: none;}
#result {  display: none; color: #ffffff; text-align: center; position:relative;  }
#result.sending {  display: block; background: url('https://www.yogawithhannah.com/images/ajax-loader.gif') no-repeat center; margin-top: 5px; height: 19px;}
#signup #result.sent { background: none; height: auto; display: block; margin-top: 5px; padding: 0px 10px; text-align: left;}
#signup #result.sent a { color: #FFFFFF;}

/* =social */
.social { border: 1px solid #d3d3d3; border-width: 1px 0; height: 80px; position: relative; }
#content .social h3 {color: #d3d3d3; font-weight: normal; margin-left: 3px; display: inline;width: 75px; float: left; margin-top: 25px;}
.social a {display: block; text-indent: -999px; overflow: hidden; position: absolute;}
.social a.instagram {width:75%; margin-left: 70px; height: 75%; top: 3px; background: url('../images/instagram.png') no-repeat left top; }
.social a.twitter {width:100%; height: 100%; margin-left: 150px; top: 3px; background: url('../images/twitter.png') no-repeat left top; }
.social a.facebook {width:62px; height: 62px; margin-left: 100px; top: 3px; right: 9px; background: url('../images/facebook.gif') no-repeat left top; }