/* ------------------------------------------------------------------------------------

  This stylesheet contains the CSS for structure and presentation. Rules relating to
  typography are found in typography.css
  
  IE specific rules and/or hacks go in ie6.css or ie7.css

------------------------------------------------------------------------------------*/

@import '/stylesheets/typography.css';


:focus {
	-moz-outline-style: none;
}

/* STRUCTURE
------------------------------------------------------------------------------------*/

body {
  background: #555 url("/images/bg/bg_tile.png") left top repeat;
  margin: 0;
  padding: 10px 0 0;
}

#page {
  background: #fff;
	width: 800px;
	text-align: left;
	margin: 0 auto;
	border-top: 8px solid #d60773;
}

#content {
  padding: 0;
  overflow: hidden;
}

#interior {
  padding: 0 20px;
  position: relative;
  min-height: 150px;
}

/* Section Navigation
------------------------------------------------------------------------------------*/
	
#section_nav {
  width: 800px;
  margin: 0 auto -3px;
	height: 38px;
	padding: 0;
}
	
#section_nav ul {
	list-style: none;
	font: 14px/35px "Lucida Sans", "LucidaGrande", Arial, Helvetica, sans-serif;
	margin: 0 0 0 25px;
}
	
#section_nav ul li {
	float: left;
	margin: 0 18px 0 0;
}
	
#section_nav ul li a {
	color: #f697c8;
	text-decoration: none;
}
	
#section_nav ul li a:hover {
	color: #fff;
}
	
#section_nav ul li.emphasis {
	background: url(/images/buttons/section_nav_left.gif) 0 2px no-repeat;
}
	
#section_nav ul li a {	
	padding: 0 9px 0 9px;
}
	
#section_nav ul li.emphasis a {
	background: url(/images/buttons/section_nav_right.gif) no-repeat right 2px;
	display: block;
	color: #d55800;
}
	
#section_nav ul li.emphasis a:hover {
	color: #d55800;
}

#signout-form {
  display: none;
}

/* Landing
------------------------------------------------------------------------------------*/

#home { padding-top: 2em; }

#landing_presentation,
#landing_options {
  float: left;
}

#landing_presentation {
  margin-right: 40px;
  text-align: center;
  width: 350px;
  padding-left: 16px;
}

#landing_options {
  padding: 30px 16px 0 0;
  width: 370px;
}

#landing_options dd { margin-bottom: 4em; }


/* Learn More
------------------------------------------------------------------------------------*/

#learn_more_presentation {
  float: left;
  width: 270px;
}

.secondary_content {
  clear: both;
  background: url(/images/bg/secondary_content_grad.gif) left top repeat-x;
  padding: 2em;
}

.learn_more {
  padding: 0 !important;
}

/* Find Your Cause
------------------------------------------------------------------------------------*/

#rotator { clear: left; }
#rotator object { float: left; }

#discover_more { float: left; width: 400px;}
ul#cause_list { list-style-type: disc; clear: left; margin: 10px auto 40px; width: 500px; padding-top: 30px; }
ul#cause_list li { overflow: visible; font-size: 1.2em; margin-bottom: 1em; font-weight: bold; }

div#nonprofits { clear: left; }
div#nonprofits img {
	position: relative;
	margin: 0 0 10px 0;
	border: 0;
}

div#nonprofits p { padding-bottom: 20px; }

#cause_intro {
  width: 430px;
  float: left;
  margin: 0 60px 20px 0;
}

#button_box {
  float: left;
}

#button_container { overflow: hidden; clear: left; padding-left: 90px; }
#button_container a { display: block; float: left; margin-right: 60px; }
#button_container a#become_a_member { margin-right: 0; padding-top: 10px; }
#button_container a img { max-width: 270px; }


/* Register Send free e-cards
------------------------------------------------------------------------------------*/

.greybox { background: #f4f4f4; padding: 1.5em;}

#registration {
  width: 500px;
  float: left;
  margin-right: 25px;
}

div.buttons span#five-free {
	position: absolute;
	margin: 12px 0px 0px 8px;
	width: 130px;
	font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
}

#content div#send-five-sidebar {
  float: left;
	width: 180px;
}

/* Make a Card
------------------------------------------------------------------------------------*/

.card_process { text-align: center; }
.card_process img { margin: 0 auto 20px; }

#search_form {
  width: 340px;
  margin: 0 auto;
}

#search_form label,
#search_form input {
  float: left;
}

#search_form input#search {
  margin: 2px 0 0 10px;
}

#search_term {
  background: url(/images/bg/search_box.gif) left center no-repeat;
  border: none;
  height: 27px;
  line-height: 27px;
  width: 226px;
  padding: 8px 3px 0 3px;
  margin-top: -3px;
  vertical-align: middle;
}

#search_term:focus { border: none; outline: 0;}

ol#process_steps {
  width: 708px;
  margin: 50px auto 0;
}

ol#process_steps li {
  background: url(/images/bg/step1.png) left top no-repeat;
  padding: 20px 310px 0 140px;
  list-style-type: none;
  position: relative;
  overflow: visible;
  height: 208px;
  margin: 0 0 35px 0;
  font-size: .9em;
}

ol#process_steps li img {
 position: absolute;
 top: -28px;
 right: 10px;
}

ol#process_steps li.step_2 { background-image: url(/images/bg/step2.png); }
ol#process_steps li.step_3 { background-image: url(/images/bg/step3.png); }
ol#process_steps li.step_3 img { top: -4px; }

#card_styling { border: 1px solid #F975BD; position: relative; margin-bottom: 30px; }
#card_style_preview { position: absolute; right: 20px; top: 20px; text-align: center; }

#card_styling form input[type=text],
#card_styling form textarea { width: 425px; border: 1px solid #F975BD; float: left; }

#card_styling dd { overflow: hidden; }
#card_styling dd span { float: left; width: 150px; font-size: .9em; margin-left: 30px; }

span#remaining-characters { padding-top: 185px; }

#content div#colors, #content div#text-colors {
	position: relative;
	float: left;
	z-index: 10;
	clear: both;
}

#content div#colors div, #content div#text-colors div {
	float: left;
	height: 44px;
	width: 44px;
	border: 3px solid #ccc;
	margin: 0 9px 0 0;
	padding: 0px;
}

#content div#colors div.selected, #content div#text-colors div.selected {
	border: 3px solid #888
}

#card-preview { margin-bottom: .5em; }

dl#card_details dt { margin-bottom: 5px; }
dl#card_details dd { margin-bottom: 20px; color: #999; }

#content div.image-group {
	position: relative;
	clear: both;
	padding-top: 5px;
}

#content div.image-group img {
	border: 0px;
}

#content div.image-group div.image-group-header {
	position: relative;
	border-bottom: 1px solid #d1e0e0;
	height: 26px;
}

#content div.image-group h2 {
	position: relative;
	float: left;
	font: bold 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#content div.image-group span {
	position: relative;
	font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	float: left;
	margin-top: 6px;
	margin-left: 20px;
}

#content div.image-row {
	position: relative;
	clear: both;
	min-height: 115px;
	padding-top: 10px;
	padding-left: 2px;
	margin-top: 5px;
}

#content div.image-row div.image-portrait, #content div.image-row div.image-landscape {
	position: relative;
	float: left;
	text-align: center;
	padding-bottom: 10px;
	width: 126px;
}

#content div.image-row div.image-landscape {
	text-align: left;
}

span#text_colors {
  display: block;
  min-height: 30px;
}


/* Contact
------------------------------------------------------------------------------------*/

ul#contact {
	font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin: 4px 0 4px 0;
}

ul#contact li {
	margin-bottom: 12px;
}

.buttons { margin-top: 1.5em; }

ul#faq {
	list-style: none;
	font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin: -13px 0 0 0;
	padding: 0;
}

.contentbox { padding: 0 60px;}

/* About Us
------------------------------------------------------------------------------------*/

div#about_us_sidebar {
	position: absolute;
	float: left;
	margin: 0 0 0 40px;
	z-index: 2;
	top: 20px;
}

div#about_us {
	position: relative;
	display: block;
	background-color: #fff;
	margin: 0 0 0 300px;
	padding-right: 55px;
	z-index: 10;
	height: 600px;
}

div#about_us p {
	margin: 10px 0 0;
	padding-top: 15px;
}

div#view_the_world {
	position: relative;
	background-color: #fff;
	height: 1500px;
	text-align: center;
}

div#view_the_world p {
	margin-bottom: 10px;
}

div#view_the_world h2 {
	position: relative;
	margin: 10px auto 15px auto;
	padding-top: 1px;
	text-align: center;
	clear: both;
}

div#view_the_world div.row {
	position: relative;
	height: 170px;
	width: 450px;
	margin: 0px auto 0px auto;
}

div#view_the_world div.row div.left {
	position: relative;
	float: left;
	margin-right: 110px;
	text-align: center;
	width: 170px;
	height: 170px;
}

div#view_the_world div.row div.right {
	position: relative;
	float: left;
	text-align: center;
	width: 170px;
	height: 170px;
}

div#view_the_world div.row div img {
	padding-top: 21px;
	border: 0px;
}

#kathy, #maura {
  width: 50%;
  float: left;
  text-align: center;
}

#about_us #kathy p, #about_us #maura p {
  margin-top: 0;
  padding-top: 0;
}

/* Register & Pay
------------------------------------------------------------------------------------*/

#registration_form .greybox {
  width: 500px;
}

dl.form input.short {
	width: 60px;
}

input#billing_form_cc_number {
  width: 260px;
}

#content div.billing {
	position: relative;
	padding: 10px 15px 10px 15px;
	margin-bottom: 20px;
	width: 500px;
	min-height: 100px;
}

#content div.sidebar {
	width: 180px;
}

#content .sidebar h2 {
	font: bold 15px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	margin: 0 0 5px 0;
}

#content .sidebar h3 { margin-top: 0; }
 
#content .sidebar p, #content .sidebar ul {
	font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
	color: #666;
	margin-bottom: 10px;
}

#content .sidebar li {
	margin-left: 25px;
}

#content div#describe-billing-sidebar {
	position: absolute;
	top: 0px;
	right: -200px;
}

#content div#susan-komen-sidebar {
	position: absolute;
	top: 0px;
	right: -200px;
}

#content div#describe-billing-sidebar p {
	margin-top: 0px;
	font-style: italic;
	color: #000;
}

#content div#privacy-sidebar {
	position: absolute;
	top: 0px;
	right: -200px;
}

#content div#change-billing-sidebar, #content div#change-account-sidebar {
	position: absolute;
	top: 0px;
	right: -200px;
}

#content div#change-billing-sidebar p, #content div#change-account-sidebar p {
	margin-top: 16px;
}

#content ul#billing {
	padding-bottom: 10px;
	list-style-type: disc;
}

#content ul#billing li {
	margin-bottom: 5px;
	overflow: visible;
}

.notice {
  background: #ffffcc;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 1em;
}

.notice p {
  margin-bottom: 0;
}

/* FAQ
------------------------------------------------------------------------------------*/

ul#faq li {
	margin: 0;
	padding: 0;
}

ul#faq li.question {
	padding-top: 13px;
	font-size: 14px;
	font-weight: bold;
}

ul#faq li.answer {
	padding-top: 2px;
	padding-bottom: 13px;
	border-bottom: 1px solid #e2e2e2;
}

/* Your Cards
------------------------------------------------------------------------------------*/

#content div.your-card-header {
	position: relative;
	height: 18px;
	width: 744px;
	padding: 4px 7px 0px 7px;
	background: #D60773;
	font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #fff;
}

#content div.your-card-header span.sent-date {
	float: left;
}

#content div.your-card-header span.recipient-count {
	float: right;
}

#content div.your-card {
	position: relative;
	height: 185px;
	width: 748px;
	background: #f2f2f2;
	padding: 12px 0px 10px 10px;
	margin-bottom: 20px;
	font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
	color: #666;
}

#content div.your-card span {
	position: absolute;
	left: 11px;
	top: 180px;
	font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#content div.your-card h2 {
	font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding-bottom: 9px;
	color: #4b4b4b;
}

#content div.your-card h3 {
	font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding-bottom: 9px;
}

#content div.your-card div.card-text {
	position: relative;
	float: left;
	width: 229px;
	margin-left: 14px;
}

#content div.your-card div.card-text p {
	margin-bottom: 9px;
}

#content div.your-card div.card-recipients {
	position: relative;
	float: right;
	width: 250px;
	padding: 0px;
	margin: 0px 5px 0px 0px;
}

#content div.your-card div.card-recipients p {
	margin: 0;
}

#content div.your-card div.buttons {
	position: absolute;
	top: 146px;
	right: 10px;
}

#my_account_info {
  width: 500px;
}

/* Pagination
------------------------------------------------------------------------------------*/

div#content ul#page-links {
	list-style: none;
	text-align: center;
	clear:both;
}

div#content ul#page-links li {
	margin: 0 3px;
	display: inline;
}

div#content ul#page-links li a#current-page {
	color: #888A85;
}

div#content ul#page-links li a#current-page:hover {
	color: #888A85;
	cursor: default;
	background-color: #FFF;
}

div#content ul#page-links li a img {
	margin-bottom: -6px;
	border: 0px;
}

div#content p#page-location {
	font-size: 11px;
	text-align: center;
	color: #333;
}


/* FOOTER
------------------------------------------------------------------------------------*/


#footer {
  background: #d9d9d9;
  color: #888;
  padding: 10px 20px 14px;
  font-size: .82em;
  margin-top: 3em;
  clear: both;
}

#footer a {
  color: #d72094;
}

#footer p.copyright { margin-right: 2em; }

#footer p.credit_links {
  float: right;
}

#footer p.credit_links a {
  color: #568585;
}

#footer div {
  border-top: 2px solid #cecece;
  overflow: hidden;
  padding-top: .3em;
}

#footer div p {
  float: left;
  margin-right: 1em;
}

#footer ul { float: left; padding-top: .2em; }
#footer ul li { float: left; margin-right: 1em; }