html,body {
overflow: hidden;
height:100%;
}
.main-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.main-wrapper {
position: relative;
width: 1280px;
height: 720px;
}
body{
background : rgba(0,0,0,1);
color : #000;
font-size : 30px;
margin : auto;
overflow : hidden;
padding : 0;
-webkit-user-select : none;
-o-user-select : none;
}
.container{
height : 100%;
position : absolute;
opacity : 0;
left : 0;
top : 0;
overflow : hidden;
width : 100%;
}
.screen-mask {
font-size : 18px;
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
z-index : 5;
color : #fff;
}
.breadcrumbs{
background : rgb(50,75,75);
border : 1px dotted rgb(100,150,150);
border-radius : 10px;
bottom : 0;
color : #fff;
display : none;
height : 30px;
left : 0;
margin : auto;
padding : 10px;
position : absolute;
right : 0;
text-align : center;
top : 0;
width : 50%;
z-index : 10;
}
.header-container{
//background : url(/image/application/grid-bg-03.png) center no-repeat;
background-position : center 102px;
left : 0;
right : 0;
height : 109px;
margin : auto;
position : absolute;
top : 0;
width : 720px;
z-index : 10;
}
.header-container .client-logo{
text-align : center;
height : 100px;
}
.header-container .guest-info{
background : url(/image/application/grid-bg-02.png) center no-repeat;
height : 20px;
margin-top : 7px;
color : #FFF;
font-size : 18px;
padding : 10px;
text-align : center;
text-transform : uppercase;
}
.navigation-menu-container{
background : url(/image/application/menu-navigation-bg.png) center no-repeat;
background-size : 1280px 85px;
bottom : 35px;
font-size : 30px;
height : 100px;
position : absolute;
width : 100%;
z-index : 20;
}
.navigation-menu-container .navigation-menu-mask{
background-size : 1280px 85px;
height : 100px;
left : 0;
margin : auto;
overflow : hidden;
position : absolute;
right : 0;
width : 1280px;
}
.navigation-menu-container .navigation-menu{
margin-top : 25px;
}
.navigation-menu-container .navigation-menu .menu-item{
float : left;
height : 40px;
line-height : 40px;
padding : 5px 40px;
/*overflow : hidden;*/
text-align : center;
}
.navigation-menu-container .navigation-menu .menu-item img{
float : left;
height : 50px;
margin : -5px 10px 0 0;
}
.navigation-menu-container .navigation-menu .menu-item div{
float : left;
}
.videoplane{
top : 0;
left : 0;
right : 0;
bottom : 0;
margin : auto;
/* background : rgba(4,28,66,1);*/
height : 100%;
position : absolute;
width : 100%;
top : 0;
left : 0;
right : 0;
bottom : 0;
margin : auto;
}
.container .powered-bg{
background : url(/image/application/grid-bg-02.png) no-repeat;
bottom : 111px;
height : 34px;
left : 0;
right : 0;
margin : auto;
position : absolute;
text-align : center;
width : 400px;
z-index : 10;
}
.container .footer .left-column{
background : url(/image/application/grid-bg-06.png) no-repeat;
bottom : 0px;
color : #FFF;
font-size : 24px;
height : 30px;
left : 0px;
margin : auto;
padding : 3px;
position : absolute;
width : 394px;
z-index : 10;
}
.container .footer .left-column div{
float : left;
}
.container .footer .left-column img{
float : left;
}
.container .footer .icon-container{
float : left;
height : 30px;
margin : 0px 10px 0px 100px !important;
overflow : hidden;
width : 30px;
}
.container .footer .right-column{
background : url(/image/application/grid-bg-08.png) no-repeat;
bottom : 0px;
color : #FFF;
font-size : 24px;
height : 30px;
right : 0px;
margin : auto;
padding : 3px;
position : absolute;
width : 394px;
z-index : 10;
}
.container .footer .right-column div{
float : left;
}
.container .footer .right-column img{
float : left;
}
.marquee-message{
border : 1px solid rgba(125,125,125,1);
background : rgba(0,0,0,0.75);
display : none;
position : absolute;
z-index : 100000;
height : 58px;
bottom : 0;
left : 0;
right : 0;
}
.marquee-message .marquee-message-container{
color : white;
display : block;
padding : 2;
text-align : justify;
vertical-align : middle;
padding-top : 5px;
height : 58px
}
.popup-message{
background : rgba(0,0,0,0.75);
display : none;
height : 100%;
position : absolute;
top : 0px;
width : 100%;
z-index : 100000;
}
.popup-message .message-container{
border : 1px solid rgba(125,125,125,1);
color : #fff;
display : table-cell;
padding : 2;
text-align : justify;
vertical-align : middle;
}
.popup-message .message-container .text-message{
background : rgba(4,28,66,0.75);
border : 1px solid rgba(125,125,125,1);
width : 1080px;
padding : 20px;
margin : auto;
border-radius : 15px;
}
.popup-message .close-button{
background : -webkit-linear-gradient(top, rgba(50,95,125,1) 0%, rgba(25,35,45,1) 100%);
border : 1px solid rgba(50,150,150,1);
color : #FFF;
padding : 5px 10px;
border-radius : 15px;
position : absolute;
left : 0;
right : 0;
margin : auto;
bottom : 56px;
z-index : 1100000;
width : 300px;
text-align : center;
}
.volume-bar{
background : url(/image/application/volume-bg.png);
bottom : 0;
color : rgb(255,255,255);
font-size : 26px;
height : 370px;
margin : auto;
opacity : 0;
position : absolute;
right : 0;
top : 0;
width : 80px;
z-index : 50;
text-align : center;
}
.volume-bar div{
float : left;
width : 80px;
}
.volume-bar div.volume-value{
height : 30px;
padding-top : 2px;
}
.volume-bar div.volume-progress{
height : 300px;
margin-left : 23px;
width : 34px;
}
.volume-bar div.volume-progress .volume-progress-value{
background : url(/image/application/volume-bar.png) no-repeat;
background-position-y : 300px;
height : 300px;
width : 34px;
}
.volume-bar div.text{
height : 32px;
font-size : 16px;
margin-top : 10px;
}
.volume-mute{
display : none;
position : absolute;
right : 5px;
top : 10px;
z-index : 100;
}
.AdvertisementBlock{
font-size : 18px;
height : 100%;
left : 0;
position : absolute;
top : 0;
width : 100%;
z-index : 10000;
}
.AdvertisementBlock #MainMenu .OfferImage{
box-sizing : border-box;
left : 0;
margin : auto;
position : absolute;
top : 11px;
border-bottom-right-radius : 10px;
border-top-right-radius : 10px;
border : 1px solid rgba(0,0,0,0.5);
border-left : 0 !important;
max-width : 349px;
overflow :hidden;
}
.AdvertisementBlock #MainMenu .OfferImage img{
width :100%;
}
.AdvertisementBlock #MainMenu .SkyScraber{
/*border : 1px solid #FFFFFF;*/
height : 600px;
left : 5px;
margin : auto;
overflow : hidden;
position : absolute;
top : 5px;
width : 160px;
}
.AdvertisementBlock #MainMenu .Square{
/*border : 1px solid #FFFFFF;*/
height : 250px;
margin : auto;
overflow : hidden;
right : 5px;
position : absolute;
width : 250px;
}
.AdvertisementBlock #MainMenu div.Square:nth-child(2){
top : 98px;
}
.AdvertisementBlock #MainMenu div.Square:nth-child(3){
top : 355px;
}
.AdvertisementBlock #MainMenu .AdvertButton{
background : url(/skin/frontend/Bluesky/image/application/button-bg.png) center repeat-x;
border : 1px solid #333;
display : none;
height : 30px;
margin : auto;
overflow : hidden;
right : 5px;
position : absolute;
width : 248px;
}
.AdvertisementBlock #MainMenu .AdvertButton div{
float : left;
overflow : hidden;
}
.AdvertisementBlock #MainMenu .AdvertButton div:nth-child(1){
height : 30px;
width : 30px;
}
.AdvertisementBlock #MainMenu .AdvertButton div:nth-child(2){
height : 24px;
margin : 6px 0px 0px 10px;
width : 100px;
}
.AdvertisementBlock #MainMenu .AdvertButton.Green{
top : 316px;
}
.AdvertisementBlock #MainMenu .AdvertButton.Red{
top : 573px;
}
.AdvertisementBlock #IpTv .SkyScraber{
/*border : 1px solid #FFFFFF;*/
height : 600px;
right : 5px;
margin : auto;
overflow : hidden;
position : absolute;
top : 5px;
width : 160px;
}
.AdvertisementBlock #IpTv .Rectangle{
/*border : 1px solid #FFFFFF;*/
height : 250px;
margin : auto;
overflow : hidden;
right : 170px;
position : absolute;
width : 250px;
}
.AdvertisementPopup{
display : none;
height : 100%;
left : 0;
position : absolute;
top : 0;
width : 100%;
z-index : 100000;
}
.AdvertisementPopup .FullBannerLeft{
height : 720px;
left : 0px;
overflow : hidden;
position : absolute;
top : 0px;
width : 300px;
}
.AdvertisementPopup .FullBannerBottom{
bottom : 0;
height : 160px;
left : 0px;
overflow : hidden;
position : absolute;
width : 1280px;
}
.AdvertisementBlock #Vod .SmallSquare{
/*border : 1px solid #FFFFFF;*/
height : 135px;
margin : auto;
overflow : hidden;
position : absolute;
top : 4px;
width : 300px;
}
.AdvertisementBlock #Vod div.SmallSquare:nth-child(1){
left : 4px;
}
.AdvertisementBlock #Vod div.SmallSquare:nth-child(2){
right : 4px;
}
.AdvertisementBlock #RoomService .SmallSquare{
/*border : 1px solid #FFFFFF;*/
height : 135px;
margin : auto;
overflow : hidden;
position : absolute;
top : 4px;
width : 300px;
}
.AdvertisementBlock #RoomService div.SmallSquare:nth-child(1){
left : 4px;
}
.AdvertisementBlock #RoomService div.SmallSquare:nth-child(2){
right : 4px;
}
.AdvertInFullscreen{
background : rgba(0,0,0,0.75);
display : none;
height : 720px;
left : 0;
position : absolute;
top : 0;
width : 1280px;
z-index : 100001;
}
.AdvertInFullscreen .img{
height : 720px;
overflow : hidden;
position : relative;
top : 0;
width : 1280px;
}
.AdvertInFullscreen .bottom{
position : relative;
width : 1280px;
}
.AdvertInFullscreen p{
font-size : 24px;
height : 73px;
line-height : 36px;
margin : 23px 30px;
overflow : hidden;
padding : 0;
width : 1040px;
}
.AdvertInFullscreen .bottom .back{
background: url(/skin/frontend/Bluesky/image/application/grid-bg-08.png) no-repeat;
border-radius : 10px;
bottom : 40px;
color : #fff;
font-size : 24px;
padding : 5px 20px;
position : absolute;
right : 60px;
}
.AdvertisementPopup .AdvertPopupButton{
background : url(/skin/frontend/Bluesky/image/application/button-bg.png) center repeat-x;
border : 1px solid #333;
display : none;
height : 30px;
margin : auto;
overflow : hidden;
position : absolute;
width : 298px;
}
.AdvertisementPopup .AdvertPopupButton div{
float : left;
overflow : hidden;
}
.AdvertisementPopup .AdvertPopupButton div:nth-child(1){
height : 30px;
width : 30px;
}
.AdvertisementPopup .AdvertPopupButton div:nth-child(2){
height : 24px;
margin : 6px 0px 0px 10px;
width : 60px;
}
.AdvertisementPopup .AdvertPopupButton.Green{
bottom : 0;
left : 0;
}
.AdvertisementPopup .AdvertPopupButton.Red{
bottom : 0;
right : 0;
}
.advertisement-info {
background : rgba(0,0,0,.65);
padding : 10px 20px;
box-sizing : border-box;
color : #fff;
font-size : 16px;
position : relative;
text-align : center;
display : none;
}
.advertisement-info span {
background : green;
width : 15px;
height : 15px;
display : inline-block;
border-radius : 100%;
}
.iptv-channel-container{
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-pack : start;
-ms-flex-pack : start;
justify-content : flex-start;
}
.record-container{
display : -webkit-box;
display : -ms-flexbox;
display : flex;
background : rgb(167,161,161);
font-size : 25px;
height : 50.8px;
width : 60%;
margin-left : -1px;
z-index : 10;
margin-top : -14px;
-webkit-transform : translateY(-50%);
-ms-transform : translateY(-50%);
transform : translateY(-50%);
position : fixed;
top : 50%;
left : 522px;
visibility : hidden;
}
.record-active {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
}
.record-passive {
display : none!important;
}
.record-contents-1{
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-pack : start;
-ms-flex-pack : start;
justify-content : flex-start;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
padding-left : 20px;
}
.record-container .dot {
height : 15px;
width : 15px;
background-color : #072e67;
border-radius : 15px;
display : inline-block;
margin : 0 10px;
}
.record-container .chevron{
border-style : solid;
border-width : 4px 5.5px 0 0;
content : '';
display : inline-block;
height : 8px;
left : 2.4px;
position : relative;
top : 2.4px;
-webkit-transform : rotate(-45deg);
-ms-transform : rotate(-45deg);
transform : rotate(-45deg);
vertical-align : top;
width : 10px;
}
.record-container .chevron.bottom {
top : 0;
-webkit-transform : rotate(135deg);
-ms-transform : rotate(135deg);
transform : rotate(135deg);
}
.record-contents-2{
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : vertical;
-webkit-box-direction : normal;
-ms-flex-direction : column;
flex-direction : column;
width : 100%;
height : 80px;
}
.record-contents-2 .row:nth-child(1){
display : -webkit-box;
display : -ms-flexbox;
display : flex;
height : 50.8px;
}
.record-contents-2 .row:nth-child(2){
display : -webkit-box;
display : -ms-flexbox;
display : flex;
height : 20px;
font-size : 15px;
padding : 10px 25px 0;
}
.record-contents-2 .row div {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-pack : center;
-ms-flex-pack : center;
justify-content : center;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
width : 100%;
}
.record-contents-2 .row>div {
width : 100px;
padding : 0 10px;
height : 100%;
}
.record-contents-2 .row>div:not(:first-child) {
border-left : 1px solid rgba(39,56,65,1);
}
.record-contents-2 .row div:focus{
outline : 1px solid transparent;
}
.record-contents-2 .row .minute-container:focus{
background : #726e6e;
}
.record-contents-2 .row .set_dvr:focus{
background : #072e67;
color : #fff;
}
.record-contents-2 .row .set{
width : 130px;
}
.record-contents-2 .row .minute-container>div{
width : 50px;
}
.record-contents-2 .row .icons{
position : relative;
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : vertical;
-webkit-box-direction : normal;
-ms-flex-direction : column;
flex-direction : column;
}
.record-contents-2 .row .set_dvr{
border : 1px solid #072e67;
border-radius : 10px;
height : 35px;
width : 120px;
color : #072e67;
}
.channel-list-container {
width : 570px;
}
.dvr-channel-list .channel.active{
border-top-right-radius : 0px !important;
border-bottom-right-radius : 0px !important;
}