@import url(reset-fonts.css); /* Reset & Font Framework */


body {
font-family: Arial, Helvetica, "Bitstream Vera Sans", Myriad Pro, sans-serif;
margin: 0;
background-color:#D9DCD5;
background-image:url(background-site.png);
background-position:left top;
background-repeat:repeat-x; 
}

h2, h3, h4 {font-weight: bold; margin-bottom: .8em;}
h2 {font-size: 138.5%;}
h3 {font-size: 131%;}
h4 {font-size: 116%;}

p {margin-bottom: 1em;}
a, a:hover {color: #008ABE;}

ul {margin-left: 1em;}
li {list-style: disc; margin-bottom: .6em;}

strong {font-weight: bold;}

/* ---- Layout --------------------------------------------------------------- */
#page {min-width: 974px; width: 974px; margin: 0 auto; background-color:white; border: 2px solid white;}
#header, #wrapper, .content, #footer {width:100%; overflow: hidden;}
#main {float: left; width: 40%; padding: 2%;}
#sidebar {float: right; width: 48%; padding: 2%;}
#footer {clear: both;}

.left {float: left;} .right {float: right;}
.content .left, .content .right {width: 99.99%;}

/* --- Form --- */
form {margin: 0; padding: 0;}
fieldset {padding: 2em;}
label {font-weight: bold; padding-bottom: 2px;}
input, textarea {padding: .2em;}
input {vertical-align: middle;}

.required, .ex, .help {font-size: 85%; font-family: sans-serif;}
.required {color: #C00; font-weight: bold;}
.ex, .help {font-weight: normal;}

/* --- Button --- */
.submit {clear: both;}
.submit p {text-align: center; margin-bottom: 0; padding-bottom: 0; overflow: hidden;}
.submit input {float: left; width: auto; overflow: visible; border: none; cursor: pointer; cursor: hand;}
.submit span {float: left;}

.bt01 input, .bt02 input {height: 42px; color: #FFF; font-weight: bold; padding-right: 20px; background: transparent url(bt_01_02.png) no-repeat; cursor: pointer; cursor: hand; /* pour IE */}
.bt01 span, .bt02 span {height: 42px; width: 20px; background: transparent url(bt_01_02_left.png) no-repeat;}
.bt01 input {background-position: top right;}
.bt01 span {background-position: top left;}
.bt02 input {background-position: bottom right;}
.bt02 span {background-position: bottom left;}

.linkbt03 a, .linkbt03 span {display: block;}
.linkbt03 a {height: 55px; font-weight: bold; color: #FFF; text-decoration: none; background: url(button/bt_03.png) top right no-repeat; cursor: hand; /* pour IE */}
.linkbt03 a:hover {color: #FFF;}
.linkbt03 span {text-align: center; padding: 20px; background: url(bt_03_left.png) top left no-repeat;}

#donation .bt01 {padding-left: 86px;}
#contact .bt02 {padding-left: 66px;}
#payment .bt02 {padding-left: 46px;}
#thanks .bt01 {padding-left: 246px;}

/* --- Corner --- */
.back-green, .back-green .container {width: 100%; overflow: hidden; background-color: #E50000;}
.back-green .tbl, .back-green .bbl {width: 16px;}
.back-green .tb, .back-green .tbl, .back-green .bb, .back-green .bbl {height: 16px; background-repeat: no-repeat; background-image: url(tbb.png);}
.back-green .cbl, .back-green .cbr {background-repeat: repeat-y;}
.back-green .cc {margin: 0 16px;}

.tb, .tbl, .bb, .bbl, .cbl, .cbr, .cc {background-repeat: no-repeat; overflow: hidden;}
.tb, .bb, .cbl, .cbr {width: 100%;}
.tb {background-position: top right;}
.bb {background-position: bottom right;}
.tbl, .bbl {float: left;}
.tbl {background-position: top left;}
.bbl, .cbl {background-position: bottom left;}
.cbr, .cc {background-position: bottom right;}

.green .tbl, .green .bbl, .grey .tbl, .grey .bbl {width: 28px;}
.green .cc, .grey .cc {min-height: 230px; margin: 0 28px;}

.green {background-color: #94DB4C;}
.green .tb, .green .tbl, .green .bb, .green .bbl {height: 28px; background-image: url(tbb.png);}
.green .cbl, .green .cbr {background-image: url(lr.png);}
.green .cc {background-color: #E50000; background-image: url(cc.png);}

.grey {background-color: #F0F0EF;}
.grey .tb, .grey .tbl, .grey .bb, .grey .bbl {height: 28px; background-image: url(tbb.png);}
.grey .cbl, .grey .cbr {background-image: url(lr.png);}
.grey .cc {background-color: #F0F0EF;}

.white {background-color: #FFF;}
.white .tb, .white .tbl, .white .bb, .white .bbl {height: 28px; background-image: url(tbb.png);}
.white .cbl, .white .cbr {background-image: url(lr.png);}
.white .cc {background-color: #FFF;}

/* ---- Header ------------------------------------------------------------- */
#header {color: #FFF; background: #e50000; border-bottom: 6px solid #E50000;}
#logo {float: left;}

#description {margin-left: 494px; padding: .8em .4em 0;}
#description h2 {text-transform: uppercase; font-weight: bold; margin-bottom: .4em;}
#description p {margin: .6em 0; padding: 0;}

/* ---- Main --------------------------------------------------------------- */
.content {clear: both;}
.content h4 {color: #E50000; margin: 1em 0 0;}

/* ----  Step 1  ---- */
.year-amount, .amount {width: 18em; text-align: center; margin: 0 auto;}
fieldset.year-amount, fieldset.amount {padding: 2em 1em;}
.year-amount .desc, .amount .desc {width: 15em; margin: .1em auto 1em;}
.year-amount .ex, .amount .ex {display: block; padding-top: .2em; padding-left: 6.4em;}
.amount {color: #000;}
.amount .ex {color: #e9e9e9;}

.radio {text-align: left;}
.radio-inline {width: 100%; overflow: hidden; margin: 0 auto; text-align: center; }
.radio-inline p {float: left; margin: 0 auto; width: 24.99%;}
.radio-inline p span {display: block; width: 100%; font-weight: bold;}

.radio .or {padding-top: 0;}
.radio-inline .or,.radio .or {width: 100%; overflow: hidden; clear: both; text-align: center; padding-top: 1.2em;}

.year-amount h3 {color: #E50000;}
.amount-value {font-weight: bold; text-align: center; margin: 1em auto 0; padding: 1em 0; border-top-width: 1px; border-top-style: solid;}
.amount-value input {width: 5em; text-align: right; vertical-align: middle;}

.amount .amount-value {border-top-color: #b4e384;}
.year-amount .amount-value {border-top-color: #c0c0bf;}

.amount-info {font-weight: bold;}
.amount-info span {font-weight: bold; color: #C00;}

#content-info {text-align: center;}

/* ----  Step 2  ---- */
#contact fieldset {width: 34em; margin: 0 auto; border: 1px solid #000; background: #FFF;}
#contact .address {width: 100%; overflow: hidden;}
#contact .address textarea {float: left;}
#contact .required {color: #C00;}
#contact .ex {color: #7F7F7F;}

#contact #required-info {color: #FFF; text-align: center; margin: 1em 0;}

#contact-info p {margin: 0; padding-bottom: 1em;}
#contact-info label {display: block; padding-bottom: 2px;}
#contact-info input, #contact-info textarea {width: 50%; display: inline;}
#contact-info .left input, #contact-info .right input {width: 50%;}

/* ----  Step 3  ---- */
#payment fieldset, #by-postmail {background: #FFF;}
#payment label, #payment label span {display: block;}
#payment h3 {position: relative; bottom: -.5em; color: #FFF; margin: 0 12px;}
p.address {clear: both;}

#card-select, #card-info {width: 16em; margin: 0 auto; overflow: hidden;}
#card-select {margin-bottom: .2em;}
#card-select p {font-weight: bold;}

#card-type {width: 100%; overflow: hidden; margin-bottom: 1em;}
#card-type p {float: left; width: 33%; margin: 0 auto; text-align: center;}
#card-type img {display: block; margin: 6px auto 0;}

input#card-number {width: 11.2em;}
input#expiration {width: 4em;}

label#month, label#year {display: inline;}
#month span {display: block; padding-bottom: 2px;}

#by-postmail {padding: 2em;}

.msg-error-cb {padding: 10px 12px; border: 1px solid #C93; background-color: #FFC;}
.msg-error-cb img {float: left;}
.msg-error-cb .mess {display: block; margin-left: 28px; padding-top: 5px;}

/* ----  Thanks  ---- */
#thanks #main {float: none; margin: 0 auto;}
#thanks h3 {font-size: 197%; color: #7FBA00; text-align: center; margin-bottom: .4em;}
#thanks fieldset {padding-top: 0;}
#thanks label {padding-bottom: 0;}

#thanks-text {padding: 2em 2em 1em;}

#phone-number {width: 100%; overflow: hidden;}
#phone-number label {display: inline;}
#phone-number img {vertical-align: middle;}
#phone-number input {width: 8em;}
#phone-number .ex {float: left; padding-left: 30px;}
#phone-number select {padding: .2em; vertical-align: middle;}

#choice ul {margin-left: 0;}
#choice li {display: inline; list-style: none; margin-bottom: .2em; padding-right: 3.5em;}
#choice .yes {font-size: 129%;}
#choice .no {text-transform: lowercase;}

/* ---- Step Menu ---- */
#step-nav ol {height: 44px;}
#step-nav li {
	float: left;
	width: 33.3%;
	height: 44px;
	font-size: 114%;
	display: inline;
	list-style: none;
	margin-bottom: 0;
}

#step-nav li a {
	display: block;
	height: 54px;
	width: 100%;
	color: #000;
	text-decoration: none;
	font-weight: bold;
	background-position: left -12px;
	background-repeat: no-repeat;
}

#step-nav li a span {display: block; padding: .8em 0 .75em 56px;}
#step-nav li.step-01-current span, #step-nav li.step-01-done span {padding-left: 66px;}
#step-nav li.step-01-current a span, #step-nav li.step-02-current a span, #step-nav li.step-03-current a span {font-size: 120%; padding-top: .5em;}

#step-nav li.step-02 a {background-image: url(step-02.png);}
#step-nav li.step-03 a {background-image: url(step-03.png);}

#step-nav li.step-01-current a {background-image: url(step-01-current.png);}
#step-nav li.step-02-current a {background-image: url(step-02-current.png);}
#step-nav li.step-03-current a {background-image: url(step-03-current.png);}

#step-nav li.step-01-done a {background-image: url(step-01-done.png);}
#step-nav li.step-02-done a {background-image: url(step-02-done.png);}

#step-info {clear: both; width: 100%; overflow: hidden; font-weight: bold; margin: 0 0 .8em;}
#step-info p {clear: both; margin: 0; padding: .2em .6em; border: 1px dashed #3c3b3c; background: #FFF;}

#step-info #arrow {
	display: block;
	position: relative;
	bottom: -1px;
	width: 22px;
	height: 10px; 
	background: transparent url(step-info-arrow.png) top left no-repeat;
	overflow: hidden;
}

#donation #step-info p {float: left;}
#donation #step-info #arrow {margin-left: 14%;}
#contact #step-info p {margin: 0 auto; text-align: center;}
#contact #step-info #arrow {margin: 0 auto;}
#payment #step-info p {float: right;}
#payment #step-info  #arrow {float: right; padding-right: 18%;}

/* ---- Sidebar ------------------------------------------------------------ */
#sidebar {color: #333; text-align: center;}
#sidebar h2 {color: #5E5D5D; margin-bottom: .4em;}

.info-bloc {float: left; text-align: center; }

.info-content {
	text-align: left;
	margin: 0 auto;
	padding: 16px;
	border: 1px dashed #484549;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-khtml-border-radius: 8px;
	-webkit-border-radius: 8px;
}

/* ---- Footer ------------------------------------------------------------- */
#footer {color: #333; text-align: center; padding-bottom: 2%;}
#footer a {color: #333; text-decoration: none;}
#footer a:hover {color: #333; text-decoration: underline;}

#copyright {font-size: 85%;}