/********************************************

	UR seriesida

    GENERAL STYLES          Overall style, body, a, .clearer etc.
	ICON LINKS              Links with different icons
    HEADINGS                h1, h2, h3
    OVERALL PAGE STRUCTURE  The building blocks (divs) of the page. #page, #menu etc..
	MENU                    Classes for the menu
    SEARCH                  Search below menu + search page
    MAINCONTENT             The "article" content
    PROGRAMINFO             Program page - Media links, broadcast info...
    PUFFS                   Puffareas
    SERIESINFO              Start page
    TRAILER                 Start page - media player
    SCHEDULE                Start page
    INFOBOX                 Fact box, media link list
    TEST                    Test/Quiz
    PAGETYPE-POPUP

********************************************/

/********************************************

	GENERAL STYLES
	Tag-specific styles: body, a, td, img
	General reuseable classes

********************************************/

body  /* The body tag. Body background, overall font settings. */
{	
	margin: 0;
	padding:0;
	background-color:#F7F7F5;
	font-family: verdana, sans-serif;
	font-size:70%;
	color:#7B7A76;
	background-image:url(../images/bg_body.gif);
}

a /* The link tag. Overall link settings. */
{
	color:#7B7A76; 
	text-decoration: none;
}

a:hover {}

img
{
	border: none;
}

form
{
	margin:0;
	padding:0;
}

.clearer /* For clearing floating divs */
{
	clear:both;
}

.accessibility /* For hiding accessibility content */
{
	display:none;
}

.hidden /* For hiding content */
{
	display: none;
}

/********************************************

	BUTTONS
	Classes for button links
	
********************************************/

.button
{
	border:1px #B6B5AA solid;
	border-left:1px #DDDBD6 solid;
	border-top:1px #DDDBD6 solid;
	background-repeat:repeat-x;
	background-position:top;
    display:-moz-inline-block;
    display: inline-block;	
	text-align:center;
	font-size:91%;
	height: 17px;
	line-height:16px;
	width:80px;	
	background-color:#E4DFD9;
	background-image: url(../images/bg_button.gif);	
}

.button:hover
{
	background-position:bottom;
    color:#999999;
}



/********************************************

	ICON LINKS
	Classes for varios links with an image icon
	CommentLink, PrintLink, EmailPageLink etc
	
********************************************/

.iconlink /* This is used for all the icon links. Do not change. */
{
	background-image:url(../images/i_linkarrow.gif);
	background-repeat:no-repeat;
	background-position:center left;
	padding:3px;
	padding-left:24px;	
}

.iconlink a {} /* All icon link a-tags */

.iconlink a:hover /* Hover for all icon link a-tags */
{
    background-color:#E8E8E5;	
}

.arrowlink /* Read more... */
{
	background-image:url(../images/i_linkarrow.gif);
}

.arrowlink a {}

.arrowlink a:hover {}

.emaillink /* Email this page to a friend */
{
	background-image:url(../images/i_email.gif);
}

.printlink /* Print the page */
{
	background-image:url(../images/i_print.gif);
}

.commentlink /* Comment the page */
{
	background-image:url(../images/i_comment.gif);
}

.reminderlink /* Remind me ahead of each show */
{
	background-image:url(../images/i_reminder.gif);
}

.videolink /* Watch the programme */
{
	background-image:url(../images/i_video.gif);
}

.audiolink /* Listen to the programme */
{
	background-image:url(../images/i_audio.gif);
}

.externalplayerlink /* Open in external player */
{
	background-image:url(../images/i_externalplayer.gif);
}

/********************************************

	HEADINGS
	h1, h2, and special headings 
	
********************************************/

h1
{
	font-family:Arial;
	font-weight:normal;
	font-size:170%;
	color:#555555;
	margin-bottom:11px;
	margin-top:11px;	
}

h2
{
	font-family:Arial;
	font-weight:bold;
	font-size:125%;
	COLOR:#555555;
	margin-bottom:9px;
	margin-top:26px;	
}

h3
{
	font-family:Arial;
	font-weight:bold;
	font-size:110%;
	COLOR:#555555;
	margin-bottom:9px;
	margin-top:26px;	
}

/********************************************

	OVERALL PAGE STRUCTURE
	Styles for the basic buildning blocks of the page

********************************************/

#fullpagewrap /* Wrap for #fullpage. For setting background. */
{
	background-image:url(../images/bg_fullpagewrap.gif);
	background-repeat:no-repeat;
	background-position:top left;	
}

#fullpage	/* The entire page content (including #rightouterarea) except URTopBar. For setting background and margins. */
{
  padding:11px;
  padding-left:0px;
}

#pagewrap /* Wrap for #page. For setting background. */
{
	padding-left:13px;
	background-image:url(../images/bg_pagewrap.gif);
	background-repeat:repeat-y;
}

#pagebottom /* Page end... */
{
	height:25px;
	background-image:url(../images/bg_pagebottom.gif);
	background-repeat:no-repeat;
}

#page /* The div holding the page. */
{
	width:752px;
	background-color:#FAFAF9;
	background-image:url(../images/bg_page.gif);
	background-repeat:no-repeat;
	background-position:left top;
}

#header {} /* The div holding the site header */

img.headerimage
{
	width:752px;
}

table#leftandmaincolumn /* The table holding left and main columns. Do not change border-collapse or border-spacing */
{
	border-collapse: collapse; 
	border-spacing: 0;
	margin-left:2px;
}

td#leftcolumn /* The td for the left column. Do not change vertical-align. */
{
	vertical-align:top;
	padding:0;
	width:180px;
}

td#columnseparator /* The td for the left + main column separator. */
{
	padding:0;
	width:4px;
}

td#contentcolumn /* The td for the content column. Do not change vertical-align. */
{
	vertical-align:top;
	padding:0;
	width:566px;
}

#navigationtrail /* The div holding the navigation trail. */
{
	background-image:url(../images/bg_navigationtrail.gif);
	background-repeat:no-repeat;
	height:27px;
	line-height:27px;
	padding-left:8px;
	font-size:91%;
}

#navigationtrail a:hover
{
	background-color:#E8E8E5;
}

#contentheader {} /* Div containing the content header image. */

#content {} /* The div holding the page content (mainbody, puff area etc) but not trail, contentheader or contentfooter. */

#footer /* The div holding the page footer. Do not change text-align */
{
	text-align:right;
	font-size:91%;
	padding:2px;
	padding-right:9px;
	padding-bottom:9px;
}

#footer a:hover
{
	background-color:#E8E8E5;	
}

/********************************************

	MENU
	Menu items and links
	
********************************************/

#navigation {}

#navigation a:hover
{
	color:#020202;
}

#navigation .selected a
{
	color:#323131;
}

#navigation .selectedexpanded a
{
	color:#323131;
}

#navigation ul
{
	list-style: none;
	margin:0;
	padding:0;
}

#navigation li
{
	list-style:none;
	margin:0;
	padding:0;

}

/*  TOP LEVEL   ul li */

#navigation ul li div.menuitem
{
	line-height:16px;
	padding-bottom:1px;
	background-image:url(../images/topmenuitem.gif);
	background-position:left center;
	background-repeat:no-repeat;
	padding-left:25px;	
}

#navigation ul li div.selected
{
	background-image:url(../images/topmenuitem_selected.gif);
}

#navigation ul li div.expanded
{
	background-image:url(../images/topmenuitem_expanded.gif);
}

#navigation ul li div.selectedexpanded
{
	background-image:url(../images/topmenuitem_selected_expanded.gif);
}

/*  LEVEL 2   ul li ul li */

#navigation ul li ul li div.menuitem
{
	background-image:url(../images/menuitem.gif);
}

#navigation ul li ul li div.selected
{
	background-image:url(../images/menuitem_selected.gif);
}

#navigation ul li ul li div.expanded
{
	background-image:url(../images/menuitem.gif);
}

#navigation ul li ul li div.selectedexpanded
{
	background-image:url(../images/menuitem_selected.gif);
}

/*  LEVEL 3   ul li ul li ul li */

#navigation ul li ul li ul li  div.menuitem
{
	padding-left:32px;	
}

/*  LEVEL 4   ul li ul li ul li ul li */

#navigation ul li ul li ul li ul li div.menuitem
{
	padding-left:39px;	
}

/********************************************

	SEARCH
	The search field next to the menu
	
********************************************/

#search {} /* Container for search box */

#searchpadding /* Padding for the search box. */
{
	padding:0px;
	padding-top:20px;
	padding-left:6px;
}

.searchbutton /* Search button. Do not change float or display. */
{
	float: left;
	display: block;
	background-image: url(../images/b_search.gif);
	height: 19px;
	width: 43px;
	margin-left: 3px;
}

.searchbutton:hover /* Hover for search button. */
{
	background-image: url(../images/b_search_hover.gif);
}

.searchfield /* The text field */
{
	border-top: solid 1px #B7B5AA;
	border-left: solid 1px #B7B5AA;
	border-right: solid 1px #DEDBD6;
	border-bottom: solid 1px #DEDBD6;
	color: #3D4645;
	font-size: 100%;
	width: 117px;
	height:15px;
	padding-top: 2px;
	padding-left: 2px;
	float: left;
}

#content .searchfield
{
	width: 200px;
}

/********************************************

	MAINCONTENT
	The "article" content
	
********************************************/

#maincontent /* The box holding the page heading + main body text + print/tip links */
{
	width:556px;
	background-color:white;		
	margin-bottom:4px;
}

#maincontentpadding /* The box holding the page heading + main body text + print/tip links */
{
	padding:34px;
	padding-top:12px;
	padding-bottom:20px;
	m-argin-bottom:4px;
}

#pagebody /* Div containing page heading + main body text */
{
	margin-bottom:20px;
}

#pagebodyfunctions /* Div holding email page, print, comment page etc */
{
	margin-top: 12px;
}

#pagebody p
{
	margin-bottom:11px;
	margin-top:9px;
	line-height:1.4em;
}

#mainbody div
{
	margin-bottom:11px;
	margin-top:9px;
	line-height:1.4em;
}

#mainbody img
{
	border:6px #F5F5F4 solid;   /* Very special */
}

/********************************************

	PROGRAMINFO
	On program page to the right of the content
	
********************************************/

#programinfo
{
	width:224px;
	margin-top:25px;
	margin-right:0px;
	margin-left:20px;
	margin-bottom:10px;
	float:right;
}

#programinfoimage {}

#programinfoimage img
{
	width:223px;
}

#programinfomedialinks
{
	background-image:url(../images/bg_programinfo_medialinks.gif);
	background-repeat:repeat-y;
	padding-bottom:5px;
	padding-top:5px;
}

#programinfo .videolink
{
    margin-left:7px;
    margin-bottom:2px;
    padding:1px;
	padding-left:20px;
	
}

#programinfo .videolink a
{
	color:#42443F;
	font-size:91%;
}

#programinfomedialinksbottom
{
    background-image:url(../images/bg_programinfo_medialinks_shadow.gif);
    height:18px;
}

#broadcastinfo {}

#broadcastinfo h2
{
    font-family:Verdana;
	font-size:91%;
	margin:0;
	padding-left:3px;
	margin-bottom:8px;
	font-weight:bold;
}

#broadcastinfo tr td
{
    padding-top:1px;
    padding-bottom:1px;
}

#broadcastinfo tr td div
{
    font-size:91%;    
    padding:1px;
    padding-left:4px;
    padding-right:4px;
}

#broadcastinfo tr.firstrow td div
{
    background-color:#DDDDD9;
    color:#060605;
}

.programinforeminderlink
{
	margin-top:10px;
	padding-top:2px;
	font-size:91%;	
	border-top:1px #F5F5F4 solid;
}

/********************************************

	PUFFS
	Classes for puffs and puff area
	
********************************************/

.puffarea /* The box holding a puff area */
{
	width:560px;
}

.puffrow /* Puffgroup size 1 (full width / one row) */
{
	width:560px;
	padding-bottom:4px;
	background-image:url(../images/bg_puffrow.gif);
	background-position:right bottom;
}

.puffrowpadding
{
	padding-right:4px;
}

.puff1 /* Puff size 1 (full width / one row) */
{
	width:556px;
	background-color:White;
	float:left;
}

.puff2pos1 /* Puff size 1 (half width) position 1. Do not change float. */
{
	float:left;
	width:244px;
	margin-right:4px;
}

.puff2pos2 /* Puff size 1 (half width) position 2. Do not change float. */
{
	float:left;	
	width:308px;
}

.puffcontentwrap {} /* For setting bottom puff border, see below */

.puffimagecontainer /* Container for puff image */
{
}

.puffimagecontainer-left /* Container for left aligned puff image. Do not change float. */
{
	float:left;
	width:200px;
}

.puffimagecontainer-right /* Container for right aligned puff image. Do not change float. */
{
	float:right;
	width:200px;
}

.puff1content-imageleft /* Box surrounding puff 1 content - to go with left align image. */
{
	width:356px;
	float:left;
}

.puff1content-imageright /* Box surrounding puff 1 content - to go with left align image. */
{
	width:356px;
	float:right;
}

.puffcontent /* Box surrounding puff content - to go with left align image. */
{
}

.puffcontentpadding /* Content padding for all puffs */
{
	padding:25px;
	padding-top:17px;
	padding-bottom:5px;	
}

.puffheading
{
	font-family:Arial;
	font-weight:normal;
	font-size:170%;
	color:#555555;
	margin-bottom:12px;
	margin-top:0px;
}

.puffheading a
{
	color:#555555;
}

.puffheading a:hover
{
	color:#878682;
}

.pufftext
{
	padding-bottom:15px;
	line-height:1.3em;
}

/* BOTTOM PUFF */

.bottompuffarea .puffrow
{
	background-image:url(../images/bg_puffrow_shadow.gif);
}

.bottompuffarea .puffcontentwrap
{
	background-color:#F6F7F5;
	border:6px White solid;
}

/********************************************

	PROGRAMINDEX PUFFS
	
********************************************/

.pagetype-programindex .mainpuffarea /* The box holding a puff area */
{
    background-color:#C6C6BF;
    padding-top:4px;
    padding-left:4px;
	width:500px;
	margin-left:-8px;
	margin-right:-8px;
}

.pagetype-programindex .mainpuffarea .puffrow
{
	width:500px;
}

.pagetype-programindex .mainpuffarea .puff1
{
	width:496px;
}

.pagetype-programindex .mainpuffarea .puffimagecontainer-left
{
    padding-right:2px;
    padding-bottom:2px;
}

.pagetype-programindex .mainpuffarea .puffimagecontainer-right
{
    padding-left:2px;
    padding-bottom:2px;
}

.pagetype-programindex .mainpuffarea .puff1content-imageleft
{
	width:290px;
}

.pagetype-programindex .mainpuffarea .puff1content-imageright
{
	width:290px;
	float:right;	
}

.pagetype-programindex .mainpuffarea .puffcontentwrap
{
    padding:2px;
    padding-bottom:0px;
}

.pagetype-programindex .mainpuffarea .puffcontentpadding
{
	padding:14px;
	padding-top:10px;
	padding-bottom:0px;	
}

.pagetype-programindex .mainpuffarea .puffheading
{
	font-weight:bold;
	font-size:150%;
	margin-bottom:5px;
}

.pagetype-programindex .mainpuffarea .pufftext
{
	padding-bottom:7px;
}

/* PUFF CAPTION - ONLY PROGRAM INDEX YET... */

.puffcaption
{
    visibility:hidden;
    display:none;
}

.pagetype-programindex .mainpuffarea .puffcaption
{
    display:block;
    visibility:visible;
    background-color:#4A4A49;
    color:White;
    font-size:91%;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:14px;
}

/* NEXT PROGRAM PUFF */

.pagetype-programindex .mainpuffarea .nextprogrampuff
{
    background-color:#B24834;
    color:#F8E5E2;
}

.pagetype-programindex .mainpuffarea .nextprogrampuff a
{
    color:#F8E5E2;
}

.pagetype-programindex .mainpuffarea .nextprogrampuff a:hover
{
    background-color:#CB5F3A;
}

.nextprogrampuff .iconlink
{
	background-image:url(../images/i_linkarrow_nextprogram.gif);
}

/********************************************

	SERIESINFO
	
********************************************/

#seriesinfo
{
	width:560px;
	padding-bottom:4px;
	margin-bottom:4px;
	background-image:url(../images/bg_seriesinfo_shadow.gif);
	background-position:right bottom;
}

#seriesinfocontent 
{
	background-color:#F6F7F5;
	border:6px White solid;
}

#seriesinfopadding
{
	padding-right:4px;	
}

/********************************************

	TRAILER
	
********************************************/

#trailer
{
	float:left;	
	width:242px;
	height:246px;
	background-image:url(../images/bg_seriesinfo_trailer.gif);
	background-repeat:no-repeat;
}

#trailerpadding
{
	padding:9px;
}

#trailerpadding img
{
	width:224px;
	height:168px;
}

#medialinkimagetext
{
    font-size:91%;
    line-height:1.5em;
    color:#444641;
    padding:14px;
    padding-top:7px;
    padding-bottom:7px;
}

/********************************************

	SCHEDULE
	
********************************************/

#schedule
{
	float:left;	
	width:302px;
	height:246px;
	background-image:url(../images/bg_seriesinfo_schedule.gif);
	background-repeat:no-repeat;	
}

#schedulepadding
{
	padding:9px;
	padding-top:20px;
}

#schedule h3
{
	margin:0;
	margin-bottom:4px;
}

#schedule p
{
	margin-top:4px;
	margin-bottom:7px;
	font-size:91%;
}

#schedule a:hover
{
	background-color:#E8E8E5;
}

.scheduleemaillink
{
	margin-top:7px;
	margin-left:2px;
	font-size:91%;
	padding-left:20px;
	float:left;
}

.schedulereminderlink
{
	margin-top:7px;
	margin-left:2px;
	font-size:91%;
	padding-left:20px;	
	float:left;
}

/* SERIESPROGRAMBOX */

#seriesprogrambox
{
	background-color:White;
	padding-top:5px;
	border-top:1px #B5AEA8 solid;
	border-right:1px #AAA39C solid;
	border-left:1px #F4F4F3 solid;
	border-bottom:1px #F4F4F3 solid;
	height:134px;
	overflow:auto;    
}

.seriesprogramboxprogram
{
    padding:2px;
    padding-left:5px;
    font-size:91%;
}

.seriesprogramboxnextprogram
{
    background-color:#EEEEEE;
    padding:2px;
    padding-left:5px;
    font-size:91%;
}

.seriesprogramboxprogram .programdate, .seriesprogramboxnextprogram .programdate
{
    float:left;
    width:40px;
}
/*
.seriesprogramboxprogram .programtitle, .seriesprogramboxnextprogram .programtitle
{
    b-ackground-color:Transparent;
}
*/

/*
#schedulebox
{
	background-color:White;
	padding-top:5px;
	border-top:1px #B5AEA8 solid;
	border-right:1px #AAA39C solid;
	border-left:1px #F4F4F3 solid;
	border-bottom:1px #F4F4F3 solid;
	height:134px;
	overflow:auto;
}

#schedule table
{
	border-collapse: collapse; 
	border-spacing: 0;
	margin-left:3px;
}

#schedule td
{
	vertical-align:top;
	padding:2px;
	font-size:91%;
}
*/

/********************************************

	INFOBOX
	
********************************************/

.infobox
{
	width:488px;
	padding-bottom:4px;
	background-image:url(../images/bg_infobox_shadow.gif);
	background-position:right bottom;
	margin-bottom:10px;
	margin-top:10px;
}

.infoboxpadding
{
	padding-right:4px;	
}

.infoboxheading
{
	background-image:url(../images/bg_infobox_heading.gif);
	margin:0;
	font-size:100%;
	padding:3px;
	padding-left:10px;
}

.infoboxcontentpadding
{
	margin-top:18px;
	padding-left:26px;
	padding-right:42px;
	margin-bottom:20px;
}

/********************************************

	TEST
	
********************************************/

.test {}

.test table
{
	border-collapse: collapse; 
	border-spacing: 0;
}

.testquestion {}

.testquestion h2
{
    font-family:verdana;
    font-size:100%;
}

.testquestion .indent
{
    width:30px;
}

.testquestion .correctanswer
{
    font-weight:bold;
    line-height:normal;
}

.testquestion .correct
{
    color:#009900;
    font-weight:bold;    
}

.testquestion .incorrect
{
    color:#cc0000;
    font-weight:bold;
}

/********************************************

	PAGETYPE-POPUP
	
********************************************/

.pagetype-popup #URtopbarMainBlock
{
    visibility:hidden;
    display:none;
}

body.pagetype-popup 
{
    margin:15px;
    margin-top:5px;    
}

/********************************************

	PROGRAMINDEX
	
********************************************/

/*

TODO

#programindexarea
{
	background-color:#C6C6BF;
	width:488px;
}

#programindexareapadding
{
	padding:5px;
	padding-right:0px;
}

.programpuff
{
	border:1px #E0E0DA solid;
	border-right:1px #9FA09A solid;
	border-bottom:1px #9FA09A solid;
	background-color:white;
	width:475px;
}

.programpuffpadding
{
	p-adding:2px;
	b-ackground-color:white;
}

.programpuffimagecontainer
{
	margin:2px;
	margin-right:0px;
	float:left;
	width:200px;
}

.programpuffcontent
{
	width:271px;
	float:left;
}
.programpuffcontentpadding
{
}

.programpuffheading
{
}

.programpufftext
{
}

*/


/********************************************

	PAGER
	
********************************************/

/********************************************

	FORUM
	
********************************************/

#forum
{
    margin-top:15px;    
}

/* FORUM BUTTONS */

.forumformbutton
{
	width: 110px;
}

.sendbutton
{
    width: 60px;
}

/* FORUM FORM */

.forumformcontainer
{
    width:469px;
}

.forumformtop
{
    padding-top:10px;
    padding-left:439px;
}


.forumformbottom
{
    height:7px;
    background-image:url(../images/bg_forumform_bottom.gif);
    background-repeat:no-repeat;
}

.forumformclosebutton
{
    display:block;
    background-image:url(../images/b_forumform_close.gif);
    width:21px;
    height:21px;
    background-repeat:no-repeat;
}

.forumform
{
    background-image:url(../images/bg_forumform.gif);
    background-repeat:no-repeat;
    color:White;
    
}

.forumformpadding
{
    padding-left:30px;
    padding-bottom:15px;
}

.forumforminputcaption
{
    padding-top:7px;
    padding-bottom:2px;
}

.forumform h2
{
    margin:0px;
    margin-bottom:15px;
    color:White;
    font-size:150%;   
}

.forumform input, .forumform textarea{
 width:400px;
    color: #3D4645;
    font-size: 100%; 
    font-family:Verdana;
}

.forumform .errormessage
{
}

/* FORUM POSTS */

.forumposts
{
    margin-top:20px;
    margin-left:-30px;
    margin-right:-30px;
    border-top:1px #D4D4D4 solid;
}

.forumpost
{
    padding-left:34px;
    padding-right:34px;
    padding-top:20px;
    padding-bottom:20px;
    border-bottom:1px #D4D4D4 solid;
}

.forumpost h3 
{
	margin:0;
	padding-left:14px;
	background-image:url(../images/i_forumtopic.gif);
	background-repeat:no-repeat;
	background-position:center left;
	font-family:Verdana;
	font-size:91%;
}

.forumpost a:hover
{
	background-color:#E8E8E5;	
}

.forumpost div
{
    padding-top:2px;
    padding-left:14px;
}

/* FORUM PAGER */

.forumpager
{
    font-size:91%;
    padding-top:10px;
	text-align:center;
}

.forumpager a
{
    font-weight:bold;
}

.forumpager a:hover
{
	background-color:#E8E8E5;	
}


/* PAGETYPE FORUMPOST */

.forumpostmessage
{
    margin-top:14px;
    line-height:1.4em;   
}

.pagetype-forumpost .forumpost h3, .pagetype-forumpost .forumpost div, .forumpostmessage
{
	padding-left:20px;
}

/********************************************

	POLL
	
********************************************/