/* general settings related to Hbb */
body {
    /* transparent background */
    background-color: transparent;
    /* we explicitly set the size of the body element */
    width: 1280px;
    height: 720px;
    overflow: hidden;
    color:#fff;
    /* font-family: Tiresias; */
    font-family: sans-serif;
}
a {
/* According to the OIPF DAE specification this shall prevent that a browser draws there default highlighting */
    outline-style: none;
    text-decoration: none;
}
/* set application area invisble as initial state */
div#app_area {
    visibility: hidden;
}
div.safe_area {
    position: absolute;
    /* We intentionally have broken safe area */
    left: 0px; top: 0px; width: 1280px; height: 720px;
}
div.app_background_area {
    position: absolute;
    left: 0px; top: 0px; width: 1280px; height: 720px;
    background: url("images/home/portal-background.png") no-repeat;
}
#side_menu_area{
    position: absolute;
    left: 30px; top: 50px; width: 220px;; height: 620px;
    border-right: 1px solid #343434;
}
.menu_area_header{
    text-align: right;
    padding: 15px 15px 0px 0px;
    height: 95px;
}

body .menu-arrow-bottom-active {
    border-top:3px solid #e20074; /*aa6bbf*/
}

body .menu-arrow-top-active {
    border-bottom:3px solid #e20074; /*aa6bbf*/
}

/** Arrow Home.html */
.menu-arrow-bottom {
    position: absolute;
    bottom: 23px;
    border-top:3px solid #605e60;
    width:220px;
}
.menu-arrow-bottom img {
    left: 90px;
    top:9px;
    position: absolute;
}
.menu-arrow-top {
    position: relative;
    top: -40px;
    border-bottom: 3px solid #605e60;
    width: 220px;
    padding-top: 30px;
}
.menu-arrow-top img {
    left: 92px;
    top:5px;
    position: absolute;
}

/** Menu and submenu */
.menu_area{
    visibility: visible; 
    position: absolute; 
    left: 0px; top: 85px; width: 220px; height: 580px;
}
.sub_menu_area{
    visibility: inherit; 
    position: absolute; 
    left:0px; top:85px; width: 220px; height: 469px;
    background: url("images/home/sub-background.png") repeat-x;
}
ul.items{
    padding-left:0px;
    list-style: none;
    position: relative;  
}
ul.items#menu_items{
    width:220px;
}
ul.items#sub_menu_items{
    width:220px;
}
.menuItem,
.sub_menuItem{
    text-align: right;
    text-transform: uppercase;
    font-size: 18px; 
    padding: 15px 15px 15px 0;
}
.highlight {
    /*background-color: #aa6bbf;*/
	background-color: #e20074;
}

#portal_content_area{
    position: absolute;
    left: 250px; top: 50px; width: 1000px; height: 620px;
}
.portal_content_header{
    height: 80px;
}
.time-info{
    position: absolute;
    right: 34px; top: 20px;
}

/*Carousel*/
#portal_view{
    overflow: hidden;
    margin: 0px 0px 10px 10px;
    width: 965px; height: 465px;
}
.portal-carousel .items{
    width: 1060px;
}
.portal-carousel .items .item{
    float: left;
    margin-right: 5px;
    width:195px; height: 455px;
    position: relative;
    background:transparent;
    border: 5px solid transparent;
    overflow:hidden;
}
.portal-carousel .items .item.active{
    border: 5px solid #e20074;   /*aa6bbf*/
}
.portal-carousel .items .item.item-weather-class{
    background: url(images/home/back-weather.png) no-repeat;
    color: #282828;
}
div.item_game
{
    position: absolute;
    left: 0px; top: 0px; width: 195px; height: 455px;
}
div.item_radio
{
    position: absolute;
    left: 0px; top: 0px; width: 195px; height: 455px;
    background: url("images/home/kartica5_a.jpg") no-repeat;
}
div.item_text 
{
    position: absolute;
    left: 14px;
    bottom: 10px;
    text-align: left;
    text-transform: uppercase;
    font-size: 22px;
    color: #ffffff;
    font-weight: bold;
}
.today-value{
    position: relative;
    height: 199px;
    margin: 0px 20px;
    border-bottom: 1px solid #bdbcbd;
}
.location-btn{
    color: #282828;
    font-size: 22px;
    display: block;
    text-align: right;
    padding-top: 25px;
    text-transform: capitalize;
    height: 80px;
}
.today-value .simbol-today{
    position: absolute;
    top: 70px; left: -20px; width: 100px;
}
.today-value .simbol-today img{
    width: 100%;
}
#main-values-temperature{
    display: block;
    position: relative;
    width: 155px; height: 60px; 
}
.temperature-class{
    font-size: 25px;
    position: absolute;
    right: 14px;
}
#temperaturesymbol{
    position: absolute;
    right: 0px;
}
.weather-condition-class{
    display: block;
    text-align: right;
    text-transform: uppercase;
}
.tomorrow-value{
    height: 245px;
}
.tomorrow-value >span{
    display: block;
    text-align: center;
    font-size: 18px;
    padding: 10px 0px 10px 0px;
}
.values{
    padding: 15px 0px 30px 0px;
}
.tomorrow-weather{
    padding: 0 20px;
    position: relative;
}
.tomorrow-weather >span{
    padding-bottom: 20px;
}
.simbol{
    position: absolute;
    right: 0px; top: 5px;
}
.simbol img{
    width: 100px;
}
.values .title{
    display: inline-block;
    text-transform: uppercase;
    width: 40px;
    padding-left: 5px;
}
.max,.min{
    display: block;
}
.item-show-class{
    background:#454545;
}
.on_now{
    color: #000;
    height:46px;
}
.channel-number-class{
    position: absolute;
    top: 15px; right: 12px;
    color:#000;
}
.show-img-class{
    height: 185px; width: 195px;
    background: #ccc;
    background: url(images/home/show-placeholder3.png) no-repeat;
    overflow: hidden;
}
.show-next-img-class{
    height: 131px; width: 195px;
    background: url(images/home/show-placeholder5.png) no-repeat;
    overflow: hidden;
}
.show-now-wrapper{
    position: relative;
    height: 265px;
    background: #454545;
}
.now-wrapper{
    text-transform: uppercase;
    position: absolute;
    bottom: 42px; left: 10px; width: 173px;
}
.now{
    padding-bottom: 10px;
    display: block;
}
.shadow-top{
    position: absolute;
    background: url(images/home/shadow-top.png) no-repeat;
    width: 195px; height: 70px;
}
.shadow-bottom-show{
    position: absolute;
    background: url(images/home/shadow-bottom.png) no-repeat;
    width: 195px; height: 70px; bottom: 80px;
}
.shadow-bottom{
    position: absolute;
    background: url(images/home/shadow-bottom.png) no-repeat;
    width: 195px; height: 50px; bottom: 0px;
}
 .timeline {
    position: relative;
    height: 20px;
    margin-top: 40px;
}
.timeline .begintime-class {
    position: absolute;
    left: 10px; top: 0px; width: 50px;
}
.timeline .progressbar-class {
    position: absolute;
    left: 60px; top: 6px; height: 8px; width: 78px;
    background-color: #282828;
}
.timeline .progress-class{
    height: 8px;
}
.timeline .endtime-class {
    position: absolute;
    right: 10px; top: 0px; width: 50px;
    text-align: right;
}
.next{
    padding:0 10px;
    text-transform: uppercase;
}
.item-show  .show-next-wrapper{
    position: relative;
}
.show-next-wrapper{
    background: #454545; 
}
.item-show  .show-next-wrapper span{
    padding: 0 10px;
}
.show-next-title-class{
    position: absolute;
    left: 10px;
    text-transform: uppercase;
    padding-top: 10px;
}
.item-article-class{
    background: #454545;
}
.article{
    color: #000;
    padding: 10px 15px;
}
.article-category-class{
    display: block;
    text-transform: uppercase;
    padding-left: 15px;
}
.article-img-class{
    background: #ccc;
    height: 260px;
    overflow: hidden;
}
#article-img img{
    height: 100%;
    min-width: 100%;
}
.article-title-wrapper{
    background: #454545;
    height: 157px;
}
.article-title-class{
    padding: 15px 10px 13px 10px;
    overflow: hidden;
    height: 80px;
    font-size: 19px;
    background: #454545;
}
.portal-arrow-right{
    position: absolute;
    top: 85px; right: 25px;
}
.portal-arrow-right img{
    height: 456px; width: 120px;
}
/* Help  */
.help_area {
    position: absolute;
    left: 15px; top: 84px; width: 960px; height: 522px;
    background: url(images/home/help-background.png) no-repeat;
    visibility: hidden;
}
.active_help_area{
    position:absolute;
    left:205px; top:-5px; width:752px; height:459px;
    border:5px solid #e20074;/*aa6bbf*/
    background-color: transparent;
    z-index:10;
}
/*Scroll */
div.scroll_pane {
    position: absolute;
    left: 168px; top: 27px; width: 825px; height: 426px;
}
div.sp_title{
    position: absolute;
    left: 52px; top: 0px; width: 630px; height: 50px;
    font-size: 28px;
    font-weight: bold;
}
div.sp_content_container {
    position: absolute;
    left: 52px; top: 50px; width: 675px; height: 360px;
    overflow: hidden;
}
/* dynamically added to container */
div.sp_content {
    position: relative;
    padding: 5px;
    font-size: 20px;  
}
div.sp_scrollbar_container {
    position: absolute;
    left: 746px; top: 50px; width: 30px; height: 360px;
    overflow: hidden;
    background: url(images/home/scroller_help.png) no-repeat;
    background-color: #494949;
}
/* dynamically added to container */
div.sp_scrollbar{
    position: relative;
    background-color: #fff;
}
.help_area #gdpr_view .sp_title{
    height:50px;
}
.help_area #gdpr_view .sp_content_container{
    height:300px; top:50px;
}
.help_area #gdpr_view ul{
    padding-left:15px;
}
.help_area #gdpr_view ol{
    list-style-type: upper-roman;
}
.cookies_area{
    position:absolute;
    left: 187px; top: 400px; width: 676px; height: 50px;
    border-top: 1px solid #353434;
    padding-top:15px;
    font-size: 20px;
}
.cookies_area  >span{
    font-size:20px;
    padding-left:30px;
}
.faqq{
    display:block;
    background:#494949;
    padding:5px 7px;
    width:620px;
}
.faqa{
    padding-left:30px;
    font-size:18px;
    margin-bottom:40px;
}

/*Help Navigation*/
.help-navigation{
    position: absolute;
    bottom: 0px; left: 10px; height: 40px;
}
.help-navigation >span{
    padding-right:20px;
}
#red-btn {
    position: absolute;
    left: 0px; top: 8px;
}
.help-navigation img{
    padding-right: 5px; 
}
#nav_area-bottom{
    position: relative;
    width: 965px; height: 30px;
    padding: 12px 0px 13px 35px;
    font-size: 17px;
}
#nav_area-bottom >div{
    display: inline-table;
    padding-right: 20px;
}
/* radio item*/
.radio-heading{
    height:220px;
}
.radio-channel-name-class{
    width:165px; height:55px;
    padding-top: 25px;
    margin: 0px 15px;
    font-size: 21px;
    color: #353434;
    text-align: center;
    text-transform: uppercase;
}
.radio-logo-class{
    width: 195px; height: 140px; 
    background: url(icons/home/dummy.png) no-repeat; 
}
.radio-info-wrapper{
    width: 195px; height: 120px;
    padding-top: 115px;
    background: url(images/home/radio-info-background.png) no-repeat; 
}
.radio-info{
    margin-left: 30px;
    height: 95px;
}
.radio-info >span{
    display:block
}
.radio-web-class{
    font-size: 13px;
    color: #cfcfcf;
}
#player_status_area{
    visibility: hidden;   
    position: absolute;
    top: 70px; left: 285px; width: 300px; height: 30px;
}
#player_status_area >div,
#player_navigation_area >div{
    display:inline;
}
.player_status_class{
    font-size:13px;
    text-transform: uppercase;
    color:#d1d1d1;
}
#player_status_area img{
    vertical-align: top;
}
#player_navigation_area{
    visibility: hidden;
    position: absolute;
    bottom: 72px; left: 890px; width: 238px; height: 30px;
}
.player_nav_icon img{
    vertical-align: middle;
    padding-right: 5px;
}
.player_nav_text{
    font-size: 17px;
}
/*Class Helpers*/
.valign{
    vertical-align: middle;
}
.size14{
    font-size: 14px;
}
.size16{
    font-size: 16px;
}
.size20{
    font-size: 20px;
}
.white{
    background:#fff;
}