﻿* {margin:0;padding:0}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
    background-image: url(http://charitycards.org/images/column_wide.jpg);
    background-repeat: repeat-y; 
    background-position: center;
    width: 100%;
    height: 100%;
    background-color: #eaeaea;
    text-align: center;
}

/* list stuff */
ul { list-style: none; padding: 0 0 0 20px; }
li { padding: 0 0 0 10px; }

/* standard stuff here */
.small { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #00485d; text-decoration: none; }
a.small { text-decoration: none; }
a:HOVER.small { text-decoration: none; background-color: #baebfe; color: #f25c45; }
a { text-decoration: none; color:Window }

/* menu stuff */
.menu-links { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff; text-decoration: none; }
a.menu-links { text-decoration: none; }
a:HOVER.menu-links { text-decoration: none; background-color: #baebfe; color: #f25c45; }

/* Misc */
.crumb1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000099; text-decoration: none; }
a.crumb1 { text-decoration: none; }
a:HOVER.crumb1 { text-decoration: none; background-color: #baebfe; color: #f25c45; }		

.crumb2 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #00485d; text-decoration: none; }
a.crumb2 { text-decoration: none; }
a:HOVER.crumb2 { text-decoration: none; background-color: #baebfe; color: #f25c45; }	

h1 { color: #b3960f; font-family: 'Trebuchet MS', Verdana, Sans-Serif; font-size: 20px; font-weight: normal; text-decoration: none; letter-spacing: -1px; margin: 0px; padding: 5px 0px 5px 0px; }
h2 { color: #b3960f; font-family: 'Trebuchet MS', Verdana, Sans-Serif; font-size: 18px; font-weight: normal; text-decoration: none; letter-spacing: -1px; margin: 0px; padding: 0px 0px 0px 0px; }
h3 { color: #b3960f; font-size: 18px; font-family: Helvetica, Arial, Verdana, Sans-Serif; font-weight: normal; margin: 0px; padding: 5px 0px 5px 0px; }
h4 { color: #00485d; font-size: 14px; font-family: Helvetica, Arial, Verdana, Sans-Serif; font-weight: normal; margin: 0px; padding: 0 0 10px 0; }
h5 { color: #b3960f; font-family: 'Trebuchet MS', Verdana, Sans-Serif; font-size: 16px; font-weight: normal; text-decoration: none; letter-spacing: -1px; margin: 0px; padding: 0px 0px 10px 0px; }

h2 a { font-family: 'Trebuchet MS', Verdana, Sans-Serif; font-weight: normal; text-decoration: none; color: #f25c45; letter-spacing: -1px; }
h2 a:HOVER { text-decoration: underline; color: #00485d; }	
h3 a { font-family: 'Trebuchet MS', Verdana, Sans-Serif; font-weight: normal; text-decoration: none; color: #00485d; letter-spacing: -1px; }
h3 a:HOVER { text-decoration: underline; color: #f25c45; }	
h4 a { font-family: 'Trebuchet MS', Verdana, Sans-Serif; font-weight: normal; text-decoration: none; color: #00485d; letter-spacing: -1px; }
h4 a:HOVER { text-decoration: underline; color: #f25c45; }	
	
	
p { padding: 5px 0 5px 0; margin:0; color: #000099; font-size: 14px; font-family: Helvetica, Arial, Verdana, Sans-Serif; font-weight: normal; }
.mainTextHomeSmall {	font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: Gray; font-weight: normal; }
A.mainTextHomeSmall {	font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: Gray;	text-decoration: none;}
A:HOVER.mainTextHomeSmall {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px; color: #3c7193; text-decoration: underline;}

/* Button animation on front page */
a.flashpodinnerbutton, a.flashpodinnerbutton:visited {
color:#ffffff;     
display:block;     
text-decoration:none; 
width:10em; 
text-align:center;     
height:40px;     
line-height:2em;     
background:#ffffff;     
font-weight:bold
}

a.flashpodinnerbutton:hover {
color:#ffffff; 
background:#ffffff; 
position:relative; 
top:1px; 
left:1px;
}
#outer{
height:100%;
width:100%;
display:table;
}
#container {
text-align: center;
position:relative;
display:table-cell;
height: 100%;
}
#inner {
width: 920px;
background: #e9e9e9;
height: 100%;
text-align: center;
margin-left:auto;
margin-right:auto;
}

#headerBottom {
clear: both; 
float: left; 
width: 920px; 
height: 10px; 
text-align: left; 
padding: 0 0 0 0px; 
margin: 0px 0 0px 0px; 
background-image: url(images/head_pod_bottom.gif); 
background-repeat: no-repeat; 
background-color: #eaeaea;
}

#flashcontent {
float: left; 
width: 860px; 
text-align: center; 
padding: 0 20px 0 20px; 
margin: 0;
height: 100%;
}

#flashPod {
clear: both;
float: left;
width: 480px;
height: 320px; 
padding: 0px 0px 0px 0px;
background-color: #ffffff; 
}
#rightPod {
    float: left;
    width: 421px;
    padding: 0 0px 0 5px;
    margin: 0px 0px 0px 0px;
    background-color: #ffffff;
    height: 301px;
    text-align: left;
}

#aboutleftnav
{
float: left;
width: auto;
height: 400px;
margin: 0px 0 0 0px;
padding: 0px 20px 0 20px;
text-align:left;
font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #21486f; text-decoration: none;
}

.spacerPod { 
clear: both; 
float: left; 
width: 100%; 
height: 10px; 
background-color: #eaeaea; 
}

div.footer {
clear: both; 
float: left; 
width: 100%; 
height: 55px; 
text-align: left; 
padding: 0; 
margin: 0; 
background-image: url(/images/Tel-Bar-Green.jpg); 
background-repeat: no-repeat;
}

div.termspod{
clear: both; 
float: left; 
width: 100%; 
text-align: left; 
padding: 0 0 0 20px; 
margin: 0;
}

div.step3left{
float: left;
width: 530px;
}

div.step3righttop {
height: 42px;
width: 330px;
background-image: url(/images/top-grey.jpg);
float: right;
}

div.step3rightbottom {
height: 42px;
width: 330px;
background-image: url(/images/bottom-grey.jpg);
float: right;
}

div.step3rightinner {
width: 100%;
float: right;
background-color: #DDDDDD;
}

div.step3right {
float: right;
width: 330px;
padding: 0px 10px;
}

div.temploption {
padding: 15px 0px 0px 0px;
text-align: center;
}

div.templtext {
padding: 5px 0px 0px 0px;
}

div.step3info{
text-align: left;
padding: 0px 10px 0px 10px;
}

div.formatPod {
float: left; 
width: 910px;
height: 400px; 
padding: 10px 0 0 10px; 
margin: 0 0 0 0px; 
background-color: #ffffff; 
}

div.step1image {
position: relative; 
float: left; 
left: 50px; 
top: 10px; 
z-index: 2
}

div.formatImage {
position: relative; 
left: 0px; 
top: -60px; 
z-index: 1; 
text-align: center;
}

div.step2button {
position: relative;
top: -60px;
}

#flashpodinner1 {
position: relative; 
float: left; 
left: 25px; 
top: 20px;     
height: 140px;
width: 150px;
background: #cccccc;
}

#flashpodinner2 {
position: relative; 
float: left; 
left: 85px; 
top: 20px;     
height: 140px;
width: 150px;
background: #cccccc;
}

#flashpodinner3 {
position: relative; 
float: left; 
left: 28px; 
top: 60px;     
height: 50px;
width: 356px;
background: #cccccc;
}

#step2discount {
position: relative; 
float: left; 
left: 649px; 
top: -250px;     
height: 250px;
width: 250px;
background: #cccccc;
z-index: 2;
}

p.step3textpar{
font-size: 20px;
font-family: Tahoma, Geneva, sans-serif;
color: black;
}

p.step3righttext{
font-size: 24px;
font-family: "Arial Black", Arial, Lucida, sans-serif;
font-weight: bold;
color: #98b839;
text-align: center;
}

p.templtext {
font-size: 22px;
font-family: Tahoma, Geneva, Sans-Serif;
text-align: center;
color: #000077;
}


/* front page stuff for categories */
.categoriesItem { float: left; text-align: center; padding: 0px 0px 0px 0px; width: 300px; }
.categoriesImage { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #958900; text-decoration: none; text-align: center; font-weight: bold; padding-top: 20px; }
.categoriesButton { clear: both; height: 41px; text-align: center; padding: 17px 0px 0px 0px; margin: 8px; background-position: center;background-repeat: no-repeat; background-image: url('../images/button_green.gif'  )
}
.categoriesText { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 16px; 
color: #bf0071; 
text-decoration: none; 
text-align: center; 
font-weight: bold; 
padding-top: 20px;
}

.categoriesThumb {
border: solid 1px #eaeaea; 
padding: 5px 5px 5px 5px; 
margin: 5px 2px 5px 2px; 
border: solid 1px #eaeaea;
}

.categoryList {
text-align: center;
}

/* menu stuff */
.menu-links { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff; text-decoration: none; }
a.menu-links { text-decoration: none; }
a:HOVER.menu-links { text-decoration: none; background-color: #baebfe; color: #f25c45; }

/* charities stuff */
#charityTable
{
padding: 30px 20px 10px 20px;
text-align: left;
font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #21486f; text-decoration: none;
}
#charitytext { text-align: left; width: 430px; padding: 0 10px 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; text-decoration: none; }
#charityimage { text-align: left; width: 430px; padding: 20px 10px 0 10px; }

/* general text */
.TitleText { clear: both; float:left; width: 700px; font-family: Arial, Verdana; font-size: 14px; color: #000000; padding: 10px 0 10px 0; }
.BoxText { float:left; width: 700px; padding: 5px 0 5px 0; font-family: Arial, Verdana; font-size: 14px; color: #000000; }
.AddressText  { float:left; width: 200px; padding: 5px 0 5px 0; font-family: Arial, Verdana; font-size: 14px; color: #000000; }
.FieldText { clear: both; float:left; width: 200px; padding: 5px 0 5px 0; font-family: Arial, Verdana; font-size: 14px; color: #000000; }
.HeaderText { padding: 20px 0 10px 0; clear: both; float: left; border-bottom: dotted 1px #000000; width: 100%; font-family: Arial, Verdana; font-size: 14px; color: #000000; }
.TextLine { float: left; padding: 5px 0 5px 0; width: 900px; font-family: Arial, Verdana; font-size: 14px; color: #000000; }
/* form field stuff */
.fieldTitle { clear: both; float: left; color: #565758; font-size: 14px; font-family: Helvetica, Arial, Verdana, Sans-Serif; font-weight: normal; width: 250px; padding: 0 0 5px 0; }

#ContactUs td.label {
float: left; 
border: blue; 
font-size: 12px; 
color: #000000; 
font-family: Arial, Helvetica, sans-serif; 
text-align: right; 
padding: 6px 10px 6px 10px; 
width: 290px;
background-color: #ccccee;
margin: 3px 3px 3px 3px;
}

#ContactUs td.field {
width: 580px;
text-align: left;
}

.fieldNamesLong { float: left; 
border: white; 
font-size: 12px; color: #000000; font-family: Arial, Helvetica, sans-serif; text-align: left; padding: 0 0 5px 10px; width: 800px; }
.address { color: #565758; font-family: 'Trebuchet MS', Verdana, Sans-Serif; font-size: 16px; font-weight: normal; text-decoration: none; letter-spacing: -1px; margin: 0px; padding: 0px 0px 0px 0px; }

/* styling for the form fields */
.form_column_name {
clear:both; 
float:left; 
height:auto; 
width:150px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
color:#21486f; 
font-weight: bold;
text-align: left;
}

.form_column_field {
float:left; 
height:auto; 
width:200px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
color:#21486f;
text-align: left;
}

.form_column_right {
float:left; 
height:auto; 
width:150px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
color:#21486f; 
font-weight: bold;
text-align: left;
}

#pricespane{
clear: both;
padding: 70px 10px 0 10px;
width: auto;
margin: 0px 0 0 8px;
text-align: center;
background-image: url(/images/calendar_prices.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 709px;
}

#list {
z-index: 10;
}
div.step3orderearly
{
    text-align: center;
}
#howtoorderpane
{
    width: 900px;
    height: auto;
    text-align: center;
}
/* contact us page stuff */
#contactpane
{
clear: both;
padding: 70px 10px 0 10px;
width: auto;
margin: 0px 0 0 8px;
text-align: center;
background-image: url(/images/contact-info.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 260px;
}

#pageheading{
    clear: both; 
    float: left; 
    margin: 10px 0 20px 0; 
    padding: 10px 0 0px 0px; 
    text-align: center; 
    width: 900px; 
    height: 50px;
}