/*

	CCA For Social Good  -  by Booyant, Inc.
	Contact Info: team@booyant.com  / 978.729.8408
	VERSION 1.0
	
	CONTENTS ----------
	
	   1.BODY
	   2.DEFAULT STYLING
	   3.HEADINGS
	   4.LINKS
	   5.IMAGES
	   6.LAYOUT
	   7.BRANDING/MASTHEAD
	   8.NAVIGATION
	   9.SITEINFO/FOOTER
	   10.HOME PAGE
	   11.PRIMARY CONTENT
	   12.SECONDARY CONTENT
	   13.INTERNAL PAGES
	   14.FORMS
	   
	   
    -------------------
	
*/



@import url(reset.css); /* RESET CSS */


/* 1.BODY
---------------------------------------------------------------------- */

body {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 62.5%; color: #333; }
html {height: 100%; margin-bottom: 1px;}
ul#nav_access { position:absolute; top:-9999px; left:-9999px; }



/* 2.DEFAULT STYLING
---------------------------------------------------------------------- */


p {margin-bottom: 1.2em;}
hr { height:0; border:0; border-top:1px dotted #ccc; margin: 0.8em 0 0.2em 0; }

blockquote { font-style:italic; background:#eee; padding:1.2em; margin: 0.8em 0 1.2em 0; }
blockquote cite { display:block; font-style:normal; text-transform:uppercase; font-size:1em; letter-spacing:1px; color:#666;  margin-top: 0.5em;}

pre {  }
pre code {  }
code {  }

abbr { border-bottom:1px solid #ccc; cursor:help; }
abbr:hover { border-color:#999; }
del { color:#999; }
strong { font-weight:bold; }
em { font-style: italic; }
sup { font-size:0.75em; position:relative; top:-3px; }

em {font-style:italic;}


ol { list-style:decimal; list-style-position:outside; margin: 0.8em 0em 1.4em 1.4em;}
ol li { margin: 0em 0em 0.3em 3em; }



/* 3.HEADINGS
---------------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { margin-bottom: 0.3em;}
h1 {} /* Reserved for logo image replacement */
h2 {font-size: 1.8em; padding: 0 20px; font-weight: bold;}
h3 {font-weight: bold; }
h4 {font-size: 1em; color: #007698; text-transform: uppercase; }
h5 {font-size: 1.2em; }
h6 {font-size: 1.2em; font-style: italic;}


#banner h2 {font-size: 2.8em; color: #fff; line-height: 1.19817em; font-weight: normal; padding: 42px 92px; width: 430px;}

.boxes img {float: left;}
.wrap img {margin: 4px 10px 5px 2px;}
.column p {float: right; width: 138px;}
.column img {margin-top: 8px;}
#content-secondary h2 {background-color: #ff9a01; background-image: url(../images/bg-yellowH2.gif); background-position: left top; background-repeat: repeat-x; color:#1b1b1e; font-size: 1.07em; padding-top: 4px; padding-bottom: 4px;}
/*#content-secondary a {clear: both; display: block; text-align: right; text-decoration: none; zoom: 1;}*/
#content-secondary div.boxes a {position: absolute; bottom: 12px; right: 20px;}

div.secondary-feature h2 {background: #b9d7fc;font-size: 1.6em;}

.boxes {border: 1px solid #999999; padding: 2px 2px 30px 2px; margin-bottom: 20px; position: relative; }
#content-secondary .gutter {padding: 20px 12px; }
div.main-feature .gutter {padding: 25px 44px; font-size: 1.5em; line-height: 1.33333em; }
div.secondary-feature .gutter {padding: 25px 44px; font-size: 1.5em; line-height: 1.33333em; }
body#cost_savings_pg div.secondary-feature .gutter {padding: 5px 0px;  }


#content-secondary .boxes {-moz-border-radius: 3px; -webkit-border-radius: 3px; }
div.secondary-feature .boxes {-moz-border-radius: 5px; -webkit-border-radius:5px; }


div.main-feature h2 {background: #72a8f8 url(../images/bg-pf-h2.gif) left top repeat-y;}
div.main-feature {background:  url(../images/bg-main-feature.gif) right top no-repeat; padding-bottom: 10px;}
div.main-feature img {float: left; margin-right: 43px;}
div.secondary-feature .p-list img {float: left; margin-right: 43px; clear: left;}
div.main-feature h3 {font-size: 1.3em; color: #000; font-weight: normal; margin-top: 12px;}
div.main-feature a.signup-btn {display: block; background: url(../images/btn-signup.gif) left top no-repeat; height: 30px; width: 217px; float: right; text-decoration: none; color: #000; line-height: 30px; text-align: center; margin: 10px 100px; font-size: 1.1em;}
div.main-feature p {}

ul#feature-nav {padding: 20px 0; }
div.secondary-feature .gutter ul#feature-nav{font-size: 100%;}

ul#feature-nav li {width: 345px; float: left; background: url(../images/boxes/bg-box-bottom.gif) left bottom no-repeat; padding-bottom: 10px; margin: 0px 10px 10px 0px;}
ul#feature-nav li.even {margin: 0 0 10px 0;}
ul#feature-nav li a  {display: block; background:url(../images/boxes/bg-box-body.gif) left top no-repeat; padding: 32px 16px 18px 16px; min-height: 0px; text-decoration: none; color: #000; font-size: 0.8em; float: left; height: 7em;}
ul#feature-nav li p, ul#feature-nav li h3 {width: 160px; float: right; line-height: 1em;}
ul#feature-nav li a img {float: left; margin-right: 18px;}



#content-primary h2 {padding-top: 0.3em; padding-bottom: 0.3em;}

/* 4.LINKS
---------------------------------------------------------------------- */
a {color:#007aa4; }
a:link,
a:visited {  }
a:hover,
a:focus {color:#000;}


/* 5.IMAGES
---------------------------------------------------------------------- */

img {}

img.fl { float:left; }
img.fr { float:right; }




/* 6.LAYOUT
---------------------------------------------------------------------- */

div#wrap {margin:0 auto; width: 975px; position: relative;}
#main-body {clear: both;}

div#header {padding: 28px 13px 22px 38px; }
div#main-nav {float:left; width:224px; }
div#banner {height: 143px; width: 975px; clear: both; margin-bottom: 8px; background-repeat: no-repeat; background-position: 0 0;overflow: hidden;}




div#section-nav { }
div#content-primary {width: 700px; float: right; position: relative; padding-bottom: 40px;}
div#content-secondary {width: 262px; font-size: 1.3em; line-height: 20px;float: left; }
#footer { position: relative}



.clear {clear: both; height: 0px; line-height: 0px; overflow: hidden; margin: 0; padding: 0;}
.group:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}


/* 7.BRANDING/MASTHEAD
---------------------------------------------------------------------- */

#header h1 {float: left; width:292px; height:58px; text-indent:-9999em;  }
#header h1 a {background: url(../images/logo.gif) top left no-repeat; width:292px; height:58px; display: block; }





/* 8.NAVIGATION
---------------------------------------------------------------------- */
div#navigation {font-size: 1.3em; position: relative; z-index: 100;}
ul#main-nav li {float: left; background: #ff9a00 url(../images/nav/bg-main-nav.gif) left top repeat-x;}
#main-nav li a {display: block; color: #000; text-transform: uppercase; text-decoration: none; padding: 10px 14px; }
#main-nav a:hover {background: #ffe594;}


ul#main-nav {float: left; background: #ff9a00 url(../images/nav/bg-main-nav.gif) left top repeat-x; width: 100%;}
ul#main-nav li.first {background: url(../images/nav/bg-mn-home.gif) left no-repeat; padding-left:28px;}
ul#main-nav li.end {background: #ff9a00 url(../images/nav/bg-mn-end.gif) top right no-repeat; float:right; width: 17px; height: 32px;}

/* sub nav begins! */
ul#main-nav ul {background: #ffe594; position: absolute; width: 190px; padding: 12px 0 10px 0; display: none;}
ul#main-nav ul li {float: none; background: none; }
ul#main-nav ul li a {text-transform: none; font-size: 0.9237em; padding: 6px 14px; line-height: 1.2em;}
ul#main-nav ul li a:hover {text-decoration: underline;}

ul#utility-nav {float: right; font-size: 1.3em; margin: 40px 0px 2px 0px;}
ul#utility-nav li {float: left; }
ul#utility-nav li a {color: #333; text-decoration: none; background: url(../images/nav/bg-ut.gif) right 4px no-repeat; display: block; padding: 2px 7px;}
ul#utility-nav li a:hover{text-decoration: underline;}
ul#utility-nav li.ut-signup a {background: none; }
ul#utility-nav li.ut-signup a {color: #007aa4; font-weight: bold; }

/*ul#action-nav {position: absolute; top: 50px; right: 0; }
ul#action-nav li {float: left;}
ul#action-nav li a {color: #333; }*/
ul#action-nav {display: none;}

ul#login {float: right; margin: 14px 0 0 0; clear: right; }
ul#login li {float: left; margin-left: 7px;}
ul#login input {width: 90px; padding-left: 10px;}
ul#login input#submit {width: 58px; padding: 0;}

/*Automatically lights up appropriate navigation on pages*/
#cost_savings_pg #main-nav li.cost-savings a,
#hr_pg #main-nav li.hr a,
#insurance_pg #main-nav li.insurance a,
#marketing_pg #main-nav li.marketing a,
#fundraising_pg #main-nav li.fundraising a,
#training_pg #main-nav li.training a,
#library_pg #main-nav li.library a,
#connect_pg #main-nav li.connect a
{background: #ffe594;}

/*Changes to banner dependant on page*/

/*.pg-cost-saving #banner {background-image: url(../images/banners/bg-cost-saving.gif);}*/
.pg-hr #banner {background-image: url(../images/banners/bg-hr.gif);}



/* call out nav */
#call-to-action-nav{
	position: absolute;
	top: 144px;
	right: 0;
	width: 350px;
	
}

#call-to-action-nav li a{
	display: block;
	width: 166px;
	height: 24px;
	background: url("/images/nav/calloutnav-bg.gif") 0 -2px no-repeat;
	float: left;
	margin-right: -20px;
	font-size: 1.5em;
	text-decoration: none;
	color: black;
	text-align: center;
	padding-top: 8px;
}

#call-to-action-nav li a:hover{
	background-position: 0 -40px;
}



/* 9. SITEINFO/FOOTER
---------------------------------------------------------------------- */

#footer {clear: both; background: url(../images/bg-footer.gif) left top repeat-x; padding: 10px 10px 30px 0px; font-size: 1.2em; color: #666; }
div#footer li {float:left; }
#footer a:link,
#footer a:visited {color: #666; display: block; text-decoration: none; background: url(../images/bg-footer-nav.gif) right 52% no-repeat; padding: 8px 10px;}
#footer a:hover {color: #000;}

div#footer li.ft-home a {padding-left: 0;}
div#footer li.ft-privacy a {background: none;}
#footer p {float: right; margin-top: 8px;}

/* 10.HOME PAGE
---------------------------------------------------------------------- */


/* -- Layout -- */
.pg-home div#content-primary {background: url(../images/boxes/bg-hpbox-top.gif) left top no-repeat; width: 100%; margin-bottom: 7px; padding-bottom: 0;}
.pg-home div#content-secondary {float: none; width: 100%; margin-bottom: 7px;}

/* -- Headers -- */
.pg-home h2 {padding: 0; font-weight: normal; }
.pg-home div#content-secondary h2 {width: 100%; font-size: 1.38em; background-color: transparent; background-image: none; }
div.tips h2 {color: #333333; }
div#member-benefits h2 {color: #fff; text-align: center; padding: 10px 0;}

div#member-benefits h3 {font-size: 1em; margin-bottom: 0.2em; }
.pg-home div#content-primary h3 {background: url(../images/homepage/title-button.png) left top no-repeat; width: 905px; height: 25px; margin: 0 auto; text-align: center; font-size: 1.15em; text-transform: uppercase; line-height: 25px; position: relative; top: -10px; letter-spacing: 0.06em; color: #333;}

div.further-info h4 {float: left; width: 323px; font-weight: bold; font-size: 1.3em; color: #000; text-transform: none; padding: 20px 10px 20px 0px;}

/* -- Reset -- */
.pg-home div#content-secondary a {float: none;} /*Reset the regular default of link floating right in the secondary content*/
.pg-home #banner {background-image: url(../images/banners/bg-home.gif); height: auto; min-height: 195px; margin-bottom: 0; background-color: #0781eb}


/* -- JQuery rollover -- */
ul#icon-nav {width: 893px; margin: -4px auto 0 auto;}
ul#icon-nav li {float: left; margin-right: 3px; position: relative;}
ul#icon-nav li.connect {margin-right: 0;}
ul#icon-nav a {display: block; width: 109px; height: 99px; background-position: 0 0; background-repeat: no-repeat; text-indent: -9999em;}
ul#icon-nav a:hover {background-position: 0 -99px;}
ul#icon-nav a span {display: none; background: url(../images/homepage/icons/over.png) left top no-repeat; height: 18px; width: 21px; position: absolute; bottom: -14px; left: 42px;}
/*ul#icon-nav a:hover span {display: block;}*/
ul#icon-nav a span.display-span{display: block;}
ul#icon-nav a span.hide-span{display: none;}

ul#icon-nav li.cost_savings a {background-image: url(../images/homepage/icons/icon-cs.gif);}
ul#icon-nav li.hr a {background-image: url(../images/homepage/icons/icon-hr.gif);}
ul#icon-nav li.insurance a {background-image: url(../images/homepage/icons/icon-insurance.gif);}
ul#icon-nav li.marketing a {background-image: url(../images/homepage/icons/icon-marketing.gif);}
ul#icon-nav li.fundraising a {background-image: url(../images/homepage/icons/icon-fundraising.gif);}
ul#icon-nav li.training a {background-image: url(../images/homepage/icons/icon-training.gif);}
ul#icon-nav li.library a {background-image: url(../images/homepage/icons/icon-library.gif);}
ul#icon-nav li.connect a {background-image: url(../images/homepage/icons/icon-connect.gif);}

div.further-info {width: 893px; margin: 16px auto; font-size: 1.3em; line-height: 1.3em; height: 70px; position: relative;}
div.further-info p {float: right; width: 532px; margin-top: 16px; }
div.feature-wrap {background: url(../images/boxes/bg-hpbox-bot.gif) left bottom no-repeat; padding-bottom: 10px;}

div.further-info div{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

.pg-home div.tips ul#tips-collection{
	background: none;
	margin: 0;
	padding: 0;
}

ul#tips-collection li {
	float: left;
	font-size: 0.9em;
}
/* -- Main Feature -- */
div#member-benefits ul {background: url(../images/boxes/bg-hp-green-bot.gif) left bottom no-repeat;}
div#member-benefits ul li {float: left; width: 181px; background: url(../images/homepage/border.gif) left top no-repeat; padding: 0 18px; font-size: 0.80em; color: #000; line-height: 1.3em;}
div#member-benefits li.first {background: none; padding-left: 0; margin-left: 30px;}



div#member-benefits {background: url(../images/boxes/bg-hp-green-top.gif) left top no-repeat; width: 664px;  float: left; }
div#member-benefits ul li img { text-align: center; display: block; margin: 0 auto 6px auto;}






div.tips {background: url(../images/homepage/bg-tip-top.gif) left top no-repeat; width: 304px; float: right; padding-top: 20px; line-height: 1.3em;height: 12em; position: relative;}

div.tips ul {}
.pg-home div#content-secondary div.tips .gutter {padding: 0 24px;}
div.tips #tip-nav li {float: left; padding: 0 12px;}
div.tips ul li.previous {border-right: 1px solid #0078a0; margin-left:70px;}
div.tips #tip-nav{
	position: absolute;
	bottom: 0;
	right: 0;
	background: url(../images/homepage/bg-tip-bot.gif) left bottom no-repeat; 
	width: 100%;
	padding-bottom: 10px;
}


div.tips #tip-nav a:focus{
color:#007aa4;
}

/*
Overview Expand Home Page
*/

a#overview_expand, div#overview_expand_content{
	font-size: 1.3em;
}

div#overview_expand_content{
	line-height: 1.3em;
	background: url(/images/hp_learn_content_grad.jpg) 0 0 repeat-x;
	margin-top: -1px;
}

a#overview_expand{
	text-decoration: none;
	display: block;
	background: url(/images/hp_learn_bar_grad.jpg) 0 0 repeat-x;
	color: black;
	padding: 9px 0 9px 0;
}

.pg-home a.expand span, .pg-home a.contract span{
	display: block;
	height: 20px;
	width: 30px;
	float: left;
	background: url(/images/plus-minus.gif) 0 0 no-repeat;
	margin-top: -1px;
	margin-left: 15px;
}

.pg-home div.more_content{
	border-bottom: none;
}

.pg-home a.expand span{
	background: url(/images/plus-minus.gif) 0 -31px no-repeat;
}
			
.pg-home a.contract span{
	
}


/* 11.PRIMARY CONTENT
---------------------------------------------------------------------- */



/* 12.SECONDARY CONTENT
---------------------------------------------------------------------- */

/*secondary-feature*/
/*bullets on lists and exceptions*/
div.secondary-feature ul li{
	background: url(/images/bullet.png) 0 .4em no-repeat;
	padding-left: 1em;
	margin-bottom: .5em;
}

div.secondary-feature ul#feature-nav li, div.secondary-feature ul.p-list li{
	padding-left: 0;
}

/*product-list*/
div.secondary-feature .p-list{
	padding: 0 2em;
}

div.secondary-feature .p-list li{
	background: none;
	clear: both;
	margin-bottom: 1.4em;
}
div.secondary-feature .p-list li:after {
	content: ".";
	display: block;
	height: 0; 
	clear: both; 
	visibility: hidden;
}
div.secondary-feature .p-list li h3{
	padding-top: 1em;
	margin-bottom: 0;
}


#customize_pg .secondary-feature{
	display: none;
}

/*connect list*/
#connect-list{
	margin-top: 2em;
}
#connect-list li{
	margin: 0 auto 1em auto;
	width: 283px;
	height: 80px;
	text-indent: -9999px;
}

#connect-list li a{
	display: block;
	height: 80px;
}

#connect-list #create-group{
	background: url(/images/connect-buttons/create-group.jpg) 0 0 no-repeat;
}
#connect-list #join-group{
	background: url(/images/connect-buttons/join-group.jpg) 0 0 no-repeat;
}
#connect-list #ask-question{
	background: url(/images/connect-buttons/ask-question.jpg) 0 0 no-repeat;
}



/* 13.INTERNAL PAGES
---------------------------------------------------------------------- */


/* 14.FORMS
---------------------------------------------------------------------- */

/* Signup Page */
#signup-page div#content-primary{
	float: left;
	width: 975px;
	height: 738px;
	background: url("/images/signup-login/signup-blue-bg.jpg") 0 0 no-repeat;
	margin-bottom: 20px;
}
#signup-page div#signup-form{
	font-size: 1.6em;
	padding-top: 35px;
	margin-top: 65px;
	margin-left: 175px;
	width: 592px;
	height: 619px;
	background: url("/images/signup-login/signup-form-bg.gif") 0 0 no-repeat;
}
#signup-page div#signup-form .label{
	width: 275px;
	text-align: right;
	float: left;
	margin-right: .6em;	}
#signup-page div#signup-form dt.long-label{
	width: 345px;
}
#signup-page div#signup-form dd{
	text-align: left;
	float: left;
	clear: right;
	margin-bottom: .7em;
}
#signup-page div#signup-form dd input{
	width: 205px;
}
#signup-page div#signup-form dd select{
	width: 215px;
}
#signup-page div#signup-form dd select#pref-method{
	width: 90px;
}
#signup-page div#signup-form dd input.med{
	width: 155px;
}
#signup-page div#signup-form dd input.short{
	width: 105px;
}
#signup-page div#signup-form h3{
	margin: 0 0 35px 200px;
	font-size: 1.5em;
	font-family: "Trebuchet MS";
	font-weight: normal;
}
#signup-page div#signup-form .submit-btn{
	clear: both;
	float: right;
	margin-right: 40px;
}

#signup-page div#signup-form #am-pm input {width: 12px;}

/* REVEAL for Services */


ul#services {
	
}
	ul#services li {
		margin: 0em 0em 0.8em 0em;
		padding-left: 0em;
		background: none;
	}
	ul#services ol li {
		margin: 0em; 
	}
		ul#services li a {
			background: url(/images/icn_expand.gif) left 8px no-repeat;
			display: block;
			padding-left: 1.8em;
			font-weight: bold;
		}
			a.expand_button {
				background-position: 0 0; background-repeat: no-repeat; display: block; padding-left: 1.8em;
			}
			
			ul#services a.expand {
				background-image: url(../images/icn_expand.gif);
			}
			
			ul#services a.contract {
				background-image: url(../images/icn_contract.gif);
			}
				div.more_content {
					display:none;
				}

				div.more_content {
					padding: 0.6em 1.8em; border-bottom: 1px dotted; margin-bottom: 0.6em;
				}
				

body#cost_savings_pg ul#services {
	margin:15px 44px 15px 44px;
}

.pg-home a#back-to-top, #signup-page a#back-to-top {display: none;}
#footer a#back-to-top {position: absolute; top: -36px; color: #007aa4; background: none; left: 280px; font-size: 1.2em; text-decoration: underline}
/* Temporarily hidden */
#login_form {display: none;}
.hidden {display: none;}
#print-logo {display: none;}