/* STYLESHEET FILE DESCRIPTION: Generic styles, applied to all screens */

@import url("reset.css");


/* CUSTOM FONT-FACES
######################################### */

@font-face {
	font-family: 'BasefontRegular';
	src: url('../fonts/PtSans-Regular.ttf');
}

@font-face {
	font-family: 'BasefontBold';
	src: url('../fonts/PtSans-Bold.ttf');
}

@font-face {
	font-family: 'BasefontItalic';
	src: url('../fonts/PtSans-Italic.ttf');
}


/* INITIAL
######################################### */
body {
	font-family: BasefontRegular;
	font-size:20px;
	background-color: #000;
	color: #fff;
}

#screen {
	width: 1280px;
	height: 720px;
	background: url('../images/generic/background.jpg') no-repeat;
	overflow: hidden;
}

div {
	position: absolute;
}


/* MENU
######################################### */
#menu {
	height: 720px;
	background: url('../images/generic/opacity-b4.png');
	z-index: 10;
}

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

#screen.menu-full #menu,
#screen.menu-full #menu .item {width: 265px;}
#screen.menu-compact #menu,
#screen.menu-compact #menu .item {width: 80px;}

#screen.menu-full #menu-separator {width: 225px;}
#screen.menu-compact #menu-separator {width: 40px;}

#screen.menu-compact #menu .item .title {opacity: 0}

#screen.menu-full #menu-shade {display: block;}

#menu-logo {
	width: 230px;
	height: 49px;
	top: 20px;
	left: 20px;
	background: url('../images/generic/menu-logo.png') no-repeat;
}

#menu-logo .logo {
	margin: 20px 0 0 51px;
	font-size: 28px;
	font-family: BasefontBold;
	opacity: 0.6;
	display: none;
}

.menu-full #menu-logo .logo {display: block;}

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

#menu .item {
	height: 40px;
	background-image: url('../images/generic/menu-icons.png');
	background-repeat: no-repeat;
}

#menu .item .title {
	left: 58px;
	font-family: BasefontRegular;
	font-size: 24px;
	line-height: 40px;
	white-space: nowrap;
	position: absolute;
	opacity: 1;
}

#menu-focus {
	width: 265px;
	height: 40px;
	display: none;
}

.menu-full #menu-focus {display: block;}


#menu-focus.menu-tv,
#menu-tv {top: 105px;}
#menu-focus.menu-movies,
#menu-movies {top: 145px;}
#menu-focus.menu-tvshows,
#menu-tvshows,
#menu-focus.menu-billing,
#menu-billing {top: 185px; opacity: 0.3;}
#menu-focus.menu-separator,
#menu-separator {top: 245px;}
#menu-focus.menu-settings,
#menu-settings {top: 265px;}
#menu-focus.menu-billing,
#menu-billing {top: 305px;}
#menu-focus.menu-help,
#menu-help {top: 345px; opacity: 0.3;}

#menu-tv,
#menu-tv.i-selected.i-focused {background-position: 29px -8px;}
#menu-movies,
#menu-movies.i-selected.i-focused {background-position: 28px -58px;}
#menu-tvshows,
#menu-tvshows.i-selected.i-focused {background-position: 28px -106px;}
#menu-search,
#menu-search.i-selected.i-focused {background-position: 28px -157px;}
#menu-settings,
#menu-settings.i-selected.i-focused {background-position: 29px -207px;}
#menu-billing,
#menu-billing.i-selected.i-focused {background-position: 29px -257px;}
#menu-help,
#menu-help.i-selected.i-focused {background-position: 29px -307px;}

#menu-tv.i-selected {background-position: -448px -8px;}
#menu-movies.i-selected {background-position: -449px -58px;}
#menu-tvshows.i-selected {background-position: -449px -106px;}
#menu-search.i-selected {background-position: -449px -157px;}
#menu-settings.i-selected {background-position: -448px -207px;}
#menu-billing.i-selected {background-position: -448px -257px;}
#menu-help.i-selected {background-position: -448px -307px;}

/* Full menu screen shade */
#menu-shade {
	width: 479px;
	height: 720px;
	left: 801px;
	background: url('../images/generic/menu-shade.png') repeat-y;
	display: none;
	z-index: 10;
}


/* Balance */
#menu-contract,
#menu-balance {display: none}

.menu-full #menu-contract,
.menu-full #menu-balance {display: block}


#menu-contract,
#menu-balance,
#billing-menu-contract,
#billing-menu-balance {
	top: 622px;	
	height: 70px;
}

#menu-contract,
#billing-menu-contract {left: 24px}
#menu-balance,
#billing-menu-balance {left: 160px}

#menu-contract,
#billing-menu-contract {
	width: 120px;
	border-right: 1px solid rgba(255,255,255,0.7);
}

#menu-contract .title,
#menu-balance .title,
#billing-menu-contract .title,
#billing-menu-balance .title {
	padding-top: 6px;
	font-size: 20px;
}

#menu-contract .id,
#menu-balance .balance,
#billing-menu-contract .id,
#billing-menu-balance .balance {
	margin-top: 35px;
	font-size: 26px;
}

#menu-balance .balance,
#billing-menu-balance .balance {
	white-space: nowrap;
}

#menu-balance .balance.plus,
#billing-menu-balance .balance.plus {color: #8cc63f;}
#menu-balance .balance.minus,
#billing-menu-balance .balance.minus {color: #fbb03b;}

#menu-balance .currency,
#billing-menu-balance .currency {
	margin-left: 4px;
	display: inline-block;
}

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

/* No money */
#menu-nomoney {display: none;}
.nomoney #menu-nomoney {display: block;}
.trial.nomoney #menu-nomoney {display: none;}

.menu-full #menu-nomoney {
	width: 225px;
	height: 125px;
	top: 445px;
	left: 20px;
	background: url('../images/generic/menu-nomoney.png');
	color: #000;
	border-radius: 4px;
}

.menu-compact #menu-nomoney {
	width: 38px;
	height: 38px;
	top: 445px;
	left: 21px;
	background: url('../images/generic/menu-nomoney-compact.png');
	border-radius: 4px;
}

#menu-nomoney .text,
#menu-nomoney .action {position: relative; display: none;}

.menu-full #menu-nomoney .text,
.menu-full #menu-nomoney .action {display: block;}


#menu-nomoney .text {
	padding: 10px;
	font-size: 20px;
	line-height: 25px;
	
}

#menu-nomoney .action {
	padding-left: 10px;
	font-size: 20px;
	font-family: BasefontBold;
	text-transform: uppercase;
}


/* Trial */
#menu-trial {display: none;}
.trial #menu-trial {display: block;}

.menu-full #menu-trial {
	width: 225px;
	height: 155px;
	top: 445px;
	left: 20px;
	background: url('../images/generic/menu-nomoney.png');
	color: #000;
	border-radius: 4px;
}

.menu-compact #menu-trial {
	width: 38px;
	height: 38px;
	top: 445px;
	left: 21px;
	background: url('../images/generic/menu-trial-compact.png');
	border-radius: 4px;
}

#menu-trial .text,
#menu-trial .action,
#menu-trial .subscribe {position: relative; display: none;}

.menu-full #menu-trial .text,
.menu-full #menu-trial .action,
.menu-full #menu-trial .subscribe {display: block;}


#menu-trial .action {
	padding: 10px 0 7px 10px;
	padding-left: 10px;
	font-size: 20px;
	font-family: BasefontBold;
	text-transform: uppercase;
}

#menu-trial .text,
#menu-trial .subscribe {
	padding-left: 10px;
	font-size: 20px;
	line-height: 25px;
	position: relative;
}

#menu-trial .subscribe {
	margin-top: 5px;
	padding-top: 7px;
	border-top: 1px solid #000;
}

/* Aloading */
#menu-aloading {
	width: 39px;
	height: 39px;
	top: 660px;
	left: 20px;
	background: url('../images/generic/aloading.png') no-repeat;
	opacity: 0;
}

.menu-compact.aloading #menu-aloading {
	opacity: 1;
	animation:spin 1.5s infinite linear;
	-moz-animation:spin 1.5s infinite linear;
	-webkit-animation:spin 1.5s infinite linear;
}


/* SHADOWS
######################################### */
.g-shadow-left,
.g-shadow-right,
.g-shadow-bottom {
	display: none;
	z-index: 50;
}

.g-shadow-left,
.g-shadow-right {
	width: 20px;
	height: 720px;
}

.g-shadow-bottom {
	width: 1080px;
	height: 20px;
}


.b-focused .g-shadow-left,
.b-focused .g-shadow-right {display: block;}


.g-shadow-left {background: url('../images/generic/shadow-left.png') no-repeat;}
.g-shadow-right {background: url('../images/generic/shadow-right.png') no-repeat;}
.g-shadow-bottom {background: url('../images/generic/shadow-bottom.png') no-repeat;}


/* BUTTONS
######################################### */
.g-button,
.g-button span {
	height: 34px;
	display: block;
}

.g-button {
	padding: 0 10px 0 10px;
	margin-right: 10px;
	background-color: #fff;
	color: #3a356c;
	border-radius: 4px;
	display: inline-block;
	position: relative;
}

.g-button span {
	font-family: BasefontRegular;
	font-size: 19px;
	line-height: 34px;
}

.g-button.i-focused {
	color: #fff;
}

/* Big */
.g-button.big,
.g-button.big span {
	height: 44px;
	display: block;
}

.g-button.big {
	display: inline-block;
}

.g-button.big span {
	font-size: 22px;
	line-height: 44px;
}

/* With icon */
.g-button.ok,
.g-button.cancel {
	padding-left: 36px;
	background-repeat: no-repeat;
}

.g-button.big.ok,
.g-button.big.cancel {
	padding-left: 46px;
	background-repeat: no-repeat;
}

.g-button.i-focused.ok,
.g-button.i-focused.cancel {background-position: 0 -34px;}

.g-button.i-focused.big.ok,
.g-button.i-focused.big.cancel {background-position: 0 -44px;}

.g-button.ok {background-image: url('../images/generic/button-icon-ok.png');}
.g-button.cancel {background-image: url('../images/generic/button-icon-cancel.png');}

.g-button.big.ok {background-image: url('../images/generic/button-big-icon-ok.png');}
.g-button.big.cancel {background-image: url('../images/generic/button-big-icon-cancel.png');}



/* LOADINGS
######################################### */
#screen.loading-tv #loading-section,
#screen.loading-movies #loading-section,
#screen.loading-tvshows #loading-section,
#screen.loading-search #loading-section,
#screen.loading-settings #loading-section,
#screen.loading-billing #loading-section,
#screen.loading-help #loading-section,
#screen.loading-startscreen #loading-section,
#screen.loading #loading-section {display: block;}

#loading-section {
	width: 1280px;
	height: 720px;
	display: none;
}

#loading-section > span {
	width: 1280px;
	top: 380px;
	text-align: center;
	font-size: 56px;
	display: block;
	position: absolute;
}

#loading-section .spinner {
	width: 64px;
	height: 64px;
	left: 608px;
	top: 540px;
	background: url('../images/generic/loading-section.png') no-repeat;
}

#screen.loading #loading-section > span {text-indent: -9000px;}

#screen.loading #loading-section .spinner {top: 330px;}

/* Tv */
#screen.loading-tv #loading-section {background: url('../images/sections/tv/loading-tv.png') no-repeat 50% 40%;}

#screen.loading-tv #legend,
#screen.loading-tv #tv-groups,
#screen.loading-tv #tv-list,
#screen.loading-tv #tv-channel {display: none;}

/* Movies */
#screen.loading-movies #loading-section {background: url('../images/sections/movies/loading-movies.png') no-repeat 50% 40%;}

/* Shows */
#screen.loading-shows #loading-section {background: url('../images/sections/shows/loading-shows.png') no-repeat 50% 40%;}

/* Search */
#screen.loading-search #loading-section {background: url('../images/sections/search/loading-search.png') no-repeat 50% 40%;}

/* Settings */
#screen.loading-settings #loading-section {background: url('../images/sections/settings/loading-settings.png') no-repeat 50% 40%;}

/* Billing */
#screen.loading-billing #loading-section {background: url('../images/sections/billing/loading-billing.png') no-repeat 50% 40%;}

/* Help */
#screen.loading-help #loading-section {background: url('../images/sections/help/loading-help.png') no-repeat 50% 40%;}

/* Start screen */
#screen.loading-startscreen #loading-section {background: url('../images/sections/startscreen/loading-startscreen.png') no-repeat 50% 40%;}



/* SCROLL
######################################### */
.scroll {
	width: 4px;
	background: url('../images/generic/opacity-w2.png');
	display: none;
}

.b-focused .scroll {display: block;}

.scroller {
	width: 4px;
	height: 80px;
	background-color: #31b2ff;
	opacity: 0.8;
}


/* LEGEND
######################################### */
#legend {
	width: 1280px;
	top: 684px;
	text-align: right;
	z-index: 80;
}

#legend .item {
	height: 25px;
	margin-right: 20px;
	padding-left: 30px;
	font-size: 21px;
	background-image: url('../images/generic/legend.png');
	background-repeat: no-repeat;
	white-space: nowrap;
	float: right;
	display: inline-block;
	position: relative;
}

.g-legend .item {
	height: 25px;
	margin-right: 20px;
	padding-left: 30px;
	font-size: 21px;
	background-image: url('../images/generic/legend.png');
	background-repeat: no-repeat;
	white-space: nowrap;
	float: right;
	display: inline-block;
	position: relative;
}

#legend .back, .g-legend .back {background-position: 0 -16px; padding-left: 23px;}
#legend .enter, .g-legend .enter {background-position: 0 -65px; padding-left: 28px;}
#legend .red, .g-legend .red {background-position: 0 -115px;}
#legend .info, .g-legend .info {background-position: 0 -465px; padding-left: 18px;}
#legend .play, .g-legend .play {background-position: 0 -514px; padding-left: 18px;}
#legend .exit, .g-legend .exit {background-position: 0 -613px; padding-left: 26px;}

#legend .playcontrol, .g-legend .playcontrol {width: 131px; background-position: 0 -680px;} 


/* MODAL
######################################### */
.g-modal {
	width: 1280px;
	height: 720px;
	background: url('../images/generic/opacity-u8.png');
	position: absolute;
	z-index: 99999;
	overflow: hidden;
	display: table;
}

.g-modal .wrapper,
.g-modal .window,
.g-modal .container,
.g-modal .content,
.g-modal .actions,
.g-modal .actions div {
	position: relative;
}

.g-modal .wrapper {
	width: 1280px;
	text-align: center;
	display: table-cell; 
	vertical-align: middle;
}

.g-modal .window {
	background: url('../images/generic/opacity-b9.png');
	border-radius: 8px;
	color: #fff;
	border: 2px solid rgba(255,255,255,0.4);
	display: inline-block;
}

.g-modal .container {
	margin: 1px 0 1px 1px;
	padding-left: 105px;
	background: url('../images/generic/window-icon-bg.png') repeat-y;
	border-radius: 6px;
}

.g-modal .icon {
	width: 56px;
	height: 56px;
	margin: 15px 0 0 -90px;	
}

.g-modal.question .icon {background: url('../images/generic/window-icon-question.png') no-repeat 50% 50%;}
.g-modal.warning .icon {background: url('../images/generic/window-icon-warning.png') no-repeat 50% 50%;}

.g-modal .content {
	padding: 15px 15px 15px 0;
}

.g-modal .content p {
	font-size: 20px;
	line-height: 26px;
}

.g-modal .content .intro {
	margin-bottom: 15px;
	font-size: 24px;
	line-height: 32px;
}

.g-modal .actions {
	height: 50px;
	margin-top: 10px;
	margin-right: 5px;
}

.g-modal .actions .extra {float: left;}
.g-modal .actions .yesno {float: right;}


/* Exit window */
#modal-exit .window {
	width: 500px;
}

.sdkv2 #modal-exit .window {margin-top: 300px;}


/* HELP
######################################### */
.g-help,
.g-help .wrapper {
	width: 1280px;
	height: 720px;
}

.g-help {
	background: url('../images/generic/opacity-b6.png');
	z-index: 999;
	display: none;
}

#help-tv .wrapper {background: url('../images/sections/help/tv.png') no-repeat;}


/* FORM
######################################### */
.g-form .label {
	font-size: 21px;
	line-height: 38px;
	white-space: nowrap;
}

.g-form > .error {display: none;}
.g-form.error > .error {display: block;}

.g-form > .error {
	width: 300px;
	text-align: right;
	color: #fbb03b;
	font-size: 19px;
	font-family: BasefontBold;
}

.g-form.error .textinput,
.g-form.error .select {border-color: #fbb03b; text-indent: -9000px;} 

.g-form.error .select {background: none;}

.g-form .textinput,
.g-form .select {
	height: 30px;
	padding-left: 4px;
	background: none;
	border: 2px solid rgba(255,255,255,0.8);
	font-size: 20px;
	line-height: 30px;
	color: #fff;
}

.g-form .textinput .cursor {
	height: 25px;
	margin-top: 3px;
	border-right: 2px solid #fac417;
	display: inline-block;
	position: absolute;
	
	-webkit-animation: blink 1s linear 0s infinite;
	-moz-animation: blink 1s linear 0s infinite;
	animation: blink 1s linear 0s infinite;
}

@-webkit-keyframes blink {
  0%   { border-color: rgba(250, 196, 23, 1.0) }
  20%  { border-color: rgba(250, 196, 23, 0.0) }
  40%  { border-color: rgba(250, 196, 23, 0.0) }
  60%  { border-color: rgba(250, 196, 23, 1.0) }
  99%  { border-color: rgba(250, 196, 23, 1.0) }
} 

@-moz-keyframes blink {
  0%   { border-color: rgba(250, 196, 23, 1.0) }
  20%  { border-color: rgba(250, 196, 23, 0.0) }
  40%  { border-color: rgba(250, 196, 23, 0.0) }
  60%  { border-color: rgba(250, 196, 23, 1.0) }
  99%  { border-color: rgba(250, 196, 23, 1.0) }
} 

.g-form .checkbox {
	width: 20px;
	height: 20px;
	margin: 5px 0 0 5px;
	background: none;
	border: 2px solid rgba(255,255,255,0.8);
	font-size: 20px;
	line-height: 30px;
	color: #fff;
}

.g-form .checkbox .check {
	width: 16px;
	height: 13px;
	margin: 4px 0 0 2px;
	background: url('../images/generic/form-checkbox.png') no-repeat;
	display: none
}

.g-form.checked .checkbox .check {display: block;}

.g-form .radio {
	width: 24px;
	height: 24px;
	margin: 5px 0 0 5px;
	background: url('../images/generic/form-radio.png') no-repeat;
	font-size: 20px;
	line-height: 30px;
	color: #fff;
}

.g-form.checked .radio {background-position: 0 -50px;}


.g-form .select {
	background: url('../images/generic/form-select.png') no-repeat top right;
}

.g-form.selectmenu {
	background: url('../images/generic/opacity-u95.png');
	border: 2px solid #fff;
	display: none;
	z-index: 999;
}

.g-form.selectmenu .item,
.g-form .g-focusdiv {
	height: 36px;
	left: 1px;
}

.g-form.selectmenu .item {
	padding-left: 10px;
	line-height: 38px;
	overflow: hidden;
}

.g-form.selectmenu .item:last-child .border {border: none;}

.g-form.selectmenu .arrow-up,
.g-form.selectmenu .arrow-down {
	height: 20px;
	background: url('../images/generic/selectmenu-arrows.png') no-repeat;
}

.g-form.selectmenu .arrow-up {background-position: 50% 1px;}
.g-form.selectmenu .arrow-down {background-position: 50% -21px;}


/* STATES
######################################### */

/* Focused block */
.b-focused {background: url('../images/generic/opacity-b5.png') !important;}

/* Focused item */
.b-focused .i-focused,
.g-button.i-focused,
#kb .function.i-focused {background-color: #2a93d6;}

/* Selected item */
.i-selected {color: #0ab2ff;}
/*.i-selected {background: rgba(42, 147, 214, 0.4);}*/
.i-selected.i-focused {color: #fff; background-color: none !important;}