/* @override http://www.cobblestonecn.com/_css/NEW_styles.css */
/* Site: Cobblestone */

/* =RESET MARGINS & PADDING
---------------------------------------------------------------------
*/

html, body, div, span,
p, blockquote, pre, code,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
form, fieldset, legend, label, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
}

img {
  border: 0;
  margin: 0;
  padding: 0;
}

hr{
   display: none;
}

/* =RESET TYPOGRAPHY
---------------------------------------------------------------------
*/

body {
  font-family: Helvetica, sans-serif; /* web safe fonts */
  font-size: 62.5%;  /* Rest font to a 10px baseline when using ems */
  font-weight: normal;
  line-height: 140%;   
  background: #f2f2f2 url(/_img/bg_body.jpg) repeat-x left top;
}
body#home{
  background: #f2f2f2 url(/_img/bg_body_home.jpg) repeat-x left top;
}h1 {
  font-size: 2em; /* font-size doesn't matter since we hide this with a logo */
  font-weight: normal;
}

h2 {
  font-size: 2em;
  line-height: 1.6;
  font-weight: bold;
}

h3 {
  font-size: 1.6em;
  line-height: 1.6;
  font-weight: bold;
  color: #197e9d;
}
h4 {
  font-size: 1.4em;
  line-height: 1.4;
  font-weight: bold;
}

h5 {
  font-size: 1.2em;
  font-weight: bold;
}

h6 {
  font-size: 0.8em;
  font-weight: bold;
}

p {
  font-weight: normal;
  margin: 0 0 10px 0;
  line-height: 1.5;
  color: #868686;
}

#content h2{
  height: 33px;
  background: url(/_img/bg_subpage-titles.png) no-repeat;
  text-indent: -9999px;
  margin: 26px 35px;
  float: left;
  display: inline;
}

#content h2.overview{width: 140px;background-position: left top;}
#content h2.benefits{width: 121px;background-position: -140px top;}
#content h2.features{width: 126px;background-position: -261px top;}
#content h2.faqs{width: 81px;background-position: -387px top;}
#content h2.signup{width: 96px;background-position: -468px top;}
#content h2.special-offers{width: 196px;background-position: -568px top;}


#content h2.beta-signup{width: 164px;background: url(/_img/bg_subpage-titles_beta-signup.jpg) no-repeat;}
#content h2.demo-signup{width: 184px;background: url(/_img/bg_subpage-titles_demo-signup.jpg) no-repeat;}
#content h2.find-your-community{width: 297px;background: url(/_img/bg_subpage-titles_find-your-community.jpg) no-repeat;}
#content h2.setup{width: 80px;background: url(/_img/bg_subpage-titles_setup.jpg) no-repeat;}
#content h2.thanks{width: 146px;background: url(/_img/bg_subpage-titles_thank-you.jpg) no-repeat;}
#content h2.webinar{width: 146px;background: url(/_img/bg_subpage-titles_webinar.png) no-repeat;}
#content h2.gallery{width: 378px;background: url(/_img/custom-branding-examples.png) no-repeat;}
#content h2.blog{width: 242px;background: url(/_img/cobblestone-blog.png) no-repeat;}

#content h2.blog a{display:block;width: 242px;}


#content img.beta{
  position: absolute;
  right: 3px;
  top: 69px;
}

/* =DEFAULT LINKS
---------------------------------------------------------------------
*/

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  overflow: hidden;
  color: #63beeb;
}

a:hover,
a:active {
  text-decoration: underline;
}

/* =Helper Classes
---------------------------------------------------------------------
*/

#skip{
   position: absolute;
   list-style: none;
   display: block;
   height: 0;
   overflow: hidden;
}

/* the clearfix rules make it possible to clear floated elements without additional structural markup. See http://www.positioniseverything.net/easyclearing.html */

.clearfix:after {
   content: "."; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* =Header
---------------------------------------------------------------------
*/

#header{
  width: 905px;
  margin: 0 auto;
}

#header h1 {
   width: 905px;
   margin: 0 auto;
   clear: both;
   height: 128px;
   background: url(/_img/bg_h1.jpg) no-repeat center top;
   text-indent: -9999px;
}

#header h1 a{
   display: block;
   width: 350px;
   margin:0 auto;
   height: 128px;
}

/* =Navigation
---------------------------------------------------------------------
*/

#nav {
   list-style: none;
   height: 41px;
   float: left;
}

#nav li{
   float: left;
   font-size: 1.4em;
   text-indent: -9999px;
}

#nav li:hover{
  background: url(/_img/nav_li_hover.png) repeat-x left top;
}

#nav li.current{
  background: url(/_img/nav_li_current.png) repeat-x left top;
}

#nav li a{
   display: block;   
   text-decoration: none;
   height: 41px;
   padding: 0 15px;
   background: url(/_img/nav_items.png) no-repeat left top;
}

#nav li#nav_overview a{
  width: 63px;
  background-position: left top;
}

#nav li#nav_benefits a{
  width: 53px;
  background-position: -97px top;
}

#nav li#nav_features a{
  width: 56px;
  background-position: -183px top;
}

#nav li#nav_faqs a{
  width: 36px;
  background-position: -273px top;
}

#nav li#nav_cobblestone-blog a{
  width: 29px;
  background-position: -343px top;
}

#nav li#nav_signup a{
  width: 45px;
  background-position: -407px top;
}

#login {
  float: right;
  height: 41px;
}

#login a{
  display: block;
  width: 176px;
  height: 26px;
  margin: 8px 25px 6px 0;
  background: url(/_img/btn_login.png) no-repeat;
  text-indent: -9999px;
}

#login a:hover{
  background-position: left bottom;
}

#content .subnav {
  float: right;
  display: inline;
  margin-right: 25px;
}

#content .subnav li{
  float: left;
  display: inline;
  list-style-type: none;
  margin: 27px 5px 0;
  height: 42px;
  line-height: 42px;
}

#content .subnav li.current,
#content .subnav li:hover{
  background: url(/_img/nav_subpage-li.gif) no-repeat left top;
}

#content .subnav li a{
  display: block;
  padding: 0 10px;
  font-family: Helvetica;
  font-size: 1.2em;
  color: #fff;
  font-weight: bold;
}

#content .subnav li.current a,
#content .subnav li:hover a,
#content .subnav li a:hover{
  background: url(/_img/nav_subpage-a.gif) no-repeat right top;
  color: #121a25;
}

/* =Container
---------------------------------------------------------------------
*/

#container{
  background: url(/_img/bg_top-bar.jpg) no-repeat center top;
}

/* =Container-Inner
---------------------------------------------------------------------
*/
#container-inner{
   position: relative;
   overflow: auto;
   clear: both;
   width: 905px;
   margin: 0 auto;
}

body.page #container-inner{
   background: url(/_img/bg_page_content-wrap.png) no-repeat left top;
}


/* =Content-Wrap
---------------------------------------------------------------------
*/
#content-wrap{
   background: url(/_img/bg_content-btm.gif) no-repeat center bottom;
   padding-bottom: 40px;
   width: 905px;
   margin:0 auto;
   overflow: auto;
}

body#home #content-wrap{
   background: url(/_img/bg_content_NEW.png) no-repeat left top;
}

/* =Home Page
---------------------------------------------------------------------
*/
#mission h2{
  text-align: center;
  background: transparent url(/_img/bg_h2_mission.png) no-repeat center center;
  text-indent: -9999px;
  line-height: 85px;
}

#intro-vid{
  height: 505px;
  width: 875px;
  margin: 0 auto;
  background: url(/_img/video_placeholder.png) no-repeat left top;
}

body#home #content{
  width: 840px;
  margin: 0 32px;
  padding: 0;
  background: #f2f2f2;
}

body#home #content div{
  float: left;
  width: 250px;
  margin-right: 45px;
}

body#home #content div p{
  margin: 0;
}

body#home #content div.last{
  margin: 0;
}

body#home #content h3{
  background: url(/_img/bg_home-titles.jpg) no-repeat left top;
  height: 73px;
  text-indent: -9999px;
}

body#home #content .relationships h3{
  background-position: left top;
}
body#home #content .church h3{
  background-position: -290px top;
}
body#home #content .prayer h3{
  background-position: -590px top;
}


/* =Content
---------------------------------------------------------------------
*/
#content{
   clear: both;
   background: url(/_img/bg_content-top.gif) no-repeat center 69px;
}

#content .text{
  background: url(/_img/bg_text.gif) repeat-y center;
  min-height: 425px; /* min-height is for #content-wrap gradeint */
  padding: 0 45px;
  clear: both;
}

#content .text .left{
  float: left;
  display: inline;
  width: 375px;
  margin-right: 20px;
}
#content .text .right{
  float: left;
  display: inline;
  width: 375px;
  margin-left: 20px;
}

#content .text a.zoom,
#content .text a.thickbox {
  background: url(/_img/bg_img.gif) no-repeat;
  float: right;
  width: 175px;
  height: 116px;
  padding: 5px 6px 6px 5px;
  margin: 3px 0 10px 10px;
  position: relative; /* position this so the icon can be absolute */
}

#content .text a.zoom img{
  margin: 0;
}
#content .text a.zoom span.zoom{
  position: absolute;
  top: 0;
  right: 1px;
}

#content div#zoom td.mm{
  padding: 0 !important;
}

#content p{
 font-size: 1.3em;  /* Sets content font at 12px */
}


#content ul,
#content ol{
  margin: 0 0 1em 2em;
}

#content li{
   margin-bottom: 0;
   color: #868686;
   font-size: 1.3em;
   line-height: 1.5;
}

#content ul li{
  list-style-image: url(/_img/bg_li-bullet.gif);
}

#content li li{
   font-size: 1em;
}

#content blockquote{
   margin-left: 3em;
}

#content hr{
   display: block;
   margin-bottom: 1em;
}

#content a{
  color: #63beeb;
}

#content a:hover{
   text-decoration: none;
}

#content img{
   float: left;
   margin: 0 10px 5px 0;
}

#content img.nofloat{
  float: none;
  margin-right: 0;
}

#content #text{
   clear: both;
}

/* pricing */

#content #pricing{
  float: left;
  width: 840px;
  height: 337px;
  margin: 0 0 0 -17px;
  padding: 42px 0 0 6px;
  background: url(/_img/bg_pricing.jpg) no-repeat;
}

#content #pricing div.pricing{
  float: left;
  width: 153px;
  padding: 0 7px;
  text-align: center;
}

#content #pricing div.first{
  width: 138px;
  /*opacity: .5;*/
}

#content #pricing div.featured{
  margin-top: -22px;
  padding: 0 20px;
  width: 163px;
}

#content #pricing div.third{
  width: 140px;
}

#content #pricing div.last{
  width: 144px;
}

#content #pricing div.pricing h3{
  color: #4e5a64;
  margin-bottom: 10px;
  font-size: 25px;
  text-shadow: -1px -1px .1em #bebfbf;
  line-height: 1;
}

#content #pricing div.pricing.featured h3{
  color: #fffffe;
  font-size: 35px;
  text-shadow: -1px -1px .1em #739097;
}

#content #pricing div.pricing h4{
  margin-bottom: 11px;
  color: #111922;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

#content #pricing div.pricing.featured h4{
  font-size: 20px;
}

#content #pricing div.pricing p{
  margin: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid #c5c5c5;
  color: #424c56;
  font-size: 16px;
  line-height: 1.1875;
}

#content #pricing div.pricing.featured p{
  border-bottom-color: #455760;
  color: #ececec;
  font-size: 18px;
}

#content #pricing div.pricing ul.options{
  margin: 0 0 12px;
  padding-top: 12px;
  border-top: 1px solid #f3f3f3;
}

#content #pricing div.pricing.featured ul.options{
  border-top-color: #839da7;
}

#content #pricing div.pricing ul.options li{
  color: #111922;
  font-size: 15px;
  list-style: none;
  line-height: 1.3333;
}

#content #pricing div.pricing.featured ul.options li{
  color: #f1f3f5;
  font-size: 18px;
}

#content #pricing div.pricing ul.options li span{
  color: #81220c;
  font-weight: bold;
}

#content #pricing div.pricing.featured ul.options li span{
  color: #ecab24;
}

#content #pricing div.pricing p.button{
  border: 0;
  padding: 0;
}

#content #pricing div.pricing p.button a,
#content #pricing div.pricing p.button span{
  display: block;
  width: 84px;
  height: 27px;
  margin: 0 auto;
  background: url(/_img/btn_sign-up.png) no-repeat;
  text-indent: -9999px;
}

#content #pricing div.pricing p.button span{
  width: 122px;
  background: url(/_img/btn_coming-soon.png) no-repeat;
}

#content #pricing div.pricing p.button a:hover{
  background-position: left bottom;
}

/*#content .text .pricing{
  float: left;
  display: inline;
  width: 145px;
  text-align: center;
  border: 1px solid #2f485d;
  background: #F2F2F2;
  border-right: none;
  margin-top: 25px;
  padding: 5px;
  font-size: 1.2em;
}
*/
/*#content .test .pricing{
  display: block;
  clear: left;
  float: none;
  width: 765px;
  margin: 0 auto;
  border: 1px solid #2f485d;
  border-bottom: 0;
}
*/
/*#content .test .pricing:after{
  content: "."; 
  display: block; 
  clear: both; 
  height: 0; 
  visibility: hidden;
}
*/
/*#content .test .pricing.legend{
  padding-top: 20px;
  padding-bottom: 0;
  border: 0;
  background: none;
}
*/
/*#content .test .pricing.legend h3{
  line-height: 1;
}
*/
/*#content .text .pricing.last{
  border-right: 1px solid #2f485d;
}
*/
/*#content .test .pricing.last{
  margin-bottom: 20px;
  border-bottom: 1px solid #2f485d;
}
*/
/*#content .text .pricing h4{
  font-weight: normal;
}

#content .text .pricing .details{
  border-bottom: 1px solid #2f485d;
  margin-bottom: 8px;
}
*/
/*#content .test .pricing .details{
  float: left;
  width: 200px;
  margin: 0;
  border: 0;
}
*/
/*#content .test .pricing .details p{
  margin: 0;
}
*/
/*#content .text .pricing ul.options{
  margin:0;
}

#content .text .pricing ul li{
  list-style-image: none;
  list-style-type: none;
}
*/
/*#content .test .pricing ul li{
  float: left;
  width: 110px;
  padding-top: 30px;
  text-align: center;
  line-height: 1.25;
}
*/
/*#content .test .pricing.legend ul li{
  padding: 0;
}
*/
/*#content .text .pricing ul li span{
  color: #197e9d;
  font-weight: bold;
}
*/
/*#content .test .pricing ul li span{
  display: block;
}
*/
/*#content .test .pricing p.button{
  padding-top: 15px;
}
*/
/*#content .test .pricing.legend p.button{
  padding: 0;
  line-height: 1.25;
}
*/
/*#content .text .pricing p.button a{
  display: block;
  width: 82px;
  height: 29px;
  background: url(/_img/btn_sign-up.png) center top;
  margin: 10px auto;
  text-indent: -9999px;
}

#content .text .pricing.left-shadow{
  background: #F2F2F2 url(/_img/bg_shadow-left.png) repeat-y right top;
}

#content .text .pricing.right-shadow{
  background: #F2F2F2 url(/_img/bg_shadow-right.png) repeat-y;
  border-left: none;  
}
*/
/*#content .test .pricing.left-shadow{
  background: #F2F2F2 url(/_img/bg_shadow-top.png) repeat-x left bottom;
}
*/
/*#content .test .pricing.right-shadow{
  background: #F2F2F2 url(/_img/bg_shadow-bottom.png) repeat-x;
  border: 1px solid #2f485d;
  border-top: none;  
  border-bottom: none;  
}
*/
/*#content .text .featured{
  width: 174px;
  margin: 0 0 15px 0;
  padding-top: 20px;
  padding-bottom: 20px;
  border: none;
  font-size: 1.4em;
  border: 2px solid #197e9d;
  background: none;
}
*/
/*#content .test .featured{
  width: 771px;
  margin: 0;
  padding: 15px 20px;
}
*/
#content div.text.form{
  padding-right: 100px;
}

/* demo signup form */

#content div.form form{
  border-top: 1px solid #e5e3e4;
  margin-top: 25px;
  padding-top: 25px;
}

#content div.form form legend{
  display: none;
}

#content div.form form .text{
  background: none;
  min-height: 0;
  padding: 0;
}

#content div.form form div{
  clear: both;
  margin-bottom: 10px;
}

#content div.form form p{
  margin-bottom: 0;
}

#content div.form form p.description{
  font-size: 12px;
  font-style: italic;
}

#content div.form form label{
  float: left;
  width: 225px;
  padding: 7px 10px;
  font-weight: bold;
  text-align: right;
}

#content div.form form div.text input{
  width: 400px;
  margin-bottom: 3px;
  padding: 6px;
  border: 1px solid #e5e3e4;
  color: #868686;
  font-size: 13px;
  font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
}

#content div.form form div.select select{
  margin: 6px 0;
}

#content div.form form p#formsubmit{
  padding-left: 245px;
}

/* ccoptin */

form#ccoptin{
  margin-top: 15px;
}

form#ccoptin input{
  width: 400px;
  margin-bottom: 3px;
  padding: 6px;
  border: 1px solid #e5e3e4;
  color: #868686;
  font-size: 13px;
  font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
  vertical-align: middle;
}

form#ccoptin input.submit{
  width: auto;
  padding: 0;
  border: 0;
  vertical-align: middle;
}

/* =Footer
---------------------------------------------------------------------
*/

#footer{
   clear: both;
   overflow: auto;
   width: 905px;
   margin: 0 auto;
   font-size: 1.2em;
}

#footer p{
   float: left;
   display: inline;
   margin-left: 0;
}

#footer p.copyright{
  margin-left: 35px;
}

#footer p.copyright a{
  color: #868686;
}

#footer p.powered{
   float: right;
   display: inline;
   margin-right: 35px;
}

#footer a{
  text-decoration: none;
}

#signup{
  background: url(/_img/bg_signup.gif) no-repeat center top;
  width: 905px;
  height: 100px;
  padding: 20px 0 25px;
  margin: 0 auto;
}

#signup h4{
  height: 27px;
  text-indent: -9999px;
  /*background: url(/_img/bg_home-titles.jpg) no-repeat left -73px;*/
  background: url(/_img/bg_demo.jpg) no-repeat left center;
}

#signup .community h4{
  width: 236px;
  margin-bottom: 10px;
}
#signup .search h4{
  width: 338px;
  background: url(/_img/bg_home-titles.jpg) no-repeat left -73px;
  background-position: -251px -73px;
}

#signup .community{
  float: left;
  display: inline;
  margin: 0 35px 0 45px;
  width: 370px;
  font-size: 1.2em;
}

#footer .community p.start-now,
#footer .community p.see-demo{
  float: right;
  margin:0;
  text-indent: -9999px;
}

.community p.start-now a,
.community p.see-demo a{
  display: block;
  width: 103px;
  height: 28px;
  background: url(/_img/btn_see-demo.png);
}

.community p.see-demo a:hover{
  background-position: left bottom;
}

#signup .search{
  float: left;
  display: inline;
  margin: 0 30px 0 30px;
  width: 380px;
}

.search form fieldset{
  margin-top: 12px;
  width: 380px;
}

.search form input{
  border: none;
  float: left;
  height: 18px;
  width: 260px;
  padding: 10px 10px;
  color: #8f8f8f;
  background: url(/_img/search_input.jpg) no-repeat left top;
  font-size: 1.2em;
}

.search form a#search_go{
  display: block;
  width: 91px;
  height: 38px;
  background: url(/_img/search_btn.jpg) no-repeat left top;
  float: right;
  text-indent: -9999px;
}

/* blog */

p.subscribe.blog{
  position: absolute;
  right: 45px;
  top: 85px;
}

p.subscribe.blog a{
  display: block;
  padding: 1px 0 1px 22px;
  background: url(/_img/feed.png) no-repeat left center;
}

body#blog h3.blogtitle{
  margin-bottom: 1em;
}

body#blog div.post{
  margin-bottom: 50px;
}

body#blog div.post h4 a:hover{
  text-decoration: underline;
}

body#blog div.post p.author,
body#blog p.date{
  font-size: 11px;
}

body#blog div.content{
  float: left;
  width: 590px;
}

body#blog div.sidebar{
  float: right;
  width: 225px;
  margin-top: 50px;
  text-align: right;
}

body#blog div.sidebar h3{
  margin-bottom: 5px;
}

body#blog div.sidebar ul{
  margin-bottom: ;
}

body#blog div.sidebar li{
  list-style: none;
}

body#blog p.comments a.thickbox{
  width: auto;
  padding: 0;
  margin: 0;
  height: auto;
  float: none;
  background: none;
}

/* blog comments */

#content #comments{
   clear: both;
   width: 590px;
   margin-top: 35px;
}

#content #comments h3{
  margin-left: 14px;
}

#content #comments h4{
   clear: left;
   margin-bottom: 10px;
   padding: 5px 0;
   border-top: 1px solid #F2F2F2;
   border-bottom: 1px solid #F2F2F2;
}

#content #comments img.member-pic{
   float: left;
   margin: 0 10px 5px 0;
}

#content #comments p.comment-name{
   margin-bottom: 5px;
   padding: 0 3px;
   background: #000;
   font-size: 75%;
   text-transform: uppercase;
}

#content #comments p.comment-thanks{
   color: #E76522;
   font-style: italic;
}

#content #comments p.comments-login{
   clear: left;
   padding: 5px 0;
}

#content #comments form{
  margin-left: 14px;
}

#content #comments label{
  font-size: 1.6em;
  line-height: 1.6;
  font-weight: bold;
  color: #197e9d;
}

#content #comments textarea{
   display: block;
   width: 336px;
   padding: 5px;
   color: #868686;
   font-size: 11px;
   font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
}

#content #comments input#comment-submit{
   display: block;
   padding: 5px;
   border: 0;
   background: #6dc2ec;
   color: #FFF;
   font-size: 11px;
   font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
}

#content #comments div.comment-text{
   color: #F2F2F2;
   font-size: 90%;
   line-height: 1.5;
}

#content #comments p.comments{
   padding: 7px 14px;
   background: #F2F2F2;
   font-size: 11px;
   font-weight: bold;
}

#content #comments .comment{
   float: left;
   width: 562px;
   margin-bottom: 15px;
   padding: 0 14px;
   background: #F2F2F2;
   font-size: 11px;
}

#content #comments .comment p{
  font-size: 11px;
}

#content #comments .comment h5{
   margin: 0 -14px .5em;
   padding: 6px 14px;
   border-bottom: 1px solid #B9B9B9;
   background: #FCFCFC;
   color: #6E6D77;
   font-size: 12px;
}