/* Requires: normalize.css -box-sizing.htc */
/* Global Reset & Standards ---------------------- */


#menuButton {overflow:hidden!important; width: 99%; margin: 0px 0 0 0; position: relative; z-index: 100;}




.nav-bar { height: 30px; background: none!important; margin-top: 20px; padding: 0; }
.nav-bar > li { float: left; display: block; position: relative; padding: 0; margin: 0; border: none!important; border-right: none; line-height: 38px; -webkit-box-shadow: none!important; -moz-box-shadow: none!important; box-shadow: none!important; }
.nav-bar > li:first-child { -webkit-box-shadow: none!important; -moz-box-shadow: none!important; }
.nav-bar > li:last-child { border-right: none!important; -webkit-box-shadow: 0px 0 0 rgba(255, 255, 255, 0.2) inset, 0px 0 0 rgba(255, 255, 255, 0.2); -moz-box-shadow: 0px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); }

.nav-bar > li:hover { background: none!important; color: #8F7EA9; }
.nav-bar > li a { color: #ffffff; }
.nav-bar > li a:hover { color: #8F7EA9!important; }
.nav-bar > li .flyout a:hover { color: white!important; }




.nav-bar > li ul { margin-bottom: 0; }
.nav-bar > li .flyout { display: none; }
.nav-bar > li.has-flyout > a:first-child { padding-right: 34px; position: relative; }
.nav-bar > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: #e6e6e6 transparent transparent transparent; position: absolute; right: 20px; top: 17px; padding-right: 0px!important; margin-right: 0px!important; }
.nav-bar > li.has-flyout > a.flyout-toggle { border-left: 0 !important; position: absolute; right: 20; top: 0; padding: 0px; z-index: 2; display: block; }
.nav-bar > li.has-flyout.is-touch > a:first-child { padding-right: 55px; }
.nav-bar > li.has-flyout.is-touch > a.flyout-toggle { border-left: 1px dashed #666; }
.nav-bar > li > a:first-child { position: relative; display: block; text-decoration: none; font-size: 103%; padding: 0 13px;}


.nav-bar > li > input { margin: 0 10px; }
.nav-bar.vertical { height: auto; margin-top: 0; }
.nav-bar.vertical > li { float: none; border-bottom: none; }
.nav-bar.vertical > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: transparent transparent transparent #e6e6e6; }
.nav-bar.vertical > li .flyout { left: 100%; top: -1px; }
.nav-bar.vertical > li .flyout.right { left: auto; right: 100%; }


.flyout { background: url(http://www.chelmsford.anglican.org/images/assets/nav_back.png); background-repeat:repeat; padding: 25px 25px 50px 25px; margin: 0; border: 1px solid #d9d9d9; position: absolute; top: 39px; left: -1px; width: 250px; z-index: 40; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* remove margin on any first-child element */ /* remove margin on last element */ }


.flyout p { line-height: 1.2; font-size: 13px; }
.flyout *:first-child { margin-top: 0; }
.flyout *:last-child { margin-bottom: 0; }
.flyout.small { width: 166.667px; }

.flyout.large { width: 900px; }

.flyout.panel_two { width: 900px; left: -88px }
.flyout.panel_three { width: 900px; left: -190px }
.flyout.panel_four { width: 900px; left: -318px }
.flyout.panel_five { width: 900px; left: -418px }
.flyout.panel_six { width: 200px; left: -1px }
.flyout.panel_seven { width: 900px; left: -740px }


.flyout.area { width: 900px; left: -550px;  }
.flyout.policies { width: 670px; left: -82px; }


.flyout.right { left: auto; right: -2px; }
.flyout.up { top: auto; bottom: 39px; }

ul.flyout, .nav-bar li ul { padding: 0; list-style: none; }

ul.flyout li, .nav-bar li ul li { border-left: none; background-color: none!important;  }






ul.flyout li a, .nav-bar li ul li a { background-color: none!important;  background-image: url('http://www.chelmsford.anglican.org/images/assets/nav_arrow.png'); background-repeat: no-repeat; background-position: 5px 10px; border-top: 1px solid #f9f9f9; border-bottom: 1px solid #e2e2e2;  color: #555; display: block; font-size: 12px; height: auto; line-height: 1.4em; padding: 7px 20px; }
ul.flyout li a:hover, .nav-bar li ul li a:hover { background: #51356C; color: #fff; background-image: url("http://www.chelmsford.anglican.org/images/assets/nav_arrow_hover.png"); background-repeat: no-repeat; background-position: 5px 10px;  }


  @media only screen and (max-width: 601px) {
    
ul.flyout li a, .nav-bar li ul li a { background-color: none!important;  background-image: none!important; text-align: center!important; border-top: 1px solid #f9f9f9; border-bottom: 1px solid #e2e2e2;  color: #555; display: block; font-size: 16px; height: auto; line-height: 1.4em; padding: 7px 20px; }
ul.flyout li a:hover, .nav-bar li ul li a:hover { background: #51356C; color: #fff;   }
.flyout li a {font-size: 100%!important;}

}




ul.flyout li.active, .nav-bar li ul li.active { margin-top: 0; border-top: 1px solid #4d4d4d; border-left: 4px solid #1a1a1a; }
ul.flyout li.active a, .nav-bar li ul li.active a { background: #4d4d4d; border: none; color: #fff; height: auto; margin: 0; position: static; top: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; }


  
 .nav_second_row {
    margin: 20px 0 0 0;
  }
  
  
  .nav-bar .flyout h2 a { color: #000; }


.flyout h3 a { color: #000; }
.flyout h3 a:hover { color: #56948e; }

.flyout h3 { color: #000; padding: 0; margin-bottom: 7px; }

  

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

.nav-bar > li > a:first-child { background: none!important; position: relative;  display: block; text-decoration: none;  }

   .flyout.large { width: 700px; }
.flyout.panel_two { width: 700px; left: -50px; }
.flyout.panel_three { width: 700px; left: -140px; }
.flyout.panel_four { width: 700px; left: -220px; }
.flyout.panel_five { width: 700px; left: -220px; }
.flyout.panel_six { width: 200px; left: -1px; }
.flyout.panel_seven { width: 700px; left: -400px; }


.flyout.area { width: 700px; left: -250px;  }
.flyout.policies { width: 700px; left: -100px; }


}

  @media only screen and (max-width: 768px) {
.nav-bar > li.has-flyout > a:first-child { padding-right: 31px!important;  }

#main_menu {margin-top: 60px!important;}

}

  @media only screen and (max-width: 480px) {
.nav-bar > li.has-flyout > a:first-child { padding-right: 31px!important;  }

}




/* Mobile Styles */
@media only screen and (max-device-width: 1280px) { .touch .nav-bar li.has-flyout > a { padding-right: 36px !important; } }
@media only screen and (max-width: 1279px) and (min-width: 480px) { .touch .nav-bar li a { font-size: 13px; font-size: 1.3rem; }
  .touch .nav-bar li.has-flyout > a.flyout-toggle { padding: 20px !important; }
  .touch .nav-bar li.has-flyout > a { padding-right: 36px !important; } }
  
  
  
  
  
  
@media only screen and (max-width: 767px) { .nav-bar { height: auto; }
  .nav-bar > li { float: none; display: block; border-right: none;  }
  .nav-bar > li > a.main { text-align: left; border-top: 1px solid #ddd; border-right: none; }
  .nav-bar > li:first-child > a.main { border-top: none; }
  .nav-bar > li.has-flyout > a.flyout-toggle { position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; }
  .nav-bar > li.has-flyout.is-touch > a.flyout-toggle span { content: ""; width: 0; height: 0; display: block; }
  .nav-bar > li.has-flyout > a.flyout-toggle:hover span { border-top-color: #141414; }
  .nav-bar.vertical > li.has-flyout > .flyout { left: 0; }
  .flyout { position: relative; width: 100% !important; top: auto; margin-right: -2px; border-width: 1px 1px 0 1px; }
  .flyout.right { float: none; right: auto; left: -1px; }
  .flyout.small, .flyout.large { width: 100% !important; }
 .flyout p:last-child { margin-bottom: 18px; } 
 
  

 
 }

  @media only screen and (max-width: 768px) {
#strap_holder_row {display:none!important;}
  }
  

  
  @media only screen and (max-width: 900px) {
   .flyout.large { width: 650px; }
.flyout.panel_two { width: 650px; left: -79px }
.flyout.panel_three { width: 650px; left: -177px }
.flyout.panel_four { width: 650px; left: -277px }
.flyout.panel_five { width: 650px; left: -330px }
.flyout.panel_six { width: 200px; left: -1px }
.flyout.panel_seven { width: 650px; left: -500px }
.flyout.area { width: 650px; left: -330px;  }
.flyout.policies { width: 650px; left: -250px; }


   #nav_publications {display: none;}

   
 }
  
  
  

    @media only screen and (max-width: 480px) {
   .flyout.large { width: 700px; }
.flyout.panel_two { width: 700px; left: 0px }
.flyout.panel_three { width: 700px; left: 0px }
.flyout.panel_four { width: 700px; left: 0px }
.flyout.panel_five { width: 700px; left: 0px }
.flyout.panel_six { width: 200px; left: 0px }
.flyout.panel_seven { width: 400px; left: 0px }

 

   #nav_publications {display: none;}


.nav-bar li {background: none; }


   
 }


 
  
  
  
#main_menu  {
  
	padding:0px;
	width: 100%;
	
}



#church_search p  {
	
	 color: #555555;
	 font-size: 85%;
	  line-height: 1.5em;
	
	
}

#nav_publications p  {
	
	 color: #555555;
	 font-size: 75%;
	 line-height: 1.5em;
	
}





.flyout h3 a  {color: #4d7d78; font-size: 115%;}
.flyout h3 a:hover  {color: #555555;}


.flyout .site ul li a:hover  {background:black; float:left;}

#topMenu {width:94%; margin: 0 0 20px 2%;}


.whats_new p {font-size: 85%; color: }
.whats_new {float:left; margin: 0 0 25px 0;  overflow:hidden; background: url(http://www.chelmsford.anglican.org/images/assets/light_background.png); background-repeat:repeat; padding: 20px 30px; border: #e2e2e2 1px solid;}
#tweets_div h1 {margin: 0 0 25px 0;}

.publication_text {height: 225px!important;}



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

{
  .whats_new {float:left; margin: 20px 0 0px 0!important; padding: 0 3px 0 3px;}
}

.tabs-content p {font-size: 90%!important;}





.twitter_container #tweets_page_div {float:left; margin: 30px 0 30px 0;}
#tweets_page_div {float:left; margin: 30px 0 30px 0;}

#tweets_page_div h1 {padding: 0 0 15px 0;}


  @media only screen and (max-width: 480px) {
.nav-bar li a {font-size: 90% !important; display: visible;}

.nav-bar {display:none!important;}

}


.nav-bar {display:inline;}



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

.nav-bar li a {  font-size: 13px; }

.nav-bar > li.has-flyout > a:first-child { padding-right: 36px!important; position: relative;  }

.flyout h3 a  {font-size: 95%!important;}
.flyout li a  {font-size: 92%;}

}





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

.flyout h3 a  {font-size: 110%;}
.flyout li a  {font-size: 85%;}



.nav-bar > li.has-flyout > a:first-child { padding-right: 27px!important; position: relative; z-index: 0!important; }
.nav-bar > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: #e6e6e6 transparent transparent transparent; position: absolute; right: 9px!important; top: 17px; }
.nav-bar > li.has-flyout > a.flyout-toggle { width:2px; border-left: 0 !important; position: absolute; right: 0; top: 0; padding: 15px; z-index: 2!important; display: block; }
.nav-bar > li.has-flyout.is-touch > a:first-child { padding-right: 25px!important; }
.nav-bar > li.has-flyout.is-touch > a.flyout-toggle { border-left: 1px dashed #666; }
.nav-bar > li > a:first-child { position: relative; display: block; text-decoration: none; font-size: 103%; padding: 0 9px;}




}