@font-face {
  font-family: vaground;
  src: url(../fonts/VAGRoundedBT.ttf); }
@font-face {
  font-family: frutigerrom;
  src: url(../fonts/FrutigerLTStd55Roman.ttf); }
@font-face {
  font-family: frutigerbold;
  src: url(../fonts/FrutigerLTStd65Bold.ttf); }
@font-face {
  font-family: frutigerlight;
  src: url(../fonts/FrutigerLTStd45Light.ttf); }
@font-face {
  font-family: tall;
  src: url(../fonts/ap.ttf); }
* {
  margin: 0;
  padding: 0; }

html {
  /*width: 1280px;*/
  height: 720px; }

body {
  background-image: url(tv:);
  margin-left: 0;
  margin-top: 0;
  padding: 0;
  font-family: frutigerrom;
  font-size: 100%;
  line-height: 1em;
  color: #0;
  text-align: center; }

object {
  outline: none; }

input, textarea, select {
  font-family: frutigerlight;
  font-size: 1em;
  vertical-align: middle;
  font-weight: normal; }

fieldset {
  border: 0; }

p {
  margin: 0;
  padding: 0; }

img {
  border: 0;
  vertical-align: top;
  text-align: left; }

ul, ol {
  list-style: none; }

p {
  line-height: 1.43em; }

/* TXT, LINKS, LINES, TITLES */
a {
  outline: none;
  text-decoration: none; }

a:hover {
  text-decoration: none; }

a:visited {
  text-decoration: none;
  color: white; }

::-webkit-scrollbar {
  width: 12px; }

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px; }

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }

@font-face {
  font-family: vaground;
  src: url(../fonts/VAGRoundedBT.ttf); }
@font-face {
  font-family: frutigerrom;
  src: url(../fonts/FrutigerLTStd55Roman.ttf); }
@font-face {
  font-family: frutigerbold;
  src: url(../fonts/FrutigerLTStd65Bold.ttf); }
@font-face {
  font-family: frutigerlight;
  src: url(../fonts/FrutigerLTStd45Light.ttf); }
#ch_info_cont {
  position: absolute;
  display: inline-block;
  top: 30px;
  left: 0px;
  text-align: left;
  color: #ffffff;
  font-family: vaground; }

#ch_number {
  font-size: 3em;
  line-height: 1.5em;
  width: 90px;
  padding: 0px 30px 0px 30px;
  background: #007363;
  border-bottom: 1px solid #ffffff;
  border-top-right-radius: 6px;
  text-align: right; }

#ch_title {
  float: left;
  font-size: 2em;
  line-height: 1.2em;
  white-space: nowrap;
  background: #007363;
  min-width: 90px;
  padding: 0px 30px 0px 60px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px; }

#ch_list_cont {
  position: absolute;
  top: 30px;
  right: 0px;
  display: none; }

#c_l_top {
  font-family: frutigerbold;
  font-size: 2rem;
  line-height: 1.9rem;
  text-align: center;
  background-color: #007363;
  color: white;
  vertical-align: center;
  padding: 0px 30px 30px 30px;
  border-top-left-radius: 10px; }

#c_l_main {
  font-family: frutigerrom;
  font-size: 1.8rem;
  line-height: 3rem;
  text-align: left;
  display: block; }

#channel_list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 350px;
  background-color: #f1f1f1;
  border-bottom-left-radius: 10px; }
  #channel_list li {
    display: block;
    height: 50px; }
    #channel_list li a {
      padding-left: 10px;
      text-decoration: none;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      color: #000;
      height: 50px;
      min-width: 340px;
      max-width: 340px;
      vertical-align: top;
      -webkit-transition: max-width 2s;
      /* Safari */
      transition: max-width 2s; }
      #channel_list li a:focus {
        display: inline-block;
        min-width: 340px;
        width: auto;
        max-width: 1000px;
        color: white;
        background-color: #007363;
        opacity: 0.8;
        overflow: visible;
        border-bottom-left-radius: 10px; }
      #channel_list li a:hover:not(:focus) {
        background-color: #555;
        color: white;
        border-bottom-left-radius: 10px; }

.fnb-container {
  position: relative; }

#left-side {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 426.66667px;
  height: 720px; }

#right-side {
  position: absolute;
  top: 0px;
  left: 426.66667px;
  width: 853.33333px;
  height: 630px;
  padding-top: 90px;
  background-color: blue; }

.upper-cont {
  width: 426.66667px;
  height: 60px;
  background-color: red; }

.middle-cont {
  position: absolute;
  width: 426.66667px;
  height: 282px;
  top: 60px;
  overflow: hidden; }

.bottom-cont {
  position: absolute;
  width: 426.66667px;
  /*total height - upper height - middle height*/
  height: 378px;
  top: 342px;
  background-color: red; }

.watch-tv {
  position: relative;
  margin: 30px auto;
  width: 395px;
  height: 222px;
  box-shadow: 0 0 0 100px #ff0000;
  /* !!! */ }

.fnb-cat {
  float: left;
  background: yellow;
  font-size: 2.5rem;
  border-radius: 30px;
  margin: 15px; }
  .fnb-cat a {
    text-decoration: none;
    display: block;
    padding: 30px; }
    .fnb-cat a:focus {
      background-color: green;
      border-radius: 15px;
      color: white; }
    .fnb-cat a:hover:not(:focus) {
      font-weight: bold; }

#info-cont {
  display: none; }

#legend {
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-family: frutigerlight;
  font-size: 2rem;
  line-height: 2rem;
  text-align: center;
  width: 800px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #ff5800;
  border-radius: 5px;
  padding: 5px; }

#info {
  position: relative; }
  #info:before {
    content: '';
    position: absolute;
    display: inline-block;
    float: left;
    left: -45px;
    min-width: 45px;
    height: 32px;
    background-image: url("../../images/info.png"); }

#portal {
  position: relative; }
  #portal:before {
    content: '';
    position: absolute;
    display: inline-block;
    float: left;
    left: -45px;
    min-width: 45px;
    height: 32px;
    background-image: url("../../images/portal.png"); }

#close {
  position: relative; }
  #close:before {
    content: '';
    position: absolute;
    display: inline-block;
    float: left;
    left: -45px;
    min-width: 45px;
    height: 32px;
    background-image: url("../../images/ok_2.png"); }

#list {
  position: relative; }
  #list:before {
    content: '';
    position: absolute;
    display: inline-block;
    float: left;
    left: -45px;
    min-width: 45px;
    height: 32px;
    background-image: url("../../images/list.png"); }

#back {
  position: relative; }
  #back:before {
    content: '';
    position: absolute;
    display: inline-block;
    float: left;
    left: -45px;
    min-width: 45px;
    height: 32px;
    background-image: url("../../images/back.png"); }

.separator {
  border-left: 1px solid #ff5800;
  margin: 0px 60px 0px 15px; }

#log {
  position: absolute;
  top: 30px;
  display: inline;
  text-align: center;
  height: 100px;
  line-height: 30px;
  color: #ffffff;
  background-color: #000000;
  padding: 10px; }

/*# sourceMappingURL=tv.css.map */