/* STYLESHEET FILE DESCRIPTION: Styles for billing screen */

/* BILLING MENU
######################################### */
#billing-menu {
	width: 290px;
	height: 720px;
	left: 80px;
	background: url('../images/generic/opacity-b3.png');
}

#billing-menu-shadow-left {left: -20px;}
#billing-menu-shadow-right {left: 290px;}


#screen.menu-full #billing-menu {left: 265px;}

#billing-menu-title {
	top: 35px;
	left: 20px;
	font-family: BasefontRegular;
	font-size: 38px;
}

#billing-menu .item {
	height: 40px;
	width: 250px;
	padding-left: 30px;
	font-family: BasefontRegular;
	font-size: 23px;
	line-height: 40px;
}

#billing-menu .submenu {
	padding-left: 60px;
	background: url('../images/sections/billing/submenu.png') 36px 18px no-repeat;
}

#billing-menu-focus {
	width: 290px;
	height: 40px;
}

#billing-menu-1,
#billing-menu-focus.billing-menu-1 {top: 100px;}
#billing-menu-2,
#billing-menu-focus.billing-menu-2 {top: 140px;}
#billing-menu-3,
#billing-menu-focus.billing-menu-3 {top: 180px;}
#billing-menu-4,
#billing-menu-focus.billing-menu-4 {top: 220px;}
#billing-menu-separator {top: 280px;}
#billing-menu-5,
#billing-menu-focus.billing-menu-5 {top: 300px;}

#billing-menu-separator {
	height: 1px;
	width: 250px;
	left: 20px;
	background: url('../images/generic/opacity-w7.png');
}

#billing-menu-contract,
#billing-menu-balance {
	top: 614px;	
}

.menu-full #billing-menu-contract,
.menu-full #billing-menu-balance {display: none;}

#billing-menu-contract .id,
#billing-menu-balance .balance {
	font-size: 31px;
}

#billing-menu-balance .currency b {
	height: 29px;
	margin: -1px 0 0 8px;
}


/* GENERIC
######################################### */
#billing-intro,
#billing-paybyterm,
#billing-paybycard,
#billing-terminals {
	width: 910px;
	height: 720px;
	left: 370px;
	background: url('../images/generic/opacity-b4.png');
	display: none;
}

#billing-intro.b-shown,
#billing-paybyterm.b-shown,
#billing-paybycard.b-shown,
#billing-terminals.b-shown {display: block;}

#billing-intro-shadow-left,
#billing-paybyterm-shadow-left,
#billing-paybycard-shadow-left,
#billing-terminals-shadow-left {left: -20px;}

#screen.menu-full #billing-intro,
#screen.menu-full #billing-paybyterm,
#screen.menu-full #billing-paybycard,
#screen.menu-full #billing-terminals {left: 555px;}

#billing-intro-title,
#billing-paybyterm-title,
#billing-paybycard-title,
#billing-terminals-title {
	top: 38px;
	left: 30px;
	font-family: BasefontRegular;
	font-size: 34px;
}

#billing-intro-text,
#billing-paybyterm-text,
#billing-paybycard-text {
	top: 100px;
	left: 30px;
	width: 550px;
}

#billing-intro-text > p,
#billing-paybyterm-text p,
#billing-paybycard-text p {
	margin-bottom: 20px;
	font-size: 21px;
	line-height: 28px;
}


/* INTRO
######################################### */
#billing-intro-text-trial {
	width: 790px;
	margin-bottom: 25px;
	margin-left: -10px;
	padding: 15px 15px 5px 65px;
	background: url('../images/sections/billing/intro-trial.png') #fbc616 no-repeat;
	color: #000;
	border-radius: 6px;
	position: relative;
	display: none;
}

#billing-intro-text-trial .action {
	text-transform: uppercase;
	font-family: BasefontBold;
}

#billing-intro-text-trial p {
	padding-bottom:8px;
	font-size: 20px;
	line-height: 26px;
}

.trial #billing-intro-text-trial {display: block;}

#billing-intro-price {
	margin-top: 20px;
	font-size: 26px;
	text-align: right;
	position: relative;
}

#billing-intro-price .price {
	font-size: 46px;
	color: #8cc63f;
}

#billing-intro-price .price .currency {
	margin-left: 4px;
	display: inline-block;
}

#billing-intro-price .price .currency b {
	height: 41px;
	margin: 0 0 0 12px;
	border-left: 3px solid;
	position: absolute;
}

#billing-intro-price .permonth {
	font-size: 26px;
	color: #8cc63f;
}

#billing-intro-price .exrate {
	margin-top: 10px;
	border-radius: 3px;
	font-size: 20px;
	text-align: right;
	position: relative;
}

#billing-intro-price .exrate .currency {
	margin-left: 4px;
	display: inline-block;
}

#billing-intro-price .exrate .currency b {
	height: 20px;
	margin: -1px 0 0 5px;
	border-left: 2px solid;
	position: absolute;
}

#billing-intro-meter {
	width: 200px;
	height: 476px;
	top: 60px;
	left: 645px;
	background: url('../images/sections/billing/intro-meter.png') no-repeat;
}

.trial #billing-intro-meter {
	top: 270px;
}


/* PAYMENT METHODS
######################################### */

#billing-paybyterm-text li,
#billing-paybycard-text li {
	margin-bottom: 20px;
	margin-left: 40px;
	font-size: 21px;
	line-height: 28px;
}

#billing-paybyterm-text li .step,
#billing-paybycard-text li .step {
	margin-top: 2px;
	margin-left: -30px;
	font-size: 42px;
	opacity: 0.5;
	position: absolute;
}

#billing-paybyterm-text li strong,
#billing-paybycard-text li strong {
	font-family: BasefontBold;
}

/* Pay by terminal */
#billing-paybyterm-paylogos {
	width: 539px;
	height: 66px;
	top: 570px;
	left: 40px;
	background: url('../images/sections/billing/paymethod-terminallogos.png') no-repeat;
}

#billing-paybyterm-terminal {
	width: 313px;
	height: 670px;
	top: 49px;
	left: 568px;
	background: url('../images/sections/billing/paymethod-terminal.png') no-repeat;
}

#billing-paybyterm-button {
	top: 466px;
	left: 40px;
}

/* Pay by card */
#billing-paybycard-paylogos {
	width: 469px;
	height: 82px;
	top: 550px;
	left: 60px;
	background: url('../images/sections/billing/paymenthod-cardlogos.png') no-repeat;
}

#billing-paybycard-cards {
	width: 230px;
	height: 264px;
	top: 120px;
	left: 600px;
	background: url('../images/sections/billing/paymethod-cards.png') no-repeat;
}


/* TERMINALS
######################################### */
#billing-terminals-text {
	width: 880px;
	height: 570px;
	top: 100px;
	left: 30px;
	overflow: hidden;
}

#billing-terminals-text li {
	margin-bottom: 20px;
	font-size: 21px;
}

#billing-terminals-text em {
	opacity: 0.7;
}

#billing-terminals-up,
#billing-terminals-down {
	width: 910px;
	height: 20px;
	background-image: url('../images/generic/list-arrows.png');
	background-repeat: no-repeat;
	background-position: 50% 0;
	display: none;
}

#billing-terminals-up {top: 15px;}
#billing-terminals-down {top: 690px; background-position: 50% -20px;}

#billing-terminals.b-focused #billing-terminals-up,
#billing-terminals.b-focused #billing-terminals-down {display: block;}

#billing-terminals-scroll {
	height: 620px;
	top: 50px;
	left: 880px;
	display: block;
}

/* No terminals */
#billing-terminals-noprogramme {
	width: 880px;
	height: 570px;
	top: 100px;
	text-align: center;
	display: none;
}

.noterminals #billing-terminals-noprogramme {display: table;}

#billing-terminals-noprogramme span {
	width: 880px;
	text-align: center;
	font-size: 21px;
	line-height: 28px;
	display: table-cell;
	vertical-align: middle;
}

.noterminals #billing-terminals-up,
.noterminals #billing-terminals-down,
.noterminals #billing-terminals-text {display: none !important;}

.pip #tv-channel-noprogramme {
	top: 510px;
	height: 150px;
	line-height: 150px;
}


/* PAYMENT HISTORY
######################################### */
#billing-history {
	left: 370px;
	display: none;
}
#billing-history.b-shown {display: block;}

#screen.menu-full #billing-history {left: 555px;}


/* Month list */
#billing-history-month {
	width: 210px;
	height: 720px;
	background: url('../images/generic/opacity-b4.png');
}

#billing-history-month-title {
	top: 38px;
	left: 20px;
	font-family: BasefontRegular;
	font-size: 34px;
}


#billing-history-month-shadow-left {left: -20px;}
#billing-history-month-shadow-right {left: 210px;}

#billing-history-month-focus {
	width: 210px;
	height: 40px;
}

#billing-history-month .item {
	width: 210px;
	height: 40px;
	font-family: BasefontRegular;
	overflow: hidden;
}

#billing-history-month .title {
	left: 20px;
	font-size: 24px;
	line-height: 40px;
	white-space: nowrap;
}

#billing-history-month .title span {
	opacity: 0.7;
}

#billing-history-month .border {
	width: 210px;
	height: 1px;
	margin-top: 39px;
	background: url('../images/generic/opacity-w1.png');
}


#billing-history-month-1,
#billing-history-month-focus.billing-history-month-1 {top: 100px;}
#billing-history-month-2,
#billing-history-month-focus.billing-history-month-2 {top: 140px;}
#billing-history-month-3,
#billing-history-month-focus.billing-history-month-3 {top: 180px;}


#billing-history-month-3 .border {display: none;}


/* Table view */
#billing-history-table {
	width: 700px;
	height: 720px;
	left: 210px;
	background: url('../images/generic/opacity-b3.png');
}

#billing-history-table.b-shown {display: block;}

#billing-history-table-shadow-left {left: -20px;}


#billing-history-table-up,
#billing-history-table-down {
	width: 700px;
	height: 20px;
	background-image: url('../images/generic/list-arrows.png');
	background-repeat: no-repeat;
	background-position: 50% 0;
	display: none;
}

#billing-history-table-up {top: 15px;}
#billing-history-table-down {top: 690px; background-position: 50% -20px;}

#billing-history-table.b-focused #billing-history-table-up,
#billing-history-table.b-focused #billing-history-table-down {display: block;}

#billing-history-table-scroll {
	height: 620px;
	top: 50px;
	left: 670px;
	display: block;
}

#billing-history-table-th {
	top: 50px;
	left: 30px;
	white-space: nowrap;
	font-size: 19px;
	text-transform: uppercase;
	font-family: BasefontBold;
	opacity: 0.7;
}

#billing-history-table-th .sum {margin-left: 196px;}
#billing-history-table-th .comment {margin-left: 278px;}

#billing-history-table .item {
	width: 630px;
	height: 60px;
	margin-left: 20px;
}

#billing-history-table .item .date {
	margin-left: 10px;
	margin-top: 20px;
	font-size: 21px;
}

#billing-history-table .item .sum {
	width: 85px;
	margin-left: 185px;
	margin-top: 16px;
	font-size: 26px;
	text-align: right;
}

#billing-history-table .plus .sum {color: #8cc63f;}
#billing-history-table .minus .sum {color: #fbb03b;}

#billing-history-table .currency {
	margin-left: 4px;
	display: inline-block;
}

#billing-history-table .currency b {
	height: 26px;
	margin: -1px 0 0 6px;
	border-left: 2px solid;
	position: absolute;
}


#billing-history-table .item .comment {
	width: 330px;
	height: 60px;
	margin-left: 290px;
	margin-top: 4px;
	font-size: 19px;
	line-height: 24px;
	overflow: hidden;
}

#billing-history-table .border {
	width: 630px;
	height: 1px;
	margin-top: 59px;
	background: url('../images/generic/opacity-w3.png');
}

#billing-history-table-1 {top: 80px;}
#billing-history-table-2 {top: 140px;}
#billing-history-table-3 {top: 200px;}
#billing-history-table-4 {top: 260px;}
#billing-history-table-5 {top: 320px;}
#billing-history-table-6 {top: 380px;}
#billing-history-table-7 {top: 440px;}
#billing-history-table-8 {top: 500px;}
#billing-history-table-9 {top: 560px;}
#billing-history-table-10 {top: 620px;}

#billing-history-table-10 .border {display: none;}


/* No history */
#billing-history-nohistory {
	width: 910px;
	height: 600px;
	top: 80px;
	text-align: center;
	line-height: 600px;
	font-size: 21px;
	display: none;
}

.nohistory #billing-history-nohistory {display: block;}

.nohistory #billing-history-month {width: 910px;}

.nohistory #billing-history-month-focus,
.nohistory #billing-history-month .item,
.nohistory #billing-history-table {display: none !important;}