/* =CSS Base; styles which apply to all style sheets */

/* Fixes to the new style */


/**/
/* =RemoveAll*/
body {font-size: 1em;}
#headerWrapper {font-size: 0.75em;}
#footer {font-size: 0.75em;}
a:hover {text-decoration:none;}

#innerBody {font-size: 62.5%;}
ul {margin: 0; padding: 0;}
	
ul li {list-style-type: none;}
    
table {border-collapse: collapse; border-spacing: 0;}

img {border: none;}

a {text-decoration: none; outline: none;}

input[type=radio],
input[type=submit],
input[type=checkbox],
input[type=image] {width: auto;}
    
/* ----------------------------------------------------*/

/* =FloatClearing */

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
        
.clearfix {display: inline-block;}
/*Hides from IE-mac*/
.clearfix {display: block;} 
/*end hide from IE-mac*/

/* ----------------------------------------------------*/
	
h1 {
	margin: 0 5px 10px 5px;
	padding: 5px;
	text-transform: uppercase;
	font-size: 1.3em;
	font-family: Arial, Helvetica, sans-serif;
	border-bottom: solid 1px #666;
	letter-spacing: .1em;
    }
    
/*Style for New to Preview*/
h1 small {
	text-transform: none;
	font-size: .7em;
	padding-left: 10px;
    }    

h2 {
	margin-bottom: 6px;
	text-transform: uppercase;
	font-size: 1.1em;
	font-family: Arial, Helvetica, sans-serif;
    }
    
/*---------------------------------------------------------*/
table {
    margin: 0;
    margin-top: 8px;
    width: 100%;
    color: #000;
    background-image: url(../images/BackgroundTile_Content.png);
    background-repeat: repeat;
    border: solid 1px #EEE;
    }
    
table input {margin-bottom: 0;}
    
th {
    padding: 3px 5px;
    background-color: #B4B4B4; 
    color: #FFF;
    font-weight: bold;
    font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
    letter-spacing: 1px;
    border-bottom: solid 1px #EEE;
    }

td {padding: 1px 5px; border: none;}

td a {
    display: block;
    padding: 3px 10px;
    background-image: url(../images/BackgroundTile_ContentLighter.png);
    background-repeat: repeat;
    border: dotted 1px #999;
    color: #333;
    text-align: center;
    }
    
table a:hover {background-image: none; background-color: #CCC; color: #000;}

/*-----Classes applied to column widths-----*/

/*background-image: url(../images/BackgroundTile_Content.gif); background-repeat: repeat; background-position: center top; background-attachment: fixed;*/

th.width5, td.width5 {width: 5%;}
th.width10, td.width10 {width: 10%;}
th.width15, td.width15 {width: 15%;}
th.width18, td.width18 {width: 18%;}
th.width20, td.width20 {width: 20%;}
th.width25, td.width25 {width: 25%;}
th.width30, td.width30 {width: 30%;}
th.width35, td.width35 {width: 35%;}
th.width40, td.width40 {width: 40%;}
th.width45, td.width45 {width: 45%;}
th.width50, td.width50 {width: 50%;}
th.width60, td.width60 {width: 60%;}
th.width65, td.width65 {width: 65%;}
th.width70, td.width70 {width: 70%;}
th.width80, td.width80 {width: 80%;}
th.width90, td.width90 {width: 90%;}
    
tr.SelectedRowStyle {
    color: #000; 
    background-color: #CCC;
    background-image: url(../images/Menu_Arrow.gif);
	background-repeat: no-repeat;
	background-position: left center;
    }
    
tr.plainRow {
    background-image: url(../Images/BackgroundTile_ContentLighter.png);
    background-repeat: repeat;
    }

tr.alterateRow {background-image: none;}
    
fieldset {
    padding: 11px;
    width: auto;
    border: solid 1px #A8A8A8;
    overflow: hidden;
    }

legend {
    padding: 0 6px 9px 6px;
    font-size: 1.3em;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: .1em;
    color: #444;
    }
    
fieldset fieldset {
    margin: 0;
    padding: 6px;
    border: solid 1px #EEE;
    background-image: url(../images/BackgroundTile_ContentLighter.png);
    background-repeat: repeat;
    }
    
fieldset fieldset legend {
    margin-bottom: 6px;
    padding: 0 6px;
    font-size: 100%;
    font-weight: normal;
    font-family: Verdana, Arial, Sans-Serif;
    letter-spacing: normal;
    color: #333;
    border: none;
    }
    
label { 
    width: auto;
    line-height: 1.8em;
    }
    
input, select {
    margin-bottom: 6px;
    padding-left: 3px;
    color: #333;
    width: 14.9em;
    }
    
select {
    margin-bottom: 4px;
    padding: 0;
    width: 15.7em;
    }
    
textarea {
    margin-bottom: 6px;
    padding: 0 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #666;
    overflow: auto;
    width: 15.4em;
    }
    
/*-----Classes applied to column widths-----*/

th.widthAuto, td.widthAuto {width: auto;}
th.width5, td.width5 {width: 5%;}
th.width6, td.width6 {width: 6%;}
th.width7, td.width7 {width: 7%;}
th.width10, td.width10 {width: 10%;}
th.width15, td.width15 {width: 15%;}
th.width20, td.width20 {width: 20%;}
th.width25, td.width25 {width: 25%;}
th.width30, td.width30 {width: 30%;}
th.width35, td.width35 {width: 35%;}
th.width40, td.width40 {width: 40%;}
th.width45, td.width45 {width: 45%;}
th.width50, td.width50 {width: 50%;}
th.width60, td.width60 {width: 60%;}
th.width65, td.width65 {width: 65%;}
th.width70, td.width70 {width: 70%;}
th.width80, td.width80 {width: 80%;}
th.width90, td.width90 {width: 90%;}

/* ----------------------------------------------------*/

/* =Colours (Genres & generic font colours)*/
   
/*Children's*/.yellow, .childrens {color: #FE9D1A;}
/*Comedy*/.orange, .comedy {color: #DF5623;}
/*Current Affairs & Documentaries*/ .darkRed, .currentAffairs {color: #830A2B;}  
/*Drama*/.red, .drama {color: #BD282E;}    
/*Factual Entertainment & Leisure*/.pink, .leisure {color: #C74D9E;}    
/*History*/.darkGreen, .history {color: #308D82;}
/*Music*/ .purple, .music {color: #712B7E;}  
/*Natural History*/.green, .naturalHistory {color: #A1B13A;}    
/*Science*/.darkBlue, .science {color: #333489;}
/*Formats*/.torquoise, .formats {color: #1A959F;} 

/*Others applied to unassigned genres etc*/
/*GreyMedium*/.midGrey, .unassignedGenre, .generic {color: #666;}
/*Grey*/.grey {color: #CCC;} 
/*OLC Grey*/.lightGrey {color: #DDD;} 
/*Main Font Grey*/.darkGrey {color: #333;}

/* ----------------------------------------------------*/

/* =dropShadowHolder, the following style creates the drop shadow on some of the UI elements.*/

.dropShadowHolder,
.dropShadowHolderWelcomeMessage,
.dropShadowHolderProgrammePage {
    margin: 5px 0 0 10px;
    }
    
.dropShadowHolderProgrammePage {margin: 0; margin-left: 10px;}
    
/*.dropShadowHolderWelcomeMessage {float: right; width: auto;}*/    
    
.dropShadowFade, .dropShadowFadeColour, .dropShadowFadeColour1 {
    margin-left: -5px;
    padding: 0 5px 5px 0;
    }
 
/* ----------------------------------------------------*/
/* =General Classes */

.bold {font-weight: bold;}
.borderBottom {border-bottom: 1px solid; border-bottom-color: inherit;}
.capitalize {text-transform: uppercase;} 
.italic {font-style: italic;}
.italicNotbold {font-style: italic; font-weight: normal;}
.boldGenericRed {font-weight: bold; color: #BD282E;} 

.marginTop20 {margin-top: 20px;}
.marginBottom3 {margin-bottom: 3px;}
.marginBottom5 {margin-bottom: 5px;}
.marginBottom10 {margin-bottom: 10px;}
.marginLeft10 {margin-left: 10px;}
.marginLeft5 {margin-left: 5px;}
.marginLeft6 {margin-left: 6px;}
.marginLeft20 {margin-left: 20px;}
.marginRight10 {margin-right: 10px;}
.marginTop5 {margin-top: 5px;}
.marginLeft5 {margin-left: 5px;}
.marginRight5 {margin-right: 5px;}
.marginNone input {margin: 0;}
.marginLeft1Em {margin-left: 1em;}/*2.6em*/
.marginTopBottom6 {margin: 6px 0;}

.padding5 {padding: 5px;}
.paddingLeft {padding-left: 5px;}
.paddingBottom6 {padding-bottom: 6px;}
.paddingLeft10 {padding-left: 10px;}
.paddingLeft15 {padding-left: 15px;}
.paddingLeft20 {padding-left: 20px;}
.paddingRight {padding-right: 5px;}
.paddingTop {padding-top: 5px}
.paddingBottom {padding-bottom: 5px;}
.paddingBottom10 {padding-bottom: 10px;}
.paddingBottom20 {padding-bottom: 20px;}
.paddingTop10 {padding-top: 10px;}
.paddingTop20 {padding-top: 20px;}
.paddingTopAndBottom5 {padding: 5px 0;}
.paddingTopAndBottom10 {padding: 10px 0;}
.paddingTopAndBottom20 {padding: 20px 0;}

.floatLeft {float: left;}
.floatLeft_clearLeft {float: left; clear: left;}
.floatRight {float: right;}
.floatRightGetPassword {float: right;}

.clearLeft {clear: left;}
.clearLeftMarginLeft {margin-left: 2.3em; clear: left;}
.clearRight {clear: right;}
.clear {clear: both;}
.clearPaddingTop {clear: both; padding-top: 5px;}

.positionRelative {position: relative;}

.width11em {width: 11em;}
.width2em {width: 2em;}

.minHeight13em {min-height: 13em;}

.justify {text-align: justify;}

.mandatoryFieldStdReg {margin: -10px 0 10px 0;}
.mandatoryField {margin: 0 0 16px 0;}

.specialPaddingTAndCs {padding-left: 15px;}

.displayNone {display: none;}

/* =hr between menu groups in nav and other areas*/

.horizontalRule,
.horizontalRule1,
.horizontalRule2 {
    margin: 5px;
	height: 2px;
	background-image: url(../images/HR_Divider.gif);
	background-repeat: repeat-x;
	background-position: bottom center;
    }
    
.horizontalRule1 {margin: 10px 0;}
.horizontalRule2 {margin: 10px 5px;}
    
.border {border: solid 1px #999;}
.borderRed {border: solid 1px red;}
a.noBorder {border-bottom: none;}

.displayBlock {display: block;}

.largerFont {font-size: 120%;}
.largerFontBold {font-size: 120%; font-weight: bold;}

img.nowLoading {margin-left: 8px; color: #333;}

.spinnerGif {width: 36px; height: 36px;}

/*=Thumbnail the following style wraps the thumbnail in Search, After Sales and new to Preview screens*/

.thumbnail {
    margin-right: 10px;
    padding: 5px;
    float: left;
    width: 132px;
    height: 88px;
    background-color: #EEE;
    border: solid 1px #CCC;
    text-align: center;
    }
    
/* =FloatClearing */

.thumbnail:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
        
.thumbnail {display: inline-block;}
/*Hides from IE-mac*/
.thumbnail {display: block;} 
/*end hide from IE-mac*/

/*----------------------------------------------------*/
/*The following styles the Favourite and Preview icons*/

/* =FloatClearing for icons, (because they're used in a class for a
repeater in some areas of OLC)*/

div.favouriteIcon:after,
div.previewIcon:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
        
div.favouriteIcon, .previewIcon {display: inline-block;}
 /*Hides from IE-mac*/
div.favouriteIcon, .previewIcon {display: block;}
 /*end hide from IE-mac*/

div.favouriteIcon,
div.previewIcon {float: left; /*border: 1px solid blue;*/}
    
div.previewIcon {position: relative;}
    
div.favouriteIcon, div.favouriteIcon img {width: 20px; height: 20px;}
div.previewIcon, div.previewIcon img {width: 24px; height: 20px;}

div.favouriteIcon a,
div.previewIcon a,
div.favouriteIcon a:hover,
div.previewIcon a:hover {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    /*background-color: lime;*/
    }
 
div.favouriteIcon a:hover {
    background: url(../images/Favourites_Over.gif) no-repeat left top;
    }   
div.previewIcon a:hover {
    background: url(../images/Previews_Over.gif) no-repeat left top;
    }
    
#rightColumnHome div.favouriteIcon a {padding: 0; border: none;}

/*=HD Logo--------------------------------------------*/

a.HDLogo {
    margin: 3px 6px 0 0;
    float: left;
    display: block;
    width: 26px;
    height: 16px;
    }
    
a:hover.HDLogo {
    background: url(../images/HD_Logo_Over.gif) no-repeat center top;
    display: block;
    }

/*----------------------------------------------------
The following image is placed in the control for the preview and favourites
areas on the home page, it floats an image right so the the rest of the content
flows around the fav and preview graphics*/

img.aroundGraphic,
img.aroundGraphic1,
img.aroundGraphic2,
img.aroundGraphic3 {
    margin-top: -10px;
    float: right;
    width: 40px;
    height: 60px;
    /*border: 1px solid #FFF;*/
    }
    
img.aroundGraphic1 {
    margin: 10px 3px 0 0;
    clear: right;
    height: 78px;
    } 
    
img.aroundGraphic2 {
    margin: 0 0 0 5px;
    clear: right;
    height: 187px;
    }
    
img.aroundGraphic3 {
    margin: 0;
    clear: right;
    height: 20px;
    width: 45px;
    }
    
 /* 
	CLASS ADDED BY SIMON ROBERTS 12/02/09 
	This is to deal with content on the Themed Promotions page 
	previously being pushed down by the height value */
img.aroundGraphic4 {
    margin: 0;
    clear: right;
    width: 45px;
    }
    
/* ----------------------------------------------------
The following styles some of the classes used in the home right hand column*/

.recentItem {margin: 6px 0;}
    
/* ----------------------------------------------------*/          
/* The following styles the link, which expands and collapses the Advanced Search Filter*/
/*------------ =ExpandCollapseMenu ------------
The following styles are for buttons that expand and collapse menus e.g. EPK and
Advanced Search Criteria*/

.expanded,
.collapsed {margin-left: 6px;}

.expanded a,
.collapsed a {
    padding: 0 18px;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 1.2em;
    letter-spacing: 1px;
    color: #333/*#BD282E*/;
    border: none;
    }
    
.expanded a {
    background-image: url(../images/Collapse.gif);
	background-repeat: no-repeat;
	background-position: left;
    }
    
.collapsed a {
    background-image: url(../images/Expand.gif);
	background-repeat: no-repeat;
	background-position: left;
    }
    
.expanded a:hover,
.collapsed a:hover {color: #000;}

/*------------ =Messages ------------*/
.errorStyle,
.successStyle,
.errorStyleColumn {
    margin: 0 22px;
    color: #333;
	color: #000;
	}

.errorStyleColumn {
    margin: 0;
    padding: 2px 3px;
    /*border: 1px dotted #666;*/
    }
    
.successStyleReminder {
    margin: 6px 0 16px 0;
    padding: 6px;
    border: 1px dotted #EEE;
    background-image: url(../images/BackgroundTile_ContentLighter.png);
    background-repeat: repeat;
    }
    
p.errorStyleColumn a:link,
p.errorStyleColumn a:visited,
p.errorStyleColumn a:hover,
p.errorStyleColumn a:active {color: #333; border-bottom: 1px dotted #333;}

p.errorStyleColumn a:hover {color: #BD282E; border-color: #BD282E;}
    
.successStyle {
    margin: 0 22px;
    text-align: center;
    background-image: none;
    }
    
.warningRed {color: #FF3300;}
  
.validationWrapper {
    margin: 0 auto;
    width: auto;
    display: block;
    background-image: url(../images/BackgroundTile_Content.gif);
	background-repeat: repeat-y;
	background-position: top center;
	background-attachment: fixed;
    }

/* ----------------------------------------------------*/
    
/*Background bar for all input buttons and button widths used on Search screens*/

.inputButtons {   
    text-align: center;
    padding: 11px;
    clear: both;
    }
    
.inputButtons input {width: 5em;}

/*The following class applies to fields that are not updatable or read-only*/

span.readOnlyField {
    padding: 2px 3px;
    width: 96%;
    display: block;
    background-color: #EEE;
    border: 1px solid #CCC;
    font-size: 1.1em;
    font-family: Arial, Helvetica, Sans-Serif;
    color: #666;
    }
 
/* -------------------------=Pagination---------------------------*/
/*Added in clearfix class into first 3 rules below*/
.paginationRecordCount_Wrapper:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
        
.paginationRecordCount_Wrapper {display: inline-block;}
/*Hides from IE-mac*/
.paginationRecordCount_Wrapper {display: block;} 
/*end hide from IE-mac*/

.paginationRecordCount_Wrapper {
    padding: 0 5px;
    width: auto;
    line-height: 2em;
    }
    
.pagination {float: left; /*border: 1px solid #FFCCFF;*/}

.pagination a {
    padding: 0 3px;
    color: #000;
    border-bottom: 4px solid transparent;
    }  
    
.pagination a:hover {
    border-bottom: 4px solid #999;
    color: #FFF;
    background-color: #BD282E;
    }
    
/*The following style is for the disabled link (the page you're on) in the pagination*/

.pagination a.disabledLink {
    border-bottom: 4px solid #999;
    color: #FFF;
    background-color: #BD282E;
    font-weight: bold;
    }
    
/* padding here to prevent the count being hidden behind the flowing previews rollover */
.recordCount {float: right; /*background-color: 1px solid #99CC66;*/}
    
/* The following styles are used in the Search results screen for criteria descriptions etc*/

p.searchAgain, p.noAfterSales {
    margin: 5px;
    padding-left: 20px;
    line-height: 1.4em;
    }
    
p.critDescription {
    margin: 0;
    padding-left: 0;
    padding-bottom: 5px;
    font-size: 1.2em;
    /*border-bottom: dotted 1px #666;*/
    }

p.critDescription .searchTerm {
    font-weight: bold;
}

p.searchAgain, p.noAfterSales { 
    padding: 5px;
    line-height: 1.6em;
    background-image: url(../Images/BackgroundTile_Content.png);
    background-repeat: repeat;
    }
    
p.searchAgain a { 
    padding-left: 2px;
    color: #BD282E;
    border-bottom: dotted 1px #BD282E;
    }
    
p.searchAgain a:hover {color: #000; border-bottom-color: #000;}
    
/*Search button for Quick Search and After Sales search*/

.buttonSearch {
	margin-left: 2px;
	float: left;
	width: 24px;
	height: 18px;
	background-color: #CCC;
	border: none;
	cursor: pointer;
	background-image: url(../Images/GoButton.gif);
	background-repeat: no-repeat;
	}
	
.buttonSearch:hover {
	background-color: transparent;
	background-image: url(../Images/GoButton_Over.gif);
	background-repeat: no-repeat;
    }

/*Close button for most pop-up lists e.g. Favourites, Previews, Request Preview*/

.buttonClose {
	position: absolute;
    top: 5px;
    right: 5px;
    z-index: 5;
	border: none;
	cursor: pointer;
	background-color: #CCC;
	width: 16px;
	height: 16px;
	background-image: url(../Images/ButtonClose.gif);
	background-repeat: no-repeat;
	}
   
.buttonClose:hover {	
    background-image: url(../Images/ButtonClose_Over.gif);
	background-repeat: no-repeat;
	}

/*Class found in programme page*/
.playClipLink {cursor: pointer;} 
    
/*------- Style to get user to notice something important, taken from #register #B2B_Site -------*/
    
div.takeNote {
    margin: 6px 0 10px 0;
    padding: 6px;
    border: 1px dotted #EEE;
    background-image: url(../images/BackgroundTile_ContentLighter.png);
    background-repeat: repeat;  
    }
    
div.takeNote h2 {
    margin-bottom: 0;
    display: inline;
    color: #BD282E; 
    letter-spacing: 1px;
    border-bottom: none; 
    }

div.takeNote p {display: inline; line-height: 1.4em;}