/*
   widgets.css
   Common widgets reused throughout the whole site.
   
   Created by Ned Baldessin on 2008-08-24.
   Copyright 2008 Ned Baldessin. All rights reserved.
*/


/* =============== */
/* = Bloc Mobile = */
/* =============== */

/* 
	Used on the homepage, the list page, the branded list page.
	There's small variations for this block if it's placed on the homepage.
*/

table.mobile-list td {
	width: 126px;
	margin-right: 4px;
	vertical-align: top;
}

table.mobile-list h3 {
	width: 120px;
	min-height:25px;
	clear:left;
}
table.mobile-list tr.pic-row td div {
	position: relative;
	margin-top: 27px;
}

table.mobile-list ul.pictos {
	position: absolute;
	top: 5px;
	right: 3px;
}

/* I'm not namespacing ul.pictos because it's used
   elsewhere too (product page). */
ul.pictos li {
	display: block;
	text-indent: -9999px;
	width: 25px;
	height: 25px;
	margin-bottom: 4px;
	background: url('../images/imgsite/sprites-pictos-mobile.png') no-repeat;
}

ul.pictos li.apn { background-position:   0   0; }
ul.pictos li.mp3 { background-position: -24px 0; }
ul.pictos li.wifi { background-position: -48px 0; }
ul.pictos li.video { background-position: -72px 0; }
ul.pictos li.bt { background-position: -96px 0; }
ul.pictos li.msn { background-position: -120px 0; }
ul.pictos li.card { background-position: -144px 0; }
ul.pictos li.tactile { background-position: -168px 0; }
ul.pictos li.net3g { background-position: -192px 0; }


table.mobile-list h3 {
	margin-top: 0;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 0px;
}
table.mobile-list h3 a {
	font: bold 12px/13px Arial, sans-serif;
	/*font: bold 12px/14px Arial, sans-serif;*/
	color: #336699;
	text-decoration: none;
 
}

/* This only appears on the list page I think. */
table.mobile-list p.baseline {
	font-size: 11px;
	height: 26px;
	margin: 0 3px 5px 3px;
}

table.mobile-list tr.price-row td div {
	height: 15px;
	width: 120px;
	font-size: 11px;
	line-height: 15px;
	margin-top: 0;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 3px;
}

table.mobile-list tr.price-row del.slashed-price {
	font: bold 12px Arial, sans-serif;
	color: #333;
	text-decoration: line-through;
}

table.mobile-list tr.price-row span.price {
	font-size: 15px;
	font-weight: bold;
	color: #3399cc;
 
}

table.mobile-list a.select,
table.mobile-list a.compare {
	display: block;
	text-indent: -9999px;
	width: 126px;
	height: 33px;
}

table.mobile-list a.select { background: url('../images/imgsite/home/select.png') no-repeat;}
table.mobile-list a.compare { background: url('../images/imgsite/home/compare.png') no-repeat;}

table.mobile-list em.flag {
	display: block;
	text-indent: -9999px;
	position: absolute;
	top: 136px;
	right: 20px;
}

table.mobile-list em.flag.reduc-30 {
	height: 63px;
	width: 86px;
	background: url('../images/imgsite/reduc-30.png') no-repeat;
}

table.mobile-list em.flag.reduc-50 {
	background: url('../images/imgsite/reduc-50.png') no-repeat scroll top left;
	width: 92px;
	height: 69px;
}

table.mobile-list em.flag.reduc-pack-exclu {
	background: url('../images/imgsite/reduc-pack-exclu.png') no-repeat scroll top left;
	width: 125px;
	height: 51px;
}

/* ========================================== */
/* = Accordion : collapse and expand blocks = */
/* ========================================== */
.accordion_toggle {
	cursor: pointer;
}

.accordion_content {
	overflow: hidden;
}


/* ============================== */
/* = The Services sidebar block = */
/* ============================== */

#services {
	margin-top: 37px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #666666;
}


#services h4 {
	display: block;
	text-indent: -9999px;
	height: 56px;
	background: url('../images/imgsite/home/right-col-services.png') no-repeat;
}
/*Modif 06/04/09*/
#services a.linkRightCol {
	background:none;
	text-decoration:underline;
	font-weight:normal;
	text-align:left;
	height:auto;
}
/*Fin modif*/

#engagements a.red {
  
	font: bold 11px Arial, sans-serif;
	color: #3399CC;
	text-decoration: none;
	text-align:left;
	background: url('../images/imgsite/right-arrows.png') no-repeat center right;
	
}
#engagements strong {
	font-weight: bold;
	
}

#services a {
	display: block;
	background: url('../images/imgsite/home/bas_avantages.png') no-repeat;
	height: 21px;
	font: bold 11px Arial, sans-serif;
	color: #666666;
	text-decoration: none;
	line-height: 22px;
	text-align: right;
}


#services a span {
	display: block;
	padding-right: 22px;
	margin-right: 10px;
	background: url(../images/imgsite/right-arrows.png) no-repeat center right;
}

#services p {
	font-size: 12px;
	line-height: 16px;
	padding: 8px 15px 6px 15px;
	border-bottom: 1px solid #d9d9d9;
 
}

#right-col #services {
	background: url('../images/imgsite/home/right-col-engagements-bg.png') top left repeat-y;

	margin: 0px auto  0px auto;
	width: 197px;
}
/* ============================== */
/* = The Engagement sidebar block = */
/* ============================== */

#engagement {
	margin-top: 37px;
	background: url('../images/imgsite/home/right-col-engagements-bg.png') 102px 38px no-repeat;
}


#engagement h4 {
	display: block;
	text-indent: -9999px;
	height:38px;
	background: url('../images/imgsite/home/right-col-engagements.png') top left no-repeat;
}

#engagement a {
	display: block;
	background: url('../images/imgsite/home/right-col-bottom.png') no-repeat;
	height: 23px;
	font: bold 11px Arial, sans-serif;
	color: #3399CC;
	text-decoration: none;
	line-height: 22px;
	text-align: right;
}

#engagement a span {
	display: block;
	padding-right: 22px;
	margin-right: 10px;
	background: url(../images/imgsite/right-arrows.png) no-repeat center right;
}

#engagement p {
	font-size: 12px;
	line-height: 16px;
	width:158px;
	padding:8px 0px 8px 10px;	
	border-bottom: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
	border-left: 1px solid #d9d9d9;
}

/* ============================== */
/* = The Included sidebar block = */
/* ============================== */

#included {
	margin-top: 37px;
}


#included h4 {
	display: block;
	text-indent: -9999px;
	height: 56px;
	background: url('../images/imgsite/myPlan/bg-title-included.png') no-repeat;
}

#included p {
	font-size: 12px;
	line-height: 16px;
	padding: 8px 15px 6px 15px;
	border-bottom: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
	border-left: 1px solid #d9d9d9;
}

/* ============================== */
/* = The Help sidebar block = */
/* ============================== */

#help {
	height:260px; /*modif 06/04/09. Sinon 230*/
	margin: 12px 3px 0;
	background: url('../images/imgsite/account/bg-col-help.png') left bottom no-repeat;
}

#help h4 {
	display: block;
	text-indent: -9999px;
	height: 38px;
	margin-bottom:15px;
	background: url('../images/imgsite/account/bg-col-title-help.png') no-repeat;
}

#help p {
	padding-left:10px;
	/*padding-right:15px;*/
	font-size: 12px;
	line-height: 16px;
	text-align:center;
}
#help p .fixe{
	display:block;
	margin-bottom:5px;
	padding-left:25px;
	font-size:20px;
	font-weight:bold;
	color:#C00;	
	text-align:left;
	background: url('../images/imgsite/account/picto-tel-rouge.png') center left no-repeat;
}
#help p .price{
	color:#666;
	font-size:11px;
	font-style:italic;	
}
#help p.helpMobile{
	margin-top: 10px;
	border-top: 1px solid #d8d8d8;
	padding-top: 10px;
	padding-left: 0;
}
#help p .mobile{
	display:block;
	height:26px;
	line-height:26px;
	margin-left:40px;
	padding-left:30px;
	font-size:20px;
	font-weight:bold;
	color:#C00;	
	text-align:left;
	background: url('../images/imgsite/account/picto-mobile-rouge.png') center left no-repeat;
}
/* =============== */
/* = Breadcrumbs = */
/* =============== */

p#breadcrumbs {
	height: 35px;
	/*background: url('../images/imgsite/list/etape-3.png') no-repeat right center;*/
	margin: 0 3px;
	margin-bottom:10px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #3399cc;
	border-bottom-color: #d3d4d5;
}

p#breadcrumbs a.retour {
	font-size: 11px;
	height: 35px;
	line-height: 35px;
	color: #3399cc;
}


/* Etape choix mobile. */
p#breadcrumbs span.b-1-mobile,
p#breadcrumbs a.b-1-mobile,
p#breadcrumbs span.b-2-mobile,
p#breadcrumbs a.b-2-mobile {
	height: 35px;
	width: 135px;
	display: block;
	float: right;
	text-indent: -9999px;
}
p#breadcrumbs span.b-1-mobile,
p#breadcrumbs a.b-1-mobile {
	background: url('../images/imgsite/breadcrumbs/1-mobile.png') no-repeat;
}
p#breadcrumbs span.b-2-mobile,
p#breadcrumbs a.b-2-mobile {
	background: url('../images/imgsite/breadcrumbs/2-mobile.png') no-repeat;
}
p#breadcrumbs span.b-1-mobile,
p#breadcrumbs span.b-2-mobile { background-position: 0px -38px; }
p#breadcrumbs span.b-1-mobile.current,
p#breadcrumbs span.b-2-mobile.current { background-position: 0px -1px; }
p#breadcrumbs a.b-1-mobile,
p#breadcrumbs a.b-2-mobile { background-position: 0 -75px; }


/* Etape choix offre. */
p#breadcrumbs span.b-1-offre,
p#breadcrumbs a.b-1-offre,
p#breadcrumbs span.b-2-offre,
p#breadcrumbs a.b-2-offre {
	height: 35px;
	width: 131px;
	display: block;
	float: right;
	text-indent: -9999px;
}
p#breadcrumbs span.b-1-offre,
p#breadcrumbs a.b-1-offre {
	background: url('../images/imgsite/breadcrumbs/1-offre.png') no-repeat;
}
p#breadcrumbs span.b-2-offre,
p#breadcrumbs a.b-2-offre {
	background: url('../images/imgsite/breadcrumbs/2-offre.png') no-repeat;
}
p#breadcrumbs span.b-1-offre,
p#breadcrumbs span.b-2-offre { background-position: 0px -38px; }
p#breadcrumbs span.b-1-offre.current,
p#breadcrumbs span.b-2-offre.current { background-position: 0px -1px; }
p#breadcrumbs a.b-1-offre,
p#breadcrumbs a.b-2-offre { background-position: 0 -75px; }


/* Etape commande. */
p#breadcrumbs span.b-3-commander,
p#breadcrumbs a.b-3-commander {
	height: 35px;
	width: 86px;
	display: block;
	float: right;
	text-indent: -9999px;
	background: url('../images/imgsite/breadcrumbs/3-commander.png') no-repeat;
}
p#breadcrumbs span.b-3-commander { background-position: 0px -38px; }
p#breadcrumbs span.b-3-commander.current { background-position: 0px -1px; }
p#breadcrumbs a.b-3-commander { background-position: 0 -75px; }


/* ======================= */
/* = Imprimer cette page = */
/* ======================= */

a.print-page {
	display: block;
	text-indent: -9999px;
	background: url('../images/imgsite/bt-imprimer-cette-page.png') no-repeat scroll top left;
	width: 127px;
	height: 18px;
}

/* ================== */
/* = Bouton valider = */
/* ================== */

button.valider {
	background: url('../images/imgsite/bt-valider.png') no-repeat scroll top left;
	width: 82px;
	height: 24px;
	display: block;
	text-indent: -9999px;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

button.ok  {
	background: url('../images/imgsite/bt-ok.png') no-repeat scroll top left;
	width: 30px;
	height: 30px;
	display: block;
	text-indent: -9999px;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

/* =============================== */
/* = Drawer (tiroir comparateur) = */
/* =============================== */

#drawer-container {
	height: 330px; /* This is the ideal height. I'm adding some more because of the 'spring' JS effect. */
	height: 360px;
	width: 100%;
	position: fixed;
	bottom: -302px;
	z-index: 200;
}

#drawer {
	height: 330px;
	width: 1000px;
	margin: 0 auto;
	position: relative;
}

#drawer #drawer-tab {
	background: url('../images/imgsite/drawer/closed.png') no-repeat;
	background-position: -8px 0;
	height: 58px;
	position: relative;
}

#main div.drawer-clear-fix {
	height: 1px;
	clear: both;
	overflow: hidden;
}

#handle #drawer-count {
	position: absolute;
	top: 11px;
	left: 564px;
	font: normal 10px Arial, sans-serif;
	color: white;
}

.arrow {
	background: url('../images/imgsite/drawer/fleche-bas.png') no-repeat;
	width: 9px;
	height: 6px;
	position: absolute;

}

#arrow1 {
	top: 14px;
	left: 455px;
}

#arrow2 {
	top: 14px;
	left: 583px;
}

#close {
	position: absolute;
	top: 38px;
	right: 20px;
	background: url('../images/imgsite/drawer/vider.png') no-repeat;
	/*width: 169px;*/
	width: 20px;
	background-position: top right;
	height: 14px;
	outline: none;
}

#empty-and-close {
	position: absolute;
	top: 65px;
	right: 20px;
	width: 169px;
	height: 14px;
	outline: none;
	font: normal 11px Arial;
	text-align: right;
	color: #3399CC;
}

#compared-content {
	background: url('../images/imgsite/drawer/bg.png') repeat-y;
	background-position: -8px;
	padding: 0 10px;
	overflow: auto;
	height: 302px;
}

.drop-zone:first-child {
	margin-left: 65px;
}

.drop-zone {
	float: left;
	height: 148px;
	width: 117px;
	margin: 30px 65px 20px 0;
	text-align: center;
}

.drop-zone.state-normal {
	background: url('../images/imgsite/drawer/drop-zone.png') no-repeat;
	background-position: top left;
}

.drop-zone.state-hover {
	background-image: none;
	background-color: #ffff99;
}

#button-compare {
	display: block;
	background: url('../images/imgsite/drawer/button-compare.png') no-repeat;
	height: 37px;
	width: 134px;
	position: absolute;
	right: 20px;
	bottom: 10px;
}