/* ------------------------- COMMON ---------------------------- */
body {margin:0; padding:0; font:9pt Arial, Helvetica, sans-serif; line-height:14pt; color:#ccc; background:#221101 url(/images/bg_gradient.jpg) left top repeat-x;}
p {padding:0 0 6px 0; text-align:left}
img {border:0px}

a:link {text-decoration:underline; color:#ccc}
a:visited {text-decoration:underline; color:#ccc}
a:active {text-decoration:none; color:#ccc}
a:hover {text-decoration:none; color:#ccc}

a.formLink:link {text-decoration:underline; color:#000000}
a.formLink:visited {text-decoration:underline; color:#333333}
a.formLink:active {text-decoration:underline; color:#000000}
a.formLink:hover {text-decoration:underline; color:#000000}

.center {text-align:center}

.dottedLine {border-bottom:1px dotted #d6d6d6; margin:10px}
.caption {font:8pt Arial, Helvetica, sans-serif; text-align:center; color:#000000; line-height:10pt}
.note {font:8pt Arial, Helvetica, sans-serif; text-align:left; color:#000000; line-height:10pt }
.narrowNote {font:8pt Arial, Helvetica, sans-serif; text-align:left; color:#000000; line-height:10pt; padding: 10px }
.special {font:11px Arial, Helvetica, sans-serif; color:#336699; padding:3px}
.lock {color:#336699; padding:3px}

/* ------------------------- Promo Rendering ---------------------------- */
.promoL {width:300px; height:auto; padding:8px; text-align:center}
.promoR {width:300px; height:auto; padding:8px; text-align:center}
.promoCode { padding: 13px; text-align:center; font-weight: bold; border-top:1px dotted #000000; width: 730px; margin-top: 5px; }
.promoCodeNarrow { padding: 12px 0px 7px 0px; text-align:center; font-weight: bold; border-top:1px dotted #000000; width: 100%; }
.promoHdr {font:12pt Arial, Helvetica, sans-serif; font-weight:bold; line-height:18pt; text-align:center; color:#000000; padding: 10px 0px 10px 0px;}

/* ------------------------- PAGE ---------------------------- */
#page {width:798px; height:auto; margin:0 auto; background:#ffffff; color:#000000; border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6}
.introTxt {font:9pt Arial, Helvetica, sans-serif; font-weight:bold; line-height:14pt; text-align:left; padding:10px 20px 25px 20px}
.normalTxt {font:9pt Arial, Helvetica, sans-serif; line-height:12pt; text-align:left; padding:10px}

/* ------------------------- HEADER ---------------------------- */
@media braille, embossed, handheld, projection, speech, screen, tty, tv
{
	.joinHdr {width:800px; height:186px; background:url(/graphics/img_banner-join.jpg) top left no-repeat; margin:10px auto 0 auto; background-color: #ffffff}
	.renewHdr {width:800px; height:186px; background:url(/graphics/img_banner-renew.jpg) top left no-repeat; margin:10px auto 0 auto; background-color: #ffffff}
	.donateHdr {width:800px; height:186px; background:url(/graphics/img_banner-donate-now.jpg) top left no-repeat; margin:10px auto 0 auto; background-color: #ffffff}
	.giftHdr {width:800px; height:186px; background:url(/graphics/img_banner-give-gift.jpg) top left no-repeat; margin:10px auto 0 auto; background-color: #ffffff}
}
@media print
{
	.joinHdr {width:800px; height:50px; margin:10px auto 0 auto; background-color: #ffffff}
	.renewHdr {width:800px; height:50px; margin:10px auto 0 auto; background-color: #ffffff}
	.donateHdr {width:800px; height:50px; margin:10px auto 0 auto; background-color: #ffffff}
	.giftHdr {width:800px; height:50px; margin:10px auto 0 auto; background-color: #ffffff}
}

/* ------------------------- PRINT HEADERS ---------------------------- */
@media braille, embossed, handheld, projection, speech, screen, tty, tv
{
	.joinHdrPrint {display: none}
	.renewHdrPrint {display: none}
	.donateHdrPrint {display: none}
	.giftHdrPrint {display: none}
}
@media print
{
	.joinHdrPrint {width: 800px;display: visible; text-align: center; font-size: 24pt}
	.renewHdrPrint {width: 800px;display: visible; text-align: center; font-size: 24pt}
	.donateHdrPrint {width: 800px;display: visible; text-align: center; font-size: 24pt}
	.giftHdrPrint {width: 800px;display: visible; text-align: center; font-size: 24pt}
}

/* ------------------------- PRINT HEADERS ---------------------------- */
@media screen
{
	.menuContainer {width:800px; height:33px; background-color:#ffffff; margin-left: auto; margin-right: auto}
}
@media print
{
	.menuContainer {width:800px; height:33px; display: none; margin-left: auto; margin-right: auto}
}

/* ------------------------- BOX #1 ---------------------------- */
.box1 {width:758px; height:auto; padding:0px 10px 15px 10px; text-align:left}
.box1L {width:428px; height:auto; padding:0px 10px 15px 10px; text-align:left}
.box1R {width:330px; height:auto; padding:0px 10px 15px 10px; text-align:center}

/* ------------------------- BOX #2 ---------------------------- */
.box2 {margin:0 auto 15px auto; width:720px; height:auto; font:9pt Arial, Helvetica, sans-serif; font-weight:bold; line-height:12pt}

/* ------------------------- PANEL ---------------------------- */
.panelContainer {border: 2px solid #d6d6d6}
td.panelCell { border-bottom:2px solid #d6d6d6 }
.panelReg {height:auto; padding:5px 10px; text-align:center; background-color:#d6d6d6; color:#333333; border-left:2px solid #ffffff}
.panelFirst {height:auto; padding:5px 10px; text-align:center; background-color:#d6d6d6; color:#333333}
.panelRegSel {height:auto; padding:5px 10px; text-align:center; background-color:#ffffcc; color: #000000; border-left:2px solid #ffffff}
.panelFirstSel {height:auto; padding:5px 10px; text-align:center; background-color:#ffffcc; color: #000000}
a.panelClick { text-decoration: none; color:#333333 }

/* ------------------------- PANEL TERM RENDERING ---------------------------- */
.termRadio {width: 1%; text-align: right;  height:auto; vertical-align:top; padding:7px 0px 7px 7px}
.termLabel {width: 49%; text-align: left;  height:auto; vertical-align:top; padding:7px 0px 7px 0px; font-weight:normal;}

/* ------------------------- BOX #3 ---------------------------- */
.box3Top {width:155px; height:auto; padding:10px; text-align:center}
.box3L {width:280px; height:auto; padding:5px; text-align:right; float:left}
.box3R {width:400px; height:auto; padding:5px; text-align:left; float:right}

/* ------------------------- BOX #4 ---------------------------- */
.box4L1 {width:140px; height:auto; padding:5px; text-align:right}
.box4L2 {width:200px; height:auto; padding:5px; text-align:left}
.box4R1 {width:140px; height:auto; padding:5px; text-align:right}
.box4R2 {width:200px; height:auto; padding:5px; text-align:left}

/* ------------------------- BOX #6 ---------------------------- */
.box6A {width:410px; height:auto; padding:5px; text-align:center}
.box6B {width:130px; height:auto; padding:5px; text-align:center}
.box6C {width:130px; height:auto; padding:5px; text-align:center}

/* ------------------------- DEFAULT BAR ---------------------------- */
#defaultBar {width:740px; height:auto; margin:0 auto}
.defaultBg {background-color:#d6d6d6}
.defaultBg_span3 {background:#d6d6d6; display:block; line-height:1px; overflow:hidden; height:1px; margin:0 3px 0 3px}
.defaultBg_span2 {background:#ffffff; display:block; line-height:1px; overflow:hidden; height:1px; margin:0 2px 0 2px; border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6}
.defaultBg_span1 {background:#d6d6d6; display:block; line-height:1px; overflow:hidden; height:1px; margin:0 1px 0 1px; border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6}
.defaultHrule {width:770px; height:1px; margin:0 auto 15px auto; background-color: #d6d6d6;}
.defaultTitle {font:11pt Arial, Helvetica, sans-serif; color: #333333; font-weight:bold; padding:5px 15px; text-align:left; line-height:16pt}

/* ------------------------- Accent BAR ---------------------------- */
.accentBg {background-color:#7b1101; color: #ffffff; font-weight: bold; }
.accentBg_span3 {background:#7b1101; display:block; line-height:1px; overflow:hidden; height:1px; margin:0 3px 0 3px}
.accentBg_span2 {background:#7b1101; display:block; line-height:1px; overflow:hidden; height:1px; margin:0 2px 0 2px; border-left:1px solid #7b1101; border-right:1px solid #7b1101}
.accentBg_span1 {background:#7b1101; display:block; line-height:1px; overflow:hidden; height:1px; margin:0 1px 0 1px; border-left:1px solid #7b1101; border-right:1px solid #7b1101}

/* ------------------------- FOOTER ---------------------------- */
#footer {margin:20px auto; width:800px; height:auto}
.footerTxt {font:8pt Verdana, Geneva, sans-serif; color:#ccc; line-height:14pt; text-align:center}

/* ------------------------- SPECIALOFFER ---------------------------- */
.specialOffer { padding: 0px 15px 0px 15px; }

/* ------------------------- Term Table ---------------------------- */
td.leftColumn {width:330px; height:auto; vertical-align:top; padding:7px 0px 0px 20px;}
td.rightColumn {width:330px; height:auto; vertical-align:top; padding:7px 20px 0px 0px;}

/* ------------------------- Gradient Row ---------------------------- */
.gradient {
	width: 798px;
	height: 15px;
 	background: #ffffff; /* for non-css3 browsers */
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d6d6d6', endColorstr='#ffffff'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#ffffff)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #d6d6d6,  #ffffff); /* for firefox 3.6+ */ 
	margin: 0 auto 0 auto;
	border-left: 1px solid #d6d6d6;
	border-right: 1px solid #d6d6d6;
}

/* ------------------------- Errors ---------------------------- */
.pageError { text-align: center;font-size: 16pt;color: red; padding: 5px; }
.sectionError { text-align: center;font-weight: bold;color: red; padding: 8px; border: solid red 1px; width: 70%;margin: auto auto 10px auto; }
.labelError { color: red;font-weight: bold;padding: 3px; }
.processMessage { text-align: center;font-weight: bold;color: red; padding: 8px; border: solid red 1px; width: 70%;margin: 10px auto 10px auto; }

/* ------------------------- Term Panel Content Rendering ---------------------------- */
.termContainer { padding-top: 5px;font-weight: normal}
.termRadio { width: 1%;text-align: right;height: auto;vertical-align: top;padding:7px 0px 7px 7px }
.termLabel { text-align: left;height: auto;vertical-align: top;padding:7px 0px 7px 0px }
.termListRadio { font-weight: normal; width: 1%;text-align: right;height: auto;vertical-align: middle;padding:7px 0px 7px 7px }
.termListLabel { font-weight: normal; text-align: left;height: auto;vertical-align: middle;padding:7px 0px 7px 0px }

/* ------------------------- Term Panel Link Rendering ---------------------------- */
.termContainer a:link { text-decoration:underline; color: #000000; }
.termContainer a:visited { text-decoration:underline; color: #000000; }
.termContainer a:active { text-decoration:underline; color: #000000; }
.termContainer a:hover { text-decoration:underline; color: #000000; }

/* ------------------------- SuperLife Rendering ---------------------------- */
div.super_life {width: 80%; margin-left: auto; margin-right: auto}
td.superLifeContainer {text-align: center}
.superLifeMesg {padding: 7px 7px 7px 7px;font-weight: normal}
.superLifeWarn {font-size: 12pt;text-align: center;padding-bottom: 10px;font-weight:bold;color: red}
.superLifeTxt {font:9pt Arial, Helvetica, sans-serif; line-height:12pt; text-align:left; padding:5px}
.superLifeTxtWarn {font:9pt Arial, Helvetica, sans-serif; line-height:12pt; text-align:left; padding:5px;color: red}

/* ------------------------- Donation Amount Rendering ---------------------------- */
.donateRadio {float: left}
.donateSelect {width:165px; height:auto; padding:5px; text-align:left}
.donateSingle {width:auto; height:auto; padding:5px; text-align:left}
.topSpacer {height: 15px}

/* ------------------------- Magazine Drop Down Rendering ---------------------------- */
option.printMag { background-color:white; color:black; }
option.digitalMag { background-color:white; color:blue; }

/* ------------------------- Donate Comment Rendering ---------------------------- */
.donateComment { background-color: #d6d6d6; color: #000000; padding: 5px; font-weight: bold; margin: 10px; width: 75%; }

/* ------------------------- Default campaign menu ---------------------------- */
.mainContainer {width:800px; height:33px; background-color:#ffffff; margin-left: auto; margin-right: auto;}
.topNav {background-color:#2c210b; width:793px; height:32px; margin:0px 0 1px 1px; float:left; padding:0 0 0 5px}
.topNavLink {float:left; padding:0 20px; margin:8px 0 0 0}