﻿/* BOUTON .btn */
div.btn {
	position: relative;
	background: url(img/abo-payant/sprite-btn.png) no-repeat right -41px;
	margin: 0 2px;
	float: left;
}
div.generer {
	width: 300px;
}
div.btn a {
	background: url(img/abo-payant/sprite-btn.png) no-repeat left top;
	margin-right: 4px;
	padding: 0 0 0 2px;
}
div.btn strong {
	display: block;
	text-align: center; /*color:#FFFFFF;*/
	color: #ff5500;
	position: relative;
	z-index: 2;
}
div.btn strong, div.btn span {
	padding: 11px 0 11px;
}

a.more {
	display: block;
	width: 118px;
	height: 22px;
	float: right;
	margin-top: 5px;
	background: url(img/abo-payant/more-infos.png) no-repeat;
	text-indent: -999em;
}
#detailOffre a.more {
	margin-top: 30px;
}
input.btn {
	padding: 0;
}

.btnline2 {
	margin: 0 auto;
	width: 205px;
}

/* =TYPO
*****************************************************************************/
h2 {
	font-family: Helvetica;
	font-size: 16px;
}

.modalPopup .node h2 {
	color: #fff;
	font-weight: bold;
}

.infosContent h2 {
	font-size: 24px;
	line-height: 1.6em;
}
#highlightServices h2 {
	font-size: 17px;
	line-height: 1.6em;
}
#modePaiement h2, #dureeAbo h2 {
	text-align: center;
	font-size: 13px;
}
#modePaiement h2 strong, #dureeAbo h2 strong {
	font-size: 16px;
	text-transform: uppercase;
}
#modePaiement p {
	color: #514339;
}
#modePaiement .paiement p {
	color: #000;
	line-height: 2.2em;
}
.paiement p strong {
	font-size: 22px;
}
.paiement p strong.liberte {
	font-size: 28px;
}
.paiement p strong.prix {
	font-size: 32px; /*color:#ff9600;*/
	color: #ff5500;
}
.paiement p strong.prix span {
	font-size: 22px;
}
.choixDuree p {
	font-weight: bold;
}
#highlightDetail p strong.prix {
	letter-spacing: -2px;
}
.choixDuree p strong {
	font-size: 25px;
}
.choixDuree p strong.prix {
	font-size: 34px; /*color:#ff9600;*/
	color: #ff5500;
}
.choixDuree p strong.pourcentage {
	font-size: 15px;
}
.choixDuree p strong.pourcentage span, .pourcentage strong {
	font-size: 26px; /*color:#FF9600;*/
	color: #ff5500;
}
#dureeAbo .current p .prix, #dureeAbo .current p .pourcentage, #modePaiement .current p .prix, #dureeAbo .current p .pourcentage span {
	color: #FFF;
}
.choixDuree .cadeau {
	font-weight: normal;
	font-size: 12px;
	color: #000;
}
.choixDuree .cadeau strong {
	font-size: 14px;
}
.detail {
	font: 0.7em Verdana;
	text-indent: -999em;
	color: #000;
}
#promo ul li a, #offreFidelite .autresOffres li a {
	font: bold 14px Helvetica;
	color: #000;
}
#promo ul li a span, #offreFidelite .autresOffres li a span {
	/*color:#FF9600;*/
	color: #ff5500;
}
#promo ul li.current a span, #offreFidelite .autresOffres li.current a span {
	color: #FFF;
}
#formulaire h2 {
	font-size: 10px;
	padding-bottom: 10px;
	float: left;
}
#formulaire h3 {
	font-size: 12px;
	line-height: 1.8em;
	float: right;
}
#formulaire h4 {
	font-size: 14px;
	padding-top: 5px;
	clear: both;
}
#highlightBon h2 {
	font-size: 20px;
}

/* =MAIN
*****************************************************************************/
/* =HEADER */
#header {
	background: url(img/abo-payant/bg-header.gif) repeat-x left top;
}
/* h1 */
h1 strong {
	width: 171px;
	height: 37px;
	right: 20px;
	top: 20px;
	background: url(img/abo-payant/logo-privileges.png) no-repeat left top;
}

/* #lv1 */
#lv1 {
	margin: 0 auto;
}

/* Home */
#infosContent {
	width: 260px;
	float: left;
	padding: 30px 20px 0;
}
.infosContent {
	margin-bottom: 10px;
}

#highlightServices {
	width: 463px;
}
#highlightServices li {
	width: 205px;
	float: left;
}
#dureeAbo, #modePaiement {
	margin-bottom: 10px;
}
#dureeAbo {
	width: 495px;
	min-height: 400px;
	float: right;
}
#modePaiement, #logoff, #dejaMembre {
	background: #e3d9d0;
	border: 1px solid #ddd4ce;
}
#modePaiement {
	width: 295px;
	float: left;
	clear: both;
}
#dureeAbo, #promo, #autresOffres, #offreFidelite, #formulaire, #recapitulatif, #footer {
	background: #f7f3f0;
	border: 1px solid #ddd4ce;
}
#modePaiement .node, #dureeAbo .node {
	min-height: 470px;
	background: url(img/abo-payant/bg-node.gif) no-repeat center top;
}
#modePaiement h2, #dureeAbo h2 {
	width: 100%;
	padding: 10px 0;
	letter-spacing: -1px;
}
#modePaiement h2 strong, #dureeAbo h2 strong {
	display: block;
}
.paiement, .choixDuree {
	margin: 0 0 5px 0;
	background: #FFF;
	border: 1px solid #b4aaa3;
	position: relative;
}
.paiement {
	height: 135px;
	background: #F7F3F0 url(img/abo-payant/bg-paiement.png) no-repeat center top;
	border: 0;
	padding: 16px 12px;
}
#modePaiement .current {
	background: #F7F3F0 url(img/abo-payant/bg-current-paiement.png) no-repeat center top;
}
#modePaiement .node {
	padding: 12px 4px;
}
.paiement h3 {
	width: 200px;
	height: 102px;
	position: absolute;
	right: 7px;
	bottom: 5px;
	z-index: 1;
	text-align: right; /* text-indent:-999em; */
}
#modePaiement .paiement p {
	width: 145px;
	position: relative;
	z-index: 2;
}
.paiement p strong.liberte {
	position: relative;
}
.paiement p strong.liberte .degrade {
	top: 5px;
	left: 0;
	width: 100%;
}
.paiement p span.pourcentage {
	display: block;
	width: 80px;
	margin: 24px 0 0 10px;
	line-height: 1em;
}
#modePaiement p.condition {
	padding: 12px;
}
.choixDuree {
	overflow: hidden;
	border: 0;
	padding: 14px 12px;
	margin: 0;
	background: #F7F3F0 url(img/abo-payant/bg-duree.png) no-repeat left top;
}
#dureeAbo .current {
	background: url(img/abo-payant/bg-current-duree.png) no-repeat left top;
}
#dureeAbo .noCadeau {
	background: #F7F3F0 url(img/abo-payant/bg-duree2.png) no-repeat left top;
}
#dureeAbo .noCadeau.current {
	background: #F7F3F0 url(img/abo-payant/bg-current-duree2.png) no-repeat left top;
}
.choixDuree p {
	width: 220px;
	margin-right: 30px;
	float: left;
	position: relative;
}
.choixDuree p strong.duree {
	display: block;
}
.choixDuree p strong.prix {
	display: block;
	position: absolute;
	top: 11px;
	left: 115px;
}
.reabo .choixDuree p strong.prix {
	left: 131px;
}
.choixDuree p strong.pourcentage {
	display: block;
}
.choixDuree .cadeau {
	width: 190px;
	margin: 6px 0 5px 5px;
}
.choixDuree .cadeau strong {
	display: block;
}
#dureeAbo .noCadeau .cadeau strong {
	width: 110px;
}
.choixDuree span.img {
	display: block;
	width: 100px;
	height: 95px;
	position: absolute;
	right: -9px;
	top: -3px;
}

.detail {
	display: block;
	width: 100px;
	height: 16px;
	padding: 2px 0 2px 20px;
	background: url(img/abo-payant/bg-adetail.png) no-repeat left top;
}
.current .detail {
	background: url(img/abo-payant/bg-adetail.png) no-repeat left -20px;
}
.choixDuree .detail {
	background: url(img/abo-payant/bg-adetail.png) no-repeat left -20px;
}
#dureeAbo .current .detail {
	background: url(img/abo-payant/bg-adetail.png) no-repeat left bottom;
}
.paiement .detail {
	position: absolute;
	right: 0;
	top: 20px;
}
.choixDuree .detail {
	float: left;
}

#promo {
	clear: both;
	overflow: hidden;
}
#promo .node {
	overflow: hidden;
}
#promo ul, #promo ul li, #promo input, #promo div label {
	float: left;
}
#promo ul li, .reabo #highlightOffres .autresOffres li, #offreFidelite .autresOffres li {
	margin-right: 3px;
	background: url(img/abo-payant/bt-abo-r.png) no-repeat right top;
	padding: 6px 10px 6px 0;
}
#promo ul li a, .reabo #highlightOffres .autresOffres li a, #offreFidelite .autresOffres li a {
	padding: 6px 0 6px 10px;
	background: url(img/abo-payant/bt-abo-l.png) no-repeat left top;
	text-decoration: none;
}
#promo ul li.current, .reabo #highlightOffres .autresOffres li.current, #offreFidelite .autresOffres li.current {
	background: url(img/abo-payant/bt-current-abo-r.png) no-repeat right top;
}
#promo ul li.current a, .reabo #highlightOffres .autresOffres li.current a, #offreFidelite .autresOffres li.current a {
	background: url(img/abo-payant/bt-current-abo-l.png) no-repeat left top;
}
.node div.numProm {
	/*width:421px; TODO : à supprimer ??*/
	float: right;
	padding: 3px 0;
	text-align: right;
}

.node div.numProm div input {
	margin: 0;
}
.node div.numProm input {
	margin: 0 3px;
}

.node div.numProm div {
	float: left;
}
#promo div label {
	padding: 2px;
}
#promo div #num, #pseudo, #pass {
	/* width:70px; */
	font: 10px Arial;
}
#promo div #num {
	width: 70px;
}
#promo .autresOffres, .reabo #highlightOffres .autresOffres {
	float: none;
	clear: both;
}
#promo .autresOffres li, .reabo #highlightOffres .autresOffres li {
	margin: 0 auto;
	width: 195px;
	float: none;
	height: 30px;
}
#promo .fidelite li {
	width: 165px;
}
#main .error input {
	border: 1px solid #F00;
	background: #FCC;
}
#main div.error strong {
	color: #F00;
	font: bold 11px Arial;
	display: block;
}
#main div.error, #main p.error, #main div.error label {
	color: #F00;
	font-weight: bold;
}

#optinCondition span img.error {
	vertical-align: middle;
}


#logoff {
	margin: 0 0 10px 0;
	clear: both;
}
#logoff h2 {
	font-size: 14px;
	float: left;
	margin: 8px 15px 0 10px;
	height: 30px; /*text-transform:uppercase;*/
}
#logoff, #logoff h2, #logoff h3 {
	font-weight: bold;
}

#logoff h2, #logoff .node a, #logoff h3, #logoff input, #logoff .form div, #logoff .form div label {
	display: inline;
	float: none;
}

#logoff h2, #logoff h3, #logoff input, #logoff .form div, #logoff .form div label {
	margin-top: 0;
}

#logoff .node a {
	float: right;
	margin-top: 4px;
}

#logoff h2 {
	display: block;
	margin: 8px 15px 0 0;
}

/*#logoff h2,*/
#logoff h3 {
	height: auto;
}
#logoff label, #logoff input {
	vertical-align: middle;
}

#logoff h3 {
	margin-right: 15px;
	margin: 7px 15px 0 0;
}
#logoff .form div {
	margin-right: 5px;
}

#logoff.highlight {
	border: 1px solid Red;
}

#dejaMembre {
	margin: 0 0 10px;
}

span.degrade {
	position: absolute;
	top: 7px;
	left: 0;
	display: block;
	width: 110%;
	height: 30px;
	background-image: url(img/abo-payant/bg-degrade.png);
	background-repeat: repeat-x;
	background-position: left top;
}
.current span.degrade, .actif span.degrade {
	background: none;
}

/* Home offres speciales */
.offreSpeciales #modePaiement {
	float: none;
	width: 100%;
}
.offreSpeciales #modePaiement .node {
	min-height: 220px;
}
.offreSpeciales .paiement {
	background: #F7F3F0 url(img/abo-payant/bg-paiement2.png) no-repeat scroll center top;
	border: 0 none;
	float: left;
	height: 135px;
	margin: 5px 39px;
	padding: 16px 12px;
	width: 292px;
}
.offreSpeciales #modePaiement .current {
	background: #F7F3F0 url(img/abo-payant/bg-current-paiement2.png) no-repeat center top;
}
.offreSpeciales .paiement p span.pourcentage {
	width: 100%;
	margin: 26px 0 0 10px;
}
.offreSpeciales .paiement .cadeau {
	bottom: 13px;
	height: 110px;
	position: absolute;
	right: 7px;
	width: 115px;
	z-index: 1;
}
.offreSpeciales .liberte .paiement .cadeau {
	height: 101px;
	text-align: right;
	width: 157px;
}


/* Detail offres */
.choixOffre div.btn {
	margin-right: 30px;
	float: right;
	margin-bottom: 10px;
}

#detailOffre {
	padding: 8px;
	border: 1px solid #DED6D0;
	margin: 20px 0;
}
#highlightDetail {
	width: 450px;
	min-height: 271px;
	float: left;
	padding: 10px;
	position: relative;
}

.liberte #highlightDetail {
	padding: 0 10px;
}
.liberte.rib #highlightDetail {
	padding: 0 10px;
}
#cadeauOffre {
	width: 280px;
	min-height: 271px;
	padding: 10px;
	float: right;
	position: relative;
	background: #E0D6D0 url(img/abo-payant/bg-cadeauOffre.png) repeat-x left top;
}
#highlightDetail p {
	position: relative;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5em;
}
#highlightDetail .duree {
	display: block;
	font-size: 40px;
}
#highlightDetail .prix {
	position: absolute;
	left: 175px;
	top: 10px;
	left: 204px;
	font-size: 66px; /*color:#FF9600;*/
	color: #ff5500;
	height: 60px;
}
.mags #highlightDetail .prix {
	left: 204px;
}
#highlightDetail .prix span.degrade {
	top: -11px;
	height: 60px;
}
#highlightDetail .pourcentage span {
	font-size: 35px; /*color:#FF9600;*/
	color: #ff5500;
}
#highlightDetail span.prixOld {
	font-size: 24px; /*color:#FF9600;*/
	text-decoration: line-through;
}
#highlightDetail .pourcentage span.degrade {
	left: 32px;
	top: 0;
	width: 200px;
}
#highlightDetail .avantages {
	display: block;
	width: 220px;
	height: 207px;
	position: absolute;
	bottom: -26px;
	left: -23px;
}
.mags #highlightDetail .avantages {
	bottom: -115px;
	left: -23px;
}
#highlightDetail li {
	background: url(img/abo-payant/li-services.gif) no-repeat left top;
	padding-left: 20px;
	font: 12px/1.6em Arial;
}
#cadeauOffre p {
	width: 160px;
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: -1px;
}
#cadeauOffre p strong {
	font-size: 28px;
	display: block;
}
#cadeauOffre .form li label {
	font-family: Verdana;
	font-size: 9px;
	-overflow: hidden;
	-white-space: nowrap;
	width: 60px;
	-height: 84px;
	display: block;
	vertical-align: text-bottom;
}

#cadeauOffre .form li label img {
	-top: 20px;
	-left: 0;
	width: 54px;
	-position: absolute;
}

#cadeauOffre .form li label strong {
	display: block;
	height: 30px;
	font-size: 9px;
}


#cadeauOffre .form li label span {
	clear: both;
}


#detailOffre .ico-plus {
	display: block;
	width: 54px;
	height: 54px;
	position: absolute;
	top: 50%;
	right: 272px;
	margin-top: -27px;
	text-indent: -999em;
	background: url(img/abo-payant/ico-plus.png) no-repeat left top;
}
#cadeauOffre .cocarde {
	display: block;
	width: 133px;
	height: 134px;
	position: absolute;
	bottom: 0;
	right: 0;
	text-indent: -999em;
	background: url(img/abo-payant/cocarde-cadeau.png) no-repeat left top;
}
#cadeauOffre .cadeau {
	display: block;
	height: 270px;
	margin: 0 0 -90px;
	text-align: center;
}
#highlightDetail ul {
	margin: 0 0 0 200px;
}
.ssCadeau #highlightDetail ul {
	margin: 50px 0 0 200px;
}
#highlightDetail p.reduction {
	padding: 0 0 50px 0;
	clear: both;
}
.ssCadeau #cadeauOffre .ico-plus {
	background: url(img/abo-payant/ico-plus2.png) no-repeat left top;
}
.ssCadeau #cadeauOffre .cocarde {
	background: url(img/abo-payant/cocarde-sscadeau.png) no-repeat left top;
}
.ssCadeau #cadeauOffre p {
	width: 100%;
}
.ssCadeau p.reduction span {
	/*color:#FF9600;*/
	font-size: 40px;
}
.ssCadeau #cadeauOffre p {
	width: 100%;
	font-size: 25px;
	padding: 0;
}
.ssCadeau #cadeauOffre p.reduction, .ssCadeau #cadeauOffre p.reduction strong {
	padding: 0 0 15px 0;
	clear: both;
	font-size: 24px;
}

#autresOffres {
	margin: 0 0 12px;
}
#autresOffres .node {
	padding: 0 9px 12px;
}
#autresOffres.reabo .node {
	padding: 0 4px 12px;
}

h2.choixOffres {
	clear: both;
	font-size: 16px;
	font-weight: bold;
	padding: 0 30px;
	line-height: 1.6em;
}
#highlightOffres ul.liberte {
	float: right;
}
#highlightOffres li {
	width: 123px;
	float: left;
	font-family: helvetica;
	margin: 0 5px 10px 0;
	background: transparent url(img/abo-payant/sprite-choixOffres.png) no-repeat scroll right bottom;
}
.reabo #highlightOffres li {
	background: transparent url(img/abo-payant/sprite-choixOffres2.png) no-repeat scroll right 8px;
	float: left;
	font-family: helvetica;
	margin: 0 0 10px 0;
	width: 112px;
}
#highlightOffres li.liberte {
	margin: 0 0 10px 5px;
	border-left: 1px solid #CCC;
}
#highlightOffres li.current, #highlightOffres li.actif {
	background: transparent url(img/abo-payant/sprite-choixOffres.png) no-repeat scroll left bottom;
}
.reabo #highlightOffres li.current, .reabo #highlightOffres li.actif {
	background: transparent url(img/abo-payant/sprite-choixOffres2.png) no-repeat scroll left 7px;
}
#highlightOffres li.actif a {
	background: transparent url(img/abo-payant/bg-node.gif) no-repeat scroll center top;
}
#highlightOffres li a {
	display: block;
	color: #000;
	font-size: 11px;
	height: 89px;
	padding: 10px 14px 0;
	text-decoration: none;
}
.reabo #highlightOffres .autresOffres li {
	padding: 0 10px 0 0;
}
#highlightOffres .autresOffres li a {
	font-size: 14px;
	height: inherit;
	font-weight: bold;
	padding: 10px 14px 0;
	text-decoration: none;
}
#highlightOffres .autresOffres li a span {
	/*color:#FF9600;*/
	color: #ff5500;
}
#highlightOffres .autresOffres li a:hover span {
	color: #FFF;
}
#highlightOffres li a strong {
	position: relative;
}
#highlightOffres .liberte li a {
	height: 86px;
	padding: 13px 14px 0;
}
.reabo #highlightOffres li a {
	padding: 10px 7px 0;
}
.reabo #highlightOffres .liberte li a {
	padding: 15px 7px 0;
}
#highlightOffres li a .duree {
	font-size: 24px;
}
#highlightOffres .liberte li a .liberte {
	font-size: 21px;
	letter-spacing: -1px;
}
#highlightOffres .liberte li a .liberte span.degrade {
	top: 0px;
}
#highlightOffres li a .prix {
	font-size: 33px; /*color:#FF9600;*/
}
#highlightOffres li a .prix span {
	font-size: 23px;
}
#highlightOffres li a .prix span.degrade {
	position: absolute;
}
#highlightOffres li.current a .prix, #highlightOffres li.actif a .prix, #highlightOffres .liberte li.current a .liberte, #highlightOffres .liberte li.actif a .liberte {
	color: #FFF;
}
#autresOffres #promo {
	border: 0;
	background: transparent;
}

.liberte #highlightDetail .duree {
	display: block;
	float: left;
	font-size: 40px;
	position: relative;
	top: 0;
}
.liberte #highlightDetail .duree .degrade {
	top: -1px;
}
.liberte #highlightDetail .prix {
	left: auto;
	top: auto;
	position: inherit;
	font-size: 40px;
	padding-left: 10px;
}
.liberte #highlightDetail .prix span {
	font-size: 34px;
}
.liberte #highlightDetail p.avantage {
	padding: 25px 0 25px 200px;
	clear: both;
	font: normal 17px Helvetica;
	letter-spacing: -1px;
}
.liberte #cadeauOffre ol {
	background: url(img/abo-payant/bg-liberte-cb.png) no-repeat center bottom;
	padding-bottom: 131px;
	margin-bottom: -9px;
}
.liberte #cadeauOffre ol.rib {
	background: url(img/abo-payant/bg-liberte-rib.png) no-repeat right bottom;
	margin-bottom: -10px;
	margin-right: -10px;
}
.liberte #cadeauOffre li {
	background: url(img/abo-payant/li-avantage-liberte.gif) no-repeat left top;
	padding: 2px 0 5px 25px;
	position: relative;
}
.liberte #cadeauOffre li span {
	display: block;
	width: 17px;
	height: 16px;
	left: 0;
	top: 1px;
	position: absolute;
	text-align: center;
	font-weight: bold;
	color: #FFF;
	float: left;
}

#cadeauOffre .form div {
	font-size: 12px;
	font-weight: normal;
	padding: 0;
	width: 100%;
}
#cadeauOffre .form div strong {
	font-size: 16px;
}

.mags #cadeauOffre p {
	width: auto;
	padding: 2px;
	font-size: 12px;
	font-weight: bold;
}
.mags #cadeauOffre p strong {
	font-size: 16px;
	display: block;
}
#cadeauOffre .form ul {
	width: 248px;
	margin: 0 auto;
}
#cadeauOffre .form li {
	float: left;
	width: 54px;
	text-align: center;
	padding: 6px 4px;
	position: relative;
}

/* Coordonnees Commande */
.commande #detailOffre {
	padding: 8px;
	border: 1px solid #DED6D0;
	margin: 20px 0;
}
.commande #highlightDetail {
	width: 365px;
	min-height: 115px;
	float: left;
	padding: 0 5px;
	position: relative;
}
.commande .liberte #highlightDetail {
	padding: 0 10px;
	min-height: 291px;
}
.commande #cadeauOffre {
	width: 365px;
	min-height: 115px;
	padding: 10px;
	float: right;
	position: relative;
	background: #E0D6D0 url(img/abo-payant/bg-cadeauOffre.png) repeat-x left top;
}
.commande #highlightDetail p {
	position: relative;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5em;
}
.commande #detailOffre .ribCB p {
	line-height: 2em;
}
.commande #highlightDetail p.selection {
	line-height: inherit;
	padding-bottom: 14px;
}
.commande .ssCadeau #highlightDetail p.selection {
	padding-bottom: 22px;
}
.commande #highlightDetail .duree {
	display: block;
	font-size: 40px;
}
.commande #highlightDetail .prix {
	position: absolute;
	left: 175px;
	top: 10px;
	font-size: 66px; /*color:#ff9600;*/
	color: #ff5500;
	height: 60px;
}
.commande #detailOffre .ribCB .prix {
	left: 204px;
	top: 27px;
}
.commande #detailOffre .ribCB .prix span {
	font-size: 43px;
}
.commande #highlightDetail .prix span.degrade {
	top: -12px;
	height: 60px;
}
.commande #highlightDetail .pourcentage span {
	font-size: 24px; /*color:#FF9600;*/
}
.commande #highlightDetail span.prixOld {
	font-size: 22px; /*color:#FF9600;*/
	text-decoration: line-through;
}
.commande #highlightDetail .pourcentage span.degrade {
	left: 32px;
	top: 0;
	width: 200px;
}
.commande #highlightDetail .avantages {
	display: block;
	width: 220px;
	height: 207px;
	position: absolute;
	bottom: -26px;
	left: -23px;
	text-indent: -999em;
	background: url(img/abo-payant/illus-offre.png) no-repeat left top;
}
.commande #highlightDetail li {
	background: url(img/abo-payant/li-services.gif) no-repeat left top;
	padding-left: 20px;
	font: 12px/1.6em Arial;
}
.commande #cadeauOffre p {
	width: 135px;
	margin-top: -100px;
	padding: 10px 24px;
	font-size: 16px;
	font-weight: bold;
}
.commande .ssCadeau #cadeauOffre p {
	width: 150px;
	margin-top: 0;
	padding: 0 24px;
	font-size: 25px;
	font-weight: bold;
}
.commande .ssCadeau #cadeauOffre p.reduction {
	width: 100%;
	line-height: 1.2em;
}
.commande #cadeauOffre p strong {
	font-size: 28px;
	display: block;
}
.commande #detailOffre .ico-plus {
	display: block;
	width: 54px;
	height: 54px;
	position: absolute;
	top: 50%;
	right: 358px;
	margin-top: -27px;
	text-indent: -999em;
}
.commande #cadeauOffre .cocarde {
	display: block;
	width: 133px;
	height: 134px;
	position: absolute;
	z-index: 100;
	bottom: -40px;
	right: 0;
	text-indent: -999em;
}
.commande #cadeauOffre .cadeau {
	display: block;
	height: 150px;
	margin-top: -38px;
}
.commande #cadeauOffre .rib, .commande #cadeauOffre .cb {
	display: block;
	height: 150px;
	margin-top: -6px;
	margin-right: -10px;
	text-align: right;
}
.commande #cadeauOffre .cb {
	margin-top: 8px;
}
.commande #cadeauOffre .troisM {
	background: url(img/abo-payant/cadeau-3m-small.png) no-repeat right top;
}
.commande #cadeauOffre .sixM {
	background: url(img/abo-payant/cadeau-6m-small.png) no-repeat right top;
}
.commande #cadeauOffre .unA {
	background: url(img/abo-payant/cadeau-1a-small.png) no-repeat right top;
}
.commande #cadeauOffre .deuxA {
	background: url(img/abo-payant/cadeau-2a-small.png) no-repeat right top;
}
.commande #highlightDetail ul {
	margin: 0 0 0 200px;
}
.commande #highlightDetail p.reduction {
	clear: both;
	padding-bottom: 0;
}
.mags #cadeauOffre p strong .nbMag {
	font-size: 28px; /*color:#FF9600;*/
}

.commande div.btn {
	float: inherit;
	margin: 5px auto;
}
.commande div.fl {
	float: left;
	margin-right: 10px;
}
.commande div.fr {
	float: right;
	margin-left: 10px;
}

.commande div.btnCommande {
	text-align: center;
	padding: 5px 0 20px;
	clear: both;
}
.commande div.btnCommande2 {
	text-align: right;
	padding: 0;
	clear: both;
}
.commande div.btnCommande a, .commande div.btnCommande2 a {
	color: #000;
	text-decoration: underline;
}
.commande #formulaire, .commande #recapitulatif, .commande #logoff {
	margin: 0 0 12px 0;
}
.commande p.asterisque {
	clear: both;
	font-size: 10px;
	padding: 10px 0 5px;
}
.commande #reglementRib {
	margin: 0 0 12px;
}
/*.commande #formulaire div{ line-height:1.8em; }*/
.commande #formulaire .form {
	margin-top: 20px;
}
.commande #formulaire .form input {
	border: 1px solid #C5C5C5;
	font-family: 10px Arial;
	margin-right: 3px;
	padding: 2px; /* width:auto; */
	float: left;
}
.commande #formulaire .form label {
	display: block;
	float: left;
	width: 130px;
	text-align: right;
	padding: 0 5px 0 0;
}
.commande #formulaire .form div {
	width: 385px;
	min-height: 20px;
	padding: 0 0 10px;
}

.commande #formulaire #etape1 div {
	float: left;
}

.commande #formulaire #etapeDeux, .commande #formulaire #etapeTrois {
	float: left;
	width: 454px;
	padding: 0 20px;
	border-right: 1px solid #CCC;
}
.commande #formulaire #etapeDeux label {
	text-align: left;
	padding: 0 0 0 5px;
	float: none;
}
.commande .payer {
	background: url(img/abo-payant/btn-payer.png) no-repeat left;
	text-indent: -999em;
	width: 202px;
	height: 50px;
	cursor: pointer;
	display: block;
}
.commande #formulaire #aide {
	width: 240px;
	padding: 0 20px;
	margin: 20px 0;
	float: right;
	border-left: 1px solid #CCC;
	margin-left: -1px;
}
.commande #formulaire #aide p {
	padding: 5px 0;
	line-height: inherit;
}
.commande #formulaire #aide h2 {
	/*color:#FF9600;*/
	font: bold 12px Helvetica;
	padding-left: 30px;
	padding-top: 4px;
	background: url(img/abo-payant/ico-aide.png) no-repeat left;
}
.commande #formulaire #aide a {
	display: block;
	text-align: right;
	text-decoration: underline;
	padding: 5px 0; /*color:#FF9600;*/
}
.commande #formulaire #aide p a {
	display: inline;
}
.commande #formulaire #etapeTrois p strong {
	display: block;
	width: 184px;
	float: left;
}
.commande #formulaire #etapeTrois p.asterisque {
	color: #333;
	font-size: 11px;
	padding-left: 136px;
	width: auto;
}

.commande div.recap {
	width: 225px;
	min-height: 118px;
	padding: 10px 10px 20px;
	margin: 0 5px;
	border: 1px solid #DED6D0;
	background: #FFF;
	float: left;
	position: relative;
}
.commande div.recap h2 {
	font: 12px Arial;
	padding-bottom: 10px;
}
.commande div.recap p {
	line-height: 1.3em;
}
.commande div.recap p.facturation, .commande div.recap p.asterisques {
	bottom: 5px;
	position: absolute;
}

.commande div.form p strong {
	display: block;
	width: 120px;
	float: left;
}

.commande div.form div span img.err {
	width: 15px;
}

.commande div.form input {
	width: 200px;
}
.commande #logoff div.form input {
	width: auto;
}
.commande div.recap p.asterisques {
	font-size: 10px;
	font-style: italic;
	clear: left;
}
.commande div.recap a.modifier {
	position: absolute;
	bottom: 5px;
	right: 5px;
	padding: 0 2px;
	background: #F7F3F0;
	font: 10px Arial;
	border: 1px solid #DDD4CE;
	color: #706666;
	text-decoration: none;
}
.commande .modalContent div.recap a.modifier {
	top: 5px;
	bottom: inherit;
	padding:10px;
	
}


.commande div.recap a.choisir {
	width: 132px;
	height: 20px;
	position: absolute;
	bottom: 5px;
	right: 54px;
	padding: 0 2px; /* background:#F7F3F0; 	font:10px Arial; 	border:1px solid #DDD4CE; 	color:#706666; 	text-decoration:none;*/
	text-indent: -999em;
	background: url(img/abo-payant/bg-btnChoixAdd.png) no-repeat 0 0;
}

.modalContent div.recap #recap-btn{
	padding:10px 0px 15px;
}

.modalContent div.recap #recap-btn a{	
	padding:7px;	
	font-weight:bold;
}

.modalContent #recap-btn-ajout a.ajouter {
	background:url("img/abo-payant/sprite-btn.png") no-repeat scroll left -41px transparent;
	float:left;
	margin:7px;
	position:relative;
	padding:10px;
}

.modalContent #recap-btn-ajout a.annuler{
	margin:7px;
}

.modalContent #recap-btn-ajout a{
	text-decoration:none;
}
.modalContent #recap-btn-ajout a strong{
	color: #ff5500;
	font-size:15px;
}

.modalContent div.recap #recap-form-adresse h2{
	background:url("");
	color:#000;
	padding:0 5px 10px;
}

.modalContent div.recap #recap-form-adresse p{
	padding:0 5px 0px;
}


.commande #optinFacture {
	float: right;
	clear: both;
	margin: 5px;
}
.commande #optinFacture label, .commande #optinFacture input {
	float: left;
	padding: 0 2px;
}
.commande .recap .formTel strong {
	float: left;
	width: 100px;
	clear: left;
	padding: 3px 0 0px;
}
.commande .recap .formTel input {
	margin: 0 0 2px 3px;
	width: 100px;
}
.commande .recap .formTel input.btn {
	width: auto;
}
.commande #typeReglement, .commande #typeReglement span {
	clear: both;
}
.commande #typeReglement span {
	display: block;
}
.commande #typeReglement h2 {
	font: 12px Arial;
	padding-bottom: 2px;
}
.commande #typeReglement p {
	line-height: 1.7em;
}
.commande #typeReglement span.cb label {
	background: url(img/abo-payant/illus-type-cb.png) no-repeat right;
	height: 22px;
	padding-right: 72px;
}
.commande #typeReglement span label, .commande #typeReglement span input {
	float: left;
}
.commande #typeReglement span label {
	padding-top: 3px;
}
.commande #typeReglement span input {
	margin-top: 3px;
}

.commande #facture {
	margin-bottom: 10px;
}
.commande #facture table {
	background: #FFF;
	border-top: 1px solid #DADADA;
	border-left: 1px solid #DADADA;
}
.commande #facture th, .commande #facture td {
	vertical-align: top;
	text-align: center;
	border-bottom: 1px solid #DADADA;
	border-right: 1px solid #DADADA;
	padding: 10px;
}
.commande #facture td {
	text-align: right;
}
.commande #facture .offre {
	text-align: left;
}
.commande #facture td .cadeau {
	display: block;
	margin-top: 15px;
}
.commande #facture .recap {
	margin: 10px 20px 10px 0;
}
.commande #facture .total {
	float: right;
	padding: 0 0 20px;
	margin-right: 0;
}
.commande #facture .total h2 {
	padding: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #DADADA;
}
.commande #facture .total p {
	padding: 0 10px;
	text-align: right;
	line-height: 1.5em;
	clear: both;
}
.commande #facture .total p span {
	display: block;
	width: 144px;
	float: left;
}


.commande #highlightBon {
	margin-bottom: 15px;
}
.commande #highlightBon h2 {
	padding-bottom: 15px;
}
.commande #highlightBon ol {
	padding: 10px 0;
}
.commande #highlightBon li {
	background: url(img/abo-payant/li-avantage-liberte.gif) no-repeat left top;
	padding: 2px 0 5px 25px;
	position: relative;
}
.commande #highlightBon li span {
	display: block;
	width: 17px;
	height: 16px;
	left: 0;
	top: 1px;
	position: absolute;
	text-align: center;
	font-weight: bold;
	color: #FFF;
	float: left;
}
.commande#recapitulatif {
	margin-top: 20px;
}
.commande #optinCondition {
	text-align: center;
	padding: 5px 0;
}
.commande #optinCondition input {
	float: inherit;
}

.commande .conditions {
	width: 260px;
	border: 1px solid #a79b9b;
	padding: 8px;
	float: right;
}
.commande dl {
	padding-top: 10px;
	clear: left;
}
.commande dt {
	clear: left;
	margin-right: 4px;
}
.commande dt, .commande dd {
	float: left;
}

.commande .frais {
	font-weight: bold;
	width: 470px;
	margin: 0 auto;
}

#offreFidelite {
	position: relative;
	margin-bottom: 15px;
}
#offreFidelite .autresOffres {
	position: absolute;
	top: 14px;
	left: 370px;
}
#offreFidelite .autresOffres li {
	width: 180px;
}

.messages p {
	padding: 5px 0;
}

.changement #recapitulatif {
	width: 282px;
	float: left;
	background: #E3D9D0 none repeat scroll 0 0;
	border: 1px solid #DDD4CE;
}
.changement div.recap {
	margin-bottom: 10px;
}
.changement #formulaire {
	float: right;
	width: 506px;
}
.changement #formulaire .node {
	min-height: 488px;
}
.commande #formulaire div.btn {
	line-height: normal;
}

/* ModalPopup */
.modalPopup {
	width: 390px;
}

.modalPopup h2 {
	background: url(img/abo-payant/bg-header.gif) repeat-x left top;
	padding: 23px;
	position: relative;
}
.modalPopup h2 a {
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(img/abo-payant/bg-closePopup.gif) no-repeat top left;
	display: block;
	width: 12px;
	height: 12px;
	text-indent: -999em;
}
.modalPopup label {
	display: block;
	float: left;
	width: 120px;
	padding: 7px 0 0;
	margin: 0px 7px 0;
}
.modalPopup .node {
	border-color: #ddd4ce;
	background: #f7f3f0;
	padding: 0px 0px 10px;
}

.modalPopup p.info {
	/*padding: 20px 10px 0;*/
	padding: 7px 7px 7px;
	font-weight: bold;
}

.modalPopup #formulaire {
	border: 0;
	width: 370px !important;
	padding: 7px 0 0;
}
.commande .modalPopup #formulaire .form div {
	clear: both;
}
.commande #formulaire .form label {
	padding: 5px 5px 0 0;
}

#formulaire select {
	width: 215px;
}

#formulaire select.auto {
	width: auto !important;
}

.commande .modalPopup div.modalContent {
	margin: 18px auto;
	width: 260px;
}

.commande .modalPopup div.recap {
	float: none;
	margin: 0 auto 10px;
	clear: inherit;
}
.commande .modalPopup .adresse {
	padding: 10px;
}
.commande .modalPopup .adresse h3 {
	font-size: 1.2em;
}
.commande .modalPopup .adresse ul {
	padding: 5px 20px;
}
.commande .modalPopup .adresse li {
	padding: 2px 0;
}
.commande .modalPopup .adresse .btnPopup {
	width: 60px;
}

/* no commande adresse*/
.modalPopup .adresse {
	padding: 10px;
}

.modalPopup .adresse h3 {
	font-size: 1.2em;
}

.modalPopup .adresse ul {
	padding: 5px 20px;
}

.modalPopup .adresse li {
	padding: 2px 0;
}

.modalPopup .adresse .btnPopup {
	width: 60px;
}

.commande .modalPopup div.recap h2 {
	padding: 0 0 10px 0;
	background: none;
}

.commande .modalPopup .modalContent div.recap {
	margin-bottom: 10px;
}

.modalPopup .valider {
	width: 62px;
	height: 24px;
	text-indent: -999em;
	background: url(img/abo-payant/bg-btnPopup.png) no-repeat top left;
	float: left;
}

.modalPopup .annuler {
	width: 62px;
	height: 24px;
	text-indent: -999em;
	background: url(img/abo-payant/bg-btnPopup.png) no-repeat top right;
	float: left;
}

.commande .modalPopup .btnPopup {
	width: 124px;
	margin: 5px auto;
}
.commande .modalPopup .btnPopup a {
	width: 62px;
	height: 24px;
	text-indent: -999em;
	background: url(img/abo-payant/bg-btnPopup.png) no-repeat top left;
	float: left;
}
.commande .modalPopup .btnPopup a.annuler {
	background: url(img/abo-payant/bg-btnPopup.png) no-repeat top right;
}

/* =FOOTER */
#footer {
	margin: 20px 0 0;
}

#log h2 {
	color: #000;
	font-size: 20px;
	line-height: 2em;
}

#log div.log {
	float: left;
	width: 279px;
	padding: 0 80px 10px 0;
	margin: 10px 0;
	border-right: 1px solid #999;
	text-align: right;
}
#content.reabo #log div.log {
	border-right: 0;
}
#content.loginreabo #infosContent {
	width: auto;
}

#content.loginreabo .visuel img {
	margin-left: 60px;
}


#log .form div {
	padding: 3px 0;
}
#log div#nonMembre {
	padding-left: 80px;
	margin-left: -1px; /*border-left:1px solid #999;*/
	border-right: 0;
	text-align: left;
}

#membre ul.clear {
	width: 185px;
	height: 16px;
	float: right;
}

#membre li a {
	color: #000;
	font: 10px Verdana;
	padding: 0 0;
}
#membre li.help a {
	padding-right: 15px;
	border: 0;
	background: url(img/abo-gratuit/ico-help.gif) no-repeat right center;
}
#nonMembre div.btn strong {
	display: block;
}
#nonMembre div.btn {
	margin: 10px auto;
}
#membre div.btn {
	float: right;
	text-align: left;
	margin: 10px 2px;
}
#nonMembre p.conditions {
	text-align: center;
}
#nonMembre p.conditions {
	text-align: center;
}
#membre #optinRemember input {
	margin-right: 5px;
}


