/* ###################### # Globals ###################### */ html, body { color: black; background-color: white; } body { margin: 0px; padding: 0px; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; } table { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0px; } tr, td { padding-top: 0px; padding-bottom: 0px; } form { margin: 0; padding: 0; } input { border: 1px solid #6D96A9; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; background: #FEFEFE; margin: 0; } select { border: 1px solid #6D96A9; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; } img { border: 0; } a { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } /* ######################### # global style properties ######################### */ .bold { font-weight: bold; } /* ============================== = Dotted Frame ============================== */ .dotted { border: 1px dotted #bbbbbb; padding: 3px; margin: 2px; float: left; background-color: #f3f3f3; } .title { font-weight: bold; } .short { font-weight: normal; } .more { font-weight: bold; cursor: pointer; } .withmargin { margin: 5px; } .nomargin { margin: 0px; } .notpresent { display: none; } .nowrap { white-space: nowrap; } /* ###################### # Tooltip style for hints ###################### */ .hint-tip { margin: 0px auto; max-width: 480px; /* depends on the tip backround image width */ color: #fff; } .hint-tip .hint-tip-top .hint-tip-c, .hint-tip .hint-tip-bot .hint-tip-c { font-size: 1px; /* ensure minimum height */ height: 17px; } .hint-tip .hint-tip-top { background: transparent url(img/rounded-box-blue-tl.png) no-repeat 0px 0px; margin-right: 17px; /* space for right corner */ } .hint-tip .hint-tip-top .hint-tip-c { background: transparent url(img/rounded-box-blue-tr.png) no-repeat right 0px; margin-right: -17px; /* pull right corner back over "empty" space (from above margin) */ } .hint-tip .hint-tip-bdy { background: transparent url(img/rounded-box-blue-ml.png) repeat-y 0px 0px; margin-right: 17px; } .hint-tip .hint-tip-bdy .hint-tip-c { background: transparent url(img/rounded-box-blue-mr.png) repeat-y right 0px; margin-right: -17px; } .hint-tip .hint-tip-bdy .hint-tip-c .hint-tip-s { /* optional gradient overlay */ /* background: transparent url(img/rounded-box-blue-ms.jpg) repeat-x 0px 0px; */ padding: 0px 17px 0px 17px; } .hint-tip .hint-tip-bot { background: transparent url(img/rounded-box-blue-bl.png) no-repeat 0px 0px; margin-right: 17px; } .hint-tip .hint-tip-bot .hint-tip-c { background: transparent url(img/rounded-box-blue-br.png) no-repeat right 0px; margin-right: -17px; } .hint-title { display: none; } /* ###################### # Style for positive notification popup ###################### */ .ok-info { margin: 0px auto; max-width: 480px; /* depends on the tip backround image width */ color: #fff; } .ok-info .ok-info-top .ok-info-c, .ok-info .ok-info-bot .ok-info-c { font-size: 1px; /* ensure minimum height */ height: 17px; } .ok-info .ok-info-top { background: transparent url(/img/rounded-box-green-tl.png) no-repeat 0px 0px; margin-right: 17px; /* space for right corner */ } .ok-info .ok-info-top .ok-info-c { background: transparent url(/img/rounded-box-green-tr.png) no-repeat right 0px; margin-right: -17px; /* pull right corner back over "empty" space (from above margin) */ } .ok-info .ok-info-body { background: transparent url(/img/rounded-box-green-ml.png) repeat-y 0px 0px; margin-right: 17px; } .ok-info .ok-info-body .ok-info-c { background: transparent url(/img/rounded-box-green-mr.png) repeat-y right 0px; margin-right: -17px; } .ok-info .ok-info-body .ok-info-c .ok-info-s { /* optional gradient overlay */ /* background: transparent url(/img/rounded-box-green-ms.jpg) repeat-x 0px 0px; */ padding: 0px 17px 0px 17px; } .ok-info .ok-info-bot { background: transparent url(/img/rounded-box-green-bl.png) no-repeat 0px 0px; margin-right: 17px; } .ok-info .ok-info-bot .ok-info-c { background: transparent url(/img/rounded-box-green-br.png) no-repeat right 0px; margin-right: -17px; } /* ###################### # Style for negative notification popup ###################### */ .err-info { margin: 0px auto; max-width: 480px; /* depends on the tip backround image width */ color: #fff; } .err-info .err-info-top .err-info-c, .err-info .err-info-bot .err-info-c { font-size: 1px; /* ensure minimum height */ height: 17px; } .err-info .err-info-top { background: transparent url(/img/rounded-box-redwine-tl.png) no-repeat 0px 0px; margin-right: 17px; /* space for right corner */ } .err-info .err-info-top .err-info-c { background: transparent url(/img/rounded-box-redwine-tr.png) no-repeat right 0px; margin-right: -17px; /* pull right corner back over "empty" space (from above margin) */ } .err-info .err-info-body { background: transparent url(/img/rounded-box-redwine-ml.png) repeat-y 0px 0px; margin-right: 17px; } .err-info .err-info-body .err-info-c { background: transparent url(/img/rounded-box-redwine-mr.png) repeat-y right 0px; margin-right: -17px; } .err-info .err-info-body .err-info-c .err-info-s { /* optional gradient overlay */ /* background: transparent url(/img/rounded-box-redwine-ms.jpg) repeat-x 0px 0px; */ padding: 0px 17px 0px 17px; } .err-info .err-info-bot { background: transparent url(/img/rounded-box-redwine-bl.png) no-repeat 0px 0px; margin-right: 17px; } .err-info .err-info-bot .err-info-c { background: transparent url(/img/rounded-box-redwine-br.png) no-repeat right 0px; margin-right: -17px; } /* ###################### # General styles for epg info ###################### */ div.epg_content { border: 1px solid black; } span.epg_images { float: right; margin-left: 5px; } /* ############################## # Infowin styles for epg infos ############################## */ div.info-win { width: 560px; max-width: 2048px; border: none; margin: 0px auto; } .info-win .info-win-top .info-win-c { /*font-size: 1px;*/ /* ensure minimum height */ height: 37px; } .info-win .info-win-bot .info-win-c { font-size: 1px; /* ensure minimum height */ height: 21px; } .info-win .info-win-top { background: transparent url(img/info-win-t-l.png) no-repeat 0px 0px; margin-right: 26px; /* space for right corner */ } .info-win .info-win-top .info-win-c { background: transparent url(img/info-win-t-r.png) no-repeat right 0px; margin-right: -26px; /* pull right corner back over "empty" space (from above margin) */ overflow: hidden; } .info-win .info-win-top .info-win-c .info-win-t { color: #FFF; font-weight: bold; margin-top: 14px; margin-left: 15px; float: left; } .info-win .info-win-top .info-win-c .info-win-b { margin-top: 17px; margin-right: 26px; float: right; } .info-win .info-win-top .info-win-c .info-win-b .close { width: 16px; height: 16px; background: transparent url(img/close.png) no-repeat top right; } .info-win .info-win-top .info-win-c .info-win-b .close:hover { width: 16px; height: 16px; background: transparent url(img/close_red.png) no-repeat top right; } .info-win .info-win-body { background: transparent url(img/info-win-m-l.png) repeat-y 0px 0px; margin-right: 26px; } .info-win .info-win-body .info-win-c { background: transparent url(img/info-win-m-r.png) repeat-y right 0px; margin-right: -26px; } .info-win .info-win-body .info-win-c .info-win-s { padding: 0px 26px 0px 14px; } .info-win .info-win-bot { background: transparent url(img/info-win-b-l.png) no-repeat 0px 0px; margin-right: 26px; } .info-win .info-win-bot .info-win-c { background: transparent url(img/info-win-b-r.png) no-repeat right 0px; margin-right: -26px; } .hint-title { display: none; } /* ####################### # Menue ####################### */ div.menu { background: #000057 url(img/menu_line_bg.png) repeat-x; min-height: 27px; margin: 0; padding: 0 0 0 10px; line-height: 20px; vertical-align: middle; border-top: 1px solid black; border-bottom: 1px solid black; color: #6D96A9; } div.menu a { color: white; font-weight: bold; } a#login { color: #F5FF2D; } div.menu a.active { color: #FFDB88; font-weight: bold; } div.menu form { display: inline; } div.inhalt { overflow: auto; padding: 10px; } /* styles for pagemenu */ div#pagemenu { margin-top: 2px; padding-top: 6px; background: #FFFFFF url(img/bg_line.png) top repeat-x; } div#pagemenu div { padding-bottom: 6px; background: #FFFFFF url(img/bg_line_top.png) bottom repeat-x; } div#pagemenu div div { padding: 2px 0px 2px 10px; background: #E9EFFF; border-top: 1px solid #C0C1DA; border-bottom: 1px solid #C0C1DA; } div#pagemenu div div div { border: 0; padding: 0; margin: 0; } div#pagemenu form { display: inline; } div#pagemenu a { color: black; font-weight: bold; } div#pagemenu a.active { color: blue; font-weight: bold; } div#pagemenu form a { margin-left: 1em; } div#pagemenu form a img { vertical-align: middle; margin-top: -5px; } /* styles for messagebar */ div#messagebar { margin-top: 8px; margin-bottom: 2px; line-height: 20px; min-height: 27px; vertical-align: middle; background: #7CAD3F url(img/msgbar_line_bg.png) top repeat-x; border-top: 1px solid #2B6B00; border-bottom: 1px solid #2B6B00; } div#messagebar div { color: black; } div#messagebar div div { padding-left: 10px; background: transparent; } div#messagebar div div div { border: 0; padding: 0; margin: 0; } div#messagebar a { color: black; font-weight: bold; } div#messagebar a.active { color: blue; font-weight: bold; } div#messagebar span#mbmessage { padding: 0em 1em 0em 1em; color: #A14040; font-weight: bold; } /* ####################### # Info Box (near logo) ####################### */ img.logo { float: left; margin-top: 5px; margin-left: 5px; margin-right: 25px; } div#infobox { float: left; border: 1px solid #C0C1DA; margin: 5px; width: 320px; } div#infobox div.st_header { overflow: hidden; padding: 1px 4px; background: #E9EFFF; border-bottom: 1px solid #C0C1DA; } div#infobox div.st_header div.now { float: right; } div#infobox div.st_header div.caption { float: left; overflow: hidden; font-weight: bold; padding: 0px; } div#infobox div.st_content { overflow: hidden; padding: 4px; background: white url(img/bg_line_top.png) top left repeat-x; } div#infobox div.st_content div.duration { float: right; } div#infobox div.st_content div.name { float: left; overflow: hidden; font-weight: bold; } div#infobox div.st_controls { overflow: hidden; padding: 4px; } div#infobox div.st_controls div.st_pbar { padding-top: 4px; float: right; } div#infobox div.st_controls div { float: left; } div#infobox div.st_controls div.st_update { padding-right: 5px; border-right: 1px solid #C0C1DA; } div#infobox div.st_controls div#infobox_recording_buttons { padding-left: 5px; } div#infobox div.st_controls div#infobox_channel_buttons { padding-left: 5px; } /* ################################# # Buttons ################################# */ button { width: 100px; height: 20px; background-color: inherit; background-image: url(img/button_green.png); background-repeat: no-repeat; color: #FFFFFF; font-size: 11px; border: 0px; vertical-align: middle; text-align: center; cursor: pointer; padding-bottom: 3px; } button.green { background-image: url(img/button_green.png); } button.red { background-image: url(img/button_red.png); } button.blue { background-image: url(img/button_blue.png); } button.yellow { background-image: url(img/button_yellow.png); } /* ################################ # general table cell classes ################################ */ table td.buttonpanel { text-align: right; } table td.toprow { } table th.toprow { } table td.bottomrow { border-bottom: 1px solid black !important; } table td.leftcol { border-left: 1px solid black; } table td.rightcol { border-right: 1px solid black; } table td.topaligned { vertical-align: top; } table td.padded { padding: 3px 7px 3px 3px; } /* ################ # Event (page: whats_on.html) ################ */ div.event { width: 255px; height: 255px; padding: 0; margin-right: 5px; float: left; } div.event div.station { margin: 0; padding: 0; width: 255px; } div.station div { margin: 0; padding: 0; background: url(img/bg_box_l.png) top left no-repeat; height: 23px; } div.station div div { background: url(img/bg_box_r.png) top right no-repeat; } div.station div div div { background: url(img/bg_box_h.png) repeat-x; line-height: 20px; vertical-align: middle; text-align: left; margin-right: 3px; margin-left: 3px; padding-left: 5px; padding-top: 2px; font-weight: bold; } div.station div div div a { color: #ffffff; font-weight: bold; } td div.station { vertical-align: middle; } td div.station a { color: black; font-weight: bold; } div.content { width: 253px; height: 220px; padding: 0; margin: 0; overflow: hidden; background: white url(img/bg_tools.png) top left repeat-y; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; } div.content div.tools { float: left; width: 26px; height: 220px; margin: 0; padding: 0; padding-top: 3px; text-align: center; vertical-align: top; } div.content div.tools img { margin: 2px 5px; } div.content div { padding-left: 0px; margin-left: 35px; } div.content div div { margin-left: 0px; } div.description { margin: 5px 5px 0px 5px; overflow: hidden; } div.title { margin: 5px; } div.short { margin: 5px; } div.info { padding: 5px; overflow: hidden; } div.info div.time { float: right; padding: 0px; } div.info div.date { float: left; padding: 0px; } div.progress { overflow: hidden; padding-right: 4px; margin: 0px; } div.progress div { float: right; padding: 0px; } div.__progress { overflow: hidden; width: 100px; height: 8px; border: 1px solid #C0C1DA; } div.__progress_invisible { overflow: hidden; width: 100px; height: 10px; border: 0px none transparent; } div.__progress div.__elapsed { float: left; height: 8px; background-color: #E9EFFF; } /* ################################## # table listing # (this is used in listing tables) ################################## */ table.listing { padding: 0px; margin: 0px; } table.listing tr td { background: transparent url(img/bg_line.png) bottom repeat-x; border-bottom: 1px solid #C0C1DA; } table.listing tr td.action { padding-left: 3px; padding-right: 5px; } table.listing tr td.leftcol { padding-left: 7px; padding-right: 5px; } table.listing tr td.current { color: blue; } table.listing tr.head td { color: white; font-weight: bold; margin: 0px; padding: 0px; border-bottom: 1px solid black; } table.listing tr.description td { font-weight: bold; background: #E9EFFF; } table.listing tr.spacer td { height: 10px; background: transparent; border-bottom: 0px; } table.listing a { color: black; font-weight: bold; } /* ############################## # Blue Background Thingy ############################## */ div.boxheader { margin: 0px; padding: 0px; background: url(img/bg_box_l.png) top left no-repeat; } div.boxheader div { margin: 0px; background: url(img/bg_box_r.png) top right no-repeat; } div.boxheader div div { background: url(img/bg_box_h.png) repeat-x; vertical-align: middle; text-align: left; margin-right: 3px; margin-left: 3px; padding-left: 5px; padding-top: 2px; color: white; font-weight: bold; height: 21px; line-height: 20px; } /* ############################## # Recordings ############################## */ div.recordings { border: 1px solid black; } .recordings ul { list-style-type: none; padding: 0px; margin: 0px; } div.recording_item { overflow: hidden; background: url(img/bg_line.png) bottom repeat-x; border-bottom: 1px solid #C0C1DA; } .recording_item div { float: left; } .recording_item div.recording_imgs{ margin-right: 0.5em; } .recording_item div.recording_spec { padding-top: 0.5ex; } .recording_item div.recording_day { } .recording_item div.recording_date { width: 5.25em; } .recording_item div.recording_time { width: 5.75em; } .recording_item div.recording_duration { width: 2.5em; } .recording_item div.recording_name { font-weight: bold; cursor: pointer; } .recording_item div.recording_name span { font-weight: normal; cursor: pointer; } .recording_item div.recording_arch { float: right; padding-top: 0.5ex; padding-left: 0.5em; padding-right: 0.5em; } .recording_item div.recording_actions { float: right; padding-right: 3em; } /* ############################## # Remote Control Keypad ############################## */ div.screenshot { background-image: url(img/tv.jpg); background-repeat: no-repeat; height: 240px; width: 320px; float: left; padding: 20px 20px 98px 21px; margin-right: 20px; } div.screenshot img { width: 320px; height: 240px; } /* ############################## # Error widget ############################## */ table.error { border: 1px solid #E9360D; margin: 2px; padding: 0px; } table.error tr td.message { padding: 5px; } table.error tr td.title { background: #E9360D; color: white; font-weight: bold; margin: 0; padding: 3px 3px 3px 10px; } table.error td.border { padding: 0; margin: 0; width: 1px; } /* ############################## # Formular Tables # (are used in forms to group input elements) ############################## */ table.formular { margin-top: 10px; } table.formular tr td { vertical-align: top; vertical-align: middle; background: url(img/bg_line.png) bottom repeat-x; border-bottom: 1px solid #C0C1DA; } table.formular tr td input { margin-top: 5px; margin-bottom: 2px; } table.formular tr td .dotted input { margin-top: 0px; } table.formular tr td.leftcol { padding-left: 2px; } table.formular tr td.rightcol { padding-right: 7px; } table.formular tr td.label { font-weight: bold; vertical-align: top; } table.formular tr.head td { color: white; font-weight: bold; margin: 0; padding: 0; border: none; } table.dependent { background-color: #FFFFFF; margin-top: 0px; } table.dependent tr td { background: transparent; vertical-align: middle; } /* ############################## # Login ############################## */ table.login { margin: 0 auto; } table.login tr td { padding: 3px 5px; text-align: right; } /* ############################## # Styles for EPG-Boxes ############################## */ div.caption { padding: 2px 0px 0px 5px; } div.epg_content { padding: 0px 0px 7px 0px; margin: 0px 0px 0px 0px; background: transparent url(img/bg_tools.png) top left repeat-y; border: 1px solid black; overflow: hidden; } div.epg_content div { margin-left: 35px; } div.epg_content div.epg_tools { float: left; width: 26px; margin: 0; padding: 0; padding-top: 3px; text-align: center; vertical-align: top; } div.epg_content div div { margin-left: 0px; } div.epg_content div.epg_tools img { margin: 2px 5px; } span.epg_images img.epg_image { width: 100%; } /* some adaptions when shown in info-win subwindow */ /* .info-win div.epg_content div div.progress div { margin-left: 0px; } */ .info-win div.boxheader { display: none; } .info-win div.epg_content { border: 0px; } /* ############################## # Style adaptions for About box ############################## */ div.epg_content div.about_left { text-align: right; float: left; width: 175px; } div.epg_content div.about_right { padding-left: 200px; } div.epg_content div.about_line { padding-left: 0px; } div.epg_content div.about_head { font-weight: bold; margin-left: -9px; padding-top: 6px; } div.epg_content div.about_head div { padding-bottom: 6px; margin-left: 0px; } div.epg_content div.about_head div div { padding: 2px 0px 2px 10px; background: #E9EFFF; border-top: 1px solid #C0C1DA; border-bottom: 1px solid #C0C1DA; } /* ############################## # VLC page ############################## */ div#vlcControls { padding-top: 5px; text-align: center; }