@import url("cpspcolors.css");

/* Developed by Click & Pledge (except clearfix) - All Rights Reserved - 2006 */
/* Steven White[at]clickandpledge.com */
/* WWW.CLICKANDPLEDGE.COM */


/*---------------------------------------------------------------------------------
::::::::::::::::::::: GLOBALS
---------------------------------------------------------------------------------*/

* {
	font-family:Arial, Helvetica, sans-serif;	
}

body {
	margin: 0px;
	padding: 0px;
}

p {
	margin: 0px;
	padding: 0px;
}

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

.clearfix {display: inline-table;}

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

.clearboth {
	clear: both;
	display: block;
}



/*---------------------------------------------------------------------------------
::::::::::::::::::::: STRUCTURE & ETC.
---------------------------------------------------------------------------------*/
#main {
	position: relative;
	min-height: 100%;
	width: 728px;
	margin: 0px auto 0px auto;
}

#secure{
	width: 708px;
	margin: 1px 0px 0px 0px;
	padding: 0px 10px 0px 10px;
}

#secure p{
	font-size: 12px;
	line-height: 24px;
	height: 25px;	
	vertical-align:middle;
}

#secure p a, #secure p a:visited {
	text-decoration: none;
}

#secure p a:hover, #secure p a:visited:hover {
	text-decoration: underline;
}

#secure img {
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
}

#step3 p {
	margin: 0px;
	padding: 2px 4px 2px 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color:#999999;
	margin-left: 15px;
}

#step3 p img {
	border: #CCCCCC 1px solid;
	margin: 2px 2px;
	padding: 2px;
}

#header {
	width: 698px;
	display: block;
	clear: both;
	margin: 1px 0px 0px 0px;
	padding: 15px;
}

#header h1 {
	font-size: 16px;
}

#header p {
	font-size: 10px;
}

#content {
	_width: 727px;
	padding: 0px;
	margin: 0px 0px;
	_overflow:hidden;
}

.pnlStep1{
	width: 380px;
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	min-height:250px;
	border-right: 1px solid #ffffff;
}

.leftcol{
	width: 380px;
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	/*min-height:340px;*/
	border-right: 1px solid #ffffff;
}

.rightcol {
	width: 342px;
	clear: right;
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
}

.leftcol, .rightcol {
	/*min-height: 620px;	*/
}

#step1, #step2, #step3, #step4 {
	/*padding: 0px;
	margin: 0px;
	float: left;
	clear:both;*/
}

#step1 {
	/*padding-bottom: 10px;*/
}

#step2, #step4 {
}

#step1 table, #step2 table{
	padding: 2px 0px 0px 0px;
	margin: 0px 0px 0px 10px;
}

.label{
	line-height: 1.2em;
	display: block;
	margin: 8px 0px 0px 0px;
	padding: 4px 0px 8px 30px;
	width: 50px;
	font-size: 0.7em;
	text-align:right;
	float:left;
}

#step1 .formelements {
	float: left;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.2em;
	margin: 4px 0px 10px 6px;
}

.formelements label {
	padding-right: 5px;
}

.formelements .boxit {
	display: block;
	width: 130px;
	margin: 2px 2px 2px 2px;
}

.donationitem
{
    font-family:Times New Roman;
    font-size: 0.7em;
}

#step1 .recurringpayments {
	display:block;
	clear:both;
	border-top: 1px solid #CCCCCC;
	margin: 0px 0px 0px 20px;
	width: 270px;
}

#step1 .recurringpayments label.label{
	float:left;
	clear:both;
	margin-left: 0px;
	padding-left: 0px;
}

#step1  .recurringpayments p.recurring {
	float:left;
	width:230px;
	font-size: 0.7em;
	line-height: 1.2em;	
	margin: 5px 4px 0px 0px;
}

#step1 .recurringpayments p.recurring input {
	position: relative;
	top:3px;
}

#step1 div.recurringpayments #recurringselections {
	/*display:block;*/
	font-size: 0.6em;
	width: 200px;
	float:left;
	margin-left: 20px;
	/*border: 1px solid #666666;*/
	padding: 2px;
	margin-top:0px;
	/*line-height: 18px;*/
	/*background:#C5C5C5;*/
}

#step1 .recurringpayments #recurringselections p {
	margin: 0px;
	padding: 0px;
}

#step1 .recurringpayments #recurringselections .radiobutton{
	clear:none;
	float:left;
}

#step2 table.formelements {
	float: right;
	font-size: 0.7em;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 8px 0px;
	clear:both;
	/*width: 406;*/
}

#step2 table.formelements label {
	padding: 0px 6px 0px 0px;
	margin: 0px 0px 0px 0px;
	clear:none;
	float: left;
	display: block;
	width: 60px;
	text-align:right;
	line-height: 0.9em;
}

#step2 table.formelements label.smaller {
	width: 45px;
}

#step2 table.formelements tr td {
	padding: 0px 0px 5px 0px;
	margin: 0px;
}

#step3 table.formelements {
	font-size: 0.7em;
	padding: 0px 0px 0px 0px;
	margin: 5px 0px 8px 0px;
	clear:both;
	width: 297px;
	float: right;
}

#step3 table.formelements label {
	padding: 0px 10px 0px 0px;
	margin: 0px 0px 0px 0px;
	clear:none;
	float: left;
	display: block;
	width: 100px;
	text-align:right;
	line-height: 0.9em;
}

#step3 input {
	width: 160px;
}

#step3 table.formelements label.smaller {
	width: 45px;
}

#step3 table.formelements tr td {
	padding: 0px 0px 5px 0px;
	margin: 0px;
}

#step3 .radiobutton{
	clear:none;
	float: left;
}

#step4 .checkbox {
	clear:none;
	float: left;
	width: 30px;
	padding: 0px 5px 0px 20px;
	margin: 10px 0px 0px 0px;
}

.submitbuttonimg 
{
	/*margin-top:150px;*/
	float:right;
	/*right:1px;*/
	/*position: absolute;*/
	
	vertical-align:bottom;
	bottom:0px;
}

#step4 a, #step4 a:visited {
	text-decoration: none;
}

#step4 a:hover, #step4 a:visited:hover {
	text-decoration: underline;
}

.smallleftmargin {
	margin-left: 8px;
}

.termscontent{
	line-height: 1.4em;
	display: block;
	/*margin: 10px 0px 0px 0px;*/
	padding: 5px 20px 5px 0px;
	width: 240px;
	font-size: 0.65em;
	font-weight: bold;
	text-align:left;
	float: left;
}

.allterms {
	line-height: 1.4em;
	display: block;
	margin: 0px 0px 0px 20px;
	padding: 10px 5px 90px 5px;
	width: 315px;
	min-height:100%;
	font-size: 0.65em;
	clear: both;
}

.CPAgreement {
	line-height: 1.4em;
	display: block;
	margin: 0px 0px 0px 20px;
	padding: 10px 5px 9px 5px;
	width: 265px;
	font-size: 0.65em;
	clear: both;
}

.requiredbylaw {
	line-height: 1.2em;
	/*display: block;*/
	margin: 0px 40px 0px 80px;
	/*width: 300px;*/
	font-size: 0.6em;
	text-align:right;
	clear:both;
	/*min-height: 20px;*/
}

input.narrow {
	width: 110px;
}

input.medium {
	width: 120px;
}

input.wide {
	width: 289px;
}

#content h1 {
	margin: 0px 0px 0px 0px;
	font-weight:bold;
	font-size: 0.9em;
	clear: left;
	overflow:hidden;
	height: 19px;
	min-height: 19px;	
}

#content .rightcol h1 {
	/*width: 295px;*/
}

.step {
	padding: 3px 12px 1px 12px;
	margin-right: 15px;
	margin-top: -2px;
	font-weight:bold;
	font-size: 12px;
	line-height: 15px;
	height: 26px;
	float: left;
	width: 50px;
	text-align: center;
	display: block;
}

.submitbutton {
	padding: 0px;
	display:block;
	clear: both;
	display: block;
	/*position: absolute;
	vertical-align:bottom;
	bottom:0px;*/
}


#footer {
	_height: 49px;
	min-height: 49px;
	width: 728px;
	margin: 0px auto 5px auto; 
	display: block;
	clear: both;
}

.tooltip{
    position:relative; /*this is the key*/
    z-index:24; /*background-color:#ffffff;*/
    text-decoration:none;
	left: 0px;
	margin: 0px;
	padding: 0px;
}

a.tooltip:hover{
	z-index:25; 
	background:none;
}

a.tooltip span{
	display: none;
}


a.tooltip:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
	padding: 10px;
    top:-10px; 
	left: -155px;
	width: 110px;
	margin-top: 20px;
	margin-left:25px;
	padding: 10px;
   	font: 10px Verdana, sans-serif; 
}

a.tooltip:hover span strong {
	font-weight: bold;
}

/* stuff for the thanks page */

.importantgraph {
	display: block;
	width: 300px;
	border: 1px dashed #006600;
	margin: 6px auto 0px auto;
	padding: 10px;
	font-size: 12px;
}

.importantgraph strong {
	color:#990000;
}

.thanksmessage {
	font-size: 18px;
	width: 450px;
	color:#08569b;
	font-weight:bold;
	display:block;
	margin: 20px 10px 10px 20px;
}

.thanksgraph {
	margin: 15px 30px 10px 30px;
	font-size: 12px;
	line-height: 22px;
}

p.thankslink {
	padding-right: 0px;
}

.thankslink a,
.thankslink a:visited {
	text-decoration: none;
	color:#003264;
	display:block;
	font-weight:bold;
	line-height: 18px;
	width: 260px;
	float:right;
	padding: 18px 40px 0px 20px;
	margin-top: 20px;
	_margin-right: 80px;
	background:url(../images/star_burst.png) no-repeat 0px 18px;
	_background:none;
	_background:url(../images/blast_bullet.gif) no-repeat 0px 18px;
	border-top:1px dashed #ffffff;
}


.thankslink a:hover,
.thankslink a:visited:hover {
	color:#0080FF;
}

.redtext {
	color:#990000;
}

.label2
{
	padding: 0px 0px 0px 0px;
	display: block;	
	font-size: 0.7em;
	text-align:left;
	float:left;
	width:100%;	
}

.label_Newsletter{	
	display: block;	
	font-size: 0.7em;
	text-align:left;	
	width:90%;	
}

.ErrorMessage
{
	padding: 4px 0px 8px 30px;
	display: block;	
	font-size: 0.7em;
	color:Red;
	text-align:left;
	float:left;
	width:50%;	
}

.testmodetext
{
 	font-size: 18px;
	color:Red;
}

#step1 .mobile {
	display:block;
	clear:both;
	border-top: 1px solid #CCCCCC;
	margin: 0px 0px 0px 20px;
	width: 270px;
}

#step1 .mobile label.label{
	float:left;
	clear:both;
	margin-left: 0px;
	padding-left: 0px;
}

#step1  .mobile p.recurring {
	float:left;
	width:230px;
	font-size: 0.7em;
	line-height: 1.2em;	
	margin: 5px 4px 0px 0px;
}

#step1 .mobile p.recurring input {
	position: relative;
	top:3px;
}

.mobile a span.helpbox, 
.mobile a:visited span.helpbox{
	display:none;
}

.mobile a:hover span.helpbox, 
.mobile a:visited:hover span.helpbox{
	display:block;
	float:right;
	position:absolute;
	display:block;
	margin-left: 150px;
	margin-top: -40px;
	padding: 10px;
	clear:none;
	z-index:456;	
	width:200px;
	background:#ffffff;
	border: 1px solid #2d7ed8;
}