/*

STYLESHEET FORMATTING:
	- Place new style rules near associated pre-existing rules
	- Remove deprecated styles as required
	- Use the separate ie6.css and ie7.css stylesheets for hacks relating to those browsers (those stylesheets show up only when required)

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

body { font-family: Verdana, Arial, Helvetica, Sans-serif; font-size: 8pt; margin: 0; background-color: White; color: Black; }

/* only used in the page logo area - exactly 1 element should appear per page. note that the h1 tag is an element of primary importance with
	regards to search engine indexing. The text that appears inside the h1 tag can have a large impact on decisions made by search engines relating
	to search term relevance. Matching h1 text to title tag text also impacts (strengthens) page's relevance to the text contained within.
*/
#TitleAndBanner h1 { font-family: Arial, Sans-serif, Verdana; font-size: 18pt; font-weight: bold; line-height: 24pt; letter-spacing: -0.05em; overflow: hidden;
	background-image: url(../images/title.jpg); background-position: 0 100%; float: left; width: 239px; height: 89px; margin: 0 0 2px 0; padding: 0; }

/* h2 tags should only appear once on a page. Whilst h1 tags are used to head the page in a way that is relevant to the whole site, the h2 tag
	should contain text that indicates the subject matter of a page as a whole. The h2 tag should only appear once per page on this website and
	should be used where possibe in order to assist search engines determine relevance. */
h2 {  }

/* whilst this styling has been designed for form.boxform, h3 tags can (and should) still be used in other areas where a subheading is relevant.
	h3 tags can help search engines determine subject matter more effectively. Multiple h3 tags may be used on each page as required. */
h3, h4 { font-family: Arial, Sans-serif; letter-spacing: -0.05em; font-weight: bold; margin: 1em 0; color: #556;}
h3 { font-size: 16pt; }
h4 { font-size: 13pt; }
.boxform h3 { color: #094F8D; margin: 0 0 1em; }

/* form elements should not take up any page space where possible, as it interferes with minimalistic layouts */
form { display: inline; margin: 0; }

/* standard tabular data presentation classes */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; background-color: #ddd; color: black; padding: 3px 6px 4px 6px; white-space: nowrap; border: 1px solid white; }
td { vertical-align: top; padding: 2px 4px 4px 4px; border-bottom: 1px dotted #ccc; }
td.label { font-weight: bold; white-space: nowrap; padding-right: 8px; }
td.altcolumn, div.altcolumn { background-color: #f8f8f8; }
tr.alt td {  }

/* standard question/answer format; questions are bold, answers are normal. margin between each. */
dl { margin: 0; }
dt { font-weight: bold; margin: 0 0 4px 0; }
dd { margin: 0 0 24px 0; }
.WideColumnAfterLeft dl,
.ColumnAfterLeft dl { padding: 1em; }

/* standard box form setup. padded interior with light coloured background; labels floated to the left of the fields they precede */
.boxform { padding: 1em; background-color: #DCE5EE; display: block; }
dl.form { }
dl.form dt { clear: left; margin: 0 0 4px 0; display: block; float: left; width: 120px; font-size: 8pt; font-weight: bold; line-height: 20px; }
dl.form dd { margin: 0 0 4px 0; }
dl.form dt .optional { font-weight: normal; color: #666; }
p.submit { margin-bottom: 0em; }
.boxform>dl+p { border-top: 1px dotted #7D8093; padding-top: 12px; }
.boxform>p { margin: 1em 0 0 0; }
.boxform+.boxform { margin-top: 8px; }
div.validation-advice, div.advice { color: Red; margin-bottom: 10px; font-size: 8pt; clear: both; line-height: 11pt; padding: 2px 0 2px 120px; }
input.button { background-color: #094F8D; border-style: outset; border-width: 2px; border-color: #094F8D; font-weight: bold; color: White; padding: 1px 4px 1px 4px; }
dl.form dd input, dl.form dd textarea, .boxform input.text { border: 1px solid #99a; background-color: white; }
.WideLeftColumn dl.form dd input,
.WideLeftColumn dl.form dd textarea { width: 274px; }
dl.form dd input,
dl.form dd textarea { width: 142px; }
.widefields p input.text { width: 262px; }

dl.form dd.UpdateProfileDisplayBad { margin-bottom: 5em; }

/* dummy div class for forcing left/right clearance following a floated element */
.clearfix { clear: both; overflow: hidden; height: 0; }

/* column arrangement classes. note that ColumnAfterLeft and ColumnBeforeRight should both be applied if a left and right column are present */
.LeftColumn { width: 310px; float: left; }
.ColumnAfterLeft { margin-left: 318px; }
.ColumnBeforeRight { margin-right: 318px; }
.RightColumn { width: 310px; float: right; }
.WideLeftColumn { width: 450px; float: left; }
.WideColumnAfterLeft { margin-left: 458px; }

/* link styles applied only to content area and footer to avoid conflicts with title and navigation areas */
#MainContent a, #MainFooter a { color: #094F8D; }
#MainContent a:hover, #MainFooter a:hover { text-decoration: none; color: White; background-color: #094F8D; }

/* success/error message styles */
#MainContent .TopMessageGood { color: Green; font-weight: bold; border-bottom: 2px solid green; text-align: center; padding: 8px 0 8px 0; margin-bottom: 8px; }
#MainContent .TopMessageBad { color: Red; font-weight: bold; border-bottom: 2px solid red; text-align: center; padding: 8px 0 8px 0; margin-bottom: 8px; }

/* single element surrounding all other elements on the page. This should generally be the only child of the body tag */
#PageContainer { margin: 0 16px; position: relative; }

/* contains the main h1 tag and advertising banner */
#TitleAndBanner { margin-bottom: 2px; height: 90px; }

/* note that whilst this style hides any h1 linked text so that only the title image is shown, significant textual deviation from
	between the plain text and text on the image can be considered grounds for penalisation by search engines if reported. */
#MainHeader h1 a { text-decoration: none; display: block; overflow: hidden; text-indent: -5000px; width: 100%; height: 100%; }

/* contains a banner ad of size 742px/92px in size. 90px height is strict, but the width can be changed as required. */
#TopBannerAdLocation { float: right; margin-left: 2px; width: 728px; height: 90px; background-color: #e5e5e5; border-left: 2px solid white; }
#TopBannerAd { position: absolute; top: 0px; right: 0px; width: 728px; z-index: 100; }

/* styles for the navigational tabs. significant tweaking has been done to get this to work across multiple browsers, so modify with caution. */
#MainNavigation { clear: both; height: 25px; overflow: hidden; background-color: #f2f2f2; font-family: Tahoma, Arial, Sans-serif; }
#MainNavigation ul { padding: 0; margin: 0; float: left; height: 25px; background-color: #7D8093; }
#MainNavigation ul li { display: block; float: left; height: 25px; line-height: 25px; }
#MainNavigation ul li a { background-position: 100% 0; background-repeat: no-repeat; color: white; font-weight: bold; text-decoration: none; display: block; height: 100%; padding: 0 25px 0 8px; }
#MainNav_Home a { background-image: url(../images/icon-home.gif); }
#MainNav_Articles a, #MainNav_NewCustomer a { background-image: url(../images/icon-multiple.gif); }
#MainNav_Manage a { background-image: url(../images/icon-plus.gif); }
#MainNav_HowItWorks a { background-image: url(../images/icon-question.gif); }
#MainNav_MyAccount a { background-image: url(../images/icon-spanner.gif); }
#MainNav_Blog a { background-image: url(../images/icon-blog.gif); }
#MainNav_SignOut a { background-image: url(../images/icon-exit.gif); }
#MainNavigation ul li.selected,
#MainNavigation ul li.unselected a:hover { background-color: #094F8D; }
#MainNavigation ul li.unselected { background-color: black; }
#MainNavigation ul li { border-right: 2px solid white; }

/* drop-down box to the right of navigational tabs on article viewer page; for selecting feed source/category */
#ChangeFilter { padding: 0pt 25px 4px 8px; color: #fff; vertical-align: middle; float: left; white-space: nowrap; }
#ChangeFilter select { width: 180px; vertical-align: middle; }
#ChangeFilter select#FeedId { font-size: 8pt; }

/* the options bar contains controls sitting on the inner right of the navigation bar */
#OptionsBar { padding-top: 3px; padding-right: 3px; height: 22px; text-align: left; background-image: url(../images/OptionsBar.png); background-repeat: repeat-x; white-space: nowrap; }
#OptionsBar span.label { color: black; vertical-align: middle; }
#OptionsBar span.input input { height: 13px; width: 100px; padding: 2px; border: 1px solid black; font-family: Verdana, Sans-serif; font-size: 8pt; vertical-align: middle; }
#OptionsBar span.button input { background-color: black; color: white; font-weight: bold; font-family: Verdana, Sans-serif; font-size: 10px; height: 19px; padding: 2px 4px 2px 4px; border: 0; vertical-align: middle; }
#OptionsBar form#SearchForm { float: right; }

/* Main footer and content styles; these appear on every page */
#MainFooter { clear: both; margin-top: 6px; padding: 8px 0 16px 0; text-align: center; font-size: 9pt; border-top: 1px solid #ddd; }
#MainContent { font-family: Verdana, Sans-serif; font-size: 10pt; line-height: 14pt; margin-top: 10px; }

/* Article styles; possible candidate for simplification */
div.Article { clear: both; margin: 8px 0 8px 0; }
div.Article p { margin: 0 0 4px 0; }
div.Article div.Header { padding: 5px 8px 5px 0; background-color: #ddd; position: relative; }
div.Article div.HeaderRead { }
div.Article div.HeaderUnread { }
div.Article h3 { margin: 0; }

div.ArticleGood div.Header h3 a, .BadPresExpanded div.Header h3 a { padding-right: 1em; background-image: url(../images/icon-readmore.gif); background-position: 100% 100%; background-repeat: no-repeat; }
div.ArticleGood div.Header h3 a:hover, .BadPresExpanded div.Header h3 a:hover { padding-right: 1em; background-image: url(../images/icon-readmore-inverted.gif); background-position: 100% 100%; background-repeat: no-repeat; }
.BadPresExpanded div.ArticleCollapsed div.Header h3 a, .BadPresExpanded div.ArticleCollapsed div.Header h3 a:hover { padding-right: 0em; background-image: none; }

div.Article h3 img { margin-right: 6px; }
#MainContent div.Article h3 a { text-decoration: none; color: #445; }
#MainContent div.Article div.HeaderRead h3 a { text-decoration: none; color: #999; }
#MainContent div.Article h3 a:hover { text-decoration: none; color: white; }
div.Article div.Rate { text-align: right; vertical-align: middle; font-weight: bold; }
div.Article div.Rate span.Label, div.Article div.Rate img { vertical-align: middle; }
div.Article Author { font-weight: bold; color: #0F479A; }
div.Article FeedName { font-weight: bold; }
div.Article div.SubHeader { border-bottom: 1px solid #ccc; padding: 4px 0 4px 4px; font-size: 8pt; }
div.Article div.Body { padding: 6px 4px 4px 4px; }
div.Article div.Body .feedflare { display: none; }
div.Article div.Body div.LongVersion { display: block; }
div.Article .ArticleBad { display: none; }
div.Article .Selected { }
div.Article div.Body h1, div.Article div.Body h2, div.Article div.Body h3 { font-size: 1.2em; margin: 1.7em 0em 0.9em 0em; text-decoration: none; } 
div.Article div.Body h4, div.Article div.Body h5, div.Article div.Body h6 { font-size: 1em; margin: 1.7em 0em 0.9em 0em; text-decoration: none; }

.BadPresCollapsed div.Article .ArticleNotSure { font-size: smaller; }
.BadPresCollapsed div.ArticleNotSure { margin: 0; border-top: 1px dotted #ddd; padding: 3px 0 3px 0; position: relative; }
.BadPresCollapsed div.Article div.ArticleNotSure div.ShortVersion { display: block;}
.BadPresCollapsed div.Article div.ArticleNotSure div.LongVersion { display: none;}
.BadPresCollapsed div.ArticleNotSure div.ArticleInfo { white-space: nowrap; overflow: hidden; }
.BadPresCollapsed div.ArticleNotSure div.ArticleInfo div.ArticleHeaders { margin-right: 118px; overflow: hidden; }
.BadPresCollapsed div.ArticleNotSure div.Header { background-color: transparent; display: inline; position: static; padding: 0 0 0 4px; vertical-align: middle; }
.BadPresCollapsed div.ArticleNotSure div.Header h3 { font-size: 11pt; display: inline; }
.BadPresCollapsed div.ArticleNotSure div.Body h1,
.BadPresCollapsed div.ArticleNotSure div.Body h2,
.BadPresCollapsed div.ArticleNotSure div.Body h3,
.BadPresCollapsed div.ArticleNotSure div.Body h4 { margin-top: 0em; padding-top: 0em; color: inherit; font-weight: normal; font-size: 8pt; letter-spacing: normal; }
.BadPresCollapsed div.ArticleNotSure div.Header h3 a { color: #997; }
.BadPresCollapsed div.ArticleNotSure div.SubHeader { color: #ccc; display: inline; border-bottom: 0; vertical-align: middle; }
.BadPresCollapsed div.ArticleNotSure div.ProbabilityBar { position: absolute; top: 5px; right: 8px; }
.BadPresCollapsed div.ArticleNotSure div.LikeControls { display: none; }
.BadPresCollapsed div.ArticleNotSure h3 img { display: none; }
.BadPresCollapsed div.ArticleNotSure div.Body { line-height: 10pt; font-size: 8pt; white-space: nowrap; overflow: hidden; color: #999; max-height: 12pt; margin-right: 8px; }
.BadPresCollapsed div.ArticleNotSure div.Body br { display: none; }
.BadPresCollapsed div.ArticleNotSure div.Body p { display: inline; padding-bottom: 1em; }
.BadPresCollapsed div.ArticleNotSure div.Body div { display: inline; }
.BadPresCollapsed div.ArticleNotSure div.Body img,
.BadPresCollapsed div.ArticleNotSure div.Body pre,
.BadPresCollapsed div.ArticleNotSure div.Body table { display: none; }
.BadPresCollapsed div.ArticleNotSure .ArticleExpandCollapseLink { background-position: 0px 0px;}

div.ArticleCollapsed { border-top: 1px dotted #ddd; margin: 0; position: relative; }
div.ArticleCollapsed div.ArticleInfo { white-space: nowrap; overflow: hidden; }
div.ArticleCollapsed div.ArticleInfo div.ArticleHeaders  { margin-right: 118px; overflow: hidden; }

div.ArticleCollapsed div.Header { background-color: white; display: inline; padding: 0 0 0 4px; position: static; }

div.ArticleCollapsed div.SubHeader { color: #ccc; display: inline; border-bottom: 0; }
div.ArticleCollapsed div.SubHeader a { color: #ccc; }
div.ArticleCollapsed h3 { display: inline; margin: 0; font-size: 8pt; }
div.ArticleCollapsed h3 a { color: #999; }
div.ArticleCollapsed h3 img { display: none; }
div.ArticleCollapsed div.ProbabilityBar { position: absolute; top: 2px; right: 8px;z-index:5;  }
div.ArticleCollapsed div.LikeControls { position: absolute; top: 2px; right: 0px; z-index:3; }
div.ArticleCollapsed div.LikeControls .ReadStatusIndicator { display: none; }
div.ArticleCollapsed div.Body { display: none; }
div.ArticleCollapsed .ArticleExpandCollapseLink { background-position: 0px 0px;}
.BadPresHidden div.ArticleBad, .BadPresHidden div.ArticleNotSure, .BadPresHidden div.ArticleCollapsed {display:none;}
.ArticleExpandCollapseLink { background-image: url(../images/plusminus.gif); width: 16px; height: 16px; float: left; overflow: hidden; text-decoration: none; margin: 2px 2px 0 4px; background-position: -16px 0;}
.ArticleExpandCollapseLink img { width: 16px; height: 16px; border: none; }
#MainContent a.ArticleExpandCollapseLink:hover { background-color: transparent; }
.BadPresCollapsed .ArticleNotSure:hover, .ArticleCollapsed:hover { background-color: #f7f7f7; cursor: default; }
.BadPresCollapsed .ArticleNotSure:hover .Header, .ArticleCollapsed:hover .Header { background-color: #f7f7f7; }

/*fix for a firefox 2 & 3 bug where some embedded flash content won't be hidden when it should be*/
.BadPresCollapsed .ArticleNotSure embed { display: none; }


/* home page styles */
#HomeRecentArticles { padding: 1px 1em; }
#HomeRecentArticles ul { padding: 0; margin: 0; list-style-position: inside; }
#HomeRecentArticles li { white-space: nowrap; overflow: hidden;}
#HomeLogin { float: right; margin-left: 8px; width: 332px; background-color: #DCE5EE; }
#HomeHow { float: left; width: 270px; }
#HomeHow p { margin: 0.5em 0; }
#HomeHow img { width: 260px; height: 145px; }
#HomeAbout { margin-top: 1em; clear: right; }
#HomeAbout p { text-align: justify; }

/* specific styles for the feed management page; applies to table rows containing feeds that have not successfully downloaded */
.FeedDescription_Unavailable .Label { font-weight: bold; }
.FeedDescription_Unavailable { color: Red; line-height: 10pt; }
.FeedDescription_Unavailable .Row { margin: 4px 0 4px 0; }

/* contains the like/dislike buttons and the probability bar */
.LikeControls { float: right; width: 250px; margin-right: 8px; }
.AddFeedControls { float: right; width: 200px; }

/* Indicator for whether the Article has been read by the customer */
.ReadStatusIndicator a
{
	display: block;
	width: 40px;
	height: 12px;
	overflow: hidden;
	background-image: url(../images/read-buttons.png);
} 

.ReadStatusIndicator { float: right; margin-top: 3px; margin-right: 5px;}
.ReadStatusIndicator .Read { background-position: 0px 12px; } 
.ReadStatusIndicator .Unread { background-position: 0px 0px; } 

/* the probability bar is built with 4 elements so that it is easily stylable and degrades cleanly */
.ProbabilityBar { background-color: white; height: 11px; padding: 1px; border: 1px solid #a6a6a8; overflow: hidden; width: 100px; position: absolute; top: 8px; right: 8px; }
.ProbabilityBar .Container { height: 11px; overflow: hidden; background: url(../images/probability-bar-shading-inverse.png) repeat-x; }
.ProbabilityBar .Container .PercentageBar, .ProbabilityBar .Container .PercentageBar_Empty { height: 11px; overflow: hidden; }
.ProbabilityBar .Container .PercentageBar .InnerBar { background: url(../images/probability-bar-shading.png) repeat-x; }
.ProbabilityBar .Container .PercentageBar .InnerBar, .ProbabilityBar .Container .PercentageBar_Empty .InnerBar { width: 100%; height: 100%; overflow: hidden; font-size: 7pt; line-height: 10px; text-indent: 2px; color: #666; }
.ProbabilityBar .Container .PercentageBar .InnerBar .ProbabilityValue, .ProbabilityBar .Container .PercentageBar_Empty .InnerBar .ProbabilityValue { position: absolute; top: 1px; right: 2px; letter-spacing: -0.05em; }

/* the rating button applies to the element containing the anchor tag that contains the actual rating button element */
.RatingButton a,
.RatingButton span.inner { height: 15px; width: 51px; overflow: hidden; vertical-align: top; margin-left: 2px; float: right; background-image: url(../images/rating-buttons.gif); }
#MainContent .RatingButton a:hover { background-color: White; }

/* alternate states for the like/dislike buttons */
.LikeClickable a:hover { background-position: 0 0; }
.LikeClickable_NoSelection a:hover { background-position: 0 0; }
.DislikeClickable a:hover {  background-position: 51px 0; }
.DislikeClickable_NoSelection a:hover { background-position: 51px 0; }
.LikeClickable a { background-position: 0 -30px; }
.LikeClickable_NoSelection a { background-position: 0 -15px; }
.LikeDisabled span.inner { background-position: 0 -30px; }
.LikeSelected span.inner { background-position: 0 0; }
.DislikeClickable a { background-position: 51px -30px; }
.DislikeClickable_NoSelection a { background-position: 51px -15px; }
.DislikeDisabled span.inner { background-position: 51px -30px; }
.DislikeSelected span.inner { background-position: 51px 0; }

/* colouring relating to auto-collapsed items */
.PartCollapsedExplanation { background-color: #ffe; color: #999; }
.FullCollapsedExplanation { background-color: #fee; color: #999; }

/* image input buttons (which traditionally align poorly) have been used within the rating button elements in order to allow for disabled javascript */
.RatingButton input { margin: 0; vertical-align: top; line-height: 15px; position: relative; height: 15px; }

/* the loading animation that indicates that the rating operation is being committed */
.RatingLoadingIndicator { float: right; width: 16px; height: 16px; vertical-align: middle; margin-right: 10px; background-image: url(../images/loading.gif); }

/* appears at the bottom of the page as part of the "super scroll" feature */
.loading_more_articles { background: url(../images/loading.gif) no-repeat 0 50%; padding-left: 24px; }

/* appears when initially loading search or view article results and the article probabilities are being calculated */
.calculating_article_probabilities { background: url(../images/loading.gif) no-repeat 0 50%; padding-left: 24px; }

/* the HowItWorks page styles */
#HowItWorks div.Step { clear: left; margin-bottom: 2em; }
#HowItWorks img.Step { float: left; margin-right: 1em; margin-bottom: 2em; }

.syndicationhighlight { color: #094F8D; font-weight: bold; }
p.syndicationcode { width: 100%; background-color: #ffffff; overflow: scroll; }

#ContentModule { padding-top: 1em; }
#ContentModule>h3 { margin: 0 0 1em; }

/* view articles page, when articles are filtered, has a block of text about the filtering */
#ArticleFilterInfo, div.BadArticleDisplayOptions, div.InformationBox { margin: 0 0 1em 0; padding: 1em 1.4em 1em 1.4em; line-height: 1.6em; background-color: #ffffd7; border:1px solid #cc9; text-align: left; }
div.BadArticleDisplayOptions p { margin-top: 0em; }
#ArticleFilterInfo #Search { margin-top: 0.7em; border-top: 1px solid #cc9; padding-top: 0.7em; }
#ArticleFilterInfo #Search p { margin: 0; }