/* .................................................

Stilark for TV-guiden
Grafikk av Kristian Krogvold
CSS av Hilde Skjoelberg og Naveed Akhtar
................................................... */

body { background-color: #fff; margin: 0 3px; }
a:link, a:visited, a:focus, a:active { outline:none; text-decoration: none; }

#wrapper {min-width: 990px; width: 100%; margin: 0; font: .8em/1.3em arial, helvetica, sans-serif;}

#toprow { display: block; width: 980px; height: 25px; line-height: 25px; font-size: 11px; text-indent: 5px; }
#toprow a:link, #toprow a:visited { color: #666; }
#toprow a:hover, #toprow a:active { color: #333; }

#VGiD { display: block; position: absolute; top: -150px; right: 10px; height: 25px; text-align: right; white-space: nowrap; }
#VGiD a:link, #VGiD a:visited { color: #333; font-weight: bold; font-size: 11px; }
#VGiD a:hover, #VGiD a:active { text-decoration: underline; }
#VGiD img { margin: 0 0 0 5px; vertical-align: middle; }

#header { height:41px; line-height: 41px; background: #f07f15; /* Old browsers */
background: -moz-linear-gradient(top, #f07f15 0%, #ff6a10 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f07f15), color-stop(100%,#ff6a10)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f07f15 0%,#ff6a10 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f07f15 0%,#ff6a10 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f07f15 0%,#ff6a10 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f07f15', endColorstr='#ff6a10',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f07f15 0%,#ff6a10 100%); /* W3C */
position: relative;
}
#header h1 { margin: 0; padding: 0; }
#header h1 a { font-size: 35px; font-weight: bold; color: #fff; text-shadow: 0px -2px 0px #fd3d05; filter: dropshadow(color=#fd3d05, offx=0, offy=-2); }
#header img { float: left; margin: 5px 15px 0 5px; border: 0; }

#search { display: block; height: 25px; position: absolute; top: -120px; right: 5px; }
#searchWord { display: block; width: 215px; margin: 0; }

#news { position: relative; display: none; left: 0; right: 0; background: #000 url(bgnews.gif) repeat-x; color: #fff; font-weight: bold; text-align: center; height: 50px; line-height: 40px; padding: 0; }
#closenews { float: right; margin: 0 15px 0 200px; color: #fff; text-decoration: none; }
#arrowDown { position: absolute; top: -192px; right: 30px; display: none;}

/* main content */

#content {position: relative;}

/* NAVIGATION */
#topmenu {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#f5f5f5 100%); /* W3C */
border-bottom:1px solid #ddd;
margin: 0; padding: 0;
font-size: 12px;
}
#topmenu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /*auto-cleares floats*/

#days, #time { float: left; list-style-type: none; margin: 0; padding: 0; }
#days li, #time li { float: left; margin: 0; }
#time li.first { padding-top: 12px; font-weight: bold; font-size: 12px; color: #666; margin-left: 10px; }
#days a{width: 68px; margin: 5px; }
#time a{width: 28px; margin: 5px 2px; }
#days a, #time a{ display: block; height: 28px; line-height: 28px; text-align: center; color: #333; font-weight: bold; text-decoration: none; text-transform: uppercase; background: #eee; border: 1px solid #ccc; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-shadow: 0px 1px 0px #fff; filter: dropshadow(color=#fff, offx=0, offy=1);}
#days a.today, #time a.active { color: #000; background: #ffcc85; /* Old browsers */
background: -moz-linear-gradient(top, #ffcc85 0%, #f3ba6c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc85), color-stop(100%,#f3ba6c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffcc85 0%,#f3ba6c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffcc85 0%,#f3ba6c 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffcc85 0%,#f3ba6c 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc85', endColorstr='#f3ba6c',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffcc85 0%,#f3ba6c 100%); /* W3C */
border: 1px solid #ff8717; }
#days a:hover, #time a:hover {border-color: #999;}
#days a.today:hover, #time a.active:hover {border-color: #ff8717;}
#time li#loader { padding-top: 10px; margin-left: 5px;}

#channelpacks {list-style-type: none; display: block; clear: both; font-size: 12px; font-weight: normal; margin: 0; padding: 0; text-transform: uppercase; }
#channelpacks li {float: left;}
#channelpacks li.first { color: #000; width: 105px; font-weight: bold; margin-left: 10px; padding: 2px 0;}
#channelpacks li a:link, #channelpacks li a:visited { display: block; padding: 2px 10px; color: #666; font-weight: bold; text-decoration: none; }
#channelpacks li.active a { text-decoration: underline; color: #ff6a10; }
#channelpacks li a:hover { text-decoration: underline; }

#progcontent {list-style-type: none; display: block; clear: both; font-size: 12px; font-weight: normal; margin: 0; padding: 0; border-top: 1px solid #fff; }
#progcontent li {float: left;}
#progcontent li.first { color: #000; width: 105px; font-weight: bold; margin-left: 10px; padding: 2px 0;}
#progcontent li a:link, #progcontent li a:visited { display: block; padding: 2px 10px; color: #666; font-weight: bold; text-decoration: none; }
#progcontent li.active a { text-decoration: underline; color: #ff6a10; }
#progcontent li a:hover { text-decoration: underline; }

#message {display: block; float: left; padding: 5px 0 0 15px; font-size: .95em; font-style: italic; color: #666;}
#helpbutton a {display: block; float: left; height: 23px; width: 23px; margin-left: 15px; background: transparent url(icon_help.png) 0 0 no-repeat; text-indent: -5000px;}

/* CONTENT */

/* channel boxes */
#content .proglist { margin-right: 240px; max-width: 2245px;}
#content .proglist:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /*auto-cleares floats*/
#content .proglist .channel {float: left; width: 240px; margin: 7px 10px 0 0;}
#content .proglist .channel img.logo { float: left; padding-right: 5px; background: transparent url(logo_bakgrunn.png) -1px right no-repeat; }
#content .proglist .channel  h2 { margin: 0 0 0 5px; height: 16px; padding: 16px 3px 16px 0; text-align: center; background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* W3C */
border-top: 1px solid #ddd; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 12px;
}

#content .proglist .annonse { float: left; position: relative; width: 240px; margin: 7px 10px 0 0; height: 269px; }
#content .proglist .annonse #admark { position: absolute; left: -10px; bottom: 5px;}

/* program list */
#content .proglist .channel dl {position: relative; display: block; width: 240px; height: 220px; overflow: hidden; margin: 0; font-size: .9em;}
#content .proglist .channel dl:hover { overflow: auto; }
#content .proglist .channel dt {position: relative; left: 0; top: .55em; width: 5em; font-weight: normal; margin-top: -5px; }
a.fav, span.fav {display: block; cursor: pointer; float: left; width: 14px; height: 14px; margin: 0 4px 0 0; background: transparent url(favstar.png) 0 0 no-repeat; text-indent: -5000px; text-decoration: none;}
span.fav.active, a.fav.active, a.fav:hover {background: transparent url(favstar.png) -70px 0 no-repeat; text-indent: -5000px; text-decoration: none;}

#content .proglist .channel dd {margin: -.9em 0 0 55px; width: 165px; padding: 0; }

#content .proglist .channel dd.title {cursor: pointer;}
#content .proglist .channel dd.title a:link, #content .proglist .channel dd.title a:visited {color: #000; text-decoration: underline;}
#content .proglist .channel dd.title a:hover {color: #900;}
#content .proglist .channel dd.description {margin: 5px 5px 5px 8px; display: none;}
#content .proglist .channel dd.description a:link, #content .proglist .channel dd.description a:visited {height: 18px; color: #d33;}
#content .proglist .channel dd.description a:hover {height: 18px; color: #900;}

a.vgdice {display: block; height: 19px; padding-left: 35px; background: transparent url(icon_vgdicesprite.png) 0 0 no-repeat;}
a.userdice {display: block; padding-left: 20px; background: transparent url(icon_userdicesprite.png) 0 0 no-repeat;}

a.dice1 {background-position: 8px -40px;}
a.dice2 {background-position: 8px -80px;}
a.dice3 {background-position: 8px -120px;}
a.dice4 {background-position: 8px -160px;}
a.dice5 {background-position: 8px -200px;}
a.dice6 {background-position: 8px -240px;}

#content .proglist .channel dl .past, #content .proglist .channel dl .past a {color: #999;}
#content .proglist .channel dl .now, #content .proglist .channel dl .now a {font-weight: bold;}
#content .proglist .channel dt span.slutt {margin-left: 18px; font-style: italic;}
#content .proglist .channel dd.title.slutt {cursor: default; color: #444; font-style: italic;}
#content .proglist .channel dt.noprograms, #content .proglist .channel dd.noprograms {margin-top: 10px; color: #999;}

strong.title { cursor: pointer; }
span.description { display: none; font-size: .9em; width: 98%; }
span.description a { display: block; }
ul li span.info { display: block; margin-left: 35px; }
.description p { margin: 0 0 2px 10px; padding: 0; } 

/* right column */

#column {position: absolute; top: 90px; left: -5000px; width: 240px; }

#column .columnContent {margin-bottom: 5px;}
#column .columnContent h3 {margin: 0 0 3px; display: block; height: 30px; color: #000; font-weight: bold; text-align: center; line-height: 30px; background: #fec470 url(column_topp.jpg) 0 center no-repeat; border-top: 1px solid #ff8517; border-bottom: 1px solid #ff8517; font-size: 13px; }
#column .columnContent p.info {margin: 0 0 3px; padding: 2px; font-size: 12px; font-weight: bold; text-align: center; text-transform: uppercase; color: #666;}
#column .columnContent p.info span {color: #000; font-weight: bold;}

#column .columnContent.faves dl {margin: 0; }
#column .columnContent.faves dt {clear: both; margin: 0; padding: 5px 0 1px 45px; font-weight: bold; cursor: pointer;}
#column .columnContent.faves dd {margin: 0; padding: 0 0 5px 45px; color: #999; }
#column .columnContent.faves dd.logo {float: left; margin: -16px 0 0; padding: 0 0 0 5px; border: none;}
#column .columnContent.faves dd span.percent { float: right; margin-right: 10px; }
#column .columnContent.faves .logo img {width: 30px; height: 30px;}

#column .columnContent.review dl {margin: 0; }
#column .columnContent.review dt {clear: both; margin: 0; padding: 5px 0 1px 35px; font-weight: bold; cursor: pointer;}
#column .columnContent.review dd {margin: 0; padding: 0 0 5px 35px; color: #999; }
#column .columnContent.review dd.terning {float: left; margin: -12px 0 0; padding: 0 0 0 5px; border: none;}

#column .columnContent dt a:link, #column .columnContent dt a:visited {color: #000; text-decoration: none;}
#column .columnContent dt a:hover {color: #900; text-decoration: underline;}
#column .columnContent.review dd a:link, #column .columnContent.review dd a:visited {color: #999; text-decoration: none;}
#column .columnContent.review dd a:hover {color: #000; text-decoration: underline;}

#column .columnContent p.lesmer {margin: 3px 0 15px; text-align: right; font-size: .9em;}
#column .columnContent p.lesmer a:link, #column .columnContent p.lesmer a:visited {color: #f60;}
#column .columnContent p.lesmer a:hover {color: #000;}

#column .columnContent dd.description {margin: 5px 0; font-size: .9em; color: #555; display: none; border: none;}
#column .columnContent dd.description a:link, #column .columnContent dd.description a:visited {height: 17px; color: #d33;}
#column .columnContent dd.description a:hover {color: #900;}

#column .columnContent dd.description a.dice1 {background-position: 5px -40px;}
#column .columnContent dd.description a.dice2 {background-position: 5px -80px;}
#column .columnContent dd.description a.dice3 {background-position: 5px -120px;}
#column .columnContent dd.description a.dice4 {background-position: 5px -160px;}
#column .columnContent dd.description a.dice5 {background-position: 5px -200px;}
#column .columnContent dd.description a.dice6 {background-position: 5px -240px;}

div.buttons a, #saveChannelSort {display: block; float: left; width: 112px; margin: 0 2px; height: 20px;line-height: 20px;color:#fff;font-weight: bold;text-decoration: none;text-align: center;background: #0eb1a6; /* Old browsers */
background: -moz-linear-gradient(top, #0eb1a6 0%, #0c9a90 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0eb1a6), color-stop(100%,#0c9a90)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0eb1a6 0%,#0c9a90 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0eb1a6 0%,#0c9a90 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #0eb1a6 0%,#0c9a90 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0eb1a6', endColorstr='#0c9a90',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #0eb1a6 0%,#0c9a90 100%); /* W3C */
border: 1px solid #0a8279; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-shadow: 0px -1px 0px #0a8279; filter: dropshadow(color=#0a8279, offx=0, offy=-1);
font-size: 12px;
} 
div.buttons a:hover, #saveChannelSort:hover {border-color:#064b46;background: #0eb1a6;}
div.buttons p.infotxt { margin: 5px;}
#saveChannelSort { float: none; margin: 0 auto; }

#vgfilm dl { max-height: 380px; overflow: hidden; width: 240px; }
#vgfilm dl:hover { overflow: auto; }
a.calendar { padding-left: 35px; background: transparent url(icon_calendar.png) 8px 0 no-repeat;}
/* footer */
#footer {clear: both; margin: 10px 0; padding: 20px 0 0; text-align: center; width: 740px;}
#footer a:link, #footer a:visited {color: #900;}
#footer a:hover {color: #000;}

#footer ul {list-style-type: none; margin: 10px 0; padding: 1px 0 3px; background: #19c; }
#footer li {display: inline; padding: 0; color: #6bd;}
#footer li a:link, #forside #footer li a:visited {color: #cef; text-decoration: none;}
#footer li a:hover {color: #fff; text-decoration: underline;}

#footer p {margin: 3px 0; font-size: .9em;}
#footer p.tips {margin: 15px 0; font-weight: bold;}
#footer p.tips strong {color: #19c;}
#footer p.tips a:link, #footer p.tips a:visited {color: #19c; text-decoration: underline;}
#footer p.tips a:hover {color: #000;}

/* infobox */
#infobox { position: absolute; top: 250px; left: 8px; padding: 10px 0; border: 1px solid #000; background: #000; color: #fff; text-align: center; min-width: 990px; width: 95%; z-index: 999; display: none; } 
#infobox p { padding: 0 0 10px 0; margin: 0; }
#infobox div.innerinfo { min-height: 100px; padding: 0 20px;}
#infobox div a:link, #infobox div a:visited, #infobox div a:hover { color: #fff; }
#closeinfobox, #closeinfobox2 { float: right; margin-right: 10px; }

/* program info */
.imdb { background: url(imdb.png) 0 0 no-repeat; padding-left: 35px; height: 16px;}
.calendar {background-position: 10px 0;}

/* program packages */
.channelpack { float: left; width: 180px; text-align: left; margin: 0 0 15px 10px; }
.channelpack dl { margin: 0; }
.channelpack dt { font-weight: bold; font-size: 1.2em; text-transform: uppercase; }
.channelpack dd { margin: 0; padding: 0;}

/* annet */
.channel .title:hover, .columnContent.faves dt:hover, #vgfilm dt:hover {text-decoration: underline;}

.clear {clear: both;}
.floatfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /*auto-cleares floats*/

.ui-autocomplete { max-height: 450px; overflow: auto; display: block; clear: both; border: 1px solid #999; background:#fff; font: .8em/1.3em Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif; }
.ui-autocomplete { padding:2px 0; width: 200px; list-style-type: none; }
.ui-autocomplete li { border-bottom: 1px dotted #ccc; clear: both; min-height: 35px; margin: 2px 0; }
.ui-autocomplete li strong { display: block; }
.ui-autocomplete li img { width: 30px; height: 30px; float: left; padding: 2px; }

/*
* jQuery UI
*/
.ui-autocomplete { position: absolute; cursor: default; }
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }

/* workarounds */
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */