/****************************************** basic styles *************************************************************/

* {
    padding: 0;
    margin: 0;
}

body {

    background: url('bg.png');

    width:1280px;
    height:720px;
    margin: 0;

    overflow:hidden;
    color: #FFFFFF;
    font-size: 2.5em;
    font-family: 'Philips Screen Font 4', sans-serif;
}

a:link {
    text-decoration: none;
    color: #FFFFFF;
}

a:visited {
    text-decoration: none;
    color: #FFFFFF;
}

div.header {

   position: absolute;

   top: 10px;

   left: 1184px;

   width: 86px;

   height: 30px;

   font-size: 0.45em;

}

div.logo {

   position: absolute;

   top: 25px;

   left: 50px;

}

div.logo a:focus img {

   background-image: url('bg-i.png');   

}

div.logo a:hover img {

   background-image: url('bg-i.png');   

}

#forward:focus {

  border: 3px solid yellow;

}

#backward:focus {

  border: 3px solid yellow;

}

/******************************************* MENU **************************************************************/

#menu {

   background-image: url('bg-i-m.png');

   background-repeat: no-repeat;

   position: absolute;

   top: 85px;

   left: 30px;

   width: 295px;

   height: 566px;

}

#menu * a:focus img {

   background-image: url('bg-i-m-f');

   background-repeat: no-repeat;

}

#menu * a:hover img {

   background-image: url('bg-i-m-f.png');

   background-repeat: no-repeat;

}

#div_newest {

   position: absolute;

   top: 5px;

   left: 5px;

}

#div_recommend {

   position: absolute;

   top: 55px;

   left: 5px;

}

#div_mostviews {

   position: absolute;

   top: 105px;

   left: 5px;

}

#div_saturday {

   position: absolute;

   top: 195px;

   left: 5px;

}

#div_sunday {

   position: absolute;

   top: 245px;

   left: 5px;

}

#div_monday {

   position: absolute;

   top: 295px;

   left: 5px;

}

#div_tuesday {

   position: absolute;

   top: 345px;

   left: 5px;

}

#div_wednesday {

   position: absolute;

   top: 395px;

   left: 5px;

}

#div_thursday {

   position: absolute;

   top: 445px;

   left: 5px;

}

#div_friday {

   position: absolute;

   top: 495px;

   left: 5px;

}

img.busy {

    display: block;

    margin-left: auto;

    margin-right: auto;

    position: relative;

}

/******************************************* SCROLLING ***********************************************************/

#scroll_up {

    position: absolute;

    top: 35px;

    left: 779px;

}

#scroll_down {

    position: absolute;

    top: 662px;

    left: 779px;

}

/******************************************* TEASER **************************************************************/

#teasers {

   position: absolute;

   width: 739px;

   height: 570px;

   top: 87px;

   left: 402px;

}

div.teaser {

    font-size: 0.5em;

    width: 270px;

    height: 300px;

}

a.teaser_link {

   display:block;

   width: 270px;

   height: 212px;

}

div.teaser a.teaser_link:focus {

   background-image: url('bg-i-t.png');

}

div.teaser a.teaser_link:hover{

   background-image: url('bg-i-t.png');

}

#teaser_0 {

   position: absolute;

   top: 0px;

   left: 0px;

}

#teaser_1 {

   position: absolute;

   top: 0px;

   left: 265px;

}

#teaser_2 {

   position: absolute;

   top: 0px;

   left: 530px;

}

#teaser_3 {

   position: absolute;

   top: 285px;

   left: 0px;

}

#teaser_4 {

   position: absolute;

   top: 285px;

   left: 265px;

}

#teaser_5 {

   position: absolute;

   top: 285px;

   left: 530px;

}

div.teaser img.teaser_img {

   padding: 15px 0 0 15px;

}

div.teaser div.date {

   font-size: 0.8em;

   padding: 0 0 0 15px;

   position: absolute;

   top: 202px;

}

div.teaser div.title {

   padding: 0 15px 0 15px;

   position: absolute;

   top: 222px;

}

/********************************************** VIDEO **************************************************************/

#videoarea {

    position: absolute;

    left: 50px;

    top: 85px;

    width: 720px;

    height: 405px;

}

#video_overlay {

    position: absolute;

    left: 50px;

    top: 85px;

    width: 720px;

    height: 405px;

}

div.video_warning {

    position: absolute;

    left: 50px;

    top: 120px;

    width: 700px;

    font-size: 0.7em;

    margin: 0px 10px 0px 10px;

}

#controls {

   position: absolute;

   left: 44px;

   top: 495px;

   height: 52px;

   width: 720px;

   bottom: 60px;

   font-size: 0.5em;

}

#controls a:focus img.playpausestop {

   background-image: url('bg-i-p.png');

}

#controls a:hover img.playpausestop {

   background-image: url('bg-i-p.png');

}

#controls a:focus img.full {

   background-image: url('bg-i-f.png');

}

#controls a:hover img.full {

   background-image: url('bg-i-f.png');

}

#views {

   position: absolute;

   top: 16px;

   left: 0px;

   width: 720px;

   height: 40px;

   text-align: right;

   font-size: 0.85em;

   font-weight: bold;

}

#play_time {

   position: absolute;

   top: 14px;

   left: 330px;

   width: 310px;

}

#time_elapsed {

    position: absolute; 

    top: 0px; 

    left: 0px;

    width: 62px;

    text-align: right;

}

#time_separator {

    position: absolute; 

    top: 8px; 

    left: 65px; 

    font-size: 0.6em;

}

#time_total {

    position: absolute; 

    top:0px; 

    left: 73px;

}

#info {

   position: absolute;

   left: 820px;

   top: 85px;

   width: 410px;

   height: 408px;

   background-image: url('bg-i-i.png');

   background-repeat: no-repeat;

   font-size: 0.6em;

}

#info_title {

   margin: 15px 8px 0 8px;

   font-weight: bold;

}

#date_time {

   margin: 0 8px 0px 8px;

   font-size: 0.8em;

}

#description {

   margin: 0 8px 0px 8px;

   font-size: 0.65em;

}