﻿/*
 *	Use the section codes below to Ctrl+F jump to their respective sections.
 *
 *	CODE	SECTION
 *	=================================
 *	MODLC	Modular layout classes
 *	GLOBL	Globals
 *	RGTRL	Right rail
 *	CUCLS	Custom classes
 *	SEC02	Login
 *	SEC03	Home
 *	SEC05	Pledge Card
 *	SEC06	Disbursements
 *	SEC08	Contact Us
 *
 */



@import url('reset.css');

#__asptrace { display: none; }

body {
	background:#012346;	
}

/* Modular layout classes [MODLC]
   ============================================================================================== */

.one-column {
	clear: both;
	margin-bottom: 25px;
	width: 940px;
}
.two-columns, .three-columns, .column-rail, aside {
	float: left;
	margin: 0 30px 25px 0;
}
.column-rail, aside {
	margin-right: 0;
}
.two-columns {
	width: 610px;
}
	.two-columns.equal-width {
		width: 455px;
	}
	.two-columns.with-border {
		border-right: 1px solid #fff;
		margin: 0 0 25px;
		padding: 0 30px 0 0;
		width: 439px;
	}
	.two-columns.with-border.column-rail {
		border: 0;
		border-left: 1px solid #c8c8c8;
		padding: 0 0 0 30px;
	}
.three-columns {
	width: 290px;
}
.column-rail, aside {
	width: 300px;																					/* duplicated to cascade - do not move */
}
.content-top {
	margin: 0 0 20px;
}
.content-bottom {
	clear: both;
	margin: 20px 0 25px;
}



/* Globals [GLOBL]
   ============================================================================================== */

hr {
	border: 0;
	border-top: 1px dotted #999;
	clear: both;
	height: 1px;
	margin: 20px 0;
}

/* Form elements */

fieldset div {
	clear: both;
	margin: 5px 0;
}
label {
	color: #174560;
	font-weight: bold;
	line-height: 2em;
}
input[type="text"], input[type="password"], select, textarea {
	background: #fff url(../img/bg-grad-input-text.png) repeat-x bottom;
	border: 1px solid #adadad;
	padding: 5px;
	
	color: #595959;
}
input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
	border-color: #dbb70c;
}
input[type="submit"], .btn-primary {
	background: #ffd304;
	border: 1px solid #edbe00;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	cursor: pointer;
	padding: 8px 45px;
	
	color: #012346;
	font: bold 16px/normal Arial, Helvetica, Tahoma, sans-serif;
}
input[type="submit"]:hover, .btn-primary:hover {
	background: #edbe00;
	filter: none;
	
	text-decoration: none;
}
.btn-primary {
	display: inline-block;
	padding: 13px 46px;
}
.btn-secondary {
	background: -moz-linear-gradient(top, #555, #222);
	background: -webkit-linear-gradient(top, #555, #222);
	background: linear-gradient(top, #555, #222);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222');
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	display: inline-block;
	padding: 10px 35px;
	
	color: #fff;
	font: normal 14px/normal Arial, Helvetica, Tahoma, sans-serif;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
.btn-secondary:hover {
	background: #4f4f4f;
	filter: none;
	
	text-decoration: none;
}
select {
	background-color: transparent;
	
	font: normal 12px/1em Helvetica, Arial, Tahoma, sans-serif;
}

/* List elements */

ul {
	list-style: disc outside url(../img/ico-bullet-square-blue.png);
	margin-left: 17px;
}
ol {
	list-style: decimal outside none;
	margin-left: 17px;
}

/* Structural elements */

	
	/* Header elements */
	
	header {
	}
	
	#top-bar {
		width:100%;
		height:43px;
		background:#02538b;	
	}
	
	#top-bar-content {
		margin:0 auto;
		width:980px;
		height:100%;	
	}
	
	#prudential-image {
		width:49px;
		height:52px;
		background:url(../img/prudential-img-circle.png) no-repeat;
		position:relative;
		float:left;	
	}
	
		#Logomark, #NavWrapper {
			margin: 0 auto !important;
			width: 980px;
		}
			#Logomark {
				padding: 42px 0 19px;
			}
				#Logomark a {
					background: url(../img/img-logomark.png) no-repeat;
					display: block;
					float: left;
					height: 52px;
					width: 272px;
					
					text-indent: -9999px;
				}
				#Logomark span {
					border-left: 1px dotted #999;
					float: left;
					margin: 18px 0 0 30px;
					padding: 10px 30px;
					
					color: #fff;
					font-family: Arial, Helvetica, Tahoma, sans-serif;
					font-size: 20px;
					text-shadow: 1px 1px #333;
				}
			#UserInfo {
				float: right;
				padding: 20px 0 0;
				color: #fff;
				text-transform: uppercase;
			}
				#UserInfo a {
					color: #fa8537;
				}
		nav {
			margin:0 auto;
			background:#079ed3;
			width:980px;
			min-height: 55px;
			border-radius: 10px 10px 0 0;
			-moz-border-radius: 10px 10px 0 0;
			-webkit-border-radius: 10px 10px 0 0;
		}
			nav ul {
				display: inline;
				list-style: none;
				overflow: hidden;																	/* uses this instead of clearfix because we're using Menu tag control */
			}
				nav ul li {
					float: left;
				}
				nav ul li:hover {
					background-color: #c2dbe7;
				}
				
				nav > #NavWrapper > ul > li:first-child {
					border-radius: 10px 0 0 0;
					-moz-border-radius: 10px 0 0 0;
					-webkit-border-radius: 10px 0 0  0;
				}
				
					nav ul li a {
						display: block;
						padding: 0 20px;
						
						color: #fff;
						font-size: 14px;
						font-weight: normal;
						line-height: 55px;
					}
					nav ul li a:hover {
						text-decoration: none;
					}
					nav > #NavWrapper > ul > li:first-child > a {
					}
					nav ul li:hover a {
						color: #174560;
					}
					nav ul li ul {
						background: #c2dbe7 url(../img/bg-grad-nav-hover.png) repeat-x top;
						height: auto;
						left: -9999em;
						position: absolute;
					}
					nav ul li:hover ul {
						left: auto;
					}
						nav ul li ul li {
							border: 0;
						}
							nav ul li ul li a {
								border: 0;
							}
	
	/* Body elememnts */
	
	#BodyWrapper {
		margin: 0 auto;
		padding: 20px 20px 0;
		background:#fff;
		position: relative;																			/* required for z-index to work */
		width: 940px;
		z-index: 100;
	}

/* Footer elements */

#FooterWrapper {
	clear: both;
	
	font-size: 10.5px;
	text-transform: uppercase;
}
	footer {
		margin: 0 auto 40px;
		width: 940px;
		min-height:62px;
		background:#02538b;
		border-radius:0 0 10px 10px;
		-webkit-border-radius:0 0 10px 10px;
		-moz-border-radius:0 0 10px 10px;
	}
		#Copyright {
			float: left;
		}
		#FooterLinks {
			float: left;
		}
			#FooterLinks ul {
				list-style: none;
				float:left;
			}
				#FooterLinks ul li {
					border-left: 1px solid #999;
					float: left;
					padding: 0 5px;
					
					line-height: normal;
				}
				#FooterLinks ul li:first-child {
					border: 0;
				}
					#FooterLinks ul li a {
						font-weight: normal;
					}



/* Right rail [RGTRL]
   ============================================================================================== */

aside .callouts li {
	border-top: 1px solid #c8c8c8;
	margin: 0;
	padding: 10px 0;
}
aside .callouts li:first-child {
	border: 0;
	padding-top: 0;
}



/* Custom classes [CUCLS]
   ============================================================================================== */

.dotted-border {
	border-top: 1px dotted #ccc;
}
.dotted-border:first-child {
	border: 0;
}
.form-step {
	background-color: #1a6691;
	border: 3px solid #9db9c9;
	-moz-border-radius: 15px;
	border-radius: 15px;
	display: block;
	float: left;
	width: 23px;
	
	color: #fff;
	font: normal 14px/1.65em Arial, Helvetica, Tahoma, sans-serif;
	text-align: center;
}
	.form-step + h4 {
		float: left;
		margin: 4px 0 10px 8px;
	}
		.form-step + h4 + * {
			clear: both;
		}
.loading-bar {
	background: url(../img/ani-loading-bar.gif) no-repeat center;
	height: 13px;
}
.more-arrow-blue {
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 8px solid #143d55;
	float: right;
	height: 0;
	margin: 3px 0 0 3px;
	width: 0;
}
.accordion {
	margin-top: 15px;
}
	.accordion dt {
		background: #079ed3;
		cursor: pointer;
		margin-top: 2px;
		padding: 6px 11px 6px 12px;
		
		color: #fff;
		font-size: 14px;
	}
	.accordion dt:first-child {
		-moz-border-radius: 7px 7px 0 0;
		-webkit-border-radius: 7px 7px 0 0;
		border-radius: 7px 7px 0 0;
	}
	.accordion dt.last-child {
		-moz-border-radius: 0 0 7px 7px;
		-webkit-border-radius: 0 0 7px 7px;
		border-radius: 0 0 7px 7px;
	}
		.accordion dt .arrow-orange-down {
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			border-top: 6px solid #012346;
			float: right;
			height: 0;
			margin: 6px 0 0;
			width: 0;
		}
		.accordion dt .arrow-orange-right {
			border-bottom: 6px solid transparent;
			border-left: 6px solid #012346;
			border-top: 6px solid transparent;
			float: right;
			height: 0;
			margin: 4px 2px 0;
			width: 0;
		}
	.accordion dd {
		padding: 5px;
	}
.callouts {
	list-style: none;
	margin: 0;
}
	.callouts li {
		float: left;
		margin-left: 18px;
		width: 300px;
		
		line-height: normal;
	}
	.callouts li:first-child {
		margin: 0;
	}
		.callouts li h3 {
			margin-bottom: 5px;
		}
		.callouts li img {
			border: 1px solid #d4d8de;
		}




/* Section 2 - Login [SEC02]
   ============================================================================================== */

#Login fieldset {
	border: 3px double #1B6996;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 20px;
}
#Login input[type="text"], #Login input[type="password"] {
	width: 230px;
}
#Login input[type="submit"] {
	margin-top: 10px;
}



/* Section 3 - Home [SEC03]
   ============================================================================================== */

#Home #WelcomeMessage {
	background: #3f3f3f url(../img/img-ceo.jpg) no-repeat right;
	border: 6px solid #fff;
	height: 224px;
	margin-bottom: 10px;
	padding: 40px 430px 0 40px;
	width: 458px;
	
	color: #595959;
	font-size: 16px;
}
	#Home #WelcomeMessage h1 {
		background: none;
		padding: 0;
		
		color: #3e99d9;
		line-height: 1em;
	}
	#Home #WelcomeMessage .btn-primary {
		margin-top: 13px;
	}



/* Section 5 - Pledge Card [SEC05]
   ============================================================================================== */

/* Pledge Progress Bar */

#PledgeProgressBar {
	border: 1px solid #fa8537;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	list-style: none;
	margin: 20px auto;
	padding: 7px 0;
	width: 610px;
}
	#PledgeProgressBar li {
		background: url(../img/img-arrow-pledgeprogressbar.png) no-repeat left;
		float: left;
		padding: 0 20px 0 38px;
		
		color: #d3d3d3;
		font-size: 16px;
		line-height: normal;
	}
	#PledgeProgressBar li:first-child {
		background-image: none;
	}
	#PledgeProgressBar li.current {
		color: #595959;
		font-weight: bold;
	}
		#PledgeProgressBar li span {
			vertical-align: middle;
			
			font-size: 28px;
			font-weight: bold;
		}
		#PledgeProgressBar li.current span {
			color: #fa8537;
		}

/* Pledge Option Pills */

.pills {
	list-style: none;
	margin: 8px 0 12px;
}
.pills.horizontal.horse {
	width: 75%;
}
	.pills li {
		background: #ffd304;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px solid #edbe00;
		cursor: pointer;
		padding: 7px 0;
		
		color: #012346;
		font-size: 14px;
		line-height: normal;
		text-align: center;
	}
	.pills li.selected {
		background: #012346;
		border: 1px solid #012346 !important;
	}
	.pills.vertical li:first-child {
		-moz-border-radius: 6px 6px 0 0;
		-webkit-border-radius: 6px 6px 0 0;
		border-radius: 6px 6px 0 0;
	}
	
	#Donate-Options fieldset .single-option {
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
	}
	
	.pills.vertical li.last-child {
		-moz-border-radius: 0 0 6px 6px;
		-webkit-border-radius: 0 0 6px 6px;
		border-radius: 0 0 6px 6px;
	}
	.pills.horizontal li {
		border-left: 0;
		float: left;
		
		font-size: 12px;
		font-weight: bold;
	}
	.pills.horizontal li:first-child {
		border: 1px solid #adadad;
		-moz-border-radius: 6px 0 0 6px;
		-webkit-border-radius: 6px 0 0 6px;
		border-radius: 6px 0 0 6px;
	}
	.pills.horizontal li.last-child {
		-moz-border-radius: 0 6px 6px 0;
		-webkit-border-radius: 0 6px 6px 0;
		border-radius: 0 6px 6px 0;
	}
	.pills.horizontal.horse li {
		font-size: 14px;
	}
	.pills.horizontal.pills-2 li {
		width: 50%;
	}
	.pills.horizontal.pills-3 li {
		width: 33.33333%;
	}
	.pills.horizontal.pills-4 li {
		width: 25%;
	}
	.pills.horizontal.pills-5 li {
		width: 20%;
	}
		.pills li input[type="radio"], .pills li .jqTransformRadioWrapper {
			left: -9999px;
			position: absolute;
		}
		.pills li label {
			cursor: pointer;
			
			color: #012346;
			line-height: normal;
		}
		.pills.vertical li label {
			font-weight: normal;
		}
		.pills li.selected label {
			color: #fff;
		}
		.pills.horizontal.horse li label {
			font-weight: bold;
		}

/* Step 1 - User Information */

#ConfirmUserInfo {
	border: 1px solid #ebebeb;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	margin: 20px auto;
	width: 400px;
	background:#f9f9f9;
}
	#ConfirmUserInfo div {
		float: left;
		padding: 10px;
		width: 240px;
	}
	#ConfirmUserInfo .col-header {
		background: -webkit-linear-gradient(bottom, #7291b0, #6887a6);
		background: -moz-linear-gradient(bottom, #7291b0, #6887a6);
		background: -o-linear-gradient(bottom, #7291b0, #6887a6);
		background: linear-gradient(to top, #7291b0, #6887a6);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7291b0', endColorstr='#6887a6');
		-moz-border-radius: 10px 10px 0 0;
		-webkit-border-radius: 10px 10px 0 0;
		border-radius: 10px 10px 0 0;
		clear: both;
		padding: 10px 0;
		width: 100%;
		
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
	}
	#ConfirmUserInfo .col-header:first-child {
		-moz-border-radius: 8px 8px 0 0;
		-webkit-border-radius: 8px 8px 0 0;
		border-radius: 8px 8px 0 0;
	}
	#ConfirmUserInfo .row-header {
		clear: both;
		padding: 10px;
		width: 120px;
		
		color: #000;
		font-weight: bold;
	}

/* Step 2 - Pledge Selection */

#Donate-Options fieldset.bucket {
	float: left;
	margin: 0 20px 20px 0;
	position: relative;
	width: 295px;
}
#Donate-Options fieldset.bucket.last {
	margin: 0 0 20px;
}
	#Donate-Options fieldset.bucket legend {
		background: -moz-linear-gradient(top, #7291b0, #6786a5);
		background: -webkit-linear-gradient(top, #7291b0, #6786a5);
		background: linear-gradient(top, #7291b0, #6786a5);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7291b0', endColorstr='#6786a5');
		-moz-border-radius: 10px 10px 0 0;
		-webkit-border-radius: 10px 10px 0 0;
		border-radius: 10px 10px 0 0;
		display: block;
		position: absolute;
		padding: 10px 0;
		width: 295px;
		
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
	}
		#Donate-Options fieldset.bucket legend span {
			display: block;
			
			color: #fff;
			font-size: 11px;
			text-transform: uppercase;
		}
	#Donate-Options fieldset.bucket div {
		border: 1px solid #ebebeb;
		margin: 50px auto 1px;
		padding: 10px;
		width: 273px;
		background: #f9f9f9;
	}
		#Donate-Options fieldset.bucket div p:first-child {
			margin: 0 0 10px;
			
			line-height: 2.4em;
		}
		#Donate-Options fieldset div input[type="radio"] {
			left: -9999px;
			position: absolute;
		}
		#Donate-Options fieldset div input[type="text"] {
			width: 50px;
		}
#Donate-Options .callouts #ContributionHistory {
	border-top: 1px solid #ebe1c5;
	width: 100%;
}
	#Donate-Options .callouts #ContributionHistory tr {
		border-bottom: 1px solid #ebe1c5;
	}
		#Donate-Options .callouts #ContributionHistory tr td {
			padding: 5px 0;
		}
		#Donate-Options .callouts #ContributionHistory tr td:first-child {
			width: 175px;
		}
#Donate-Options .callouts #ClubLevelDescriptions {
	width: 100%;
}
	#Donate-Options .callouts #ClubLevelDescriptions thead tr {
		color: #cf651b;
		font-size: 11px;
		font-weight: bold;
		text-align: left;
		text-transform: uppercase;
	}
		#Donate-Options .callouts #ClubLevelDescriptions thead tr th {
			padding: 5px;
		}
	#Donate-Options .callouts #ClubLevelDescriptions table tbody {
		border-top: 1px solid #ebe1c5;
		border-top: 1px dotted #999;
		padding: 5px;
	}
	#Donate-Options .callouts #ClubLevelDescriptions table tbody.club-president {
		border-top: 1px solid #e8d674;
	}
	#Donate-Options .callouts #ClubLevelDescriptions tbody.selected {
		background-color: #d9d9d9;
	}
		#Donate-Options .callouts #ClubLevelDescriptions table tbody tr:first-child td {
			padding: 8px 5px 0;
			
			color: #000;
			font-weight: bold;
		}
		#Donate-Options .callouts #ClubLevelDescriptions table tbody tr:first-child td:first-child {
			color: #cf651b;
		}
	#Donate-Options .callouts #ClubLevelDescriptions table tbody tr td {
		padding: 2px 5px 9px;
	}

/* Step 3 - Pledge Confirmation */

#Donate-Confirm .adjacent-field {
	clear: none;
	float: left;
	margin-bottom: 25px;
	min-width: 60px;
}
#Donate-Confirm label {
	display: block;
}
#Donate-Confirm input[type="text"] {
	width: 267px;
}
#Donate-Confirm #cc_first_name, #Donate-Confirm #cc_last_name {
	margin-right: 5px;
	width: 125px;
}
#Donate-Confirm #cc_billing_zip {
	width: 100px;
}
#Donate-Confirm .jqTransformCheckboxWrapper + label {
	float: left;
	margin: 4px 0 0 5px;
	width: 585px;
	
	line-height: 1.25em;
}



/* Section 6 - Disbursements [SEC06]
   ============================================================================================== */

#Disbursements .map-state table {
	width: 100%;
}
	#Disbursements .map-state table tr {
		border-top: 1px solid #ebe1c5;
	}
	#Disbursements .map-state table tr:first-child {
		border: 0;
	}
		#Disbursements .map-state table tr th {
			font-weight: bold;
		}
		#Disbursements .map-state table tr th, #Disbursements .map-state table tr td {
			padding: 5px 0;
			
			text-align: left;
		}



/* Section 8 - Contact Us [SEC08]
   ============================================================================================== */

#ContactUs textarea {
	height: 100px;
	width: 50%;
	resize: none;
}



/* Clearfix - http://css-tricks.com/snippets/css/clear-fix/
   ============================================================================================== */

.group:before, .group:after {
	content: "";
	display: table;
}
.group:after {
	clear: both;
}
.group {
	zoom: 1;																						/* for IE 6/7 (trigger hasLayout) */
}


#FooterLinks p, footer a {
	color:#fff;	
}

footer {
	padding:20px;	
}

a#footer-logo {
	width:230px;
	height:80px;
	background:url('../img/logo-footer.jpg') no-repeat 0px 0px;
	text-indent:-9999px;
	float:right;	
}

#Home .content-bottom {
	margin-top:30px;	
}

#Home .content-bottom h4 {
	margin:0 0 8px;
	font-weight:bold;
	color:#595959;	
}

span.bluish {
	color:#3068a3;
}

#Newsletters {
	width:800px;	
}

ul#newsletters_current, 
ul#newsletters_archive 
{
	margin:0 0 10px;
	padding:0;
	width:710px;
	float:left;	
	list-style:none;
}

ul#newsletters_current li,
ul#newsletters_archive li
 {
	margin:0 0 0 13px;
	padding:0;
	width:165px;
	display:inline;
	float:left;	
}

ul#newsletters_current li a,
ul#newsletters_archive li a
 {
	width:165px;
	display:table;
	overflow:hidden;	
}

ul#newsletters_current li a img,
ul#newsletters_archive li a img
 {
	margin-bottom:8px;
	float:left;
}

ul#newsletters_current li a h3,
ul#newsletters_archive li a h3
 {
	margin:0;
	padding:0;
	width:100%;
	color:#0092e7;
	font-size:16px;	
	float:left;
}

ul#newsletters_current li a h3:hover,
ul#newsletters_archive li a h3:hover
{
	text-decoration:underline;	
}

ul#newsletters_current li:first-child,
ul#newsletters_archive li:first-child
 {
	margin-left:0;	
}


#PageWrapper #newsletters_archive li {
	display:none;	
}